-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
427 lines (410 loc) · 15.5 KB
/
index.html
File metadata and controls
427 lines (410 loc) · 15.5 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
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, viewport-fit=cover"
/>
<title>
360° Panoramic Scenes Virtual Tour Brain Tree | JavaScript (Vanilla),
HTML5, CSS3, Marzipano
</title>
<meta
name="description"
content="360° Panoramic Scenes Virtual Tour Brain Tree is a framework-free SPA built with vanilla JavaScript, HTML5, CSS3, and Marzipano. Explore immersive panoramic rooms with hotspots, fullscreen controls, autorotate, and responsive UI."
/>
<meta name="robots" content="index, follow, max-image-preview:large" />
<meta name="theme-color" content="#070a14" />
<meta
name="application-name"
content="360° Panoramic Scenes Virtual Tour Brain Tree"
/>
<meta
name="keywords"
content="360 virtual tour, panoramic scenes, virtual reality tour, Marzipano, vanilla JavaScript, HTML5, CSS3, framework-free SPA, hotspot navigation, fullscreen tour, responsive web app, educational JavaScript project, Braintree virtual tour"
/>
<meta name="author" content="Arnob Mahmud" />
<meta name="creator" content="Arnob Mahmud" />
<meta name="publisher" content="Arnob Mahmud" />
<meta name="contact" content="contact@arnobmahmud.com" />
<meta name="url" content="https://360-panoramic-tour.vercel.app/" />
<link rel="canonical" href="https://360-panoramic-tour.vercel.app/" />
<meta
property="og:site_name"
content="360° Panoramic Scenes Virtual Tour Brain Tree"
/>
<meta
property="og:title"
content="360° Panoramic Scenes Virtual Tour Brain Tree | JavaScript (Vanilla), HTML5, CSS3, Marzipano"
/>
<meta
property="og:description"
content="Experience an immersive 360° virtual tour with scene hotspots, smooth controls, responsive layout, and a beginner-friendly vanilla JavaScript architecture."
/>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://360-panoramic-tour.vercel.app/" />
<meta
property="og:image"
content="https://360-panoramic-tour.vercel.app/tiles/0-entrance/preview.jpg"
/>
<meta
property="og:image:alt"
content="360° panoramic entrance scene preview"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content="360° Panoramic Scenes Virtual Tour Brain Tree | Vanilla JS"
/>
<meta
name="twitter:description"
content="Framework-free 360° virtual tour built with JavaScript, HTML5, CSS3, and Marzipano. Explore immersive scenes and hotspot navigation."
/>
<meta
name="twitter:image"
content="https://360-panoramic-tour.vercel.app/tiles/0-entrance/preview.jpg"
/>
<meta name="twitter:image:alt" content="360° virtual tour preview image" />
<link rel="me" href="https://www.arnobmahmud.com" />
<link rel="icon" type="image/svg+xml" href="/public/favicon.svg" />
<link rel="shortcut icon" href="/public/favicon.svg" />
<link rel="stylesheet" href="vendor/reset.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body class="multiple-scenes">
<!-- Decorative fixed background layer (non-interactive). -->
<div class="site-bg parallax-layer" aria-hidden="true"></div>
<!-- Global top navigation for section anchors. -->
<header class="site-header">
<div class="max-w-9xl header-inner">
<a href="#tour" class="brand">
<img src="/public/favicon.svg" alt="Project logo" />
<span>Panoramic Virtual Tour</span>
</a>
<nav class="top-nav">
<a href="#tour">Tour</a>
<a href="#features">Features</a>
<a href="#learning">Learning</a>
<a href="#gallery">Gallery</a>
<a href="#faq">FAQ</a>
</nav>
</div>
</header>
<main class="page-content">
<!-- Hero: project summary + quick scene navigation controls. -->
<section class="hero max-w-9xl reveal" id="home">
<div class="hero-copy">
<p class="eyebrow">Vanilla JS + HTML + CSS</p>
<h1>Modern 360° Tour Learning Project</h1>
<h2 class="hero-subtitle">Interactive Panoramic Learning Showcase</h2>
<p>
Explore immersive scenes while learning a complete
beginner-to-intermediate frontend workflow: scene-based architecture
with Marzipano, reusable DOM rendering utilities, responsive layout
strategy, smooth interaction states, accessibility-aware controls,
SEO-ready metadata, and production-focused Vercel deployment. This
project is designed as a practical reference template for building
virtual tours for schools, museums, offices, real estate, and
portfolio showcases using clean vanilla JavaScript fundamentals
without heavy frameworks.
</p>
<div class="hero-meta-row">
<span>12 Scenes</span>
<span>Hotspot Navigation</span>
<span>Keyboard Shortcuts</span>
<span>Vercel Ready</span>
</div>
<div class="hero-badges" id="heroBadges"></div>
</div>
<aside class="hero-sidebar reveal">
<h2>Quick Navigator</h2>
<div id="floorMiniMap" class="floor-mini-map"></div>
<div id="sceneQuickJump"></div>
<input
id="sceneSearchInput"
type="search"
placeholder="Search scenes..."
aria-label="Search scenes"
/>
<select id="sceneTypeFilter" aria-label="Filter scenes by type">
<option value="">All types</option>
</select>
<label for="sceneFilter" class="sr-only">Filter scenes</label>
<select id="sceneFilter"></select>
</aside>
</section>
<!-- Tour Stage: Marzipano canvas and all runtime controls/hotspots. -->
<section class="tour-wrapper max-w-9xl reveal" id="tour">
<div class="tour-stage" id="tourExperience">
<div
id="sceneLoadingOverlay"
class="scene-loading-overlay"
aria-hidden="true"
>
<div class="loader-dot"></div>
<p>Switching scene...</p>
</div>
<div class="tour-stage-tools">
<button
id="tourPrevBtn"
type="button"
class="tour-tool-btn"
aria-label="Previous scene"
>
<img src="/public/images/left.png" alt="" aria-hidden="true" />
<span>Prev</span>
</button>
<button
id="tourPlayBtn"
type="button"
class="tour-tool-btn"
aria-label="Toggle guided tour autoplay"
>
<img
class="icon-play off"
src="/public/images/play.png"
alt=""
aria-hidden="true"
/>
<img
class="icon-play on"
src="/public/images/pause.png"
alt=""
aria-hidden="true"
/>
<span id="tourPlayLabel">Tour Play</span>
</button>
<button
id="tourNextBtn"
type="button"
class="tour-tool-btn"
aria-label="Next scene"
>
<span>Next</span>
<img src="/public/images/right.png" alt="" aria-hidden="true" />
</button>
<button
id="copySceneLinkBtn"
type="button"
class="tour-tool-btn"
aria-label="Copy current scene link"
>
<img src="/public/images/copy.png" alt="" aria-hidden="true" />
<span>Copy Link</span>
</button>
<button
id="shortcutHelpBtn"
type="button"
class="tour-tool-btn"
aria-label="Open keyboard shortcuts help"
>
<img
src="/public/images/shortcuts.png"
alt=""
aria-hidden="true"
/>
<span>Shortcuts</span>
</button>
</div>
<div
id="tourProgressWrap"
class="tour-progress-wrap"
aria-label="Guided tour progress"
>
<div id="tourProgressBar" class="tour-progress-bar"></div>
</div>
<div id="pano"></div>
<div id="sceneList">
<div class="scene-list-tools">
<button
id="clearSceneFiltersBtn"
type="button"
class="scene-list-clear"
>
Reset filters
</button>
</div>
<ul class="scenes">
<a href="javascript:void(0)" class="scene" data-id="0-entrance"
><li class="text">Entrance</li></a
>
<a
href="javascript:void(0)"
class="scene"
data-id="1-main-corridor"
><li class="text">Main Corridor</li></a
>
<a href="javascript:void(0)" class="scene" data-id="2-sun-lounge"
><li class="text">Sun Lounge</li></a
>
<a href="javascript:void(0)" class="scene" data-id="3-lounge-a"
><li class="text">Lounge A</li></a
>
<a href="javascript:void(0)" class="scene" data-id="4-lounge-b"
><li class="text">Lounge B</li></a
>
<a href="javascript:void(0)" class="scene" data-id="5-lounge-c"
><li class="text">Lounge C</li></a
>
<a href="javascript:void(0)" class="scene" data-id="6-queit-area"
><li class="text">Queit Area</li></a
>
<a href="javascript:void(0)" class="scene" data-id="7-kitchen"
><li class="text">Kitchen</li></a
>
<a
href="javascript:void(0)"
class="scene"
data-id="8-upstairs-corridor"
><li class="text">Upstairs Corridor</li></a
>
<a href="javascript:void(0)" class="scene" data-id="9-room-a"
><li class="text">Room A</li></a
>
<a href="javascript:void(0)" class="scene" data-id="10-room-b"
><li class="text">Room B</li></a
>
<a href="javascript:void(0)" class="scene" data-id="11-room-c"
><li class="text">Room C</li></a
>
</ul>
</div>
<div id="titleBar"><h2 class="sceneName"></h2></div>
<a href="javascript:void(0)" id="autorotateToggle">
<img
class="icon off"
src="/public/images/play.png"
alt="Start autoplay"
/>
<img
class="icon on"
src="/public/images/pause.png"
alt="Stop autoplay"
/>
</a>
<a href="javascript:void(0)" id="fullscreenToggle">
<img
class="icon off"
src="/public/images/fullscreen.png"
alt="Enter fullscreen"
/>
<img
class="icon on"
src="/public/images/windowed.png"
alt="Exit fullscreen"
/>
</a>
<a href="javascript:void(0)" id="sceneListToggle">
<img
class="icon off"
src="/public/images/expand.png"
alt="Open scene list"
/>
<img
class="icon on"
src="/public/images/collapse.png"
alt="Close scene list"
/>
</a>
<a
href="javascript:void(0)"
id="viewUp"
class="viewControlButton viewControlButton-1"
><img class="icon" src="/public/images/up.png" alt="Look up"
/></a>
<a
href="javascript:void(0)"
id="viewDown"
class="viewControlButton viewControlButton-2"
><img class="icon" src="/public/images/down.png" alt="Look down"
/></a>
<a
href="javascript:void(0)"
id="viewLeft"
class="viewControlButton viewControlButton-3"
><img class="icon" src="/public/images/left.png" alt="Look left"
/></a>
<a
href="javascript:void(0)"
id="viewRight"
class="viewControlButton viewControlButton-4"
><img class="icon" src="/public/images/right.png" alt="Look right"
/></a>
<a
href="javascript:void(0)"
id="viewIn"
class="viewControlButton viewControlButton-5"
><img class="icon" src="/public/images/plus.png" alt="Zoom in"
/></a>
<a
href="javascript:void(0)"
id="viewOut"
class="viewControlButton viewControlButton-6"
><img class="icon" src="/public/images/minus.png" alt="Zoom out"
/></a>
</div>
</section>
<!-- Educational showcase sections below the live tour. -->
<section id="features" class="max-w-9xl reveal section-shell">
<h2>Feature Highlights</h2>
<div id="featureCards" class="grid-cards"></div>
</section>
<section id="learning" class="max-w-9xl reveal section-shell">
<h2>Learning Components</h2>
<div id="learningTabs"></div>
</section>
<section id="gallery" class="max-w-9xl reveal section-shell">
<h2>Visual Inspiration Gallery</h2>
<div id="dynamicGallery" class="gallery-grid"></div>
</section>
<section id="stats" class="max-w-9xl reveal section-shell">
<h2>Project Snapshot</h2>
<div id="statsBadges" class="badge-row"></div>
<div class="table-wrap">
<table id="sceneTable"></table>
</div>
</section>
<section id="faq" class="max-w-9xl reveal section-shell">
<h2>Frequently Asked Questions</h2>
<div id="faqDropdowns"></div>
</section>
</main>
<footer class="site-footer reveal">
<div class="max-w-9xl">
<p>
Built for educational learning with vanilla JavaScript fundamentals.
</p>
<p id="copyrightLine"></p>
</div>
</footer>
<div id="shortcutModal" class="shortcut-modal" aria-hidden="true">
<div class="shortcut-modal-backdrop" data-close-shortcuts="true"></div>
<div
class="shortcut-modal-card"
role="dialog"
aria-modal="true"
aria-labelledby="shortcutModalTitle"
>
<h3 id="shortcutModalTitle">Keyboard Shortcuts</h3>
<ul class="shortcut-list">
<li><kbd>F</kbd> Toggle fullscreen</li>
<li><kbd>Space</kbd> Toggle autorotate</li>
<li><kbd>N</kbd> Next scene</li>
<li><kbd>P</kbd> Previous scene</li>
<li><kbd>+</kbd>/<kbd>-</kbd> Zoom in/out</li>
<li><kbd>Arrow keys</kbd> Move view</li>
</ul>
<button id="closeShortcutModalBtn" class="tour-tool-btn" type="button">
Close
</button>
</div>
</div>
<!-- Vendor libraries (order matters: utilities first, then app data, then app logic). -->
<script src="vendor/screenfull.min.js"></script>
<script src="vendor/bowser.min.js"></script>
<script src="vendor/marzipano.js"></script>
<script src="data.js"></script>
<script src="index.js"></script>
</body>
</html>