# Крошка

Небольшой многостраничный сайт кофейни-пекарни на обычных HTML, CSS и JavaScript. Фреймворки, сервер и платёжные интеграции не используются.

## Страницы

- `index.html` — главная;
- `menu.html` — каталог, поиск, категории, сортировка и корзина;
- `favorites.html` — товары, отмеченные сердцем;
- `account.html` — локальный профиль и история демо-заказов;
- `docs.html` — руководство по функциям, хранению данных и ограничениями демо-режима;
- `about.html` — о кофейне;
- `visit.html` — адрес, часы работы и ссылка на Google Maps;
- `order.html` — оформление самовывоза.

Каталог, комбо и простые пары-рекомендации находятся в `menu-data.js`. Общая логика корзины, темы, избранного, недавних просмотров и навигации — в `js_main1.js`; сценарий заказа — в `order.js`. Локальный профиль и история заказов используют браузерную IndexedDB через `account-db.js`; страница профиля работает с ними в `account.js`.

## Запуск

Для быстрой проверки можно открыть `index.html` в браузере. Для локального веб-сервера подойдёт любой статический сервер; сборка не требуется. GitHub Pages публикует сайт из корня репозитория.

## Корзина и оформление заказа

Корзина, тема и история заказов хранятся локально в браузере. Если endpoint не настроен, оформление остаётся демо: создаёт номер, сохраняет историю и позволяет скопировать или расшарить заказ, но никуда его не отправляет и не принимает оплату. Демо-статус заказа можно продвигать локально.

Для отправки заказов через Formspree создайте свою HTML-форму и укажите её публичный URL в `order-config.js`:

```js
window.KROSHKA_ORDER_ENDPOINT = "https://formspree.io/f/ВАШ_ID_ФОРМЫ";
```

Endpoint — идентификатор публичной формы, а не секретный ключ; API-ключи, пароли и токены в браузерный код добавлять нельзя. При настроенном endpoint форма потребует согласие на передачу имени, телефона, времени самовывоза, комментария и состава заказа сервису Formspree. Номер и подтверждение появятся только после успешного ответа сервиса; при ошибке корзина сохранится. После настройки проверьте форму тестовым заказом, подтвердите её в Formspree и настройте разрешённые домены в аккаунте сервиса. Оплата на сайте не подключается.

Избранное и недавно просмотренные товары также сохраняются только в браузере этого устройства. Наборы рассчитываются по сумме обычных цен товаров — скидки не применяются.

## Профиль и локальная база данных

На `account.html` можно создать или изменить профиль: имя, email, телефон, день рождения и предпочтительную категорию. Телефон может автоматически заполнить одноимённое поле демо-checkout. Пароль не запрашивается и не хранится.

Это локальная регистрация только для демонстрации интерфейса, а не безопасная учётная запись: профиль и история находятся в IndexedDB текущего браузера и не синхронизируются между устройствами. У сайта нет серверной базы данных, регистрации на сервере, восстановления пароля, ролей доступа или общей клиентской истории. Не вводите пароли, платёжные реквизиты и чувствительные данные. Профиль сам по себе не отправляется; при отдельно включённой отправке заказа имя и телефон из checkout передаются Formspree только после согласия в форме. Удалить профиль и историю можно на странице профиля; очистка данных сайта в браузере также удаляет их. Корзина, тема и избранное продолжают храниться отдельно в localStorage.

В `docs.html` находится пользовательское руководство и объяснения основных сценариев и ограничений. Для настоящих аккаунтов и совместной базы нужен отдельный backend с аутентификацией, защищёнными правилами доступа, управлением согласием и политикой хранения данных; добавление публичного API-ключа в JavaScript не заменяет серверную защиту.

## Установка и работа офлайн

Сайт включает `manifest.json`, SVG/PNG-иконки и лёгкий Service Worker для основных страниц, скриптов и локальных изображений. На поддерживаемых браузерах сайт можно установить из меню браузера. Установка доступна только на HTTPS (GitHub Pages подходит) и после первого посещения, когда основные страницы были закэшированы. Корзина и избранное продолжат храниться локально; оформление заказа остаётся демо и не отправляется.

Service Worker обновляет локальные файлы при доступе к сети и использует кэш, когда сети нет. Неизвестные маршруты офлайн показывают локальную страницу `404.html`. При изменении набора предварительно кэшируемых страниц или ресурсов увеличивайте `CACHE_NAME` в `sw.js`, чтобы установленные копии получили новую версию оболочки.

## Изображения и лицензии

Фотографии хранятся локально в WebP; ниже первого экрана загружаются лениво. Источники проверены через Openverse, все фотографии перечислены там с лицензией CC0 / Public Domain:

- [Круассан и кофе — PICSELI, StockSnap, CC0](https://stocksnap.io/photo/croissant-coffee-QJJJN8RWGX);
- [Латте — Drew Coffman, StockSnap, CC0](https://stocksnap.io/photo/coffee-latte-D322D377AD);
- [Улитка с корицей — Snufkin, StockSnap, CC0](https://stocksnap.io/photo/cinnamon-roll-Z60VG68WD0);
- [Тост с авокадо — Lisa Fotios, StockSnap, CC0](https://stocksnap.io/photo/avocado-toast-NQNFUT9KD7);
- [Шоколадное печенье — Rawpixel, CC0](https://www.rawpixel.com/image/3337977/free-photo-image-cookies-chocolate-bakery-cc0);
- [Интерьер кофейного бара — Rawpixel, CC0](https://www.rawpixel.com/image/3283405/free-photo-image-room-coffee-bar-cafe). Изображение иллюстрирует атмосферу и не заявляется как фотография конкретного помещения «Крошки».

Небольшие SVG-пиктограммы еды взяты из [Twemoji](https://github.com/twitter/twemoji), графика распространяется по [CC BY 4.0](https://github.com/twitter/twemoji/blob/master/LICENSE-GRAPHICS). Атрибуция для используемых SVG: Copyright 2020 Twitter, Inc and other contributors.