| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
| <style> | |
| body { | |
| font-family: Calibri, Arial, Verdana; | |
| } | |
| table { | |
| border: 0; | |
| border-collapse: collapse; | |
| <!--[if mso]> | |
| border-spacing: 0px; | |
| table-layout: fixed; | |
| <![endif]--> | |
| } | |
| tr { | |
| display: flex; | |
| } | |
| #progressbar { | |
| color: #000; | |
| background-color: #f1f1f1; | |
| width: 100%; | |
| } | |
| {% if (percent >= 95) %} | |
| #progressbar { | |
| color: #fff; | |
| background-color: #FF0000; | |
| text-align: center; | |
| width: {{percent}}%; | |
| } | |
| {% elif (percent < 95) and (percent >= 80) %} | |
| #progressbar { | |
| color: #fff; | |
| background-color: #FF8C00; | |
| text-align: center; | |
| width: {{percent}}%; | |
| } | |
| {% else %} | |
| #progressbar { | |
| color: #fff; | |
| background-color: #00B000; | |
| text-align: center; | |
| width: {{percent}}%; | |
| } | |
| {% endif %} | |
| #graybar { | |
| background-color: #D8D8D8; | |
| width: {{100 - percent}}%; | |
| } | |
| a:link, a:visited { | |
| color: #858585; | |
| text-decoration: none; | |
| } | |
| a:hover, a:active { | |
| color: #4a81bf; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <table> | |
| <tr> | |
| <td colspan="2"> | |
| Hi {{username}}!<br /><br /> | |
| Your mailbox is now {{percent}}% full, please consider deleting old messages to still be able to receive new mails in the future.<br /><br /> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td id="progressbar">{{percent}}%</td> | |
| <td id="graybar"></td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> |