app/views/_tailwind/alert_mailer/alert.html.erb
<%# This template is generated automically by maizzle and should not be edited by hand! Go to "maizzle/src/templates". %>
<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta charset="utf-8">
<meta name="x-apple-disable-message-reformatting">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings xmlns:o="urn:schemas-microsoft-com:office:office">
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<style>
td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;}
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;
}
</style>
<![endif]-->
<title><%= subject(@alert, @applications, @comments) %></title>
<style>
.hover-text-fuchsia-darker:hover {
color: #A6156F !important
}
.focus-bg-sun-yellow:focus {
background-color: #FFDC3E !important
}
.group:hover .group-hover-text-fuchsia-darker {
color: #A6156F !important
}
.group:focus .group-focus-bg-sun-yellow {
background-color: #FFDC3E !important
}
@media (max-width: 600px) {
.sm-px-4 {
padding-left: 16px !important;
padding-right: 16px !important
}
}
@media (max-width: 425px) {
.xs-mt-4 {
margin-top: 16px !important
}
.xs-block {
display: block !important
}
.xs-inline-block {
display: inline-block !important
}
.xs-h-8 {
height: 32px !important
}
.xs-w-full {
width: 100% !important
}
}
@media (prefers-color-scheme: dark) {
.dark-mode-bg-_333 {
background-color: #333 !important
}
.dark-mode-bg-black {
background-color: #000 !important
}
.dark-mode-text-white {
color: #ffffff !important
}
}
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@100;200;300;400;500;600;700;800;900&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Merriweather:wght@300;400;500;700;900&display=fallback" rel="stylesheet">
</head>
<body class="dark-mode-bg-_333" style="margin: 0; width: 100%; background-color: #F3F2F2; padding: 0; -webkit-font-smoothing: antialiased; word-break: break-word">
<div style="display: none">
<%= preheader(@applications, @comments) %>
 ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏
</div>
<div role="article" aria-roledescription="email" aria-label="<%= subject(@alert, @applications, @comments) %>" lang="en">
<div class="sm-px-4 dark-mode-text-white" style="font-family: Fira Sans, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 18px; color: #414860">
<table align="center" cellpadding="0" cellspacing="0" role="none">
<tr>
<td style="width: 552px; max-width: 100%">
<div role="separator" style="line-height: 56px">‍</div>
<% @applications.each do |application| %> <a href="<%= application_url_with_tracking(id: application.id) %>" class="group" style="text-decoration-line: none">
<table class="dark-mode-bg-black" style="width: 100%; background-color: #ffffff; padding: 32px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)" cellpadding="0" cellspacing="0" role="none">
<tr>
<td valign="top" class="xs-w-full xs-inline-block">
<h2 class="group-hover-text-fuchsia-darker dark-mode-text-white" style="margin: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; font-size: 18px; font-weight: 700; color: #CA3F94; text-decoration-line: underline; text-decoration: underline">
<span class="group-focus-bg-sun-yellow"><%= application.address %></span>
</h2>
<p class="dark-mode-text-white" style="margin-top: 0; color: #414860"><%= distance_and_heading_in_words(@alert.location, application.location) %></p>
<p class="dark-mode-text-white" style="margin-top: 0; margin-bottom: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; color: #414860">
<%= application.description %>
</p>
</td>
<td class="xs-w-full xs-inline-block xs-mt-4" valign="top" style="width: 150px">
<img alt="Map of <%= application.address %>" src="<%= google_static_map_url(lat: application.lat, lng: application.lng, size: '150x150', key: :email) %>" width="150" height="150" style="max-width: 100%; vertical-align: middle; line-height: 1; border: 0">
</td>
</tr>
</table>
</a>
<div role="separator" style="line-height: 20px">‍</div>
<% end %> <div role="separator" style="line-height: 8px">‍</div>
<% @comments.each do |comment| %> <div role="separator" style="line-height: 16px">‍</div><a href="<%= comment_url_with_tracking(comment:) %>" class="group" style="text-decoration-line: none;">
<table class="dark-mode-text-white dark-mode-bg-black" style="background-color: #ffffff; padding: 32px; color: #414860; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)" cellpadding="0" cellspacing="0" role="none">
<tr>
<td>
<p style="margin-top: 0;"><%= comment.name %> commented:</p>
<table class="dark-mode-bg-black" style="margin-top: 16px; background-color: #ffffff" cellpadding="0" cellspacing="0" role="none">
<tr>
<td valign="top" class="xs-block xs-h-8" style="padding-right: 16px; padding-top: 8px; font-size: 72px">”</td>
<td valign="top" class="xs-block"> <%= comment_as_html(comment.text) %> <p style="margin-bottom: 24px; margin-top: 32px">
Comment made on:
</p>
<table cellpadding="0" cellspacing="0" role="none">
<tr>
<td class="xs-w-full xs-inline-block" valign="top" style="width: 180px">
<img alt="Map of <%= comment.application.address %>" src="<%= google_static_map_url(lat: comment.application.lat, lng: comment.application.lng, size: '150x150', key: :email) %>" width="150" height="150" style="max-width: 100%; vertical-align: middle; line-height: 1; border: 0;">
</td>
<td valign="top" class="xs-w-full xs-inline-block xs-mt-4">
<h2 class="group-hover-text-fuchsia-darker dark-mode-text-white" style="margin: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; font-size: 18px; font-weight: 700; color: #CA3F94; text-decoration-line: underline; text-decoration: underline">
<span class="group-focus-bg-sun-yellow"><%= comment.application.address %></span>
</h2>
<p class="dark-mode-text-white" style="margin-top: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; color: #414860">
<%= comment.application.description %>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</a>
<% end %><div role="separator" style="background-color: #cbd5e1; height: 1px; line-height: 1px; margin: 24px 0">‍</div>
<a href="<%= edit_profile_alert_url(@alert) %>" class="group" style="text-decoration-line: none;">
<table class="dark-mode-bg-black" style="width: 100%; background-color: #ffffff; padding: 16px 24px; color: #414860" cellpadding="0" cellspacing="0" role="none">
<tr>
<td style="width: 36px">
<img src="<%= attachments['pencil.png'].url %>" style="max-width: 100%; vertical-align: middle; line-height: 1; border: 0;" alt="">
</td>
<td>
<span class="group-hover-text-fuchsia-darker group-focus-bg-sun-yellow" style="font-weight: 700; color: #CA3F94; text-decoration-line: underline; text-decoration: underline;">
Edit alert
</span>
</td>
</tr>
</table>
</a>
<div role="separator" style="line-height: 8px">‍</div>
<a href="<%= unsubscribe_alert_url(confirm_id: @alert.confirm_id) %>" class="group" style="text-decoration-line: none;">
<table class="dark-mode-bg-black" style="width: 100%; background-color: #ffffff; padding: 16px 24px; color: #414860" cellpadding="0" cellspacing="0" role="none">
<tr>
<td style="width: 36px;">
<img src="<%= attachments['trash.png'].url %>" style="max-width: 100%; vertical-align: middle; line-height: 1; border: 0;" alt="">
</td>
<td>
<span class="group-hover-text-fuchsia-darker group-focus-bg-sun-yellow" style="font-weight: 700; color: #CA3F94; text-decoration-line: underline; text-decoration: underline;">
Unsubscribe from alert
</span>
</td>
</tr>
</table>
</a>
<div role="separator" style="background-color: #cbd5e1; height: 1px; line-height: 1px; margin: 24px 0;">‍</div>
<div role="separator" style="line-height: 72px">‍</div>
<table cellpadding="0" cellspacing="0" role="none">
<tr>
<td class="xs-inline-block" style="width: 188px; padding-right: 32px">
<img src="<%= attachments['footer-illustration.png'].url %>" style="max-width: 100%; vertical-align: middle; line-height: 1; border: 0;" alt="">
</td>
<td class="xs-inline-block xs-mt-4" style="vertical-align: top">
<p style="margin-top: 0;">
This email was brought to you by the Planning Alerts team.
</p>
<p>
<strong>Planning Alerts</strong>
is a free service where anyone can find out what is being built and knocked down in their area.
</p>
<p>
The service
is run by the independent charity
<a href="https://www.oaf.org.au/" class="hover-text-fuchsia-darker focus-bg-sun-yellow" style="font-weight: 700; color: #CA3F94; text-decoration-line: underline;">
OpenAustralia Foundation
</a>.
</p>
<p>
<a href="<%= documentation_contact_url %>" class="hover-text-fuchsia-darker focus-bg-sun-yellow" style="font-weight: 700; color: #CA3F94; text-decoration-line: underline;">
Contact us
</a>
if you have questions.
</p>
</td>
</tr>
</table>
<div role="separator" style="line-height: 144px">‍</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>