Mercurial

comparison mrjunejune/src/jrpg/index.html @ 263:ee04e4e69fed

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
comparison
equal deleted inserted replaced
262:0f45474c1b1a 263:ee04e4e69fed
1 <!doctype html> 1 <!doctype html>
2 <html lang="en" data-zen-theme="cyberpunk"> 2 <html lang="en" data-zen-theme="cyberpunk">
3 <head> 3 <head>
4 <title>Shiba Quest | MrJuneJune</title> 4 <title>Shiba Quest | MrJuneJune</title>
5 {{/parts/base_head.html}} 5 {{/parts/base_head.html}}
6 <link rel="preload" href="/public/jrpg/background-frame-2.webp" as="image">
6 <link rel="preload" href="/public/jrpg/bar-ink.webp" as="image"> 7 <link rel="preload" href="/public/jrpg/bar-ink.webp" as="image">
7 <link rel="stylesheet" href="/jrpg/jrpg.css"> 8 <link rel="stylesheet" href="/jrpg/jrpg.css">
8 <script type="module" src="/jrpg/jrpg.js"></script> 9 <script type="module" src="/jrpg/jrpg.js"></script>
9 </head> 10 </head>
10 <body class="jrpg-page"> 11 <body class="jrpg-page">
11 <main class="jrpg-main"> 12 <main class="jrpg-main">
12 <mjj-jrpg-shell class="jrpg-shell"> 13 <mjj-jrpg-shell class="jrpg-shell">
13 <div class="jrpg-workspace"> 14 <div class="jrpg-workspace">
15 <div class="jrpg-brand">
16 <header>
17 <h1>
18 <a href="/" data-zen-link-effect="none">MrJuneJune</a>
19 </h1>
20 </header>
21 </div>
22 <nav class="jrpg-frame-controls" aria-label="Window controls">
23 <zen-button appearance="plain" size="xs">
24 <button
25 type="button"
26 data-frame-minimize
27 aria-label="Minimize interface"
28 aria-pressed="false"
29 >
30 <zen-icon name="arrow-down"></zen-icon>
31 </button>
32 </zen-button>
33 <zen-button appearance="plain" size="xs">
34 <button
35 type="button"
36 data-frame-fullscreen
37 aria-label="Toggle fullscreen"
38 aria-pressed="false"
39 >
40 <zen-icon name="external"></zen-icon>
41 </button>
42 </zen-button>
43 <zen-button appearance="plain" size="xs">
44 <a href="/" aria-label="Close interface and return home">
45 <zen-icon name="close"></zen-icon>
46 </a>
47 </zen-button>
48 </nav>
49 <footer class="jrpg-frame-telemetry" aria-label="System telemetry">
50 <span aria-label="Temperature unavailable">N/A</span>
51 <span aria-label="User June">JUNE</span>
52 <span data-frame-network aria-label="Status online">ONLINE</span>
53 <time data-frame-uptime aria-label="Uptime">00:00:00</time>
54 </footer>
55
14 <section class="jrpg-scene" aria-label="Shiba Quest conversation"> 56 <section class="jrpg-scene" aria-label="Shiba Quest conversation">
15 <mjj-jrpg-character state="default"> 57 <mjj-jrpg-character state="default">
16 <img data-character alt=""> 58 <img data-character alt="">
17 </mjj-jrpg-character> 59 </mjj-jrpg-character>
18 60
57 </nav> 99 </nav>
58 </mjj-jrpg-chat> 100 </mjj-jrpg-chat>
59 </section> 101 </section>
60 102
61 <section class="jrpg-utility" aria-label="Selected destination"> 103 <section class="jrpg-utility" aria-label="Selected destination">
62 <div class="jrpg-brand">
63 <header>
64 <h1>
65 <a href="/" data-zen-link-effect="none">MrJuneJune</a>
66 </h1>
67 </header>
68 <p>SHIBA QUEST TERMINAL</p>
69 </div>
70
71 <mjj-jrpg-preview data-selection="resume"> 104 <mjj-jrpg-preview data-selection="resume">
72 <article class="jrpg-preview-panel" aria-live="polite"> 105 <article class="jrpg-preview-panel" aria-live="polite">
73 <p class="jrpg-preview-kicker" data-preview-kicker>CHARACTER RECORD</p> 106 <p class="jrpg-preview-kicker" data-preview-kicker>CHARACTER RECORD</p>
74 <zen-heading size="xl"> 107 <zen-heading size="xl">
75 <h2 data-preview-title>Resume</h2> 108 <h2 data-preview-title>Resume</h2>
87 <span>Copilot SuperApp</span> 120 <span>Copilot SuperApp</span>
88 <small>AI platform</small> 121 <small>AI platform</small>
89 </a> 122 </a>
90 </li> 123 </li>
91 </ul> 124 </ul>
92 <dl class="jrpg-preview-stats">
93 <div>
94 <dt>TYPE</dt>
95 <dd data-preview-type>Profile</dd>
96 </div>
97 <div>
98 <dt>STATUS</dt>
99 <dd>Available</dd>
100 </div>
101 </dl>
102
103 <zen-dialog class="jrpg-preview-dialog"> 125 <zen-dialog class="jrpg-preview-dialog">
104 <zen-button appearance="plain" size="md"> 126 <zen-button appearance="plain" size="xs" data-dialog-trigger-owner hidden>
105 <button type="button" data-zen-trigger> 127 <button type="button" data-zen-trigger tabindex="-1" aria-hidden="true"></button>
106 Inspect
107 <zen-icon name="search"></zen-icon>
108 </button>
109 </zen-button> 128 </zen-button>
110 <dialog class="jrpg-detail-dialog" aria-labelledby="jrpg-dialog-title"> 129 <dialog class="jrpg-detail-dialog" aria-labelledby="jrpg-dialog-title">
111 <div class="jrpg-dialog-heading"> 130 <div class="jrpg-dialog-heading">
112 <p>DESTINATION DATA</p> 131 <p>DESTINATION DATA</p>
113 <zen-button appearance="plain" size="md"> 132 <div class="jrpg-dialog-heading-actions">
114 <button type="button" data-zen-close aria-label="Close destination details"> 133 <zen-button appearance="plain" size="md">
115 <zen-icon name="close"></zen-icon> 134 <a href="/resume" data-preview-link>
116 </button> 135 Open page
117 </zen-button> 136 <zen-icon name="external"></zen-icon>
137 </a>
138 </zen-button>
139 <zen-button appearance="plain" size="md">
140 <button type="button" data-zen-close aria-label="Close destination details">
141 <zen-icon name="close"></zen-icon>
142 </button>
143 </zen-button>
144 </div>
118 </div> 145 </div>
119 <h2 id="jrpg-dialog-title" data-dialog-title>Resume</h2> 146 <h2 id="jrpg-dialog-title" data-dialog-title>Resume</h2>
120 <p data-dialog-copy>Experience, projects, and the systems I have helped build.</p> 147 <p data-dialog-copy>Experience, projects, and the systems I have helped build.</p>
121 <section 148 <section
122 class="jrpg-resume-dossier" 149 class="jrpg-resume-dossier"
141 <article> 168 <article>
142 <p data-blog-status>Select a blog to inspect.</p> 169 <p data-blog-status>Select a blog to inspect.</p>
143 <div data-blog-content></div> 170 <div data-blog-content></div>
144 </article> 171 </article>
145 </section> 172 </section>
146 <div class="jrpg-dialog-actions"> 173 <section
147 <zen-button appearance="plain" size="lg"> 174 class="jrpg-tool-browser"
148 <a href="/resume" data-preview-link> 175 data-tool-browser
149 Open full page 176 aria-label="Tool workspace"
150 <zen-icon name="arrow-right"></zen-icon> 177 hidden
151 </a> 178 >
152 </zen-button> 179 <article>
180 <p data-tool-status>Select a tool to inspect.</p>
181 <div data-tool-content></div>
182 </article>
183 </section>
184 <div class="jrpg-dialog-actions" data-dialog-actions>
153 <zen-button appearance="plain" size="lg" data-resume-download> 185 <zen-button appearance="plain" size="lg" data-resume-download>
154 <a href="/public/resume.pdf"> 186 <a href="/public/resume.pdf">
155 Download PDF 187 Download PDF
156 <zen-icon name="download"></zen-icon> 188 <zen-icon name="download"></zen-icon>
157 </a> 189 </a>
175 placeholder="Ask Epi about this site..." 207 placeholder="Ask Epi about this site..."
176 required 208 required
177 ></textarea> 209 ></textarea>
178 </zen-field> 210 </zen-field>
179 <div class="jrpg-composer-actions"> 211 <div class="jrpg-composer-actions">
180 <zen-button appearance="plain" size="lg"> 212 <zen-button appearance="plain" size="sm">
181 <button type="submit"> 213 <button type="submit">
182 Send 214 Send
183 <zen-icon name="arrow-right"></zen-icon> 215 <zen-icon name="arrow-right"></zen-icon>
184 </button> 216 </button>
185 </zen-button> 217 </zen-button>
186 <zen-button appearance="plain" size="lg" data-cancel-control hidden> 218 <zen-button appearance="plain" size="sm" data-cancel-control hidden>
187 <button type="button" data-cancel> 219 <button type="button" data-cancel>
188 Cancel 220 Cancel
189 <zen-icon name="close"></zen-icon> 221 <zen-icon name="close"></zen-icon>
190 </button> 222 </button>
191 </zen-button> 223 </zen-button>
197 <mjj-jrpg-menu> 229 <mjj-jrpg-menu>
198 <nav aria-label="Shiba Quest destinations"> 230 <nav aria-label="Shiba Quest destinations">
199 <p class="jrpg-menu-label">Menu</p> 231 <p class="jrpg-menu-label">Menu</p>
200 <ul> 232 <ul>
201 <li> 233 <li>
202 <zen-button appearance="plain" size="lg"> 234 <zen-button appearance="plain" size="sm">
203 <button type="button" data-preview="resume" aria-pressed="true"> 235 <button type="button" data-preview="resume" aria-pressed="true">
204 <zen-icon name="chevron-right"></zen-icon> 236 <zen-icon name="chevron-right"></zen-icon>
205 Resume 237 Resume
206 </button> 238 </button>
207 </zen-button> 239 </zen-button>
208 </li> 240 </li>
209 <li> 241 <li>
210 <zen-button appearance="plain" size="lg"> 242 <zen-button appearance="plain" size="sm">
211 <button type="button" data-preview="tools" aria-pressed="false"> 243 <button type="button" data-preview="tools" aria-pressed="false">
212 <zen-icon name="chevron-right"></zen-icon> 244 <zen-icon name="chevron-right"></zen-icon>
213 Tools 245 Tools
214 </button> 246 </button>
215 </zen-button> 247 </zen-button>
216 </li> 248 </li>
217 <li> 249 <li>
218 <zen-button appearance="plain" size="lg"> 250 <zen-button appearance="plain" size="sm">
219 <button type="button" data-preview="blog" aria-pressed="false"> 251 <button type="button" data-preview="blog" aria-pressed="false">
220 <zen-icon name="chevron-right"></zen-icon> 252 <zen-icon name="chevron-right"></zen-icon>
221 Blogs 253 Blogs
222 </button> 254 </button>
223 </zen-button> 255 </zen-button>