Spaces:

DataLR
/

neon-grid-velocity

Running

App Files Files Community

DataLR commited on Oct 23, 2025

Commit

6c9e867

verified ·

1 Parent(s): 4fb23af

I want a futuristic design

Browse files

Files changed (5) hide show

README.md +9 -5
components/navbar.js +55 -0
index.html +37 -19
script.js +185 -0
style.css +66 -19

README.md CHANGED Viewed

@@ -1,10 +1,14 @@
 ---
-title: Neon Grid Velocity
-emoji: 👀
-colorFrom: green
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Neon Grid Velocity 🚀
+colorFrom: gray
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/navbar.js ADDED Viewed

	@@ -0,0 +1,55 @@

+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        nav {
+          background: rgba(10, 10, 30, 0.8);
+          padding: 1rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
+          position: relative;
+          z-index: 10;
+          border-bottom: 1px solid #00ffff;
+        }
+        .logo {
+          color: #00ffff;
+          font-weight: bold;
+          font-size: 1.25rem;
+          letter-spacing: 2px;
+          font-family: 'Orbitron', sans-serif;
+          text-shadow: 0 0 10px #00ffff;
+        }
+        .controls {
+          display: flex;
+          gap: 1.5rem;
+          color: #00ffff;
+          font-size: 0.9rem;
+          font-family: 'Orbitron', sans-serif;
+          text-shadow: 0 0 5px #00ffff;
+        }
+        .controls span {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          padding: 0.3rem 0.6rem;
+          border: 1px solid #00ffff;
+          border-radius: 4px;
+          background: rgba(0, 255, 255, 0.1);
+        }
+</style>
+      <nav>
+        <div class="logo">PIXELRACER TURBO 🏁</div>
+        <div class="controls">
+          <span><i data-feather="arrow-left"></i> Left</span>
+          <span><i data-feather="arrow-right"></i> Right</span>
+          <span><i data-feather="arrow-up"></i> Up</span>
+          <span><i data-feather="arrow-down"></i> Down</span>
+        </div>
+      </nav>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -1,19 +1,37 @@
-<!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>Neon Grid Velocity 🚀</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-black text-white overflow-hidden">
+<custom-navbar></custom-navbar>
+    <div id="game-container" class="relative w-full h-screen overflow-hidden">
+        <div id="road" class="absolute w-full h-full bg-gray-800"></div>
+        <div id="player-car" class="absolute w-16 h-28 bg-red-500 rounded-lg"></div>
+        <div id="score" class="absolute top-4 right-4 text-2xl font-bold bg-black bg-opacity-50 px-4 py-2 rounded-lg">Score: 0</div>
+        <div id="game-over" class="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-70 hidden">
+            <h2 class="text-4xl font-bold mb-4 text-red-500">GAME OVER</h2>
+            <p id="final-score" class="text-2xl mb-6">Score: 0</p>
+            <button id="restart-btn" class="px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-bold transition">RESTART</button>
+        </div>
+        <div id="start-screen" class="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-70">
+            <h1 class="text-5xl font-bold mb-6 font-orbitron text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-500">NEON GRID VELOCITY</h1>
+            <p class="text-xl mb-8 text-cyan-300">Use arrow keys to navigate the cyberspace</p>
+            <button id="start-btn" class="px-6 py-3 rounded-lg font-bold transition">ENGAGE DRIVE</button>
+</div>
+    </div>
+    <script src="components/navbar.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,185 @@

+document.addEventListener('DOMContentLoaded', () => {
+    // Game elements
+    const playerCar = document.getElementById('player-car');
+    const gameContainer = document.getElementById('game-container');
+    const road = document.getElementById('road');
+    const scoreElement = document.getElementById('score');
+    const gameOverScreen = document.getElementById('game-over');
+    const finalScoreElement = document.getElementById('final-score');
+    const restartBtn = document.getElementById('restart-btn');
+    const startScreen = document.getElementById('start-screen');
+    const startBtn = document.getElementById('start-btn');
+    // Game state
+    let gameRunning = false;
+    let score = 0;
+    let obstacles = [];
+    let animationId;
+    let speed = 3;
+    let gameSpeed = 2;
+    let playerPosition = {
+        x: gameContainer.offsetWidth / 2 - playerCar.offsetWidth / 2,
+        y: gameContainer.offsetHeight - playerCar.offsetHeight - 20
+    };
+    // Initialize player car position
+    playerCar.style.left = `${playerPosition.x}px`;
+    playerCar.style.top = `${playerPosition.y}px`;
+    // Event listeners
+    startBtn.addEventListener('click', startGame);
+    restartBtn.addEventListener('click', startGame);
+    // Keyboard controls
+    const keys = {
+        ArrowLeft: false,
+        ArrowRight: false,
+        ArrowUp: false,
+        ArrowDown: false
+    };
+    document.addEventListener('keydown', (e) => {
+        if (keys.hasOwnProperty(e.key)) {
+            keys[e.key] = true;
+        }
+    });
+    document.addEventListener('keyup', (e) => {
+        if (keys.hasOwnProperty(e.key)) {
+            keys[e.key] = false;
+        }
+    });
+    // Game functions
+    function startGame() {
+        // Reset game state
+        score = 0;
+        speed = 3;
+        gameSpeed = 2;
+        obstacles.forEach(obs => obs.element.remove());
+        obstacles = [];
+        scoreElement.textContent = `Score: ${score}`;
+        // Reset player position
+        playerPosition = {
+            x: gameContainer.offsetWidth / 2 - playerCar.offsetWidth / 2,
+            y: gameContainer.offsetHeight - playerCar.offsetHeight - 20
+        };
+        playerCar.style.left = `${playerPosition.x}px`;
+        playerCar.style.top = `${playerPosition.y}px`;
+        // Hide screens
+        gameOverScreen.classList.add('hidden');
+        startScreen.classList.add('hidden');
+        // Start game loop
+        gameRunning = true;
+        gameLoop();
+    }
+    function gameLoop() {
+        if (!gameRunning) return;
+        // Move player
+        if (keys.ArrowLeft && playerPosition.x > 20) {
+            playerPosition.x -= speed;
+        }
+        if (keys.ArrowRight && playerPosition.x < gameContainer.offsetWidth - playerCar.offsetWidth - 20) {
+            playerPosition.x += speed;
+        }
+        if (keys.ArrowUp && playerPosition.y > 0) {
+            playerPosition.y -= speed;
+        }
+        if (keys.ArrowDown && playerPosition.y < gameContainer.offsetHeight - playerCar.offsetHeight) {
+            playerPosition.y += speed;
+        }
+        playerCar.style.left = `${playerPosition.x}px`;
+        playerCar.style.top = `${playerPosition.y}px`;
+        // Generate obstacles
+        if (Math.random() < 0.02) {
+            createObstacle();
+        }
+        // Move obstacles
+        moveObstacles();
+        // Check collisions
+        if (checkCollisions()) {
+            gameOver();
+            return;
+        }
+        // Update score
+        score++;
+        scoreElement.textContent = `Score: ${score}`;
+        // Increase difficulty
+        if (score % 500 === 0) {
+            gameSpeed += 0.2;
+        }
+        animationId = requestAnimationFrame(gameLoop);
+    }
+    function createObstacle() {
+        const width = Math.random() * 100 + 50;
+        const height = Math.random() * 70 + 30;
+        const x = Math.random() * (gameContainer.offsetWidth - width);
+        const obstacle = document.createElement('div');
+        obstacle.className = 'obstacle';
+        obstacle.style.width = `${width}px`;
+        obstacle.style.height = `${height}px`;
+        obstacle.style.left = `${x}px`;
+        obstacle.style.top = `-${height}px`;
+        gameContainer.appendChild(obstacle);
+        obstacles.push({
+            element: obstacle,
+            x,
+            y: -height,
+            width,
+            height
+        });
+    }
+    function moveObstacles() {
+        obstacles.forEach(obstacle => {
+            obstacle.y += gameSpeed;
+            obstacle.element.style.top = `${obstacle.y}px`;
+            // Remove obstacles that are off screen
+            if (obstacle.y > gameContainer.offsetHeight) {
+                obstacle.element.remove();
+                obstacles = obstacles.filter(obs => obs !== obstacle);
+            }
+        });
+    }
+    function checkCollisions() {
+        const playerRect = {
+            x: playerPosition.x,
+            y: playerPosition.y,
+            width: playerCar.offsetWidth,
+            height: playerCar.offsetHeight
+        };
+        return obstacles.some(obstacle => {
+            return !(
+                playerRect.x + playerRect.width < obstacle.x ||
+                playerRect.x > obstacle.x + obstacle.width ||
+                playerRect.y + playerRect.height < obstacle.y ||
+                playerRect.y > obstacle.y + obstacle.height
+            );
+        });
+    }
+    function gameOver() {
+        gameRunning = false;
+        cancelAnimationFrame(animationId);
+        finalScoreElement.textContent = `Score: ${score}`;
+        gameOverScreen.classList.remove('hidden');
+    }
+});

style.css CHANGED Viewed

@@ -1,28 +1,75 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Futuristic road with neon grid */
+#road {
+    background-color: #0a0a15;
+    background-image:
+        linear-gradient(to bottom,
+            transparent 0%,
+            transparent 48%,
+            rgba(0, 255, 255, 0.2) 48%,
+            rgba(0, 255, 255, 0.2) 52%,
+            transparent 52%,
+            transparent 100%),
+        linear-gradient(to right,
+            rgba(0, 255, 255, 0.05) 0%,
+            rgba(0, 255, 255, 0.05) 49%,
+            transparent 49%,
+            transparent 51%,
+            rgba(0, 255, 255, 0.05) 51%,
+            rgba(0, 255, 255, 0.05) 100%);
+    background-size: 100px 100px, 100px 100px;
+    animation: roadMove 0.5s linear infinite;
+    box-shadow: 0 0 30px rgba(0, 255, 255, 0.3) inset;
+}
+@keyframes roadMove {
+    from { background-position: 0 0, 0 0; }
+    to { background-position: 0 100px, 0 0; }
+}
+/* Futuristic obstacles */
+.obstacle {
+    position: absolute;
+    background-color: #ff00ff;
+    border-radius: 5px;
+    box-shadow: 0 0 15px #ff00ff, 0 0 30px rgba(255, 0, 255, 0.3);
+}
+/* Player car */
+#player-car {
+    background: linear-gradient(135deg, #00ffff 0%, #ff00ff 100%);
+    box-shadow: 0 0 20px #00ffff, 0 0 40px rgba(0, 255, 255, 0.3);
+    border-radius: 10px;
+}
+/* Game screens */
+#game-over, #start-screen {
+    background: rgba(10, 10, 30, 0.9);
+    border: 2px solid #00ffff;
+    box-shadow: 0 0 30px #00ffff;
 }
+#game-over h2, #start-screen h1 {
+    text-shadow: 0 0 10px #00ffff, 0 0 20px rgba(0, 255, 255, 0.5);
 }
+button {
+    background: linear-gradient(135deg, #00ffff 0%, #ff00ff 100%);
+    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
+    border: none;
+    color: #111;
+    font-weight: bold;
+    transition: all 0.3s;
 }
+button:hover {
+    transform: scale(1.05);
+    box-shadow: 0 0 25px rgba(0, 255, 255, 0.8);
 }
+#score {
+    background: rgba(10, 10, 30, 0.7);
+    border: 1px solid #00ffff;
+    color: #00ffff;
+    text-shadow: 0 0 5px #00ffff;
 }