-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathModernHTMLTemplate.html
82 lines (65 loc) · 8.58 KB
/
ModernHTMLTemplate.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!doctype html>
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<style>
@import url(http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext);
</style>
<p style="margin: 0 0 20px 0;orphans: 3;widows: 3;">
</p>
<div style="display: flow-root;box-sizing: content-box;max-width: 1400px;margin-left: auto;margin-right: auto;padding-left: 15px;padding-right: 15px;position: relative!important; font-family: 'Lato', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;">
<div class="uk-grid uk-child-width-auto" style="display: flex;flex-wrap: wrap;margin: 0;padding: 0;list-style: none;margin-left: -30px;">
<div style="margin: 0;padding-left: 40px;box-sizing: border-box;width: auto;"><img src="https://forums.mspgeek.org/uploads/monthly_2019_01/MSPGeekLogo_forum2.png.d72d26aaaa6ea74d0f2143d7a46154da.png" class="fr-fic fr-dii" width="250" height="140" style="vertical-align: middle;max-width: 100%!important;height: auto;box-sizing: border-box;page-break-inside: avoid;margin-bottom: 0;"></div></div>
<div style="margin-bottom: 0;">
<div class="uk-card uk-card-default" style="position: relative;box-sizing: border-box;transition: box-shadow .1s ease-in-out;background-color: #fff;color: #000;box-shadow: 0 5px 15px rgba(0,0,0,.08);">
<div class="uk-card-header" style="color: #fff;background-color: #0e3d5a;display: flow-root;padding: 20px 40px;border-bottom: 1px solid #e5e5e5;">
<div class="uk-grid-small uk-flex-middle" style="margin-left: -15px;align-items: center;margin-bottom: 0;">
<div class="uk-width-auto" style="padding-left: 15px;box-sizing: border-box;width: auto;max-width: 100%;">
<br>
</div>
<div class="uk-width-expand" style="padding-left: 15px;box-sizing: border-box;width: 100%;max-width: 100%;flex: 1;min-width: 1px;">
<h3 class="uk-card-title uk-margin-remove-bottom" style="color: #fff;margin: 0 0 20px 0;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-weight: 400;text-transform: none;font-size: 1.5rem;line-height: 1.4;orphans: 3;widows: 3;page-break-after: avoid;margin-bottom: 0!important;">New Ticket Created</h3>
<p class="uk-text-meta uk-margin-remove-top" style="color: #ccc;margin: 0 0 20px 0;margin-top: 0!important;orphans: 3;widows: 3;font-size: .875rem;line-height: 1.4;">
<time datetime="">$DATEOCCURED [MSPG: $FAULTID]</time>
</p>
</div></div></div>
<div class="uk-card-body" style="border-left: 1px solid black; border-right:1px solid black;display: flow-root;padding: 30px 30px;">
<p style="margin: 0 0 20px 0;orphans: 3;widows: 3;">Hello $FIRSTNAME,</p>
<p style="margin: 0 0 20px 0;margin-top: 20px;orphans: 3;widows: 3;">We have received your service ticket $FAULTID titled "$SYMPTOM" with you as the contact for $AREA.</p>
<div class="uk-alert-danger" style="background: #fef4f6;color: #f0506e;">
<p style="margin: 0 0 20px 0;orphans: 3;widows: 3;"><strong style="font-weight: bolder;">If this request is urgent or critical please call the help desk and inform us so that we may properly escalate this request.</strong></p>
</div>
<p style="margin: 0 0 20px 0;margin-top: 20px;orphans: 3;widows: 3;">Updates will be provided regularly via email as the ticket is assigned and worked on. If you need assistance outside of these business hours, please call the help desk and leave a voicemail message in the emergency mailbox. Our standard hours of operation are 8:30am to 5:00pm Monday through Friday.</p>
<p style="margin: 0 0 20px 0;margin-top: 20px;orphans: 3;widows: 3;">Please note that messages left on the emergency mailbox are returned generally within 15 minutes. The mailbox is monitored 7:30am to 11:00pm Monday-Friday, and 8am-11pm Sunday and Saturday.</p>
<div class="uk-alert-danger" style="background: #fef4f6;color: #f0506e;">
<p style="margin: 0 0 20px 0;orphans: 3;widows: 3;"><strong style="font-weight: bolder;">Emails outside of normal operating business hours are not monitored</strong></p>
</div>
<p style="margin: 0 0 20px 0;margin-top: 20px;orphans: 3;widows: 3;">If you have any additional information, simply reply to this email and it will be added to the ticket.</p>
<p class="uk-h5" style="margin: 0 0 20px 0;margin-top: 40px;orphans: 3;widows: 3;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-weight: 400;color: #333;text-transform: none;font-size: 16px;line-height: 1.4;margin-bottom: 0;">Sincerely,
<br>Company Name
<br>(555) 555-5555 Option 2
<br>123 Address St
<br>City, ST 01208</p>
</div>
<div class="uk-card-footer" style="border-left: 1px solid black; border-right:1px solid black;border-bottom:1px solid black;display: flow-root;padding: 20px 40px;border-top: 1px solid #e5e5e5;">
<div class="uk-text-center uk-h4" style="margin: 0 0 20px 0;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-weight: 400;color: #333;text-transform: none;font-size: 1.25rem;line-height: 1.4;text-align: center!important;">How are we doing?</div>
<div class="uk-container uk-align-center" style="display: block;box-sizing: content-box;max-width: 1200px;margin-left: auto;margin-right: auto;padding-left: 0;padding-right: 0;margin-bottom: 0;margin-top: 30px;">
<div class="uk-flex uk-flex-center" style="display: flex;justify-content: center;margin-bottom: 0;">
<table class="uk-table uk-table-middle uk-text-center" style="width: 30%;border-collapse: collapse;border-spacing: 0;margin-bottom: 20px;vertical-align: middle!important;text-align: center!important">
<tbody>
<tr style="page-break-inside: avoid;transition: background-color .1s linear;">
<td style="padding: 16px 12px;vertical-align: middle!important;">
<a href="#LINKTOcsatSYSTEM" style="text-decoration: none;color: #1e87f0;cursor: pointer;"><img alt="Good Emoji" src="" class="fr-fic fr-dii" width="50" height="48" style="vertical-align: middle;max-width: 100%!important;height: auto;box-sizing: border-box;page-break-inside: avoid;">
</a><p style="margin: 0 0 20px 0;margin-top: 20px;orphans: 3;widows: 3;margin-bottom: 0;"><span class="uk-label uk-label-success" style="display: inline-block;padding: 0 10px;background: #1e87f0;line-height: 1.5;font-size: .875rem;color: #fff;vertical-align: middle;white-space: nowrap;border-radius: 2px;text-transform: uppercase;background-color: #32d296;">Great</span></p>
</td>
<td style="padding: 16px 12px;vertical-align: middle!important;">
<a href="#LINKTOcsatSYSTEM" style="text-decoration: none;color: #1e87f0;cursor: pointer;"><img alt="OK Emoji" src="" class="fr-fic fr-dii" width="50" height="48" style="vertical-align: middle;max-width: 100%!important;height: auto;box-sizing: border-box;page-break-inside: avoid;">
</a><p style="margin: 0 0 20px 0;margin-top: 20px;orphans: 3;widows: 3;margin-bottom: 0;"><span class="uk-label uk-label-warning" style="display: inline-block;padding: 0 10px;background: #1e87f0;line-height: 1.5;font-size: .875rem;color: #fff;vertical-align: middle;white-space: nowrap;border-radius: 2px;text-transform: uppercase;background-color: #faa05a;">OK</span></p>
</td>
<td style="padding: 16px 12px;vertical-align: middle!important;">
<a href="#LINKTOcsatSYSTEM" style="text-decoration: none;color: #1e87f0;cursor: pointer;"><img alt="Bad Emoji" src="" class="fr-fic fr-dii" width="50" height="48" style="vertical-align: middle;max-width: 100%!important;height: auto;box-sizing: border-box;page-break-inside: avoid;">
</a><p style="margin: 0 0 20px 0;margin-top: 20px;orphans: 3;widows: 3;margin-bottom: 0;"><span class="uk-label uk-label-danger" style="display: inline-block;padding: 0 10px;background: #1e87f0;line-height: 1.5;font-size: .875rem;color: #fff;vertical-align: middle;white-space: nowrap;border-radius: 2px;text-transform: uppercase;background-color: #f0506e;">Bad</span></p>
</td>
</tr>
</tbody>
</table>
</div></div></div></div></div></div>