/
hellok1tta
/
html-css
Обзор
Документация
Войти
/
hellok1tta
/
html-css
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
frontend/contacts.html
251 строка
13 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">Каталог</a></li> <li><a href="contacts.html" class="active">Контакты</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="contacts-hero"> <div class="container"> <h1>Контакты</h1> <p>Свяжитесь с нами - мы всегда рады помочь и ответить на ваши вопросы</p> </div> </section> <section class="contact-info"> <div class="container"> <h2>Наши магазины</h2> <div class="shops-grid" id="shops-container"> <!-- Магазины будут загружены через JavaScript --> <div class="loading">Загрузка информации о магазинах...</div> </div> </div> </section> <section class="contact-form-section"> <div class="container"> <div class="contact-grid"> <div class="contact-details"> <h2>Свяжитесь с нами</h2> <div class="contact-item"> <h3>📞 Телефоны</h3> <p><a href="tel:+74951234567">+7 (495) 123-45-67</a> - основной</p> <p><a href="tel:+74951234568">+7 (495) 123-45-68</a> - доставка</p> </div> <div class="contact-item"> <h3>✉️ Email</h3> <p><a href="mailto:info@vkusniy-ugolok.ru">info@vkusniy-ugolok.ru</a> - общие вопросы</p> <p><a href="mailto:orders@vkusniy-ugolok.ru">orders@vkusniy-ugolok.ru</a> - заказы</p> </div> <div class="contact-item"> <h3>🚚 Доставка</h3> <p>Бесплатная доставка при заказе от 1000 рублей в пределах МКАД</p> <p>Стоимость доставки за МКАД уточняйте у оператора</p> </div> <div class="contact-item working-hours"> <h3>🕒 Время работы</h3> <table class="hours-table"> <tr> <td>Понедельник - Пятница</td> <td>8:00 - 20:00</td> </tr> <tr> <td>Суббота</td> <td>9:00 - 18:00</td> </tr> <tr> <td>Воскресенье</td> <td>9:00 - 18:00</td> </tr> </table> </div> </div> <div class="contact-form-container"> <h2>Форма обратной связи</h2> <form class="contact-form" id="contactForm"> <div class="form-group"> <label for="name" class="form-label">Ваше имя *</label> <input type="text" id="name" class="form-control" placeholder="Иван Иванов" required> </div> <div class="form-group"> <label for="phone" class="form-label">Телефон *</label> <input type="tel" id="phone" class="form-control" placeholder="+7 (999) 999-99-99" required> </div> <div class="form-group"> <label for="email" class="form-label">Email</label> <input type="email" id="email" class="form-control" placeholder="ivan@example.com"> </div> <div class="form-group"> <label for="subject" class="form-label">Тема сообщения</label> <select id="subject" class="form-control"> <option value="">Выберите тему</option> <option value="order">Заказ продукции</option> <option value="delivery">Доставка</option> <option value="complaint">Жалоба</option> <option value="suggestion">Предложение</option> <option value="other">Другое</option> </select> </div> <div class="form-group"> <label for="message" class="form-label">Сообщение *</label> <textarea id="message" class="form-control" placeholder="Опишите ваш вопрос или заказ..." rows="5" required></textarea> </div> <div class="form-group"> <label class="checkbox-label"> <input type="checkbox" required> <span class="checkmark"></span> Я соглашаюсь с обработкой персональных данных </label> </div> <button type="submit" class="btn btn-primary btn-block">Отправить сообщение</button> </form> </div> </div> </div> </section> <section class="faq-section"> <div class="container"> <h2>Часто задаваемые вопросы</h2> <div class="faq-grid"> <div class="faq-item"> <h3>Как сделать заказ?</h3> <p>Вы можете сделать заказ по телефону, через форму на сайте или при личном визите в нашу пекарню.</p> </div> <div class="faq-item"> <h3>Есть ли доставка?</h3> <p>Да, мы осуществляем доставку по Москве. Бесплатная доставка при заказе от 1000 рублей.</p> </div> <div class="faq-item"> <h3>Можно ли заказать торт на праздник?</h3> <p>Конечно! Мы готовим торты на заказ. Рекомендуем делать заказ заранее, минимум за 3 дня.</p> </div> <div class="faq-item"> <h3>Какие способы оплаты принимаете?</h3> <p>Мы принимаем наличные, банковские карты и безналичный расчет для юридических лиц.</p> </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 loadShops(); }); async function loadShops() { const container = document.getElementById('shops-container'); try { const response = await fetch('/api/shops'); const result = await response.json(); if (result.success && result.data) { container.innerHTML = result.data.map(shop => ` <div class="contact-item"> <h3>📍 Адрес</h3> <p>${shop.address}</p> ${shop.phone ? `<p><strong>Телефон:</strong> <a href="tel:${shop.phone}">${shop.phone}</a></p>` : ''} ${shop.email ? `<p><strong>Email:</strong> <a href="mailto:${shop.email}">${shop.email}</a></p>` : ''} ${shop.working_hours ? `<p><strong>Часы работы:</strong> ${shop.working_hours}</p>` : ''} </div> `).join(''); } else { container.innerHTML = '<p>Информация о магазинах скоро появится</p>'; } } catch (error) { console.error('Error loading shops:', error); container.innerHTML = '<p class="error">Не удалось загрузить информацию о магазинах</p>'; } } </script> </body> </html>