Initial import of HarborSmith website
Some checks failed
build-website / build (push) Failing after 1m2s
Some checks failed
build-website / build (push) Failing after 1m2s
This commit is contained in:
884
website-mockups/maintenance-booking.html
Normal file
884
website-mockups/maintenance-booking.html
Normal file
@@ -0,0 +1,884 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Schedule Maintenance Service - HarborSmith</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;700;900&display=swap" rel="stylesheet">
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
|
||||
<link rel="stylesheet" href="css/voyage-layout.css">
|
||||
<link rel="stylesheet" href="css/themes.css">
|
||||
<link rel="stylesheet" href="css/booking.css">
|
||||
<style>
|
||||
.maintenance-booking-header {
|
||||
background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
|
||||
color: white;
|
||||
padding: 3rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.maintenance-booking-header h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.maintenance-booking-header p {
|
||||
font-size: 1.125rem;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.service-selection-section {
|
||||
background: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.service-selection-section h2 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.service-selection-section h2 svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.service-type-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.service-type-card {
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.service-type-card:hover {
|
||||
border-color: var(--accent-primary);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.service-type-card.selected {
|
||||
background: rgba(30, 58, 95, 0.05);
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.service-type-card.selected::after {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
background: var(--accent-primary);
|
||||
color: white;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.service-type-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-dark) 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.service-type-icon svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.service-type-name {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.service-type-description {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.service-checkboxes {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.service-checkbox {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.service-checkbox:hover {
|
||||
background: rgba(30, 58, 95, 0.03);
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.service-checkbox input[type="checkbox"] {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-top: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.service-checkbox-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.service-checkbox-title {
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.service-checkbox-price {
|
||||
font-size: 0.875rem;
|
||||
color: var(--accent-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.vessel-info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.form-label.required::after {
|
||||
content: ' *';
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-select,
|
||||
.form-textarea {
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
font-family: 'Inter', sans-serif;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.form-input:focus,
|
||||
.form-select:focus,
|
||||
.form-textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-primary);
|
||||
box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
min-height: 120px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.photo-upload {
|
||||
border: 2px dashed var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.photo-upload:hover {
|
||||
border-color: var(--accent-primary);
|
||||
background: rgba(30, 58, 95, 0.03);
|
||||
}
|
||||
|
||||
.photo-upload-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 0 auto 1rem;
|
||||
background: rgba(30, 58, 95, 0.1);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.photo-upload-icon svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.urgency-options {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.urgency-option {
|
||||
padding: 1rem;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.urgency-option:hover {
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.urgency-option.selected {
|
||||
border-color: var(--accent-primary);
|
||||
background: rgba(30, 58, 95, 0.05);
|
||||
}
|
||||
|
||||
.urgency-option.emergency {
|
||||
border-color: #ef4444;
|
||||
}
|
||||
|
||||
.urgency-option.emergency.selected {
|
||||
background: rgba(239, 68, 68, 0.05);
|
||||
border-color: #dc2626;
|
||||
}
|
||||
|
||||
.urgency-label {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.urgency-description {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.schedule-calendar {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.calendar-day {
|
||||
aspect-ratio: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.calendar-day:hover:not(.disabled) {
|
||||
background: rgba(30, 58, 95, 0.05);
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.calendar-day.selected {
|
||||
background: var(--accent-primary);
|
||||
color: white;
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.calendar-day.disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.time-slots {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
||||
gap: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.time-slot {
|
||||
padding: 0.75rem;
|
||||
text-align: center;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.time-slot:hover:not(.unavailable) {
|
||||
border-color: var(--accent-primary);
|
||||
background: rgba(30, 58, 95, 0.05);
|
||||
}
|
||||
|
||||
.time-slot.selected {
|
||||
background: var(--accent-primary);
|
||||
color: white;
|
||||
border-color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.time-slot.unavailable {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
background: linear-gradient(135deg, rgba(30, 58, 95, 0.05) 0%, rgba(30, 58, 95, 0.02) 100%);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.summary-item:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.summary-label {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.summary-value {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.summary-total {
|
||||
font-size: 1.25rem;
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation -->
|
||||
<nav class="voyage-nav visible" id="voyageNav">
|
||||
<div class="nav-container">
|
||||
<div class="nav-brand">
|
||||
<img src="logo.jpg" alt="HarborSmith" class="nav-logo">
|
||||
<span>HarborSmith</span>
|
||||
</div>
|
||||
<div class="nav-links">
|
||||
<a href="index.html" class="nav-link">Home</a>
|
||||
<a href="charter.html" class="nav-link">Charters</a>
|
||||
<a href="maintenance.html" class="nav-link">Maintenance</a>
|
||||
<a href="about.html" class="nav-link">About</a>
|
||||
<a href="contact.html" class="nav-link">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="maintenance-booking-header">
|
||||
<h1>Schedule Your Service</h1>
|
||||
<p>Professional yacht maintenance tailored to your needs</p>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="booking-main">
|
||||
<div class="container">
|
||||
<div class="booking-layout">
|
||||
<!-- Main Content Area -->
|
||||
<div class="booking-content">
|
||||
<!-- Service Type Selection -->
|
||||
<div class="service-selection-section">
|
||||
<h2><i data-lucide="wrench"></i> Select Service Type</h2>
|
||||
<div class="service-type-cards">
|
||||
<div class="service-type-card" data-type="routine">
|
||||
<div class="service-type-icon">
|
||||
<i data-lucide="calendar-check"></i>
|
||||
</div>
|
||||
<div class="service-type-name">Routine Maintenance</div>
|
||||
<div class="service-type-description">
|
||||
Regular scheduled service to keep your yacht in top condition
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-type-card" data-type="repair">
|
||||
<div class="service-type-icon">
|
||||
<i data-lucide="wrench"></i>
|
||||
</div>
|
||||
<div class="service-type-name">Repairs & Fixes</div>
|
||||
<div class="service-type-description">
|
||||
Address specific issues or problems with your vessel
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-type-card" data-type="inspection">
|
||||
<div class="service-type-icon">
|
||||
<i data-lucide="clipboard-check"></i>
|
||||
</div>
|
||||
<div class="service-type-name">Inspection Only</div>
|
||||
<div class="service-type-description">
|
||||
Comprehensive inspection with detailed report
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-type-card" data-type="emergency">
|
||||
<div class="service-type-icon">
|
||||
<i data-lucide="alert-triangle"></i>
|
||||
</div>
|
||||
<div class="service-type-name">Emergency Service</div>
|
||||
<div class="service-type-description">
|
||||
Urgent repairs needed as soon as possible
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Specific Services -->
|
||||
<div class="service-selection-section">
|
||||
<h2><i data-lucide="list-checks"></i> Select Specific Services Needed</h2>
|
||||
<div class="service-checkboxes">
|
||||
<label class="service-checkbox">
|
||||
<input type="checkbox" value="oil-change">
|
||||
<div class="service-checkbox-content">
|
||||
<div class="service-checkbox-title">Oil & Filter Change</div>
|
||||
<div class="service-checkbox-price">From $299</div>
|
||||
</div>
|
||||
</label>
|
||||
<label class="service-checkbox">
|
||||
<input type="checkbox" value="hull-cleaning">
|
||||
<div class="service-checkbox-content">
|
||||
<div class="service-checkbox-title">Hull Cleaning</div>
|
||||
<div class="service-checkbox-price">From $200</div>
|
||||
</div>
|
||||
</label>
|
||||
<label class="service-checkbox">
|
||||
<input type="checkbox" value="engine-service">
|
||||
<div class="service-checkbox-content">
|
||||
<div class="service-checkbox-title">Engine Service</div>
|
||||
<div class="service-checkbox-price">From $450</div>
|
||||
</div>
|
||||
</label>
|
||||
<label class="service-checkbox">
|
||||
<input type="checkbox" value="electrical">
|
||||
<div class="service-checkbox-content">
|
||||
<div class="service-checkbox-title">Electrical System Check</div>
|
||||
<div class="service-checkbox-price">From $350</div>
|
||||
</div>
|
||||
</label>
|
||||
<label class="service-checkbox">
|
||||
<input type="checkbox" value="bottom-paint">
|
||||
<div class="service-checkbox-content">
|
||||
<div class="service-checkbox-title">Bottom Paint</div>
|
||||
<div class="service-checkbox-price">From $1,500</div>
|
||||
</div>
|
||||
</label>
|
||||
<label class="service-checkbox">
|
||||
<input type="checkbox" value="zinc-replacement">
|
||||
<div class="service-checkbox-content">
|
||||
<div class="service-checkbox-title">Zinc Replacement</div>
|
||||
<div class="service-checkbox-price">From $150</div>
|
||||
</div>
|
||||
</label>
|
||||
<label class="service-checkbox">
|
||||
<input type="checkbox" value="upholstery">
|
||||
<div class="service-checkbox-content">
|
||||
<div class="service-checkbox-title">Upholstery Cleaning</div>
|
||||
<div class="service-checkbox-price">From $250</div>
|
||||
</div>
|
||||
</label>
|
||||
<label class="service-checkbox">
|
||||
<input type="checkbox" value="other">
|
||||
<div class="service-checkbox-content">
|
||||
<div class="service-checkbox-title">Other (Describe Below)</div>
|
||||
<div class="service-checkbox-price">Quote Required</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Vessel Information -->
|
||||
<div class="service-selection-section">
|
||||
<h2><i data-lucide="sailboat"></i> Vessel Information</h2>
|
||||
<div class="vessel-info-grid">
|
||||
<div class="form-group">
|
||||
<label class="form-label required">Vessel Name</label>
|
||||
<input type="text" class="form-input" placeholder="e.g., Sea Breeze" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label required">Make & Model</label>
|
||||
<input type="text" class="form-input" placeholder="e.g., Beneteau Oceanis 45" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label required">Year</label>
|
||||
<input type="text" class="form-input" placeholder="e.g., 2018" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label required">Length (feet)</label>
|
||||
<input type="text" class="form-input" placeholder="e.g., 45" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Hull Number</label>
|
||||
<input type="text" class="form-input" placeholder="Optional">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label required">Current Location</label>
|
||||
<select class="form-select" required>
|
||||
<option value="">Select Marina...</option>
|
||||
<option>Pier 39 Marina</option>
|
||||
<option>South Beach Harbor</option>
|
||||
<option>Sausalito Yacht Harbor</option>
|
||||
<option>Berkeley Marina</option>
|
||||
<option>Emeryville Marina</option>
|
||||
<option>Other (specify below)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="margin-top: 1rem;">
|
||||
<label class="form-label">Problem Description / Additional Information</label>
|
||||
<textarea class="form-textarea" placeholder="Please describe any specific issues or additional information about your service needs..."></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Photo Upload -->
|
||||
<div class="form-group" style="margin-top: 1rem;">
|
||||
<label class="form-label">Upload Photos (Optional)</label>
|
||||
<div class="photo-upload">
|
||||
<div class="photo-upload-icon">
|
||||
<i data-lucide="camera"></i>
|
||||
</div>
|
||||
<p style="color: var(--text-primary); font-weight: 500; margin-bottom: 0.5rem;">
|
||||
Click to upload photos
|
||||
</p>
|
||||
<p style="color: var(--text-secondary); font-size: 0.875rem;">
|
||||
Upload photos of any damage or areas of concern
|
||||
</p>
|
||||
<input type="file" multiple accept="image/*" style="display: none;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Urgency & Scheduling -->
|
||||
<div class="service-selection-section">
|
||||
<h2><i data-lucide="clock"></i> Service Urgency</h2>
|
||||
<div class="urgency-options">
|
||||
<div class="urgency-option" data-urgency="routine">
|
||||
<div class="urgency-label">Routine Service</div>
|
||||
<div class="urgency-description">Schedule within 2 weeks</div>
|
||||
</div>
|
||||
<div class="urgency-option" data-urgency="soon">
|
||||
<div class="urgency-label">Soon</div>
|
||||
<div class="urgency-description">Within 1 week</div>
|
||||
</div>
|
||||
<div class="urgency-option" data-urgency="urgent">
|
||||
<div class="urgency-label">Urgent</div>
|
||||
<div class="urgency-description">Within 48 hours</div>
|
||||
</div>
|
||||
<div class="urgency-option emergency" data-urgency="emergency">
|
||||
<div class="urgency-label" style="color: #dc2626;">Emergency</div>
|
||||
<div class="urgency-description">Need help today</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 2rem;">
|
||||
<h3 style="font-size: 1.125rem; margin-bottom: 1rem;">Preferred Service Date</h3>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Select Date</label>
|
||||
<input type="date" class="form-input">
|
||||
</div>
|
||||
<div class="form-group" style="margin-top: 1rem;">
|
||||
<label class="form-label">Preferred Time</label>
|
||||
<div class="time-slots">
|
||||
<div class="time-slot">8:00 AM</div>
|
||||
<div class="time-slot">9:00 AM</div>
|
||||
<div class="time-slot">10:00 AM</div>
|
||||
<div class="time-slot">11:00 AM</div>
|
||||
<div class="time-slot">12:00 PM</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Information -->
|
||||
<div class="service-selection-section">
|
||||
<h2><i data-lucide="user"></i> Contact Information</h2>
|
||||
<div class="vessel-info-grid">
|
||||
<div class="form-group">
|
||||
<label class="form-label required">First Name</label>
|
||||
<input type="text" class="form-input" placeholder="John" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label required">Last Name</label>
|
||||
<input type="text" class="form-input" placeholder="Smith" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label required">Email</label>
|
||||
<input type="email" class="form-input" placeholder="john@example.com" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label required">Phone</label>
|
||||
<input type="tel" class="form-input" placeholder="(415) 555-0123" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="margin-top: 1rem;">
|
||||
<label class="form-label">Preferred Contact Method</label>
|
||||
<div style="display: flex; gap: 1rem; margin-top: 0.5rem;">
|
||||
<label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
|
||||
<input type="radio" name="contact-method" value="phone" checked>
|
||||
<span>Phone</span>
|
||||
</label>
|
||||
<label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
|
||||
<input type="radio" name="contact-method" value="email">
|
||||
<span>Email</span>
|
||||
</label>
|
||||
<label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
|
||||
<input type="radio" name="contact-method" value="text">
|
||||
<span>Text Message</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="booking-navigation">
|
||||
<button class="btn-secondary" onclick="window.location.href='maintenance.html'">
|
||||
<i data-lucide="arrow-left"></i>
|
||||
Back to Services
|
||||
</button>
|
||||
<button class="btn-primary" id="submitRequest">
|
||||
<i data-lucide="send"></i>
|
||||
Submit Service Request
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar Summary -->
|
||||
<aside class="booking-sidebar">
|
||||
<div class="booking-summary">
|
||||
<h3 class="summary-title">
|
||||
<i data-lucide="clipboard-list"></i>
|
||||
Service Summary
|
||||
</h3>
|
||||
|
||||
<div class="summary-section">
|
||||
<h4>Selected Services</h4>
|
||||
<div id="selectedServices" style="color: var(--text-secondary);">
|
||||
No services selected yet
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="summary-card">
|
||||
<div class="summary-item">
|
||||
<span class="summary-label">Estimated Total</span>
|
||||
<span class="summary-value summary-total" id="estimatedTotal">$0</span>
|
||||
</div>
|
||||
<p style="font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.5rem;">
|
||||
* Final quote will be provided after inspection
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="help-section">
|
||||
<h4>Need Immediate Help?</h4>
|
||||
<p>Our service team is ready to assist</p>
|
||||
<button class="btn-contact" onclick="window.location.href='tel:4155550123'">
|
||||
<i data-lucide="phone"></i>
|
||||
(415) 555-0123
|
||||
</button>
|
||||
<button class="btn-contact" style="background: #dc2626; color: white; margin-top: 0.5rem;" onclick="window.location.href='tel:4155550911'">
|
||||
<i data-lucide="alert-circle"></i>
|
||||
Emergency: (415) 555-0911
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="voyage-footer">
|
||||
<div class="footer-container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-brand">
|
||||
<img src="logo.jpg" alt="HarborSmith" class="footer-logo">
|
||||
<h3>HarborSmith</h3>
|
||||
<p>Your trusted partner for Bay Area yacht services</p>
|
||||
</div>
|
||||
|
||||
<div class="footer-links">
|
||||
<h4>Quick Links</h4>
|
||||
<a href="index.html">Home</a>
|
||||
<a href="charter.html">Charters</a>
|
||||
<a href="maintenance.html">Maintenance</a>
|
||||
<a href="about.html">About</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
</div>
|
||||
|
||||
<div class="footer-contact">
|
||||
<h4>Get in Touch</h4>
|
||||
<p><i data-lucide="map-pin" class="footer-icon"></i> Pier 39, San Francisco, CA</p>
|
||||
<p><i data-lucide="phone" class="footer-icon"></i> (415) 555-0123</p>
|
||||
<p><i data-lucide="alert-circle" class="footer-icon"></i> Emergency: (415) 555-0911</p>
|
||||
<p><i data-lucide="mail" class="footer-icon"></i> service@harborsmith.com</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 HarborSmith Yacht Services. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Initialize Lucide icons
|
||||
lucide.createIcons();
|
||||
|
||||
// Service type selection
|
||||
const serviceTypeCards = document.querySelectorAll('.service-type-card');
|
||||
serviceTypeCards.forEach(card => {
|
||||
card.addEventListener('click', function() {
|
||||
serviceTypeCards.forEach(c => c.classList.remove('selected'));
|
||||
this.classList.add('selected');
|
||||
|
||||
// Show emergency message if emergency selected
|
||||
if (this.dataset.type === 'emergency') {
|
||||
alert('For emergency service, please call our 24/7 hotline at (415) 555-0911');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Service checkboxes and price calculation
|
||||
const serviceCheckboxes = document.querySelectorAll('.service-checkbox input');
|
||||
const selectedServicesDiv = document.getElementById('selectedServices');
|
||||
const estimatedTotalDiv = document.getElementById('estimatedTotal');
|
||||
|
||||
function updateSummary() {
|
||||
const selected = [];
|
||||
let total = 0;
|
||||
|
||||
serviceCheckboxes.forEach(checkbox => {
|
||||
if (checkbox.checked) {
|
||||
const label = checkbox.parentElement.querySelector('.service-checkbox-title').textContent;
|
||||
const price = checkbox.parentElement.querySelector('.service-checkbox-price').textContent;
|
||||
selected.push(`${label} - ${price}`);
|
||||
|
||||
// Extract price for calculation (simplified)
|
||||
const priceMatch = price.match(/\$(\d+)/);
|
||||
if (priceMatch) {
|
||||
total += parseInt(priceMatch[1]);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (selected.length > 0) {
|
||||
selectedServicesDiv.innerHTML = selected.map(s => `<p style="margin: 0.5rem 0; font-size: 0.875rem;">${s}</p>`).join('');
|
||||
estimatedTotalDiv.textContent = `From $${total}`;
|
||||
} else {
|
||||
selectedServicesDiv.innerHTML = 'No services selected yet';
|
||||
estimatedTotalDiv.textContent = '$0';
|
||||
}
|
||||
}
|
||||
|
||||
serviceCheckboxes.forEach(checkbox => {
|
||||
checkbox.addEventListener('change', updateSummary);
|
||||
});
|
||||
|
||||
// Urgency selection
|
||||
const urgencyOptions = document.querySelectorAll('.urgency-option');
|
||||
urgencyOptions.forEach(option => {
|
||||
option.addEventListener('click', function() {
|
||||
urgencyOptions.forEach(o => o.classList.remove('selected'));
|
||||
this.classList.add('selected');
|
||||
});
|
||||
});
|
||||
|
||||
// Time slot selection
|
||||
const timeSlots = document.querySelectorAll('.time-slot');
|
||||
timeSlots.forEach(slot => {
|
||||
slot.addEventListener('click', function() {
|
||||
if (!this.classList.contains('unavailable')) {
|
||||
timeSlots.forEach(s => s.classList.remove('selected'));
|
||||
this.classList.add('selected');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Photo upload
|
||||
const photoUpload = document.querySelector('.photo-upload');
|
||||
const fileInput = photoUpload.querySelector('input[type="file"]');
|
||||
|
||||
photoUpload.addEventListener('click', () => {
|
||||
fileInput.click();
|
||||
});
|
||||
|
||||
fileInput.addEventListener('change', function(e) {
|
||||
const files = e.target.files;
|
||||
if (files.length > 0) {
|
||||
photoUpload.querySelector('p').textContent = `${files.length} photo(s) selected`;
|
||||
}
|
||||
});
|
||||
|
||||
// Submit button
|
||||
document.getElementById('submitRequest').addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Simple validation
|
||||
const requiredInputs = document.querySelectorAll('input[required]');
|
||||
let valid = true;
|
||||
|
||||
requiredInputs.forEach(input => {
|
||||
if (!input.value) {
|
||||
input.style.borderColor = '#ef4444';
|
||||
valid = false;
|
||||
} else {
|
||||
input.style.borderColor = '';
|
||||
}
|
||||
});
|
||||
|
||||
if (valid) {
|
||||
alert('Thank you for your service request! We will contact you within 24 hours to confirm your appointment and provide a detailed quote.');
|
||||
window.location.href = 'maintenance.html';
|
||||
} else {
|
||||
alert('Please fill in all required fields.');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user