Photo Director

Summary

A working copy of the guest home /index2, made to choose its photography on the page itself. An album admin uploads photos, selects a place and tries photos in it, seeing each at once in the real design and motion. Photos can be moved and zoomed in their frames. A second tab tunes all 126 settings of the page's JS (logo opening, lens, transitions, every block), with a replay button. A template keeps photos, positions and settings under a name with its own link; saving publishes one state to visitors. A plain-text description lists every difference from the source for the developer who will build it. All header and footer links lead to stub pages, so the page transition can be judged too.

Prompt

The brief this page was built from.

Make a demo from the DEPO guest home /index2, including the opening with the logo eye. Copy its
markup, CSS, JS, fonts and images into the demo; nothing may load from the site. Every header and
footer link opens a stub page through the site's client-side transition, with real URLs and no
full reload.

Add an editor over the home page for album super admins and admins only, using the album's
accounts. Upload photos: they appear in the list at once. Click a place on the page, or choose it
from a list of all places, and pick a photo: it replaces the picture at once, so variants can be
compared without a reload. Undo one step, cancel everything, or return a place to its original.
Save the layout on the server: it survives a reload and every visitor sees it.

Uploads: images only, checked by content, re-encoded, size limited, no SVG, nothing executes in
the upload folder.

Each place also takes a position: horizontal, vertical (object-position), zoom, by sliders or by
dragging the photo. Add a settings tab: every constant of the page's JS (logo opening, lens,
transitions, each block) as a slider, switch or choice with a live result and a replay of the
opening. Add templates as in demo20's presets: a named state of photos, positions and settings,
opened by anyone at /demo51/?tpl=<name> without the panel; opening one and saving makes it the main
page. Add a read-only description for a developer at /demo51/spec: file, constant, old and new value,
photos and CSS, plus a JSON download of all settings. The editor's interface is in Russian.

Look

• Type: the page's own self-hosted fonts: DEPO, Schibsted Grotesk, Lato, Bricolage Grotesque, Instrument Serif, Archivo, Red Hat Display and Red Hat Text. The editor and stub pages use Schibsted Grotesk.
• Palette: as /index2: base #18171a, green light #53f57e, eye green #469a58, accent #ffb500. Editor panel #141614 at 96 % with #ffb500 for the main action and selection.
• Layout: the blocks of /index2 in its order: lens, aperture, call sheet, magazines, covers in space, FAQ, join ring, banner, home footer. The editor is a fixed panel on the right (⇄ moves it left, a sheet at the bottom on phones). Stub pages: label, one line, links.
• Motion: as /index2: logo eye opening, scroll-driven lens, aperture, wall scene, orbit, footer floor; transition side between pages (Web Animations), none for reduced motion. The header logo stays a live eye across pages.

Built with

Borrowed

From this project's site, front/public in /home/depo/depo.place, as of 2026-11-01. Changes to the copies:

• js/core/navigator.js, slots.js, transitions.js, page-api.js, head.js, background.js, config.js, assets.js: asset prefixes point at /demo51/.
• js/core/blocks.js: only the block loader; the page-builder part is left out.
• js/core/header.js: no members and no live search.
• js/pages/home2/lens.js, js/pages/home/aperture.js, roles.js, mags.js, wall.js, orbit.js, rig.js: tunable constants moved into const T = tune('<block>', {…}), values unchanged; the code reads T.NAME. lens.js also takes the hero's real proportions and object-position, and replays the opening on the event d51:replay.
• js/pages/home2.js: on the event d51:cfg all blocks stop and start again with the new settings.
• js/core/navigator.js, transitions.js, js/pages/home2/header-eye.js, js/home2-boot.js: read the settings (core/tune.js).
• js/pages/home/wall.js, floor.js: tell the editor which place a shown copy belongs to.
• css/*: font and image paths.
• Markup from the rendered /index2, guest state: links lead to /demo51/…; hero and banner alt texts are general, because the photo can change.

Config

config/demo51/nginx.conf: the front controller, POST /demo51/api.php with its limits (17 MB body), and /demo51/media/ serving WebP only, no PHP. On demo.dphub.net the same rules are in ops/nginx/depo-demo.conf of the site repository, which also closes ?edit and any non-GET under /demo51/ to everyone but admins. Data: public/_db/demo51/ (state.json: the saved photos, positions, settings; templates.json; photos.json; layout.json and logo.json from before the templates are read only until the first save) and public/demo51/media/ are visitor data: never delete or replace them; both are group-writable with setgid for php-fpm.

Notes

• Logo blinks are a list (blinks in the settings, BLINKS and blinkSteps() in js/pages/home2/eye.js): each has a pause, how far it closes, closing time, time held, how far it opens and opening time, with add, remove and a graph in the editor. Up to 12; the eye always ends fully open. Blink changes play at once and do not restart the blocks.
• The backing is #dl-l with its layers: lensAnim keeps it in the open shape instead of moving with the lids (its amber then shows above a closed eye), lensYellow hides the amber layer url(#dl-y), introGlow turns off the flash behind the eye in the opening.
• demo52 uses this demo's backend: GET /demo51/series and the series-* actions of api.php (lib/series.php), so it needs no nginx rule of its own.

Decisions:

• Access: the editor config is printed and edit.js is loaded only for superadmin and admin. api.php checks the role and the album CSRF token itself; nginx also checks the role.
• Sign-in: sign in on the album's login page first, then open /demo51/?edit, which opens the panel. On demo.dphub.net nginx answers 403 to ?edit without an admin session.
• One cover, two walls: a cover place covers the same number on both walls, its large version and the footer floor, so a cover stays one magazine's.
• The letters have their own place, separate from the banner, although both start with the same photo.
• Uploads: JPEG, PNG, WebP, AVIF, GIF (first frame); animated WebP is refused; up to 15 MB, 10000 px a side, 40 MP, at least 100 px. Each is decoded and written as new WebP files (240, 640, 1920 px wide, never enlarged), which also drops metadata. The file name becomes only a label.
• Placement: every place keeps its designed shape and crops with object-fit: cover; focus points stay as designed.
• One state: photos, positions and settings are saved together, and "Сохранить" publishes them. A template is the same state under a name; its link is public and read-only, like demo20's preset links.
• Settings: lib/fields.php is the one list; the editor builds its controls from it and the server keeps every saved value in its range. Only values that differ from /index2 are stored. Left out on purpose: media queries, observer margins, random seeds, eye shapes and spring curves, the map words' positions, and the background light (it has its own tuner, demo20).
• Applying a setting restarts all blocks after 280 ms (many read settings once at start); the scroll position stays, an opened role returns to its first state.
• Position: object-position for x and y, the scale property for zoom (it does not disturb the transforms the motion uses), with overflow: hidden on the frames (css/photo.css). Choosing another photo clears the position. The letters have none: use "BANNER_FOCUS_X". In the aperture the zoom also enlarges its circle, because the circle is a clip-path on the same picture.
• Description for a developer: /demo51/spec and ?tpl=<name>, plain text. The JSON download holds every setting with its file and constant, also unchanged ones.
• Two admins at once: the last save wins.
• No delete yet: the library cannot remove a photo from the page. Next to try: delete, a crop per place.
• Language: the editor is in Russian (owner, 2026-11-01); the page and stubs stay in English like /index2.