1262 lines
43 KiB
HTML
1262 lines
43 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>Book Charter - Step 1 - 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">
|
|||
|
|
<link rel="stylesheet" href="css/voyage-layout.css">
|
|||
|
|
<link rel="stylesheet" href="css/styles.css">
|
|||
|
|
<link rel="stylesheet" href="css/themes.css">
|
|||
|
|
<link rel="stylesheet" href="css/animations.css">
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
:root {
|
|||
|
|
--luxury-gold: #D4AF37;
|
|||
|
|
--deep-navy: #0F172A;
|
|||
|
|
--ocean-blue: #0066CC;
|
|||
|
|
--sunset-orange: #FF6B35;
|
|||
|
|
--pearl-white: #FAFBFC;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Booking Hero Section */
|
|||
|
|
.booking-hero {
|
|||
|
|
background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 100%);
|
|||
|
|
padding: 120px 0 80px;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.booking-hero::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background:
|
|||
|
|
radial-gradient(circle at 20% 50%, rgba(0, 102, 204, 0.2) 0%, transparent 50%),
|
|||
|
|
radial-gradient(circle at 80% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 50%);
|
|||
|
|
animation: float 20s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.booking-hero-content {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 2;
|
|||
|
|
text-align: center;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.booking-hero h1 {
|
|||
|
|
font-size: 3rem;
|
|||
|
|
font-weight: 300;
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
letter-spacing: -0.02em;
|
|||
|
|
animation: fadeInUp 0.8s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.booking-hero p {
|
|||
|
|
font-size: 1.25rem;
|
|||
|
|
opacity: 0.9;
|
|||
|
|
animation: fadeInUp 0.8s ease 0.2s both;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Progress Indicator */
|
|||
|
|
.progress-container {
|
|||
|
|
max-width: 800px;
|
|||
|
|
margin: -40px auto 60px;
|
|||
|
|
padding: 0 20px;
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 10;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-track {
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 100px;
|
|||
|
|
padding: 30px 40px;
|
|||
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-line {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50px; /* Adjusted to center of first circle */
|
|||
|
|
right: 50px; /* Adjusted to center of last circle */
|
|||
|
|
height: 2px;
|
|||
|
|
background: #E5E7EB;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
z-index: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-line-fill {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
height: 100%;
|
|||
|
|
background: linear-gradient(90deg, #0066CC, #D4AF37);
|
|||
|
|
width: 0%;
|
|||
|
|
transition: width 0.5s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-step {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 2;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step-circle {
|
|||
|
|
width: 50px;
|
|||
|
|
height: 50px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: white;
|
|||
|
|
border: 3px solid #E5E7EB;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-weight: 600;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-step.active .step-circle {
|
|||
|
|
background: linear-gradient(135deg, #0066CC, #0052A3);
|
|||
|
|
border-color: #0066CC;
|
|||
|
|
color: white;
|
|||
|
|
transform: scale(1.1);
|
|||
|
|
box-shadow: 0 4px 20px rgba(0, 102, 204, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-step.completed .step-circle {
|
|||
|
|
background: #10B981;
|
|||
|
|
border-color: #10B981;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step-label {
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
color: #6B7280;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-step.active .step-label {
|
|||
|
|
color: #0066CC;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Main Booking Layout */
|
|||
|
|
.booking-container {
|
|||
|
|
max-width: 1400px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 0 20px 80px;
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr 400px;
|
|||
|
|
gap: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Calendar Section */
|
|||
|
|
.calendar-section {
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
padding: 40px;
|
|||
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
|
|||
|
|
animation: fadeInLeft 0.8s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 20px;
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-icon {
|
|||
|
|
width: 60px;
|
|||
|
|
height: 60px;
|
|||
|
|
background: linear-gradient(135deg, #E0F2FE, #DBEAFE);
|
|||
|
|
border-radius: 16px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
color: #0066CC;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title h2 {
|
|||
|
|
font-size: 1.75rem;
|
|||
|
|
margin-bottom: 4px;
|
|||
|
|
color: var(--deep-navy);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title p {
|
|||
|
|
color: #6B7280;
|
|||
|
|
font-size: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Interactive Calendar */
|
|||
|
|
.calendar-wrapper {
|
|||
|
|
background: #F9FAFB;
|
|||
|
|
border-radius: 16px;
|
|||
|
|
padding: 30px;
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.calendar-nav {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.calendar-month {
|
|||
|
|
font-size: 1.5rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--deep-navy);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.calendar-nav-buttons {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-btn {
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
border: none;
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav-btn:hover {
|
|||
|
|
background: #0066CC;
|
|||
|
|
color: white;
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
box-shadow: 0 4px 12px rgba(0, 102, 204, 0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.calendar-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(7, 1fr);
|
|||
|
|
gap: 8px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.calendar-header {
|
|||
|
|
padding: 10px;
|
|||
|
|
text-align: center;
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
color: #6B7280;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.calendar-day {
|
|||
|
|
aspect-ratio: 1;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
cursor: pointer;
|
|||
|
|
position: relative;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
border: 2px solid transparent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.calendar-day:hover:not(.disabled):not(.selected) {
|
|||
|
|
background: #E0F2FE;
|
|||
|
|
transform: scale(1.05);
|
|||
|
|
border-color: #0066CC;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.calendar-day.today {
|
|||
|
|
background: #FEF3C7;
|
|||
|
|
color: #D97706;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.calendar-day.selected {
|
|||
|
|
background: linear-gradient(135deg, #0066CC, #0052A3);
|
|||
|
|
color: white;
|
|||
|
|
transform: scale(1.1);
|
|||
|
|
box-shadow: 0 4px 20px rgba(0, 102, 204, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.calendar-day.disabled {
|
|||
|
|
opacity: 0.3;
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
background: #F3F4F6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.calendar-day.available::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 4px;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
width: 4px;
|
|||
|
|
height: 4px;
|
|||
|
|
background: #10B981;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Time Slots */
|
|||
|
|
.time-slots-section {
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
opacity: 0;
|
|||
|
|
animation: fadeInUp 0.6s ease 0.3s both;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-slots-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 10px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-slots-header h3 {
|
|||
|
|
font-size: 1.25rem;
|
|||
|
|
color: var(--deep-navy);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-slots-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(4, 1fr);
|
|||
|
|
gap: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-slot {
|
|||
|
|
padding: 15px;
|
|||
|
|
background: white;
|
|||
|
|
border: 2px solid #E5E7EB;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
text-align: center;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-slot:hover:not(.unavailable) {
|
|||
|
|
border-color: #0066CC;
|
|||
|
|
background: #E0F2FE;
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-slot.selected {
|
|||
|
|
background: linear-gradient(135deg, #0066CC, #0052A3);
|
|||
|
|
border-color: #0066CC;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-slot.unavailable {
|
|||
|
|
opacity: 0.4;
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
background: #F9FAFB;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-slot.premium::before {
|
|||
|
|
content: 'Premium';
|
|||
|
|
position: absolute;
|
|||
|
|
top: -8px;
|
|||
|
|
right: -8px;
|
|||
|
|
background: linear-gradient(135deg, var(--luxury-gold), #B8961F);
|
|||
|
|
color: white;
|
|||
|
|
font-size: 0.625rem;
|
|||
|
|
padding: 2px 8px;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Duration Cards */
|
|||
|
|
.duration-section {
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.duration-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(2, 1fr);
|
|||
|
|
gap: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.duration-card {
|
|||
|
|
background: white;
|
|||
|
|
border: 2px solid #E5E7EB;
|
|||
|
|
border-radius: 16px;
|
|||
|
|
padding: 20px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.duration-card:hover {
|
|||
|
|
border-color: #0066CC;
|
|||
|
|
transform: translateY(-4px);
|
|||
|
|
box-shadow: 0 8px 24px rgba(0, 102, 204, 0.15);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.duration-card.selected {
|
|||
|
|
border-color: #0066CC;
|
|||
|
|
background: linear-gradient(135deg, #E0F2FE, #DBEAFE);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.duration-card.popular::before {
|
|||
|
|
content: 'Most Popular';
|
|||
|
|
position: absolute;
|
|||
|
|
top: -10px;
|
|||
|
|
right: 20px;
|
|||
|
|
background: linear-gradient(135deg, #10B981, #059669);
|
|||
|
|
color: white;
|
|||
|
|
padding: 4px 12px;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.duration-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: start;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.duration-title {
|
|||
|
|
font-size: 1.125rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--deep-navy);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.duration-price {
|
|||
|
|
font-size: 1.5rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #0066CC;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.duration-details {
|
|||
|
|
color: #6B7280;
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Guest Counter */
|
|||
|
|
.guest-section {
|
|||
|
|
background: #F9FAFB;
|
|||
|
|
border-radius: 16px;
|
|||
|
|
padding: 30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.guest-counter {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.counter-label {
|
|||
|
|
font-size: 1.125rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--deep-navy);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.counter-controls {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.counter-btn {
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
border: 2px solid #E5E7EB;
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.counter-btn:hover:not(:disabled) {
|
|||
|
|
background: #0066CC;
|
|||
|
|
border-color: #0066CC;
|
|||
|
|
color: white;
|
|||
|
|
transform: scale(1.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.counter-btn:disabled {
|
|||
|
|
opacity: 0.3;
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.counter-value {
|
|||
|
|
font-size: 2rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #0066CC;
|
|||
|
|
min-width: 60px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.guest-info {
|
|||
|
|
margin-top: 15px;
|
|||
|
|
padding: 15px;
|
|||
|
|
background: #FEF3C7;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
color: #92400E;
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Booking Summary Sidebar */
|
|||
|
|
.booking-sidebar {
|
|||
|
|
position: sticky;
|
|||
|
|
top: 100px;
|
|||
|
|
height: fit-content;
|
|||
|
|
animation: fadeInRight 0.8s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-card {
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 20px;
|
|||
|
|
padding: 30px;
|
|||
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
|
|||
|
|
border: 2px solid transparent;
|
|||
|
|
background-image: linear-gradient(white, white),
|
|||
|
|
linear-gradient(135deg, #0066CC, var(--luxury-gold));
|
|||
|
|
background-origin: border-box;
|
|||
|
|
background-clip: padding-box, border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-header {
|
|||
|
|
font-size: 1.5rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: var(--deep-navy);
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-item {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 15px 0;
|
|||
|
|
border-bottom: 1px solid #E5E7EB;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-item:last-of-type {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-label {
|
|||
|
|
color: #6B7280;
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-value {
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--deep-navy);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-divider {
|
|||
|
|
height: 2px;
|
|||
|
|
background: linear-gradient(90deg, transparent, #E5E7EB, transparent);
|
|||
|
|
margin: 20px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-total {
|
|||
|
|
background: linear-gradient(135deg, #E0F2FE, #DBEAFE);
|
|||
|
|
margin: 0 -30px;
|
|||
|
|
padding: 20px 30px;
|
|||
|
|
border-radius: 0 0 18px 18px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.total-label {
|
|||
|
|
font-size: 1.125rem;
|
|||
|
|
color: var(--deep-navy);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.total-price {
|
|||
|
|
font-size: 2rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
background: linear-gradient(135deg, #0066CC, var(--luxury-gold));
|
|||
|
|
-webkit-background-clip: text;
|
|||
|
|
-webkit-text-fill-color: transparent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.continue-btn {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 18px;
|
|||
|
|
background: linear-gradient(135deg, #0066CC, #0052A3);
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
font-size: 1.125rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
margin-top: 30px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.continue-btn:hover {
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
box-shadow: 0 8px 24px rgba(0, 102, 204, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.continue-btn:disabled {
|
|||
|
|
opacity: 0.5;
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Help Section */
|
|||
|
|
.help-card {
|
|||
|
|
background: linear-gradient(135deg, #FEF3C7, #FDE68A);
|
|||
|
|
border-radius: 16px;
|
|||
|
|
padding: 20px;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.help-title {
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #92400E;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.help-text {
|
|||
|
|
color: #B45309;
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.help-btn {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
background: white;
|
|||
|
|
color: #92400E;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
text-decoration: none;
|
|||
|
|
font-weight: 600;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.help-btn:hover {
|
|||
|
|
background: #92400E;
|
|||
|
|
color: white;
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Animations */
|
|||
|
|
@keyframes fadeInUp {
|
|||
|
|
from {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translateY(30px);
|
|||
|
|
}
|
|||
|
|
to {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: translateY(0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes fadeInLeft {
|
|||
|
|
from {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translateX(-30px);
|
|||
|
|
}
|
|||
|
|
to {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: translateX(0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes fadeInRight {
|
|||
|
|
from {
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translateX(30px);
|
|||
|
|
}
|
|||
|
|
to {
|
|||
|
|
opacity: 1;
|
|||
|
|
transform: translateX(0);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes float {
|
|||
|
|
0%, 100% { transform: translateY(0) rotate(0deg); }
|
|||
|
|
50% { transform: translateY(-20px) rotate(2deg); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Responsive Design */
|
|||
|
|
@media (max-width: 1024px) {
|
|||
|
|
.booking-container {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.booking-sidebar {
|
|||
|
|
position: static;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-slots-grid {
|
|||
|
|
grid-template-columns: repeat(2, 1fr);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 640px) {
|
|||
|
|
.booking-hero h1 {
|
|||
|
|
font-size: 2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-track {
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.step-label {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.calendar-section {
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.duration-grid {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-slots-grid {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<!-- Navigation -->
|
|||
|
|
<nav class="voyage-nav" id="voyageNav">
|
|||
|
|
<div class="nav-container">
|
|||
|
|
<div class="nav-brand">
|
|||
|
|
<img src="logo.jpg" alt="HarborSmith" class="nav-logo">
|
|||
|
|
<span>HarborSmith</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button class="nav-toggle" id="navToggle">
|
|||
|
|
<span></span>
|
|||
|
|
<span></span>
|
|||
|
|
<span></span>
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<div class="nav-menu" id="navMenu">
|
|||
|
|
<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 class="nav-actions">
|
|||
|
|
<button class="theme-toggle" id="themeToggle">
|
|||
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|||
|
|
<circle cx="12" cy="12" r="5"/>
|
|||
|
|
<line x1="12" y1="1" x2="12" y2="3"/>
|
|||
|
|
<line x1="12" y1="21" x2="12" y2="23"/>
|
|||
|
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
|
|||
|
|
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
|
|||
|
|
<line x1="1" y1="12" x2="3" y2="12"/>
|
|||
|
|
<line x1="21" y1="12" x2="23" y2="12"/>
|
|||
|
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
|
|||
|
|
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
|
|||
|
|
<!-- Booking Hero -->
|
|||
|
|
<section class="booking-hero">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="booking-hero-content">
|
|||
|
|
<h1>Plan Your Perfect Charter</h1>
|
|||
|
|
<p>Select your preferred date and customize your luxury yacht experience</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Progress Indicator -->
|
|||
|
|
<div class="progress-container">
|
|||
|
|
<div class="progress-track">
|
|||
|
|
<div class="progress-line">
|
|||
|
|
<div class="progress-line-fill" style="width: 0%;"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="progress-step active">
|
|||
|
|
<div class="step-circle">1</div>
|
|||
|
|
<div class="step-label">Date & Time</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="progress-step">
|
|||
|
|
<div class="step-circle">2</div>
|
|||
|
|
<div class="step-label">Select Yacht</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="progress-step">
|
|||
|
|
<div class="step-circle">3</div>
|
|||
|
|
<div class="step-label">Customize</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="progress-step">
|
|||
|
|
<div class="step-circle">4</div>
|
|||
|
|
<div class="step-label">Confirm</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Main Booking Content -->
|
|||
|
|
<div class="booking-container">
|
|||
|
|
<!-- Left Column - Selection -->
|
|||
|
|
<div class="booking-main">
|
|||
|
|
<!-- Calendar Section -->
|
|||
|
|
<div class="calendar-section">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<div class="section-icon">
|
|||
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|||
|
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
|
|||
|
|
<line x1="16" y1="2" x2="16" y2="6"></line>
|
|||
|
|
<line x1="8" y1="2" x2="8" y2="6"></line>
|
|||
|
|
<line x1="3" y1="10" x2="21" y2="10"></line>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
<div class="section-title">
|
|||
|
|
<h2>Select Charter Date</h2>
|
|||
|
|
<p>Choose your preferred sailing date</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="calendar-wrapper">
|
|||
|
|
<div class="calendar-nav">
|
|||
|
|
<div class="calendar-month">December 2024</div>
|
|||
|
|
<div class="calendar-nav-buttons">
|
|||
|
|
<button class="nav-btn" onclick="previousMonth()">
|
|||
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|||
|
|
<polyline points="15 18 9 12 15 6"></polyline>
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
<button class="nav-btn" onclick="nextMonth()">
|
|||
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|||
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="calendar-grid">
|
|||
|
|
<div class="calendar-header">Sun</div>
|
|||
|
|
<div class="calendar-header">Mon</div>
|
|||
|
|
<div class="calendar-header">Tue</div>
|
|||
|
|
<div class="calendar-header">Wed</div>
|
|||
|
|
<div class="calendar-header">Thu</div>
|
|||
|
|
<div class="calendar-header">Fri</div>
|
|||
|
|
<div class="calendar-header">Sat</div>
|
|||
|
|
|
|||
|
|
<!-- Calendar Days -->
|
|||
|
|
<div class="calendar-day disabled">29</div>
|
|||
|
|
<div class="calendar-day disabled">30</div>
|
|||
|
|
<div class="calendar-day">1</div>
|
|||
|
|
<div class="calendar-day">2</div>
|
|||
|
|
<div class="calendar-day">3</div>
|
|||
|
|
<div class="calendar-day">4</div>
|
|||
|
|
<div class="calendar-day">5</div>
|
|||
|
|
<div class="calendar-day available">6</div>
|
|||
|
|
<div class="calendar-day available">7</div>
|
|||
|
|
<div class="calendar-day available">8</div>
|
|||
|
|
<div class="calendar-day available">9</div>
|
|||
|
|
<div class="calendar-day available">10</div>
|
|||
|
|
<div class="calendar-day available">11</div>
|
|||
|
|
<div class="calendar-day available">12</div>
|
|||
|
|
<div class="calendar-day available">13</div>
|
|||
|
|
<div class="calendar-day available selected">14</div>
|
|||
|
|
<div class="calendar-day available">15</div>
|
|||
|
|
<div class="calendar-day available">16</div>
|
|||
|
|
<div class="calendar-day today">17</div>
|
|||
|
|
<div class="calendar-day available">18</div>
|
|||
|
|
<div class="calendar-day available">19</div>
|
|||
|
|
<div class="calendar-day available">20</div>
|
|||
|
|
<div class="calendar-day available">21</div>
|
|||
|
|
<div class="calendar-day available">22</div>
|
|||
|
|
<div class="calendar-day disabled">23</div>
|
|||
|
|
<div class="calendar-day disabled">24</div>
|
|||
|
|
<div class="calendar-day disabled">25</div>
|
|||
|
|
<div class="calendar-day available">26</div>
|
|||
|
|
<div class="calendar-day available">27</div>
|
|||
|
|
<div class="calendar-day available">28</div>
|
|||
|
|
<div class="calendar-day available">29</div>
|
|||
|
|
<div class="calendar-day available">30</div>
|
|||
|
|
<div class="calendar-day available">31</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Time Slots -->
|
|||
|
|
<div class="time-slots-section">
|
|||
|
|
<div class="time-slots-header">
|
|||
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#0066CC" stroke-width="2">
|
|||
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|||
|
|
<polyline points="12 6 12 12 16 14"></polyline>
|
|||
|
|
</svg>
|
|||
|
|
<h3>Available Time Slots</h3>
|
|||
|
|
</div>
|
|||
|
|
<div class="time-slots-grid">
|
|||
|
|
<div class="time-slot premium">9:00 AM</div>
|
|||
|
|
<div class="time-slot selected">10:00 AM</div>
|
|||
|
|
<div class="time-slot unavailable">11:00 AM</div>
|
|||
|
|
<div class="time-slot premium">12:00 PM</div>
|
|||
|
|
<div class="time-slot">1:00 PM</div>
|
|||
|
|
<div class="time-slot">2:00 PM</div>
|
|||
|
|
<div class="time-slot unavailable">3:00 PM</div>
|
|||
|
|
<div class="time-slot premium">4:00 PM</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Duration Selection -->
|
|||
|
|
<div class="duration-section">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<div class="section-icon">
|
|||
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|||
|
|
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
<div class="section-title">
|
|||
|
|
<h2>Charter Duration</h2>
|
|||
|
|
<p>Select your preferred charter length</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="duration-grid">
|
|||
|
|
<div class="duration-card">
|
|||
|
|
<div class="duration-header">
|
|||
|
|
<div>
|
|||
|
|
<div class="duration-title">Half Day</div>
|
|||
|
|
<div class="duration-details">4 hours of luxury</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="duration-price">$2,500</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="duration-details">Perfect for sunset cruises and celebrations</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="duration-card selected popular">
|
|||
|
|
<div class="duration-header">
|
|||
|
|
<div>
|
|||
|
|
<div class="duration-title">Full Day</div>
|
|||
|
|
<div class="duration-details">8 hours of adventure</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="duration-price">$4,500</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="duration-details">Explore multiple destinations with lunch</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="duration-card">
|
|||
|
|
<div class="duration-header">
|
|||
|
|
<div>
|
|||
|
|
<div class="duration-title">Overnight</div>
|
|||
|
|
<div class="duration-details">24 hours escape</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="duration-price">$8,500</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="duration-details">Sleep under the stars, wake on the water</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="duration-card">
|
|||
|
|
<div class="duration-header">
|
|||
|
|
<div>
|
|||
|
|
<div class="duration-title">Weekend</div>
|
|||
|
|
<div class="duration-details">48 hours voyage</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="duration-price">$15,000</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="duration-details">Ultimate luxury weekend getaway</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Guest Selection -->
|
|||
|
|
<div class="guest-section">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<div class="section-icon">
|
|||
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|||
|
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
|||
|
|
<circle cx="9" cy="7" r="4"></circle>
|
|||
|
|
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
|
|||
|
|
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
<div class="section-title">
|
|||
|
|
<h2>Number of Guests</h2>
|
|||
|
|
<p>How many will be joining you?</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="guest-counter">
|
|||
|
|
<div class="counter-label">Guest Count</div>
|
|||
|
|
<div class="counter-controls">
|
|||
|
|
<button class="counter-btn" onclick="decrementGuests()">
|
|||
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|||
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
<div class="counter-value" id="guestCount">8</div>
|
|||
|
|
<button class="counter-btn" onclick="incrementGuests()">
|
|||
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|||
|
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|||
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="guest-info">
|
|||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|||
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|||
|
|
<line x1="12" y1="8" x2="12" y2="12"></line>
|
|||
|
|
<line x1="12" y1="16" x2="12.01" y2="16"></line>
|
|||
|
|
</svg>
|
|||
|
|
Maximum capacity varies by yacht (8-20 guests)
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Right Column - Summary -->
|
|||
|
|
<div class="booking-sidebar">
|
|||
|
|
<div class="summary-card">
|
|||
|
|
<h3 class="summary-header">Booking Summary</h3>
|
|||
|
|
|
|||
|
|
<div class="summary-item">
|
|||
|
|
<div class="summary-label">
|
|||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|||
|
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
|
|||
|
|
<line x1="16" y1="2" x2="16" y2="6"></line>
|
|||
|
|
<line x1="8" y1="2" x2="8" y2="6"></line>
|
|||
|
|
<line x1="3" y1="10" x2="21" y2="10"></line>
|
|||
|
|
</svg>
|
|||
|
|
Date
|
|||
|
|
</div>
|
|||
|
|
<div class="summary-value">December 14, 2024</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="summary-item">
|
|||
|
|
<div class="summary-label">
|
|||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|||
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|||
|
|
<polyline points="12 6 12 12 16 14"></polyline>
|
|||
|
|
</svg>
|
|||
|
|
Time
|
|||
|
|
</div>
|
|||
|
|
<div class="summary-value">10:00 AM</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="summary-item">
|
|||
|
|
<div class="summary-label">
|
|||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|||
|
|
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
|
|||
|
|
</svg>
|
|||
|
|
Duration
|
|||
|
|
</div>
|
|||
|
|
<div class="summary-value">Full Day (8 hours)</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="summary-item">
|
|||
|
|
<div class="summary-label">
|
|||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|||
|
|
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
|||
|
|
<circle cx="9" cy="7" r="4"></circle>
|
|||
|
|
</svg>
|
|||
|
|
Guests
|
|||
|
|
</div>
|
|||
|
|
<div class="summary-value">8 People</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="summary-divider"></div>
|
|||
|
|
|
|||
|
|
<div class="summary-total">
|
|||
|
|
<div class="summary-item">
|
|||
|
|
<div class="total-label">Base Charter</div>
|
|||
|
|
<div class="summary-value">$4,500</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="summary-item">
|
|||
|
|
<div class="total-label">Guest Fee (8 × $150)</div>
|
|||
|
|
<div class="summary-value">$1,200</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="summary-divider"></div>
|
|||
|
|
<div class="summary-item">
|
|||
|
|
<div class="total-label">Total</div>
|
|||
|
|
<div class="total-price">$5,700</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button class="continue-btn" onclick="window.location.href='charter-booking-2.html'">
|
|||
|
|
Continue to Yacht Selection
|
|||
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|||
|
|
<polyline points="9 18 15 12 9 6"></polyline>
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<div class="help-card">
|
|||
|
|
<div class="help-title">Need Assistance?</div>
|
|||
|
|
<div class="help-text">Our charter specialists are available 24/7</div>
|
|||
|
|
<a href="tel:415-555-0123" class="help-btn">
|
|||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|||
|
|
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
|
|||
|
|
</svg>
|
|||
|
|
Call (415) 555-0123
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script src="js/main.js"></script>
|
|||
|
|
<script>
|
|||
|
|
// Calendar functionality
|
|||
|
|
let selectedDate = new Date(2024, 11, 14);
|
|||
|
|
let currentMonth = new Date(2024, 11, 1);
|
|||
|
|
let guestCount = 8;
|
|||
|
|
let selectedTime = '10:00 AM';
|
|||
|
|
let selectedDuration = 'full-day';
|
|||
|
|
|
|||
|
|
// Calendar navigation
|
|||
|
|
function previousMonth() {
|
|||
|
|
currentMonth.setMonth(currentMonth.getMonth() - 1);
|
|||
|
|
updateCalendar();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function nextMonth() {
|
|||
|
|
currentMonth.setMonth(currentMonth.getMonth() + 1);
|
|||
|
|
updateCalendar();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateCalendar() {
|
|||
|
|
const monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
|
|||
|
|
'July', 'August', 'September', 'October', 'November', 'December'];
|
|||
|
|
document.querySelector('.calendar-month').textContent =
|
|||
|
|
monthNames[currentMonth.getMonth()] + ' ' + currentMonth.getFullYear();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Guest counter
|
|||
|
|
function incrementGuests() {
|
|||
|
|
if (guestCount < 20) {
|
|||
|
|
guestCount++;
|
|||
|
|
updateGuestCount();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function decrementGuests() {
|
|||
|
|
if (guestCount > 1) {
|
|||
|
|
guestCount--;
|
|||
|
|
updateGuestCount();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateGuestCount() {
|
|||
|
|
document.getElementById('guestCount').textContent = guestCount;
|
|||
|
|
updateSummary();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateSummary() {
|
|||
|
|
// Update guest count in summary
|
|||
|
|
const guestSummary = document.querySelectorAll('.summary-value')[3];
|
|||
|
|
if (guestSummary) {
|
|||
|
|
guestSummary.textContent = guestCount + ' People';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Update guest fee
|
|||
|
|
const guestFee = guestCount * 150;
|
|||
|
|
const guestFeeElement = document.querySelectorAll('.summary-value')[5];
|
|||
|
|
if (guestFeeElement) {
|
|||
|
|
guestFeeElement.textContent = '$' + guestFee.toLocaleString();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Update total
|
|||
|
|
const basePrice = 4500; // Full day price
|
|||
|
|
const total = basePrice + guestFee;
|
|||
|
|
const totalElement = document.querySelector('.total-price');
|
|||
|
|
if (totalElement) {
|
|||
|
|
totalElement.textContent = '$' + total.toLocaleString();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Calendar day selection
|
|||
|
|
document.querySelectorAll('.calendar-day:not(.disabled)').forEach(day => {
|
|||
|
|
day.addEventListener('click', function() {
|
|||
|
|
document.querySelectorAll('.calendar-day').forEach(d => d.classList.remove('selected'));
|
|||
|
|
this.classList.add('selected');
|
|||
|
|
|
|||
|
|
// Update summary
|
|||
|
|
const dayNum = this.textContent;
|
|||
|
|
const summaryDate = document.querySelector('.summary-value');
|
|||
|
|
if (summaryDate) {
|
|||
|
|
summaryDate.textContent = `December ${dayNum}, 2024`;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Time slot selection
|
|||
|
|
document.querySelectorAll('.time-slot:not(.unavailable)').forEach(slot => {
|
|||
|
|
slot.addEventListener('click', function() {
|
|||
|
|
document.querySelectorAll('.time-slot').forEach(s => s.classList.remove('selected'));
|
|||
|
|
this.classList.add('selected');
|
|||
|
|
|
|||
|
|
// Update summary
|
|||
|
|
const time = this.textContent;
|
|||
|
|
const summaryTime = document.querySelectorAll('.summary-value')[1];
|
|||
|
|
if (summaryTime) {
|
|||
|
|
summaryTime.textContent = time;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Duration selection
|
|||
|
|
document.querySelectorAll('.duration-card').forEach(card => {
|
|||
|
|
card.addEventListener('click', function() {
|
|||
|
|
document.querySelectorAll('.duration-card').forEach(c => c.classList.remove('selected'));
|
|||
|
|
this.classList.add('selected');
|
|||
|
|
|
|||
|
|
// Update summary
|
|||
|
|
const duration = this.querySelector('.duration-title').textContent;
|
|||
|
|
const price = this.querySelector('.duration-price').textContent;
|
|||
|
|
const summaryDuration = document.querySelectorAll('.summary-value')[2];
|
|||
|
|
const basePrice = document.querySelectorAll('.summary-value')[4];
|
|||
|
|
|
|||
|
|
if (summaryDuration) {
|
|||
|
|
summaryDuration.textContent = duration;
|
|||
|
|
}
|
|||
|
|
if (basePrice) {
|
|||
|
|
basePrice.textContent = price;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
updateSummary();
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Animate progress bar on load
|
|||
|
|
setTimeout(() => {
|
|||
|
|
document.querySelector('.progress-line-fill').style.width = '0%';
|
|||
|
|
}, 500);
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<!-- Lucide Icons -->
|
|||
|
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
|
|||
|
|
<script>
|
|||
|
|
lucide.createIcons();
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|