mobilizon/lib/web/templates/email/email.html.heex

209 lines
8 KiB
Plaintext
Raw Permalink Normal View History

<!DOCTYPE html>
<html lang={"#{@locale}"}>
<head>
<title><%= @subject %></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
/* CLIENT-SPECIFIC STYLES */
* { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
table { border-spacing: 0 !important; border-collapse: collapse !important; table-layout: fixed !important; margin: 0 auto !important; }
table table table { table-layout: auto; }
html, body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* MOBILE STYLES */
@media screen and (max-width:600px){
h1 {
font-size: 32px !important;
line-height: 32px !important;
}
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] { margin: 0 !important; }
</style>
<%= if @jsonLDMetadata do %>
<script type="application/ld+json">
<%= @jsonLDMetadata |> raw %>
</script>
<% end %>
</head>
<body style="background-color: #ECEBF2; margin: 0 !important; padding: 0 !important;mso-line-height-rule: exactly;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<!-- LOGO -->
<tr>
<td bgcolor="#474467" align="center">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tr>
<td align="center" valign="top" style="padding: 40px 10px 40px 10px;">
<a href={"#{Mobilizon.Web.Endpoint.url()}"} target="_blank">
<img
alt={"#{@instance_name}"}
src={"#{"#{Mobilizon.Web.Endpoint.url()}/img/mobilizon_logo.png"}"}
width="340"
height="108"
style="display: block; width: 340px; max-width: 370px; min-width: 340px; font-family: 'Roboto', Helvetica, Arial, sans-serif; color: #ffffff; font-size: 18px;"
border="0"
/>
</a>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<%= @inner_content %>
<%= if Mobilizon.Config.instance_demo_mode?() do %>
<!-- BETA WARNING -->
<tr>
<td bgcolor="#ECEBF2" align="center" style="padding: 30px 10px 0px 10px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table
border="0"
cellpadding="0"
cellspacing="0"
width="100%"
style="max-width: 600px;"
>
<!-- HEADLINE -->
<tr>
<td
bgcolor="#FFD599"
align="center"
style="padding: 30px 30px 30px 30px; border-radius: 4px 4px 4px 4px; color: #3A384C; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;"
>
<h2 style="font-size: 25px; font-weight: 400; color: #D35204; margin: 0;">
<%= gettext("Warning") %>
</h2>
<br />
<p style="margin: 0; color: #3A384C">
<%= gettext("This is a demonstration site to test Mobilizon.") %>
</p>
<p style="margin: 0; color: #3A384C;">
<b><%= gettext("Please do not use it for real purposes.") %></b>
</p>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<% end %>
<!-- SUPPORT CALLOUT -->
<tr>
<td bgcolor="#ECEBF2" align="center" style="padding: 30px 10px 0px 10px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<!-- HEADLINE -->
<tr>
<td
bgcolor="#474467"
align="center"
style="padding: 30px 30px 30px 30px; border-radius: 4px 4px 4px 4px; color: #3A384C; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;"
>
<h2 style="font-size: 20px; font-weight: 400; color: #FFFFFF; margin: 0;">
<%= gettext("Need help? Is something not working as expected?") %>
</h2>
<p style="margin: 0;">
<a
href="https://framacolibri.org/c/mobilizon/39"
target="_blank"
style="color: #FFFFFF;"
>
<%= gettext("Ask the community on Framacolibri") %>
</a>
</p>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- FOOTER -->
<tr>
<td bgcolor="#ECEBF2" align="center" style="padding: 0px 10px 0px 10px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<!-- ADDRESS -->
<tr>
<td
bgcolor="#ECEBF2"
align="center"
style="padding: 30px 30px 30px 30px; color: #474467; font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 18px;"
>
<%= if @offer_unsupscription do %>
<p>
<a href={"#{Mobilizon.Web.Endpoint.url()}/settings/notifications"}>
<%= gettext("Manage your notification settings") %>
</a>
</p>
<% end %>
<p style="margin: 0;">
<%= gettext("<b>%{instance}</b> is powered by Mobilizon.",
instance: @instance_name
)
|> raw %>
<br />
<a href="https://joinmobilizon.org">
<%= gettext("Learn more about Mobilizon here!") %>
</a>
</p>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>