jasmineisonline — Interactive Stories/title> <meta name="description" content="Play my interactive stories here!" /> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> <style> :root{ --bg:#fdfcfb; --paper:#ffffff; --ink:#2c2a32; --muted:#7b7785; --mist:#dfe4dc; --accent:#9ec5cf; --accent2:#f3a7c2; --radius:18px; --shadow:0 10px 24px rgba(0,0,0,.06) } ::selection{background:rgba(243,167,194,.3)} html,body{height:100%} body{margin:0;color:var(--ink);background: radial-gradient(24rem 24rem at 20% 10%, rgba(243,167,194,.15), transparent 60%), radial-gradient(24rem 24rem at 90% 20%, rgba(158,197,207,.15), transparent 60%),var(--bg); font: 16px/1.7 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Apple Color Emoji", "Noto Color Emoji", sans-serif; letter-spacing:.2px } a{color:#667f61;text-decoration:none} .wrap{max-width:980px;margin:0 auto;padding:26px 18px} header{text-align:center;margin-bottom:16px} .brand{font-family:'DM Serif Display',serif;font-size:2.2rem} .lede{color:var(--muted);max-width:640px;margin:4px auto 0} /* Library */ .grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:14px} .card{background:var(--paper);border:1px solid var(--mist);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)} .cover{display:block;aspect-ratio: 16/9;background:#f7f7f7 center/cover no-repeat} .body{padding:14px} .body h3{margin:.2em 0;font-family:'DM Serif Display',serif} .body p{margin:.4em 0;color:var(--muted)} .btn{margin-top:8px;display:inline-block;border:1px solid var(--mist);background:#fff;color:var(--ink);padding:8px 12px;border-radius:999px;font-weight:700} /* Player overlay */ .overlay{position:fixed;inset:0;display:none;background:rgba(0,0,0,.4);backdrop-filter:saturate(140%) blur(2px);} .overlay.active{display:grid;place-items:center} .player{width:min(1000px,94vw);height:min(80vh,82vh);background:var(--paper);border:1px solid var(--mist);border-radius:var(--radius);box-shadow:0 18px 40px rgba(0,0,0,.25);display:flex;flex-direction:column;overflow:hidden} .bar{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--mist)} .bar strong{font-family:'DM Serif Display',serif;font-size:1.2rem} .controls{display:flex;gap:8px} .iconbtn{border:1px solid var(--mist);background:#fff;border-radius:10px;padding:8px 10px;cursor:pointer} iframe{border:0;flex:1;background:#000} .hint{color:var(--muted);font-size:.92rem;text-align:center;margin-top:8px} </style> </head> <body> <div class="wrap"> <header> <div class="brand">Twine Games ✿</div> <p class="lede">Upload your exported Twine HTML files to <code>/twine/</code>. This page lists them and plays in a soft overlay. (Twine’s own save/load still works.)</p> </header>  <section id="library"> <div class="grid" id="grid"></div> <p class="hint">Can’t see your game? Make sure it’s in <code>/twine/</code> and listed in <code>/twine/twines.json</code>.</p> </section> </div>  <div class="overlay" id="overlay"> <div class="player"> <div class="bar"> <strong id="playTitle">Untitled</strong> <div class="controls"> <a class="iconbtn" id="openNew" href="#" target="_blank" rel="noopener" title="Open in new tab">⤴︎</a> <button class="iconbtn" id="close" title="Close">✕</button> </div> </div> <iframe id="frame" title="Twine game"></iframe> </div> </div> <script> // ============================= // How to use: // 1) In Twine: File → Publish to File → save e.g. midnight-tea.html // 2) On Neocities: create /twine/ folder and upload your .html files there. // 3) Create /twine/twines.json like: // { // "games": [ // { "title":"Midnight Tea", "file":"midnight-tea.html", "blurb":"The kettle has opinions.", "cover":"/images/tea.jpg" }, // { "title":"Tiny Quest", "file":"tiny-quest.html", "blurb":"A three-scene micro adventure." } // ] // } // This page fetches that JSON and builds the gallery automatically. // ============================= const $ = (s, c=document) => c.querySelector(s); const grid = $('#grid'); const overlay = $('#overlay'); const frame = $('#frame'); const playTitle = $('#playTitle'); const openNew = $('#openNew'); async function loadManifest(){ try{ const res = await fetch('/twine/twines.json', { cache: 'no-store' }); if(!res.ok) throw new Error('manifest missing'); const data = await res.json(); buildGrid(data.games || []); }catch(e){ // Friendly fallback (shows a sample card so the page isn't empty) buildGrid([ { title:'Sample: Midnight Tea', file:'midnight-tea.html', blurb:'Upload your file to /twine/ and edit twines.json', cover:'' } ]); } } function card(g){ const a = document.createElement('article'); a.className = 'card'; const cover = g.cover ? `style="background-image:url('${g.cover}')" ` : ''; a.innerHTML = `<div class="cover" ${cover}></div> <div class="body"> <h3>${g.title || 'Untitled'}</h3> <p>${g.blurb || ''}</p> <a class="btn" href="#" data-file="${g.file}">Play</a> </div>`; a.querySelector('.btn').addEventListener('click', (e)=>{ e.preventDefault(); play(g); }); return a; } function buildGrid(games){ grid.innerHTML = ''; games.forEach(g => grid.appendChild(card(g))); } function play(g){ const url = `/twine/${g.file}`; playTitle.textContent = g.title || 'Untitled'; frame.src = url; openNew.href = url; overlay.classList.add('active'); } $('#close').addEventListener('click', ()=>{ overlay.classList.remove('active'); frame.src='about:blank'; }); // Deep-link: /stories.html#midnight-tea.html window.addEventListener('load', async ()=>{ await loadManifest(); const hash = location.hash.replace('#',''); if(hash){ // try to auto-open if listed fetch('/twine/twines.json', {cache:'no-store'}).then(r=>r.json()).then(j=>{ const found = (j.games||[]).find(x=>x.file===hash || (x.title && x.title.toLowerCase().replace(/[^a-z0-9]+/g,'-')+'.html'===hash)); if(found) play(found); }).catch(()=>{}); } }); </script> </body> </html>