nuri-ai/orphanages-globe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add search bar, auto-tour, and OpenStreetMap embed in side panel

Browse Source
This commit is contained in:
Nuri Softworks
2026-08-08 17:58:00 +00:00
parent e9526768c0
commit 490b48b0ea
3 changed files with 365 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
index.html
View File

@@ -20,6 +20,10 @@
</div>
</div>
<div class="topbar-actions">
<button id="tour-btn" class="btn-ghost" title="Auto-tour through all 10 orphanages">
<span id="tour-icon">▶</span>
<span id="tour-label">Play Tour</span>
</button>
<button id="reset-view" class="btn-ghost" title="Reset globe view">↺ Reset</button>
<span id="hint" class="hint">Click any marker to open the home</span>
</div>
@@ -27,6 +31,17 @@
<main class="layout">
<section class="globe-wrap">
<div class="search-bar">
<span class="search-icon">🔍</span>
<input
id="search-input"
type="text"
placeholder="Search country or city… (e.g. Saudi Arabia, Dhaka, Amman)"
autocomplete="off"
/>
<button id="search-clear" class="search-clear" title="Clear search" hidden>✕</button>
<ul id="search-results" class="search-results" hidden></ul>
</div>
<div id="globe"></div>
<div class="legend">
<div class="legend-row"><span class="dot"></span>Orphanage location</div>