Spaces:

madansa7
/

rajagame

Running

App Files Files Community

madansa7 commited on May 11

Commit

5329450

verified ·

1 Parent(s): 3601133

Add 3 files

Browse files

Files changed (3) hide show

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

README.md CHANGED Viewed

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

 ---
+title: rajagame
+emoji: 🐳
 colorFrom: green
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,667 @@
-<!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>Kids Connect The Dots Game</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        body {
+            font-family: 'Comic Sans MS', 'Marker Felt', 'Arial Rounded MT Bold', sans-serif;
+            background-color: #f0f9ff;
+        }
+        .game-container {
+            perspective: 1000px;
+            background-color: white;
+            border-radius: 20px;
+            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
+        }
+        .dot {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            z-index: 1;
+            font-size: 24px;
+            border: 4px solid transparent;
+        }
+        .dot.active {
+            transform: scale(1.1);
+            box-shadow: 0 0 20px rgba(0, 119, 181, 0.5);
+            border-color: white;
+            animation: bounce 0.5s infinite alternate;
+        }
+        .dot.completed {
+            background-color: #10b981 !important;
+            color: white;
+        }
+        .line {
+            position: absolute;
+            background-color: #3b82f6;
+            height: 8px;
+            transform-origin: 0 0;
+            z-index: 0;
+            transition: all 0.3s ease;
+            border-radius: 4px;
+        }
+        .confetti {
+            position: absolute;
+            width: 12px;
+            height: 12px;
+            background-color: #f00;
+            border-radius: 50%;
+            animation: fall 3s linear forwards;
+        }
+        @keyframes fall {
+            to {
+                transform: translateY(100vh) rotate(720deg);
+                opacity: 0;
+            }
+        }
+        @keyframes bounce {
+            from { transform: scale(1.1); }
+            to { transform: scale(1.2); }
+        }
+        .pulse {
+            animation: pulse 1.5s infinite;
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 215, 0, 0.7); }
+            50% { transform: scale(1.2); box-shadow: 0 0 20px rgba(255, 215, 0, 0.7); }
+            100% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 215, 0, 0.7); }
+        }
+        .pattern-btn {
+            transition: all 0.3s ease;
+        }
+        .pattern-btn.active {
+            transform: scale(1.05);
+            box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
+            border-color: #3b82f6;
+        }
+        .celebration {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 100;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 5rem;
+            color: gold;
+            text-shadow: 0 0 10px rgba(0,0,0,0.5);
+            animation: zoomIn 1s forwards;
+        }
+        @keyframes zoomIn {
+            from { transform: scale(0); opacity: 0; }
+            to { transform: scale(1); opacity: 1; }
+        }
+    </style>
+</head>
+<body class="min-h-screen flex flex-col items-center justify-start p-4 pt-8">
+    <div class="text-center mb-6">
+        <h1 class="text-4xl font-bold text-blue-600 mb-2">Kids Connect The Dots</h1>
+        <p class="text-xl text-gray-600">Learn sequences by connecting the dots!</p>
+    </div>
+    <div class="flex flex-wrap justify-center gap-4 mb-8 w-full max-w-4xl">
+        <button data-pattern="numbers" class="pattern-btn active px-6 py-3 bg-blue-100 text-blue-800 rounded-xl border-2 border-blue-200 font-bold">
+            <i class="fas fa-sort-numeric-up-alt mr-2"></i>Numbers
+        </button>
+        <button data-pattern="letters" class="pattern-btn px-6 py-3 bg-purple-100 text-purple-800 rounded-xl border-2 border-purple-200 font-bold">
+            <i class="fas fa-font mr-2"></i>Letters
+        </button>
+        <button id="new-pattern-btn" class="px-6 py-3 bg-green-100 text-green-800 rounded-xl border-2 border-green-200 font-bold">
+            <i class="fas fa-sync-alt mr-2"></i>New Pattern
+        </button>
+    </div>
+    <div class="game-container relative w-full max-w-2xl h-96 mb-8 p-4">
+        <!-- Game board will be generated by JavaScript -->
+    </div>
+    <div class="flex flex-col items-center w-full max-w-md">
+        <div class="mb-6 grid grid-cols-3 gap-4 w-full">
+            <div class="flex items-center justify-center bg-blue-50 p-3 rounded-lg">
+                <div class="dot bg-blue-500 text-white mr-2"></div>
+                <span class="font-bold">Next</span>
+            </div>
+            <div class="flex items-center justify-center bg-gray-50 p-3 rounded-lg">
+                <div class="dot bg-gray-300 text-gray-700 mr-2"></div>
+                <span class="font-bold">Available</span>
+            </div>
+            <div class="flex items-center justify-center bg-green-50 p-3 rounded-lg">
+                <div class="dot bg-green-500 text-white mr-2"></div>
+                <span class="font-bold">Completed</span>
+            </div>
+        </div>
+        <div class="flex space-x-4 mb-6">
+            <button id="reset-btn" class="px-6 py-3 bg-red-100 text-red-800 rounded-xl border-2 border-red-200 font-bold hover:bg-red-200 transition flex items-center">
+                <i class="fas fa-redo mr-2"></i> Reset
+            </button>
+            <button id="hint-btn" class="px-6 py-3 bg-yellow-100 text-yellow-800 rounded-xl border-2 border-yellow-200 font-bold hover:bg-yellow-200 transition flex items-center">
+                <i class="fas fa-lightbulb mr-2"></i> Hint
+            </button>
+            <button id="sound-btn" class="px-6 py-3 bg-indigo-100 text-indigo-800 rounded-xl border-2 border-indigo-200 font-bold hover:bg-indigo-200 transition flex items-center">
+                <i class="fas fa-volume-up mr-2"></i> Sound On
+            </button>
+        </div>
+        <div id="timer" class="text-2xl font-mono bg-blue-100 px-6 py-3 rounded-xl mb-4 font-bold text-blue-800">
+            <i class="fas fa-clock mr-2"></i> 00:00
+        </div>
+        <div id="message" class="text-xl font-semibold text-center min-h-8 p-3 rounded-lg w-full"></div>
+    </div>
+    <!-- Audio elements -->
+    <audio id="correct-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-correct-answer-tone-2870.mp3" preload="auto"></audio>
+    <audio id="wrong-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-wrong-answer-fail-notification-946.mp3" preload="auto"></audio>
+    <audio id="celebration-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-achievement-bell-600.mp3" preload="auto"></audio>
+    <audio id="click-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-select-click-1109.mp3" preload="auto"></audio>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const gameContainer = document.querySelector('.game-container');
+            const resetBtn = document.getElementById('reset-btn');
+            const hintBtn = document.getElementById('hint-btn');
+            const soundBtn = document.getElementById('sound-btn');
+            const newPatternBtn = document.getElementById('new-pattern-btn');
+            const timerElement = document.getElementById('timer');
+            const messageElement = document.getElementById('message');
+            const patternButtons = document.querySelectorAll('.pattern-btn');
+            // Audio elements
+            const correctSound = document.getElementById('correct-sound');
+            const wrongSound = document.getElementById('wrong-sound');
+            const celebrationSound = document.getElementById('celebration-sound');
+            const clickSound = document.getElementById('click-sound');
+            let dots = [];
+            let lines = [];
+            let currentNumber = 1;
+            let gameStarted = false;
+            let startTime;
+            let timerInterval;
+            let completedDots = [];
+            let currentPattern = 'numbers';
+            let soundEnabled = true;
+            let currentPatternIndex = 0;
+            // Pattern configurations
+            const numberPatterns = [
+                {
+                    name: "Numbers 1-9 (Square)",
+                    items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
+                    positions: [
+                        {x: 15, y: 15},   // 1
+                        {x: 50, y: 15},   // 2
+                        {x: 85, y: 15},   // 3
+                        {x: 85, y: 50},   // 4
+                        {x: 85, y: 85},   // 5
+                        {x: 50, y: 85},   // 6
+                        {x: 15, y: 85},   // 7
+                        {x: 15, y: 50},   // 8
+                        {x: 50, y: 50}    // 9
+                    ]
+                },
+                {
+                    name: "Numbers 1-9 (Zigzag)",
+                    items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
+                    positions: [
+                        {x: 15, y: 15},   // 1
+                        {x: 85, y: 15},   // 2
+                        {x: 15, y: 30},   // 3
+                        {x: 85, y: 30},   // 4
+                        {x: 15, y: 45},   // 5
+                        {x: 85, y: 45},   // 6
+                        {x: 15, y: 60},   // 7
+                        {x: 85, y: 60},   // 8
+                        {x: 50, y: 85}    // 9
+                    ]
+                },
+                {
+                    name: "Numbers 1-9 (Spiral)",
+                    items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
+                    positions: [
+                        {x: 50, y: 15},   // 1
+                        {x: 70, y: 15},   // 2
+                        {x: 70, y: 35},   // 3
+                        {x: 50, y: 35},   // 4
+                        {x: 50, y: 55},   // 5
+                        {x: 70, y: 55},   // 6
+                        {x: 70, y: 75},   // 7
+                        {x: 50, y: 75},   // 8
+                        {x: 30, y: 75}    // 9
+                    ]
+                },
+                {
+                    name: "Numbers 1-9 (Diamond)",
+                    items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
+                    positions: [
+                        {x: 50, y: 15},   // 1
+                        {x: 65, y: 30},   // 2
+                        {x: 80, y: 45},   // 3
+                        {x: 65, y: 60},   // 4
+                        {x: 50, y: 75},   // 5
+                        {x: 35, y: 60},   // 6
+                        {x: 20, y: 45},   // 7
+                        {x: 35, y: 30},   // 8
+                        {x: 50, y: 45}    // 9
+                    ]
+                }
+            ];
+            const letterPatterns = [
+                {
+                    name: "Letters A-I (Circle)",
+                    items: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'],
+                    positions: [
+                        {x: 50, y: 15},   // A
+                        {x: 75, y: 25},   // B
+                        {x: 85, y: 50},   // C
+                        {x: 75, y: 75},   // D
+                        {x: 50, y: 85},   // E
+                        {x: 25, y: 75},   // F
+                        {x: 15, y: 50},   // G
+                        {x: 25, y: 25},   // H
+                        {x: 50, y: 50}    // I
+                    ]
+                },
+                {
+                    name: "Letters A-I (Star)",
+                    items: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'],
+                    positions: [
+                        {x: 50, y: 15},   // A
+                        {x: 65, y: 35},   // B
+                        {x: 85, y: 35},   // C
+                        {x: 70, y: 55},   // D
+                        {x: 85, y: 75},   // E
+                        {x: 50, y: 65},   // F
+                        {x: 15, y: 75},   // G
+                        {x: 30, y: 55},   // H
+                        {x: 15, y: 35}    // I
+                    ]
+                },
+                {
+                    name: "Letters A-I (House)",
+                    items: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'],
+                    positions: [
+                        {x: 50, y: 15},   // A
+                        {x: 25, y: 35},   // B
+                        {x: 75, y: 35},   // C
+                        {x: 25, y: 75},   // D
+                        {x: 75, y: 75},   // E
+                        {x: 50, y: 75},   // F
+                        {x: 25, y: 55},   // G
+                        {x: 75, y: 55},   // H
+                        {x: 50, y: 55}    // I
+                    ]
+                },
+                {
+                    name: "Letters A-I (Tree)",
+                    items: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'],
+                    positions: [
+                        {x: 50, y: 15},   // A
+                        {x: 40, y: 30},   // B
+                        {x: 60, y: 30},   // C
+                        {x: 30, y: 45},   // D
+                        {x: 70, y: 45},   // E
+                        {x: 50, y: 45},   // F
+                        {x: 40, y: 60},   // G
+                        {x: 60, y: 60},   // H
+                        {x: 50, y: 75}    // I
+                    ]
+                }
+            ];
+            // Initialize the game
+            initGame();
+            function initGame() {
+                gameContainer.innerHTML = '';
+                dots = [];
+                lines = [];
+                currentNumber = 1;
+                gameStarted = false;
+                completedDots = [];
+                clearInterval(timerInterval);
+                timerElement.innerHTML = '<i class="fas fa-clock mr-2"></i> 00:00';
+                messageElement.textContent = '';
+                messageElement.className = 'text-xl font-semibold text-center min-h-8 p-3 rounded-lg w-full';
+                // Get current pattern configuration
+                let pattern;
+                if (currentPattern === 'numbers') {
+                    pattern = numberPatterns[currentPatternIndex % numberPatterns.length];
+                } else {
+                    pattern = letterPatterns[currentPatternIndex % letterPatterns.length];
+                }
+                // Adjust positions for responsive layout
+                const containerWidth = gameContainer.clientWidth;
+                const containerHeight = gameContainer.clientHeight;
+                // Create dots
+                for (let i = 0; i < pattern.items.length; i++) {
+                    const pos = pattern.positions[i];
+                    const x = (pos.x / 100) * containerWidth;
+                    const y = (pos.y / 100) * containerHeight;
+                    const dot = document.createElement('div');
+                    dot.className = 'dot absolute bg-gray-300 text-gray-700';
+                    dot.textContent = pattern.items[i];
+                    dot.style.left = `${x - 30}px`;
+                    dot.style.top = `${y - 30}px`;
+                    dot.dataset.number = i + 1;
+                    dot.addEventListener('click', () => handleDotClick(dot));
+                    gameContainer.appendChild(dot);
+                    dots.push({
+                        element: dot,
+                        x: x,
+                        y: y,
+                        number: i + 1,
+                        value: pattern.items[i]
+                    });
+                }
+                // Highlight the first dot
+                updateDotStates();
+                // Update message with pattern name
+                messageElement.textContent = `Connect the dots to make: ${pattern.name}`;
+                messageElement.className = 'text-xl font-semibold text-center min-h-8 p-3 rounded-lg w-full bg-blue-100 text-blue-800';
+            }
+            function handleDotClick(dot) {
+                if (soundEnabled) clickSound.play();
+                const dotNumber = parseInt(dot.dataset.number);
+                if (dotNumber === currentNumber) {
+                    if (!gameStarted) {
+                        gameStarted = true;
+                        startTime = new Date();
+                        timerInterval = setInterval(updateTimer, 1000);
+                    }
+                    // Mark dot as completed
+                    completedDots.push(dotNumber);
+                    dot.classList.remove('bg-gray-300', 'text-gray-700');
+                    dot.classList.add('bg-green-500', 'text-white', 'completed');
+                    // Play correct sound
+                    if (soundEnabled) correctSound.play();
+                    // Draw line if this isn't the first dot
+                    if (completedDots.length > 1) {
+                        const prevDot = dots.find(d => d.number === completedDots[completedDots.length - 2]);
+                        const currentDot = dots.find(d => d.number === dotNumber);
+                        drawLine(prevDot, currentDot);
+                    }
+                    // Move to next number
+                    currentNumber++;
+                    // Check if game is complete
+                    if (currentNumber > dots.length) {
+                        clearInterval(timerInterval);
+                        messageElement.textContent = `Great job! You completed the pattern!`;
+                        messageElement.className = 'text-xl font-semibold text-center min-h-8 p-3 rounded-lg w-full bg-green-100 text-green-800';
+                        if (soundEnabled) {
+                            celebrationSound.currentTime = 0;
+                            celebrationSound.play();
+                        }
+                        createConfetti();
+                        showCelebration();
+                    }
+                    updateDotStates();
+                } else if (dotNumber < currentNumber) {
+                    // Already completed this dot
+                    messageElement.textContent = `You already connected ${dots.find(d => d.number === dotNumber).value}`;
+                    messageElement.className = 'text-xl font-semibold text-center min-h-8 p-3 rounded-lg w-full bg-blue-100 text-blue-800';
+                    setTimeout(() => {
+                        if (currentNumber <= dots.length) {
+                            messageElement.textContent = `Next is: ${dots.find(d => d.number === currentNumber).value}`;
+                            messageElement.className = 'text-xl font-semibold text-center min-h-8 p-3 rounded-lg w-full bg-blue-100 text-blue-800';
+                        } else {
+                            messageElement.textContent = '';
+                        }
+                    }, 1500);
+                } else {
+                    // Wrong dot clicked
+                    const nextDotValue = dots.find(d => d.number === currentNumber).value;
+                    messageElement.textContent = `Oops! Try connecting ${nextDotValue} next`;
+                    messageElement.className = 'text-xl font-semibold text-center min-h-8 p-3 rounded-lg w-full bg-red-100 text-red-800';
+                    if (soundEnabled) wrongSound.play();
+                    setTimeout(() => {
+                        if (currentNumber <= dots.length) {
+                            messageElement.textContent = `Next is: ${nextDotValue}`;
+                            messageElement.className = 'text-xl font-semibold text-center min-h-8 p-3 rounded-lg w-full bg-blue-100 text-blue-800';
+                        } else {
+                            messageElement.textContent = '';
+                        }
+                    }, 1500);
+                }
+            }
+            function updateDotStates() {
+                dots.forEach(dot => {
+                    const dotElement = dot.element;
+                    const dotNumber = dot.number;
+                    // Reset all dots
+                    dotElement.classList.remove('bg-blue-500', 'text-white', 'active');
+                    if (completedDots.includes(dotNumber)) {
+                        dotElement.classList.add('completed');
+                    } else if (dotNumber === currentNumber) {
+                        dotElement.classList.add('bg-blue-500', 'text-white', 'active');
+                    } else {
+                        dotElement.classList.add('bg-gray-300', 'text-gray-700');
+                    }
+                });
+            }
+            function drawLine(startDot, endDot) {
+                const line = document.createElement('div');
+                line.className = 'line';
+                // Calculate line position and dimensions
+                const x1 = startDot.x;
+                const y1 = startDot.y;
+                const x2 = endDot.x;
+                const y2 = endDot.y;
+                const length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+                const angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
+                line.style.width = `${length}px`;
+                line.style.left = `${x1}px`;
+                line.style.top = `${y1}px`;
+                line.style.transform = `rotate(${angle}deg)`;
+                gameContainer.appendChild(line);
+                lines.push(line);
+            }
+            function updateTimer() {
+                const currentTime = new Date();
+                const elapsedTime = Math.floor((currentTime - startTime) / 1000);
+                const minutes = Math.floor(elapsedTime / 60).toString().padStart(2, '0');
+                const seconds = (elapsedTime % 60).toString().padStart(2, '0');
+                timerElement.innerHTML = `<i class="fas fa-clock mr-2"></i> ${minutes}:${seconds}`;
+            }
+            function createConfetti() {
+                for (let i = 0; i < 150; i++) {
+                    const confetti = document.createElement('div');
+                    confetti.className = 'confetti';
+                    // Random color
+                    const colors = ['#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff', '#f90', '#09f', '#90f'];
+                    const randomColor = colors[Math.floor(Math.random() * colors.length)];
+                    confetti.style.backgroundColor = randomColor;
+                    // Random shape
+                    const shapes = ['circle', 'square', 'triangle'];
+                    const randomShape = shapes[Math.floor(Math.random() * shapes.length)];
+                    if (randomShape === 'square') {
+                        confetti.style.borderRadius = '0';
+                    } else if (randomShape === 'triangle') {
+                        confetti.style.width = '0';
+                        confetti.style.height = '0';
+                        confetti.style.backgroundColor = 'transparent';
+                        confetti.style.borderLeft = '8px solid transparent';
+                        confetti.style.borderRight = '8px solid transparent';
+                        confetti.style.borderBottom = `16px solid ${randomColor}`;
+                    }
+                    // Random position
+                    const gameRect = gameContainer.getBoundingClientRect();
+                    const x = Math.random() * gameRect.width;
+                    confetti.style.left = `${x}px`;
+                    confetti.style.top = `-20px`;
+                    // Random size and animation duration
+                    const size = Math.random() * 15 + 5;
+                    if (randomShape !== 'triangle') {
+                        confetti.style.width = `${size}px`;
+                        confetti.style.height = `${size}px`;
+                    }
+                    confetti.style.animationDuration = `${Math.random() * 2 + 2}s`;
+                    document.body.appendChild(confetti);
+                    // Remove confetti after animation
+                    setTimeout(() => {
+                        confetti.remove();
+                    }, 3000);
+                }
+            }
+            function showCelebration() {
+                const celebration = document.createElement('div');
+                celebration.className = 'celebration';
+                celebration.innerHTML = '<div class="text-center"><div>🎉</div><div class="text-3xl mt-4">Well Done!</div></div>';
+                document.body.appendChild(celebration);
+                setTimeout(() => {
+                    celebration.remove();
+                }, 3000);
+            }
+            function showHint() {
+                if (currentNumber > dots.length) return;
+                const nextDot = dots.find(d => d.number === currentNumber);
+                if (nextDot) {
+                    nextDot.element.classList.add('pulse');
+                    if (soundEnabled) clickSound.play();
+                    setTimeout(() => {
+                        nextDot.element.classList.remove('pulse');
+                    }, 2000);
+                    messageElement.textContent = `Hint: Next is ${nextDot.value}`;
+                    messageElement.className = 'text-xl font-semibold text-center min-h-8 p-3 rounded-lg w-full bg-yellow-100 text-yellow-800';
+                    setTimeout(() => {
+                        if (currentNumber <= dots.length) {
+                            messageElement.textContent = `Next is: ${nextDot.value}`;
+                            messageElement.className = 'text-xl font-semibold text-center min-h-8 p-3 rounded-lg w-full bg-blue-100 text-blue-800';
+                        } else {
+                            messageElement.textContent = '';
+                        }
+                    }, 2000);
+                }
+            }
+            function toggleSound() {
+                soundEnabled = !soundEnabled;
+                if (soundEnabled) {
+                    soundBtn.innerHTML = '<i class="fas fa-volume-up mr-2"></i> Sound On';
+                    soundBtn.className = 'px-6 py-3 bg-indigo-100 text-indigo-800 rounded-xl border-2 border-indigo-200 font-bold hover:bg-indigo-200 transition flex items-center';
+                } else {
+                    soundBtn.innerHTML = '<i class="fas fa-volume-mute mr-2"></i> Sound Off';
+                    soundBtn.className = 'px-6 py-3 bg-gray-200 text-gray-800 rounded-xl border-2 border-gray-300 font-bold hover:bg-gray-300 transition flex items-center';
+                }
+            }
+            function changePattern(pattern) {
+                currentPattern = pattern;
+                currentPatternIndex = Math.floor(Math.random() * (pattern === 'numbers' ? numberPatterns.length : letterPatterns.length));
+                patternButtons.forEach(btn => {
+                    if (btn.dataset.pattern === pattern) {
+                        btn.classList.add('active');
+                    } else {
+                        btn.classList.remove('active');
+                    }
+                });
+                if (soundEnabled) clickSound.play();
+                initGame();
+            }
+            function getNewPattern() {
+                currentPatternIndex++;
+                if (soundEnabled) clickSound.play();
+                initGame();
+            }
+            // Event listeners
+            resetBtn.addEventListener('click', () => {
+                if (soundEnabled) clickSound.play();
+                initGame();
+            });
+            hintBtn.addEventListener('click', showHint);
+            soundBtn.addEventListener('click', toggleSound);
+            newPatternBtn.addEventListener('click', getNewPattern);
+            patternButtons.forEach(btn => {
+                btn.addEventListener('click', () => changePattern(btn.dataset.pattern));
+            });
+            // Make responsive
+            window.addEventListener('resize', initGame);
+        });
+    </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=madansa7/rajagame" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,4 @@

+Create a fully responsive and visually appealing interactive CV/Resume website for Praveen Kumar. He has extensive work experience across various industries, notably in the automobile sector and back-office administration. The design should be modern, clean, and mobile-friendly, using HTML, CSS (preferably Flexbox/Grid), and JavaScript if needed. Include elegant animations/transitions, smooth scroll behavior, and use fonts and colors that give it a professional yet approachable vibe.  The CV should include the following sections:  Header: Full name (Praveen Kumar), a short professional tagline ("Versatile Professional with Cross-Industry Experience"), and a navigation menu.  About Me: A short paragraph on Praveen's background, work ethic, and adaptability. Emphasize soft skills like communication, coordination, and dedication to quality.  Experience: Timeline or card-style format showing Praveen’s roles in the automobile sector and administrative/back-office jobs. Include company names, designations, and responsibilities (you can add generic but realistic ones like vendor coordination, office support, document management, or team assistance).  Skills: A grid or bar-chart-style layout showing proficiency in skills such as Microsoft Office, Team Coordination, Inventory Management, Communication, Time Management, and Data Entry.  Education: Mention highest qualifications and relevant certifications (create placeholder if exact data isn't available).  Projects: Optional section to highlight any achievements or initiatives (e.g., improving office workflow or managing logistics).  Contact Me: Interactive contact form and basic contact details.  Footer: Simple copyright with social media icons (LinkedIn, email).  Add relevant placeholder text and icons where required. Make sure the entire site is mobile responsive, uses semantic HTML5, and is SEO-friendly. Use subtle hover effects, card shadows, and a pleasing color palette (such as blue and white, or grey and teal). Add basic CSS animations for interactivity. Sales marketing Executive at vodafone, Sumerpur (Amit Enterprises) raj. Duration 2 Year (Aug 2015- Oct 2017) Responsibility Here my role used to deal with shopkeeper, used  to sell this product over e-top,sim, recharge Coupon, Touch 50 shop in a day.  Front Office (Receptionist) At Hotel, Kamba Jawai. Raj. Duration 2 Year (Nov 2017- Oct 2019) Responsibility Managing Front office for hotel.( Front office, Lendingkart Finance Ltd. Duration 1 year (Jan 2022 – Jan 2023)  Responsibility Business Loan Specialist.  Landmark, Honda Duration 11 Month March 2023-Feb 2024. Responsibility After Sales Service (Finance) Customer Relationship Executive BMW Gallops Duration Mar 2024-till now Responsibility Insurance Advisor:-Correspondence with regarding General insurance(Car Insurance) QUALIFICATION Academic *BA Graducation, *RSCIT Course 2016 *Tally ERP 9 *12th from Raj.Board,in the year 2013. *10th from Rajasthan Board, in the year 2010.
+Design me a interactive ZIp game. Linkedin ZIp Game to connect 1 to 9 an
+I like this idea, This is good for kids, i want you to create more pattern within this, we can make kids connect this dots and learn sequence of various things, again, consider easy to identify such number and letters, it should have celebration sound and wrong sound when connected wrong strings and correct sound when done it right way.
+Remove basic shapes and animal shape, also add more pattern in Numbers and lettters, everytime there should be a new fresh page for numbers and letters game. and look into celebration sound as it is not working.