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="Develop a Fujifilm RAF with any film simulation. 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>Fuji</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">Fuji</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="Photo">28 <div class="canvas-wrap"><canvas id="canvas" aria-label="Developed photo"></canvas><img id="photo" alt="Camera JPEG" hidden></div>29 <button class="empty" id="open-empty" aria-label="Open RAF">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="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><circle cx="10" cy="12" r="2"/><path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22"/></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">34 <span class="chip" id="info"></span>35 <button class="compare" id="compare" aria-pressed="false" aria-label="Show camera JPEG" disabled><svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 2v16M7 5H3v10h4M13 5h4v10h-4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></button>36 </div>37 <div class="toast" id="status" role="status" aria-live="polite" hidden></div>38 <div class="busy" id="busy" hidden><span class="spinner"></span></div>39 </section>4041 <section class="panel" aria-label="Film simulation">42 <div class="chips" id="sims" role="radiogroup" aria-label="Film simulation"></div>43 <div class="toolbar">44 <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>45 <button class="tb" id="lens" aria-label="Lens correction" aria-pressed="true" 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 3v18M3 12h18" fill="none" stroke="currentColor" stroke-width="1.2"/><path d="M6.5 7.5q5.5 2 11 0M6.5 16.5q5.5-2 11 0" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg></button>46 <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>47 </div>48 </section>49 <input id="file" type="file" hidden>50 </div>5152 <dialog id="save-sheet" class="sheet" aria-label="Save">53 <div class="sheet-body actions" tabindex="-1" autofocus>54 <div class="grabber"></div>55 <div class="rows">56 <button class="row" data-save="developed">Developed JPG</button>57 <button class="row" data-save="camera">Camera JPG</button>58 </div>59 <button class="cancel" data-close>Cancel</button>60 </div>61 </dialog>62 <script type="module" src="./fuji.mjs"></script>63</body>64</html>