Silnik00

<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PRĄD 00</title> <script src="https://cdn.tailwindcss.com"></script> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap');

    body {
        background-color: #0a0a0a;
        color: #e5e5e5;
        font-family: 'Inter', sans-serif;
        overflow: hidden;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .amfilada-container {
        width: 100%;
        max-width: 600px;
        padding: 2rem;
        text-align: center;
    }

    .step {
        display: none;
        animation: fadeIn 0.8s ease-out forwards;
    }

    .step.active {
        display: block;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .glitch {
        animation: glitch-anim 0.2s infinite;
        color: #ff4d4d;
        font-weight: bold;
    }

    @keyframes glitch-anim {
        0% { transform: translate(0); }
        20% { transform: translate(-2px, 2px); }
        40% { transform: translate(-2px, -2px); }
        60% { transform: translate(2px, 2px); }
        80% { transform: translate(2px, -2px); }
        100% { transform: translate(0); }
    }

    .btn-daleko {
        transition: all 0.3s ease;
        border: 1px solid #444;
        background: transparent;
        color: #888;
        padding: 0.75rem 2rem;
        margin-top: 2rem;
        cursor: not-allowed;
        opacity: 0.5;
    }

    .btn-daleko.enabled {
        border-color: #eee;
        color: #eee;
        cursor: pointer;
        opacity: 1;
    }

    .btn-daleko.enabled:hover {
        background: #eee;
        color: #0a0a0a;
    }

    #progress-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        height: 2px;
        background: #444;
        width: 0%;
        transition: width 0.5s ease;
    }

    .warm-glow {
        color: #ffcc33;
        text-shadow: 0 0 20px rgba(255, 204, 51, 0.4);
        font-size: 2.5rem;
        font-weight: 700;
    }

    .logo-source {
        position: fixed;
        top: 20px;
        right: 20px;
        font-size: 0.7rem;
        color: #444;
        letter-spacing: 2px;
    }

    .waiting-timer {
        font-size: 0.8rem;
        color: #444;
        margin-top: 1rem;
        height: 1.2rem;
    }
</style>

</head> <body>

<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>

</body> </html><!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PRĄD 00</title> <script src="https://cdn.tailwindcss.com"></script> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap');

    body {
        background-color: #0a0a0a;
        color: #e5e5e5;
        font-family: 'Inter', sans-serif;
        overflow: hidden;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .amfilada-container {
        width: 100%;
        max-width: 600px;
        padding: 2rem;
        text-align: center;
    }

    .step {
        display: none;
        animation: fadeIn 0.8s ease-out forwards;
    }

    .step.active {
        display: block;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .glitch {
        animation: glitch-anim 0.2s infinite;
        color: #ff4d4d;
        font-weight: bold;
    }

    @keyframes glitch-anim {
        0% { transform: translate(0); }
        20% { transform: translate(-2px, 2px); }
        40% { transform: translate(-2px, -2px); }
        60% { transform: translate(2px, 2px); }
        80% { transform: translate(2px, -2px); }
        100% { transform: translate(0); }
    }

    .btn-daleko {
        transition: all 0.3s ease;
        border: 1px solid #444;
        background: transparent;
        color: #888;
        padding: 0.75rem 2rem;
        margin-top: 2rem;
        cursor: not-allowed;
        opacity: 0.5;
    }

    .btn-daleko.enabled {
        border-color: #eee;
        color: #eee;
        cursor: pointer;
        opacity: 1;
    }

    .btn-daleko.enabled:hover {
        background: #eee;
        color: #0a0a0a;
    }

    #progress-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        height: 2px;
        background: #444;
        width: 0%;
        transition: width 0.5s ease;
    }

    .warm-glow {
        color: #ffcc33;
        text-shadow: 0 0 20px rgba(255, 204, 51, 0.4);
        font-size: 2.5rem;
        font-weight: 700;
    }

    .logo-source {
        position: fixed;
        top: 20px;
        right: 20px;
        font-size: 0.7rem;
        color: #444;
        letter-spacing: 2px;
    }

    .waiting-timer {
        font-size: 0.8rem;
        color: #444;
        margin-top: 1rem;
        height: 1.2rem;
    }
</style>

</head> <body>

<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>

</body> </html>