<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> |