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

feat: rewrite as Vite + Globe.GL with side-panel + zoom photos

Browse Source
This commit is contained in:
Nuri Softworks
2026-08-08 16:06:12 +00:00
parent b472a6670b
commit 7d0cff306c
11 changed files with 1677 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
index.html
View File

@@ -1 +1,54 @@
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Homes of Hope — Orphanages Around the World</title><link rel="stylesheet" href="/style.css"><script src="https://unpkg.com/globe.gl"></script></head><body><header><div><small>AN EDUCATIONAL MAP</small><h1>Homes of Hope</h1></div><p>Explore children’s homes across Ethiopia and nine Muslim-majority countries. Rotate, zoom and select a golden location marker.</p></header><main><section class="layout"><div class="globe-wrap"><div class="hint">↔ Drag to rotate · Scroll to zoom</div><div id="globe"></div></div><aside class="panel"><div id="detail"></div></aside></section><section class="countries"><h2>Explore all 10 countries</h2><div class="list" id="list"></div><p class="note"><b>About this demonstration:</b> This is a sample educational project, not an official directory or fundraising platform. Names, biographies and child counts are sample information unless independently confirmed. Photos are illustrative images from Unsplash and do not depict the named homes. Country and city coordinates are approximate.</p></section></main><script type="module" src="/app.js"></script></body></html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Orphanages Across Ten Countries · A Simple Globe Tour</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,800&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./src/styles.css" />
</head>
<body>
<div id="app">
<header class="topbar">
<div class="brand">
<span class="brand-mark"></span>
<div class="brand-text">
<h1>Ten Countries · Ten Homes</h1>
<p>A short tour of orphanages in Ethiopia and nine Muslim-majority countries.</p>
</div>
</div>
<div class="topbar-actions">
<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>
</header>
<main class="layout">
<section class="globe-wrap">
<div id="globe"></div>
<div class="legend">
<div class="legend-row"><span class="dot"></span>Orphanage location</div>
<div class="legend-sub">Drag to rotate · Scroll to zoom · Click a marker for details</div>
</div>
</section>
<aside id="panel" class="panel">
<div class="panel-empty">
<div class="empty-illustration">🌍</div>
<h2>Pick a marker on the globe</h2>
<p>You'll see the orphanage's name, the city and country, a short biography, photos, and roughly how many children live there.</p>
<ul class="country-list" id="country-list"></ul>
</div>
</aside>
</main>
<footer class="footbar">
<span>Built as a learning project · Photos via Unsplash · Coordinates are approximate city centers</span>
</footer>
</div>
<script type="module" src="./src/main.js"></script>
</body>
</html>