Add Images section — hub + 4 collection galleries, wire nav star
- 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>
This commit is contained in:
192
Images/GEMINI.md
Normal file
192
Images/GEMINI.md
Normal file
@@ -0,0 +1,192 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user