Интерактивная инструкция
Все элементы — точные копии сайта. Кликай, тапай и пробуй, чтобы понять, как всё работает.
В левом верхнем углу сайта есть круглая кнопка с тремя горизонтальными полосками. Это бургер-меню. Нажми на неё — она превратится в крестик ✕, а слева выедет панель.
На телефоне то же самое, только меню занимает 92% ширины экрана.
Нажми на кнопку — она превратится в крестик
Внутри меню три группы: Список треков, Список аниме, Избранное.
Нажми на заголовок любой группы — она раскроется с анимацией. Иконка-стрелочка повернётся вправо.
Нажми на заголовок «Список треков»
В каждой открытой группе есть поле поиска. Начни печатать название или исполнителя — список мгновенно отфильтруется.
Поиск работает без учёта регистра и ищет по всем буквам.
Совет: меню запоминает последнюю открытую группу — при следующем открытии она уже будет раскрыта.
Каждый трек в списке — это карточка из четырёх частей:
• Обложка (48×48) — загружается автоматически из iTunes.
• Название и исполнитель — если не влезает, обрезается с многоточием.
• Кнопка избранного — добавить трек в избранное.
• Кнопка воспроизведения — запустить трек.
Нажми кнопку закладки — добавится в избранное. Нажми кнопку play — начнётся «воспроизведение» с бегущей полосой.
1. Кнопка меняет иконку с play на паузу.
2. Снизу трека бежит красная полоса прогресса.
3. Сверху страницы появляется мини-плашка с управлением.
4. Когда трек заканчивается — автоматически включается следующий. Если у трека нет источника, он пропускается.
Это плавающая панель, которая появляется при воспроизведении. Она остаётся, даже когда меню закрыто — так можно листать сайт и слушать.
Что есть на плашке: обложка и название, кнопка избранного, предыдущий трек, пауза/воспроизведение, следующий трек, закрыть.
Нажми центральную кнопку — плашка начнёт «играть», полоса прогресса побежит снизу.
Продолжает играть: даже если закроешь боковое меню, трек не остановится. Он остановится только если нажать паузу или закрыть.
Таймкод — это метка времени внутри большого видео. Например, 00:03 — это 3 секунды от начала. Каждый таймкод — отдельная «глава» с названием и музыкой.
У «Евангелиона» 10 глав. Например:
• 00:03 — Дилемма Дикобразов (Sufjan Stevens)
• 02:11 — Отец (Weezer - Undone)
• 03:48 — По ту сторону сердца (TileKid)
И так далее — до 34:23 — Дело Икари Синдзи.
Активная глава подсвечивается красной полоской слева
Есть три способа переключить главу:
1. Клик по главе в списке — видео перемотается на её время.
2. Кнопки вперёд/назад под видео — на главу вперёд/назад.
3. Полоса прогресса — можно перетащить в любое место видео.
В правом нижнем углу панели управления есть кнопка со стрелками в угол. Она превращает большой плеер в маленькое плавающее окно — о нём следующий раздел.
Это компактное окно 180×120 пикселей на ПК и 150×100 на телефоне. По размеру — как «картинка в картинке» в мобильных приложениях.
Внутри три части:
• Хедер — название аниме, кнопки «развернуть» и «закрыть».
• Тело — само видео и полоска с текущей главой внизу.
• Контролы — все кнопки графические (SVG-иконки).
Нажми центральную кнопку — иконка сменится с play на паузу (графическую, SVG). Реальный размер — 180×120 px.
Мини-плеер можно двигать по экрану — хватай за верхнюю полоску (хедер) и тащи. Он не блокирует сайт: пока играет видео, можно спокойно читать цитаты или листать новинки.
На ПК — мышкой, на телефоне — пальцем.
Есть три способа:
1. Кнопки на панели управления — стандартное управление (графические иконки).
2. Свайп влево/вправо по нижней панели — следующая/предыдущая глава.
3. Скролл колесом на ПК по телу плеера — тоже переключает главы.
Свайп влево — следующая глава. Свайп вправо — предыдущая.
Нажми кнопку «развернуть» в хедере мини-плеера — он вернётся в полноэкранный режим с того же момента видео. Ничего не потеряется: ни позиция, ни текущая глава.
Параллельный просмотр: пока мини-плеер играет, можно спокойно листать сайт. Плеер не закрывается при скролле и переключении разделов.
Это визуальный эффект в стиле Sandevistan из Cyberpunk 2077. Когда тащишь мини-плеер, за ним тянутся 5 цветных копий — как будто время замедляется.
Копии не рабочие — они не воспроизводят видео и не реагируют на клики. Это чисто визуальный эффект.
Смотри, как за плеером тянутся 5 цветных копий — плотно, почти вплотную друг к другу
1. Ты начинаешь тащить мини-плеер.
2. Каждые 18 пикселей движения создаётся новая копия.
3. Копия окрашивается в свой цвет (5 разных оттенков красного).
4. Копия плавно исчезает за 0.5 секунды.
5. Всего копий — не больше 5 одновременно. Когда создаётся 6-я — самая старая удаляется.
6. Как только отпускаешь — все копии убираются.
Копии отстают слабо — идут плотной цепочкой, почти вплотную за самим плеером.
У каждого трека и аниме есть кнопка закладки. Один клик — элемент добавлен. Иконка закрашивается красным и появляется счётчик в меню.
Открой меню → Избранное → нажми на любой элемент. Произойдёт три вещи:
1. Меню само раскроет нужную группу (Треки или Аниме).
2. Список прокрутится к этому элементу.
3. Элемент подсветится красной вспышкой на 1.8 секунды.
Нажми на элемент — увидишь красную вспышку, как при переходе
Есть два способа:
• В меню избранного — нажми ✕ справа от элемента.
• В списке треков или аниме — нажми закладку ещё раз, она станет пустой.
Локально и безопасно: избранное хранится в твоём браузере (localStorage) и никуда не отправляется. Очистишь данные браузера — избранное пропадёт.
Блок в верхней части сайта — коллекция цитат из аниме. Каждая цитата имеет текст, автора и название аниме.
Индекс последней просмотренной цитаты сохраняется в браузере — при следующем открытии сайта ты увидишь ту же цитату.
• Скопировать — цитата + автор + ссылка на сайт отправляются в буфер обмена.
• Поделиться — открывается системное меню (только на телефонах и некоторых ПК).
• Другая — показать следующую цитату с анимацией смены.
«Жизнь не даёт вам людей, которых вы хотите. Она даёт вам людей, в которых вы нуждаетесь.»— Эрен Йегер, «Атака титанов»
Нажми «Другая» — цитата сменится с плавной анимацией
В правом верхнем углу две круглые кнопки:
• RU/EN — переключение языка. Все надписи меняются на лету.
• Луна / Солнце — переключение тёмной и светлой темы. Иконка плавно поворачивается.
Горячая клавиша темы: T (если ты не в поле ввода).
Нажми RU/EN — поменяется текст. Нажми луну — сменится иконка.
Кнопка ведёт в Telegram @saitenlymanager с готовым шаблоном сообщения. Можно предложить цитату для сайта или обсудить рекламу.
Кнопка ведёт на donationalerts.com/r/youtubesaitenly. Спасибо за поддержку.
Наведи мышку — увидишь бегущий блик по кнопке
В правом нижнем углу есть плавающая круглая кнопка. Её поведение меняется в зависимости от положения:
• Вверху страницы — ведёт вниз.
• Внизу и в середине — ведёт вверх.
Горячая клавиша: G.
Это текстовое поле для личных мыслей. Оно работает так:
1. Ты пишешь любые мысли.
2. Нажимаешь «Отпустить».
3. Текст растворяется (эффект размытия), потом удаляется безвозвратно.
4. Вместо него появляется поддерживающая фраза из коллекции.
Важно: текст никуда не отправляется, живёт только в оперативной памяти вкладки. При закрытии страницы он исчезает.
Горячие клавиши: T — сменить тему, G — вверх/вниз по странице. Они не работают, когда ты пишешь в текстовом поле.