nidus-sync/htmlpage/sync/template/report-evidence.html
Eli Ribble bacd452346 Split up html page logic into site-specific packages
This is a significant overhaul to make it possible to serve totally
different templates with different components for the different sites.
2026-01-07 18:36:20 +00:00

243 lines
9.2 KiB
HTML

{{template "base.html" .}}
{{define "title"}}Login{{end}}
{{define "extraheader"}}
<style>
body {
background-color: #f8f9fa;
}
.page-container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.content-card {
background-color: white;
border-radius: 15px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
padding: 25px;
margin-bottom: 20px;
}
.logo-area {
text-align: center;
margin-bottom: 20px;
}
.logo-placeholder {
height: 50px;
max-width: 200px;
margin: 0 auto;
}
.photo-gallery {
display: flex;
gap: 10px;
margin-bottom: 20px;
overflow-x: auto;
padding-bottom: 10px;
}
.photo-item {
min-width: 200px;
height: 150px;
border-radius: 8px;
overflow: hidden;
border: 2px solid #dee2e6;
}
.photo-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.data-section {
margin-bottom: 25px;
}
.section-title {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 10px;
color: #0d6efd;
display: flex;
align-items: center;
}
.section-title i {
margin-right: 8px;
}
.table-container {
overflow-x: auto;
margin-bottom: 15px;
}
.alert-info {
background-color: #e8f4f8;
border-color: #b8daff;
}
.progress-container {
margin: 30px 0 20px;
}
.progress {
height: 8px;
}
.trap-high {
color: #dc3545;
font-weight: bold;
}
.trap-medium {
color: #fd7e14;
font-weight: bold;
}
.trap-low {
color: #198754;
}
</style>
{{end}}
{{define "content"}}
<div class="page-container">
<!-- Logo -->
<div class="logo-area">
<img src="https://placehold.co/200x50/e9ecef/adb5bd?text=County+Vector+Control" alt="County Vector Control" class="logo-placeholder">
</div>
<!-- Progress Bar -->
<div class="progress-container">
<div class="d-flex justify-content-between mb-1">
<span class="text-muted small">Evidence</span>
<span class="text-muted small">2 of 4</span>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<!-- Main Content -->
<div class="content-card">
<h1 class="h4 mb-4">Evidence of Potential Breeding Site</h1>
<!-- Aerial Photos -->
<div class="data-section">
<div class="section-title">
<i class="bi bi-camera-fill"></i> Aerial Surveillance Photos
</div>
<p class="small text-muted mb-2">These photos were taken during routine aerial surveillance of the area.</p>
<div class="photo-gallery">
<div class="photo-item">
<img src="https://placehold.co/200x150/76b5c5/ffffff?text=Aerial+Photo+1" alt="Aerial photo of property">
</div>
<div class="photo-item">
<img src="https://placehold.co/200x150/3e8e7e/ffffff?text=Aerial+Photo+2" alt="Aerial photo of property">
</div>
<div class="photo-item">
<img src="https://placehold.co/200x150/7accc8/ffffff?text=Aerial+Photo+3" alt="Aerial photo of property">
</div>
</div>
</div>
<!-- Historical Inspections -->
<div class="data-section">
<div class="section-title">
<i class="bi bi-clipboard-check-fill"></i> Historical Inspection Data
</div>
<div class="table-container">
<table class="table table-striped table-sm">
<thead>
<tr>
<th>Date</th>
<th>Inspector</th>
<th>Findings</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mar 15, 2023</td>
<td>J. Martinez</td>
<td>Pool water stagnant, green</td>
<td>Treatment applied, owner notified</td>
</tr>
<tr>
<td>Nov 02, 2022</td>
<td>L. Johnson</td>
<td>Pool water clear, maintained</td>
<td>No action needed</td>
</tr>
<tr>
<td>Aug 18, 2022</td>
<td>S. Williams</td>
<td>Minor algae formation</td>
<td>Owner provided maintenance resources</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Mosquito Trap Data -->
<div class="data-section">
<div class="section-title">
<i class="bi bi-bug-fill"></i> Mosquito Trap Count Data
</div>
<div class="table-container">
<table class="table table-striped table-sm">
<thead>
<tr>
<th>Date Collected</th>
<th>Count</th>
<th>Distance</th>
<th>Level</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jun 12, 2023</td>
<td>42</td>
<td>0.3 miles</td>
<td class="trap-high">High</td>
</tr>
<tr>
<td>Jun 05, 2023</td>
<td>36</td>
<td>0.3 miles</td>
<td class="trap-high">High</td>
</tr>
<tr>
<td>May 29, 2023</td>
<td>28</td>
<td>0.3 miles</td>
<td class="trap-medium">Medium</td>
</tr>
<tr>
<td>May 22, 2023</td>
<td>15</td>
<td>0.3 miles</td>
<td class="trap-low">Low</td>
</tr>
<tr>
<td>May 15, 2023</td>
<td>12</td>
<td>0.3 miles</td>
<td class="trap-low">Low</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Public Health Information -->
<div class="alert alert-info">
<h5><i class="bi bi-info-circle me-2"></i>Why This Matters</h5>
<p>The data above shows mosquito activity in your area. Recent trap counts indicate elevated mosquito populations, which increases the risk of mosquito-borne diseases like West Nile virus.</p>
<p>Unmaintained swimming pools can produce thousands of mosquitoes each week. By addressing potential breeding sites, you're helping protect your family and neighbors from these health risks.</p>
<p class="mb-0"><strong>We need your help</strong> to ensure we maintain public health by keeping mosquito counts low in your neighborhood. Your cooperation makes a significant difference in community safety.</p>
</div>
<!-- Action Button -->
<div class="d-grid gap-2 mt-4">
<a href="{{ .URLs.ReportContribute }}" class="btn btn-primary btn-lg">
<i class="bi bi-arrow-right-circle me-2"></i> Next Step: Upload Current Photos
</a>
</div>
</div>
<!-- Help Text -->
<div class="text-center text-muted small">
<p>If you need assistance, please contact Vector Control at (555) 123-4567</p>
</div>
</div>
{{end}}