Як працює каталог

Що це за каталог

Демо-альбом DEPO збирає всі дизайн-сторінки, які ми пробували для DEPO, — головні сторінки, редакційні макети, 3D-сцени, цілі сайти-«колоди» — по одному посту на кожну. Пост показує повний скриншот сторінки, промпт, з якого її зробили, шрифти й кольори, код, на якому вона побудована, і все, що запозичили деінде. Кнопка Open the demo відкриває живу сторінку в новій вкладці.

Навіщо він

• Порівнювати напрями поруч, а не шукати по папках: кожне демо, його ідея й вигляд — в одному місці.
• Зберігати знання: промпт, бібліотеки й рішення лежать поруч зі сторінкою, тож добру ідею можна підхопити й через кілька місяців.
• Вирішувати разом: кожен може поставити демо оцінку від 1 до 10 і залишити коментар.
• Приміряти дизайн-мови на справжній розмітці: сам каталог можна «вдягнути» у стиль будь-якого демо (нижче).

Як користуватися каталогом

• Категорії вгорі фільтрують список; Per page задає, скільки постів на сторінці (?view=5, ?view=20 …).
• Пост може бути в кількох категоріях (Background study — у Cinematic і UI kits); тоді на картці видно всі його категорії.
• Один фон для багатьох демо: /bg/ — це дослідження фону з відкритими налаштуваннями. Виберіть пресет або налаштуйте його й натисніть Use for all demos: усі демо із зеленим фоном DEPO (демо Connect, demo1–4) почнуть малювати його. Список під кнопкою показує, які демо його беруть; зніміть позначку, щоб повернути демо власний фон. Демо, що самі редагують свій фон (demo20, demo30), не змінюються ніколи.
• Read the post відкриває одне демо: скриншот (клікніть, щоб побачити всю сторінку), опис, оцінку й коментарі.
• Оцінка: виберіть число від 1 до 10 і натисніть Rate. Один голос від людини на демо, і він остаточний; браузер пам'ятає його рік (потім можна проголосувати знову).
• Коментарі: без реєстрації — лише ім'я й текст. Ім'я запам'ятовується на цьому пристрої й підставляється наступного разу.
• Теги «Для якого сайту»: у пості скажіть, якому сайту пасує цей дизайн — модний журнал, портфоліо фотографа, модельна агенція … Тег може складатися з кількох слів. Клікніть тег, що вже є, щоб погодитися (ще раз — щоб забрати), або впишіть свій. На головній показано всі теги з кількістю демо; клікніть тег, щоб побачити лише ці демо.
• Акаунти: Sign up у верхньому рядку — безкоштовний акаунт: ваші коментарі тоді позначені «signed in», а ім'я вводити не треба. Your account — ім'я, пароль і як для вас відкриваються коментарі (спершу старі / нові / найкращі, лише від зареєстрованих).
• Оцінка коментарів: ▲ / ▼ під коментарем — корисний чи ні (ще раз — забрати голос). Над коментарями: показати всіх, лише зареєстрованих або лише гостей, і порядок.
• MCP-сервер: автори (creator) і глядачі (viewer) можуть під'єднати свого ШІ-агента до альбому — він читає всі демо та їхні правила, а агент автора може надсилати нові демо, які публікують адміни. Як: довідка про MCP.

Приміряння стилів

У цієї сторінки один HTML і багато таблиць стилів. Кожне демо має стиль каталогу, написаний його дизайн-мовою — ті самі шрифти, кольори й характерні деталі, — тож увесь каталог можна побачити «ніби це те демо». Більше нічого не змінюється: ті самі пости, посилання й форми.

• Виберіть стиль у панелі стилів вгорі (default, demo1 … demo19 і стилі, які завантажили люди, з назвою u-…).
• Там показано адресу поточного вигляду: натисніть Copy і надішліть її — хто відкриє, побачить каталог у цьому стилі. В адресі це ?style=demo7 (або просто ?style=7).
• Стиль лишається з вами, поки ви ходите каталогом (категорії, сторінки, пости).

Як складається стиль

Вигляд складається з основної таблиці стилів і доповнень для блоків, що з'явилися в каталозі пізніше:

Сторінка підключає спершу типові доповнення (_rate.css, _tags.css, _tools.css — нейтральні, вони беруть кольори й шрифти того, що довкола), потім основний стиль, потім власні доповнення стилю, якщо вони є. Тож усе, що ви напишете у своєму стилі, перемагає типові правила, а власне доповнення стилю повністю замінює типове.

Зробіть свій стиль

1. Почніть зі стилю, що подобається. Виберіть його в панелі стилів і натисніть Download this style — отримаєте його основну таблицю стилів. Посилання поруч (+ demo7_rate.css …) — його доповнення; відкрийте й їх, якщо хочете, щоб оцінка й коментарі виглядали так само.
2. Редагуйте файл у будь-якому текстовому редакторі. Зберігайте назви класів (хуки, список нижче) — саме їх сторінка дає стилізувати. Міняйте все інше: компонування, шрифти, кольори, відступи, декор. Порожні елементи .deco--1 … .deco--3 — для орнаментів.
3. Хочете оцінку, теги й коментарі у своєму вигляді? Вставте правила з доповнення в кінець свого файлу й змініть їх: ваш файл підключається після типових, тож ваші правила перемагають.
4. Завантажте: панель стилів → Upload your own style → назва (малі латинські літери, цифри, дефіси) і ваш файл .css. Сторінка одразу перемкнеться на нього; тепер він у списку як u-вашаназва для всіх.
5. Поділіться: натисніть Copy у панелі стилів і надішліть адресу. Повторне завантаження під тією самою назвою замінює попередню версію.

Поради

• Шрифти: поставте @import url("https://fonts.googleapis.com/css2?family=…"); на самий початок.
• Зображення: беріть власні картинки альбому, наприклад url("/_img/photos/photo-07.jpg") (обкладинки журналів) або /_img/site/first-page/… (портрети).
• Перевірте і список, і пост, на широкому екрані й на телефоні (сторінка не має прокручуватися вбік), і пройдіться клавішею Tab — фокус має бути видно.
• Обмеження: один файл, звичайний CSS, до 300 КБ. Без JavaScript — решту робить власний скрипт сторінки.

Правила доброго стилю

• Власна ідея, а не перефарбування: змінюйте композицію списку (сітка, одна колонка, розвороти, рядки покажчика, стіна …), а не лише кольори.
• Обидва види: список і пост, разом з описом (заголовки, таблиці, цитати, код), оцінкою, коментарями, вікном скриншота й повідомленнями «порожньо / помилка».
• Зручність: читабельний контраст, видимий фокус клавіатури, посилання схожі на посилання, адреса стилю читабельна, а Copy легко знайти; працює від 360 до 1920 px завширшки.
• Спокійний рух: якщо щось рухається, поважайте налаштування системи «зменшити рух».

Хуки класів — довідник

Кожен елемент цієї сторінки має один із цих класів; ваш стиль може використати їх усі.

The full-page screenshot (.post__zoom img) can be very tall: clip it (max-height + overflow: hidden) and let the dialog show the whole image.