Mercurial

comparison mrjunejune/src/jrpg/index.html @ 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
comparison
equal deleted inserted replaced
260:1f9877b637e9 261:b401627fc49e
16 <img data-character alt=""> 16 <img data-character alt="">
17 </mjj-jrpg-character> 17 </mjj-jrpg-character>
18 18
19 <mjj-jrpg-chat aria-labelledby="conversation-title"> 19 <mjj-jrpg-chat aria-labelledby="conversation-title">
20 <div class="jrpg-panel-heading"> 20 <div class="jrpg-panel-heading">
21 <span aria-hidden="true">QUEST 01</span>
22 <h1 id="conversation-title">Conversations</h1> 21 <h1 id="conversation-title">Conversations</h1>
23 </div> 22 </div>
24 <zen-message-scroller> 23 <zen-message-scroller>
25 <div 24 <div
26 class="jrpg-message-viewport" 25 class="jrpg-message-viewport"
27 data-zen-viewport 26 data-zen-viewport
28 role="log" 27 role="log"
29 aria-live="polite" 28 aria-live="polite"
30 aria-relevant="additions" 29 aria-relevant="additions text"
31 > 30 >
32 <ol class="jrpg-messages" data-messages> 31 <ol class="jrpg-messages" data-messages>
33 <li class="jrpg-message" data-speaker="Epi"> 32 <li class="jrpg-message" data-speaker="Epi" data-turn-group="start">
34 <strong>Epi</strong> 33 <strong>Epi</strong>
35 <p>Welcome, traveler. Pick a destination or tell me what you are looking for.</p> 34 <p>Welcome, traveler. Pick a destination or tell me what you are looking for.</p>
36 </li> 35 </li>
37 <li class="jrpg-message" data-speaker="System"> 36 <li class="jrpg-message" data-speaker="System" data-turn-group="start">
38 <strong>System</strong> 37 <strong>System</strong>
39 <p>The Shiba terminal is ready.</p> 38 <p>The Shiba terminal is ready.</p>
40 </li> 39 </li>
41 </ol> 40 </ol>
42 </div> 41 </div>
43 </zen-message-scroller> 42 </zen-message-scroller>
44 <p class="jrpg-next" aria-hidden="true"> 43 <nav class="jrpg-turn-navigation" aria-label="Conversation turns">
45 NEXT <zen-icon name="chevron-right" size="0.9em"></zen-icon> 44 <zen-button appearance="plain" size="sm">
46 </p> 45 <button type="button" data-turn-previous aria-label="Previous turn" disabled>
46 <zen-icon name="chevron-left"></zen-icon>
47 Previous
48 </button>
49 </zen-button>
50 <span data-turn-position aria-live="polite">START</span>
51 <zen-button appearance="plain" size="sm">
52 <button type="button" data-turn-next aria-label="Next turn" disabled>
53 Next
54 <zen-icon name="chevron-right"></zen-icon>
55 </button>
56 </zen-button>
57 </nav>
47 </mjj-jrpg-chat> 58 </mjj-jrpg-chat>
48 </section> 59 </section>
49 60
50 <section class="jrpg-utility" aria-label="Selected destination"> 61 <section class="jrpg-utility" aria-label="Selected destination">
51 <div class="jrpg-brand"> 62 <div class="jrpg-brand">
62 <p class="jrpg-preview-kicker" data-preview-kicker>CHARACTER RECORD</p> 73 <p class="jrpg-preview-kicker" data-preview-kicker>CHARACTER RECORD</p>
63 <zen-heading size="xl"> 74 <zen-heading size="xl">
64 <h2 data-preview-title>Resume</h2> 75 <h2 data-preview-title>Resume</h2>
65 </zen-heading> 76 </zen-heading>
66 <p data-preview-copy>Experience, projects, and the systems I have helped build.</p> 77 <p data-preview-copy>Experience, projects, and the systems I have helped build.</p>
78 <ul class="jrpg-work-showcase" data-work-showcase>
79 <li>
80 <a href="https://www.microsoft.com/en-us/microsoft-copilot/blog/2026/02/26/copilot-tasks-from-answers-to-actions/">
81 <span>Copilot Tasks</span>
82 <small>Agentic execution</small>
83 </a>
84 </li>
85 <li>
86 <a href="https://www.cio.com/article/3977098/microsoft-doubles-down-on-multi-model-ai-as-it-builds-a-copilot-super-app.html">
87 <span>Copilot SuperApp</span>
88 <small>AI platform</small>
89 </a>
90 </li>
91 </ul>
67 <dl class="jrpg-preview-stats"> 92 <dl class="jrpg-preview-stats">
68 <div> 93 <div>
69 <dt>TYPE</dt> 94 <dt>TYPE</dt>
70 <dd data-preview-type>Profile</dd> 95 <dd data-preview-type>Profile</dd>
71 </div> 96 </div>
80 <button type="button" data-zen-trigger> 105 <button type="button" data-zen-trigger>
81 Inspect 106 Inspect
82 <zen-icon name="search"></zen-icon> 107 <zen-icon name="search"></zen-icon>
83 </button> 108 </button>
84 </zen-button> 109 </zen-button>
85 <dialog aria-labelledby="jrpg-dialog-title"> 110 <dialog class="jrpg-resume-dialog" aria-labelledby="jrpg-dialog-title">
86 <div class="jrpg-dialog-heading"> 111 <div class="jrpg-dialog-heading">
87 <p>DESTINATION DATA</p> 112 <p>DESTINATION DATA</p>
88 <zen-button appearance="plain" size="md"> 113 <zen-button appearance="plain" size="md">
89 <button type="button" data-zen-close aria-label="Close destination details"> 114 <button type="button" data-zen-close aria-label="Close destination details">
90 <zen-icon name="close"></zen-icon> 115 <zen-icon name="close"></zen-icon>
91 </button> 116 </button>
92 </zen-button> 117 </zen-button>
93 </div> 118 </div>
94 <h2 id="jrpg-dialog-title" data-dialog-title>Resume</h2> 119 <h2 id="jrpg-dialog-title" data-dialog-title>Resume</h2>
95 <p data-dialog-copy>Experience, projects, and the systems I have helped build.</p> 120 <p data-dialog-copy>Experience, projects, and the systems I have helped build.</p>
96 <zen-button appearance="plain" size="lg"> 121 <section
97 <a href="/resume" data-preview-link> 122 class="jrpg-resume-dossier"
98 Open destination 123 data-resume-dossier
99 <zen-icon name="arrow-right"></zen-icon> 124 aria-label="Resume dossier"
100 </a> 125 >
101 </zen-button> 126 <p data-resume-status>Loading resume dossier...</p>
127 <div data-resume-content></div>
128 </section>
129 <div class="jrpg-dialog-actions">
130 <zen-button appearance="plain" size="lg">
131 <a href="/resume" data-preview-link>
132 Open full page
133 <zen-icon name="arrow-right"></zen-icon>
134 </a>
135 </zen-button>
136 <zen-button appearance="plain" size="lg" data-resume-download>
137 <a href="/public/resume.pdf">
138 Download PDF
139 <zen-icon name="download"></zen-icon>
140 </a>
141 </zen-button>
142 </div>
102 </dialog> 143 </dialog>
103 </zen-dialog> 144 </zen-dialog>
104 </article> 145 </article>
105 </mjj-jrpg-preview> 146 </mjj-jrpg-preview>
106 </section> 147 </section>
116 maxlength="500" 157 maxlength="500"
117 placeholder="Ask Epi about this site..." 158 placeholder="Ask Epi about this site..."
118 required 159 required
119 ></textarea> 160 ></textarea>
120 </zen-field> 161 </zen-field>
121 <zen-button appearance="plain" size="lg"> 162 <div class="jrpg-composer-actions">
122 <button type="submit"> 163 <zen-button appearance="plain" size="lg">
123 Send 164 <button type="submit">
124 <zen-icon name="arrow-right"></zen-icon> 165 Send
125 </button> 166 <zen-icon name="arrow-right"></zen-icon>
126 </zen-button> 167 </button>
127 <zen-button appearance="plain" size="lg" data-cancel-control hidden> 168 </zen-button>
128 <button type="button" data-cancel> 169 <zen-button appearance="plain" size="lg" data-cancel-control hidden>
129 Cancel 170 <button type="button" data-cancel>
130 <zen-icon name="close"></zen-icon> 171 Cancel
131 </button> 172 <zen-icon name="close"></zen-icon>
132 </zen-button> 173 </button>
174 </zen-button>
175 </div>
133 <p class="jrpg-composer-hint">Enter to send / Shift + Enter for a new line</p> 176 <p class="jrpg-composer-hint">Enter to send / Shift + Enter for a new line</p>
134 </form> 177 </form>
135 </mjj-jrpg-composer> 178 </mjj-jrpg-composer>
136 179
137 <mjj-jrpg-menu> 180 <mjj-jrpg-menu>