|
18 | 18 | </head> |
19 | 19 |
|
20 | 20 | <body> |
| 21 | + <div id="app-shell"> |
| 22 | + <main id="main-panel" aria-label="Projects Workspace"> |
| 23 | + <section id="content-area" aria-label="Main Content"> |
| 24 | + <div id="scene-host" aria-label="Interactive 3D project sphere"> |
| 25 | + <div id="scene-container"></div> |
| 26 | + <canvas id="connections" role="img" aria-label="Interactive 3D network of project links."></canvas> |
| 27 | + </div> |
| 28 | + </section> |
21 | 29 |
|
22 | | - <!-- Sidebar Panel (The Command Center) --> |
23 | | - <div id="ui-layer"> |
24 | | - <aside class="sidebar-panel"> |
25 | | - <header> |
26 | | - <h1 class="fascinate-font">JAVAGAR'S</h1> |
27 | | - <div class="subtitle audiowide-font">PROJECTS</div> |
28 | | - </header> |
| 30 | + <aside id="preview-sidebar" aria-label="Project Preview"> |
| 31 | + <div id="resize-handle" title="Resize Preview Panel"></div> |
| 32 | + <div class="preview-header"> |
| 33 | + <h2 id="preview-title" class="audiowide-font">Project Name</h2> |
| 34 | + <div class="preview-controls"> |
| 35 | + <button id="retry-preview" class="preview-btn" type="button" aria-label="Retry Preview">RETRY</button> |
| 36 | + <button id="fullscreen-preview" class="preview-btn" type="button" aria-pressed="false" aria-label="Fullscreen Preview">FULLSCREEN</button> |
| 37 | + <a id="preview-link" href="#" target="_blank" class="preview-btn">OPEN FULL</a> |
| 38 | + <button id="close-preview" class="preview-btn" aria-label="Close Preview" aria-keyshortcuts="Escape Q X" title="Close (Esc / Q / X)">×</button> |
| 39 | + </div> |
| 40 | + </div> |
| 41 | + <div class="preview-content"> |
| 42 | + <div class="iframe-loader"> |
| 43 | + <div class="spinner"></div> |
| 44 | + <span>Establishing Link...</span> |
| 45 | + </div> |
| 46 | + <iframe id="preview-frame" title="Website Preview"></iframe> |
| 47 | + </div> |
| 48 | + </aside> |
| 49 | + </main> |
29 | 50 |
|
30 | | - <div class="search-container"> |
31 | | - <label for="search-input" class="sr-only">Search Nodes</label> |
32 | | - <input type="text" id="search-input" placeholder="> SEARCH_NODE..." autocomplete="off"> |
33 | | - </div> |
| 51 | + <div id="hud-layer" aria-label="Controls"> |
| 52 | + <h1 class="hud-title fascinate-font">JAVAGAR'S</h1> |
34 | 53 |
|
35 | | - <div class="controls"> |
36 | | - <button id="toggle-view" aria-pressed="false">SWITCH VIEW</button> |
37 | | - <button id="toggle-motion" aria-pressed="false">PAUSE MOTION</button> |
38 | | - </div> |
| 54 | + <button id="chip-search" class="hud-chip" type="button" aria-expanded="false">SEARCH</button> |
| 55 | + <button id="chip-mode" class="hud-chip" type="button" aria-pressed="false">LIST</button> |
| 56 | + <button id="chip-motion" class="hud-chip" type="button" aria-pressed="false">PAUSE</button> |
| 57 | + </div> |
39 | 58 |
|
40 | | - <div id="list-container" class="hidden" role="region" aria-label="Project List"> |
41 | | - <ul id="project-list" role="list"></ul> |
42 | | - </div> |
| 59 | + <div id="search-popover" class="hud-popover" aria-hidden="true"> |
| 60 | + <div id="search-resize-handle" title="Resize Search Panel"></div> |
| 61 | + <label for="search-input" class="sr-only">Search Projects</label> |
| 62 | + <input type="text" id="search-input" placeholder="> SEARCH_PROJECT..." autocomplete="off"> |
| 63 | + </div> |
43 | 64 |
|
44 | | - <div class="footer audiowide-font"> |
45 | | - KEYBOARD INPUTS<br> |
46 | | - [ J / K ] NAVIGATE<br> |
47 | | - [ CLICK ] EXECUTE |
| 65 | + <section id="list-sheet" aria-label="Project List" aria-hidden="true"> |
| 66 | + <div id="sheet-resize-handle" title="Resize List Panel"></div> |
| 67 | + <div class="sheet-header"> |
| 68 | + <span class="audiowide-font">PROJECTS</span> |
| 69 | + <button id="close-sheet" class="sheet-close" type="button">CLOSE</button> |
48 | 70 | </div> |
49 | | - </aside> |
50 | | - </div> |
| 71 | + <ul id="project-list" role="list"></ul> |
| 72 | + </section> |
51 | 73 |
|
52 | | - <!-- Preview Panel (Right Side Slide-in) --> |
53 | | - <aside id="preview-sidebar" aria-label="Project Preview"> |
54 | | - <div id="resize-handle" title="Resize Sidebar"></div> |
55 | | - <div class="preview-header"> |
56 | | - <h2 id="preview-title" class="audiowide-font">Project Name</h2> |
57 | | - <div class="preview-controls"> |
58 | | - <a id="preview-link" href="#" target="_blank" class="preview-btn">OPEN FULL</a> |
59 | | - <button id="close-preview" class="preview-btn" aria-label="Close Preview">×</button> |
60 | | - </div> |
61 | | - </div> |
62 | | - <div class="preview-content"> |
63 | | - <div class="iframe-loader"> |
64 | | - <div class="spinner"></div> |
65 | | - <span>Establishing Link...</span> |
66 | | - </div> |
67 | | - <iframe id="preview-frame" title="Website Preview"></iframe> |
68 | | - </div> |
69 | | - </aside> |
| 74 | + <div class="hint hud-hint audiowide-font">J / K NAVIGATE · ENTER OPEN · ESC/Q/X CLOSE</div> |
| 75 | + <div id="status-live" class="sr-only" aria-live="polite"></div> |
70 | 76 |
|
71 | | - <div id="scene-container"></div> |
72 | | - <canvas id="connections" role="img" aria-label="Interactive 3D network of project links."></canvas> |
| 77 | + <div id="kao-corner-banner" aria-label="Keep Android Open notice"></div> |
| 78 | + <div id="drag-shield" aria-hidden="true"></div> |
| 79 | + </div> |
73 | 80 |
|
74 | 81 | <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script> |
| 82 | + <script src="https://keepandroidopen.org/banner.js?size=mini&id=kao-corner-banner&link=https%3A%2F%2Fkeepandroidopen.org"></script> |
75 | 83 | <script src="script.js"></script> |
76 | 84 | </body> |
77 | 85 |
|
|
0 commit comments