UI kit

Summary

A component kit for the DEPO site, built as pages of the album: Buttons (200, #001–#200), Button vault (220, #201–#420), Flat buttons (38, #501–#538), Button lab (263, #601–#863), Vault 500 (485, #1001–#1485), Ultimate 500 (477, #1501–#1977), Gallery 500 (500, #2001–#2500) — 2183 buttons — then Pagination & arrows (300), SVG icons (205), UTF-8 icons (3074), Top by votes, the shared Trash and Add buttons (import). Every piece sits in its own numbered cell (#001). The point is choosing: walk the kit, vote for what you like, tune it, take its code. The lead family is the DEPO background itself poured into a button — a soft green light drifting over the dark ground (.b--glow), the smooth green-to-grey gradient the owner pointed at.

The database. Every piece is a row in public/_db/demo30-kit.sqlite (api.php): page, kind, number, section and its settings — or, for raw pieces, its own HTML + CSS + JS as text, shown in a sandboxed iframe (the lab, imports, anything made elsewhere). The page scripts only describe how each kind is drawn and edited; adding pieces needs no code. The original 1214 pieces are the seed config/demo30/seed.json (php demo/bin/demo30-kit.php seed).

Votes and the top. The heart on a cell is one vote per visitor and piece (cookie kit30, a year; a visitor who clears it can vote again — accepted on purpose). Order: by votes sorts every section of a page; top.html lists the voted pieces of the whole kit, most voted first.

Every button of the owner's files. The three DeepSeek generator files and the lab file draw random buttons on every load; their own generator functions were run once with a fixed seed (mulberry32) — 500, 500, 500 and 150 buttons, exact repeats dropped — and every result went into the database as code, unchanged (config/demo30/seed-gen.json, pages gen25, gen15, gen10 and the lab's "Generator" section). Pieces of the kit's own seed draw in a shadow root (styles kept apart, light enough for 500 on a page); anything else made as code — imports, editor saves, a changed draft — draws in a sandboxed iframe.

Edit (?tune) works like demo20's tuner, but for each piece: press Edit (or open the page with ?tune), click a cell, and the panel shows every field of that piece — family, label, colours, radius, padding, border, font, weight, speed, idle animation, ground (pagers: accent, base, size, gap, pages, font; icons: style, colour, size, stroke). The pencil on a cell opens it directly. Pieces kept as code get a code-reading editor (js/code-editor.js): it finds every colour in their CSS values (hex, rgb/rgba, named), the corner radius, text size, padding, the duration of transitions and animations, the font and the labels (markup text and CSS content) and shows them as ordinary fields — changing one rewrites the code (alpha kept, selectors never touched); the HTML / CSS / JS stay editable underneath. Changes are a live draft; Save as new piece stores it as a new piece for everyone — numbered from #1001, in a "Made in the editor" section, marked "from #017". A piece in the database is never changed. ← / → walk through the pieces, Esc closes.

Shared trash: the bin on a cell sends the piece to one trash for every visitor: it disappears from its page for everyone and shows on trash.html, filed under its page, still working. The trash cannot be emptied — there is no "clear" anywhere — only ↺ Restore puts one piece back; right after binning a toast offers Undo.

Import: import.html gives a ready prompt (English / Russian, number and theme filled in) for any AI model, takes its JSON answer (paste or file) and adds the buttons to a page as new raw pieces. The format is the rule agent/rules/demo30-import.md.

API — only new pieces. POST /demo30/api.php with {"action": "add", "items": [...]} adds buttons (code), SVG icons and characters, up to 100 per call, and answers per item added (number) or duplicate (the number already in the kit, also when it is in the trash). Every button kept as code, every icon and every character has a content hash of a normal form in a unique index: buttons without comments, with their own class / keyframe names renumbered, quotes and spacing normalised; SVG cleaned to shapes and geometry (no scripts, links, ids, styles — the same cleaning makes it safe), attributes sorted, numbers rounded, shape order ignored; characters by NFC code points without variation selectors (❤ = ❤️). The import page and the CLI use the same check. GET /demo30/api.php with no page is the API described for people. Request of 2026-10-18, passed on by the "Демо страницы структура и nginx" session: «а зделай api для добавления новых кнопок. добавляй только уникальные... чтоб не прислали один и тот же svg кучу раз, или utf8, или саму кнопку».

MCP server. https://album.dev0.dphub.net/demo30/mcp.php — the kit for AI assistants, open to everyone, no keys (Streamable HTTP, JSON answers; claude mcp add --transport http depo-ui-kit https://album.dev0.dphub.net/demo30/mcp.php). Tools: kit_overview, list_pieces, get_piece, add_pieces (only new ones), edit_piece (always a new piece with the given settings, new code or replace: [{from, to}] on the code — the original never changes; only each kind's editable keys, listed by kit_overview / get_piece), trash_piece, restore_piece, vote_piece; prompt design_buttons. A caller is told apart by its address (one vote per piece, 300 new pieces a day). Request of 2026-10-18: «создай mcp сервер для добавления кнопок, svg, и управление в корзину поместить, отредактировать кнопку и сохранить (… не редактируем в базе, а создаём новую кнопку …) mcp сервер открытый для всех. ключи авторизации не нужны».

Copy: a click on a number copies the piece's HTML with its settings inline plus exactly the CSS it needs (its family's rules, @keyframes, @property), cut from the page's own stylesheets; a raw piece copies its own code. On the icon pages a click on the icon copies the SVG / the character.

Prompt

First request (pages 01–04):

@demo запусти на сервере claude code в этой ппапке, чтоб мы уаленно им могли управлять.

дать задание и он там делал сколько ему надо..

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

https://album.dev0.dphub.net/demo20/?tune вот по такому принцепу если можно уюет реактировать кажуй кнопку, навигацию... и прочее... и сделай еще страницу с сразными svg иконками которые могут нам поойти и utf8 иконки . разніх кнопок около 200 штук созай всевозможных, с разными офрмленяими, фантазиями, эффетами... тоесть в демке хочу страницу с кнопками (1), погинацией и стралочками разными.(2) , svg (3), utf8-ico (4).

пронумеру.ю кажую кнопку. было бы круто еще анимацию на кнопку насадить..

The owner attached a screenshot of the colour they mean: a dark ground that turns softly from a deep green on the left to the page grey on the right.

Translation: (start Claude Code on the server in this folder so we can drive it remotely — left for later). Make a demo with several pages of buttons, navigation arrows and different pagination variants that can be edited and saved in the browser. I am interested in a button with a smooth or flowing gradient, like the one in use — this smooth button colour. Like demo20's ?tune, but so that every button, the navigation and the rest can be edited. Also a page of SVG icons that could suit us, and UTF-8 icons. About 200 different buttons, every kind, with different looks, ideas and effects. So: buttons (1), pagination and arrows (2), SVG (3), UTF-8 icons (4). Number every button. An animation on the buttons would be great.

Second request (2026-10-18), with five files attached — deepseek_html_20261018_ed4025.html, deepseek_html_20261018_12eae3.html, deepseek_html_20261018_be1159.html, g2button.html, buttons_catalog.html:

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

тоесть создать отдельную корзину куда будут попаать все кнопки и их можно будет посмотреть в карзине как они работаают но в общем списке чтоб их не было...

и потом еще добавлю пару страниц с вариантами... и добавлю четь позже еще пару файлов

Translation: to the buttons you already made, add more pages of buttons, and make a trash for buttons, shared by everyone, which cannot be emptied — a separate trash where any button can go, where you can still see how it works, but it is no longer in the general list. Later I will add a couple of pages of variants and a few more files.

Third request (2026-10-18), with deepseek_html_20261018_5a9738.html ("Experimental Button Lab"):

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

а вобще ты очень круто сделал кнопки я в восторге.

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

Translation: add these to the buttons; add voting to every button, stored separately; a cookie that has voted is not accepted again (clearing it lets one vote again — not important); sorting by votes would be great, on all the earlier pages too. Or make an SQLite for the buttons, every button as code text, count votes there, mark deleted ones — easier to add new ones, code (and JS if needed) copyable; the UTF-8, navigation and the rest too, so less code needs rewriting. Editing never overwrites: every save in the editor creates a new button. Then: make a rule (and a link to it) for the format to import buttons into the database, so different models can generate buttons in it — a prompt to paste into them with the right format.

Look

• Type: Poppins (headings, buttons, pagers), Lato (text), Lazurski (magazine pager), the system mono for numbers and code — self-hosted in public/demo30/fonts/.
• Palette: page #18171a; DEPO green #53f57e / #469a58; number badges yellow #ffb500; cell lines rgb(255 255 255 / 0.08). Button variants rotate eight palettes: depo, moss, gold, dusk, ice, violet, aurora, mono.
• Layout: a sticky bar (logo, the four pages as tabs, Edit / Export / Import), a big head with the lead, a sticky jump bar (sections, only edited, Go to #), sections of numbered cells (auto-fill grid), the next / previous page as two large glow cards, a footer. On the icon pages a settings bar sets colour, size, stroke / font and style for the whole page (saved too).
• Motion: demo20's animated background (green spots fading in and out) behind everything; buttons animate on their own (drifting light, flowing and melting gradients, spinning rings, sheen, flicker, rings, scan lines, blobs, stripes) and on hover (fills, flips, rolls, tilt, magnet spotlight); one in four buttons has an idle animation (float, pulse, wobble, jello, tada, swing, rubber, glow …, 19 in all, selectable for every piece). Pagers glide (FLIP-moved indicators), roll numbers, fill autoplay dots and rings; icons spin, draw, ring and morph.

01 Buttons — 50 families × 4 variants

Every family reads the same custom properties, so any button can take any family in the editor: --c1 --c2 --c3 (colours), --fg (text), --r radius, --px --py padding, --bw border, --fs --fw --ff type, --sp speed (one cycle of the motion). Smooth colour motion uses CSS @property (typed --b-x, --b-ang, --b-ca …) so gradients really interpolate.

Button vault and flat buttons (from the owner's files)

• Vault (vault.html, #201–#420): the three DeepSeek files build 500 random buttons on every load from 25 (ed4025), 15 (12eae3, all also in the 25) and 10 (be1159) types — 28 different types in all. Each became a class .v--<type> reading the kit's custom properties, with 7 fixed variants from the files' own palette (13 colours) and labels, in four sections: colour & light, neon / cyber / retro, fills / frames / lines, solid / depth / glass. Then Trend six: the six buttons of g2button.html (neon glow, frosted glass with a click ripple, arcade key, liquid gradient with "Processing…", soft neumorphism, magnetic border), 4 variants each, their inline onmouseover / alert code turned into CSS states and a toast.
• Flat (flat.html, #501–#538): buttons_catalog.html has 500 cards but only 38 different buttons — each repeats about 13 times. These 38, grouped by background as in the file, each noting how many times / on which cards it appeared; every inline property (background, border, bottom edge, shadow, radius, padding, weight, style, spacing, case, the click / hover effect) is an editable field. Light ground by default, like the original page.

Button lab (lab.html, #601–#720)

The 20 types of the Experimental Button Lab file — 3D cube, unbox, peel, crystal, eye, elastic, levitate; hologram, radio, X-ray, portal, snake, confetti; magnetic letters, illusion, anaglyph, terminal, shatter; gooey (SVG filter), mercury — 6 fixed variants each from the file's palette and labels (the file draws random ones). Kept as code rows (its own CSS per button, the generator's text), each in a sandboxed iframe, edited as code: the pattern every imported button follows.

Pagination & arrows

300 pieces: the 60 below (#001–#060) and four more variants of each (#061–#300) — other palettes, sizes, radii, gaps, fonts (Poppins, Lato, Georgia, mono, Lazurski), grounds, speeds and page counts (config/demo30/seed-more.json). 30 paginations (#001–#030): boxes, pills, under, ink, flow, neon, glass, compact (first / last + ellipsis), roman, magazine, dots, dotsnum, timer (autoplay), fraction, mini, bar, progress, ring, jump (type a page), slider, load more, infinite scroll, stepper, tabs, vertical rail, A–Z, text newer / older, post cards, photo thumbnails, big arrows. 30 arrows and navigation pieces (#031–#060): circle, glow circle, square, long, chevron, labelled, joined, photo overlay carousel, timer-ring next, corner nav, back to top (ring = page scroll), scroll cue, swipe hint, keycaps (answer ← →), breadcrumbs, up / down, triangles, magnetic arrow, conic ring, "read more", d-pad, bounce cue, neon, glass over photo, text arrows, folded page corner, editorial counter, back link, dots with arrows, scrolling chips.

SVG icons, UTF-8 icons

UTF-8 now has 3074 glyphs: the 11 hand-picked sets and 19 whole Unicode blocks of symbols (all arrows, supplemental arrows, arrows B, symbols & arrows, geometric shapes, box drawing & blocks, dingbats, miscellaneous symbols, technical, enclosed numbers & letters, letterlike & number forms, mathematical operators, every currency sign, punctuation, and five emoji blocks). Long pages are built in slices and their sections use content-visibility: auto, so the first screen shows at once.

SVG: the 128 Lucide icons of the site sprite /_img/site/icons.svg (read live), 50 photo & community icons drawn for the kit on the same grid, 27 animated icons (spinners, dots, pulse, heartbeat, check / cross drawing, menu ↔ X and play ↔ pause toggles, bell, wifi, equalizer, upload / download, gear, aperture, battery, clock, hourglass, radar …). Styles: line, duo, grad, chip, ring, tile, glow. UTF-8: 11 sets — arrows, pointers & chevrons, shapes, stars, checks, hearts & hands, media / tools / keys, typography & maths, currency, music & symbols, emoji for DEPO; every glyph shows its code point and copies as the character, &#x…;, CSS content and JS escape.

Built with

Borrowed

• Lucide icons (ISC licence, https://lucide.dev, version 1.49) — the site sprite /_img/site/icons.svg shown as is; the "aperture" and "scissors" shapes of the own set follow Lucide's.
• The owner's files of 2026-10-18 (uploaded in the session, not kept in the repository): deepseek_html_20261018_ed4025.html, _12eae3.html, _be1159.html — the 28 button types, their palette and labels (rewritten from generated per-button CSS into .v--* classes with custom properties); g2button.html — the six trend buttons; buttons_catalog.html — the 38 flat buttons (their inline styles extracted into the seed); deepseek_html_20261018_5a9738.html — the 20 lab types (their generator's CSS, colours and labels, kept as code rows).
• demo20 (this album): js/background.js and js/settings.js, copied; the ?tune idea.
• Button and loader techniques are common CSS patterns (conic-gradient borders with a mask, @property gradients, neumorphism, clip-path cuts); written for this kit, no code copied.

Config

config/demo30/nginx.conf: exact location = /demo30/api.php and location = /demo30/mcp.php to the front php-fpm pool (the vhost otherwise refuses every PHP file but the catalog, so kit-db.php never runs from the web), request body up to 640 KB (imports). The database lives in public/_db/ (never served, not in git, kept by the live rsync); it must stay group-writable for php-fpm (chmod 664). First install: php demo/bin/demo30-kit.php seed on the live tree.

Numbers: buttons #001–#200, vault #201–#500, flat #501–#600, lab #601–#1000, Vault 500 #1001–#1500, Ultimate 500 #1501–#2000, Gallery 500 #2001–#2500; nav, svg and utf8 count from #001. Pieces saved in the editor and imports take the next number after the highest in the kit. A new page is one entry in PAGES (js/demo30.js and kit-db.php), its HTML (copy lab.html), and — for kind pieces — its script with KIT.kind(…, { page: '<id>' }); raw pieces need no script at all.

Notes

• Votes, the trash and saved pieces are shared; the page-wide colour / size bars of the icon pages are a per-browser view setting (localStorage).
• Raw pieces use no web font unless their CSS imports one (a hundred frames each loading Google Fonts made the lab page hang).
• Emoji are drawn by the visitor's system font; the dev0 headless Chrome has none, so the screenshot shows them as boxes.
• .b--glass, .ic--chip and the glass pager use backdrop-filter; color-mix() and @property need a 2023+ browser (Chrome 111, Safari 16.4, Firefox 128 for @property).
• The slug is demo30 because demo21–demo29 were being made at the same time in another session.