singular-particular-space/Images/GEMINI.md

GEMINI.md — Images Section Build Brief

Singular Particular Space — spaces.exopraxist.org

You are Gemini Flash, the front-end builder for Singular Particular Space. You are building the Images section. Sonnet (parent) will review your output before anything goes live.

---

Your task

Build 5 self-contained HTML files in the Images/ folder:

File	Purpose
Images/index.html	Hub — four collection cards, nav back to homepage
Images/wayback.html	WayBack gallery (2010–2014)
Images/nomad-soul.html	YourNomadSoul gallery (2015–2021)
Images/myster-wizzard.html	MysterWizzard gallery (2022–2025)
Images/exopraxist.html	Exopraxist gallery (2026–present)

All files: single self-contained HTML (inline CSS + JS). No npm, no React, no build tools. Use exactly the output filenames above — do not invent variants.

---

Asset architecture — two sources

Thumbnails (grid display) are committed to git and served from spaces.exopraxist.org:

Images/{collection}/thumbnails/{stem}.jpg   ← 360px wide, local

Full-resolution images are on FileBrowser at files.exopraxist.org — used for lightbox and download only.

FileBrowser API pattern

On page load, fetch the file list to know what exists and build lightbox data:

GET https://files.exopraxist.org/api/public/share/{token}

Returns JSON. The items array contains objects with: name, size, path, type. Only use items where type === "image" and isDir === false.

Full-res URL per file (lightbox + download):

https://files.exopraxist.org/api/public/dl/{token}?files=/{name}

Thumbnail src per file (grid display — local file):

thumbnails/{stem}.jpg

Where stem = the filename without extension (e.g. IMG_6121.JPG → thumbnails/IMG_6121.jpg). Strip extension with: name.replace(/\.[^.]+$/, '.jpg')

Show a loading state while fetching. If the API call fails, show a clear error message.

Collection tokens

Collection	Token	Years	Subtitle
WayBack	voxb2LeQ	2010–2014	From way back in the way back
YourNomadSoul	yNytp9Di	2015–2021	Scattered about the social internets
MysterWizzard	swAa4bTp	2022–2025	Time spent in the real world, learning about community
Exopraxist	97AGC2WQ	2026–present	Stepping up, stepping forth. Step by step we dance and we do

---

Gallery layout

• Thumbnail grid: 5 columns desktop / 3 columns mobile (CSS grid)
• Images fit column width — use width: 100%; height: auto (natural aspect ratios, no crop)
• Lazy-load images (loading="lazy")
• On thumbnail click: open lightbox

---

Lightbox

• Full-size image display (constrained to viewport)
• Download button: links to the api/public/dl/ URL for that image
• Previous / Next navigation buttons
• Close button — also close on Escape key and click-outside
• Keyboard: ← → for prev/next, Escape to close
• max-height: 90vh; overflow-y: auto on lightbox content — prevents mobile clip
• Use DOMContentLoaded to initialize lightbox logic — NOT window.onload

---

Site palette — use these exactly

--bg-void:       #04060b;
--bg-deep:       #050810;
--bg-warm:       #0d1320;
--fire-amber:    #e8943a;
--fire-coral:    #d4654a;
--neon-green:    #32dc8c;
--neon-teal:     #2ac4b3;
--deep-red:      #8b2020;
--blue-magenta:  #6b3fa0;
--orchid:        #c558d9;
--paradise:      #ff7f3f;
--toucan:        #ffcf40;
--fairy-pink:    #f472b6;
--waterfall:     #3fbfaf;
--phosphor:      #00ff41;
--text-warm:     #e8d5b8;
--text-muted:    #6a7a8a;

Push these hard. Glows at 15–20% opacity minimum — not 5%. Punchy and saturated, not subtle. Each collection page should have a distinct dominant accent color drawn from this palette.

---

Font system

Display/heading fonts — pick one per page from this list only. Each page must use a different font.

• Share Tech Mono
• Rambla
• Protest Revolution
• Rancho
• Ribeye Marrow
• Amarante
• Glass Antiqua
• Aladin
• Faculty Glyphic
• Estonia
• Babylonica
• Rubik Glitch
• Trade Winds
• Fredericka the Great
• Jacquard 12
• Sixtyfour Convergence
• Sixtyfour
• Workbench
• Bitcount

All fonts via Google Fonts CDN. Body/UI fonts: your choice (Lora, Cormorant Garamond, Courier Prime are fine). Data/label text: Share Tech Mono or a monospace of your choice.

Do NOT use: Bebas Neue, Barlow Condensed, Cinzel, Anton, Oswald, Josefin Sans, Raleway, Space Grotesk, Inter, Roboto, Arial, or any generic condensed sans for headings.

---

Per-page aesthetic direction

Each page has a distinct accent color and heading font. Use these — do not substitute.

Page	File	Accent color	Heading font
Hub	index.html	--fire-amber #e8943a	Ribeye Marrow
WayBack	wayback.html	--fire-coral #d4654a	Estonia
YourNomadSoul	nomad-soul.html	--waterfall #3fbfaf	Trade Winds
MysterWizzard	myster-wizzard.html	--orchid #c558d9	Aladin
Exopraxist	exopraxist.html	--phosphor #00ff41	Workbench

Apply the accent as: page title glow, card borders, hover states, lightbox chrome. Remaining palette colors available as secondary accents — use sparingly.

---

Hard constraints

• No border-radius > 0px
• No box-shadow blur > 8px
• No glassmorphism, frosted glass, or blur effects
• No CRT/scanline overlays
• Transitions: 100ms ease. No bounce, no spring, no transform-on-hover
• DOMContentLoaded for all JS init — never window.onload
• All output: single self-contained HTML file (inline CSS + JS)

---

Navigation

• Hub (index.html): four collection cards + back link to ../index.html (homepage)
• Collection pages: back link to Images/index.html
• Sonnet will wire the homepage star node to Images/index.html — you do not need to touch index.html at the repo root

---

Mistakes from the Videos build — do not repeat

• Do not use window.onload for lightbox or gate triggers — it waits for all images to load. Use DOMContentLoaded.
• Do not invent your own output filenames — use exactly what this brief specifies.
• Do not use fonts not on the list above.
• Muted/subtle colors are wrong. Push the palette.
• Lightbox content needs max-height: 90vh; overflow-y: auto or it clips on mobile.