Загрузить файлы в «sk1/src/public»
This commit is contained in:
parent
2758088ce5
commit
9cf4cc8dfd
304
sk1/src/public/auth.css
Normal file
304
sk1/src/public/auth.css
Normal file
@ -0,0 +1,304 @@
|
|||||||
|
/* Authentication Styles for Brabus Website */
|
||||||
|
|
||||||
|
/* Auth Container */
|
||||||
|
.auth-container {
|
||||||
|
padding: 150px 20px 80px;
|
||||||
|
min-height: calc(100vh - 70px);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: linear-gradient(to bottom, var(--light-bg), #ffffff);
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-card {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 480px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 20px;
|
||||||
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
|
||||||
|
padding: 40px;
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-header h2 {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-dark);
|
||||||
|
margin-bottom: 10px;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-header p {
|
||||||
|
color: var(--secondary-text);
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Auth Forms */
|
||||||
|
.auth-form {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-form.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group.half {
|
||||||
|
width: calc(50% - 10px);
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group.half:first-of-type {
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
display: block;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: var(--text-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input[type="text"],
|
||||||
|
.form-group input[type="email"],
|
||||||
|
.form-group input[type="password"] {
|
||||||
|
width: 100%;
|
||||||
|
padding: 14px 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
border: 1px solid #e0e0e0;
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input:focus {
|
||||||
|
border-color: var(--primary-color);
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Password field with toggle */
|
||||||
|
.password-field {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-password {
|
||||||
|
position: absolute;
|
||||||
|
right: 16px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--secondary-text);
|
||||||
|
transition: var(--transition);
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-password:hover {
|
||||||
|
color: var(--text-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Password strength indicator */
|
||||||
|
.password-strength {
|
||||||
|
margin-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.strength-bar {
|
||||||
|
height: 4px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
border-radius: 2px;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.strength-bar::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
width: 0;
|
||||||
|
background-color: #ff3b30;
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.strength-bar.weak::before {
|
||||||
|
width: 33%;
|
||||||
|
background-color: #ff3b30;
|
||||||
|
}
|
||||||
|
|
||||||
|
.strength-bar.medium::before {
|
||||||
|
width: 66%;
|
||||||
|
background-color: #ff9500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.strength-bar.strong::before {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #28cd41;
|
||||||
|
}
|
||||||
|
|
||||||
|
.strength-text {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--secondary-text);
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Checkbox styling */
|
||||||
|
.checkbox-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-container input[type="checkbox"] {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-top: 2px;
|
||||||
|
accent-color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-container label {
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-container a {
|
||||||
|
color: var(--primary-color);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-container a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Form actions and buttons */
|
||||||
|
.form-actions {
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-auth {
|
||||||
|
width: 100%;
|
||||||
|
padding: 14px;
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-auth:hover {
|
||||||
|
background-color: var(--primary-hover);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-auth:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Auth links */
|
||||||
|
.auth-links {
|
||||||
|
margin-top: 20px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--secondary-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-links a {
|
||||||
|
color: var(--primary-color);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-links a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-links p:not(:last-child) {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Error message */
|
||||||
|
.error-message {
|
||||||
|
background-color: rgba(255, 59, 48, 0.1);
|
||||||
|
color: #ff3b30;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-message.show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Social login */
|
||||||
|
.social-login {
|
||||||
|
margin: 30px 0;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-login::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 1px;
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-login span {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
background-color: white;
|
||||||
|
padding: 0 15px;
|
||||||
|
color: var(--secondary-text);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 15px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-btn {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: #f5f5f7;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-btn i {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-btn
|
||||||
35
sk1/src/public/cart.html
Normal file
35
sk1/src/public/cart.html
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Cart</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h2>Your Cart</h2>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Vehicle</th>
|
||||||
|
<th>Price</th>
|
||||||
|
<th>Quantity</th>
|
||||||
|
<th>Total</th>
|
||||||
|
<th>Remove</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{% for item in cart_items %}
|
||||||
|
<tr>
|
||||||
|
<td>{{ item.vehicle.name }}</td>
|
||||||
|
<td>${{ item.vehicle.price }}</td>
|
||||||
|
<td>{{ item.quantity }}</td>
|
||||||
|
<td>${{ item.vehicle.price * item.quantity }}</td>
|
||||||
|
<td><a href="{{ url_for('remove_from_cart', item_id=item.id) }}">Remove</a></td>
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<h3>Total Price: ${{ total_price }}</h3>
|
||||||
|
<button>Proceed to Checkout</button>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
198
sk1/src/public/index.html
Normal file
198
sk1/src/public/index.html
Normal file
@ -0,0 +1,198 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Brabus Premium Automotive | Official Site</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||||
|
<meta name="description" content="Discover the ultimate luxury performance vehicles at Brabus. Explore our exclusive collection of premium automobiles engineered for excellence.">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="header-container">
|
||||||
|
<div class="logo">
|
||||||
|
<a href="index.html">
|
||||||
|
<img src="images/logo.png" alt="Brabus Logo">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="index.html" class="nav-link active">Home</a></li>
|
||||||
|
<li><a href="vehicles.html" class="nav-link">Vehicles</a></li>
|
||||||
|
<li><a href="#heritage" class="nav-link">Heritage</a></li>
|
||||||
|
<li><a href="#experience" class="nav-link">Experience</a></li>
|
||||||
|
<li><a href="#" class="nav-link" id="cart-link"><i class="fas fa-shopping-cart"></i> <span id="cart-count">0</span></a></li>
|
||||||
|
<li><a href="login.html" class="nav-link" id="login-link">Sign In</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section class="intro">
|
||||||
|
<img src="images/intro.png" alt="Brabus Premium Vehicle" class="intro-image">
|
||||||
|
<div class="hero-content">
|
||||||
|
<h1>Elevate Your Drive</h1>
|
||||||
|
<a href="vehicles.html" class="btn-main">Explore the Collection</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Vehicle Gallery -->
|
||||||
|
<section class="vehicle-gallery">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Masterpieces of Engineering</h2>
|
||||||
|
<div class="carousel-container">
|
||||||
|
<button class="carousel-btn left" id="prev-btn" aria-label="Previous car">
|
||||||
|
<i class="fas fa-chevron-left"></i>
|
||||||
|
</button>
|
||||||
|
<div class="carousel">
|
||||||
|
<div class="carousel-item" id="car1">
|
||||||
|
<img src="images/car1carusel.png" alt="Brabus Sport Model">
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item" id="car2">
|
||||||
|
<img src="images/car2carusel.png" alt="Brabus SUV Model">
|
||||||
|
</div>
|
||||||
|
<div class="carousel-item" id="car3">
|
||||||
|
<img src="images/car3carusel.png" alt="Brabus Luxury Model">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="carousel-btn right" id="next-btn" aria-label="Next car">
|
||||||
|
<i class="fas fa-chevron-right"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="carousel-indicators" id="indicators">
|
||||||
|
<div class="indicator active" data-index="0"></div>
|
||||||
|
<div class="indicator" data-index="1"></div>
|
||||||
|
<div class="indicator" data-index="2"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="vehicles.html" class="btn-buy">Configure Yours</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Vehicle Categories -->
|
||||||
|
<section class="advertisement" id="heritage">
|
||||||
|
<div class="container">
|
||||||
|
<div class="advertisement-item">
|
||||||
|
<div class="advertisement-img-container">
|
||||||
|
<img src="images/car1.png" alt="Sport Class" class="advertisement-img">
|
||||||
|
</div>
|
||||||
|
<div class="advertisement-text">
|
||||||
|
<h3>Sport Class</h3>
|
||||||
|
<p>Unparalleled performance engineered for those who demand the extraordinary. Experience the perfect fusion of power and precision.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="advertisement-item">
|
||||||
|
<div class="advertisement-img-container">
|
||||||
|
<img src="images/car2.png" alt="Off-road Class" class="advertisement-img">
|
||||||
|
</div>
|
||||||
|
<div class="advertisement-text">
|
||||||
|
<h3>Off-road Class</h3>
|
||||||
|
<p>Conquer any terrain with confidence. Built with rugged sophistication and uncompromising capability for adventurous spirits.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="advertisement-item">
|
||||||
|
<div class="advertisement-img-container">
|
||||||
|
<img src="images/car3.png" alt="Luxury Class" class="advertisement-img">
|
||||||
|
</div>
|
||||||
|
<div class="advertisement-text">
|
||||||
|
<h3>Luxury Class</h3>
|
||||||
|
<p>The pinnacle of automotive refinement. Where meticulous craftsmanship meets innovative technology for an unmatched driving experience.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Call to Action -->
|
||||||
|
<section class="cta-section" id="experience">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Customize Your Brabus</h2>
|
||||||
|
<p>Work with our expert designers to create a vehicle that's as unique as you are.</p>
|
||||||
|
<a href="vehicles.html" class="btn-main">Start Customization</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Cart Overlay -->
|
||||||
|
<div class="cart-overlay" id="cart-overlay">
|
||||||
|
<div class="cart-content">
|
||||||
|
<div class="cart-header">
|
||||||
|
<h2>Your Cart</h2>
|
||||||
|
<button class="close-cart"><i class="fas fa-times"></i></button>
|
||||||
|
</div>
|
||||||
|
<div class="cart-items" id="cart-items">
|
||||||
|
<!-- Cart items will be added here dynamically -->
|
||||||
|
</div>
|
||||||
|
<div class="cart-footer">
|
||||||
|
<div class="cart-total">
|
||||||
|
<span>Total:</span>
|
||||||
|
<span id="cart-total-price">$0</span>
|
||||||
|
</div>
|
||||||
|
<button class="btn-checkout" id="checkout-btn">Proceed to Checkout</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer>
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="footer-column">
|
||||||
|
<h4>Models</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="vehicles.html?category=sport">Sport Series</a></li>
|
||||||
|
<li><a href="vehicles.html?category=offroad">Off-road Series</a></li>
|
||||||
|
<li><a href="vehicles.html?category=luxury">Luxury Series</a></li>
|
||||||
|
<li><a href="vehicles.html">Limited Editions</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-column">
|
||||||
|
<h4>Services</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Financing</a></li>
|
||||||
|
<li><a href="#">Maintenance</a></li>
|
||||||
|
<li><a href="#">Customization</a></li>
|
||||||
|
<li><a href="#">Warranty</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-column">
|
||||||
|
<h4>Company</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">About Us</a></li>
|
||||||
|
<li><a href="#">Careers</a></li>
|
||||||
|
<li><a href="#">News</a></li>
|
||||||
|
<li><a href="#">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-column">
|
||||||
|
<h4>Legal</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Privacy Policy</a></li>
|
||||||
|
<li><a href="#">Terms of Service</a></li>
|
||||||
|
<li><a href="#">Cookie Policy</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<p>© 2025 Brabus Automotive. All rights reserved.</p>
|
||||||
|
<div class="social-icons">
|
||||||
|
<a href="#" class="social-icon" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
|
||||||
|
<a href="#" class="social-icon" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
|
||||||
|
<a href="#" class="social-icon" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
|
||||||
|
<a href="#" class="social-icon" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
<script src="cart.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
108
sk1/src/public/login.html
Normal file
108
sk1/src/public/login.html
Normal file
@ -0,0 +1,108 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Login - Brabus Premium Automotive</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
<link rel="stylesheet" href="auth.css">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="header-container">
|
||||||
|
<div class="logo">
|
||||||
|
<a href="index.html">
|
||||||
|
<img src="images/logo.png" alt="Brabus Logo">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="index.html" class="nav-link">Home</a></li>
|
||||||
|
<li><a href="vehicles.html" class="nav-link">Vehicles</a></li>
|
||||||
|
<li><a href="index.html#heritage" class="nav-link">Heritage</a></li>
|
||||||
|
<li><a href="index.html#experience" class="nav-link">Experience</a></li>
|
||||||
|
<li><a href="#" class="nav-link" id="cart-link"><i class="fas fa-shopping-cart"></i> <span id="cart-count">0</span></a></li>
|
||||||
|
<li><a href="login.html" class="nav-link active" id="login-link">Sign In</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="auth-container">
|
||||||
|
<div class="auth-card">
|
||||||
|
<div class="auth-header">
|
||||||
|
<h2 id="auth-title">Sign In</h2>
|
||||||
|
<p id="auth-subtitle">Use your Brabus account</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="error-message" class="error-message"></div>
|
||||||
|
|
||||||
|
<!-- Login Form -->
|
||||||
|
<form id="login-form" class="auth-form active">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="login-email">Email</label>
|
||||||
|
<input type="email" id="login-email" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="login-password">Password</label>
|
||||||
|
<div class="password-field">
|
||||||
|
<input type="password" id="login-password" required>
|
||||||
|
<button type="button" class="toggle-password" aria-label="Toggle password visibility">
|
||||||
|
<i class="far fa-eye"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-actions">
|
||||||
|
<button type="submit" class="btn-auth">Sign In</button>
|
||||||
|
</div>
|
||||||
|
<div class="auth-links">
|
||||||
|
<p>Don't have an account? <a href="#" id="to-register">Create one</a></p>
|
||||||
|
<p><a href="#" class="forgot-password">Forgot password?</a></p>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!-- Register Form -->
|
||||||
|
<form id="register-form" class="auth-form">
|
||||||
|
<div class="form-group half">
|
||||||
|
<label for="reg-first-name">First Name</label>
|
||||||
|
<input type="text" id="reg-first-name" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group half">
|
||||||
|
<label for="reg-last-name">Last Name</label>
|
||||||
|
<input type="text" id="reg-last-name" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="reg-email">Email</label>
|
||||||
|
<input type="email" id="reg-email" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="reg-password">Password</label>
|
||||||
|
<div class="password-field">
|
||||||
|
<input type="password" id="reg-password" required>
|
||||||
|
<button type="button" class="toggle-password" aria-label="Toggle password visibility">
|
||||||
|
<i class="far fa-eye"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="password-strength">
|
||||||
|
<div class="strength-bar"></div>
|
||||||
|
<span class="strength-text">Password strength</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="reg-confirm-password">Confirm Password</label>
|
||||||
|
<div class="password-field">
|
||||||
|
<input type="password" id="reg-confirm-password" required>
|
||||||
|
<button type="button" class="toggle-password" aria-label="Toggle password visibility">
|
||||||
|
<i class="far fa-eye"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="checkbox-container">
|
||||||
|
<input type="checkbox" id="terms" required>
|
||||||
|
<label for="terms">I agree to the <a href="#">Terms and Conditions</a></label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-actions">
|
||||||
|
<button type="submit" class="btn-auth">
|
||||||
169
sk1/src/public/script.js
Normal file
169
sk1/src/public/script.js
Normal file
@ -0,0 +1,169 @@
|
|||||||
|
// Modern JavaScript for Brabus website
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
// Elements
|
||||||
|
const header = document.querySelector('header');
|
||||||
|
const cars = document.querySelectorAll('.carousel-item');
|
||||||
|
const indicators = document.querySelectorAll('.indicator');
|
||||||
|
const totalCars = cars.length;
|
||||||
|
const prevBtn = document.getElementById('prev-btn');
|
||||||
|
const nextBtn = document.getElementById('next-btn');
|
||||||
|
|
||||||
|
// Initial state
|
||||||
|
let currentIndex = 0;
|
||||||
|
let isAnimating = false;
|
||||||
|
|
||||||
|
// Header scroll effect
|
||||||
|
function handleHeaderScroll() {
|
||||||
|
if (window.scrollY > 50) {
|
||||||
|
header.style.backgroundColor = 'rgba(29, 29, 31, 0.95)';
|
||||||
|
header.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
|
||||||
|
} else {
|
||||||
|
header.style.backgroundColor = 'rgba(29, 29, 31, 0.8)';
|
||||||
|
header.style.boxShadow = 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('scroll', handleHeaderScroll);
|
||||||
|
|
||||||
|
// Carousel navigation
|
||||||
|
function showCar(index) {
|
||||||
|
if (isAnimating) return;
|
||||||
|
isAnimating = true;
|
||||||
|
|
||||||
|
// Update carousel position
|
||||||
|
cars.forEach((car, i) => {
|
||||||
|
car.style.transform = `translateX(${(i - index) * 100}%)`;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update indicators
|
||||||
|
indicators.forEach((indicator, i) => {
|
||||||
|
indicator.classList.toggle('active', i === index);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reset animation lock after transition finishes
|
||||||
|
setTimeout(() => {
|
||||||
|
isAnimating = false;
|
||||||
|
}, 800); // Match CSS transition time
|
||||||
|
|
||||||
|
currentIndex = index;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event listeners for buttons
|
||||||
|
prevBtn.addEventListener('click', () => {
|
||||||
|
const newIndex = (currentIndex - 1 + totalCars) % totalCars;
|
||||||
|
showCar(newIndex);
|
||||||
|
});
|
||||||
|
|
||||||
|
nextBtn.addEventListener('click', () => {
|
||||||
|
const newIndex = (currentIndex + 1) % totalCars;
|
||||||
|
showCar(newIndex);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Event listeners for indicators
|
||||||
|
indicators.forEach(indicator => {
|
||||||
|
indicator.addEventListener('click', () => {
|
||||||
|
const index = parseInt(indicator.dataset.index);
|
||||||
|
showCar(index);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Auto-rotate carousel
|
||||||
|
let carouselInterval = setInterval(() => {
|
||||||
|
showCar((currentIndex + 1) % totalCars);
|
||||||
|
}, 5000);
|
||||||
|
|
||||||
|
// Pause auto-rotation when user interacts with carousel
|
||||||
|
const carouselContainer = document.querySelector('.carousel-container');
|
||||||
|
|
||||||
|
carouselContainer.addEventListener('mouseenter', () => {
|
||||||
|
clearInterval(carouselInterval);
|
||||||
|
});
|
||||||
|
|
||||||
|
carouselContainer.addEventListener('mouseleave', () => {
|
||||||
|
carouselInterval = setInterval(() => {
|
||||||
|
showCar((currentIndex + 1) % totalCars);
|
||||||
|
}, 5000);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Button hover effects
|
||||||
|
const buttons = document.querySelectorAll('.btn-main, .btn-buy');
|
||||||
|
|
||||||
|
buttons.forEach(button => {
|
||||||
|
button.addEventListener('mouseenter', () => {
|
||||||
|
button.style.transform = 'translateY(-2px)';
|
||||||
|
button.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)';
|
||||||
|
});
|
||||||
|
|
||||||
|
button.addEventListener('mouseleave', () => {
|
||||||
|
button.style.transform = '';
|
||||||
|
button.style.boxShadow = '';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Smooth scroll for navigation links
|
||||||
|
const navLinks = document.querySelectorAll('.nav-link');
|
||||||
|
|
||||||
|
navLinks.forEach(link => {
|
||||||
|
link.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
// Add smooth scroll logic here when sections are added
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Touch support for carousel
|
||||||
|
let touchStartX = 0;
|
||||||
|
let touchEndX = 0;
|
||||||
|
|
||||||
|
const carousel = document.querySelector('.carousel');
|
||||||
|
|
||||||
|
carousel.addEventListener('touchstart', (e) => {
|
||||||
|
touchStartX = e.changedTouches[0].screenX;
|
||||||
|
}, { passive: true });
|
||||||
|
|
||||||
|
carousel.addEventListener('touchend', (e) => {
|
||||||
|
touchEndX = e.changedTouches[0].screenX;
|
||||||
|
handleSwipe();
|
||||||
|
}, { passive: true });
|
||||||
|
|
||||||
|
function handleSwipe() {
|
||||||
|
const threshold = 50; // Minimum swiping distance
|
||||||
|
|
||||||
|
if (touchStartX - touchEndX > threshold) {
|
||||||
|
// Swipe left -> next
|
||||||
|
showCar((currentIndex + 1) % totalCars);
|
||||||
|
} else if (touchEndX - touchStartX > threshold) {
|
||||||
|
// Swipe right -> prev
|
||||||
|
showCar((currentIndex - 1 + totalCars) % totalCars);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize carousel
|
||||||
|
showCar(currentIndex);
|
||||||
|
handleHeaderScroll(); // Set initial header state
|
||||||
|
|
||||||
|
// Reveal animations on scroll
|
||||||
|
const animatedElements = document.querySelectorAll('.advertisement-item');
|
||||||
|
|
||||||
|
function checkScroll() {
|
||||||
|
animatedElements.forEach(element => {
|
||||||
|
const elementTop = element.getBoundingClientRect().top;
|
||||||
|
const windowHeight = window.innerHeight;
|
||||||
|
|
||||||
|
if (elementTop < windowHeight - 100) {
|
||||||
|
element.style.opacity = 1;
|
||||||
|
element.style.transform = 'translateY(0)';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set initial state for animation
|
||||||
|
animatedElements.forEach(element => {
|
||||||
|
element.style.opacity = 0;
|
||||||
|
element.style.transform = 'translateY(30px)';
|
||||||
|
element.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Check elements' position on load and scroll
|
||||||
|
window.addEventListener('load', checkScroll);
|
||||||
|
window.addEventListener('scroll', checkScroll);
|
||||||
|
});
|
||||||
505
sk1/src/public/styles.css
Normal file
505
sk1/src/public/styles.css
Normal file
@ -0,0 +1,505 @@
|
|||||||
|
/* Modern Apple-style CSS */
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500;600;700&display=swap');
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--primary-color: #0071e3;
|
||||||
|
--primary-hover: #0077ed;
|
||||||
|
--dark-bg: #1d1d1f;
|
||||||
|
--light-bg: #f5f5f7;
|
||||||
|
--text-dark: #1d1d1f;
|
||||||
|
--text-light: #f5f5f7;
|
||||||
|
--secondary-text: #86868b;
|
||||||
|
--transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
color: var(--text-dark);
|
||||||
|
background-color: var(--light-bg);
|
||||||
|
line-height: 1.5;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header styles */
|
||||||
|
header {
|
||||||
|
background-color: rgba(29, 29, 31, 0.8);
|
||||||
|
backdrop-filter: saturate(180%) blur(20px);
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
height: 70px;
|
||||||
|
padding: 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo img {
|
||||||
|
width: 120px;
|
||||||
|
height: auto;
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
color: var(--text-light);
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
position: relative;
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a:hover {
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -5px;
|
||||||
|
left: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 2px;
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a:hover::after {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero section */
|
||||||
|
.intro {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-top: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
filter: brightness(0.8);
|
||||||
|
transition: transform 8s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro:hover .intro-image {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
max-width: 800px;
|
||||||
|
padding: 0 20px;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content h1 {
|
||||||
|
font-size: 56px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-light);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-main {
|
||||||
|
padding: 12px 30px;
|
||||||
|
font-size: 17px;
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 30px;
|
||||||
|
transition: var(--transition);
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-main:hover {
|
||||||
|
background-color: var(--primary-hover);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Vehicle gallery */
|
||||||
|
.vehicle-gallery {
|
||||||
|
text-align: center;
|
||||||
|
padding: 120px 0;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vehicle-gallery h2 {
|
||||||
|
font-size: 48px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 60px;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-container {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 90%;
|
||||||
|
max-width: 1200px;
|
||||||
|
height: 500px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-item {
|
||||||
|
min-width: 100%;
|
||||||
|
position: relative;
|
||||||
|
transition: transform 0.8s cubic-bezier(0.42, 0, 0.58, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-btn {
|
||||||
|
background-color: rgba(255, 255, 255, 0.2);
|
||||||
|
color: var(--text-dark);
|
||||||
|
font-size: 24px;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
border-radius: 50%;
|
||||||
|
z-index: 10;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-btn:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-indicators {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: var(--secondary-text);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.indicator.active {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
width: 20px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-buy {
|
||||||
|
padding: 12px 30px;
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
color: white;
|
||||||
|
font-size: 17px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: 40px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
transition: var(--transition);
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-buy:hover {
|
||||||
|
background-color: var(--primary-hover);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Car classes */
|
||||||
|
.advertisement {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 30px;
|
||||||
|
padding: 100px 0;
|
||||||
|
background-color: var(--light-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.advertisement-item {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 300px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.advertisement-item:hover {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.advertisement-img-container {
|
||||||
|
height: 250px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advertisement-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.advertisement-item:hover .advertisement-img {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.advertisement-text {
|
||||||
|
padding: 30px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advertisement-text h3 {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advertisement-text p {
|
||||||
|
color: var(--secondary-text);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Call to action section */
|
||||||
|
.cta-section {
|
||||||
|
background-color: var(--dark-bg);
|
||||||
|
color: var(--text-light);
|
||||||
|
text-align: center;
|
||||||
|
padding: 100px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-section h2 {
|
||||||
|
font-size: 48px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-section p {
|
||||||
|
font-size: 21px;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto 40px;
|
||||||
|
color: var(--secondary-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
footer {
|
||||||
|
background-color: var(--dark-bg);
|
||||||
|
color: var(--secondary-text);
|
||||||
|
padding: 60px 0 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-column {
|
||||||
|
min-width: 200px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-column h4 {
|
||||||
|
color: var(--text-light);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-column ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-column li {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-column a {
|
||||||
|
color: var(--secondary-text);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-column a:hover {
|
||||||
|
color: var(--text-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bottom {
|
||||||
|
padding-top: 30px;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icons {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-icon:hover {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive adjustments */
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.header-container {
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content h1 {
|
||||||
|
font-size: 42px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advertisement {
|
||||||
|
padding: 80px 20px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advertisement-item {
|
||||||
|
flex: 0 0 calc(50% - 15px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
nav ul {
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content h1 {
|
||||||
|
font-size: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.advertisement-item {
|
||||||
|
flex: 0 0 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vehicle-gallery h2,
|
||||||
|
.cta-section h2 {
|
||||||
|
font-size: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-section p {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.header-container {
|
||||||
|
flex-direction: column;
|
||||||
|
height: auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content h1 {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-btn {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
475
sk1/src/public/vehicles.css
Normal file
475
sk1/src/public/vehicles.css
Normal file
@ -0,0 +1,475 @@
|
|||||||
|
/* Vehicles Page Styles */
|
||||||
|
|
||||||
|
/* Hero section */
|
||||||
|
.vehicles-container {
|
||||||
|
padding-top: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vehicles-hero {
|
||||||
|
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('images/vehicles-hero.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
height: 50vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: var(--text-light);
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vehicles-hero h1 {
|
||||||
|
font-size: 56px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vehicles-hero p {
|
||||||
|
font-size: 21px;
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Filters section */
|
||||||
|
.vehicles-filters {
|
||||||
|
background-color: white;
|
||||||
|
padding: 30px 0;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||||
|
position: sticky;
|
||||||
|
top: 70px;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-wrapper {
|
||||||
|
display: flex;
|
||||||
|
gap: 30px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-group {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-group label {
|
||||||
|
display: block;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: var(--text-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-group select {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px 16px;
|
||||||
|
font-size: 16px;
|
||||||
|
border: 1px solid #e0e0e0;
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
appearance: none;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%231d1d1f' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5l-5-5 1.5-1.5L8 8.5l3.5-3.5L13 6.5l-5 5z'/%3E%3C/svg%3E");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: right 16px center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-group select:focus {
|
||||||
|
border-color: var(--primary-color);
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Vehicles grid */
|
||||||
|
.vehicles-grid {
|
||||||
|
padding: 80px 0;
|
||||||
|
background-color: var(--light-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vehicles-list {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Vehicle cards */
|
||||||
|
.vehicle-card {
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
|
||||||
|
transition: var(--transition);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vehicle-card:hover {
|
||||||
|
transform: translateY(-10px);
|
||||||
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vehicle-image {
|
||||||
|
height: 220px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vehicle-image img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vehicle-card:hover .vehicle-image img {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vehicle-badge {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
color: white;
|
||||||
|
padding: 6px 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
border-radius: 30px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vehicle-info {
|
||||||
|
padding: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vehicle-info h3 {
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vehicle-specs {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spec {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spec i {
|
||||||
|
color: var(--primary-color);
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spec span {
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--secondary-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vehicle-price {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
border-top: 1px solid #f0f0f0;
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-to-cart {
|
||||||
|
font-size: 15px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cart overlay */
|
||||||
|
.cart-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: -400px;
|
||||||
|
width: 400px;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: white;
|
||||||
|
box-shadow: -5px 0 30px rgba(0, 0, 0, 0.1);
|
||||||
|
z-index: 1001;
|
||||||
|
transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-overlay.open {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 30px;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-header h2 {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-cart {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
font-size: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--secondary-text);
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-cart:hover {
|
||||||
|
color: var(--text-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-items {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 20px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-item {
|
||||||
|
display: flex;
|
||||||
|
gap: 15px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-item-image {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-item-image img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-item-details {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-item-name {
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-item-price {
|
||||||
|
color: var(--secondary-text);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-item-controls {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quantity-control {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quantity-btn {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: #f5f5f7;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.quantity-btn:hover {
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quantity-value {
|
||||||
|
width: 30px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.remove-btn {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: #ff3b30;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.remove-btn:hover {
|
||||||
|
color: #d70015;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-footer {
|
||||||
|
padding: 20px 30px;
|
||||||
|
background-color: #f5f5f7;
|
||||||
|
border-top: 1px solid #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-total {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-checkout {
|
||||||
|
width: 100%;
|
||||||
|
padding: 14px;
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: var(--transition);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-checkout:hover {
|
||||||
|
background-color: var(--primary-hover);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-cart {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px 0;
|
||||||
|
color: var(--secondary-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-cart i {
|
||||||
|
font-size: 50px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.continue-shopping {
|
||||||
|
margin-top: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
color: var(--primary-color);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.continue-shopping:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive adjustments */
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
.vehicles-hero h1 {
|
||||||
|
font-size: 42px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vehicles-hero p {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.vehicles-hero h1 {
|
||||||
|
font-size: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-overlay {
|
||||||
|
width: 100%;
|
||||||
|
right: -100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.vehicles-hero h1 {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-wrapper {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vehicle-price {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 15px;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-to-cart {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animation for cart items */
|
||||||
|
@keyframes slideIn {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(20px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-item {
|
||||||
|
animation: slideIn 0.3s ease forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fade overlay when cart is open */
|
||||||
|
.overlay-bg {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 1000;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay-bg.active {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Active nav link */
|
||||||
|
.nav-link.active {
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link.active::after {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
327
sk1/src/public/vehicles.html
Normal file
327
sk1/src/public/vehicles.html
Normal file
@ -0,0 +1,327 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Vehicles - Brabus Premium Automotive</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
<link rel="stylesheet" href="vehicles.css">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="header-container">
|
||||||
|
<div class="logo">
|
||||||
|
<a href="index.html">
|
||||||
|
<img src="images/logo.png" alt="Brabus Logo">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="index.html" class="nav-link">Home</a></li>
|
||||||
|
<li><a href="vehicles.html" class="nav-link active">Vehicles</a></li>
|
||||||
|
<li><a href="index.html#heritage" class="nav-link">Heritage</a></li>
|
||||||
|
<li><a href="index.html#experience" class="nav-link">Experience</a></li>
|
||||||
|
<li><a href="#" class="nav-link" id="cart-link"><i class="fas fa-shopping-cart"></i> <span id="cart-count">0</span></a></li>
|
||||||
|
<li><a href="login.html" class="nav-link" id="login-link">Sign In</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="vehicles-container">
|
||||||
|
<div class="vehicles-hero">
|
||||||
|
<h1>Discover Perfection</h1>
|
||||||
|
<p>Explore our exclusive collection of premium automobiles</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="vehicles-filters">
|
||||||
|
<div class="container">
|
||||||
|
<div class="filter-wrapper">
|
||||||
|
<div class="filter-group">
|
||||||
|
<label for="category-filter">Category</label>
|
||||||
|
<select id="category-filter">
|
||||||
|
<option value="all">All Categories</option>
|
||||||
|
<option value="sport">Sport</option>
|
||||||
|
<option value="luxury">Luxury</option>
|
||||||
|
<option value="offroad">Off-road</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="filter-group">
|
||||||
|
<label for="price-filter">Price Range</label>
|
||||||
|
<select id="price-filter">
|
||||||
|
<option value="all">All Prices</option>
|
||||||
|
<option value="100000-200000">$100,000 - $200,000</option>
|
||||||
|
<option value="200000-300000">$200,000 - $300,000</option>
|
||||||
|
<option value="300000-plus">$300,000+</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="filter-group">
|
||||||
|
<label for="sort-filter">Sort By</label>
|
||||||
|
<select id="sort-filter">
|
||||||
|
<option value="newest">Newest First</option>
|
||||||
|
<option value="price-low">Price: Low to High</option>
|
||||||
|
<option value="price-high">Price: High to Low</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="vehicles-grid">
|
||||||
|
<div class="container">
|
||||||
|
<div class="vehicles-list">
|
||||||
|
<!-- Vehicle Card 1 -->
|
||||||
|
<div class="vehicle-card" data-category="sport" data-price="280000">
|
||||||
|
<div class="vehicle-image">
|
||||||
|
<img src="images/StoreCar1.png" alt="Brabus S Class">
|
||||||
|
<div class="vehicle-badge">New</div>
|
||||||
|
</div>
|
||||||
|
<div class="vehicle-info">
|
||||||
|
<h3>Brabus S Class</h3>
|
||||||
|
<div class="vehicle-specs">
|
||||||
|
<div class="spec">
|
||||||
|
<i class="fas fa-tachometer-alt"></i>
|
||||||
|
<span>800 HP</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec">
|
||||||
|
<i class="fas fa-bolt"></i>
|
||||||
|
<span>3.4s 0-100</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec">
|
||||||
|
<i class="fas fa-gas-pump"></i>
|
||||||
|
<span>Twin-Turbo V8</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="vehicle-price">
|
||||||
|
<span class="price">$280,000</span>
|
||||||
|
<button class="btn-buy add-to-cart" data-id="1" data-name="Brabus S Class" data-price="280000">Add to Cart</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Vehicle Card 2 -->
|
||||||
|
<div class="vehicle-card" data-category="offroad" data-price="320000">
|
||||||
|
<div class="vehicle-image">
|
||||||
|
<img src="images/StoreCar2.png" alt="Brabus G Wagon">
|
||||||
|
</div>
|
||||||
|
<div class="vehicle-info">
|
||||||
|
<h3>Brabus G Wagon</h3>
|
||||||
|
<div class="vehicle-specs">
|
||||||
|
<div class="spec">
|
||||||
|
<i class="fas fa-tachometer-alt"></i>
|
||||||
|
<span>850 HP</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec">
|
||||||
|
<i class="fas fa-bolt"></i>
|
||||||
|
<span>3.8s 0-100</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec">
|
||||||
|
<i class="fas fa-gas-pump"></i>
|
||||||
|
<span>V12 BiTurbo</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="vehicle-price">
|
||||||
|
<span class="price">$320,000</span>
|
||||||
|
<button class="btn-buy add-to-cart" data-id="2" data-name="Brabus G Wagon" data-price="320000">Add to Cart</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Vehicle Card 3 -->
|
||||||
|
<div class="vehicle-card" data-category="luxury" data-price="240000">
|
||||||
|
<div class="vehicle-image">
|
||||||
|
<img src="images/StoreCar3.png" alt="Brabus Maybach">
|
||||||
|
<div class="vehicle-badge">Limited</div>
|
||||||
|
</div>
|
||||||
|
<div class="vehicle-info">
|
||||||
|
<h3>Brabus Maybach</h3>
|
||||||
|
<div class="vehicle-specs">
|
||||||
|
<div class="spec">
|
||||||
|
<i class="fas fa-tachometer-alt"></i>
|
||||||
|
<span>700 HP</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec">
|
||||||
|
<i class="fas fa-bolt"></i>
|
||||||
|
<span>4.2s 0-100</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec">
|
||||||
|
<i class="fas fa-gas-pump"></i>
|
||||||
|
<span>V12</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="vehicle-price">
|
||||||
|
<span class="price">$240,000</span>
|
||||||
|
<button class="btn-buy add-to-cart" data-id="3" data-name="Brabus Maybach" data-price="240000">Add to Cart</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Vehicle Card 4 -->
|
||||||
|
<div class="vehicle-card" data-category="sport" data-price="180000">
|
||||||
|
<div class="vehicle-image">
|
||||||
|
<img src="images/StoreCar4.png" alt="Brabus C63 AMG">
|
||||||
|
</div>
|
||||||
|
<div class="vehicle-info">
|
||||||
|
<h3>Brabus C63 AMG</h3>
|
||||||
|
<div class="vehicle-specs">
|
||||||
|
<div class="spec">
|
||||||
|
<i class="fas fa-tachometer-alt"></i>
|
||||||
|
<span>650 HP</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec">
|
||||||
|
<i class="fas fa-bolt"></i>
|
||||||
|
<span>3.2s 0-100</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec">
|
||||||
|
<i class="fas fa-gas-pump"></i>
|
||||||
|
<span>V8 BiTurbo</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="vehicle-price">
|
||||||
|
<span class="price">$180,000</span>
|
||||||
|
<button class="btn-buy add-to-cart" data-id="4" data-name="Brabus C63 AMG" data-price="180000">Add to Cart</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Vehicle Card 5 -->
|
||||||
|
<div class="vehicle-card" data-category="luxury" data-price="350000">
|
||||||
|
<div class="vehicle-image">
|
||||||
|
<img src="images/StoreCar5.png" alt="Brabus SL Roadster">
|
||||||
|
<div class="vehicle-badge">New</div>
|
||||||
|
</div>
|
||||||
|
<div class="vehicle-info">
|
||||||
|
<h3>Brabus SL Roadster</h3>
|
||||||
|
<div class="vehicle-specs">
|
||||||
|
<div class="spec">
|
||||||
|
<i class="fas fa-tachometer-alt"></i>
|
||||||
|
<span>750 HP</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec">
|
||||||
|
<i class="fas fa-bolt"></i>
|
||||||
|
<span>3.0s 0-100</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec">
|
||||||
|
<i class="fas fa-gas-pump"></i>
|
||||||
|
<span>V8 BiTurbo</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="vehicle-price">
|
||||||
|
<span class="price">$350,000</span>
|
||||||
|
<button class="btn-buy add-to-cart" data-id="5" data-name="Brabus SL Roadster" data-price="350000">Add to Cart</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Vehicle Card 6 -->
|
||||||
|
<div class="vehicle-card" data-category="offroad" data-price="290000">
|
||||||
|
<div class="vehicle-image">
|
||||||
|
<img src="images/StoreCar6.png" alt="Brabus GLS">
|
||||||
|
</div>
|
||||||
|
<div class="vehicle-info">
|
||||||
|
<h3>Brabus GLS</h3>
|
||||||
|
<div class="vehicle-specs">
|
||||||
|
<div class="spec">
|
||||||
|
<i class="fas fa-tachometer-alt"></i>
|
||||||
|
<span>780 HP</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec">
|
||||||
|
<i class="fas fa-bolt"></i>
|
||||||
|
<span>4.1s 0-100</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec">
|
||||||
|
<i class="fas fa-gas-pump"></i>
|
||||||
|
<span>V8 BiTurbo</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="vehicle-price">
|
||||||
|
<span class="price">$290,000</span>
|
||||||
|
<button class="btn-buy add-to-cart" data-id="6" data-name="Brabus GLS" data-price="290000">Add to Cart</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Cart Overlay -->
|
||||||
|
<div class="cart-overlay" id="cart-overlay">
|
||||||
|
<div class="cart-content">
|
||||||
|
<div class="cart-header">
|
||||||
|
<h2>Your Cart</h2>
|
||||||
|
<button class="close-cart"><i class="fas fa-times"></i></button>
|
||||||
|
</div>
|
||||||
|
<div class="cart-items" id="cart-items">
|
||||||
|
<!-- Cart items will be added here dynamically -->
|
||||||
|
</div>
|
||||||
|
<div class="cart-footer">
|
||||||
|
<div class="cart-total">
|
||||||
|
<span>Total:</span>
|
||||||
|
<span id="cart-total-price">$0</span>
|
||||||
|
</div>
|
||||||
|
<button class="btn-checkout" id="checkout-btn">Proceed to Checkout</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="footer-column">
|
||||||
|
<h4>Models</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="vehicles.html?category=sport">Sport Series</a></li>
|
||||||
|
<li><a href="vehicles.html?category=offroad">Off-road Series</a></li>
|
||||||
|
<li><a href="vehicles.html?category=luxury">Luxury Series</a></li>
|
||||||
|
<li><a href="vehicles.html">Limited Editions</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-column">
|
||||||
|
<h4>Services</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Financing</a></li>
|
||||||
|
<li><a href="#">Maintenance</a></li>
|
||||||
|
<li><a href="#">Customization</a></li>
|
||||||
|
<li><a href="#">Warranty</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-column">
|
||||||
|
<h4>Company</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">About Us</a></li>
|
||||||
|
<li><a href="#">Careers</a></li>
|
||||||
|
<li><a href="#">News</a></li>
|
||||||
|
<li><a href="#">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-column">
|
||||||
|
<h4>Legal</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Privacy Policy</a></li>
|
||||||
|
<li><a href="#">Terms of Service</a></li>
|
||||||
|
<li><a href="#">Cookie Policy</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<p>© 2025 Brabus Automotive. All rights reserved.</p>
|
||||||
|
<div class="social-icons">
|
||||||
|
<a href="#" class="social-icon" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
|
||||||
|
<a href="#" class="social-icon" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
|
||||||
|
<a href="#" class="social-icon" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
|
||||||
|
<a href="#" class="social-icon" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="vehicles.js"></script>
|
||||||
|
<script src="cart.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
33
sk1/src/public/vehicles.js
Normal file
33
sk1/src/public/vehicles.js
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
// Vehicles page JavaScript
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
// Elements
|
||||||
|
const header = document.querySelector('header');
|
||||||
|
const categoryFilter = document.getElementById('category-filter');
|
||||||
|
const priceFilter = document.getElementById('price-filter');
|
||||||
|
const sortFilter = document.getElementById('sort-filter');
|
||||||
|
const vehicleCards = document.querySelectorAll('.vehicle-card');
|
||||||
|
const cartLink = document.getElementById('cart-link');
|
||||||
|
const cartOverlay = document.getElementById('cart-overlay');
|
||||||
|
const closeCartBtn = document.querySelector('.close-cart');
|
||||||
|
const cartItems = document.getElementById('cart-items');
|
||||||
|
const cartTotalPrice = document.getElementById('cart-total-price');
|
||||||
|
const cartCountElement = document.getElementById('cart-count');
|
||||||
|
const checkoutBtn = document.getElementById('checkout-btn');
|
||||||
|
const addToCartButtons = document.querySelectorAll('.add-to-cart');
|
||||||
|
const loginLink = document.getElementById('login-link');
|
||||||
|
|
||||||
|
// Initial setup
|
||||||
|
let cart = JSON.parse(localStorage.getItem('brabus_cart')) || [];
|
||||||
|
updateCartCount();
|
||||||
|
checkLoginStatus();
|
||||||
|
|
||||||
|
// Header scroll effect
|
||||||
|
function handleHeaderScroll() {
|
||||||
|
if (window.scrollY > 50) {
|
||||||
|
header.style.backgroundColor = 'rgba(29, 29, 31, 0.95)';
|
||||||
|
header.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
|
||||||
|
} else {
|
||||||
|
header.style.backgroundColor = 'rgba(29, 29, 31, 0.8)';
|
||||||
|
header.style.boxShadow = 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user