Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BMW - Ultimate Driving Machine</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-blue: #0066CC; | |
| --dark-blue: #004499; | |
| --light-blue: #E6F2FF; | |
| --black: #000000; | |
| --dark-gray: #1A1A1A; | |
| --medium-gray: #333333; | |
| --light-gray: #666666; | |
| --lighter-gray: #F5F5F5; | |
| --white: #FFFFFF; | |
| --accent: #FF6B35; | |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| [data-theme="light"] { | |
| --bg-primary: #FFFFFF; | |
| --bg-secondary: #F5F5F5; | |
| --bg-card: #FFFFFF; | |
| --text-primary: #000000; | |
| --text-secondary: #333333; | |
| --text-muted: #666666; | |
| --border-color: #E0E0E0; | |
| --shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |
| } | |
| [data-theme="dark"] { | |
| --bg-primary: #0A0A0A; | |
| --bg-secondary: #1A1A1A; | |
| --bg-card: #1F1F1F; | |
| --text-primary: #FFFFFF; | |
| --text-secondary: #E0E0E0; | |
| --text-muted: #999999; | |
| --border-color: #333333; | |
| --shadow: 0 2px 20px rgba(0, 0, 0, 0.5); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; | |
| background-color: var(--bg-primary); | |
| color: var(--text-primary); | |
| transition: var(--transition); | |
| overflow-x: hidden; | |
| } | |
| /* Smooth Scrolling */ | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| /* Loading Animation */ | |
| .loader { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: var(--bg-primary); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 10000; | |
| transition: opacity 0.5s, visibility 0.5s; | |
| } | |
| .loader.hidden { | |
| opacity: 0; | |
| visibility: hidden; | |
| } | |
| .loader-circle { | |
| width: 60px; | |
| height: 60px; | |
| border: 3px solid var(--border-color); | |
| border-top: 3px solid var(--primary-blue); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* Header */ | |
| header { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| background: rgba(10, 10, 10, 0.95); | |
| backdrop-filter: blur(10px); | |
| z-index: 1000; | |
| transition: var(--transition); | |
| } | |
| [data-theme="light"] header { | |
| background: rgba(255, 255, 255, 0.95); | |
| } | |
| nav { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem 5%; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| .logo { | |
| font-size: 2rem; | |
| font-weight: bold; | |
| color: var(--primary-blue); | |
| text-decoration: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .logo i { | |
| font-size: 1.5rem; | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 2rem; | |
| list-style: none; | |
| align-items: center; | |
| } | |
| .nav-link { | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: var(--transition); | |
| position: relative; | |
| cursor: pointer; | |
| } | |
| .nav-link:hover { | |
| color: var(--primary-blue); | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--primary-blue); | |
| transition: width 0.3s; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .theme-toggle { | |
| background: none; | |
| border: none; | |
| color: var(--text-secondary); | |
| font-size: 1.2rem; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| padding: 0.5rem; | |
| } | |
| .theme-toggle:hover { | |
| color: var(--primary-blue); | |
| transform: rotate(180deg); | |
| } | |
| .mobile-menu-btn { | |
| display: none; | |
| background: none; | |
| border: none; | |
| color: var(--text-primary); | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| } | |
| /* Main Content */ | |
| main { | |
| margin-top: 80px; | |
| min-height: calc(100vh - 80px); | |
| } | |
| .page { | |
| display: none; | |
| animation: fadeIn 0.5s; | |
| } | |
| .page.active { | |
| display: block; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| position: relative; | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| .hero-slider { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .hero-slide { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| opacity: 0; | |
| transition: opacity 1s; | |
| } | |
| .hero-slide.active { | |
| opacity: 1; | |
| } | |
| .hero-slide img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .hero-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7)); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| text-align: center; | |
| color: var(--white); | |
| } | |
| .hero-title { | |
| font-size: 4rem; | |
| font-weight: bold; | |
| margin-bottom: 1rem; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.5); | |
| animation: slideUp 1s; | |
| } | |
| .hero-subtitle { | |
| font-size: 1.5rem; | |
| margin-bottom: 2rem; | |
| text-shadow: 1px 1px 2px rgba(0,0,0,0.5); | |
| animation: slideUp 1s 0.2s backwards; | |
| } | |
| @keyframes slideUp { | |
| from { transform: translateY(50px); opacity: 0; } | |
| to { transform: translateY(0); opacity: 1; } | |
| } | |
| .hero-buttons { | |
| display: flex; | |
| gap: 1rem; | |
| animation: slideUp 1s 0.4s backwards; | |
| } | |
| .btn { | |
| padding: 1rem 2rem; | |
| border: none; | |
| border-radius: 5px; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| text-decoration: none; | |
| display: inline-block; | |
| } | |
| .btn-primary { | |
| background: var(--primary-blue); | |
| color: var(--white); | |
| } | |
| .btn-primary:hover { | |
| background: var(--dark-blue); | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 20px rgba(0, 102, 204, 0.3); | |
| } | |
| .btn-secondary { | |
| background: transparent; | |
| color: var(--white); | |
| border: 2px solid var(--white); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--white); | |
| color: var(--black); | |
| } | |
| .hero-indicators { | |
| position: absolute; | |
| bottom: 30px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .indicator { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.5); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .indicator.active { | |
| background: var(--white); | |
| width: 40px; | |
| border-radius: 6px; | |
| } | |
| /* Featured Sections */ | |
| .featured-section { | |
| padding: 5rem 5%; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| .section-title { | |
| font-size: 3rem; | |
| font-weight: bold; | |
| text-align: center; | |
| margin-bottom: 1rem; | |
| background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .section-subtitle { | |
| text-align: center; | |
| color: var(--text-muted); | |
| margin-bottom: 3rem; | |
| font-size: 1.1rem; | |
| } | |
| .series-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 3rem; | |
| } | |
| .series-card { | |
| background: var(--bg-card); | |
| border-radius: 15px; | |
| overflow: hidden; | |
| transition: var(--transition); | |
| cursor: pointer; | |
| box-shadow: var(--shadow); | |
| } | |
| .series-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 40px rgba(0, 102, 204, 0.2); | |
| } | |
| .series-card img { | |
| width: 100%; | |
| height: 200px; | |
| object-fit: cover; | |
| } | |
| .series-card-content { | |
| padding: 1.5rem; | |
| } | |
| .series-card h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 0.5rem; | |
| color: var(--text-primary); | |
| } | |
| .series-card p { | |
| color: var(--text-muted); | |
| margin-bottom: 1rem; | |
| } | |
| /* Car Grid */ | |
| .cars-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 3rem; | |
| } | |
| .car-card { | |
| background: var(--bg-card); | |
| border-radius: 15px; | |
| overflow: hidden; | |
| transition: var(--transition); | |
| cursor: pointer; | |
| box-shadow: var(--shadow); | |
| } | |
| .car-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 30px rgba(0, 102, 204, 0.2); | |
| } | |
| .car-card img { | |
| width: 100%; | |
| height: 200px; | |
| object-fit: cover; | |
| } | |
| .car-card-content { | |
| padding: 1.5rem; | |
| } | |
| .car-name { | |
| font-size: 1.3rem; | |
| font-weight: bold; | |
| margin-bottom: 0.5rem; | |
| } | |
| .car-price { | |
| color: var(--primary-blue); | |
| font-size: 1.2rem; | |
| font-weight: bold; | |
| margin-bottom: 1rem; | |
| } | |
| .car-specs { | |
| display: flex; | |
| gap: 1rem; | |
| margin-bottom: 1rem; | |
| flex-wrap: wrap; | |
| } | |
| .spec-badge { | |
| background: var(--light-blue); | |
| color: var(--dark-blue); | |
| padding: 0.3rem 0.8rem; | |
| border-radius: 20px; | |
| font-size: 0.85rem; | |
| font-weight: 500; | |
| } | |
| [data-theme="dark"] .spec-badge { | |
| background: rgba(0, 102, 204, 0.2); | |
| color: var(--primary-blue); | |
| } | |
| /* Filters */ | |
| .filters-container { | |
| background: var(--bg-card); | |
| padding: 2rem; | |
| border-radius: 15px; | |
| margin-bottom: 3rem; | |
| box-shadow: var(--shadow); | |
| } | |
| .filters-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .filter-group { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .filter-label { | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| color: var(--text-secondary); | |
| } | |
| .filter-select, .filter-input { | |
| padding: 0.8rem; | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| font-size: 1rem; | |
| transition: var(--transition); | |
| } | |
| .filter-select:focus, .filter-input:focus { | |
| outline: none; | |
| border-color: var(--primary-blue); | |
| box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1); | |
| } | |
| /* Car Details */ | |
| .car-detail { | |
| padding: 3rem 5%; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| .car-gallery { | |
| display: grid; | |
| grid-template-columns: 1fr 2fr; | |
| gap: 2rem; | |
| margin-bottom: 3rem; | |
| } | |
| .gallery-thumbnails { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .thumbnail { | |
| width: 100%; | |
| height: 100px; | |
| object-fit: cover; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| opacity: 0.6; | |
| transition: var(--transition); | |
| } | |
| .thumbnail:hover, .thumbnail.active { | |
| opacity: 1; | |
| box-shadow: 0 5px 15px rgba(0, 102, 204, 0.3); | |
| } | |
| .main-image { | |
| width: 100%; | |
| height: 500px; | |
| object-fit: cover; | |
| border-radius: 15px; | |
| box-shadow: var(--shadow); | |
| } | |
| .car-info { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 3rem; | |
| margin-bottom: 3rem; | |
| } | |
| .info-section { | |
| background: var(--bg-card); | |
| padding: 2rem; | |
| border-radius: 15px; | |
| box-shadow: var(--shadow); | |
| } | |
| .info-section h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| color: var(--primary-blue); | |
| } | |
| .spec-list { | |
| list-style: none; | |
| } | |
| .spec-item { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 0.8rem 0; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .spec-item:last-child { | |
| border-bottom: none; | |
| } | |
| .spec-label { | |
| font-weight: 500; | |
| color: var(--text-muted); | |
| } | |
| .spec-value { | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| } | |
| /* Compare Section */ | |
| .compare-container { | |
| padding: 3rem 5%; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| .compare-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 3rem; | |
| } | |
| .compare-card { | |
| background: var(--bg-card); | |
| border-radius: 15px; | |
| padding: 2rem; | |
| box-shadow: var(--shadow); | |
| position: relative; | |
| } | |
| .compare-card.best-choice { | |
| border: 2px solid var(--primary-blue); | |
| } | |
| .best-choice-badge { | |
| position: absolute; | |
| top: -10px; | |
| right: 20px; | |
| background: var(--primary-blue); | |
| color: var(--white); | |
| padding: 0.5rem 1rem; | |
| border-radius: 20px; | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| } | |
| .car-selector { | |
| display: flex; | |
| gap: 1rem; | |
| margin-bottom: 2rem; | |
| flex-wrap: wrap; | |
| } | |
| .selector-card { | |
| flex: 1; | |
| min-width: 200px; | |
| padding: 1.5rem; | |
| background: var(--bg-card); | |
| border: 2px dashed var(--border-color); | |
| border-radius: 10px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .selector-card:hover { | |
| border-color: var(--primary-blue); | |
| background: var(--light-blue); | |
| } | |
| [data-theme="dark"] .selector-card:hover { | |
| background: rgba(0, 102, 204, 0.1); | |
| } | |
| /* Gallery Page */ | |
| .gallery-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); | |
| gap: 1rem; | |
| padding: 2rem; | |
| } | |
| .gallery-item { | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| aspect-ratio: 16/9; | |
| } | |
| .gallery-item img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: var(--transition); | |
| } | |
| .gallery-item:hover img { | |
| transform: scale(1.1); | |
| } | |
| .gallery-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7)); | |
| opacity: 0; | |
| transition: var(--transition); | |
| display: flex; | |
| align-items: flex-end; | |
| padding: 1rem; | |
| } | |
| .gallery-item:hover .gallery-overlay { | |
| opacity: 1; | |
| } | |
| /* Lightbox */ | |
| .lightbox { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.95); | |
| display: none; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 2000; | |
| padding: 2rem; | |
| } | |
| .lightbox.active { | |
| display: flex; | |
| } | |
| .lightbox-content { | |
| max-width: 90%; | |
| max-height: 90%; | |
| position: relative; | |
| } | |
| .lightbox-image { | |
| width: 100%; | |
| height: auto; | |
| border-radius: 10px; | |
| } | |
| .lightbox-close { | |
| position: absolute; | |
| top: -40px; | |
| right: 0; | |
| background: none; | |
| border: none; | |
| color: var(--white); | |
| font-size: 2rem; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .lightbox-close:hover { | |
| transform: scale(1.2); | |
| } | |
| /* Contact Form */ | |
| .contact-container { | |
| padding: 3rem 5%; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .contact-form { | |
| background: var(--bg-card); | |
| padding: 3rem; | |
| border-radius: 15px; | |
| box-shadow: var(--shadow); | |
| } | |
| .form-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| } | |
| .form-input, .form-select, .form-textarea { | |
| width: 100%; | |
| padding: 1rem; | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| background: var(--bg-primary); | |
| color: var(--text-primary); | |
| font-size: 1rem; | |
| transition: var(--transition); | |
| } | |
| .form-textarea { | |
| resize: vertical; | |
| min-height: 120px; | |
| } | |
| .form-input:focus, .form-select:focus, .form-textarea:focus { | |
| outline: none; | |
| border-color: var(--primary-blue); | |
| box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1); | |
| } | |
| /* Footer */ | |
| footer { | |
| background: var(--dark-gray); | |
| color: var(--white); | |
| padding: 3rem 5% 1rem; | |
| margin-top: 5rem; | |
| } | |
| .footer-content { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .footer-section h3 { | |
| margin-bottom: 1rem; | |
| color: var(--primary-blue); | |
| } | |
| .footer-links { | |
| list-style: none; | |
| } | |
| .footer-links li { | |
| margin-bottom: 0.5rem; | |
| } | |
| .footer-links a { | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| transition: var(--transition); | |
| } | |
| .footer-links a:hover { | |
| color: var(--primary-blue); | |
| } | |
| .social-icons { | |
| display: flex; | |
| gap: 1rem; | |
| margin-top: 1rem; | |
| } | |
| .social-icon { | |
| width: 40px; | |
| height: 40px; | |
| background: var(--bg-card); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--text-primary); | |
| text-decoration: none; | |
| transition: var(--transition); | |
| } | |
| .social-icon:hover { | |
| background: var(--primary-blue); | |
| color: var(--white); | |
| transform: translateY(-3px); | |
| } | |
| .footer-bottom { | |
| text-align: center; | |
| padding-top: 2rem; | |
| border-top: 1px solid var(--border-color); | |
| color: var(--text-muted); | |
| } | |
| .anycoder-link { | |
| color: var(--primary-blue); | |
| text-decoration: none; | |
| font-weight: 600; | |
| } | |
| .anycoder-link:hover { | |
| text-decoration: underline; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .nav-links { | |
| position: fixed; | |
| top: 70px; | |
| left: -100%; | |
| width: 100%; | |
| height: calc(100vh - 70px); | |
| background: var(--bg-primary); | |
| flex-direction: column; | |
| padding: 2rem; | |
| transition: left 0.3s; | |
| } | |
| .nav-links.active { | |
| left: 0; | |
| } | |
| .mobile-menu-btn { | |
| display: block; | |
| } | |
| .hero-title { | |
| font-size: 2.5rem; | |
| } | |
| .hero-subtitle { | |
| font-size: 1.2rem; | |
| } | |
| .hero-buttons { | |
| flex-direction: column; | |
| width: 200px; | |
| } | |
| .car-gallery { | |
| grid-template-columns: 1fr; | |
| } | |
| .gallery-thumbnails { | |
| flex-direction: row; | |
| overflow-x: auto; | |
| } | |
| .thumbnail { | |
| min-width: 100px; | |
| } | |
| .main-image { | |
| height: 300px; | |
| } | |
| } | |
| /* Animations */ | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| /* Toast Notification */ | |
| .toast { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| background: var(--bg-card); | |
| color: var(--text-primary); | |
| padding: 1rem 1.5rem; | |
| border-radius: 10px; | |
| box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); | |
| transform: translateX(400px); | |
| transition: transform 0.3s; | |
| z-index: 3000; | |
| border-left: 4px solid var(--primary-blue); | |
| } | |
| .toast.show { | |
| transform: translateX(0); | |
| } | |
| .toast.success { | |
| border-left-color: #4CAF50; | |
| } | |
| .toast.error { | |
| border-left-color: #f44336; | |
| } | |
| /* Loading Skeleton */ | |
| .skeleton { | |
| background: linear-gradient(90deg, var(--bg-card) 25%, var(--border-color) 50%, var(--bg-card) 75%); | |
| background-size: 200% 100%; | |
| animation: loading 1.5s infinite; | |
| } | |
| @keyframes loading { | |
| 0% { background-position: 200% 0; } | |
| 100% { background-position: -200% 0; } | |
| } | |
| </style> | |
| </head> | |
| <body data-theme="dark"> | |
| <!-- Loader --> | |
| <div class="loader" id="loader"> | |
| <div class="loader-circle"></div> | |
| </div> | |
| <!-- Header --> | |
| <header> | |
| <nav> | |
| <a href="#" class="logo" onclick="navigateTo('home')"> | |
| <i class="fas fa-car"></i> | |
| BMW | |
| </a> | |
| <ul class="nav-links" id="navLinks"> | |
| <li><a class="nav-link" onclick="navigateTo('home')">Home</a></li> | |
| <li><a class="nav-link" onclick="navigateTo('cars')">All Models</a></li> | |
| <li><a class="nav-link" onclick="navigateTo('sedan')">Sedans</a></li> | |
| <li><a class="nav-link" onclick="navigateTo('suv')">SUVs</a></li> | |
| <li><a class="nav-link" onclick="navigateTo('mperformance')">M Performance</a></li> | |
| <li><a class="nav-link" onclick="navigateTo('electric')">Electric</a></li> | |
| <li><a class="nav-link" onclick="navigateTo('compare')">Compare</a></li> | |
| <li><a class="nav-link" onclick="navigateTo('gallery')">Gallery</a></li> | |
| <li><a class="nav-link" onclick="navigateTo('about')">About</a></li> | |
| <li><a class="nav-link" onclick="navigateTo('contact')">Contact</a></li> | |
| </ul> | |
| <button class="theme-toggle" onclick="toggleTheme()"> | |
| <i class="fas fa-moon" id="themeIcon"></i> | |
| </button> | |
| <button class="mobile-menu-btn" onclick="toggleMobileMenu()"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </nav> | |
| </header> | |
| <!-- Main Content --> | |
| <main> | |
| <!-- Home Page --> | |
| <div class="page active" id="home"> | |
| <section class="hero"> | |
| <div class="hero-slider"> | |
| <div class="hero-slide active"> | |
| <img src="https://picsum.photos/seed/bmw-m5/1920/1080.jpg" alt="BMW M5"> | |
| <div class="hero-overlay"> | |
| <h1 class="hero-title">BMW M5 Competition</h1> | |
| <p class="hero-subtitle">The Ultimate Driving Machine</p> | |
| <div class="hero-buttons"> | |
| <button class="btn btn-primary" onclick="navigateTo('cars')">Explore All Models</button> | |
| <button class="btn btn-secondary" onclick="navigateTo('compare')">Compare Cars</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hero-slide"> | |
| <img src="https://picsum.photos/seed/bmw-i4/1920/1080.jpg" alt="BMW i4"> | |
| <div class="hero-overlay"> | |
| <h1 class="hero-title">BMW i4 Gran Coupe</h1> | |
| <p class="hero-subtitle">Pure Electric Driving Pleasure</p> | |
| <div class="hero-buttons"> | |
| <button class="btn btn-primary" onclick="navigateTo('electric')">Explore Electric</button> | |
| <button class="btn btn-secondary" onclick="navigateTo('cars')">View All Models</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hero-slide"> | |
| <img src="https://picsum.photos/seed/bmw-x7/1920/1080.jpg" alt="BMW X7"> | |
| <div class="hero-overlay"> | |
| <h1 class="hero-title">BMW X7</h1> | |
| <p class="hero-subtitle">Luxury Redefined</p> | |
| <div class="hero-buttons"> | |
| <button class="btn btn-primary" onclick="navigateTo('suv')">Explore SUVs</button> | |
| <button class="btn btn-secondary" onclick="navigateTo('compare')">Compare Models</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hero-indicators"> | |
| <span class="indicator active" onclick="changeSlide(0)"></span> | |
| <span class="indicator" onclick="changeSlide(1)"></span> | |
| <span class="indicator" onclick="changeSlide(2)"></span> | |
| </div> | |
| </section> | |
| <section class="featured-section"> | |
| <h2 class="section-title">BMW Series</h2> | |
| <p class="section-subtitle">Choose your perfect driving experience</p> | |
| <div class="series-grid"> | |
| <div class="series-card" onclick="navigateTo('sedan')"> | |
| <img src="https://picsum.photos/seed/bmw-sedan/400/300.jpg" alt="Sedan Series"> | |
| <div class="series-card-content"> | |
| <h3>Sedan Series</h3> | |
| <p>2, 3, 5, 7 Series - Elegance meets performance</p> | |
| <span class="spec-badge">4 Models</span> | |
| </div> | |
| </div> | |
| <div class="series-card" onclick="navigateTo('suv')"> | |
| <img src="https://picsum.photos/seed/bmw-suv/400/300.jpg" alt="SUV Series"> | |
| <div class="series-card-content"> | |
| <h3>SUV X Series</h3> | |
| <p>X1 to X7 - Luxury SUVs for every adventure</p> | |
| <span class="spec-badge">7 Models</span> | |
| </div> | |
| </div> | |
| <div class="series-card" onclick="navigateTo('mperformance')"> | |
| <img src="https://picsum.photos/seed/bmw-m/400/300.jpg" alt="M Series"> | |
| <div class="series-card-content"> | |
| <h3>M Performance</h3> | |
| <p>Ultimate track performance for the road</p> | |
| <span class="spec-badge">6 Models</span> | |
| </div> | |
| </div> | |
| <div class="series-card" onclick="navigateTo('electric')"> | |
| <img src="https://picsum.photos/seed/bmw-i/400/300.jpg" alt="Electric Series"> | |
| <div class="series-card-content"> | |
| <h3>Electric i Series</h3> | |
| <p>The future of driving is electric</p> | |
| <span class="spec-badge">5 Models</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="featured-section" style="background: var(--bg-secondary);"> | |
| <h2 class="section-title">Featured Models</h2> | |
| <p class="section-subtitle">Discover our most popular BMW vehicles</p> | |
| <div class="cars-grid"> | |
| <div class="car-card" onclick="showCarDetail('M3 Competition')"> | |
| <img src="https://picsum.photos/seed/bmw-m3/400/300.jpg" alt="BMW M3"> | |
| <div class="car-card-content"> | |
| <h3 class="car-name">BMW M3 Competition</h3> | |
| <p class="car-price">Starting at $73,900</p> | |
| <div class="car-specs"> | |
| <span class="spec-badge">503 HP</span> | |
| <span class="spec-badge">3.8s 0-60</span> | |
| <span class="spec-badge">RWD</span> | |
| </div> | |
| <button class="btn btn-primary" style="width: 100%;">View Details</button> | |
| </div> | |
| </div> | |
| <div class="car-card" onclick="showCarDetail('iX xDrive50')"> | |
| <img src="https://picsum.photos/seed/bmw-ix/400/300.jpg" alt="BMW iX"> | |
| <div class="car-card-content"> | |
| <h3 class="car-name">BMW iX xDrive50</h3> | |
| <p class="car-price">Starting at $87,100</p> | |
| <div class="car-specs"> | |
| <span class="spec-badge">516 HP</span> | |
| <span class="spec-badge">380 mi Range</span> | |
| <span class="spec-badge">AWD</span> | |
| </div> | |
| <button class="btn btn-primary" style="width: 100%;">View Details</button> | |
| </div> | |
| </div> | |
| <div class="car-card" onclick="showCarDetail('X5 M Competition')"> | |
| <img src="https://picsum.photos/seed/bmw-x5m/400/300.jpg" alt="BMW X5 M"> | |
| <div class="car-card-content"> | |
| <h3 class="car-name">BMW X5 M Competition</h3> | |
| <p class="car-price">Starting at $108,900</p> | |
| <div class="car-specs"> | |
| <span class="spec-badge">617 HP</span> | |
| <span class="spec-badge">V8 Engine</span> | |
| <span class="spec-badge">AWD</span> | |
| </div> | |
| <button class="btn btn-primary" style="width: 100%;">View Details</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- All Cars Page --> | |
| <div class="page" id="cars"> | |
| <div class |