1555 lines
59 KiB
HTML
1555 lines
59 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Customize Your Experience - 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>
|
||
|
|
/* Layout Fix - Override booking.css grid */
|
||
|
|
.booking-layout {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr 420px;
|
||
|
|
gap: 3rem;
|
||
|
|
align-items: start;
|
||
|
|
}
|
||
|
|
|
||
|
|
.booking-content {
|
||
|
|
display: block !important; /* Override the grid from booking.css */
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Luxury Customization Styles */
|
||
|
|
.customize-hero {
|
||
|
|
background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 50%, #0F172A 100%);
|
||
|
|
padding: 6rem 0 3rem; /* Added more top padding to account for fixed navbar */
|
||
|
|
margin-bottom: 3rem;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.customize-hero::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
width: 200%;
|
||
|
|
height: 200%;
|
||
|
|
background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, transparent 70%);
|
||
|
|
animation: rotate 30s linear infinite;
|
||
|
|
top: -50%;
|
||
|
|
left: -50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rotate {
|
||
|
|
0% { transform: rotate(0deg); }
|
||
|
|
100% { transform: rotate(360deg); }
|
||
|
|
}
|
||
|
|
|
||
|
|
.customize-hero-content {
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
text-align: center;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.customize-title {
|
||
|
|
font-family: 'Playfair Display', serif;
|
||
|
|
font-size: 3rem;
|
||
|
|
font-weight: 700;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
background: linear-gradient(90deg, #FFFFFF, #10B981);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
animation: fadeInUp 0.8s ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.customize-subtitle {
|
||
|
|
font-size: 1.2rem;
|
||
|
|
color: rgba(255, 255, 255, 0.9);
|
||
|
|
animation: fadeInUp 0.8s ease-out 0.2s both;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Progress Bar */
|
||
|
|
.progress-bar {
|
||
|
|
background: rgba(255, 255, 255, 0.1);
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
border-radius: 50px;
|
||
|
|
padding: 1.5rem 2rem;
|
||
|
|
margin: 2rem auto;
|
||
|
|
max-width: 800px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress-steps {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress-step {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
position: relative;
|
||
|
|
z-index: 2;
|
||
|
|
}
|
||
|
|
|
||
|
|
.step-number {
|
||
|
|
width: 50px;
|
||
|
|
height: 50px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: rgba(255, 255, 255, 0.2);
|
||
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 1.2rem;
|
||
|
|
color: white;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress-step.completed .step-number {
|
||
|
|
background: #10B981;
|
||
|
|
border-color: #10B981;
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress-step.active .step-number {
|
||
|
|
background: linear-gradient(135deg, #10B981, #0066CC);
|
||
|
|
border-color: #10B981;
|
||
|
|
animation: pulse 2s infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes pulse {
|
||
|
|
0%, 100% { transform: scale(1); }
|
||
|
|
50% { transform: scale(1.1); }
|
||
|
|
}
|
||
|
|
|
||
|
|
.step-label {
|
||
|
|
margin-top: 0.5rem;
|
||
|
|
font-size: 0.875rem;
|
||
|
|
color: rgba(255, 255, 255, 0.8);
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress-line {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50px; /* Start from center of first circle */
|
||
|
|
right: 50px; /* End at center of last circle */
|
||
|
|
height: 2px;
|
||
|
|
background: rgba(255, 255, 255, 0.2);
|
||
|
|
transform: translateY(-50%);
|
||
|
|
z-index: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress-line-fill {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
height: 100%;
|
||
|
|
background: linear-gradient(90deg, #10B981, #0066CC);
|
||
|
|
width: 66.66%; /* 2/3 complete for step 3 */
|
||
|
|
transition: width 1s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Section Cards */
|
||
|
|
.customize-section {
|
||
|
|
background: white;
|
||
|
|
border-radius: 20px;
|
||
|
|
padding: 2.5rem;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||
|
|
animation: slideInUp 0.6s ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes slideInUp {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(30px);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 1rem;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-icon {
|
||
|
|
width: 50px;
|
||
|
|
height: 50px;
|
||
|
|
background: linear-gradient(135deg, #10B981, #0066CC);
|
||
|
|
border-radius: 12px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-title {
|
||
|
|
font-family: 'Playfair Display', serif;
|
||
|
|
font-size: 1.8rem;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #0F172A;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-description {
|
||
|
|
color: #64748B;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Route Cards */
|
||
|
|
.route-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||
|
|
gap: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.route-card {
|
||
|
|
background: white;
|
||
|
|
border: 2px solid #E2E8F0;
|
||
|
|
border-radius: 16px;
|
||
|
|
padding: 2rem;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.route-card::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
height: 4px;
|
||
|
|
background: linear-gradient(90deg, #10B981, #0066CC);
|
||
|
|
transform: scaleX(0);
|
||
|
|
transition: transform 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.route-card:hover {
|
||
|
|
transform: translateY(-5px);
|
||
|
|
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
|
||
|
|
border-color: #10B981;
|
||
|
|
}
|
||
|
|
|
||
|
|
.route-card.selected {
|
||
|
|
border-color: #10B981;
|
||
|
|
background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(0, 102, 204, 0.05));
|
||
|
|
}
|
||
|
|
|
||
|
|
.route-card.selected::before {
|
||
|
|
transform: scaleX(1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.route-image {
|
||
|
|
width: 100%;
|
||
|
|
height: 140px;
|
||
|
|
border-radius: 12px;
|
||
|
|
overflow: hidden;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.route-image img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
object-fit: cover;
|
||
|
|
transition: transform 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.route-card:hover .route-image img {
|
||
|
|
transform: scale(1.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.route-badge {
|
||
|
|
position: absolute;
|
||
|
|
top: 10px;
|
||
|
|
right: 10px;
|
||
|
|
background: linear-gradient(135deg, #10B981, #0066CC);
|
||
|
|
color: white;
|
||
|
|
padding: 0.3rem 0.8rem;
|
||
|
|
border-radius: 20px;
|
||
|
|
font-size: 0.75rem;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.route-name {
|
||
|
|
font-weight: 700;
|
||
|
|
font-size: 1.2rem;
|
||
|
|
color: #0F172A;
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.route-details {
|
||
|
|
color: #64748B;
|
||
|
|
font-size: 0.9rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Catering Cards */
|
||
|
|
.catering-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||
|
|
gap: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.catering-card {
|
||
|
|
background: white;
|
||
|
|
border: 2px solid #E2E8F0;
|
||
|
|
border-radius: 16px;
|
||
|
|
overflow: hidden;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.catering-card:hover {
|
||
|
|
transform: translateY(-5px);
|
||
|
|
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
|
||
|
|
}
|
||
|
|
|
||
|
|
.catering-card.selected {
|
||
|
|
border-color: #10B981;
|
||
|
|
}
|
||
|
|
|
||
|
|
.catering-card.selected .catering-check {
|
||
|
|
opacity: 1;
|
||
|
|
transform: scale(1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.catering-image {
|
||
|
|
height: 160px;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.catering-image img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
.catering-gradient {
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
background: linear-gradient(135deg, rgba(16, 185, 129, 0.8), rgba(0, 102, 204, 0.8));
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: white;
|
||
|
|
font-size: 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.catering-check {
|
||
|
|
position: absolute;
|
||
|
|
top: 10px;
|
||
|
|
right: 10px;
|
||
|
|
width: 30px;
|
||
|
|
height: 30px;
|
||
|
|
background: #10B981;
|
||
|
|
border-radius: 50%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: white;
|
||
|
|
opacity: 0;
|
||
|
|
transform: scale(0);
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.catering-content {
|
||
|
|
padding: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.catering-name {
|
||
|
|
font-weight: 700;
|
||
|
|
font-size: 1.2rem;
|
||
|
|
color: #0F172A;
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.catering-description {
|
||
|
|
color: #64748B;
|
||
|
|
font-size: 0.9rem;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.catering-features {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 0.5rem;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.catering-feature {
|
||
|
|
background: #F1F5F9;
|
||
|
|
padding: 0.25rem 0.75rem;
|
||
|
|
border-radius: 20px;
|
||
|
|
font-size: 0.8rem;
|
||
|
|
color: #475569;
|
||
|
|
}
|
||
|
|
|
||
|
|
.catering-price {
|
||
|
|
font-size: 1.5rem;
|
||
|
|
font-weight: 700;
|
||
|
|
background: linear-gradient(90deg, #10B981, #0066CC);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Add-on Cards */
|
||
|
|
.addon-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
|
|
gap: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.addon-card {
|
||
|
|
background: white;
|
||
|
|
border: 2px solid #E2E8F0;
|
||
|
|
border-radius: 16px;
|
||
|
|
padding: 1.5rem;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
position: relative;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.addon-card:hover {
|
||
|
|
transform: translateX(5px);
|
||
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||
|
|
border-color: #10B981;
|
||
|
|
}
|
||
|
|
|
||
|
|
.addon-card.selected {
|
||
|
|
background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(0, 102, 204, 0.05));
|
||
|
|
border-color: #10B981;
|
||
|
|
}
|
||
|
|
|
||
|
|
.addon-icon {
|
||
|
|
width: 60px;
|
||
|
|
height: 60px;
|
||
|
|
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(0, 102, 204, 0.1));
|
||
|
|
border-radius: 12px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: #0066CC;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.addon-card.selected .addon-icon {
|
||
|
|
background: linear-gradient(135deg, #10B981, #0066CC);
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.addon-content {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.addon-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.addon-name {
|
||
|
|
font-weight: 700;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
color: #0F172A;
|
||
|
|
}
|
||
|
|
|
||
|
|
.addon-price {
|
||
|
|
font-weight: 700;
|
||
|
|
color: #10B981;
|
||
|
|
font-size: 1.2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.addon-description {
|
||
|
|
color: #64748B;
|
||
|
|
font-size: 0.9rem;
|
||
|
|
line-height: 1.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.addon-toggle {
|
||
|
|
position: absolute;
|
||
|
|
top: 1rem;
|
||
|
|
right: 1rem;
|
||
|
|
width: 50px;
|
||
|
|
height: 26px;
|
||
|
|
background: #E2E8F0;
|
||
|
|
border-radius: 13px;
|
||
|
|
transition: background 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.addon-card.selected .addon-toggle {
|
||
|
|
background: #10B981;
|
||
|
|
}
|
||
|
|
|
||
|
|
.addon-toggle::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
width: 22px;
|
||
|
|
height: 22px;
|
||
|
|
background: white;
|
||
|
|
border-radius: 50%;
|
||
|
|
top: 2px;
|
||
|
|
left: 2px;
|
||
|
|
transition: transform 0.3s ease;
|
||
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.addon-card.selected .addon-toggle::after {
|
||
|
|
transform: translateX(24px);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Occasion Tags */
|
||
|
|
.occasion-grid {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.occasion-tag {
|
||
|
|
background: white;
|
||
|
|
border: 2px solid #E2E8F0;
|
||
|
|
border-radius: 50px;
|
||
|
|
padding: 0.75rem 1.5rem;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #475569;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.occasion-tag::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
background: linear-gradient(135deg, #10B981, #0066CC);
|
||
|
|
opacity: 0;
|
||
|
|
transition: opacity 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.occasion-tag:hover {
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.occasion-tag.selected {
|
||
|
|
color: white;
|
||
|
|
border-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.occasion-tag.selected::before {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.occasion-tag span {
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Special Requests */
|
||
|
|
.special-requests {
|
||
|
|
width: 100%;
|
||
|
|
min-height: 150px;
|
||
|
|
padding: 1.5rem;
|
||
|
|
border: 2px solid #E2E8F0;
|
||
|
|
border-radius: 16px;
|
||
|
|
font-family: 'Inter', sans-serif;
|
||
|
|
font-size: 1rem;
|
||
|
|
resize: vertical;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
background: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.special-requests:focus {
|
||
|
|
outline: none;
|
||
|
|
border-color: #10B981;
|
||
|
|
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Summary Sidebar - Enhanced Voyage Theme */
|
||
|
|
.booking-sidebar {
|
||
|
|
position: sticky;
|
||
|
|
top: 100px;
|
||
|
|
max-width: 420px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.booking-summary {
|
||
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 249, 255, 0.95));
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
border: 1px solid rgba(220, 20, 60, 0.08);
|
||
|
|
border-radius: 24px;
|
||
|
|
padding: 2.5rem;
|
||
|
|
box-shadow: 0 20px 40px rgba(0, 31, 63, 0.08);
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 1.25rem;
|
||
|
|
margin-bottom: 2.5rem;
|
||
|
|
padding-bottom: 2rem;
|
||
|
|
border-bottom: 2px solid rgba(220, 20, 60, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-icon {
|
||
|
|
width: 52px;
|
||
|
|
height: 52px;
|
||
|
|
background: linear-gradient(135deg, #dc143c, #ef4444);
|
||
|
|
border-radius: 16px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: white;
|
||
|
|
box-shadow: 0 8px 20px rgba(220, 20, 60, 0.25);
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-title {
|
||
|
|
font-family: 'Playfair Display', serif;
|
||
|
|
font-weight: 700;
|
||
|
|
font-size: 1.5rem;
|
||
|
|
background: linear-gradient(135deg, #001f3f, #dc143c);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-section {
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
padding-bottom: 2rem;
|
||
|
|
border-bottom: 1px solid rgba(220, 20, 60, 0.06);
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-section:last-child {
|
||
|
|
border-bottom: none;
|
||
|
|
margin-bottom: 0;
|
||
|
|
padding-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-label {
|
||
|
|
font-family: 'Playfair Display', serif;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #001f3f;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
text-transform: none;
|
||
|
|
letter-spacing: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-value {
|
||
|
|
color: #0a1628;
|
||
|
|
font-size: 1rem;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.75rem;
|
||
|
|
margin-bottom: 0.75rem;
|
||
|
|
padding: 0.875rem 1.125rem;
|
||
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(240, 244, 248, 0.7));
|
||
|
|
border: 1px solid rgba(220, 20, 60, 0.05);
|
||
|
|
border-radius: 12px;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-value:hover {
|
||
|
|
transform: translateX(4px);
|
||
|
|
box-shadow: 0 4px 12px rgba(220, 20, 60, 0.08);
|
||
|
|
border-color: rgba(220, 20, 60, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-value i {
|
||
|
|
color: #dc143c;
|
||
|
|
width: 18px;
|
||
|
|
height: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-addon {
|
||
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(240, 244, 248, 0.6));
|
||
|
|
padding: 1rem;
|
||
|
|
border: 1px solid rgba(220, 20, 60, 0.05);
|
||
|
|
border-radius: 12px;
|
||
|
|
margin-bottom: 0.75rem;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-addon:hover {
|
||
|
|
transform: translateX(4px);
|
||
|
|
box-shadow: 0 4px 12px rgba(220, 20, 60, 0.08);
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-addon-name {
|
||
|
|
color: #4a5568;
|
||
|
|
font-size: 0.95rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-addon-price {
|
||
|
|
color: #dc143c;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-total {
|
||
|
|
background: linear-gradient(135deg, rgba(220, 20, 60, 0.03), rgba(0, 31, 63, 0.03));
|
||
|
|
border: 1px solid rgba(220, 20, 60, 0.1);
|
||
|
|
padding: 2rem;
|
||
|
|
border-radius: 16px;
|
||
|
|
margin-top: 2rem;
|
||
|
|
margin-left: -1rem;
|
||
|
|
margin-right: -1rem;
|
||
|
|
margin-bottom: -1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.total-row {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
padding: 0.5rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.total-row:last-child {
|
||
|
|
margin-bottom: 0;
|
||
|
|
padding-top: 1.25rem;
|
||
|
|
margin-top: 0.75rem;
|
||
|
|
border-top: 2px solid rgba(220, 20, 60, 0.15);
|
||
|
|
}
|
||
|
|
|
||
|
|
.total-label {
|
||
|
|
color: #475569;
|
||
|
|
font-size: 0.95rem;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.total-value {
|
||
|
|
color: #001f3f;
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.total-final {
|
||
|
|
font-size: 1.75rem;
|
||
|
|
font-weight: 700;
|
||
|
|
background: linear-gradient(135deg, #dc143c, #ef4444);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
text-shadow: 0 2px 4px rgba(220, 20, 60, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Navigation Buttons */
|
||
|
|
.booking-navigation {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-top: 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-nav {
|
||
|
|
padding: 1rem 2rem;
|
||
|
|
border-radius: 50px;
|
||
|
|
font-weight: 600;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
border: none;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-back {
|
||
|
|
background: white;
|
||
|
|
color: #475569;
|
||
|
|
border: 2px solid #E2E8F0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-back:hover {
|
||
|
|
background: #F8FAFC;
|
||
|
|
transform: translateX(-5px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-continue {
|
||
|
|
background: linear-gradient(135deg, #10B981, #0066CC);
|
||
|
|
color: white;
|
||
|
|
padding: 1rem 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-continue:hover {
|
||
|
|
transform: translateX(5px);
|
||
|
|
box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Animations */
|
||
|
|
@keyframes fadeInUp {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(20px);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes slideInLeft {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateX(-30px);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateX(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes scaleIn {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: scale(0.9);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: scale(1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Responsive */
|
||
|
|
@media (max-width: 1024px) {
|
||
|
|
.booking-layout {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
|
||
|
|
.booking-sidebar {
|
||
|
|
position: static;
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.customize-title {
|
||
|
|
font-size: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.route-grid,
|
||
|
|
.catering-grid,
|
||
|
|
.addon-grid {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
|
||
|
|
.booking-navigation {
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-nav {
|
||
|
|
width: 100%;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- Navigation -->
|
||
|
|
<nav class="voyage-nav scrolled" 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>
|
||
|
|
|
||
|
|
<!-- Hero Section -->
|
||
|
|
<div class="customize-hero">
|
||
|
|
<div class="customize-hero-content">
|
||
|
|
<h1 class="customize-title">Customize Your Experience</h1>
|
||
|
|
<p class="customize-subtitle">Create your perfect luxury yacht charter with premium add-ons and services</p>
|
||
|
|
|
||
|
|
<!-- Progress Bar -->
|
||
|
|
<div class="progress-bar">
|
||
|
|
<div class="progress-steps">
|
||
|
|
<div class="progress-step completed">
|
||
|
|
<div class="step-number">1</div>
|
||
|
|
<div class="step-label">Date & Time</div>
|
||
|
|
</div>
|
||
|
|
<div class="progress-step completed">
|
||
|
|
<div class="step-number">2</div>
|
||
|
|
<div class="step-label">Select Yacht</div>
|
||
|
|
</div>
|
||
|
|
<div class="progress-step active">
|
||
|
|
<div class="step-number">3</div>
|
||
|
|
<div class="step-label">Customize</div>
|
||
|
|
</div>
|
||
|
|
<div class="progress-step">
|
||
|
|
<div class="step-number">4</div>
|
||
|
|
<div class="step-label">Confirm</div>
|
||
|
|
</div>
|
||
|
|
<div class="progress-line">
|
||
|
|
<div class="progress-line-fill"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Main Content -->
|
||
|
|
<main class="booking-main">
|
||
|
|
<div class="container">
|
||
|
|
<div class="booking-layout">
|
||
|
|
<!-- Main Content Area -->
|
||
|
|
<div class="booking-content">
|
||
|
|
<!-- Route Selection -->
|
||
|
|
<div class="customize-section">
|
||
|
|
<div class="section-header">
|
||
|
|
<div class="section-icon">
|
||
|
|
<i data-lucide="map"></i>
|
||
|
|
</div>
|
||
|
|
<h2 class="section-title">Choose Your Route</h2>
|
||
|
|
</div>
|
||
|
|
<p class="section-description">
|
||
|
|
Select your preferred sailing route for the perfect 4-hour adventure
|
||
|
|
</p>
|
||
|
|
<div class="route-grid">
|
||
|
|
<div class="route-card" data-route="golden-gate">
|
||
|
|
<div class="route-image">
|
||
|
|
<img src="https://images.unsplash.com/photo-1501594907352-04cda38ebc29?w=400&h=300&fit=crop" alt="Golden Gate">
|
||
|
|
<span class="route-badge">Popular</span>
|
||
|
|
</div>
|
||
|
|
<div class="route-name">Golden Gate Tour</div>
|
||
|
|
<div class="route-details">Classic Bay experience with iconic bridge views</div>
|
||
|
|
</div>
|
||
|
|
<div class="route-card" data-route="alcatraz">
|
||
|
|
<div class="route-image">
|
||
|
|
<img src="https://images.unsplash.com/photo-1521747116042-5a810fda9664?w=400&h=300&fit=crop" alt="Alcatraz">
|
||
|
|
</div>
|
||
|
|
<div class="route-name">Alcatraz Circle</div>
|
||
|
|
<div class="route-details">Historic waters around the infamous island</div>
|
||
|
|
</div>
|
||
|
|
<div class="route-card" data-route="sunset">
|
||
|
|
<div class="route-image">
|
||
|
|
<img src="https://images.unsplash.com/photo-1498036882173-b41c28a8ba34?w=400&h=300&fit=crop" alt="Sunset">
|
||
|
|
<span class="route-badge">Romantic</span>
|
||
|
|
</div>
|
||
|
|
<div class="route-name">Sunset Cruise</div>
|
||
|
|
<div class="route-details">Romantic evening with stunning sunset views</div>
|
||
|
|
</div>
|
||
|
|
<div class="route-card" data-route="custom">
|
||
|
|
<div class="route-image">
|
||
|
|
<img src="https://images.unsplash.com/photo-1527004013197-933c4bb611b3?w=400&h=300&fit=crop" alt="Custom">
|
||
|
|
</div>
|
||
|
|
<div class="route-name">Custom Route</div>
|
||
|
|
<div class="route-details">Design your own unique adventure</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Catering Options -->
|
||
|
|
<div class="customize-section">
|
||
|
|
<div class="section-header">
|
||
|
|
<div class="section-icon">
|
||
|
|
<i data-lucide="utensils"></i>
|
||
|
|
</div>
|
||
|
|
<h2 class="section-title">Catering & Refreshments</h2>
|
||
|
|
</div>
|
||
|
|
<p class="section-description">
|
||
|
|
Elevate your experience with gourmet catering options
|
||
|
|
</p>
|
||
|
|
<div class="catering-grid">
|
||
|
|
<div class="catering-card" data-catering="none" data-price="0">
|
||
|
|
<div class="catering-image">
|
||
|
|
<img src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=400&h=300&fit=crop" alt="No Catering">
|
||
|
|
<div class="catering-gradient">
|
||
|
|
<i data-lucide="x"></i>
|
||
|
|
</div>
|
||
|
|
<div class="catering-check">✓</div>
|
||
|
|
</div>
|
||
|
|
<div class="catering-content">
|
||
|
|
<div class="catering-name">No Catering</div>
|
||
|
|
<div class="catering-description">Bring your own food and drinks</div>
|
||
|
|
<div class="catering-features">
|
||
|
|
<span class="catering-feature">BYOB</span>
|
||
|
|
<span class="catering-feature">Ice provided</span>
|
||
|
|
</div>
|
||
|
|
<div class="catering-price">Included</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="catering-card" data-catering="light" data-price="250">
|
||
|
|
<div class="catering-image">
|
||
|
|
<img src="https://images.unsplash.com/photo-1481391319762-47dff72954d9?w=400&h=300&fit=crop" alt="Light Refreshments">
|
||
|
|
<div class="catering-gradient">
|
||
|
|
<i data-lucide="coffee"></i>
|
||
|
|
</div>
|
||
|
|
<div class="catering-check">✓</div>
|
||
|
|
</div>
|
||
|
|
<div class="catering-content">
|
||
|
|
<div class="catering-name">Light Refreshments</div>
|
||
|
|
<div class="catering-description">Snacks, soft drinks, and water</div>
|
||
|
|
<div class="catering-features">
|
||
|
|
<span class="catering-feature">Artisan snacks</span>
|
||
|
|
<span class="catering-feature">Premium beverages</span>
|
||
|
|
</div>
|
||
|
|
<div class="catering-price">+$250</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="catering-card" data-catering="premium" data-price="650">
|
||
|
|
<div class="catering-image">
|
||
|
|
<img src="https://images.unsplash.com/photo-1551024506-0bccd828d307?w=400&h=300&fit=crop" alt="Premium Package">
|
||
|
|
<div class="catering-gradient">
|
||
|
|
<i data-lucide="wine"></i>
|
||
|
|
</div>
|
||
|
|
<div class="catering-check">✓</div>
|
||
|
|
</div>
|
||
|
|
<div class="catering-content">
|
||
|
|
<div class="catering-name">Premium Package</div>
|
||
|
|
<div class="catering-description">Gourmet appetizers, wine & champagne</div>
|
||
|
|
<div class="catering-features">
|
||
|
|
<span class="catering-feature">Chef-prepared</span>
|
||
|
|
<span class="catering-feature">Wine selection</span>
|
||
|
|
<span class="catering-feature">Champagne</span>
|
||
|
|
</div>
|
||
|
|
<div class="catering-price">+$650</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="catering-card" data-catering="full" data-price="1200">
|
||
|
|
<div class="catering-image">
|
||
|
|
<img src="https://images.unsplash.com/photo-1544025162-d76694265947?w=400&h=300&fit=crop" alt="Full Dining">
|
||
|
|
<div class="catering-gradient">
|
||
|
|
<i data-lucide="utensils"></i>
|
||
|
|
</div>
|
||
|
|
<div class="catering-check">✓</div>
|
||
|
|
</div>
|
||
|
|
<div class="catering-content">
|
||
|
|
<div class="catering-name">Full Dining Experience</div>
|
||
|
|
<div class="catering-description">3-course meal with premium bar</div>
|
||
|
|
<div class="catering-features">
|
||
|
|
<span class="catering-feature">Private chef</span>
|
||
|
|
<span class="catering-feature">Full bar</span>
|
||
|
|
<span class="catering-feature">Desserts</span>
|
||
|
|
</div>
|
||
|
|
<div class="catering-price">+$1,200</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Add-on Services -->
|
||
|
|
<div class="customize-section">
|
||
|
|
<div class="section-header">
|
||
|
|
<div class="section-icon">
|
||
|
|
<i data-lucide="star"></i>
|
||
|
|
</div>
|
||
|
|
<h2 class="section-title">Premium Add-ons</h2>
|
||
|
|
</div>
|
||
|
|
<p class="section-description">
|
||
|
|
Enhance your charter with these exclusive services
|
||
|
|
</p>
|
||
|
|
<div class="addon-grid">
|
||
|
|
<div class="addon-card" data-addon="photographer" data-price="450">
|
||
|
|
<div class="addon-icon">
|
||
|
|
<i data-lucide="camera"></i>
|
||
|
|
</div>
|
||
|
|
<div class="addon-content">
|
||
|
|
<div class="addon-header">
|
||
|
|
<span class="addon-name">Professional Photographer</span>
|
||
|
|
</div>
|
||
|
|
<div class="addon-description">
|
||
|
|
Capture your memories with a professional photographer for 2 hours
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="addon-price">+$450</div>
|
||
|
|
<div class="addon-toggle"></div>
|
||
|
|
</div>
|
||
|
|
<div class="addon-card" data-addon="decorations" data-price="200">
|
||
|
|
<div class="addon-icon">
|
||
|
|
<i data-lucide="sparkles"></i>
|
||
|
|
</div>
|
||
|
|
<div class="addon-content">
|
||
|
|
<div class="addon-header">
|
||
|
|
<span class="addon-name">Special Decorations</span>
|
||
|
|
</div>
|
||
|
|
<div class="addon-description">
|
||
|
|
Custom decorations for birthdays, anniversaries, or proposals
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="addon-price">+$200</div>
|
||
|
|
<div class="addon-toggle"></div>
|
||
|
|
</div>
|
||
|
|
<div class="addon-card" data-addon="watersports" data-price="350">
|
||
|
|
<div class="addon-icon">
|
||
|
|
<i data-lucide="anchor"></i>
|
||
|
|
</div>
|
||
|
|
<div class="addon-content">
|
||
|
|
<div class="addon-header">
|
||
|
|
<span class="addon-name">Water Sports Package</span>
|
||
|
|
</div>
|
||
|
|
<div class="addon-description">
|
||
|
|
Kayaks, paddleboards, and snorkeling equipment
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="addon-price">+$350</div>
|
||
|
|
<div class="addon-toggle"></div>
|
||
|
|
</div>
|
||
|
|
<div class="addon-card" data-addon="fishing" data-price="250">
|
||
|
|
<div class="addon-icon">
|
||
|
|
<i data-lucide="fish"></i>
|
||
|
|
</div>
|
||
|
|
<div class="addon-content">
|
||
|
|
<div class="addon-header">
|
||
|
|
<span class="addon-name">Fishing Equipment</span>
|
||
|
|
</div>
|
||
|
|
<div class="addon-description">
|
||
|
|
Professional fishing gear and bait included
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="addon-price">+$250</div>
|
||
|
|
<div class="addon-toggle"></div>
|
||
|
|
</div>
|
||
|
|
<div class="addon-card" data-addon="music" data-price="150">
|
||
|
|
<div class="addon-icon">
|
||
|
|
<i data-lucide="music"></i>
|
||
|
|
</div>
|
||
|
|
<div class="addon-content">
|
||
|
|
<div class="addon-header">
|
||
|
|
<span class="addon-name">Live Music/DJ</span>
|
||
|
|
</div>
|
||
|
|
<div class="addon-description">
|
||
|
|
Premium sound system with DJ service or live musician
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="addon-price">+$150</div>
|
||
|
|
<div class="addon-toggle"></div>
|
||
|
|
</div>
|
||
|
|
<div class="addon-card" data-addon="transfer" data-price="300">
|
||
|
|
<div class="addon-icon">
|
||
|
|
<i data-lucide="car"></i>
|
||
|
|
</div>
|
||
|
|
<div class="addon-content">
|
||
|
|
<div class="addon-header">
|
||
|
|
<span class="addon-name">Hotel Transfer</span>
|
||
|
|
</div>
|
||
|
|
<div class="addon-description">
|
||
|
|
Round-trip luxury transportation from your hotel
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="addon-price">+$300</div>
|
||
|
|
<div class="addon-toggle"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Special Occasion -->
|
||
|
|
<div class="customize-section">
|
||
|
|
<div class="section-header">
|
||
|
|
<div class="section-icon">
|
||
|
|
<i data-lucide="gift"></i>
|
||
|
|
</div>
|
||
|
|
<h2 class="section-title">Special Occasion?</h2>
|
||
|
|
</div>
|
||
|
|
<p class="section-description">
|
||
|
|
Let us know if you're celebrating something special
|
||
|
|
</p>
|
||
|
|
<div class="occasion-grid">
|
||
|
|
<button class="occasion-tag" data-occasion="birthday">
|
||
|
|
<span>🎂 Birthday</span>
|
||
|
|
</button>
|
||
|
|
<button class="occasion-tag" data-occasion="anniversary">
|
||
|
|
<span>💑 Anniversary</span>
|
||
|
|
</button>
|
||
|
|
<button class="occasion-tag" data-occasion="proposal">
|
||
|
|
<span>💍 Proposal</span>
|
||
|
|
</button>
|
||
|
|
<button class="occasion-tag" data-occasion="corporate">
|
||
|
|
<span>💼 Corporate Event</span>
|
||
|
|
</button>
|
||
|
|
<button class="occasion-tag" data-occasion="graduation">
|
||
|
|
<span>🎓 Graduation</span>
|
||
|
|
</button>
|
||
|
|
<button class="occasion-tag" data-occasion="reunion">
|
||
|
|
<span>👥 Reunion</span>
|
||
|
|
</button>
|
||
|
|
<button class="occasion-tag" data-occasion="date">
|
||
|
|
<span>❤️ Romantic Date</span>
|
||
|
|
</button>
|
||
|
|
<button class="occasion-tag" data-occasion="other">
|
||
|
|
<span>🎉 Other Celebration</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Special Requests -->
|
||
|
|
<div class="customize-section">
|
||
|
|
<div class="section-header">
|
||
|
|
<div class="section-icon">
|
||
|
|
<i data-lucide="message-square"></i>
|
||
|
|
</div>
|
||
|
|
<h2 class="section-title">Special Requests</h2>
|
||
|
|
</div>
|
||
|
|
<p class="section-description">
|
||
|
|
Any special requests or things we should know about?
|
||
|
|
</p>
|
||
|
|
<textarea class="special-requests" placeholder="Tell us about any dietary restrictions, special arrangements, or other requests..."></textarea>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Navigation Buttons -->
|
||
|
|
<div class="booking-navigation">
|
||
|
|
<button class="btn-nav btn-back" onclick="window.location.href='charter-booking-2.html'">
|
||
|
|
<i data-lucide="arrow-left"></i>
|
||
|
|
Back to Yacht Selection
|
||
|
|
</button>
|
||
|
|
<button class="btn-nav btn-continue" onclick="window.location.href='charter-booking-4.html'">
|
||
|
|
Continue to Confirmation
|
||
|
|
<i data-lucide="arrow-right"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Sidebar Summary -->
|
||
|
|
<aside class="booking-sidebar">
|
||
|
|
<div class="booking-summary">
|
||
|
|
<div class="summary-header">
|
||
|
|
<div class="summary-icon">
|
||
|
|
<i data-lucide="clipboard-list"></i>
|
||
|
|
</div>
|
||
|
|
<h3 class="summary-title">Booking Summary</h3>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="summary-section">
|
||
|
|
<div class="summary-label">Date & Time</div>
|
||
|
|
<div class="summary-value">
|
||
|
|
<i data-lucide="calendar"></i>
|
||
|
|
Saturday, March 15, 2024
|
||
|
|
</div>
|
||
|
|
<div class="summary-value">
|
||
|
|
<i data-lucide="clock"></i>
|
||
|
|
2:00 PM - 6:00 PM
|
||
|
|
</div>
|
||
|
|
<div class="summary-value">
|
||
|
|
<i data-lucide="timer"></i>
|
||
|
|
4 hours charter
|
||
|
|
</div>
|
||
|
|
<div class="summary-value">
|
||
|
|
<i data-lucide="users"></i>
|
||
|
|
6 guests
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="summary-section">
|
||
|
|
<div class="summary-label">Selected Yacht</div>
|
||
|
|
<div class="summary-value" id="selectedYachtName">
|
||
|
|
<i data-lucide="sailboat"></i>
|
||
|
|
<span>Loading...</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="summary-section">
|
||
|
|
<div class="summary-label">Selected Route</div>
|
||
|
|
<div class="summary-value" id="selectedRoute">
|
||
|
|
<i data-lucide="map"></i>
|
||
|
|
<span>No route selected</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="summary-section">
|
||
|
|
<div class="summary-label">Catering</div>
|
||
|
|
<div id="selectedCatering">
|
||
|
|
<div class="summary-value">
|
||
|
|
<i data-lucide="utensils"></i>
|
||
|
|
<span>No catering selected</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="summary-section" id="addonsSummary">
|
||
|
|
<div class="summary-label">Add-ons</div>
|
||
|
|
<div id="selectedAddons">
|
||
|
|
<div class="summary-value" style="color: #64748B;">
|
||
|
|
No add-ons selected
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="summary-total">
|
||
|
|
<div class="total-row">
|
||
|
|
<span class="total-label">Yacht (4 hours)</span>
|
||
|
|
<span class="total-value" id="yachtPrice">$2,800</span>
|
||
|
|
</div>
|
||
|
|
<div class="total-row">
|
||
|
|
<span class="total-label">Catering</span>
|
||
|
|
<span class="total-value" id="cateringPrice">$0</span>
|
||
|
|
</div>
|
||
|
|
<div class="total-row">
|
||
|
|
<span class="total-label">Add-ons</span>
|
||
|
|
<span class="total-value" id="addonsPrice">$0</span>
|
||
|
|
</div>
|
||
|
|
<div class="total-row">
|
||
|
|
<span class="total-label" style="font-size: 1.1rem; font-weight: 700;">Total</span>
|
||
|
|
<span class="total-final" id="totalPrice">$2,800</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="help-section" style="margin-top: 2rem; padding: 1.75rem; background: linear-gradient(135deg, rgba(240, 249, 255, 0.5), rgba(255, 255, 255, 0.8)); border: 1px solid rgba(220, 20, 60, 0.08); border-radius: 16px; box-shadow: 0 4px 12px rgba(0, 31, 63, 0.04);">
|
||
|
|
<h4 style="margin-bottom: 0.75rem; color: #001f3f; font-family: 'Playfair Display', serif; font-size: 1.1rem;">Need Assistance?</h4>
|
||
|
|
<p style="color: #475569; margin-bottom: 1.25rem; font-size: 0.95rem;">Our experienced crew is ready to help with your charter</p>
|
||
|
|
<button style="width: 100%; padding: 0.875rem; background: linear-gradient(135deg, #dc143c, #ef4444); color: white; border: none; border-radius: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(220, 20, 60, 0.2);" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 20px rgba(220, 20, 60, 0.3)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px rgba(220, 20, 60, 0.2)';">
|
||
|
|
<i data-lucide="phone"></i>
|
||
|
|
(415) 555-0123
|
||
|
|
</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 experiences</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="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="mail" class="footer-icon"></i> hello@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();
|
||
|
|
|
||
|
|
// Navigation scroll effect
|
||
|
|
const nav = document.getElementById('voyageNav');
|
||
|
|
|
||
|
|
// Add scrolled class immediately since we don't have a transparent hero
|
||
|
|
nav.classList.add('scrolled');
|
||
|
|
|
||
|
|
// Handle scroll for additional effects if needed
|
||
|
|
window.addEventListener('scroll', () => {
|
||
|
|
if (window.scrollY > 50) {
|
||
|
|
nav.classList.add('scrolled');
|
||
|
|
} else {
|
||
|
|
// Keep it scrolled since we need white background
|
||
|
|
nav.classList.add('scrolled');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Get selected yacht from localStorage
|
||
|
|
const selectedYacht = JSON.parse(localStorage.getItem('selectedYacht') || '{}');
|
||
|
|
const basePrice = selectedYacht.price || 2800;
|
||
|
|
|
||
|
|
// Update yacht name in summary
|
||
|
|
const yachtNameElement = document.querySelector('#selectedYachtName span');
|
||
|
|
if (yachtNameElement && selectedYacht.name) {
|
||
|
|
yachtNameElement.textContent = selectedYacht.name;
|
||
|
|
}
|
||
|
|
document.getElementById('yachtPrice').textContent = `$${basePrice.toLocaleString()}`;
|
||
|
|
|
||
|
|
// Track selected items
|
||
|
|
let selectedRoute = null;
|
||
|
|
let selectedCatering = null;
|
||
|
|
let selectedAddons = [];
|
||
|
|
let selectedOccasions = [];
|
||
|
|
let cateringPrice = 0;
|
||
|
|
let addonsPrice = 0;
|
||
|
|
|
||
|
|
// Route selection
|
||
|
|
const routeCards = document.querySelectorAll('.route-card');
|
||
|
|
routeCards.forEach(card => {
|
||
|
|
card.addEventListener('click', function() {
|
||
|
|
routeCards.forEach(c => c.classList.remove('selected'));
|
||
|
|
this.classList.add('selected');
|
||
|
|
|
||
|
|
selectedRoute = {
|
||
|
|
id: this.dataset.route,
|
||
|
|
name: this.querySelector('.route-name').textContent
|
||
|
|
};
|
||
|
|
|
||
|
|
// Update summary
|
||
|
|
document.querySelector('#selectedRoute span').textContent = selectedRoute.name;
|
||
|
|
updateSummary();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Catering selection
|
||
|
|
const cateringCards = document.querySelectorAll('.catering-card');
|
||
|
|
cateringCards.forEach(card => {
|
||
|
|
card.addEventListener('click', function() {
|
||
|
|
cateringCards.forEach(c => c.classList.remove('selected'));
|
||
|
|
this.classList.add('selected');
|
||
|
|
|
||
|
|
selectedCatering = {
|
||
|
|
id: this.dataset.catering,
|
||
|
|
name: this.querySelector('.catering-name').textContent,
|
||
|
|
price: parseInt(this.dataset.price)
|
||
|
|
};
|
||
|
|
|
||
|
|
cateringPrice = selectedCatering.price;
|
||
|
|
|
||
|
|
// Update summary
|
||
|
|
const cateringDiv = document.getElementById('selectedCatering');
|
||
|
|
if (selectedCatering.price > 0) {
|
||
|
|
cateringDiv.innerHTML = `
|
||
|
|
<div class="summary-addon">
|
||
|
|
<span class="summary-addon-name">${selectedCatering.name}</span>
|
||
|
|
<span class="summary-addon-price">+$${selectedCatering.price}</span>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
} else {
|
||
|
|
cateringDiv.innerHTML = `
|
||
|
|
<div class="summary-value">
|
||
|
|
<i data-lucide="utensils"></i>
|
||
|
|
<span>No catering (BYO)</span>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
|
||
|
|
updateSummary();
|
||
|
|
lucide.createIcons();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Add-on selection
|
||
|
|
const addonCards = document.querySelectorAll('.addon-card');
|
||
|
|
addonCards.forEach(card => {
|
||
|
|
card.addEventListener('click', function() {
|
||
|
|
this.classList.toggle('selected');
|
||
|
|
|
||
|
|
const addon = {
|
||
|
|
id: this.dataset.addon,
|
||
|
|
name: this.querySelector('.addon-name').textContent,
|
||
|
|
price: parseInt(this.dataset.price)
|
||
|
|
};
|
||
|
|
|
||
|
|
if (this.classList.contains('selected')) {
|
||
|
|
selectedAddons.push(addon);
|
||
|
|
} else {
|
||
|
|
const index = selectedAddons.findIndex(a => a.id === addon.id);
|
||
|
|
if (index > -1) {
|
||
|
|
selectedAddons.splice(index, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Calculate total addons price
|
||
|
|
addonsPrice = selectedAddons.reduce((sum, a) => sum + a.price, 0);
|
||
|
|
|
||
|
|
// Update addons summary
|
||
|
|
const addonsDiv = document.getElementById('selectedAddons');
|
||
|
|
if (selectedAddons.length > 0) {
|
||
|
|
let html = '';
|
||
|
|
selectedAddons.forEach(addon => {
|
||
|
|
html += `
|
||
|
|
<div class="summary-addon">
|
||
|
|
<span class="summary-addon-name">${addon.name}</span>
|
||
|
|
<span class="summary-addon-price">+$${addon.price}</span>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
});
|
||
|
|
addonsDiv.innerHTML = html;
|
||
|
|
} else {
|
||
|
|
addonsDiv.innerHTML = '<div class="summary-value" style="color: #64748B;">No add-ons selected</div>';
|
||
|
|
}
|
||
|
|
|
||
|
|
updateSummary();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Occasion tags
|
||
|
|
const occasionTags = document.querySelectorAll('.occasion-tag');
|
||
|
|
occasionTags.forEach(tag => {
|
||
|
|
tag.addEventListener('click', function() {
|
||
|
|
this.classList.toggle('selected');
|
||
|
|
|
||
|
|
const occasion = this.dataset.occasion;
|
||
|
|
if (this.classList.contains('selected')) {
|
||
|
|
selectedOccasions.push(occasion);
|
||
|
|
} else {
|
||
|
|
const index = selectedOccasions.indexOf(occasion);
|
||
|
|
if (index > -1) {
|
||
|
|
selectedOccasions.splice(index, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Update summary totals
|
||
|
|
function updateSummary() {
|
||
|
|
document.getElementById('cateringPrice').textContent = `$${cateringPrice}`;
|
||
|
|
document.getElementById('addonsPrice').textContent = `$${addonsPrice}`;
|
||
|
|
const total = basePrice + cateringPrice + addonsPrice;
|
||
|
|
document.getElementById('totalPrice').textContent = `$${total.toLocaleString()}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Continue button - save selections
|
||
|
|
document.querySelector('.btn-continue').addEventListener('click', function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
const customizations = {
|
||
|
|
route: selectedRoute,
|
||
|
|
catering: selectedCatering,
|
||
|
|
addons: selectedAddons,
|
||
|
|
occasions: selectedOccasions,
|
||
|
|
specialRequests: document.querySelector('.special-requests').value,
|
||
|
|
cateringPrice: cateringPrice,
|
||
|
|
addonsPrice: addonsPrice,
|
||
|
|
totalPrice: basePrice + cateringPrice + addonsPrice
|
||
|
|
};
|
||
|
|
|
||
|
|
localStorage.setItem('customizations', JSON.stringify(customizations));
|
||
|
|
window.location.href = 'charter-booking-4.html';
|
||
|
|
});
|
||
|
|
|
||
|
|
// Select first route by default
|
||
|
|
if (routeCards.length > 0) {
|
||
|
|
routeCards[0].click();
|
||
|
|
}
|
||
|
|
|
||
|
|
// Select no catering by default
|
||
|
|
if (cateringCards.length > 0) {
|
||
|
|
cateringCards[0].click();
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|