explewd/latent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
27aeef11eb4293535aa9a46b9dc788f1f7dce192
latent/index.html

160 lines
6.6 KiB
HTML
Raw Normal View History

Initial implementation of latent: film-effects editor + develop-later server Canvas-based client-side editor (grain, vignette, halation, procedural light leaks, color-cast presets) plus a small Express/SQLite server for the two paths that need persistence: instant share links and delayed "send to develop" links with a randomized reveal time. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-16 15:19:48 +02:00
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>latent</title>
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<div class="header-row">
<h1>latent</h1>
</div>
<p class="hint">film-style edits, in the browser — develop instantly, or wait</p>
<div class="card" id="drop-card">
<label class="drop-zone" id="drop-zone" for="file-input">
<span class="drop-zone-label">choose a photo, or drag one here</span>
<span class="drop-zone-sub">nothing leaves your browser until you say so</span>
</label>
<input type="file" id="file-input" accept="image/*" capture="environment" hidden>
</div>
<div class="card" id="editor-card" hidden>
<div class="canvas-wrap">
<canvas id="canvas"></canvas>
</div>
<div class="controls">
Add crop/rotate, more presets, and several new film effects Chromatic aberration, dust & scratches, light-leak shape variety (bloom/streak/corner), double exposure, and grain size/color controls, plus polaroid/infrared/black & white presets and non-destructive crop+rotate ahead of the existing effect stack. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-17 12:16:52 +02:00
<div class="control-group">
<div class="control-label">crop &amp; rotate</div>
<div class="preset-row" id="aspect-row">
<button class="preset-btn active" data-aspect="original">original</button>
<button class="preset-btn" data-aspect="square">square</button>
<button class="preset-btn" data-aspect="portrait">4:5</button>
<button class="preset-btn" data-aspect="landscape">16:9</button>
</div>
<div class="inline-row">
<button class="btn btn-small" id="rotate-left-btn">rotate ⟲</button>
<button class="btn btn-small" id="rotate-right-btn">rotate ⟳</button>
</div>
</div>
Initial implementation of latent: film-effects editor + develop-later server Canvas-based client-side editor (grain, vignette, halation, procedural light leaks, color-cast presets) plus a small Express/SQLite server for the two paths that need persistence: instant share links and delayed "send to develop" links with a randomized reveal time. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-16 15:19:48 +02:00
<div class="control-group">
<div class="control-label">vibe</div>
<div class="preset-row" id="preset-row">
<button class="preset-btn active" data-preset="none">none</button>
<button class="preset-btn" data-preset="warm">expired warm</button>
<button class="preset-btn" data-preset="cool">cross-processed</button>
<button class="preset-btn" data-preset="faded">faded</button>
Add crop/rotate, more presets, and several new film effects Chromatic aberration, dust & scratches, light-leak shape variety (bloom/streak/corner), double exposure, and grain size/color controls, plus polaroid/infrared/black & white presets and non-destructive crop+rotate ahead of the existing effect stack. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-17 12:16:52 +02:00
<button class="preset-btn" data-preset="polaroid">polaroid</button>
<button class="preset-btn" data-preset="infrared">infrared</button>
<button class="preset-btn" data-preset="bw">black &amp; white</button>
Initial implementation of latent: film-effects editor + develop-later server Canvas-based client-side editor (grain, vignette, halation, procedural light leaks, color-cast presets) plus a small Express/SQLite server for the two paths that need persistence: instant share links and delayed "send to develop" links with a randomized reveal time. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-16 15:19:48 +02:00
</div>
</div>
<div class="control-group">
<div class="control-label">
<span>grain</span>
<span class="control-value" id="grain-value">0</span>
</div>
<input type="range" id="grain" min="0" max="100" value="0" class="slider">
Add crop/rotate, more presets, and several new film effects Chromatic aberration, dust & scratches, light-leak shape variety (bloom/streak/corner), double exposure, and grain size/color controls, plus polaroid/infrared/black & white presets and non-destructive crop+rotate ahead of the existing effect stack. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-17 12:16:52 +02:00
<div class="inline-row">
<label class="mini-label">size <input type="range" id="grain-size" min="0" max="100" value="40" class="slider slider-small"></label>
<button class="btn btn-small" id="grain-color-toggle" data-mode="mono">grain: mono</button>
</div>
Initial implementation of latent: film-effects editor + develop-later server Canvas-based client-side editor (grain, vignette, halation, procedural light leaks, color-cast presets) plus a small Express/SQLite server for the two paths that need persistence: instant share links and delayed "send to develop" links with a randomized reveal time. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-16 15:19:48 +02:00
</div>
<div class="control-group">
<div class="control-label">
<span>vignette</span>
<span class="control-value" id="vignette-value">0</span>
</div>
<input type="range" id="vignette" min="0" max="100" value="0" class="slider">
</div>
<div class="control-group">
<div class="control-label">
<span>halation</span>
<span class="control-value" id="halation-value">0</span>
</div>
<input type="range" id="halation" min="0" max="100" value="0" class="slider">
</div>
Add crop/rotate, more presets, and several new film effects Chromatic aberration, dust & scratches, light-leak shape variety (bloom/streak/corner), double exposure, and grain size/color controls, plus polaroid/infrared/black & white presets and non-destructive crop+rotate ahead of the existing effect stack. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-17 12:16:52 +02:00
<div class="control-group">
<div class="control-label">
<span>chromatic aberration</span>
<span class="control-value" id="aberration-value">0</span>
</div>
<input type="range" id="aberration" min="0" max="100" value="0" class="slider">
</div>
<div class="control-group">
<div class="control-label">
<span>dust &amp; scratches</span>
<span class="control-value" id="dust-value">0</span>
</div>
<input type="range" id="dust" min="0" max="100" value="0" class="slider">
<button class="btn btn-small" id="reroll-dust">reroll dust</button>
</div>
Initial implementation of latent: film-effects editor + develop-later server Canvas-based client-side editor (grain, vignette, halation, procedural light leaks, color-cast presets) plus a small Express/SQLite server for the two paths that need persistence: instant share links and delayed "send to develop" links with a randomized reveal time. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-16 15:19:48 +02:00
<div class="control-group">
<div class="control-label">
<span>light leak</span>
<span class="control-value" id="leak-value">0</span>
</div>
<input type="range" id="leak" min="0" max="100" value="0" class="slider">
Add crop/rotate, more presets, and several new film effects Chromatic aberration, dust & scratches, light-leak shape variety (bloom/streak/corner), double exposure, and grain size/color controls, plus polaroid/infrared/black & white presets and non-destructive crop+rotate ahead of the existing effect stack. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-17 12:16:52 +02:00
<div class="inline-row">
<div class="preset-row" id="leak-shape-row">
<button class="preset-btn btn-small active" data-shape="bloom">bloom</button>
<button class="preset-btn btn-small" data-shape="streak">streak</button>
<button class="preset-btn btn-small" data-shape="corner">corner</button>
</div>
<button class="btn btn-small" id="reroll-leak">reroll placement</button>
</div>
</div>
<div class="control-group">
<div class="control-label">double exposure</div>
<div class="inline-row">
<button class="btn btn-small" id="add-exposure-btn">add second photo</button>
<button class="btn btn-small" id="remove-exposure-btn" hidden>remove</button>
<input type="file" id="exposure-input" accept="image/*" hidden>
</div>
<div id="exposure-controls" hidden>
<div class="inline-row">
<label class="mini-label">blend
<select id="exposure-blend" class="select-small">
<option value="screen">screen</option>
<option value="lighten">lighten</option>
<option value="overlay">overlay</option>
<option value="multiply">multiply</option>
</select>
</label>
</div>
<input type="range" id="exposure-opacity" min="0" max="100" value="50" class="slider">
</div>
Initial implementation of latent: film-effects editor + develop-later server Canvas-based client-side editor (grain, vignette, halation, procedural light leaks, color-cast presets) plus a small Express/SQLite server for the two paths that need persistence: instant share links and delayed "send to develop" links with a randomized reveal time. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-16 15:19:48 +02:00
</div>
</div>
<div class="actions actions-row">
<button class="btn" id="reset-btn">reset</button>
<button class="btn" id="new-photo-btn">new photo</button>
<button class="btn btn-primary" id="download-btn">download</button>
</div>
<div class="actions actions-row">
<button class="btn" id="share-btn">generate share link</button>
<button class="btn btn-develop" id="develop-btn">send to develop</button>
</div>
<div id="result-panel" class="result-panel" hidden></div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Reference in New Issue Copy Permalink