feat: added a side bar
This commit is contained in:
Mann Patel
273
app/internal/templates/poll_form.html
Normal file
273
app/internal/templates/poll_form.html
Normal file
@@ -0,0 +1,273 @@
|
||||
{{ define "content" }}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Campaign Management System - Poll Response</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
body,
|
||||
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="{{.PollID}}" />
|
||||
|
||||
<!-- Postal Code -->
|
||||
<div>
|
||||
<label
|
||||
class="block text-sm font-medium text-gray-700 mb-2"
|
||||
>
|
||||
Postal Code *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="postal_code"
|
||||
placeholder="T2P1J9 (no space)"
|
||||
class="professional-input w-full px-3 py-2 border border-gray-300 bg-white text-gray-900 placeholder-gray-500 transition-all uppercase"
|
||||
maxlength="6"
|
||||
required
|
||||
oninput="this.value = this.value.toUpperCase().replace(/\s+/g, '')"
|
||||
/>
|
||||
</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">
|
||||
<label
|
||||
class="block text-sm font-medium text-gray-700 mb-2"
|
||||
>
|
||||
Donation Amount
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
name="question6_amount"
|
||||
placeholder="Enter Donation Amount ($)"
|
||||
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>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// Toggle button functionality
|
||||
const toggleButtons = document.querySelectorAll(".toggle-button");
|
||||
toggleButtons.forEach((button) => {
|
||||
button.addEventListener("click", function () {
|
||||
const name = this.getAttribute("data-name"); // input name
|
||||
const value = this.getAttribute("data-value");
|
||||
|
||||
// Find hidden input
|
||||
const hiddenInput = document.querySelector(`input[name="${name}"]`);
|
||||
if (!hiddenInput) return;
|
||||
|
||||
// Reset sibling buttons
|
||||
const siblingButtons = document.querySelectorAll(
|
||||
`.toggle-button[data-name="${name}"]`
|
||||
);
|
||||
siblingButtons.forEach((btn) => btn.classList.remove("active"));
|
||||
|
||||
// Mark this as active
|
||||
this.classList.add("active");
|
||||
|
||||
// Set hidden input value
|
||||
hiddenInput.value = value;
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
{{ end }}
|
||||
Reference in New Issue
Block a user