|
|
<!DOCTYPE html> |
|
|
<html lang="en" data-theme="dark"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Elite Auto Detailing | Premium Car Care Services</title> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script src="https://js.stripe.com/v3/"></script> |
|
|
<style> |
|
|
:root { |
|
|
--primary: #3a86ff; |
|
|
--primary-dark: #2667cc; |
|
|
--dark-bg: linear-gradient(135deg, #1a1a1a 0%, #121212 100%); |
|
|
--dark-bg-alt: #252525; |
|
|
--text: #f0f0f0; |
|
|
--text-muted: #b0b0b0; |
|
|
--light-bg: linear-gradient(135deg, #f9f9f9 0%, #e0e0e0 100%); |
|
|
--light-bg-alt: #ffffff; |
|
|
--shadow: 0 10px 30px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
} |
|
|
|
|
|
body { |
|
|
background: var(--dark-bg); |
|
|
color: var(--text); |
|
|
min-height: 100vh; |
|
|
transition: all 0.5s ease; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
|
|
|
header { |
|
|
padding: 1.5rem 5%; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
z-index: 1000; |
|
|
backdrop-filter: blur(10px); |
|
|
background-color: rgba(26, 26, 26, 0.8); |
|
|
} |
|
|
|
|
|
.logo { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.logo i { |
|
|
font-size: 1.8rem; |
|
|
color: var(--primary); |
|
|
} |
|
|
|
|
|
.logo h1 { |
|
|
font-weight: 700; |
|
|
font-size: 1.5rem; |
|
|
background: linear-gradient(to right, var(--primary), #6c5ce7); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
nav ul { |
|
|
display: flex; |
|
|
gap: 2rem; |
|
|
list-style: none; |
|
|
} |
|
|
|
|
|
nav ul li a { |
|
|
text-decoration: none; |
|
|
color: var(--text); |
|
|
font-weight: 500; |
|
|
transition: color 0.3s ease; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
nav ul li a:hover { |
|
|
color: var(--primary); |
|
|
} |
|
|
|
|
|
nav ul li a::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
bottom: -5px; |
|
|
left: 0; |
|
|
background-color: var(--primary); |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
nav ul li a:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.theme-toggle { |
|
|
background: none; |
|
|
border: none; |
|
|
color: var(--text); |
|
|
font-size: 1.3rem; |
|
|
cursor: pointer; |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.theme-toggle:hover { |
|
|
transform: rotate(30deg); |
|
|
} |
|
|
|
|
|
|
|
|
.hero { |
|
|
height: 100vh; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
padding: 0 10%; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.hero::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: url('https://images.unsplash.com/photo-1624380543793-8a59daf69e3e?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover; |
|
|
opacity: 0.3; |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.hero-content { |
|
|
max-width: 600px; |
|
|
animation: fadeIn 1s ease forwards; |
|
|
} |
|
|
|
|
|
.hero-content h2 { |
|
|
font-size: 3rem; |
|
|
margin-bottom: 1rem; |
|
|
line-height: 1.2; |
|
|
} |
|
|
|
|
|
.hero-content h2 span { |
|
|
color: var(--primary); |
|
|
} |
|
|
|
|
|
.hero-content p { |
|
|
font-size: 1.1rem; |
|
|
margin-bottom: 2rem; |
|
|
color: var(--text-muted); |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
display: inline-block; |
|
|
background: var(--primary); |
|
|
color: white; |
|
|
padding: 0.8rem 1.8rem; |
|
|
border-radius: 50px; |
|
|
text-decoration: none; |
|
|
font-weight: 600; |
|
|
transition: all 0.3s ease; |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.btn:hover { |
|
|
background: var(--primary-dark); |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 10px 20px rgba(58, 134, 255, 0.2); |
|
|
} |
|
|
|
|
|
.btn-outline { |
|
|
background: transparent; |
|
|
border: 2px solid var(--primary); |
|
|
color: var(--primary); |
|
|
margin-left: 1rem; |
|
|
} |
|
|
|
|
|
.btn-outline:hover { |
|
|
background: var(--primary); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
|
|
|
.section { |
|
|
padding: 8rem 10%; |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
text-align: center; |
|
|
margin-bottom: 5rem; |
|
|
} |
|
|
|
|
|
.section-title h2 { |
|
|
font-size: 2.5rem; |
|
|
display: inline-block; |
|
|
position: relative; |
|
|
padding-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.section-title h2::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 60px; |
|
|
height: 3px; |
|
|
bottom: 0; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
background: var(--primary); |
|
|
} |
|
|
|
|
|
.services-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
|
gap: 2rem; |
|
|
} |
|
|
|
|
|
.service-card { |
|
|
background: var(--dark-bg-alt); |
|
|
padding: 2.5rem; |
|
|
border-radius: 15px; |
|
|
transition: all 0.3s ease; |
|
|
opacity: 0; |
|
|
transform: translateY(20px); |
|
|
} |
|
|
|
|
|
.service-card.visible { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
.service-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: var(--shadow); |
|
|
} |
|
|
|
|
|
.service-icon { |
|
|
font-size: 2.5rem; |
|
|
color: var(--primary); |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
|
|
|
.service-card h3 { |
|
|
font-size: 1.5rem; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.service-card p { |
|
|
color: var(--text-muted); |
|
|
margin-bottom: 1.5rem; |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
.price { |
|
|
font-size: 1.8rem; |
|
|
font-weight: 700; |
|
|
color: var(--primary); |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
|
|
|
.booking { |
|
|
background: var(--dark-bg-alt); |
|
|
padding: 5rem 10%; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.booking-form { |
|
|
max-width: 800px; |
|
|
margin: 0 auto; |
|
|
background: var(--dark-bg); |
|
|
padding: 3rem; |
|
|
border-radius: 15px; |
|
|
box-shadow: var(--shadow); |
|
|
opacity: 0; |
|
|
transform: scale(0.9); |
|
|
transition: all 0.5s ease; |
|
|
} |
|
|
|
|
|
.booking-form.visible { |
|
|
opacity: 1; |
|
|
transform: scale(1); |
|
|
} |
|
|
|
|
|
.form-group { |
|
|
margin-bottom: 1.5rem; |
|
|
text-align: left; |
|
|
} |
|
|
|
|
|
.form-group label { |
|
|
display: block; |
|
|
margin-bottom: 0.5rem; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.form-control { |
|
|
width: 100%; |
|
|
padding: 0.8rem 1rem; |
|
|
border-radius: 8px; |
|
|
border: none; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
color: var(--text); |
|
|
font-size: 1rem; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.form-control:focus { |
|
|
outline: none; |
|
|
box-shadow: 0 0 0 3px rgba(58, 134, 255, 0.3); |
|
|
background: rgba(255, 255, 255, 0.15); |
|
|
} |
|
|
|
|
|
.form-row { |
|
|
display: flex; |
|
|
gap: 1.5rem; |
|
|
} |
|
|
|
|
|
.form-row .form-group { |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
|
|
|
.payment-section { |
|
|
margin-top: 2rem; |
|
|
padding: 2rem; |
|
|
background: rgba(0, 0, 0, 0.2); |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
#card-element { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
padding: 12px; |
|
|
border-radius: 8px; |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
|
|
|
|
|
|
.testimonials { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.testimonial-slider { |
|
|
display: flex; |
|
|
overflow-x: auto; |
|
|
scroll-snap-type: x mandatory; |
|
|
gap: 2rem; |
|
|
scrollbar-width: none; |
|
|
-ms-overflow-style: none; |
|
|
padding-bottom: 2rem; |
|
|
} |
|
|
|
|
|
.testimonial-slider::-webkit-scrollbar { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.testimonial-card { |
|
|
min-width: 350px; |
|
|
background: var(--dark-bg-alt); |
|
|
padding: 2rem; |
|
|
border-radius: 15px; |
|
|
scroll-snap-align: start; |
|
|
box-shadow: var(--shadow); |
|
|
} |
|
|
|
|
|
.testimonial-card .rating { |
|
|
color: #ffc107; |
|
|
margin-bottom: 1rem; |
|
|
font-size: 1.2rem; |
|
|
} |
|
|
|
|
|
.testimonial-card p { |
|
|
color: var(--text-muted); |
|
|
font-style: italic; |
|
|
margin-bottom: 1.5rem; |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
.client-info { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
.client-avatar { |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
border-radius: 50%; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.client-avatar img { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
} |
|
|
|
|
|
.client-name h4 { |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.client-name p { |
|
|
color: var(--primary); |
|
|
margin: 0; |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
|
|
|
.gallery { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
|
|
gap: 1rem; |
|
|
margin-top: 3rem; |
|
|
} |
|
|
|
|
|
.gallery-item { |
|
|
border-radius: 10px; |
|
|
overflow: hidden; |
|
|
position: relative; |
|
|
height: 250px; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.gallery-item:hover { |
|
|
transform: scale(1.03); |
|
|
box-shadow: var(--shadow); |
|
|
} |
|
|
|
|
|
.gallery-item img { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
transition: transform 0.5s ease; |
|
|
} |
|
|
|
|
|
.gallery-item:hover img { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.gallery-item::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s ease; |
|
|
} |
|
|
|
|
|
.gallery-item:hover::after { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
|
|
|
.faq-item { |
|
|
margin-bottom: 1rem; |
|
|
border-radius: 8px; |
|
|
overflow: hidden; |
|
|
background: var(--dark-bg-alt); |
|
|
box-shadow: var(--shadow); |
|
|
} |
|
|
|
|
|
.faq-question { |
|
|
padding: 1.5rem; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
cursor: pointer; |
|
|
font-weight: 600; |
|
|
transition: background 0.3s ease; |
|
|
} |
|
|
|
|
|
.faq-question:hover { |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
} |
|
|
|
|
|
.faq-answer { |
|
|
padding: 0 1.5rem; |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
transition: max-height 0.3s ease, padding 0.3s ease; |
|
|
color: var(--text-muted); |
|
|
} |
|
|
|
|
|
.faq-item.active .faq-answer { |
|
|
padding: 0 1.5rem 1.5rem; |
|
|
max-height: 500px; |
|
|
} |
|
|
|
|
|
.faq-toggle { |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.faq-item.active .faq-toggle { |
|
|
transform: rotate(180deg); |
|
|
} |
|
|
|
|
|
|
|
|
footer { |
|
|
background: #0a0a0a; |
|
|
padding: 5rem 10% 2rem; |
|
|
margin-top: 5rem; |
|
|
} |
|
|
|
|
|
.footer-content { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
|
|
gap: 3rem; |
|
|
margin-bottom: 3rem; |
|
|
} |
|
|
|
|
|
.footer-column h3 { |
|
|
font-size: 1.3rem; |
|
|
margin-bottom: 1.5rem; |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
.footer-column h3::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 40px; |
|
|
height: 2px; |
|
|
bottom: -8px; |
|
|
left: 0; |
|
|
background: var(--primary); |
|
|
} |
|
|
|
|
|
.footer-column p, .footer-column a { |
|
|
color: var(--text-muted); |
|
|
line-height: 1.8; |
|
|
transition: color 0.3s ease; |
|
|
text-decoration: none; |
|
|
display: block; |
|
|
margin-bottom: 0.8rem; |
|
|
} |
|
|
|
|
|
.footer-column a:hover { |
|
|
color: var(--primary); |
|
|
} |
|
|
|
|
|
.social-links { |
|
|
display: flex; |
|
|
gap: 1rem; |
|
|
margin-top: 1rem; |
|
|
} |
|
|
|
|
|
.social-links a { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.social-links a:hover { |
|
|
background: var(--primary); |
|
|
transform: translateY(-3px); |
|
|
} |
|
|
|
|
|
.footer-bottom { |
|
|
text-align: center; |
|
|
padding-top: 2rem; |
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1); |
|
|
color: var(--text-muted); |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
|
|
|
.login-form { |
|
|
max-width: 400px; |
|
|
margin: 0 auto; |
|
|
background: var(--dark-bg-alt); |
|
|
padding: 2rem; |
|
|
border-radius: 15px; |
|
|
box-shadow: var(--shadow); |
|
|
} |
|
|
|
|
|
.login-form h3 { |
|
|
text-align: center; |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
|
|
|
|
|
|
.backend-preview { |
|
|
background: var(--dark-bg); |
|
|
padding: 5rem 10%; |
|
|
} |
|
|
|
|
|
.backend-features { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
|
|
gap: 2rem; |
|
|
margin-top: 3rem; |
|
|
} |
|
|
|
|
|
.feature-card { |
|
|
background: var(--dark-bg-alt); |
|
|
padding: 2rem; |
|
|
border-radius: 15px; |
|
|
text-align: center; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.feature-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: var(--shadow); |
|
|
} |
|
|
|
|
|
.feature-icon { |
|
|
font-size: 2.5rem; |
|
|
color: var(--primary); |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.feature-card h3 { |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.feature-card p { |
|
|
color: var(--text-muted); |
|
|
line-height: 1.6; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(20px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 768px) { |
|
|
header { |
|
|
padding: 1rem; |
|
|
} |
|
|
|
|
|
nav ul { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.hero { |
|
|
padding: 0 5%; |
|
|
} |
|
|
|
|
|
.hero-content h2 { |
|
|
font-size: 2.2rem; |
|
|
} |
|
|
|
|
|
.section { |
|
|
padding: 5rem 5%; |
|
|
} |
|
|
|
|
|
.form-row { |
|
|
flex-direction: column; |
|
|
gap: 0; |
|
|
} |
|
|
|
|
|
.btn-outline { |
|
|
margin-left: 0; |
|
|
margin-top: 1rem; |
|
|
} |
|
|
} |
|
|
|
|
|
[data-theme="light"] { |
|
|
--dark-bg: var(--light-bg); |
|
|
--dark-bg-alt: var(--light-bg-alt); |
|
|
--text: #333333; |
|
|
--text-muted: #666666; |
|
|
--shadow: 0 10px 30px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<header> |
|
|
<div class="logo"> |
|
|
<i class="fas fa-car"></i> |
|
|
<h1>Elite Auto Detailing</h1> |
|
|
</div> |
|
|
<nav> |
|
|
<ul> |
|
|
<li><a href="#home">Home</a></li> |
|
|
<li><a href="#services">Services</a></li> |
|
|
<li><a href="#gallery">Gallery</a></li> |
|
|
<li><a href="#testimonials">Testimonials</a></li> |
|
|
<li><a href="#faq">FAQ</a></li> |
|
|
<li><a href="#booking">Book Now</a></li> |
|
|
</ul> |
|
|
</nav> |
|
|
<button class="theme-toggle" id="themeToggle"> |
|
|
<i class="fas fa-moon"></i> |
|
|
</button> |
|
|
</header> |
|
|
|
|
|
<section class="hero" id="home"> |
|
|
<div class="hero-content"> |
|
|
<h2>Premium <span>Car Detailing</span> Services</h2> |
|
|
<p>Revitalize your vehicle's appearance with our professional detailing services. We use only the highest quality products and techniques to bring back that showroom shine.</p> |
|
|
<div> |
|
|
<a href="#booking" class="btn">Book Now</a> |
|
|
<a href="#services" class="btn btn-outline">Our Services</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="section" id="services"> |
|
|
<div class="section-title"> |
|
|
<h2>Our Services</h2> |
|
|
</div> |
|
|
<div class="services-grid"> |
|
|
<div class="service-card"> |
|
|
<div class="service-icon"> |
|
|
<i class="fas fa-spray-can"></i> |
|
|
</div> |
|
|
<h3>Exterior Detailing</h3> |
|
|
<p>Complete exterior cleaning including hand wash, clay bar treatment, polishing, and wax application for unmatched shine.</p> |
|
|
<div class="price">$149+</div> |
|
|
<a href="#booking" class="btn">Book Service</a> |
|
|
</div> |
|
|
<div class="service-card"> |
|
|
<div class="service-icon"> |
|
|
<i class="fas fa-pump-soap"></i> |
|
|
</div> |
|
|
<h3>Interior Detailing</h3> |
|
|
<p>Deep clean for your interior including shampooing carpets, leather conditioning, and thorough sanitization.</p> |
|
|
<div class="price">$179+</div> |
|
|
<a href="#booking" class="btn">Book Service</a> |
|
|
</div> |
|
|
<div class="service-card"> |
|
|
<div class="service-icon"> |
|
|
<i class="fas fa-spa"></i> |
|
|
</div> |
|
|
<h3>Full Detailing</h3> |
|
|
<p>Complete interior and exterior detailing package for comprehensive vehicle rejuvenation.</p> |
|
|
<div class="price">$299+</div> |
|
|
<a href="#booking" class="btn">Book Service</a> |
|
|
</div> |
|
|
<div class="service-card"> |
|
|
<div class="service-icon"> |
|
|
<i class="fas fa-shield-alt"></i> |
|
|
</div> |
|
|
<h3>Ceramic Coating</h3> |
|
|
<p>Advanced paint protection with ceramic coating that lasts for years with proper maintenance.</p> |
|
|
<div class="price">$499+</div> |
|
|
<a href="#booking" class="btn">Book Service</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="booking" id="booking"> |
|
|
<div class="section-title"> |
|
|
<h2>Book Your Service</h2> |
|
|
</div> |
|
|
<form id="bookingForm" class="booking-form" onsubmit="processBooking(event)"> |
|
|
<div class="form-row"> |
|
|
<div class="form-group"> |
|
|
<label for="name">Full Name</label> |
|
|
<input type="text" id="name" class="form-control" required> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="email">Email</label> |
|
|
<input type="email" id="email" class="form-control" required> |
|
|
</div> |
|
|
</div> |
|
|
<div class="form-row"> |
|
|
<div class="form-group"> |
|
|
<label for="phone">Phone Number</label> |
|
|
<input type="tel" id="phone" class="form-control" required> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="vehicle">Vehicle Make/Model</label> |
|
|
<input type="text" id="vehicle" class="form-control" required> |
|
|
</div> |
|
|
</div> |
|
|
<div class="form-row"> |
|
|
<div class="form-group"> |
|
|
<label for="service">Service Type</label> |
|
|
<select id="service" class="form-control" required> |
|
|
<option value="">Select a Service</option> |
|
|
<option value="exterior">Exterior Detailing ($149)</option> |
|
|
<option value="interior">Interior Detailing ($179)</option> |
|
|
<option value="full">Full Detailing ($299)</option> |
|
|
<option value="ceramic">Ceramic Coating ($499)</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="date">Appointment Date</label> |
|
|
<input type="date" id="date" class="form-control" required> |
|
|
</div> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="notes">Special Requests</label> |
|
|
<textarea id="notes" class="form-control" rows="3"></textarea> |
|
|
</div> |
|
|
|
|
|
<div class="payment-section"> |
|
|
<h4>Payment Information</h4> |
|
|
<p>We require a $50 deposit to secure your appointment.</p> |
|
|
<div id="card-element" class="form-control"></div> |
|
|
<div id="card-errors" role="alert" style="color: #dc3545; margin-bottom: 15px;"></div> |
|
|
<button type="submit" class="btn" id="submitBtn"> |
|
|
<span id="button-text">Pay Deposit & Book Now</span> |
|
|
<span id="button-spinner" style="display: none;"> |
|
|
<i class="fas fa-spinner fa-spin"></i> Processing... |
|
|
</span> |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</section> |
|
|
|
|
|
<section class="section" id="testimonials"> |
|
|
<div class="section-title"> |
|
|
<h2>Customer Testimonials</h2> |
|
|
</div> |
|
|
<div class="testimonial-slider"> |
|
|
<div class="testimonial-card"> |
|
|
<div class="rating"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
<p>"My car looks brand new after the full detailing! The team was professional and thorough. Will definitely be coming back!"</p> |
|
|
<div class="client-info"> |
|
|
<div class="client-avatar"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Johnson"> |
|
|
</div> |
|
|
<div class="client-name"> |
|
|
<h4>Michael Johnson</h4> |
|
|
<p>BMW 5 Series Owner</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="testimonial-card"> |
|
|
<div class="rating"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
<p>"The ceramic coating was worth every penny. My car beads water like nothing I've ever seen. Highly recommend!"</p> |
|
|
<div class="client-info"> |
|
|
<div class="client-avatar"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Williams"> |
|
|
</div> |
|
|
<div class="client-name"> |
|
|
<h4>Sarah Williams</h4> |
|
|
<p>Porsche 911 Owner</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="testimonial-card"> |
|
|
<div class="rating"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star-half-alt"></i> |
|
|
</div> |
|
|
<p>"I spilled coffee all over my seats, and they got it completely out. The interior smells amazing and looks as good as new."</p> |
|
|
<div class="client-info"> |
|
|
<div class="client-avatar"> |
|
|
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="David Chen"> |
|
|
</div> |
|
|
<div class="client-name"> |
|
|
<h4>David Chen</h4> |
|
|
<p>Tesla Model 3 Owner</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="section" id="gallery"> |
|
|
<div class="section-title"> |
|
|
<h2>Our Work</h2> |
|
|
</div> |
|
|
<div class="gallery"> |
|
|
<div class="gallery-item"> |
|
|
<img src="https://images.unsplash.com/photo-1598550872911-e344d8a62cf8?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80" alt="Car Detailing"> |
|
|
</div> |
|
|
<div class="gallery-item"> |
|
|
<img src="https://images.unsplash.com/photo-1542362567-b07e54358753?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80" alt="Car Wash"> |
|
|
</div> |
|
|
<div class="gallery-item"> |
|
|
<img src="https://images.unsplash.com/photo-1621761191319-c6fb62004040?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80" alt="Interior Cleaning"> |
|
|
</div> |
|
|
<div class="gallery-item"> |
|
|
<img src="https://images.unsplash.com/photo-1607863689396-0a57df2e1e96?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80" alt="Wax Application"> |
|
|
</div> |
|
|
<div class="gallery-item"> |
|
|
<img src="https://images.unsplash.com/photo-1598514982316-5a2a4b5e0ba0?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80" alt="Polishing"> |
|
|
</div> |
|
|
<div class="gallery-item"> |
|
|
<img src="https://images.unsplash.com/photo-1551269901-5c5e14c25df7?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80" alt="Shiny Paint"> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="section" id="faq"> |
|
|
<div class="section-title"> |
|
|
<h2>Frequently Asked Questions</h2> |
|
|
</div> |
|
|
<div class="faq-list"> |
|
|
<div class="faq-item"> |
|
|
<div class="faq-question"> |
|
|
<span>How long does detailing take?</span> |
|
|
<i class="fas fa-chevron-down faq-toggle"></i> |
|
|
</div> |
|
|
<div class="faq-answer"> |
|
|
<p>Our exterior detailing typically takes 2-3 hours, interior detailing 3-4 hours, and full detailing packages generally require 5-6 hours. Ceramic coating applications take the longest at 1-2 days due to curing requirements.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="faq-item"> |
|
|
<div class="faq-question"> |
|
|
<span>What's the difference between wax and ceramic coating?</span> |
|
|
<i class="fas fa-chevron-down faq-toggle"></i> |
|
|
</div> |
|
|
<div class="faq-answer"> |
|
|
<p>Traditional wax provides shine and protection for 1-3 months, while ceramic coating forms a molecular bond with your paint that lasts for years with proper maintenance. Ceramic coating also offers superior protection against UV rays, chemicals, and environmental contaminants.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="faq-item"> |
|
|
<div class="faq-question"> |
|
|
<span>Can you remove scratches from my car?</span> |
|
|
<i class="fas fa-chevron-down faq-toggle"></i> |
|
|
</div> |
|
|
<div class="faq-answer"> |
|
|
<p>We can improve or remove many light scratches through our polishing process. However, deep scratches that penetrate the clear coat may require touch-up paint or professional repainting. We'll assess your specific case during the booking process.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="faq-item"> |
|
|
<div class="faq-question"> |
|
|
<span>Do you offer mobile detailing services?</span> |
|
|
<i class="fas fa-chevron-down faq-toggle"></i> |
|
|
</div> |
|
|
<div class="faq-answer"> |
|
|
<p>Yes! We offer mobile detailing within a 20-mile radius of our main location. There is a small travel fee depending on distance, and we require access to water and electrical outlets at your location for our equipment.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="faq-item"> |
|
|
<div class="faq-question"> |
|
|
<span>How often should I get my car detailed?</span> |
|
|
<i class="fas fa-chevron-down faq-toggle"></i> |
|
|
</div> |
|
|
<div class="faq-answer"> |
|
|
<p>We recommend exterior detailing every 3-6 months and interior detailing every 6-12 months, depending on your vehicle usage and climate conditions. Ceramic coated vehicles need maintenance washes every 1-2 weeks and annual inspections to maintain warranty.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="backend-preview"> |
|
|
<div class="section-title"> |
|
|
<h2>Business Management Dashboard</h2> |
|
|
<p>Preview of our powerful backend system (Admin access required)</p> |
|
|
</div> |
|
|
<div class="backend-features"> |
|
|
<div class="feature-card"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-calendar-alt"></i> |
|
|
</div> |
|
|
<h3>Appointment Scheduling</h3> |
|
|
<p>Real-time calendar with drag-and-drop booking, automated reminders, and conflict detection.</p> |
|
|
</div> |
|
|
<div class="feature-card"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-wallet"></i> |
|
|
</div> |
|
|
<h3>Payment Processing</h3> |
|
|
<p>Secure credit card payments, deposit management, and automatic payment tracking.</p> |
|
|
</div> |
|
|
<div class="feature-card"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</div> |
|
|
<h3>Business Analytics</h3> |
|
|
<p>Detailed reports on revenue, service popularity, customer retention, and team performance.</p> |
|
|
</div> |
|
|
<div class="feature-card"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-user-shield"></i> |
|
|
</div> |
|
|
<h3>Customer Management</h3> |
|
|
<p>Complete customer profiles with service history, vehicle details, and preference tracking.</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="login-form" id="adminLogin"> |
|
|
<h3>Admin Login</h3> |
|
|
<div class="form-group"> |
|
|
<label for="username">Username</label> |
|
|
<input type="text" id="username" class="form-control" required> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="password">Password</label> |
|
|
<input type="password" id="password" class="form-control" required> |
|
|
</div> |
|
|
<button type="button" class="btn" onclick="adminLogin()">Login</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<footer> |
|
|
<div class="footer-content"> |
|
|
<div class="footer-column"> |
|
|
<h3>Elite Auto Detailing</h3> |
|
|
<p>Premium car care services using professional techniques and high-quality products to restore your vehicle's appearance.</p> |
|
|
<div class="social-links"> |
|
|
<a href="#"><i class="fab fa-facebook-f"></i></a> |
|
|
<a href="#"><i class="fab fa-instagram"></i></a> |
|
|
<a href="#"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#"><i class="fab fa-yelp"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="footer-column"> |
|
|
<h3>Quick Links</h3> |
|
|
<a href="#home">Home</a> |
|
|
<a href="#services">Services</a> |
|
|
<a href="#gallery">Gallery</a> |
|
|
<a href="#testimonials">Testimonials</a> |
|
|
<a href="#faq">FAQ</a> |
|
|
<a href="#booking">Booking</a> |
|
|
</div> |
|
|
<div class="footer-column"> |
|
|
<h3>Services</h3> |
|
|
<a href="#booking">Exterior Detailing</a> |
|
|
<a href="#booking">Interior Detailing</a> |
|
|
<a href="#booking">Full Detailing</a> |
|
|
<a href="#booking">Ceramic Coating</a> |
|
|
<a href="#booking">Paint Correction</a> |
|
|
<a href="#booking">Headlight Restoration</a> |
|
|
</div> |
|
|
<div class="footer-column"> |
|
|
<h3>Contact Us</h3> |
|
|
<p><i class="fas fa-map-marker-alt"></i> 123 Detail Street, Auto City, CA 90210</p> |
|
|
<p><i class="fas fa-phone"></i> (555) 123-4567</p> |
|
|
<p><i class="fas fa-envelope"></i> info@eliteautodetail.com</p> |
|
|
<p><i class="fas fa-clock"></i> Mon-Sat: 8am-6pm</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="footer-bottom"> |
|
|
<p>© 2023 Elite Auto Detailing. All Rights Reserved.</p> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const themeToggle = document.getElementById('themeToggle'); |
|
|
const body = document.body; |
|
|
|
|
|
themeToggle.addEventListener('click', () => { |
|
|
const currentTheme = body.getAttribute('data-theme'); |
|
|
if (currentTheme === 'dark') { |
|
|
body.setAttribute('data-theme', 'light'); |
|
|
themeToggle.innerHTML = '<i class="fas fa-sun"></i>'; |
|
|
} else { |
|
|
body.setAttribute('data-theme', 'dark'); |
|
|
themeToggle.innerHTML = '<i class="fas fa-moon"></i>'; |
|
|
} |
|
|
localStorage.setItem('theme', body.getAttribute('data-theme')); |
|
|
}); |
|
|
|
|
|
|
|
|
const savedTheme = localStorage.getItem('theme'); |
|
|
if (savedTheme) { |
|
|
body.setAttribute('data-theme', savedTheme); |
|
|
if (savedTheme === 'light') { |
|
|
themeToggle.innerHTML = '<i class="fas fa-sun"></i>'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const animateOnScroll = () => { |
|
|
const elements = document.querySelectorAll('.service-card, .booking-form'); |
|
|
|
|
|
elements.forEach(element => { |
|
|
const elementPosition = element.getBoundingClientRect().top; |
|
|
const windowHeight = window.innerHeight; |
|
|
|
|
|
if (elementPosition < windowHeight - 100) { |
|
|
element.classList.add('visible'); |
|
|
} |
|
|
}); |
|
|
}; |
|
|
|
|
|
window.addEventListener('scroll', animateOnScroll); |
|
|
window.addEventListener('load', animateOnScroll); |
|
|
|
|
|
|
|
|
const faqItems = document.querySelectorAll('.faq-item'); |
|
|
|
|
|
faqItems.forEach(item => { |
|
|
const question = item.querySelector('.faq-question'); |
|
|
|
|
|
question.addEventListener('click', () => { |
|
|
|
|
|
faqItems.forEach(otherItem => { |
|
|
if (otherItem !== item && otherItem.classList.contains('active')) { |
|
|
otherItem.classList.remove('active'); |
|
|
} |
|
|
}); |
|
|
|
|
|
item.classList.toggle('active'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
const targetElement = document.querySelector(targetId); |
|
|
|
|
|
if (targetElement) { |
|
|
window.scrollTo({ |
|
|
top: targetElement.offsetTop - 80, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const stripe = Stripe('pk_test_YOUR_STRIPE_PUBLIC_KEY'); |
|
|
|
|
|
|
|
|
const elements = stripe.elements(); |
|
|
const cardElement = elements.create('card'); |
|
|
cardElement.mount('#card-element'); |
|
|
|
|
|
|
|
|
async function processBooking(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const submitBtn = document.getElementById('submitBtn'); |
|
|
const buttonText = document.getElementById('button-text'); |
|
|
const buttonSpinner = document.getElementById('button-spinner'); |
|
|
|
|
|
|
|
|
buttonText.style.display = 'none'; |
|
|
buttonSpinner.style.display = 'inline-block'; |
|
|
submitBtn.disabled = true; |
|
|
|
|
|
|
|
|
const formData = { |
|
|
name: document.getElementById('name').value, |
|
|
email: document.getElementById('email').value, |
|
|
phone: document.getElementById('phone').value, |
|
|
vehicle: document.getElementById('vehicle').value, |
|
|
service: document.getElementById('service').value, |
|
|
date: document.getElementById('date').value, |
|
|
notes: document.getElementById('notes').value |
|
|
}; |
|
|
|
|
|
try { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const paymentIntent = await fakeCreatePaymentIntent(5000); |
|
|
|
|
|
|
|
|
const { error, paymentIntent: confirmedPayment } = await stripe.confirmCardPayment( |
|
|
paymentIntent.client_secret, { |
|
|
payment_method: { |
|
|
card: cardElement, |
|
|
billing_details: { |
|
|
name: formData.name, |
|
|
email: formData.email |
|
|
} |
|
|
} |
|
|
} |
|
|
); |
|
|
|
|
|
if (error) { |
|
|
document.getElementById('card-errors').textContent = error.message; |
|
|
buttonText.style.display = 'inline-block'; |
|
|
buttonSpinner.style.display = 'none'; |
|
|
submitBtn.disabled = false; |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const bookingResponse = await fakeSubmitBooking(formData, confirmedPayment.id); |
|
|
|
|
|
alert('Booking confirmed! We have sent a confirmation to your email.'); |
|
|
document.getElementById('bookingForm').reset(); |
|
|
|
|
|
} catch (error) { |
|
|
console.error('Error:', error); |
|
|
alert('An error occurred. Please try again.'); |
|
|
} finally { |
|
|
buttonText.style.display = 'inline-block'; |
|
|
buttonSpinner.style.display = 'none'; |
|
|
submitBtn.disabled = false; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function fakeCreatePaymentIntent(amount) { |
|
|
return new Promise(resolve => { |
|
|
setTimeout(() => { |
|
|
resolve({ |
|
|
id: 'pi_' + Math.random().toString(36).substr(2, 8), |
|
|
client_secret: 'pi_' + Math.random().toString(36).substr(2) + '_secret_' + Math.random().toString(36).substr(2), |
|
|
amount: amount, |
|
|
currency: 'usd', |
|
|
status: 'requires_payment_method' |
|
|
}); |
|
|
}, 1000); |
|
|
}); |
|
|
} |
|
|
|
|
|
function fakeSubmitBooking(formData, paymentId) { |
|
|
console.log('Submitting booking:', formData); |
|
|
console.log('Payment ID:', paymentId); |
|
|
|
|
|
return new Promise(resolve => { |
|
|
setTimeout(() => { |
|
|
resolve({ |
|
|
success: true, |
|
|
bookingId: 'book_' + Math.random().toString(36).substr(2, 8) |
|
|
}); |
|
|
}, 1500); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
function adminLogin() { |
|
|
const username = document.getElementById('username').value; |
|
|
const password = document.getElementById('password').value; |
|
|
|
|
|
|
|
|
if (username === 'admin' && password === 'password') { |
|
|
alert('Successfully logged in! Redirecting to admin dashboard...'); |
|
|
|
|
|
} else { |
|
|
alert('Invalid credentials. Please try again.'); |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> |
|
|
</html> |
