Depo Place Presentation

Summary

A working model of the DEPO site built from parts. The home page is eight screens, each a block taken from an earlier demo or made for this one. On top of it sits the live DEPO header of a signed-in member, with its user menu. It hides once it scrolls away and comes back as the pointer rises, as in demo6. The home footer has demo15's flying photo floor, a grey veil, demo5's huge DEPO letters and the footer text over them. The animated background (demo20's engine, preset "The-best2") runs under the whole page, the footer included. Every page in the header is rebuilt from the front templates as blocks too: Gallery, Connect, Locals, Depo Magazine, Awards, Album and Blog.

Nothing is hard-wired. Each block is a view, a stylesheet, a JS core, a settings file that lists every tunable value, and a Russian manual of those settings. ?edit opens a panel that edits all of it and saves the result as a named template (?tpl=<name>). Each save keeps a snapshot (&snap=<stamp>, the last 10 stay). The main template on disk can never be overwritten.

Prompt

The brief this page was built from.

Build "Depo Place Presentation" (folder depo0) in the DEPO demo album: the DEPO home page and every
page of the live site header, all assembled from blocks, with an in-page editor.

Home, top to bottom:
- the live dev0 header of a signed-in member, user menu included, with demo6's "peek" behaviour
  (scrolls away; the pointer near the top brings it back);
- screens 1–2 from demo12 (the lens hero, "Your role, in focus"), 3–4 from demo14 ("What DEPO is",
  "Twelve faces, one light"), 5 from demo15 ("Eight magazines, one wall"), 6 from demo17 ("Choose
  who you are");
- screen 7: an FAQ "Got any questions left?" — eight questions, "+" opens an answer, only one
  answer open at a time, a footnote under the list;
- screen 8: demo14's "Step onto the set." joined to the footer so that both take about one desktop
  screen;
- the home footer: no background of its own; demo15's flying photo floor over its whole height
  (no text), a grey veil rgba(24 23 26 / .1), demo5's huge DEPO letters, one more translucent
  layer, then the footer content, still readable. Other pages use the ordinary footer.
- demo20's animated background with preset "The-best2" under the whole body, footer included.
Every other section of those demos becomes a library block too.

Structure: index.php + blok.cfg (block order); .view/ (header, footer, footer_home, blok<n>.html);
js/ per block: <name>.js (core), <name>.cfg.js (every setting, even unused) and <name>.cfg.js.man
(the same with a comment on each setting); css/style.css + blok<n>.css + header / footer CSS + the
colour and font variable files. Each header page: <page>.php + <page>_blok.cfg + its own blocks
under <page>/.

?edit: a panel sliding in from the left over the page — reorder blocks, add library blocks, edit
the shared colours and fonts and each block's variables, every CSS / JS / settings file, and every
button on the page (as in the demo30 UI kit). Changes are saved as a named template that covers all
pages (?tpl=<name>); the main template can never be saved and its files and images never replaced.
Every save keeps a snapshot (last 10, ?tpl=<name>&snap=<stamp>, listed in the editor). Editing needs
an account: sign-up by invite link (login, any password, a one-year cookie), password reset by a CLI
script. An API and an MCP server as in demo30 / demo32 with a personal link per editor; they can
also create pages the current pages link to, and edit them.

Look

• Type: depo0's own parts (FAQ, footer letters) use Schibsted Grotesk 900 uppercase with tight tracking, and Lato for text. Each borrowed block keeps its source face: Archivo (demo12), Instrument Serif + Lato (demo14), Bricolage Grotesque (demo15), Red Hat Display / Text (demo17), Schibsted Grotesk (demo5). The header and footer keep the site faces (Lato, Lazurski, Poppins in fonts/). Every family is a variable in css/fonts.css.
• Palette: page ground #18171a under the green light of the background (#53f57e, soft-light); ink #f2f0ea, soft #b9b6ae, DEPO yellow #ffb500, green #469a58. Each source demo's palette (--h15-*, --k-*, --s-*, --h20-*, --g3-*) sits next to depo0's own --d0-* in css/colors.css, so one file recolours everything.
• Layout:
• Home: lens hero, aperture dial, studio statement, the faces track, the magazine wall, the orbit of roles.
• FAQ: a sticky heading on the left and a numbered list with hairline rules on the right.
• "Step onto the set": stretched so that it and the footer fill one screen.
• Home footer: five layers.
• The header pages follow their front templates (banner, filters, grids, rails, map, cards).
• Motion:
• Each block keeps its source motion (scroll-driven aperture, light rig, pinned track, wall, orbit).
• The FAQ opens with a grid-template-rows 0fr → 1fr transition, and the "+" turns into "−".
• The footer floor is a 3D plane (rotateX(58deg)) of 90 covers moving in a 120 s CSS loop. It pauses off screen.
• The header moves only with transform.
• The background is demo20's CSS keyframe engine.
• Every timing is a setting in the block's .cfg.js.

Built with

Borrowed

• Blocks: the sections of demo5, demo12, demo14, demo15 and demo17 (this album), split per section with their constants moved into settings files.
• Header markup: front/templates/partials/header.php (member mode, default layout and menu of SiteTemplateService). Footer: front/templates/partials/site_footer.php. Site CSS: the current front/public/css/.
• The "peek" header: demo6. The background engine: demo20 (js/background.js), preset "The-best2".
• Header pages: front/templates/gallery/, connect/, marketing/depo_magazine.php, marketing/awards_prague.php, album/home.php, marketing/blog_index.php, and js/pages/locals-map.js (from demo31).
• API / MCP shape: demo30 and demo32.

Config

config/depo0/nginx.conf: PHP runs only for the entry files at the top of /depo0/; lib/, .view/ and *.cfg are closed, and static files are served as they are. The vhost includes config/depo*/nginx.conf.

Data lives in public/_db/depo0/ (never served, not in git):

• depo0.sqlite: editors, invites and sessions;
• tpl/<name>/: templates;
• snap/<name>/<Y-m-d-His>/: snapshots.

Files are group-writable (umask 002) so the site (www-data) and the CLI can share them.

Notes

• Editors:
• The first invite comes from the command line: php demo/bin/depo0.php invite.
• After that, any editor makes invites in ?edit → Access.
• Password reset: php demo/bin/depo0.php reset <login> [<new password>] (a random one when omitted). It also logs that editor out everywhere.
• rekey <login> replaces a leaked API / MCP key.
• API: /depo0/api.php describes every operation. MCP: claude mcp add --transport http depo0 "https://album.dev0.dphub.net/depo0/mcp.php?key=<key>".
• Templates:
• A template is one set for all pages.
• A page added in a template (for example one the pages already link to: pricing-plans, contact-us, faq…) exists only in that template, at /depo0/page.php?p=<slug>&tpl=<name>.
• Edit mode:
• JS edits run after saving and a reload.
• CSS, colours, fonts, button styles and block order show at once.
• Unsaved changes survive a reload in the same tab.
• CSS overrides: depo0 loads the front's legacy globals.css and app.css on every page. The page blocks undo two of their rules locally: .btn { width: 140px } and * { color: #fff }.
• Changed content:
• Awards: the source deadline (30 Sep 2026) had passed, so the countdown runs to 30 Nov 2026.
• The FAQ answers are written for the course questions of the brief.
• Not done: the brief named one item to drop from screen 2 and something to delete in screen
• Those parts of the message did not arrive, so both screens are shown complete.
• Header, 2026-10-20:
• Home uses the guest header (header_guest): the site menu and Sign up / Log in instead of "We are in beta". Log in is DEPO UI kit #001 "glow"; Sign up is a grey pill with a dark-golden ray sweeping across it.
• The other pages keep the member header with its user menu.
• Choose per page with @header in <page>_blok.cfg, or in ?edit → Blocks.
• The header now waits hideAfterHome / hideAfter px before it leaves.
• Every distance and speed is in header.cfg.js, editable live in ?edit → Settings.
• Editor tabs:
• Settings: every .cfg.js as a form, with notes from .man.
• Background: demo20's controls and all of its presets (js/background.presets.js).
• Info: live scroll, header state, block in view and FPS, with the header's mouse zones drawn on the page.
• blok1: flyAway sends the slogan and the lead off to the right while they turn, finished before the picture opens fully. The template ram-help uses it.
• Pictures, 2026-10-22: ?edit → Images.
• Pick any picture of the page, in the list or by clicking it on the page, then edit it or upload a new photo.
• The photo editor is Filerobot. It always opens the original: the main picture (never changed) or the uploaded photo, kept as it came. Earlier edits come back as an adjustable design state.
• The result is a new WebP file that every page of the template shows. The last 3 versions can be brought back, and so can the main picture.
• Data lives in the template's images.json + img/u-*. Picture files are never overwritten, so snapshots share them as hard links.
• API / MCP: image_list, image_save (base64), image_restore.
• Only <img> pictures (src, srcset, inline url()); backgrounds set in block CSS are not swapped.
• Uploads up to 25 MB: config/depo0/php.ini via the nginx PHP_VALUE.