Gleipnir/nidus-sync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Port root RMO with style to main page

Browse source
This commit is contained in:
Eli Ribble 2026-04-03 15:58:50 +00:00
parent 4d718f9a12
commit 4a9d6e0db6
No known key found for this signature in database
4 changed files with 142 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

113
ts/rmo/view/Home.vue
View file

@ -1,3 +1,114 @@
<style scoped>
.bi-large {
height: 48px;
width: 48px;
}
</style>
<template>
<p>hey there!</p>
<!-- Main Content -->
<main>
<template v-if="district">
<!-- 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 a Mosquito Problem</h2>
<p class="lead text-center">
Submit a report to help reduce mosquito activity in your
neighborhood.
</p>
<p class="lead text-center">
Report Mosquitoes Online works with local mosquito control
agencies to receive public reports.
</p>
<p class="lead text-center">
For this area, mosquito control services are provided by
</p>
<h3 class="text-center">{{ district.name }}</h3>
<img class="district-logo" src="{{ district.url_logo }}" />
</div>
</div>
</div>
</section>
</template>
<template v-else>
<!-- Introduction Section -->
<section class="py-2 bg-primary text-white">
<div class="banner-container d-flex justify-content-center">
<img class="banner" src="/static/img/rmo/banner.jpg" />
</div>
</section>
</template>
<!-- Services Section -->
<section class="py-5">
<div class="container">
<h3 class="text-center mb-4">How Can We Help You Today?</h3>
<div class="row g-4">
<div class="col-md-4">
<div class="card service-card h-100">
<div class="card-body text-center">
<div class="mb-3">
<i class="bi bi-large bi-mosquito-color"></i>
</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>
<RouteLink to="/nuisance" class="btn btn-primary mt-3"
>Report Problem</RouteLink
>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card service-card h-100">
<div class="card-body text-center">
<div class="mb-3">
<i class="bi bi-large bi-pond-color"></i>
</div>
<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>
<RouteLink to="/water" class="btn btn-primary mt-3"
>Report Source</RouteLink
>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card service-card h-100">
<div class="card-body text-center">
<div class="mb-3">
<i class="bi bi-large bi-check-report-color"></i>
</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>
<RouteLink to="/status" class="btn btn-primary mt-3"
>Get Status</RouteLink
>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</template>
<script setup lang="ts">
import { ref } from "vue";
interface District {
name: string;
url_logo: string;
}
const district = ref<District | null>(null);
</script>