├── templates
    ├── password-reset.txt
    ├── verify-email.txt
    ├── org-invitation.txt
    ├── comment-notification.txt
    ├── change-email-verification.txt
    ├── reply-notification.txt
    ├── resetpassword.txt
    ├── password-reset.html
    ├── verify-email.html
    ├── comment-notification.html
    ├── org-invitation.html
    ├── reply-notification.html
    ├── change-email-verification.html
    └── resetpassword.html
├── README.md
└── LICENSE


/templates/password-reset.txt:
--------------------------------------------------------------------------------
1 | We've received a request to update your Canvas password.
2 | 
3 | Change Password {{action_url}}
4 | 
5 | Thanks,
6 | 
7 | The Canvas Team
8 | 325 9th St, San Francisco, CA 94103
9 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Canvas' Transactional Email Templates
2 | 
3 | Content ready, mobile friendly, and beautiful across all major email clients.
4 | Made possible by [Postmark](https://github.com/wildbit/postmark-templates)
5 | 


--------------------------------------------------------------------------------
/templates/verify-email.txt:
--------------------------------------------------------------------------------
1 | Thanks for signing up for Canvas! We're excited to have you as an early user.
2 | 
3 | Verify Email {{action_url}}
4 | 
5 | Thanks,
6 | 
7 | The Canvas Team
8 | 325 9th St, San Francisco, CA 94103
9 | 


--------------------------------------------------------------------------------
/templates/org-invitation.txt:
--------------------------------------------------------------------------------
 1 | Your {{org_name}} teammates want to write with you.
 2 | 
 3 | Join {{org_name}} {{action_url}}
 4 | 
 5 | Canvas is a writing app for teams of nerds. Meeting minutes. Product specs. Working together. Writing things down.
 6 | 
 7 | Thanks,
 8 | 
 9 | The Canvas Team
10 | 325 9th St, San Francisco, CA 94103
11 | 


--------------------------------------------------------------------------------
/templates/comment-notification.txt:
--------------------------------------------------------------------------------
 1 | @{{username}} commented on {{canvas_title}}
 2 | 
 3 | {{comment_text}}
 4 | 
 5 | View or Reply {{action_url}}
 6 | 
 7 | {{#mute_canvas_url}}P.S. Don't want to receive updates? You can mute notifications for this canvas: {{.}}{{/mute_canvas_url}}
 8 | 
 9 | Thanks,
10 | 
11 | The Canvas Team
12 | 325 9th St, San Francisco, CA 94103
13 | 


--------------------------------------------------------------------------------
/templates/change-email-verification.txt:
--------------------------------------------------------------------------------
 1 | You recently requested that we change your email address. Click the link to verify this is the right address.
 2 | 
 3 | Verify Email {{action_url}}
 4 | 
 5 | If you didn't request a change to your email, please let us know at hello@usecanvas.com.
 6 | 
 7 | Thanks,
 8 | 
 9 | The Canvas Team
10 | 325 9th St, San Francisco, CA 94103
11 | 


--------------------------------------------------------------------------------
/templates/reply-notification.txt:
--------------------------------------------------------------------------------
 1 | @{{username}} replied to a comment on {{canvas_title}}
 2 | 
 3 | {{reply_text}}
 4 | 
 5 | View or Reply {{action_url}}
 6 | 
 7 | {{#mute_canvas_url}}P.S. Don't want to receive updates? You can mute notifications for this canvas: {{.}}{{/mute_canvas_url}}
 8 | 
 9 | Thanks,
10 | 
11 | The Canvas Team
12 | 325 9th St, San Francisco, CA 94103
13 | 


--------------------------------------------------------------------------------
/templates/resetpassword.txt:
--------------------------------------------------------------------------------
 1 | Hi {{name}},
 2 | 
 3 | You recently requested to reset your password for your Canvas account. Click the button below to reset it.
 4 | 
 5 | {{action_url}}
 6 | 
 7 | If you did not request a password reset, please ignore this email or reply to let us know. This password reset is only valid for the next 30 minutes.
 8 | 
 9 | Thanks,
10 | Canvas Labs, Inc. and the Canvas Team
11 | 
12 | P.S. We also love hearing from you and helping you with any issues you have. Please reply to this email if you want to ask a question or just say hi.
13 | 
14 | © 2016 Canvas. All rights reserved.
15 | 
16 | Canvas
17 | {{product_address_line1}}
18 | {{product_address_line2}}
19 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Wildbit
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/templates/password-reset.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 | <html xmlns="http://www.w3.org/1999/xhtml">
  3 | <head>
  4 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5 |   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6 |   <title>Password Rest</title>
  7 |   <style type="text/css" rel="stylesheet" media="all">
  8 |     /* Base ------------------------------ */
  9 |     *:not(br):not(tr):not(html) {
 10 |       font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
 11 |       -webkit-box-sizing: border-box;
 12 |       box-sizing: border-box;
 13 |     }
 14 |     body {
 15 |       width: 100% !important;
 16 |       height: 100%;
 17 |       margin: 0;
 18 |       line-height: 1.4;
 19 |       background-color: #F5F7F9;
 20 |       color: #839197;
 21 |       -webkit-text-size-adjust: none;
 22 |     }
 23 |     a {
 24 |       color: #414EF9;
 25 |     }
 26 | 
 27 |     /* Layout ------------------------------ */
 28 |     .email-wrapper {
 29 |       width: 100%;
 30 |       margin: 0;
 31 |       padding: 0;
 32 |       background-color: #F5F7F9;
 33 |     }
 34 |     .email-content {
 35 |       width: 100%;
 36 |       margin: 0;
 37 |       padding: 0;
 38 |     }
 39 | 
 40 |     /* Masthead ----------------------- */
 41 |     .email-masthead {
 42 |       padding: 25px 0;
 43 |       text-align: center;
 44 |     }
 45 |     .email-masthead_logo {
 46 |       max-width: 400px;
 47 |       border: 0;
 48 |     }
 49 |     .email-masthead_name {
 50 |       font-size: 16px;
 51 |       font-weight: bold;
 52 |       color: #839197;
 53 |       text-decoration: none;
 54 |       text-shadow: 0 1px 0 white;
 55 |     }
 56 | 
 57 |     /* Body ------------------------------ */
 58 |     .email-body {
 59 |       width: 100%;
 60 |       margin: 0;
 61 |       padding: 0;
 62 |       border-top: 1px solid #E7EAEC;
 63 |       border-bottom: 1px solid #E7EAEC;
 64 |       background-color: #FFFFFF;
 65 |     }
 66 |     .email-body_inner {
 67 |       width: 570px;
 68 |       margin: 0 auto;
 69 |       padding: 0;
 70 |     }
 71 |     .email-footer {
 72 |       width: 570px;
 73 |       margin: 0 auto;
 74 |       padding: 0;
 75 |       text-align: center;
 76 |     }
 77 |     .email-footer p {
 78 |       color: #839197;
 79 |     }
 80 |     .body-action {
 81 |       width: 100%;
 82 |       margin: 30px auto;
 83 |       padding: 0;
 84 |       text-align: center;
 85 |     }
 86 |     .body-sub {
 87 |       margin-top: 25px;
 88 |       padding-top: 25px;
 89 |       border-top: 1px solid #E7EAEC;
 90 |     }
 91 |     .content-cell {
 92 |       padding: 35px;
 93 |     }
 94 |     .align-right {
 95 |       text-align: right;
 96 |     }
 97 | 
 98 |     /* Type ------------------------------ */
 99 |     h1 {
100 |       margin-top: 0;
101 |       color: #292E31;
102 |       font-size: 19px;
103 |       font-weight: bold;
104 |       text-align: left;
105 |     }
106 |     h2 {
107 |       margin-top: 0;
108 |       color: #292E31;
109 |       font-size: 16px;
110 |       font-weight: bold;
111 |       text-align: left;
112 |     }
113 |     h3 {
114 |       margin-top: 0;
115 |       color: #292E31;
116 |       font-size: 14px;
117 |       font-weight: bold;
118 |       text-align: left;
119 |     }
120 |     p {
121 |       margin-top: 0;
122 |       color: #839197;
123 |       font-size: 16px;
124 |       line-height: 1.5em;
125 |       text-align: left;
126 |     }
127 |     p.sub {
128 |       font-size: 12px;
129 |     }
130 |     p.center {
131 |       text-align: center;
132 |     }
133 | 
134 |     /* Buttons ------------------------------ */
135 |     .button {
136 |       display: inline-block;
137 |       width: 200px;
138 |       background-color: #414EF9;
139 |       border-radius: 3px;
140 |       color: #ffffff;
141 |       font-size: 15px;
142 |       line-height: 45px;
143 |       text-align: center;
144 |       text-decoration: none;
145 |       -webkit-text-size-adjust: none;
146 |       mso-hide: all;
147 |     }
148 |     .button--green {
149 |       background-color: #28DB67;
150 |     }
151 |     .button--red {
152 |       background-color: #FF3665;
153 |     }
154 |     .button--blue {
155 |       background-color: #414EF9;
156 |     }
157 | 
158 |     /*Media Queries ------------------------------ */
159 |     @media only screen and (max-width: 600px) {
160 |       .email-body_inner,
161 |       .email-footer {
162 |         width: 100% !important;
163 |       }
164 |     }
165 |     @media only screen and (max-width: 500px) {
166 |       .button {
167 |         width: 100% !important;
168 |       }
169 |     }
170 |   </style>
171 | </head>
172 | <body>
173 |   <table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0">
174 |     <tr>
175 |       <td align="center">
176 |         <table class="email-content" width="100%" cellpadding="0" cellspacing="0">
177 |           <!-- Logo -->
178 |           <tr>
179 |             <td class="email-masthead">
180 |               <a class="email-masthead_name">Canvas</a>
181 |             </td>
182 |           </tr>
183 |           <!-- Email Body -->
184 |           <tr>
185 |             <td class="email-body" width="100%">
186 |               <table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0">
187 |                 <!-- Body content -->
188 |                 <tr>
189 |                   <td class="content-cell">
190 |                     <h1>Password Reset</h1>
191 |                     <p>We received a request to update your Canvas password.</p>
192 |                     <!-- Action -->
193 |                     <table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
194 |                       <tr>
195 |                         <td align="center">
196 |                           <div>
197 |                             <!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{action_url}}" style="height:45px;v-text-anchor:middle;width:200px;" arcsize="7%" stroke="f" fill="t">
198 |                             <v:fill type="tile" color="#414EF9" />
199 |                             <w:anchorlock/>
200 |                             <center style="color:#ffffff;font-family:sans-serif;font-size:15px;">Change Password</center>
201 |                           </v:roundrect><![endif]-->
202 |                             <a href="{{action_url}}" class="button button--blue">Change Password</a>
203 |                           </div>
204 |                         </td>
205 |                       </tr>
206 |                     </table>
207 |                     <p>Thanks,<br>The Canvas Team</p>
208 |                     <!-- Sub copy -->
209 |                     <table class="body-sub">
210 |                       <tr>
211 |                         <td>
212 |                           <p class="sub">If you’re having trouble clicking the button, copy and paste the URL below into your web browser.
213 |                           </p>
214 |                           <p class="sub"><a href="{{action_url}}">{{action_url}}</a></p>
215 |                         </td>
216 |                       </tr>
217 |                     </table>
218 |                   </td>
219 |                 </tr>
220 |               </table>
221 |             </td>
222 |           </tr>
223 |           <tr>
224 |             <td>
225 |               <table class="email-footer" align="center" width="570" cellpadding="0" cellspacing="0">
226 |                 <tr>
227 |                   <td class="content-cell">
228 |                     <p class="sub center">
229 |                       Canvas Labs, Inc.
230 |                       <br>325 9th St, San Francisco, CA 94103
231 |                     </p>
232 |                   </td>
233 |                 </tr>
234 |               </table>
235 |             </td>
236 |           </tr>
237 |         </table>
238 |       </td>
239 |     </tr>
240 |   </table>
241 | </body>
242 | </html>
243 | 


--------------------------------------------------------------------------------
/templates/verify-email.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 | <html xmlns="http://www.w3.org/1999/xhtml">
  3 | <head>
  4 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5 |   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6 |   <title>Verify your email address</title>
  7 |   <style type="text/css" rel="stylesheet" media="all">
  8 |     /* Base ------------------------------ */
  9 |     *:not(br):not(tr):not(html) {
 10 |       font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
 11 |       -webkit-box-sizing: border-box;
 12 |       box-sizing: border-box;
 13 |     }
 14 |     body {
 15 |       width: 100% !important;
 16 |       height: 100%;
 17 |       margin: 0;
 18 |       line-height: 1.4;
 19 |       background-color: #F5F7F9;
 20 |       color: #839197;
 21 |       -webkit-text-size-adjust: none;
 22 |     }
 23 |     a {
 24 |       color: #414EF9;
 25 |     }
 26 | 
 27 |     /* Layout ------------------------------ */
 28 |     .email-wrapper {
 29 |       width: 100%;
 30 |       margin: 0;
 31 |       padding: 0;
 32 |       background-color: #F5F7F9;
 33 |     }
 34 |     .email-content {
 35 |       width: 100%;
 36 |       margin: 0;
 37 |       padding: 0;
 38 |     }
 39 | 
 40 |     /* Masthead ----------------------- */
 41 |     .email-masthead {
 42 |       padding: 25px 0;
 43 |       text-align: center;
 44 |     }
 45 |     .email-masthead_logo {
 46 |       max-width: 400px;
 47 |       border: 0;
 48 |     }
 49 |     .email-masthead_name {
 50 |       font-size: 16px;
 51 |       font-weight: bold;
 52 |       color: #839197;
 53 |       text-decoration: none;
 54 |       text-shadow: 0 1px 0 white;
 55 |     }
 56 | 
 57 |     /* Body ------------------------------ */
 58 |     .email-body {
 59 |       width: 100%;
 60 |       margin: 0;
 61 |       padding: 0;
 62 |       border-top: 1px solid #E7EAEC;
 63 |       border-bottom: 1px solid #E7EAEC;
 64 |       background-color: #FFFFFF;
 65 |     }
 66 |     .email-body_inner {
 67 |       width: 570px;
 68 |       margin: 0 auto;
 69 |       padding: 0;
 70 |     }
 71 |     .email-footer {
 72 |       width: 570px;
 73 |       margin: 0 auto;
 74 |       padding: 0;
 75 |       text-align: center;
 76 |     }
 77 |     .email-footer p {
 78 |       color: #839197;
 79 |     }
 80 |     .body-action {
 81 |       width: 100%;
 82 |       margin: 30px auto;
 83 |       padding: 0;
 84 |       text-align: center;
 85 |     }
 86 |     .body-sub {
 87 |       margin-top: 25px;
 88 |       padding-top: 25px;
 89 |       border-top: 1px solid #E7EAEC;
 90 |     }
 91 |     .content-cell {
 92 |       padding: 35px;
 93 |     }
 94 |     .align-right {
 95 |       text-align: right;
 96 |     }
 97 | 
 98 |     /* Type ------------------------------ */
 99 |     h1 {
100 |       margin-top: 0;
101 |       color: #292E31;
102 |       font-size: 19px;
103 |       font-weight: bold;
104 |       text-align: left;
105 |     }
106 |     h2 {
107 |       margin-top: 0;
108 |       color: #292E31;
109 |       font-size: 16px;
110 |       font-weight: bold;
111 |       text-align: left;
112 |     }
113 |     h3 {
114 |       margin-top: 0;
115 |       color: #292E31;
116 |       font-size: 14px;
117 |       font-weight: bold;
118 |       text-align: left;
119 |     }
120 |     p {
121 |       margin-top: 0;
122 |       color: #839197;
123 |       font-size: 16px;
124 |       line-height: 1.5em;
125 |       text-align: left;
126 |     }
127 |     p.sub {
128 |       font-size: 12px;
129 |     }
130 |     p.center {
131 |       text-align: center;
132 |     }
133 | 
134 |     /* Buttons ------------------------------ */
135 |     .button {
136 |       display: inline-block;
137 |       width: 200px;
138 |       background-color: #414EF9;
139 |       border-radius: 3px;
140 |       color: #ffffff;
141 |       font-size: 15px;
142 |       line-height: 45px;
143 |       text-align: center;
144 |       text-decoration: none;
145 |       -webkit-text-size-adjust: none;
146 |       mso-hide: all;
147 |     }
148 |     .button--green {
149 |       background-color: #28DB67;
150 |     }
151 |     .button--red {
152 |       background-color: #FF3665;
153 |     }
154 |     .button--blue {
155 |       background-color: #414EF9;
156 |     }
157 | 
158 |     /*Media Queries ------------------------------ */
159 |     @media only screen and (max-width: 600px) {
160 |       .email-body_inner,
161 |       .email-footer {
162 |         width: 100% !important;
163 |       }
164 |     }
165 |     @media only screen and (max-width: 500px) {
166 |       .button {
167 |         width: 100% !important;
168 |       }
169 |     }
170 |   </style>
171 | </head>
172 | <body>
173 |   <table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0">
174 |     <tr>
175 |       <td align="center">
176 |         <table class="email-content" width="100%" cellpadding="0" cellspacing="0">
177 |           <!-- Logo -->
178 |           <tr>
179 |             <td class="email-masthead">
180 |               <a class="email-masthead_name">Canvas</a>
181 |             </td>
182 |           </tr>
183 |           <!-- Email Body -->
184 |           <tr>
185 |             <td class="email-body" width="100%">
186 |               <table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0">
187 |                 <!-- Body content -->
188 |                 <tr>
189 |                   <td class="content-cell">
190 |                     <h1>Verify your email address</h1>
191 |                     <p>Thanks for signing up for Canvas! We're excited to have you as an early user.</p>
192 |                     <!-- Action -->
193 |                     <table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
194 |                       <tr>
195 |                         <td align="center">
196 |                           <div>
197 |                             <!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{action_url}}" style="height:45px;v-text-anchor:middle;width:200px;" arcsize="7%" stroke="f" fill="t">
198 |                             <v:fill type="tile" color="#414EF9" />
199 |                             <w:anchorlock/>
200 |                             <center style="color:#ffffff;font-family:sans-serif;font-size:15px;">Verify Email</center>
201 |                           </v:roundrect><![endif]-->
202 |                             <a href="{{action_url}}" class="button button--blue">Verify Email</a>
203 |                           </div>
204 |                         </td>
205 |                       </tr>
206 |                     </table>
207 |                     <p>Thanks,<br>The Canvas Team</p>
208 |                     <!-- Sub copy -->
209 |                     <table class="body-sub">
210 |                       <tr>
211 |                         <td>
212 |                           <p class="sub">If you’re having trouble clicking the button, copy and paste the URL below into your web browser.
213 |                           </p>
214 |                           <p class="sub"><a href="{{action_url}}">{{action_url}}</a></p>
215 |                         </td>
216 |                       </tr>
217 |                     </table>
218 |                   </td>
219 |                 </tr>
220 |               </table>
221 |             </td>
222 |           </tr>
223 |           <tr>
224 |             <td>
225 |               <table class="email-footer" align="center" width="570" cellpadding="0" cellspacing="0">
226 |                 <tr>
227 |                   <td class="content-cell">
228 |                     <p class="sub center">
229 |                       Canvas Labs, Inc.
230 |                       <br>325 9th St, San Francisco, CA 94103
231 |                     </p>
232 |                   </td>
233 |                 </tr>
234 |               </table>
235 |             </td>
236 |           </tr>
237 |         </table>
238 |       </td>
239 |     </tr>
240 |   </table>
241 | </body>
242 | </html>
243 | 


--------------------------------------------------------------------------------
/templates/comment-notification.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 | <html xmlns="http://www.w3.org/1999/xhtml">
  3 | <head>
  4 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5 |   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6 |   <title>[{{org_name}}] Comment on {{canvas_title}}</title>
  7 |   <style type="text/css" rel="stylesheet" media="all">
  8 |     /* Base ------------------------------ */
  9 |     *:not(br):not(tr):not(html) {
 10 |       font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
 11 |       -webkit-box-sizing: border-box;
 12 |       box-sizing: border-box;
 13 |     }
 14 |     body {
 15 |       width: 100% !important;
 16 |       height: 100%;
 17 |       margin: 0;
 18 |       line-height: 1.4;
 19 |       background-color: #F5F7F9;
 20 |       color: #839197;
 21 |       -webkit-text-size-adjust: none;
 22 |     }
 23 |     a {
 24 |       color: #414EF9;
 25 |     }
 26 | 
 27 |     /* Layout ------------------------------ */
 28 |     .email-wrapper {
 29 |       width: 100%;
 30 |       margin: 0;
 31 |       padding: 0;
 32 |       background-color: #F5F7F9;
 33 |     }
 34 |     .email-content {
 35 |       width: 100%;
 36 |       margin: 0;
 37 |       padding: 0;
 38 |     }
 39 | 
 40 |     /* Masthead ----------------------- */
 41 |     .email-masthead {
 42 |       padding: 25px 0;
 43 |       text-align: center;
 44 |     }
 45 |     .email-masthead_logo {
 46 |       max-width: 400px;
 47 |       border: 0;
 48 |     }
 49 |     .email-masthead_name {
 50 |       font-size: 16px;
 51 |       font-weight: bold;
 52 |       color: #839197;
 53 |       text-decoration: none;
 54 |       text-shadow: 0 1px 0 white;
 55 |     }
 56 | 
 57 |     /* Body ------------------------------ */
 58 |     .email-body {
 59 |       width: 100%;
 60 |       margin: 0;
 61 |       padding: 0;
 62 |       border-top: 1px solid #E7EAEC;
 63 |       border-bottom: 1px solid #E7EAEC;
 64 |       background-color: #FFFFFF;
 65 |     }
 66 |     .email-body_inner {
 67 |       width: 570px;
 68 |       margin: 0 auto;
 69 |       padding: 0;
 70 |     }
 71 |     .email-footer {
 72 |       width: 570px;
 73 |       margin: 0 auto;
 74 |       padding: 0;
 75 |       text-align: center;
 76 |     }
 77 |     .email-footer p {
 78 |       color: #839197;
 79 |     }
 80 |     .body-action {
 81 |       width: 100%;
 82 |       margin: 30px auto;
 83 |       padding: 0;
 84 |       text-align: center;
 85 |     }
 86 |     .body-sub {
 87 |       margin-top: 25px;
 88 |       padding-top: 25px;
 89 |       border-top: 1px solid #E7EAEC;
 90 |     }
 91 |     .content-cell {
 92 |       padding: 35px;
 93 |     }
 94 |     .align-right {
 95 |       text-align: right;
 96 |     }
 97 | 
 98 |     /* Type ------------------------------ */
 99 |     h1 {
100 |       margin-top: 0;
101 |       color: #292E31;
102 |       font-size: 19px;
103 |       font-weight: bold;
104 |       text-align: left;
105 |     }
106 |     h2 {
107 |       margin-top: 0;
108 |       color: #292E31;
109 |       font-size: 16px;
110 |       font-weight: bold;
111 |       text-align: left;
112 |     }
113 |     h3 {
114 |       margin-top: 0;
115 |       color: #292E31;
116 |       font-size: 14px;
117 |       font-weight: bold;
118 |       text-align: left;
119 |     }
120 |     p {
121 |       margin-top: 0;
122 |       color: #839197;
123 |       font-size: 16px;
124 |       line-height: 1.5em;
125 |       text-align: left;
126 |     }
127 |     p.sub {
128 |       font-size: 12px;
129 |     }
130 |     p.center {
131 |       text-align: center;
132 |     }
133 | 
134 |     /* Buttons ------------------------------ */
135 |     .button {
136 |       display: inline-block;
137 |       width: 200px;
138 |       background-color: #414EF9;
139 |       border-radius: 3px;
140 |       color: #ffffff;
141 |       font-size: 15px;
142 |       line-height: 45px;
143 |       text-align: center;
144 |       text-decoration: none;
145 |       -webkit-text-size-adjust: none;
146 |       mso-hide: all;
147 |     }
148 |     .button--green {
149 |       background-color: #28DB67;
150 |     }
151 |     .button--red {
152 |       background-color: #FF3665;
153 |     }
154 |     .button--blue {
155 |       background-color: #414EF9;
156 |     }
157 | 
158 |     /*Media Queries ------------------------------ */
159 |     @media only screen and (max-width: 600px) {
160 |       .email-body_inner,
161 |       .email-footer {
162 |         width: 100% !important;
163 |       }
164 |     }
165 |     @media only screen and (max-width: 500px) {
166 |       .button {
167 |         width: 100% !important;
168 |       }
169 |     }
170 |   </style>
171 | </head>
172 | <body>
173 |   <table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0">
174 |     <tr>
175 |       <td align="center">
176 |         <table class="email-content" width="100%" cellpadding="0" cellspacing="0">
177 |           <!-- Logo -->
178 |           <tr>
179 |             <td class="email-masthead">
180 |               <a class="email-masthead_name">Canvas</a>
181 |             </td>
182 |           </tr>
183 |           <!-- Email Body -->
184 |           <tr>
185 |             <td class="email-body" width="100%">
186 |               <table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0">
187 |                 <!-- Body content -->
188 |                 <tr>
189 |                   <td class="content-cell">
190 |                     <h1>@{{username}} commented on {{canvas_title}}</h1>
191 |                     <p>{{comment_text}}</p>
192 |                     <!-- Action -->
193 |                     <table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
194 |                       <tr>
195 |                         <td align="center">
196 |                           <div>
197 |                             <!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{action_url}}" style="height:45px;v-text-anchor:middle;width:200px;" arcsize="7%" stroke="f" fill="t">
198 |                             <v:fill type="tile" color="#414EF9" />
199 |                             <w:anchorlock/>
200 |                             <center style="color:#ffffff;font-family:sans-serif;font-size:15px;">View or Reply</center>
201 |                           </v:roundrect><![endif]-->
202 |                             <a href="{{action_url}}" class="button button--blue">View or Reply</a>
203 |                           </div>
204 |                         </td>
205 |                       </tr>
206 |                     </table>
207 |                     <p>Thanks,<br>The Canvas Team</p>
208 |                     {{#mute_canvas_url}}<p><strong>P.S.</strong> Don't want to receive updates? You can <a href="{{.}}">mute notifications for this canvas</a>.</p>{{/mute_canvas_url}}
209 |                     <!-- Sub copy -->
210 |                     <table class="body-sub">
211 |                       <tr>
212 |                         <td>
213 |                           <p class="sub">If you’re having trouble clicking the button, copy and paste the URL below into your web browser.</p>
214 |                           <p class="sub"><a href="{{action_url}}">{{action_url}}</a></p>
215 |                         </td>
216 |                       </tr>
217 |                     </table>
218 |                   </td>
219 |                 </tr>
220 |               </table>
221 |             </td>
222 |           </tr>
223 |           <tr>
224 |             <td>
225 |               <table class="email-footer" align="center" width="570" cellpadding="0" cellspacing="0">
226 |                 <tr>
227 |                   <td class="content-cell">
228 |                     <p class="sub center">
229 |                       Canvas Labs, Inc.
230 |                       <br>325 9th St, San Francisco, CA 94103
231 |                     </p>
232 |                   </td>
233 |                 </tr>
234 |               </table>
235 |             </td>
236 |           </tr>
237 |         </table>
238 |       </td>
239 |     </tr>
240 |   </table>
241 | </body>
242 | </html>
243 | 


--------------------------------------------------------------------------------
/templates/org-invitation.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 | <html xmlns="http://www.w3.org/1999/xhtml">
  3 | <head>
  4 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5 |   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6 |   <title>You're invited to write with {{org_name}} on Canvas</title>
  7 |   <style type="text/css" rel="stylesheet" media="all">
  8 |     /* Base ------------------------------ */
  9 |     *:not(br):not(tr):not(html) {
 10 |       font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
 11 |       -webkit-box-sizing: border-box;
 12 |       box-sizing: border-box;
 13 |     }
 14 |     body {
 15 |       width: 100% !important;
 16 |       height: 100%;
 17 |       margin: 0;
 18 |       line-height: 1.4;
 19 |       background-color: #F5F7F9;
 20 |       color: #839197;
 21 |       -webkit-text-size-adjust: none;
 22 |     }
 23 |     a {
 24 |       color: #414EF9;
 25 |     }
 26 | 
 27 |     /* Layout ------------------------------ */
 28 |     .email-wrapper {
 29 |       width: 100%;
 30 |       margin: 0;
 31 |       padding: 0;
 32 |       background-color: #F5F7F9;
 33 |     }
 34 |     .email-content {
 35 |       width: 100%;
 36 |       margin: 0;
 37 |       padding: 0;
 38 |     }
 39 | 
 40 |     /* Masthead ----------------------- */
 41 |     .email-masthead {
 42 |       padding: 25px 0;
 43 |       text-align: center;
 44 |     }
 45 |     .email-masthead_logo {
 46 |       max-width: 400px;
 47 |       border: 0;
 48 |     }
 49 |     .email-masthead_name {
 50 |       font-size: 16px;
 51 |       font-weight: bold;
 52 |       color: #839197;
 53 |       text-decoration: none;
 54 |       text-shadow: 0 1px 0 white;
 55 |     }
 56 | 
 57 |     /* Body ------------------------------ */
 58 |     .email-body {
 59 |       width: 100%;
 60 |       margin: 0;
 61 |       padding: 0;
 62 |       border-top: 1px solid #E7EAEC;
 63 |       border-bottom: 1px solid #E7EAEC;
 64 |       background-color: #FFFFFF;
 65 |     }
 66 |     .email-body_inner {
 67 |       width: 570px;
 68 |       margin: 0 auto;
 69 |       padding: 0;
 70 |     }
 71 |     .email-footer {
 72 |       width: 570px;
 73 |       margin: 0 auto;
 74 |       padding: 0;
 75 |       text-align: center;
 76 |     }
 77 |     .email-footer p {
 78 |       color: #839197;
 79 |     }
 80 |     .body-action {
 81 |       width: 100%;
 82 |       margin: 30px auto;
 83 |       padding: 0;
 84 |       text-align: center;
 85 |     }
 86 |     .body-sub {
 87 |       margin-top: 25px;
 88 |       padding-top: 25px;
 89 |       border-top: 1px solid #E7EAEC;
 90 |     }
 91 |     .content-cell {
 92 |       padding: 35px;
 93 |     }
 94 |     .align-right {
 95 |       text-align: right;
 96 |     }
 97 | 
 98 |     /* Type ------------------------------ */
 99 |     h1 {
100 |       margin-top: 0;
101 |       color: #292E31;
102 |       font-size: 19px;
103 |       font-weight: bold;
104 |       text-align: left;
105 |     }
106 |     h2 {
107 |       margin-top: 0;
108 |       color: #292E31;
109 |       font-size: 16px;
110 |       font-weight: bold;
111 |       text-align: left;
112 |     }
113 |     h3 {
114 |       margin-top: 0;
115 |       color: #292E31;
116 |       font-size: 14px;
117 |       font-weight: bold;
118 |       text-align: left;
119 |     }
120 |     p {
121 |       margin-top: 0;
122 |       color: #839197;
123 |       font-size: 16px;
124 |       line-height: 1.5em;
125 |       text-align: left;
126 |     }
127 |     p.sub {
128 |       font-size: 12px;
129 |     }
130 |     p.center {
131 |       text-align: center;
132 |     }
133 | 
134 |     /* Buttons ------------------------------ */
135 |     .button {
136 |       display: inline-block;
137 |       width: 200px;
138 |       background-color: #414EF9;
139 |       border-radius: 3px;
140 |       color: #ffffff;
141 |       font-size: 15px;
142 |       line-height: 45px;
143 |       text-align: center;
144 |       text-decoration: none;
145 |       -webkit-text-size-adjust: none;
146 |       mso-hide: all;
147 |     }
148 |     .button--green {
149 |       background-color: #28DB67;
150 |     }
151 |     .button--red {
152 |       background-color: #FF3665;
153 |     }
154 |     .button--blue {
155 |       background-color: #414EF9;
156 |     }
157 | 
158 |     /*Media Queries ------------------------------ */
159 |     @media only screen and (max-width: 600px) {
160 |       .email-body_inner,
161 |       .email-footer {
162 |         width: 100% !important;
163 |       }
164 |     }
165 |     @media only screen and (max-width: 500px) {
166 |       .button {
167 |         width: 100% !important;
168 |       }
169 |     }
170 |   </style>
171 | </head>
172 | <body>
173 |   <table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0">
174 |     <tr>
175 |       <td align="center">
176 |         <table class="email-content" width="100%" cellpadding="0" cellspacing="0">
177 |           <!-- Logo -->
178 |           <tr>
179 |             <td class="email-masthead">
180 |               <a class="email-masthead_name">Canvas</a>
181 |             </td>
182 |           </tr>
183 |           <!-- Email Body -->
184 |           <tr>
185 |             <td class="email-body" width="100%">
186 |               <table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0">
187 |                 <!-- Body content -->
188 |                 <tr>
189 |                   <td class="content-cell">
190 |                     <h1>Join Canvas</h1>
191 |                     <p>Your {{org_name}} teammates want to write with you.</p>
192 |                     <!-- Action -->
193 |                     <table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
194 |                       <tr>
195 |                         <td align="center">
196 |                           <div>
197 |                             <!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{action_url}}" style="height:45px;v-text-anchor:middle;width:200px;" arcsize="7%" stroke="f" fill="t">
198 |                             <v:fill type="tile" color="#414EF9" />
199 |                             <w:anchorlock/>
200 |                             <center style="color:#ffffff;font-family:sans-serif;font-size:15px;">Join {{org_name}}</center>
201 |                           </v:roundrect><![endif]-->
202 |                             <a href="{{action_url}}" class="button button--blue">Join {{org_name}}</a>
203 |                           </div>
204 |                         </td>
205 |                       </tr>
206 |                     </table>
207 |                     <p>Canvas is a writing app for teams of nerds. Meeting minutes. Product specs. Working together. Writing things down.</p>
208 |                     <p>Thanks,<br>The Canvas Team</p>
209 |                     <!-- Sub copy -->
210 |                     <table class="body-sub">
211 |                       <tr>
212 |                         <td>
213 |                           <p class="sub">If you’re having trouble clicking the button, copy and paste the URL below into your web browser.
214 |                           </p>
215 |                           <p class="sub"><a href="{{action_url}}">{{action_url}}</a></p>
216 |                         </td>
217 |                       </tr>
218 |                     </table>
219 |                   </td>
220 |                 </tr>
221 |               </table>
222 |             </td>
223 |           </tr>
224 |           <tr>
225 |             <td>
226 |               <table class="email-footer" align="center" width="570" cellpadding="0" cellspacing="0">
227 |                 <tr>
228 |                   <td class="content-cell">
229 |                     <p class="sub center">
230 |                       Canvas Labs, Inc.
231 |                       <br>325 9th St, San Francisco, CA 94103
232 |                     </p>
233 |                   </td>
234 |                 </tr>
235 |               </table>
236 |             </td>
237 |           </tr>
238 |         </table>
239 |       </td>
240 |     </tr>
241 |   </table>
242 | </body>
243 | </html>
244 | 


--------------------------------------------------------------------------------
/templates/reply-notification.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 | <html xmlns="http://www.w3.org/1999/xhtml">
  3 | <head>
  4 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5 |   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6 |   <title>Re: [{{org_name}}] Comment on {{canvas_title}}</title>
  7 |   <style type="text/css" rel="stylesheet" media="all">
  8 |     /* Base ------------------------------ */
  9 |     *:not(br):not(tr):not(html) {
 10 |       font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
 11 |       -webkit-box-sizing: border-box;
 12 |       box-sizing: border-box;
 13 |     }
 14 |     body {
 15 |       width: 100% !important;
 16 |       height: 100%;
 17 |       margin: 0;
 18 |       line-height: 1.4;
 19 |       background-color: #F5F7F9;
 20 |       color: #839197;
 21 |       -webkit-text-size-adjust: none;
 22 |     }
 23 |     a {
 24 |       color: #414EF9;
 25 |     }
 26 | 
 27 |     /* Layout ------------------------------ */
 28 |     .email-wrapper {
 29 |       width: 100%;
 30 |       margin: 0;
 31 |       padding: 0;
 32 |       background-color: #F5F7F9;
 33 |     }
 34 |     .email-content {
 35 |       width: 100%;
 36 |       margin: 0;
 37 |       padding: 0;
 38 |     }
 39 | 
 40 |     /* Masthead ----------------------- */
 41 |     .email-masthead {
 42 |       padding: 25px 0;
 43 |       text-align: center;
 44 |     }
 45 |     .email-masthead_logo {
 46 |       max-width: 400px;
 47 |       border: 0;
 48 |     }
 49 |     .email-masthead_name {
 50 |       font-size: 16px;
 51 |       font-weight: bold;
 52 |       color: #839197;
 53 |       text-decoration: none;
 54 |       text-shadow: 0 1px 0 white;
 55 |     }
 56 | 
 57 |     /* Body ------------------------------ */
 58 |     .email-body {
 59 |       width: 100%;
 60 |       margin: 0;
 61 |       padding: 0;
 62 |       border-top: 1px solid #E7EAEC;
 63 |       border-bottom: 1px solid #E7EAEC;
 64 |       background-color: #FFFFFF;
 65 |     }
 66 |     .email-body_inner {
 67 |       width: 570px;
 68 |       margin: 0 auto;
 69 |       padding: 0;
 70 |     }
 71 |     .email-footer {
 72 |       width: 570px;
 73 |       margin: 0 auto;
 74 |       padding: 0;
 75 |       text-align: center;
 76 |     }
 77 |     .email-footer p {
 78 |       color: #839197;
 79 |     }
 80 |     .body-action {
 81 |       width: 100%;
 82 |       margin: 30px auto;
 83 |       padding: 0;
 84 |       text-align: center;
 85 |     }
 86 |     .body-sub {
 87 |       margin-top: 25px;
 88 |       padding-top: 25px;
 89 |       border-top: 1px solid #E7EAEC;
 90 |     }
 91 |     .content-cell {
 92 |       padding: 35px;
 93 |     }
 94 |     .align-right {
 95 |       text-align: right;
 96 |     }
 97 | 
 98 |     /* Type ------------------------------ */
 99 |     h1 {
100 |       margin-top: 0;
101 |       color: #292E31;
102 |       font-size: 19px;
103 |       font-weight: bold;
104 |       text-align: left;
105 |     }
106 |     h2 {
107 |       margin-top: 0;
108 |       color: #292E31;
109 |       font-size: 16px;
110 |       font-weight: bold;
111 |       text-align: left;
112 |     }
113 |     h3 {
114 |       margin-top: 0;
115 |       color: #292E31;
116 |       font-size: 14px;
117 |       font-weight: bold;
118 |       text-align: left;
119 |     }
120 |     p {
121 |       margin-top: 0;
122 |       color: #839197;
123 |       font-size: 16px;
124 |       line-height: 1.5em;
125 |       text-align: left;
126 |     }
127 |     p.sub {
128 |       font-size: 12px;
129 |     }
130 |     p.center {
131 |       text-align: center;
132 |     }
133 | 
134 |     /* Buttons ------------------------------ */
135 |     .button {
136 |       display: inline-block;
137 |       width: 200px;
138 |       background-color: #414EF9;
139 |       border-radius: 3px;
140 |       color: #ffffff;
141 |       font-size: 15px;
142 |       line-height: 45px;
143 |       text-align: center;
144 |       text-decoration: none;
145 |       -webkit-text-size-adjust: none;
146 |       mso-hide: all;
147 |     }
148 |     .button--green {
149 |       background-color: #28DB67;
150 |     }
151 |     .button--red {
152 |       background-color: #FF3665;
153 |     }
154 |     .button--blue {
155 |       background-color: #414EF9;
156 |     }
157 | 
158 |     /*Media Queries ------------------------------ */
159 |     @media only screen and (max-width: 600px) {
160 |       .email-body_inner,
161 |       .email-footer {
162 |         width: 100% !important;
163 |       }
164 |     }
165 |     @media only screen and (max-width: 500px) {
166 |       .button {
167 |         width: 100% !important;
168 |       }
169 |     }
170 |   </style>
171 | </head>
172 | <body>
173 |   <table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0">
174 |     <tr>
175 |       <td align="center">
176 |         <table class="email-content" width="100%" cellpadding="0" cellspacing="0">
177 |           <!-- Logo -->
178 |           <tr>
179 |             <td class="email-masthead">
180 |               <a class="email-masthead_name">Canvas</a>
181 |             </td>
182 |           </tr>
183 |           <!-- Email Body -->
184 |           <tr>
185 |             <td class="email-body" width="100%">
186 |               <table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0">
187 |                 <!-- Body content -->
188 |                 <tr>
189 |                   <td class="content-cell">
190 |                     <h1>@{{username}} replied to a comment on {{canvas_title}}</h1>
191 |                     <p>{{reply_text}}</p>
192 |                     <!-- Action -->
193 |                     <table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
194 |                       <tr>
195 |                         <td align="center">
196 |                           <div>
197 |                             <!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{action_url}}" style="height:45px;v-text-anchor:middle;width:200px;" arcsize="7%" stroke="f" fill="t">
198 |                             <v:fill type="tile" color="#414EF9" />
199 |                             <w:anchorlock/>
200 |                             <center style="color:#ffffff;font-family:sans-serif;font-size:15px;">View or Reply</center>
201 |                           </v:roundrect><![endif]-->
202 |                             <a href="{{action_url}}" class="button button--blue">View or Reply</a>
203 |                           </div>
204 |                         </td>
205 |                       </tr>
206 |                     </table>
207 |                     <p>Thanks,<br>The Canvas Team</p>
208 |                     {{#mute_canvas_url}}<p><strong>P.S.</strong> Don't want to receive updates? You can <a href="{{.}}">mute notifications for this canvas</a>.</p>{{/mute_canvas_url}}
209 |                     <!-- Sub copy -->
210 |                     <table class="body-sub">
211 |                       <tr>
212 |                         <td>
213 |                           <p class="sub">If you’re having trouble clicking the button, copy and paste the URL below into your web browser.</p>
214 |                           <p class="sub"><a href="{{action_url}}">{{action_url}}</a></p>
215 |                         </td>
216 |                       </tr>
217 |                     </table>
218 |                   </td>
219 |                 </tr>
220 |               </table>
221 |             </td>
222 |           </tr>
223 |           <tr>
224 |             <td>
225 |               <table class="email-footer" align="center" width="570" cellpadding="0" cellspacing="0">
226 |                 <tr>
227 |                   <td class="content-cell">
228 |                     <p class="sub center">
229 |                       Canvas Labs, Inc.
230 |                       <br>325 9th St, San Francisco, CA 94103
231 |                     </p>
232 |                   </td>
233 |                 </tr>
234 |               </table>
235 |             </td>
236 |           </tr>
237 |         </table>
238 |       </td>
239 |     </tr>
240 |   </table>
241 | </body>
242 | </html>
243 | 


--------------------------------------------------------------------------------
/templates/change-email-verification.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 | <html xmlns="http://www.w3.org/1999/xhtml">
  3 | <head>
  4 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5 |   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6 |   <title>Verify your new email address</title>
  7 |   <style type="text/css" rel="stylesheet" media="all">
  8 |     /* Base ------------------------------ */
  9 |     *:not(br):not(tr):not(html) {
 10 |       font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
 11 |       -webkit-box-sizing: border-box;
 12 |       box-sizing: border-box;
 13 |     }
 14 |     body {
 15 |       width: 100% !important;
 16 |       height: 100%;
 17 |       margin: 0;
 18 |       line-height: 1.4;
 19 |       background-color: #F5F7F9;
 20 |       color: #839197;
 21 |       -webkit-text-size-adjust: none;
 22 |     }
 23 |     a {
 24 |       color: #414EF9;
 25 |     }
 26 | 
 27 |     /* Layout ------------------------------ */
 28 |     .email-wrapper {
 29 |       width: 100%;
 30 |       margin: 0;
 31 |       padding: 0;
 32 |       background-color: #F5F7F9;
 33 |     }
 34 |     .email-content {
 35 |       width: 100%;
 36 |       margin: 0;
 37 |       padding: 0;
 38 |     }
 39 | 
 40 |     /* Masthead ----------------------- */
 41 |     .email-masthead {
 42 |       padding: 25px 0;
 43 |       text-align: center;
 44 |     }
 45 |     .email-masthead_logo {
 46 |       max-width: 400px;
 47 |       border: 0;
 48 |     }
 49 |     .email-masthead_name {
 50 |       font-size: 16px;
 51 |       font-weight: bold;
 52 |       color: #839197;
 53 |       text-decoration: none;
 54 |       text-shadow: 0 1px 0 white;
 55 |     }
 56 | 
 57 |     /* Body ------------------------------ */
 58 |     .email-body {
 59 |       width: 100%;
 60 |       margin: 0;
 61 |       padding: 0;
 62 |       border-top: 1px solid #E7EAEC;
 63 |       border-bottom: 1px solid #E7EAEC;
 64 |       background-color: #FFFFFF;
 65 |     }
 66 |     .email-body_inner {
 67 |       width: 570px;
 68 |       margin: 0 auto;
 69 |       padding: 0;
 70 |     }
 71 |     .email-footer {
 72 |       width: 570px;
 73 |       margin: 0 auto;
 74 |       padding: 0;
 75 |       text-align: center;
 76 |     }
 77 |     .email-footer p {
 78 |       color: #839197;
 79 |     }
 80 |     .body-action {
 81 |       width: 100%;
 82 |       margin: 30px auto;
 83 |       padding: 0;
 84 |       text-align: center;
 85 |     }
 86 |     .body-sub {
 87 |       margin-top: 25px;
 88 |       padding-top: 25px;
 89 |       border-top: 1px solid #E7EAEC;
 90 |     }
 91 |     .content-cell {
 92 |       padding: 35px;
 93 |     }
 94 |     .align-right {
 95 |       text-align: right;
 96 |     }
 97 | 
 98 |     /* Type ------------------------------ */
 99 |     h1 {
100 |       margin-top: 0;
101 |       color: #292E31;
102 |       font-size: 19px;
103 |       font-weight: bold;
104 |       text-align: left;
105 |     }
106 |     h2 {
107 |       margin-top: 0;
108 |       color: #292E31;
109 |       font-size: 16px;
110 |       font-weight: bold;
111 |       text-align: left;
112 |     }
113 |     h3 {
114 |       margin-top: 0;
115 |       color: #292E31;
116 |       font-size: 14px;
117 |       font-weight: bold;
118 |       text-align: left;
119 |     }
120 |     p {
121 |       margin-top: 0;
122 |       color: #839197;
123 |       font-size: 16px;
124 |       line-height: 1.5em;
125 |       text-align: left;
126 |     }
127 |     p.sub {
128 |       font-size: 12px;
129 |     }
130 |     p.center {
131 |       text-align: center;
132 |     }
133 | 
134 |     /* Buttons ------------------------------ */
135 |     .button {
136 |       display: inline-block;
137 |       width: 200px;
138 |       background-color: #414EF9;
139 |       border-radius: 3px;
140 |       color: #ffffff;
141 |       font-size: 15px;
142 |       line-height: 45px;
143 |       text-align: center;
144 |       text-decoration: none;
145 |       -webkit-text-size-adjust: none;
146 |       mso-hide: all;
147 |     }
148 |     .button--green {
149 |       background-color: #28DB67;
150 |     }
151 |     .button--red {
152 |       background-color: #FF3665;
153 |     }
154 |     .button--blue {
155 |       background-color: #414EF9;
156 |     }
157 | 
158 |     /*Media Queries ------------------------------ */
159 |     @media only screen and (max-width: 600px) {
160 |       .email-body_inner,
161 |       .email-footer {
162 |         width: 100% !important;
163 |       }
164 |     }
165 |     @media only screen and (max-width: 500px) {
166 |       .button {
167 |         width: 100% !important;
168 |       }
169 |     }
170 |   </style>
171 | </head>
172 | <body>
173 |   <table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0">
174 |     <tr>
175 |       <td align="center">
176 |         <table class="email-content" width="100%" cellpadding="0" cellspacing="0">
177 |           <!-- Logo -->
178 |           <tr>
179 |             <td class="email-masthead">
180 |               <a class="email-masthead_name">Canvas</a>
181 |             </td>
182 |           </tr>
183 |           <!-- Email Body -->
184 |           <tr>
185 |             <td class="email-body" width="100%">
186 |               <table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0">
187 |                 <!-- Body content -->
188 |                 <tr>
189 |                   <td class="content-cell">
190 |                     <h1>Verify your new email address</h1>
191 |                     <p>You recently requested that we change your email address. Click the link to verify this is the right address.</p>
192 |                     <!-- Action -->
193 |                     <table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
194 |                       <tr>
195 |                         <td align="center">
196 |                           <div>
197 |                             <!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{action_url}}" style="height:45px;v-text-anchor:middle;width:200px;" arcsize="7%" stroke="f" fill="t">
198 |                             <v:fill type="tile" color="#414EF9" />
199 |                             <w:anchorlock/>
200 |                             <center style="color:#ffffff;font-family:sans-serif;font-size:15px;">Verify Email</center>
201 |                           </v:roundrect><![endif]-->
202 |                             <a href="{{action_url}}" class="button button--blue">Verify Email</a>
203 |                           </div>
204 |                         </td>
205 |                       </tr>
206 |                     </table>
207 |                     <p>If you didn't request a change to your email, please let us know at <a href="mailto:hello@usecanvas.com">hello@usecanvas.com</a>.</p>
208 |                     <p>Thanks,<br>The Canvas Team</p>
209 |                     <!-- Sub copy -->
210 |                     <table class="body-sub">
211 |                       <tr>
212 |                         <td>
213 |                           <p class="sub">If you’re having trouble clicking the button, copy and paste the URL below into your web browser.
214 |                           </p>
215 |                           <p class="sub"><a href="{{action_url}}">{{action_url}}</a></p>
216 |                         </td>
217 |                       </tr>
218 |                     </table>
219 |                   </td>
220 |                 </tr>
221 |               </table>
222 |             </td>
223 |           </tr>
224 |           <tr>
225 |             <td>
226 |               <table class="email-footer" align="center" width="570" cellpadding="0" cellspacing="0">
227 |                 <tr>
228 |                   <td class="content-cell">
229 |                     <p class="sub center">
230 |                       Canvas Labs, Inc.
231 |                       <br>325 9th St, San Francisco, CA 94103
232 |                     </p>
233 |                   </td>
234 |                 </tr>
235 |               </table>
236 |             </td>
237 |           </tr>
238 |         </table>
239 |       </td>
240 |     </tr>
241 |   </table>
242 | </body>
243 | </html>
244 | 


--------------------------------------------------------------------------------
/templates/resetpassword.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 | <html xmlns="http://www.w3.org/1999/xhtml">
  3 | <head>
  4 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5 |   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6 |   <title>Choose a new password for Canvas</title>
  7 |   <style type="text/css" rel="stylesheet" media="all">
  8 |     /* Base ------------------------------ */
  9 |     *:not(br):not(tr):not(html) {
 10 |       font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
 11 |       -webkit-box-sizing: border-box;
 12 |       box-sizing: border-box;
 13 |     }
 14 |     body {
 15 |       width: 100% !important;
 16 |       height: 100%;
 17 |       margin: 0;
 18 |       line-height: 1.4;
 19 |       background-color: #F5F7F9;
 20 |       color: #839197;
 21 |       -webkit-text-size-adjust: none;
 22 |     }
 23 |     a {
 24 |       color: #414EF9;
 25 |     }
 26 | 
 27 |     /* Layout ------------------------------ */
 28 |     .email-wrapper {
 29 |       width: 100%;
 30 |       margin: 0;
 31 |       padding: 0;
 32 |       background-color: #F5F7F9;
 33 |     }
 34 |     .email-content {
 35 |       width: 100%;
 36 |       margin: 0;
 37 |       padding: 0;
 38 |     }
 39 | 
 40 |     /* Masthead ----------------------- */
 41 |     .email-masthead {
 42 |       padding: 25px 0;
 43 |       text-align: center;
 44 |     }
 45 |     .email-masthead_logo {
 46 |       max-width: 400px;
 47 |       border: 0;
 48 |     }
 49 |     .email-masthead_name {
 50 |       font-size: 16px;
 51 |       font-weight: bold;
 52 |       color: #839197;
 53 |       text-decoration: none;
 54 |       text-shadow: 0 1px 0 white;
 55 |     }
 56 | 
 57 |     /* Body ------------------------------ */
 58 |     .email-body {
 59 |       width: 100%;
 60 |       margin: 0;
 61 |       padding: 0;
 62 |       border-top: 1px solid #E7EAEC;
 63 |       border-bottom: 1px solid #E7EAEC;
 64 |       background-color: #FFFFFF;
 65 |     }
 66 |     .email-body_inner {
 67 |       width: 570px;
 68 |       margin: 0 auto;
 69 |       padding: 0;
 70 |     }
 71 |     .email-footer {
 72 |       width: 570px;
 73 |       margin: 0 auto;
 74 |       padding: 0;
 75 |       text-align: center;
 76 |     }
 77 |     .email-footer p {
 78 |       color: #839197;
 79 |     }
 80 |     .body-action {
 81 |       width: 100%;
 82 |       margin: 30px auto;
 83 |       padding: 0;
 84 |       text-align: center;
 85 |     }
 86 |     .body-sub {
 87 |       margin-top: 25px;
 88 |       padding-top: 25px;
 89 |       border-top: 1px solid #E7EAEC;
 90 |     }
 91 |     .content-cell {
 92 |       padding: 35px;
 93 |     }
 94 |     .align-right {
 95 |       text-align: right;
 96 |     }
 97 | 
 98 |     /* Type ------------------------------ */
 99 |     h1 {
100 |       margin-top: 0;
101 |       color: #292E31;
102 |       font-size: 19px;
103 |       font-weight: bold;
104 |       text-align: left;
105 |     }
106 |     h2 {
107 |       margin-top: 0;
108 |       color: #292E31;
109 |       font-size: 16px;
110 |       font-weight: bold;
111 |       text-align: left;
112 |     }
113 |     h3 {
114 |       margin-top: 0;
115 |       color: #292E31;
116 |       font-size: 14px;
117 |       font-weight: bold;
118 |       text-align: left;
119 |     }
120 |     p {
121 |       margin-top: 0;
122 |       color: #839197;
123 |       font-size: 16px;
124 |       line-height: 1.5em;
125 |       text-align: left;
126 |     }
127 |     p.sub {
128 |       font-size: 12px;
129 |     }
130 |     p.center {
131 |       text-align: center;
132 |     }
133 | 
134 |     /* Buttons ------------------------------ */
135 |     .button {
136 |       display: inline-block;
137 |       width: 200px;
138 |       background-color: #414EF9;
139 |       border-radius: 3px;
140 |       color: #ffffff;
141 |       font-size: 15px;
142 |       line-height: 45px;
143 |       text-align: center;
144 |       text-decoration: none;
145 |       -webkit-text-size-adjust: none;
146 |       mso-hide: all;
147 |     }
148 |     .button--green {
149 |       background-color: #28DB67;
150 |     }
151 |     .button--red {
152 |       background-color: #FF3665;
153 |     }
154 |     .button--blue {
155 |       background-color: #414EF9;
156 |     }
157 | 
158 |     /*Media Queries ------------------------------ */
159 |     @media only screen and (max-width: 600px) {
160 |       .email-body_inner,
161 |       .email-footer {
162 |         width: 100% !important;
163 |       }
164 |     }
165 |     @media only screen and (max-width: 500px) {
166 |       .button {
167 |         width: 100% !important;
168 |       }
169 |     }
170 |   </style>
171 | </head>
172 | <body>
173 |   <table class="email-wrapper" width="100%" cellpadding="0" cellspacing="0">
174 |     <tr>
175 |       <td align="center">
176 |         <table class="email-content" width="100%" cellpadding="0" cellspacing="0">
177 |           <!-- Logo -->
178 |           <tr>
179 |             <td class="email-masthead">
180 |               <a class="email-masthead_name">Canvas</a>
181 |             </td>
182 |           </tr>
183 |           <!-- Email Body -->
184 |           <tr>
185 |             <td class="email-body" width="100%">
186 |               <table class="email-body_inner" align="center" width="570" cellpadding="0" cellspacing="0">
187 |                 <!-- Body content -->
188 |                 <tr>
189 |                   <td class="content-cell">
190 |                     <h1>Hi {{name}},</h1>
191 |                     <p>You recently requested to reset your password for your Canvas account. Click the button below to reset it.</p>
192 |                     <!-- Action -->
193 |                     <table class="body-action" align="center" width="100%" cellpadding="0" cellspacing="0">
194 |                       <tr>
195 |                         <td align="center">
196 |                           <div>
197 |                             <!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{action_url}}" style="height:45px;v-text-anchor:middle;width:200px;" arcsize="7%" stroke="f" fill="t">
198 |                               <v:fill type="tile" color="#FF3665" />
199 |                               <w:anchorlock/>
200 |                               <center style="color:#ffffff;font-family:sans-serif;font-size:15px;">Reset your password</center>
201 |                             </v:roundrect><![endif]-->
202 |                             <a href="{{action_url}}" class="button button--red">Reset your password</a>
203 |                           </div>
204 |                         </td>
205 |                       </tr>
206 |                     </table>
207 |                     <p>If you did not request a password reset, please ignore this email or reply to let us know. This password reset is only valid for the next 30 minutes.</p>
208 |                     <p>Thanks,<br>Canvas Labs, Inc. and the Canvas Team</p>
209 |                     <p><strong>P.S.</strong> We also love hearing from you and helping you with any issues you have. Please reply to this email if you want to ask a question or just say hi.</p>
210 |                     <!-- Sub copy -->
211 |                     <table class="body-sub">
212 |                       <tr>
213 |                         <td>
214 |                           <p class="sub">If you’re having trouble clicking the password reset button, copy and paste the URL below into your web browser.</p>
215 |                           <p class="sub"><a href="{{action_url}}">{{action_url}}</a></p>
216 |                         </td>
217 |                       </tr>
218 |                     </table>
219 |                   </td>
220 |                 </tr>
221 |               </table>
222 |             </td>
223 |           </tr>
224 |           <tr>
225 |             <td>
226 |               <table class="email-footer" align="center" width="570" cellpadding="0" cellspacing="0">
227 |                 <tr>
228 |                   <td class="content-cell">
229 |                     <p class="sub center">&copy; 2016 Canvas. All rights reserved.</p>
230 |                     <p class="sub center">
231 |                       Canvas
232 |                       <br>{{product_address_line1}}
233 |                       <br>{{product_address_line2}}
234 |                     </p>
235 |                   </td>
236 |                 </tr>
237 |               </table>
238 |             </td>
239 |           </tr>
240 |         </table>
241 |       </td>
242 |     </tr>
243 |   </table>
244 | </body>
245 | </html>
246 | 


--------------------------------------------------------------------------------