Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"> | |
| <title>Curtain Call | Prototype guide</title> | |
| <style> | |
| :root{color-scheme:light;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#243b32;background:#f4f4ed;line-height:1.65} | |
| *{box-sizing:border-box}body{margin:0}main{max-width:850px;margin:auto;padding:40px 24px 56px}h1{font-size:clamp(28px,5vw,40px);line-height:1.2;letter-spacing:-1px;margin:12px 0 16px}h2{font-size:21px;margin:30px 0 10px}h3{font-size:17px;margin:0 0 7px}p{margin:0 0 14px}a{color:#7c3929;text-underline-offset:3px}a:focus-visible{outline:3px solid #a74d36;outline-offset:4px}.eyebrow{font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:#526951}.open{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 18px;border-radius:10px;background:#a74d36;color:#fff8ee;text-decoration:none;font-weight:600;margin:3px 0 8px}.tasks{display:grid;gap:14px}.task{background:#e7ecdf;border:1px solid #bdc8b6;border-radius:14px;padding:18px}.task p:last-child{margin:0}.task a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}code{font-size:.95em;background:#e4e9dc;border-radius:4px;padding:2px 5px}.small{font-size:14px;color:#465b4b}.sources{padding-top:18px;border-top:1px solid #c8d0c1;margin-top:28px}.sources a{display:inline-block;padding:5px 0}ul{padding-left:22px;margin:0}li{margin:6px 0}@media(max-width:500px){main{padding:28px 20px 40px}} | |
| main{padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))} | |
| @media(max-width:500px){main{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}} | |
| </style> | |
| </head> | |
| <body> | |
| <main> | |
| <p class="eyebrow">Curtain Call · Prototype guide</p> | |
| <h1>A little time to unwind.</h1> | |
| <p>Choose a viewing window, browse, and finish on your own terms. Curtain Call is designed for bedtime viewing at home or in a dorm, on a touch phone or desktop browser.</p> | |
| <a class="open" href="index.html?review=1&demo=1">Open the demonstration tools</a> | |
| <h2>Try the three tasks</h2> | |
| <div class="tasks"> | |
| <section class="task"><h3>T1 · Finish on time</h3><p>Choose 15 minutes and start. Browse, reach time-up, then choose <strong>End this session</strong>. Playback and timing stop, and the session summary appears.</p><p><a href="index.html?task=T1&review=1&demo=1">Open T1 →</a></p></section> | |
| <section class="task"><h3>T2 · Chat and continue</h3><p>Choose 20 minutes. Open chat about a clip, reply and try a follow-up, then close chat. At time-up, request five more minutes and confirm the new total of 25. Finish at the next stopping point. Cancelling the extension keeps the existing plan.</p><p><a href="index.html?task=T2&review=1&demo=1">Open T2 →</a></p></section> | |
| <section class="task"><h3>T3 · Your usual plan, tonight's exception</h3><p>Save 30 minutes, <strong>Gentle</strong> and <strong>Brief</strong> as your usual plan. Choose 20 minutes for tonight and complete the session. The summary keeps your usual 30-minute plan for next time.</p><p><a href="index.html?task=T3&review=1&demo=1">Open T3 →</a></p></section> | |
| </div> | |
| <h2>Timing and controls</h2> | |
| <p>Tap the video to pause or resume. The companion occasionally shares a brief thought after a clip, without stopping playback. Clips play in sequence until time is up; swipe up or choose <strong>Next</strong> to skip ahead, and swipe down to go back. On a computer, scroll over the video to change clips. Drag the progress bar to seek. Sound follows your device volume. Tap <strong>Comments</strong> to read or add a comment. On a keyboard, use ↓ for next, ↑ for previous, Tab and Enter for controls, and Escape to close a dialog.</p> | |
| <p>The timer starts after you confirm and continues during chat, paused playback and settings. At time-up, the companion shows a reminder in the chosen tone and length while a playing clip finishes. You can end now or review five more minutes; otherwise the ending screen appears after the clip. Extra seconds used to finish the clip are recorded separately. Each extension needs confirmation and keeps the current clip, conversation and draft.</p> | |
| <p>Drag or flick the 0–180 minute ruler, choose a preset, or enter a duration such as “20 minutes” or “half an hour”. Select at least 1 minute to start. In Reminders, <strong>Restore defaults</strong> selects 15 minutes, Direct and Detailed; save to apply the choices to future sessions. Chat allows 160 characters per message; longer drafts stay intact for editing.</p> | |
| <h2>Quick demonstrations</h2> | |
| <p><strong>Demo tools</strong> lets you switch tasks and skip waiting. <strong>Fast-forward 5 min</strong> simulates elapsed time. <strong>Jump to time-up</strong> shows the reminder; the current clip can finish. Neither adds time to the plan. Reset asks before clearing that task's progress and usual plan.</p> | |
| <p>For a clean recording, open <a href="index.html">the phone interface</a>.</p> | |
| <h2>About this version</h2> | |
| <p>HTML, CSS and JavaScript provide the interface. Ten short clips, predefined replies and sample comments simulate the feed and conversation. Some source comments are translated. Comments you add are saved in this browser and are not shared with other devices. Each task saves preferences, drafts and progress in this browser. Refresh restores the session with playback paused.</p> | |
| <p>A production version could use a mobile app and a backend for video delivery, profiles and conversation. It would need reliable media handling, privacy controls and secure storage; this prototype uses sample content and browser storage instead.</p> | |
| <p class="small">Playback needs a user action and may pause when the browser is suspended. Closing the page provides no system reminder. Saved data stays in this browser. Keyboard focus, field errors and accessible timer descriptions are included; physical-device and screen-reader behaviour still needs checking.</p> | |
| <p class="sources small">Source clips: <a href="https://www.bilibili.com/video/BV1oyNV67Ets/">Naishan Susu</a> · <a href="https://www.bilibili.com/video/BV1m54116785/">shijimi_mike</a> · <a href="https://www.pexels.com/video/cat-ignoring-weird-sound-5089550/">Videas Cl</a> · <a href="https://www.pexels.com/video/hands-of-person-typing-on-a-typewriter-12883911/">Stefan</a> · <a href="https://www.pexels.com/video/birds-chirping-in-the-morning-5203741/">Jo Villamiel</a> · <a href="https://www.pexels.com/video/green-trees-with-birds-chirping-4466658/">Üzer Ok</a> · <a href="https://www.pexels.com/video/sound-of-birds-chirping-4510283/">Martina Tomšič</a> · <a href="https://www.pexels.com/video/water-flowing-in-the-river-14622293/">Deeana Arts</a> · <a href="https://www.pexels.com/video/relaxing-sound-of-the-ocean-waves-15106380/">School of Kamma</a> · <a href="https://www.bilibili.com/video/BV1Xp4y157Xv/">Rainy window</a></p> | |
| </main> | |
| </body> | |
| </html> | |