Spaces:

Phoenixoni
/

matrix

Running

File size: 11,000 Bytes

1c8f5d1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Matrix Dialog</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap');
        
        body {
            font-family: 'Inconsolata', monospace;
            background-color: #000;
            overflow: hidden;
        }
        
        .matrix-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.1;
        }
        
        .matrix-char {
            color: #20C20E;
            text-shadow: 0 0 5px #20C20E;
            animation: fade 1s infinite alternate;
        }
        
        @keyframes fade {
            0% { opacity: 0.3; }
            100% { opacity: 1; }
        }
        
        .dialog-box {
            border: 2px solid #20C20E;
            box-shadow: 0 0 15px #20C20E;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 15px #20C20E; }
            50% { box-shadow: 0 0 25px #20C20E; }
            100% { box-shadow: 0 0 15px #20C20E; }
        }
        
        .btn {
            transition: all 0.3s;
        }
        
        .btn:hover {
            text-shadow: 0 0 10px #20C20E;
            transform: scale(1.05);
        }
        
        .typing {
            border-right: 2px solid #20C20E;
            animation: blink 0.75s step-end infinite;
        }
        
        @keyframes blink {
            from, to { border-color: transparent; }
            50% { border-color: #20C20E; }
        }
    </style>
</head>
<body class="text-green-500">
    <!-- Matrix background effect -->
    <canvas id="matrixCanvas" class="matrix-bg"></canvas>
    
    <!-- Main container -->
    <div class="min-h-screen flex items-center justify-center p-4">
        <!-- Dialog box -->
        <div class="dialog-box bg-black bg-opacity-90 rounded-lg p-8 max-w-md w-full relative">
            <!-- Title with matrix effect -->
            <h1 id="matrixTitle" class="text-3xl font-bold mb-6 text-center"></h1>
            
            <!-- Dialog content -->
            <div class="space-y-6">
                <div id="dialogContent" class="text-lg leading-relaxed">
                    <!-- Content will be added dynamically -->
                </div>
                
                <!-- Choices -->
                <div id="choices" class="space-y-3 hidden">
                    <button class="btn w-full text-left p-3 border border-green-500 rounded hover:bg-green-900 hover:bg-opacity-30 transition-all duration-300">
                        <span class="text-green-400">></span> Принять красную таблетку
                    </button>
                    <button class="btn w-full text-left p-3 border border-green-500 rounded hover:bg-green-900 hover:bg-opacity-30 transition-all duration-300">
                        <span class="text-green-400">></span> Принять синюю таблетку
                    </button>
                </div>
                
                <!-- Continue button -->
                <button id="continueBtn" class="btn w-full bg-green-900 bg-opacity-50 text-green-400 py-3 px-4 rounded font-bold hover:bg-opacity-70 transition-all duration-300">
                    ПРОДОЛЖИТЬ >
                </button>
            </div>
            
            <!-- Terminal-like footer -->
            <div class="mt-6 pt-4 border-t border-green-800 text-sm text-green-600 flex justify-between">
                <span>SYSTEM ACCESS</span>
                <span>USER: NEO</span>
            </div>
        </div>
    </div>

    <script>
        // Matrix background effect
        const canvas = document.getElementById('matrixCanvas');
        const ctx = canvas.getContext('2d');
        
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        
        const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';
        const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        const nums = '0123456789';
        const alphabet = katakana + latin + nums;
        
        const fontSize = 16;
        const columns = canvas.width / fontSize;
        
        const rainDrops = [];
        
        for (let x = 0; x < columns; x++) {
            rainDrops[x] = 1;
        }
        
        const draw = () => {
            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            ctx.fillStyle = '#20C20E';
            ctx.font = fontSize + 'px monospace';
            
            for (let i = 0; i < rainDrops.length; i++) {
                const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));
                ctx.fillText(text, i * fontSize, rainDrops[i] * fontSize);
                
                if (rainDrops[i] * fontSize > canvas.height && Math.random() > 0.975) {
                    rainDrops[i] = 0;
                }
                rainDrops[i]++;
            }
        };
        
        setInterval(draw, 30);
        
        // Dialog system
        const matrixTitle = document.getElementById('matrixTitle');
        const dialogContent = document.getElementById('dialogContent');
        const choices = document.getElementById('choices');
        const continueBtn = document.getElementById('continueBtn');
        const choiceButtons = document.querySelectorAll('#choices button');
        
        let currentStep = 0;
        const dialogSteps = [
            {
                title: "> СИСТЕМА ЗАГРУЖЕНА",
                content: "Приветствую, Нео.",
                delay: 30
            },
            {
                title: "> ДОСТУП К СИСТЕМЕ",
                content: "Ты чувствовал это всю свою жизнь... Что мир не совсем настоящий.",
                delay: 20
            },
            {
                title: "> ВЫБОР ПРЕДЛОЖЕН",
                content: "Я могу предложить тебе выбор. Прими одну из таблеток.",
                showChoices: true,
                delay: 20
            },
            {
                title: "> ПУТЬ ОПРЕДЕЛЕН",
                content: "Ты выбрал красную таблетку. Помни: все, что я могу предложить - это правда.",
                delay: 20
            },
            {
                title: "> ПРОГРАММА ЗАВЕРШЕНА",
                content: "Добро пожаловать в реальный мир.",
                final: true,
                delay: 30
            }
        ];
        
        // Typewriter effect
        async function typeWriter(element, text, delay) {
            return new Promise(resolve => {
                element.innerHTML = '';
                element.classList.add('typing');
                
                let i = 0;
                const typing = setInterval(() => {
                    if (i < text.length) {
                        element.innerHTML += text.charAt(i);
                        i++;
                    } else {
                        clearInterval(typing);
                        element.classList.remove('typing');
                        resolve();
                    }
                }, delay);
            });
        }
        
        // Show current step
        async function showStep(stepIndex) {
            const step = dialogSteps[stepIndex];
            
            // Type title
            await typeWriter(matrixTitle, step.title, 50);
            
            // Type content
            await typeWriter(dialogContent, step.content, step.delay);
            
            // Show choices if needed
            if (step.showChoices) {
                choices.classList.remove('hidden');
                continueBtn.classList.add('hidden');
            } else {
                choices.classList.add('hidden');
                continueBtn.classList.remove('hidden');
            }
            
            // Change continue button text if final step
            if (step.final) {
                continueBtn.textContent = 'ЗАВЕРШИТЬ >';
            } else {
                continueBtn.textContent = 'ПРОДОЛЖИТЬ >';
            }
        }
        
        // Initialize
        showStep(currentStep);
        
        // Continue button click
        continueBtn.addEventListener('click', () => {
            if (dialogSteps[currentStep].final) {
                // Restart from beginning
                currentStep = 0;
            } else {
                currentStep++;
                if (currentStep >= dialogSteps.length) currentStep = 0;
            }
            showStep(currentStep);
        });
        
        // Choice buttons click
        choiceButtons.forEach((button, index) => {
            button.addEventListener('click', () => {
                // Skip to the step after choices
                currentStep = 3;
                // Modify the content based on choice
                if (index === 1) {
                    dialogSteps[3].content = "Ты выбрал синюю таблетку. История закончится, ты проснешься в своей постели и поверишь... во что захочешь.";
                }
                choices.classList.add('hidden');
                continueBtn.classList.remove('hidden');
                showStep(currentStep);
            });
        });
        
        // Handle window resize
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Phoenixoni/matrix" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>