const { useState, useEffect } = React; /* ═══════════════════════════════════════════════════════════════ LIGHT THEME: Dashboard screen content (adapted per device) ═══════════════════════════════════════════════════════════════ */ function LightDesktopScreen({ w = 380, h = 260 }) { return (
{/* Browser bar */}
ik-işleri.tr/dashboard
{/* Body */}
{/* Sidebar */}
ik-işleri.tr
{['Özet', 'Özlük', 'İzin', 'Bordro', 'Raporlar'].map((l, i) => (
{l}
))}
{/* Main */}
MART 2026
Günaydın, Zeynep.
{/* Stats */}
{[['142', 'Çalışan'], ['8', 'İzinde'], ['4', 'Kadro'], ['₺1.84M', 'Bordro']].map(([v, k], i) => (
{v}
{k}
))}
{/* Chart bars */}
DEVAM & İZİN
{[28, 34, 22, 38, 32, 30, 40, 36, 20, 38, 32, 36].map((h, i) => (
))}
); } function LightTabletScreen({ w = 220, h = 300 }) { return (
{/* Top bar */}
ik-işleri.tr
≡
{/* Content */}
MART 2026
Günaydın, Zeynep.
{/* Stats 2 col */}
{[['142', 'Çalışan', '+6'], ['8', 'İzinde', 'bugün'], ['₺1.84M', 'Bordro', 'Mart'], ['4', 'Açık kadro', '3 süreç']].map(([v, k], i) => (
{v}
{k}
))}
{/* Approvals */}
ONAY BEKLEYEN · 7
{[['E. Yıldız', 'İzin', '3g'], ['M. Kaya', 'Masraf', '₺2.1K'], ['B. Öztürk', 'Mesai', '6s']].map(([n, t, v], i) => (
{n}
{t} {v}
))}
); } function LightMobileScreen({ w = 140, h = 280 }) { return (
{/* Status bar */}
09:41
●●●○ ■
{/* Header */}
ik-işleri.tr
MART 2026
{/* Content */}
Günaydın, Zeynep.
{/* Stats */}
{[['142', 'Çalışan'], ['8', 'İzinde']].map(([v, k], i) => (
{v}
{k}
))}
{/* Quick action */}
EY
Emre Y.
Yıllık izin · 3 gün
{/* Mini chart */}
{[20, 26, 18, 30, 24, 22, 32, 28, 16, 30, 24, 28].map((h, i) => (
))}
{/* Bottom tab bar */}
{[ { label: 'Özet', active: true }, { label: 'İzin', active: false }, { label: 'Bordro', active: false }, { label: 'Profil', active: false }, ].map((tab, i) => (
{tab.label}
))}
); } /* ═══════════════════════════════════════════════════════════════ LIGHT DEVICE FRAMES ═══════════════════════════════════════════════════════════════ */ function LightLaptopFrame({ children, scale = 1 }) { return (
{children}
); } function LightTabletFrame({ children, scale = 1 }) { return (
{children}
); } function LightPhoneFrame({ children, scale = 1 }) { return (
{children}
); } /* ═══════════════════════════════════════════════════════════════ LIGHT OPTION A: Composed Overlap ═══════════════════════════════════════════════════════════════ */ function LightComposedOverlap() { return (
{/* Glow */}
{/* Desktop */}
{/* Tablet */}
{/* Mobile */}
her cihazda ik-işleri.tr
); } /* ═══════════════════════════════════════════════════════════════ LIGHT OPTION B: Fan / Yelpaze ═══════════════════════════════════════════════════════════════ */ function LightComposedFan() { return (
{['Masaüstü', 'Tablet', 'Mobil'].map((label, i) => (
{label}
))}
); } /* ═══════════════════════════════════════════════════════════════ LIGHT OPTION C: Perspective Sıralı ═══════════════════════════════════════════════════════════════ */ function LightComposedPerspective() { return (
RESPONSİVE
Her ekranda
aynı güç.
); } /* ═══════════════════════════════════════════════════════════════ LIGHT OPTION D: 3D Carousel ═══════════════════════════════════════════════════════════════ */ function LightAnimatedCarousel() { const [active, setActive] = useState(0); const devices = ['desktop', 'tablet', 'mobile']; const labels = ['Masaüstü', 'Tablet', 'Mobil']; useEffect(() => { const timer = setInterval(() => setActive(a => (a + 1) % 3), 3000); return () => clearInterval(timer); }, []); const getTransform = (index) => { const diff = ((index - active) + 3) % 3; if (diff === 0) return { x: 0, z: 60, scale: 1, opacity: 1, rot: 0 }; if (diff === 1) return { x: 200, z: -40, scale: 0.7, opacity: 0.4, rot: 15 }; return { x: -200, z: -40, scale: 0.7, opacity: 0.4, rot: -15 }; }; const renderDevice = (type) => { if (type === 'desktop') return ; if (type === 'tablet') return ; return ; }; return (
{devices.map((dev, i) => { const t = getTransform(i); return (
0 ? 10 : 1, }}> {renderDevice(dev)}
); })}
{labels[active]}
{devices.map((_, i) => ( ))}
); } /* ═══════════════════════════════════════════════════════════════ LIGHT OPTION E: Crossfade ═══════════════════════════════════════════════════════════════ */ function LightAnimatedCrossfade() { const [active, setActive] = useState(0); const labels = ['Masaüstü', 'Tablet', 'Mobil']; useEffect(() => { const timer = setInterval(() => setActive(a => (a + 1) % 3), 3500); return () => clearInterval(timer); }, []); return (
{/* Tab selector */}
{labels.map((label, i) => ( ))}
{/* Device display */}
her platformda tam deneyim
); } // Export all light components Object.assign(window, { LightDesktopScreen, LightTabletScreen, LightMobileScreen, LightLaptopFrame, LightTabletFrame, LightPhoneFrame, LightComposedOverlap, LightComposedFan, LightComposedPerspective, LightAnimatedCarousel, LightAnimatedCrossfade, });