129 lines
5.9 KiB
HTML
129 lines
5.9 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||
<meta name="color-scheme" content="light dark" />
|
||
<meta name="theme-color" content="#f1f0ea" />
|
||
<title>Пожитки</title>
|
||
<link rel="stylesheet" href="./styles.css" />
|
||
<script src="./telegram-web-app.js"></script>
|
||
<script src="./app.js?v=3" defer></script>
|
||
</head>
|
||
<body>
|
||
<main class="shell">
|
||
<header class="topbar">
|
||
<div>
|
||
<p class="eyebrow">Личный капитал</p>
|
||
<h1>Пожитки</h1>
|
||
</div>
|
||
<div class="user-chip" aria-label="Текущий пользователь">
|
||
<span id="userInitial" class="mini-avatar">Я</span>
|
||
<span id="userName">Гость</span>
|
||
</div>
|
||
</header>
|
||
|
||
<section id="dashboardView" class="view active" aria-labelledby="dashboardTab">
|
||
<article class="hero-card">
|
||
<p>Накоплено</p>
|
||
<strong id="balanceValue">0 ₽</strong>
|
||
<div class="saving-row">
|
||
<span id="savedPercent">0%</span>
|
||
<div class="progress"><i id="savingProgress"></i></div>
|
||
</div>
|
||
<small>от всех поступлений</small>
|
||
</article>
|
||
|
||
<div class="metric-grid">
|
||
<article class="metric income">
|
||
<span class="metric-icon">↗</span>
|
||
<div><small>Поступления</small><strong id="incomeValue">0 ₽</strong></div>
|
||
</article>
|
||
<article class="metric expense">
|
||
<span class="metric-icon">↘</span>
|
||
<div><small>Расходы</small><strong id="expenseValue">0 ₽</strong></div>
|
||
</article>
|
||
</div>
|
||
|
||
<div class="section-title">
|
||
<h2>Структура денег</h2>
|
||
<span id="categoryCaption">Пока пусто</span>
|
||
</div>
|
||
<div id="categoryList" class="category-list empty-state">
|
||
Добавьте первую операцию — категории появятся здесь.
|
||
</div>
|
||
|
||
<div class="section-title history-heading">
|
||
<h2>Последние записи</h2>
|
||
<span>можно отменить</span>
|
||
</div>
|
||
<div id="transactionList" class="transaction-list empty-state">
|
||
Записей пока нет.
|
||
</div>
|
||
</section>
|
||
|
||
<section id="addView" class="view" aria-labelledby="addTab">
|
||
<div class="section-title add-heading">
|
||
<div><p class="eyebrow">Новая запись</p><h2>Движение денег</h2></div>
|
||
</div>
|
||
<form id="transactionForm" class="transaction-form">
|
||
<div class="segmented" role="group" aria-label="Тип операции">
|
||
<button type="button" class="segment active" data-kind="income">Поступление</button>
|
||
<button type="button" class="segment" data-kind="expense">Расход</button>
|
||
</div>
|
||
|
||
<label class="amount-field">
|
||
<span>Сумма</span>
|
||
<div><input id="amount" name="amount" type="number" inputmode="decimal" min="0.01" step="0.01" placeholder="0" required /><b>₽</b></div>
|
||
</label>
|
||
|
||
<label>
|
||
<span>Категория</span>
|
||
<select id="category" name="category" required></select>
|
||
</label>
|
||
|
||
<label id="customCategoryWrap" class="hidden">
|
||
<span>Своя категория</span>
|
||
<input id="customCategory" maxlength="40" placeholder="Например, Фриланс" />
|
||
<button id="saveCategoryButton" class="secondary-button" type="button">Сохранить только категорию</button>
|
||
</label>
|
||
|
||
<label>
|
||
<span>Комментарий <em>необязательно</em></span>
|
||
<input id="note" name="note" maxlength="160" placeholder="За что или откуда" />
|
||
</label>
|
||
|
||
<button class="primary-button" type="submit">Сохранить через Telegram</button>
|
||
<p class="form-hint">Telegram передаст запись боту вместе с вашим подтверждённым ID.</p>
|
||
</form>
|
||
</section>
|
||
|
||
<section id="leaderboardView" class="view" aria-labelledby="leaderboardTab">
|
||
<div class="section-title board-heading">
|
||
<div><p class="eyebrow">Сберегательный рейтинг</p><h2>Лидерборд</h2></div>
|
||
<button id="shareButton" class="icon-button" type="button" aria-label="Пригласить друга">↗</button>
|
||
</div>
|
||
<div class="board-switch" role="tablist">
|
||
<button id="allBoardButton" class="active" type="button">Все</button>
|
||
<button id="friendsBoardButton" type="button">Друзья</button>
|
||
</div>
|
||
<label class="leader-filter">
|
||
<span>Категория</span>
|
||
<select id="leaderboardCategory">
|
||
<option value="">Все категории</option>
|
||
</select>
|
||
</label>
|
||
<div id="leaderboardList" class="leaderboard-list loading">Загружаем рейтинг…</div>
|
||
<p id="friendHint" class="friend-hint hidden">Поделитесь ссылкой: когда друг запустит бота, он появится здесь.</p>
|
||
</section>
|
||
</main>
|
||
|
||
<nav class="bottom-nav" aria-label="Основная навигация">
|
||
<button id="dashboardTab" class="active" data-view="dashboardView"><span>◫</span>Обзор</button>
|
||
<button id="addTab" data-view="addView"><span class="add-mark">＋</span>Добавить</button>
|
||
<button id="leaderboardTab" data-view="leaderboardView"><span>♜</span>Рейтинг</button>
|
||
</nav>
|
||
|
||
<div id="toast" class="toast" role="status" aria-live="polite"></div>
|
||
</body>
|
||
</html>
|