Mercurial

view mrjunejune/test/snapshots/jrpg.snapshot @ 261:b401627fc49e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add JRPG mock flows and interactive previews Add scripted mock SSE commands, custom event forwarding, animated chat turns, full-height message navigation, and a cyberpunk resume dossier. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <mrjunejune@users.noreply.github.com>
date Wed, 05 Aug 2026 20:38:32 -0700
parents 1f9877b637e9
children 0f45474c1b1a
line wrap: on
line source

<!doctype html>
<html lang="en" data-zen-theme="cyberpunk">
  <head>
    <title>Shiba Quest | MrJuneJune</title>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#f7f3e8">
<link rel="icon" type="image/svg+xml" href="/public/epi_all_colors.svg">
<link rel="manifest" href="/public/manifest.json">
<link rel="apple-touch-icon" href="/public/epi_all_colors.svg">

<link rel="preload" href="/public/fonts/Roboto-Regular.ttf" as="font"  crossorigin>
<link rel="preload" href="/public/fonts/Roboto-Thin.ttf"as="font" crossorigin>

<!-- <link rel="preload" href="/public/fonts/atkinson-regular.woff" as="font" type="font/woff" crossorigin> -->
<!-- <link rel="preload" href="/public/fonts/atkinson-bold.woff" as="font" type="font/woff" crossorigin> -->

<!-- <link rel="preload" href="/public/fonts/more-sugar.extras.otf" as="font" type="font/otf" crossorigin> -->
<link rel="preload" href="/public/fonts/more-sugar.regular.otf" as="font" type="font/otf" crossorigin>
<link rel="preload" href="/public/fonts/more-sugar.thin.otf" as="font" type="font/otf" crossorigin>
<link rel="preload" href="/public/epi_all_colors.svg" as="image">

<link rel="stylesheet" href="/public/design-system/styles/tokens.css" />
<link rel="stylesheet" href="/public/design-system/styles/themes.css" />
<link rel="preload" href="/base.css" as="style" />
<link rel="stylesheet" href="/base.css" />
<link rel="stylesheet" href="/public/design-system/styles/components.css" />
<script
  type="module"
  src="/public/design-system/components/index.js"
></script>

<script src="/public/pwa-register.js" defer></script>

    <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">
                <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 text"
                >
                  <ol class="jrpg-messages" data-messages>
                    <li class="jrpg-message" data-speaker="Epi" data-turn-group="start">
                      <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" data-turn-group="start">
                      <strong>System</strong>
                      <p>The Shiba terminal is ready.</p>
                    </li>
                  </ol>
                </div>
              </zen-message-scroller>
              <nav class="jrpg-turn-navigation" aria-label="Conversation turns">
                <zen-button appearance="plain" size="sm">
                  <button type="button" data-turn-previous aria-label="Previous turn" disabled>
                    <zen-icon name="chevron-left"></zen-icon>
                    Previous
                  </button>
                </zen-button>
                <span data-turn-position aria-live="polite">START</span>
                <zen-button appearance="plain" size="sm">
                  <button type="button" data-turn-next aria-label="Next turn" disabled>
                    Next
                    <zen-icon name="chevron-right"></zen-icon>
                  </button>
                </zen-button>
              </nav>
            </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>
                <ul class="jrpg-work-showcase" data-work-showcase>
                  <li>
                    <a href="https://www.microsoft.com/en-us/microsoft-copilot/blog/2026/02/26/copilot-tasks-from-answers-to-actions/">
                      <span>Copilot Tasks</span>
                      <small>Agentic execution</small>
                    </a>
                  </li>
                  <li>
                    <a href="https://www.cio.com/article/3977098/microsoft-doubles-down-on-multi-model-ai-as-it-builds-a-copilot-super-app.html">
                      <span>Copilot SuperApp</span>
                      <small>AI platform</small>
                    </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>
                  <dialog class="jrpg-resume-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>
                    <section
                      class="jrpg-resume-dossier"
                      data-resume-dossier
                      aria-label="Resume dossier"
                    >
                      <p data-resume-status>Loading resume dossier...</p>
                      <div data-resume-content></div>
                    </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>
                      <zen-button appearance="plain" size="lg" data-resume-download>
                        <a href="/public/resume.pdf">
                          Download PDF
                          <zen-icon name="download"></zen-icon>
                        </a>
                      </zen-button>
                    </div>
                  </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>
              <div class="jrpg-composer-actions">
                <zen-button appearance="plain" size="lg">
                  <button type="submit">
                    Send
                    <zen-icon name="arrow-right"></zen-icon>
                  </button>
                </zen-button>
                <zen-button appearance="plain" size="lg" data-cancel-control hidden>
                  <button type="button" data-cancel>
                    Cancel
                    <zen-icon name="close"></zen-icon>
                  </button>
                </zen-button>
              </div>
              <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>