/* ═══════════════ Closink Landing · MOCKUPS (light app UI in dark frames) ═══════════════ */ /* ---- status bar bits ---- */ const SignalDots = ({ c = '#0F172A', bars = 2 }) => ( {[3, 6, 9, 12].map((h, i) => ( ))} ); const WifiIc = ({ c = '#0F172A' }) => ( ); const BatteryIc = ({ pct = 88, c = '#0F172A', charging }) => ( {pct} ); const StatusBar = ({ time = '01:09', dark = false, charging = true, pct = 88, bars = 2 }) => { const c = dark ? '#fff' : '#0F172A'; return (
{time}
); }; /* ---- bottom nav ---- */ const NAV = [ ['Harita', (a) => ], ['Çevre', (a) => ], ['SOS', (a) => , true], ['Bildirim', (a) => , false, 4], ['Plan', (a) => ], ]; const BottomNav = ({ active = 0 }) => (
{NAV.map(([label, icon, isSos, badge], i) => { const a = i === active; return (
{icon(a)} {badge && {badge}}
{label}
); })}
); /* ---- phone frame ---- */ const Phone = ({ children, w = 272, h = 568, dark = false, style, className = '' }) => (
{children}
); /* ---- full-size phone (272×568) scaled to fit a slot — iç layout BOZULMAZ ---- */ const ScaledPhone = ({ targetW = 272, dark = false, className = '', style, children }) => { const s = targetW / 272; return (
{children}
); }; /* ---- light map streets ---- */ const Road = ({ s }) =>
; const StreetLabel = ({ t, s }) =>
{t}
; /* ════ SCREEN 1 · Live map (Harita) ════ */ const MapScreen = ({ scale = 1 }) => (
{/* dark-tone map (matches screenshot) */}
GÜLENSU MH.
{/* geofence */}
{/* avatar marker + home pin */}
15
{/* top controls */}
ARKADAŞLAR
{/* bottom action row */}
Yerini Bildir
SOS
{/* sheet peek */}
Yerler
Hareketler
ÇEVRE ÜYELERİ · 1/2 AKTİF
); /* ════ SCREEN 2 · SOS Ready ════ */ const SosReadyScreen = ({ holding = false }) => (
{/* emergency contacts */}
ACİL DURUM KİŞİLERİ · 1 + Ekle
A Abim ✕
{/* evidence archive */}
Kanıt Arşivi
Geçmiş SOS kayıtların — paylaş veya sil
{/* ready pill + headline */}
SOS HAZIR
Maksimum güven,
sıfır panik
3 saniye basılı tut. Konum, ses ve video otomatik paylaşılır.
{/* SOS button */}
{/* progress ring */}
SOS
Acil Durum Bildir · 3 sn basılı tut
); /* ════ SCREEN 3 · SOS Active (evidence recording) ════ */ const SosActiveScreen = () => (
{/* video card */}
{/* recording subject — kurgusal kişi (selfie kamerası: acil anında video kaydı) */} {/* shoulders / torso */} {/* neck */} {/* head */} {/* hair */} {/* warm top rim light */} {/* subtle face hint */}
↻ Çevir
REC 00:06
1080p
Konum sabit
{/* status card */}
SOS AKTİF
Çevren bilgilendiriliyor
00:06
{/* countdown ring */}
24 / 30 SANİYE
{/* audio wave */}
SES
{Array.from({ length: 26 }).map((_, i) => )}
00:06
{/* notified */}
BİLDİRİLDİ
{[['MY', '#22C55E'], ['ZA', '#3678F9'], ['AT', '#E11D48']].map(([t, c], i) => ( {t} ))}
Tüm aile
); /* ════ SCREEN 4 · Cinematic route (DARK) ════ */ const CinematicRouteScreen = ({ animate = true }) => { const path = "M40 470 C 70 380 150 410 150 330 S 90 250 150 200 S 230 170 220 110 S 170 60 232 40"; return (
{/* extruded blocks */} {[[30, 120, 26, 30], [200, 90, 30, 38], [60, 300, 34, 26], [180, 360, 28, 34], [120, 440, 30, 22], [210, 250, 24, 30]].map(([x, y, w, h], i) => (
))} {/* glowing route */} {/* start / end pins */} {/* moving car */} {/* glass metric card */}
BU HAFTA
18,4 km · 32 dk
{/* dark bottom nav */}
{['Harita', 'Çevre', 'SOS', 'Bildirim', 'Plan'].map((l, i) => (
{i === 4 ? :
}
{l}
))}
); }; /* ════ SCREEN 5 · Trip timeline (Hareketler) ════ */ const TripScreen = () => { const stops = [ ['Kandil Sk.', '22:30 – 23:16 · 45 dk'], ['Turgut Özal Blv.', '22:08 – 22:14 · 5 dk'], ['Aydınevler, Maltepe', '19:32 – 21:49 · 2 sa 17 dk'], ]; const legs = ['6.5 km · 16 dk · Araç', '5.7 km · 19 dk · Araç']; return (
Hareketler
{/* people row */}
{[['Sen', '#3678F9', 'linear-gradient(150deg,#7c8aa0,#43617a)'], ['Mehmet Kara', '#22C55E', '#E2E8F0']].map(([n, ring, bg], i) => (
{n}
))}
{/* day */}
Dün
7 Haziran Pazar
Bugün
{/* stat cards */}
{[['111 km', 'Mesafe'], ['10', 'Durak'], ['9', 'Yolculuk']].map(([v, l], i) => (
{v} {l}
))}
{/* timeline */}
{stops.map((s, i) => (
{s[0]}
{s[1]}
{legs[i] && (
{legs[i]}
)} ))}
); }; Object.assign(window, { Phone, ScaledPhone, StatusBar, BottomNav, MapScreen, SosReadyScreen, SosActiveScreen, CinematicRouteScreen, TripScreen });