Fovway
62d9b6c7ce
- Реализована возможность загрузки изображений к заметкам с использованием multer - Добавлены API для загрузки, получения и удаления изображений заметок - Обновлен интерфейс для отображения загруженных изображений и их предварительного просмотра - Добавлены стили для управления изображениями и модального окна просмотра
259 lines
9.9 KiB
HTML
259 lines
9.9 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=4" />
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/iconify/2.0.0/iconify.min.js"></script>
|
||
</head>
|
||
<body>
|
||
<!-- Кнопка открытия слайдера для мобильной версии -->
|
||
<div class="mobile-menu-btn" id="mobileMenuBtn">
|
||
<span class="iconify" data-icon="mdi:menu"></span>
|
||
</div>
|
||
|
||
<!-- Слайдер для мобильной версии -->
|
||
<div class="mobile-sidebar" id="mobileSidebar">
|
||
<div class="sidebar-close-btn" id="sidebarCloseBtn">
|
||
<span class="iconify" data-icon="mdi:close"></span>
|
||
</div>
|
||
<div class="sidebar-content">
|
||
<div class="mini-calendar">
|
||
<div class="calendar-header">
|
||
<button class="calendar-nav" id="prevMonthMobile">‹</button>
|
||
<span class="calendar-month-year" id="monthYearMobile"></span>
|
||
<button class="calendar-nav" id="nextMonthMobile">›</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="calendarDaysMobile"></div>
|
||
</div>
|
||
|
||
<!-- Секция поиска -->
|
||
<div class="search-section">
|
||
<div class="search-header">
|
||
<span class="search-title"
|
||
><span class="iconify" data-icon="mdi:magnify"></span> Поиск</span
|
||
>
|
||
</div>
|
||
<div class="search-container">
|
||
<input
|
||
type="text"
|
||
id="searchInputMobile"
|
||
placeholder="Поиск по заметкам..."
|
||
class="search-input"
|
||
/>
|
||
<button
|
||
id="clearSearchBtnMobile"
|
||
class="clear-search-btn"
|
||
style="display: none"
|
||
>
|
||
✕
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Секция тегов -->
|
||
<div class="tags-section">
|
||
<div class="tags-header">
|
||
<span class="tags-title"
|
||
><span class="iconify" data-icon="mdi:tag"></span> Теги</span
|
||
>
|
||
</div>
|
||
<div class="tags-container" id="tagsContainerMobile">
|
||
<!-- Теги будут добавлены динамически -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Оверлей для закрытия слайдера -->
|
||
<div class="mobile-sidebar-overlay" id="sidebarOverlay"></div>
|
||
|
||
<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="search-section">
|
||
<div class="search-header">
|
||
<span class="search-title"
|
||
><span class="iconify" data-icon="mdi:magnify"></span> Поиск</span
|
||
>
|
||
</div>
|
||
<div class="search-container">
|
||
<input
|
||
type="text"
|
||
id="searchInput"
|
||
placeholder="Поиск по заметкам..."
|
||
class="search-input"
|
||
/>
|
||
<button
|
||
id="clearSearchBtn"
|
||
class="clear-search-btn"
|
||
style="display: none"
|
||
>
|
||
✕
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Секция тегов -->
|
||
<div class="tags-section">
|
||
<div class="tags-header">
|
||
<span class="tags-title"
|
||
><span class="iconify" data-icon="mdi:tag"></span> Теги</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 class="iconify" data-icon="mdi:note-text"></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">
|
||
<span class="iconify" data-icon="mdi:logout"></span> Выйти
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</header>
|
||
<div class="main">
|
||
<div class="markdown-buttons">
|
||
<button class="btnMarkdown" id="boldBtn" title="Жирный текст">
|
||
<span class="iconify" data-icon="mdi:format-bold"></span>
|
||
</button>
|
||
<button class="btnMarkdown" id="italicBtn" title="Курсив">
|
||
<span class="iconify" data-icon="mdi:format-italic"></span>
|
||
</button>
|
||
<button class="btnMarkdown" id="headerBtn" title="Заголовок">
|
||
<span class="iconify" data-icon="mdi:format-header-1"></span>
|
||
</button>
|
||
<button class="btnMarkdown" id="listBtn" title="Список">
|
||
<span class="iconify" data-icon="mdi:format-list-bulleted"></span>
|
||
</button>
|
||
<button class="btnMarkdown" id="quoteBtn" title="Цитата">
|
||
<span class="iconify" data-icon="mdi:format-quote-close"></span>
|
||
</button>
|
||
<button class="btnMarkdown" id="codeBtn" title="Код">
|
||
<span class="iconify" data-icon="mdi:code-tags"></span>
|
||
</button>
|
||
<button class="btnMarkdown" id="linkBtn" title="Ссылка">
|
||
<span class="iconify" data-icon="mdi:link"></span>
|
||
</button>
|
||
<button class="btnMarkdown" id="imageBtn" title="Загрузить изображения">
|
||
<span class="iconify" data-icon="mdi:image-plus"></span>
|
||
</button>
|
||
</div>
|
||
|
||
<textarea
|
||
class="textInput"
|
||
id="noteInput"
|
||
placeholder="Ваша заметка..."
|
||
></textarea>
|
||
|
||
<!-- Скрытый input для загрузки изображений -->
|
||
<input type="file" id="imageInput" accept="image/*" multiple style="display: none;">
|
||
|
||
<!-- Контейнер для отображения загруженных изображений -->
|
||
<div id="imagePreviewContainer" class="image-preview-container" style="display: none;">
|
||
<div class="image-preview-header">
|
||
<span>Загруженные изображения:</span>
|
||
<button type="button" id="clearImagesBtn" class="clear-images-btn">Очистить все</button>
|
||
</div>
|
||
<div id="imagePreviewList" class="image-preview-list"></div>
|
||
</div>
|
||
|
||
<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>
|
||
|
||
<!-- Модальное окно для просмотра изображений -->
|
||
<div id="imageModal" class="image-modal">
|
||
<span class="image-modal-close">×</span>
|
||
<img class="image-modal-content" id="modalImage">
|
||
</div>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/11.1.0/marked.min.js"></script>
|
||
<script src="/app.js"></script>
|
||
<script>
|
||
// Проверяем загрузку Iconify
|
||
document.addEventListener("DOMContentLoaded", function () {
|
||
if (typeof Iconify === "undefined") {
|
||
console.warn(
|
||
"Iconify не загружен, загружаем альтернативную версию..."
|
||
);
|
||
const script = document.createElement("script");
|
||
script.src =
|
||
"https://cdnjs.cloudflare.com/ajax/libs/iconify/2.0.0/iconify.min.js";
|
||
document.head.appendChild(script);
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|