/
hellok1tta
/
html-css
Обзор
Документация
Войти
/
hellok1tta
/
html-css
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
frontend/catalog.html
216 строк
11 KB
hellok1tta
upload files
07 дек 2025, 11:51
07 дек 2025, 11:51
0c9175b
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Каталог продукции - Пекарня "Вкусный уголок"</title> <meta name="description" content="Каталог свежей выпечки от пекарни 'Вкусный уголок' - хлеб, пироги, десерты и торты на заказ"> <link rel="stylesheet" href="scss/main.css"> </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">Главная</a></li> <li><a href="about.html">О нас</a></li> <li><a href="catalog.html" class="active">Каталог</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="catalog-hero"> <div class="container"> <h1>Наша продукция</h1> <p>Широкий ассортимент свежей выпечки, приготовленной с любовью</p> </div> </section> <section class="products-filter"> <div class="container"> <div class="filter-controls"> <select id="categoryFilter" class="form-control"> <option value="all">Все категории</option> <option value="Хлеб">Хлеб</option> <option value="Пироги">Пироги</option> <option value="Десерты">Десерты</option> <option value="Сдобная выпечка">Сдобная выпечка</option> </select> <select id="sortFilter" class="form-control"> <option value="newest">Сначала новые</option> <option value="price-low">По возрастанию цены</option> <option value="price-high">По убыванию цены</option> <option value="name">По названию</option> </select> <div class="filter-badges"> <label class="checkbox-badge"> <input type="checkbox" id="newFilter"> <span>Новинки</span> </label> <label class="checkbox-badge"> <input type="checkbox" id="saleFilter"> <span>Акции</span> </label> </div> </div> </div> </section> <section class="products-catalog"> <div class="container"> <div class="catalog-grid" id="products-container"> <!-- Продукты будут загружены через JavaScript --> <div class="loading">Загрузка каталога...</div> </div> <div class="pagination" id="pagination"> <!-- Пагинация будет добавлена через JavaScript --> </div> </div> </section> <section class="catalog-cta"> <div class="container"> <div class="cta-content"> <h2>Не нашли что искали?</h2> <p>Мы готовы приготовить для вас индивидуальный заказ по вашему рецепту!</p> <div class="cta-buttons"> <a href="contacts.html" class="btn btn-primary">Связаться для заказа</a> <a href="tel:+74951234567" class="btn btn-secondary">Позвонить нам</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="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 loadAllProducts(); updateCartCount(); // Обновляем счетчик корзины }); async function loadAllProducts() { const container = document.getElementById('products-container'); try { const response = await fetch('/api/products'); const result = await response.json(); if (result.success && result.data) { container.innerHTML = result.data.map(product => ` <div class="product-card"> <div class="card-badge"> ${product.is_new ? '<span class="badge badge-new">Новинка</span>' : ''} ${product.on_sale ? '<span class="badge badge-sale">Акция</span>' : ''} </div> <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> <div class="card-body"> <h3 class="card-title">${product.name}</h3> <p class="card-description">${product.description || ''}</p> ${product.category ? `<p class="card-category">${product.category}</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-outline">Подробнее</button> <button class="btn btn-primary add-to-cart-btn" data-product-id="${product.id}" data-product-name="${product.name}" data-product-price="${product.price}"> В корзину </button> </div> </div> </div> `).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 = '<p class="no-products">Товары не найдены</p>'; } } catch (error) { console.error('Error loading products:', error); container.innerHTML = '<p class="error">Не удалось загрузить товары</p>'; } } </script> </body> </html>