93 lines
3.3 KiB
HTML
93 lines
3.3 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">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>
|
||
|
|
</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>
|
||
|
|
|
||
|
|
<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>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">
|
||
|
|
<button class="btn btn-small" id="reroll-leak">reroll placement</button>
|
||
|
|
</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>
|