Spaces:

SAIcgr
/

bcgg

Running

App Files Files Community

SAIcgr commited on Feb 2, 2025

Commit

856ebb1

verified ·

1 Parent(s): 94bdbfa

Upload 7 files

Browse files

Files changed (6) hide show

Pong Game.html +253 -0
gt.html +231 -0
hong-game.html +253 -0
index - Copy.html +153 -0
media-pipe-pong.html +84 -0
mk.html +243 -0

Pong Game.html ADDED Viewed

	@@ -0,0 +1,253 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Pong Game with Speed Control</title>
+  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js"></script>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: Arial, sans-serif;
+      background: linear-gradient(135deg, #74ebd5, #acb6e5);
+      color: white;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      overflow: hidden;
+    }
+    .header {
+      width: 100%;
+      background-color: rgba(0, 0, 0, 0.7);
+      padding: 10px 0;
+      text-align: center;
+      position: fixed;
+      top: 0;
+      z-index: 100;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 20px;
+      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
+    }
+    .header div {
+      color: white;
+      font-size: 18px;
+      font-weight: bold;
+    }
+    .game-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      padding-top: 70px; /* Space for the header */
+    }
+    canvas {
+      border: 2px solid #fff;
+      border-radius: 10px;
+      background: #222;
+      max-width: 90%;
+      max-height: 70%;
+      width: auto;
+      height: auto;
+    }
+    .controls {
+      margin-top: 10px;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .controls label {
+      font-size: 16px;
+    }
+    .controls input[type="range"] {
+      width: 150px;
+    }
+    video {
+      display: none;
+    }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <div id="score">Score: 0</div>
+    <div id="timer">Time: 60</div>
+  </div>
+  <div class="game-container">
+    <canvas id="gameCanvas" width="500" height="500"></canvas>
+    <div class="controls">
+      <label for="speedControl">Ball Speed:</label>
+      <input type="range" id="speedControl" min="1" max="10" value="2" step="1">
+    </div>
+  </div>
+  <video id="webcam" autoplay playsinline></video>
+  <script>
+    const canvas = document.getElementById('gameCanvas');
+    const ctx = canvas.getContext('2d');
+    const scoreDisplay = document.getElementById('score');
+    const timerDisplay = document.getElementById('timer');
+    const speedControl = document.getElementById('speedControl');
+    let ball = {
+      x: canvas.width / 2,
+      y: canvas.height / 2,
+      radius: 10,
+      dx: 2,
+      dy: 2,
+      color: 'white',
+    };
+    let paddle = {
+      x: canvas.width / 2 - 50,
+      y: canvas.height - 20,
+      width: 100,
+      height: 10,
+      color: 'white',
+    };
+    let score = 0;
+    let timeLeft = 60;
+    // Update ball speed based on slider
+    speedControl.addEventListener('input', () => {
+      const speed = parseInt(speedControl.value);
+      ball.dx = Math.sign(ball.dx) * speed;
+      ball.dy = Math.sign(ball.dy) * speed;
+    });
+    // Draw ball
+    function drawBall() {
+      ctx.beginPath();
+      ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
+      ctx.fillStyle = ball.color;
+      ctx.fill();
+      ctx.closePath();
+    }
+    // Draw paddle
+    function drawPaddle() {
+      ctx.fillStyle = paddle.color;
+      ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);
+    }
+    // Update ball position
+    function updateBall() {
+      ball.x += ball.dx;
+      ball.y += ball.dy;
+      // Bounce off walls
+      if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
+        ball.dx = -ball.dx;
+      }
+      if (ball.y - ball.radius < 0) {
+        ball.dy = -ball.dy;
+      }
+      // Bounce off paddle
+      if (
+        ball.y + ball.radius > paddle.y &&
+        ball.x > paddle.x &&
+        ball.x < paddle.x + paddle.width
+      ) {
+        ball.dy = -ball.dy;
+        score++;
+      }
+      // Reset if ball hits the bottom
+      if (ball.y + ball.radius > canvas.height) {
+        score = 0;
+        ball.x = canvas.width / 2;
+        ball.y = canvas.height / 2;
+        ball.dx = Math.sign(ball.dx) * parseInt(speedControl.value);
+        ball.dy = Math.sign(ball.dy) * parseInt(speedControl.value);
+      }
+      scoreDisplay.textContent = `Score: ${score}`;
+    }
+    // Timer
+    function startTimer() {
+      const timerInterval = setInterval(() => {
+        if (timeLeft > 0) {
+          timeLeft--;
+          timerDisplay.textContent = `Time: ${timeLeft}`;
+        } else {
+          clearInterval(timerInterval);
+          alert(`Game Over! Your score is ${score}`);
+          document.location.reload();
+        }
+      }, 1000);
+    }
+    // Game loop
+    function gameLoop() {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      drawBall();
+      drawPaddle();
+      updateBall();
+      requestAnimationFrame(gameLoop);
+    }
+    // MediaPipe Hands setup
+    const hands = new Hands({
+      locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`,
+    });
+    hands.setOptions({
+      maxNumHands: 1,
+      modelComplexity: 1,
+      minDetectionConfidence: 0.7,
+      minTrackingConfidence: 0.7,
+    });
+    const videoElement = document.getElementById('webcam');
+    const camera = new Camera(videoElement, {
+      onFrame: async () => {
+        await hands.send({ image: videoElement });
+      },
+      width: 640,
+      height: 480,
+    });
+    camera.start();
+    hands.onResults((results) => {
+      if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
+        const landmarks = results.multiHandLandmarks[0];
+        const indexFinger = landmarks[8]; // Index finger tip
+        // Map index finger x-coordinate to paddle position
+        paddle.x = indexFinger.x * canvas.width - paddle.width / 2;
+        // Ensure paddle stays within canvas bounds
+        if (paddle.x < 0) paddle.x = 0;
+        if (paddle.x + paddle.width > canvas.width) paddle.x = canvas.width - paddle.width;
+      }
+    });
+    startTimer();
+    gameLoop();
+  </script>
+</body>
+</html>

gt.html ADDED Viewed

	@@ -0,0 +1,231 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Snake Game</title>
+  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js"></script>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: Arial, sans-serif;
+      background-color: black;
+      color: white;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100vh;
+      overflow: hidden;
+    }
+    .game-container {
+      position: relative;
+      width: 90%;
+      max-width: 600px;
+      aspect-ratio: 3 / 2;
+      background-color: #111;
+      border: 2px solid #00ff00;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    canvas {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+    #pointer {
+      position: absolute;
+      width: 15px;
+      height: 15px;
+      background-color: rgba(255, 0, 0, 0.8);
+      border-radius: 50%;
+      pointer-events: none;
+      transform: translate(-50%, -50%);
+    }
+    .timer {
+      position: fixed;
+      top: 10px;
+      left: 10px;
+      font-size: 18px;
+      color: white;
+      z-index: 10;
+    }
+    .score {
+      position: fixed;
+      top: 10px;
+      right: 10px;
+      font-size: 18px;
+      color: white;
+      z-index: 10;
+    }
+    .popup {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-color: #222;
+      color: white;
+      padding: 20px;
+      border: 2px solid #00ff00;
+      border-radius: 10px;
+      z-index: 10;
+      text-align: center;
+    }
+    .popup button {
+      margin-top: 10px;
+      padding: 10px 20px;
+      background-color: #00ff00;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+      color: black;
+      font-size: 16px;
+    }
+    .popup button:hover {
+      background-color: #00cc00;
+    }
+  </style>
+</head>
+<body>
+  <div class="timer" id="timer">Time: 0:00</div>
+  <div class="score" id="score">Score: 0</div>
+  <div class="game-container">
+    <canvas id="gameCanvas"></canvas>
+    <div id="pointer"></div>
+  </div>
+  <script>
+    const canvas = document.getElementById('gameCanvas');
+    const ctx = canvas.getContext('2d');
+    const pointer = document.getElementById('pointer');
+    const timerDisplay = document.getElementById('timer');
+    const scoreDisplay = document.getElementById('score');
+    canvas.width = canvas.parentElement.clientWidth;
+    canvas.height = canvas.parentElement.clientHeight;
+    let snake = [{ x: 150, y: 150 }];
+    const snakeSize = 20;
+    let food = { x: Math.random() * (canvas.width - snakeSize), y: Math.random() * (canvas.height - snakeSize) };
+    let score = 0;
+    let timeLeft = 60; // 1 minute
+    let gameInterval, timerInterval;
+    // Initialize MediaPipe Hands
+    const hands = new Hands({
+      locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`,
+    });
+    hands.setOptions({
+      maxNumHands: 1,
+      modelComplexity: 1,
+      minDetectionConfidence: 0.8,
+      minTrackingConfidence: 0.8,
+    });
+    const videoElement = document.createElement('video');
+    const camera = new Camera(videoElement, {
+      onFrame: async () => {
+        await hands.send({ image: videoElement });
+      },
+      width: 1280,
+      height: 720,
+    });
+    camera.start();
+    hands.onResults((results) => {
+      if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
+        const landmarks = results.multiHandLandmarks[0];
+        const pointerX = landmarks[8].x * canvas.width;
+        const pointerY = landmarks[8].y * canvas.height;
+        pointer.style.left = `${pointerX}px`;
+        pointer.style.top = `${pointerY}px`;
+      }
+    });
+    function drawSnake() {
+      ctx.fillStyle = 'green';
+      snake.forEach((segment) => {
+        ctx.fillRect(segment.x, segment.y, snakeSize, snakeSize);
+      });
+    }
+    function drawFood() {
+      ctx.fillStyle = 'red';
+      ctx.fillRect(food.x, food.y, snakeSize, snakeSize);
+    }
+    function moveSnake() {
+      const head = { x: snake[0].x, y: snake[0].y };
+      head.x += (pointer.offsetLeft - head.x) * 0.1;
+      head.y += (pointer.offsetTop - head.y) * 0.1;
+      snake.unshift(head);
+      if (
+        Math.abs(head.x - food.x) < snakeSize &&
+        Math.abs(head.y - food.y) < snakeSize
+      ) {
+        score += 10;
+        food = { x: Math.random() * (canvas.width - snakeSize), y: Math.random() * (canvas.height - snakeSize) };
+      } else {
+        snake.pop();
+      }
+      if (
+        head.x < 0 ||
+        head.x > canvas.width ||
+        head.y < 0 ||
+        head.y > canvas.height ||
+        snake.some((segment, index) => index !== 0 && head.x === segment.x && head.y === segment.y)
+      ) {
+        endGame();
+      }
+    }
+    function updateTimer() {
+      if (timeLeft <= 0) {
+        endGame();
+      } else {
+        timeLeft--;
+        const minutes = Math.floor(timeLeft / 60);
+        const seconds = timeLeft % 60;
+        timerDisplay.textContent = `Time: ${minutes}:${seconds.toString().padStart(2, '0')}`;
+      }
+    }
+    function endGame() {
+      clearInterval(gameInterval);
+      clearInterval(timerInterval);
+      const popup = document.createElement('div');
+      popup.classList.add('popup');
+      popup.innerHTML = `<h2>Game Over</h2><p>Your Score: ${score}</p><button onclick="restartGame()">Restart</button>`;
+      document.body.appendChild(popup);
+    }
+    function restartGame() {
+      document.location.reload();
+    }
+    function gameLoop() {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      drawSnake();
+      drawFood();
+      moveSnake();
+      scoreDisplay.textContent = `Score: ${score}`;
+    }
+    gameInterval = setInterval(gameLoop, 100);
+    timerInterval = setInterval(updateTimer, 1000);
+  </script>
+</body>
+</html>

hong-game.html ADDED Viewed

	@@ -0,0 +1,253 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Pong Game with Speed Control</title>
+  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js"></script>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: Arial, sans-serif;
+      background: linear-gradient(135deg, #74ebd5, #acb6e5);
+      color: white;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      overflow: hidden;
+    }
+    .header {
+      width: 100%;
+      background-color: rgba(0, 0, 0, 0.7);
+      padding: 10px 0;
+      text-align: center;
+      position: fixed;
+      top: 0;
+      z-index: 100;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 20px;
+      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
+    }
+    .header div {
+      color: white;
+      font-size: 18px;
+      font-weight: bold;
+    }
+    .game-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      padding-top: 70px; /* Space for the header */
+    }
+    canvas {
+      border: 2px solid #fff;
+      border-radius: 10px;
+      background: #222;
+      max-width: 90%;
+      max-height: 70%;
+      width: auto;
+      height: auto;
+    }
+    .controls {
+      margin-top: 10px;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .controls label {
+      font-size: 16px;
+    }
+    .controls input[type="range"] {
+      width: 150px;
+    }
+    video {
+      display: none;
+    }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <div id="score">Score: 0</div>
+    <div id="timer">Time: 60</div>
+  </div>
+  <div class="game-container">
+    <canvas id="gameCanvas" width="500" height="500"></canvas>
+    <div class="controls">
+      <label for="speedControl">Ball Speed:</label>
+      <input type="range" id="speedControl" min="1" max="10" value="2" step="1">
+    </div>
+  </div>
+  <video id="webcam" autoplay playsinline></video>
+  <script>
+    const canvas = document.getElementById('gameCanvas');
+    const ctx = canvas.getContext('2d');
+    const scoreDisplay = document.getElementById('score');
+    const timerDisplay = document.getElementById('timer');
+    const speedControl = document.getElementById('speedControl');
+    let ball = {
+      x: canvas.width / 2,
+      y: canvas.height / 2,
+      radius: 10,
+      dx: 2,
+      dy: 2,
+      color: 'white',
+    };
+    let paddle = {
+      x: canvas.width / 2 - 50,
+      y: canvas.height - 20,
+      width: 100,
+      height: 10,
+      color: 'white',
+    };
+    let score = 0;
+    let timeLeft = 60;
+    // Update ball speed based on slider
+    speedControl.addEventListener('input', () => {
+      const speed = parseInt(speedControl.value);
+      ball.dx = Math.sign(ball.dx) * speed;
+      ball.dy = Math.sign(ball.dy) * speed;
+    });
+    // Draw ball
+    function drawBall() {
+      ctx.beginPath();
+      ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
+      ctx.fillStyle = ball.color;
+      ctx.fill();
+      ctx.closePath();
+    }
+    // Draw paddle
+    function drawPaddle() {
+      ctx.fillStyle = paddle.color;
+      ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);
+    }
+    // Update ball position
+    function updateBall() {
+      ball.x += ball.dx;
+      ball.y += ball.dy;
+      // Bounce off walls
+      if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
+        ball.dx = -ball.dx;
+      }
+      if (ball.y - ball.radius < 0) {
+        ball.dy = -ball.dy;
+      }
+      // Bounce off paddle
+      if (
+        ball.y + ball.radius > paddle.y &&
+        ball.x > paddle.x &&
+        ball.x < paddle.x + paddle.width
+      ) {
+        ball.dy = -ball.dy;
+        score++;
+      }
+      // Reset if ball hits the bottom
+      if (ball.y + ball.radius > canvas.height) {
+        score = 0;
+        ball.x = canvas.width / 2;
+        ball.y = canvas.height / 2;
+        ball.dx = Math.sign(ball.dx) * parseInt(speedControl.value);
+        ball.dy = Math.sign(ball.dy) * parseInt(speedControl.value);
+      }
+      scoreDisplay.textContent = `Score: ${score}`;
+    }
+    // Timer
+    function startTimer() {
+      const timerInterval = setInterval(() => {
+        if (timeLeft > 0) {
+          timeLeft--;
+          timerDisplay.textContent = `Time: ${timeLeft}`;
+        } else {
+          clearInterval(timerInterval);
+          alert(`Game Over! Your score is ${score}`);
+          document.location.reload();
+        }
+      }, 1000);
+    }
+    // Game loop
+    function gameLoop() {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      drawBall();
+      drawPaddle();
+      updateBall();
+      requestAnimationFrame(gameLoop);
+    }
+    // MediaPipe Hands setup
+    const hands = new Hands({
+      locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`,
+    });
+    hands.setOptions({
+      maxNumHands: 1,
+      modelComplexity: 1,
+      minDetectionConfidence: 0.7,
+      minTrackingConfidence: 0.7,
+    });
+    const videoElement = document.getElementById('webcam');
+    const camera = new Camera(videoElement, {
+      onFrame: async () => {
+        await hands.send({ image: videoElement });
+      },
+      width: 640,
+      height: 480,
+    });
+    camera.start();
+    hands.onResults((results) => {
+      if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
+        const landmarks = results.multiHandLandmarks[0];
+        const indexFinger = landmarks[8]; // Index finger tip
+        // Map index finger x-coordinate to paddle position
+        paddle.x = indexFinger.x * canvas.width - paddle.width / 2;
+        // Ensure paddle stays within canvas bounds
+        if (paddle.x < 0) paddle.x = 0;
+        if (paddle.x + paddle.width > canvas.width) paddle.x = canvas.width - paddle.width;
+      }
+    });
+    startTimer();
+    gameLoop();
+  </script>
+</body>
+</html>

index - Copy.html ADDED Viewed

	@@ -0,0 +1,153 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DeepSeek-Inspired Page</title>
+    <style>
+        /* Background Gradient Animation */
+        body {
+            font-family: Arial, sans-serif;
+            background: linear-gradient(135deg, #e0f2ff, #ffffff);
+            background-size: 200% 200%;
+            animation: bgAnimation 10s infinite alternate ease-in-out;
+            color: black;
+            margin: 0;
+            padding: 0;
+            text-align: center;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+        }
+        @keyframes bgAnimation {
+            0% { background-position: 0% 50%; }
+            100% { background-position: 100% 50%; }
+        }
+        /* Header Bar */
+        .header {
+            width: 100%;
+            padding: 10px 0;
+            text-align: center;
+            background: rgba(255, 255, 255, 0.3);
+            backdrop-filter: blur(10px);
+            position: fixed;
+            top: 0;
+            left: 0;
+            z-index: 1000;
+        }
+        .header p {
+            font-size: 14px;
+            color: #333;
+        }
+        /* DeepSeek Title */
+        h1 {
+            font-size: 50px;
+            font-weight: bold;
+            color: #187bff;
+            margin-bottom: 10px;
+            font-family: sans-serif;
+            text-transform: lowercase;
+        }
+        /* Subtitle */
+        p {
+            font-size: 22px;
+            color: #333;
+            margin-bottom: 40px;
+        }
+        /* Card Grid */
+        .grid-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 20px;
+            width: 90%;
+            max-width: 1000px;
+            margin-top: 20px;
+        }
+        /* Glassmorphism Cards */
+        .card {
+            background: rgba(255, 255, 255, 0.3);
+            padding: 20px;
+            border-radius: 15px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+            backdrop-filter: blur(10px);
+            cursor: pointer;
+            transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
+            text-align: left;
+        }
+        .card:hover {
+            background: rgba(255, 255, 255, 0.5);
+            transform: scale(1.05);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+        }
+        /* Card Titles */
+        .card h2 {
+            color: #187bff;
+            font-size: 18px;
+            margin-bottom: 10px;
+        }
+        /* Mobile Responsive */
+        @media (max-width: 768px) {
+            .grid-container {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+        @media (max-width: 500px) {
+            .grid-container {
+                grid-template-columns: repeat(1, 1fr);
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Header Notification -->
+    <div class="header">
+        <p>🔔 DeepSeek-R1 is now live! Open-source AI rivaling OpenAI's Model 01.</p>
+    </div>
+    <h1>deepseek</h1>
+    <p>Into the unknown</p>
+    <!-- Cards Grid Section -->
+    <div class="grid-container">
+        <div class="card">
+            <h2>Start Now</h2>
+            <p>Free access to DeepSeek-V3. Experience the intelligent model.</p>
+        </div>
+        <div class="card">
+            <h2>Get DeepSeek App</h2>
+            <p>Chat on the go with DeepSeek-V3. Your free all-in-one AI tool.</p>
+        </div>
+        <div class="card">
+            <h2>AI Research</h2>
+            <p>Explore the latest advancements in AI and deep learning.</p>
+        </div>
+        <div class="card">
+            <h2>API Access</h2>
+            <p>Integrate DeepSeek AI into your own applications with our API.</p>
+        </div>
+        <div class="card">
+            <h2>Community</h2>
+            <p>Join a growing community of AI enthusiasts and developers.</p>
+        </div>
+        <div class="card">
+            <h2>Documentation</h2>
+            <p>Learn how to use DeepSeek effectively with our guides.</p>
+        </div>
+    </div>
+</body>
+</html>

media-pipe-pong.html ADDED Viewed

	@@ -0,0 +1,84 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MediaPipe Line Pong</title>
+    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/hand-pose-detection"></script>
+    <style>
+        body {
+            text-align: center;
+            font-family: Arial, sans-serif;
+            background-color: black;
+            color: white;
+        }
+        canvas {
+            background: #222;
+            display: block;
+            margin: auto;
+        }
+    </style>
+</head>
+<body>
+    <h1>🏓 MediaPipe Line Pong</h1>
+    <p>Move your hand to control the paddle!</p>
+    <canvas id="pongCanvas" width="800" height="400"></canvas>
+    <script>
+        const canvas = document.getElementById('pongCanvas');
+        const ctx = canvas.getContext('2d');
+        let paddleX = canvas.width / 2 - 50;
+        const paddleWidth = 100;
+        const paddleHeight = 10;
+        function drawPaddle() {
+            ctx.fillStyle = "white";
+            ctx.fillRect(paddleX, canvas.height - 20, paddleWidth, paddleHeight);
+        }
+        async function loadHandTracking() {
+            const model = await handPoseDetection.createDetector(
+                handPoseDetection.SupportedModels.MediaPipeHands,
+                { runtime: 'mediapipe', modelType: 'full' }
+            );
+            async function trackHand() {
+                const video = document.createElement("video");
+                video.autoplay = true;
+                const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+                video.srcObject = stream;
+                async function detect() {
+                    const hands = await model.estimateHands(video);
+                    if (hands.length > 0) {
+                        const x = hands[0].keypoints[8].x;
+                        paddleX = (x / video.videoWidth) * canvas.width - paddleWidth / 2;
+                    }
+                    requestAnimationFrame(detect);
+                }
+                detect();
+            }
+            trackHand();
+        }
+        function gameLoop() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            drawPaddle();
+            requestAnimationFrame(gameLoop);
+        }
+        gameLoop();
+        loadHandTracking();
+    </script>
+</body>
+</html>

mk.html ADDED Viewed

	@@ -0,0 +1,243 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Flappy Bird with Hand Tracking</title>
+  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js"></script>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: Arial, sans-serif;
+      background: linear-gradient(135deg, #74ebd5, #acb6e5);
+      color: white;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      overflow: hidden;
+    }
+    .header {
+      width: 100%;
+      background-color: rgba(0, 0, 0, 0.7);
+      padding: 10px 0;
+      text-align: center;
+      position: fixed;
+      top: 0;
+      z-index: 100;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 20px;
+      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
+    }
+    .header div {
+      color: white;
+      font-size: 18px;
+      font-weight: bold;
+    }
+    .game-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      padding-top: 70px; /* Space for the header */
+    }
+    canvas {
+      border: 2px solid #fff;
+      border-radius: 10px;
+      background: #222;
+      max-width: 90%;
+      max-height: 70%;
+      width: auto;
+      height: auto;
+    }
+    video {
+      display: none;
+    }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <div id="score">Score: 0</div>
+    <div id="timer">Time: 60</div>
+  </div>
+  <div class="game-container">
+    <canvas id="gameCanvas" width="500" height="500"></canvas>
+  </div>
+  <video id="webcam" autoplay playsinline></video>
+  <script>
+    const canvas = document.getElementById('gameCanvas');
+    const ctx = canvas.getContext('2d');
+    const scoreDisplay = document.getElementById('score');
+    const timerDisplay = document.getElementById('timer');
+    let bird = {
+      x: 50,
+      y: canvas.height / 2,
+      radius: 15,
+      dy: 0,
+      gravity: 0.6,
+      lift: -10,
+      color: 'yellow',
+    };
+    let pipes = [];
+    let score = 0;
+    let timeLeft = 60;
+    let gameOver = false;
+    // Draw bird
+    function drawBird() {
+      ctx.beginPath();
+      ctx.arc(bird.x, bird.y, bird.radius, 0, Math.PI * 2);
+      ctx.fillStyle = bird.color;
+      ctx.fill();
+      ctx.closePath();
+    }
+    // Draw pipes
+    function drawPipes() {
+      ctx.fillStyle = 'green';
+      pipes.forEach(pipe => {
+        ctx.fillRect(pipe.x, 0, pipe.width, pipe.top);
+        ctx.fillRect(pipe.x, canvas.height - pipe.bottom, pipe.width, pipe.bottom);
+      });
+    }
+    // Update bird position
+    function updateBird() {
+      bird.dy += bird.gravity;
+      bird.y += bird.dy;
+      // Keep bird within canvas bounds
+      if (bird.y + bird.radius > canvas.height) {
+        bird.y = canvas.height - bird.radius;
+        bird.dy = 0;
+      }
+      if (bird.y - bird.radius < 0) {
+        bird.y = bird.radius;
+        bird.dy = 0;
+      }
+    }
+    // Update pipes
+    function updatePipes() {
+      if (pipes.length === 0 || pipes[pipes.length - 1].x < canvas.width - 200) {
+        const gap = 100;
+        const top = Math.random() * (canvas.height - gap - 100) + 50;
+        const bottom = canvas.height - top - gap;
+        pipes.push({ x: canvas.width, width: 50, top, bottom });
+      }
+      pipes.forEach(pipe => {
+        pipe.x -= 2;
+        // Check for collision
+        if (
+          bird.x + bird.radius > pipe.x &&
+          bird.x - bird.radius < pipe.x + pipe.width &&
+          (bird.y - bird.radius < pipe.top || bird.y + bird.radius > canvas.height - pipe.bottom)
+        ) {
+          gameOver = true;
+        }
+        // Increase score if bird passes a pipe
+        if (pipe.x + pipe.width < bird.x - bird.radius && !pipe.passed) {
+          score++;
+          pipe.passed = true;
+        }
+      });
+      // Remove off-screen pipes
+      pipes = pipes.filter(pipe => pipe.x + pipe.width > 0);
+    }
+    // Timer
+    function startTimer() {
+      const timerInterval = setInterval(() => {
+        if (timeLeft > 0 && !gameOver) {
+          timeLeft--;
+          timerDisplay.textContent = `Time: ${timeLeft}`;
+        } else {
+          clearInterval(timerInterval);
+          if (gameOver) {
+            alert(`Game Over! Your score is ${score}`);
+          } else {
+            alert(`Time's up! Your score is ${score}`);
+          }
+          document.location.reload();
+        }
+      }, 1000);
+    }
+    // Game loop
+    function gameLoop() {
+      if (gameOver) return;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      drawBird();
+      drawPipes();
+      updateBird();
+      updatePipes();
+      scoreDisplay.textContent = `Score: ${score}`;
+      requestAnimationFrame(gameLoop);
+    }
+    // MediaPipe Hands setup
+    const hands = new Hands({
+      locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`,
+    });
+    hands.setOptions({
+      maxNumHands: 1,
+      modelComplexity: 1,
+      minDetectionConfidence: 0.7,
+      minTrackingConfidence: 0.7,
+    });
+    const videoElement = document.getElementById('webcam');
+    const camera = new Camera(videoElement, {
+      onFrame: async () => {
+        await hands.send({ image: videoElement });
+      },
+      width: 640,
+      height: 480,
+    });
+    camera.start();
+    hands.onResults((results) => {
+      if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
+        const landmarks = results.multiHandLandmarks[0];
+        const indexFinger = landmarks[8]; // Index finger tip
+        // Map index finger y-coordinate to bird's lift
+        if (indexFinger.y * canvas.height < bird.y) {
+          bird.dy = bird.lift;
+        }
+      }
+    });
+    startTimer();
+    gameLoop();
+  </script>
+</body>
+</html>