Об этом проекте

## Обзор Это официальный лендинг мероприятия «Саппоро Сугой AI-мацури», запланированного на 15 февраля 2026 года. Статический сайт построен только на HTML, CSS и JavaScript и не зависит от инструментов сборки или фреймворков. ## Особенности дизайна - Анимация частиц в виде пламени, градиенты и фирменная цветовая палитра - Современная тёмная тема - Адаптивный дизайн для мобильных устройств, планшетов и настольных компьютеров - Интерактивные элементы, такие как анимации прокрутки и эффект параллакса Цветовая палитра определена в CSS-переменных (`:root`). Цвета можно настроить, изменив значения `--flame-red`, `--flame-orange`, `--flame-yellow`, `--flame-bright`, `--dark-bg`, `--dark-surface`, `--dark-elevated` и другие. ## Структура контента Представлены три программы: 1. AI-бизнес-конкурс — презентация бизнес-идей горожанами 2. AI-фестиваль искусств — живое шоу искусства, музыки и видео, создаваемых вместе с AI 3. AI-выставка и демонстрация — экспозиция AI-работ на выставочных стендах и возможность их опробовать Отдельным разделом представлен бесплатный сайт электронного обучения «Сугой AI-додзё», который даёт базовые знания для участия в этих программах. На него ведёт внешняя ссылка на dojo.sugoiai.org. Также предусмотрены места для ссылки на краудфандинг и пригласительной ссылки в Discord. ## Структура файлов - `index.html` — основная страница лендинга - `style.css` — таблица стилей - `script.js` — анимации и интерактивность - `requirements.md` — определение требований - `todo.md` — история работ и чек-лист - `README.md` — описание ## Использование Откройте `index.html` напрямую в браузере или запустите локальный сервер, например `python3 -m http.server 8000` из Python 3 либо `npx http-server`. Поскольку сайт статический, его можно без изменений развернуть на Netlify (перетаскиванием файлов), Vercel (через интеграцию с Git-репозиторием), GitHub Pages, Firebase Hosting и других подобных платформах. ## Настройка - Тексты редактируются в `index.html` - Цвета и отступы настраиваются с помощью CSS-переменных в `style.css` - Тайминг анимаций прокрутки, сила эффекта параллакса и эффекты при наведении настраиваются в `script.js` В настоящее время изображения являются заглушками. Описана процедура добавления файлов в папку `images/` и замены элементов `.image-placeholder` на теги img. ## Реализация для производительности Упомянуты компоновка с помощью CSS Grid и Flexbox, отложенный запуск анимаций через Intersection Observer, обработка прокрутки через requestAnimationFrame и аппаратное ускорение с использованием CSS transforms. ## Чек-лист перед развёртыванием Замена пригласительной ссылки в Discord на реальный URL, замена заглушек изображений, настройка OGP-изображения и фавикона, настройка веб-аналитики, проверка работоспособности всех ссылок и проверка отображения при различных ширинах экрана. ## Организационная информация Организатор — объединение «Саппоро Сугой AI». В качестве контакта для связи указаны учётная запись X (Twitter) @ykishimotoy и хэштег #さっぽろすごいAIまつり.