blob: b6ad644e5cd2188c2f0ef8e54be6feee6adb3d53 [file] [log] [blame]
Matthias Andreas Benkardb382b102021-01-02 15:32:21 +01001<html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
4 <style>
5 body {
6 font-family: Calibri, Arial, Verdana;
7 }
8 table {
9 border: 0;
10 border-collapse: collapse;
11 <!--[if mso]>
12 border-spacing: 0px;
13 table-layout: fixed;
14 <![endif]-->
15 }
16 tr {
17 display: flex;
18 }
19 #progressbar {
20 color: #000;
21 background-color: #f1f1f1;
22 width: 100%;
23 }
24 {% if (percent >= 95) %}
25 #progressbar {
26 color: #fff;
27 background-color: #FF0000;
28 text-align: center;
29 width: {{percent}}%;
30 }
31 {% elif (percent < 95) and (percent >= 80) %}
32 #progressbar {
33 color: #fff;
34 background-color: #FF8C00;
35 text-align: center;
36 width: {{percent}}%;
37 }
38 {% else %}
39 #progressbar {
40 color: #fff;
41 background-color: #00B000;
42 text-align: center;
43 width: {{percent}}%;
44 }
45 {% endif %}
46 #graybar {
47 background-color: #D8D8D8;
48 width: {{100 - percent}}%;
49 }
50 a:link, a:visited {
51 color: #858585;
52 text-decoration: none;
53 }
54 a:hover, a:active {
55 color: #4a81bf;
56 }
57 </style>
58 </head>
59 <body>
60 <table>
61 <tr>
62 <td colspan="2">
63 Hi {{username}}!<br /><br />
64 Your mailbox is now {{percent}}% full, please consider deleting old messages to still be able to receive new mails in the future.<br /><br />
65 </td>
66 </tr>
67 <tr>
68 <td id="progressbar">{{percent}}%</td>
69 <td id="graybar"></td>
70 </tr>
71 </table>
72 </body>
73</html>