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

feat: interactive orphanages globe website

Browse Source
This commit is contained in:
Nuri Softworks
2026-07-28 02:18:20 +00:00
commit b472a6670b
8 changed files with 1153 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored Normal file
View File

@@ -0,0 +1,4 @@
node_modules/
dist/
.vite/
.DS_Store

18
README.md Normal file
View File

@@ -0,0 +1,18 @@
# Homes of Hope
Interactive educational globe showing sample children’s-home profiles across Ethiopia and nine Muslim-majority countries.
## Run locally
```bash
npm install
npm run dev
```
## Production build
```bash
npm run build
```
> This demonstration uses sample, unverified profile information and illustrative Unsplash photos. It is not an official directory.

17
app.js Normal file
View File

@@ -0,0 +1,17 @@
const homes = [
['Ethiopia','Addis Ababa',9.03,38.74,'Addis Children’s Home',85,'A community home supporting children with shelter, school access, meals and healthcare.'],
['Somalia','Mogadishu',2.05,45.32,'Mogadishu Children’s Centre',60,'A local children’s centre providing safe accommodation, education and daily care.'],
['Sudan','Khartoum',15.50,32.56,'Khartoum Hope Home',72,'A residential programme offering protection, learning support and essential services.'],
['Egypt','Cairo',30.04,31.24,'Cairo Family Care Village',110,'A family-style care programme supporting children’s education, wellbeing and independence.'],
['Türkiye','Istanbul',41.01,28.98,'Istanbul Children’s Support Home',65,'A child-support home focused on stable care, education and social development.'],
['Pakistan','Lahore',31.52,74.36,'Lahore Children’s Village',120,'A children’s village offering family-style care, schooling and vocational preparation.'],
['Bangladesh','Dhaka',23.81,90.41,'Dhaka Child Care Village',95,'A care programme supporting children with housing, education, nutrition and health services.'],
['Indonesia','Jakarta',-6.21,106.85,'Jakarta Children’s Village',100,'A family-based programme helping children grow in a safe and supportive environment.'],
['Jordan','Amman',31.95,35.91,'Amman Children’s Village',80,'A child-care community providing family support, education and youth development.'],
['Morocco','Casablanca',33.57,-7.59,'Casablanca Children’s Home',75,'A community programme offering care, school support and pathways to independence.']
].map((x,i)=>({country:x[0],city:x[1],lat:x[2],lng:x[3],name:x[4],children:x[5],bio:x[6],img:`https://images.unsplash.com/photo-${['1488521787991-ed7bbaae773c','1504159506876-f8338247a14a','1494386346843-e12284507169','1503454537195-1dcabb73ffb9','1542810634-71277d95dcbb'][i%5]}?auto=format&fit=crop&w=900&q=75`}));
const globe=Globe()(document.getElementById('globe')).globeImageUrl('https://unpkg.com/three-globe/example/img/earth-blue-marble.jpg').backgroundImageUrl('https://unpkg.com/three-globe/example/img/night-sky.png').pointsData(homes).pointLat('lat').pointLng('lng').pointColor(()=> '#f8b84e').pointAltitude(.08).pointRadius(.45).pointLabel(d=>`<b>${d.name}</b><br>${d.city}, ${d.country}`).onPointClick(show);
globe.controls().autoRotate=true; globe.controls().autoRotateSpeed=.35;
function show(d){ globe.controls().autoRotate=false; globe.pointOfView({lat:d.lat,lng:d.lng,altitude:1.25},900); document.getElementById('detail').innerHTML=`<img src="${d.img}" alt="Illustrative view of children"><small>Illustrative online photo</small><h2>${d.name}</h2><p class="place">📍 ${d.city}, ${d.country}</p><p>${d.bio}</p><div class="number"><b>${d.children}</b><span>sample number of children</span></div><p class="sample">⚠ Sample information — not officially verified. Confirm details with the organisation before using them as facts.</p>`; document.querySelectorAll('.card').forEach(c=>c.classList.toggle('active',c.dataset.country===d.country));}
const list=document.getElementById('list'); homes.forEach(d=>{let b=document.createElement('button');b.className='card';b.dataset.country=d.country;b.innerHTML=`<span>${d.country}</span><small>${d.city}</small>`;b.onclick=()=>show(d);list.appendChild(b)});show(homes[0]);
addEventListener('resize',()=>globe.width(document.getElementById('globe').clientWidth).height(document.getElementById('globe').clientHeight));

1
index.html Normal file
View File

@@ -0,0 +1 @@
<!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>

1104
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

1
package.json Normal file
View File

@@ -0,0 +1 @@
{"name":"orphanages-globe","private":true,"version":"1.0.0","type":"module","scripts":{"dev":"vite --host 0.0.0.0","build":"vite build","preview":"vite preview --host 0.0.0.0"},"devDependencies":{"vite":"^7.0.0"}}

1
style.css Normal file
View File

@@ -0,0 +1 @@
:root{font-family:Inter,system-ui,sans-serif;color:#17251f;background:#f4f1e8}*{box-sizing:border-box}body{margin:0}header{padding:26px 5%;display:flex;justify-content:space-between;gap:20px;align-items:end}h1{margin:0;font-size:clamp(28px,4vw,52px)}header p{max-width:540px;margin:0;color:#52625b}.layout{display:grid;grid-template-columns:1fr 360px;min-height:650px;background:#071a2b}.globe-wrap{position:relative;min-width:0}#globe{height:650px;overflow:hidden}.hint{position:absolute;z-index:2;top:18px;left:18px;color:white;background:#08131dcc;padding:10px 15px;border-radius:30px}.panel{background:white;padding:22px;overflow:auto}#detail img{width:100%;height:190px;object-fit:cover;border-radius:16px}#detail>small{display:block;color:#68756f;margin:6px 2px}h2{margin:16px 0 4px}.place{color:#b46e13;font-weight:700}.number{background:#edf6ef;border-radius:14px;padding:14px;display:flex;align-items:center;gap:12px}.number b{font-size:30px;color:#176b42}.number span{font-size:13px}.sample{font-size:12px;background:#fff5d8;padding:10px;border-radius:10px}.countries{padding:35px 5% 50px}.countries h2{font-size:30px}.list{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.card{text-align:left;border:1px solid #d7ded8;background:white;border-radius:12px;padding:13px;cursor:pointer}.card span,.card small{display:block}.card span{font-weight:800}.card small{margin-top:4px;color:#66736d}.card.active{border-color:#1e784c;background:#e9f6ee}.note{margin-top:24px;color:#57645e;max-width:900px;line-height:1.6}@media(max-width:850px){header{align-items:start;flex-direction:column}.layout{grid-template-columns:1fr}#globe{height:480px}.panel{max-height:none}.list{grid-template-columns:repeat(2,1fr)}}

7
vite.config.js Normal file
View File

@@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
export default defineConfig({
server: {
allowedHosts: true
}
})