diff --git a/sk1/src/public/index.html b/sk1/src/public/index.html
index c6a7a7f..182376e 100644
--- a/sk1/src/public/index.html
+++ b/sk1/src/public/index.html
@@ -1,198 +1,1652 @@
-<!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>&copy; 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>
\ No newline at end of file
+<!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>&copy; 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>
\ No newline at end of file
