BaseWithHeaderEmailLayout.coffee 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380
  1. _ = require("underscore")
  2. settings = require "settings-sharelatex"
  3. module.exports = _.template """
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  5. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  6. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" style="Margin: 0; background: #E4E8EE !important; margin: 0; min-height: 100%; padding: 0;">
  7. <head>
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  9. <meta name="viewport" content="width=device-width">
  10. <style>.button td {
  11. border-radius: 9999px; }
  12. .avoid-auto-linking a,
  13. .avoid-auto-linking a[href] {
  14. color: #4F9C45 !important;
  15. text-decoration: none !important;
  16. -moz-hyphens: none;
  17. -ms-hyphens: none;
  18. -webkit-hyphens: none;
  19. hyphens: none; }
  20. .avoid-auto-linking a:visited,
  21. .avoid-auto-linking a[href]:visited {
  22. color: #4F9C45; }
  23. .avoid-auto-linking a:hover,
  24. .avoid-auto-linking a[href]:hover {
  25. color: #3d7935; }
  26. .avoid-auto-linking a:active,
  27. .avoid-auto-linking a[href]:active {
  28. color: #3d7935; }
  29. </style>
  30. <style>@media only screen {
  31. html {
  32. min-height: 100%;
  33. background: #f6f6f6;
  34. }
  35. }
  36. @media only screen and (max-width: 596px) {
  37. .small-float-center {
  38. margin: 0 auto !important;
  39. float: none !important;
  40. text-align: center !important;
  41. }
  42. .small-text-center {
  43. text-align: center !important;
  44. }
  45. .small-text-left {
  46. text-align: left !important;
  47. }
  48. .small-text-right {
  49. text-align: right !important;
  50. }
  51. }
  52. @media only screen and (max-width: 596px) {
  53. .hide-for-large {
  54. display: block !important;
  55. width: auto !important;
  56. overflow: visible !important;
  57. max-height: none !important;
  58. font-size: inherit !important;
  59. line-height: inherit !important;
  60. }
  61. }
  62. @media only screen and (max-width: 596px) {
  63. table.body table.container .hide-for-large,
  64. table.body table.container .row.hide-for-large {
  65. display: table !important;
  66. width: 100% !important;
  67. }
  68. }
  69. @media only screen and (max-width: 596px) {
  70. table.body table.container .callout-inner.hide-for-large {
  71. display: table-cell !important;
  72. width: 100% !important;
  73. }
  74. }
  75. @media only screen and (max-width: 596px) {
  76. table.body table.container .show-for-large {
  77. display: none !important;
  78. width: 0;
  79. mso-hide: all;
  80. overflow: hidden;
  81. }
  82. }
  83. @media only screen and (max-width: 596px) {
  84. table.body img {
  85. width: auto;
  86. height: auto;
  87. }
  88. table.body center {
  89. min-width: 0 !important;
  90. }
  91. table.body .container {
  92. width: 95% !important;
  93. }
  94. table.body .columns,
  95. table.body .column {
  96. height: auto !important;
  97. -moz-box-sizing: border-box;
  98. -webkit-box-sizing: border-box;
  99. box-sizing: border-box;
  100. padding-left: 16px !important;
  101. padding-right: 16px !important;
  102. }
  103. table.body .columns .column,
  104. table.body .columns .columns,
  105. table.body .column .column,
  106. table.body .column .columns {
  107. padding-left: 0 !important;
  108. padding-right: 0 !important;
  109. }
  110. table.body .collapse .columns,
  111. table.body .collapse .column {
  112. padding-left: 0 !important;
  113. padding-right: 0 !important;
  114. }
  115. td.small-1,
  116. th.small-1 {
  117. display: inline-block !important;
  118. width: 8.33333% !important;
  119. }
  120. td.small-2,
  121. th.small-2 {
  122. display: inline-block !important;
  123. width: 16.66667% !important;
  124. }
  125. td.small-3,
  126. th.small-3 {
  127. display: inline-block !important;
  128. width: 25% !important;
  129. }
  130. td.small-4,
  131. th.small-4 {
  132. display: inline-block !important;
  133. width: 33.33333% !important;
  134. }
  135. td.small-5,
  136. th.small-5 {
  137. display: inline-block !important;
  138. width: 41.66667% !important;
  139. }
  140. td.small-6,
  141. th.small-6 {
  142. display: inline-block !important;
  143. width: 50% !important;
  144. }
  145. td.small-7,
  146. th.small-7 {
  147. display: inline-block !important;
  148. width: 58.33333% !important;
  149. }
  150. td.small-8,
  151. th.small-8 {
  152. display: inline-block !important;
  153. width: 66.66667% !important;
  154. }
  155. td.small-9,
  156. th.small-9 {
  157. display: inline-block !important;
  158. width: 75% !important;
  159. }
  160. td.small-10,
  161. th.small-10 {
  162. display: inline-block !important;
  163. width: 83.33333% !important;
  164. }
  165. td.small-11,
  166. th.small-11 {
  167. display: inline-block !important;
  168. width: 91.66667% !important;
  169. }
  170. td.small-12,
  171. th.small-12 {
  172. display: inline-block !important;
  173. width: 100% !important;
  174. }
  175. .columns td.small-12,
  176. .column td.small-12,
  177. .columns th.small-12,
  178. .column th.small-12 {
  179. display: block !important;
  180. width: 100% !important;
  181. }
  182. table.body td.small-offset-1,
  183. table.body th.small-offset-1 {
  184. margin-left: 8.33333% !important;
  185. Margin-left: 8.33333% !important;
  186. }
  187. table.body td.small-offset-2,
  188. table.body th.small-offset-2 {
  189. margin-left: 16.66667% !important;
  190. Margin-left: 16.66667% !important;
  191. }
  192. table.body td.small-offset-3,
  193. table.body th.small-offset-3 {
  194. margin-left: 25% !important;
  195. Margin-left: 25% !important;
  196. }
  197. table.body td.small-offset-4,
  198. table.body th.small-offset-4 {
  199. margin-left: 33.33333% !important;
  200. Margin-left: 33.33333% !important;
  201. }
  202. table.body td.small-offset-5,
  203. table.body th.small-offset-5 {
  204. margin-left: 41.66667% !important;
  205. Margin-left: 41.66667% !important;
  206. }
  207. table.body td.small-offset-6,
  208. table.body th.small-offset-6 {
  209. margin-left: 50% !important;
  210. Margin-left: 50% !important;
  211. }
  212. table.body td.small-offset-7,
  213. table.body th.small-offset-7 {
  214. margin-left: 58.33333% !important;
  215. Margin-left: 58.33333% !important;
  216. }
  217. table.body td.small-offset-8,
  218. table.body th.small-offset-8 {
  219. margin-left: 66.66667% !important;
  220. Margin-left: 66.66667% !important;
  221. }
  222. table.body td.small-offset-9,
  223. table.body th.small-offset-9 {
  224. margin-left: 75% !important;
  225. Margin-left: 75% !important;
  226. }
  227. table.body td.small-offset-10,
  228. table.body th.small-offset-10 {
  229. margin-left: 83.33333% !important;
  230. Margin-left: 83.33333% !important;
  231. }
  232. table.body td.small-offset-11,
  233. table.body th.small-offset-11 {
  234. margin-left: 91.66667% !important;
  235. Margin-left: 91.66667% !important;
  236. }
  237. table.body table.columns td.expander,
  238. table.body table.columns th.expander {
  239. display: none !important;
  240. }
  241. table.body .right-text-pad,
  242. table.body .text-pad-right {
  243. padding-left: 10px !important;
  244. }
  245. table.body .left-text-pad,
  246. table.body .text-pad-left {
  247. padding-right: 10px !important;
  248. }
  249. table.menu {
  250. width: 100% !important;
  251. }
  252. table.menu td,
  253. table.menu th {
  254. width: auto !important;
  255. display: inline-block !important;
  256. }
  257. table.menu.vertical td,
  258. table.menu.vertical th,
  259. table.menu.small-vertical td,
  260. table.menu.small-vertical th {
  261. display: block !important;
  262. }
  263. table.menu[align="center"] {
  264. width: auto !important;
  265. }
  266. table.button.small-expand,
  267. table.button.small-expanded {
  268. width: 100% !important;
  269. }
  270. table.button.small-expand table,
  271. table.button.small-expanded table {
  272. width: 100%;
  273. }
  274. table.button.small-expand table a,
  275. table.button.small-expanded table a {
  276. text-align: center !important;
  277. width: 100% !important;
  278. padding-left: 0 !important;
  279. padding-right: 0 !important;
  280. }
  281. table.button.small-expand center,
  282. table.button.small-expanded center {
  283. min-width: 0;
  284. }
  285. }</style>
  286. </head>
  287. <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#F6F6F6" style="-moz-box-sizing: border-box; -ms-text-size-adjust: 100%; -webkit-box-sizing: border-box; -webkit-text-size-adjust: 100%; Margin: 0; box-sizing: border-box; color: #5D6879; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; min-width: 100%; padding: 0; text-align: left; width: 100% !important;">
  288. <!-- <span class="preheader"></span> -->
  289. <table class="body" border="0" cellspacing="0" cellpadding="0" width="100%" height="100%" style="Margin: 0; background: #E4E8EE; border-collapse: collapse; border-spacing: 0; color: #5D6879; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; height: 100%; line-height: 1.3; margin: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;">
  290. <tr style="padding: 0; text-align: left; vertical-align: top;">
  291. <td class="body-cell" align="center" valign="top" bgcolor="#F6F6F6" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; background: #E4E8EE !important; border-collapse: collapse !important; color: #5D6879; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; padding-bottom: 20px; text-align: left; vertical-align: top; word-wrap: break-word;">
  292. <center data-parsed="" style="min-width: 580px; width: 100%;">
  293. <table align="center" class="wrapper header float-center" style="Margin: 0 auto; background: #1E2530; border-bottom: none; border-collapse: collapse; border-spacing: 0; float: none; margin: 0 auto; padding: 0; text-align: center; vertical-align: top; width: 100%;"><tr style="padding: 0; text-align: left; vertical-align: top;"><td class="wrapper-inner" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #5D6879; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 20px; text-align: left; vertical-align: top; word-wrap: break-word;">
  294. <table align="center" class="container" style="Margin: 0 auto; background: transparent; border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: inherit; vertical-align: top; width: 580px;"><tbody><tr style="padding: 0; text-align: left; vertical-align: top;"><td style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #5D6879; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">
  295. <table class="row collapse" style="border-collapse: collapse; border-spacing: 0; display: table; padding: 0; position: relative; text-align: left; vertical-align: top; width: 100%;"><tbody><tr style="padding: 0; text-align: left; vertical-align: top;">
  296. <th class="small-12 large-12 columns first last" style="Margin: 0 auto; color: #5D6879; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0 auto; padding: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; text-align: left; width: 588px;"><table style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;"><tr style="padding: 0; text-align: left; vertical-align: top;"><th style="Margin: 0; color: #5D6879; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left;">
  297. <h1 style="Margin: 0; Margin-bottom: px; color: #FFFFFF; font-family: Georgia, serif; font-size: 30px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: px; padding: 0; text-align: left; word-wrap: normal;">
  298. Overleaf
  299. </h1>
  300. </th>
  301. <th class="expander" style="Margin: 0; color: #5D6879; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0 !important; text-align: left; visibility: hidden; width: 0;"></th></tr></table></th>
  302. </tr></tbody></table>
  303. </td></tr></tbody></table>
  304. </td></tr></table>
  305. <table class="spacer float-center" style="Margin: 0 auto; border-collapse: collapse; border-spacing: 0; float: none; margin: 0 auto; padding: 0; text-align: center; vertical-align: top; width: 100%;"><tbody><tr style="padding: 0; text-align: left; vertical-align: top;"><td height="20px" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #5D6879; font-family: Helvetica, Arial, sans-serif; font-size: 20px; font-weight: normal; hyphens: auto; line-height: 20px; margin: 0; mso-line-height-rule: exactly; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">&#xA0;</td></tr></tbody></table>
  306. <table align="center" class="container main float-center" style="Margin: 0 auto; Margin-top: 10px; background: #FFFFFF; border-collapse: collapse; border-spacing: 0; float: none; margin: 0 auto; margin-top: 10px; padding: 0; text-align: center; vertical-align: top; width: 580px;"><tbody><tr style="padding: 0; text-align: left; vertical-align: top;"><td style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #5D6879; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">
  307. <table class="spacer" style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;"><tbody><tr style="padding: 0; text-align: left; vertical-align: top;"><td height="20px" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #5D6879; font-family: Helvetica, Arial, sans-serif; font-size: 20px; font-weight: normal; hyphens: auto; line-height: 20px; margin: 0; mso-line-height-rule: exactly; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">&#xA0;</td></tr></tbody></table>
  308. <%= body %>
  309. <table class="wrapper secondary" align="center" style="background: #E4E8EE; border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;"><tr style="padding: 0; text-align: left; vertical-align: top;"><td class="wrapper-inner" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #5D6879; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; hyphens: auto; line-height: 1.3; margin: 0; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">
  310. <table class="spacer" style="border-collapse: collapse; border-spacing: 0; padding: 0; text-align: left; vertical-align: top; width: 100%;"><tbody><tr style="padding: 0; text-align: left; vertical-align: top;"><td height="10px" style="-moz-hyphens: auto; -webkit-hyphens: auto; Margin: 0; border-collapse: collapse !important; color: #5D6879; font-family: Helvetica, Arial, sans-serif; font-size: 10px; font-weight: normal; hyphens: auto; line-height: 10px; margin: 0; mso-line-height-rule: exactly; padding: 0; text-align: left; vertical-align: top; word-wrap: break-word;">&#xA0;</td></tr></tbody></table>
  311. <p style="Margin: 0; Margin-bottom: 10px; color: #5D6879; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;"><small style="color: #5D6879; font-size: 80%;">
  312. #{ settings.appName} &bull; <a href="#{ settings.siteUrl }" style="Margin: 0; color: #4F9C45; font-family: Helvetica, Arial, sans-serif; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; text-align: left; text-decoration: none;">#{ settings.siteUrl }</a>
  313. </small></p>
  314. </td></tr></table>
  315. </td></tr></tbody></table>
  316. </center>
  317. </td>
  318. </tr>
  319. </table>
  320. <!-- prevent Gmail on iOS font size manipulation -->
  321. <div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
  322. </body>
  323. </html>
  324. """