Spaces:

Tingchenliang
/

Rhythm-Captcha

Running

App Files Files Community

Tingchenliang commited on Aug 27, 2025

Commit

4f3d2c9

verified ·

1 Parent(s): 38e2dd1

Make the UI like the TV show Alien - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +678 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Rthythm Captcha
-emoji: 🦀
-colorFrom: blue
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: rthythm-captcha
+emoji: 🐳
+colorFrom: green
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,678 @@
-<!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 lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nostromo Rhythm Verification</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Orbitron', monospace;
+        }
+        body {
+            background: #0a0a12;
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 16px;
+            background-image:
+                radial-gradient(circle at 20% 30%, rgba(28, 122, 131, 0.1) 0%, transparent 40%),
+                radial-gradient(circle at 80% 70%, rgba(28, 122, 131, 0.1) 0%, transparent 40%);
+        }
+        .container {
+            background: #111725;
+            border: 2px solid #1C7A83;
+            padding: 25px;
+            width: 100%;
+            max-width: 500px;
+            position: relative;
+            overflow: hidden;
+            box-shadow: 0 0 30px rgba(28, 122, 131, 0.4);
+        }
+        .container::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 2px;
+            background: linear-gradient(90deg, transparent, #1C7A83, transparent);
+            animation: scanline 3s linear infinite;
+        }
+        .beat-indicator {
+            width: 60px;
+            height: 60px;
+            margin: 0 auto 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: #0d1117;
+            border: 2px solid #1C7A83;
+            border-radius: 2px;
+            position: relative;
+            overflow: hidden;
+        }
+        .beat-indicator::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(28, 122, 131, 0.1);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        .beat-active::before {
+            opacity: 1;
+        }
+        .beat-text {
+            font-size: 18px;
+            color: #8BD4E3;
+            font-weight: bold;
+            text-shadow: 0 0 5px rgba(139, 212, 227, 0.7);
+        }
+        .progress-container {
+            width: 100%;
+            height: 10px;
+            background: #0d1117;
+            margin: 20px 0;
+            overflow: hidden;
+            border: 1px solid #1C7A83;
+            position: relative;
+        }
+        .progress-container::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(90deg, transparent 0%, rgba(28, 122, 131, 0.2) 50%, transparent 100%);
+            animation: shimmer 2s linear infinite;
+        }
+        .progress-bar {
+            height: 100%;
+            width: 0%;
+            background: linear-gradient(90deg, #1C7A83, #8BD4E3);
+            transition: width 0.3s ease;
+            position: relative;
+            z-index: 1;
+        }
+        .beat-pattern {
+            display: flex;
+            justify-content: center;
+            margin: 25px 0;
+            gap: 10px;
+        }
+        .beat-dot {
+            width: 18px;
+            height: 18px;
+            background: #0d1117;
+            border: 1px solid #1C7A83;
+            transition: all 0.2s ease;
+            position: relative;
+        }
+        .beat-dot::after {
+            content: '';
+            position: absolute;
+            top: 2px;
+            left: 2px;
+            right: 2px;
+            bottom: 2px;
+            background: rgba(28, 122, 131, 0.2);
+            opacity: 0;
+            transition: opacity 0.2s ease;
+        }
+        .beat-dot.active::after {
+            opacity: 1;
+        }
+        .beat-dot.target {
+            border: 1px solid #8BD4E3;
+            box-shadow: 0 0 5px rgba(139, 212, 227, 0.5);
+        }
+        .beat-dot.target::after {
+            background: rgba(139, 212, 227, 0.3);
+        }
+        .beat-dot.target.active::after {
+            background: rgba(139, 212, 227, 0.8);
+            box-shadow: 0 0 10px rgba(139, 212, 227, 0.8);
+        }
+        .instructions {
+            color: #8BD4E3;
+            text-align: center;
+            margin-bottom: 25px;
+            line-height: 1.5;
+            font-size: 12px;
+            text-shadow: 0 0 3px rgba(139, 212, 227, 0.5);
+        }
+        .status-popup {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) scale(0);
+            background: #0d1117;
+            border: 2px solid #1C7A83;
+            padding: 25px;
+            text-align: center;
+            z-index: 1000;
+            min-width: 300px;
+            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            opacity: 0;
+            box-shadow: 0 0 30px rgba(28, 122, 131, 0.6);
+        }
+        .status-popup::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 2px;
+            background: linear-gradient(90deg, transparent, #8BD4E3, transparent);
+        }
+        .status-popup.active {
+            transform: translate(-50%, -50%) scale(1);
+            opacity: 1;
+        }
+        .status-emoji {
+            font-size: 36px;
+            margin-bottom: 15px;
+            display: block;
+        }
+        .status-message {
+            font-size: 14px;
+            margin-bottom: 20px;
+            color: #8BD4E3;
+            text-shadow: 0 0 3px rgba(139, 212, 227, 0.5);
+        }
+        .status-close {
+            background: transparent;
+            color: #8BD4E3;
+            border: 1px solid #1C7A83;
+            padding: 8px 20px;
+            font-size: 12px;
+            cursor: pointer;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            transition: all 0.3s ease;
+        }
+        .status-close:hover {
+            background: rgba(28, 122, 131, 0.2);
+            box-shadow: 0 0 10px rgba(28, 122, 131, 0.4);
+        }
+        .overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(5, 8, 15, 0.9);
+            z-index: 999;
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.3s ease;
+        }
+        .overlay.active {
+            opacity: 1;
+            visibility: visible;
+        }
+        .btn {
+            background: transparent;
+            color: #8BD4E3;
+            border: 1px solid #1C7A83;
+            padding: 12px;
+            font-size: 12px;
+            cursor: pointer;
+            display: block;
+            width: 100%;
+            margin: 10px 0;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        .btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(28, 122, 131, 0.2), transparent);
+            transition: left 0.5s ease;
+        }
+        .btn:hover::before {
+            left: 100%;
+        }
+        .btn:hover {
+            background: rgba(28, 122, 131, 0.1);
+            box-shadow: 0 0 10px rgba(28, 122, 131, 0.4);
+        }
+        .btn:disabled {
+            color: #4a5c6b;
+            border-color: #2a3b4a;
+            cursor: not-allowed;
+        }
+        .btn:disabled:hover::before {
+            left: -100%;
+        }
+        .restart-btn {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            background: transparent;
+            color: #8BD4E3;
+            width: 36px;
+            height: 36px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            border: 1px solid #1C7A83;
+            transition: all 0.3s ease;
+        }
+        .restart-btn:hover {
+            background: rgba(28, 122, 131, 0.1);
+            box-shadow: 0 0 10px rgba(28, 122, 131, 0.4);
+        }
+        .space-key {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            background: #0d1117;
+            padding: 4px 10px;
+            font-size: 10px;
+            margin: 0 4px;
+            border: 1px solid #1C7A83;
+            color: #8BD4E3;
+        }
+        .countdown {
+            font-size: 36px;
+            text-align: center;
+            margin: 30px 0;
+            color: #8BD4E3;
+            text-shadow: 0 0 5px rgba(139, 212, 227, 0.7);
+        }
+        .swing-animation {
+            animation: swing 0.5s ease-in-out infinite;
+        }
+        @keyframes swing {
+            0%, 100% { transform: rotate(0deg); }
+            25% { transform: rotate(3deg); }
+            75% { transform: rotate(-3deg); }
+        }
+        @keyframes scanline {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+        @keyframes shimmer {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+        @media (max-width: 640px) {
+            .container {
+                padding: 20px;
+            }
+            .beat-pattern {
+                gap: 8px;
+            }
+            .beat-dot {
+                width: 14px;
+                height: 14px;
+            }
+            .instructions {
+                font-size: 11px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <button class="restart-btn" id="restartBtn">
+            <i class="fas fa-redo"></i>
+        </button>
+        <h1 class="text-center mb-3" style="font-size: 20px; color: #8BD4E3; text-shadow: 0 0 5px rgba(139, 212, 227, 0.7); letter-spacing: 1px;">NOSTROMO RHYTHM VERIFICATION</h1>
+        <p class="instructions">PRESS <span class="space-key">SPACE</span> ON THE <span style="color: #8BD4E3; text-shadow: 0 0 3px rgba(139, 212, 227, 0.7);">SEVENTH BEAT</span> TO VERIFY HUMAN BIOSIGNATURE</p>
+        <div class="beat-pattern" id="beatPattern">
+            <div class="beat-dot" data-beat="1"></div>
+            <div class="beat-dot" data-beat="2"></div>
+            <div class="beat-dot" data-beat="3"></div>
+            <div class="beat-dot" data-beat="4"></div>
+            <div class="beat-dot" data-beat="5"></div>
+            <div class="beat-dot" data-beat="6"></div>
+            <div class="beat-dot target" data-beat="7"></div>
+        </div>
+        <div class="beat-indicator" id="beatIndicator">
+            <span class="beat-text" id="beatText">-</span>
+        </div>
+        <div class="progress-container">
+            <div class="progress-bar" id="progressBar"></div>
+        </div>
+        <div class="status-text" id="statusText" style="display: none;"></div>
+        <div class="overlay" id="overlay"></div>
+        <div class="status-popup" id="statusPopup">
+            <span class="status-emoji" id="statusEmoji"></span>
+            <div class="status-message" id="statusMessage"></div>
+            <button class="status-close" id="statusClose">Continue</button>
+        </div>
+        <div class="countdown" id="countdown">3</div>
+        <button class="btn" id="startBtn">Initialize Sequence</button>
+        <button class="btn" id="verifyBtn" disabled>Verify Biosignature</button>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Elements
+            const startBtn = document.getElementById('startBtn');
+            const verifyBtn = document.getElementById('verifyBtn');
+            const restartBtn = document.getElementById('restartBtn');
+            const beatIndicator = document.getElementById('beatIndicator');
+            const beatText = document.getElementById('beatText');
+            const progressBar = document.getElementById('progressBar');
+            const statusText = document.getElementById('statusText');
+            const countdownEl = document.getElementById('countdown');
+            const beatDots = document.querySelectorAll('.beat-dot');
+            const statusPopup = document.getElementById('statusPopup');
+            const statusEmoji = document.getElementById('statusEmoji');
+            const statusMessage = document.getElementById('statusMessage');
+            const statusClose = document.getElementById('statusClose');
+            const overlay = document.getElementById('overlay');
+            // Game state
+            let gameState = 'idle'; // 'idle', 'countingDown', 'playing', 'finished'
+            let currentBeat = 0;
+            let totalBeats = 7;
+            let tempo = 157; // BPM - Beats per minute
+            let beatInterval;
+            let countdownInterval;
+            let spacePressedOnTarget = false;
+            // Audio context for sound
+            let audioContext;
+            // Initialize audio context on user interaction
+            function initAudio() {
+                if (!audioContext) {
+                    audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                }
+            }
+            // Play a tone for the beat
+            function playTone(frequency, duration, type = 'sine') {
+                if (!audioContext) return;
+                const oscillator = audioContext.createOscillator();
+                const gainNode = audioContext.createGain();
+                oscillator.type = type;
+                oscillator.frequency.value = frequency;
+                gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
+                gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration);
+                oscillator.connect(gainNode);
+                gainNode.connect(audioContext.destination);
+                oscillator.start();
+                oscillator.stop(audioContext.currentTime + duration);
+            }
+            // Start the game
+            function startGame() {
+                initAudio();
+                gameState = 'countingDown';
+                startBtn.disabled = true;
+                verifyBtn.disabled = true;
+                statusText.textContent = '';
+                statusText.className = 'status-text';
+                countdownEl.style.display = 'block';
+                let count = 3;
+                countdownEl.textContent = count;
+                countdownInterval = setInterval(() => {
+                    count--;
+                    countdownEl.textContent = count;
+                    if (count <= 0) {
+                        clearInterval(countdownInterval);
+                        countdownEl.style.display = 'none';
+                        startBeatGame();
+                    }
+                }, 1000);
+            }
+            // Start the beat game
+            function startBeatGame() {
+                gameState = 'playing';
+                currentBeat = 0;
+                spacePressedOnTarget = false;
+                progressBar.style.width = '0%';
+                // Calculate interval based on BPM (swing rhythm)
+                const beatDuration = (60 / tempo) * 1000;
+                beatInterval = setInterval(() => {
+                    currentBeat++;
+                    if (currentBeat > totalBeats) {
+                        currentBeat = 1;
+                    }
+                    // Update UI
+                    updateBeatIndicator();
+                    // Play sound - different sound for the target beat
+                    if (currentBeat === 7) {
+                        playTone(440, 0.1, 'square');
+                    } else if (currentBeat % 2 === 1) {
+                        playTone(330, 0.1); // Odd beats
+                    } else {
+                        playTone(220, 0.08); // Even beats (softer)
+                    }
+                    // Update progress
+                    progressBar.style.width = `${(currentBeat / totalBeats) * 100}%`;
+                }, beatDuration);
+            }
+            // Update the beat indicator
+            function updateBeatIndicator() {
+                // Reset all dots
+                beatDots.forEach(dot => {
+                    dot.classList.remove('active');
+                });
+                // Activate current beat dot
+                const currentDot = document.querySelector(`.beat-dot[data-beat="${currentBeat}"]`);
+                if (currentDot) {
+                    currentDot.classList.add('active');
+                }
+                // Update indicator text
+                beatText.textContent = currentBeat;
+                // Add animation to indicator
+                beatIndicator.classList.add('beat-active');
+                setTimeout(() => {
+                    beatIndicator.classList.remove('beat-active');
+                }, 200);
+            }
+            // Check if user pressed space on the target beat
+            function checkBeat() {
+                if (gameState !== 'playing') return;
+                if (currentBeat === 7) {
+                    spacePressedOnTarget = true;
+                    showStatusPopup('🎯', 'Perfect timing! Space pressed at the right moment!', 'success');
+                    // Enable verify button
+                    verifyBtn.disabled = false;
+                } else {
+                    showStatusPopup('⏱️', 'Too early! Wait for the green beat.', 'error');
+                }
+            }
+            // Show status popup
+            function showStatusPopup(emoji, message, type) {
+                statusEmoji.textContent = emoji;
+                statusMessage.textContent = message;
+                statusMessage.className = 'status-message';
+                if (type === 'success') {
+                    statusMessage.classList.add('success');
+                } else if (type === 'error') {
+                    statusMessage.classList.add('error');
+                }
+                overlay.classList.add('active');
+                setTimeout(() => {
+                    statusPopup.classList.add('active');
+                }, 10);
+            }
+            // Hide status popup
+            function hideStatusPopup() {
+                statusPopup.classList.remove('active');
+                setTimeout(() => {
+                    overlay.classList.remove('active');
+                }, 300);
+            }
+            // Verify if user is human
+            function verifyHuman() {
+                if (spacePressedOnTarget) {
+                    showStatusPopup('✅', 'Verification successful! You are human.', 'success');
+                    // Stop the game
+                    clearInterval(beatInterval);
+                    gameState = 'finished';
+                    // Add celebration effect
+                    beatIndicator.classList.add('swing-animation');
+                    setTimeout(() => {
+                        beatIndicator.classList.remove('swing-animation');
+                    }, 2000);
+                } else {
+                    showStatusPopup('❌', 'Verification failed. Try again.', 'error');
+                }
+            }
+            // Restart the game
+            function restartGame() {
+                // Clear any intervals
+                clearInterval(beatInterval);
+                clearInterval(countdownInterval);
+                // Reset state
+                gameState = 'idle';
+                currentBeat = 0;
+                spacePressedOnTarget = false;
+                // Reset UI
+                beatText.textContent = '-';
+                progressBar.style.width = '0%';
+                statusText.textContent = '';
+                statusText.className = 'status-text';
+                countdownEl.style.display = 'none';
+                // Enable start button
+                startBtn.disabled = false;
+                verifyBtn.disabled = true;
+                // Reset beat dots
+                beatDots.forEach(dot => {
+                    dot.classList.remove('active');
+                });
+                // Remove animations
+                beatIndicator.classList.remove('beat-active', 'swing-animation');
+            }
+            // Event listeners
+            startBtn.addEventListener('click', startGame);
+            verifyBtn.addEventListener('click', verifyHuman);
+            restartBtn.addEventListener('click', restartGame);
+            statusClose.addEventListener('click', hideStatusPopup);
+            overlay.addEventListener('click', hideStatusPopup);
+            // Space bar press detection
+            document.addEventListener('keydown', (e) => {
+                if (e.code === 'Space' && gameState === 'playing') {
+                    e.preventDefault(); // Prevent scrolling
+                    checkBeat();
+                }
+            });
+            // Add success/error classes to CSS for the popup messages
+            const style = document.createElement('style');
+            style.textContent = `
+                .status-message.success { color: #41a6f6; }
+                .status-message.error { color: #ff3864; }
+            `;
+            document.head.appendChild(style);
+        });
+    </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=Tingchenliang/rthythm-captcha" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>