| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <title>Bureaucat — the cat that reads scary Swedish letters</title> |
| <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=Fredoka:wght@400;500;600;700&display=swap" rel="stylesheet" /> |
| <link rel="stylesheet" href="/static/style.css?v=20260614g" /> |
| <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🐱</text></svg>" /> |
| </head> |
| <body> |
| |
| <header class="hero"> |
| <img src="/assets/mascot/idle.png" alt="Bureaucat, a cat civil servant" class="hero__cat" id="hero-cat" /> |
| <div class="hero__text"> |
| <h1>Bureaucat</h1> |
| <p>Upload a scary Swedish letter. I'll tell you how worried to be — and what to do.</p> |
| </div> |
| </header> |
|
|
| <main> |
| |
| <section class="card upload-card" id="upload-card"> |
| <div class="dropzone" id="dropzone" role="button" tabindex="0" |
| aria-label="Upload letter — images or PDF"> |
| <input type="file" id="file-input" accept=".jpg,.jpeg,.png,.pdf" multiple hidden /> |
| <div class="dropzone__idle" id="dropzone-idle"> |
| <span class="dropzone__icon" id="dz-icon">📬</span> |
| <strong id="dz-title">Drop a saved photo or PDF here</strong> |
| <span class="dropzone__hint" id="dz-hint">upload an existing image/PDF file · multi-page is fine · or click to browse</span> |
| </div> |
| <ul class="dropzone__files" id="file-list" hidden></ul> |
| </div> |
| <div class="upload-card__controls"> |
| <label class="beginner-toggle"> |
| <input type="checkbox" id="beginner" checked /> |
| <span class="beginner-toggle__track" aria-hidden="true"></span> |
| I'm new to Sweden — explain the institutions & jargon |
| </label> |
| <div class="upload-card__buttons"> |
| <button class="cta" id="analyze-btn" disabled>🐾 Read it for me!</button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <div class="read-source" id="read-source" hidden> |
| <img class="read-source__thumb" id="read-source-thumb" alt="preview of the letter you read" hidden /> |
| <div class="read-source__meta"> |
| <span class="read-source__eyebrow">📄 Verdict for</span> |
| <strong id="read-source-name"></strong> |
| </div> |
| </div> |
|
|
| |
| <section class="stage" id="stage"> |
| <div class="stage__mascot"> |
| <img src="/assets/mascot/idle.png" alt="Bureaucat is idle" id="mascot" class="mascot mascot--idle" /> |
| <div class="stage__status" id="status-line">Awaiting your scary letter.</div> |
| </div> |
| <div class="stage__verdict"> |
| <div class="panic" id="panic"> |
| <div class="panic__placeholder">🐾 Feed me a letter and I'll tell you how worried to be</div> |
| </div> |
| <div class="quip" id="quip" hidden></div> |
| </div> |
| </section> |
|
|
| |
| <div class="deadline-banner" id="deadline-banner" hidden></div> |
|
|
| |
| <section class="skeleton" id="skeleton" hidden aria-hidden="true"> |
| <div class="skel-card skel-card--tall"></div> |
| <div class="skel-card"></div> |
| <div class="skel-card"></div> |
| <div class="skel-card"></div> |
| </section> |
|
|
| |
| <section class="results" id="results" hidden> |
| <div class="card result-card result-card--tldr"> |
| <h2>📨 The short version</h2> |
| <div class="prose" id="tldr"></div> |
| </div> |
| <div class="card result-card"> |
| <h2>🏛️ Why you got this</h2> |
| <div class="prose" id="why"></div> |
| </div> |
| <div class="card result-card"> |
| <h2>✅ What you need to do</h2> |
| <div class="checklist" id="actions"></div> |
| </div> |
| <div class="card result-card"> |
| <h2>⏰ Deadlines & money</h2> |
| <ul class="deadlines" id="deadlines"></ul> |
| <div class="grounding" id="grounding" hidden></div> |
| </div> |
| </section> |
|
|
| |
| <div class="share-row" id="share-row" hidden> |
| <button type="button" class="cta cta--share" id="share-btn">📤 Share my panic level</button> |
| </div> |
|
|
| |
| <section class="card refusal" id="refusal" hidden> |
| <h2 id="refusal-title">🙀 Hold on…</h2> |
| <p class="prose" id="refusal-guidance"></p> |
| </section> |
|
|
| |
| <section class="gallery-section"> |
| <h2>👇 No scary letter handy? Borrow one of mine</h2> |
| <p class="gallery-section__hint">Tap any example — I've already read these, so it costs you <strong>zero GPU</strong>.</p> |
| <div class="gallery" id="gallery"></div> |
| </section> |
| </main> |
|
|
| <footer class="footer"> |
| <p>Everything runs on a small model inside this Space. Nothing is sent to external APIs. |
| Nothing is stored after your session ends.</p> |
| <p>Bureaucat explains letters — it does not give legal advice. |
| For legal matters, consult a qualified professional.</p> |
| </footer> |
|
|
| <button id="sound-toggle" class="sound-toggle" type="button" title="Sound on — click to mute">🔊</button> |
|
|
| <script type="module" src="/static/app.js?v=20260614g"></script> |
| </body> |
| </html> |
|
|
