update
This commit is contained in:
Mann Patel
@@ -29,9 +29,7 @@
|
|||||||
>
|
>
|
||||||
<th class="px-6 py-3 whitespace-nowrap">Poll</th>
|
<th class="px-6 py-3 whitespace-nowrap">Poll</th>
|
||||||
<th class="px-6 py-3 whitespace-nowrap">Address</th>
|
<th class="px-6 py-3 whitespace-nowrap">Address</th>
|
||||||
<th class="px-6 py-3 whitespace-nowrap">Coordinates</th>
|
<th class="px-6 py-3 whitespace-nowrap">Appointment</th>
|
||||||
<th class="px-6 py-3 whitespace-nowrap">Appointment Date</th>
|
|
||||||
<th class="px-6 py-3 whitespace-nowrap">Appointment Time</th>
|
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody class="divide-y divide-gray-200">
|
<tbody class="divide-y divide-gray-200">
|
||||||
@@ -49,21 +47,18 @@
|
|||||||
</a>
|
</a>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</td>
|
</td>
|
||||||
<td class="px-6 py-3 whitespace-nowrap">{{ .Address }}</td>
|
|
||||||
<td class="px-6 py-3 whitespace-nowrap">
|
<td class="px-6 py-3 whitespace-nowrap">
|
||||||
<a
|
<a
|
||||||
href="https://www.google.com/maps/search/?api=1&query={{ .Latitude }},{{ .Longitude }}"
|
href="https://www.google.com/maps/search/?api=1&query={{ .Latitude }},{{ .Longitude }}"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
class="text-blue-600 hover:underline"
|
class="text-blue-600 hover:underline"
|
||||||
>
|
>
|
||||||
({{ .Latitude }}, {{ .Longitude }})
|
{{ .Address }}
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
<td class="px-6 py-3 whitespace-nowrap">
|
<td class="px-6 py-3 whitespace-nowrap">
|
||||||
{{ .AppointmentDate.Format "2006-01-02" }}
|
({{ .AppointmentDate.Format "2006-01-02" }} @ {{
|
||||||
</td>
|
.AppointmentTime.Format "15:04" }})
|
||||||
<td class="px-6 py-3 whitespace-nowrap">
|
|
||||||
{{ .AppointmentTime.Format "15:04" }}
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
{{ else }}
|
{{ else }}
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
<div class="flex-1 overflow-hidden bg-gray-50">
|
<div class="flex-1 overflow-hidden bg-gray-50">
|
||||||
<div class="h-screen flex flex-col lg:flex-row gap-6 p-4 sm:p-6">
|
<div class="h-screen flex flex-col lg:flex-row gap-6 p-4 sm:p-6">
|
||||||
<!-- Left Column - Posts -->
|
<!-- Left Column - Posts -->
|
||||||
<div class="flex-1 lg:flex-none lg:w-1/3 overflow-y-auto pr-2">
|
<div class="flex-1 lg:flex-none lg:w-1/2 overflow-y-auto pr-2">
|
||||||
{{ if .Posts }}{{range .Posts}}
|
{{ if .Posts }}{{range .Posts}}
|
||||||
<!-- Posts Feed -->
|
<!-- Posts Feed -->
|
||||||
<article class="bg-white border-b border-gray-200">
|
<article class="bg-white border-b border-gray-200">
|
||||||
@@ -84,10 +84,9 @@
|
|||||||
</div>
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Right Column - Statistics -->
|
<!-- Right Column - Statistics -->
|
||||||
<div
|
<div
|
||||||
class="w-full lg:w-1/3 flex flex-col gap-4 sm:gap-6 sticky top-0 self-start h-fit"
|
class="w-full lg:w-1/2 flex flex-col gap-4 sm:gap-6 sticky top-0 self-start h-fit"
|
||||||
>
|
>
|
||||||
<!-- Today's Overview -->
|
<!-- Today's Overview -->
|
||||||
<div class="bg-white border-b border-gray-200">
|
<div class="bg-white border-b border-gray-200">
|
||||||
@@ -199,198 +198,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Signs Summary -->
|
|
||||||
<div class="bg-white border-b border-gray-200">
|
|
||||||
<div class="px-4 sm:px-6 py-4">
|
|
||||||
<h3 class="text-sm font-semibold text-gray-900 mb-4">
|
|
||||||
Signs Requested
|
|
||||||
</h3>
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div
|
|
||||||
class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0"
|
|
||||||
>
|
|
||||||
<i class="fas fa-sign text-gray-600 text-xs"></i>
|
|
||||||
</div>
|
|
||||||
<span class="text-sm text-gray-700">Lawn Signs</span>
|
|
||||||
</div>
|
|
||||||
<span class="text-lg font-semibold text-gray-900">
|
|
||||||
{{ .Statistics.LawnSignsRequested }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div
|
|
||||||
class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0"
|
|
||||||
>
|
|
||||||
<i class="fas fa-flag text-gray-600 text-xs"></i>
|
|
||||||
</div>
|
|
||||||
<span class="text-sm text-gray-700">Banner Signs</span>
|
|
||||||
</div>
|
|
||||||
<span class="text-lg font-semibold text-gray-900">
|
|
||||||
{{ .Statistics.BannerSignsRequested }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Right Column - Statistics -->
|
|
||||||
<div
|
|
||||||
class="w-full lg:w-1/3 flex flex-col gap-4 sm:gap-6 sticky top-0 self-start h-fit"
|
|
||||||
>
|
|
||||||
<!-- Today's Overview -->
|
|
||||||
<div class="bg-white border-b border-gray-200">
|
|
||||||
<div class="px-4 sm:px-6 py-4">
|
|
||||||
<h3 class="text-sm font-semibold text-gray-900 mb-4">
|
|
||||||
Today's Overview
|
|
||||||
</h3>
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div
|
|
||||||
class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0"
|
|
||||||
>
|
|
||||||
<i class="fas fa-calendar-day text-gray-600 text-xs"></i>
|
|
||||||
</div>
|
|
||||||
<span class="text-sm text-gray-700">Appointments Today</span>
|
|
||||||
</div>
|
|
||||||
<span class="text-lg font-semibold text-gray-900">
|
|
||||||
{{ .Statistics.AppointmentsToday }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div
|
|
||||||
class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0"
|
|
||||||
>
|
|
||||||
<i class="fas fa-calendar-week text-gray-600 text-xs"></i>
|
|
||||||
</div>
|
|
||||||
<span class="text-sm text-gray-700"
|
|
||||||
>Appointments Tomorrow</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<span class="text-lg font-semibold text-gray-900">
|
|
||||||
{{ .Statistics.AppointmentsTomorrow }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div
|
|
||||||
class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0"
|
|
||||||
>
|
|
||||||
<i class="fas fa-calendar-week text-gray-600 text-xs"></i>
|
|
||||||
</div>
|
|
||||||
<span class="text-sm text-gray-700">This Week</span>
|
|
||||||
</div>
|
|
||||||
<span class="text-lg font-semibold text-gray-900">
|
|
||||||
{{ .Statistics.AppointmentsThisWeek }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Polling Progress -->
|
|
||||||
<div class="bg-white border-b border-gray-200">
|
|
||||||
<div class="px-4 sm:px-6 py-4">
|
|
||||||
<h3 class="text-sm font-semibold text-gray-900 mb-4">
|
|
||||||
Polling Progress
|
|
||||||
</h3>
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div
|
|
||||||
class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0"
|
|
||||||
>
|
|
||||||
<i class="fas fa-check-circle text-green-600 text-xs"></i>
|
|
||||||
</div>
|
|
||||||
<span class="text-sm text-gray-700">Polls Completed</span>
|
|
||||||
</div>
|
|
||||||
<span class="text-lg font-semibold text-green-600">
|
|
||||||
{{ .Statistics.PollsCompleted }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div
|
|
||||||
class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0"
|
|
||||||
>
|
|
||||||
<i class="fas fa-clock text-orange-600 text-xs"></i>
|
|
||||||
</div>
|
|
||||||
<span class="text-sm text-gray-700">Polls Remaining</span>
|
|
||||||
</div>
|
|
||||||
<span class="text-lg font-semibold text-orange-600">
|
|
||||||
{{ .Statistics.PollsRemaining }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Progress Bar -->
|
|
||||||
{{ if gt .Statistics.TotalAppointments 0 }}
|
|
||||||
<div class="mt-4">
|
|
||||||
<div class="flex justify-between text-xs text-gray-600 mb-2">
|
|
||||||
<span>Progress</span>
|
|
||||||
<span
|
|
||||||
>{{ .Statistics.PollsCompleted }}/{{
|
|
||||||
.Statistics.TotalAppointments }}</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
||||||
<div
|
|
||||||
class="bg-gray-600 h-2 rounded-full transition-all duration-300"
|
|
||||||
style="width: {{ .Statistics.PollCompletionPercent }}%"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{{ end }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Signs Summary -->
|
|
||||||
<div class="bg-white border-b border-gray-200">
|
|
||||||
<div class="px-4 sm:px-6 py-4">
|
|
||||||
<h3 class="text-sm font-semibold text-gray-900 mb-4">
|
|
||||||
Signs Requested
|
|
||||||
</h3>
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div
|
|
||||||
class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0"
|
|
||||||
>
|
|
||||||
<i class="fas fa-sign text-gray-600 text-xs"></i>
|
|
||||||
</div>
|
|
||||||
<span class="text-sm text-gray-700">Lawn Signs</span>
|
|
||||||
</div>
|
|
||||||
<span class="text-lg font-semibold text-gray-900">
|
|
||||||
{{ .Statistics.LawnSignsRequested }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-3">
|
|
||||||
<div
|
|
||||||
class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center flex-shrink-0"
|
|
||||||
>
|
|
||||||
<i class="fas fa-flag text-gray-600 text-xs"></i>
|
|
||||||
</div>
|
|
||||||
<span class="text-sm text-gray-700">Banner Signs</span>
|
|
||||||
</div>
|
|
||||||
<span class="text-lg font-semibold text-gray-900">
|
|
||||||
{{ .Statistics.BannerSignsRequested }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,175 +1,271 @@
|
|||||||
{{ define "content" }}
|
{{ define "content" }}
|
||||||
<div class="flex-1 flex flex-col overflow-hidden">
|
<!DOCTYPE html>
|
||||||
<!-- Form Content -->
|
<html lang="en">
|
||||||
<div class="flex-1 overflow-y-auto bg-gray-50 p-6">
|
<head>
|
||||||
<div class="max-w-2xl mx-auto">
|
<meta charset="UTF-8" />
|
||||||
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<div class="mb-6">
|
<title>Campaign Management System - Poll Response</title>
|
||||||
<h2 class="text-lg font-semibold text-gray-900">
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
Campaign Poll Questions
|
<style>
|
||||||
</h2>
|
body,
|
||||||
<p class="text-sm text-gray-600 mt-1">Address: {{ .Address }}</p>
|
html {
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.toggle-button {
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
.toggle-button:hover {
|
||||||
|
background-color: #f3f4f6;
|
||||||
|
}
|
||||||
|
.toggle-button.active {
|
||||||
|
background-color: #1f2937;
|
||||||
|
color: white;
|
||||||
|
border-color: #1f2937;
|
||||||
|
}
|
||||||
|
.professional-input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #1f2937;
|
||||||
|
box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.1);
|
||||||
|
}
|
||||||
|
.professional-button:hover {
|
||||||
|
background-color: #374151;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-100 font-sans">
|
||||||
|
<div class="h-screen flex flex-col">
|
||||||
|
<!-- Form Content - Scrollable -->
|
||||||
|
<div class="flex-1 overflow-y-auto">
|
||||||
|
<div class="flex">
|
||||||
|
<!-- Main Form Area -->
|
||||||
|
<div class="flex-1 mb-10">
|
||||||
|
<div class="max-w-4xl mx-auto h-full">
|
||||||
|
<div class="bg-white border border-gray-300 h-full flex flex-col">
|
||||||
|
<!-- Form Header -->
|
||||||
|
<div
|
||||||
|
class="bg-gray-50 border-b border-gray-300 px-6 py-4 flex-shrink-0"
|
||||||
|
>
|
||||||
|
<h2 class="text-lg font-semibold text-gray-900">
|
||||||
|
Voter Response Form
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Form Body -->
|
||||||
|
<div class="flex-1 p-6 overflow-y-auto pb-6">
|
||||||
|
<form id="poll-form" method="POST" class="space-y-6">
|
||||||
|
<input type="hidden" name="poll_id" value="12345" />
|
||||||
|
|
||||||
|
<!-- Postal Code -->
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
class="block text-sm font-medium text-gray-700 mb-2"
|
||||||
|
>
|
||||||
|
Respondent Postal Code *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="postal_code"
|
||||||
|
placeholder="T2P 1J9"
|
||||||
|
class="professional-input w-full px-3 py-2 border border-gray-300 bg-white text-gray-900 placeholder-gray-500 transition-all"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Question 1 -->
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
class="block text-sm font-medium text-gray-700 mb-3"
|
||||||
|
>
|
||||||
|
1. Have you voted before?
|
||||||
|
</label>
|
||||||
|
<div class="grid grid-cols-2 gap-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="toggle-button h-12 border-2 border-gray-300 bg-white text-gray-700 font-medium"
|
||||||
|
data-name="question1_voted_before"
|
||||||
|
data-value="true"
|
||||||
|
>
|
||||||
|
YES
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="toggle-button h-12 border-2 border-gray-300 bg-white text-gray-700 font-medium"
|
||||||
|
data-name="question1_voted_before"
|
||||||
|
data-value="false"
|
||||||
|
>
|
||||||
|
NO
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="hidden"
|
||||||
|
name="question1_voted_before"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Question 2 -->
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
class="block text-sm font-medium text-gray-700 mb-3"
|
||||||
|
>
|
||||||
|
2. Will you vote again for this candidate?
|
||||||
|
</label>
|
||||||
|
<div class="grid grid-cols-2 gap-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="toggle-button h-12 border-2 border-gray-300 bg-white text-gray-700 font-medium"
|
||||||
|
data-name="question2_vote_again"
|
||||||
|
data-value="true"
|
||||||
|
>
|
||||||
|
YES
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="toggle-button h-12 border-2 border-gray-300 bg-white text-gray-700 font-medium"
|
||||||
|
data-name="question2_vote_again"
|
||||||
|
data-value="false"
|
||||||
|
>
|
||||||
|
NO
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="hidden"
|
||||||
|
name="question2_vote_again"
|
||||||
|
value=""
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Question 3 -->
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
class="block text-sm font-medium text-gray-700 mb-2"
|
||||||
|
>
|
||||||
|
3. Lawn Signs Required
|
||||||
|
</label>
|
||||||
|
<div class="flex items-center space-x-3">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
name="question3_lawn_signs"
|
||||||
|
min="0"
|
||||||
|
max="10"
|
||||||
|
value="0"
|
||||||
|
class="professional-input w-20 px-3 py-2 border border-gray-300 bg-white text-gray-900 text-center"
|
||||||
|
/>
|
||||||
|
<span class="text-sm text-gray-500"
|
||||||
|
>signs (max 10)</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Question 4 -->
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
class="block text-sm font-medium text-gray-700 mb-2"
|
||||||
|
>
|
||||||
|
4. Banner Signs Required
|
||||||
|
</label>
|
||||||
|
<div class="flex items-center space-x-3">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
name="question4_banner_signs"
|
||||||
|
min="0"
|
||||||
|
max="5"
|
||||||
|
value="0"
|
||||||
|
class="professional-input w-20 px-3 py-2 border border-gray-300 bg-white text-gray-900 text-center"
|
||||||
|
/>
|
||||||
|
<span class="text-sm text-gray-500">signs (max 5)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Question 5 -->
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
class="block text-sm font-medium text-gray-700 mb-2"
|
||||||
|
>
|
||||||
|
5. Additional Comments
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
name="question5_thoughts"
|
||||||
|
rows="4"
|
||||||
|
placeholder="Enter any additional feedback or comments..."
|
||||||
|
class="professional-input w-full px-3 py-2 border border-gray-300 bg-white text-gray-900 placeholder-gray-500 resize-none"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Delivery Section (conditionally shown) -->
|
||||||
|
<div id="delivery-section" class="hidden">
|
||||||
|
<label
|
||||||
|
class="block text-sm font-medium text-gray-700 mb-2"
|
||||||
|
>
|
||||||
|
Delivery Address
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="delivery_address"
|
||||||
|
placeholder="Enter delivery address"
|
||||||
|
class="professional-input w-full px-3 py-2 border border-gray-300 bg-white text-gray-900 placeholder-gray-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Form Footer -->
|
||||||
|
<div
|
||||||
|
class="border-t border-gray-300 bg-gray-50 px-6 py-4 flex-shrink-0"
|
||||||
|
>
|
||||||
|
<div class="flex space-x-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onclick="window.history.back()"
|
||||||
|
class="px-4 py-2 border border-gray-300 bg-white text-gray-700 text-sm font-medium hover:bg-gray-50 transition-all"
|
||||||
|
>
|
||||||
|
CANCEL
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
form="poll-form"
|
||||||
|
class="professional-button px-6 py-2 bg-gray-800 text-white text-sm font-medium hover:bg-gray-700 transition-all"
|
||||||
|
>
|
||||||
|
SUBMIT RESPONSE
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form method="POST" class="space-y-6">
|
|
||||||
<input type="hidden" name="poll_id" value="{{ .PollID }}" />
|
|
||||||
|
|
||||||
<!-- Postal Code -->
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
Respondent's Postal Code
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
name="postal_code"
|
|
||||||
placeholder="Enter postal code (e.g., T2P 1J9)"
|
|
||||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Question 1 -->
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm font-medium text-gray-700 mb-3">
|
|
||||||
1. Have you voted before?
|
|
||||||
</label>
|
|
||||||
<div class="space-y-2">
|
|
||||||
<label class="flex items-center">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name="question1_voted_before"
|
|
||||||
value="true"
|
|
||||||
class="mr-2"
|
|
||||||
/>
|
|
||||||
<span class="text-sm">Yes</span>
|
|
||||||
</label>
|
|
||||||
<label class="flex items-center">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name="question1_voted_before"
|
|
||||||
value="false"
|
|
||||||
class="mr-2"
|
|
||||||
/>
|
|
||||||
<span class="text-sm">No</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Question 2 -->
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm font-medium text-gray-700 mb-3">
|
|
||||||
2. Will you vote again for this candidate?
|
|
||||||
</label>
|
|
||||||
<div class="space-y-2">
|
|
||||||
<label class="flex items-center">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name="question2_vote_again"
|
|
||||||
value="true"
|
|
||||||
class="mr-2"
|
|
||||||
/>
|
|
||||||
<span class="text-sm">Yes</span>
|
|
||||||
</label>
|
|
||||||
<label class="flex items-center">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name="question2_vote_again"
|
|
||||||
value="false"
|
|
||||||
class="mr-2"
|
|
||||||
/>
|
|
||||||
<span class="text-sm">No</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Question 3 -->
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
3. How many lawn signs do you need?
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
name="question3_lawn_signs"
|
|
||||||
min="0"
|
|
||||||
max="10"
|
|
||||||
value="0"
|
|
||||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Question 4 -->
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
4. How many banner signs do you need?
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
name="question4_banner_signs"
|
|
||||||
min="0"
|
|
||||||
max="5"
|
|
||||||
value="0"
|
|
||||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Question 5 -->
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm font-medium text-gray-700 mb-2">
|
|
||||||
5. Write your thoughts (optional)
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
name="question5_thoughts"
|
|
||||||
rows="4"
|
|
||||||
placeholder="Any additional comments or feedback..."
|
|
||||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Submit Button -->
|
|
||||||
<div class="flex justify-end gap-3 pt-6">
|
|
||||||
<a
|
|
||||||
href="/volunteer/Addresses"
|
|
||||||
class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</a>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700"
|
|
||||||
>
|
|
||||||
Submit Poll Response
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Show delivery address section if user needs signs
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
document.addEventListener("DOMContentLoaded", function () {
|
// Toggle button functionality
|
||||||
const lawnSignsInput = document.querySelector(
|
const toggleButtons = document.querySelectorAll(".toggle-button");
|
||||||
'input[name="question3_lawn_signs"]'
|
toggleButtons.forEach((button) => {
|
||||||
);
|
button.addEventListener("click", function () {
|
||||||
const bannerSignsInput = document.querySelector(
|
const name = this.getAttribute("data-name"); // input name
|
||||||
'input[name="question4_banner_signs"]'
|
const value = this.getAttribute("data-value");
|
||||||
);
|
|
||||||
const deliverySection = document.getElementById("delivery-section");
|
|
||||||
|
|
||||||
function toggleDeliverySection() {
|
// Find hidden input
|
||||||
const lawnSigns = parseInt(lawnSignsInput.value) || 0;
|
const hiddenInput = document.querySelector(`input[name="${name}"]`);
|
||||||
const bannerSigns = parseInt(bannerSignsInput.value) || 0;
|
if (!hiddenInput) return;
|
||||||
|
|
||||||
if (lawnSigns > 0 || bannerSigns > 0) {
|
// Reset sibling buttons
|
||||||
deliverySection.style.display = "block";
|
const siblingButtons = document.querySelectorAll(
|
||||||
} else {
|
`.toggle-button[data-name="${name}"]`
|
||||||
deliverySection.style.display = "none";
|
);
|
||||||
}
|
siblingButtons.forEach((btn) => btn.classList.remove("active"));
|
||||||
}
|
|
||||||
|
|
||||||
lawnSignsInput.addEventListener("input", toggleDeliverySection);
|
// Mark this as active
|
||||||
bannerSignsInput.addEventListener("input", toggleDeliverySection);
|
this.classList.add("active");
|
||||||
});
|
|
||||||
</script>
|
// Set hidden input value
|
||||||
|
hiddenInput.value = value;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|||||||
BIN
app/tmp/main
BIN
app/tmp/main
Binary file not shown.
Reference in New Issue
Block a user