-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
367 lines (322 loc) · 19.3 KB
/
Copy pathindex.html
File metadata and controls
367 lines (322 loc) · 19.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
<!DOCTYPE html>
<html lang="hr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cochlear viewer</title>
<style>
html,
body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #0b0f17;
}
#app.app-hidden {
visibility: hidden;
}
#loading {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(8, 10, 16, 0.96);
z-index: 99999;
}
.loading-box {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
padding: 28px 34px;
border-radius: 20px;
}
.loading-text {
color: #ffffff;
font: 600 18px Arial, sans-serif;
text-align: center;
}
.spinner {
width: 52px;
height: 52px;
border: 4px solid rgba(255, 255, 255, 0.16);
border-top-color: #ffffff;
border-radius: 50%;
animation: spin 0.85s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="loading" class="loading show">
<div class="loading-box">
<svg class="loading-logo" viewBox="-7.5 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M10.080 15.84c-0.44 0-0.84-0.36-0.84-0.84 0-0.68-0.56-1.24-1.24-1.24s-1.24 0.56-1.24 1.24c0 0.44-0.36 0.84-0.84 0.84s-0.84-0.36-0.84-0.84c0-1.6 1.28-2.88 2.88-2.88s2.88 1.28 2.88 2.88c0.040 0.48-0.32 0.84-0.76 0.84zM7.64 24.92c-0.44 0-0.84-0.36-0.84-0.84s0.36-0.84 0.84-0.84c1 0 1.84-0.8 1.84-1.84 0-1.96 1.040-3.32 1.68-3.92 0.6-0.6 0.96-0.96 0.96-2.48 0-2.28-1.84-4.12-4.12-4.12s-4.12 1.84-4.12 4.12c0 0.44-0.36 0.84-0.84 0.84-0.44 0-0.84-0.36-0.84-0.84 0-3.16 2.6-5.76 5.76-5.76s5.76 2.6 5.76 5.76c0 2.040-0.6 2.8-1.44 3.64-0.44 0.44-1.2 1.4-1.2 2.76 0.040 1.96-1.52 3.52-3.44 3.52zM13.64 10.44c-0.2 0-0.44-0.080-0.6-0.24-0.32-0.32-0.32-0.84 0-1.16l1.72-1.72c0.32-0.32 0.84-0.32 1.16 0l1 1c0.32 0.32 0.32 0.84 0 1.16s-0.84 0.32-1.16 0l-0.4-0.4-1.12 1.12c-0.16 0.16-0.36 0.24-0.6 0.24zM1.92 24.28c-0.2 0-0.44-0.080-0.6-0.24l-1.080-1.080c-0.32-0.32-0.32-0.84 0-1.16s0.84-0.32 1.16 0l0.52 0.52 4.4-4.4c0.32-0.32 0.84-0.32 1.16 0s0.32 0.84 0 1.16l-5 4.96c-0.16 0.16-0.36 0.24-0.56 0.24z"></path>
</svg>
<div class="loading-text">
<span id="loadingMessage">Initializing environment</span>
<span class="dots">
<span>.</span><span>.</span><span>.</span>
</span>
</div>
</div>
</div>
<div id="app" class="app-hidden">
<main class="viewer-wrap">
<div id="viewer"></div>
</main>
<div id="sidebarWrapper" class="collapsed">
<aside id="sidebar">
<div class="sidebar-header">
<div>
<h2>Cochlear explorer</h2>
<p>Nucleus component hierarchy</p>
</div>
<button id="closeSidebar" class="close-btn" title="Close">
<svg viewBox="0 0 24 24" class="close-icon" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" />
<path d="M14.5 9.5L9.5 14.5M9.5 9.5L14.5 14.5" />
</svg>
</button>
</div>
<div class="sidebar-panel" id="panel-body">
<div class="section-title">Model settings</div>
<div class="field">
<label>Color Cochlear</label>
<div class="custom-select" id="colorDropdown" data-value="beige">
<button type="button" class="custom-select-trigger">
<span class="custom-select-value">Beige</span>
<span class="custom-select-arrow">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M7 10L12 15L17 10" />
</svg>
</span>
</button>
<div class="custom-select-menu">
<button type="button" class="custom-select-option active" data-value="beige">
<span class="color-option-content">
<span class="color-dot beige"></span>
<span>Beige</span>
</span>
</button>
<button type="button" class="custom-select-option" data-value="black">
<span class="color-option-content">
<span class="color-dot black"></span>
<span>Black</span>
</span>
</button>
<button type="button" class="custom-select-option" data-value="brown">
<span class="color-option-content">
<span class="color-dot brown"></span>
<span>Brown</span>
</span>
</button>
</div>
</div>
<input type="hidden" id="colorSelect" value="beige" />
</div>
<div class="field">
<label>Battery Type</label>
<div class="custom-select" id="batteryDropdown" data-value="long">
<button type="button" class="custom-select-trigger">
<span class="custom-select-value">Long</span>
<span class="custom-select-arrow">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M7 10L12 15L17 10" />
</svg>
</span>
</button>
<div class="custom-select-menu">
<button type="button" class="custom-select-option active" data-value="long">
Long
</button>
<button type="button" class="custom-select-option" data-value="short">
Short
</button>
<button type="button" class="custom-select-option" data-value="disposable">
Disposable
</button>
</div>
</div>
<input type="hidden" id="batteryType" value="long" />
</div>
<div class="info-box">
The battery is automatically loaded in the same color as the selected device.
</div>
</div>
<div class="sidebar-panel hidden" id="panel-components">
<div class="section-title">Nucleus hierarchy</div>
<div id="tree" class="tree"></div>
</div>
<div class="sidebar-footer">
<svg class="sidebar-logo" viewBox="-7.5 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M10.080 15.84c-0.44 0-0.84-0.36-0.84-0.84 0-0.68-0.56-1.24-1.24-1.24s-1.24 0.56-1.24 1.24c0 0.44-0.36 0.84-0.84 0.84s-0.84-0.36-0.84-0.84c0-1.6 1.28-2.88 2.88-2.88s2.88 1.28 2.88 2.88c0.040 0.48-0.32 0.84-0.76 0.84zM7.64 24.92c-0.44 0-0.84-0.36-0.84-0.84s0.36-0.84 0.84-0.84c1 0 1.84-0.8 1.84-1.84 0-1.96 1.040-3.32 1.68-3.92 0.6-0.6 0.96-0.96 0.96-2.48 0-2.28-1.84-4.12-4.12-4.12s-4.12 1.84-4.12 4.12c0 0.44-0.36 0.84-0.84 0.84-0.44 0-0.84-0.36-0.84-0.84 0-3.16 2.6-5.76 5.76-5.76s5.76 2.6 5.76 5.76c0 2.040-0.6 2.8-1.44 3.64-0.44 0.44-1.2 1.4-1.2 2.76 0.040 1.96-1.52 3.52-3.44 3.52zM13.64 10.44c-0.2 0-0.44-0.080-0.6-0.24-0.32-0.32-0.32-0.84 0-1.16l1.72-1.72c0.32-0.32 0.84-0.32 1.16 0l1 1c0.32 0.32 0.32 0.84 0 1.16s-0.84 0.32-1.16 0l-0.4-0.4-1.12 1.12c-0.16 0.16-0.36 0.24-0.6 0.24zM1.92 24.28c-0.2 0-0.44-0.080-0.6-0.24l-1.080-1.080c-0.32-0.32-0.32-0.84 0-1.16s0.84-0.32 1.16 0l0.52 0.52 4.4-4.4c0.32-0.32 0.84-0.32 1.16 0s0.32 0.84 0 1.16l-5 4.96c-0.16 0.16-0.36 0.24-0.56 0.24z"/>
</svg>
</div>
</aside>
<aside id="itembar">
<button class="itembar-btn active" data-panel="body" title="Body" type="button">
<svg viewBox="0 0 512 512" aria-hidden="true">
<path fill="currentColor" d="M216 260c0 15.464-12.536 28-28 28s-28-12.536-28-28c0-44.112 35.888-80 80-80s80 35.888 80 80c0 15.464-12.536 28-28 28s-28-12.536-28-28c0-13.234-10.767-24-24-24s-24 10.766-24 24zm24-176c-97.047 0-176 78.953-176 176 0 15.464 12.536 28 28 28s28-12.536 28-28c0-66.168 53.832-120 120-120s120 53.832 120 120c0 75.164-71.009 70.311-71.997 143.622L288 404c0 28.673-23.327 52-52 52-15.464 0-28 12.536-28 28s12.536 28 28 28c59.475 0 107.876-48.328 108-107.774.595-34.428 72-48.24 72-144.226 0-97.047-78.953-176-176-176zm268.485-52.201L480.2 3.515c-4.687-4.686-12.284-4.686-16.971 0L376.2 90.544c-4.686 4.686-4.686 12.284 0 16.971l28.285 28.285c4.686 4.686 12.284 4.686 16.97 0l87.03-87.029c4.687-4.688 4.687-12.286 0-16.972zM168.97 314.745c-4.686-4.686-12.284-4.686-16.97 0L3.515 463.23c-4.686 4.686-4.686 12.284 0 16.971L31.8 508.485c4.687 4.686 12.284 4.686 16.971 0L197.256 360c4.686-4.686 4.686-12.284 0-16.971l-28.286-28.284z"/>
</svg>
</button>
<button class="itembar-btn" data-panel="components" title="Components" type="button">
<svg viewBox="0 0 600 600" aria-hidden="true">
<g transform="matrix(0.95173205,0,0,0.95115787,13.901174,12.168794)" fill="currentColor">
<path d="M 447.70881 -12.781343 A 42.041451 42.041451 0 0 0 405.66786 29.260344 L 405.66786 50.301721 L 27.434765 50.301721 A 42.041302 42.041302 0 0 0 -14.606185 92.341354 A 42.041302 42.041302 0 0 0 27.434765 134.38304 L 405.66786 134.38304 L 405.66786 155.44906 A 42.041451 42.041451 0 0 0 447.70881 197.49075 A 42.041451 42.041451 0 0 0 489.74976 155.44906 L 489.74976 134.38304 L 573.78036 134.38304 A 42.041302 42.041302 0 0 0 615.82336 92.341354 A 42.041302 42.041302 0 0 0 573.78036 50.301721 L 489.74976 50.301721 L 489.74976 29.260344 A 42.041451 42.041451 0 0 0 447.70881 -12.781343 z M 143.0012 197.48869 A 42.041451 42.041451 0 0 0 100.9582 239.53038 L 100.9582 260.5697 L 27.447078 260.5697 A 42.041302 42.041302 0 0 0 -14.593872 302.61139 A 42.041302 42.041302 0 0 0 27.447078 344.65308 L 100.9582 344.65308 L 100.9582 365.7191 A 42.041451 42.041451 0 0 0 143.0012 407.76078 A 42.041451 42.041451 0 0 0 185.04215 365.7191 L 185.04215 344.65308 L 573.79472 344.65308 A 42.041302 42.041302 0 0 0 615.83567 302.61139 A 42.041302 42.041302 0 0 0 573.79472 260.5697 L 185.04215 260.5697 L 185.04215 239.53038 A 42.041451 42.041451 0 0 0 143.0012 197.48869 z M 279.59427 407.76078 A 42.041451 42.041451 0 0 0 237.55332 449.80042 L 237.55332 470.83974 L 27.447078 470.83974 A 42.041302 42.041302 0 0 0 -14.593872 512.88143 A 42.041302 42.041302 0 0 0 27.447078 554.92106 L 237.55332 554.92106 L 237.55332 575.98913 A 42.041451 42.041451 0 0 0 279.59427 618.02877 A 42.041451 42.041451 0 0 0 321.63522 575.98913 L 321.63522 554.92106 L 573.79472 554.92106 A 42.041302 42.041302 0 0 0 615.83567 512.88143 A 42.041302 42.041302 0 0 0 573.79472 470.83974 L 321.63522 470.83974 L 321.63522 449.80042 A 42.041451 42.041451 0 0 0 279.59427 407.76078 z " />
</g>
</svg>
</button>
<button class="itembar-btn" id="explodeBtn" title="Explode" type="button" aria-label="Explode model">
<svg viewBox="0 0 512 512" aria-hidden="true">
<path d="M511.949,133.188c0.282-2.594-0.623-5.291-2.688-7.194c-3.456-3.191-8.875-2.987-12.058,0.486l-70.536,76.416
c0,0-0.137-113.886-0.171-114.202l23.723-27.674c2.176-2.526,2.671-6.093,1.271-9.122c-1.399-3.021-4.42-4.966-7.757-4.966h-179.2
c-2.492,0-4.855,1.084-6.477,2.978l-102.4,119.467c-2.176,2.526-2.671,6.093-1.271,9.122c1.391,3.021,4.412,4.966,7.748,4.966
h34.133v42.667H128v-93.867c0-3.507-2.15-6.656-5.419-7.945c-3.243-1.289-6.989-0.435-9.37,2.133L2.278,245.922
C0.819,247.501,0,249.583,0,251.733v179.2c0,3.516,2.15,6.664,5.427,7.945c1.007,0.401,2.065,0.589,3.106,0.589
c2.33,0,4.625-0.956,6.263-2.748L102.4,341.82v114.714c0,4.71,3.814,8.533,8.533,8.533h221.841c4.719,0,8.533-3.823,8.533-8.533
v-128h51.226v94.839c0,3.524,2.159,6.682,5.444,7.953c1.007,0.393,2.048,0.58,3.089,0.58c2.347,0,4.651-0.973,6.289-2.773
l102.4-111.906c1.442-1.57,2.244-3.627,2.244-5.76V134.118C512,133.811,511.983,133.495,511.949,133.188z M110.933,226.133
c-4.719,0-8.533,3.823-8.533,8.533v81.997l-85.333,92.442V255.078l93.867-101.086V226.133z M180.685,166.4L268.459,64h156.723
l-87.774,102.4H180.685z M324.241,448H119.467V243.2h204.774V448z M394.795,237.414c-1.451,1.57-2.261,3.644-2.261,5.786v68.267
h-51.226v-76.8c0-4.71-3.814-8.533-8.533-8.533H213.333v-42.667h128c2.492,0,4.855-1.084,6.477-2.978l61.79-72.09
c0,0,0.205,112.119,0.307,112.649L394.795,237.414z M494.933,308.147L409.6,401.408V246.537l85.333-92.442V308.147z"/>
</svg>
</button>
<div class="itembar-spacer"></div>
<div class="orbit-inline">
<button class="itembar-btn small orbit-toggle" id="orbitToggle" title="Rotate" type="button" aria-label="Rotate view">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M14.37,20.55c-.66,1.38-1.48,2.2-2.37,2.2-1.69,0-3.13-2.95-3.66-7.09A25,25,0,0,1,8.09,12a25,25,0,0,1,.25-3.66c.53-4.14,2-7.09,3.66-7.09s3.13,3,3.66,7.09A22.48,22.48,0,0,1,15.89,11"/>
<path d="M13.9,15.85l-.92,0-1,0-1,0a22.48,22.48,0,0,1-2.68-.23c-4.14-.53-7.09-2-7.09-3.66s3-3.13,7.09-3.66A25,25,0,0,1,12,8.09a26.79,26.79,0,0,1,3.17.18l.49.07c4.14.53,7.09,2,7.09,3.66,0,.89-.82,1.71-2.2,2.37"/>
<polyline points="12 12.98 14.93 15.91 12 18.84"/>
</svg>
</button>
<div class="orbit-inline-panel" id="orbitPanel">
<button data-dir="up" aria-label="Rotate up" type="button">
<svg viewBox="0 0 24 24">
<path d="M6 14l6-6 6 6" />
</svg>
</button>
<button data-dir="left" aria-label="Rotate left" type="button">
<svg viewBox="0 0 24 24">
<path d="M14 6l-6 6 6 6" />
</svg>
</button>
<button data-dir="right" aria-label="Rotate right" type="button">
<svg viewBox="0 0 24 24">
<path d="M10 6l6 6-6 6" />
</svg>
</button>
<button data-dir="down" aria-label="Rotate down" type="button">
<svg viewBox="0 0 24 24">
<path d="M6 10l6 6 6-6" />
</svg>
</button>
</div>
</div>
<button
class="itembar-btn small"
id="themeToggleBtn"
title="Switch mode"
type="button"
aria-label="Switch light and dark mode"
>
<span class="theme-icon theme-icon-sun" aria-hidden="true">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M18.5 12C18.5 8.41 15.59 5.5 12 5.5C8.41 5.5 5.5 8.41 5.5 12" />
<path d="M4.98999 4.98999L4.85999 4.85999M19.01 4.98999L19.14 4.85999L19.01 4.98999ZM12 2.07999V2V2.07999ZM2.08002 12H2H2.08002ZM22 12H21.92H22Z" />
<path class="theme-icon-soft" d="M4 15H20" />
<path d="M6 18H18" />
<path class="theme-icon-soft" d="M9 21H15" />
</svg>
</span>
<span class="theme-icon theme-icon-moon" aria-hidden="true">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M13 6V3M18.5 12V7M14.5 4.5H11.5M21 9.5H16M15.5548 16.8151C16.7829 16.8151 17.9493 16.5506 19 16.0754C17.6867 18.9794 14.7642 21 11.3698 21C6.74731 21 3 17.2527 3 12.6302C3 9.23576 5.02061 6.31331 7.92462 5C7.44944 6.05072 7.18492 7.21708 7.18492 8.44523C7.18492 13.0678 10.9322 16.8151 15.5548 16.8151Z" />
</svg>
</span>
</button>
<button class="itembar-btn small" id="helpBtn" title="Help" type="button" aria-label="Help and information">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor">
<path
d="M12 19V18.99M8.12598 8C8.57002 6.27477 10.1361 5 12 5C12.7285 5 13.4116 5.1948 14 5.53515M12 16C12 11.5 16 12.5 16 9C16 8.6547 15.9562 8.31962 15.874 8"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
<button class="itembar-btn small" id="resetBtn" title="Reset" type="button" aria-label="Reset view">
<svg viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
<path
d="M960 0v112.941c467.125 0 847.059 379.934 847.059 847.059 0 467.125-379.934 847.059-847.059 847.059-467.125 0-847.059-379.934-847.059-847.059 0-267.106 126.607-515.915 338.824-675.727v393.374h112.94V112.941H0v112.941h342.89C127.058 407.38 0 674.711 0 960c0 529.355 430.645 960 960 960s960-430.645 960-960S1489.355 0 960 0"
fill-rule="evenodd"
/>
</svg>
</button>
</aside>
</div>
<div id="componentModal" class="component-modal">
<div class="component-modal-inner">
<button
id="componentModalClose"
class="component-modal-close"
type="button"
aria-label="Close"
>
<svg viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="10"></circle>
<path d="M15 9L9 15"></path>
<path d="M9 9L15 15"></path>
</svg>
</button>
<div class="component-modal-header">
<h3 id="componentModalTitle">Component title</h3>
<p id="componentModalSubtitle">Component description</p>
</div>
<div class="component-modal-divider"></div>
<div class="component-modal-docs-title">DOCUMENTATION</div>
<div class="component-modal-actions">
<a id="docSchematics" class="doc-action" href="#" target="_blank" rel="noopener noreferrer">
<span class="doc-icon">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/>
<path d="M14 3v5h5"/>
<path d="M9 15h6"/>
<path d="M9 11h3"/>
</svg>
</span>
<span class="doc-label">Schematics</span>
</a>
<a id="docManual" class="doc-action" href="#" target="_blank" rel="noopener noreferrer">
<span class="doc-icon">
<svg viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="9"/>
<circle cx="12" cy="12" r="3"/>
</svg>
</span>
<span class="doc-label">Manual</span>
</a>
<a id="docMaintenance" class="doc-action" href="#" target="_blank" rel="noopener noreferrer">
<span class="doc-icon">
<svg viewBox="0 0 24 24" aria-hidden="true">
<rect x="4" y="6" width="12" height="12" rx="2"/>
<path d="M16 10l4-2v8l-4-2z"/>
</svg>
</span>
<span class="doc-label">Maintenance</span>
</a>
</div>
</div>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>