feat: interactive orphanages globe website
This commit is contained in:
Nuri Softworks
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
|
.vite/
|
||||||
|
.DS_Store
|
||||||
18
README.md
Normal file
18
README.md
Normal 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
17
app.js
Normal 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
1
index.html
Normal 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
1104
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
1
package.json
Normal file
1
package.json
Normal 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
1
style.css
Normal 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
7
vite.config.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
server: {
|
||||||
|
allowedHosts: true
|
||||||
|
}
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user