-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
use new front notification structure
- Loading branch information
Showing
5 changed files
with
378 additions
and
44 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,158 @@ | ||
| <!DOCTYPE html> | ||
| <!-- Set the language of your main document. This helps screenreaders use the proper language profile, pronunciation, and accent. --> | ||
| <html lang="en"> | ||
| <head> | ||
| <!-- The title is useful for screenreaders reading a document. Use your sender name or subject line. --> | ||
| <title>Daily Checkout Report</title> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
| <!-- Never disable zoom behavior! Fine to set the initial width and scale, but allow users to set their own zoom preferences. --> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <style type="text/css"> | ||
| /* CLIENT-SPECIFIC STYLES */ | ||
| body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } | ||
| table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; } | ||
| img { -ms-interpolation-mode: bicubic; } | ||
| /* RESET STYLES */ | ||
| img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; } | ||
| table { border-collapse: collapse !important; } | ||
| body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; } | ||
| /* iOS BLUE LINKS */ | ||
| a[x-apple-data-detectors] { | ||
| color: inherit !important; | ||
| text-decoration: none !important; | ||
| font-size: inherit !important; | ||
| font-family: inherit !important; | ||
| font-weight: inherit !important; | ||
| line-height: inherit !important; | ||
| } | ||
| /* GMAIL BLUE LINKS */ | ||
| u + #body a { | ||
| color: inherit; | ||
| text-decoration: none; | ||
| font-size: inherit; | ||
| font-family: inherit; | ||
| font-weight: inherit; | ||
| line-height: inherit; | ||
| } | ||
| /* SAMSUNG MAIL BLUE LINKS */ | ||
| #MessageViewBody a { | ||
| color: inherit; | ||
| text-decoration: none; | ||
| font-size: inherit; | ||
| font-family: inherit; | ||
| font-weight: inherit; | ||
| line-height: inherit; | ||
| } | ||
| /* These rules set the link and hover states, making it clear that links are, in fact, links. */ | ||
| /* Embrace established conventions like underlines on links to keep emails accessible. */ | ||
| a { color: #007bff; font-weight: 600; text-decoration: underline; } | ||
| a:hover { color: #0056b2; !important; text-decoration: none !important; } | ||
| a.button:hover { color: #ffffff !important; background-color: #0056b2 !important; } | ||
| /* These rules adjust styles for desktop devices, keeping the email responsive for users. */ | ||
| /* Some email clients don't properly apply media query-based styles, which is why we go mobile-first. */ | ||
| @media screen and (min-width:600px) { | ||
| h1 { font-size: 36px !important; line-height: 48px !important; } | ||
| .intro { font-size: 24px !important; line-height: 36px !important; } | ||
| } | ||
| /* MOBILE STYLES */ | ||
| @media screen and (max-width: 600px) { | ||
| .mobile-wrapper { | ||
| padding-left: 0!important; | ||
| padding-right: 0!important; | ||
| } | ||
| .mobile-padding { | ||
| padding-left: 10% !important; | ||
| padding-right: 10% !important; | ||
| } | ||
| .mobile-no-radius { | ||
| border-radius: 0px !important; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body style="margin: 0 !important; padding: 0 !important;"> | ||
| <!-- Some preview text. --> | ||
| <div class="litmus-builder-preview-text" style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">The previously reported error is now resolved. ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌</div> | ||
| <!-- This ghost table is used to constrain the width in Outlook. The role attribute is set to presentation to prevent it from being read by screenreaders. --> | ||
| <!--[if (gte mso 9)|(IE)]> | ||
| <table cellspacing="0" cellpadding="0" border="0" width="600" align="center" role="presentation"><tr><td> | ||
| <![endif]--> | ||
| <!-- The role and aria-label attributes are added to wrap the email content as an article for screen readers. Some of them will read out the aria-label as the title of the document, so use something like "An email from Your Organization" to make it recognizable. --> | ||
| <!-- Default styling of text is applied to the wrapper div. Be sure to use text that is large enough and has a high contrast with the background color for people with visual impairments. --> | ||
| <div role="article" aria-label="An email from {{misc:organization_name}}" lang="en" style="background-color: white; color: #2b2b2b; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 18px; font-weight: 400; line-height: 28px; margin: 0 auto; max-width: 600px; padding: 40px 20px 40px 20px;" class="mobile-wrapper"> | ||
| <!-- Logo section and header. Headers are useful landmark elements. --> | ||
| <header> | ||
| <!-- Since this is a purely decorative image, we can leave the alternative text blank. --> | ||
| <!-- Linking images also helps with Gmail displaying download links next to them. --> | ||
| <center> | ||
| <img src="https://transform.sfo3.digitaloceanspaces.com/public/guidelines/icons/green-check-circle-duotone.png" alt="Green Checkmark" height="80" width="80"> | ||
| </center> <!-- The h1 is the main heading of the document and should come first. --> | ||
| <!-- We can override the default styles inline. --> | ||
| <h1 style="color: #000000; font-size: 25px; font-weight: 700; line-height: 36px; margin: 10px 0 48px 0; text-align: center;"> | ||
| Error Resolved | ||
| </h1> | ||
| </header> | ||
| <!-- Main content section. Main is a useful landmark element. --> | ||
| <main> | ||
| <!-- This div is purely presentational, providing a container for the message. --> | ||
| <div style="background-color: whitesmoke; border-radius: 4px; padding: 24px 48px;" class="mobile-no-radius mobile-padding"> | ||
| <!-- This ghost table is used solely for padding in Word-based Outlook clients. --> | ||
| <!--[if (gte mso 9)|(IE)]> | ||
| <table cellspacing="0" cellpadding="0" border="0" width="600" align="center" role="presentation"><tr><td style="background-color: whitesmoke; font-family: 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace; padding: 24px 48px 24px 48px;"> | ||
| <![endif]--> | ||
| <!-- Body copy --> | ||
| <p> | ||
| Hello again. | ||
| </p> | ||
| <p> | ||
| The previously reported error is now resolved. The details for the resolved check are below: | ||
| </p> | ||
| <ul> | ||
| <li>Name of Check: {{ test }}</li> | ||
| <li>Monitor Type: {{ type }}</li> | ||
| <li>Alert Output: {{ output }}</li> | ||
| <li>Error Duration: {{ duration }}</li> | ||
| </ul> | ||
| <!-- This CTA was adapted from code from Campaign Monitor's buttons.cm. --> | ||
| <!--[if (gte mso 9)|(IE)]> | ||
| </td></tr></table> | ||
| <![endif]--> | ||
| </div> | ||
| </main> | ||
| <!-- Footer information. Footer is a useful landmark element. --> | ||
| <footer style="margin-top: 36px;"> | ||
| <!-- Since this is a transactional email, you aren't required to include opt-out language. --> | ||
| <center> | ||
| <img src="https://transform.sfo3.digitaloceanspaces.com/public/guidelines/logos/transform-studios-logo-handdrawn.png" alt="Transform Studios" height="80" width="137" /> | ||
| </center> | ||
| </footer> | ||
| </div> | ||
| <!--[if (gte mso 9)|(IE)]> | ||
| </td></tr></table> | ||
| <![endif]--> | ||
| </body> | ||
| </html> |
Oops, something went wrong.