2025-11-05 21:57:59 +00:00
{{template "base.html" .}}
{{define "title"}}Login{{end}}
2025-12-11 00:30:24 +00:00
{{define "extraheader"}}
< style >
2025-11-05 21:57:59 +00:00
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;
}
.progress-container {
margin: 30px 0 20px;
}
.progress {
height: 8px;
}
.calendar-section {
margin-bottom: 30px;
}
.dates-container {
display: flex;
overflow-x: auto;
gap: 10px;
padding-bottom: 10px;
margin-bottom: 20px;
}
.date-card {
min-width: 110px;
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 10px;
text-align: center;
cursor: pointer;
transition: all 0.2s;
}
.date-card:hover {
border-color: #0d6efd;
background-color: #f8f9fa;
}
.date-card.selected {
border-color: #0d6efd;
background-color: #e6f2ff;
box-shadow: 0 0 0 1px #0d6efd;
}
.date-card .month {
font-size: 0.8rem;
text-transform: uppercase;
color: #6c757d;
font-weight: 600;
}
.date-card .day {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.2;
}
.date-card .weekday {
font-size: 0.8rem;
color: #6c757d;
}
.time-slots {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
margin-bottom: 20px;
}
.time-slot {
border: 1px solid #dee2e6;
border-radius: 6px;
padding: 10px;
text-align: center;
cursor: pointer;
transition: all 0.2s;
}
.time-slot:hover {
border-color: #0d6efd;
background-color: #f8f9fa;
}
.time-slot.selected {
border-color: #0d6efd;
background-color: #e6f2ff;
box-shadow: 0 0 0 1px #0d6efd;
}
.time-slot.unavailable {
background-color: #f8f9fa;
color: #adb5bd;
cursor: not-allowed;
text-decoration: line-through;
}
.form-section {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #dee2e6;
}
.section-title {
margin-bottom: 20px;
display: flex;
align-items: center;
}
.section-title i {
margin-right: 10px;
color: #0d6efd;
}
.selected-date-time {
background-color: #e8f4f8;
border-left: 4px solid #0d6efd;
padding: 15px;
border-radius: 5px;
margin-bottom: 20px;
}
2025-12-11 00:30:24 +00:00
< / style >
2025-11-05 21:57:59 +00:00
{{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" > Schedule Follow-up< / span >
< span class = "text-muted small" > 4 of 4< / span >
< / div >
< div class = "progress" >
< div class = "progress-bar" role = "progressbar" style = "width: 100%" aria-valuenow = "100" aria-valuemin = "0" aria-valuemax = "100" > < / div >
< / div >
< / div >
<!-- Main Content -->
< div class = "content-card" >
< h1 class = "h4 mb-3" > Schedule a Follow-up Inspection< / h1 >
< p > Please select a convenient date and time for our inspector to visit your property.< / p >
<!-- Calendar Section -->
< div class = "calendar-section" >
< div class = "section-title" >
< i class = "bi bi-calendar-date" > < / i >
< h5 class = "mb-0" > Select Date< / h5 >
< / div >
<!-- Date Selection -->
< div class = "dates-container" >
< div class = "date-card" >
< div class = "month" > Jun< / div >
< div class = "day" > 20< / div >
< div class = "weekday" > Tue< / div >
< / div >
< div class = "date-card" >
< div class = "month" > Jun< / div >
< div class = "day" > 21< / div >
< div class = "weekday" > Wed< / div >
< / div >
< div class = "date-card selected" >
< div class = "month" > Jun< / div >
< div class = "day" > 22< / div >
< div class = "weekday" > Thu< / div >
< / div >
< div class = "date-card" >
< div class = "month" > Jun< / div >
< div class = "day" > 23< / div >
< div class = "weekday" > Fri< / div >
< / div >
< div class = "date-card" >
< div class = "month" > Jun< / div >
< div class = "day" > 26< / div >
< div class = "weekday" > Mon< / div >
< / div >
< div class = "date-card" >
< div class = "month" > Jun< / div >
< div class = "day" > 27< / div >
< div class = "weekday" > Tue< / div >
< / div >
< div class = "date-card" >
< div class = "month" > Jun< / div >
< div class = "day" > 28< / div >
< div class = "weekday" > Wed< / div >
< / div >
< div class = "date-card" >
< div class = "month" > Jun< / div >
< div class = "day" > 29< / div >
< div class = "weekday" > Thu< / div >
< / div >
< div class = "date-card" >
< div class = "month" > Jun< / div >
< div class = "day" > 30< / div >
< div class = "weekday" > Fri< / div >
< / div >
< div class = "date-card" >
< div class = "month" > Jul< / div >
< div class = "day" > 03< / div >
< div class = "weekday" > Mon< / div >
< / div >
< / div >
<!-- Time Slot Selection -->
< div class = "section-title" >
< i class = "bi bi-clock" > < / i >
< h5 class = "mb-0" > Select Time< / h5 >
< / div >
< div class = "time-slots" >
< div class = "time-slot unavailable" >
8:00 AM
< / div >
< div class = "time-slot unavailable" >
9:00 AM
< / div >
< div class = "time-slot selected" >
10:00 AM
< / div >
< div class = "time-slot" >
11:00 AM
< / div >
< div class = "time-slot" >
1:00 PM
< / div >
< div class = "time-slot" >
2:00 PM
< / div >
< div class = "time-slot" >
3:00 PM
< / div >
< div class = "time-slot" >
4:00 PM
< / div >
< / div >
<!-- Selected Date & Time Summary -->
< div class = "selected-date-time" >
< div class = "d-flex justify-content-between align-items-center" >
< strong > Selected Appointment:< / strong >
< span > Thursday, June 22, 2023 at 10:00 AM< / span >
< / div >
< / div >
< / div >
<!-- Contact Information Form -->
< div class = "form-section" >
< div class = "section-title" >
< i class = "bi bi-person-lines-fill" > < / i >
< h5 class = "mb-0" > Contact Information< / h5 >
< / div >
< form >
< div class = "row g-3" >
< div class = "col-md-6" >
< label for = "fullName" class = "form-label" > Full Name< / label >
< input type = "text" class = "form-control" id = "fullName" required >
< / div >
< div class = "col-md-6" >
< label for = "phone" class = "form-label" > Phone Number< / label >
< input type = "tel" class = "form-control" id = "phone" placeholder = "(555) 555-5555" required >
< / div >
< div class = "col-12" >
< label for = "email" class = "form-label" > Email Address< / label >
< input type = "email" class = "form-control" id = "email" required >
< / div >
< div class = "col-12" >
< label for = "notes" class = "form-label" > Additional Notes (Optional)< / label >
< textarea class = "form-control" id = "notes" rows = "3" placeholder = "Any special instructions or information for the inspector" > < / textarea >
< / div >
< div class = "col-12" >
< div class = "form-check" >
< input class = "form-check-input" type = "checkbox" id = "reminders" checked >
< label class = "form-check-label" for = "reminders" >
Send me text reminders about my appointment
< / label >
< / div >
< / div >
< / div >
<!-- Information -->
< div class = "alert alert-secondary mt-4" >
< small > Our inspector will need access to view your pool area. If you won't be home during the appointment, please provide access instructions in the notes.< / small >
< / div >
<!-- Action Buttons -->
< div class = "d-flex justify-content-between mt-4" >
2025-12-11 00:30:24 +00:00
< a href = "{{ .URLs.ReportContribute }}" class = "btn btn-outline-secondary" >
2025-11-05 21:57:59 +00:00
< i class = "bi bi-arrow-left me-2" > < / i > Back
2025-12-11 00:30:24 +00:00
< / a >
< a href = "{{ .URLs.ReportConfirmation }}" class = "btn btn-success" >
2025-11-05 21:57:59 +00:00
< i class = "bi bi-calendar-check me-2" > < / i > Confirm Appointment
< / a >
< / div >
< / form >
< / 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}}
