Mercurial

comparison mrjunejune/src/jrpg/index.html @ 259:667156fcd3e3

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add dev-only cyberpunk JRPG page
author MrJuneJune <me@mrjunejune.com>
date Wed, 05 Aug 2026 09:19:41 -0700
parents
children 1f9877b637e9
comparison
equal deleted inserted replaced
258:60a876c4587a 259:667156fcd3e3
1 <!doctype html>
2 <html lang="en" data-zen-theme="cyberpunk">
3 <head>
4 <title>Shiba Quest | MrJuneJune</title>
5 {{/parts/base_head.html}}
6 <link rel="preload" href="/public/jrpg/bar-ink.webp" as="image">
7 <link rel="stylesheet" href="/jrpg/jrpg.css">
8 <script type="module" src="/jrpg/jrpg.js"></script>
9 </head>
10 <body class="jrpg-page">
11 <main class="jrpg-main">
12 <mjj-jrpg-shell class="jrpg-shell">
13 <div class="jrpg-workspace">
14 <section class="jrpg-scene" aria-label="Shiba Quest conversation">
15 <mjj-jrpg-character state="default">
16 <img data-character alt="">
17 </mjj-jrpg-character>
18
19 <mjj-jrpg-chat aria-labelledby="conversation-title">
20 <div class="jrpg-panel-heading">
21 <span aria-hidden="true">QUEST 01</span>
22 <h1 id="conversation-title">Conversations</h1>
23 </div>
24 <zen-message-scroller>
25 <div
26 class="jrpg-message-viewport"
27 data-zen-viewport
28 role="log"
29 aria-live="polite"
30 aria-relevant="additions"
31 >
32 <ol class="jrpg-messages" data-messages>
33 <li class="jrpg-message" data-speaker="Epi">
34 <strong>Epi</strong>
35 <p>Welcome, traveler. Pick a destination or tell me what you are looking for.</p>
36 </li>
37 <li class="jrpg-message" data-speaker="System">
38 <strong>System</strong>
39 <p>The Shiba terminal is ready.</p>
40 </li>
41 </ol>
42 </div>
43 </zen-message-scroller>
44 <p class="jrpg-next" aria-hidden="true">
45 NEXT <zen-icon name="chevron-right" size="0.9em"></zen-icon>
46 </p>
47 </mjj-jrpg-chat>
48 </section>
49
50 <section class="jrpg-utility" aria-label="Selected destination">
51 <div class="jrpg-brand">
52 <header>
53 <h1>
54 <a href="/" data-zen-link-effect="none">MrJuneJune</a>
55 </h1>
56 </header>
57 <p>SHIBA QUEST TERMINAL</p>
58 </div>
59
60 <mjj-jrpg-preview data-selection="resume">
61 <article class="jrpg-preview-panel" aria-live="polite">
62 <p class="jrpg-preview-kicker" data-preview-kicker>CHARACTER RECORD</p>
63 <zen-heading size="xl">
64 <h2 data-preview-title>Resume</h2>
65 </zen-heading>
66 <p data-preview-copy>Experience, projects, and the systems I have helped build.</p>
67 <dl class="jrpg-preview-stats">
68 <div>
69 <dt>TYPE</dt>
70 <dd data-preview-type>Profile</dd>
71 </div>
72 <div>
73 <dt>STATUS</dt>
74 <dd>Available</dd>
75 </div>
76 </dl>
77
78 <zen-dialog class="jrpg-preview-dialog">
79 <zen-button appearance="plain" size="md">
80 <button type="button" data-zen-trigger>
81 Inspect
82 <zen-icon name="search"></zen-icon>
83 </button>
84 </zen-button>
85 <dialog aria-labelledby="jrpg-dialog-title">
86 <div class="jrpg-dialog-heading">
87 <p>DESTINATION DATA</p>
88 <zen-button appearance="plain" size="md">
89 <button type="button" data-zen-close aria-label="Close destination details">
90 <zen-icon name="close"></zen-icon>
91 </button>
92 </zen-button>
93 </div>
94 <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>
96 <zen-button appearance="plain" size="lg">
97 <a href="/resume" data-preview-link>
98 Open destination
99 <zen-icon name="arrow-right"></zen-icon>
100 </a>
101 </zen-button>
102 </dialog>
103 </zen-dialog>
104 </article>
105 </mjj-jrpg-preview>
106 </section>
107
108 <mjj-jrpg-composer>
109 <form class="jrpg-composer" data-composer>
110 <zen-field appearance="plain" size="lg">
111 <label for="jrpg-message">Message</label>
112 <textarea
113 id="jrpg-message"
114 name="message"
115 rows="3"
116 maxlength="500"
117 placeholder="Ask Epi about this site..."
118 required
119 ></textarea>
120 </zen-field>
121 <zen-button appearance="plain" size="lg">
122 <button type="submit">
123 Send
124 <zen-icon name="arrow-right"></zen-icon>
125 </button>
126 </zen-button>
127 <p class="jrpg-composer-hint">Enter to send / Shift + Enter for a new line</p>
128 </form>
129 </mjj-jrpg-composer>
130
131 <mjj-jrpg-menu>
132 <nav aria-label="Shiba Quest destinations">
133 <p class="jrpg-menu-label">Menu</p>
134 <ul>
135 <li>
136 <zen-button appearance="plain" size="lg">
137 <button type="button" data-preview="resume" aria-pressed="true">
138 <zen-icon name="chevron-right"></zen-icon>
139 Resume
140 </button>
141 </zen-button>
142 </li>
143 <li>
144 <zen-button appearance="plain" size="lg">
145 <button type="button" data-preview="tools" aria-pressed="false">
146 <zen-icon name="chevron-right"></zen-icon>
147 Tools
148 </button>
149 </zen-button>
150 </li>
151 <li>
152 <zen-button appearance="plain" size="lg">
153 <button type="button" data-preview="blog" aria-pressed="false">
154 <zen-icon name="chevron-right"></zen-icon>
155 Blogs
156 </button>
157 </zen-button>
158 </li>
159 </ul>
160 </nav>
161 </mjj-jrpg-menu>
162 </div>
163 </mjj-jrpg-shell>
164 </main>
165 </body>
166 </html>