406 lines
10 KiB
HTML
406 lines
10 KiB
HTML
{{ template "sync/layout/base.html" . }}
|
|
|
|
{{ define "title" }}Mailer{{ end }}
|
|
{{ define "extraheader" }}
|
|
<style>
|
|
@page {
|
|
size: Letter;
|
|
margin: 0;
|
|
}
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: #fff;
|
|
}
|
|
a {
|
|
display: block;
|
|
margin: 15px 0;
|
|
}
|
|
.page {
|
|
width: 8.5in;
|
|
height: 11in;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: #ffffff;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
color: #2b2b2b;
|
|
page-break-after: always;
|
|
}
|
|
|
|
#flogo {
|
|
display: none;
|
|
}
|
|
:root {
|
|
--peach: #fbe2d6;
|
|
--left-blue: #f4f9fd;
|
|
--right-cyan: #caeefb;
|
|
--action-strip: #cfdfe6;
|
|
}
|
|
|
|
.hdr-peach {
|
|
position: absolute;
|
|
left: 4.015in;
|
|
top: 0.24in;
|
|
width: 4.22in;
|
|
height: 2.35in;
|
|
background: var(--peach);
|
|
box-sizing: border-box;
|
|
padding: 0.18in 0.22in 0.14in 0.22in;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.hdr-top {
|
|
display: flex;
|
|
gap: 0.18in;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.left-panel {
|
|
position: absolute;
|
|
left: 0.255in;
|
|
top: 2.78in;
|
|
width: 4.995in;
|
|
height: 7.95in;
|
|
background: var(--left-blue);
|
|
border-radius: 0.28in;
|
|
padding: 0.38in 0.42in 0.35in 0.42in;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.right-panel {
|
|
position: absolute;
|
|
left: 5.45in;
|
|
top: 2.78in;
|
|
width: 2.795in;
|
|
height: 7.95in;
|
|
background: var(--right-cyan);
|
|
border-radius: 0.12in;
|
|
padding: 0.28in 0.3in;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.hdr-text {
|
|
width: 1.95in;
|
|
font-size: 10pt;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* Spanish scaling adjustments */
|
|
.page[lang="es"] .hdr-text {
|
|
font-size: 9.8pt;
|
|
line-height: 1.1;
|
|
}
|
|
.page[lang="es"] .lp-body {
|
|
font-size: 10.4pt;
|
|
line-height: 1.28;
|
|
}
|
|
.page[lang="es"] .lp-action {
|
|
font-size: 10.4pt;
|
|
line-height: 1.28;
|
|
padding: 0.13in 0.16in;
|
|
}
|
|
.page[lang="es"] .lp-greeting {
|
|
font-size: 11pt;
|
|
}
|
|
.page[lang="es"] .rp-steps {
|
|
font-size: 10.4pt;
|
|
line-height: 1.28;
|
|
}
|
|
.page[lang="es"] .rp-tips {
|
|
font-size: 10.4pt;
|
|
line-height: 1.28;
|
|
}
|
|
.hdr-docid {
|
|
margin-top: auto;
|
|
text-align: center;
|
|
font-size: 9.5pt;
|
|
padding-top: 0.08in;
|
|
}
|
|
|
|
.lp-greeting {
|
|
font-size: 11.5pt;
|
|
margin: 0 0 0.14in 0;
|
|
}
|
|
.lp-body {
|
|
font-size: 11pt;
|
|
line-height: 1.38;
|
|
}
|
|
.lp-action {
|
|
margin: 0.18in 0 0.16in 0;
|
|
background: var(--action-strip);
|
|
border-radius: 0.22in;
|
|
padding: 0.15in 0.18in;
|
|
font-size: 11pt;
|
|
line-height: 1.38;
|
|
}
|
|
.lp-action b {
|
|
display: block;
|
|
margin-bottom: 0.04in;
|
|
}
|
|
|
|
.lp-signoff {
|
|
margin-top: 0.2in;
|
|
font-size: 11pt;
|
|
line-height: 1.35;
|
|
}
|
|
.lp-signoff b {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.rp-title {
|
|
font-size: 20pt;
|
|
font-weight: 800;
|
|
margin: 0 0 0.16in 0;
|
|
}
|
|
.rp-steps {
|
|
font-size: 11pt;
|
|
line-height: 1.35;
|
|
margin: 0 0 0.18in 0;
|
|
font-weight: 600;
|
|
}
|
|
.rp-steps em {
|
|
font-style: italic;
|
|
font-weight: 700;
|
|
display: block;
|
|
margin-bottom: 0.06in;
|
|
}
|
|
.rp-steps ol {
|
|
margin: 0.06in 0 0.06in 1.05em;
|
|
}
|
|
|
|
.rp-tips-title {
|
|
font-size: 12pt;
|
|
font-weight: 800;
|
|
margin: 0.1in 0 0.06in 0;
|
|
}
|
|
.rp-tips {
|
|
margin: 0 0 0.12in 1em;
|
|
padding: 0;
|
|
font-size: 11pt;
|
|
line-height: 1.35;
|
|
font-weight: 700;
|
|
}
|
|
.rp-foot {
|
|
margin-top: 0.06in;
|
|
font-size: 11pt;
|
|
line-height: 1.35;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.hdr-photo-img {
|
|
width: 1.77in;
|
|
height: 1.83in;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
.rp-qr-img {
|
|
width: 2.205in;
|
|
height: 2.205in;
|
|
object-fit: contain;
|
|
display: block;
|
|
margin: 0 auto 0.18in auto;
|
|
}
|
|
.lp-logo-img {
|
|
position: absolute;
|
|
right: 0.42in;
|
|
bottom: 0.32in;
|
|
width: 0.95in;
|
|
height: 0.95in;
|
|
object-fit: contain;
|
|
display: block;
|
|
}
|
|
|
|
* {
|
|
-webkit-print-color-adjust: exact !important;
|
|
print-color-adjust: exact !important;
|
|
}
|
|
</style>
|
|
{{ end }}
|
|
{{ define "content" }}
|
|
|
|
<!-- ENGLISH PAGE -->
|
|
<div class="page">
|
|
<div class="hdr-peach">
|
|
<div class="hdr-top">
|
|
<div class="hdr-text">
|
|
<p>
|
|
Aerial review indicates possible standing water at this address.
|
|
</p>
|
|
<p>Upload a photo to confirm conditions and close this case.</p>
|
|
<p>Not your property? Please let us know.</p>
|
|
</div>
|
|
<img class="hdr-photo-img" src="{{ .PoolImageURL }}" alt="Pool photo" />
|
|
</div>
|
|
<div class="hdr-docid">ID {{ .DocumentID }}</div>
|
|
</div>
|
|
|
|
<div class="left-panel">
|
|
<p class="lp-greeting">Dear Resident,</p>
|
|
<p class="lp-body">
|
|
The {{ .Organization.Name }} is contacting you because recent aerial
|
|
imagery indicates that your swimming pool may be holding standing water.
|
|
When water sits without circulation or treatment, mosquitoes can develop
|
|
quickly and affect the surrounding neighborhood.
|
|
</p>
|
|
<div class="lp-action">
|
|
<b>Action requested</b>
|
|
Please scan the QR code on this letter and upload a current photo of
|
|
your pool. The image should clearly show the deep end and overall water
|
|
condition. We request a photo whether the water appears clear, cloudy,
|
|
or green so we can accurately assess the situation and close the matter
|
|
if no issue exists.
|
|
</div>
|
|
<p class="lp-body">
|
|
If your pool has started to look more like a pond than a pool, that is
|
|
more common than most people realize. Standing water creates ideal
|
|
conditions for mosquito production. If treatment is needed, we can
|
|
coordinate access while longer-term maintenance or repairs are
|
|
addressed.
|
|
</p>
|
|
<p class="lp-body">
|
|
Our objective is to prevent mosquito production and protect your
|
|
neighborhood. A quick photo response through the QR code is the fastest
|
|
way to resolve this.
|
|
</p>
|
|
<p class="lp-body">
|
|
If you are unable to use the QR code, please visit
|
|
<a href="{{ .ReportURL }}">{{ .ReportURL }}</a> or contact our office
|
|
for assistance.
|
|
</p>
|
|
<div class="lp-signoff">
|
|
Sincerely,<br />
|
|
<b>{{ .Organization.Name }}</b><br />
|
|
{{ .Organization.OfficeAddressStreet.GetOr "" }} -
|
|
{{ .Organization.OfficeAddressCity.GetOr "" }},
|
|
{{ .Organization.OfficeAddressState.GetOr "" }}
|
|
{{ .Organization.OfficeAddressPostalCode.GetOr "" }}<br />
|
|
Phone:
|
|
{{ .Organization.OfficePhone.GetOr "" }}
|
|
</div>
|
|
<img class="lp-logo-img" src="{{ .LogoURL }}" alt="District logo" />
|
|
</div>
|
|
|
|
<div class="right-panel">
|
|
<div class="rp-title">Scan. Snap. Done.</div>
|
|
<img class="rp-qr-img" src="{{ .QRCodeURL }}" alt="QR code" />
|
|
<div class="rp-steps">
|
|
<em>Takes less than 60 seconds.</em>
|
|
<ol>
|
|
<li>Scan the QR code</li>
|
|
<li>Upload one pool<br />photo</li>
|
|
<li>Case closed if clear</li>
|
|
</ol>
|
|
If treatment is needed, we<br />coordinate next steps.
|
|
</div>
|
|
<div class="rp-tips-title">Clear photo tips</div>
|
|
<ul class="rp-tips">
|
|
<li>Show the full pool</li>
|
|
<li>Deep end visible</li>
|
|
<li>Take in daylight</li>
|
|
<li>Avoid glare</li>
|
|
</ul>
|
|
<div class="rp-foot">Clear photos allow faster<br />review.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SPANISH PAGE -->
|
|
<div class="page" lang="es">
|
|
<div class="hdr-peach">
|
|
<div class="hdr-top">
|
|
<div class="hdr-text">
|
|
<p>
|
|
La revisión aérea indica posible agua estancada en esta dirección.
|
|
</p>
|
|
<p>
|
|
Suba una foto para confirmar las condiciones y cerrar este caso.
|
|
</p>
|
|
<p>¿No es su propiedad? Por favor infórmenos.</p>
|
|
</div>
|
|
<img
|
|
class="hdr-photo-img"
|
|
src="{{ .PoolImageURL }}"
|
|
alt="Foto de la piscina"
|
|
/>
|
|
</div>
|
|
<div class="hdr-docid">ID {{ .DocumentID }}</div>
|
|
</div>
|
|
|
|
<div class="left-panel">
|
|
<p class="lp-greeting">Estimado Residente,</p>
|
|
<p class="lp-body">
|
|
El Distrito de Control de Mosquitos y Vectores del Delta se comunica con
|
|
usted porque imágenes aéreas recientes indican que su piscina puede
|
|
estar reteniendo agua estancada. Cuando el agua permanece sin
|
|
circulación o tratamiento, los mosquitos pueden desarrollarse
|
|
rápidamente y afectar al vecindario.
|
|
</p>
|
|
<div class="lp-action">
|
|
<b>Acción requerida</b>
|
|
Por favor escanee el código QR en esta carta y suba una foto actual de
|
|
su piscina. La imagen debe mostrar claramente la parte profunda y la
|
|
condición general del agua. Solicitamos una foto ya sea que el agua esté
|
|
clara, turbia o verde para poder evaluar la situación y cerrar el caso
|
|
si no existe ningún problema.
|
|
</div>
|
|
<p class="lp-body">
|
|
Si su piscina ha comenzado a parecer más un estanque que una piscina, es
|
|
más común de lo que muchos creen. El agua estancada crea condiciones
|
|
ideales para la producción de mosquitos. Si se necesita tratamiento,
|
|
podemos coordinar el acceso mientras se realizan reparaciones o
|
|
mantenimiento a largo plazo.
|
|
<br /><br />
|
|
Nuestro objetivo es prevenir la producción de mosquitos y proteger su
|
|
vecindario. Una respuesta rápida con una foto a través del código QR es
|
|
la manera más rápida de resolver esto.
|
|
<br /><br />
|
|
Si no puede usar el código QR, visite
|
|
<a href="{{ .ReportURL }}">{{ .ReportURL }}</a> o comuníquese con
|
|
nuestra oficina para recibir ayuda.
|
|
</p>
|
|
<div class="lp-signoff">
|
|
Atentamente,<br />
|
|
<b>{{ .Organization.Name }}</b><br />
|
|
{{ .Organization.OfficeAddressStreet.GetOr "" }} -
|
|
{{ .Organization.OfficeAddressCity.GetOr "" }},
|
|
{{ .Organization.OfficeAddressState.GetOr "" }}
|
|
{{ .Organization.OfficeAddressPostalCode.GetOr "" }}<br />
|
|
Teléfono:
|
|
{{ .Organization.OfficePhone.GetOr "" }}
|
|
</div>
|
|
<img
|
|
class="lp-logo-img"
|
|
src="{{ .LogoURL }}"
|
|
alt="Logotipo del distrito"
|
|
/>
|
|
</div>
|
|
|
|
<div class="right-panel">
|
|
<div class="rp-title">Escanee. Tome foto. Listo.</div>
|
|
<img class="rp-qr-img" src="{{ .QRCodeURL }}" alt="Código QR" />
|
|
<div class="rp-steps">
|
|
<em>Toma menos de 60 segundos.</em>
|
|
<ol>
|
|
<li>Escanee el código QR</li>
|
|
<li>Suba una foto de la<br />piscina</li>
|
|
<li>Caso cerrado si está claro</li>
|
|
</ol>
|
|
Si se necesita tratamiento,<br />coordinamos los siguientes pasos.
|
|
</div>
|
|
<div class="rp-tips-title">Consejos para la foto</div>
|
|
<ul class="rp-tips">
|
|
<li>Muestre toda la piscina</li>
|
|
<li>Parte profunda visible</li>
|
|
<li>Tome la foto de día</li>
|
|
<li>Evite reflejos</li>
|
|
</ul>
|
|
<div class="rp-foot">
|
|
Fotos claras permiten una<br />revisión más rápida.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|