template-change-email.html 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html
  3. xmlns="http://www.w3.org/1999/xhtml"
  4. xmlns:v="urn:schemas-microsoft-com:vml"
  5. xmlns:o="urn:schemas-microsoft-com:office:office"
  6. >
  7. <head>
  8. <!--[if gte mso 9
  9. ]><xml>
  10. <o:OfficeDocumentSettings>
  11. <o:AllowPNG />
  12. <o:PixelsPerInch>96</o:PixelsPerInch>
  13. </o:OfficeDocumentSettings>
  14. </xml><!
  15. [endif]-->
  16. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  17. <meta name="viewport" content="width=device-width" />
  18. <!--[if !mso]><!-->
  19. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  20. <!--<![endif]-->
  21. <title></title>
  22. <style type="text/css" id="media-query">
  23. body {
  24. margin: 0;
  25. padding: 0;
  26. }
  27. table,
  28. tr,
  29. td {
  30. vertical-align: top;
  31. border-collapse: collapse;
  32. }
  33. .ie-browser table,
  34. .mso-container table {
  35. table-layout: fixed;
  36. }
  37. * {
  38. line-height: inherit;
  39. }
  40. a[x-apple-data-detectors="true"] {
  41. color: inherit !important;
  42. text-decoration: none !important;
  43. }
  44. [owa] .img-container div,
  45. [owa] .img-container button {
  46. display: block !important;
  47. }
  48. [owa] .fullwidth button {
  49. width: 100% !important;
  50. }
  51. [owa] .block-grid .col {
  52. display: table-cell;
  53. float: none !important;
  54. vertical-align: top;
  55. }
  56. .ie-browser .num12,
  57. .ie-browser .block-grid,
  58. [owa] .num12,
  59. [owa] .block-grid {
  60. width: 500px !important;
  61. }
  62. .ExternalClass,
  63. .ExternalClass p,
  64. .ExternalClass span,
  65. .ExternalClass font,
  66. .ExternalClass td,
  67. .ExternalClass div {
  68. line-height: 100%;
  69. }
  70. .ie-browser .mixed-two-up .num4,
  71. [owa] .mixed-two-up .num4 {
  72. width: 164px !important;
  73. }
  74. .ie-browser .mixed-two-up .num8,
  75. [owa] .mixed-two-up .num8 {
  76. width: 328px !important;
  77. }
  78. .ie-browser .block-grid.two-up .col,
  79. [owa] .block-grid.two-up .col {
  80. width: 250px !important;
  81. }
  82. .ie-browser .block-grid.three-up .col,
  83. [owa] .block-grid.three-up .col {
  84. width: 166px !important;
  85. }
  86. .ie-browser .block-grid.four-up .col,
  87. [owa] .block-grid.four-up .col {
  88. width: 125px !important;
  89. }
  90. .ie-browser .block-grid.five-up .col,
  91. [owa] .block-grid.five-up .col {
  92. width: 100px !important;
  93. }
  94. .ie-browser .block-grid.six-up .col,
  95. [owa] .block-grid.six-up .col {
  96. width: 83px !important;
  97. }
  98. .ie-browser .block-grid.seven-up .col,
  99. [owa] .block-grid.seven-up .col {
  100. width: 71px !important;
  101. }
  102. .ie-browser .block-grid.eight-up .col,
  103. [owa] .block-grid.eight-up .col {
  104. width: 62px !important;
  105. }
  106. .ie-browser .block-grid.nine-up .col,
  107. [owa] .block-grid.nine-up .col {
  108. width: 55px !important;
  109. }
  110. .ie-browser .block-grid.ten-up .col,
  111. [owa] .block-grid.ten-up .col {
  112. width: 50px !important;
  113. }
  114. .ie-browser .block-grid.eleven-up .col,
  115. [owa] .block-grid.eleven-up .col {
  116. width: 45px !important;
  117. }
  118. .ie-browser .block-grid.twelve-up .col,
  119. [owa] .block-grid.twelve-up .col {
  120. width: 41px !important;
  121. }
  122. @media only screen and (min-width: 520px) {
  123. .block-grid {
  124. width: 500px !important;
  125. }
  126. .block-grid .col {
  127. vertical-align: top;
  128. }
  129. .block-grid .col.num12 {
  130. width: 500px !important;
  131. }
  132. .block-grid.mixed-two-up .col.num4 {
  133. width: 164px !important;
  134. }
  135. .block-grid.mixed-two-up .col.num8 {
  136. width: 328px !important;
  137. }
  138. .block-grid.two-up .col {
  139. width: 250px !important;
  140. }
  141. .block-grid.three-up .col {
  142. width: 166px !important;
  143. }
  144. .block-grid.four-up .col {
  145. width: 125px !important;
  146. }
  147. .block-grid.five-up .col {
  148. width: 100px !important;
  149. }
  150. .block-grid.six-up .col {
  151. width: 83px !important;
  152. }
  153. .block-grid.seven-up .col {
  154. width: 71px !important;
  155. }
  156. .block-grid.eight-up .col {
  157. width: 62px !important;
  158. }
  159. .block-grid.nine-up .col {
  160. width: 55px !important;
  161. }
  162. .block-grid.ten-up .col {
  163. width: 50px !important;
  164. }
  165. .block-grid.eleven-up .col {
  166. width: 45px !important;
  167. }
  168. .block-grid.twelve-up .col {
  169. width: 41px !important;
  170. }
  171. }
  172. @media (max-width: 520px) {
  173. .block-grid,
  174. .col {
  175. min-width: 320px !important;
  176. max-width: 100% !important;
  177. display: block !important;
  178. }
  179. .block-grid {
  180. width: calc(100% - 40px) !important;
  181. }
  182. .col {
  183. width: 100% !important;
  184. }
  185. .col > div {
  186. margin: 0 auto;
  187. }
  188. img.fullwidth,
  189. img.fullwidthOnMobile {
  190. max-width: 100% !important;
  191. }
  192. .no-stack .col {
  193. min-width: 0 !important;
  194. display: table-cell !important;
  195. }
  196. .no-stack.two-up .col {
  197. width: 50% !important;
  198. }
  199. .no-stack.mixed-two-up .col.num4 {
  200. width: 33% !important;
  201. }
  202. .no-stack.mixed-two-up .col.num8 {
  203. width: 66% !important;
  204. }
  205. .no-stack.three-up .col.num4 {
  206. width: 33% !important;
  207. }
  208. .no-stack.four-up .col.num3 {
  209. width: 25% !important;
  210. }
  211. }
  212. </style>
  213. </head>
  214. <body
  215. class="clean-body"
  216. style="margin: 0;padding: 0;-webkit-text-size-adjust: 100%;background-color: #FFFFFF"
  217. >
  218. <style type="text/css" id="media-query-bodytag">
  219. @media (max-width: 520px) {
  220. .block-grid {
  221. min-width: 320px !important;
  222. max-width: 100% !important;
  223. width: 100% !important;
  224. display: block !important;
  225. }
  226. .col {
  227. min-width: 320px !important;
  228. max-width: 100% !important;
  229. width: 100% !important;
  230. display: block !important;
  231. }
  232. .col > div {
  233. margin: 0 auto;
  234. }
  235. img.fullwidth {
  236. max-width: 100% !important;
  237. }
  238. img.fullwidthOnMobile {
  239. max-width: 100% !important;
  240. }
  241. .no-stack .col {
  242. min-width: 0 !important;
  243. display: table-cell !important;
  244. }
  245. .no-stack.two-up .col {
  246. width: 50% !important;
  247. }
  248. .no-stack.mixed-two-up .col.num4 {
  249. width: 33% !important;
  250. }
  251. .no-stack.mixed-two-up .col.num8 {
  252. width: 66% !important;
  253. }
  254. .no-stack.three-up .col.num4 {
  255. width: 33% !important;
  256. }
  257. .no-stack.four-up .col.num3 {
  258. width: 25% !important;
  259. }
  260. }
  261. </style>
  262. <!--[if IE]><div class="ie-browser"><![endif]-->
  263. <!--[if mso]><div class="mso-container"><![endif]-->
  264. <table
  265. class="nl-container"
  266. style="border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;min-width: 320px;Margin: 0 auto;background-color: #FFFFFF;width: 100%"
  267. cellpadding="0"
  268. cellspacing="0"
  269. >
  270. <tbody>
  271. <tr style="vertical-align: top">
  272. <td
  273. style="word-break: break-word;border-collapse: collapse !important;vertical-align: top"
  274. >
  275. <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center" style="background-color: #FFFFFF;"><![endif]-->
  276. <div style="background-color:#FFFFFF;">
  277. <div
  278. style="Margin: 0 auto;min-width: 320px;max-width: 500px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: #000000;"
  279. class="block-grid "
  280. >
  281. <div
  282. style="border-collapse: collapse;display: table;width: 100%;background-color:#000000;"
  283. >
  284. <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="background-color:#FFFFFF;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width: 500px;"><tr class="layout-full-width" style="background-color:#000000;"><![endif]-->
  285. <!--[if (mso)|(IE)]><td align="center" width="500" style="background-color:#FFFFFF; width:500px; padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><![endif]-->
  286. <div
  287. class="col num12"
  288. style="min-width: 320px;max-width: 500px;display: table-cell;vertical-align: top;"
  289. >
  290. <div
  291. style="background-color: #FFFFFF; width: 100% !important;"
  292. >
  293. <!--[if (!mso)&(!IE)]><!-->
  294. <div
  295. style="border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px; padding-left: 0px;"
  296. >
  297. <!--<![endif]-->
  298. <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 0px; padding-left: 30px; padding-top: 10px; padding-bottom: 10px;"><![endif]-->
  299. <div
  300. style="color:#000000;line-height:200%;font-family:'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif; padding-right: 0px; padding-left: 30px; padding-top: 10px; padding-bottom: 10px;"
  301. >
  302. <div
  303. style="font-size:12px;line-height:24px;font-family:'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;color:#000000;text-align:left;"
  304. >
  305. <p
  306. style="margin: 0;font-size: 14px;line-height: 28px;text-align: left"
  307. >
  308. <span
  309. style="color: rgb(0, 0, 0); font-size: 14px; line-height: 28px;"
  310. >
  311. <strong>
  312. <span
  313. style="line-height: 56px; font-size: 28px;"
  314. >
  315. <span
  316. style="font-size: 24px; line-height: 48px;"
  317. >{{site_name}}</span
  318. >.</span
  319. >
  320. </strong>
  321. <span
  322. style="line-height: 56px; font-size: 28px;"
  323. ></span>
  324. </span>
  325. </p>
  326. </div>
  327. </div>
  328. <!--[if mso]></td></tr></table><![endif]-->
  329. <!--[if (!mso)&(!IE)]><!-->
  330. </div>
  331. <!--<![endif]-->
  332. </div>
  333. </div>
  334. <!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
  335. </div>
  336. </div>
  337. </div>
  338. <div style="background-color:transparent;">
  339. <div
  340. style="Margin: 0 auto;min-width: 320px;max-width: 500px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;"
  341. class="block-grid "
  342. >
  343. <div
  344. style="border-collapse: collapse;display: table;width: 100%;background-color:transparent;"
  345. >
  346. <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="background-color:transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width: 500px;"><tr class="layout-full-width" style="background-color:transparent;"><![endif]-->
  347. <!--[if (mso)|(IE)]><td align="center" width="500" style=" width:500px; padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><![endif]-->
  348. <div
  349. class="col num12"
  350. style="min-width: 320px;max-width: 500px;display: table-cell;vertical-align: top;"
  351. >
  352. <div
  353. style="background-color: transparent; width: 100% !important;"
  354. >
  355. <!--[if (!mso)&(!IE)]><!-->
  356. <div
  357. style="border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent; padding-top:5px; padding-bottom:5px; padding-right: 0px; padding-left: 0px;"
  358. >
  359. <!--<![endif]-->
  360. <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 30px; padding-left: 30px; padding-top: 30px; padding-bottom: 30px;"><![endif]-->
  361. <div
  362. style="color:#555555;line-height:180%;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif; padding-right: 30px; padding-left: 30px; padding-top: 30px; padding-bottom: 30px;"
  363. >
  364. <div
  365. style="font-size:12px;line-height:22px;color:#555555;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;text-align:left;"
  366. >
  367. <p
  368. style="margin: 0;font-size: 14px;line-height: 25px"
  369. >
  370. You're attempting to change your email address on
  371. {{domain}}.
  372. <br />
  373. </p>
  374. <p
  375. style="margin: 0;font-size: 14px;line-height: 25px"
  376. >
  377. Please verify your email address using the link
  378. below.
  379. </p>
  380. </div>
  381. </div>
  382. <!--[if mso]></td></tr></table><![endif]-->
  383. <!--[if (!mso)&(!IE)]><!-->
  384. </div>
  385. <!--<![endif]-->
  386. </div>
  387. </div>
  388. <!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
  389. </div>
  390. </div>
  391. </div>
  392. <div style="background-color:transparent;">
  393. <div
  394. style="Margin: 0 auto;min-width: 320px;max-width: 500px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;"
  395. class="block-grid "
  396. >
  397. <div
  398. style="border-collapse: collapse;display: table;width: 100%;background-color:transparent;"
  399. >
  400. <!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="background-color:transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width: 500px;"><tr class="layout-full-width" style="background-color:transparent;"><![endif]-->
  401. <!--[if (mso)|(IE)]><td align="center" width="500" style=" width:500px; padding-right: 5px; padding-left: 5px; padding-top:5px; padding-bottom:5px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;" valign="top"><![endif]-->
  402. <div
  403. class="col num12"
  404. style="min-width: 320px;max-width: 500px;display: table-cell;vertical-align: top;"
  405. >
  406. <div
  407. style="background-color: transparent; width: 100% !important;"
  408. >
  409. <!--[if (!mso)&(!IE)]><!-->
  410. <div
  411. style="border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent; padding-top:5px; padding-bottom:5px; padding-right: 5px; padding-left: 5px;"
  412. >
  413. <!--<![endif]-->
  414. <div
  415. align="left"
  416. class="button-container left"
  417. style="padding-right: 30px; padding-left: 30px; padding-top:30px; padding-bottom:30px;"
  418. >
  419. <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;"><tr><td style="padding-right: 30px; padding-left: 30px; padding-top:30px; padding-bottom:30px;" align="left"><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://{{domain}}/verify-email/{{verification}}" style="height:31pt; v-text-anchor:middle; width:81pt;" arcsize="143%" strokecolor="#2196F3" fillcolor="#2196F3"><w:anchorlock/><v:textbox inset="0,0,0,0"><center style="color:#ffffff; font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size:16px;"><![endif]-->
  420. <a
  421. href="https://{{domain}}/verify-email/{{verification}}"
  422. target="_blank"
  423. style="display: block;text-decoration: none;-webkit-text-size-adjust: none;text-align: center;color: #ffffff; background-color: #2196F3; border-radius: 60px; -webkit-border-radius: 60px; -moz-border-radius: 60px; max-width: 108px; width: 48px;width: auto; border-top: 0px solid transparent; border-right: 0px solid transparent; border-bottom: 0px solid transparent; border-left: 0px solid transparent; padding-top: 5px; padding-right: 30px; padding-bottom: 5px; padding-left: 30px; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;mso-border-alt: none"
  424. >
  425. <span style="font-size:16px;line-height:32px;"
  426. >Verify email</span
  427. >
  428. </a>
  429. <!--[if mso]></center></v:textbox></v:roundrect></td></tr></table><![endif]-->
  430. </div>
  431. <!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding-right: 40px; padding-left: 40px; padding-top: 40px; padding-bottom: 40px;"><![endif]-->
  432. <div
  433. style="color:#555555;line-height:180%;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif; padding-right: 40px; padding-left: 40px; padding-top: 40px; padding-bottom: 40px;"
  434. >
  435. <div
  436. style="font-size:12px;line-height:22px;text-align:center;color:#555555;font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;"
  437. >
  438. <span style="font-size:14px; line-height:25px;">
  439. <a
  440. style="color:#0068A5;text-decoration: underline;"
  441. href="https://{{domain}}"
  442. target="_blank"
  443. rel="noopener"
  444. data-mce-selected="1"
  445. >{{site_name}} | Free &amp; open source URL
  446. shortener</a
  447. >
  448. </span>
  449. <br data-mce-bogus="1" />
  450. </div>
  451. </div>
  452. <!--[if mso]></td></tr></table><![endif]-->
  453. <!--[if (!mso)&(!IE)]><!-->
  454. </div>
  455. <!--<![endif]-->
  456. </div>
  457. </div>
  458. <!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
  459. </div>
  460. </div>
  461. </div>
  462. <!--[if (mso)|(IE)]></td></tr></table><![endif]-->
  463. </td>
  464. </tr>
  465. </tbody>
  466. </table>
  467. <!--[if (mso)|(IE)]></div><![endif]-->
  468. </body>
  469. </html>