Spaces:

rukundob451
/

readyletsgo

Running

App Files Files Community

rukundob451 commited on Apr 17

Commit

b3b859c

verified ·

1 Parent(s): 35b3151

Add 2 files

Browse files

Files changed (1) hide show

index.html +99 -95

index.html CHANGED Viewed

@@ -1,127 +1,131 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Fun App</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta charset="utf-8">
   <style>
     body {
       display: flex;
       flex-direction: column;
-      justify-content: center;
       align-items: center;
-      overflow: hidden;
-      height: 100dvh;
-      font-family: "Arial", sans-serif;
-      text-align: center;
-      background: #ffffff;
-      position: relative;
-      transition: all 0.8s ease;
-    }
-    .arrow {
-      position: absolute;
-      bottom: 32px;
-      left: 0px;
-      width: 100px;
-      transform: rotate(30deg);
     }
     h1 {
-      font-size: 50px;
       margin-bottom: 10px;
-      z-index: 2;
     }
-    h1 span {
-      color: #acacac;
-      font-size: 32px;
     }
-    button {
-      margin-top: 20px;
-      padding: 10px 20px;
-      font-size: 16px;
-      border: none;
-      background-color: #111;
-      color: white;
-      border-radius: 8px;
       cursor: pointer;
-      z-index: 2;
-    }
-    @keyframes floatDown {
-      0% { transform: translateY(-100px); opacity: 1; }
-      100% { transform: translateY(100px); opacity: 0; }
     }
-    .floating-astro {
-      position: absolute;
-      top: 10%;
-      left: 90%;
-      font-size: 40px;
-      animation: floatAstro 6s infinite linear;
-      z-index: 1;
     }
-    @keyframes floatAstro {
-      0% { transform: translateY(0); }
-      50% { transform: translateY(20px) rotate(10deg); }
-      100% { transform: translateY(0); }
     }
   </style>
 </head>
 <body>
-  <h1>
-    <span>What is the date today?</span><br />
-    Ask me anything.
-  </h1>
-  <button onclick="activateSpaceMode()">🪐 Space Mode</button>
-  <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="arrow" />
   <script>
-    const funResponses = [
-      "According to my calculations... it's snack time!",
-      "Time is a social construct.",
-      "Today? Feels like a Monday, but it's not.",
-      "Ask again after coffee ☕",
-      "404: Date not found!",
-      "It's... just another day in the simulation.",
-      "Every day is a good day to nap 😴",
-      "One step closer to the weekend!"
-    ];
-    function dropConfetti() {
-      const emojis = ["🎉", "🎈", "✨", "💥", "🎊", "💃", "🕺"];
-      for (let i = 0; i < 30; i++) {
-        const el = document.createElement("div");
-        el.textContent = emojis[Math.floor(Math.random() * emojis.length)];
-        el.style.position = "absolute";
-        el.style.left = Math.random() * 100 + "vw";
-        el.style.top = Math.random() * 100 + "vh";
-        el.style.fontSize = "24px";
-        el.style.animation = `floatDown ${3 + Math.random() * 2}s ease-in-out forwards`;
-        document.body.appendChild(el);
-      }
     }
-    function activateSpaceMode() {
-      document.body.style.background = "radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%)";
-      document.body.style.color = "#fff";
-      document.querySelector("button").style.backgroundColor = "#fff";
-      document.querySelector("button").style.color = "#000";
-      const astro = document.createElement("div");
-      astro.className = "floating-astro";
-      astro.textContent = "👨‍🚀";
-      document.body.appendChild(astro);
     }
-    document.addEventListener("DOMContentLoaded", function () {
-      const question = document.querySelector("h1");
-      const span = question.querySelector("span");
-      const mainText = question.childNodes[2];
-      const today = new Date().toDateString();
-      span.textContent = `Today's date is: ${today}`;
-      const response = funResponses[Math.floor(Math.random() * funResponses.length)];
-      mainText.textContent = response;
-      dropConfetti();
-    });
   </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=rukundob451/readyletsgo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <!DOCTYPE html>
 <html>
 <head>
+  <title>Click the Box Game</title>
+  <meta charset="UTF-8" />
   <style>
     body {
       display: flex;
       flex-direction: column;
       align-items: center;
+      justify-content: center;
+      height: 100vh;
+      margin: 0;
+      font-family: sans-serif;
+      background-color: #f0f0f0;
     }
     h1 {
       margin-bottom: 10px;
     }
+    #gameArea {
+      width: 300px;
+      height: 300px;
+      background-color: #fff;
+      border: 2px solid #333;
+      position: relative;
+      overflow: hidden;
     }
+    #box {
+      width: 50px;
+      height: 50px;
+      background-color: #ff0066;
+      position: absolute;
       cursor: pointer;
     }
+    #score, #timer, #level {
+      margin: 8px;
+      font-weight: bold;
     }
+    #level-up-msg {
+      font-size: 24px;
+      color: green;
+      margin-top: 10px;
+      height: 30px;
     }
   </style>
 </head>
 <body>
+  <h1>🎯 Click the Box!</h1>
+  <div id="score">Score: 0</div>
+  <div id="level">Level: 1</div>
+  <div id="timer">Time: 30s</div>
+  <div id="level-up-msg"></div>
+  <div id="gameArea">
+    <div id="box"></div>
+  </div>
+  <!-- Sound effect -->
+  <audio id="click-sound" src="https://www.soundjay.com/buttons/sounds/button-16.mp3" preload="auto"></audio>
   <script>
+    let score = 0;
+    let timeLeft = 30;
+    let level = 1;
+    let speed = 1000; // box movement interval in ms
+    let interval;
+    const scoreDisplay = document.getElementById("score");
+    const timerDisplay = document.getElementById("timer");
+    const levelDisplay = document.getElementById("level");
+    const box = document.getElementById("box");
+    const gameArea = document.getElementById("gameArea");
+    const levelUpMsg = document.getElementById("level-up-msg");
+    const clickSound = document.getElementById("click-sound");
+    function moveBox() {
+      const maxX = gameArea.clientWidth - box.clientWidth;
+      const maxY = gameArea.clientHeight - box.clientHeight;
+      const x = Math.floor(Math.random() * maxX);
+      const y = Math.floor(Math.random() * maxY);
+      box.style.left = x + "px";
+      box.style.top = y + "px";
     }
+    function updateLevel() {
+      if (score === 5 || score === 10 || score === 15) {
+        level++;
+        levelDisplay.textContent = "Level: " + level;
+        levelUpMsg.textContent = `🎉 Level Up! Welcome to Level ${level}!`;
+        setTimeout(() => (levelUpMsg.textContent = ""), 2000);
+        clearInterval(interval);
+        speed -= 200; // make it faster
+        interval = setInterval(moveBox, speed);
+      }
     }
+    box.addEventListener("click", () => {
+      score++;
+      scoreDisplay.textContent = "Score: " + score;
+      clickSound.play();
+      moveBox();
+      updateLevel();
+    });
+    function startGame() {
+      moveBox();
+      interval = setInterval(moveBox, speed);
+      const timer = setInterval(() => {
+        timeLeft--;
+        timerDisplay.textContent = "Time: " + timeLeft + "s";
+        if (timeLeft === 0) {
+          clearInterval(timer);
+          clearInterval(interval);
+          box.style.display = "none";
+          timerDisplay.textContent = "⏰ Time's up!";
+          levelUpMsg.textContent = `🏁 Final Score: ${score} | Level: ${level}`;
+        }
+      }, 1000);
+    }
+    startGame();
   </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=rukundob451/readyletsgo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>