NoteJS/public/profile.html
Fovway 4600dc61b7 Добавлена поддержка PWA для улучшения пользовательского опыта
- Реализованы маршруты для обслуживания PWA файлов: manifest.json, sw.js и browserconfig.xml
- Добавлены мета-теги и иконки для PWA в HTML страницах
- Внедрена регистрация сервисного работника для кэширования и оффлайн-доступа
- Обновлены страницы входа, регистрации, профиля и заметок для поддержки PWA
2025-10-20 08:53:59 +07:00

162 lines
5.4 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="ru">
<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="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="NoteJS" />
<meta name="msapplication-TileColor" content="#007bff" />
<!-- 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="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=3" />
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/iconify/2.0.0/iconify.min.js"></script>
</head>
<body>
<div class="container">
<header class="notes-header">
<span
><span class="iconify" data-icon="mdi:account"></span> Личный
кабинет</span
>
<div class="user-info">
<a href="/notes" class="back-btn">← Назад к заметкам</a>
<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="profile-container">
<!-- Секция аватарки -->
<div class="avatar-section">
<div class="avatar-wrapper">
<img
id="avatarImage"
src=""
alt="Аватар"
class="avatar-preview"
style="display: none"
/>
<div id="avatarPlaceholder" class="avatar-placeholder">
<span class="iconify" data-icon="mdi:account"></span>
</div>
</div>
<div class="avatar-buttons">
<label for="avatarInput" class="btn-upload">
<span class="iconify" data-icon="mdi:upload"></span> Загрузить
аватар
</label>
<input
type="file"
id="avatarInput"
accept="image/*"
style="display: none"
/>
<button
id="deleteAvatarBtn"
class="btn-delete"
style="display: none"
>
<span class="iconify" data-icon="mdi:delete"></span> Удалить
</button>
</div>
<p class="avatar-hint">
Максимальный размер: 5 МБ. Форматы: JPG, PNG, GIF
</p>
</div>
<!-- Секция данных профиля -->
<div class="profile-form">
<h3>Данные профиля</h3>
<div class="form-group">
<label for="username">Логин</label>
<input
type="text"
id="username"
placeholder="Логин"
minlength="3"
/>
</div>
<div class="form-group">
<label for="email">Email (необязательно)</label>
<input type="email" id="email" placeholder="example@example.com" />
</div>
<button id="updateProfileBtn" class="btnSave">
Сохранить изменения
</button>
<hr class="separator" />
<h3>Изменить пароль</h3>
<div class="form-group">
<label for="currentPassword">Текущий пароль</label>
<input
type="password"
id="currentPassword"
placeholder="Текущий пароль"
/>
</div>
<div class="form-group">
<label for="newPassword">Новый пароль</label>
<input
type="password"
id="newPassword"
placeholder="Новый пароль (минимум 6 символов)"
minlength="6"
/>
</div>
<div class="form-group">
<label for="confirmPassword">Подтвердите новый пароль</label>
<input
type="password"
id="confirmPassword"
placeholder="Подтвердите новый пароль"
/>
</div>
<button id="changePasswordBtn" class="btnSave">
Изменить пароль
</button>
</div>
</div>
<div id="messageContainer" class="message-container"></div>
</div>
<div class="footer">
<p>Создатель: <span>Fovway</span></p>
</div>
<script src="/profile.js"></script>
<!-- PWA Script -->
<script src="/pwa.js"></script>
</body>
</html>