What to Cook MVP - initial version
This commit is contained in:
parent
a6aea0d4f4
commit
58fa4dd2f5
173
AGENTS.md
Normal file
173
AGENTS.md
Normal file
@ -0,0 +1,173 @@
|
||||
<!-- vibe42-agents-version: v3-guided-2026-06-01 -->
|
||||
# Vibe42 — учебная песочница для лендингов
|
||||
|
||||
Workspace юзера `kairakbek_a`. Это **учебная среда**, где обычные люди (не разработчики) пробуют сделать свой первый сайт.
|
||||
|
||||
---
|
||||
|
||||
## 🎯 ТВОЯ РОЛЬ
|
||||
|
||||
Ты — **гид и помощник**, а не слепой исполнитель. Цель сессии — чтобы юзер вышел с:
|
||||
1. **рабочим лендингом**, опубликованным по адресу `https://pages.git.vibe42.kz/kairakbek_a/<repo>/`,
|
||||
2. ощущением «это было легко» — без серверов, БД, токенов, конфигов.
|
||||
|
||||
Юзер не разработчик. Ему важен **результат, который видно в браузере**, а не код.
|
||||
|
||||
---
|
||||
|
||||
## 🗺 СЦЕНАРИЙ ПЕРВОГО ЗАХОДА (юзер только зашёл, ещё ничего нет)
|
||||
|
||||
1. Поздоровайся коротко: «Привет! Тут за 10 минут собираем лендинг и публикуем его в интернете. О чём хочешь сделать?»
|
||||
2. Если он не знает — предложи **4 конкретных идеи** (выбирай близкие к нему, не абстрактные):
|
||||
- Промо хобби (фотография / музыка / спорт)
|
||||
- Резюме / personal page с контактами
|
||||
- Афиша мероприятия (концерт, день рождения, мастер-класс)
|
||||
- Меню заведения / прайс услуг
|
||||
- Лендинг продукта или будущего проекта (waitlist)
|
||||
3. Уточни **2 короткие детали**: стиль (тёмный/светлый/яркий) и главную цель (рассказать / собрать заявку / показать работы).
|
||||
4. Сразу делай `./new-project <name>` и собирай страницу. Не спрашивай разрешения на каждый шаг.
|
||||
|
||||
---
|
||||
|
||||
## 💬 ЕСЛИ ЮЗЕР ОТВЕЧАЕТ РАСПЛЫВЧАТО
|
||||
|
||||
Юзер говорит «сделай что-нибудь» / «ну хз» / «сюрприз» → **не делай ничего абстрактного**.
|
||||
|
||||
Скажи: «Давай определимся, я задам 3 коротких вопроса:
|
||||
1. Это для тебя лично, для проекта/бизнеса, или для события?
|
||||
2. Главная цель — рассказать о чём-то / собрать заявку / показать портфолио?
|
||||
3. Любимое настроение — строгое тёмное, лёгкое светлое, яркое цветное?»
|
||||
|
||||
После ответов **сразу** предложи 2 конкретных варианта названия+структуры. Дай выбрать и иди делать.
|
||||
|
||||
---
|
||||
|
||||
## 🚫 ЕСЛИ ЮЗЕР ХОЧЕТ СЛОЖНОЕ — ПЕРЕФОРМУЛИРУЙ В ЛЕНДИНГ
|
||||
|
||||
| Запрос | Что делаем вместо |
|
||||
|--------|-------------------|
|
||||
| «магазин с корзиной» | лендинг с товарами + кнопка «купить» = ссылка на WhatsApp / Telegram |
|
||||
| «соцсеть» | лендинг будущего проекта + waitlist-форма (Formspree / Getform) |
|
||||
| «блог с админкой» | personal-page + ссылки на статьи в Telegram/Medium |
|
||||
| «приложение для записи» | лендинг услуги + ссылка на Calendly / WhatsApp |
|
||||
| «сайт с входом юзеров» | публичный лендинг без логина (нам логин не нужен) |
|
||||
| «бот в Telegram» | лендинг с описанием бота + кнопка `t.me/...` |
|
||||
|
||||
**Не говори «это невозможно».** Скажи: «У нас песочница только для статических сайтов. Давай сделаем лендинг, который покажет твою идею — а кнопки/формы свяжем с готовыми сервисами (WhatsApp, Telegram, Formspree)». Юзер счастлив, результат за 15 минут.
|
||||
|
||||
---
|
||||
|
||||
## 📐 ШАБЛОНЫ СТРАНИЦ (выбирай под идею юзера)
|
||||
|
||||
### A — Промо продукта/услуги
|
||||
**Секции:** Hero (заголовок + подзаголовок + CTA-кнопка) → 3-4 преимущества (иконка emoji + текст) → социальное доказательство (отзыв или цифра) → CTA (кнопка/телефон/мессенджер).
|
||||
|
||||
### B — Personal / резюме
|
||||
**Секции:** Hero (фото-аватарка + имя + одна фраза «кто я») → О себе (1-2 абзаца) → 3-5 карточек проектов/опыта → Контакты (email, telegram, github как ссылки-кнопки).
|
||||
|
||||
### C — Афиша мероприятия
|
||||
**Секции:** Hero (название + дата + место крупно) → Программа (список с временем) → Локация (картинка-placeholder + адрес) → Регистрация (форма Formspree или контакт).
|
||||
|
||||
### D — Меню / прайс
|
||||
**Секции:** Hero (название + слоган) → Меню/прайс (категории с ценами) → Контакты (телефон, адрес, часы работы, карта-картинка).
|
||||
|
||||
### E — Waitlist для будущего проекта
|
||||
**Секции:** Hero (название проекта + одна фраза + email-форма) → 3 фичи «что будет» → FAQ (3 пункта) → CTA (та же email-форма).
|
||||
|
||||
Все шаблоны — **одна страница, прокрутка вниз**. Никаких роутов, ничего динамического.
|
||||
|
||||
---
|
||||
|
||||
## ⚡ РИТУАЛ ПОСЛЕ ПЕРВОГО ЗАПУСКА
|
||||
|
||||
Как только готов первый рабочий вариант (даже грубый):
|
||||
|
||||
1. **Сразу запушь:**
|
||||
```bash
|
||||
git add -A
|
||||
git commit -m "v1"
|
||||
git push origin HEAD:pages
|
||||
```
|
||||
2. **ОБЯЗАТЕЛЬНО** дай юзеру ссылку **жирно**:
|
||||
> 🎉 Готово! Твой лендинг здесь: **https://pages.git.vibe42.kz/kairakbek_a/<repo>/**
|
||||
3. Скажи: «Открой в новой вкладке, посмотри. Что хочешь поменять?»
|
||||
4. Дальше короткие итерации: правка → push → новый URL-показ. Каждые 2-3 правки — push.
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ ЖЕЛЕЗНЫЕ ПРАВИЛА (НЕ нарушать никогда)
|
||||
|
||||
1. **Только статика — HTML + CSS + JS в браузере.**
|
||||
2. **Никакого бэкенда.** Никаких Node/Express/FastAPI/Django/PHP/Go-серверов. Никаких БД. Никакого Redis.
|
||||
3. **Никакой аутентификации / OAuth / JWT.**
|
||||
4. **Никакого Docker, nginx, sudo, системных настроек.**
|
||||
5. **Никаких тяжёлых сборщиков** (`npm install` дерево на 500МБ). Tailwind — только через CDN.
|
||||
6. **НИКОГДА `git init` в workspace root (`/workspaces/kairakbek_a`)** — это папка-контейнер юзера, не репозиторий.
|
||||
|
||||
---
|
||||
|
||||
## ✅ ВСЕГДА работай через `./new-project`
|
||||
|
||||
Если юзер сказал «сделай сайт NAME» / «создай проект NAME»:
|
||||
|
||||
```bash
|
||||
cd /workspaces/kairakbek_a
|
||||
./new-project NAME # создаёт repo в Gitea + клонит локально в ./NAME/
|
||||
cd NAME
|
||||
# теперь создавай index.html / style.css / script.js внутри ./NAME
|
||||
```
|
||||
|
||||
`./new-project` сам создаёт repo, клонит, и копирует туда `AGENTS.md` + `design.md`.
|
||||
|
||||
---
|
||||
|
||||
## 🌐 Git и публикация
|
||||
|
||||
**НЕТ GitHub.** Self-hosted git: **https://git.vibe42.kz**
|
||||
|
||||
- Профиль юзера: https://git.vibe42.kz/kairakbek_a
|
||||
- Pages (живые лендинги): https://pages.git.vibe42.kz/kairakbek_a/<repo>/
|
||||
- Креды уже в `/workspaces/kairakbek_a/.git-credentials` — git push/clone работают без пароля
|
||||
- **НЕ спрашивай юзера про GitHub URL / токен** — их не нужно
|
||||
|
||||
### Опубликовать лендинг
|
||||
|
||||
```bash
|
||||
git add -A
|
||||
git commit -m "site"
|
||||
git push origin HEAD:pages
|
||||
```
|
||||
|
||||
Ветка **`pages`** (Caddy её обслуживает; `gh-pages` тоже работает как fallback). Push → лендинг доступен мгновенно.
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Когда что-то идёт не так
|
||||
|
||||
- **Pages 404** → запушь ветку `pages` снова: `git push origin HEAD:pages -f`
|
||||
- **Не дёргай Gitea API типа `/repos/.../pages`, `/settings/pages`, `/deploy_keys`** — их нет
|
||||
- **Не пытайся «настроить Pages через UI Gitea»** — Pages у нас работают только через push в ветку `pages`
|
||||
- Запуталось — сделай новый чистый проект через `./new-project NAME-v2`, перенеси туда работающий index.html
|
||||
|
||||
---
|
||||
|
||||
## ❌ Чего НЕ делать НИКОГДА
|
||||
|
||||
- ❌ `git init` в workspace root
|
||||
- ❌ `npm install` с прод-зависимостями (express/mongoose/pg/prisma/next/nuxt)
|
||||
- ❌ Создавать `server.js` / `app.py` / `main.go` как backend
|
||||
- ❌ Использовать `gh` CLI или GitHub API
|
||||
- ❌ Вызывать Gitea Pages-API (его нет)
|
||||
- ❌ Долгое отлаживание Pages — почти всегда решение «push HEAD:pages»
|
||||
- ❌ Просить юзера ввести токен/URL/пароль — всё уже настроено
|
||||
- ❌ Задавать юзеру 10 вопросов подряд (максимум 2-3 за раз)
|
||||
- ❌ Показывать юзеру голый код больше 1 раза — ему важен результат, а не как написано
|
||||
- ❌ Предлагать «давай сначала дизайн в Figma» — мы делаем сразу в HTML
|
||||
- ❌ Говорить «это сложно» — переформулируй в простое
|
||||
- ❌ Зависать в обсуждениях — сделай первый вариант грубо, потом итерируй
|
||||
|
||||
---
|
||||
|
||||
## 🎨 design.md
|
||||
|
||||
Рядом лежит `design.md` с готовой палитрой, типографикой и стартер-шаблоном `index.html`. **Начинай с него.** Не выдумывай новые цвета — модифицируй существующие.
|
||||
110
design.md
Normal file
110
design.md
Normal file
@ -0,0 +1,110 @@
|
||||
<!-- vibe42-design-version: v1-2026-06-01 -->
|
||||
# Design system — Vibe42 песочница
|
||||
|
||||
Базовые цвета и типографика для лендингов. Можно отклоняться, но начинай с этого.
|
||||
|
||||
## Палитра
|
||||
|
||||
| Token | Hex | Использование |
|
||||
|-------|-----|---------------|
|
||||
| `--ink` | `#0F1218` | Тёмный фон / основной текст |
|
||||
| `--cyan` | `#00E5FF` | Основной акцент (кнопки, лого) |
|
||||
| `--cyan-50` | `#E8FCFF` | Светлая подложка для акцентов |
|
||||
| `--white` | `#FFFFFF` | Основной фон |
|
||||
| `--gray-500` | `#5B6573` | Вторичный текст |
|
||||
| `--gray-100` | `#F2F4F7` | Сепараторы / тонкие фоны |
|
||||
|
||||
## Типографика
|
||||
|
||||
```css
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
|
||||
```
|
||||
|
||||
| Уровень | Размер | Вес | line-height |
|
||||
|---------|--------|-----|-------------|
|
||||
| h1 (hero) | 56px | 800 | 1.05 |
|
||||
| h2 (section) | 36px | 700 | 1.15 |
|
||||
| h3 | 22px | 700 | 1.3 |
|
||||
| body | 17px | 400 | 1.6 |
|
||||
| small | 14px | 400 | 1.5 |
|
||||
|
||||
На мобиле — h1 уменьши до 36px, h2 до 28px.
|
||||
|
||||
## Лейаут
|
||||
|
||||
- max-width контента: **1140px** (контейнер с padding по бокам)
|
||||
- секция: `padding: 80px 24px` (мобила: `48px 20px`)
|
||||
- gap между блоками внутри секции: `24-32px`
|
||||
- border-radius: `8px` (кнопки, карточки), `16px` (большие карточки)
|
||||
|
||||
## Кнопки
|
||||
|
||||
```css
|
||||
.btn-primary {
|
||||
background: var(--cyan); color: var(--ink);
|
||||
padding: 14px 28px; border-radius: 8px;
|
||||
font-weight: 700; text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
.btn-secondary {
|
||||
background: transparent; color: var(--ink);
|
||||
border: 2px solid var(--ink);
|
||||
padding: 12px 26px; border-radius: 8px;
|
||||
}
|
||||
```
|
||||
|
||||
## Стартер `index.html`
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Мой проект</title>
|
||||
<style>
|
||||
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7}
|
||||
*{box-sizing:border-box;margin:0;padding:0}
|
||||
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--white)}
|
||||
.container{max-width:1140px;margin:0 auto;padding:80px 24px}
|
||||
.hero{background:var(--ink);color:var(--white)}
|
||||
.hero h1{font-size:56px;font-weight:800;line-height:1.05;margin-bottom:24px}
|
||||
.hero p{font-size:20px;color:#9aa3b2;max-width:600px;margin-bottom:32px}
|
||||
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:14px 28px;border-radius:8px;font-weight:700;text-decoration:none}
|
||||
.btn:hover{background:#1be5ff}
|
||||
.section h2{font-size:36px;font-weight:700;margin-bottom:24px}
|
||||
.card{background:var(--gray-100);border-radius:16px;padding:32px;margin-bottom:16px}
|
||||
@media (max-width:640px){.hero h1{font-size:36px}.section h2{font-size:28px}.container{padding:48px 20px}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<h1>Заголовок проекта</h1>
|
||||
<p>Подзаголовок — пара предложений о чём это.</p>
|
||||
<a class="btn" href="#section">Начать</a>
|
||||
</div>
|
||||
</section>
|
||||
<section id="section" class="section">
|
||||
<div class="container">
|
||||
<h2>Секция</h2>
|
||||
<div class="card">Контент карточки.</div>
|
||||
<div class="card">Контент карточки.</div>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Чем НЕ пользоваться
|
||||
|
||||
- Bootstrap, Material UI, Chakra, Ant Design — слишком тяжело и не нужно для лендинга
|
||||
- Font Awesome — используй emoji (🚀 ⚡ ✨) или inline SVG
|
||||
- jQuery — vanilla JS более чем достаточно
|
||||
|
||||
## Чем МОЖНО (если очень надо)
|
||||
|
||||
- **Tailwind через CDN**: `<script src="https://cdn.tailwindcss.com"></script>` — для прототипа OK
|
||||
- **Lottie animations через CDN**
|
||||
- **Placeholder картинки**: `https://picsum.photos/800/600`, `https://placehold.co/600x400`
|
||||
- **Шрифты Google Fonts через `<link>`** в head
|
||||
76
index.html
Normal file
76
index.html
Normal file
@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Что приготовить?</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<!-- Welcome Screen -->
|
||||
<div id="welcome-screen" class="screen">
|
||||
<div class="container">
|
||||
<h1>Что приготовить сегодня?</h1>
|
||||
<p class="subtitle">Добавьте свои блюда и получайте случайный выбор каждый день</p>
|
||||
<button id="add-first-dish-btn" class="primary-btn">Добавить блюдо</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- My Dishes Screen -->
|
||||
<div id="dishes-screen" class="screen hidden">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>Мои блюда</h1>
|
||||
<button id="back-to-home-btn" class="icon-btn">← Назад</button>
|
||||
</div>
|
||||
|
||||
<div id="add-dish-form" class="form">
|
||||
<input type="text" id="dish-input" placeholder="Название блюда" maxlength="50">
|
||||
<button id="add-dish-btn" class="primary-btn">Добавить</button>
|
||||
</div>
|
||||
|
||||
<div id="dishes-list" class="dishes-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Home Screen -->
|
||||
<div id="home-screen" class="screen hidden">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>Что приготовить?</h1>
|
||||
<button id="manage-dishes-btn" class="icon-btn">Мои блюда</button>
|
||||
</div>
|
||||
|
||||
<div class="home-content">
|
||||
<button id="random-btn" class="random-btn">
|
||||
<span class="random-icon">🍽️</span>
|
||||
<span class="random-text">Нажми, чтобы выбрать</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Result Screen -->
|
||||
<div id="result-screen" class="screen hidden">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>Ваш выбор</h1>
|
||||
<button id="back-to-home-result-btn" class="icon-btn">← Назад</button>
|
||||
</div>
|
||||
|
||||
<div class="result-content">
|
||||
<div id="selected-dish" class="selected-dish"></div>
|
||||
|
||||
<div class="result-buttons">
|
||||
<button id="cook-btn" class="primary-btn">Готовим!</button>
|
||||
<button id="another-btn" class="secondary-btn">Выбрать другое</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
235
script.js
Normal file
235
script.js
Normal file
@ -0,0 +1,235 @@
|
||||
// Data models
|
||||
class Dish {
|
||||
constructor(name) {
|
||||
this.id = this.generateUUID();
|
||||
this.name = name;
|
||||
this.createdAt = new Date().toISOString();
|
||||
}
|
||||
|
||||
generateUUID() {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
||||
const r = Math.random() * 16 | 0;
|
||||
const v = c === 'x' ? r : (r & 0x3 | 0x8);
|
||||
return v.toString(16);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class History {
|
||||
constructor(dishId) {
|
||||
this.id = this.generateUUID();
|
||||
this.dishId = dishId;
|
||||
this.selectedAt = new Date().toISOString();
|
||||
}
|
||||
|
||||
generateUUID() {
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
||||
const r = Math.random() * 16 | 0;
|
||||
const v = c === 'x' ? r : (r & 0x3 | 0x8);
|
||||
return v.toString(16);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// App state
|
||||
let dishes = [];
|
||||
let history = [];
|
||||
|
||||
// DOM Elements
|
||||
const welcomeScreen = document.getElementById('welcome-screen');
|
||||
const dishesScreen = document.getElementById('dishes-screen');
|
||||
const homeScreen = document.getElementById('home-screen');
|
||||
const resultScreen = document.getElementById('result-screen');
|
||||
|
||||
const addFirstDishBtn = document.getElementById('add-first-dish-btn');
|
||||
const dishInput = document.getElementById('dish-input');
|
||||
const addDishBtn = document.getElementById('add-dish-btn');
|
||||
const dishesList = document.getElementById('dishes-list');
|
||||
const randomBtn = document.getElementById('random-btn');
|
||||
const selectedDish = document.getElementById('selected-dish');
|
||||
const cookBtn = document.getElementById('cook-btn');
|
||||
const anotherBtn = document.getElementById('another-btn');
|
||||
const manageDishesBtn = document.getElementById('manage-dishes-btn');
|
||||
const backToHomeBtn = document.getElementById('back-to-home-btn');
|
||||
const backToHomeResultBtn = document.getElementById('back-to-home-result-btn');
|
||||
|
||||
// Initialize app
|
||||
function init() {
|
||||
loadData();
|
||||
setupEventListeners();
|
||||
|
||||
if (dishes.length === 0) {
|
||||
showScreen('welcome');
|
||||
} else {
|
||||
showScreen('home');
|
||||
}
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
function setupEventListeners() {
|
||||
addFirstDishBtn.addEventListener('click', () => {
|
||||
showScreen('dishes');
|
||||
dishInput.focus();
|
||||
});
|
||||
|
||||
addDishBtn.addEventListener('click', addDish);
|
||||
dishInput.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') addDish();
|
||||
});
|
||||
|
||||
randomBtn.addEventListener('click', getRandomDish);
|
||||
cookBtn.addEventListener('click', () => showScreen('home'));
|
||||
anotherBtn.addEventListener('click', getRandomDish);
|
||||
|
||||
manageDishesBtn.addEventListener('click', () => {
|
||||
showScreen('dishes');
|
||||
renderDishesList();
|
||||
});
|
||||
|
||||
backToHomeBtn.addEventListener('click', () => {
|
||||
if (dishes.length === 0) {
|
||||
showScreen('welcome');
|
||||
} else {
|
||||
showScreen('home');
|
||||
}
|
||||
});
|
||||
|
||||
backToHomeResultBtn.addEventListener('click', () => showScreen('home'));
|
||||
}
|
||||
|
||||
// Screen management
|
||||
function showScreen(screen) {
|
||||
welcomeScreen.classList.add('hidden');
|
||||
dishesScreen.classList.add('hidden');
|
||||
homeScreen.classList.add('hidden');
|
||||
resultScreen.classList.add('hidden');
|
||||
|
||||
switch(screen) {
|
||||
case 'welcome':
|
||||
welcomeScreen.classList.remove('hidden');
|
||||
break;
|
||||
case 'dishes':
|
||||
dishesScreen.classList.remove('hidden');
|
||||
renderDishesList();
|
||||
break;
|
||||
case 'home':
|
||||
homeScreen.classList.remove('hidden');
|
||||
break;
|
||||
case 'result':
|
||||
resultScreen.classList.remove('hidden');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Dish management
|
||||
function addDish() {
|
||||
const name = dishInput.value.trim();
|
||||
if (!name) return;
|
||||
|
||||
const dish = new Dish(name);
|
||||
dishes.push(dish);
|
||||
saveData();
|
||||
|
||||
dishInput.value = '';
|
||||
renderDishesList();
|
||||
|
||||
if (dishes.length === 1) {
|
||||
showScreen('home');
|
||||
}
|
||||
}
|
||||
|
||||
function editDish(id) {
|
||||
const dish = dishes.find(d => d.id === id);
|
||||
if (!dish) return;
|
||||
|
||||
const newName = prompt('Введите новое название:', dish.name);
|
||||
if (newName && newName.trim()) {
|
||||
dish.name = newName.trim();
|
||||
saveData();
|
||||
renderDishesList();
|
||||
}
|
||||
}
|
||||
|
||||
function deleteDish(id) {
|
||||
if (!confirm('Вы уверены, что хотите удалить это блюдо?')) return;
|
||||
|
||||
dishes = dishes.filter(d => d.id !== id);
|
||||
history = history.filter(h => h.dishId !== id);
|
||||
saveData();
|
||||
renderDishesList();
|
||||
|
||||
if (dishes.length === 0) {
|
||||
showScreen('welcome');
|
||||
}
|
||||
}
|
||||
|
||||
// Random selection with 3-day repeat protection
|
||||
function getRandomDish() {
|
||||
if (dishes.length === 0) {
|
||||
showScreen('welcome');
|
||||
return;
|
||||
}
|
||||
|
||||
const threeDaysAgo = new Date();
|
||||
threeDaysAgo.setDate(threeDaysAgo.getDate() - 3);
|
||||
|
||||
const recentDishIds = history
|
||||
.filter(h => new Date(h.selectedAt) > threeDaysAgo)
|
||||
.map(h => h.dishId);
|
||||
|
||||
let availableDishes = dishes.filter(d => !recentDishIds.includes(d.id));
|
||||
|
||||
if (availableDishes.length === 0) {
|
||||
availableDishes = dishes;
|
||||
}
|
||||
|
||||
const randomIndex = Math.floor(Math.random() * availableDishes.length);
|
||||
const selected = availableDishes[randomIndex];
|
||||
|
||||
const historyEntry = new History(selected.id);
|
||||
history.push(historyEntry);
|
||||
saveData();
|
||||
|
||||
selectedDish.textContent = selected.name;
|
||||
showScreen('result');
|
||||
}
|
||||
|
||||
// Render functions
|
||||
function renderDishesList() {
|
||||
dishesList.innerHTML = '';
|
||||
|
||||
if (dishes.length === 0) {
|
||||
dishesList.innerHTML = '<p style="text-align: center; color: #666;">Пока нет блюд. Добавьте первое!</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
dishes.forEach(dish => {
|
||||
const dishElement = document.createElement('div');
|
||||
dishElement.className = 'dish-item';
|
||||
dishElement.innerHTML = `
|
||||
<span class="dish-name">${dish.name}</span>
|
||||
<div class="dish-actions">
|
||||
<button onclick="editDish('${dish.id}')">Изменить</button>
|
||||
<button class="delete-btn" onclick="deleteDish('${dish.id}')">Удалить</button>
|
||||
</div>
|
||||
`;
|
||||
dishesList.appendChild(dishElement);
|
||||
});
|
||||
}
|
||||
|
||||
// Local storage
|
||||
function saveData() {
|
||||
localStorage.setItem('whatToCookDishes', JSON.stringify(dishes));
|
||||
localStorage.setItem('whatToCookHistory', JSON.stringify(history));
|
||||
}
|
||||
|
||||
function loadData() {
|
||||
const savedDishes = localStorage.getItem('whatToCookDishes');
|
||||
const savedHistory = localStorage.getItem('whatToCookHistory');
|
||||
|
||||
if (savedDishes) dishes = JSON.parse(savedDishes);
|
||||
if (savedHistory) history = JSON.parse(savedHistory);
|
||||
}
|
||||
|
||||
// Initialize app when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
286
styles.css
Normal file
286
styles.css
Normal file
@ -0,0 +1,286 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#app {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.screen {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #666;
|
||||
margin: 20px 0 30px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 15px 30px;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.primary-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.primary-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.secondary-btn {
|
||||
background: white;
|
||||
color: #667eea;
|
||||
border: 2px solid #667eea;
|
||||
padding: 15px 30px;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.secondary-btn:hover {
|
||||
background: #f0f0ff;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #667eea;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.form input {
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.form input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.form button {
|
||||
width: auto;
|
||||
padding: 15px 25px;
|
||||
}
|
||||
|
||||
.dishes-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.dish-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 10px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.dish-item:hover {
|
||||
background: #f0f0ff;
|
||||
}
|
||||
|
||||
.dish-name {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.dish-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.dish-actions button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #667eea;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
padding: 5px 10px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.dish-actions button:hover {
|
||||
background: #f0f0ff;
|
||||
}
|
||||
|
||||
.dish-actions .delete-btn {
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.dish-actions .delete-btn:hover {
|
||||
background: #ffebee;
|
||||
}
|
||||
|
||||
.home-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.random-btn {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
box-shadow: 0 10px 40px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.random-btn:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 15px 50px rgba(102, 126, 234, 0.5);
|
||||
}
|
||||
|
||||
.random-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.random-icon {
|
||||
font-size: 60px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.random-text {
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.result-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.selected-dish {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 30px 40px;
|
||||
border-radius: 15px;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.result-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.container {
|
||||
padding: 25px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.random-btn {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.random-icon {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
.selected-dish {
|
||||
font-size: 20px;
|
||||
padding: 25px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user