474 lines
16 KiB
Cheetah
474 lines
16 KiB
Cheetah
{{define "booking.tmpl"}}
|
|
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Book a Service - Decor By Hannahs</title>
|
|
<link rel="stylesheet" href="/static/css/styles.css">
|
|
<script>
|
|
(function() {
|
|
const savedTheme = localStorage.getItem('theme') || 'light';
|
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
|
})();
|
|
</script>
|
|
<script src="/static/js/alpine.js" defer></script>
|
|
<script src="/static/htmx/htmx.min.js" defer></script>
|
|
<script src="/static/js/drawer.js" defer></script>
|
|
<style>
|
|
.step-indicator {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
.step {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
.step-circle {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
background: hsl(var(--muted));
|
|
color: hsl(var(--muted-foreground));
|
|
transition: all 0.3s;
|
|
}
|
|
.step-circle.active {
|
|
background: hsl(var(--primary));
|
|
color: hsl(var(--primary-foreground));
|
|
}
|
|
.step-circle.completed {
|
|
background: hsl(var(--primary));
|
|
color: hsl(var(--primary-foreground));
|
|
}
|
|
.step-line {
|
|
width: 3rem;
|
|
height: 2px;
|
|
background: hsl(var(--muted));
|
|
}
|
|
.step-line.completed {
|
|
background: hsl(var(--primary));
|
|
}
|
|
.option-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
.option-card {
|
|
position: relative;
|
|
cursor: pointer;
|
|
border: 2px solid hsl(var(--border));
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
transition: all 0.3s;
|
|
background: hsl(var(--card));
|
|
}
|
|
.option-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
|
}
|
|
.option-card.selected {
|
|
border-color: hsl(var(--primary));
|
|
box-shadow: 0 0 0 3px hsla(var(--primary), 0.2);
|
|
}
|
|
.option-card img {
|
|
width: 100%;
|
|
height: 200px;
|
|
object-fit: cover;
|
|
}
|
|
.option-card-content {
|
|
padding: 1rem;
|
|
text-align: center;
|
|
}
|
|
.option-card-title {
|
|
font-weight: 600;
|
|
font-size: 1.125rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
.option-checkbox {
|
|
position: absolute;
|
|
top: 0.75rem;
|
|
right: 0.75rem;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
border-radius: 0.25rem;
|
|
background: white;
|
|
border: 2px solid hsl(var(--border));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s;
|
|
}
|
|
.option-card.selected .option-checkbox {
|
|
background: hsl(var(--primary));
|
|
border-color: hsl(var(--primary));
|
|
}
|
|
.option-checkbox svg {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
color: white;
|
|
display: none;
|
|
}
|
|
.option-card.selected .option-checkbox svg {
|
|
display: block;
|
|
}
|
|
[data-theme="dark"] .option-card.selected .option-checkbox svg {
|
|
color: #22c55e;
|
|
}
|
|
.step-content {
|
|
display: none;
|
|
}
|
|
.step-content.active {
|
|
display: block;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
{{template "header" .}}
|
|
|
|
<main>
|
|
<div style="max-width: 1200px; margin: 0 auto;">
|
|
<div style="margin-bottom: 2rem; position: relative;">
|
|
<img src="/assets/party-icons/birthday-cake.png" alt="Birthday cake" style="position: absolute; top: -20px; right: -40px; width: 90px; height: 90px; opacity: 0.85;">
|
|
<h1 style="font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem;">Book a Service</h1>
|
|
<p style="color: hsl(var(--muted-foreground)); font-size: 1.125rem;">Select your options and complete your booking</p>
|
|
</div>
|
|
|
|
<div class="step-indicator">
|
|
<div class="step">
|
|
<div class="step-circle active" id="step-circle-1">1</div>
|
|
<span style="font-weight: 500;">Service Options</span>
|
|
</div>
|
|
<div class="step-line" id="step-line-1"></div>
|
|
<div class="step">
|
|
<div class="step-circle" id="step-circle-2">2</div>
|
|
<span style="font-weight: 500;">Event Type</span>
|
|
</div>
|
|
<div class="step-line" id="step-line-2"></div>
|
|
<div class="step">
|
|
<div class="step-circle" id="step-circle-3">3</div>
|
|
<span style="font-weight: 500;">Details</span>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="bookingForm">
|
|
<div class="step-content active" id="step-1">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<h2 style="font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem;">Select Service Options</h2>
|
|
<p style="color: hsl(var(--muted-foreground)); margin-bottom: 1.5rem;">Choose one or more decoration options for your event</p>
|
|
<div class="option-grid">
|
|
<div class="option-card" data-option="Balloons" onclick="toggleOption(this)">
|
|
<img src="/assets/options-photos/balloons.jpg" alt="Balloons">
|
|
<div class="option-checkbox">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
|
</div>
|
|
<div class="option-card-content">
|
|
<div class="option-card-title">Balloons</div>
|
|
</div>
|
|
</div>
|
|
<div class="option-card" data-option="Centrepiece" onclick="toggleOption(this)">
|
|
<img src="/assets/options-photos/centrepiece.jpg" alt="Centrepiece">
|
|
<div class="option-checkbox">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
|
</div>
|
|
<div class="option-card-content">
|
|
<div class="option-card-title">Centrepiece</div>
|
|
</div>
|
|
</div>
|
|
<div class="option-card" data-option="Signs & Streamers" onclick="toggleOption(this)">
|
|
<img src="/assets/options-photos/Signs-Streamers.jpg" alt="Signs & Streamers">
|
|
<div class="option-checkbox">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
|
</div>
|
|
<div class="option-card-content">
|
|
<div class="option-card-title">Signs & Streamers</div>
|
|
</div>
|
|
</div>
|
|
<div class="option-card" data-option="Table Decorations" onclick="toggleOption(this)">
|
|
<img src="/assets/options-photos/table-decorations.jpeg" alt="Table Decorations">
|
|
<div class="option-checkbox">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
|
</div>
|
|
<div class="option-card-content">
|
|
<div class="option-card-title">Table Decorations</div>
|
|
</div>
|
|
</div>
|
|
<div class="option-card" data-option="Custom Plaque" onclick="toggleOption(this)">
|
|
<img src="/assets/options-photos/custom-plaque.jpg" alt="Custom Plaque">
|
|
<div class="option-checkbox">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
|
</div>
|
|
<div class="option-card-content">
|
|
<div class="option-card-title">Custom Plaque</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
|
|
<button type="button" class="btn btn-primary" onclick="nextStep(1)">Next</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step-content" id="step-2">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<h2 style="font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem;">Select Event Type</h2>
|
|
<p style="color: hsl(var(--muted-foreground)); margin-bottom: 1.5rem;">What type of event are you planning?</p>
|
|
<div class="option-grid">
|
|
<div class="option-card" data-event="Birthday" onclick="selectEventType(this)">
|
|
<img src="/assets/event-type-photos/birthday-party.jpg" alt="Birthday">
|
|
<div class="option-checkbox">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
|
</div>
|
|
<div class="option-card-content">
|
|
<div class="option-card-title">Birthday</div>
|
|
</div>
|
|
</div>
|
|
<div class="option-card" data-event="Wedding" onclick="selectEventType(this)">
|
|
<img src="/assets/event-type-photos/weddings.jpg" alt="Wedding">
|
|
<div class="option-checkbox">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
|
</div>
|
|
<div class="option-card-content">
|
|
<div class="option-card-title">Wedding</div>
|
|
</div>
|
|
</div>
|
|
<div class="option-card" data-event="Anniversary" onclick="selectEventType(this)">
|
|
<img src="/assets/event-type-photos/anniversary.jpg" alt="Anniversary">
|
|
<div class="option-checkbox">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
|
</div>
|
|
<div class="option-card-content">
|
|
<div class="option-card-title">Anniversary</div>
|
|
</div>
|
|
</div>
|
|
<div class="option-card" data-event="Graduation" onclick="selectEventType(this)">
|
|
<img src="/assets/event-type-photos/graduation.jpg" alt="Graduation">
|
|
<div class="option-checkbox">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
|
|
</div>
|
|
<div class="option-card-content">
|
|
<div class="option-card-title">Graduation</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; gap: 0.5rem; justify-content: space-between;">
|
|
<button type="button" class="btn btn-outline" onclick="prevStep(2)">Back</button>
|
|
<button type="button" class="btn btn-primary" onclick="nextStep(2)">Next</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step-content" id="step-3">
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<h2 style="font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem;">Event Details</h2>
|
|
<p style="color: hsl(var(--muted-foreground)); margin-bottom: 1.5rem;">Provide information about your event</p>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="event_date">Event Date & Time</label>
|
|
<input class="form-input" type="datetime-local" id="event_date" name="event_date" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="address">Address <span style="color: hsl(var(--destructive));">*</span></label>
|
|
<input class="form-input" type="text" id="address" name="address" placeholder="123 Main St, Sydney NSW 2000" required>
|
|
<small style="color: hsl(var(--muted-foreground)); font-size: 0.875rem;">Please include street, suburb, state, and postcode</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="notes">Additional Notes</label>
|
|
<textarea class="form-textarea" id="notes" name="notes" placeholder="Any special requests or details..."></textarea>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 0.5rem; justify-content: space-between;">
|
|
<button type="button" class="btn btn-outline" onclick="prevStep(3)">Back</button>
|
|
<button type="submit" class="btn btn-primary">Request Booking</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
|
|
{{template "footer"}}
|
|
{{template "theme-script"}}
|
|
<script>
|
|
let currentStep = 1;
|
|
let selectedOptions = new Set();
|
|
let selectedEventType = '';
|
|
|
|
function toggleOption(card) {
|
|
const option = card.dataset.option;
|
|
if (selectedOptions.has(option)) {
|
|
selectedOptions.delete(option);
|
|
card.classList.remove('selected');
|
|
} else {
|
|
selectedOptions.add(option);
|
|
card.classList.add('selected');
|
|
}
|
|
}
|
|
|
|
function selectEventType(card) {
|
|
document.querySelectorAll('[data-event]').forEach(c => c.classList.remove('selected'));
|
|
card.classList.add('selected');
|
|
selectedEventType = card.dataset.event;
|
|
}
|
|
|
|
function updateStepIndicator() {
|
|
for (let i = 1; i <= 3; i++) {
|
|
const circle = document.getElementById(`step-circle-${i}`);
|
|
const line = document.getElementById(`step-line-${i}`);
|
|
|
|
if (i < currentStep) {
|
|
circle.classList.add('completed');
|
|
circle.classList.remove('active');
|
|
if (line) line.classList.add('completed');
|
|
} else if (i === currentStep) {
|
|
circle.classList.add('active');
|
|
circle.classList.remove('completed');
|
|
} else {
|
|
circle.classList.remove('active', 'completed');
|
|
if (line) line.classList.remove('completed');
|
|
}
|
|
}
|
|
}
|
|
|
|
function nextStep(step) {
|
|
if (step === 1) {
|
|
if (selectedOptions.size === 0) {
|
|
alert('Please select at least one service option');
|
|
return;
|
|
}
|
|
} else if (step === 2) {
|
|
if (!selectedEventType) {
|
|
alert('Please select an event type');
|
|
return;
|
|
}
|
|
}
|
|
|
|
document.getElementById(`step-${step}`).classList.remove('active');
|
|
currentStep = step + 1;
|
|
document.getElementById(`step-${currentStep}`).classList.add('active');
|
|
updateStepIndicator();
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
}
|
|
|
|
function prevStep(step) {
|
|
document.getElementById(`step-${step}`).classList.remove('active');
|
|
currentStep = step - 1;
|
|
document.getElementById(`step-${currentStep}`).classList.add('active');
|
|
updateStepIndicator();
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
}
|
|
|
|
function validateAustralianAddress(address) {
|
|
if (!address || address.trim().length < 10) {
|
|
return { valid: false, message: 'Address is too short. Please provide a complete address.' };
|
|
}
|
|
|
|
const australianStates = ['NSW', 'VIC', 'QLD', 'SA', 'WA', 'TAS', 'NT', 'ACT'];
|
|
const hasState = australianStates.some(state =>
|
|
address.toUpperCase().includes(state) ||
|
|
address.toUpperCase().includes(state.toLowerCase())
|
|
);
|
|
|
|
const postcodePattern = /\b\d{4}\b/;
|
|
const hasPostcode = postcodePattern.test(address);
|
|
|
|
if (!hasState && !hasPostcode) {
|
|
return {
|
|
valid: false,
|
|
message: 'Please include an Australian state (NSW, VIC, QLD, etc.) and postcode in your address.'
|
|
};
|
|
}
|
|
|
|
if (!hasState) {
|
|
return {
|
|
valid: false,
|
|
message: 'Please include an Australian state (NSW, VIC, QLD, SA, WA, TAS, NT, or ACT) in your address.'
|
|
};
|
|
}
|
|
|
|
if (!hasPostcode) {
|
|
return {
|
|
valid: false,
|
|
message: 'Please include a 4-digit postcode in your address.'
|
|
};
|
|
}
|
|
|
|
return { valid: true };
|
|
}
|
|
|
|
document.getElementById('bookingForm').addEventListener('submit', async function(e){
|
|
e.preventDefault();
|
|
const f = e.target;
|
|
const submitBtn = f.querySelector('button[type="submit"]');
|
|
const originalText = submitBtn.textContent;
|
|
|
|
const addressValidation = validateAustralianAddress(f.address.value);
|
|
if (!addressValidation.valid) {
|
|
alert(addressValidation.message);
|
|
return;
|
|
}
|
|
|
|
submitBtn.disabled = true;
|
|
submitBtn.textContent = 'Submitting...';
|
|
|
|
const serviceOptionsArray = Array.from(selectedOptions);
|
|
|
|
const body = {
|
|
user_id: "",
|
|
service_option: serviceOptionsArray.join(', '),
|
|
event_type: selectedEventType,
|
|
event_date: new Date(f.event_date.value).toISOString(),
|
|
address: f.address.value,
|
|
notes: f.notes.value
|
|
};
|
|
|
|
try {
|
|
const res = await fetch('/api/bookings', {
|
|
method: 'POST',
|
|
headers: {'Content-Type':'application/json'},
|
|
body: JSON.stringify(body)
|
|
});
|
|
|
|
if (res.ok) {
|
|
alert('Booking requested successfully! We will contact you soon.');
|
|
f.reset();
|
|
selectedOptions.clear();
|
|
selectedEventType = '';
|
|
currentStep = 1;
|
|
document.querySelectorAll('.step-content').forEach(s => s.classList.remove('active'));
|
|
document.getElementById('step-1').classList.add('active');
|
|
document.querySelectorAll('.option-card').forEach(c => c.classList.remove('selected'));
|
|
updateStepIndicator();
|
|
} else {
|
|
const error = await res.text();
|
|
alert('Error creating booking: ' + error);
|
|
}
|
|
} catch (err) {
|
|
alert('Network error. Please try again.');
|
|
} finally {
|
|
submitBtn.disabled = false;
|
|
submitBtn.textContent = originalText;
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
{{end}}
|