emailTemplate.ftl
1 <#-- Macro: emailTemplate
2
3 Description: Generates an email template using HTML and inline CSS styling.
4
5 Parameters:
6 - title (string, optional): the title to display in the email masthead.
7 - footer_link (string, optional): the link URL to display in the email footer.
8 -->
9 <#macro emailTemplate title='Lutece' footer_link='https://fr.lutece.paris.fr'>
10 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
11 <html xmlns="http://www.w3.org/1999/xhtml">
12 <head>
13 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
14 <meta name="viewport" content="width=device-width"/>
15 <style type="text/css">
16 * { margin: 0; padding: 0; font-size: 100%; font-family: 'Avenir Next', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; line-height: 1.65; }
17 img { max-width: 100%; margin: 0 auto; display: block; }
18 body, .body-wrap { width: 100% !important; height: 100%; background: #f8f8f8; }
19 a { color: #007bff; text-decoration: none; }
20 a:hover { text-decoration: underline; }
21 .text-center { text-align: center; }
22 .text-right { text-align: right; }
23 .text-left { text-align: left; }
24 .button { display: inline-block; color: white; background: #007bff; border: solid #007bff; border-width: 10px 20px 8px; font-weight: bold; border-radius: 4px; }
25 .button:hover { text-decoration: none; }
26 h1, h2, h3, h4, h5, h6 { margin-bottom: 20px; line-height: 1.25; }
27 h1 { font-size: 32px }
28 h2 { font-size: 28px }
29 h3 { font-size: 24px }
30 h4 { font-size: 20px }
31 h5 { font-size: 16px }
32 p, ul, ol { font-size: 16px; font-weight: normal; margin-bottom: 20px; }
33 .container { display: block !important; clear: both !important; margin: 0 auto !important; max-width: 580px !important; }
34 .container table { width: 100% !important; border-collapse: collapse; }
35 .container .masthead { padding: 80px 0; background: #007bff; color: white; }
36 .container .masthead h1 { margin: 0 auto !important; max-width: 90%; text-transform: uppercase; }
37 .container .content { background: white; padding: 30px 35px; }
38 .container .content.footer { background: none; }
39 .container .content.footer p { margin-bottom: 0; color: #888; text-align: center; font-size: 14px; }
40 .container .content.footer a { color: #888; text-decoration: none; font-weight: bold; }
41 .container .content.footer a:hover { text-decoration: underline; }
42 </style>
43 </head>
44 <body>
45 <table class="body-wrap">
46 <tr>
47 <td class="container">
48 <!-- Message start -->
49 <table>
50 <tr>
51 <td align="center" class="masthead"> <h1>${title}</h1> </td>
52 </tr>
53 <tr>
54 <td class="content"><#nested></td>
55 </tr>
56 </table>
57 </td>
58 </tr>
59 <tr>
60 <td class="container">
61 <!-- Message start -->
62 <table>
63 <tr>
64 <td class="content footer" align="center">
65 <p><a href="${footer_link}">Lutece</a></p>
66 </td>
67 </tr>
68 </table>
69 </td>
70 </tr>
71 </table>
72 </body>
73 </html>
74 </#macro>