77 lines
3.0 KiB
HTML
77 lines
3.0 KiB
HTML
<!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>
|