| <!-- |
| ~ Licensed to the Apache Software Foundation (ASF) under one or more |
| ~ contributor license agreements. See the NOTICE file distributed with |
| ~ this work for additional information regarding copyright ownership. |
| ~ The ASF licenses this file to You under the Apache License, Version 2.0 |
| ~ (the "License"); you may not use this file except in compliance with |
| ~ the License. You may obtain a copy of the License at |
| ~ |
| ~ http://www.apache.org/licenses/LICENSE-2.0 |
| ~ |
| ~ Unless required by applicable law or agreed to in writing, software |
| ~ distributed under the License is distributed on an "AS IS" BASIS, |
| ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| ~ See the License for the specific language governing permissions and |
| ~ limitations under the License. |
| --> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| |
| #set ( $alert = $alertList[0] ) |
| <head> |
| <meta name="viewport" content="width=device-width" /> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
| <title>[$alert["alertSeverity"]$alert["alertSubject"]</title> |
| <style rel="stylesheet" type="text/css"> |
| /* ------------------------------------- |
| GLOBAL |
| A very basic CSS reset |
| ------------------------------------- */ |
| * { |
| margin: 0; |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
| box-sizing: border-box; |
| font-size: 14px; |
| } |
| |
| img { |
| max-width: 100%; |
| } |
| |
| body { |
| -webkit-font-smoothing: antialiased; |
| -webkit-text-size-adjust: none; |
| width: 100% !important; |
| height: 100%; |
| line-height: 1.6em; |
| /* 1.6em * 14px = 22.4px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */ |
| /*line-height: 22px;*/ |
| } |
| |
| /* Let's make sure all tables have defaults */ |
| table td { |
| vertical-align: top; |
| } |
| |
| /* ------------------------------------- |
| BODY & CONTAINER |
| ------------------------------------- */ |
| body { |
| background-color: #f6f6f6; |
| } |
| |
| .body-wrap { |
| background-color: #f6f6f6; |
| width: 100%; |
| } |
| |
| .container { |
| display: block !important; |
| max-width: 600px !important; |
| margin: 0 auto !important; |
| /* makes it centered */ |
| clear: both !important; |
| } |
| |
| .content { |
| max-width: 600px; |
| margin: 0 auto; |
| display: block; |
| padding: 20px; |
| } |
| |
| /* ------------------------------------- |
| HEADER, FOOTER, MAIN |
| ------------------------------------- */ |
| .main { |
| background-color: #fff; |
| border: 1px solid #e9e9e9; |
| border-radius: 3px; |
| } |
| |
| .content-wrap { |
| padding: 20px; |
| } |
| |
| .content-block { |
| padding: 0 0 20px; |
| } |
| |
| .header { |
| width: 100%; |
| margin-bottom: 20px; |
| } |
| |
| .footer { |
| width: 100%; |
| clear: both; |
| color: #999; |
| padding: 20px; |
| } |
| .footer p, .footer a, .footer td { |
| color: #999; |
| font-size: 12px; |
| } |
| |
| /* ------------------------------------- |
| TYPOGRAPHY |
| ------------------------------------- */ |
| h1, h2, h3 { |
| font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; |
| color: #000; |
| margin: 40px 0 0; |
| line-height: 1.2em; |
| font-weight: 400; |
| } |
| |
| h1 { |
| font-size: 32px; |
| font-weight: 500; |
| /* 1.2em * 32px = 38.4px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */ |
| /*line-height: 38px;*/ |
| } |
| |
| h2 { |
| font-size: 24px; |
| /* 1.2em * 24px = 28.8px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */ |
| /*line-height: 29px;*/ |
| } |
| |
| h3 { |
| font-size: 18px; |
| /* 1.2em * 18px = 21.6px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */ |
| /*line-height: 22px;*/ |
| } |
| |
| h4 { |
| font-size: 14px; |
| font-weight: 600; |
| } |
| |
| p, ul, ol { |
| margin-bottom: 10px; |
| font-weight: normal; |
| } |
| p li, ul li, ol li { |
| margin-left: 5px; |
| list-style-position: inside; |
| } |
| |
| |
| /* ------------------------------------- |
| LINKS & BUTTONS |
| ------------------------------------- */ |
| a { |
| color: #348eda; |
| text-decoration: underline; |
| } |
| |
| .btn-primary { |
| text-decoration: none; |
| color: #FFF; |
| background-color: #348eda; |
| border: solid #348eda; |
| border-width: 10px 20px; |
| line-height: 2em; |
| /* 2em * 14px = 28px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */ |
| /*line-height: 28px;*/ |
| font-weight: bold; |
| text-align: center; |
| cursor: pointer; |
| display: inline-block; |
| border-radius: 5px; |
| text-transform: capitalize; |
| } |
| |
| .btn-warning { |
| text-decoration: none; |
| color: #FFF; |
| background-color: #f0ad4e; |
| border-color: solid #eea236; |
| /*background-color: #348eda;*/ |
| /*border: solid #348eda;*/ |
| border-width: 10px 20px; |
| line-height: 2em; |
| /* 2em * 14px = 28px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */ |
| /*line-height: 28px;*/ |
| font-weight: bold; |
| text-align: center; |
| cursor: pointer; |
| display: inline-block; |
| border-radius: 5px; |
| text-transform: capitalize; |
| } |
| |
| .btn-danger { |
| text-decoration: none; |
| color: #fff; |
| background-color: #d9534f; |
| border-color: solid #d43f3a; |
| /*color: #FFF;*/ |
| /*background-color: #348eda;*/ |
| /*border: solid #348eda;*/ |
| border-width: 10px 20px; |
| line-height: 2em; |
| /* 2em * 14px = 28px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */ |
| /*line-height: 28px;*/ |
| font-weight: bold; |
| text-align: center; |
| cursor: pointer; |
| display: inline-block; |
| border-radius: 5px; |
| text-transform: capitalize; |
| } |
| |
| .text-light { |
| color: #eee; |
| } |
| |
| .text-primary { |
| color: #348eda; |
| } |
| |
| .text-warning { |
| color: #eea236 |
| } |
| |
| .text-danger { |
| color: #d43f3a; |
| } |
| |
| .label { |
| display: inline; |
| padding: .2em .6em .3em; |
| font-size: 75%; |
| font-weight: 700; |
| line-height: 1; |
| color: #fff; |
| text-align: center; |
| white-space: nowrap; |
| vertical-align: baseline; |
| border-radius: .25em; |
| } |
| |
| .label-ok { |
| background-color: #777; |
| } |
| .label-default { |
| background-color: #777; |
| } |
| .label-primary { |
| background-color: #337ab7; |
| } |
| .label-critical { |
| background-color: #d9534f; |
| } |
| .label-warning { |
| background-color: #f0ad4e; |
| } |
| |
| /* ------------------------------------- |
| OTHER STYLES THAT MIGHT BE USEFUL |
| ------------------------------------- */ |
| .last { |
| margin-bottom: 0; |
| } |
| |
| .first { |
| margin-top: 0; |
| } |
| |
| .aligncenter { |
| text-align: center; |
| } |
| |
| .alignright { |
| text-align: right; |
| } |
| |
| .alignleft { |
| text-align: left; |
| } |
| |
| .clear { |
| clear: both; |
| } |
| |
| /* ------------------------------------- |
| ALERTS |
| Change the class depending on warning email, good email or bad email |
| ------------------------------------- */ |
| .alert { |
| font-size: 16px; |
| color: #fff; |
| font-weight: 500; |
| padding: 20px; |
| text-align: center; |
| border-radius: 3px 3px 0 0; |
| } |
| .alert a { |
| color: #fff; |
| text-decoration: none; |
| font-weight: 500; |
| font-size: 16px; |
| } |
| .alert.alert-warning { |
| background-color: #FF9F00; |
| } |
| .alert.alert-bad { |
| background-color: #D0021B; |
| } |
| .alert.alert-critical { |
| background-color: #D0021B; |
| } |
| .alert.alert-fetal { |
| background-color: #D0021B; |
| } |
| .alert.alert-ok { |
| background-color: #68B90F; |
| } |
| |
| .alert-body { |
| margin-bottom: 10px; |
| padding: 8px; |
| background-color: #fff; |
| border: 1px solid transparent; |
| border-radius: 4px; |
| -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); |
| box-shadow: 0 1px 1px rgba(0,0,0,.05); |
| } |
| .alert-body-default { |
| border-color: #eee; |
| } |
| .alert-body-primary { |
| border-color: #337ab7; |
| } |
| .alert-body-warning { |
| border-color: #faebcc; |
| } |
| .alert-body-danger { |
| border-color: #ebccd1; |
| } |
| /* ------------------------------------- |
| INVOICE |
| Styles for the billing table |
| ------------------------------------- */ |
| .invoice { |
| margin: 40px auto; |
| text-align: left; |
| width: 80%; |
| } |
| .invoice td { |
| padding: 5px 0; |
| } |
| .invoice .invoice-items { |
| width: 100%; |
| } |
| .invoice .invoice-items td { |
| border-bottom: #eee 1px solid; |
| } |
| .invoice .invoice-items .total td { |
| border-top: 2px solid #333; |
| border-bottom: 2px solid #333; |
| font-weight: 700; |
| } |
| |
| /* ------------------------------------- |
| RESPONSIVE AND MOBILE FRIENDLY STYLES |
| ------------------------------------- */ |
| @media only screen and (max-width: 640px) { |
| body { |
| padding: 0 !important; |
| } |
| h1, h2, h3, h4 { |
| font-weight: 800 !important; |
| margin: 20px 0 5px !important; |
| } |
| h1 { |
| font-size: 22px !important; |
| } |
| |
| h2 { |
| font-size: 18px !important; |
| } |
| h3 { |
| font-size: 16px !important; |
| } |
| .container { |
| padding: 0 !important; |
| width: 100% !important; |
| } |
| .content { |
| padding: 0 !important; |
| } |
| .content-wrap { |
| padding: 10px !important; |
| } |
| .invoice { |
| width: 100% !important; |
| } |
| } |
| /*# sourceMappingURL=styles.css.map */ |
| </style> |
| </head> |
| |
| <body itemscope itemtype="http://schema.org/EmailMessage"> |
| |
| <table class="body-wrap"> |
| <tr> |
| <td></td> |
| <td class="container" width="600"> |
| <div class="content"> |
| <table class="main" width="100%" cellpadding="0" cellspacing="0"> |
| <tr> |
| <td class="alert alert-$alert["alertSeverity"].toLowerCase()"> |
| <strong>$alert["alertSeverity"]</strong> $alert["alertSubject"] |
| </td> |
| </tr> |
| <tr> |
| <td class="content-wrap"> |
| <table width="100%" cellpadding="0" cellspacing="0"> |
| <tr> |
| <td class="content-block"> |
| <table> |
| <tbody> |
| <tr> |
| <td>Category:</td> |
| <td><strong>$alert["alertCategory"]</strong></td> |
| <td>Time:</td> |
| <td><strong>$alert["alertTime"]</strong></td> |
| </tr> |
| </tbody> |
| </table> |
| </td> |
| </tr> |
| <tr> |
| <td class="content-block"> |
| <div class="alert-body alert-body-default"> |
| $alert["alertBody"] |
| </div> |
| </td> |
| </tr> |
| <tr> |
| <td class="content-block invoice"> |
| <table class="invoice-items" cellpadding="0" cellspacing="0"> |
| <tbody> |
| <tr> |
| <td>Cluster</td> |
| <td>$alert["siteId"]</td> |
| </tr> |
| <tr> |
| <td>Policy</td> |
| <td><a href="$alert["policyDetailUrl"]">$alert["policyId"]</a></td> |
| </tr> |
| </tbody> |
| </table> |
| </td> |
| </tr> |
| <tr> |
| <td class="content-block"> |
| <a href="$alert["alertDetailUrl"]" class="btn-primary">View Alert Details</a> |
| </td> |
| </tr> |
| <tr> |
| <td class="content-block"> |
| <i>Note: The alert was automatically detected by <a href="#">Eagle</a>.</i> |
| </td> |
| </tr> |
| </table> |
| </td> |
| </tr> |
| </table> |
| <div class="footer"> |
| <table width="100%"> |
| <tr> |
| <td class="aligncenter content-block">Powered by <a href="http://eagle.apache.org">Apache Eagle</a> (version: $alert["version"])</td> |
| </tr> |
| </table> |
| </div> |
| </div> |
| </td> |
| <td></td> |
| </tr> |
| </table> |
| </body> |
| </html> |
