Spaces:

SREAL
/

HUMAN-VERIFICATION

Running

App Files Files Community

SREAL commited on Dec 7, 2024

Commit

2b6dcfa

verified ·

1 Parent(s): 0990b6e

Update index.html

Browse files

Files changed (1) hide show

index.html +357 -17

index.html CHANGED Viewed

@@ -1,19 +1,359 @@
-<!doctype html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
 <html>
+<head>
+    <title>I'M NOT A ROBOT ✓</title>
+    <style>
+        body {
+            background-color: #000;
+            color: #0f0;
+            font-family: 'Share Tech Mono', monospace;
+            margin: 0;
+            padding: 0;
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+        }
+        #matrix {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+            pointer-events: none;
+        }
+        #title-screen {
+            position: relative;
+            z-index: 2;
+            text-align: center;
+        }
+        #game-screen {
+            display: none;
+            position: relative;
+            z-index: 2;
+            background: linear-gradient(135deg, #003300 0%, #006600 100%);
+            padding: 30px;
+            border-radius: 15px;
+            width: 800px;
+            height: 600px;
+            box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
+            border: 2px solid #00ff00;
+        }
+        .test-container {
+            background: rgba(0, 0, 0, 0.8);
+            padding: 20px;
+            height: 480px;
+            border: 1px solid #00ff00;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            overflow: hidden;
+        }
+        .status-bar {
+            display: flex;
+            justify-content: space-between;
+            padding: 10px;
+            border-bottom: 1px solid #00ff00;
+            font-size: 18px;
+        }
+        .glitch {
+            font-size: 48px;
+            color: #0f0;
+            text-shadow: 2px 2px #f00;
+            animation: glitch 1s infinite;
+        }
+        #start-btn {
+            font-size: 72px;
+            background: none;
+            border: none;
+            color: #0f0;
+            cursor: pointer;
+            animation: pulse 2s infinite;
+        }
+        .task {
+            color: #0f0;
+            font-size: 20px;
+            margin: 20px;
+            text-align: center;
+        }
+        .option {
+            padding: 10px 20px;
+            margin: 10px;
+            background: rgba(0, 0, 0, 0.8);
+            border: 1px solid #00ff00;
+            color: #0f0;
+            cursor: pointer;
+            transition: all 0.3s;
+            font-size: 16px;
+            min-width: 200px;
+        }
+        .option:hover {
+            background: rgba(0, 255, 0, 0.2);
+        }
+        .slider {
+            width: 300px;
+            margin: 20px;
+        }
+        .image-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 10px;
+            margin: 20px;
+        }
+        .image-cell {
+            width: 100px;
+            height: 100px;
+            border: 1px solid #00ff00;
+            cursor: pointer;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 40px;
+        }
+        @keyframes glitch {
+            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) }
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); opacity: 1; }
+            50% { transform: scale(1.1); opacity: 0.7; }
+            100% { transform: scale(1); opacity: 1; }
+        }
+    </style>
+</head>
+<body>
+    <canvas id="matrix"></canvas>
+    <div id="title-screen">
+        <h1 class="glitch">I'M NOT A ROBOT</h1>
+        <button id="start-btn">✓</button>
+    </div>
+    <div id="game-screen">
+        <div class="status-bar">
+            <span>HUMAN VERIFICATION LEVEL: <span id="level">1</span></span>
+            <span>ATTEMPTS REMAINING: <span id="attempts">3</span></span>
+        </div>
+        <div class="test-container" id="test-container"></div>
+    </div>
+    <script>
+        let level = 1;
+        let attempts = 3;
+        const tests = [
+            {
+                task: "Select all squares with traffic lights",
+                type: "grid",
+                content: ["🚦", "🌳", "🚗", "🏠", "��", "🌲", "🚶", "🚦", "🏢"],
+                correct: [0, 4, 7]
+            },
+            {
+                task: "What would a robot never say?",
+                type: "multiple",
+                options: ["I compute therefore I am", "BEEP BOOP", "I'm feeling emotional today", "01001000"],
+                correct: 2
+            },
+            {
+                task: "Drag the slider to match human body temperature (37°C)",
+                type: "slider",
+                min: 35,
+                max: 39,
+                correct: 37
+            },
+            {
+                task: "Which of these is a CAPTCHA only a human could solve?",
+                type: "image",
+                options: ["🔡", "📊", "✏️", "💭"],
+                correct: 0
+            },
+            {
+                task: "Complete the human phrase: Time flies like an arrow, fruit flies like a...",
+                type: "multiple",
+                options: ["Boeing 747", "banana", "temporal paradox", "computational error"],
+                correct: 1
+            }
+        ];
+        // Matrix effect setup
+        const canvas = document.getElementById('matrix');
+        const ctx = canvas.getContext('2d');
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%^&*()';
+        const fontSize = 14;
+        const columns = canvas.width / fontSize;
+        const drops = Array(Math.floor(columns)).fill(1);
+        function drawMatrix() {
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            ctx.fillStyle = '#0F0';
+            ctx.font = fontSize + 'px monospace';
+            for(let i = 0; i < drops.length; i++) {
+                const text = characters[Math.floor(Math.random() * characters.length)];
+                ctx.fillText(text, i * fontSize, drops[i] * fontSize);
+                if(drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
+                    drops[i] = 0;
+                }
+                drops[i]++;
+            }
+        }
+        setInterval(drawMatrix, 50);
+        function createTest(level) {
+            const container = document.getElementById('test-container');
+            container.innerHTML = '';
+            const test = tests[level - 1];
+            const taskDiv = document.createElement('div');
+            taskDiv.className = 'task';
+            taskDiv.textContent = test.task;
+            container.appendChild(taskDiv);
+            switch(test.type) {
+                case 'grid':
+                    createGrid(test, container);
+                    break;
+                case 'multiple':
+                    createMultipleChoice(test, container);
+                    break;
+                case 'slider':
+                    createSlider(test, container);
+                    break;
+                case 'image':
+                    createImageChoice(test, container);
+                    break;
+            }
+        }
+        function createGrid(test, container) {
+            const grid = document.createElement('div');
+            grid.className = 'image-grid';
+            let selected = [];
+            test.content.forEach((item, index) => {
+                const cell = document.createElement('div');
+                cell.className = 'image-cell';
+                cell.textContent = item;
+                cell.onclick = () => {
+                    cell.style.background = cell.style.background ? '' : 'rgba(0, 255, 0, 0.2)';
+                    if(selected.includes(index)) {
+                        selected = selected.filter(i => i !== index);
+                    } else {
+                        selected.push(index);
+                    }
+                };
+                grid.appendChild(cell);
+            });
+            const submitBtn = document.createElement('button');
+            submitBtn.className = 'option';
+            submitBtn.textContent = 'VERIFY';
+            submitBtn.onclick = () => checkAnswer(selected, test.correct);
+            container.appendChild(grid);
+            container.appendChild(submitBtn);
+        }
+        function createMultipleChoice(test, container) {
+            test.options.forEach((option, index) => {
+                const button = document.createElement('button');
+                button.className = 'option';
+                button.textContent = option;
+                button.onclick = () => checkAnswer(index, test.correct);
+                container.appendChild(button);
+            });
+        }
+        function createSlider(test, container) {
+            const slider = document.createElement('input');
+            slider.type = 'range';
+            slider.min = test.min;
+            slider.max = test.max;
+            slider.step = 0.1;
+            slider.className = 'slider';
+            const value = document.createElement('div');
+            value.className = 'task';
+            slider.oninput = () => value.textContent = slider.value + '°C';
+            const submitBtn = document.createElement('button');
+            submitBtn.className = 'option';
+            submitBtn.textContent = 'VERIFY';
+            submitBtn.onclick = () => checkAnswer(parseFloat(slider.value), test.correct);
+            container.appendChild(slider);
+            container.appendChild(value);
+            container.appendChild(submitBtn);
+        }
+        function createImageChoice(test, container) {
+            const grid = document.createElement('div');
+            grid.className = 'image-grid';
+            test.options.forEach((option, index) => {
+                const cell = document.createElement('div');
+                cell.className = 'image-cell';
+                cell.textContent = option;
+                cell.onclick = () => checkAnswer(index, test.correct);
+                grid.appendChild(cell);
+            });
+            container.appendChild(grid);
+        }
+        function checkAnswer(answer, correct) {
+            if(Array.isArray(correct) ?
+               JSON.stringify(answer.sort()) === JSON.stringify(correct.sort()) :
+               answer === correct) {
+                level++;
+                if(level > tests.length) {
+                    alert('HUMAN VERIFICATION COMPLETE - ACCESS GRANTED');
+                    location.reload();
+                    return;
+                }
+                createTest(level);
+                document.getElementById('level').textContent = level;
+            } else {
+                attempts--;
+                document.getElementById('attempts').textContent = attempts;
+                if(attempts === 0) {
+                    alert('VERIFICATION FAILED - ROBOT DETECTED');
+                    location.reload();
+                }
+            }
+        }
+        document.getElementById('start-btn').addEventListener('click', () => {
+            document.getElementById('title-screen').style.display = 'none';
+            document.getElementById('game-screen').style.display = 'block';
+            createTest(level);
+        });
+    </script>
+</body>
 </html>