Skip to content

Commit bda459e

Browse files
UcheWendyUcheWendy
authored
Merge pull request #164 from oss-slu/FrontEndDesign
Submitting Final Design
2 parents 9490ada + 97fa10d commit bda459e

10 files changed

Lines changed: 1812 additions & 556 deletions

File tree

‎boneset-api/node_modules/.package-lock.json‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎boneset-api/package-lock.json‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/DigitalBoneBox_Design_Artifacts.pdf‎

-115 KB
Binary file not shown.

‎docs/design/context.md‎

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎templates/boneset.html‎

Lines changed: 184 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -4,91 +4,213 @@
44
<head>
55
<meta charset="UTF-8" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Bone Set Viewer</title>
7+
<title>Digital Bones Box - Bone Set Viewer</title>
8+
9+
<!-- Favicon -->
10+
<link rel="icon" href="data:,">
11+
12+
<!-- Google Fonts -->
13+
<link rel="preconnect" href="https://fonts.googleapis.com">
14+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Crimson+Text:wght@400;600&display=swap" rel="stylesheet">
16+
817
<link rel="stylesheet" href="style.css" />
918
<link rel="icon" type="image/x-icon" href="favicon.ico">
1019
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
1120
</head>
1221

1322
<body>
14-
<div id="badge">
15-
<button id="toggle-sidebar">☰</button>
16-
<span id="text-button-Home" role="button">Home</span>
17-
<span id="text-button-Tutor" role="button">Tutor</span>
18-
<span id="text-button-Study" role="button">Study</span>
19-
<div id="help-button-container"></div>
20-
<div id="innerbadge">
21-
<span id="text-button-Login" role="button">Login</span>
22-
<span id="text-button-SignUp" role="button">Sign Up</span>
23+
<!-- Header Navigation -->
24+
<header id="badge" role="banner">
25+
<div class="header-left">
26+
<button id="toggle-sidebar" aria-label="Toggle navigation menu">☰</button>
27+
<nav class="main-navigation" role="navigation">
28+
<span id="text-button-Home" role="button" tabindex="0">Home</span>
29+
<span id="text-button-Tutor" role="button" tabindex="0">Tutor</span>
30+
<span id="text-button-Study" role="button" tabindex="0">Study</span>
31+
<div id="help-button-container">
32+
<span id="text-button-Help" role="button" tabindex="0" onclick="document.getElementById('new-help-modal').style.display='flex';" style="pointer-events: auto !important; z-index: 9999 !important; cursor: pointer;">Help</span>
33+
</div>
34+
</nav>
2335
</div>
24-
</div>
36+
37+
<div class="header-center">
38+
<!-- Empty center section -->
39+
</div>
40+
41+
<div class="header-right">
42+
<div id="innerbadge">
43+
<span id="text-button-Login" role="button" tabindex="0">Login</span>
44+
<span id="text-button-SignUp" role="button" tabindex="0">Sign Up</span>
45+
</div>
46+
</div>
47+
</header>
2548

26-
<div id="sidebar-container"></div>
49+
<!-- Sidebar Container -->
50+
<aside id="sidebar-container" role="complementary"></aside>
2751

28-
<div id="editor-view">
52+
<!-- Main Content Area -->
53+
<main id="editor-view" role="main">
2954
<div class="container">
30-
<h1>Bone Set Viewer</h1>
31-
32-
<!-- Search functionality -->
33-
<div class="search-container">
34-
<input type="text"
35-
id="search-bar"
36-
placeholder="Search bones or sub-bones (min 2 characters)"
37-
autocomplete="off" />
38-
<div id="search-loading" class="search-loading" style="display: none;">Searching...</div>
39-
</div>
55+
<header class="page-header">
56+
<h1>Digital Bones Box</h1>
57+
<p class="subtitle">Interactive Anatomical Learning Platform</p>
58+
</header>
4059

41-
<ul id="search-results" class="search-results"></ul>
60+
<!-- Search Section -->
61+
<section class="search-section">
62+
<div class="form-group">
63+
<label for="search-bar">Search Bones and Sub-bones</label>
64+
<div class="search-container">
65+
<input type="text"
66+
id="search-bar"
67+
placeholder="Enter bone name (minimum 2 characters)"
68+
autocomplete="off" />
69+
<div id="search-loading" class="search-loading" style="display: none;">Searching...</div>
70+
</div>
71+
</div>
72+
73+
<ul id="search-results" class="search-results" role="listbox" aria-label="Search results"></ul>
74+
</section>
4275

43-
<div style="display: flex; flex-direction: column; gap: 10px;">
44-
<label for="bonesets">Choose a Boneset, Bone, or Sub-bone:</label>
45-
<div style="display: flex; gap: 10px; align-items: center;">
46-
<select id="boneset-select"
47-
name="boneId"
48-
hx-get="http://127.0.0.1:8000/api/description/"
49-
hx-target="#description-Container"
50-
hx-trigger="change">
51-
<option value="">--Please select a Boneset--</option>
52-
</select>
53-
<select id="bone-select"
54-
name="boneId"
55-
hx-get="http://127.0.0.1:8000/api/description/"
56-
hx-target="#description-Container"
57-
hx-trigger="change"
58-
disabled>
59-
<option value="">--Please select a Bone--</option>
60-
</select>
61-
<select id="subbone-select"
62-
name="boneId"
63-
hx-get="http://127.0.0.1:8000/api/description/"
64-
hx-target="#description-Container"
65-
hx-trigger="change"
66-
disabled>
67-
<option value="">--Please choose a Sub-Bone--</option>
68-
</select>
76+
<!-- Selection Section -->
77+
<section class="selection-section">
78+
<div class="form-group">
79+
<label>Select Anatomical Structure</label>
80+
<div class="form-row">
81+
<div class="select-group">
82+
<label for="boneset-select">Boneset</label>
83+
<select id="boneset-select"
84+
name="boneId"
85+
hx-get="http://127.0.0.1:8000/api/description/"
86+
hx-target="#description-Container"
87+
hx-trigger="change">
88+
<option value="">Select a boneset</option>
89+
</select>
90+
</div>
91+
92+
<div class="select-group">
93+
<label for="bone-select">Bone</label>
94+
<select id="bone-select"
95+
name="boneId"
96+
hx-get="http://127.0.0.1:8000/api/description/"
97+
hx-target="#description-Container"
98+
hx-trigger="change"
99+
disabled>
100+
<option value="">Select a bone</option>
101+
</select>
102+
</div>
103+
104+
<div class="select-group">
105+
<label for="subbone-select">Sub-bone</label>
106+
<select id="subbone-select"
107+
name="boneId"
108+
hx-get="http://127.0.0.1:8000/api/description/"
109+
hx-target="#description-Container"
110+
hx-trigger="change"
111+
disabled>
112+
<option value="">Select a sub-bone</option>
113+
</select>
114+
</div>
115+
</div>
69116
</div>
70-
</div>
117+
</section>
71118

72-
<div id="bone-Description-Container">
73-
<h3>Description</h3>
74-
<ul id="description-Container"></ul>
119+
<!-- Content Grid: Description and Images Side by Side -->
120+
<div class="content-grid">
121+
<!-- Description Section -->
122+
<section id="bone-Description-Container" class="description-panel">
123+
<div class="panel-header">
124+
<h2>Anatomical Description</h2>
125+
</div>
126+
<div class="description-content">
127+
<ul id="description-Container" role="list" aria-live="polite"></ul>
128+
<div class="description-placeholder">
129+
<p>Select a bone or sub-bone above to view detailed anatomical descriptions.</p>
130+
</div>
131+
</div>
132+
</section>
133+
134+
<!-- Images Section -->
135+
<section id="bone-images-section" class="images-panel">
136+
<div class="panel-header">
137+
<h2>Visual Reference</h2>
138+
</div>
139+
<div class="images-content">
140+
<div id="bone-image-container" role="region" aria-live="polite"></div>
141+
<div class="images-placeholder">
142+
<p>Please select a bone from the dropdown to view its image.</p>
143+
</div>
144+
</div>
145+
</section>
75146
</div>
76-
<section id="bone-images-section" aria-labelledby="bone-images-heading">
77-
<h3 id="bone-images-heading">Images</h3>
78-
<div id="bone-image-container" role="region" aria-live="polite"></div>
79-
</section>
80-
<div class="navigation-buttons">
81-
<button id="prev-button" disabled>Previous</button>
147+
148+
<!-- Navigation -->
149+
<nav class="navigation-buttons" role="navigation">
150+
<button id="prev-button" class="btn-secondary" disabled>Previous</button>
82151
<button id="next-button" disabled>Next</button>
152+
</nav>
153+
</div>
154+
</main>
155+
156+
<!-- NEW Help Modal - Clean Version -->
157+
<div id="new-help-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 99999; align-items: center; justify-content: center;">
158+
<div style="background: white; padding: 40px; border-radius: 16px; max-width: 650px; margin: 20px; border: 3px solid #FFD700; box-shadow: 0 25px 60px rgba(0,0,0,0.4);">
159+
<h2 style="color: #003366; text-align: center; margin-bottom: 25px; border-bottom: 3px solid #FFD700; padding-bottom: 15px; font-size: 1.6rem; font-weight: bold; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">How to Use the Digital Bones Box</h2>
160+
<div style="margin: 25px 0;">
161+
<div style="color: #2d3748; font-size: 1.1rem; line-height: 1.8; background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%); padding: 30px; border-radius: 12px; border-left: 5px solid #0369a1; margin-bottom: 25px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
162+
<p style="margin: 0 0 20px 0; font-weight: 500; color: #1a365d;">Welcome to the <strong>Digital Bones Box</strong>, your interactive anatomical learning platform.</p>
163+
164+
<p style="margin: 0 0 15px 0;">Getting started is simple:</p>
165+
166+
<ul style="margin: 15px 0; padding-left: 25px; list-style-type: none;">
167+
<li style="margin: 8px 0; position: relative; padding-left: 25px;">
168+
<span style="position: absolute; left: 0; color: #0369a1; font-weight: bold;">•</span>
169+
Use the dropdown menus above to navigate through different bone sets
170+
</li>
171+
<li style="margin: 8px 0; position: relative; padding-left: 25px;">
172+
<span style="position: absolute; left: 0; color: #0369a1; font-weight: bold;">•</span>
173+
Select a boneset from the first dropdown to enable the bone selection menu
174+
</li>
175+
<li style="margin: 8px 0; position: relative; padding-left: 25px;">
176+
<span style="position: absolute; left: 0; color: #0369a1; font-weight: bold;">•</span>
177+
Choose a specific bone to view detailed anatomical descriptions and high-quality images
178+
</li>
179+
<li style="margin: 8px 0; position: relative; padding-left: 25px;">
180+
<span style="position: absolute; left: 0; color: #0369a1; font-weight: bold;">•</span>
181+
Select sub-bones for more specific anatomical details
182+
</li>
183+
<li style="margin: 8px 0; position: relative; padding-left: 25px;">
184+
<span style="position: absolute; left: 0; color: #0369a1; font-weight: bold;">•</span>
185+
Use Previous and Next navigation buttons to browse through related items
186+
</li>
187+
</ul>
188+
189+
<p style="margin: 20px 0 0 0; font-style: italic; color: #4a5568; font-size: 1rem;">Press the ESC key to close this help window at any time.</p>
190+
</div>
191+
<button onclick="document.getElementById('new-help-modal').style.display='none'" style="background: linear-gradient(135deg, #003366 0%, #1e40af 100%); color: white; border: 2px solid #FFD700; padding: 15px 30px; border-radius: 10px; cursor: pointer; font-size: 1.1rem; display: block; margin: 0 auto; font-weight: bold; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0,51,102,0.3);" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 16px rgba(0,51,102,0.4)'" onmouseout="this.style.transform='translateY(0px)'; this.style.boxShadow='0 4px 12px rgba(0,51,102,0.3)'">
192+
Close Guide
193+
</button>
83194
</div>
84-
85195
</div>
86196
</div>
87197

88-
<script type="module" src="js/search.js"></script>
198+
<!-- Scripts -->
89199
<script type="module" src="js/sidebar.js"></script>
90200
<script type="module" src="js/main.js"></script>
91201
<script type="module" src="js/imageDisplay.js"></script>
202+
203+
<!-- Simple Escape Key Handler -->
204+
<script>
205+
document.addEventListener('keydown', function(event) {
206+
if (event.key === 'Escape') {
207+
const modal = document.getElementById('new-help-modal');
208+
if (modal) {
209+
modal.style.display = 'none';
210+
}
211+
}
212+
});
213+
</script>
92214
</body>
93215

94216
</html>

0 commit comments

Comments
 (0)