Geometry

Небольшой статический сайт с интерактивными пошаговыми построениями геометрических фигур для учеников.

Сейчас в проекте есть пять учебных страниц:

• compass-theory/ - теория базовых построений циркулем и линейкой
• triangle-presentation/ - построение правильного треугольника
• hexagon-presentation/ - построение правильного шестиугольника
• pentagon-presentation/ - построение правильного пятиугольника
• egg-presentation/ - построение контура яйца из дуг

На корневой странице index.html находится главная навигация по этим построениям.

Что есть на сайте

• главная страница со всеми доступными построениями
• теория базовых построений циркулем и линейкой
• построение правильного треугольника
• построение правильного шестиугольника
• построение правильного пятиугольника
• построение контура яйца

Каждая модель показывает чертеж по шагам: можно листать этапы вперед и назад, открывать нужный шаг из списка и пользоваться сайтом с телефона.

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

geometry/
├── index.html
├── site.css
├── presentation.css
├── README.md
├── DEPLOYMENT.md
├── compass-theory/
│   ├── index.html
│   └── script.js
├── egg-presentation/
│   ├── index.html
│   └── script.js
├── hexagon-presentation/
│   ├── index.html
│   └── script.js
├── nginx/
│   └── geometry.oipav.ru.conf
├── pentagon-presentation/
│   ├── index.html
│   └── script.js
└── triangle-presentation/
    ├── index.html
    └── script.js

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

Проект статический, поэтому достаточно любого простого HTTP-сервера.

Пример с Python:

cd /Users/evilfaust/Documents/APP/geometry
python3 -m http.server 4173

После этого сайт будет доступен по адресу:

http://127.0.0.1:4173

Что уже сделано по интерфейсу

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

Технические особенности

• проект не требует сборщика и backend-части
• каждая страница работает как самостоятельный HTML + JS интерактив
• логотип проекта хранится в корне репозитория в файле logo.png
• стили разделены на:
  • site.css для общей оболочки сайта и главной страницы
  • presentation.css для страниц с пошаговыми построениями

Публикация

Инструкция по выкладке на VPS и настройке домена находится в файле DEPLOYMENT.md.