1435 lines
51 KiB
HTML
1435 lines
51 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Select Your Yacht - 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;
|
||
|
|
--emerald: #10B981;
|
||
|
|
--amber: #F59E0B;
|
||
|
|
--ruby: #EF4444;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Hero Section */
|
||
|
|
.selection-hero {
|
||
|
|
background-image: url('public/golden_gate.jpg');
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
background-attachment: fixed;
|
||
|
|
padding: 120px 0 60px;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.selection-hero::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
background: linear-gradient(135deg,
|
||
|
|
rgba(15, 23, 42, 0.85) 0%,
|
||
|
|
rgba(30, 58, 95, 0.75) 50%,
|
||
|
|
rgba(15, 23, 42, 0.85) 100%);
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.selection-hero::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="white" stroke-width="0.5" opacity="0.05"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-content {
|
||
|
|
position: relative;
|
||
|
|
z-index: 2;
|
||
|
|
text-align: center;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Navigation styling for transparent state */
|
||
|
|
.voyage-nav {
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.voyage-nav:not(.scrolled) {
|
||
|
|
background: transparent !important;
|
||
|
|
padding: 2rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.voyage-nav:not(.scrolled) .nav-brand,
|
||
|
|
.voyage-nav:not(.scrolled) .nav-brand span,
|
||
|
|
.voyage-nav:not(.scrolled) .nav-link {
|
||
|
|
color: white !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.voyage-nav:not(.scrolled) .nav-link:hover {
|
||
|
|
color: rgba(255, 255, 255, 0.8) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.voyage-nav:not(.scrolled) .theme-btn {
|
||
|
|
color: white;
|
||
|
|
border-color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Navigation styling for scrolled state */
|
||
|
|
.voyage-nav.scrolled {
|
||
|
|
background: rgba(255, 255, 255, 0.95) !important;
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||
|
|
padding: 1rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.voyage-nav.scrolled .nav-brand,
|
||
|
|
.voyage-nav.scrolled .nav-brand span,
|
||
|
|
.voyage-nav.scrolled .nav-link {
|
||
|
|
color: #001f3f !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.voyage-nav.scrolled .nav-link:hover {
|
||
|
|
color: #dc143c !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.voyage-nav.scrolled .theme-btn {
|
||
|
|
color: #001f3f;
|
||
|
|
border-color: #001f3f;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-content h1 {
|
||
|
|
font-size: 3.5rem;
|
||
|
|
font-weight: 300;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
font-family: 'Playfair Display', serif;
|
||
|
|
animation: fadeInUp 0.8s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hero-content p {
|
||
|
|
font-size: 1.25rem;
|
||
|
|
opacity: 0.9;
|
||
|
|
max-width: 600px;
|
||
|
|
margin: 0 auto;
|
||
|
|
animation: fadeInUp 0.8s ease 0.2s both;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Progress Bar */
|
||
|
|
.progress-container {
|
||
|
|
max-width: 800px;
|
||
|
|
margin: -30px auto 60px;
|
||
|
|
padding: 0 20px;
|
||
|
|
position: relative;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress-track {
|
||
|
|
background: white;
|
||
|
|
border-radius: 100px;
|
||
|
|
padding: 25px 35px;
|
||
|
|
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, #10B981, #0066CC);
|
||
|
|
width: 33%;
|
||
|
|
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: 45px;
|
||
|
|
height: 45px;
|
||
|
|
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.completed .step-circle {
|
||
|
|
background: #10B981;
|
||
|
|
border-color: #10B981;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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);
|
||
|
|
}
|
||
|
|
|
||
|
|
.step-label {
|
||
|
|
font-size: 0.875rem;
|
||
|
|
color: #6B7280;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress-step.active .step-label,
|
||
|
|
.progress-step.completed .step-label {
|
||
|
|
color: #0066CC;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Filter Section */
|
||
|
|
.filter-bar {
|
||
|
|
background: white;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 16px;
|
||
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||
|
|
margin-bottom: 40px;
|
||
|
|
display: flex;
|
||
|
|
gap: 20px;
|
||
|
|
align-items: center;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.filter-group {
|
||
|
|
display: flex;
|
||
|
|
gap: 10px;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.filter-label {
|
||
|
|
font-size: 0.875rem;
|
||
|
|
color: #6B7280;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.filter-btn {
|
||
|
|
padding: 8px 16px;
|
||
|
|
background: white;
|
||
|
|
border: 2px solid #E5E7EB;
|
||
|
|
border-radius: 8px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
font-size: 0.875rem;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.filter-btn:hover {
|
||
|
|
border-color: #0066CC;
|
||
|
|
color: #0066CC;
|
||
|
|
}
|
||
|
|
|
||
|
|
.filter-btn.active {
|
||
|
|
background: #0066CC;
|
||
|
|
border-color: #0066CC;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.comparison-toggle {
|
||
|
|
margin-left: auto;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggle-switch {
|
||
|
|
position: relative;
|
||
|
|
width: 50px;
|
||
|
|
height: 26px;
|
||
|
|
background: #E5E7EB;
|
||
|
|
border-radius: 34px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: background 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggle-switch.active {
|
||
|
|
background: #0066CC;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggle-slider {
|
||
|
|
position: absolute;
|
||
|
|
top: 3px;
|
||
|
|
left: 3px;
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
background: white;
|
||
|
|
border-radius: 50%;
|
||
|
|
transition: transform 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toggle-switch.active .toggle-slider {
|
||
|
|
transform: translateX(24px);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Main Layout */
|
||
|
|
.selection-container {
|
||
|
|
max-width: 1400px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 0 20px 80px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Yacht Grid */
|
||
|
|
.yacht-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
|
||
|
|
gap: 30px;
|
||
|
|
margin-bottom: 60px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Yacht Card */
|
||
|
|
.yacht-card {
|
||
|
|
background: white;
|
||
|
|
border-radius: 20px;
|
||
|
|
overflow: hidden;
|
||
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
|
||
|
|
transition: all 0.4s ease;
|
||
|
|
cursor: pointer;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.yacht-card:hover {
|
||
|
|
transform: translateY(-8px);
|
||
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
|
||
|
|
}
|
||
|
|
|
||
|
|
.yacht-card.selected {
|
||
|
|
border: 3px solid #0066CC;
|
||
|
|
box-shadow: 0 20px 60px rgba(0, 102, 204, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.yacht-card.selected::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 20px;
|
||
|
|
right: 20px;
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
background: linear-gradient(135deg, #0066CC, #0052A3);
|
||
|
|
border-radius: 50%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
z-index: 10;
|
||
|
|
animation: scaleIn 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.yacht-card.selected::before {
|
||
|
|
content: '✓';
|
||
|
|
position: absolute;
|
||
|
|
top: 20px;
|
||
|
|
right: 20px;
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: white;
|
||
|
|
font-size: 24px;
|
||
|
|
font-weight: bold;
|
||
|
|
z-index: 11;
|
||
|
|
animation: scaleIn 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Featured Badge */
|
||
|
|
.featured-badge {
|
||
|
|
position: absolute;
|
||
|
|
top: 20px;
|
||
|
|
left: 20px;
|
||
|
|
background: linear-gradient(135deg, var(--luxury-gold), #B8961F);
|
||
|
|
color: white;
|
||
|
|
padding: 6px 16px;
|
||
|
|
border-radius: 30px;
|
||
|
|
font-size: 0.75rem;
|
||
|
|
font-weight: 600;
|
||
|
|
z-index: 10;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 6px;
|
||
|
|
animation: slideInLeft 0.5s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Yacht Image */
|
||
|
|
.yacht-image {
|
||
|
|
height: 260px;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.yacht-image img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
object-fit: cover;
|
||
|
|
transition: transform 0.5s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.yacht-card:hover .yacht-image img {
|
||
|
|
transform: scale(1.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.availability-badge {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 20px;
|
||
|
|
left: 20px;
|
||
|
|
padding: 8px 16px;
|
||
|
|
border-radius: 30px;
|
||
|
|
font-size: 0.875rem;
|
||
|
|
font-weight: 600;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 6px;
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.availability-badge.available {
|
||
|
|
background: rgba(16, 185, 129, 0.9);
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.availability-badge.limited {
|
||
|
|
background: rgba(245, 158, 11, 0.9);
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.availability-badge.booked {
|
||
|
|
background: rgba(239, 68, 68, 0.9);
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.availability-dot {
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
background: white;
|
||
|
|
border-radius: 50%;
|
||
|
|
animation: pulse 2s infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Yacht Details */
|
||
|
|
.yacht-details {
|
||
|
|
padding: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.yacht-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: start;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.yacht-info h3 {
|
||
|
|
font-size: 1.75rem;
|
||
|
|
font-weight: 700;
|
||
|
|
color: var(--deep-navy);
|
||
|
|
margin-bottom: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.yacht-type {
|
||
|
|
display: inline-block;
|
||
|
|
padding: 4px 12px;
|
||
|
|
background: #E0F2FE;
|
||
|
|
color: #0066CC;
|
||
|
|
border-radius: 20px;
|
||
|
|
font-size: 0.875rem;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.yacht-rating {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 6px;
|
||
|
|
color: var(--amber);
|
||
|
|
}
|
||
|
|
|
||
|
|
.yacht-specs {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(3, 1fr);
|
||
|
|
gap: 15px;
|
||
|
|
margin: 20px 0;
|
||
|
|
padding: 20px 0;
|
||
|
|
border-top: 1px solid #E5E7EB;
|
||
|
|
border-bottom: 1px solid #E5E7EB;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spec-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spec-icon {
|
||
|
|
width: 32px;
|
||
|
|
height: 32px;
|
||
|
|
background: #F3F4F6;
|
||
|
|
border-radius: 8px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: #6B7280;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spec-text {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spec-value {
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--deep-navy);
|
||
|
|
}
|
||
|
|
|
||
|
|
.spec-label {
|
||
|
|
font-size: 0.75rem;
|
||
|
|
color: #6B7280;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Amenities */
|
||
|
|
.yacht-amenities {
|
||
|
|
margin: 20px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.amenities-title {
|
||
|
|
font-size: 0.875rem;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #6B7280;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.amenities-grid {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.amenity-tag {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 6px;
|
||
|
|
padding: 6px 12px;
|
||
|
|
background: #F9FAFB;
|
||
|
|
border-radius: 8px;
|
||
|
|
font-size: 0.875rem;
|
||
|
|
color: #4B5563;
|
||
|
|
}
|
||
|
|
|
||
|
|
.amenity-tag svg {
|
||
|
|
width: 16px;
|
||
|
|
height: 16px;
|
||
|
|
color: #10B981;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Pricing */
|
||
|
|
.yacht-pricing {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding-top: 20px;
|
||
|
|
border-top: 1px solid #E5E7EB;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-display {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-label {
|
||
|
|
font-size: 0.875rem;
|
||
|
|
color: #6B7280;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-amount {
|
||
|
|
font-size: 2rem;
|
||
|
|
font-weight: 700;
|
||
|
|
background: linear-gradient(135deg, #0066CC, var(--luxury-gold));
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.select-btn {
|
||
|
|
padding: 12px 24px;
|
||
|
|
background: linear-gradient(135deg, #0066CC, #0052A3);
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
border-radius: 12px;
|
||
|
|
font-weight: 600;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.select-btn:hover {
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: 0 8px 24px rgba(0, 102, 204, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.yacht-card.selected .select-btn {
|
||
|
|
background: linear-gradient(135deg, #10B981, #059669);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Comparison Table */
|
||
|
|
.comparison-section {
|
||
|
|
background: white;
|
||
|
|
border-radius: 20px;
|
||
|
|
padding: 40px;
|
||
|
|
margin-bottom: 40px;
|
||
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.comparison-section.active {
|
||
|
|
display: block;
|
||
|
|
animation: slideInUp 0.5s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.comparison-header {
|
||
|
|
font-size: 1.5rem;
|
||
|
|
font-weight: 700;
|
||
|
|
color: var(--deep-navy);
|
||
|
|
margin-bottom: 30px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.comparison-table {
|
||
|
|
width: 100%;
|
||
|
|
border-collapse: separate;
|
||
|
|
border-spacing: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.comparison-table th {
|
||
|
|
background: linear-gradient(135deg, #F9FAFB, #F3F4F6);
|
||
|
|
padding: 15px;
|
||
|
|
text-align: left;
|
||
|
|
font-weight: 600;
|
||
|
|
color: var(--deep-navy);
|
||
|
|
border-bottom: 2px solid #E5E7EB;
|
||
|
|
}
|
||
|
|
|
||
|
|
.comparison-table th:first-child {
|
||
|
|
border-top-left-radius: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.comparison-table th:last-child {
|
||
|
|
border-top-right-radius: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.comparison-table td {
|
||
|
|
padding: 15px;
|
||
|
|
border-bottom: 1px solid #E5E7EB;
|
||
|
|
color: #4B5563;
|
||
|
|
}
|
||
|
|
|
||
|
|
.comparison-table tr:last-child td {
|
||
|
|
border-bottom: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.comparison-table tr:hover {
|
||
|
|
background: #F9FAFB;
|
||
|
|
}
|
||
|
|
|
||
|
|
.comparison-highlight {
|
||
|
|
background: #E0F2FE;
|
||
|
|
color: #0066CC;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Navigation */
|
||
|
|
.navigation-section {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 40px;
|
||
|
|
background: white;
|
||
|
|
border-radius: 20px;
|
||
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-btn {
|
||
|
|
padding: 16px 32px;
|
||
|
|
border-radius: 12px;
|
||
|
|
font-weight: 600;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 10px;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-btn.secondary {
|
||
|
|
background: white;
|
||
|
|
color: #6B7280;
|
||
|
|
border: 2px solid #E5E7EB;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-btn.secondary:hover {
|
||
|
|
border-color: #0066CC;
|
||
|
|
color: #0066CC;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-btn.primary {
|
||
|
|
background: linear-gradient(135deg, #0066CC, #0052A3);
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-btn.primary:hover {
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: 0 8px 24px rgba(0, 102, 204, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-btn.primary:disabled {
|
||
|
|
opacity: 0.5;
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Animations */
|
||
|
|
@keyframes fadeInUp {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(30px);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes slideInLeft {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateX(-20px);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateX(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes slideInUp {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(20px);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes scaleIn {
|
||
|
|
from {
|
||
|
|
transform: scale(0);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: scale(1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes pulse {
|
||
|
|
0%, 100% {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Responsive Design */
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.selection-hero h1 {
|
||
|
|
font-size: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.yacht-grid {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
|
||
|
|
.filter-bar {
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: stretch;
|
||
|
|
}
|
||
|
|
|
||
|
|
.comparison-toggle {
|
||
|
|
margin-left: 0;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.yacht-specs {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
|
||
|
|
.navigation-section {
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-btn {
|
||
|
|
width: 100%;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</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>
|
||
|
|
|
||
|
|
<!-- Hero Section -->
|
||
|
|
<section class="selection-hero">
|
||
|
|
<div class="container">
|
||
|
|
<div class="hero-content">
|
||
|
|
<h1>Choose Your Perfect Yacht</h1>
|
||
|
|
<p>Discover our exclusive collection of luxury yachts, each offering a unique experience on the San Francisco Bay</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Progress Indicator -->
|
||
|
|
<div class="progress-container">
|
||
|
|
<div class="progress-track">
|
||
|
|
<div class="progress-line">
|
||
|
|
<div class="progress-line-fill"></div>
|
||
|
|
</div>
|
||
|
|
<div class="progress-step completed">
|
||
|
|
<div class="step-circle">✓</div>
|
||
|
|
<div class="step-label">Date & Time</div>
|
||
|
|
</div>
|
||
|
|
<div class="progress-step active">
|
||
|
|
<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 Content -->
|
||
|
|
<div class="selection-container">
|
||
|
|
<!-- Filter Bar -->
|
||
|
|
<div class="filter-bar">
|
||
|
|
<div class="filter-group">
|
||
|
|
<span class="filter-label">Type:</span>
|
||
|
|
<button class="filter-btn active" data-filter="all">All Yachts</button>
|
||
|
|
<button class="filter-btn" data-filter="motor">Motor Yacht</button>
|
||
|
|
<button class="filter-btn" data-filter="sailing">Sailing</button>
|
||
|
|
<button class="filter-btn" data-filter="catamaran">Catamaran</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="filter-group">
|
||
|
|
<span class="filter-label">Capacity:</span>
|
||
|
|
<button class="filter-btn" data-filter="small">2-6 Guests</button>
|
||
|
|
<button class="filter-btn" data-filter="medium">7-12 Guests</button>
|
||
|
|
<button class="filter-btn" data-filter="large">13+ Guests</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="comparison-toggle">
|
||
|
|
<span class="filter-label">Compare</span>
|
||
|
|
<div class="toggle-switch" id="compareToggle">
|
||
|
|
<div class="toggle-slider"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Comparison Table -->
|
||
|
|
<div class="comparison-section" id="comparisonSection">
|
||
|
|
<h2 class="comparison-header">Yacht Comparison</h2>
|
||
|
|
<table class="comparison-table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Features</th>
|
||
|
|
<th>Azure Dream</th>
|
||
|
|
<th>Ocean Majesty</th>
|
||
|
|
<th>Wind Dancer</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td><strong>Type</strong></td>
|
||
|
|
<td>Motor Yacht</td>
|
||
|
|
<td>Super Yacht</td>
|
||
|
|
<td>Sailing Yacht</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>Capacity</strong></td>
|
||
|
|
<td>12 guests</td>
|
||
|
|
<td class="comparison-highlight">20 guests</td>
|
||
|
|
<td>8 guests</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>Length</strong></td>
|
||
|
|
<td>85 feet</td>
|
||
|
|
<td class="comparison-highlight">120 feet</td>
|
||
|
|
<td>65 feet</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>Crew</strong></td>
|
||
|
|
<td>8 members</td>
|
||
|
|
<td class="comparison-highlight">15 members</td>
|
||
|
|
<td>4 members</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>Amenities</strong></td>
|
||
|
|
<td>WiFi, Jet Ski, Chef</td>
|
||
|
|
<td class="comparison-highlight">Helicopter Pad, Spa, Pool</td>
|
||
|
|
<td>WiFi, Kitchen, Snorkeling</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>Price (4 hours)</strong></td>
|
||
|
|
<td>$6,000</td>
|
||
|
|
<td class="comparison-highlight">$14,000</td>
|
||
|
|
<td>$3,400</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Yacht Grid -->
|
||
|
|
<div class="yacht-grid">
|
||
|
|
<!-- Azure Dream -->
|
||
|
|
<div class="yacht-card" data-yacht="azure-dream" data-price="6000" data-type="motor" data-capacity="medium">
|
||
|
|
<div class="featured-badge">
|
||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
|
||
|
|
</svg>
|
||
|
|
Featured
|
||
|
|
</div>
|
||
|
|
<div class="yacht-image">
|
||
|
|
<img src="https://images.unsplash.com/photo-1544551763-46a013bb70d5?w=800&h=600&fit=crop" alt="Azure Dream">
|
||
|
|
<div class="availability-badge available">
|
||
|
|
<div class="availability-dot"></div>
|
||
|
|
Available
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="yacht-details">
|
||
|
|
<div class="yacht-header">
|
||
|
|
<div class="yacht-info">
|
||
|
|
<h3>Azure Dream</h3>
|
||
|
|
<span class="yacht-type">Motor Yacht</span>
|
||
|
|
</div>
|
||
|
|
<div class="yacht-rating">
|
||
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||
|
|
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
|
||
|
|
</svg>
|
||
|
|
<span>4.9</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="yacht-specs">
|
||
|
|
<div class="spec-item">
|
||
|
|
<div class="spec-icon">
|
||
|
|
<svg width="18" height="18" 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="spec-text">
|
||
|
|
<span class="spec-value">12</span>
|
||
|
|
<span class="spec-label">Guests</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="spec-item">
|
||
|
|
<div class="spec-icon">
|
||
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<path d="M6 2L6 22"></path>
|
||
|
|
<path d="M18 2L18 22"></path>
|
||
|
|
<path d="M2 6L22 6"></path>
|
||
|
|
<path d="M2 18L22 18"></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="spec-text">
|
||
|
|
<span class="spec-value">85ft</span>
|
||
|
|
<span class="spec-label">Length</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="spec-item">
|
||
|
|
<div class="spec-icon">
|
||
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<circle cx="12" cy="12" r="1"></circle>
|
||
|
|
<circle cx="12" cy="5" r="1"></circle>
|
||
|
|
<circle cx="12" cy="19" r="1"></circle>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="spec-text">
|
||
|
|
<span class="spec-value">8</span>
|
||
|
|
<span class="spec-label">Crew</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="yacht-amenities">
|
||
|
|
<div class="amenities-title">Premium Features</div>
|
||
|
|
<div class="amenities-grid">
|
||
|
|
<div class="amenity-tag">
|
||
|
|
<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>
|
||
|
|
WiFi
|
||
|
|
</div>
|
||
|
|
<div class="amenity-tag">
|
||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
|
||
|
|
<polyline points="9 22 9 12 15 12 15 22"></polyline>
|
||
|
|
</svg>
|
||
|
|
Jet Ski
|
||
|
|
</div>
|
||
|
|
<div class="amenity-tag">
|
||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<path d="M18 8h1a4 4 0 0 1 0 8h-1"></path>
|
||
|
|
<path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path>
|
||
|
|
<line x1="6" y1="1" x2="6" y2="4"></line>
|
||
|
|
<line x1="10" y1="1" x2="10" y2="4"></line>
|
||
|
|
<line x1="14" y1="1" x2="14" y2="4"></line>
|
||
|
|
</svg>
|
||
|
|
Chef Service
|
||
|
|
</div>
|
||
|
|
<div class="amenity-tag">
|
||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<path d="M17 8h1a4 4 0 0 1 0 8h-1"></path>
|
||
|
|
<path d="M3 8h13v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V8z"></path>
|
||
|
|
</svg>
|
||
|
|
Water Sports
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="yacht-pricing">
|
||
|
|
<div class="price-display">
|
||
|
|
<span class="price-label">4 hours</span>
|
||
|
|
<span class="price-amount">$6,000</span>
|
||
|
|
</div>
|
||
|
|
<button class="select-btn">Select Yacht</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Ocean Majesty -->
|
||
|
|
<div class="yacht-card" data-yacht="ocean-majesty" data-price="14000" data-type="motor" data-capacity="large">
|
||
|
|
<div class="featured-badge">
|
||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
|
||
|
|
</svg>
|
||
|
|
Premium
|
||
|
|
</div>
|
||
|
|
<div class="yacht-image">
|
||
|
|
<img src="https://images.unsplash.com/photo-1567899378494-47b22a2ae96a?w=800&h=600&fit=crop" alt="Ocean Majesty">
|
||
|
|
<div class="availability-badge limited">
|
||
|
|
<div class="availability-dot"></div>
|
||
|
|
Limited
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="yacht-details">
|
||
|
|
<div class="yacht-header">
|
||
|
|
<div class="yacht-info">
|
||
|
|
<h3>Ocean Majesty</h3>
|
||
|
|
<span class="yacht-type">Super Yacht</span>
|
||
|
|
</div>
|
||
|
|
<div class="yacht-rating">
|
||
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||
|
|
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
|
||
|
|
</svg>
|
||
|
|
<span>5.0</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="yacht-specs">
|
||
|
|
<div class="spec-item">
|
||
|
|
<div class="spec-icon">
|
||
|
|
<svg width="18" height="18" 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="spec-text">
|
||
|
|
<span class="spec-value">20</span>
|
||
|
|
<span class="spec-label">Guests</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="spec-item">
|
||
|
|
<div class="spec-icon">
|
||
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<path d="M6 2L6 22"></path>
|
||
|
|
<path d="M18 2L18 22"></path>
|
||
|
|
<path d="M2 6L22 6"></path>
|
||
|
|
<path d="M2 18L22 18"></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="spec-text">
|
||
|
|
<span class="spec-value">120ft</span>
|
||
|
|
<span class="spec-label">Length</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="spec-item">
|
||
|
|
<div class="spec-icon">
|
||
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<circle cx="12" cy="12" r="1"></circle>
|
||
|
|
<circle cx="12" cy="5" r="1"></circle>
|
||
|
|
<circle cx="12" cy="19" r="1"></circle>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="spec-text">
|
||
|
|
<span class="spec-value">15</span>
|
||
|
|
<span class="spec-label">Crew</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="yacht-amenities">
|
||
|
|
<div class="amenities-title">Ultimate Luxury</div>
|
||
|
|
<div class="amenities-grid">
|
||
|
|
<div class="amenity-tag">
|
||
|
|
<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>
|
||
|
|
Helicopter Pad
|
||
|
|
</div>
|
||
|
|
<div class="amenity-tag">
|
||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
|
||
|
|
<polyline points="9 22 9 12 15 12 15 22"></polyline>
|
||
|
|
</svg>
|
||
|
|
Michelin Chef
|
||
|
|
</div>
|
||
|
|
<div class="amenity-tag">
|
||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<path d="M18 8h1a4 4 0 0 1 0 8h-1"></path>
|
||
|
|
<path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path>
|
||
|
|
</svg>
|
||
|
|
Spa & Pool
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="yacht-pricing">
|
||
|
|
<div class="price-display">
|
||
|
|
<span class="price-label">4 hours</span>
|
||
|
|
<span class="price-amount">$14,000</span>
|
||
|
|
</div>
|
||
|
|
<button class="select-btn">Select Yacht</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Wind Dancer -->
|
||
|
|
<div class="yacht-card" data-yacht="wind-dancer" data-price="3400" data-type="sailing" data-capacity="medium">
|
||
|
|
<div class="yacht-image">
|
||
|
|
<img src="https://images.unsplash.com/photo-1544551763-77ef2d0cfc6c?w=800&h=600&fit=crop" alt="Wind Dancer">
|
||
|
|
<div class="availability-badge available">
|
||
|
|
<div class="availability-dot"></div>
|
||
|
|
Available
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="yacht-details">
|
||
|
|
<div class="yacht-header">
|
||
|
|
<div class="yacht-info">
|
||
|
|
<h3>Wind Dancer</h3>
|
||
|
|
<span class="yacht-type">Sailing Yacht</span>
|
||
|
|
</div>
|
||
|
|
<div class="yacht-rating">
|
||
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||
|
|
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
|
||
|
|
</svg>
|
||
|
|
<span>4.7</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="yacht-specs">
|
||
|
|
<div class="spec-item">
|
||
|
|
<div class="spec-icon">
|
||
|
|
<svg width="18" height="18" 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>
|
||
|
|
</div>
|
||
|
|
<div class="spec-text">
|
||
|
|
<span class="spec-value">8</span>
|
||
|
|
<span class="spec-label">Guests</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="spec-item">
|
||
|
|
<div class="spec-icon">
|
||
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<path d="M6 2L6 22"></path>
|
||
|
|
<path d="M18 2L18 22"></path>
|
||
|
|
<path d="M2 6L22 6"></path>
|
||
|
|
<path d="M2 18L22 18"></path>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="spec-text">
|
||
|
|
<span class="spec-value">65ft</span>
|
||
|
|
<span class="spec-label">Length</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="spec-item">
|
||
|
|
<div class="spec-icon">
|
||
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<circle cx="12" cy="12" r="1"></circle>
|
||
|
|
<circle cx="12" cy="5" r="1"></circle>
|
||
|
|
<circle cx="12" cy="19" r="1"></circle>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="spec-text">
|
||
|
|
<span class="spec-value">4</span>
|
||
|
|
<span class="spec-label">Crew</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="yacht-amenities">
|
||
|
|
<div class="amenities-title">Classic Features</div>
|
||
|
|
<div class="amenities-grid">
|
||
|
|
<div class="amenity-tag">
|
||
|
|
<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>
|
||
|
|
WiFi
|
||
|
|
</div>
|
||
|
|
<div class="amenity-tag">
|
||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
|
||
|
|
</svg>
|
||
|
|
Galley Kitchen
|
||
|
|
</div>
|
||
|
|
<div class="amenity-tag">
|
||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<path d="M18 8h1a4 4 0 0 1 0 8h-1"></path>
|
||
|
|
<path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path>
|
||
|
|
</svg>
|
||
|
|
Snorkeling Gear
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="yacht-pricing">
|
||
|
|
<div class="price-display">
|
||
|
|
<span class="price-label">4 hours</span>
|
||
|
|
<span class="price-amount">$3,400</span>
|
||
|
|
</div>
|
||
|
|
<button class="select-btn">Select Yacht</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Navigation -->
|
||
|
|
<div class="navigation-section">
|
||
|
|
<a href="charter-booking-1.html" class="nav-btn secondary">
|
||
|
|
<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>
|
||
|
|
Back to Date Selection
|
||
|
|
</a>
|
||
|
|
<button class="nav-btn primary" id="continueBtn" disabled onclick="window.location.href='charter-booking-3.html'">
|
||
|
|
Continue to Customize
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<script src="js/main.js"></script>
|
||
|
|
<script>
|
||
|
|
// Navigation scroll effect
|
||
|
|
const nav = document.getElementById('voyageNav');
|
||
|
|
|
||
|
|
// Handle scroll for navigation background
|
||
|
|
window.addEventListener('scroll', () => {
|
||
|
|
if (window.scrollY > 50) {
|
||
|
|
nav.classList.add('scrolled');
|
||
|
|
} else {
|
||
|
|
nav.classList.remove('scrolled');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Yacht selection functionality
|
||
|
|
const yachtCards = document.querySelectorAll('.yacht-card');
|
||
|
|
const continueBtn = document.getElementById('continueBtn');
|
||
|
|
let selectedYacht = null;
|
||
|
|
|
||
|
|
yachtCards.forEach(card => {
|
||
|
|
const selectBtn = card.querySelector('.select-btn');
|
||
|
|
|
||
|
|
selectBtn.addEventListener('click', function(e) {
|
||
|
|
e.stopPropagation();
|
||
|
|
|
||
|
|
// Remove selected class from all cards
|
||
|
|
yachtCards.forEach(c => {
|
||
|
|
c.classList.remove('selected');
|
||
|
|
c.querySelector('.select-btn').textContent = 'Select Yacht';
|
||
|
|
});
|
||
|
|
|
||
|
|
// Add selected class to clicked card
|
||
|
|
card.classList.add('selected');
|
||
|
|
this.textContent = 'Selected ✓';
|
||
|
|
|
||
|
|
// Store selection
|
||
|
|
selectedYacht = {
|
||
|
|
name: card.querySelector('h3').textContent,
|
||
|
|
price: parseInt(card.dataset.price),
|
||
|
|
type: card.dataset.type
|
||
|
|
};
|
||
|
|
|
||
|
|
// Enable continue button
|
||
|
|
continueBtn.disabled = false;
|
||
|
|
|
||
|
|
// Store in localStorage
|
||
|
|
localStorage.setItem('selectedYacht', JSON.stringify(selectedYacht));
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Comparison toggle
|
||
|
|
const compareToggle = document.getElementById('compareToggle');
|
||
|
|
const comparisonSection = document.getElementById('comparisonSection');
|
||
|
|
|
||
|
|
compareToggle.addEventListener('click', function() {
|
||
|
|
this.classList.toggle('active');
|
||
|
|
comparisonSection.classList.toggle('active');
|
||
|
|
});
|
||
|
|
|
||
|
|
// Filter functionality
|
||
|
|
const filterBtns = document.querySelectorAll('.filter-btn');
|
||
|
|
|
||
|
|
filterBtns.forEach(btn => {
|
||
|
|
btn.addEventListener('click', function() {
|
||
|
|
const filterGroup = this.parentElement;
|
||
|
|
const groupBtns = filterGroup.querySelectorAll('.filter-btn');
|
||
|
|
|
||
|
|
// Toggle active state
|
||
|
|
if (this.classList.contains('active')) {
|
||
|
|
this.classList.remove('active');
|
||
|
|
} else {
|
||
|
|
groupBtns.forEach(b => b.classList.remove('active'));
|
||
|
|
this.classList.add('active');
|
||
|
|
}
|
||
|
|
|
||
|
|
// Apply filters (simplified for demo)
|
||
|
|
applyFilters();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
function applyFilters() {
|
||
|
|
// Get active filters
|
||
|
|
const activeFilters = Array.from(document.querySelectorAll('.filter-btn.active'))
|
||
|
|
.map(btn => btn.dataset.filter);
|
||
|
|
|
||
|
|
// Show/hide yachts based on filters
|
||
|
|
yachtCards.forEach(card => {
|
||
|
|
let show = true;
|
||
|
|
|
||
|
|
// Check type filter
|
||
|
|
if (activeFilters.some(f => ['motor', 'sailing', 'catamaran'].includes(f))) {
|
||
|
|
show = activeFilters.includes(card.dataset.type);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Check capacity filter
|
||
|
|
if (show && activeFilters.some(f => ['small', 'medium', 'large'].includes(f))) {
|
||
|
|
show = activeFilters.includes(card.dataset.capacity);
|
||
|
|
}
|
||
|
|
|
||
|
|
card.style.display = show ? 'block' : 'none';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Animate progress bar on load
|
||
|
|
setTimeout(() => {
|
||
|
|
document.querySelector('.progress-line-fill').style.width = '33%';
|
||
|
|
}, 500);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<!-- Lucide Icons -->
|
||
|
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
|
||
|
|
<script>
|
||
|
|
lucide.createIcons();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|