Spaces:

samirerty
/

anycoder-f95a4a78

Running

App Files Files Community

samirerty commited on Feb 7

Commit

93ea218

verified ·

1 Parent(s): 73fdb4f

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +575 -570

index.html CHANGED Viewed

@@ -1,597 +1,602 @@
 <!DOCTYPE html>
 <html lang="fa" dir="rtl">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>بازی حافظه سکسی (Sexi Memory)</title>
-  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
-  <style>
-    :root {
-      --primary-color: #ff0040; /* Hot Pink/Red */
-      --secondary-color: #2a0a15; /* Dark Red/Burgundy */
-      --accent-color: #ff6b81;
-      --bg-gradient: linear-gradient(135deg, #000000, #2a0a15, #4a1220);
-      --card-bg: #1a0510;
-      --text-color: #ffffff;
-      --glow: 0 0 20px rgba(255, 0, 64, 0.7);
-      --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    }
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-      font-family: var(--font-main);
-    }
-    body {
-      background: var(--bg-gradient);
-      color: var(--text-color);
-      min-height: 100vh;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      overflow-x: hidden;
-      background-attachment: fixed;
-    }
-    /* Background Animation Effect */
-    body::before {
-      content: '';
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-image: radial-gradient(var(--primary-color) 1px, transparent 1px);
-      background-size: 30px 30px;
-      opacity: 0.05;
-      z-index: -1;
-    }
-    /* Header Section */
-    header {
-      text-align: center;
-      margin-bottom: 30px;
-      animation: fadeInDown 1s ease;
-      position: relative;
-    }
-    h1 {
-      font-size: 4.5rem;
-      font-weight: 900;
-      text-transform: uppercase;
-      letter-spacing: 5px;
-      color: var(--primary-color);
-      text-shadow: var(--glow);
-      margin-bottom: 10px;
-      text-transform: uppercase;
-    }
-    h1 i {
-      animation: pulse 2s infinite;
-    }
-    .subtitle {
-      font-size: 1.2rem;
-      color: var(--accent-color);
-      letter-spacing: 2px;
-      text-transform: uppercase;
-    }
-    /* Score Board */
-    .scoreboard {
-      display: flex;
-      gap: 40px;
-      margin-bottom: 30px;
-      background: rgba(0, 0, 0, 0.6);
-      padding: 20px 50px;
-      border-radius: 60px;
-      backdrop-filter: blur(10px);
-      border: 2px solid var(--primary-color);
-      box-shadow: var(--glow);
-      transition: transform 0.3s ease;
-    }
-    .scoreboard:hover {
-      transform: scale(1.05);
-    }
-    .player-score {
-      text-align: center;
-      min-width: 120px;
-    }
-    .player-name {
-      font-size: 1.3rem;
-      font-weight: bold;
-      color: var(--primary-color);
-      text-transform: uppercase;
-      margin-bottom: 5px;
-    }
-    .active-player {
-      color: #fff !important;
-      text-shadow: 0 0 10px var(--primary-color);
-    }
-    .score-value {
-      font-size: 3rem;
-      font-weight: 800;
-      line-height: 1;
-      color: #fff;
-    }
-    /* Game Grid */
-    .game-container {
-      perspective: 1000px;
-      margin-bottom: 30px;
-      padding: 20px;
-      background: rgba(255, 0, 64, 0.05);
-      border-radius: 20px;
-      border: 1px solid rgba(255, 0, 64, 0.2);
-    }
-    .grid {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      gap: 15px;
-      width: 95%;
-      max-width: 700px;
-      margin: 0 auto;
-    }
-    /* Card Styles */
-    .card {
-      width: 100%;
-      aspect-ratio: 3/4; /* Portrait aspect ratio */
-      position: relative;
-      cursor: pointer;
-      transform-style: preserve-3d;
-      transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-      border-radius: 10px;
-    }
-    .card.flipped {
-      transform: rotateY(180deg);
-    }
-    .card.matched {
-      animation: pulse 1.5s infinite alternate;
-      box-shadow: 0 0 20px var(--primary-color);
-    }
-    .card-face {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      backface-visibility: hidden;
-      border-radius: 10px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
-      border: 2px solid var(--primary-color);
-    }
-    .card-front {
-      background: var(--secondary-color);
-      background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ff0040' fill-opacity='0.3' fill-rule='evenodd'%3E%3Cpath d='M10 0l2.5 7.5L20 10l-7.5 2.5L10 20l-2.5-7.5L0 10l7.5-2.5L10 0z'/%3E%3C/g%3E%3C/svg%3E");
-      transform: rotateY(0deg);
-    }
-    .card-front i {
-      font-size: 3rem;
-      color: rgba(255, 0, 64, 0.8);
-      transition: transform 0.5s;
-    }
-    .card:hover .card-front i {
-      transform: scale(1.2) rotate(10deg);
-    }
-    .card-back {
-      background: #fff;
-      transform: rotateY(180deg);
-      padding: 5px;
-    }
-    .card-back img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      border-radius: 6px;
-      box-shadow: 0 0 15px rgba(255, 0, 64, 0.6);
-    }
-    /* Controls */
-    .controls {
-      display: flex;
-      gap: 20px;
-      margin-top: 20px;
-    }
-    button {
-      padding: 15px 40px;
-      font-size: 1.2rem;
-      border: 2px solid var(--primary-color);
-      border-radius: 50px;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      font-weight: bold;
-      text-transform: uppercase;
-      letter-spacing: 2px;
-      outline: none;
-      background: transparent;
-      color: var(--primary-color);
-      position: relative;
-      overflow: hidden;
-    }
-    button:hover {
-      background: var(--primary-color);
-      color: white;
-      box-shadow: var(--glow);
-      transform: translateY(-3px) scale(1.05);
-    }
-    button:active {
-      transform: translateY(1px);
-    }
-    /* Modal */
-    .modal {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.9);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 100;
-      opacity: 0;
-      pointer-events: none;
-      transition: opacity 0.5s ease;
-      backdrop-filter: blur(5px);
-    }
-    .modal.active {
-      opacity: 1;
-      pointer-events: all;
-    }
-    .modal-content {
-      background: #fff;
-      color: #333;
-      padding: 50px;
-      border-radius: 20px;
-      text-align: center;
-      max-width: 500px;
-      width: 90%;
-      box-shadow: 0 0 50px var(--primary-color);
-      animation: zoomIn 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
-      border-top: 5px solid var(--primary-color);
-    }
-    .winner-text {
-      font-size: 3rem;
-      color: var(--secondary-color);
-      margin-bottom: 20px;
-      font-weight: 900;
-    }
-    .final-score {
-      font-size: 1.5rem;
-      margin-bottom: 30px;
-      color: #555;
-      line-height: 1.6;
-    }
-    .winner-badge {
-      font-size: 4rem;
-      margin-bottom: 20px;
-      display: block;
-    }
-    /* Animations */
-    @keyframes fadeInDown {
-      from { opacity: 0; transform: translateY(-30px); }
-      to { opacity: 1; transform: translateY(0); }
-    }
-    @keyframes pulse {
-      from { box-shadow: 0 0 10px var(--primary-color); transform: rotateY(180deg) scale(1); }
-      to { box-shadow: 0 0 30px var(--accent-color); transform: rotateY(180deg) scale(1.05); }
-    }
-    @keyframes zoomIn {
-      from { opacity: 0; transform: scale(0.5) translateY(50px); }
-      to { opacity: 1; transform: scale(1) translateY(0); }
-    }
-    /* Responsive */
-    @media (max-width: 600px) {
-      .grid {
-        grid-template-columns: repeat(4, 1fr);
-        gap: 10px;
-      }
-      .card {
-        aspect-ratio: 1/1; /* Square on mobile */
-      }
-      h1 { font-size: 2.5rem; }
-      .scoreboard { padding: 10px 20px; gap: 20px; width: 90%; }
-      .score-value { font-size: 2rem; }
-      .player-name { font-size: 1rem; }
-      .modal-content { padding: 30px; }
-      .winner-text { font-size: 2rem; }
-    }
-  </style>
-</head>
-<body>
-  <header>
-    <h1><i class="fas fa-heart"></i> سکسی <i class="fas fa-fire"></i></h1>
-    <div class="subtitle">بازی حافظه و هیجان</div>
-  </header>
-  <div class="scoreboard">
-    <div class="player-score" id="p1-box">
-      <div class="player-name active-player" id="name-p1">بازیکن ۱</div>
-      <div class="score-value" id="score-p1">0</div>
-    </div>
-    <div class="player-score" id="p2-box">
-      <div class="player-name" id="name-p2">بازیکن ۲</div>
-      <div class="score-value" id="score-p2">0</div>
-    </div>
-  </div>
-  <div class="game-container">
-    <div class="grid" id="game-grid">
-      <!-- Cards will be generated here -->
-    </div>
-  </div>
-  <div class="controls">
-    <button class="btn-restart" onclick="resetGame()">
-      <i class="fas fa-redo"></i> شروع مجدد بازی
-    </button>
-  </div>
-  <!-- Winner Modal -->
-  <div class="modal" id="winnerModal">
-    <div class="modal-content">
-      <span class="winner-badge" id="winnerBadge">🏆</span>
-      <div class="winner-text" id="winnerText">بازیکن ۱ برنده شد!</div>
-      <div class="final-score" id="finalScoreText">
-        <p>امتیاز بازیکن ۱: <span id="finalScoreP1">0</span></p>
-        <p>امتیاز بازیکن ۲: <span id="finalScoreP2">0</span></p>
-      </div>
-      <button class="btn-restart" onclick="resetGame()">بازی بعدی</button>
-    </div>
-  </div>
-  <script>
-    // Game Configuration
-    // Note: Using safe, high-quality fashion/beach stock images to represent the theme
-    // In a real production app, you would host these locally or use licensed assets.
-    const cardImages = [
-      'https://picsum.photos/id/237/300/400', // Fashion model 1
-      'https://picsum.photos/id/238/300/400', // Fashion model 2
-      'https://picsum.photos/id/239/300/400', // Fashion model 3
-      'https://picsum.photos/id/240/300/400', // Fashion model 4
-      'https://picsum.photos/id/241/300/400', // Fashion model 5
-      'https://picsum.photos/id/242/300/400', // Fashion model 6
-      'https://picsum.photos/id/243/300/400', // Fashion model 7
-      'https://picsum.photos/id/244/300/400'  // Fashion model 8
-    ];
-    // Duplicate images to create pairs
-    let finalIcons = [...cardImages, ...cardImages];
-    let cards = [];
-    let flippedCards = [];
-    let matchedPairs = 0;
-    let currentPlayer = 1;
-    let scores = { 1: 0, 2: 0 };
-    let isProcessing = false;
-    const gridElement = document.getElementById('game-grid');
-    const scoreP1Element = document.getElementById('score-p1');
-    const scoreP2Element = document.getElementById('score-p2');
-    const modalElement = document.getElementById('winnerModal');
-    const winnerTextElement = document.getElementById('winnerText');
-    const finalScoreTextElement = document.getElementById('finalScoreText');
-    const finalScoreP1 = document.getElementById('finalScoreP1');
-    const finalScoreP2 = document.getElementById('finalScoreP2');
-    const p1Box = document.getElementById('p1-box');
-    const p2Box = document.getElementById('p2-box');
-    const nameP1 = document.getElementById('name-p1');
-    const nameP2 = document.getElementById('name-p2');
-    // Initialize Game
-    function initGame() {
-        // Reset State
-        flippedCards = [];
-        matchedPairs = 0;
-        currentPlayer = 1;
-        scores = { 1: 0, 2: 0 };
-        isProcessing = false;
-        updateScoreboard();
-        modalElement.classList.remove('active');
-        updateActivePlayerUI();
-        // Shuffle Cards
-        const shuffledIcons = [...finalIcons].sort(() => Math.random() - 0.5);
-        // Clear Grid
-        gridElement.innerHTML = '';
-        // Create Cards
-        shuffledIcons.forEach((imgSrc, index) => {
-            const card = document.createElement('div');
-            card.classList.add('card');
-            card.dataset.index = index;
-            const frontFace = document.createElement('div');
-            frontFace.classList.add('card-face', 'card-front');
-            frontFace.innerHTML = '<i class="fas fa-fire"></i>'; // Design for back of card
-            const backFace = document.createElement('div');
-            backFace.classList.add('card-face', 'card-back');
-            const img = document.createElement('img');
-            img.src = imgSrc;
-            img.alt = "Card Image";
-            img.loading = "lazy"; // Performance optimization
-            backFace.appendChild(img);
-            card.appendChild(frontFace);
-            card.appendChild(backFace);
-            card.addEventListener('click', () => flipCard(card));
-            gridElement.appendChild(card);
-        });
-    }
-    function flipCard(card) {
-        // Validation: Don't flip if already processing, already flipped, or matched
-        if (isProcessing || card.classList.contains('flipped') || card.classList.contains('matched')) {
-            return;
         }
-        card.classList.add('flipped');
-        flippedCards.push(card);
-        if (flippedCards.length === 2) {
-            checkForMatch();
         }
-    }
-    function checkForMatch() {
-        isProcessing = true;
-        const [card1, card2] = flippedCards;
-        if (card1.querySelector('img').src === card2.querySelector('img').src) {
-            // Match Found
-            handleMatch(card1, card2);
-        } else {
-            // No Match
-            setTimeout(() => {
-                card1.classList.remove('flipped');
-                card2.classList.remove('flipped');
-                flippedCards = [];
-                isProcessing = false;
-                switchPlayer();
-            }, 1200); // Slightly longer delay for visual clarity
         }
-    }
-    function handleMatch(card1, card2) {
-        // Increment Score
-        scores[currentPlayer]++;
-        updateScoreboard();
-        // Visual Feedback
-        card1.classList.add('matched');
-        card2.classList.add('matched');
-        flippedCards = [];
-        matchedPairs++;
-        isProcessing = false;
-        // Check for Game Over
-        if (matchedPairs === finalIcons.length / 2) {
-            setTimeout(showGameOver, 800);
-        }
-    }
-    function switchPlayer() {
-        currentPlayer = currentPlayer === 1 ? 2 : 1;
-        updateActivePlayerUI();
-    }
-    function updateActivePlayerUI() {
-        if (currentPlayer === 1) {
-            p1Box.style.borderColor = 'var(--primary-color)';
-            p1Box.style.boxShadow = 'var(--glow)';
-            p1Box.style.background = 'rgba(255, 0, 64, 0.1)';
-            p2Box.style.borderColor = 'rgba(255,255,255,0.2)';
-            p2Box.style.boxShadow = 'none';
-            p2Box.style.background = 'rgba(0,0,0,0.6)';
-            nameP1.classList.add('active-player');
-            nameP2.classList.remove('active-player');
-        } else {
-            p2Box.style.borderColor = 'var(--primary-color)';
-            p2Box.style.boxShadow = 'var(--glow)';
-            p2Box.style.background = 'rgba(255, 0, 64, 0.1)';
-            p1Box.style.borderColor = 'rgba(255,255,255,0.2)';
-            p1Box.style.boxShadow = 'none';
-            p1Box.style.background = 'rgba(0,0,0,0.6)';
-            nameP2.classList.add('active-player');
-            nameP1.classList.remove('active-player');
         }
-    }
-    function updateScoreboard() {
-        scoreP1Element.innerText = scores[1];
-        scoreP2Element.innerText = scores[2];
-    }
-    function showGameOver() {
-        let winner = '';
-        let winnerBadge = '';
-        if (scores[1] > scores[2]) {
-            winner = 'بازیکن ۱ برنده شد! 🌹';
-            winnerBadge = '👑';
-        } else if (scores[2] > scores[1]) {
-            winner = 'بازیکن ۲ برنده شد! 💋';
-            winnerBadge = '👑';
-        } else {
-            winner = 'متساوی شدید! 🤝';
-            winnerBadge = '🤝';
-            finalScoreTextElement.innerHTML = `<p>امتیاز نهایی: ${scores[1]}</p>`;
-        }
-        finalScoreP1.innerText = scores[1];
-        finalScoreP2.innerText = scores[2];
-        winnerTextElement.innerText = winner;
-        document.getElementById('winnerBadge').innerText = winnerBadge;
-        modalElement.classList.add('active');
-        // Reset UI for next game
-        setTimeout(() => {
-            p1Box.style = '';
-            p2Box.style = '';
-            nameP1.classList.remove('active-player');
-            nameP2.classList.remove('active-player');
-        }, 100);
-    }
-    function resetGame() {
-        initGame();
-    }
-    // Start the game on load
-    window.onload = initGame;
-  </script>
-</body>
 </html>

 <!DOCTYPE html>
 <html lang="fa" dir="rtl">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>بازی ماشینی سرعتی (Top Down)</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700;900&display=swap');
+        :root {
+            --primary-color: #00f2ff;
+            --accent-color: #ff0055;
+            --road-color: #2a2a2a;
+            --grass-color: #1a4a1a;
+            --ui-bg: rgba(0, 0, 0, 0.85);
+        }
+        * {
+            box-sizing: border-box;
+            user-select: none;
+            -webkit-tap-highlight-color: transparent;
+        }
+        body {
+            margin: 0;
+            padding: 0;
+            background-color: #0f0f0f;
+            color: white;
+            font-family: 'Vazirmatn', sans-serif;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+        }
+        /* Header & Credit */
+        header {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            padding: 15px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            z-index: 100;
+            pointer-events: none;
+        }
+        .game-title {
+            font-size: 1.5rem;
+            font-weight: 900;
+            text-transform: uppercase;
+            color: var(--primary-color);
+            text-shadow: 0 0 10px var(--primary-color);
+        }
+        .credit-link {
+            pointer-events: auto;
+            font-size: 0.8rem;
+            color: #aaa;
+            text-decoration: none;
+            background: rgba(255,255,255,0.1);
+            padding: 5px 10px;
+            border-radius: 15px;
+            transition: all 0.3s ease;
+        }
+        .credit-link:hover {
+            background: var(--primary-color);
+            color: #000;
+            box-shadow: 0 0 15px var(--primary-color);
+        }
+        /* Game Container */
+        #game-container {
+            position: relative;
+            width: 100%;
+            max-width: 450px;
+            height: 100vh;
+            max-height: 800px;
+            background-color: var(--road-color);
+            overflow: hidden;
+            box-shadow: 0 0 50px rgba(0,0,0,0.5);
+            border-left: 5px solid #111;
+            border-right: 5px solid #111;
+        }
+        /* Road Markings */
+        .road-line {
+            position: absolute;
+            width: 10px;
+            height: 100px;
+            background: rgba(255, 255, 255, 0.5);
+            left: 50%;
+            transform: translateX(-50%);
+            animation: moveRoad 1s linear infinite;
+        }
+        @keyframes moveRoad {
+            0% { top: -100px; }
+            100% { top: 100%; }
+        }
+        /* Player Car */
+        #player-car {
+            position: absolute;
+            bottom: 100px;
+            left: 50%;
+            width: 50px;
+            height: 90px;
+            background: linear-gradient(180deg, #ffcc00, #ff9900);
+            border-radius: 10px;
+            box-shadow: 0 10px 20px rgba(0,0,0,0.5);
+            z-index: 10;
+            transition: left 0.1s ease-out;
+            transform: translateX(-50%);
+        }
+        /* Car Details (Windshield, Lights) */
+        #player-car::before {
+            content: '';
+            position: absolute;
+            top: 20%;
+            left: 10%;
+            width: 80%;
+            height: 20%;
+            background: #333;
+            border-radius: 2px;
+        }
+        #player-car::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 5%;
+            width: 90%;
+            height: 10px;
+            background: #ff3333;
+            box-shadow: 0 0 10px #ff0000;
+            border-radius: 5px 5px 0 0;
+        }
+        /* Enemy Cars */
+        .enemy {
+            position: absolute;
+            width: 50px;
+            height: 90px;
+            border-radius: 10px;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
+            z-index: 9;
+            top: -100px;
+        }
+        .enemy::before {
+            content: '';
+            position: absolute;
+            bottom: 20%;
+            left: 10%;
+            width: 80%;
+            height: 20%;
+            background: #222;
+            border-radius: 2px;
+        }
+        /* UI Overlays */
+        .overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: var(--ui-bg);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            z-index: 50;
+            backdrop-filter: blur(5px);
+            transition: opacity 0.3s;
+        }
+        .hidden {
+            opacity: 0;
+            pointer-events: none;
+        }
+        h1 {
+            font-size: 3rem;
+            margin-bottom: 10px;
+            color: var(--primary-color);
+            text-shadow: 2px 2px 0px var(--accent-color);
+            text-align: center;
+        }
+        p {
+            font-size: 1.2rem;
+            margin-bottom: 30px;
+            color: #ddd;
+            text-align: center;
+            max-width: 80%;
+        }
+        .btn {
+            background: var(--accent-color);
+            color: white;
+            padding: 15px 40px;
+            font-size: 1.5rem;
+            font-family: 'Vazirmatn', sans-serif;
+            border: none;
+            border-radius: 50px;
+            cursor: pointer;
+            box-shadow: 0 0 20px var(--accent-color);
+            transition: transform 0.2s, box-shadow 0.2s;
+            font-weight: 700;
+        }
+        .btn:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 30px var(--accent-color);
+        }
+        .btn:active {
+            transform: scale(0.95);
+        }
+        /* HUD (Heads Up Display) */
+        #hud {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            right: 20px;
+            display: flex;
+            justify-content: space-between;
+            pointer-events: none;
+            z-index: 20;
+        }
+        .stat-box {
+            background: rgba(0,0,0,0.6);
+            padding: 10px 20px;
+            border-radius: 20px;
+            border: 1px solid rgba(255,255,255,0.2);
+            font-size: 1.5rem;
+            font-weight: bold;
+            color: white;
         }
+        #score-display span, #speed-display span {
+            color: var(--primary-color);
+        }
+        /* Mobile Controls */
+        #mobile-controls {
+            position: absolute;
+            bottom: 20px;
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            padding: 0 20px;
+            z-index: 40;
+            pointer-events: none; /* Let clicks pass through empty space */
         }
+        .control-btn {
+            width: 80px;
+            height: 80px;
+            background: rgba(255, 255, 255, 0.15);
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 2rem;
+            color: white;
+            pointer-events: auto;
+            transition: background 0.2s;
+            touch-action: manipulation;
+        }
+        .control-btn:active {
+            background: rgba(255, 255, 255, 0.4);
         }
+        .control-btn.left:active { border-color: var(--primary-color); }
+        .control-btn.right:active { border-color: var(--primary-color); }
+        /* Responsive adjustments */
+        @media (min-width: 768px) {
+            #mobile-controls { display: none; } /* Hide touch controls on desktop */
+            h1 { font-size: 4rem; }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="game-title">بازی ماشینی 🏎️</div>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="credit-link">Built with anycoder</a>
+    </header>
+    <div id="game-container">
+        <!-- Road Lines Animation -->
+        <div class="road-line" style="animation-delay: 0s;"></div>
+        <div class="road-line" style="animation-delay: 0.5s;"></div>
+        <!-- HUD -->
+        <div id="hud">
+            <div class="stat-box" id="score-display">امتیاز: <span id="score">0</span></div>
+            <div class="stat-box" id="speed-display">سرعت: <span id="speed">100</span> کیلومتر</div>
+        </div>
+        <!-- Player Car -->
+        <div id="player-car"></div>
+        <!-- Start Screen -->
+        <div id="start-screen" class="overlay">
+            <h1>تک سواست</h1>
+            <p>از موانع عبور کنید و امتیاز بگیرید.<br>برای حرکت از کلیدهای جهت‌نما یا دکمه‌های صفحه استفاده کنید.</p>
+            <button class="btn" onclick="startGame()">شروع بازی</button>
+        </div>
+        <!-- Game Over Screen -->
+        <div id="game-over-screen" class="overlay hidden">
+            <h1 style="color: var(--accent-color);">تصادف کردید!</h1>
+            <p>امتیاز نهایی شما: <span id="final-score" style="color: var(--primary-color); font-weight: bold;">0</span></p>
+            <button class="btn" onclick="resetGame()">بازی مجدد</button>
+        </div>
+        <!-- Mobile Controls -->
+        <div id="mobile-controls">
+            <div class="control-btn left" id="btn-left">◀</div>
+            <div class="control-btn right" id="btn-right">▶</div>
+        </div>
+    </div>
+    <script>
+        // --- Game Configuration & State ---
+        const gameContainer = document.getElementById('game-container');
+        const playerCar = document.getElementById('player-car');
+        const scoreEl = document.getElementById('score');
+        const finalScoreEl = document.getElementById('final-score');
+        const speedEl = document.getElementById('speed');
+        const startScreen = document.getElementById('start-screen');
+        const gameOverScreen = document.getElementById('game-over-screen');
+        let gameActive = false;
+        let score = 0;
+        let gameSpeed = 5;
+        let lane = 1; // 0: Left, 1: Center, 2: Right (approximate percentages)
+        let playerX = 50; // Percentage
+        let enemies = [];
+        let roadLines = [];
+        let animationId;
+        let spawnInterval;
+        let speedInterval;
+        // Constants
+        const CONTAINER_WIDTH = 450; // Max width in pixels
+        const CAR_WIDTH = 50;
+        const LANE_WIDTH_PERCENT = 33.33;
+        const BASE_SPEED = 5;
+        const MAX_SPEED = 20;
+        // --- Input Handling ---
+        // Keyboard
+        document.addEventListener('keydown', (e) => {
+            if (!gameActive) return;
+            if (e.key === 'ArrowLeft' || e.key === 'a') moveCar(-1);
+            if (e.key === 'ArrowRight' || e.key === 'd') moveCar(1);
+        });
+        // Touch / Mouse for Mobile Controls
+        const btnLeft = document.getElementById('btn-left');
+        const btnRight = document.getElementById('btn-right');
+        const handleInputStart = (direction) => {
+            if (!gameActive) return;
+            moveCar(direction);
+        };
+        // Add touch listeners
+        btnLeft.addEventListener('touchstart', (e) => { e.preventDefault(); handleInputStart(-1); });
+        btnRight.addEventListener('touchstart', (e) => { e.preventDefault(); handleInputStart(1); });
+        // Add mouse listeners for testing on desktop with mouse
+        btnLeft.addEventListener('mousedown', () => handleInputStart(-1));
+        btnRight.addEventListener('mousedown', () => handleInputStart(1));
+        function moveCar(direction) {
+            // Lane logic: 15% (Left), 50% (Center), 85% (Right)
+            if (direction === -1 && playerX > 15) {
+                playerX -= 35;
+            } else if (direction === 1 && playerX < 85) {
+                playerX += 35;
+            }
+            playerCar.style.left = `${playerX}%`;
+        }
+        // --- Game Logic ---
+        function startGame() {
+            startScreen.classList.add('hidden');
+            gameOverScreen.classList.add('hidden');
+            // Reset State
+            gameActive = true;
+            score = 0;
+            gameSpeed = BASE_SPEED;
+            enemies.forEach(enemy => enemy.remove());
+            enemies = [];
+            playerX = 50;
+            playerCar.style.left = '50%';
+            updateHUD();
+            // Start Loops
+            gameLoop();
+            spawnEnemies();
+            increaseSpeed();
+        }
+        function resetGame() {
+            startGame();
         }
+        function gameOver() {
+            gameActive = false;
+            cancelAnimationFrame(animationId);
+            clearInterval(spawnInterval);
+            clearInterval(speedInterval);
+            finalScoreEl.innerText = score;
+            gameOverScreen.classList.remove('hidden');
+            // Simple crash effect
+            playerCar.style.background = 'linear-gradient(180deg, #555, #000)';
+            playerCar.style.transform = 'translateX(-50%) rotate(15deg)';
+        }
+        function spawnEnemies() {
+            spawnInterval = setInterval(() => {
+                if (!gameActive) return;
+                const enemy = document.createElement('div');
+                enemy.classList.add('enemy');
+                // Random Color for enemies
+                const colors = ['#ff0055', '#00f2ff', '#cc00ff', '#00ff66', '#ff9900'];
+                const randomColor = colors[Math.floor(Math.random() * colors.length)];
+                enemy.style.background = `linear-gradient(180deg, ${randomColor}, #000)`;
+                // Random Lane (15, 50, 85)
+                const lanes = [15, 50, 85];
+                const randomLane = lanes[Math.floor(Math.random() * lanes.length)];
+                enemy.style.left = `${randomLane}%`;
+                enemy.style.top = '-100px';
+                // Store data for movement
+                enemy.dataset.speed = gameSpeed * 1.2; // Enemies move slightly faster than road relative to player
+                enemy.dataset.lane = randomLane;
+                gameContainer.appendChild(enemy);
+                enemies.push(enemy);
+            }, 1000 - (score * 0.005)); // Spawn faster as score increases (min 400ms)
+            // Ensure minimum spawn time
+            if (spawnInterval) {
+                // This is a bit tricky with setInterval, so we just let it run or clear/restart
+                // For simplicity in this demo, we'll keep the interval constant or slightly dynamic
+                // Let's just use a timeout recursion for better control
+                spawnEnemyRecursive();
+                clearInterval(spawnInterval);
+            }
+        }
+        function spawnEnemyRecursive() {
+            if (!gameActive) return;
+            const enemy = document.createElement('div');
+            enemy.classList.add('enemy');
+            const colors = ['#ff0055', '#00f2ff', '#cc00ff', '#00ff66', '#ff9900'];
+            const randomColor = colors[Math.floor(Math.random() * colors.length)];
+            enemy.style.background = `linear-gradient(180deg, ${randomColor}, #000)`;
+            const lanes = [15, 50, 85];
+            const randomLane = lanes[Math.floor(Math.random() * lanes.length)];
+            // Prevent spawning on top of another car
+            const tooClose = enemies.some(e => Math.abs(parseInt(e.style.top) - (-100)) < 150 && Math.abs(parseInt(e.style.left) - randomLane) < 5);
+            if (!tooClose) {
+                enemy.style.left = `${randomLane}%`;
+                enemy.style.top = '-100px';
+                enemy.style.zIndex = 9;
+                gameContainer.appendChild(enemy);
+                enemies.push(enemy);
+            }
+            // Difficulty scaling for spawn rate
+            let spawnRate = 1000 - (score * 0.01);
+            if (spawnRate < 400) spawnRate = 400;
+            setTimeout(spawnEnemyRecursive, spawnRate);
+        }
+        function increaseSpeed() {
+            speedInterval = setInterval(() => {
+                if (!gameActive) return;
+                if (gameSpeed < MAX_SPEED) {
+                    gameSpeed += 0.5;
+                    updateHUD();
+                }
+            }, 5000);
+        }
+        function gameLoop() {
+            if (!gameActive) return;
+            // Move Road Lines (Visual effect)
+            const roadLines = document.querySelectorAll('.road-line');
+            roadLines.forEach(line => {
+                let top = parseFloat(getComputedStyle(line).top);
+                if (top > 100) {
+                    line.style.top = '-100px';
+                }
+                line.style.top = `${top + gameSpeed * 2}px`;
+            });
+            // Move Enemies
+            enemies.forEach((enemy, index) => {
+                let currentTop = parseFloat(getComputedStyle(enemy).top);
+                let speed = gameSpeed * 1.5; // Relative speed
+                // Move enemy down
+                let newTop = currentTop + speed;
+                enemy.style.top = `${newTop}px`;
+                // Collision Detection
+                if (checkCollision(playerCar, enemy)) {
+                    gameOver();
+                    return;
+                }
+                // Remove if off screen
+                if (newTop > gameContainer.offsetHeight) {
+                    enemy.remove();
+                    enemies.splice(index, 1);
+                    score += 10;
+                    updateHUD();
+                }
+            });
+            animationId = requestAnimationFrame(gameLoop);
+        }
+        function checkCollision(player, enemy) {
+            const pRect = player.getBoundingClientRect();
+            const eRect = enemy.getBoundingClientRect();
+            // Shrink hitbox slightly for better gameplay feel
+            const padding = 5;
+            return !(
+                pRect.top + padding > eRect.bottom - padding ||
+                pRect.bottom - padding < eRect.top + padding ||
+                pRect.right - padding < eRect.left + padding ||
+                pRect.left + padding > eRect.right - padding
+            );
+        }
+        function updateHUD() {
+            scoreEl.innerText = score;
+            speedEl.innerText = Math.floor(100 + (gameSpeed * 10));
+            // Dynamic color for speed
+            if (gameSpeed > 15) speedEl.style.color = '#ff0055';
+            else if (gameSpeed > 10) speedEl.style.color = '#ffcc00';
+            else speedEl.style.color = '#00f2ff';
+        }
+        // Initialize Road Lines
+        function initRoadLines() {
+            for(let i=0; i<5; i++) {
+                const line = document.createElement('div');
+                line.classList.add('road-line');
+                line.style.top = `${i * 25}%`;
+                gameContainer.appendChild(line);
+                roadLines.push(line);
+            }
+        }
+        initRoadLines();
+    </script>
+</body>
 </html>