new_user_invite.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  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; 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"] center {
  82. min-width: 0 !important;
  83. }
  84. table[class="body"] .container {
  85. width: 95% !important;
  86. }
  87. table[class="body"] .row {
  88. width: 100% !important; display: block !important;
  89. }
  90. table[class="body"] .wrapper {
  91. display: block !important; padding-right: 0 !important;
  92. }
  93. table[class="body"] .columns {
  94. table-layout: fixed !important; float: none !important; width: 100% !important; padding-right: 0px !important; padding-left: 0px !important; display: block !important;
  95. }
  96. table[class="body"] table.columns td {
  97. width: 100% !important;
  98. }
  99. table[class="body"] .columns td.six {
  100. width: 50% !important;
  101. }
  102. table[class="body"] .columns td.twelve {
  103. width: 100% !important;
  104. }
  105. table[class="body"] table.columns td.expander {
  106. width: 1px !important;
  107. }
  108. .logo {
  109. margin-left: 10px;
  110. }
  111. }
  112. @media (max-width: 600px) {
  113. table[class="email-container"] {
  114. width: 95% !important;
  115. }
  116. img[class="fluid"] {
  117. width: 100% !important; max-width: 100% !important; height: auto !important; margin: auto !important;
  118. }
  119. img[class="fluid-centered"] {
  120. width: 100% !important; max-width: 100% !important; height: auto !important; margin: auto !important;
  121. }
  122. img[class="fluid-centered"] {
  123. margin: auto !important;
  124. }
  125. td[class="comms-content"] {
  126. padding: 20px !important;
  127. }
  128. td[class="stack-column"] {
  129. display: block !important; width: 100% !important; direction: ltr !important;
  130. }
  131. td[class="stack-column-center"] {
  132. display: block !important; width: 100% !important; direction: ltr !important;
  133. }
  134. td[class="stack-column-center"] {
  135. text-align: center !important;
  136. }
  137. td[class="copy"] {
  138. font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
  139. }
  140. td[class="copy -center"] {
  141. font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
  142. }
  143. td[class="copy -bold"] {
  144. font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
  145. }
  146. td[class="small-text"] {
  147. font-size: 14px !important; line-height: 24px !important; padding: 0 30px !important;
  148. }
  149. td[class="mini-centered-text"] {
  150. font-size: 14px !important; line-height: 24px !important; padding: 15px 30px !important;
  151. }
  152. td[class="copy -padd"] {
  153. padding: 0 40px !important;
  154. }
  155. span[class="sep"] {
  156. display: none !important;
  157. }
  158. td[class="mb-hide"] {
  159. display: none !important; height: 0 !important;
  160. }
  161. td[class="spacer mb-shorten"] {
  162. height: 25px !important;
  163. }
  164. .two-up td {
  165. width: 270px;
  166. }
  167. }
  168. </style>
  169. <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%;" bgcolor="#2e2e2e">
  170. <tr style="padding: 0; vertical-align: top;" align="left">
  171. <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;">
  172. <center style="min-width: 580px; width: 100%;">
  173. <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%;">
  174. <tr style="padding: 0; vertical-align: top;" align="left">
  175. <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">
  176. <center style="min-width: 580px; width: 100%;">
  177. <table class="container" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: inherit; vertical-align: top; width: 580px;">
  178. <tr style="padding: 0; vertical-align: top;" align="left">
  179. <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">
  180. <table class="twelve columns" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: left; vertical-align: top; width: 580px;">
  181. <tr style="padding: 0; vertical-align: top;" align="left">
  182. <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">
  183. <img class="logo" src="http://grafana.org/assets/img/logo_new_transparent_200x48.png" style="-ms-interpolation-mode: bicubic; border: 0; clear: both; display: inline; outline: none !important; text-decoration: none !important; width: 200px;" align="none" />
  184. </td>
  185. <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>
  186. </tr>
  187. </table>
  188. </td>
  189. </tr>
  190. </table>
  191. </center>
  192. </td>
  193. </tr>
  194. </table>
  195. <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">
  196. <tr style="padding: 0; vertical-align: top;" align="left">
  197. <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>
  198. </tr>
  199. <tr style="padding: 0; vertical-align: top;" align="left">
  200. <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 35px; word-break: break-word;" align="center" valign="top">
  201. {{Subject .Subject "{{.InvitedBy}} has invited you to join Grafana"}}
  202. <table class="row" style="border-collapse: collapse; border-spacing: 0; display: block; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%;">
  203. <tr style="padding: 0; vertical-align: top;" align="left">
  204. <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">
  205. <table class="twelve columns" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: left; vertical-align: top; width: 580px;">
  206. <tr style="padding: 0; vertical-align: top;" align="left">
  207. <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">
  208. <h4 class="center" 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="center">You're invited to join {{.OrgName}}</h4>
  209. </td>
  210. <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>
  211. </tr>
  212. </table>
  213. </td>
  214. </tr>
  215. </table>
  216. <table class="row" style="border-collapse: collapse; border-spacing: 0; display: block; padding: 0px; position: relative; text-align: left; vertical-align: top; width: 100%;">
  217. <tr style="padding: 0; vertical-align: top;" align="left">
  218. <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">
  219. <table class="twelve columns" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: left; vertical-align: top; width: 580px;">
  220. <tr style="padding: 0; vertical-align: top;" align="left">
  221. <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">
  222. <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">You've been invited to join the <b>{{.OrgName}}</b> organization by <b>{{.InvitedBy}}</b>. To accept your invitation and join the team, please click the link below:</p>
  223. </td>
  224. </tr>
  225. <tr style="padding: 0; vertical-align: top;" align="left">
  226. <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">
  227. <table class="better-button" align="center" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; border-spacing: 0; margin-bottom: 20px; margin-top: 10px; padding: 0; text-align: left; vertical-align: top;">
  228. <tr style="padding: 0; vertical-align: top;" align="left">
  229. <td align="center" class="better-button" bgcolor="#ff8f2b" style="-moz-border-radius: 2px; -moz-hyphens: auto; -webkit-border-radius: 2px; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; border-radius: 2px; 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; word-break: break-word;" valign="top"><a href="{{.LinkUrl}}" target="_blank" style="-moz-border-radius: 2px; -webkit-border-radius: 2px; border: 1px solid #ff8f2b; border-radius: 2px; color: #FFF; display: inline-block; padding: 12px 25px; text-decoration: none;">Accept Invitation</a></td>
  230. </tr>
  231. </table>
  232. </td>
  233. </tr>
  234. <tr style="padding: 0; vertical-align: top;" align="left">
  235. <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">
  236. <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">You can also copy/paste this link into your browser directly: <a href="{{.LinkUrl}}" style="color: #E67612; text-decoration: none;">{{.LinkUrl}}</a></p>
  237. </td>
  238. <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>
  239. </tr>
  240. </table>
  241. </td>
  242. </tr>
  243. </table>
  244. </td>
  245. </tr>
  246. </table>
  247. <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">
  248. <tr style="padding: 0; vertical-align: top;" align="left">
  249. <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">
  250. <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;">
  251. <tr style="padding: 0; vertical-align: top;" align="left">
  252. <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">
  253. <center style="min-width: 580px; width: 100%;">
  254. <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">
  255. Sent by <a href="{{.AppUrl}}" style="color: #E67612; text-decoration: none;">Grafana v{{.BuildVersion}}</a>
  256. <br />© 2016 Grafana and raintank
  257. </p>
  258. </center>
  259. </td>
  260. <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>
  261. </tr>
  262. </table>
  263. </td>
  264. </tr>
  265. </table>
  266. </center>
  267. </td>
  268. </tr>
  269. </table>
  270. </body>
  271. </html>