121 lines
6.1 KiB
HTML
121 lines
6.1 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="habbit-style.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- Шапка страницы -->
|
||
<header class="page-header">
|
||
<h1 class="page-header__title">🚀 Трекер полезных привычек</h1>
|
||
<p class="page-header__subtitle">Отслеживайте свой прогресс и становитесь лучше каждый день</p>
|
||
|
||
<!-- Панель статистики -->
|
||
<div class="stats-panel">
|
||
<div class="stats-panel__item">
|
||
<div class="stats-panel__value">7</div>
|
||
<div class="stats-panel__label">Привычек</div>
|
||
</div>
|
||
<div class="stats-panel__item">
|
||
<div class="stats-panel__value">64%</div>
|
||
<div class="stats-panel__label">Общий прогресс</div>
|
||
</div>
|
||
<div class="stats-panel__item">
|
||
<div class="stats-panel__value">21</div>
|
||
<div class="stats-panel__label">День подряд</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Блок фильтров -->
|
||
<div class="filters">
|
||
<button class="button button--primary filters__button" data-filter="all">Все привычки</button>
|
||
<button class="button button--secondary filters__button" data-filter="active">Активные</button>
|
||
<button class="button button--secondary filters__button" data-filter="completed">Завершенные</button>
|
||
<button class="button button--secondary filters__button" data-filter="important">Важные</button>
|
||
</div>
|
||
|
||
<!-- Сетка карточек привычек -->
|
||
<div class="habits-grid" id="habits-grid">
|
||
<div class="habit-card habit-card--new">
|
||
<div class="habit-card__header">
|
||
<div class="habit-card__icon">🧘</div>
|
||
<h3 class="habit-card__title">Медитация</h3>
|
||
</div>
|
||
<p class="habit-card__description">Ежедневная медитации по 10 минут</p>
|
||
<div class="habit-card__progress">
|
||
<div class="habit-card__progress-info">
|
||
<span>Прогресс</span>
|
||
<span>30%</span>
|
||
</div>
|
||
<div class="habit-card__progress-bar">
|
||
<div class="habit-card__progress-fill" style="width: 30%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="habit-card__actions">
|
||
<button class="button button--success">Отметить выполнение</button>
|
||
<button class="button button--danger">удалить</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="habit-card habit-card--streak">
|
||
<div class="habit-card__header">
|
||
<div class="habit-card__icon">💧</div>
|
||
<h3 class="habit-card__title">Учить js</h3>
|
||
</div>
|
||
<p class="habit-card__description">Писать не менее 1000000000 строк кода в день</p>
|
||
<div class="habit-card__progress">
|
||
<div class="habit-card__progress-info">
|
||
<spa>Прогресс</span>
|
||
<span>0%</span>
|
||
</div>
|
||
<div class="habit-card__progress-bar">
|
||
<div class="habit-card__progress-fill" style="width: 0%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="habit-card__actions">
|
||
<button class="button button--success">Отметить выполнение</button>
|
||
<button class="button button--danger">удалить</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Форма добавления новой привычки -->
|
||
<div class="new-habit-form">
|
||
<button class="new-habit-form__button" id="add-habbit-button">
|
||
<h2 class="new-habit-form__title">➕ Добавить новую привычку</h2>
|
||
</button>
|
||
</div>
|
||
<div class="modal" id="habit-modal">
|
||
<div class="modal__overlay"></div>
|
||
<div class="modal__content">
|
||
<button class="modal__close">×</button>
|
||
<h2 class="modal__title">Добавить новую привычку</h2>
|
||
<form class="modal__form" id="habit-form">
|
||
<div class="form-group">
|
||
<label for="habit-name">Название</label>
|
||
<input type="text" id="habit-name" class="form-control" placeholder="Введите название привычки">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="habit-description">Описание</label>
|
||
<textarea id="habit-description" class="form-control" placeholder="Введите описание привычки"></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="habit-target">Цель</label>
|
||
<input type="number" id="habit-target" class="form-control" placeholder="Например, 1 раз в день" min="1">
|
||
</div>
|
||
<div class="modal__actions">
|
||
<button type="button" class="button button--secondary" id="cancel-button">Отмена</button>
|
||
<button type="submit" class="button button--primary">Добавить</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="app.js"></script>
|
||
<script src="habit-manager.js"></script>
|
||
</body>
|
||
</html> |