Spaces:

arirajuns
/

space3

Running

App Files Files Community

arirajuns commited on Apr 10, 2025

Commit

76bfa1a

verified ·

1 Parent(s): cb97404

Add 2 files

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

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

 ---
+title: space3
+emoji: 🐳
+colorFrom: pink
+colorTo: blue
 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,373 @@
-<!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, maximum-scale=1.0, user-scalable=no">
+    <title>Pendulum Challenge</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .pendulum-arm {
+            transform-origin: top center;
+            touch-action: none;
+        }
+        .target {
+            transition: all 0.3s ease;
+            touch-action: none;
+        }
+        .target-hit {
+            transform: scale(1.2);
+            opacity: 0;
+        }
+        #game-container {
+            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+            touch-action: none;
+        }
+        .amplitude-indicator {
+            background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
+        }
+        .frequency-indicator {
+            background: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 100%);
+        }
+        .pendulum-bob {
+            box-shadow: 0 0 20px rgba(255,215,0,0.7);
+        }
+        body {
+            -webkit-tap-highlight-color: transparent;
+            -webkit-touch-callout: none;
+            -webkit-user-select: none;
+            user-select: none;
+        }
+        .physics-card {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.3s ease;
+        }
+        .physics-card.open {
+            max-height: 500px;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-start p-2">
+    <div class="w-full max-w-md">
+        <header class="text-center mb-4 sticky top-0 bg-gray-900 z-10 pt-2 pb-2">
+            <h1 class="text-2xl font-bold mb-1 text-yellow-300">Pendulum Challenge</h1>
+            <p class="text-sm text-gray-300">Swing to hit targets!</p>
+        </header>
+        <!-- Mobile Controls Info -->
+        <div class="bg-blue-900 bg-opacity-50 rounded-lg p-2 mb-3 text-sm flex items-center">
+            <i class="fas fa-info-circle mr-2 text-blue-300"></i>
+            <span>Drag the gold ball to swing. Hit targets when amplitude matches.</span>
+        </div>
+        <div class="relative w-full aspect-[3/4] rounded-xl overflow-hidden shadow-2xl mb-3" id="game-container">
+            <div id="pendulum" class="absolute top-0 left-1/2 transform -translate-x-1/2">
+                <div class="pendulum-arm w-1 h-48 md:h-64 bg-gray-300 mx-auto relative">
+                    <div class="pendulum-bob absolute bottom-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-10 h-10 md:w-12 md:h-12 rounded-full bg-yellow-500 border-4 border-yellow-600"></div>
+                </div>
+            </div>
+            <div id="targets" class="absolute inset-0"></div>
+            <div class="absolute bottom-2 left-2 bg-black bg-opacity-50 p-1 rounded">
+                <div class="flex items-center gap-1 text-sm">
+                    <span class="text-yellow-400"><i class="fas fa-bullseye"></i></span>
+                    <span id="score">0</span>
+                </div>
+            </div>
+        </div>
+        <div class="grid grid-cols-2 gap-2 mb-3">
+            <div class="bg-gray-800 p-2 rounded-lg">
+                <h3 class="text-sm font-semibold mb-1 text-center">Amplitude</h3>
+                <div class="amplitude-indicator h-3 rounded-full overflow-hidden">
+                    <div id="amplitude-bar" class="h-full bg-blue-500 w-0"></div>
+                </div>
+                <div class="text-center mt-1 text-xs">
+                    <span id="amplitude-value">0°</span>
+                </div>
+            </div>
+            <div class="bg-gray-800 p-2 rounded-lg">
+                <h3 class="text-sm font-semibold mb-1 text-center">Frequency</h3>
+                <div class="frequency-indicator h-3 rounded-full overflow-hidden">
+                    <div id="frequency-bar" class="h-full bg-blue-400 w-0"></div>
+                </div>
+                <div class="text-center mt-1 text-xs">
+                    <span id="frequency-value">0 Hz</span>
+                </div>
+            </div>
+        </div>
+        <!-- Collapsible Physics Info -->
+        <div class="bg-gray-800 rounded-lg mb-3 overflow-hidden">
+            <div class="flex justify-between items-center p-2 cursor-pointer" id="physics-toggle">
+                <h2 class="text-lg font-bold text-yellow-300">Physics Info</h2>
+                <i class="fas fa-chevron-down transition-transform duration-300" id="physics-chevron"></i>
+            </div>
+            <div class="physics-card" id="physics-content">
+                <div class="p-3 pt-0 space-y-3">
+                    <div>
+                        <h3 class="font-semibold">Pendulum Motion</h3>
+                        <p class="text-xs text-gray-300">Swinging under gravity's influence, demonstrating harmonic motion.</p>
+                    </div>
+                    <div>
+                        <h3 class="font-semibold">Period (T)</h3>
+                        <p class="text-xs text-gray-300">T = 2π√(L/g)<br>L = length, g = gravity (9.8 m/s²)</p>
+                    </div>
+                    <div>
+                        <h3 class="font-semibold">Amplitude</h3>
+                        <p class="text-xs text-gray-300">Maximum angle from rest position.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <button id="restart-btn" class="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-3 px-4 rounded transition duration-300 mb-2">
+            <i class="fas fa-redo mr-2"></i> Restart Game
+        </button>
+    </div>
+    <script>
+        // Game variables
+        let score = 0;
+        let amplitude = 0;
+        let frequency = 0;
+        let pendulumAngle = 0;
+        let angularVelocity = 0;
+        let isDragging = false;
+        let lastTime = 0;
+        let pendulumLength = 192; // pixels (shorter for mobile)
+        let gravity = 0.4; // pixels per frame squared (slower for mobile)
+        let damping = 0.99; // damping factor
+        let targets = [];
+        let animationId;
+        let gameStarted = false;
+        let touchStartAngle = 0;
+        // DOM elements
+        const pendulum = document.getElementById('pendulum');
+        const pendulumArm = document.querySelector('.pendulum-arm');
+        const pendulumBob = document.querySelector('.pendulum-bob');
+        const targetsContainer = document.getElementById('targets');
+        const scoreDisplay = document.getElementById('score');
+        const amplitudeValue = document.getElementById('amplitude-value');
+        const amplitudeBar = document.getElementById('amplitude-bar');
+        const frequencyValue = document.getElementById('frequency-value');
+        const frequencyBar = document.getElementById('frequency-bar');
+        const restartBtn = document.getElementById('restart-btn');
+        const gameContainer = document.getElementById('game-container');
+        const physicsToggle = document.getElementById('physics-toggle');
+        const physicsContent = document.getElementById('physics-content');
+        const physicsChevron = document.getElementById('physics-chevron');
+        // Initialize game
+        function initGame() {
+            score = 0;
+            scoreDisplay.textContent = score;
+            targetsContainer.innerHTML = '';
+            targets = [];
+            // Create initial targets (fewer and larger for mobile)
+            createTarget(30, 30, 100);
+            createTarget(45, window.innerWidth * 0.7, 150);
+            createTarget(60, window.innerWidth * 0.3, 200);
+            // Reset pendulum
+            pendulumAngle = 0;
+            angularVelocity = 0;
+            updatePendulumPosition();
+            updatePhysicsDisplays();
+            if (!gameStarted) {
+                setupEventListeners();
+                gameStarted = true;
+            }
+            startAnimation();
+        }
+        // Create a target at a specific angle and position
+        function createTarget(requiredAmplitude, x, y) {
+            const target = document.createElement('div');
+            target.className = 'target absolute w-12 h-12 md:w-16 md:h-16 rounded-full bg-red-500 border-4 border-red-700 flex items-center justify-center text-white font-bold cursor-pointer transform -translate-x-1/2 -translate-y-1/2';
+            target.style.left = `${x}px`;
+            target.style.top = `${y}px`;
+            target.textContent = `${requiredAmplitude}°`;
+            target.dataset.amplitude = requiredAmplitude;
+            // Make targets easier to hit on mobile
+            target.addEventListener('click', () => {
+                if (Math.abs(amplitude) >= requiredAmplitude * 0.8) {
+                    hitTarget(target);
+                }
+            });
+            targetsContainer.appendChild(target);
+            targets.push({
+                element: target,
+                x: x,
+                y: y,
+                requiredAmplitude: requiredAmplitude,
+                hit: false
+            });
+            return target;
+        }
+        // Handle target hit
+        function hitTarget(targetElement) {
+            const target = targets.find(t => t.element === targetElement);
+            if (target && !target.hit) {
+                target.hit = true;
+                targetElement.classList.add('target-hit');
+                score += Math.floor(target.requiredAmplitude * 1.5);
+                scoreDisplay.textContent = score;
+                setTimeout(() => {
+                    targetElement.remove();
+                    // Create a new target at random position
+                    const newX = 50 + Math.random() * (gameContainer.offsetWidth - 100);
+                    const newY = 50 + Math.random() * (gameContainer.offsetHeight - 100);
+                    const newAmplitude = 20 + Math.floor(Math.random() * 50);
+                    createTarget(newAmplitude, newX, newY);
+                }, 300);
+            }
+        }
+        // Update pendulum position based on angle
+        function updatePendulumPosition() {
+            pendulumArm.style.transform = `rotate(${pendulumAngle}deg)`;
+        }
+        // Update physics displays
+        function updatePhysicsDisplays() {
+            amplitude = Math.abs(pendulumAngle);
+            amplitudeValue.textContent = `${amplitude.toFixed(1)}°`;
+            amplitudeBar.style.width = `${Math.min(100, amplitude)}%`;
+            // Calculate frequency (approximate)
+            if (amplitude > 5) {
+                const period = 2 * Math.PI * Math.sqrt(pendulumLength / (gravity * 100));
+                frequency = 1 / period;
+                frequencyValue.textContent = `${frequency.toFixed(3)} Hz`;
+                frequencyBar.style.width = `${Math.min(100, frequency * 150)}%`;
+            } else {
+                frequency = 0;
+                frequencyValue.textContent = "0 Hz";
+                frequencyBar.style.width = "0%";
+            }
+        }
+        // Physics update
+        function updatePhysics(timestamp) {
+            if (!lastTime) lastTime = timestamp;
+            const deltaTime = (timestamp - lastTime) / 16; // Normalize to ~60fps
+            lastTime = timestamp;
+            if (!isDragging) {
+                // Apply gravity
+                const angularAcceleration = (-gravity / pendulumLength) * Math.sin(pendulumAngle * Math.PI / 180);
+                angularVelocity += angularAcceleration * deltaTime;
+                angularVelocity *= damping;
+                pendulumAngle += angularVelocity * deltaTime;
+                updatePendulumPosition();
+                updatePhysicsDisplays();
+            }
+            animationId = requestAnimationFrame(updatePhysics);
+        }
+        // Start animation loop
+        function startAnimation() {
+            lastTime = 0;
+            cancelAnimationFrame(animationId);
+            animationId = requestAnimationFrame(updatePhysics);
+        }
+        // Calculate angle from touch position
+        function getAngleFromTouch(touchX, touchY) {
+            const rect = gameContainer.getBoundingClientRect();
+            const centerX = rect.left + rect.width / 2;
+            const centerY = rect.top + 10; // Pivot point
+            const deltaX = touchX - centerX;
+            const deltaY = touchY - centerY;
+            return Math.atan2(deltaX, deltaY) * (180 / Math.PI) - 90;
+        }
+        // Event listeners setup
+        function setupEventListeners() {
+            // Touch controls for pendulum
+            pendulumBob.addEventListener('touchstart', (e) => {
+                e.preventDefault();
+                isDragging = true;
+                const touch = e.touches[0];
+                touchStartAngle = getAngleFromTouch(touch.clientX, touch.clientY) - pendulumAngle;
+                // Visual feedback
+                pendulumBob.classList.add('scale-110');
+            });
+            document.addEventListener('touchmove', (e) => {
+                if (!isDragging) return;
+                e.preventDefault();
+                const touch = e.touches[0];
+                pendulumAngle = getAngleFromTouch(touch.clientX, touch.clientY) - touchStartAngle;
+                angularVelocity = 0;
+                updatePendulumPosition();
+                updatePhysicsDisplays();
+            });
+            document.addEventListener('touchend', () => {
+                if (isDragging) {
+                    isDragging = false;
+                    pendulumBob.classList.remove('scale-110');
+                    // Give the pendulum a small initial velocity based on release angle
+                    angularVelocity = -pendulumAngle * 0.015; // Slower for mobile
+                }
+            });
+            // Click targets (also works for touch)
+            targetsContainer.addEventListener('click', (e) => {
+                if (e.target.classList.contains('target')) {
+                    const requiredAmplitude = parseFloat(e.target.dataset.amplitude);
+                    if (Math.abs(amplitude) >= requiredAmplitude * 0.8) {
+                        hitTarget(e.target);
+                    }
+                }
+            });
+            // Restart button
+            restartBtn.addEventListener('click', initGame);
+            // Physics info toggle
+            physicsToggle.addEventListener('click', () => {
+                physicsContent.classList.toggle('open');
+                physicsChevron.classList.toggle('rotate-180');
+            });
+            // Prevent scrolling when touching the game
+            document.addEventListener('touchmove', (e) => {
+                if (isDragging) {
+                    e.preventDefault();
+                }
+            }, { passive: false });
+        }
+        // Start the game
+        initGame();
+        // Handle window resize
+        window.addEventListener('resize', () => {
+            // Reposition targets on resize
+            targets.forEach(target => {
+                target.element.style.left = `${target.x}px`;
+                target.element.style.top = `${target.y}px`;
+            });
+        });
+    </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=arirajuns/space3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>