Spaces:

aryansrk
/

trail

Running

App Files Files Community

aryansrk commited on Jun 6

Commit

ba45b19

verified ·

1 Parent(s): 9cd0144

undefined - Initial Deployment

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +570 -19
prompts.txt +0 -0

README.md CHANGED Viewed

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

 ---
+title: trail
+emoji: 🐳
+colorFrom: purple
 colorTo: green
 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,570 @@
-<!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>Jet Fighter Combat</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">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        'jet-blue': '#0d47a1',
+                        'combat-orange': '#ff6d00',
+                        'sky-dark': '#1565c0',
+                        'sky-light': '#81d4fa'
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        #game-canvas {
+            background: linear-gradient(to bottom, #81d4fa, #1565c0);
+            border-radius: 8px;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+        }
+        #controls {
+            background: linear-gradient(to right, #0d47a1, #1a237e);
+        }
+        .control-btn {
+            transition: all 0.2s ease;
+        }
+        .control-btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+        }
+        .explosion {
+            position: absolute;
+            width: 100px;
+            height: 100px;
+            background: radial-gradient(circle, #ff6d00, #ffab40);
+            border-radius: 50%;
+            animation: explode 0.6s ease-out;
+            pointer-events: none;
+        }
+        @keyframes explode {
+            0% {
+                transform: scale(0);
+                opacity: 1;
+            }
+            100% {
+                transform: scale(2);
+                opacity: 0;
+            }
+        }
+        @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0px); }
+        }
+        .floating {
+            animation: float 3s ease-in-out infinite;
+        }
+        .cloud {
+            position: absolute;
+            background: rgba(255, 255, 255, 0.7);
+            border-radius: 50%;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 min-h-screen flex items-center justify-center py-8">
+    <div class="w-full max-w-4xl">
+        <!-- Game Title -->
+        <div class="text-center mb-8">
+            <h1 class="text-4xl md:text-5xl font-bold text-white mb-2">JET COMBAT COMMANDER</h1>
+            <div class="inline-flex items-center bg-gradient-to-r from-combat-orange to-yellow-500 px-6 py-2 rounded-full">
+                <i class="fas fa-fighter-jet text-xl mr-2 text-white"></i>
+                <p class="text-white font-bold">AIR SUPERIORITY SIMULATION</p>
+            </div>
+        </div>
+        <!-- Game Stats -->
+        <div class="flex justify-between items-center mb-4 px-2">
+            <div class="flex items-center">
+                <div class="bg-gradient-to-b from-sky-dark to-jet-blue px-4 py-2 rounded-lg mr-4">
+                    <p class="text-white font-semibold flex items-center">
+                        <i class="fas fa-crosshairs mr-2"></i> SCORE: <span id="score" class="ml-2 text-yellow-400">0</span>
+                    </p>
+                </div>
+                <div class="bg-gradient-to-b from-sky-dark to-jet-blue px-4 py-2 rounded-lg">
+                    <p class="text-white font-semibold flex items-center">
+                        <i class="fas fa-heart mr-2 text-red-500"></i> HEALTH: <span id="health" class="ml-2 text-green-400">100</span>%
+                    </p>
+                </div>
+            </div>
+            <div class="flex items-center">
+                <div class="bg-gradient-to-b from-sky-dark to-jet-blue px-4 py-2 rounded-lg">
+                    <p class="text-white font-semibold flex items-center">
+                        <i class="fas fa-rocket mr-2 text-yellow-400"></i> MISSILES: <span id="missiles" class="ml-2">30</span>
+                    </p>
+                </div>
+            </div>
+        </div>
+        <!-- Game Area -->
+        <div class="relative rounded-xl overflow-hidden mb-6">
+            <canvas id="game-canvas" class="w-full" height="500"></canvas>
+            <!-- Start Screen -->
+            <div id="start-screen" class="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-80">
+                <div class="floating mb-8">
+                    <i class="fas fa-fighter-jet text-7xl text-white"></i>
+                </div>
+                <h2 class="text-4xl font-bold text-white mb-6">AIR COMBAT READY</h2>
+                <button id="start-btn" class="bg-gradient-to-r from-red-600 to-combat-orange px-8 py-4 rounded-full text-white font-bold text-xl hover:scale-105 transition-all">
+                    ENGAGE ENEMY <i class="fas fa-play ml-2"></i>
+                </button>
+                <div class="mt-8 flex flex-wrap justify-center gap-4">
+                    <div class="bg-gray-800 rounded-lg px-4 py-2">
+                        <p class="text-white flex items-center"><i class="fas fa-arrow-up mr-2"></i> <i class="fas fa-arrow-down mr-2"></i> <i class="fas fa-arrow-left mr-2"></i> <i class="fas fa-arrow-right mr-2"></i> Move Jet</p>
+                    </div>
+                    <div class="bg-gray-800 rounded-lg px-4 py-2">
+                        <p class="text-white flex items-center"><i class="fas fa-space-shuttle mr-2 text-yellow-500"></i> SPACE to Fire Missile</p>
+                    </div>
+                </div>
+            </div>
+            <!-- Game Over Screen -->
+            <div id="game-over" class="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-80 hidden">
+                <div class="mb-8">
+                    <i class="fas fa-skull-crossbones text-7xl text-red-600"></i>
+                </div>
+                <h2 class="text-4xl font-bold text-white mb-2">MISSION FAILED</h2>
+                <p class="text-white text-xl mb-8">Your Score: <span id="final-score" class="text-yellow-400">0</span></p>
+                <button id="restart-btn" class="bg-gradient-to-r from-green-600 to-emerald-500 px-8 py-4 rounded-full text-white font-bold text-xl hover:scale-105 transition-all">
+                    RESTART MISSION <i class="fas fa-redo ml-2"></i>
+                </button>
+            </div>
+        </div>
+        <!-- Controls -->
+        <div id="controls" class="rounded-xl p-6">
+            <div class="grid grid-cols-3 gap-4 mb-6">
+                <div></div>
+                <button id="up-btn" class="control-btn bg-gradient-to-b from-gray-700 to-gray-900 text-white text-2xl py-6 rounded-lg flex items-center justify-center">
+                    <i class="fas fa-arrow-up"></i>
+                </button>
+                <div></div>
+                <button id="left-btn" class="control-btn bg-gradient-to-b from-gray-700 to-gray-900 text-white text-2xl py-6 rounded-lg flex items-center justify-center">
+                    <i class="fas fa-arrow-left"></i>
+                </button>
+                <button id="fire-btn" class="control-btn bg-gradient-to-b from-red-700 to-red-900 text-white text-2xl py-6 rounded-lg flex items-center justify-center">
+                    <i class="fas fa-rocket"></i>
+                </button>
+                <button id="right-btn" class="control-btn bg-gradient-to-b from-gray-700 to-gray-900 text-white text-2xl py-6 rounded-lg flex items-center justify-center">
+                    <i class="fas fa-arrow-right"></i>
+                </button>
+                <div></div>
+                <button id="down-btn" class="control-btn bg-gradient-to-b from-gray-700 to-gray-900 text-white text-2xl py-6 rounded-lg flex items-center justify-center">
+                    <i class="fas fa-arrow-down"></i>
+                </button>
+                <div></div>
+            </div>
+            <p class="text-gray-300 text-center">You can also use ARROW KEYS to move and SPACEBAR to fire</p>
+        </div>
+    </div>
+    <script>
+        // Game variables
+        const canvas = document.getElementById('game-canvas');
+        const ctx = canvas.getContext('2d');
+        const startScreen = document.getElementById('start-screen');
+        const gameOverScreen = document.getElementById('game-over');
+        const startBtn = document.getElementById('start-btn');
+        const restartBtn = document.getElementById('restart-btn');
+        const scoreElement = document.getElementById('score');
+        const healthElement = document.getElementById('health');
+        const missilesElement = document.getElementById('missiles');
+        const finalScoreElement = document.getElementById('final-score');
+        let gameRunning = false;
+        let score = 0;
+        let health = 100;
+        let missiles = 30;
+        let gameSpeed = 1;
+        // Set canvas size
+        function resizeCanvas() {
+            canvas.width = canvas.clientWidth;
+            canvas.height = canvas.clientHeight;
+        }
+        window.addEventListener('resize', resizeCanvas);
+        resizeCanvas();
+        // Player jet
+        const player = {
+            x: 100,
+            y: canvas.height / 2,
+            width: 80,
+            height: 40,
+            speed: 8,
+            draw() {
+                // Jet body
+                ctx.fillStyle = '#3498db';
+                ctx.fillRect(this.x, this.y, this.width, this.height);
+                // Jet cockpit
+                ctx.fillStyle = '#85c1e9';
+                ctx.beginPath();
+                ctx.moveTo(this.x + this.width - 20, this.y + 5);
+                ctx.lineTo(this.x + this.width - 10, this.y + this.height/2);
+                ctx.lineTo(this.x + this.width - 20, this.y + this.height - 5);
+                ctx.closePath();
+                ctx.fill();
+                // Jet wings
+                ctx.fillStyle = '#2980b9';
+                ctx.fillRect(this.x + 20, this.y - 10, 40, 10);
+                ctx.fillRect(this.x + 20, this.y + this.height, 40, 10);
+                // Jet tail
+                ctx.fillStyle = '#1f618d';
+                ctx.fillRect(this.x, this.y + 10, 15, 20);
+            }
+        };
+        // Enemy jets array
+        let enemies = [];
+        // Missiles array (player's)
+        let missilesArray = [];
+        // Create an explosion animation
+        function createExplosion(x, y) {
+            const explosion = document.createElement('div');
+            explosion.className = 'explosion';
+            explosion.style.left = (x - 50) + 'px';
+            explosion.style.top = (y - 50) + 'px';
+            document.querySelector('.relative').appendChild(explosion);
+            // Remove after animation completes
+            setTimeout(() => {
+                explosion.remove();
+            }, 600);
+        }
+        // Create a cloud at random position
+        function createCloud() {
+            const cloud = document.createElement('div');
+            cloud.className = 'cloud';
+            // Random size
+            const size = Math.random() * 100 + 50;
+            cloud.style.width = size + 'px';
+            cloud.style.height = size/2 + 'px';
+            // Random position
+            const yPos = Math.random() * canvas.height;
+            cloud.style.left = canvas.width + 100 + 'px';
+            cloud.style.top = yPos + 'px';
+            // Random opacity
+            cloud.style.opacity = Math.random() * 0.5 + 0.2;
+            document.querySelector('.relative').appendChild(cloud);
+            // Animate cloud
+            let xPos = canvas.width + 100;
+            const cloudSpeed = Math.random() * 0.5 + 0.2;
+            const moveCloud = setInterval(() => {
+                if (!gameRunning) {
+                    clearInterval(moveCloud);
+                    cloud.remove();
+                    return;
+                }
+                xPos -= cloudSpeed;
+                cloud.style.left = xPos + 'px';
+                if (xPos < -200) {
+                    clearInterval(moveCloud);
+                    cloud.remove();
+                }
+            }, 20);
+        }
+        // Generate clouds during gameplay
+        setInterval(() => {
+            if (gameRunning) {
+                createCloud();
+            }
+        }, 3000);
+        // Enemy class
+        class Enemy {
+            constructor() {
+                this.width = 60;
+                this.height = 30;
+                this.x = canvas.width + 100;
+                this.y = Math.random() * (canvas.height - 100) + 50;
+                this.speed = Math.random() * 3 + 2;
+                this.color = `hsl(${Math.random() * 60}, 80%, 40%)`; // Shades of red/orange
+            }
+            draw() {
+                // Enemy jet body
+                ctx.fillStyle = this.color;
+                ctx.fillRect(this.x, this.y, this.width, this.height);
+                // Enemy cockpit
+                ctx.fillStyle = '#e74c3c';
+                ctx.beginPath();
+                ctx.moveTo(this.x + 10, this.y + 5);
+                ctx.lineTo(this.x + 20, this.y + this.height/2);
+                ctx.lineTo(this.x + 10, this.y + this.height - 5);
+                ctx.closePath();
+                ctx.fill();
+                // Enemy wings
+                ctx.fillStyle = '#c0392b';
+                ctx.fillRect(this.x + this.width - 40, this.y - 8, 30, 8);
+                ctx.fillRect(this.x + this.width - 40, this.y + this.height, 30, 8);
+            }
+            update() {
+                this.x -= this.speed * gameSpeed;
+                // Draw enemy
+                this.draw();
+                // Check collision with player
+                if (this.x < player.x + player.width &&
+                    this.x + this.width > player.x &&
+                    this.y < player.y + player.height &&
+                    this.y + this.height > player.y) {
+                    createExplosion(player.x + player.width/2, player.y + player.height/2);
+                    takeDamage(20);
+                    return false;
+                }
+                // Remove enemy if off screen
+                return this.x + this.width > 0;
+            }
+        }
+        // Missile class
+        class Missile {
+            constructor() {
+                this.x = player.x + player.width;
+                this.y = player.y + player.height / 2;
+                this.width = 20;
+                this.height = 10;
+                this.speed = 15;
+                this.color = '#f1c40f';
+            }
+            draw() {
+                // Missile body
+                ctx.fillStyle = this.color;
+                ctx.fillRect(this.x, this.y, this.width, this.height);
+                // Missile tip
+                ctx.fillStyle = '#e74c3c';
+                ctx.beginPath();
+                ctx.moveTo(this.x + this.width, this.y);
+                ctx.lineTo(this.x + this.width + 10, this.y + this.height/2);
+                ctx.lineTo(this.x + this.width, this.y + this.height);
+                ctx.closePath();
+                ctx.fill();
+            }
+            update() {
+                this.x += this.speed * gameSpeed;
+                // Draw missile
+                this.draw();
+                // Check collision with enemies
+                for (let i = 0; i < enemies.length; i++) {
+                    const enemy = enemies[i];
+                    if (this.x < enemy.x + enemy.width &&
+                        this.x + this.width > enemy.x &&
+                        this.y < enemy.y + enemy.height &&
+                        this.y + this.height > enemy.y) {
+                        createExplosion(enemy.x + enemy.width/2, enemy.y + enemy.height/2);
+                        score += 100;
+                        scoreElement.textContent = score;
+                        return false;
+                    }
+                }
+                // Remove missile if off screen
+                return this.x < canvas.width;
+            }
+        }
+        // Player take damage
+        function takeDamage(amount) {
+            health -= amount;
+            if (health < 0) health = 0;
+            healthElement.textContent = health;
+            if (health <= 0) {
+                endGame();
+            }
+        }
+        // Spawn enemies
+        function spawnEnemy() {
+            if (!gameRunning) return;
+            if (Math.random() < 0.03) {
+                enemies.push(new Enemy());
+            }
+            // Increase difficulty with score
+            gameSpeed = 1 + score * 0.0001;
+        }
+        // Fire missile
+        function fireMissile() {
+            if (!gameRunning || missiles <= 0) return;
+            missiles--;
+            missilesElement.textContent = missiles;
+            missilesArray.push(new Missile());
+        }
+        // End game
+        function endGame() {
+            gameRunning = false;
+            finalScoreElement.textContent = score;
+            gameOverScreen.classList.remove('hidden');
+        }
+        // Game loop
+        function gameLoop() {
+            if (!gameRunning) return;
+            // Clear canvas
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            // Draw player
+            player.draw();
+            // Spawn enemies
+            spawnEnemy();
+            // Update and draw enemies
+            enemies = enemies.filter(enemy => enemy.update());
+            // Update and draw missiles
+            missilesArray = missilesArray.filter(missile => missile.update());
+            requestAnimationFrame(gameLoop);
+        }
+        // Initialize game
+        startBtn.addEventListener('click', () => {
+            startScreen.classList.add('hidden');
+            gameRunning = true;
+            score = 0;
+            health = 100;
+            missiles = 30;
+            scoreElement.textContent = score;
+            healthElement.textContent = health;
+            missilesElement.textContent = missiles;
+            // Reset player position
+            player.y = canvas.height / 2;
+            // Clear game objects
+            enemies = [];
+            missilesArray = [];
+            gameLoop();
+        });
+        // Restart game
+        restartBtn.addEventListener('click', () => {
+            gameOverScreen.classList.add('hidden');
+            startScreen.classList.remove('hidden');
+        });
+        // Movement controls
+        const keys = {};
+        window.addEventListener('keydown', (e) => {
+            keys[e.key] = true;
+            if (e.key === ' ' && gameRunning) {
+                fireMissile();
+            }
+        });
+        window.addEventListener('keyup', (e) => {
+            keys[e.key] = false;
+        });
+        // Touch controls
+        document.getElementById('up-btn').addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            player.y -= player.speed;
+        });
+        document.getElementById('down-btn').addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            player.y += player.speed;
+        });
+        document.getElementById('left-btn').addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            player.x -= player.speed;
+        });
+        document.getElementById('right-btn').addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            player.x += player.speed;
+        });
+        document.getElementById('fire-btn').addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            if (gameRunning) fireMissile();
+        });
+        // Movement handler
+        function handleMovement() {
+            if (!gameRunning) return;
+            if (keys['ArrowUp'] || keys['w'] || keys['W']) {
+                player.y -= player.speed;
+            }
+            if (keys['ArrowDown'] || keys['s'] || keys['S']) {
+                player.y += player.speed;
+            }
+            if (keys['ArrowLeft'] || keys['a'] || keys['A']) {
+                player.x -= player.speed;
+            }
+            if (keys['ArrowRight'] || keys['d'] || keys['D']) {
+                player.x += player.speed;
+            }
+            // Boundary checks
+            if (player.y < 10) player.y = 10;
+            if (player.y > canvas.height - player.height - 10) player.y = canvas.height - player.height - 10;
+            if (player.x < 10) player.x = 10;
+            if (player.x > canvas.width - player.width - 10) player.x = canvas.width - player.width - 10;
+            requestAnimationFrame(handleMovement);
+        }
+        handleMovement();
+    </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=aryansrk/trail" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

File without changes