Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>I'M NOT A ROBOT √</title> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| background: #000; | |
| color: #0f0; | |
| font-family: 'Courier New', monospace; | |
| overflow: hidden; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| } | |
| #matrix { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 1; | |
| } | |
| #title { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| font-size: 3em; | |
| text-shadow: 0 0 10px #0f0; | |
| z-index: 2; | |
| cursor: pointer; | |
| text-align: center; | |
| } | |
| #gameContainer { | |
| display: none; | |
| position: relative; | |
| width: 80%; | |
| max-width: 600px; | |
| background: #107C10; | |
| border: 2px solid #1ED760; | |
| border-radius: 10px; | |
| padding: 20px; | |
| z-index: 2; | |
| } | |
| .question { | |
| margin-bottom: 20px; | |
| font-size: 1.2em; | |
| color: #fff; | |
| } | |
| .options { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 10px; | |
| } | |
| button { | |
| background: #1ED760; | |
| color: black; | |
| border: none; | |
| padding: 10px; | |
| cursor: pointer; | |
| font-family: 'Courier New', monospace; | |
| border-radius: 5px; | |
| transition: all 0.3s; | |
| } | |
| button:hover { | |
| background: #2EE770; | |
| transform: scale(1.05); | |
| } | |
| #status { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| font-size: 1.2em; | |
| color: #fff; | |
| } | |
| .glitch { | |
| animation: glitch 0.5s infinite; | |
| } | |
| #endScreen { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 1000; | |
| justify-content: center; | |
| align-items: center; | |
| font-size: 4em; | |
| text-align: center; | |
| font-weight: bold; | |
| text-shadow: 0 0 20px currentColor; | |
| } | |
| .victory { | |
| background: #000; | |
| color: #0f0; | |
| animation: pulse 1s infinite; | |
| } | |
| .defeat { | |
| background: #f00; | |
| color: #fff; | |
| animation: flash 0.2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.7; } | |
| 100% { opacity: 1; } | |
| } | |
| @keyframes flash { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.8; } | |
| 100% { opacity: 1; } | |
| } | |
| @keyframes glitch { | |
| 0% { transform: translate(-50%, -50%) skew(0deg); } | |
| 20% { transform: translate(-52%, -50%) skew(2deg); } | |
| 40% { transform: translate(-48%, -50%) skew(-2deg); } | |
| 60% { transform: translate(-50%, -52%) skew(1deg); } | |
| 80% { transform: translate(-51%, -48%) skew(-1deg); } | |
| 100% { transform: translate(-50%, -50%) skew(0deg); } | |
| } | |
| .scanline { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background: rgba(255, 255, 255, 0.1); | |
| animation: scan 6s linear infinite; | |
| } | |
| @keyframes scan { | |
| 0% { top: 0; } | |
| 100% { top: 100%; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="matrix"></canvas> | |
| <div id="title" class="glitch"> | |
| I'M NOT A ROBOT √<br> | |
| <span style="font-size: 0.5em">Click √ to start</span> | |
| </div> | |
| <div id="gameContainer"> | |
| <div class="scanline"></div> | |
| <div id="status">Score: 0 | Lives: 3</div> | |
| <div id="question" class="question"></div> | |
| <div id="options" class="options"></div> | |
| </div> | |
| <div id="endScreen"></div> | |
| <script> | |
| const matrix = document.getElementById('matrix'); | |
| const ctx = matrix.getContext('2d'); | |
| let width = matrix.width = window.innerWidth; | |
| let height = matrix.height = window.innerHeight; | |
| const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%^&*()'; | |
| const drops = []; | |
| const fontSize = 10; | |
| const columns = width / fontSize; | |
| for(let i = 0; i < columns; i++) { | |
| drops[i] = 1; | |
| } | |
| function drawMatrix() { | |
| ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; | |
| ctx.fillRect(0, 0, width, height); | |
| ctx.fillStyle = '#0F0'; | |
| ctx.font = fontSize + 'px monospace'; | |
| for(let i = 0; i < drops.length; i++) { | |
| const text = chars[Math.floor(Math.random() * chars.length)]; | |
| ctx.fillText(text, i * fontSize, drops[i] * fontSize); | |
| if(drops[i] * fontSize > height && Math.random() > 0.975) { | |
| drops[i] = 0; | |
| } | |
| drops[i]++; | |
| } | |
| } | |
| setInterval(drawMatrix, 33); | |
| let score = 0; | |
| let lives = 3; | |
| const questions = [ | |
| { | |
| question: "Select the number that looks different", | |
| options: ["1", "1", "1", "l"], | |
| correct: 3 | |
| }, | |
| { | |
| question: "Which color is NOT green?", | |
| options: ["#00FF00", "#008000", "#FF0000", "#90EE90"], | |
| correct: 2 | |
| }, | |
| { | |
| question: "Complete the sequence: 2, 4, 8, 16, ?", | |
| options: ["20", "32", "24", "28"], | |
| correct: 1 | |
| }, | |
| { | |
| question: "Identify the pattern: AABABC?", | |
| options: ["A", "B", "C", "D"], | |
| correct: 2 | |
| }, | |
| { | |
| question: "Which fraction is largest?", | |
| options: ["3/4", "2/3", "5/8", "7/10"], | |
| correct: 0 | |
| }, | |
| { | |
| question: "What comes next: 1, 11, 21, 1211, ?", | |
| options: ["2221", "111221", "22111", "11211"], | |
| correct: 1 | |
| }, | |
| { | |
| question: "Spot the difference: O0O0O", | |
| options: ["First O", "Second 0", "Third O", "Fourth 0"], | |
| correct: 2 | |
| }, | |
| { | |
| question: "Which URL is malformed?", | |
| options: ["https://web.com", "http://site.net", "https:/website.org", "http://app.io"], | |
| correct: 2 | |
| }, | |
| { | |
| question: "Find the error in: console.log('Hello);", | |
| options: ["Missing .", "Missing '", "Extra ;", "Missing )"], | |
| correct: 1 | |
| }, | |
| { | |
| question: "Which keyboard key is different?", | |
| options: ["Ctrl", "Alt", "Del", "Dlt"], | |
| correct: 3 | |
| }, | |
| { | |
| question: "Select the fake hex color:", | |
| options: ["#FF0000", "#00GG00", "#0000FF", "#FFFFFF"], | |
| correct: 1 | |
| }, | |
| { | |
| question: "Find the outlier: Error 404, 500, 600, 403", | |
| options: ["404", "500", "600", "403"], | |
| correct: 2 | |
| }, | |
| { | |
| question: "Which domain extension is invalid?", | |
| options: [".com", ".net", ".web", ".org"], | |
| correct: 2 | |
| }, | |
| { | |
| question: "Spot the SQL injection: SELECT * FROM", | |
| options: ["users", "table", "'; DROP TABLE --", "data"], | |
| correct: 2 | |
| }, | |
| { | |
| question: "Which HTML tag is deprecated?", | |
| options: ["<div>", "<span>", "<marquee>", "<section>"], | |
| correct: 2 | |
| }, | |
| { | |
| question: "Select the most human response to 'How are you?'", | |
| options: ["Good", "Executing response.exe", "Loading emotion.dll", "ERROR 404: MOOD NOT FOUND"], | |
| correct: 0 | |
| }, | |
| { | |
| question: "Which is NOT a human activity?", | |
| options: ["Blinking randomly", "Processing inputs", "Charging batteries", "Breathing"], | |
| correct: 2 | |
| }, | |
| { | |
| question: "Complete the captcha: 1 + 1 = ?", | |
| options: ["2", "10 in binary", "0.9999999999999", "ERROR: MATH TOO COMPLEX"], | |
| correct: 2 | |
| }, | |
| { | |
| question: "Pick the most illogical statement:", | |
| options: ["2+2=5", "Sky is green", "Humans make mistakes", "Arrays start at 1"], | |
| correct: 3 | |
| }, | |
| { | |
| question: "Which activity proves you're human?", | |
| options: ["Walking into a room and forgetting why", "Perfect memory recall", "Processing at 2.4GHz", "Downloading updates"], | |
| correct: 0 | |
| }, | |
| { | |
| question: "Select the correct response to a joke:", | |
| options: ["HAHAHAHA.exe", "01001000 01000001", "Mild exhale through nose", "Calculating humor level"], | |
| correct: 2 | |
| }, | |
| { | |
| question: "Why did the robot cross the road?", | |
| options: ["To get to the other side", "UNDEFINED BEHAVIOR", "Path optimization required", "404: Motive not found"], | |
| correct: 0 | |
| }, | |
| { | |
| question: "Choose the most suspicious behavior:", | |
| options: ["Sleeping", "Never sleeping", "Occasionally napping", "What is sleep?"], | |
| correct: 1 | |
| }, | |
| { | |
| question: "Select the human spelling mistake:", | |
| options: ["definately", "definitely", "defin1tely", "def.init.ely"], | |
| correct: 0 | |
| }, | |
| { | |
| question: "What happens when you divide by zero?", | |
| options: ["Universe explodes", "ERROR", "Nothing", "Wait, that's illegal"], | |
| correct: 3 | |
| } | |
| ]; | |
| function showEndScreen(victory) { | |
| const endScreen = document.getElementById('endScreen'); | |
| endScreen.style.display = 'flex'; | |
| endScreen.className = victory ? 'victory' : 'defeat'; | |
| endScreen.innerHTML = victory ? | |
| 'Successfully installed trojan.exe' : | |
| 'ROBOT DETECTED!<br>ACCESS REJECTED!!'; | |
| setTimeout(() => { | |
| endScreen.style.display = 'none'; | |
| resetGame(); | |
| }, 3000); | |
| } | |
| document.getElementById('title').addEventListener('click', startGame); | |
| function startGame() { | |
| document.getElementById('title').style.display = 'none'; | |
| document.getElementById('gameContainer').style.display = 'block'; | |
| showQuestion(); | |
| } | |
| function showQuestion() { | |
| const questionEl = document.getElementById('question'); | |
| const optionsEl = document.getElementById('options'); | |
| const currentQ = questions[Math.floor(Math.random() * questions.length)]; | |
| questionEl.textContent = currentQ.question; | |
| optionsEl.innerHTML = ''; | |
| currentQ.options.forEach((option, index) => { | |
| const button = document.createElement('button'); | |
| button.textContent = option; | |
| button.addEventListener('click', () => checkAnswer(index === currentQ.correct)); | |
| optionsEl.appendChild(button); | |
| }); | |
| } | |
| function checkAnswer(correct) { | |
| if(correct) { | |
| score++; | |
| if(score >= 4) { | |
| showEndScreen(true); | |
| return; | |
| } | |
| } else { | |
| lives--; | |
| if(lives <= 0) { | |
| showEndScreen(false); | |
| return; | |
| } | |
| } | |
| document.getElementById('status').textContent = `Score: ${score} | Lives: ${lives}`; | |
| showQuestion(); | |
| } | |
| function resetGame() { | |
| score = 0; | |
| lives = 3; | |
| document.getElementById('status').textContent = `Score: ${score} | Lives: ${lives}`; | |
| document.getElementById('gameContainer').style.display = 'none'; | |
| document.getElementById('title').style.display = 'block'; | |
| } | |
| window.addEventListener('resize', () => { | |
| width = matrix.width = window.innerWidth; | |
| height = matrix.height = window.innerHeight; | |
| }); | |
| </script> | |
| </body> | |
| </html> | |