368 lines
12 KiB
HTML
368 lines
12 KiB
HTML
{{template "base.html" .}}
|
|
|
|
{{define "title"}}Green Pool{{end}}
|
|
{{define "extraheader"}}
|
|
{{template "location-geocode-header" .}}
|
|
{{template "map-header" .}}
|
|
{{template "photo-upload-header"}}
|
|
<style>
|
|
.district-logo {
|
|
max-height: 80px;
|
|
width: auto;
|
|
}
|
|
.map-container {
|
|
height: 500px;
|
|
background-color: #e9ecef;
|
|
border-radius: 5px;
|
|
border: 1px solid #dee2e6;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 10px;
|
|
}
|
|
.form-section {
|
|
margin-bottom: 2.5rem;
|
|
padding-bottom: 2rem;
|
|
border-bottom: 1px solid #dee2e6;
|
|
}
|
|
.form-section:last-child {
|
|
border-bottom: none;
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 0;
|
|
}
|
|
.section-heading {
|
|
margin-bottom: 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.section-heading i {
|
|
margin-right: 10px;
|
|
font-size: 1.5rem;
|
|
color: #0d6efd;
|
|
}
|
|
.optional-label {
|
|
font-size: 0.875rem;
|
|
color: #6c757d;
|
|
font-weight: normal;
|
|
margin-left: 8px;
|
|
}
|
|
.submit-container {
|
|
background-color: #f8f9fa;
|
|
padding: 20px;
|
|
border-radius: 5px;
|
|
margin-top: 2rem;
|
|
}
|
|
</style>
|
|
{{end}}
|
|
{{define "content"}}
|
|
<!-- Main Content -->
|
|
<main class="py-5">
|
|
<div class="container">
|
|
<!-- Page Title -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h2>Report a Green Pool or Mosquito Source</h2>
|
|
<p class="lead">Help us locate and treat potential mosquito breeding sources in your area</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Info Alert -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="alert alert-info" role="alert">
|
|
<h5 class="alert-heading"><i class="bi bi-info-circle me-2"></i>All fields are optional</h5>
|
|
<p class="mb-0">We appreciate any information you can provide. The more details you share, the better we can address the issue. Photos and location information are especially helpful.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Report Form -->
|
|
<form id="greenPoolForm">
|
|
<!-- Photo Upload Section -->
|
|
<div class="form-section">
|
|
<div class="section-heading">
|
|
<i class="bi bi-camera"></i>
|
|
<h3>Photos</h3>
|
|
<span class="optional-label">optional</span>
|
|
</div>
|
|
<p class="mb-3">Photos help us identify the severity of the issue and may contain location data that can help us find the source.</p>
|
|
|
|
{{template "photo-upload"}}
|
|
</div>
|
|
|
|
<!-- Location Section -->
|
|
<div class="form-section">
|
|
<div class="section-heading">
|
|
<i class="bi bi-geo-alt"></i>
|
|
<h3>Location</h3>
|
|
<span class="optional-label">optional</span>
|
|
</div>
|
|
<p class="mb-3">Please provide the location of the potential mosquito breeding source. We may be able to extract this information from your photos if they contain location data.</p>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-12">
|
|
{{template "location-geocode"}}
|
|
</div>
|
|
<div class="col-md-12 d-none" id="gps-display">
|
|
<div class="location-detail">
|
|
<div class="detail-label">Longitude</div>
|
|
<div id="longitude" class="detail-value">-</div>
|
|
</div>
|
|
<div class="location-detail">
|
|
<div class="detail-label">Latitude</div>
|
|
<div id="latitude" class="detail-value">-</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="small text-muted mb-2">You can also click on the map to mark the location precisely</p>
|
|
<div class="map-container">
|
|
<div id="map"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Source Details Section -->
|
|
<div class="form-section">
|
|
<div class="section-heading">
|
|
<i class="bi bi-water"></i>
|
|
<h3>Source Details</h3>
|
|
<span class="optional-label">optional</span>
|
|
</div>
|
|
|
|
<div class="row mb-4">
|
|
<div class="col-md-6">
|
|
<label for="duration" class="form-label">How long has this source been present?</label>
|
|
<select class="form-select" id="duration">
|
|
<option value="">I don't know</option>
|
|
<option value="less-than-week">Less than a week</option>
|
|
<option value="1-2-weeks">1-2 weeks</option>
|
|
<option value="2-4-weeks">2-4 weeks</option>
|
|
<option value="1-3-months">1-3 months</option>
|
|
<option value="more-than-3-months">More than 3 months</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label class="form-label d-block">Have you observed any of the following? <a href="#" data-bs-toggle="modal" data-bs-target="#larvaeInfoModal"><i class="bi bi-question-circle small ms-1"></i></a></label>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="larvae">
|
|
<label class="form-check-label" for="larvae">
|
|
Larvae (wigglers) in water
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="pupae">
|
|
<label class="form-check-label" for="pupae">
|
|
Pupae (tumblers) in water
|
|
</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="adultMosquitoes">
|
|
<label class="form-check-label" for="adultMosquitoes">
|
|
Adult mosquitoes near the source
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Access Information Section -->
|
|
<div class="form-section">
|
|
<div class="section-heading">
|
|
<i class="bi bi-unlock"></i>
|
|
<h3>Access Information</h3>
|
|
<span class="optional-label">optional</span>
|
|
</div>
|
|
<p class="mb-3">Please provide any details about how to access the mosquito source. This helps our technicians when they visit the site.</p>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-12">
|
|
<label for="accessInfo" class="form-label">How can the source be accessed?</label>
|
|
<textarea class="form-control" id="accessInfo" rows="3" placeholder="Example: The pool is in the backyard, which can be accessed through a side gate on the right side of the house."></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-12">
|
|
<label class="form-label d-block">Access obstacles (check all that apply):</label>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="gate">
|
|
<label class="form-check-label" for="gate">Gate</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="fence">
|
|
<label class="form-check-label" for="fence">Fence</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="lockedEntrance">
|
|
<label class="form-check-label" for="lockedEntrance">Locked entrance</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="dogs">
|
|
<label class="form-check-label" for="dogs">Dogs/pets</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="otherObstacle">
|
|
<label class="form-check-label" for="otherObstacle">Other obstacle</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contact Information Sections -->
|
|
<div class="form-section">
|
|
<div class="section-heading">
|
|
<i class="bi bi-person-lines-fill"></i>
|
|
<h3>Contact Information</h3>
|
|
<span class="optional-label">optional</span>
|
|
</div>
|
|
|
|
<!-- Property Owner Information -->
|
|
<h5 class="mb-3">Property Owner Information (if known)</h5>
|
|
<div class="row mb-4">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="ownerName" class="form-label">Owner Name</label>
|
|
<input type="text" class="form-control" id="ownerName">
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="ownerPhone" class="form-label">Owner Phone</label>
|
|
<input type="tel" class="form-control" id="ownerPhone">
|
|
</div>
|
|
<div class="col-md-12">
|
|
<label for="ownerEmail" class="form-label">Owner Email</label>
|
|
<input type="email" class="form-control" id="ownerEmail">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Your Contact Information -->
|
|
<h5 class="mb-3">Your Contact Information (for updates)</h5>
|
|
<div class="row mb-3">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="reporterName" class="form-label">Your Name</label>
|
|
<input type="text" class="form-control" id="reporterName">
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="reporterPhone" class="form-label">Your Phone</label>
|
|
<input type="tel" class="form-control" id="reporterPhone">
|
|
</div>
|
|
<div class="col-md-12 mb-3">
|
|
<label for="reporterEmail" class="form-label">Your Email</label>
|
|
<input type="email" class="form-control" id="reporterEmail">
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="receiveUpdates" checked>
|
|
<label class="form-check-label" for="receiveUpdates">
|
|
I would like to receive updates on this report
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Additional Information Section -->
|
|
<div class="form-section">
|
|
<div class="section-heading">
|
|
<i class="bi bi-card-text"></i>
|
|
<h3>Additional Information</h3>
|
|
<span class="optional-label">optional</span>
|
|
</div>
|
|
<p class="mb-3">Please provide any other information that might help us address this mosquito source.</p>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<label for="additionalInfo" class="form-label">Additional Details</label>
|
|
<textarea class="form-control" id="additionalInfo" rows="4" placeholder="Example: The house appears to be vacant. There is algae growth in the pool. I've noticed increased mosquito activity in the evenings."></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Submit Section -->
|
|
<div class="submit-container">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-8">
|
|
<p class="mb-0"><strong>Thank you for helping us keep our community safe from mosquito-borne illnesses.</strong></p>
|
|
<p class="mb-0 small text-muted">After submission, you will receive a confirmation with a report ID for tracking purposes.</p>
|
|
</div>
|
|
<div class="col-md-4 text-md-end mt-3 mt-md-0">
|
|
<button type="submit" class="btn btn-primary btn-lg">
|
|
Submit Report
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Back Button -->
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<a href="/" class="btn btn-outline-secondary">
|
|
<i class="bi bi-arrow-left"></i> Back to Home
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Larvae Info Modal -->
|
|
<div class="modal fade" id="larvaeInfoModal" tabindex="-1" aria-labelledby="larvaeInfoModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="larvaeInfoModalLabel">How to Identify Mosquito Larvae and Pupae</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row mb-4">
|
|
<div class="col-md-6">
|
|
<h6>Mosquito Larvae (Wigglers)</h6>
|
|
<p>Mosquito larvae, often called "wigglers," are:</p>
|
|
<ul>
|
|
<li>Small, worm-like aquatic organisms</li>
|
|
<li>Usually 1/4 to 1/2 inch long</li>
|
|
<li>Move with a wiggling motion in water</li>
|
|
<li>Hang upside-down at the water surface to breathe</li>
|
|
<li>Visible to the naked eye in standing water</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6>Mosquito Pupae (Tumblers)</h6>
|
|
<p>Mosquito pupae, often called "tumblers," are:</p>
|
|
<ul>
|
|
<li>Comma-shaped organisms</li>
|
|
<li>Typically darker than larvae</li>
|
|
<li>Move with a tumbling motion when disturbed</li>
|
|
<li>Rest at the water surface</li>
|
|
<li>The stage just before adult mosquitoes emerge</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<p>When looking for mosquito larvae and pupae, check standing water sources like:</p>
|
|
<ul>
|
|
<li>Swimming pools</li>
|
|
<li>Bird baths</li>
|
|
<li>Buckets or containers</li>
|
|
<li>Drainage ditches</li>
|
|
<li>Plant saucers</li>
|
|
<li>Rain gutters</li>
|
|
</ul>
|
|
<p>If you see small creatures moving in standing water, there's a good chance they're mosquito larvae or pupae.</p>
|
|
<div class="text-center">
|
|
<a href="#" class="btn btn-outline-primary">View Detailed Identification Guide</a>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|