1652 lines
51 KiB
HTML
1652 lines
51 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Brabus Premium Automotive | Official Site</title>
|
||
<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.">
|
||
<style>
|
||
/* Root Variables */
|
||
: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);
|
||
}
|
||
|
||
/* Reset and Base Styles */
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
background-color: var(--light-bg);
|
||
color: var(--text-dark);
|
||
line-height: 1.6;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* Utility Classes */
|
||
.hidden {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Шапка */
|
||
header {
|
||
height: 100px;
|
||
background-color: #000;
|
||
position: fixed;
|
||
width: 100%;
|
||
top: 0;
|
||
z-index: 1000;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
/* Основной контейнер */
|
||
.header-container {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 30px;
|
||
height: 100%;
|
||
position: relative; /* Добавляем для позиционирования логотипа */
|
||
}
|
||
|
||
/* Логотип (центрирование) */
|
||
.logo {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.logo img {
|
||
height: 70px;
|
||
width: auto;
|
||
}
|
||
|
||
/* Навигация (выравнивание вправо) */
|
||
nav {
|
||
margin-left: auto; /* Это сдвигает навигацию вправо */
|
||
}
|
||
|
||
nav ul {
|
||
display: flex;
|
||
gap: 25px;
|
||
list-style: none;
|
||
}
|
||
|
||
/* Адаптивность */
|
||
@media (max-width: 768px) {
|
||
.header-container {
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding-top: 15px;
|
||
}
|
||
|
||
.logo {
|
||
position: static;
|
||
transform: none;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
nav {
|
||
margin-left: 0;
|
||
}
|
||
|
||
nav ul {
|
||
gap: 15px;
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
<div class="user-profile" id="user-profile" style="display: none;">
|
||
<div class="user-avatar"></div>
|
||
<span class="user-email" id="user-email"></span>
|
||
<button class="logout-btn" onclick="logout()">Log out</button>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/* Navigation Styles */
|
||
nav ul {
|
||
display: flex;
|
||
list-style: none;
|
||
gap: 20px;
|
||
}
|
||
|
||
nav a {
|
||
color: white;
|
||
text-decoration: none;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
nav a:hover, nav a.active {
|
||
color: var(--primary-color);
|
||
}
|
||
А
|
||
#cart-count {
|
||
background-color: var(--primary-color);
|
||
color: white;
|
||
border-radius: 50%;
|
||
padding: 2px 6px;
|
||
font-size: 10px;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
/* Page Styles */
|
||
.page {
|
||
min-height: 100vh;
|
||
padding-top: 80px;
|
||
display: none;
|
||
}
|
||
|
||
.page.active {
|
||
display: block;
|
||
}
|
||
|
||
/* Home Page Intro */
|
||
.intro {
|
||
height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-size: cover;
|
||
background-position: center;
|
||
text-align: center;
|
||
color: white;
|
||
position: relative;
|
||
}
|
||
|
||
.intro-image {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
z-index: -1;
|
||
}
|
||
|
||
.hero-content {
|
||
text-align: center;
|
||
z-index: 1;
|
||
color: white;
|
||
}
|
||
|
||
.hero-content h1 {
|
||
font-size: 56px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.btn-main {
|
||
background-color: var(--primary-color);
|
||
color: white;
|
||
border: none;
|
||
padding: 12px 24px;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.btn-main:hover {
|
||
background-color: var(--primary-hover);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* Vehicle Gallery */
|
||
.vehicle-gallery {
|
||
padding: 80px 0;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.carousel-container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
margin: 40px 0;
|
||
}
|
||
|
||
.carousel {
|
||
display: flex;
|
||
overflow: hidden;
|
||
width: 80%;
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
.carousel-item {
|
||
min-width: 100%;
|
||
transition: transform 0.5s ease;
|
||
}
|
||
|
||
.carousel-item img {
|
||
width: 100%;
|
||
height: auto;
|
||
max-height: 500px;
|
||
object-fit: contain;
|
||
}
|
||
|
||
.carousel-btn {
|
||
background: none;
|
||
border: none;
|
||
font-size: 24px;
|
||
cursor: pointer;
|
||
padding: 10px;
|
||
color: var(--text-dark);
|
||
}
|
||
|
||
.carousel-indicators {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.indicator {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
background-color: #ccc;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.indicator.active {
|
||
background-color: var(--primary-color);
|
||
}
|
||
|
||
/* Vehicle Categories */
|
||
.advertisement {
|
||
padding: 80px 0;
|
||
background-color: white;
|
||
}
|
||
|
||
.advertisement-item {
|
||
display: flex;
|
||
gap: 40px;
|
||
margin-bottom: 60px;
|
||
align-items: center;
|
||
}
|
||
|
||
.advertisement-item:nth-child(even) {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.advertisement-img-container {
|
||
flex: 1;
|
||
}
|
||
|
||
.advertisement-img {
|
||
width: 100%;
|
||
height: auto;
|
||
border-radius: 10px;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.advertisement-text {
|
||
flex: 1;
|
||
}
|
||
|
||
.advertisement-text h3 {
|
||
font-size: 32px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* Call to Action */
|
||
.cta-section {
|
||
padding: 100px 0;
|
||
text-align: center;
|
||
background-color: var(--dark-bg);
|
||
color: white;
|
||
}
|
||
|
||
/* Vehicles Page */
|
||
.vehicles-hero {
|
||
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
|
||
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-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);
|
||
}
|
||
|
||
/* Vehicle Cards */
|
||
.vehicles-list {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||
gap: 30px;
|
||
padding: 80px 0;
|
||
}
|
||
|
||
.vehicle-card {
|
||
background-color: white;
|
||
border-radius: 20px;
|
||
overflow: hidden;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.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-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);
|
||
}
|
||
|
||
/* Authentication Page */
|
||
.auth-container {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
min-height: calc(100vh - 70px);
|
||
background-color: var(--light-bg);
|
||
}
|
||
|
||
.auth-card {
|
||
background: white;
|
||
border-radius: 20px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
|
||
padding: 40px;
|
||
width: 100%;
|
||
max-width: 400px;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.auth-form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.form-group input {
|
||
width: 100%;
|
||
padding: 14px 16px;
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
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);
|
||
}
|
||
|
||
.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);
|
||
}
|
||
|
||
.auth-toggle {
|
||
color: var(--primary-color);
|
||
text-decoration: none;
|
||
font-size: 15px;
|
||
text-align: center;
|
||
display: block;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.auth-toggle:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* Cart Page */
|
||
.cart-container {
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
padding: 40px 20px;
|
||
}
|
||
|
||
.cart-items {
|
||
display: grid;
|
||
gap: 20px;
|
||
margin: 40px 0;
|
||
}
|
||
|
||
.cart-item {
|
||
display: flex;
|
||
align-items: center;
|
||
border: 1px solid #ddd;
|
||
padding: 15px;
|
||
border-radius: 10px;
|
||
background-color: white;
|
||
}
|
||
|
||
.cart-item-image {
|
||
width: 100px;
|
||
height: 100px;
|
||
margin-right: 20px;
|
||
}
|
||
|
||
.cart-item-image img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.cart-item-details {
|
||
flex: 1;
|
||
}
|
||
|
||
.cart-item-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
}
|
||
|
||
.quantity-control {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.quantity-btn {
|
||
width: 30px;
|
||
height: 30px;
|
||
border: 1px solid #ddd;
|
||
background: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.remove-btn {
|
||
background: none;
|
||
border: none;
|
||
color: #ff3b30;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.cart-total {
|
||
text-align: right;
|
||
margin-top: 20px;
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.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);
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.empty-cart i {
|
||
font-size: 50px;
|
||
color: #ccc;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.continue-shopping {
|
||
color: var(--primary-color);
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
/* Footer */
|
||
footer {
|
||
background-color: var(--dark-bg);
|
||
color: white;
|
||
padding: 60px 0 20px;
|
||
}
|
||
|
||
.footer-content {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 40px;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.footer-column h4 {
|
||
margin-bottom: 20px;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.footer-column ul {
|
||
list-style: none;
|
||
}
|
||
|
||
.footer-column li {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.footer-column a {
|
||
color: #ccc;
|
||
text-decoration: none;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
.footer-column a:hover {
|
||
color: white;
|
||
}
|
||
|
||
.footer-bottom {
|
||
text-align: center;
|
||
margin-top: 60px;
|
||
padding-top: 20px;
|
||
border-top: 1px solid rgba(255,255,255,0.1);
|
||
}
|
||
|
||
.social-icons {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 20px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.social-icon {
|
||
color: white;
|
||
font-size: 20px;
|
||
}
|
||
|
||
/* Responsive Adjustments */
|
||
@media (max-width: 768px) {
|
||
nav ul {
|
||
gap: 15px;
|
||
}
|
||
|
||
.hero-content h1 {
|
||
font-size: 36px;
|
||
}
|
||
|
||
.advertisement-item {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.advertisement-item:nth-child(even) {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.filter-wrapper {
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 576px) {
|
||
.header-container {
|
||
flex-direction: column;
|
||
height: auto;
|
||
padding: 15px;
|
||
}
|
||
|
||
nav ul {
|
||
margin-top: 15px;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
}
|
||
|
||
.hero-content h1 {
|
||
font-size: 28px;
|
||
}
|
||
|
||
.vehicle-price {
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.btn-main, .add-to-cart {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
/* Animations */
|
||
@keyframes slideIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateX(20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
.cart-item {
|
||
animation: slideIn 0.3s ease forwards;
|
||
}
|
||
|
||
/* Floating cart item animation */
|
||
.floating-cart-item {
|
||
position: fixed;
|
||
width: 50px;
|
||
height: 50px;
|
||
z-index: 1001;
|
||
pointer-events: none;
|
||
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
|
||
}
|
||
|
||
.floating-cart-item img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
border-radius: 50%;
|
||
border: 2px solid var(--primary-color);
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
.user-profile {
|
||
position: absolute;
|
||
right: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
color: white;
|
||
}
|
||
|
||
.user-avatar {
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 50%;
|
||
background-color: #ff3b30;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.user-email {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.logout-btn {
|
||
background: none;
|
||
border: 1px solid white;
|
||
color: white;
|
||
padding: 5px 10px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.logout-btn:hover {
|
||
background-color: rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.user-profile {
|
||
position: static;
|
||
margin-top: 10px;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Header -->
|
||
<header>
|
||
<div class="header-container">
|
||
<div class="logo">
|
||
<a href="#" onclick="navigateTo('home')">
|
||
<img src="images/logo.png" alt="Brabus Logo">
|
||
</a>
|
||
</div>
|
||
<nav>
|
||
<ul>
|
||
<li><a href="#" onclick="navigateTo('home')" class="nav-link active">Home</a></li>
|
||
<li><a href="#" onclick="navigateTo('vehicles')" class="nav-link">Vehicles</a></li>
|
||
<li><a href="#" onclick="navigateTo('cart')" class="nav-link"><i class="fas fa-shopping-cart"></i> <span id="cart-count">0</span></a></li>
|
||
<li><a href="#" onclick="navigateTo('auth')" class="nav-link">Sign In</a></li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Home Page -->
|
||
<div id="home-page" class="page active">
|
||
<section class="intro">
|
||
<img src="images/intro.png" alt="Brabus Premium Vehicle" class="intro-image">
|
||
<div class="hero-content">
|
||
<h1>Elevate Your Drive</h1>
|
||
<button class="btn-main" onclick="navigateTo('vehicles')">Explore the Collection</button>
|
||
</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/car1carusel.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>
|
||
|
||
<button class="btn-main" onclick="navigateTo('vehicles')">Configure Yours</button>
|
||
</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>
|
||
<button class="btn-main" onclick="navigateTo('vehicles')">Start Customization</button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- Vehicles Page -->
|
||
<div id="vehicles-page" class="page">
|
||
<div class="vehicles-container">
|
||
<section class="vehicles-hero">
|
||
<h1>Our Vehicle Collection</h1>
|
||
<p>Discover the perfect blend of performance and luxury</p>
|
||
</section>
|
||
|
||
<section 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="offroad">Off-road</option>
|
||
<option value="luxury">Luxury</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="0-200000">Up to $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>
|
||
</section>
|
||
|
||
<section class="vehicles-grid">
|
||
<div class="container">
|
||
<div class="vehicles-list" id="vehicles-grid">
|
||
<div class="vehicle-card" data-category="luxury" data-price="280000">
|
||
<div class="vehicle-image">
|
||
<img src="images/StoreCar1.png" alt="Brabus S Class">
|
||
<div class="vehicle-badge">Luxury</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>620 HP</span>
|
||
</div>
|
||
<div class="spec">
|
||
<i class="fas fa-clock"></i>
|
||
<span>3.2s 0-60</span>
|
||
</div>
|
||
<div class="spec">
|
||
<i class="fas fa-gas-pump"></i>
|
||
<span>Premium</span>
|
||
</div>
|
||
</div>
|
||
<div class="vehicle-price">
|
||
<div class="price">$280,000</div>
|
||
<button class="btn-main add-to-cart"
|
||
data-id="s-class"
|
||
data-name="Brabus S Class"
|
||
data-price="280000"
|
||
data-img="images/car1carusel.png">
|
||
Add to Cart
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vehicle-card" data-category="offroad" data-price="320000">
|
||
<div class="vehicle-image">
|
||
<img src="images/StoreCar2.png" alt="Brabus G Wagon">
|
||
<div class="vehicle-badge">Off-road</div>
|
||
</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>585 HP</span>
|
||
</div>
|
||
<div class="spec">
|
||
<i class="fas fa-clock"></i>
|
||
<span>4.5s 0-60</span>
|
||
</div>
|
||
<div class="spec">
|
||
<i class="fas fa-gas-pump"></i>
|
||
<span>Premium</span>
|
||
</div>
|
||
</div>
|
||
<div class="vehicle-price">
|
||
<div class="price">$320,000</div>
|
||
<button class="btn-main add-to-cart"
|
||
data-id="g-wagon"
|
||
data-name="Brabus G Wagon"
|
||
data-price="320000"
|
||
data-img="images/car2carusel.png">
|
||
Add to Cart
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="vehicle-card" data-category="sport" data-price="350000">
|
||
<div class="vehicle-image">
|
||
<img src="images/StoreCar3.png" alt="Brabus Rocket">
|
||
<div class="vehicle-badge">Sport</div>
|
||
</div>
|
||
<div class="vehicle-info">
|
||
<h3>Brabus Rocket</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-clock"></i>
|
||
<span>2.8s 0-60</span>
|
||
</div>
|
||
<div class="spec">
|
||
<i class="fas fa-gas-pump"></i>
|
||
<span>Premium</span>
|
||
</div>
|
||
</div>
|
||
<div class="vehicle-price">
|
||
<div class="price">$350,000</div>
|
||
<button class="btn-main add-to-cart"
|
||
data-id="rocket"
|
||
data-name="Brabus Rocket"
|
||
data-price="350000"
|
||
data-img="images/car3carusel.png">
|
||
Add to Cart
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Authentication Page -->
|
||
<div id="auth-page" class="page">
|
||
<div class="auth-container">
|
||
<div class="auth-card">
|
||
<!-- Login Form -->
|
||
<form id="login-form" class="auth-form">
|
||
<h2>Login</h2>
|
||
<div class="form-group">
|
||
<input type="email" id="login-email" placeholder="Email" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<input type="password" id="login-password" placeholder="Password" required>
|
||
</div>
|
||
<button type="submit" class="btn-auth">Sign In</button>
|
||
<a href="#" class="auth-toggle" onclick="toggleAuthForm()">Don't have an account? Register</a>
|
||
</form>
|
||
|
||
<!-- Register Form -->
|
||
<form id="register-form" class="auth-form hidden">
|
||
<h2>Create Account</h2>
|
||
<div class="form-group">
|
||
<input type="text" id="reg-first-name" placeholder="First Name" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<input type="text" id="reg-last-name" placeholder="Last Name" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<input type="email" id="reg-email" placeholder="Email" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<input type="password" id="reg-password" placeholder="Password" required minlength="8">
|
||
</div>
|
||
<div class="form-group">
|
||
<input type="password" id="reg-confirm-password" placeholder="Confirm Password" required>
|
||
</div>
|
||
<button type="submit" class="btn-auth">Create Account</button>
|
||
<a href="#" class="auth-toggle" onclick="toggleAuthForm()">Already have an account? Login</a>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Cart Page -->
|
||
<div id="cart-page" class="page">
|
||
<div class="cart-container">
|
||
<h1>Your Cart</h1>
|
||
<div id="cart-items" class="cart-items">
|
||
<div class="empty-cart">
|
||
<i class="fas fa-shopping-cart"></i>
|
||
<p>Your cart is empty</p>
|
||
<a href="#" class="continue-shopping" onclick="navigateTo('vehicles')">Continue Shopping</a>
|
||
</div>
|
||
</div>
|
||
<div class="cart-total">
|
||
<span>Total:</span>
|
||
<span id="cart-total-price">$0</span>
|
||
</div>
|
||
<button class="btn-checkout" onclick="checkout()">Proceed to Checkout</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<footer>
|
||
<div class="footer-content">
|
||
<div class="footer-column">
|
||
<h4>Models</h4>
|
||
<ul>
|
||
<li><a href="#" onclick="navigateTo('vehicles')">Sport Series</a></li>
|
||
<li><a href="#" onclick="navigateTo('vehicles')">Off-road Series</a></li>
|
||
<li><a href="#" onclick="navigateTo('vehicles')">Luxury Series</a></li>
|
||
<li><a href="#" onclick="navigateTo('vehicles')">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>
|
||
</footer>
|
||
|
||
<script>
|
||
// Global State Management
|
||
let cart = JSON.parse(localStorage.getItem('brabus-cart')) || [];
|
||
let currentUser = null;
|
||
let currentCarouselIndex = 0;
|
||
|
||
// Initialize the application when DOM is loaded
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// Initialize cart count
|
||
updateCartCount();
|
||
|
||
// Initialize carousel
|
||
initCarousel();
|
||
|
||
// Set up event listeners
|
||
setupEventListeners();
|
||
|
||
// Show home page by default
|
||
navigateTo('home');
|
||
});
|
||
|
||
// Navigation Function
|
||
function navigateTo(page) {
|
||
// Hide all pages
|
||
document.querySelectorAll('.page').forEach(p => {
|
||
p.classList.remove('active');
|
||
});
|
||
|
||
// Show selected page
|
||
const selectedPage = document.getElementById(`${page}-page`);
|
||
if (selectedPage) {
|
||
selectedPage.classList.add('active');
|
||
}
|
||
|
||
// Update active nav link
|
||
document.querySelectorAll('.nav-link').forEach(link => {
|
||
link.classList.remove('active');
|
||
});
|
||
|
||
const activeLink = document.querySelector(`.nav-link[onclick*="navigateTo('${page}')"]`);
|
||
if (activeLink) {
|
||
activeLink.classList.add('active');
|
||
}
|
||
|
||
// Update cart count
|
||
updateCartCount();
|
||
|
||
// If going to cart page, render cart items
|
||
if (page === 'cart') {
|
||
renderCartItems();
|
||
}
|
||
|
||
// Scroll to top
|
||
window.scrollTo(0, 0);
|
||
}
|
||
|
||
// Cart Functions
|
||
function addToCart(id, name, price, img) {
|
||
const existingItem = cart.find(item => item.id === id);
|
||
|
||
if (existingItem) {
|
||
existingItem.quantity += 1;
|
||
} else {
|
||
cart.push({
|
||
id,
|
||
name,
|
||
price: parseFloat(price),
|
||
img,
|
||
quantity: 1
|
||
});
|
||
}
|
||
|
||
localStorage.setItem('brabus-cart', JSON.stringify(cart));
|
||
updateCartCount();
|
||
|
||
// Show feedback
|
||
const button = document.querySelector(`.add-to-cart[data-id="${id}"]`);
|
||
if (button) {
|
||
button.textContent = 'Added!';
|
||
button.classList.add('added');
|
||
setTimeout(() => {
|
||
button.textContent = 'Add to Cart';
|
||
button.classList.remove('added');
|
||
}, 1500);
|
||
}
|
||
}
|
||
|
||
function updateCartCount() {
|
||
const cartCount = cart.reduce((total, item) => total + item.quantity, 0);
|
||
document.getElementById('cart-count').textContent = cartCount;
|
||
}
|
||
|
||
function renderCartItems() {
|
||
const cartItemsContainer = document.getElementById('cart-items');
|
||
const cartTotalElement = document.getElementById('cart-total-price');
|
||
|
||
// Clear existing items
|
||
cartItemsContainer.innerHTML = '';
|
||
|
||
if (cart.length === 0) {
|
||
cartItemsContainer.innerHTML = `
|
||
<div class="empty-cart">
|
||
<i class="fas fa-shopping-cart"></i>
|
||
<p>Your cart is empty</p>
|
||
<a href="#" class="continue-shopping" onclick="navigateTo('vehicles')">Continue Shopping</a>
|
||
</div>
|
||
`;
|
||
cartTotalElement.textContent = '$0';
|
||
return;
|
||
}
|
||
|
||
let total = 0;
|
||
|
||
// Add each item to cart
|
||
cart.forEach(item => {
|
||
const itemTotal = item.price * item.quantity;
|
||
total += itemTotal;
|
||
|
||
const itemElement = document.createElement('div');
|
||
itemElement.className = 'cart-item';
|
||
itemElement.innerHTML = `
|
||
<div class="cart-item-image">
|
||
<img src="${item.img}" alt="${item.name}">
|
||
</div>
|
||
<div class="cart-item-details">
|
||
<h4 class="cart-item-name">${item.name}</h4>
|
||
<div class="cart-item-price">$${item.price.toLocaleString()}</div>
|
||
<div class="cart-item-controls">
|
||
<div class="quantity-control">
|
||
<button class="quantity-btn" onclick="updateCartItem('${item.id}', -1)">-</button>
|
||
<span class="quantity-value">${item.quantity}</span>
|
||
<button class="quantity-btn" onclick="updateCartItem('${item.id}', 1)">+</button>
|
||
</div>
|
||
<button class="remove-btn" onclick="removeFromCart('${item.id}')">
|
||
<i class="fas fa-trash"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
cartItemsContainer.appendChild(itemElement);
|
||
});
|
||
|
||
cartTotalElement.textContent = `$${total.toLocaleString()}`;
|
||
}
|
||
|
||
function updateCartItem(id, change) {
|
||
const itemIndex = cart.findIndex(item => item.id === id);
|
||
|
||
if (itemIndex !== -1) {
|
||
cart[itemIndex].quantity += change;
|
||
|
||
if (cart[itemIndex].quantity <= 0) {
|
||
// Remove item if quantity is 0 or less
|
||
cart.splice(itemIndex, 1);
|
||
}
|
||
|
||
localStorage.setItem('brabus-cart', JSON.stringify(cart));
|
||
updateCartCount();
|
||
renderCartItems();
|
||
}
|
||
}
|
||
|
||
function removeFromCart(id) {
|
||
cart = cart.filter(item => item.id !== id);
|
||
localStorage.setItem('brabus-cart', JSON.stringify(cart));
|
||
updateCartCount();
|
||
renderCartItems();
|
||
}
|
||
|
||
function checkout() {
|
||
if (cart.length === 0) {
|
||
alert('Your cart is empty!');
|
||
return;
|
||
}
|
||
|
||
alert('Thank you for your purchase!');
|
||
cart = [];
|
||
localStorage.setItem('brabus-cart', JSON.stringify(cart));
|
||
updateCartCount();
|
||
renderCartItems();
|
||
navigateTo('home');
|
||
}
|
||
|
||
// Authentication Functions
|
||
function toggleAuthForm() {
|
||
const loginForm = document.getElementById('login-form');
|
||
const registerForm = document.getElementById('register-form');
|
||
|
||
loginForm.classList.toggle('hidden');
|
||
registerForm.classList.toggle('hidden');
|
||
}
|
||
|
||
// Carousel Functions
|
||
function initCarousel() {
|
||
const carouselItems = document.querySelectorAll('.carousel-item');
|
||
const indicators = document.querySelectorAll('.indicator');
|
||
|
||
if (carouselItems.length > 0) {
|
||
showCarouselItem(currentCarouselIndex);
|
||
|
||
// Убедитесь, что все элементы карусели обрабатываются
|
||
console.log('Total carousel items:', carouselItems.length);
|
||
|
||
document.getElementById('prev-btn')?.addEventListener('click', () => {
|
||
currentCarouselIndex = (currentCarouselIndex - 1 + carouselItems.length) % carouselItems.length;
|
||
showCarouselItem(currentCarouselIndex);
|
||
});
|
||
|
||
document.getElementById('next-btn')?.addEventListener('click', () => {
|
||
currentCarouselIndex = (currentCarouselIndex + 1) % carouselItems.length;
|
||
showCarouselItem(currentCarouselIndex);
|
||
});
|
||
|
||
indicators.forEach((indicator, index) => {
|
||
indicator.addEventListener('click', () => {
|
||
currentCarouselIndex = index;
|
||
showCarouselItem(currentCarouselIndex);
|
||
});
|
||
});
|
||
}
|
||
}
|
||
|
||
function showCarouselItem(index) {
|
||
const carouselItems = document.querySelectorAll('.carousel-item');
|
||
const indicators = document.querySelectorAll('.indicator');
|
||
|
||
carouselItems.forEach((item, i) => {
|
||
item.style.transform = `translateX(${100 * (i - index)}%)`;
|
||
});
|
||
|
||
indicators.forEach((indicator, i) => {
|
||
indicator.classList.toggle('active', i === index);
|
||
});
|
||
}
|
||
|
||
function filterVehicles() {
|
||
const categoryFilter = document.getElementById('category-filter');
|
||
const priceFilter = document.getElementById('price-filter');
|
||
const sortFilter = document.getElementById('sort-filter');
|
||
|
||
if (!categoryFilter || !priceFilter || !sortFilter) return;
|
||
|
||
const selectedCategory = categoryFilter.value;
|
||
const selectedPriceRange = priceFilter.value;
|
||
const selectedSort = sortFilter.value;
|
||
|
||
const vehicleCards = document.querySelectorAll('.vehicle-card');
|
||
const vehiclesList = document.querySelector('.vehicles-list');
|
||
|
||
// Convert NodeList to Array for filtering
|
||
let filteredVehicles = Array.from(vehicleCards);
|
||
|
||
// Category filtering
|
||
if (selectedCategory !== 'all') {
|
||
filteredVehicles = filteredVehicles.filter(card =>
|
||
card.dataset.category === selectedCategory
|
||
);
|
||
}
|
||
|
||
// Price range filtering
|
||
if (selectedPriceRange !== 'all') {
|
||
const [minPrice, maxPrice] = selectedPriceRange.split('-').map(Number);
|
||
filteredVehicles = filteredVehicles.filter(card => {
|
||
const price = parseInt(card.dataset.price);
|
||
if (maxPrice === undefined || isNaN(maxPrice)) {
|
||
// Handle ranges like "300000-plus"
|
||
return price >= minPrice;
|
||
} else {
|
||
return price >= minPrice && price <= maxPrice;
|
||
}
|
||
});
|
||
}
|
||
|
||
// Sorting
|
||
filteredVehicles.sort((a, b) => {
|
||
const priceA = parseInt(a.dataset.price);
|
||
const priceB = parseInt(b.dataset.price);
|
||
|
||
switch (selectedSort) {
|
||
case 'price-low':
|
||
return priceA - priceB; // Дешевые -> Дорогие
|
||
case 'price-high':
|
||
return priceB - priceA; // Дорогие -> Дешевые
|
||
case 'newest':
|
||
default:
|
||
// Keep original order for "newest"
|
||
return 0;
|
||
}
|
||
});
|
||
|
||
// Hide all cards
|
||
vehicleCards.forEach(card => {
|
||
card.style.display = 'none';
|
||
});
|
||
|
||
// Show filtered cards with animation
|
||
filteredVehicles.forEach((card, index) => {
|
||
setTimeout(() => {
|
||
card.style.display = 'block';
|
||
card.style.opacity = 0;
|
||
card.style.transform = 'translateY(20px)';
|
||
|
||
// Force reflow to ensure animation works
|
||
void card.offsetWidth;
|
||
|
||
card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
|
||
card.style.opacity = 1;
|
||
card.style.transform = 'translateY(0)';
|
||
}, index * 100);
|
||
});
|
||
|
||
// Show "no results" message if needed
|
||
if (filteredVehicles.length === 0 && vehiclesList) {
|
||
let noResultsMsg = document.querySelector('.no-results-message');
|
||
if (!noResultsMsg) {
|
||
noResultsMsg = document.createElement('div');
|
||
noResultsMsg.className = 'no-results-message';
|
||
noResultsMsg.textContent = 'No vehicles match your selected filters.';
|
||
vehiclesList.appendChild(noResultsMsg);
|
||
}
|
||
noResultsMsg.style.display = 'block';
|
||
} else {
|
||
const noResultsMsg = document.querySelector('.no-results-message');
|
||
if (noResultsMsg) {
|
||
noResultsMsg.style.display = 'none';
|
||
}
|
||
}
|
||
}
|
||
|
||
// Setup all event listeners
|
||
function setupEventListeners() {
|
||
// Add to cart buttons
|
||
document.querySelectorAll('.add-to-cart').forEach(button => {
|
||
button.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
const id = this.dataset.id;
|
||
const name = this.dataset.name;
|
||
const price = this.dataset.price;
|
||
const img = this.dataset.img;
|
||
addToCart(id, name, price, img);
|
||
});
|
||
});
|
||
|
||
// Filter controls
|
||
document.getElementById('category-filter')?.addEventListener('change', filterVehicles);
|
||
document.getElementById('price-filter')?.addEventListener('change', filterVehicles);
|
||
document.getElementById('sort-filter')?.addEventListener('change', filterVehicles);
|
||
|
||
// Auth forms
|
||
document.getElementById('login-form')?.addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
const email = document.getElementById('login-email').value;
|
||
const password = document.getElementById('login-password').value;
|
||
|
||
if (email && password) {
|
||
alert('Login Successful!');
|
||
currentUser = email;
|
||
navigateTo('home');
|
||
} else {
|
||
alert('Please enter email and password');
|
||
}
|
||
});
|
||
|
||
document.getElementById('register-form')?.addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
const firstName = document.getElementById('reg-first-name').value;
|
||
const lastName = document.getElementById('reg-last-name').value;
|
||
const email = document.getElementById('reg-email').value;
|
||
const password = document.getElementById('reg-password').value;
|
||
const confirmPassword = document.getElementById('reg-confirm-password').value;
|
||
|
||
if (password !== confirmPassword) {
|
||
alert('Passwords do not match');
|
||
return;
|
||
}
|
||
|
||
if (firstName && lastName && email && password) {
|
||
alert('Account Created Successfully!');
|
||
currentUser = email;
|
||
toggleAuthForm();
|
||
navigateTo('home');
|
||
} else {
|
||
alert('Please fill in all fields');
|
||
}
|
||
});
|
||
|
||
// Initialize filters
|
||
filterVehicles();
|
||
}
|
||
</script> |