Fovway
034208fc56
- Добавлена секция тегов под календарем с отображением всех уникальных тегов - Реализована фильтрация заметок по тегам при клике на тег - Добавлены кликабельные теги в самих заметках для интуитивной навигации - Теги автоматически извлекаются из текста заметок в формате #название - Добавлены счетчики для каждого тега, показывающие количество заметок - Реализован индикатор активного фильтра с возможностью сброса - Поддержка комбинированной фильтрации по дате и тегам - Стилизованные теги с hover-эффектами и анимациями - Обновление тегов в реальном времени при создании/редактировании заметок Файлы изменены: - public/notes.html: добавлена HTML-структура для секции тегов - public/style.css: стили для тегов в боковой панели и в заметках - public/app.js: логика извлечения тегов, фильтрации и обработчики кликов
125 lines
4.3 KiB
HTML
125 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Заметки</title>
|
||
<link rel="stylesheet" href="/style.css?v=2" />
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
|
||
/>
|
||
</head>
|
||
<body>
|
||
<div class="container-leftside">
|
||
<div class="mini-calendar">
|
||
<div class="calendar-header">
|
||
<button class="calendar-nav" id="prevMonth">‹</button>
|
||
<span class="calendar-month-year" id="monthYear"></span>
|
||
<button class="calendar-nav" id="nextMonth">›</button>
|
||
</div>
|
||
<div class="calendar-weekdays">
|
||
<div class="calendar-weekday">Пн</div>
|
||
<div class="calendar-weekday">Вт</div>
|
||
<div class="calendar-weekday">Ср</div>
|
||
<div class="calendar-weekday">Чт</div>
|
||
<div class="calendar-weekday">Пт</div>
|
||
<div class="calendar-weekday">Сб</div>
|
||
<div class="calendar-weekday">Вс</div>
|
||
</div>
|
||
<div class="calendar-days" id="calendarDays"></div>
|
||
</div>
|
||
|
||
<!-- Секция тегов -->
|
||
<div class="tags-section">
|
||
<div class="tags-header">
|
||
<span class="tags-title">🏷️ Теги</span>
|
||
</div>
|
||
<div class="tags-container" id="tagsContainer">
|
||
<!-- Теги будут добавлены динамически -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="center">
|
||
<div class="container">
|
||
<header class="notes-header">
|
||
<div class="notes-header-left">
|
||
<span>📝 Мои заметки</span>
|
||
<div
|
||
id="filter-indicator"
|
||
class="filter-indicator"
|
||
style="display: none"
|
||
></div>
|
||
</div>
|
||
<div class="user-info">
|
||
<div
|
||
id="user-avatar-container"
|
||
style="display: none; margin-right: 10px"
|
||
>
|
||
<img
|
||
id="user-avatar"
|
||
src=""
|
||
alt="Аватар"
|
||
style="
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
vertical-align: middle;
|
||
border: 2px solid #007bff;
|
||
"
|
||
/>
|
||
</div>
|
||
<span id="username-display" class="username-clickable"></span>
|
||
<form action="/logout" method="POST" style="display: inline">
|
||
<button type="submit" class="logout-btn">🚪 Выйти</button>
|
||
</form>
|
||
</div>
|
||
</header>
|
||
<div class="main">
|
||
<div class="markdown-buttons">
|
||
<button class="btnMarkdown" id="boldBtn">
|
||
<i class="fas fa-bold"></i>
|
||
</button>
|
||
<button class="btnMarkdown" id="italicBtn">
|
||
<i class="fas fa-italic"></i>
|
||
</button>
|
||
<button class="btnMarkdown" id="headerBtn">
|
||
<i class="fas fa-heading"></i>
|
||
</button>
|
||
<button class="btnMarkdown" id="listBtn">
|
||
<i class="fas fa-list-ul"></i>
|
||
</button>
|
||
<button class="btnMarkdown" id="quoteBtn">
|
||
<i class="fas fa-quote-right"></i>
|
||
</button>
|
||
<button class="btnMarkdown" id="codeBtn">
|
||
<i class="fas fa-code"></i>
|
||
</button>
|
||
<button class="btnMarkdown" id="linkBtn">
|
||
<i class="fas fa-link"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<textarea
|
||
class="textInput"
|
||
id="noteInput"
|
||
placeholder="Ваша заметка..."
|
||
></textarea>
|
||
<div class="save-button-container">
|
||
<button class="btnSave" id="saveBtn">Сохранить</button>
|
||
<span class="save-hint">или нажмите Alt + Enter</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="notes-container" class="notes-container"></div>
|
||
</div>
|
||
|
||
<div class="footer">
|
||
<p>Создатель: <span>Fovway</span></p>
|
||
</div>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/11.1.0/marked.min.js"></script>
|
||
<script src="/app.js"></script>
|
||
</body>
|
||
</html>
|