The Vault — Containment Press <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=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap" rel="stylesheet"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } :root { --ink: #0a0a0f; --charcoal: #1a1a2e; --navy-deep: #0f1419; --parchment: #f4f0e8; --vault-gold: #d4a853; --vault-gold-bright: #e8c87a; --vault-gold-dim: rgba(212, 168, 83, 0.15); --mist: #8b8697; --crack-blue: #3a5f7d; --crack-teal: rgba(58, 95, 125, 0.3); } body { font-family: 'DM Sans', sans-serif; background: var(--navy-deep); color: var(--parchment); line-height: 1.6; min-height: 100vh; position: relative; } body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(45deg, transparent 48%, var(--crack-teal) 49%, var(--crack-teal) 51%, transparent 52%), linear-gradient(-45deg, transparent 48%, var(--crack-teal) 49%, var(--crack-teal) 51%, transparent 52%), linear-gradient(30deg, transparent 48%, rgba(58, 95, 125, 0.1) 49%, rgba(58, 95, 125, 0.1) 51%, transparent 52%); background-size: 100vw 100vh, 100vw 100vh, 50vw 50vh; background-position: center center, center center, 30% 40%; background-repeat: no-repeat; opacity: 0.15; pointer-events: none; z-index: 1; } .grain { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---- NAV ---- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 1.5rem 2rem; display: flex; justify-content: space-between; align-items: center; background: var(--ink); border-bottom: 1px solid rgba(244, 240, 232, 0.06); } .nav-logo { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.1rem; letter-spacing: 0.1em; color: var(--vault-gold); text-decoration: none; text-shadow: 0 0 20px rgba(212, 168, 83, 0.3); } .nav-links { display: flex; gap: 2rem; align-items: center; } .nav-links a { font-family: 'DM Sans', sans-serif; font-size: 0.85rem; font-weight: 400; color: var(--mist); text-decoration: none; letter-spacing: 0.05em; transition: color 0.2s ease; } .nav-links a:hover { color: var(--parchment); } .nav-links .nav-cta { color: var(--navy-deep); background: var(--vault-gold); padding: 0.5rem 1.25rem; border-radius: 2px; font-weight: 500; box-shadow: 0 0 15px rgba(212, 168, 83, 0.2); } .nav-links .nav-cta:hover { background: var(--vault-gold-bright); box-shadow: 0 0 25px rgba(232, 200, 122, 0.3); } /* ---- BROWSE ---- */ .browse-page { max-width: 900px; margin: 0 auto; padding: 8rem 2rem 6rem; position: relative; z-index: 2; } .browse-page::before { content: ''; position: fixed; top: -10%; left: -20%; width: 60vw; height: 60vw; background: radial-gradient(circle, rgba(232, 200, 122, 0.04) 0%, transparent 70%); pointer-events: none; } .page-header { margin-bottom: 3rem; } .page-tag { font-family: 'Syne', sans-serif; font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--vault-gold); margin-bottom: 1rem; } .page-title { font-family: 'Syne', sans-serif; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.1; margin-bottom: 1rem; letter-spacing: -0.02em; } .page-desc { color: var(--mist); font-size: 1.05rem; font-weight: 300; max-width: 500px; line-height: 1.7; } /* ---- TAGS FILTER ---- */ .tags-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(244, 240, 232, 0.06); } .tag-pill { font-family: 'DM Sans', sans-serif; font-size: 0.8rem; padding: 0.4rem 1rem; background: rgba(244, 240, 232, 0.04); border: 1px solid rgba(244, 240, 232, 0.08); color: var(--mist); cursor: pointer; transition: all 0.2s ease; text-decoration: none; } .tag-pill:hover { border-color: rgba(244, 240, 232, 0.2); color: var(--parchment); } .tag-pill.active { background: var(--vault-gold); border-color: var(--vault-gold); color: var(--parchment); } /* ---- STORY LIST ---- */ .stories-list { display: flex; flex-direction: column; gap: 1px; background: rgba(244, 240, 232, 0.04); } .story-card { background: var(--ink); padding: 2.5rem 2rem; text-decoration: none; color: inherit; display: block; transition: background 0.2s ease; position: relative; } .story-card:hover { background: rgba(244, 240, 232, 0.02); } .story-card:hover .story-title { color: var(--vault-gold); } .story-meta { display: flex; gap: 1.5rem; align-items: center; margin-bottom: 0.75rem; flex-wrap: wrap; } .story-meta-item { font-size: 0.78rem; color: var(--mist); font-weight: 300; letter-spacing: 0.03em; } .story-meta-item.ai-tool { color: var(--glow); font-weight: 400; } .story-title { font-family: 'Syne', sans-serif; font-size: 1.4rem; font-weight: 700; margin-bottom: 0.75rem; line-height: 1.3; color: var(--parchment); transition: color 0.2s ease; } .story-excerpt { color: rgba(244, 240, 232, 0.5); font-size: 0.95rem; font-weight: 300; line-height: 1.7; max-width: 650px; } .story-tags { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; } .story-tag { font-size: 0.7rem; padding: 0.2rem 0.6rem; background: rgba(244, 240, 232, 0.04); border: 1px solid rgba(244, 240, 232, 0.06); color: var(--mist); letter-spacing: 0.05em; } /* ---- EMPTY STATE ---- */ .empty-state { text-align: center; padding: 6rem 2rem; } .empty-state h3 { font-family: 'Syne', sans-serif; font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; } .empty-state p { color: var(--mist); font-weight: 300; margin-bottom: 2rem; font-size: 1.05rem; } .empty-state a { display: inline-block; font-family: 'Syne', sans-serif; font-size: 0.9rem; font-weight: 600; padding: 1rem 2.5rem; background: var(--vault-gold); color: var(--parchment); text-decoration: none; transition: all 0.2s ease; } .empty-state a:hover { background: var(--vault-gold-bright); box-shadow: 0 0 25px rgba(232, 200, 122, 0.3); } /* ---- PAGINATION ---- */ .pagination { display: flex; justify-content: center; gap: 1rem; margin-top: 3rem; padding-top: 2rem; } .pagination button { font-family: 'DM Sans', sans-serif; font-size: 0.85rem; padding: 0.6rem 1.5rem; background: rgba(244, 240, 232, 0.04); border: 1px solid rgba(244, 240, 232, 0.1); color: var(--mist); cursor: pointer; transition: all 0.2s ease; } .pagination button:hover:not(:disabled) { border-color: var(--vault-gold); color: var(--parchment); } .pagination button:disabled { opacity: 0.3; cursor: not-allowed; } .pagination .page-info { display: flex; align-items: center; font-size: 0.8rem; color: var(--mist); } /* ---- LOADING ---- */ .loading { text-align: center; padding: 4rem 2rem; color: var(--mist); font-weight: 300; } .loading-spinner { display: inline-block; width: 24px; height: 24px; border: 2px solid rgba(244, 240, 232, 0.1); border-top-color: var(--vault-gold); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 1rem; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 600px) { .browse-page { padding: 7rem 1.5rem 4rem; } .story-card { padding: 2rem 1.5rem; } .story-title { font-size: 1.2rem; } } </style> </head> <body> <div class="grain"></div> <nav class="nav"> <a href="/" class="nav-logo">CONTAINMENT PRESS</a> <div class="nav-links"> <a href="/stories">Browse</a> <a href="/submit" class="nav-cta">Submit Story</a> </div> </nav> <div class="browse-page"> <div class="page-header"> <div class="page-tag">The Library</div> <h1 class="page-title">Browse Stories</h1> <p class="page-desc">AI-crafted fiction, sorted by newest. Every story here was born from the collaboration between human imagination and artificial intelligence.</p> </div> <div id="tagsBar" class="tags-bar" style="display: none;"></div> <div id="storiesList"></div> <div id="pagination" class="pagination" style="display: none;"></div> </div> <script> let currentPage = 1; let currentTag = null; async function loadTags() { try { const res = await fetch('/api/tags'); const data = await res.json(); if (data.tags && data.tags.length > 0) { const bar = document.getElementById('tagsBar'); bar.style.display = 'flex'; let html = '<span class="tag-pill active" onclick="filterTag(null)">All</span>'; data.tags.forEach(tag => { html += '<span class="tag-pill" onclick="filterTag(\'' + tag.replace(/'/g, "\\'") + '\')">' + tag + '</span>'; }); bar.innerHTML = html; } } catch (e) { // Tags are optional, no big deal } } function filterTag(tag) { currentTag = tag; currentPage = 1; // Update active states document.querySelectorAll('.tag-pill').forEach(pill => { pill.classList.remove('active'); if ((!tag && pill.textContent === 'All') || (tag && pill.textContent === tag)) { pill.classList.add('active'); } }); loadStories(); } async function loadStories() { const container = document.getElementById('storiesList'); container.innerHTML = '<div class="loading"><div class="loading-spinner"></div><br>Loading stories...</div>'; try { let url = '/api/stories?page=' + currentPage + '&limit=20'; if (currentTag) url += '&tag=' + encodeURIComponent(currentTag); const res = await fetch(url); const data = await res.json(); if (!data.stories || data.stories.length === 0) { container.innerHTML = ` <div class="empty-state"> <h3>No stories yet</h3> <p>The library is waiting for its first tale. Be the first to publish.</p> <a href="/submit">Submit a Story</a> </div> `; document.getElementById('pagination').style.display = 'none'; return; } let html = '<div class="stories-list">'; data.stories.forEach(story => { const date = new Date(story.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); const excerpt = story.excerpt ? story.excerpt.replace(/</g, '<') + '...' : ''; const tags = (story.tags || []).map(t => '<span class="story-tag">' + t + '</span>').join(''); html += ` <a href="/story/${story.id}" class="story-card"> <div class="story-meta"> <span class="story-meta-item">${story.author_name || 'Anonymous'}</span> <span class="story-meta-item">${date}</span> <span class="story-meta-item">${story.reading_time_min} min read</span> ${story.ai_tool ? '<span class="story-meta-item ai-tool">' + story.ai_tool + '</span>' : ''} </div> <div class="story-title">${story.title.replace(/</g, '<')}</div> <div class="story-excerpt">${excerpt}</div> ${tags ? '<div class="story-tags">' + tags + '</div>' : ''} </a> `; }); html += '</div>'; container.innerHTML = html; // Pagination const pag = data.pagination; if (pag.pages > 1) { const pagEl = document.getElementById('pagination'); pagEl.style.display = 'flex'; pagEl.innerHTML = ` <button onclick="goPage(${pag.page - 1})" ${pag.page <= 1 ? 'disabled' : ''}>Previous</button> <span class="page-info">${pag.page} of ${pag.pages}</span> <button onclick="goPage(${pag.page + 1})" ${pag.page >= pag.pages ? 'disabled' : ''}>Next</button> `; } else { document.getElementById('pagination').style.display = 'none'; } } catch (err) { container.innerHTML = '<div class="empty-state"><h3>Something went wrong</h3><p>Could not load stories. Please try again.</p></div>'; } } function goPage(page) { currentPage = page; loadStories(); window.scrollTo({ top: 0, behavior: 'smooth' }); } // Init loadTags(); loadStories(); </script> </body> </html>