Mercurial
diff mrjunejune/src/jrpg/index.html @ 263:ee04e4e69fed
Add functional JRPG frame and tools
Add full-screen background_2 apertures, functional frame chrome, card-driven details, dual-window tools, live conversion workflows, and bounded cleanup for generated downloads.
Co-authored-by: Copilot <[email protected]>
| author | MrJuneJune <mrjunejune@users.noreply.github.com> |
|---|---|
| date | Thu, 06 Aug 2026 11:31:30 -0700 |
| parents | 0f45474c1b1a |
| children | 04fee26ecce0 |
line wrap: on
line diff
--- a/mrjunejune/src/jrpg/index.html Thu Aug 06 04:08:45 2026 -0700 +++ b/mrjunejune/src/jrpg/index.html Thu Aug 06 11:31:30 2026 -0700 @@ -3,6 +3,7 @@ <head> <title>Shiba Quest | MrJuneJune</title> {{/parts/base_head.html}} + <link rel="preload" href="/public/jrpg/background-frame-2.webp" as="image"> <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> @@ -11,6 +12,47 @@ <main class="jrpg-main"> <mjj-jrpg-shell class="jrpg-shell"> <div class="jrpg-workspace"> + <div class="jrpg-brand"> + <header> + <h1> + <a href="/" data-zen-link-effect="none">MrJuneJune</a> + </h1> + </header> + </div> + <nav class="jrpg-frame-controls" aria-label="Window controls"> + <zen-button appearance="plain" size="xs"> + <button + type="button" + data-frame-minimize + aria-label="Minimize interface" + aria-pressed="false" + > + <zen-icon name="arrow-down"></zen-icon> + </button> + </zen-button> + <zen-button appearance="plain" size="xs"> + <button + type="button" + data-frame-fullscreen + aria-label="Toggle fullscreen" + aria-pressed="false" + > + <zen-icon name="external"></zen-icon> + </button> + </zen-button> + <zen-button appearance="plain" size="xs"> + <a href="/" aria-label="Close interface and return home"> + <zen-icon name="close"></zen-icon> + </a> + </zen-button> + </nav> + <footer class="jrpg-frame-telemetry" aria-label="System telemetry"> + <span aria-label="Temperature unavailable">N/A</span> + <span aria-label="User June">JUNE</span> + <span data-frame-network aria-label="Status online">ONLINE</span> + <time data-frame-uptime aria-label="Uptime">00:00:00</time> + </footer> + <section class="jrpg-scene" aria-label="Shiba Quest conversation"> <mjj-jrpg-character state="default"> <img data-character alt=""> @@ -59,15 +101,6 @@ </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> @@ -89,32 +122,26 @@ </a> </li> </ul> - <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 appearance="plain" size="xs" data-dialog-trigger-owner hidden> + <button type="button" data-zen-trigger tabindex="-1" aria-hidden="true"></button> </zen-button> <dialog class="jrpg-detail-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 class="jrpg-dialog-heading-actions"> + <zen-button appearance="plain" size="md"> + <a href="/resume" data-preview-link> + Open page + <zen-icon name="external"></zen-icon> + </a> + </zen-button> + <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> </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> @@ -143,13 +170,18 @@ <div data-blog-content></div> </article> </section> - <div class="jrpg-dialog-actions"> - <zen-button appearance="plain" size="lg"> - <a href="/resume" data-preview-link> - Open full page - <zen-icon name="arrow-right"></zen-icon> - </a> - </zen-button> + <section + class="jrpg-tool-browser" + data-tool-browser + aria-label="Tool workspace" + hidden + > + <article> + <p data-tool-status>Select a tool to inspect.</p> + <div data-tool-content></div> + </article> + </section> + <div class="jrpg-dialog-actions" data-dialog-actions> <zen-button appearance="plain" size="lg" data-resume-download> <a href="/public/resume.pdf"> Download PDF @@ -177,13 +209,13 @@ ></textarea> </zen-field> <div class="jrpg-composer-actions"> - <zen-button appearance="plain" size="lg"> + <zen-button appearance="plain" size="sm"> <button type="submit"> Send <zen-icon name="arrow-right"></zen-icon> </button> </zen-button> - <zen-button appearance="plain" size="lg" data-cancel-control hidden> + <zen-button appearance="plain" size="sm" data-cancel-control hidden> <button type="button" data-cancel> Cancel <zen-icon name="close"></zen-icon> @@ -199,7 +231,7 @@ <p class="jrpg-menu-label">Menu</p> <ul> <li> - <zen-button appearance="plain" size="lg"> + <zen-button appearance="plain" size="sm"> <button type="button" data-preview="resume" aria-pressed="true"> <zen-icon name="chevron-right"></zen-icon> Resume @@ -207,7 +239,7 @@ </zen-button> </li> <li> - <zen-button appearance="plain" size="lg"> + <zen-button appearance="plain" size="sm"> <button type="button" data-preview="tools" aria-pressed="false"> <zen-icon name="chevron-right"></zen-icon> Tools @@ -215,7 +247,7 @@ </zen-button> </li> <li> - <zen-button appearance="plain" size="lg"> + <zen-button appearance="plain" size="sm"> <button type="button" data-preview="blog" aria-pressed="false"> <zen-icon name="chevron-right"></zen-icon> Blogs