Mercurial
diff mrjunejune/src/jrpg/index.html @ 259:667156fcd3e3
Add dev-only cyberpunk JRPG page
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Wed, 05 Aug 2026 09:19:41 -0700 |
| parents | |
| children | 1f9877b637e9 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/mrjunejune/src/jrpg/index.html Wed Aug 05 09:19:41 2026 -0700 @@ -0,0 +1,166 @@ +<!doctype html> +<html lang="en" data-zen-theme="cyberpunk"> + <head> + <title>Shiba Quest | MrJuneJune</title> + {{/parts/base_head.html}} + <link rel="preload" href="/public/jrpg/bar-ink.webp" as="image"> + <link rel="stylesheet" href="/jrpg/jrpg.css"> + <script type="module" src="/jrpg/jrpg.js"></script> + </head> + <body class="jrpg-page"> + <main class="jrpg-main"> + <mjj-jrpg-shell class="jrpg-shell"> + <div class="jrpg-workspace"> + <section class="jrpg-scene" aria-label="Shiba Quest conversation"> + <mjj-jrpg-character state="default"> + <img data-character alt=""> + </mjj-jrpg-character> + + <mjj-jrpg-chat aria-labelledby="conversation-title"> + <div class="jrpg-panel-heading"> + <span aria-hidden="true">QUEST 01</span> + <h1 id="conversation-title">Conversations</h1> + </div> + <zen-message-scroller> + <div + class="jrpg-message-viewport" + data-zen-viewport + role="log" + aria-live="polite" + aria-relevant="additions" + > + <ol class="jrpg-messages" data-messages> + <li class="jrpg-message" data-speaker="Epi"> + <strong>Epi</strong> + <p>Welcome, traveler. Pick a destination or tell me what you are looking for.</p> + </li> + <li class="jrpg-message" data-speaker="System"> + <strong>System</strong> + <p>The Shiba terminal is ready.</p> + </li> + </ol> + </div> + </zen-message-scroller> + <p class="jrpg-next" aria-hidden="true"> + NEXT <zen-icon name="chevron-right" size="0.9em"></zen-icon> + </p> + </mjj-jrpg-chat> + </section> + + <section class="jrpg-utility" aria-label="Selected destination"> + <div class="jrpg-brand"> + <header> + <h1> + <a href="/" data-zen-link-effect="none">MrJuneJune</a> + </h1> + </header> + <p>SHIBA QUEST TERMINAL</p> + </div> + + <mjj-jrpg-preview data-selection="resume"> + <article class="jrpg-preview-panel" aria-live="polite"> + <p class="jrpg-preview-kicker" data-preview-kicker>CHARACTER RECORD</p> + <zen-heading size="xl"> + <h2 data-preview-title>Resume</h2> + </zen-heading> + <p data-preview-copy>Experience, projects, and the systems I have helped build.</p> + <dl class="jrpg-preview-stats"> + <div> + <dt>TYPE</dt> + <dd data-preview-type>Profile</dd> + </div> + <div> + <dt>STATUS</dt> + <dd>Available</dd> + </div> + </dl> + + <zen-dialog class="jrpg-preview-dialog"> + <zen-button appearance="plain" size="md"> + <button type="button" data-zen-trigger> + Inspect + <zen-icon name="search"></zen-icon> + </button> + </zen-button> + <dialog aria-labelledby="jrpg-dialog-title"> + <div class="jrpg-dialog-heading"> + <p>DESTINATION DATA</p> + <zen-button appearance="plain" size="md"> + <button type="button" data-zen-close aria-label="Close destination details"> + <zen-icon name="close"></zen-icon> + </button> + </zen-button> + </div> + <h2 id="jrpg-dialog-title" data-dialog-title>Resume</h2> + <p data-dialog-copy>Experience, projects, and the systems I have helped build.</p> + <zen-button appearance="plain" size="lg"> + <a href="/resume" data-preview-link> + Open destination + <zen-icon name="arrow-right"></zen-icon> + </a> + </zen-button> + </dialog> + </zen-dialog> + </article> + </mjj-jrpg-preview> + </section> + + <mjj-jrpg-composer> + <form class="jrpg-composer" data-composer> + <zen-field appearance="plain" size="lg"> + <label for="jrpg-message">Message</label> + <textarea + id="jrpg-message" + name="message" + rows="3" + maxlength="500" + placeholder="Ask Epi about this site..." + required + ></textarea> + </zen-field> + <zen-button appearance="plain" size="lg"> + <button type="submit"> + Send + <zen-icon name="arrow-right"></zen-icon> + </button> + </zen-button> + <p class="jrpg-composer-hint">Enter to send / Shift + Enter for a new line</p> + </form> + </mjj-jrpg-composer> + + <mjj-jrpg-menu> + <nav aria-label="Shiba Quest destinations"> + <p class="jrpg-menu-label">Menu</p> + <ul> + <li> + <zen-button appearance="plain" size="lg"> + <button type="button" data-preview="resume" aria-pressed="true"> + <zen-icon name="chevron-right"></zen-icon> + Resume + </button> + </zen-button> + </li> + <li> + <zen-button appearance="plain" size="lg"> + <button type="button" data-preview="tools" aria-pressed="false"> + <zen-icon name="chevron-right"></zen-icon> + Tools + </button> + </zen-button> + </li> + <li> + <zen-button appearance="plain" size="lg"> + <button type="button" data-preview="blog" aria-pressed="false"> + <zen-icon name="chevron-right"></zen-icon> + Blogs + </button> + </zen-button> + </li> + </ul> + </nav> + </mjj-jrpg-menu> + </div> + </mjj-jrpg-shell> + </main> + </body> +</html>