<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>אפליקציית Zoom אינסופי</title>
    <style>
        * { box-sizing: border-box; user-select: none; }
        body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #0b132b; color: #fff; font-family: sans-serif; }
        #gallery-screen { position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 200; background: #0d1117; }
        h1 { color: #58a6ff; margin-bottom: 5px; }
        .cards-container { display: flex; gap: 15px; margin-top: 20px; }
        .card { background: #161b22; border: 1px solid #30363d; border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; width: 180px; }
        .card:hover { border-color: #58a6ff; }
        .card .icon { font-size: 40px; }
        #viewer-screen { position: absolute; width: 100%; height: 100%; display: none; }
        #viewport { position: relative; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; }
        .layer { position: absolute; width: 500px; height: 500px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.8); }
        .layer-title { font-size: 1.2rem; font-weight: bold; background: rgba(0,0,0,0.5); padding: 5px 15px; border-radius: 15px; }
        .layer-icon { font-size: 80px; }
        .layer-portal { width: 120px; height: 120px; border: 3px dashed #fff; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 12px; text-align: center; }
        .controls-bar { position: fixed; top: 15px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.8); padding: 10px 20px; border-radius: 30px; display: flex; gap: 10px; z-index: 100; }
        button { background: #21262d; color: #fff; border: 1px solid #30363d; padding: 8px 15px; border-radius: 15px; cursor: pointer; }
        button.active { background: #238636; }
        #hint-box { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.8); color: #58a6ff; padding: 10px 20px; border-radius: 20px; display: none; z-index: 100; }
    </style>
</head>
<body>
    <div id="gallery-screen">
        <h1>גלריית הזום האינסופי</h1>
        <p>בחרי נושא להתחלת החוויה:</p>
        <div class="cards-container">
            <div class="card" onclick="startExperience('time')"><div class="icon">⏳</div><h3>מסע בזמן</h3></div>
            <div class="card" onclick="startExperience('mystery')"><div class="icon">🕵️‍♂️</div><h3>תעלומה</h3></div>
            <div class="card" onclick="startExperience('micro')"><div class="icon">🌌</div><h3>מיקרו</h3></div>
        </div>
    </div>
    <div id="viewer-screen">
        <div class="controls-bar">
            <button onclick="backToGallery()">🏠 יציאה</button>
            <button id="auto-btn" onclick="toggleAutoZoom()">▶️ זום אוטומטי</button>
        </div>
        <div id="viewport"></div>
        <div id="hint-box">💡 רמז לתעלומה...</div>
    </div>
    <script>
        // תוכן הנושאים: הסיפורים, התמונות והרמזים
        const themesData = {
            time: {
                layers: [
                    { title: "1. עיר עתידנית בשנת 3000", emoji: "🏙️🛸🤖", text: "זום אל שעון הטיטאניום...", bg: "linear-gradient(135deg, #0d1b2a, #1b263b)" },
                    { title: "2. בית קפה מודרני (2026)", emoji: "☕🏙️📱", text: "זום לתמונה על הקיר...", bg: "linear-gradient(135deg, #2b2d42, #8d99ae)" },
                    { title: "3. שוק בימי הביניים (1450)", emoji: "🏰⚔️🍎", text: "זום לספר העתיק...", bg: "linear-gradient(135deg, #3d0c02, #5c1d0e)" },
                    { title: "4. ציור מערות קדום", emoji: "רת🛖🔥", text: "חזרה לעתיד...", bg: "linear-gradient(135deg, #1a0f00, #331e00)" }
                ]
            },
            mystery: {
                hints: [
                    "חפשי את הזכוכית המגדלת של הבלש...",
                    "מה מופיע במכתב המוצפן?",
                    "הביטי בתוך הכספת הסודית...",
                    "מי החשוד המסתורי?"
                ],
                layers: [
                    { title: "זירת הפשע - משרד הבלש", emoji: "🔎📜🕵️‍♂️", text: "זום לזכוכית המגדלת...", bg: "linear-gradient(135deg, #141e30, #243b55)" },
                    { title: "המכתב החשוד", emoji: "✉️🖋️🕯️", text: "זום לחותם האדום...", bg: "linear-gradient(135deg, #2c3e50, #000000)" },
                    { title: "הכספת הסודית", emoji: "🔐💎💰", text: "זום לאישון העין...", bg: "linear-gradient(135deg, #11998e, #38ef7d)" },
                    { title: "החשוד המרכזי!", emoji: "🎭🗝️❓", text: "הלולאה נחשפת...", bg: "linear-gradient(135deg, #4b6cb7, #182848)" }
                ]
            },
            micro: {
                layers: [
                    { title: "גלקסיית שביל החלב", emoji: "🌌🪐✨", text: "זום לכדור הארץ...", bg: "linear-gradient(135deg, #0f2027, #203a43)" },
                    { title: "כדור הארץ והאוקיינוס", emoji: "🌍🌊🐋", text: "זום לטיפת המים...", bg: "linear-gradient(135deg, #00b4db, #0083b0)" },
                    { title: "תא חי במיקרוסקופ", emoji: "🔬🦠🧬", text: "זום לתוך הדנ\"א...", bg: "linear-gradient(135deg, #11998e, #38ef7d)" },
                    { title: "חלקיקי אטום וקווארקים", emoji: "⚛️💫💥", text: "חזרה לגלקסיה...", bg: "linear-gradient(135deg, #8e2de2, #4a00e0)" }
                ]
            }
        };
        // משתני מערכת
        let currentTheme = null;
        let zoomLevel = 0;
        let isAutoZoom = false;
        let autoZoomInterval = null;

        const galleryScreen = document.getElementById('gallery-screen');
        const viewerScreen = document.getElementById('viewer-screen');
        const viewport = document.getElementById('viewport');
        const hintBox = document.getElementById('hint-box');

        const layerElements = [];
        const numVisibleLayers = 3;

        // יצירת השכבות במסך
        function initLayers() {
            viewport.innerHTML = '';
            layerElements.length = 0;
            for (let i = 0; i < numVisibleLayers; i++) {
                const el = document.createElement('div');
                el.className = 'layer';
                el.innerHTML = `
                    <div class="layer-title"></div>
                    <div class="layer-icon"></div>
                    <div class="layer-portal"></div>
                `;
                viewport.appendChild(el);
                layerElements.push(el);
            }
        }

        // התחלת חוויה לפי נושא
        function startExperience(themeKey) {
            currentTheme = themesData[themeKey];
            zoomLevel = 0;

            galleryScreen.style.display = 'none';
            viewerScreen.style.display = 'block';

            if (currentTheme.hints) {
                hintBox.style.display = 'block';
            } else {
                hintBox.style.display = 'none';
            }

            initLayers();
            update();
        }

        // חזרה לגלריה
        function backToGallery() {
            if (isAutoZoom) toggleAutoZoom();
            viewerScreen.style.display = 'none';
            galleryScreen.style.display = 'flex';
        }

        // חישוב הזום והצגה חלקה
        function update() {
            const layers = currentTheme.layers;
            const totalSteps = layers.length;

            const currentStepIndex = Math.floor(zoomLevel);
            const progress = zoomLevel - currentStepIndex;

            if (currentTheme.hints) {
                const hintIndex = ((currentStepIndex % totalSteps) + totalSteps) % totalSteps;
                hintBox.innerText = "💡 " + currentTheme.hints[hintIndex];
            }

            for (let i = 0; i < numVisibleLayers; i++) {
                const step = currentStepIndex + i;
                const dataIndex = ((step % totalSteps) + totalSteps) % totalSteps;
                const data = layers[dataIndex];
                const el = layerElements[i];

                el.style.background = data.bg;
                el.querySelector('.layer-title').innerText = data.title;
                el.querySelector('.layer-icon').innerText = data.emoji;
                el.querySelector('.layer-portal').innerText = data.text;

                const scale = Math.pow(5, progress - i);
                let opacity = 1;

                if (scale > 3) opacity = (5 - scale) / 2;
                else if (scale < 0.2) opacity = scale * 5;

                el.style.transform = `scale(${scale})`;
                el.style.opacity = Math.max(0, Math.min(1, opacity));
                el.style.zIndex = 100 - i;
            }
        }

        // מאזין לגלגלת העכבר במחשב
        window.addEventListener('wheel', (e) => {
            if (viewerScreen.style.display === 'block') {
                e.preventDefault();
                zoomLevel += e.deltaY * 0.0012;
                if (zoomLevel < 0) zoomLevel = 0;
                update();
            }
        }, { passive: false });

        // זום אוטומטי
        function toggleAutoZoom() {
            const btn = document.getElementById('auto-btn');
            isAutoZoom = !isAutoZoom;

            if (isAutoZoom) {
                btn.classList.add('active');
                btn.innerText = "⏸️ השהה";
                autoZoomInterval = setInterval(() => {
                    zoomLevel += 0.01;
                    update();
                }, 20);
            } else {
                btn.classList.remove('active');
                btn.innerText = "▶️ זום אוטומטי";
                clearInterval(autoZoomInterval);
            }
        }
    </script>
</body>
</html>
