You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

216 lines
11 KiB

  1. <!DOCTYPE html>
  2. <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  8. <style type="text/css">
  9. /* FONTS */
  10. @media screen {
  11. @font-face {
  12. font-family: 'Lato';
  13. font-style: normal;
  14. font-weight: 400;
  15. src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
  16. }
  17. @font-face {
  18. font-family: 'Lato';
  19. font-style: normal;
  20. font-weight: 700;
  21. src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v11/qdgUG4U09HnJwhYI-uK18wLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
  22. }
  23. @font-face {
  24. font-family: 'Lato';
  25. font-style: italic;
  26. font-weight: 400;
  27. src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v11/RYyZNoeFgb0l7W3Vu1aSWOvvDin1pK8aKteLpeZ5c0A.woff) format('woff');
  28. }
  29. @font-face {
  30. font-family: 'Lato';
  31. font-style: italic;
  32. font-weight: 700;
  33. src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v11/HkF_qI1x_noxlxhrhMQYELO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
  34. }
  35. }
  36. /* CLIENT-SPECIFIC STYLES */
  37. body, table, th, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
  38. img { -ms-interpolation-mode: bicubic; border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none;}
  39. /* RESET STYLES */
  40. table { border-collapse: collapse !important; padding: 0 !important;}
  41. body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
  42. /* iOS BLUE LINKS */
  43. a[x-apple-data-detectors] {
  44. color: inherit !important;
  45. text-decoration: none !important;
  46. font-size: inherit !important;
  47. font-family: inherit !important;
  48. font-weight: inherit !important;
  49. line-height: inherit !important;
  50. }
  51. /* MOBILE STYLES */
  52. @media screen and (max-width:600px){
  53. h1 {
  54. font-size: 32px !important;
  55. line-height: 32px !important;
  56. }
  57. }
  58. /* ANDROID CENTER FIX */
  59. div[style*="margin: 16px 0;"] { margin: 0 !important; }
  60. </style>
  61. </head>
  62. <body style="background-color: #f4f4f4; margin: 0 !important; padding: 0 !important;">
  63. <!-- HIDDEN PREHEADER TEXT -->
  64. <div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: 'Lato', Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
  65. {{#i18n 'email.happy' }}We are happy to send you this email! You will be able to vote using majority judgment.{{/i18n}}
  66. </div>
  67. <table border="0" style="margin: 0px auto 0px auto; width: 100%;" aria-describedby="Email">
  68. <!-- LOGO -->
  69. <tr>
  70. <th scope="col" style="background-color:#efefff ;">
  71. <table border="0" style="margin: 0px auto 0px auto; width: 100%; max-width: 600px;" aria-describedby="Logo picture">
  72. <tr>
  73. <th scope="col" style="vertical-align: top; padding: 40px 10px 40px 10px;">
  74. <a href="https://mieuxvoter.fr/" target="_blank" rel="noopener noreferrer">
  75. <img alt="Logo" src="https://mieuxvoter.fr/wp-content/uploads/2019/10/mieuxvoter_logo.png" width="40" height="40" style="display: block; margin: 0px auto 0px auto; width: 50%; max-width: 250px; min-width: 40px; height: auto; font-family: 'Lato', Helvetica, Arial, sans-serif; color: #ffffff; font-size: 18px;" border="0">
  76. </a>
  77. </th>
  78. </tr>
  79. </table>
  80. </th>
  81. </tr>
  82. <!-- TITLE -->
  83. <tr>
  84. <th scope="col" style="background-color: #efefff; padding: 0px 10px 0px 10px;">
  85. <table border="0" style="margin: 0px auto 0px auto; width: 100%; max-width: 600px;" aria-describedby="email title">
  86. <tr>
  87. <th scope="col" style="vertical-align: top; background-color: #ffffff; padding: 40px 20px 20px 20px; border-radius: 4px 4px 0px 0px; color: #111111; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 400; letter-spacing: 4px; line-height: 48px;">
  88. <h1 style="font-size: 48px; font-weight: 400; margin: 0;">{{#i18n 'email.hello'}}Hi, there! 🙂{{/i18n}}</h1>
  89. </th>
  90. </tr>
  91. </table>
  92. </th>
  93. </tr>
  94. <!-- BLOCKS -->
  95. <tr>
  96. <th scope="col" style="background-color: #2a43a0; padding: 0px 10px 0px 10px;">
  97. <table border="0" style="margin: 0px auto 0px auto; width: 100%; max-width: 600px;" aria-describedby="email body">
  98. <!-- BLOCK SUBTITLE-->
  99. <tr>
  100. <th scope="col" style="background-color: #ffffff; padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
  101. <p style="margin: 0; text-align: left;">
  102. {{#i18n 'email.happy'}}We are happy to send you this email! You will be able to vote using majority judgment.{{/i18n}}
  103. </p>
  104. </th>
  105. </tr>
  106. <!-- BLOCK EXPLANATION-->
  107. <tr>
  108. <th scope="col" style="background-color: #ffffff; padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
  109. <p style="margin: 0; text-align: left;">
  110. {{#i18n 'email.why'}}This email was sent to you because your email address was entered to participate in the vote on the subject:{{/i18n}}
  111. &nbsp;
  112. <strong>{{title}}</strong>
  113. </p>
  114. </th>
  115. </tr>
  116. <!-- BULLETPROOF BUTTON BLUE-->
  117. <tr>
  118. <th scope="col" style="background-color: #ffffff;">
  119. <table border="0" style="margin: 0px auto 0px auto; width: 100%;" aria-describedby="Blue bulletproof button">
  120. <tr>
  121. <th scope="col" style="background-color: #ffffff; padding: 20px 30px 60px 30px;">
  122. <table border="0" style="margin: 0px auto 0px auto; border-collapse: collapse;" aria-describedby="invitation url">
  123. <tr>
  124. <th scope="col" style="border-radius: 3px; background-color: #2a43a0;"><a href="{{invitation_url}}" target="_blank" style="font-size: 20px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; padding: 15px 25px; border-radius: 2px; border: 1px solid #2a43a0; display: inline-block;">{{#i18n 'common.vote' }}Vote!{{/i18n}}</a></th>
  125. </tr>
  126. </table>
  127. </th>
  128. </tr>
  129. </table>
  130. </th>
  131. </tr>
  132. <!-- BLOCK DOES NOT WORK -->
  133. <tr>
  134. <th scope="col" style="background-color: #ffffff; padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
  135. <p style="margin: 0; text-align: left;">
  136. {{#i18n 'email.copyLink' }}If that doesn't work, copy and paste the following link into your browser:{{/i18n}}
  137. &nbsp;
  138. <a target="_blank" style="color: #2a43a0;">{{invitation_url}}</a>
  139. </p>
  140. </th>
  141. </tr>
  142. <!-- BLOCK TEXT RESULT -->
  143. <tr>
  144. <th scope="col" style="background-color: #ffffff; padding: 20px 30px 20px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
  145. <p style="margin: 0; text-align: left;">
  146. {{#i18n email.linkResult }}The results will be available with the following link when the vote is finished:{{/i18n}}
  147. &nbsp;
  148. <a target="_blank" style="color: #2a43a0;">{{result_url}}</a>
  149. </p>
  150. </th>
  151. </tr>
  152. <!-- BLOCK THANKS -->
  153. <tr>
  154. <th scope="col" style="background-color: #ffffff; padding: 0px 30px 40px 30px; border-radius: 0px 0px 4px 4px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
  155. <p style="margin: 0; text-align: left;">{{#i18n 'email.bye'}}Good vote{{/i18n}},<br>{{#i18n 'common.mieuxvoter'}}Mieux Voter{{/i18n}}</p>
  156. </th>
  157. </tr>
  158. </table>
  159. </th>
  160. </tr>
  161. <!-- SUPPORT CALLOUT -->
  162. <tr>
  163. <th scope="col" style="background-color: #f4f4f4; padding: 30px 10px 0px 10px;">
  164. <table border="0" style="margin: 0px auto 0px auto; width: 100%; max-width: 600px;" aria-describedby="support callout">
  165. <!-- HEADLINE -->
  166. <tr>
  167. <th scope="col" style="background-color: #7d8ecf; padding: 30px 30px 30px 30px; border-radius: 4px 4px 4px 4px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;" >
  168. <p style="margin: 0;"><strong>
  169. <a href="https://mieuxvoter.fr/index.php/decouvrir/" target="_blank" style="color: #FFFFFF;" rel="noopener noreferrer">
  170. {{#i18n 'email.aboutjm'}}Need any further information?{{/i18n}}
  171. </a></strong>
  172. </p>
  173. <p style="margin: 0;"> <strong>
  174. <a href="https://mieuxvoter.fr/index.php/decouvrir/" target="_blank" style="color: #111111;" rel="noopener noreferrer">
  175. {{#i18n 'common.helpus'}}Do you want to help us?{{/i18n}}
  176. </a></strong>
  177. </p>
  178. </th>
  179. </tr>
  180. </table>
  181. </th>
  182. </tr>
  183. <!-- FOOTER -->
  184. <tr>
  185. <th scope="col" style="background-color: #f4f4f4; padding: 0px 10px 0px 10px;">
  186. <table border="0" style="margin: 0px auto 0px auto; width: 100%; max-width: 600px;" aria-describedby="footer informations">
  187. <!-- EXPLAIN WHY -->
  188. </br>
  189. <tr>
  190. <th scope="col" style="background-color: #f4f4f4; padding: 0px 30px 30px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 18px;" >
  191. <p style="margin: 0;">
  192. {{#i18n email.why }}You received this email because someone invited you to vote.{{/i18n}}
  193. </p>
  194. </th>
  195. </tr>
  196. <!-- ADDRESS -->
  197. <tr>
  198. <th scope="col" style="background-color: #f4f4f4; padding: 0px 30px 30px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 18px;" >
  199. <p style="margin: 0;">{{#i18n mieuxvoter }}Mieux Voter{{/i18n}} - <a "mailto:app@mieuxvoter.fr">app@mieuxvoter.fr</a></p>
  200. </th>
  201. </tr>
  202. </table>
  203. </th>
  204. </tr>
  205. </table>
  206. </body>
  207. </html>