27aeef11eb
All checks were successful
Docker / build-and-push (push) Successful in 2m58s
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>
160 lines
6.6 KiB
HTML
160 lines
6.6 KiB
HTML
<!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">
|
|
<div class="control-group">
|
|
<div class="control-label">crop & 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>
|
|
|
|
<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>
|
|
<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 & white</button>
|
|
</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">
|
|
<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>
|
|
</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>
|
|
|
|
<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 & 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>
|
|
|
|
<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">
|
|
<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>
|
|
</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>
|