Krzysztof221/

Silnik00

<div class="logo-source">PRĄD 00 [LOGO_ZERO]</div>

<div class="amfilada-container" id="amfilada">
    <!-- 1. PRZYPADEK -->
    <div class="step active" id="step-1">
        <h2 class="text-4xl font-light mb-4">1. przypadek</h2>
        <p class="text-gray-500 italic">Błysk. Punkt startowy bez filtra.</p>
    </div>

    <!-- 2. CZAS -->
    <div class="step" id="step-2">
        <h2 class="text-4xl font-light mb-4">2. czas</h2>
        <p class="text-gray-500 italic">Rytm. Odliczanie, które już trwa.</p>
        <div id="countdown" class="text-2xl mt-4 font-mono">...</div>
    </div>

    <!-- 3. MIEJSCE -->
    <div class="step" id="step-3">
        <h2 class="text-4xl font-light mb-4">3. miejsce</h2>
        <p class="text-gray-500 italic">Lokalizacja. Tu i teraz.</p>
        <p class="mt-4 text-xl" id="location-text">Wchodzisz w przestrzeń.</p>
    </div>

    <!-- 4. OCEŃ -->
    <div class="step" id="step-4">
        <h2 class="text-4xl font-light mb-4">4. oceń</h2>
        <p class="text-gray-500 italic">Skaner. Brak interpretacji, tylko fakty.</p>
        <div class="w-full h-1 bg-gray-800 mt-6 relative overflow-hidden">
            <div id="scanner-line" class="absolute inset-0 bg-white w-full h-full transform -translate-x-full"></div>
        </div>
    </div>

    <!-- 5. SZYBKO -->
    <div class="step" id="step-5">
        <h2 class="text-4xl font-light mb-4">5. szybko</h2>
        <p class="text-gray-500 italic">Przyspieszenie. Czysta kinetyka.</p>
        <div class="mt-4 flex justify-center gap-2">
            <span class="animate-ping inline-flex h-3 w-3 rounded-full bg-white opacity-75"></span>
            <span class="animate-ping inline-flex h-3 w-3 rounded-full bg-white opacity-75"></span>
        </div>
    </div>

    <!-- 6. ZDECYDUJ -->
    <div class="step" id="step-6">
        <h2 class="text-4xl font-light mb-4">6. zdecyduj</h2>
        <p class="text-gray-500 italic">Cięcie. Moment wyboru.</p>
        <p class="mt-4">Nikt tego nie zrobi za Ciebie.</p>
    </div>

    <!-- 7. WYBÓR SYTUACJI -->
    <div class="step" id="step-7">
        <h2 class="text-4xl font-light mb-4">7. wybór sytuacji</h2>
        <p class="text-gray-500 italic">Próg. Wejście w konkretną tkankę życia.</p>
    </div>

    <!-- 8. ROZPROSZENIE -->
    <div class="step" id="step-8">
        <h2 class="text-2xl font-bold mb-4 uppercase tracking-widest" id="random-path-title">Ładowanie ścieżki...</h2>
        <p class="text-gray-400" id="random-path-desc">Każdy dostaje swój pokój amfilady.</p>
    </div>

    <!-- 9. REINTEGRACJA -->
    <div class="step" id="step-9">
        <div class="glitch text-3xl mb-6">REINTEGRACJA</div>
        <p class="text-xl mb-4">GŁOS GRUPY:</p>
        <p class="text-2xl font-bold">"Czy pamiętasz, czy byłeś wtedy trzeźwy? Czy byłaś pijana?"</p>
    </div>

    <!-- 10. KONSTERNACJA -->
    <div class="step" id="step-10">
        <div class="warm-glow mb-8">DAMY RADĘ</div>
        <p class="text-gray-400 max-w-sm mx-auto">
            To nie jest poradnik. To jest prąd. Przejdź przez niego, jeśli chcesz sprawdzić, gdzie kończy się schemat, a zaczynasz Ty.
        </p>
        <div class="mt-12 flex justify-center gap-4" id="community-chain">
            <!-- Logotypy twórców będą dołączane tutaj -->
            <div class="border border-gray-700 p-2 text-[10px] text-gray-600">SOURCE: PRĄD 00</div>
        </div>
    </div>

    <button id="next-btn" class="btn-daleko">DALEJ</button>
    <div id="timer-display" class="waiting-timer"></div>
</div>

<div id="progress-bar"></div>

<script>
    const steps = 10;
    let currentStep = 1;
    const nextBtn = document.getElementById('next-btn');
    const timerDisplay = document.getElementById('timer-display');
    const progressBar = document.getElementById('progress-bar');
    
    const pathData = {
        "Impreza": "Hałas, który zagłusza myśli. Czy to Twój wybór, czy tłumu?",
        "Internet": "Nieskończony scroll. Gdzie kończy się algorytm, a zaczynasz Ty?",
        "Szkoła": "Struktury, które każą Ci pasować. Czy jeszcze tam jesteś?",
        "Dom": "Cisza, która mówi najgłośniej. Co słyszysz, gdy nikt nie patrzy?",
        "Ulica": "Beton i przypadek. Każdy krok to decyzja."
    };

    function updateProgress() {
        progressBar.style.width = `${(currentStep / steps) * 100}%`;
    }

    function startWaitingProtocol(seconds) {
        nextBtn.classList.remove('enabled');
        nextBtn.disabled = true;
        let remaining = seconds;
        
        timerDisplay.innerText = `Czekaj... ${remaining}s`;
        
        const interval = setInterval(() => {
            remaining--;
            if (remaining <= 0) {
                clearInterval(interval);
                timerDisplay.innerText = "";
                nextBtn.classList.add('enabled');
                nextBtn.disabled = false;
            } else {
                timerDisplay.innerText = `Czekaj... ${remaining}s`;
            }
        }, 1000);
    }

    function handleStepLogic(step) {
        if (step === 2) {
            const cd = document.getElementById('countdown');
            let c = 5;
            const i = setInterval(() => {
                cd.innerText = c;
                c--;
                if (c < 0) clearInterval(i);
            }, 800);
        }
        
        if (step === 4) {
            const line = document.getElementById('scanner-line');
            line.style.transition = "transform 2s linear";
            setTimeout(() => line.style.transform = "translateX(100%)", 100);
        }

        if (step === 8) {
            const paths = Object.keys(pathData);
            const randomPath = paths[Math.floor(Math.random() * paths.length)];
            document.getElementById('random-path-title').innerText = randomPath;
            document.getElementById('random-path-desc').innerText = pathData[randomPath];
        }

        if (step === 9) {
            // Nagły efekt "trzeźwości"
            document.body.style.backgroundColor = "#fff";
            document.body.style.color = "#000";
            setTimeout(() => {
                document.body.style.backgroundColor = "#0a0a0a";
                document.body.style.color = "#e5e5e5";
            }, 150);
        }

        if (step === 10) {
            nextBtn.style.display = "none";
            timerDisplay.style.display = "none";
        }
    }

    nextBtn.addEventListener('click', () => {
        if (!nextBtn.classList.contains('enabled')) return;

        document.getElementById(`step-${currentStep}`).classList.remove('active');
        currentStep++;
        
        if (currentStep <= steps) {
            const element = document.getElementById(`step-${currentStep}`);
            element.classList.add('active');
            updateProgress();
            handleStepLogic(currentStep);
            
            // Każdy krok ma swój protokół czekania (2-4 sekundy)
            if (currentStep < 10) {
                startWaitingProtocol(3);
            }
        }
    });

    // Inicjalizacja pierwszego kroku
    window.onload = () => {
        updateProgress();
        startWaitingProtocol(2);
    };
</script>

<div class="logo-source">PRĄD 00 [LOGO_ZERO]</div>

<div class="amfilada-container" id="amfilada">
    <!-- 1. PRZYPADEK -->
    <div class="step active" id="step-1">
        <h2 class="text-4xl font-light mb-4">1. przypadek</h2>
        <p class="text-gray-500 italic">Błysk. Punkt startowy bez filtra.</p>
    </div>

    <!-- 2. CZAS -->
    <div class="step" id="step-2">
        <h2 class="text-4xl font-light mb-4">2. czas</h2>
        <p class="text-gray-500 italic">Rytm. Odliczanie, które już trwa.</p>
        <div id="countdown" class="text-2xl mt-4 font-mono">...</div>
    </div>

    <!-- 3. MIEJSCE -->
    <div class="step" id="step-3">
        <h2 class="text-4xl font-light mb-4">3. miejsce</h2>
        <p class="text-gray-500 italic">Lokalizacja. Tu i teraz.</p>
        <p class="mt-4 text-xl" id="location-text">Wchodzisz w przestrzeń.</p>
    </div>

    <!-- 4. OCEŃ -->
    <div class="step" id="step-4">
        <h2 class="text-4xl font-light mb-4">4. oceń</h2>
        <p class="text-gray-500 italic">Skaner. Brak interpretacji, tylko fakty.</p>
        <div class="w-full h-1 bg-gray-800 mt-6 relative overflow-hidden">
            <div id="scanner-line" class="absolute inset-0 bg-white w-full h-full transform -translate-x-full"></div>
        </div>
    </div>

    <!-- 5. SZYBKO -->
    <div class="step" id="step-5">
        <h2 class="text-4xl font-light mb-4">5. szybko</h2>
        <p class="text-gray-500 italic">Przyspieszenie. Czysta kinetyka.</p>
        <div class="mt-4 flex justify-center gap-2">
            <span class="animate-ping inline-flex h-3 w-3 rounded-full bg-white opacity-75"></span>
            <span class="animate-ping inline-flex h-3 w-3 rounded-full bg-white opacity-75"></span>
        </div>
    </div>

    <!-- 6. ZDECYDUJ -->
    <div class="step" id="step-6">
        <h2 class="text-4xl font-light mb-4">6. zdecyduj</h2>
        <p class="text-gray-500 italic">Cięcie. Moment wyboru.</p>
        <p class="mt-4">Nikt tego nie zrobi za Ciebie.</p>
    </div>

    <!-- 7. WYBÓR SYTUACJI -->
    <div class="step" id="step-7">
        <h2 class="text-4xl font-light mb-4">7. wybór sytuacji</h2>
        <p class="text-gray-500 italic">Próg. Wejście w konkretną tkankę życia.</p>
    </div>

    <!-- 8. ROZPROSZENIE -->
    <div class="step" id="step-8">
        <h2 class="text-2xl font-bold mb-4 uppercase tracking-widest" id="random-path-title">Ładowanie ścieżki...</h2>
        <p class="text-gray-400" id="random-path-desc">Każdy dostaje swój pokój amfilady.</p>
    </div>

    <!-- 9. REINTEGRACJA -->
    <div class="step" id="step-9">
        <div class="glitch text-3xl mb-6">REINTEGRACJA</div>
        <p class="text-xl mb-4">GŁOS GRUPY:</p>
        <p class="text-2xl font-bold">"Czy pamiętasz, czy byłeś wtedy trzeźwy? Czy byłaś pijana?"</p>
    </div>

    <!-- 10. KONSTERNACJA -->
    <div class="step" id="step-10">
        <div class="warm-glow mb-8">DAMY RADĘ</div>
        <p class="text-gray-400 max-w-sm mx-auto">
            To nie jest poradnik. To jest prąd. Przejdź przez niego, jeśli chcesz sprawdzić, gdzie kończy się schemat, a zaczynasz Ty.
        </p>
        <div class="mt-12 flex justify-center gap-4" id="community-chain">
            <!-- Logotypy twórców będą dołączane tutaj -->
            <div class="border border-gray-700 p-2 text-[10px] text-gray-600">SOURCE: PRĄD 00</div>
        </div>
    </div>

    <button id="next-btn" class="btn-daleko">DALEJ</button>
    <div id="timer-display" class="waiting-timer"></div>
</div>

<div id="progress-bar"></div>

<script>
    const steps = 10;
    let currentStep = 1;
    const nextBtn = document.getElementById('next-btn');
    const timerDisplay = document.getElementById('timer-display');
    const progressBar = document.getElementById('progress-bar');
    
    const pathData = {
        "Impreza": "Hałas, który zagłusza myśli. Czy to Twój wybór, czy tłumu?",
        "Internet": "Nieskończony scroll. Gdzie kończy się algorytm, a zaczynasz Ty?",
        "Szkoła": "Struktury, które każą Ci pasować. Czy jeszcze tam jesteś?",
        "Dom": "Cisza, która mówi najgłośniej. Co słyszysz, gdy nikt nie patrzy?",
        "Ulica": "Beton i przypadek. Każdy krok to decyzja."
    };

    function updateProgress() {
        progressBar.style.width = `${(currentStep / steps) * 100}%`;
    }

    function startWaitingProtocol(seconds) {
        nextBtn.classList.remove('enabled');
        nextBtn.disabled = true;
        let remaining = seconds;
        
        timerDisplay.innerText = `Czekaj... ${remaining}s`;
        
        const interval = setInterval(() => {
            remaining--;
            if (remaining <= 0) {
                clearInterval(interval);
                timerDisplay.innerText = "";
                nextBtn.classList.add('enabled');
                nextBtn.disabled = false;
            } else {
                timerDisplay.innerText = `Czekaj... ${remaining}s`;
            }
        }, 1000);
    }

    function handleStepLogic(step) {
        if (step === 2) {
            const cd = document.getElementById('countdown');
            let c = 5;
            const i = setInterval(() => {
                cd.innerText = c;
                c--;
                if (c < 0) clearInterval(i);
            }, 800);
        }
        
        if (step === 4) {
            const line = document.getElementById('scanner-line');
            line.style.transition = "transform 2s linear";
            setTimeout(() => line.style.transform = "translateX(100%)", 100);
        }

        if (step === 8) {
            const paths = Object.keys(pathData);
            const randomPath = paths[Math.floor(Math.random() * paths.length)];
            document.getElementById('random-path-title').innerText = randomPath;
            document.getElementById('random-path-desc').innerText = pathData[randomPath];
        }

        if (step === 9) {
            // Nagły efekt "trzeźwości"
            document.body.style.backgroundColor = "#fff";
            document.body.style.color = "#000";
            setTimeout(() => {
                document.body.style.backgroundColor = "#0a0a0a";
                document.body.style.color = "#e5e5e5";
            }, 150);
        }

        if (step === 10) {
            nextBtn.style.display = "none";
            timerDisplay.style.display = "none";
        }
    }

    nextBtn.addEventListener('click', () => {
        if (!nextBtn.classList.contains('enabled')) return;

        document.getElementById(`step-${currentStep}`).classList.remove('active');
        currentStep++;
        
        if (currentStep <= steps) {
            const element = document.getElementById(`step-${currentStep}`);
            element.classList.add('active');
            updateProgress();
            handleStepLogic(currentStep);
            
            // Każdy krok ma swój protokół czekania (2-4 sekundy)
            if (currentStep < 10) {
                startWaitingProtocol(3);
            }
        }
    });

    // Inicjalizacja pierwszego kroku
    window.onload = () => {
        updateProgress();
        startWaitingProtocol(2);
    };
</script>