Add simple compliance landing page

html/template/rmo/district-compliance.html

@@ -0,0 +1,144 @@
+{{ template "rmo/layout/base.html" . }}
+
+{{ define "title" }}Compliance Request{{ end }}
+{{ define "extraheader" }}
+	<style>
+		body {
+			background-color: #f8f9fa;
+		}
+		.page-container {
+			max-width: 600px;
+			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 {
+			height: 50px;
+			max-width: 200px;
+			margin: 0 auto;
+		}
+		.map-container {
+			height: 300px;
+			background-color: #e9ecef;
+			border-radius: 10px;
+			margin-bottom: 20px;
+			position: relative;
+			overflow: hidden;
+		}
+		.map-placeholder {
+			width: 100%;
+			height: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-direction: column;
+			background-image: url("https://placehold.co/600x300/e9ecef/adb5bd?text=Map+View");
+			background-size: cover;
+			background-position: center;
+		}
+		.map-pin {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -100%);
+			color: #dc3545;
+			font-size: 30px;
+		}
+		.address-container {
+			background-color: #f8f9fa;
+			border-radius: 10px;
+			padding: 15px;
+			margin-bottom: 20px;
+			border-left: 4px solid #0d6efd;
+		}
+		.action-buttons {
+			display: flex;
+			gap: 10px;
+		}
+		.progress-container {
+			margin: 30px 0 20px;
+		}
+		.progress {
+			height: 8px;
+		}
+	</style>
+{{ end }}
+{{ define "content" }}
+	<div class="page-container">
+		<div class="logo-area">
+			<img
+				src="{{ .District.URLLogo }}"
+				alt="{{ .District.Name }} Logo"
+				class="logo"
+			/>
+		</div>
+
+		<div class="progress-container">
+			<div class="d-flex justify-content-between mb-1">
+				<span class="text-muted small">Location</span>
+				<span class="text-muted small">1 of 4</span>
+			</div>
+			<div class="progress">
+				<div
+					class="progress-bar"
+					role="progressbar"
+					style="width: 25%"
+					aria-valuenow="25"
+					aria-valuemin="0"
+					aria-valuemax="100"
+				></div>
+			</div>
+		</div>
+
+		<div class="content-card">
+			<h1 class="h4 mb-4">Confirm Property Location</h1>
+
+			<div class="map-container">
+				<div class="map-placeholder"></div>
+				<div class="map-pin">
+					<i class="bi bi-geo-alt-fill"></i>
+				</div>
+			</div>
+
+			<div class="address-container">
+				<div class="mb-2"><strong>Detected Address:</strong></div>
+				<h5>123 Maple Street, Riverside, CA 92501</h5>
+			</div>
+
+			<div class="mb-4">
+				<p>Is this the correct location of the property in question?</p>
+			</div>
+
+			<div class="action-buttons">
+				<a
+					href="/mock/report/%7bcode%7d/evidence"
+					class="btn btn-success flex-grow-1"
+				>
+					<i class="bi bi-check-circle me-2"></i> Correct
+				</a>
+				<a
+					href="/mock/report/%7bcode%7d/update"
+					class="btn btn-outline-primary flex-grow-1"
+				>
+					<i class="bi bi-geo-alt me-2"></i> Update Location
+				</a>
+			</div>
+		</div>
+
+		<div class="text-center text-muted small">
+			<p>
+				If you need assistance, please contact Vector Control at (555) 123-4567
+			</p>
+		</div>
+	</div>
+{{ end }}