205 lines
8.0 KiB
HTML
205 lines
8.0 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>LEDRAY — магазин светодиодного освещения</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<header class="header">
|
||
<div class="container header-content">
|
||
<div class="logo">
|
||
<span class="logo-icon">💡</span>
|
||
<span class="logo-text">LEDRAY</span>
|
||
</div>
|
||
<nav class="nav">
|
||
<a href="#catalog">Каталог</a>
|
||
<a href="#about">О нас</a>
|
||
<a href="#certificates">Сертификаты</a>
|
||
<a href="#contacts">Контакты</a>
|
||
</nav>
|
||
<button class="cart-btn" id="cartBtn">
|
||
<span class="cart-icon">🛒</span>
|
||
<span class="cart-count" id="cartCount">0</span>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<section class="hero">
|
||
<div class="container">
|
||
<h1>Свет, который создаёт уют</h1>
|
||
<p>Современные LED-решения для вашего дома и бизнеса</p>
|
||
<a href="#catalog" class="btn-primary">Перейти в каталог</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="categories" id="catalog">
|
||
<div class="container">
|
||
<h2>Категории товаров</h2>
|
||
<div class="category-filter">
|
||
<button class="filter-btn active" data-category="all">Все</button>
|
||
<button class="filter-btn" data-category="home">Для дома</button>
|
||
<button class="filter-btn" data-category="outdoor">Уличные</button>
|
||
<button class="filter-btn" data-category="smart">Умные лампочки</button>
|
||
<button class="filter-btn" data-category="spot">Прожекторы</button>
|
||
</div>
|
||
<div class="products-grid" id="productsGrid"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="about" id="about">
|
||
<div class="container">
|
||
<h2>О компании LEDRAY</h2>
|
||
<div class="about-grid">
|
||
<div class="about-card">
|
||
<span class="about-icon">🌱</span>
|
||
<h3>Экологичность</h3>
|
||
<p>Наши LED-лампы не содержат ртути и безопасны для окружающей среды</p>
|
||
</div>
|
||
<div class="about-card">
|
||
<span class="about-icon">⚡</span>
|
||
<h3>Экономия</h3>
|
||
<p>Потребляют до 90% меньше энергии по сравнению с лампами накаливания</p>
|
||
</div>
|
||
<div class="about-card">
|
||
<span class="about-icon">🛡️</span>
|
||
<h3>Гарантия</h3>
|
||
<p>Все товары сертифицированы и имеют гарантию до 5 лет</p>
|
||
</div>
|
||
<div class="about-card">
|
||
<span class="about-icon">🚚</span>
|
||
<h3>Доставка</h3>
|
||
<p>Быстрая доставка по всему Казахстану</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="certificates" id="certificates">
|
||
<div class="container">
|
||
<h2>Сертификаты и лицензии</h2>
|
||
<div class="cert-grid">
|
||
<div class="cert-card">
|
||
<div class="cert-icon">📜</div>
|
||
<h3>Сертификат соответствия</h3>
|
||
<p>Все продукты прошли обязательную сертификацию</p>
|
||
</div>
|
||
<div class="cert-card">
|
||
<div class="cert-icon">✅</div>
|
||
<h3>ISO 9001:2015</h3>
|
||
<p>Система менеджмента качества сертифицирована</p>
|
||
</div>
|
||
<div class="cert-card">
|
||
<div class="cert-icon">🔒</div>
|
||
<h3>Безопасность</h3>
|
||
<p>Продукция соответствует нормам электробезопасности</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="contacts" id="contacts">
|
||
<div class="container">
|
||
<h2>Контакты</h2>
|
||
<div class="contacts-grid">
|
||
<div class="contact-card">
|
||
<span class="contact-icon">📍</span>
|
||
<h3>Адрес</h3>
|
||
<p>г. Алматы, ул. Светлая, 123</p>
|
||
</div>
|
||
<div class="contact-card">
|
||
<span class="contact-icon">📞</span>
|
||
<h3>Телефон</h3>
|
||
<p><a href="tel:+77771234567">+7 (777) 123-45-67</a></p>
|
||
</div>
|
||
<div class="contact-card">
|
||
<span class="contact-icon">✉️</span>
|
||
<h3>Email</h3>
|
||
<p><a href="mailto:info@ledray.kz">info@ledray.kz</a></p>
|
||
</div>
|
||
<div class="contact-card">
|
||
<span class="contact-icon">🕐</span>
|
||
<h3>Режим работы</h3>
|
||
<p>Пн-Пт: 9:00 - 18:00<br>Сб: 10:00 - 15:00</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<p>© 2026 LEDRAY. Все права защищены.</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<div class="cart-modal" id="cartModal">
|
||
<div class="cart-overlay"></div>
|
||
<div class="cart-content">
|
||
<div class="cart-header">
|
||
<h2>Корзина</h2>
|
||
<button class="cart-close" id="cartClose">×</button>
|
||
</div>
|
||
<div class="cart-items" id="cartItems"></div>
|
||
<div class="cart-footer">
|
||
<div class="cart-total">
|
||
<span>Итого:</span>
|
||
<span class="cart-total-price" id="cartTotal">0 ₸</span>
|
||
</div>
|
||
<button class="btn-primary btn-checkout" id="checkoutBtn">Оформить заказ</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="checkout-modal" id="checkoutModal">
|
||
<div class="checkout-overlay"></div>
|
||
<div class="checkout-content">
|
||
<div class="checkout-header">
|
||
<h2>Оформление заказа</h2>
|
||
<button class="checkout-close" id="checkoutClose">×</button>
|
||
</div>
|
||
<form class="checkout-form" id="checkoutForm">
|
||
<div class="form-group">
|
||
<label>Ваше имя</label>
|
||
<input type="text" name="name" required placeholder="Иван Иванов">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Телефон</label>
|
||
<input type="tel" name="phone" required placeholder="+7 (777) 123-45-67">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Email</label>
|
||
<input type="email" name="email" required placeholder="example@mail.kz">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Адрес доставки</label>
|
||
<textarea name="address" required placeholder="Город, улица, дом, квартира"></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Комментарий к заказу</label>
|
||
<textarea name="comment" placeholder="Пожелания по доставке"></textarea>
|
||
</div>
|
||
<div class="order-summary" id="orderSummary"></div>
|
||
<button type="submit" class="btn-primary btn-submit">Подтвердить заказ</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="success-modal" id="successModal">
|
||
<div class="success-content">
|
||
<span class="success-icon">✅</span>
|
||
<h2>Заказ оформлен!</h2>
|
||
<p>Спасибо за ваш заказ. Наш менеджер свяжется с вами в ближайшее время.</p>
|
||
<button class="btn-primary" id="successClose">Продолжить покупки</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|