61 lines
2.0 KiB
HTML
61 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Календарь-планер</title>
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📅</text></svg>">
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<header class="top">
|
||
<div class="container">
|
||
<h1>Календарь-планер</h1>
|
||
<p class="sub">Нажми на день — добавь дела и планы. Всё сохранится само.</p>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="container layout">
|
||
<section class="cal">
|
||
<div class="cal-head">
|
||
<button class="arrow" id="prev" aria-label="Предыдущий месяц">←</button>
|
||
<div class="month-name" id="monthName"></div>
|
||
<button class="arrow" id="next" aria-label="Следующий месяц">→</button>
|
||
</div>
|
||
|
||
<div class="weekdays" id="weekdays"></div>
|
||
<div class="grid" id="grid"></div>
|
||
|
||
<div class="cal-foot">
|
||
<button class="today-btn" id="today">Сегодня</button>
|
||
</div>
|
||
</section>
|
||
|
||
<aside class="panel" id="panel">
|
||
<div class="panel-empty" id="panelEmpty">
|
||
<div class="pe-emoji">👆</div>
|
||
<p>Нажми на любой день,<br>чтобы открыть его планы</p>
|
||
</div>
|
||
|
||
<div class="panel-body hidden" id="panelBody">
|
||
<div class="panel-head">
|
||
<div class="panel-date" id="panelDate"></div>
|
||
<button class="close-btn" id="closePanel" aria-label="Закрыть">×</button>
|
||
</div>
|
||
|
||
<p class="count" id="count"></p>
|
||
<ul class="notes" id="notes"></ul>
|
||
|
||
<form class="add-form" id="addForm">
|
||
<input id="noteText" placeholder="Новое дело…" maxlength="300" required>
|
||
<button type="submit" aria-label="Добавить">+</button>
|
||
</form>
|
||
</div>
|
||
</aside>
|
||
</main>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|