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

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));