/
hellok1tta
/
html-css
Обзор
Документация
Войти
/
hellok1tta
/
html-css
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
frontend/index.html
421 строка
20 KB
hellok1tta
upload files
20 дек 2025, 12:41
20 дек 2025, 12:41
b528fd7
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Пекарня 'Вкусный уголок' - свежая выпечка, хлеб, пироги и десерты из натуральных ингредиентов"> <title>Пекарня "Вкусный уголок" - Свежая выпечка с любовью</title> <link rel="stylesheet" href="scss/main.css"> <style> /* Стили для выравнивания навигации */ .main-nav ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 15px; margin: 0; padding: 0; list-style: none; } .main-nav li { margin: 0; padding: 0; } .main-nav a { display: block; padding: 8px 12px; text-decoration: none; white-space: nowrap; } .cart-link { display: inline-flex; align-items: center; gap: 5px; } @media (max-width: 768px) { .main-nav ul { gap: 8px 12px; } .main-nav a { padding: 6px 10px; font-size: 14px; } } </style> </head> <body> <header> <div class="container"> <div class="logo-container"> <a href="index.html" aria-label="Перейти на главную страницу пекарни 'Вкусный уголок'"> <div class="logo-placeholder"> <img src="images/logo.jpg" alt="" class="logo-placeholder"> </div> </a> <h1>Пекарня "Вкусный уголок"</h1> </div> <nav class="main-nav" aria-label="Основное меню"> <ul> <li><a href="index.html" class="active">Главная</a></li> <li><a href="about.html">О нас</a></li> <li><a href="catalog.html">Каталог</a></li> <!-- Новые страницы --> <li><a href="awards.html">Награды</a></li> <li><a href="bakery-tour.html">Тур</a></li> <!-- Конец новых страниц --> <li><a href="contacts.html">Контакты</a></li> <li><a href="login.html">Вход</a></li> <li><a href="register.html">Регистрация</a></li> <li><a href="#" class="cart-link">Корзина <span class="cart-count">0</span></a></li> </ul> </nav> <button class="mobile-menu-btn" aria-label="Открыть меню">☰</button> </div> </header> <main> <section class="hero"> <div class="container"> <h2>Добро пожаловать в нашу пекарню!</h2> <p>Мы печем с любовью с 2010 года. Свежая выпечка из натуральных ингредиентов ежедневно.</p> <a href="catalog.html" class="btn btn-primary">Сделать заказ</a> </div> </section> <section class="features"> <div class="container"> <h2>Почему выбирают нас</h2> <div class="features-grid"> <div class="feature-item"> <div class="feature-icon">🍞</div> <h3>Свежая выпечка</h3> <p>Готовим ежедневно из самых свежих ингредиентов без консервантов</p> </div> <div class="feature-item"> <div class="feature-icon">🌾</div> <h3>Натуральные продукты</h3> <p>Используем только экологически чистые муку, масло и другие продукты</p> </div> <div class="feature-item"> <div class="feature-icon">👨🍳</div> <h3>Опытные пекари</h3> <p>Наши специалисты с многолетним опытом создают настоящие шедевры</p> </div> </div> </div> </section> <section aria-labelledby="popular-heading"> <div class="container"> <h2 id="popular-heading">Популярные товары</h2> <div class="popular-grid" id="popular-products"> <!-- Продукты будут загружены через JavaScript --> <div class="loading">Загрузка товаров...</div> </div> </div> </section> <section class="promotions"> <div class="container"> <div class="promotion-banner"> <h3>Скидка 20% на первый заказ!</h3> <p>При заказе от 1000 рублей получите скидку 20% по промокоду: WELCOME20</p> <a href="catalog.html" class="btn">Воспользоваться акцией</a> </div> </div> </section> <section id="about" aria-labelledby="about-heading"> <div class="container"> <h2 id="about-heading">О нашей пекарне</h2> <div class="about-content"> <div class="about-text"> <p>Мы используем только натуральные ингредиенты и традиционные рецепты, передающиеся из поколения в поколение.</p> <ul> <li>Свежая выпечка ежедневно</li> <li>Без консервантов и искусственных добавок</li> <li>Собственное производство</li> <li>Доставка по городу</li> <li>Экологичная упаковка</li> <li>Доступные цены</li> </ul> <a href="about.html" class="btn btn-primary">Узнать больше о нас</a> </div> </div> </div> </section> <section aria-labelledby="reviews-heading"> <div class="container"> <h2 id="reviews-heading">Отзывы наших клиентов</h2> <div class="reviews-grid"> <blockquote class="card"> <div class="card-body"> <p>"Лучший хлеб в городе! Покупаю здесь каждую неделю. Особенно нравится ржаной хлеб - ароматный и с хрустящей корочкой."</p> <footer> <cite>Мария Иванова</cite> </footer> </div> </blockquote> <blockquote class="card"> <div class="card-body"> <p>"Заказывали торт на день рождения - все были в восторге! Красивый, вкусный и по доступной цене. Обязательно будем заказывать еще."</p> <footer> <cite>Сергей Петров</cite> </footer> </div> </blockquote> <blockquote class="card"> <div class="card-body"> <p>"Атмосферное место и потрясающая выпечка. Люблю заходить утром за свежим круассаном и кофе. Рекомендую всем!"</p> <footer> <cite>Анна Сидорова</cite> </footer> </div> </blockquote> </div> </div> </section> <section class="contact-preview"> <div class="container"> <div class="contact-preview-content"> <div class="contact-info"> <h2>Готовы попробовать нашу выпечку?</h2> <p>Приходите к нам или заказывайте доставку</p> <div class="contact-details"> <p><strong>Адрес:</strong> г. Москва, ул. Пушкина, д. 10</p> <p><strong>Телефон:</strong> <a href="tel:+74951234567">+7 (495) 123-45-67</a></p> <p><strong>Время работы:</strong> Пн-Пт: 8:00-20:00, Сб-Вс: 9:00-18:00</p> </div> </div> <div class="contact-action"> <a href="contacts.html" class="btn btn-primary">Связаться с нами</a> </div> </div> </div> </section> </main> <footer> <div class="container"> <div class="footer-content"> <div class="footer-logo"> <div class="logo-placeholder">🍞</div> <p>Пекарня "Вкусный уголок"</p> <p>Свежая выпечка с любовью с 2010 года</p> </div> <nav class="footer-nav" aria-label="Дополнительное меню"> <h4>Мену</h4> <ul> <li><a href="index.html">Главная</a></li> <li><a href="about.html">О нас</a></li> <li><a href="catalog.html">Каталог</a></li> <!-- Новые страницы в футере --> <li><a href="awards.html">Награды</a></li> <li><a href="bakery-tour.html">Тур</a></li> <!-- Конец новых страниц --> <li><a href="contacts.html">Контакты</a></li> </ul> </nav> <address class="footer-contact"> <h4>Контакты</h4> <p>г. Москва, ул. Пушкина, д. 10</p> <p><a href="tel:+74951234567">+7 (495) 123-45-67</a></p> <p><a href="mailto:info@vkusniy-ugolok.ru">info@vkusniy-ugolok.ru</a></p> </address> <div class="footer-social"> <h4>Мы в соцсетях</h4> <ul> <li><a href="#" aria-label="Наш Instagram">Instagram</a></li> <li><a href="#" aria-label="Наша страница ВКонтакте">VKontakte</a></li> <li><a href="#" aria-label="Наша страница Facebook">Facebook</a></li> </ul> </div> </div> <div class="footer-bottom"> <p>© 2023 Пекарня "Вкусный уголок". Все права защищены.</p> </div> </div> </footer> <script src="js/auth.js"></script> <script src="js/api.js"></script> <script src="js/main.js"></script> <script> // Загрузка популярных товаров document.addEventListener('DOMContentLoaded', async () => { await loadPopularProducts(); updateCartCount(); // Обновляем счетчик корзины }); async function loadPopularProducts() { const container = document.getElementById('popular-products'); try { const response = await fetch('/api/products/popular?limit=4'); if (!response.ok) { throw new Error(`Ошибка HTTP: ${response.status}`); } const result = await response.json(); if (result.success && result.data && result.data.length > 0) { const products = result.data; container.innerHTML = products.map(product => ` <figure class="card"> <div> <img src="${product.image_url || 'images/placeholder.jpg'}" alt="${product.name}" class="card-image" onerror="this.onerror=null; this.src='images/placeholder.jpg'"> </div> <figcaption class="card-body"> <h3 class="card-title">${product.name}</h3> <p class="card-text">${product.description || ''}</p> <div class="card-price"> ${product.price} руб. ${product.old_price ? `<span class="old-price">${product.old_price} руб.</span>` : ''} </div> <div class="card-actions"> <button class="btn btn-primary btn-block add-to-cart-btn" data-product-id="${product.id}" data-product-name="${product.name}" data-product-price="${product.price}"> В корзину </button> </div> </figcaption> </figure> `).join(''); // Добавляем обработчики событий для кнопок "В корзину" container.querySelectorAll('.add-to-cart-btn').forEach(button => { button.addEventListener('click', function() { const productId = this.dataset.productId; const productName = this.dataset.productName; const price = parseFloat(this.dataset.productPrice); addToCart(productId, productName, price); }); }); } else { container.innerHTML = ` <div class="no-products"> <p>Популярные товары скоро появятся</p> <a href="catalog.html" class="btn btn-primary">Посмотреть все товары</a> </div> `; } } catch (error) { console.error('Error loading popular products:', error); container.innerHTML = ` <div class="error"> <p>Не удалось загрузить товары</p> <button onclick="loadPopularProducts()" class="btn btn-outline">Попробовать снова</button> </div> `; } } function addToCart(productId, productName, price) { // Получаем корзину из localStorage let cart = JSON.parse(localStorage.getItem('cart') || '[]'); // Ищем товар в корзине const existingItem = cart.find(item => item.id == productId); if (existingItem) { // Если товар уже есть, увеличиваем количество existingItem.quantity += 1; } else { // Если товара нет, добавляем новый cart.push({ id: productId, name: productName, price: price, quantity: 1 }); } // Сохраняем корзину localStorage.setItem('cart', JSON.stringify(cart)); // Обновляем счетчик корзины updateCartCount(); // Показываем уведомление showNotification(`${productName} добавлен в корзину!`); } function updateCartCount() { const cart = JSON.parse(localStorage.getItem('cart') || '[]'); const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0); // Обновляем все счетчики на странице document.querySelectorAll('.cart-count').forEach(el => { el.textContent = totalItems; }); } function showNotification(message) { // Создаем уведомление const notification = document.createElement('div'); notification.className = 'notification'; notification.textContent = message; notification.style.cssText = ` position: fixed; top: 20px; right: 20px; background: #4CAF50; color: white; padding: 15px 20px; border-radius: 5px; z-index: 1000; box-shadow: 0 4px 6px rgba(0,0,0,0.1); animation: slideIn 0.3s ease; `; // Добавляем стили для анимации если их нет if (!document.querySelector('#notification-styles')) { const style = document.createElement('style'); style.id = 'notification-styles'; style.textContent = ` @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } `; document.head.appendChild(style); } document.body.appendChild(notification); // Удаляем уведомление через 3 секунды setTimeout(() => { notification.style.animation = 'slideOut 0.3s ease'; setTimeout(() => notification.remove(), 300); }, 3000); } </script> </body> </html>