Skip to content

Commit 894fb30

Browse files
Java-IdlJava-Idl
committed
feat: Add minimal and sidebar layout options and implement a new sidebar UI.
1 parent 2d71364 commit 894fb30

7 files changed

Lines changed: 1300 additions & 426 deletions

File tree

‎index.html‎

Lines changed: 43 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,78 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6-
<title>Javagar's Projects</title>
7-
8-
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><rect width=%22100%22 height=%22100%22 rx=%2220%22 fill=%22%23080808%22/><text x=%2250%22 y=%2275%22 font-family=%22sans-serif%22 font-weight=%22bold%22 font-size=%2270%22 fill=%22%23D4AF37%22 text-anchor=%22middle%22>J</text><rect x=%225%22 y=%225%22 width=%2290%22 height=%2290%22 rx=%2215%22 fill=%22none%22 stroke=%22%23D4AF37%22 stroke-width=%225%22/></svg>">
7+
<title>Javagar's Command Center</title>
8+
9+
<link rel="icon"
10+
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><rect width=%22100%22 height=%22100%22 rx=%2220%22 fill=%22%23080808%22/><text x=%2250%22 y=%2275%22 font-family=%22sans-serif%22 font-weight=%22bold%22 font-size=%2270%22 fill=%22%23D4AF37%22 text-anchor=%22middle%22>J</text><rect x=%225%22 y=%225%22 width=%2290%22 height=%2290%22 rx=%2215%22 fill=%22none%22 stroke=%22%23D4AF37%22 stroke-width=%225%22/></svg>">
911

1012
<link rel="preconnect" href="https://fonts.googleapis.com">
1113
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12-
<link href="https://fonts.googleapis.com/css2?family=Audiowide&family=Fascinate+Inline&display=swap" rel="stylesheet">
13-
14+
<link href="https://fonts.googleapis.com/css2?family=Audiowide&family=Fascinate+Inline&display=swap"
15+
rel="stylesheet">
16+
1417
<link rel="stylesheet" href="style.css">
1518
</head>
19+
1620
<body>
21+
22+
<!-- Sidebar Panel (The Command Center) -->
1723
<div id="ui-layer">
18-
<div class="top-section">
24+
<aside class="sidebar-panel">
1925
<header>
20-
<h1 class="fascinate-font">Javagar's Projects</h1>
21-
<div class="subtitle audiowide-font">Link Page</div>
26+
<h1 class="fascinate-font">JAVAGAR'S</h1>
27+
<div class="subtitle audiowide-font">PROJECTS</div>
2228
</header>
2329

2430
<div class="search-container">
25-
<input type="text" id="search-input" placeholder="Search Node..." autocomplete="off">
31+
<label for="search-input" class="sr-only">Search Nodes</label>
32+
<input type="text" id="search-input" placeholder="> SEARCH_NODE..." autocomplete="off">
2633
</div>
27-
</div>
28-
29-
<div class="controls">
30-
<button id="toggle-view" aria-pressed="false">Switch to List</button>
31-
<button id="toggle-motion" aria-pressed="false">Pause Motion</button>
32-
<div class="footer audiowide-font" style="margin-top: 15px; font-size: 0.65rem; color: #666; letter-spacing: 1px;">
33-
[ J / K ] NAVIGATE | [ CLICK ] View
34+
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>
3438
</div>
35-
</div>
39+
40+
<div id="list-container" class="hidden" role="region" aria-label="Project List">
41+
<ul id="project-list" role="list"></ul>
42+
</div>
43+
44+
<div class="footer audiowide-font">
45+
KEYBOARD INPUTS<br>
46+
[ J / K ] NAVIGATE<br>
47+
[ CLICK ] EXECUTE
48+
</div>
49+
</aside>
3650
</div>
3751

38-
<aside id="preview-sidebar">
39-
<div id="resize-handle"></div> <div class="preview-header">
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">
4056
<h2 id="preview-title" class="audiowide-font">Project Name</h2>
4157
<div class="preview-controls">
4258
<a id="preview-link" href="#" target="_blank" class="preview-btn">OPEN FULL</a>
43-
<button id="close-preview" class="preview-btn">×</button>
59+
<button id="close-preview" class="preview-btn" aria-label="Close Preview">×</button>
4460
</div>
4561
</div>
4662
<div class="preview-content">
47-
<div class="iframe-loader">Loading...</div>
63+
<div class="iframe-loader">
64+
<div class="spinner"></div>
65+
<span>Establishing Link...</span>
66+
</div>
4867
<iframe id="preview-frame" title="Website Preview"></iframe>
4968
</div>
5069
</aside>
5170

5271
<div id="scene-container"></div>
53-
<canvas id="connections"></canvas>
54-
55-
<div id="list-container" class="hidden">
56-
<ul id="project-list"></ul>
57-
</div>
72+
<canvas id="connections" role="img" aria-label="Interactive 3D network of project links."></canvas>
5873

5974
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
6075
<script src="script.js"></script>
6176
</body>
62-
</html>
77+
78+
</html>

‎index_minimal.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
7+
<title>Javagar // Minimal</title>
8+
9+
<link rel="icon"
10+
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><rect width=%22100%22 height=%22100%22 rx=%2220%22 fill=%22%23080808%22/><text x=%2250%22 y=%2275%22 font-family=%22sans-serif%22 font-weight=%22bold%22 font-size=%2270%22 fill=%22%23D4AF37%22 text-anchor=%22middle%22>J</text><rect x=%225%22 y=%225%22 width=%2290%22 height=%2290%22 rx=%2215%22 fill=%22none%22 stroke=%22%23D4AF37%22 stroke-width=%225%22/></svg>">
11+
12+
<link rel="preconnect" href="https://fonts.googleapis.com">
13+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14+
<link href="https://fonts.googleapis.com/css2?family=Audiowide&family=Fascinate+Inline&display=swap"
15+
rel="stylesheet">
16+
17+
<link rel="stylesheet" href="style_minimal.css">
18+
</head>
19+
20+
<body>
21+
22+
<div id="ui-layer">
23+
<!-- Top Left Mini Header -->
24+
<header class="mini-header">
25+
<h1 class="fascinate-font">J</h1>
26+
<div class="subtitle audiowide-font">JAVAGAR</div>
27+
</header>
28+
29+
<!-- Bottom Left Search -->
30+
<div class="search-container">
31+
<label for="search-input" class="sr-only">Search</label>
32+
<input type="text" id="search-input" placeholder="Find Node..." autocomplete="off">
33+
</div>
34+
35+
<!-- Bottom Right Controls -->
36+
<div class="controls">
37+
<button id="toggle-view" aria-pressed="false">LIST VIEW</button>
38+
<button id="toggle-motion" aria-pressed="false">PAUSE</button>
39+
</div>
40+
41+
<!-- Center List Overlay (Initially Hidden) -->
42+
<div id="list-container" class="hidden" role="region" aria-label="Project List">
43+
<ul id="project-list" role="list"></ul>
44+
</div>
45+
</div>
46+
47+
<!-- Minimal Preview Sidebar -->
48+
<aside id="preview-sidebar" aria-label="Project Preview">
49+
<div id="resize-handle"></div>
50+
<div class="preview-header">
51+
<h2 id="preview-title" class="audiowide-font">Project Name</h2>
52+
<div class="preview-controls">
53+
<a id="preview-link" href="#" target="_blank" class="preview-btn">OPEN</a>
54+
<button id="close-preview" class="preview-btn" aria-label="Close">×</button>
55+
</div>
56+
</div>
57+
<div class="preview-content">
58+
<div class="iframe-loader">
59+
<div class="spinner"></div>
60+
</div>
61+
<iframe id="preview-frame" title="Website Preview"></iframe>
62+
</div>
63+
</aside>
64+
65+
<div id="scene-container"></div>
66+
<canvas id="connections" role="img" aria-label="Interactive 3D network."></canvas>
67+
68+
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
69+
<script src="script.js"></script>
70+
</body>
71+
72+
</html>

‎index_sidebar.html‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
7+
<title>Javagar's Command Center</title>
8+
9+
<link rel="icon"
10+
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><rect width=%22100%22 height=%22100%22 rx=%2220%22 fill=%22%23080808%22/><text x=%2250%22 y=%2275%22 font-family=%22sans-serif%22 font-weight=%22bold%22 font-size=%2270%22 fill=%22%23D4AF37%22 text-anchor=%22middle%22>J</text><rect x=%225%22 y=%225%22 width=%2290%22 height=%2290%22 rx=%2215%22 fill=%22none%22 stroke=%22%23D4AF37%22 stroke-width=%225%22/></svg>">
11+
12+
<link rel="preconnect" href="https://fonts.googleapis.com">
13+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14+
<link href="https://fonts.googleapis.com/css2?family=Audiowide&family=Fascinate+Inline&display=swap"
15+
rel="stylesheet">
16+
17+
<link rel="stylesheet" href="style_sidebar.css">
18+
</head>
19+
20+
<body>
21+
22+
<!-- Sidebar Panel (The Command Center) -->
23+
<div id="ui-layer">
24+
<aside class="sidebar-panel">
25+
<header>
26+
<h1 class="fascinate-font">JAVAGAR</h1>
27+
<div class="subtitle audiowide-font">COMMAND // CENTER</div>
28+
</header>
29+
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>
34+
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>
39+
40+
<div id="list-container" class="hidden" role="region" aria-label="Project List">
41+
<ul id="project-list" role="list"></ul>
42+
</div>
43+
44+
<div class="footer audiowide-font">
45+
KEYBOARD INPUTS DETECTED<br>
46+
[ J / K ] NAVIGATE<br>
47+
[ CLICK ] EXECUTE
48+
</div>
49+
</aside>
50+
</div>
51+
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>
70+
71+
<div id="scene-container"></div>
72+
<canvas id="connections" role="img" aria-label="Interactive 3D network of project links."></canvas>
73+
74+
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
75+
<script src="script.js"></script>
76+
</body>
77+
78+
</html>

0 commit comments

Comments
 (0)