Update root RMO to use banner and new colored icon

This commit is contained in:
Eli Ribble 2026-01-30 20:14:10 +00:00
parent 40028744ba
commit 7fb02f4788
No known key found for this signature in database
5 changed files with 47 additions and 112 deletions

View file

@ -2,40 +2,6 @@
{{define "title"}}Main{{end}}
{{define "extraheader"}}
<style>
.service-card {
transition: transform 0.3s;
height: 100%;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.district-logo {
max-height: 80px;
width: auto;
}
.quick-report-mobile {
background-color: #ff9800;
}
.quick-report-desktop {
background-color: #ffefd5;
border-left: 4px solid #ff9800;
}
.banner-container {
position: relative;
width: 100%;
background-color: #F76436;
overflow: hidden;
}
.banner-image {
display: block;
/* width as needed */
}
</style>
{{end}}
{{define "content"}}
<!-- Main Content -->

View file

@ -2,57 +2,14 @@
{{define "title"}}Main{{end}}
{{define "extraheader"}}
<style>
.service-card {
transition: transform 0.3s;
height: 100%;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.district-logo {
max-height: 80px;
width: auto;
}
.quick-report-mobile {
background-color: #ff9800;
}
.quick-report-desktop {
background-color: #ffefd5;
border-left: 4px solid #ff9800;
}
</style>
{{end}}
{{define "content"}}
<!-- Main Content -->
<main>
<!-- Introduction Section -->
<section class="py-5 bg-primary text-white">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10">
<h2 class="text-center mb-4">Report Mosquitoes Online</h2>
<p class="lead text-center">
We are dedicated to protecting public health and improving quality of life by reducing
mosquito populations and the diseases they can carry. Our districts provide comprehensive
mosquito surveillance, control, and education services to our community.
</p>
</div>
</div>
</div>
</section>
<!-- Quick Report for Mobile - Only visible on small screens -->
<section class="py-3 quick-report-mobile d-md-none">
<div class="container">
<div class="row">
<div class="col-12 text-center">
<h4 class="mb-2">On the go?</h4>
<a href="/quick" class="btn btn-dark btn-lg">Make a Quick Report</a>
<p class="mb-0 mt-2"><small>Report mosquito issues in under 60 seconds</small></p>
</div>
</div>
<div class="banner-container">
<img class="banner-image" src="/static/img/rmo/banner.jpg"/>
</div>
</section>
@ -61,67 +18,45 @@
<div class="container">
<h3 class="text-center mb-4">How Can We Help You Today?</h3>
<div class="row g-4">
<!-- Service Option 1 -->
<div class="col-md-4">
<div class="card service-card h-100">
<div class="card-body text-center">
<div class="mb-3">
{{ template "mosquito.svg" }}
{{ template "mosquito-color.svg" }}
</div>
<h4 class="card-title">Follow-up or Check Status</h4>
<p class="card-text">Check on a previous request or view current mosquito activity in your area.</p>
<a href="/status" class="btn btn-primary mt-3">Get Status</a>
<h4 class="card-title">Report Mosquito Nuisance</h4>
<p class="card-text">Report areas with high adult mosquito activity causing discomfort or concern.</p>
<a href="{{ .URL.Nuisance }}" class="btn btn-primary mt-3">Report Problem</a>
</div>
</div>
</div>
<!-- Service Option 2 -->
<div class="col-md-4">
<div class="card service-card h-100">
<div class="card-body text-center">
<div class="mb-3">
{{ template "pond.svg" }}
</div>
<h4 class="card-title">Report a Green Pool</h4>
<p class="card-text">Report stagnant water sources like abandoned pools that may breed mosquitoes.</p>
<a href="/pool" class="btn btn-primary mt-3">Report Source</a>
<h4 class="card-title">Report Standing Water</h4>
<p class="card-text">Report any water that has been sitting for several days, where mosquitoes can live.</p>
<a href="{{ .URL.Water }}" class="btn btn-primary mt-3">Report Source</a>
</div>
</div>
</div>
<!-- Service Option 3 -->
<div class="col-md-4">
<div class="card service-card h-100">
<div class="card-body text-center">
<div class="mb-3">
{{ template "check-report.svg" }}
</div>
<h4 class="card-title">Report Mosquito Nuisance</h4>
<p class="card-text">Report areas with high adult mosquito activity causing discomfort or concern.</p>
<a href="/nuisance" class="btn btn-primary mt-3">Report Problem</a>
<h4 class="card-title">Follow-up or Check Status</h4>
<p class="card-text">Check on a previous request or view current mosquito activity in your area.</p>
<a href="{{ .URL.Status }}" class="btn btn-primary mt-3">Get Status</a>
</div>
</div>
</div>
</div>
<!-- Quick Report for Desktop - Only visible on medium screens and up -->
<div class="row mt-4 d-none d-md-block">
<div class="col-12">
<div class="card quick-report-desktop">
<div class="card-body py-3">
<div class="row align-items-center">
<div class="col-md-8">
<h5 class="mb-1">Need to make a quick report?</h5>
<p class="mb-0">Use our streamlined form to report mosquito issues in under 60 seconds</p>
</div>
<div class="col-md-4 text-md-end mt-3 mt-md-0">
<a href="/quick" class="btn btn-warning">Quick Report</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>

View file

@ -0,0 +1 @@
<svg height="48" viewBox="0 0 512.003 512.003" width="48" xmlns="http://www.w3.org/2000/svg"><g fill="#5e240d"><path d="M256.001 7.501a7.5 7.5 0 0 0-7.5 7.5v108.071h15V15.001c0-4.143-3.357-7.5-7.5-7.5m228.355 453.863c-36.728-18.363-67.156-48.534-85.854-85.081v-73.211c0-1.989-.79-3.896-2.196-5.304l-105-105-10.607 10.607 102.804 102.803v71.894c0 1.164.271 2.313.792 3.354 20.066 40.133 53.221 73.287 93.354 93.354a7.502 7.502 0 1 0 6.707-13.416"/><path d="M439.356 497.793c-36.727-18.363-67.155-48.534-85.854-85.081v-88.211a7.5 7.5 0 0 0-1.267-4.17l-63.522-94.961-12.467 8.34 62.256 93.068v87.723c0 1.164.271 2.313.792 3.354 20.067 40.134 53.221 73.287 93.354 93.354a7.502 7.502 0 0 0 6.708-13.416M420.667 4.146A7.5 7.5 0 0 0 410.604.792c-31.179 15.589-55.838 40.188-71.312 71.135a7.5 7.5 0 0 0-.792 3.354v59.684l-57.804 57.803 10.607 10.607 60-60a7.5 7.5 0 0 0 2.196-5.304V77.076c14.054-27.29 36.085-49.003 63.813-62.867a7.5 7.5 0 0 0 3.355-10.063M27.647 461.364c36.728-18.363 67.156-48.534 85.854-85.081v-73.211c0-1.989.79-3.896 2.196-5.304l105-105 10.607 10.607-102.803 102.803v71.894a7.5 7.5 0 0 1-.792 3.354c-20.066 40.133-53.221 73.287-93.354 93.354a7.502 7.502 0 0 1-6.708-13.416"/><path d="M72.647 497.793c36.727-18.363 67.155-48.534 85.854-85.081v-88.211a7.5 7.5 0 0 1 1.267-4.17l63.522-94.961 12.467 8.34-62.256 93.068v87.723a7.5 7.5 0 0 1-.792 3.354c-20.067 40.134-53.221 73.287-93.354 93.354a7.502 7.502 0 0 1-6.708-13.416M91.335 4.146A7.5 7.5 0 0 1 101.398.792c31.179 15.589 55.838 40.188 71.312 71.135a7.5 7.5 0 0 1 .792 3.354v59.684l57.804 57.803-10.607 10.607-60-60a7.5 7.5 0 0 1-2.196-5.304V77.076c-14.054-27.29-36.085-49.003-63.813-62.867a7.5 7.5 0 0 1-3.355-10.063"/></g><path d="m285.897 124.489-29.896-23.917-7.5 75 24.738-15c11.19 0 20.262-9.071 20.262-20.261a20.26 20.26 0 0 0-7.604-15.822" fill="#7d3214"/><path d="M263.501 140.31c0-6.155-.56-11.977-1.521-15.822l-5.979-23.917-29.896 23.917a20.26 20.26 0 0 0-7.604 15.822c0 11.19 9.072 20.262 20.262 20.262l9.738 15 10.948-15c2.238 0 4.052-9.071 4.052-20.262" fill="#963e1c"/><path d="M30.001 183.072c-12.426 0-22.5 10.074-22.5 22.5s10.074 22.5 22.5 22.5h100.327c8.756 0 17.485-.958 26.032-2.857l54.641-12.143 30-30z" fill="#b6f1fb"/><path d="M482.001 183.072h-30v45h30c12.426 0 22.5-10.073 22.5-22.5s-10.074-22.5-22.5-22.5" fill="#6ee2f6"/><path d="M474.501 205.572c0-12.426-10.074-22.5-22.5-22.5h-196l45 30 54.641 12.143a120 120 0 0 0 26.032 2.857h70.327c12.426 0 22.5-10.074 22.5-22.5" fill="#b6f1fb"/><path d="M278.501 369.501v22.5c0 12.43-10.07 22.5-22.5 22.5s-22.5-10.07-22.5-22.5v-22.5l22.5-15z" fill="#ff9a42"/><path d="M278.501 339.501v30h-45v-30l22.5-15z" fill="#ffd185"/><path d="M278.501 309.501v30h-45v-30l22.5-15z" fill="#ff9a42"/><path d="M233.501 259.451h45v50.05h-45z" fill="#ffd185"/><path d="M278.501 160.572h-30l6.903 118.925c25.126.326 45.597-19.944 45.597-44.996v-51.429c0-12.426-10.074-22.5-22.5-22.5" fill="#963e1c"/><path d="M271.001 234.501v-51.429c0-12.426-10.074-22.5-22.5-22.5h-15c-12.426 0-22.5 10.074-22.5 22.5v50.758c0 24.731 19.673 45.346 44.403 45.667 8.595.326 15.597-19.945 15.597-44.996" fill="#c24623"/></svg>

After

Width:  |  Height:  |  Size: 3 KiB