12<html lang="en">3<head>4 <meta charset="utf-8">5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, interactive-widget=resizes-content">6 <script src="./viewport.js"></script>7 <meta name="theme-color" content="#1a1a1a">8 <meta name="description" content="Crop, frame, vignette and grain for posting. Runs on your device.">9 <meta name="apple-mobile-web-app-capable" content="yes">10 <meta name="mobile-web-app-capable" content="yes">11 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">12 <meta name="apple-mobile-web-app-title" content="gud.pics">13 <link rel="manifest" href="./manifest.webmanifest">14 <link rel="icon" href="./assets/icon.svg" type="image/svg+xml">15 <link rel="apple-touch-icon" href="./assets/icon-192.png">16 <link rel="stylesheet" href="./style.css">17 <title>Social</title>18</head>19<body class="tool-body">20 <div class="tool" id="tool" data-state="empty">21 <header class="nav">22 <a class="nav-btn" href="./" aria-label="Tools"><svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 5l-7 7 7 7" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>23 <h1 class="nav-title">Social</h1>24 <button class="nav-btn" id="save" aria-label="Save" disabled><svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v12m-5-5l5 5 5-5M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>25 </header>2627 <section class="stage" id="stage" aria-label="Preview">28 <div class="canvas-wrap"><canvas id="canvas" aria-label="Preview"></canvas></div>29 <button class="empty" id="open-empty" aria-label="Open photo">30 <svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 5h6"/><path d="M19 2v6"/><path d="M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/><circle cx="9" cy="9" r="2"/></svg>31 <svg class="plus" width="28" height="28" viewBox="0 0 28 28" aria-hidden="true"><path d="M14 5v18M5 14h18" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"/></svg>32 </button>33 <div class="hud"><span class="chip" id="dims"></span></div>34 <div class="toast" id="status" role="status" aria-live="polite" hidden></div>35 <div class="busy" id="busy" hidden><span class="spinner"></span></div>36 </section>3738 <section class="panel" aria-label="Adjustments">39 <div class="chips chips-sticky" id="formats" role="radiogroup" aria-label="Aspect ratio">40 <div class="chip-list"></div>41 <button class="chip-btn chip-pin" id="rotate" aria-label="Rotate ratio" disabled><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></svg></button>42 </div>43 <div class="segment" id="fit" role="group" aria-label="Fit">44 <button data-fit="crop" aria-pressed="true" aria-label="Crop"><svg viewBox="0 0 28 28" aria-hidden="true"><path d="M8 3v17h17M3 8h17v17"/></svg></button>45 <button data-fit="pad" aria-pressed="false" aria-label="Pad"><svg viewBox="0 0 28 28" aria-hidden="true"><rect x="4" y="4" width="20" height="20" rx="2"/><rect x="9" y="8" width="10" height="12" rx="1"/></svg></button>46 </div>47 <div class="slider" id="frame-row"><label for="frame">Frame</label><output id="frame-value" for="frame">0%</output><input id="frame" type="range" min="0" max="15" value="0" step="0.5" disabled></div>48 <div class="slider" id="vignette-row"><label for="vignette">Vignette</label><output id="vignette-value" for="vignette">0</output><input id="vignette" type="range" min="0" max="100" value="0" disabled></div>49 <div class="slider" id="grain-row"><label for="grain">Grain</label><output id="grain-value" for="grain">0</output><input id="grain" type="range" min="0" max="100" value="0" disabled></div>50 <div class="toolbar">51 <button class="tb" id="open" aria-label="Open"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2.5" fill="none" stroke="currentColor" stroke-width="1.8"/><circle cx="8.5" cy="10" r="1.8" fill="currentColor"/><path d="M4 17l5-5 4 4 2.5-2.5L20 18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg></button>52 <button class="tb" id="color" aria-label="Frame color" aria-pressed="false" disabled><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M12 3a9 9 0 0 1 0 18z" fill="currentColor"/></svg></button>53 <button class="tb" id="reset" aria-label="Reset" disabled><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12a8 8 0 1 0 2.3-5.7" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M4 4v5h5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></button>54 <button class="tb" id="share" aria-label="Share" disabled hidden><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v13M8 7l4-4 4 4M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></button>55 </div>56 </section>57 <input id="file" type="file" accept="image/jpeg,image/png,image/webp" hidden>58 </div>59 <script type="module" src="./social.mjs"></script>60</body>61</html>