1424 lines
55 KiB
HTML
1424 lines
55 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Complete Your Booking - 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>
|
||
|
|
/* Luxury Checkout Styles */
|
||
|
|
.checkout-hero {
|
||
|
|
background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 50%, #0F172A 100%);
|
||
|
|
padding: 3rem 0;
|
||
|
|
margin-bottom: 3rem;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.checkout-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); }
|
||
|
|
}
|
||
|
|
|
||
|
|
.checkout-hero-content {
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
text-align: center;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.checkout-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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.checkout-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;
|
||
|
|
margin: 2rem auto;
|
||
|
|
max-width: 800px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress-steps {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
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); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Spinner for loading state */
|
||
|
|
.spinner {
|
||
|
|
display: inline-block;
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
border: 3px solid rgba(255, 255, 255, 0.3);
|
||
|
|
border-radius: 50%;
|
||
|
|
border-top-color: white;
|
||
|
|
animation: spin 1s ease-in-out infinite;
|
||
|
|
margin-right: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes spin {
|
||
|
|
to { transform: rotate(360deg); }
|
||
|
|
}
|
||
|
|
|
||
|
|
.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: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.progress-line-fill {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
height: 100%;
|
||
|
|
background: linear-gradient(90deg, #10B981, #0066CC);
|
||
|
|
width: 75%;
|
||
|
|
transition: width 1s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Form Sections */
|
||
|
|
.form-card {
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 1rem;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
padding-bottom: 1rem;
|
||
|
|
border-bottom: 2px solid #E2E8F0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-icon {
|
||
|
|
width: 45px;
|
||
|
|
height: 45px;
|
||
|
|
background: linear-gradient(135deg, #10B981, #0066CC);
|
||
|
|
border-radius: 12px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-title {
|
||
|
|
font-family: 'Playfair Display', serif;
|
||
|
|
font-size: 1.5rem;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #0F172A;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
|
|
gap: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-group {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-label {
|
||
|
|
display: block;
|
||
|
|
font-size: 0.875rem;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #475569;
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-label.required::after {
|
||
|
|
content: ' *';
|
||
|
|
color: #EF4444;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-input {
|
||
|
|
width: 100%;
|
||
|
|
padding: 0.875rem 1rem;
|
||
|
|
border: 2px solid #E2E8F0;
|
||
|
|
border-radius: 12px;
|
||
|
|
font-size: 1rem;
|
||
|
|
font-family: 'Inter', sans-serif;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
background: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-input:focus {
|
||
|
|
outline: none;
|
||
|
|
border-color: #10B981;
|
||
|
|
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
|
||
|
|
transform: translateY(-2px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-input.error {
|
||
|
|
border-color: #EF4444;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-select {
|
||
|
|
appearance: none;
|
||
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23475569' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: right 1rem center;
|
||
|
|
padding-right: 2.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Buttons */
|
||
|
|
.btn-primary {
|
||
|
|
background: linear-gradient(135deg, #10B981, #3B82F6);
|
||
|
|
color: white;
|
||
|
|
padding: 1.25rem 2.5rem;
|
||
|
|
border: none;
|
||
|
|
border-radius: 14px;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
font-weight: 600;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.75rem;
|
||
|
|
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-primary::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: -100%;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||
|
|
transition: left 0.5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-primary:hover {
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-primary:hover::before {
|
||
|
|
left: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-secondary {
|
||
|
|
background: white;
|
||
|
|
color: #475569;
|
||
|
|
padding: 1.25rem 2.5rem;
|
||
|
|
border: 2px solid #E2E8F0;
|
||
|
|
border-radius: 14px;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
font-weight: 600;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.75rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-secondary:hover {
|
||
|
|
background: #F8FAFC;
|
||
|
|
border-color: #10B981;
|
||
|
|
color: #10B981;
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-confirm {
|
||
|
|
min-width: 320px;
|
||
|
|
justify-content: center;
|
||
|
|
position: relative;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-price {
|
||
|
|
font-size: 1.25rem;
|
||
|
|
font-weight: 700;
|
||
|
|
padding-left: 0.75rem;
|
||
|
|
margin-left: 0.75rem;
|
||
|
|
border-left: 2px solid rgba(255, 255, 255, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Payment Methods */
|
||
|
|
.payment-methods {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||
|
|
gap: 1rem;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.payment-method {
|
||
|
|
position: relative;
|
||
|
|
padding: 1.5rem;
|
||
|
|
border: 2px solid #E2E8F0;
|
||
|
|
border-radius: 16px;
|
||
|
|
text-align: center;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.payment-method::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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.payment-method:hover {
|
||
|
|
transform: translateY(-5px);
|
||
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||
|
|
border-color: #10B981;
|
||
|
|
}
|
||
|
|
|
||
|
|
.payment-method.selected {
|
||
|
|
background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(0, 102, 204, 0.05));
|
||
|
|
border-color: #10B981;
|
||
|
|
}
|
||
|
|
|
||
|
|
.payment-method.selected::before {
|
||
|
|
transform: scaleX(1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.payment-icon {
|
||
|
|
width: 50px;
|
||
|
|
height: 50px;
|
||
|
|
margin: 0 auto 0.75rem;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.payment-label {
|
||
|
|
font-size: 0.875rem;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #475569;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Card Form */
|
||
|
|
.card-form {
|
||
|
|
background: #F8FAFC;
|
||
|
|
border-radius: 16px;
|
||
|
|
padding: 1.5rem;
|
||
|
|
margin-top: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-number-input {
|
||
|
|
font-family: 'Courier New', monospace;
|
||
|
|
letter-spacing: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cvv-wrapper {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cvv-toggle {
|
||
|
|
position: absolute;
|
||
|
|
right: 1rem;
|
||
|
|
top: 50%;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
cursor: pointer;
|
||
|
|
color: #64748B;
|
||
|
|
transition: color 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cvv-toggle:hover {
|
||
|
|
color: #10B981;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Security Badges */
|
||
|
|
.security-section {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 2rem;
|
||
|
|
padding: 1.5rem;
|
||
|
|
background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(0, 102, 204, 0.05));
|
||
|
|
border-radius: 12px;
|
||
|
|
margin-top: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.security-badge {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
color: #475569;
|
||
|
|
font-size: 0.875rem;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.security-badge svg {
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
color: #10B981;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Terms Section */
|
||
|
|
.terms-section {
|
||
|
|
background: white;
|
||
|
|
border: 2px solid #E2E8F0;
|
||
|
|
border-radius: 16px;
|
||
|
|
padding: 2rem;
|
||
|
|
margin-top: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.terms-checkbox {
|
||
|
|
display: flex;
|
||
|
|
align-items: start;
|
||
|
|
gap: 1rem;
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.terms-checkbox:hover {
|
||
|
|
background: #F8FAFC;
|
||
|
|
padding: 0.5rem;
|
||
|
|
margin: -0.5rem;
|
||
|
|
border-radius: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.checkbox-custom {
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
border: 2px solid #E2E8F0;
|
||
|
|
border-radius: 6px;
|
||
|
|
position: relative;
|
||
|
|
flex-shrink: 0;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.terms-checkbox input[type="checkbox"] {
|
||
|
|
position: absolute;
|
||
|
|
opacity: 0;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.terms-checkbox input[type="checkbox"]:checked ~ .checkbox-custom {
|
||
|
|
background: linear-gradient(135deg, #10B981, #0066CC);
|
||
|
|
border-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.checkbox-custom::after {
|
||
|
|
content: '✓';
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%) scale(0);
|
||
|
|
color: white;
|
||
|
|
font-weight: bold;
|
||
|
|
transition: transform 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.terms-checkbox input[type="checkbox"]:checked ~ .checkbox-custom::after {
|
||
|
|
transform: translate(-50%, -50%) scale(1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.terms-text {
|
||
|
|
font-size: 0.95rem;
|
||
|
|
color: #475569;
|
||
|
|
line-height: 1.6;
|
||
|
|
}
|
||
|
|
|
||
|
|
.terms-text a {
|
||
|
|
color: #10B981;
|
||
|
|
text-decoration: underline;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Order Summary Sidebar */
|
||
|
|
.summary-card {
|
||
|
|
background: white;
|
||
|
|
border-radius: 20px;
|
||
|
|
padding: 2rem;
|
||
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||
|
|
position: sticky;
|
||
|
|
top: 100px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 1rem;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
padding-bottom: 1rem;
|
||
|
|
border-bottom: 2px solid #E2E8F0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-icon {
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
background: linear-gradient(135deg, #10B981, #0066CC);
|
||
|
|
border-radius: 10px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-title {
|
||
|
|
font-weight: 700;
|
||
|
|
font-size: 1.3rem;
|
||
|
|
color: #0F172A;
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-details {
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-item {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: start;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
padding-bottom: 1rem;
|
||
|
|
border-bottom: 1px solid #F1F5F9;
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-item:last-child {
|
||
|
|
border-bottom: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-item-name {
|
||
|
|
font-weight: 600;
|
||
|
|
color: #0F172A;
|
||
|
|
margin-bottom: 0.25rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-item-details {
|
||
|
|
font-size: 0.875rem;
|
||
|
|
color: #64748B;
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-item-price {
|
||
|
|
font-weight: 600;
|
||
|
|
color: #0F172A;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.summary-totals {
|
||
|
|
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(0, 102, 204, 0.1));
|
||
|
|
border-radius: 12px;
|
||
|
|
padding: 1.5rem;
|
||
|
|
margin-top: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.total-row {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 0.75rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.total-row:last-child {
|
||
|
|
margin-bottom: 0;
|
||
|
|
padding-top: 0.75rem;
|
||
|
|
border-top: 2px solid rgba(16, 185, 129, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.total-label {
|
||
|
|
color: #475569;
|
||
|
|
font-size: 0.95rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.total-value {
|
||
|
|
color: #0F172A;
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.total-final {
|
||
|
|
font-size: 1.5rem;
|
||
|
|
font-weight: 700;
|
||
|
|
background: linear-gradient(90deg, #10B981, #0066CC);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Submit Button */
|
||
|
|
.btn-submit {
|
||
|
|
width: 100%;
|
||
|
|
padding: 1.25rem;
|
||
|
|
background: linear-gradient(135deg, #10B981, #0066CC);
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
border-radius: 50px;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
font-weight: 600;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 0.75rem;
|
||
|
|
margin-top: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-submit:hover:not(:disabled) {
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: 0 15px 40px rgba(16, 185, 129, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-submit:disabled {
|
||
|
|
opacity: 0.5;
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-submit.processing {
|
||
|
|
background: linear-gradient(135deg, #64748B, #475569);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Success State */
|
||
|
|
.success-container {
|
||
|
|
display: none;
|
||
|
|
text-align: center;
|
||
|
|
padding: 4rem 2rem;
|
||
|
|
background: white;
|
||
|
|
border-radius: 20px;
|
||
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||
|
|
animation: scaleIn 0.5s ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes scaleIn {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: scale(0.9);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: scale(1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.success-icon {
|
||
|
|
width: 100px;
|
||
|
|
height: 100px;
|
||
|
|
margin: 0 auto 2rem;
|
||
|
|
background: linear-gradient(135deg, #10B981, #0066CC);
|
||
|
|
border-radius: 50%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: white;
|
||
|
|
animation: pulse 2s infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.success-icon svg {
|
||
|
|
width: 50px;
|
||
|
|
height: 50px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.success-title {
|
||
|
|
font-family: 'Playfair Display', serif;
|
||
|
|
font-size: 2.5rem;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #0F172A;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.success-message {
|
||
|
|
font-size: 1.1rem;
|
||
|
|
color: #64748B;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.booking-reference {
|
||
|
|
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(0, 102, 204, 0.1));
|
||
|
|
border-radius: 12px;
|
||
|
|
padding: 1.5rem;
|
||
|
|
margin: 2rem auto;
|
||
|
|
max-width: 400px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.reference-label {
|
||
|
|
font-size: 0.875rem;
|
||
|
|
color: #64748B;
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.reference-number {
|
||
|
|
font-size: 1.5rem;
|
||
|
|
font-weight: 700;
|
||
|
|
background: linear-gradient(90deg, #10B981, #0066CC);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
letter-spacing: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 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);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Responsive */
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.checkout-title {
|
||
|
|
font-size: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-grid {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
|
||
|
|
.payment-methods {
|
||
|
|
grid-template-columns: repeat(2, 1fr);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- Navigation -->
|
||
|
|
<nav class="voyage-nav visible" id="voyageNav">
|
||
|
|
<div class="nav-container">
|
||
|
|
<div class="nav-brand">
|
||
|
|
<img src="logo.jpg" alt="HarborSmith" class="nav-logo">
|
||
|
|
<span>HarborSmith</span>
|
||
|
|
</div>
|
||
|
|
<div class="nav-links">
|
||
|
|
<a href="index.html" class="nav-link">Home</a>
|
||
|
|
<a href="charter.html" class="nav-link">Charters</a>
|
||
|
|
<a href="maintenance.html" class="nav-link">Maintenance</a>
|
||
|
|
<a href="about.html" class="nav-link">About</a>
|
||
|
|
<a href="contact.html" class="nav-link">Contact</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<!-- Checkout Hero Section -->
|
||
|
|
<section class="checkout-hero">
|
||
|
|
<div class="hero-pattern"></div>
|
||
|
|
<div class="container">
|
||
|
|
<h1 class="checkout-title">Complete Your Charter Booking</h1>
|
||
|
|
<p class="checkout-subtitle">You're almost ready to set sail on your luxury adventure</p>
|
||
|
|
|
||
|
|
<!-- Progress Bar -->
|
||
|
|
<div class="progress-bar">
|
||
|
|
<div class="progress-steps">
|
||
|
|
<div class="progress-step completed">
|
||
|
|
<div class="step-number">✓</div>
|
||
|
|
<div class="step-label">Date & Time</div>
|
||
|
|
</div>
|
||
|
|
<div class="progress-step completed">
|
||
|
|
<div class="step-number">✓</div>
|
||
|
|
<div class="step-label">Select Yacht</div>
|
||
|
|
</div>
|
||
|
|
<div class="progress-step completed">
|
||
|
|
<div class="step-number">✓</div>
|
||
|
|
<div class="step-label">Customize</div>
|
||
|
|
</div>
|
||
|
|
<div class="progress-step active">
|
||
|
|
<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>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Main Content -->
|
||
|
|
<main class="booking-main">
|
||
|
|
<div class="container">
|
||
|
|
<div class="booking-layout">
|
||
|
|
<!-- Main Content Area -->
|
||
|
|
<div class="booking-content">
|
||
|
|
<div id="bookingForm">
|
||
|
|
<h1 class="booking-title">
|
||
|
|
<i data-lucide="check-circle"></i>
|
||
|
|
Complete Your Booking
|
||
|
|
</h1>
|
||
|
|
<p class="booking-subtitle">
|
||
|
|
You're almost ready to set sail! Please provide your contact details and payment information.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<!-- Contact Information -->
|
||
|
|
<div class="form-card">
|
||
|
|
<div class="form-card-header">
|
||
|
|
<div class="form-card-icon">
|
||
|
|
<i data-lucide="user"></i>
|
||
|
|
</div>
|
||
|
|
<h3>Contact Information</h3>
|
||
|
|
</div>
|
||
|
|
<div class="form-grid">
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label">First Name</label>
|
||
|
|
<input type="text" id="firstName" class="form-input" placeholder="Enter your first name" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label">Last Name</label>
|
||
|
|
<input type="text" id="lastName" class="form-input" placeholder="Enter your last name" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label">Email Address</label>
|
||
|
|
<input type="email" id="email" class="form-input" placeholder="your@email.com" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label">Phone Number</label>
|
||
|
|
<input type="tel" id="phone" class="form-input" placeholder="(555) 123-4567" required>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Emergency Contact -->
|
||
|
|
<div class="form-card">
|
||
|
|
<div class="form-card-header">
|
||
|
|
<div class="form-card-icon">
|
||
|
|
<i data-lucide="shield"></i>
|
||
|
|
</div>
|
||
|
|
<h3>Emergency Contact</h3>
|
||
|
|
</div>
|
||
|
|
<div class="form-grid">
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label">Emergency Contact Name</label>
|
||
|
|
<input type="text" id="emergencyName" class="form-input" placeholder="Contact name" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label">Emergency Contact Phone</label>
|
||
|
|
<input type="tel" id="emergencyPhone" class="form-input" placeholder="(555) 123-4567" required>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Payment Method -->
|
||
|
|
<div class="form-card">
|
||
|
|
<div class="form-card-header">
|
||
|
|
<div class="form-card-icon">
|
||
|
|
<i data-lucide="credit-card"></i>
|
||
|
|
</div>
|
||
|
|
<h3>Payment Method</h3>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="payment-methods">
|
||
|
|
<div class="payment-method selected" data-method="card">
|
||
|
|
<div class="payment-icon">💳</div>
|
||
|
|
<div class="payment-label">Credit/Debit Card</div>
|
||
|
|
</div>
|
||
|
|
<div class="payment-method" data-method="paypal">
|
||
|
|
<div class="payment-icon">💰</div>
|
||
|
|
<div class="payment-label">PayPal</div>
|
||
|
|
</div>
|
||
|
|
<div class="payment-method" data-method="wire">
|
||
|
|
<div class="payment-icon">🏦</div>
|
||
|
|
<div class="payment-label">Wire Transfer</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Card Form -->
|
||
|
|
<div class="card-form" id="cardDetails">
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label">Card Number</label>
|
||
|
|
<input type="text" id="cardNumber" class="form-input card-number-input" placeholder="0000 0000 0000 0000" maxlength="19" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-grid">
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label">Cardholder Name</label>
|
||
|
|
<input type="text" id="cardName" class="form-input" placeholder="Name on card" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label">Expiry Date</label>
|
||
|
|
<input type="text" id="cardExpiry" class="form-input" placeholder="MM/YY" maxlength="5" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group cvv-wrapper">
|
||
|
|
<label class="form-label">CVV</label>
|
||
|
|
<input type="password" id="cardCVV" class="form-input" placeholder="•••" maxlength="4" required>
|
||
|
|
<span class="cvv-toggle" onclick="toggleCVV()">
|
||
|
|
<i data-lucide="eye"></i>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- PayPal Details (hidden) -->
|
||
|
|
<div id="paypalDetails" style="display: none; margin-top: 1.5rem; text-align: center; padding: 2rem;">
|
||
|
|
<p style="color: #64748B; margin-bottom: 1rem;">You will be redirected to PayPal to complete your payment securely.</p>
|
||
|
|
<div style="padding: 1rem; background: #F8FAFC; border-radius: 8px;">
|
||
|
|
<i data-lucide="external-link" style="margin-right: 0.5rem;"></i>
|
||
|
|
PayPal Checkout
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Wire Transfer Details (hidden) -->
|
||
|
|
<div id="wireDetails" style="display: none; margin-top: 1.5rem;">
|
||
|
|
<div style="background: #F8FAFC; padding: 1.5rem; border-radius: 8px;">
|
||
|
|
<p style="color: #64748B; margin-bottom: 1rem;">Wire transfer instructions will be sent to your email after booking confirmation.</p>
|
||
|
|
<p style="font-size: 0.875rem; color: #94A3B8;">Please note: Your booking will be held for 48 hours pending payment receipt.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Security Section -->
|
||
|
|
<div class="security-section">
|
||
|
|
<div class="security-badge">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
|
||
|
|
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
|
||
|
|
</svg>
|
||
|
|
256-bit SSL Encryption
|
||
|
|
</div>
|
||
|
|
<div class="security-badge">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
||
|
|
</svg>
|
||
|
|
PCI DSS Compliant
|
||
|
|
</div>
|
||
|
|
<div class="security-badge">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||
|
|
</svg>
|
||
|
|
Secure Checkout
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Terms & Conditions -->
|
||
|
|
<div class="terms-section">
|
||
|
|
<h3 style="margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem;">
|
||
|
|
<i data-lucide="file-text" style="color: #10B981;"></i>
|
||
|
|
Terms & Conditions
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
<label class="terms-checkbox">
|
||
|
|
<input type="checkbox" id="terms1" required>
|
||
|
|
<span class="checkbox-custom"></span>
|
||
|
|
<span class="terms-text">
|
||
|
|
I agree to the <a href="#">Terms and Conditions</a> and understand the <a href="#">Cancellation Policy</a>.
|
||
|
|
Cancellations made 48 hours before departure receive a full refund.
|
||
|
|
</span>
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<label class="terms-checkbox">
|
||
|
|
<input type="checkbox" id="terms2" required>
|
||
|
|
<span class="checkbox-custom"></span>
|
||
|
|
<span class="terms-text">
|
||
|
|
I acknowledge that all passengers must sign a waiver before boarding and follow all safety instructions from the crew.
|
||
|
|
</span>
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<label class="terms-checkbox">
|
||
|
|
<input type="checkbox" id="terms3">
|
||
|
|
<span class="checkbox-custom"></span>
|
||
|
|
<span class="terms-text">
|
||
|
|
I would like to receive promotional emails about special offers and upcoming events (optional).
|
||
|
|
</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Navigation Buttons -->
|
||
|
|
<div class="booking-navigation">
|
||
|
|
<button class="btn-secondary" onclick="window.location.href='charter-booking-3.html'">
|
||
|
|
<i data-lucide="arrow-left"></i>
|
||
|
|
Back to Customization
|
||
|
|
</button>
|
||
|
|
<button class="btn-primary btn-confirm" id="confirmBooking">
|
||
|
|
<i data-lucide="credit-card"></i>
|
||
|
|
Complete Payment
|
||
|
|
<span class="btn-price" id="confirmPrice">$0</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Success Message (hidden initially) -->
|
||
|
|
<div class="success-state" id="successMessage" style="display: none;">
|
||
|
|
<div class="success-animation">
|
||
|
|
<svg class="success-checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
|
||
|
|
<circle class="success-checkmark-circle" cx="26" cy="26" r="25" fill="none"/>
|
||
|
|
<path class="success-checkmark-check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2 class="success-title">Booking Confirmed!</h2>
|
||
|
|
<p class="success-subtitle">Thank you for choosing HarborSmith Yacht Services</p>
|
||
|
|
|
||
|
|
<div class="booking-reference">
|
||
|
|
<div class="reference-label">Booking Reference</div>
|
||
|
|
<div class="reference-number" id="bookingRef">HS-2024-XXXX</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="success-details">
|
||
|
|
<p>A confirmation email has been sent to <strong id="confirmEmail">your email</strong> with all the details of your charter.</p>
|
||
|
|
<p>Our crew will contact you 24 hours before departure to confirm final details.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="success-actions">
|
||
|
|
<button class="btn-primary" onclick="window.location.href='index.html'">
|
||
|
|
<i data-lucide="home"></i>
|
||
|
|
Return to Home
|
||
|
|
</button>
|
||
|
|
<button class="btn-secondary" onclick="window.print()">
|
||
|
|
<i data-lucide="printer"></i>
|
||
|
|
Print Confirmation
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Sidebar Summary -->
|
||
|
|
<aside class="booking-sidebar">
|
||
|
|
<div class="summary-card">
|
||
|
|
<div class="summary-header">
|
||
|
|
<div class="summary-icon">
|
||
|
|
<i data-lucide="anchor"></i>
|
||
|
|
</div>
|
||
|
|
<h3 class="summary-title">Order Summary</h3>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="summary-details">
|
||
|
|
<!-- Yacht Details -->
|
||
|
|
<div class="summary-item">
|
||
|
|
<div>
|
||
|
|
<div class="summary-item-name" id="summaryYacht">Loading...</div>
|
||
|
|
<div class="summary-item-detail" id="summaryDate">Date loading...</div>
|
||
|
|
<div class="summary-item-detail" id="summaryTime">Time loading...</div>
|
||
|
|
<div class="summary-item-detail" id="summaryGuests">Guests loading...</div>
|
||
|
|
</div>
|
||
|
|
<div class="summary-item-price" id="yachtPrice">$0</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Route -->
|
||
|
|
<div class="summary-item" id="routeItem" style="display: none;">
|
||
|
|
<div>
|
||
|
|
<div class="summary-item-name">Route</div>
|
||
|
|
<div class="summary-item-detail" id="summaryRoute">-</div>
|
||
|
|
</div>
|
||
|
|
<div class="summary-item-price">Included</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Catering -->
|
||
|
|
<div class="summary-item" id="cateringItem" style="display: none;">
|
||
|
|
<div>
|
||
|
|
<div class="summary-item-name">Catering</div>
|
||
|
|
<div class="summary-item-detail" id="summaryCatering">-</div>
|
||
|
|
</div>
|
||
|
|
<div class="summary-item-price" id="cateringPrice">$0</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Add-ons -->
|
||
|
|
<div class="summary-item" id="addonsItem" style="display: none;">
|
||
|
|
<div>
|
||
|
|
<div class="summary-item-name">Add-ons</div>
|
||
|
|
<div class="summary-item-detail" id="summaryAddons">-</div>
|
||
|
|
</div>
|
||
|
|
<div class="summary-item-price" id="addonsPrice">$0</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="summary-total">
|
||
|
|
<div class="summary-total-row">
|
||
|
|
<span>Subtotal</span>
|
||
|
|
<span id="subtotalPrice">$0</span>
|
||
|
|
</div>
|
||
|
|
<div class="summary-total-row">
|
||
|
|
<span>Tax (8.5%)</span>
|
||
|
|
<span id="taxPrice">$0</span>
|
||
|
|
</div>
|
||
|
|
<div class="summary-total-divider"></div>
|
||
|
|
<div class="summary-total-final">
|
||
|
|
<span>Total Due</span>
|
||
|
|
<span class="total-price" id="totalPrice">$0</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="summary-guarantee">
|
||
|
|
<i data-lucide="shield-check"></i>
|
||
|
|
<div>
|
||
|
|
<div style="font-weight: 600;">100% Secure Checkout</div>
|
||
|
|
<div style="font-size: 0.875rem; color: #64748B;">Your information is protected</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="help-section">
|
||
|
|
<h4>Questions?</h4>
|
||
|
|
<p>We're here to help!</p>
|
||
|
|
<button class="btn-contact">
|
||
|
|
<i data-lucide="phone"></i>
|
||
|
|
(415) 555-0123
|
||
|
|
</button>
|
||
|
|
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: var(--text-secondary);">
|
||
|
|
Available 7 days, 8am-8pm PST
|
||
|
|
</p>
|
||
|
|
</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();
|
||
|
|
|
||
|
|
// Load booking data from localStorage
|
||
|
|
const bookingDate = localStorage.getItem('bookingDate') || 'March 15, 2024';
|
||
|
|
const bookingTime = localStorage.getItem('bookingTime') || '2:00 PM - 6:00 PM';
|
||
|
|
const guestCount = localStorage.getItem('guestCount') || '6';
|
||
|
|
const selectedYacht = JSON.parse(localStorage.getItem('selectedYacht') || '{}');
|
||
|
|
const selectedRoute = localStorage.getItem('selectedRoute') || 'Golden Gate Tour';
|
||
|
|
const selectedCatering = localStorage.getItem('selectedCatering') || 'None';
|
||
|
|
const selectedAddons = JSON.parse(localStorage.getItem('selectedAddons') || '[]');
|
||
|
|
const specialOccasion = localStorage.getItem('specialOccasion') || '';
|
||
|
|
|
||
|
|
// Calculate prices
|
||
|
|
const yachtBasePrice = parseInt(selectedYacht.price) || 6000;
|
||
|
|
let cateringPriceValue = 0;
|
||
|
|
if (selectedCatering === 'Premium') cateringPriceValue = 650;
|
||
|
|
else if (selectedCatering === 'Luxury') cateringPriceValue = 1200;
|
||
|
|
else if (selectedCatering === 'Basic') cateringPriceValue = 350;
|
||
|
|
|
||
|
|
let addonsPriceValue = 0;
|
||
|
|
selectedAddons.forEach(addon => {
|
||
|
|
if (addon === 'photographer') addonsPriceValue += 450;
|
||
|
|
if (addon === 'dj') addonsPriceValue += 350;
|
||
|
|
if (addon === 'watersports') addonsPriceValue += 350;
|
||
|
|
if (addon === 'fishing') addonsPriceValue += 200;
|
||
|
|
if (addon === 'decorations') addonsPriceValue += 150;
|
||
|
|
if (addon === 'champagne') addonsPriceValue += 200;
|
||
|
|
});
|
||
|
|
|
||
|
|
const subtotal = yachtBasePrice + cateringPriceValue + addonsPriceValue;
|
||
|
|
const tax = subtotal * 0.085;
|
||
|
|
const total = subtotal + tax;
|
||
|
|
|
||
|
|
// Update summary sidebar
|
||
|
|
document.getElementById('summaryYacht').textContent = selectedYacht.name || 'Bay Dreamer';
|
||
|
|
document.getElementById('summaryDate').textContent = bookingDate;
|
||
|
|
document.getElementById('summaryTime').textContent = bookingTime;
|
||
|
|
document.getElementById('summaryGuests').textContent = `${guestCount} guests`;
|
||
|
|
document.getElementById('yachtPrice').textContent = `$${yachtBasePrice.toLocaleString()}`;
|
||
|
|
|
||
|
|
// Show route if selected
|
||
|
|
if (selectedRoute && selectedRoute !== 'None') {
|
||
|
|
document.getElementById('routeItem').style.display = 'flex';
|
||
|
|
document.getElementById('summaryRoute').textContent = selectedRoute;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Show catering if selected
|
||
|
|
if (selectedCatering && selectedCatering !== 'None' && cateringPriceValue > 0) {
|
||
|
|
document.getElementById('cateringItem').style.display = 'flex';
|
||
|
|
document.getElementById('summaryCatering').textContent = `${selectedCatering} Package`;
|
||
|
|
document.getElementById('cateringPrice').textContent = `$${cateringPriceValue}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Show add-ons if selected
|
||
|
|
if (selectedAddons.length > 0 && addonsPriceValue > 0) {
|
||
|
|
document.getElementById('addonsItem').style.display = 'flex';
|
||
|
|
const addonNames = [];
|
||
|
|
selectedAddons.forEach(addon => {
|
||
|
|
if (addon === 'photographer') addonNames.push('Photographer');
|
||
|
|
if (addon === 'dj') addonNames.push('DJ & Sound');
|
||
|
|
if (addon === 'watersports') addonNames.push('Water Sports');
|
||
|
|
if (addon === 'fishing') addonNames.push('Fishing');
|
||
|
|
if (addon === 'decorations') addonNames.push('Decorations');
|
||
|
|
if (addon === 'champagne') addonNames.push('Champagne');
|
||
|
|
});
|
||
|
|
document.getElementById('summaryAddons').textContent = addonNames.join(', ');
|
||
|
|
document.getElementById('addonsPrice').textContent = `$${addonsPriceValue}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Update totals
|
||
|
|
document.getElementById('subtotalPrice').textContent = `$${subtotal.toLocaleString()}`;
|
||
|
|
document.getElementById('taxPrice').textContent = `$${Math.round(tax)}`;
|
||
|
|
document.getElementById('totalPrice').textContent = `$${Math.round(total).toLocaleString()}`;
|
||
|
|
document.getElementById('confirmPrice').textContent = `$${Math.round(total).toLocaleString()}`;
|
||
|
|
|
||
|
|
// Payment method selection
|
||
|
|
const paymentMethods = document.querySelectorAll('.payment-method');
|
||
|
|
const cardDetails = document.getElementById('cardDetails');
|
||
|
|
const paypalDetails = document.getElementById('paypalDetails');
|
||
|
|
const wireDetails = document.getElementById('wireDetails');
|
||
|
|
|
||
|
|
paymentMethods.forEach(method => {
|
||
|
|
method.addEventListener('click', function() {
|
||
|
|
paymentMethods.forEach(m => m.classList.remove('selected'));
|
||
|
|
this.classList.add('selected');
|
||
|
|
|
||
|
|
const selectedMethod = this.dataset.method;
|
||
|
|
|
||
|
|
// Hide all payment forms
|
||
|
|
cardDetails.style.display = 'none';
|
||
|
|
paypalDetails.style.display = 'none';
|
||
|
|
wireDetails.style.display = 'none';
|
||
|
|
|
||
|
|
// Show selected payment form
|
||
|
|
if (selectedMethod === 'card') {
|
||
|
|
cardDetails.style.display = 'block';
|
||
|
|
} else if (selectedMethod === 'paypal') {
|
||
|
|
paypalDetails.style.display = 'block';
|
||
|
|
} else if (selectedMethod === 'wire') {
|
||
|
|
wireDetails.style.display = 'block';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Format card number input
|
||
|
|
document.getElementById('cardNumber').addEventListener('input', function(e) {
|
||
|
|
let value = e.target.value.replace(/\s+/g, '').replace(/[^0-9]/gi, '');
|
||
|
|
let formattedValue = value.match(/.{1,4}/g)?.join(' ') || value;
|
||
|
|
e.target.value = formattedValue;
|
||
|
|
});
|
||
|
|
|
||
|
|
// Format expiry date input
|
||
|
|
document.getElementById('cardExpiry').addEventListener('input', function(e) {
|
||
|
|
let value = e.target.value.replace(/\s+/g, '').replace(/[^0-9]/gi, '');
|
||
|
|
if (value.length >= 2) {
|
||
|
|
value = value.substring(0,2) + '/' + value.substring(2,4);
|
||
|
|
}
|
||
|
|
e.target.value = value;
|
||
|
|
});
|
||
|
|
|
||
|
|
// Toggle CVV visibility
|
||
|
|
function toggleCVV() {
|
||
|
|
const cvvInput = document.getElementById('cardCVV');
|
||
|
|
const cvvToggle = document.querySelector('.cvv-toggle i');
|
||
|
|
|
||
|
|
if (cvvInput.type === 'password') {
|
||
|
|
cvvInput.type = 'text';
|
||
|
|
cvvToggle.setAttribute('data-lucide', 'eye-off');
|
||
|
|
} else {
|
||
|
|
cvvInput.type = 'password';
|
||
|
|
cvvToggle.setAttribute('data-lucide', 'eye');
|
||
|
|
}
|
||
|
|
lucide.createIcons();
|
||
|
|
}
|
||
|
|
|
||
|
|
// Confirm booking button
|
||
|
|
document.getElementById('confirmBooking').addEventListener('click', function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
// Validate form
|
||
|
|
const firstName = document.getElementById('firstName').value;
|
||
|
|
const lastName = document.getElementById('lastName').value;
|
||
|
|
const email = document.getElementById('email').value;
|
||
|
|
const phone = document.getElementById('phone').value;
|
||
|
|
const emergencyName = document.getElementById('emergencyName').value;
|
||
|
|
const emergencyPhone = document.getElementById('emergencyPhone').value;
|
||
|
|
const terms1 = document.getElementById('terms1').checked;
|
||
|
|
const terms2 = document.getElementById('terms2').checked;
|
||
|
|
|
||
|
|
// Check which payment method is selected
|
||
|
|
const selectedPaymentMethod = document.querySelector('.payment-method.selected').dataset.method;
|
||
|
|
|
||
|
|
let paymentValid = true;
|
||
|
|
if (selectedPaymentMethod === 'card') {
|
||
|
|
const cardNumber = document.getElementById('cardNumber').value;
|
||
|
|
const cardName = document.getElementById('cardName').value;
|
||
|
|
const cardExpiry = document.getElementById('cardExpiry').value;
|
||
|
|
const cardCVV = document.getElementById('cardCVV').value;
|
||
|
|
|
||
|
|
if (!cardNumber || !cardName || !cardExpiry || !cardCVV) {
|
||
|
|
paymentValid = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!firstName || !lastName || !email || !phone || !emergencyName || !emergencyPhone || !terms1 || !terms2 || !paymentValid) {
|
||
|
|
// Highlight empty required fields
|
||
|
|
document.querySelectorAll('input[required]').forEach(input => {
|
||
|
|
if (!input.value) {
|
||
|
|
input.style.borderColor = '#EF4444';
|
||
|
|
} else {
|
||
|
|
input.style.borderColor = '';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
if (!terms1 || !terms2) {
|
||
|
|
alert('Please accept the required terms and conditions.');
|
||
|
|
} else {
|
||
|
|
alert('Please fill in all required fields.');
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Simulate processing
|
||
|
|
this.disabled = true;
|
||
|
|
this.innerHTML = '<span class="spinner"></span> Processing Payment...';
|
||
|
|
|
||
|
|
// Generate booking reference
|
||
|
|
const bookingRef = 'HS-2024-' + Math.random().toString(36).substr(2, 6).toUpperCase();
|
||
|
|
|
||
|
|
// Show success message after delay
|
||
|
|
setTimeout(() => {
|
||
|
|
document.getElementById('bookingForm').style.display = 'none';
|
||
|
|
document.getElementById('successMessage').style.display = 'block';
|
||
|
|
document.getElementById('bookingRef').textContent = bookingRef;
|
||
|
|
document.getElementById('confirmEmail').textContent = email;
|
||
|
|
|
||
|
|
// Clear localStorage
|
||
|
|
localStorage.removeItem('bookingDate');
|
||
|
|
localStorage.removeItem('bookingTime');
|
||
|
|
localStorage.removeItem('guestCount');
|
||
|
|
localStorage.removeItem('selectedYacht');
|
||
|
|
localStorage.removeItem('selectedRoute');
|
||
|
|
localStorage.removeItem('selectedCatering');
|
||
|
|
localStorage.removeItem('selectedAddons');
|
||
|
|
localStorage.removeItem('specialOccasion');
|
||
|
|
|
||
|
|
window.scrollTo(0, 0);
|
||
|
|
lucide.createIcons();
|
||
|
|
}, 3000);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Initialize on load
|
||
|
|
window.addEventListener('load', () => {
|
||
|
|
lucide.createIcons();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|