From 9cf4cc8dfd64021eeab9212228799c75643659ae Mon Sep 17 00:00:00 2001 From: Yan Kasabutski Date: Sun, 11 May 2025 09:57:59 +0000 Subject: [PATCH] =?UTF-8?q?=D0=97=D0=B0=D0=B3=D1=80=D1=83=D0=B7=D0=B8?= =?UTF-8?q?=D1=82=D1=8C=20=D1=84=D0=B0=D0=B9=D0=BB=D1=8B=20=D0=B2=20=C2=AB?= =?UTF-8?q?sk1/src/public=C2=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sk1/src/public/auth.css | 304 +++++++++++++++++++++ sk1/src/public/cart.html | 35 +++ sk1/src/public/index.html | 198 ++++++++++++++ sk1/src/public/login.html | 108 ++++++++ sk1/src/public/script.js | 169 ++++++++++++ sk1/src/public/styles.css | 505 +++++++++++++++++++++++++++++++++++ sk1/src/public/vehicles.css | 475 ++++++++++++++++++++++++++++++++ sk1/src/public/vehicles.html | 327 +++++++++++++++++++++++ sk1/src/public/vehicles.js | 33 +++ 9 files changed, 2154 insertions(+) create mode 100644 sk1/src/public/auth.css create mode 100644 sk1/src/public/cart.html create mode 100644 sk1/src/public/index.html create mode 100644 sk1/src/public/login.html create mode 100644 sk1/src/public/script.js create mode 100644 sk1/src/public/styles.css create mode 100644 sk1/src/public/vehicles.css create mode 100644 sk1/src/public/vehicles.html create mode 100644 sk1/src/public/vehicles.js diff --git a/sk1/src/public/auth.css b/sk1/src/public/auth.css new file mode 100644 index 0000000..a444302 --- /dev/null +++ b/sk1/src/public/auth.css @@ -0,0 +1,304 @@ +/* Authentication Styles for Brabus Website */ + +/* Auth Container */ +.auth-container { + padding: 150px 20px 80px; + min-height: calc(100vh - 70px); + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(to bottom, var(--light-bg), #ffffff); +} + +.auth-card { + width: 100%; + max-width: 480px; + background-color: white; + border-radius: 20px; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); + padding: 40px; + transition: var(--transition); +} + +.auth-header { + text-align: center; + margin-bottom: 30px; +} + +.auth-header h2 { + font-size: 32px; + font-weight: 600; + color: var(--text-dark); + margin-bottom: 10px; + letter-spacing: -0.02em; +} + +.auth-header p { + color: var(--secondary-text); + font-size: 16px; +} + +/* Auth Forms */ +.auth-form { + display: none; +} + +.auth-form.active { + display: block; +} + +.form-group { + margin-bottom: 24px; + position: relative; +} + +.form-group.half { + width: calc(50% - 10px); + display: inline-block; +} + +.form-group.half:first-of-type { + margin-right: 16px; +} + +.form-group label { + display: block; + font-size: 14px; + font-weight: 500; + margin-bottom: 8px; + color: var(--text-dark); +} + +.form-group input[type="text"], +.form-group input[type="email"], +.form-group input[type="password"] { + width: 100%; + padding: 14px 16px; + font-size: 16px; + border: 1px solid #e0e0e0; + border-radius: 8px; + background-color: #ffffff; + transition: var(--transition); +} + +.form-group input:focus { + border-color: var(--primary-color); + outline: none; + box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2); +} + +/* Password field with toggle */ +.password-field { + position: relative; +} + +.toggle-password { + position: absolute; + right: 16px; + top: 50%; + transform: translateY(-50%); + background: none; + border: none; + cursor: pointer; + color: var(--secondary-text); + transition: var(--transition); + padding: 0; +} + +.toggle-password:hover { + color: var(--text-dark); +} + +/* Password strength indicator */ +.password-strength { + margin-top: 10px; + display: flex; + flex-direction: column; +} + +.strength-bar { + height: 4px; + width: 100%; + background-color: #e0e0e0; + border-radius: 2px; + overflow: hidden; + position: relative; +} + +.strength-bar::before { + content: ''; + position: absolute; + height: 100%; + width: 0; + background-color: #ff3b30; + transition: var(--transition); +} + +.strength-bar.weak::before { + width: 33%; + background-color: #ff3b30; +} + +.strength-bar.medium::before { + width: 66%; + background-color: #ff9500; +} + +.strength-bar.strong::before { + width: 100%; + background-color: #28cd41; +} + +.strength-text { + font-size: 12px; + color: var(--secondary-text); + margin-top: 5px; +} + +/* Checkbox styling */ +.checkbox-container { + display: flex; + align-items: flex-start; +} + +.checkbox-container input[type="checkbox"] { + width: 18px; + height: 18px; + margin-right: 10px; + margin-top: 2px; + accent-color: var(--primary-color); +} + +.checkbox-container label { + margin-bottom: 0; + font-size: 14px; + line-height: 1.4; +} + +.checkbox-container a { + color: var(--primary-color); + text-decoration: none; +} + +.checkbox-container a:hover { + text-decoration: underline; +} + +/* Form actions and buttons */ +.form-actions { + margin-top: 32px; +} + +.btn-auth { + width: 100%; + padding: 14px; + background-color: var(--primary-color); + color: white; + border: none; + border-radius: 8px; + font-size: 16px; + font-weight: 500; + cursor: pointer; + transition: var(--transition); +} + +.btn-auth:hover { + background-color: var(--primary-hover); + transform: translateY(-2px); + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); +} + +.btn-auth:active { + transform: translateY(0); +} + +/* Auth links */ +.auth-links { + margin-top: 20px; + text-align: center; + font-size: 14px; + color: var(--secondary-text); +} + +.auth-links a { + color: var(--primary-color); + text-decoration: none; + font-weight: 500; + transition: var(--transition); +} + +.auth-links a:hover { + text-decoration: underline; +} + +.auth-links p:not(:last-child) { + margin-bottom: 10px; +} + +/* Error message */ +.error-message { + background-color: rgba(255, 59, 48, 0.1); + color: #ff3b30; + padding: 12px; + border-radius: 8px; + margin-bottom: 20px; + font-size: 14px; + display: none; +} + +.error-message.show { + display: block; +} + +/* Social login */ +.social-login { + margin: 30px 0; + text-align: center; + position: relative; +} + +.social-login::before { + content: ''; + position: absolute; + top: 50%; + left: 0; + right: 0; + height: 1px; + background-color: #e0e0e0; + z-index: 1; +} + +.social-login span { + position: relative; + z-index: 2; + background-color: white; + padding: 0 15px; + color: var(--secondary-text); + font-size: 14px; +} + +.social-buttons { + display: flex; + justify-content: center; + gap: 15px; + margin-top: 20px; +} + +.social-btn { + width: 50px; + height: 50px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + background-color: #f5f5f7; + border: none; + cursor: pointer; + transition: var(--transition); +} + +.social-btn i { + font-size: 20px; +} + +.social-btn \ No newline at end of file diff --git a/sk1/src/public/cart.html b/sk1/src/public/cart.html new file mode 100644 index 0000000..e52cd00 --- /dev/null +++ b/sk1/src/public/cart.html @@ -0,0 +1,35 @@ + + + + + + Cart + + +

Your Cart

+ + + + + + + + + + + + {% for item in cart_items %} + + + + + + + + {% endfor %} + +
VehiclePriceQuantityTotalRemove
{{ item.vehicle.name }}${{ item.vehicle.price }}{{ item.quantity }}${{ item.vehicle.price * item.quantity }}Remove
+

Total Price: ${{ total_price }}

+ + + diff --git a/sk1/src/public/index.html b/sk1/src/public/index.html new file mode 100644 index 0000000..c6a7a7f --- /dev/null +++ b/sk1/src/public/index.html @@ -0,0 +1,198 @@ + + + + + + Brabus Premium Automotive | Official Site + + + + + +
+
+ + +
+
+ + +
+ Brabus Premium Vehicle +
+

Elevate Your Drive

+ Explore the Collection +
+
+ + +
+
+

Masterpieces of Engineering

+
+ +
+ + + +
+ +
+ + + + Configure Yours +
+
+ + + + + +
+
+

Customize Your Brabus

+

Work with our expert designers to create a vehicle that's as unique as you are.

+ Start Customization +
+
+ + +
+
+
+

Your Cart

+ +
+
+ +
+
+
+ Total: + $0 +
+ +
+
+
+ + + + + + + + \ No newline at end of file diff --git a/sk1/src/public/login.html b/sk1/src/public/login.html new file mode 100644 index 0000000..3d06016 --- /dev/null +++ b/sk1/src/public/login.html @@ -0,0 +1,108 @@ + + + + + + Login - Brabus Premium Automotive + + + + + +
+
+ + +
+
+ +
+
+
+

Sign In

+

Use your Brabus account

+
+ +
+ + +
+
+ + +
+
+ +
+ + +
+
+
+ +
+
+

Don't have an account? Create one

+

Forgot password?

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + +
+
+
+ Password strength +
+
+
+ +
+ + +
+
+
+
+ + +
+
+
+ +
+
+ + + +
+
+ Brabus G Wagon +
+
+

Brabus G Wagon

+
+
+ + 850 HP +
+
+ + 3.8s 0-100 +
+
+ + V12 BiTurbo +
+
+
+ $320,000 + +
+
+
+ + +
+
+ Brabus Maybach +
Limited
+
+
+

Brabus Maybach

+
+
+ + 700 HP +
+
+ + 4.2s 0-100 +
+
+ + V12 +
+
+
+ $240,000 + +
+
+
+ + +
+
+ Brabus C63 AMG +
+
+

Brabus C63 AMG

+
+
+ + 650 HP +
+
+ + 3.2s 0-100 +
+
+ + V8 BiTurbo +
+
+
+ $180,000 + +
+
+
+ + +
+
+ Brabus SL Roadster +
New
+
+
+

Brabus SL Roadster

+
+
+ + 750 HP +
+
+ + 3.0s 0-100 +
+
+ + V8 BiTurbo +
+
+
+ $350,000 + +
+
+
+ + +
+
+ Brabus GLS +
+
+

Brabus GLS

+
+
+ + 780 HP +
+
+ + 4.1s 0-100 +
+
+ + V8 BiTurbo +
+
+
+ $290,000 + +
+
+
+ + + +
+ + +
+
+
+

Your Cart

+ +
+
+ +
+
+
+ Total: + $0 +
+ +
+
+
+ + + + + + + \ No newline at end of file diff --git a/sk1/src/public/vehicles.js b/sk1/src/public/vehicles.js new file mode 100644 index 0000000..49088cc --- /dev/null +++ b/sk1/src/public/vehicles.js @@ -0,0 +1,33 @@ +// Vehicles page JavaScript +document.addEventListener('DOMContentLoaded', function() { + // Elements + const header = document.querySelector('header'); + const categoryFilter = document.getElementById('category-filter'); + const priceFilter = document.getElementById('price-filter'); + const sortFilter = document.getElementById('sort-filter'); + const vehicleCards = document.querySelectorAll('.vehicle-card'); + const cartLink = document.getElementById('cart-link'); + const cartOverlay = document.getElementById('cart-overlay'); + const closeCartBtn = document.querySelector('.close-cart'); + const cartItems = document.getElementById('cart-items'); + const cartTotalPrice = document.getElementById('cart-total-price'); + const cartCountElement = document.getElementById('cart-count'); + const checkoutBtn = document.getElementById('checkout-btn'); + const addToCartButtons = document.querySelectorAll('.add-to-cart'); + const loginLink = document.getElementById('login-link'); + + // Initial setup + let cart = JSON.parse(localStorage.getItem('brabus_cart')) || []; + updateCartCount(); + checkLoginStatus(); + + // Header scroll effect + function handleHeaderScroll() { + if (window.scrollY > 50) { + header.style.backgroundColor = 'rgba(29, 29, 31, 0.95)'; + header.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)'; + } else { + header.style.backgroundColor = 'rgba(29, 29, 31, 0.8)'; + header.style.boxShadow = 'none'; + } + } \ No newline at end of file