# 💜 WorkSpace 💜

**WorkSpace** — персональный веб-хаб для учебных заданий, лабораторных и практических работ. Проект помогает хранить учебные материалы в одном месте, быстро находить нужные работы и отслеживать собственный прогресс.

Сайт выполнен в тёмной фиолетовой теме. Вместо обычного списка файлов он предлагает удобный интерфейс, в котором учебные материалы организованы по предметам и лабораторным работам.

## 🌐 Живой сайт

**[Открыть WorkSpace](https://amagairei.github.io/WorkSpace/)**

**Исходный код проекта доступен в [репозитории на GitHub](https://github.com/AmagaiRei/WorkSpace).**

## 🎯 Цель проекта

Главная идея WorkSpace — собрать учебные работы в одном пространстве, чтобы не приходилось каждый раз искать нужный отчёт, архив или исходный код среди множества папок.

Проект создаётся как личный инструмент для организации учёбы, который можно постепенно развивать и адаптировать под собственные задачи.

## ✨ Возможности сайта

- 📚 **Предметы и лабораторные работы** — учебные материалы организованы по дисциплинам.
- 🔎 **Поиск** — помогает быстрее находить нужные материалы.
- 🏷️ **Фильтрация по тегам** — позволяет отбирать работы по указанным категориям.
- 📊 **Прогресс по предметам** — помогает отслеживать выполнение лабораторных работ.
- 🧪 **Страница лабораторной работы** — предоставляет доступ к связанным с ней материалам и файлам.
- 🚀 **Главный проект** — отдельный блок для представления основного проекта.
- 👤 **Контакты** — информация для связи с автором.
- 🌙 **Тёмная фиолетовая тема** — единый визуальный стиль интерфейса.

Предметы и лабораторные работы автоматически отображаются на сайте на основе данных из `data/subjects.json`. Благодаря этому добавление новых материалов не требует вручную создавать отдельную страницу для каждого предмета.

## 🛠️ Технологии

В проекте используются:

- **HTML5** — структура страниц.
- **CSS3** — оформление, адаптация интерфейса и визуальный стиль.
- **JavaScript (ES Modules)** — логика приложения, обработка данных и динамическое отображение содержимого.
- **JSON** — хранение информации о предметах и лабораторных работах.
- **Git и GitHub** — контроль версий и хранение исходного кода.
- **GitHub Pages** — публикация сайта в интернете.

Проект реализован на чистых HTML, CSS и JavaScript, без использования JavaScript-фреймворков.

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

Основные каталоги и файлы организованы следующим образом:

```text
WorkSpace/
├── index.html
├── data/
│   ├── subjects.json
│   └── labs/
│       └── <subjectId>/
│           └── lab-XX/
├── css/
│   └── ...
├── js/
│   └── ...
└── README.md
```

**Назначение основных элементов:**

- `index.html` — главная HTML-страница приложения.
- `data/subjects.json` — описание предметов и связанных с ними лабораторных работ.
- `data/labs/` — каталог с материалами лабораторных работ.
- `css/` — стили оформления сайта.
- `js/` — JavaScript-модули, отвечающие за работу интерфейса и обработку данных.
- `README.md` — описание проекта и инструкция по работе с ним.

> Структура показана в сокращённом виде. Многоточия обозначают дополнительные файлы и модули, которые могут присутствовать в проекте.

## 🚀 Как запустить локально

Для работы с проектом понадобятся Git и современный браузер. Для редактирования исходного кода можно использовать Visual Studio Code.

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

Открой терминал и выполни:

```bash
git clone https://github.com/AmagaiRei/WorkSpace.git
```

### 2. Перейди в каталог проекта

```bash
cd WorkSpace
```

### 3. Открой проект в редакторе

Если используется Visual Studio Code:

```bash
code .
```

### 4. Запусти сайт

Открой проект через локальный сервер, например с помощью расширения **Live Server** в Visual Studio Code.

Запуск через локальный сервер предпочтителен, поскольку проект использует модульный JavaScript и загружает данные из JSON-файлов.

После запуска открой адрес, который покажет Live Server, в браузере.

## 🧪 Как добавлять новые лабораторные работы

Новые лабораторные добавляются через каталог с данными и файл `data/subjects.json`.

### Шаг 1. Найди нужный предмет

Определи идентификатор предмета — `subjectId`. Он используется для организации файлов лабораторных.

### Шаг 2. Создай каталог лабораторной

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

```text
data/labs/<subjectId>/lab-XX/
```

Например:

```text
data/labs/
└── programming/
    └── lab-01/
        ├── report.pdf
        ├── project.zip
        ├── src/
        └── screenshots/
```

В примере `programming` — идентификатор предмета, а `lab-01` — каталог первой лабораторной работы. Это пример организации файлов, а не обязательный перечень файлов для каждой работы.

В зависимости от конкретного задания лабораторная может содержать:

- 📄 **Отчёт** — например, `report.pdf` или `report.docx`.
- 📦 **Архив проекта** — например, `project.zip`.
- 💻 **Исходный код** — отдельные файлы или каталог с программой.
- 🖼️ **Скриншоты** — изображения результатов выполнения работы.

Необязательно добавлять все перечисленные материалы: состав зависит от содержания лабораторной.

### Шаг 3. Добавь информацию в `subjects.json`

В файле `data/subjects.json` необходимо описать новую лабораторную и связать её с соответствующим предметом.

После обновления данных сайт автоматически отображает предметы и лабораторные работы в интерфейсе.

При добавлении новой записи важно соблюдать существующую структуру JSON и использовать поля, предусмотренные текущей реализацией проекта.

### Шаг 4. Проверь результат

После добавления материалов:

1. Убедись, что JSON-файл содержит корректный синтаксис.
2. Проверь пути к отчётам, архивам и другим файлам.
3. Запусти сайт локально.
4. Убедись, что лабораторная отображается и её материалы открываются.
5. Проверь поиск, фильтры и прогресс по предмету.

### Шаг 5. Опубликуй изменения

Если всё работает корректно, сохрани изменения в Git и отправь их в репозиторий:

```bash
git add .
git commit -m "Add laboratory work"
git push
```

После публикации изменений GitHub Pages обновит сайт в соответствии с настройками развёртывания репозитория.

## 🗂️ Структура данных `subjects.json`

Файл `data/subjects.json` — основной источник данных для отображения учебных материалов.

В нём хранится информация о предметах и связанных с ними лабораторных работах. JavaScript использует эти данные, чтобы формировать содержимое страниц и отображать доступные материалы.

Основные задачи файла:

- определять список предметов;
- связывать лабораторные работы с соответствующими предметами;
- предоставлять данные, необходимые для отображения названий, описаний, тегов и другой информации, предусмотренной структурой проекта;
- обеспечивать автоматическое обновление отображаемого содержимого после изменения данных.

Пример условной структуры JSON:

```json
{
   "subjects": [
      {
         "id": "programming",
         "name": "Программирование",
         "labs": [
            {
               "id": "lab-01",
               "title": "Лабораторная работа № 1",
               "tags": []
            }
         ]
      }
   ]
}
```

Это **иллюстративный пример**, а не подтверждённая схема текущего файла. Перед добавлением записей необходимо сверяться с реальным содержимым `data/subjects.json`, поскольку приложение ожидает определённые названия полей и формат данных.

Рекомендуется придерживаться нескольких правил:

- сохранять уникальные идентификаторы предметов и лабораторных работ;
- соблюдать корректный синтаксис JSON;
- проверять пути к файлам;
- не менять структуру существующих записей без соответствующего обновления JavaScript-модулей.

## 🚀 Главный проект

В WorkSpace предусмотрен отдельный блок для главного проекта автора.

Он предназначен для представления проекта, который занимает особое место среди учебных и практических работ.

**Подробнее:** [открыть WorkSpace](https://amagairei.github.io/WorkSpace/).

> TODO: добавить название главного проекта, краткое описание его назначения и ссылку на отдельный репозиторий, если он существует.

## 📬 Контакты

Связаться с автором или посмотреть другие проекты можно через следующие ресурсы:

- **GitHub:** [AmagaiRei](https://github.com/AmagaiRei)
- **Репозиторий WorkSpace:** [AmagaiRei/WorkSpace](https://github.com/AmagaiRei/WorkSpace)
- **Сайт:** [amagairei.github.io/WorkSpace](https://amagairei.github.io/WorkSpace/)

TODO: добавить дополнительные способы связи, если потребуется.

## 🗺️ Планы развития

WorkSpace можно постепенно развивать, улучшая организацию материалов и удобство работы с ними.

Возможные направления развития:

- [ ] 📱 Улучшение адаптации интерфейса для мобильных устройств.
- [ ] 🎨 Дальнейшая проработка визуального оформления карточек и страниц лабораторных.
- [ ] 📊 Улучшение отображения прогресса по предметам.
- [ ] 🔎 Развитие поиска и фильтрации учебных материалов.
- [ ] 📚 Упрощение добавления новых лабораторных работ и связанных файлов.
- [ ] 🧭 Улучшение навигации по предметам и учебным материалам.

Этот список отражает возможные направления дальнейшей работы, а не гарантированный план реализации.

## 👨‍💻 Автор

**Руслан Мородецкий (雨AmagaiRei雨)**

WorkSpace — личный проект, созданный для организации учебных заданий, лабораторных и практических работ.

💜 Проект развивается вместе с учебным процессом: новые работы, идеи и улучшения постепенно становятся частью единого пространства.Все происходит динамично и с автоматизацией. 💜

## 🛠️ Админ-панель: загрузка лабораторных из браузера

На главной странице нажми `Ctrl + Alt + A`, чтобы открыть панель публикации. Повторное нажатие той же комбинации закрывает её. Если браузер перехватывает сочетание, попробуй `Ctrl + Shift + A`.

Панель публикует новые лабораторные работы прямо в GitHub, обновляя `data/subjects.json` и загружая выбранные файлы в `data/labs/`.

1. Открой сайт по HTTPS (например, через GitHub Pages) или через локальный сервер. Не открывай `index.html` напрямую через `file://`.
2. Создай GitHub fine-grained personal access token только для репозитория `AmagaiRei/WorkSpace` с разрешением `Contents: Read and write`.
3. На главной странице нажми `Ctrl + Alt + A`, вставь токен и придумай парольную фразу длиной не менее 8 символов.
4. Нажми «Проверить и сохранить». Токен хранится в браузере в зашифрованном виде; после перезагрузки вкладки его потребуется разблокировать парольной фразой.
5. Заполни предмет, номер, название, описание, дату, статус и теги. При необходимости добавь отчёт, ZIP-архив проекта, исходный код/папку и скриншоты.
6. Нажми «Опубликовать в GitHub» и дождись ссылки на созданный коммит. После публикации обнови сайт, когда GitHub Pages завершит деплой.

Ограничения панели: до 25 МБ на отдельный файл и до 60 МБ на все файлы одной лабораторной. Не вставляй токен в общедоступный компьютер и не отправляй его другим людям.