136 lines
9.9 KiB
HTML
136 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
||
<!-- Дизайн: Стандартный дизайн. Сохраняй все пять CSS; подробности в design.md. -->
|
||
<html lang="ru" data-theme="light">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Трекер привычек — Казахтелеком</title>
|
||
<script src="design-system/icons/kt-ai-icons.js"></script>
|
||
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-components.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-page.css">
|
||
<link rel="stylesheet" href="design-system/vibe-theme.css">
|
||
<style>
|
||
/* Мелочи под трекер: сетка, отступы, мини-календарь. Цвета — только токены. */
|
||
.track-wrap { max-width: 920px; margin: 0 auto; padding: var(--kt-ai-space-8) var(--kt-ai-space-6) var(--kt-ai-space-12); }
|
||
.track-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kt-ai-space-4); margin-bottom: var(--kt-ai-space-2); }
|
||
.track-head .logo { width: 34px; height: 34px; border-radius: var(--kt-ai-radius-lg); object-fit: contain; background: var(--kt-ai-bg-elevated); border: 1px solid var(--kt-ai-border); padding: 4px; display: block; }
|
||
.track-head .t-name { font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold); color: var(--kt-ai-fg); }
|
||
.track-head .t-date { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); }
|
||
.track-main { display: flex; align-items: center; gap: var(--kt-ai-space-4); flex: 1 1 100%; padding: var(--kt-ai-space-3) 0 var(--kt-ai-space-6); }
|
||
.track-main h1 { font-size: var(--kt-ai-text-2xl); margin: 0; flex: 1 1 auto; }
|
||
.track-main .sub { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); margin: var(--kt-ai-space-1) 0 0; }
|
||
|
||
.habits { display: flex; flex-direction: column; gap: var(--kt-ai-space-4); margin-top: var(--kt-ai-space-6); }
|
||
.habit { display: block; padding: var(--kt-ai-space-5) var(--kt-ai-space-5) var(--kt-ai-space-5); }
|
||
.habit-top { display: flex; align-items: center; gap: var(--kt-ai-space-4); }
|
||
.habit-ic { width: 40px; height: 40px; flex: 0 0 auto; border-radius: var(--kt-ai-radius-xl); background: var(--kt-ai-primary-subtle); color: var(--kt-ai-primary); display: grid; place-items: center; }
|
||
.habit-ic svg { width: 20px; height: 20px; }
|
||
.habit-meta { flex: 1 1 auto; min-width: 0; }
|
||
.habit-name { font-size: var(--kt-ai-text-md); font-weight: var(--kt-ai-weight-semibold); color: var(--kt-ai-fg); }
|
||
.habit-sub { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); margin-top: 2px; }
|
||
.habit-streak { flex: 0 0 auto; text-align: right; }
|
||
.habit-streak .num { font-size: var(--kt-ai-text-xl); font-weight: var(--kt-ai-weight-semibold); color: var(--kt-ai-fg); font-variant-numeric: tabular-nums; line-height: 1; }
|
||
.habit-streak .lbl { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); margin-top: 3px; }
|
||
.habit-body { display: flex; align-items: center; gap: var(--kt-ai-space-4); margin-top: var(--kt-ai-space-4); padding-top: var(--kt-ai-space-4); border-top: 1px solid var(--kt-ai-divider); flex-wrap: wrap; }
|
||
.day { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 0 0 auto; }
|
||
.day .dow { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); }
|
||
.dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--kt-ai-border-strong); background: transparent; }
|
||
.dot.on { background: var(--kt-ai-primary); border-color: var(--kt-ai-primary); }
|
||
.dot.today { box-shadow: 0 0 0 2px var(--kt-ai-primary-subtle); }
|
||
.habit-week { display: flex; gap: var(--kt-ai-space-4); flex-wrap: wrap; }
|
||
.habit-body .spacer { flex: 1 1 40px; }
|
||
|
||
.add-modal { width: 420px; }
|
||
.seg-day { display: flex; gap: 6px; }
|
||
.seg-day .opt { flex: 1 1 0; text-align: center; padding: var(--kt-ai-space-2) var(--kt-ai-space-2); border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-lg); font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); cursor: pointer; }
|
||
.seg-day .opt[data-active="true"] { background: var(--kt-ai-primary); border-color: var(--kt-ai-primary); color: var(--kt-ai-fg-on-fill); font-weight: var(--kt-ai-weight-medium); }
|
||
.ic-btn { width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-lg); background: var(--kt-ai-bg-elevated); color: var(--kt-ai-fg-muted); display: grid; place-items: center; cursor: pointer; }
|
||
.ic-btn svg { width: 17px; height: 17px; }
|
||
.ic-btn:hover { border-color: var(--kt-ai-border-strong); color: var(--kt-ai-fg); }
|
||
.modal-actions { display: flex; justify-content: flex-end; gap: var(--kt-ai-space-4); margin-top: var(--kt-ai-space-6); }
|
||
.link-btn { background: none; border: none; padding: 0; font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); cursor: pointer; }
|
||
.link-btn:hover { color: var(--kt-ai-fg); text-decoration: underline; }
|
||
.demo-reset { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); margin-top: var(--kt-ai-space-8); text-align: center; }
|
||
.empty-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--kt-ai-primary-subtle); color: var(--kt-ai-primary); display: grid; place-items: center; }
|
||
.empty-icon svg { width: 26px; height: 26px; }
|
||
</style>
|
||
</head>
|
||
<body class="kt-ai-app">
|
||
<div class="track-wrap">
|
||
<!-- Шапка: логотип КТ + название + подпись даты + чип «Демо-данные» -->
|
||
<div class="track-head">
|
||
<img class="logo" src="https://code.vibe42.kz/tore/aitu/kt-logo.svg" alt="Казахтелеком" onerror="this.onerror=null;this.src='design-system/brand/kazakhtelecom-logo.png'">
|
||
<div>
|
||
<div class="t-name">Трекер привычек</div>
|
||
<div class="t-date" id="todayLabel">Сегодня</div>
|
||
</div>
|
||
<span style="flex:1 1 20px"></span>
|
||
<span class="kt-ai-chip" data-tone="orange" id="dataModeChip">Демо-данные</span>
|
||
</div>
|
||
|
||
<!-- Главный объект: список привычек -->
|
||
<div class="track-main">
|
||
<div style="flex:1 1 auto">
|
||
<h1>Мои привычки</h1>
|
||
<p class="sub" id="listSub">Отмечайте выполнение за день — серия дней подряд (из последних 7) считается автоматически.</p>
|
||
</div>
|
||
<button class="kt-ai-btn" data-variant="primary" id="addBtn" type="button">
|
||
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:18px;height:18px"><use href="#plus"></use></svg> Добавить привычку
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Tихая метрик-полоса -->
|
||
<div class="kt-ai-kpi-strip" id="kpiStrip">
|
||
<div class="kt-ai-kpi"><span class="value" id="kpiHabits">0</span><span class="label">привычек</span></div>
|
||
<div class="kt-ai-kpi" id="kpiDoneWrap"><span class="value" id="kpiDone">—</span><span class="label">сегодня выполнено</span></div>
|
||
<div class="kt-ai-kpi"><span class="value" id="kpiBest">—</span><span class="label">лучшая серия</span><span class="hint" id="kpiBestName"></span></div>
|
||
</div>
|
||
|
||
<!-- Список привычек -->
|
||
<div class="habits" id="habits"></div>
|
||
|
||
<!-- Пустое состояние -->
|
||
<div class="kt-ai-empty" id="emptyState" hidden>
|
||
<div class="empty-icon"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#checklist"></use></svg></div>
|
||
<div class="title">Привычек пока нет</div>
|
||
<div>Добавьте первую привычку — отметка за день и счётчик серии появятся сразу.</div>
|
||
<button class="kt-ai-btn" data-variant="primary" id="emptyAddBtn" type="button">
|
||
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:18px;height:18px"><use href="#plus"></use></svg> Добавить привычку
|
||
</button>
|
||
</div>
|
||
|
||
<div class="demo-reset" id="demoReset" hidden>
|
||
<button class="link-btn" id="resetBtn" type="button">Сбросить к демо-данным</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Модал: добавить привычку -->
|
||
<div class="kt-ai-modal-overlay" id="addModal" hidden>
|
||
<div class="kt-ai-modal add-modal" role="dialog" aria-modal="true" aria-labelledby="addTitle">
|
||
<div class="modal-title" id="addTitle">Новая привычка</div>
|
||
<div class="kt-ai-field">
|
||
<label for="addName">Название</label>
|
||
<input class="kt-ai-input" id="addName" type="text" placeholder="Например: Чтение" autocomplete="off">
|
||
<div class="error" id="addError" hidden>Укажите название привычки.</div>
|
||
</div>
|
||
<div class="kt-ai-field">
|
||
<label>Как выглядит день</label>
|
||
<div class="kt-ai-input" style="display:flex;align-items:center;gap:10px;cursor:pointer;">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:18px;height:18px;color:var(--kt-ai-primary)"><use id="addIconUse" href="#book"></use></svg>
|
||
</div>
|
||
<div class="hint">Иконка подберётся по названию автоматически.</div>
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button class="kt-ai-btn" data-variant="ghost" id="addCancel" type="button">Отмена</button>
|
||
<button class="kt-ai-btn" data-variant="primary" id="addSave" type="button">Сохранить</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kt-ai-toast-stack" id="toastStack"></div>
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|