welcome_on_signup.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="viewport" content="width=device-width" />
  6. </head>
  7. <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" class="main" style="-ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; height: 100% !important; line-height: 19px; margin: 0 auto; min-width: 100%; padding: 0; text-align: left; width: 100% !important;" bgcolor="#2e2e2e"><style type="text/css">
  8. body {
  9. width: 100% !important; min-width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0;
  10. }
  11. img {
  12. outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block;
  13. }
  14. body {
  15. color: #222222; font-family: "Helvetica", "Arial", sans-serif; font-weight: normal; padding: 0; margin: 0; text-align: left; line-height: 1.3;
  16. }
  17. body {
  18. font-size: 14px; line-height: 19px;
  19. }
  20. a:hover {
  21. color: #2795b6 !important;
  22. }
  23. a:active {
  24. color: #2795b6 !important;
  25. }
  26. a:visited {
  27. color: #2ba6cb !important;
  28. }
  29. body {
  30. font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;
  31. }
  32. a:hover {
  33. color: #ff8f2b !important;
  34. }
  35. a:active {
  36. color: #F2821E !important;
  37. }
  38. a:visited {
  39. color: #E67612 !important;
  40. }
  41. .better-button:hover a {
  42. color: #FFFFFF !important; background-color: #F2821E; border: 1px solid #F2821E;
  43. }
  44. .better-button:visited a {
  45. color: #FFFFFF !important;
  46. }
  47. .better-button:active a {
  48. color: #FFFFFF !important;
  49. }
  50. .better-button-alt:hover a {
  51. color: #ff8f2b !important; background-color: #DDDDDD; border: 1px solid #F2821E;
  52. }
  53. .better-button-alt:visited a {
  54. color: #ff8f2b !important;
  55. }
  56. .better-button-alt:active a {
  57. color: #ff8f2b !important;
  58. }
  59. body {
  60. height: 100% !important; width: 100% !important;
  61. }
  62. body .copy {
  63. -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
  64. }
  65. .ExternalClass {
  66. width: 100%;
  67. }
  68. .ExternalClass {
  69. line-height: 100%;
  70. }
  71. img {
  72. -ms-interpolation-mode: bicubic;
  73. }
  74. img {
  75. border: 0 !important; outline: none !important; text-decoration: none !important;
  76. }
  77. a:hover {
  78. text-decoration: underline;
  79. }
  80. @media only screen and (max-width: 600px) {
  81. table[class="body"] img {
  82. width: auto !important; height: auto !important;
  83. }
  84. table[class="body"] center {
  85. min-width: 0 !important;
  86. }
  87. table[class="body"] .container {
  88. width: 95% !important;
  89. }
  90. table[class="body"] .row {
  91. width: 100% !important; display: block !important;
  92. }
  93. table[class="body"] .wrapper {
  94. display: block !important; padding-right: 0 !important;
  95. }
  96. table[class="body"] .columns {
  97. table-layout: fixed !important; float: none !important; width: 100% !important; padding-right: 0px !important; padding-left: 0px !important; display: block !important;
  98. }
  99. table[class="body"] .column {
  100. table-layout: fixed !important; float: none !important; width: 100% !important; padding-right: 0px !important; padding-left: 0px !important; display: block !important;
  101. }
  102. table[class="body"] table.columns td {
  103. width: 100% !important;
  104. }
  105. table[class="body"] .columns td.six {
  106. width: 50% !important;
  107. }
  108. table[class="body"] .column td.six {
  109. width: 50% !important;
  110. }
  111. table[class="body"] .columns td.twelve {
  112. width: 100% !important;
  113. }
  114. table[class="body"] table.columns td.expander {
  115. width: 1px !important;
  116. }
  117. }
  118. @media (max-width: 600px) {
  119. table[class="email-container"] {
  120. width: 95% !important;
  121. }
  122. img[class="fluid"] {
  123. width: 100% !important; max-width: 100% !important; height: auto !important; margin: auto !important;
  124. }
  125. img[class="fluid-centered"] {
  126. width: 100% !important; max-width: 100% !important; height: auto !important; margin: auto !important;
  127. }
  128. img[class="fluid-centered"] {
  129. margin: auto !important;
  130. }
  131. td[class="comms-content"] {
  132. padding: 20px !important;
  133. }
  134. td[class="stack-column"] {
  135. display: block !important; width: 100% !important; direction: ltr !important;
  136. }
  137. td[class="stack-column-center"] {
  138. display: block !important; width: 100% !important; direction: ltr !important;
  139. }
  140. td[class="stack-column-center"] {
  141. text-align: center !important;
  142. }
  143. td[class="copy"] {
  144. font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
  145. }
  146. td[class="copy -center"] {
  147. font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
  148. }
  149. td[class="copy -bold"] {
  150. font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
  151. }
  152. td[class="small-text"] {
  153. font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
  154. }
  155. td[class="mini-centered-text"] {
  156. font-size: 14px !important; line-height: 24px !important; padding: 15px 30px !important;
  157. }
  158. td[class="copy -padd"] {
  159. padding: 0 40px !important;
  160. }
  161. span[class="sep"] {
  162. display: none !important;
  163. }
  164. td[class="mb-hide"] {
  165. display: none !important; height: 0 !important;
  166. }
  167. td[class="spacer mb-shorten"] {
  168. height: 25px !important;
  169. }
  170. .two-up td {
  171. width: 270px;
  172. }
  173. }
  174. </style>
  175. <table class="body" style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; border-collapse: collapse; border-spacing: 0; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; height: 100%; line-height: 19px; margin: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
  176. <tr style="padding: 0; vertical-align: top;" align="left">
  177. <td class="center" align="center" valign="top" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0; word-break: break-word;">
  178. <center style="min-width: 580px; width: 100%;">
  179. <table class="row header" style="border-collapse: collapse; border-spacing: 0; margin-bottom: 25px; margin-top: 25px; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%;">
  180. <tr style="padding: 0; vertical-align: top;" align="left">
  181. <td class="center" align="center" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0; word-break: break-word;" valign="top">
  182. <center style="min-width: 580px; width: 100%;">
  183. <table class="container" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: inherit; vertical-align: top; width: 580px;">
  184. <tr style="padding: 0; vertical-align: top;" align="left">
  185. <td class="wrapper last" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 10px 0px 0px; position: relative; word-break: break-word;" align="left" valign="top">
  186. <table class="twelve columns" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: left; vertical-align: top; width: 580px;">
  187. <tr style="padding: 0; vertical-align: top;" align="left">
  188. <td class="six sub-columns center" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; min-width: 0px; padding: 0px 10px 10px 0px; width: 50%; word-break: break-word;" align="center" valign="top">
  189. <img src="http://grafana.org/assets/img/logo_new_transparent_200x48.png" style="-ms-interpolation-mode: bicubic; border: 0; clear: both; display: inline; max-width: 100%; outline: none !important; text-decoration: none !important; width: 200px;" align="none" />
  190. </td>
  191. <td class="expander" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0; visibility: hidden; width: 0px; word-break: break-word;" align="left" valign="top"></td>
  192. </tr>
  193. </table>
  194. </td>
  195. </tr>
  196. </table>
  197. </center>
  198. </td>
  199. </tr>
  200. </table>
  201. <table class="container" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: inherit; vertical-align: top; width: 580px;" width="600" bgcolor="#efefef">
  202. <tr style="padding: 0; vertical-align: top;" align="left">
  203. <td height="2" class="spacer mb-shorten" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; background: linear-gradient(to right, #ffed00 0%, #f26529 75%); border: 0; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 0; font-weight: normal; height: 2px !important; hyphens: auto; line-height: 0; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; word-break: break-word;" valign="top" align="left"> </td>
  204. </tr>
  205. <tr style="padding: 0; vertical-align: top;" align="left">
  206. <td class="mini-centered-text" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #343b41; font: 400 16px/27px 'Helvetica Neue', Helvetica, Arial, sans-serif; hyphens: auto; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 25px 75px; word-break: break-word;" align="center" valign="top">
  207. {{Subject .Subject "Welcome to Grafana"}}
  208. <table class="row" style="border-collapse: collapse; border-spacing: 0; display: block; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%;">
  209. <tr style="padding: 0; vertical-align: top;" align="left">
  210. <td class="wrapper last" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 10px 0px 0px; position: relative; word-break: break-word;" align="left" valign="top">
  211. <table class="twelve columns" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: left; vertical-align: top; width: 580px;">
  212. <tr style="padding: 0; vertical-align: top;" align="left">
  213. <td style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0px 0px 10px; word-break: break-word;" align="left" valign="top">
  214. <h4 style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 20px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; word-break: normal;" align="left">Hi {{.Name}},</h4>
  215. </td>
  216. <td class="expander" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0; visibility: hidden; width: 0px; word-break: break-word;" align="left" valign="top"></td>
  217. </tr>
  218. <tr style="padding: 0; vertical-align: top;" align="left">
  219. <td style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0px 0px 10px; word-break: break-word;" align="left" valign="top">
  220. Welcome! Ready to start building some beautiful metric and analytic dashboards?
  221. </td>
  222. </tr>
  223. </table>
  224. </td>
  225. </tr>
  226. </table>
  227. <table class="row" style="border-collapse: collapse; border-spacing: 0; display: block; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%;">
  228. <tr style="padding: 0; vertical-align: top;" align="left">
  229. <td class="wrapper last" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 10px 0px 0px; position: relative; word-break: break-word;" align="left" valign="top">
  230. <table class="twelve columns" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: left; vertical-align: top; width: 580px;">
  231. <tr style="padding: 0; vertical-align: top;" align="left">
  232. <td class="center" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0px 0px 10px; word-break: break-word;" align="center" valign="top">
  233. <p style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 19px; margin: 0 0 10px; padding: 0;" align="left">
  234. If you are new to Grafana please read the <a href="http://docs.grafana.org/guides/gettingstarted/" style="color: #E67612; text-decoration: none;">Getting Started</a> guide.
  235. </p>
  236. </td>
  237. <td class="expander" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0; visibility: hidden; width: 0px; word-break: break-word;" align="left" valign="top"></td>
  238. </tr>
  239. <tr style="padding: 0; vertical-align: top;" align="left">
  240. <td style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0px 0px 10px; word-break: break-word;" align="left" valign="top">
  241. Thank you for joining our community.
  242. <br />
  243. <p style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 19px; margin: 0 0 10px; padding: 0;" align="left">The Grafana Team</p>
  244. </td>
  245. </tr>
  246. </table>
  247. </td>
  248. </tr>
  249. </table>
  250. </td>
  251. </tr>
  252. </table>
  253. <table class="footer center" style="border-collapse: collapse; border-spacing: 0; color: #999999; margin-top: 20px; padding: 0; text-align: center; vertical-align: top;" bgcolor="#2e2e2e">
  254. <tr style="padding: 0; vertical-align: top;" align="left">
  255. <td class="wrapper last" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 10px 20px 0px 0px; position: relative; word-break: break-word;" align="left" valign="top">
  256. <table class="twelve columns center" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: center; vertical-align: top; width: 580px;">
  257. <tr style="padding: 0; vertical-align: top;" align="left">
  258. <td class="twelve" align="center" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0px 0px 10px; width: 100%; word-break: break-word;" valign="top">
  259. <center style="min-width: 580px; width: 100%;">
  260. <p style="-webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; color: #999999; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 12px; font-weight: normal; line-height: 19px; margin: 0 0 10px; padding: 0;" align="center">
  261. Sent by <a href="{{.AppUrl}}" style="color: #E67612; text-decoration: none;">Grafana v{{.BuildVersion}}</a>
  262. <br />© 2016 Grafana and raintank
  263. </p>
  264. </center>
  265. </td>
  266. <td class="expander" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 0; visibility: hidden; width: 0px; word-break: break-word;" align="left" valign="top"></td>
  267. </tr>
  268. </table>
  269. </td>
  270. </tr>
  271. </table>
  272. </center>
  273. </td>
  274. </tr>
  275. </table>
  276. </body>
  277. </html>