<<> # File: public/assets/style.css (PATCH – sticky footer + mobile finpuds) .sg-footer{ position: fixed; left: 0; right: 0; bottom: 0; display: none; gap: 8px; justify-content: space-around; align-items: center; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid #e6dcd4; backdrop-filter: blur(8px); z-index: 9998; } .sg-footer a{ flex: 1 1 0; text-align: center; border: 1px solid #ccb8a8; border-radius: 12px; padding: 10px 8px; text-decoration: none; } .sg-footer a.active{ background:#efe7e1; } @media (max-width: 720px){ .sg-footer{ display: flex; } body{ padding-bottom: 78px; } /* plads til footer */ } /* lille hover fix for touch */ @media (hover: none){ .card.hover:hover{ box-shadow:none; } } <<> # META: # title: "Sticky footer · styles" # tags: ["mobile","footer","ui"] <<> # 1) /public/assets/style.css (MIN patch – hvis du allerede har filen, behold din og tilføj disse) .badge{display:inline-block;padding:8px 12px;border-radius:999px;border:1px solid #ccb8a8;text-decoration:none;cursor:pointer} .badge.active{background:#efe7e1} .card{padding:16px;border:1px solid #e6dcd4;border-radius:14px;background:#fff} .card.hover:hover{box-shadow:0 4px 14px rgba(0,0,0,.06)} .grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))} .muted{color:#6f5f55;font-size:.92rem} #langSwitch{display:flex;gap:8px;flex-wrap:wrap;align-items:center} #langSwitch .label{font-size:.92rem;color:#6f5f55} .sg-footer{position:fixed;left:0;right:0;bottom:0;display:none;gap:8px;justify-content:space-around;align-items:center;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid #e6dcd4;backdrop-filter:blur(8px);z-index:9998} .sg-footer a{flex:1 1 0;text-align:center;border:1px solid #ccb8a8;border-radius:12px;padding:10px 8px;text-decoration:none} .sg-footer a.active{background:#efe7e1} @media(max-width:720px){.sg-footer{display:flex}body{padding-bottom:78px}} /* dev diagnostic ribbon */ #sgDiag{position:fixed;right:10px;bottom:90px;background:#111;color:#fff;padding:8px 10px;border-radius:10px;font:12px/1.3 system-ui;z-index:9999;opacity:.9} #sgDiag.ok{background:#1f7a1f} #sgDiag.warn{background:#7a5a1f} #sgDiag.err{background:#7a1f1f} # 2) /public/assets/app.lang.js const SUPPORTED=["da","en","kl"];const DEFAULT_LANG="da"; export function getLangFromPath(){const[,m]=location.pathname.split("/");return SUPPORTED.includes(m)?m:null} export function withLang(path,lang){lang=SUPPORTED.includes(lang)?lang:DEFAULT_LANG;if(path.startsWith("/"+lang+"/"))return path;if(/^\/(da|en|kl)\//.test(path))return path.replace(/^\/(da|en|kl)\//,`/${lang}/`);return path.startsWith("/")?`/${lang}${path}`:`/${lang}/${path}`} export function resolveLang(){let lang=getLangFromPath();if(!lang){const s=localStorage.getItem("lang");if(s&&SUPPORTED.includes(s))lang=s} if(!lang){const p=(navigator.language||"").slice(0,2).toLowerCase();lang=SUPPORTED.includes(p)?p:DEFAULT_LANG} if(!getLangFromPath()){const t=withLang(location.pathname||"/index.html",lang);if(location.pathname!==t)location.replace(t)}return lang} export async function initLangUI(){const lang=resolveLang();localStorage.setItem("lang",lang);const host=document.getElementById("langSwitch");if(!host)return; host.innerHTML="";const row=document.createElement("div");["da","en","kl"].forEach(code=>{const a=document.createElement("a");a.className="badge"+(lang===code?" active":"");a.textContent=code.toUpperCase();a.href=withLang(location.pathname,code);row.appendChild(a)}); const wrap=document.createElement("div");wrap.style.display='flex';wrap.style.gap='8px';wrap.style.alignItems='center';const label=document.createElement("span");label.className='label';label.textContent='Sprog'; const sel=document.createElement("select");["da","en","kl"].forEach(code=>{const o=document.createElement("option");o.value=code;o.textContent=code.toUpperCase();if(code===lang)o.selected=true;sel.appendChild(o)}); sel.addEventListener('change',()=>{const n=sel.value;localStorage.setItem('lang',n);location.href=withLang(location.pathname,n)});wrap.appendChild(label);wrap.appendChild(sel); host.appendChild(row);host.appendChild(wrap);} # 3) /public/assets/app.lightbox.js let swipe={x0:null,y0:null,t0:0};let onNavigate=null; export function ensureLightbox(){if(document.getElementById('lightbox'))return;const lb=document.createElement('div');lb.id='lightbox'; lb.style.cssText='position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.85);z-index:9999;padding:24px'; lb.innerHTML=`
Download
`; document.body.appendChild(lb);lb.addEventListener('click',e=>{if(e.target.id==='lightbox')closeLightbox()}); window.addEventListener('keydown',e=>{if(lb.style.display==='flex'){if(e.key==='Escape')closeLightbox();if((e.key==='ArrowLeft'||e.key==='ArrowRight')&&onNavigate){onNavigate(e.key==='ArrowRight'?+1:-1)}}}); const img=document.getElementById('lightboxImg');img.addEventListener('touchstart',e=>{const t=e.changedTouches[0];swipe={x0:t.clientX,y0:t.clientY,t0:Date.now()}},{passive:true}); img.addEventListener('touchend',e=>{const t=e.changedTouches[0];const dx=t.clientX-swipe.x0;const dy=t.clientY-swipe.y0;const dt=Date.now()-swipe.t0;const horiz=Math.abs(dx)>Math.abs(dy)&&Math.abs(dx)>40&&dt<600;if(horiz&&onNavigate){onNavigate(dx<0?+1:-1)}})} export function openLightbox(src,file,title,navigateCb){ensureLightbox();const lb=document.getElementById('lightbox');const img=document.getElementById('lightboxImg');const dl=document.getElementById('lightboxDownload');const ti=document.getElementById('lightboxTitle'); img.src=src;img.alt=title||'';ti.textContent=title||'';dl.href=file||src;dl.setAttribute('download','');onNavigate=typeof navigateCb==='function'?navigateCb:null;lb.style.display='flex'} export function closeLightbox(){const lb=document.getElementById('lightbox');if(lb)lb.style.display='none';onNavigate=null} # 4) /public/assets/app.footer.js import { withLang } from '/assets/app.lang.js'; export function mountFooter(active=''){if(document.getElementById('sgFooter'))return;const el=document.createElement('nav');el.id='sgFooter';el.className='sg-footer'; const mk=(href,label,key)=>{const a=document.createElement('a');a.href=withLang(href,localStorage.getItem('lang')||'da');a.textContent=label;if(active===key)a.classList.add('active');return a}; el.append(mk('/scrolls/','Scrolls','scrolls'),mk('/gallery/','Gallery','gallery'),mk('/donate/','Støt','donate'));document.body.appendChild(el)} # 5) /public/assets/app.home.js import { ensureLightbox, openLightbox } from '/assets/app.lightbox.js'; export async function mountHome(){ const links=document.getElementById('homeLinks');if(links){links.innerHTML=`ScrollBookGalleryScience PapersStøt`} ensureLightbox();await renderFeaturedBooks(); } async function renderFeaturedBooks(){ const host=document.getElementById('featuredBooks');if(!host)return;let data; try{const r=await fetch('/manifest/books.json',{cache:'no-store'});data=await r.json()}catch{host.innerHTML='
books.json mangler.
';return} const bks=(data.books||[]).filter(b=>b.cover&&b.file);if(!bks.length){host.innerHTML='
Ingen bøger endnu.
';return} const grid=document.createElement('div');grid.className='grid'; bks.forEach(b=>{const card=document.createElement('button');card.className='card hover';card.style.display='flex';card.style.alignItems='center';card.style.gap='12px'; card.innerHTML=`${b.title} cover

${b.title}

Klik for fuld visning · download
`; card.addEventListener('click',()=>openLightbox(b.cover,b.file,b.title));grid.appendChild(card)}); host.innerHTML='';host.appendChild(grid); } # 6) /public/assets/app.scrolls.js (ScrollBook index + klikbare sigils) import { ensureLightbox, openLightbox } from '/assets/app.lightbox.js'; async function loadJSON(path){const r=await fetch(path,{cache:'no-store'});if(!r.ok)return null;return r.json()} function sigilPath(visual){return visual?`/Images/Sigils/${visual}`:null} export async function mountScrollIndex(){ const host=document.getElementById('scrollIndex');if(!host)return;ensureLightbox(); const data=await loadJSON('/manifest/scrolls.json');if(!data){host.innerHTML='
scrolls.json mangler.
';return} const list=(data.scrolls||[]).filter(s=>s.is_published); const bar=document.createElement('div');bar.style.cssText='display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px'; const search=document.createElement('input');search.type='search';search.placeholder='Søg titel/felt…'; const sel=document.createElement('select');['alle','Rod','Stamme','Krone','Midten'].forEach(z=>{const o=document.createElement('option');o.value=z.toLowerCase();o.textContent=z;sel.appendChild(o)}); bar.appendChild(search);bar.appendChild(sel); const grid=document.createElement('div');grid.className='grid';host.innerHTML='';host.appendChild(bar);host.appendChild(grid); let currentSigils=[]; function render(){const q=(search.value||'').toLowerCase();const zone=sel.value;grid.innerHTML='';currentSigils=[]; list.filter(s=>{const m=`${s.title||''} ${s.field||''} ${s.tree_zone||''}`.toLowerCase().includes(q);const z=(zone==='alle')||((s.tree_zone||'').toLowerCase()===zone);return m&&z}) .forEach(s=>{const card=document.createElement('div');card.className='card hover';const langs=Object.entries(s.langRoutes||{}).filter(([_,url])=>!!url); const langBtns=langs.map(([L,url])=>`${L.toUpperCase()}`).join(' ');const sigil=sigilPath(s.visual); const idx=sigil?currentSigils.push({src:sigil,title:s.title,file:sigil})-1:-1; card.innerHTML=`
${sigil?``:'
'}

${s.title||s.filename}

${s.field||''} · ${s.tree_zone||''} · #${s.spiral_node||''}
${langBtns}
`; grid.appendChild(card)});grid.querySelectorAll('.sg-sigil').forEach(img=>{img.addEventListener('click',()=>{const i=Number(img.getAttribute('data-idx'));if(isNaN(i)||i<0)return;openAt(i)})})} function openAt(i){if(!currentSigils.length)return;let cur=(i+currentSigils.length)%currentSigils.length;const it=currentSigils[cur]; openLightbox(it.src,it.file,it.title,dir=>{cur=(cur+dir+currentSigils.length)%currentSigils.length;const nx=currentSigils[cur];openLightbox(nx.src,nx.file,nx.title,arguments.callee)})} search.addEventListener('input',render);sel.addEventListener('change',render);render(); } # 7) /public/manifest/books.json (midlertidig – opdater stier når du lægger filer) { "version": "1.0", "generatedAt": "manual", "books": [ { "id": "seraphinae_rising", "title": "Seraphinae · Rising", "cover": "/Images/Books/Seraphinae_Rising/cover.jpg", "file": "/Files/Books/Seraphinae_Rising.pdf", "langs": ["da","en"], "bytes": null, "sha256": null } ] } # 8) /public/manifest/scrolls.json (uddrag – læg hele din seneste her; dette er bare en skeleton) { "version": "1.3", "generatedAt": "manual", "scrolls": [ { "id": "009", "title": "Café Sofía Welcome", "spiral_node": 9, "field": "Café Sofía", "tree_zone": "Krone", "filename": "scroll_009_cafe_sofia.html", "has_visual": true, "has_whisper": false, "is_published": true, "langRoutes": { "da": "/da/scrolls/scroll_009_cafe_sofia.html", "en": "/en/scrolls/scroll_009_cafe_sofia.html", "kl": "/kl/scrolls/scroll_009_cafe_sofia.html" }, "whisper": "Du må gerne blive siddende. Det hele er her.", "visual": "sigil_sofia_cupheart.png", "pledge": "Jeg tager imod mit livs samtale." } /* … resten af 010–017, 023 osv. som vi allerede har behandlet … */ ] } # 9) /public/scrolls/index.html (let index-side til kort-grid) ScrollBook · SpiralGrid
# 10) /public/gallery/index.html (let galleri – forventer manifest/gallery.json senere) Gallery · SpiralGrid
# 11) /public/donate/index.html (simpel landingsside) Støt · SpiralGrid

Støt SpiralGrid

MobilePay + bank + crypto tilføjes i næste batch (med QR & copy-knapper).

# 12) /public/404.html (sprog-redirect) Finder vej… · SpiralGrid

Finder vej…

Sender dig til den rigtige sprogversion.

# 13) /public/assets/app.diag.js (DEV: lille status-ribbon) export async function mountDiag(){ const box=document.createElement('div'); box.id='sgDiag'; box.textContent='checking…'; document.body.appendChild(box); const tests=[ ['style.css', ()=> fetch('/assets/style.css').then(r=>r.ok)], ['app.lang.js', ()=> import('/assets/app.lang.js').then(()=>true).catch(()=>false)], ['app.home.js', ()=> import('/assets/app.home.js').then(()=>true).catch(()=>false)], ['lightbox', ()=> import('/assets/app.lightbox.js').then(()=>true).catch(()=>false)], ['books.json', ()=> fetch('/manifest/books.json',{cache:'no-store'}).then(r=>r.ok)], ['scrolls.json', ()=> fetch('/manifest/scrolls.json',{cache:'no-store'}).then(r=>r.ok)] ]; let ok=true; const lines=[]; for(const [name,fn] of tests){ let pass=false; try{ pass=await fn() }catch{} lines.push(`${pass?'✓':'✗'} ${name}`); if(!pass) ok=false } box.className= ok ? 'ok' : 'err'; box.innerHTML=lines.join('
'); } # 14) PATCH til din eksisterende /public/index.html (FLET KUN DETTE IND!) # a) I , lige før : # b) I øverst (eller i din header): (tilføj kun hvis de ikke findes)
# c) I dit main-indhold: (tilføj hvor du vil vise bogfeltet)

Udvalgte bøger

<<> # META: # title: "Åbn-op deployment kit + diagnostic ribbon" # tags: ["bootstrap","home","lightbox","footer","i18n","diag"] # note: "Fletter ind uden at overskrive din index. Viser grøn/rød status for assets/manifest." /* --- donate ui (patch) --- */ .badge{display:inline-block;padding:8px 12px;border-radius:999px;border:1px solid #ccb8a8;text-decoration:none;cursor:pointer;background:#fff} .badge:hover{filter:brightness(0.98)} .card{padding:16px;border:1px solid #e6dcd4;border-radius:14px;background:#fff} .grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))} .muted{color:#6f5f55;font-size:.92rem} .sg-select{ padding:8px 12px; border:1px solid #ccb8a8; border-radius:10px; background:#fff; } .sg-input{ width:120px; padding:8px; border:1px solid #ccb8a8; border-radius:8px; } .sg-row{ display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; } .sg-actions{ display:flex; gap:8px; flex-wrap:wrap; } .sg-custom{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .sg-thanks{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:16px; background: radial-gradient(1200px 600px at 50% 10%, rgba(234,243,234,.35), rgba(0,0,0,.75)); z-index:9999; } .sg-thanks-inner{ max-width:720px; border:1px solid #dfe9df; background: linear-gradient(135deg,#f7fbf7,#ffffff); box-shadow: 0 20px 60px rgba(0,0,0,.25); } .sg-poem{ white-space:pre-wrap; margin:0; font-family:Georgia,serif; } .sg-dragon{ margin-top:10px; font-style:italic; color:#3a5f3a; } /* donate ui */ .badge{display:inline-block;padding:8px 12px;border-radius:999px;border:1px solid #ccb8a8;text-decoration:none;cursor:pointer;background:#fff} .badge:hover{filter:brightness(0.98)} .card{padding:16px;border:1px solid #e6dcd4;border-radius:14px;background:#fff} .grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))} .muted{color:#6f5f55;font-size:.92rem} .sg-select{ padding:8px 12px; border:1px solid #ccb8a8; border-radius:10px; background:#fff; } .sg-input{ width:120px; padding:8px; border:1px solid #ccb8a8; border-radius:8px; } .sg-row{ display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; } .sg-actions{ display:flex; gap:8px; flex-wrap:wrap; } .sg-custom{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .sg-thanks{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:16px; background: radial-gradient(1200px 600px at 50% 10%, rgba(234,243,234,.35), rgba(0,0,0,.75)); z-index:9999; } .sg-thanks-inner{ max-width:720px; border:1px solid #dfe9df; background: linear-gradient(135deg,#f7fbf7,#ffffff); box-shadow: 0 20px 60px rgba(0,0,0,.25); } .sg-poem{ white-space:pre-wrap; margin:0; font-family:Georgia,serif; } .sg-dragon{ margin-top:10px; font-style:italic; color:#3a5f3a; }