JL Kruger
e57d2b0a72
- Images/images.html: hub page linking all 4 collections - Images/wayback.html, nomad-soul.html, myster-wizzard.html, exopraxist.html: collection galleries - 429 thumbnails (360px) committed across 4 collections - Gallery renders from baked filename arrays (no on-load fetch) - Lightbox lazy-fetches FileBrowser for full-res on click, falls back to thumbnail - .gitignore: allow Images/*/thumbnails/, anchor /GEMINI.md to root only, add .venv/ - index.html: wire Images star node to Images/images.html Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
193 lines
6.2 KiB
Markdown
193 lines
6.2 KiB
Markdown
# 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
|
||
|
||
```css
|
||
--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.
|