Fovway
95401328c4
- Обновлены инструкции по тестированию PWA для мобильных и десктопных устройств. - Добавлены новые мета-теги и улучшены иконки для поддержки iOS и Windows. - Оптимизирован Service Worker для кэширования и обработки ошибок. - Реализована кнопка установки, отображающаяся только на мобильных устройствах, с различными инструкциями для разных браузеров. - Обновлен manifest.json с добавлением категорий и скриншотов.
299 lines
12 KiB
HTML
299 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Заметки - NoteJS</title>
|
||
|
||
<!-- PWA Meta Tags -->
|
||
<meta name="description" content="NoteJS - современная система заметок с поддержкой Markdown, изображений, тегов и календаря" />
|
||
<meta name="theme-color" content="#007bff" />
|
||
<meta name="mobile-web-app-capable" content="yes" />
|
||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||
<meta name="apple-mobile-web-app-title" content="NoteJS" />
|
||
<meta name="apple-touch-fullscreen" content="yes" />
|
||
<meta name="msapplication-TileColor" content="#007bff" />
|
||
<meta name="msapplication-config" content="/browserconfig.xml" />
|
||
<meta name="msapplication-TileImage" content="/icons/icon-144x144.png" />
|
||
<meta name="application-name" content="NoteJS" />
|
||
<meta name="format-detection" content="telephone=no" />
|
||
|
||
<!-- Icons -->
|
||
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
|
||
<link rel="icon" type="image/png" sizes="32x32" href="/icons/icon-32x32.png" />
|
||
<link rel="icon" type="image/png" sizes="16x16" href="/icons/icon-16x16.png" />
|
||
<link rel="apple-touch-icon" sizes="57x57" href="/icons/icon-48x48.png" />
|
||
<link rel="apple-touch-icon" sizes="60x60" href="/icons/icon-48x48.png" />
|
||
<link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png" />
|
||
<link rel="apple-touch-icon" sizes="76x76" href="/icons/icon-72x72.png" />
|
||
<link rel="apple-touch-icon" sizes="114x114" href="/icons/icon-128x128.png" />
|
||
<link rel="apple-touch-icon" sizes="120x120" href="/icons/icon-128x128.png" />
|
||
<link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png" />
|
||
<link rel="apple-touch-icon" sizes="152x152" href="/icons/icon-152x152.png" />
|
||
<link rel="apple-touch-icon" sizes="180x180" href="/icons/icon-192x192.png" />
|
||
<link rel="mask-icon" href="/icon.svg" color="#007bff" />
|
||
|
||
<!-- Manifest -->
|
||
<link rel="manifest" href="/manifest.json" />
|
||
|
||
<!-- Styles -->
|
||
<link rel="stylesheet" href="/style.css?v=4" />
|
||
|
||
<!-- Scripts -->
|
||
<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>
|
||
|
||
<!-- PWA Script -->
|
||
<script src="/pwa.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>
|