8a5d591ff0
- Daily checklist of 6 health habits with click-to-toggle - Progress bar with red/yellow/green levels and motivational phrases - Animated cat (idle blink, hop on check, cheer at 100%, sad in evening) - Animated forest background with time-of-day theming - localStorage persistence with automatic midnight reset - Confetti animation on full completion - Responsive layout + prefers-reduced-motion support Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
57 lines
1.6 KiB
HTML
57 lines
1.6 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="style.css" />
|
||
<link rel="stylesheet" href="cat.css" />
|
||
</head>
|
||
<body>
|
||
<div class="scene" id="scene">
|
||
<div class="sky"></div>
|
||
<div class="sun"></div>
|
||
<div class="rays"></div>
|
||
<div class="trees-layer">
|
||
<img src="assets/trees.svg" alt="" class="trees trees-back" />
|
||
<img src="assets/trees.svg" alt="" class="trees trees-front" />
|
||
</div>
|
||
<div class="grass-layer">
|
||
<img src="assets/grass.svg" alt="" class="grass" />
|
||
</div>
|
||
</div>
|
||
|
||
<main class="app">
|
||
<header class="app-header">
|
||
<h1>Здоровый день с котиком 🐾</h1>
|
||
<p class="date" id="date"></p>
|
||
</header>
|
||
|
||
<section class="progress-section">
|
||
<div class="progress-info">
|
||
<span id="progressText">0 из 6</span>
|
||
<span id="progressPercent">0%</span>
|
||
</div>
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" id="progressFill"></div>
|
||
</div>
|
||
<p class="motivation" id="motivation"></p>
|
||
</section>
|
||
|
||
<section class="habits">
|
||
<ul id="habitList" class="habit-list"></ul>
|
||
</section>
|
||
</main>
|
||
|
||
<div class="cat-container">
|
||
<div class="cat" id="cat" data-state="idle">
|
||
<img src="assets/cat.svg" alt="Котик" class="cat-img" />
|
||
</div>
|
||
</div>
|
||
|
||
<canvas id="confetti" class="confetti"></canvas>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|