mail-template.tmpl 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365
  1. <!--
  2. Style and HTML derived from https://github.com/mailgun/transactional-email-templates
  3. The MIT License (MIT)
  4. Copyright (c) 2014 Mailgun
  5. Permission is hereby granted, free of charge, to any person obtaining a copy
  6. of this software and associated documentation files (the "Software"), to deal
  7. in the Software without restriction, including without limitation the rights
  8. to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  9. copies of the Software, and to permit persons to whom the Software is
  10. furnished to do so, subject to the following conditions:
  11. The above copyright notice and this permission notice shall be included in all
  12. copies or substantial portions of the Software.
  13. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  14. IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  15. FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  16. AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  17. LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  18. OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  19. SOFTWARE.
  20. -->
  21. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  22. <html xmlns="http://www.w3.org/1999/xhtml">
  23. <head>
  24. <meta name="viewport" content="width=device-width" />
  25. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  26. <title>{{ template "__subject" . }}</title>
  27. <style>
  28. /* -------------------------------------
  29. GLOBAL
  30. A very basic CSS reset
  31. ------------------------------------- */
  32. * {
  33. margin: 0;
  34. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  35. box-sizing: border-box;
  36. font-size: 14px;
  37. }
  38. img {
  39. max-width: 100%;
  40. }
  41. body {
  42. -webkit-font-smoothing: antialiased;
  43. -webkit-text-size-adjust: none;
  44. width: 100% !important;
  45. height: 100%;
  46. line-height: 1.6em;
  47. /* 1.6em * 14px = 22.4px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */
  48. /*line-height: 22px;*/
  49. }
  50. /* Let's make sure all tables have defaults */
  51. table td {
  52. vertical-align: top;
  53. }
  54. /* -------------------------------------
  55. BODY & CONTAINER
  56. ------------------------------------- */
  57. body {
  58. background-color: #f6f6f6;
  59. }
  60. .body-wrap {
  61. background-color: #f6f6f6;
  62. width: 100%;
  63. }
  64. .container {
  65. display: block !important;
  66. max-width: 600px !important;
  67. margin: 0 auto !important;
  68. /* makes it centered */
  69. clear: both !important;
  70. }
  71. .content {
  72. max-width: 600px;
  73. margin: 0 auto;
  74. display: block;
  75. padding: 20px;
  76. }
  77. /* -------------------------------------
  78. HEADER, FOOTER, MAIN
  79. ------------------------------------- */
  80. .main {
  81. background-color: #fff;
  82. border: 1px solid #e9e9e9;
  83. border-radius: 3px;
  84. }
  85. .content-wrap {
  86. padding: 30px;
  87. }
  88. .content-block {
  89. padding: 0 0 20px;
  90. }
  91. .header {
  92. width: 100%;
  93. margin-bottom: 20px;
  94. }
  95. .footer {
  96. width: 100%;
  97. clear: both;
  98. color: #999;
  99. padding: 20px;
  100. }
  101. .footer p, .footer a, .footer td {
  102. color: #999;
  103. font-size: 12px;
  104. }
  105. /* -------------------------------------
  106. TYPOGRAPHY
  107. ------------------------------------- */
  108. h1, h2, h3 {
  109. font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  110. color: #000;
  111. margin: 40px 0 0;
  112. line-height: 1.2em;
  113. font-weight: 400;
  114. }
  115. h1 {
  116. font-size: 32px;
  117. font-weight: 500;
  118. /* 1.2em * 32px = 38.4px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */
  119. /*line-height: 38px;*/
  120. }
  121. h2 {
  122. font-size: 24px;
  123. /* 1.2em * 24px = 28.8px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */
  124. /*line-height: 29px;*/
  125. }
  126. h3 {
  127. font-size: 18px;
  128. /* 1.2em * 18px = 21.6px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */
  129. /*line-height: 22px;*/
  130. }
  131. h4 {
  132. font-size: 14px;
  133. font-weight: 600;
  134. }
  135. p, ul, ol {
  136. margin-bottom: 10px;
  137. font-weight: normal;
  138. }
  139. p li, ul li, ol li {
  140. margin-left: 5px;
  141. list-style-position: inside;
  142. }
  143. /* -------------------------------------
  144. LINKS & BUTTONS
  145. ------------------------------------- */
  146. a {
  147. color: #348eda;
  148. text-decoration: underline;
  149. }
  150. .btn-primary {
  151. text-decoration: none;
  152. color: #FFF;
  153. background-color: #348eda;
  154. border: solid #348eda;
  155. border-width: 10px 20px;
  156. line-height: 2em;
  157. /* 2em * 14px = 28px, use px to get airier line-height also in Thunderbird, and Yahoo!, Outlook.com, AOL webmail clients */
  158. /*line-height: 28px;*/
  159. font-weight: bold;
  160. text-align: center;
  161. cursor: pointer;
  162. display: inline-block;
  163. border-radius: 5px;
  164. text-transform: capitalize;
  165. }
  166. /* -------------------------------------
  167. OTHER STYLES THAT MIGHT BE USEFUL
  168. ------------------------------------- */
  169. .last {
  170. margin-bottom: 0;
  171. }
  172. .first {
  173. margin-top: 0;
  174. }
  175. .aligncenter {
  176. text-align: center;
  177. }
  178. .alignright {
  179. text-align: right;
  180. }
  181. .alignleft {
  182. text-align: left;
  183. }
  184. .clear {
  185. clear: both;
  186. }
  187. /* -------------------------------------
  188. ALERTS
  189. Change the class depending on warning email, good email or bad email
  190. ------------------------------------- */
  191. .alert {
  192. font-size: 16px;
  193. color: #fff;
  194. font-weight: 500;
  195. padding: 20px;
  196. text-align: center;
  197. border-radius: 3px 3px 0 0;
  198. }
  199. .alert a {
  200. color: #fff;
  201. text-decoration: none;
  202. font-weight: 500;
  203. font-size: 16px;
  204. }
  205. .alert.alert-warning {
  206. background-color: #E6522C;
  207. }
  208. .alert.alert-bad {
  209. background-color: #D0021B;
  210. }
  211. .alert.alert-good {
  212. background-color: #68B90F;
  213. }
  214. /* -------------------------------------
  215. INVOICE
  216. Styles for the billing table
  217. ------------------------------------- */
  218. .invoice {
  219. margin: 40px auto;
  220. text-align: left;
  221. width: 80%;
  222. }
  223. .invoice td {
  224. padding: 5px 0;
  225. }
  226. .invoice .invoice-items {
  227. width: 100%;
  228. }
  229. .invoice .invoice-items td {
  230. border-top: #eee 1px solid;
  231. }
  232. .invoice .invoice-items .total td {
  233. border-top: 2px solid #333;
  234. border-bottom: 2px solid #333;
  235. font-weight: 700;
  236. }
  237. /* -------------------------------------
  238. RESPONSIVE AND MOBILE FRIENDLY STYLES
  239. ------------------------------------- */
  240. @media only screen and (max-width: 640px) {
  241. body {
  242. padding: 0 !important;
  243. }
  244. h1, h2, h3, h4 {
  245. font-weight: 800 !important;
  246. margin: 20px 0 5px !important;
  247. }
  248. h1 {
  249. font-size: 22px !important;
  250. }
  251. h2 {
  252. font-size: 18px !important;
  253. }
  254. h3 {
  255. font-size: 16px !important;
  256. }
  257. .container {
  258. padding: 0 !important;
  259. width: 100% !important;
  260. }
  261. .content {
  262. padding: 0 !important;
  263. }
  264. .content-wrap {
  265. padding: 10px !important;
  266. }
  267. .invoice {
  268. width: 100% !important;
  269. }
  270. }
  271. </style>
  272. </head>
  273. <body itemscope itemtype="http://schema.org/EmailMessage">
  274. <table class="body-wrap">
  275. <tr>
  276. <td></td>
  277. <td class="container" width="600">
  278. <div class="content">
  279. <table class="main" width="100%" cellpadding="0" cellspacing="0">
  280. <tr>
  281. {{ if gt (len .Alerts.Firing) 0 }}
  282. <td class="alert alert-warning">
  283. {{ else }}
  284. <td class="alert alert-good">
  285. {{ end }}
  286. {{ .Alerts | len }} alert{{ if gt (len .Alerts) 1 }}s{{ end }} for {{ range .GroupLabels.SortedPairs }}
  287. {{ .Name }}={{ .Value }}
  288. {{ end }}
  289. </td>
  290. </tr>
  291. <tr>
  292. <td class="content-wrap">
  293. <table width="100%" cellpadding="0" cellspacing="0">
  294. <tr>
  295. <td class="content-block">
  296. <a href='{{ template "__alertmanagerURL" . }}' class="btn-primary">View in {{ template "__alertmanager" . }}</a>
  297. </td>
  298. </tr>
  299. {{ if gt (len .Alerts.Firing) 0 }}
  300. <tr>
  301. <td class="content-block">
  302. <strong>[{{ .Alerts.Firing | len }}] Firing</strong>
  303. </td>
  304. </tr>
  305. {{ end }}
  306. {{ range .Alerts.Firing }}
  307. <tr>
  308. <td class="content-block">
  309. <strong>Labels</strong><br />
  310. {{ range .Labels.SortedPairs }}{{ .Name }} = {{ .Value }}<br />{{ end }}
  311. {{ if gt (len .Annotations) 0 }}<strong>Annotations</strong><br />{{ end }}
  312. {{ range .Annotations.SortedPairs }}{{ .Name }} = {{ .Value }}<br />{{ end }}
  313. <a href="{{ .GeneratorURL }}">Source</a><br />
  314. </td>
  315. </tr>
  316. {{ end }}
  317. {{ if gt (len .Alerts.Resolved) 0 }}
  318. {{ if gt (len .Alerts.Firing) 0 }}
  319. <tr>
  320. <td class="content-block">
  321. <br />
  322. <hr />
  323. <br />
  324. </td>
  325. </tr>
  326. {{ end }}
  327. <tr>
  328. <td class="content-block">
  329. <strong>[{{ .Alerts.Resolved | len }}] Resolved</strong>
  330. </td>
  331. </tr>
  332. {{ end }}
  333. {{ range .Alerts.Resolved }}
  334. <tr>
  335. <td class="content-block">
  336. <strong>Labels</strong><br />
  337. {{ range .Labels.SortedPairs }}{{ .Name }} = {{ .Value }}<br />{{ end }}
  338. {{ if gt (len .Annotations) 0 }}<strong>Annotations</strong><br />{{ end }}
  339. {{ range .Annotations.SortedPairs }}{{ .Name }} = {{ .Value }}<br />{{ end }}
  340. <a href="{{ .GeneratorURL }}">Source</a><br />
  341. </td>
  342. </tr>
  343. {{ end }}
  344. </table>
  345. </td>
  346. </tr>
  347. </table>
  348. <div class="footer">
  349. <table width="100%">
  350. <tr>
  351. <td class="aligncenter content-block"><a href='{{ .ExternalURL }}'>Sent by {{ template "__alertmanager" . }}</a></td>
  352. </tr>
  353. </table>
  354. </div></div>
  355. </td>
  356. <td></td>
  357. </tr>
  358. </table>
  359. </body>
  360. </html>