new_user_invite.html 20 KB

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