- commit
- 934d0b53beead12c44f0b6bc0758a091108a8187
- parent
- f41a40e37d0e93986ab59189c91edec00132014e
- author
- Dami <dami.etoile@gmail.com>
| M | home.mjs | 9 | +++++++++ |
| M | index.html | 22 | ++++++++++++++++------ |
| M | style.css | 8 | +++++--- |
@@ -14,3 +14,12 @@ if('serviceWorker'in navigator){
1414 let hadController=Boolean(navigator.serviceWorker.controller);navigator.serviceWorker.addEventListener('controllerchange',()=>{if(hadController)location.reload();hadController=true;});1515 navigator.serviceWorker.register('./sw.js').then(async()=>{await navigator.serviceWorker.ready;$('offline-status').textContent='Works offline.';}).catch(()=>{});1616 }17+18+// Per-tool details, opened from the info button on each card.19+const TOOLS={20+ perspective:['Perspective',['JPEG and PNG.','Straightens verticals and horizontals from detected lines. Up to 4 MP and 2560 px.','Saved copies drop EXIF and color profiles.']],21+ fuji:['Fuji',['RAF files, developed at half size with the camera\'s lens corrections.','16 film simulation looks as LUTs fitted from a Fuji body: close to the camera, not the camera\'s own rendering.','The in-camera JPEG can be saved as is.']],22+ social:['Social',['JPEG, PNG and WebP.','Aspect ratios for photo and social, crop or pad, frame, vignette and grain.','Social ratios export with a 1080 short side. Photo ratios keep resolution up to 2160.']]};23+const toolSheet=$('tool-sheet');24+for(const b of document.querySelectorAll('[data-info]'))b.onclick=e=>{e.preventDefault();const [title,paras]=TOOLS[b.dataset.info];$('tool-title').textContent=title;$('tool-text').replaceChildren(...paras.map(t=>{const p=document.createElement('p');p.textContent=t;return p;}));toolSheet.showModal();};25+toolSheet.querySelector('[data-close]').onclick=()=>toolSheet.close();toolSheet.addEventListener('click',e=>{if(e.target===toolSheet)toolSheet.close();});@@ -21,20 +21,23 @@
2121 <h1 class="home-title">gud.pics</h1>2222 2323 <ul class="tools">24- <li>25- <a class="tool-card" href="./perspective">24+ <li class="tool-card">25+ <button class="tool-info" data-info="perspective" aria-label="About Perspective"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></button>26+ <a class="tool-link" href="./perspective">2627 <span class="tool-glyph"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M14 15H9v-5"/><path d="M16 3h5v5"/><path d="M21 3 9 15"/></svg></span>2728 <h2>Perspective</h2>2829 </a>2930 </li>30- <li>31- <a class="tool-card" href="./fuji">31+ <li class="tool-card">32+ <button class="tool-info" data-info="fuji" aria-label="About Fuji"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></button>33+ <a class="tool-link" href="./fuji">3234 <span class="tool-glyph"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m14.31 8 5.74 9.94"/><path d="M9.69 8h11.48"/><path d="m7.38 12 5.74-9.94"/><path d="M9.69 16 3.95 6.06"/><path d="M14.31 16H2.83"/><path d="m16.62 12-5.74 9.94"/></svg></span>3335 <h2>Fuji</h2>3436 </a>3537 </li>36- <li>37- <a class="tool-card" href="./social">38+ <li class="tool-card">39+ <button class="tool-info" data-info="social" aria-label="About Social"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></button>40+ <a class="tool-link" href="./social">3841 <span class="tool-glyph"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="M12 9v11"/><path d="M2 9h13a2 2 0 0 1 2 2v9"/></svg></span>3942 <h2>Social</h2>4043 </a>@@ -50,6 +53,13 @@
5053 </section>5154 </main>5255 56+ <dialog id="tool-sheet" class="sheet" aria-labelledby="tool-title">57+ <div class="sheet-body" tabindex="-1" autofocus>58+ <div class="grabber"></div>59+ <div class="sheet-head"><h2 id="tool-title"></h2><button class="sheet-close" data-close>Done</button></div>60+ <div id="tool-text"></div>61+ </div>62+ </dialog>5363 <dialog id="info" class="sheet" aria-labelledby="info-title">5464 <div class="sheet-body" tabindex="-1" autofocus>5565 <div class="grabber"></div>@@ -65,18 +65,20 @@ h1, h2, h3, p { margin: 0; }
6565 gap: 12px;6666 }6767 .tool-card {68- display: block;69- color: inherit;68+ position: relative;7069 background: var(--surface);7170 border-radius: 18px;72- padding: 14px 14px 16px;7371 min-height: 190px;7472 transition: transform .12s, background .12s;7573 }7674 .tool-card:active { transform: scale(.97); background: var(--surface-2); }75+.tool-link { display: block; color: inherit; padding: 14px 14px 16px; min-height: 190px; border-radius: 18px; }76+.tool-info { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; display: grid; place-items: center; color: var(--label-2); border-radius: 50%; }77+.tool-info:active { color: var(--label); }7778 .tool-glyph { display: block; color: var(--tint); margin-bottom: 18px; }7879 .tool-glyph svg { width: 48px; height: 48px; }7980 .tool-card h2 { font-size: 17px; font-weight: 600; }81+#tool-text p { font-size: 15px; line-height: 1.5; color: var(--label-2); margin-top: 12px; }8082 .tool-card p { font-size: 13px; color: var(--label-2); margin-top: 3px; }8183 8284 .list { margin-top: 32px; }