NoteJS/README.md

# NoteJS - Приложение для быстрых заметок

Простое веб-приложение для создания и управления заметками с поддержкой Markdown форматирования и системой аутентификации.

## Особенности

- 🚀 Создано на Node.js + Express
- 🔐 **Система регистрации и авторизации по логину и паролю**
- 🔒 Безопасное хранение паролей с bcrypt хешированием
- 💾 Хранение данных в SQLite базе данных
- 👥 **Изолированные заметки - каждый пользователь видит только свои заметки**
- 👤 **Личный кабинет с возможностью загрузки аватарки** (NEW!)
- 🖼️ **Управление аватаркой: загрузка, удаление, предварительный просмотр** (NEW!)
- 📝 Поддержка Markdown форматирования
- 🏷️ **Система тегов с автоматическим извлечением из заметок** (NEW!)
- 🔍 **Поиск по заметкам с подсветкой результатов** (NEW!)
- 📅 **Мини-календарь для навигации по датам заметок** (NEW!)
- 📱 **Адаптивный дизайн с боковым слайдером на мобильных** (NEW!)
- ☰ **Мобильный боковой слайдер с календарём, поиском и тегами** (NEW!)
- 🎨 Простой и интуитивный интерфейс
- 📱 Адаптивный дизайн

## Установка и запуск

### Предварительные требования

- Node.js (версия 14 или выше)
- npm

### Установка

1. Клонируйте репозиторий:

```bash
git clone <repository-url>
cd NoteJS
```

2. Установите зависимости:

```bash
npm install
```

3. Настройте переменные окружения:
   - Откройте файл `.env`
   - Установите секрет сессии в переменной `SESSION_SECRET`
   - Установите порт в переменной `PORT` (по умолчанию 3000)

Пример файла `.env`:

```env
SESSION_SECRET=your_session_secret_here
PORT=3000
```

4. Запустите сервер:

```bash
npm start
```

5. Откройте браузер и перейдите по адресу `http://localhost:3000`

## Использование

### Регистрация

1. Нажмите на ссылку "Зарегистрируйтесь" на странице входа
2. Заполните форму регистрации:
   - **Логин**: минимум 3 символа
   - **Пароль**: минимум 6 символов
   - **Подтвердите пароль**: повторите пароль
3. Нажмите кнопку "Зарегистрироваться"
4. Вы будете автоматически залогинены и перенаправлены на страницу заметок

### Вход в систему

1. Введите ваш логин
2. Введите ваш пароль
3. Нажмите кнопку "Войти"
4. После успешного входа вы попадете в интерфейс заметок

### Создание заметок

1. Введите текст заметки в поле ввода
2. Используйте кнопки форматирования для добавления Markdown элементов:
   - **B** - жирный текст
   - _I_ - курсив
   - H - заголовок
   - 📋 - элемент списка
   - " - цитата
   - `</>` - код
   - 🔗 - ссылка
3. Нажмите кнопку "Сохранить"

### Редактирование заметок

1. Нажмите кнопку "Редактировать" рядом с заметкой
2. Отредактируйте текст в появившемся поле ввода
3. Нажмите кнопку "Сохранить"

### Удаление заметок

1. Нажмите кнопку "Удалить" рядом с заметкой
2. Подтвердите удаление в появившемся диалоговом окне

### Личный кабинет

1. Нажмите на ваше имя пользователя в верхней части страницы заметок
2. В личном кабинете вы можете:
   - **Загрузить аватарку**: нажмите "Загрузить аватар" и выберите изображение (JPG, PNG, GIF до 5 МБ)
   - **Удалить аватарку**: нажмите кнопку "Удалить" рядом с аватаркой
   - **Изменить данные профиля**: отредактируйте логин и email
   - **Изменить пароль**: введите текущий пароль и новый пароль

### Поиск и фильтрация

1. **Поиск по заметкам**: используйте поле поиска в левой панели для поиска по содержимому заметок
2. **Фильтрация по тегам**: кликайте на теги в левой панели для фильтрации заметок
3. **Навигация по календарю**: кликайте на даты в мини-календаре для просмотра заметок за определенный день

### Теги

- Теги автоматически извлекаются из заметок при использовании символа `#` (например: `#важное`)
- Теги отображаются в левой панели с количеством заметок
- Кликабельные теги в заметках позволяют быстро фильтровать контент

### Выход из системы

Нажмите кнопку "🚪 Выйти" в верхней части страницы заметок

## Мобильная версия

### Боковой слайдер на мобильных устройствах

На мобильных устройствах (ширина экрана до 768 пикселей) вместо постоянной левой панели появляется удобный **боковой слайдер** с кнопкой "☰" в левом верхнем углу.

**Функциональность мобильного слайдера:**

1. **Кнопка открытия** - нажмите на кнопку "☰" в левом верхнем углу экрана
2. **Содержимое слайдера** включает все основные инструменты:
   - 📅 **Календарь** - полностью функциональный календарь месяца с навигацией
   - 🔍 **Поле поиска** - синхронизировано с основным полем поиска
   - 🏷️ **Теги** - все теги с количеством заметок
3. **Закрытие слайдера**:
   - Нажмите кнопку ✕ в верхнем правом углу слайдера
   - Нажмите на серую область (оверлей) справа
4. **Синхронизация** - изменения в слайдере (выбор даты, ввод текста, клик на тег) автоматически синхронизируются с основной ПК версией

**Преимущества мобильного слайдера:**

- ✅ Полная функциональность как в ПК версии
- ✅ Экономия места на экране мобильного устройства
- ✅ Легкое открытие/закрытие
- ✅ Удобная навигация по заметкам
- ✅ Не блокирует контент при открытии (использует оверлей)

## Структура проекта

```
NoteJS/
├── public/                  # Статические файлы (клиентская часть)
│   ├── index.html          # Страница входа
│   ├── register.html       # Страница регистрации
│   ├── notes.html          # Страница заметок
│   ├── profile.html        # Страница личного кабинета (NEW!)
│   ├── login.js            # Логика входа
│   ├── register.js         # Логика регистрации
│   ├── profile.js          # Логика личного кабинета (NEW!)
│   ├── app.js              # Клиентский JavaScript (обновлен)
│   ├── style.css           # Стили (обновлены)
│   └── uploads/            # Загруженные аватарки пользователей (NEW!)
├── server.js               # Express сервер (обновлен)
├── .env                    # Конфигурация (не включать в git!)
├── .gitignore              # Исключения для git (обновлен)
├── package.json            # Зависимости проекта
├── notes.db                # SQLite база данных (создается автоматически)
└── README.md               # Документация
```

## API Endpoints

### Аутентификация

- `GET /` - страница входа
- `GET /register` - страница регистрации
- `POST /api/register` - регистрация нового пользователя
- `POST /api/login` - вход в систему
- `POST /logout` - выход из системы
- `GET /api/user` - получить информацию о текущем пользователе (требует аутентификации)

### Профиль пользователя (требует аутентификации)

- `GET /profile` - страница личного кабинета
- `PUT /api/user/profile` - обновить данные профиля или пароль
- `POST /api/user/avatar` - загрузить аватарку
- `DELETE /api/user/avatar` - удалить аватарку

### Заметки (требуют аутентификации)

- `GET /notes` - страница заметок
- `GET /api/notes` - получить все заметки пользователя
- `POST /api/notes` - создать новую заметку
- `PUT /api/notes/:id` - обновить заметку
- `DELETE /api/notes/:id` - удалить заметку

## Безопасность

- **Bcrypt хеширование** паролей при сохранении
- **Сессионная аутентификация** с express-session
- **Helmet** для защиты от распространенных уязвимостей
- **CORS** конфигурация
- **Body Parser** для безопасной обработки запросов
- **Multer** для безопасной загрузки файлов с валидацией
- Защищенные маршруты с проверкой аутентификации
- **Валидация загружаемых файлов**: проверка типа, размера и формата
- **Изоляция данных**: каждый пользователь видит только свои заметки и файлы

## Требования к паролям

- Минимум 6 символов при регистрации
- Пароли хешируются с использованием bcrypt (стандарт раундов: 10)
- Пароли не могут быть восстановлены из БД

## Требования к логину

- Минимум 3 символа
- Должен быть уникальным (нельзя создать два аккаунта с одинаковым логином)

## Требования к аватаркам

- **Максимальный размер**: 5 МБ
- **Поддерживаемые форматы**: JPG, PNG, GIF
- **Автоматическое изменение размера**: изображения автоматически обрезаются до квадратного формата
- **Безопасность**: проверка типа файла и размера перед загрузкой

## Разработка

Для разработки используйте:

```bash
npm run dev
```

Этот скрипт использует **nodemon** для автоматической перезагрузки сервера при изменении файлов. Больше не нужно вручную перезапускать сервер при каждом изменении кода!

## Лицензия

Этот проект создан Fovway.

## Календарь

На странице заметок слева расположен интерактивный календарь, который позволяет:

- 📅 **Просмотреть текущий месяц** с выделением сегодняшней даты
- ◀️ **Переключаться между месяцами** с помощью кнопок навигации
- 🔗 **Выбирать даты** для фильтрации заметок (функция может быть расширена)
- 📱 **Адаптивность** - на мобильных устройствах календарь располагается на всю ширину выше формы

### Характеристики календаря

- Сегодняшний день выделен синим цветом
- Выбранный день отмечен зелёным цветом
- Дни из соседних месяцев отображаются серым цветом
- Календарь использует русские названия месяцев и дней недели
- Полностью функционален без необходимости в дополнительных библиотеках