75 lines
2.6 KiB
HTML
75 lines
2.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>postcard</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>postcard</h1>
|
||
|
|
</div>
|
||
|
|
<p class="hint">turn a photo into something that looks like it was mailed</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/*" hidden>
|
||
|
|
|
||
|
|
<div class="inline-row source-row">
|
||
|
|
<button class="btn btn-small" id="camera-btn">take a photo</button>
|
||
|
|
<button class="btn btn-small" id="library-btn">choose from library</button>
|
||
|
|
</div>
|
||
|
|
<input type="file" id="camera-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">template</div>
|
||
|
|
<div class="preset-row" id="template-row">
|
||
|
|
<button class="preset-btn active" data-template="cream">plain cream</button>
|
||
|
|
<button class="preset-btn" data-template="torn">torn edge</button>
|
||
|
|
<button class="preset-btn" data-template="faded">faded color-era</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="control-group">
|
||
|
|
<div class="control-label">
|
||
|
|
<span>caption</span>
|
||
|
|
<span class="control-value" id="caption-status"></span>
|
||
|
|
</div>
|
||
|
|
<textarea id="caption-input" class="caption-input" rows="2" maxlength="140" placeholder="wish you were here..."></textarea>
|
||
|
|
<div class="inline-row">
|
||
|
|
<button class="btn btn-small" id="redraft-btn">redraft</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="actions actions-row">
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="result-panel" class="result-panel" hidden></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="exif.js"></script>
|
||
|
|
<script src="app.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|