Spaces:

Rubentnoda
/

anycoder-a2c8fc6c

Running

App Files Files Community

Rubentnoda commited on Nov 22, 2025

Commit

e5bb556

verified ·

1 Parent(s): 4f03d69

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +790 -19

index.html CHANGED Viewed

@@ -1,19 +1,790 @@
-<!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="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>¿DONDE ESTÁ LA APP¿? 🤔</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    :root {
+      --primary: #6366f1;
+      --secondary: #ec4899;
+      --accent: #10b981;
+      --dark: #1f2937;
+      --light: #f3f4f6;
+      --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      --mystery: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    }
+    body {
+      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+      min-height: 100vh;
+      overflow-x: hidden;
+      position: relative;
+    }
+    /* Animated background */
+    .bg-animation {
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      z-index: -1;
+      opacity: 0.3;
+    }
+    .floating-shape {
+      position: absolute;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.1);
+      backdrop-filter: blur(10px);
+      animation: float 20s infinite ease-in-out;
+    }
+    @keyframes float {
+      0%,
+      100% {
+        transform: translateY(0) rotate(0deg);
+      }
+      33% {
+        transform: translateY(-30px) rotate(120deg);
+      }
+      66% {
+        transform: translateY(30px) rotate(240deg);
+      }
+    }
+    /* Header */
+    header {
+      background: rgba(255, 255, 255, 0.95);
+      backdrop-filter: blur(20px);
+      padding: 1.5rem;
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+      animation: slideDown 0.5s ease-out;
+    }
+    @keyframes slideDown {
+      from {
+        transform: translateY(-100%);
+        opacity: 0;
+      }
+      to {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+    .header-content {
+      max-width: 1200px;
+      margin: 0 auto;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 1rem;
+    }
+    h1 {
+      font-size: 2rem;
+      background: var(--gradient);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      animation: pulse 2s infinite;
+    }
+    @keyframes pulse {
+      0%,
+      100% {
+        transform: scale(1);
+      }
+      50% {
+        transform: scale(1.05);
+      }
+    }
+    .score-board {
+      display: flex;
+      gap: 2rem;
+      align-items: center;
+      font-weight: 600;
+    }
+    .score-item {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.5rem 1rem;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+      border-radius: 25px;
+      transition: transform 0.3s;
+    }
+    .score-item:hover {
+      transform: translateY(-2px);
+    }
+    /* Main container */
+    .container {
+      max-width: 1200px;
+      margin: 2rem auto;
+      padding: 0 1rem;
+    }
+    /* Search area */
+    .search-area {
+      background: rgba(255, 255, 255, 0.95);
+      border-radius: 20px;
+      padding: 2rem;
+      margin-bottom: 2rem;
+      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+      animation: fadeInUp 0.6s ease-out;
+    }
+    @keyframes fadeInUp {
+      from {
+        transform: translateY(30px);
+        opacity: 0;
+      }
+      to {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+    .search-container {
+      position: relative;
+      margin-bottom: 1.5rem;
+    }
+    #searchInput {
+      width: 100%;
+      padding: 1rem 3rem 1rem 1.5rem;
+      font-size: 1.1rem;
+      border: 3px solid transparent;
+      border-radius: 15px;
+      background: linear-gradient(white, white) padding-box,
+        var(--gradient) border-box;
+      transition: all 0.3s;
+    }
+    #searchInput:focus {
+      outline: none;
+      box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
+      transform: translateY(-2px);
+    }
+    .search-hint {
+      position: absolute;
+      right: 1rem;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 1.5rem;
+      animation: bounce 2s infinite;
+    }
+    @keyframes bounce {
+      0%,
+      100% {
+        transform: translateY(-50%);
+      }
+      50% {
+        transform: translateY(-60%);
+      }
+    }
+    /* Buttons */
+    .button-group {
+      display: flex;
+      gap: 1rem;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+    .btn {
+      padding: 0.8rem 2rem;
+      font-size: 1rem;
+      font-weight: 600;
+      border: none;
+      border-radius: 10px;
+      cursor: pointer;
+      transition: all 0.3s;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+    }
+    .btn-primary {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+    }
+    .btn-secondary {
+      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+      color: white;
+    }
+    .btn:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+    }
+    .btn:active {
+      transform: translateY(-1px);
+    }
+    /* App grid */
+    .app-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+      gap: 1.5rem;
+      margin-bottom: 2rem;
+    }
+    .app-card {
+      background: rgba(255, 255, 255, 0.95);
+      border-radius: 15px;
+      padding: 1.5rem;
+      text-align: center;
+      cursor: pointer;
+      transition: all 0.3s;
+      position: relative;
+      overflow: hidden;
+      animation: fadeIn 0.5s ease-out;
+    }
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        transform: scale(0.9);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+    .app-card:hover {
+      transform: translateY(-5px) scale(1.05);
+      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
+    }
+    .app-card.found {
+      background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
+      animation: celebrate 0.5s ease-out;
+    }
+    @keyframes celebrate {
+      0% {
+        transform: scale(1) rotate(0deg);
+      }
+      50% {
+        transform: scale(1.1) rotate(5deg);
+      }
+      100% {
+        transform: scale(1) rotate(0deg);
+      }
+    }
+    .app-icon {
+      font-size: 3rem;
+      margin-bottom: 0.5rem;
+    }
+    .app-name {
+      font-weight: 600;
+      color: var(--dark);
+      margin-bottom: 0.3rem;
+    }
+    .app-hint {
+      font-size: 0.85rem;
+      color: #6b7280;
+      font-style: italic;
+    }
+    /* Hidden apps */
+    .hidden-app {
+      position: absolute;
+      cursor: pointer;
+      font-size: 2rem;
+      transition: all 0.3s;
+      animation: wiggle 3s infinite;
+    }
+    @keyframes wiggle {
+      0%,
+      100% {
+        transform: rotate(0deg);
+      }
+      25% {
+        transform: rotate(5deg);
+      }
+      75% {
+        transform: rotate(-5deg);
+      }
+    }
+    .hidden-app:hover {
+      transform: scale(1.2);
+      filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
+    }
+    /* Message area */
+    .message-area {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background: white;
+      padding: 2rem 3rem;
+      border-radius: 20px;
+      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
+      z-index: 1000;
+      display: none;
+      text-align: center;
+    }
+    .message-area.show {
+      display: block;
+      animation: popIn 0.5s ease-out;
+    }
+    @keyframes popIn {
+      from {
+        transform: translate(-50%, -50%) scale(0);
+      }
+      to {
+        transform: translate(-50%, -50%) scale(1);
+      }
+    }
+    .message-title {
+      font-size: 2rem;
+      margin-bottom: 1rem;
+      background: var(--gradient);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .message-text {
+      color: var(--dark);
+      margin-bottom: 1.5rem;
+    }
+    /* Progress bar */
+    .progress-container {
+      background: rgba(255, 255, 255, 0.95);
+      border-radius: 15px;
+      padding: 1.5rem;
+      margin-bottom: 2rem;
+    }
+    .progress-bar {
+      width: 100%;
+      height: 30px;
+      background: #e5e7eb;
+      border-radius: 15px;
+      overflow: hidden;
+      position: relative;
+    }
+    .progress-fill {
+      height: 100%;
+      background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+      border-radius: 15px;
+      transition: width 0.5s ease-out;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-weight: 600;
+    }
+    /* Footer */
+    footer {
+      text-align: center;
+      padding: 2rem;
+      color: white;
+      margin-top: 3rem;
+    }
+    .built-with {
+      color: white;
+      text-decoration: none;
+      font-weight: 600;
+      background: rgba(255, 255, 255, 0.2);
+      padding: 0.5rem 1rem;
+      border-radius: 10px;
+      display: inline-block;
+      transition: all 0.3s;
+    }
+    .built-with:hover {
+      background: rgba(255, 255, 255, 0.3);
+      transform: translateY(-2px);
+    }
+    /* Responsive */
+    @media (max-width: 768px) {
+      h1 {
+        font-size: 1.5rem;
+      }
+      .score-board {
+        gap: 1rem;
+      }
+      .app-grid {
+        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+      }
+    }
+    /* Confetti */
+    .confetti {
+      position: fixed;
+      width: 10px;
+      height: 10px;
+      background: #f0f;
+      position: absolute;
+      animation: confetti-fall 3s linear;
+    }
+    @keyframes confetti-fall {
+      to {
+        transform: translateY(100vh) rotate(360deg);
+        opacity: 0;
+      }
+    }
+  </style>
+</head>
+<body>
+  <!-- Animated background -->
+  <div class="bg-animation">
+    <div class="floating-shape" style="width: 100px; height: 100px; top: 10%; left: 10%; animation-delay: 0s;"></div>
+    <div class="floating-shape" style="width: 150px; height: 150px; top: 70%; right: 10%; animation-delay: 5s;"></div>
+    <div class="floating-shape" style="width: 80px; height: 80px; bottom: 20%; left: 50%; animation-delay: 10s;"></div>
+  </div>
+  <!-- Header -->
+  <header>
+    <div class="header-content">
+      <h1>🔍 ¿DONDE ESTÁ LA APP¿? 🤔</h1>
+      <div class="score-board">
+        <div class="score-item">
+          <span>🎯 Apps Encontradas:</span>
+          <span id="foundCount">0</span>
+        </div>
+        <div class="score-item">
+          <span>⏱️ Tiempo:</span>
+          <span id="timer">00:00</span>
+        </div>
+      </div>
+    </div>
+  </header>
+  <!-- Main container -->
+  <div class="container">
+    <!-- Progress -->
+    <div class="progress-container">
+      <div class="progress-bar">
+        <div class="progress-fill" id="progressFill" style="width: 0%">
+          <span id="progressText">0%</span>
+        </div>
+      </div>
+    </div>
+    <!-- Search area -->
+    <div class="search-area">
+      <div class="search-container">
+        <input type="text" id="searchInput" placeholder="🔍 Busca la app secreta... (intenta: 'magia', 'oculta', 'secreta')">
+        <span class="search-hint">👆</span>
+      </div>
+      <div class="button-group">
+        <button class="btn btn-primary" onclick="revealHint()">💡 Dar Pista</button>
+        <button class="btn btn-secondary" onclick="shuffleApps()">🔀 Reorganizar</button>
+        <button class="btn btn-primary" onclick="startNewGame()">🎮 Nuevo Juego</button>
+      </div>
+    </div>
+    <!-- App grid -->
+    <div class="app-grid" id="appGrid">
+      <!-- Apps will be generated here -->
+    </div>
+  </div>
+  <!-- Hidden apps in the page -->
+  <div class="hidden-app" style="top: 20%; right: 5%;" onclick="findHiddenApp(this, '🌟')">🌟</div>
+  <div class="hidden-app" style="bottom: 30%; left: 2%;" onclick="findHiddenApp(this, '🎨')">🎨</div>
+  <div class="hidden-app" style="top: 60%; right: 8%;" onclick="findHiddenApp(this, '🚀')">🚀</div>
+  <!-- Message area -->
+  <div class="message-area" id="messageArea">
+    <h2 class="message-title">🎉 ¡Felicidades!</h2>
+    <p class="message-text" id="messageText">¡Encontraste una app!</p>
+    <button class="btn btn-primary" onclick="closeMessage()">Continuar</button>
+  </div>
+  <!-- Footer -->
+  <footer>
+    <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
+      Built with anycoder
+    </a>
+  </footer>
+  <script>
+    // Game state
+        let foundApps = 0;
+        let totalApps = 9;
+        let startTime = Date.now();
+        let timerInterval;
+        // App data
+        const apps = [
+            { icon: '📱', name: 'App Móvil', hint: 'La usas todos los días', found: false },
+            { icon: '💻', name: 'App Desktop', hint: 'Para trabajar', found: false },
+            { icon: '🎮', name: 'App Gaming', hint: 'Diviértete', found: false },
+            { icon: '📚', name: 'App Estudio', hint: 'Aprende algo nuevo', found: false },
+            { icon: '🎵', name: 'App Música', hint: 'Suena bien', found: false },
+            { icon: '📷', name: 'App Foto', hint: 'Captura momentos', found: false },
+            { icon: '💬', name: 'App Chat', hint: 'Conecta con amigos', found: false },
+            { icon: '🗺️', name: 'App Maps', hint: 'No te pierdas', found: false },
+            { icon: '☁️', name: 'App Cloud', hint: 'Guarda en el cielo', found: false }
+        ];
+        // Initialize game
+        function initGame() {
+            renderApps();
+            startTimer();
+            setupSearch();
+        }
+        // Render apps
+        function renderApps() {
+            const grid = document.getElementById('appGrid');
+            grid.innerHTML = '';
+            apps.forEach((app, index) => {
+                const card = document.createElement('div');
+                card.className = `app-card ${app.found ? 'found' : ''}`;
+                card.innerHTML = `
+                    <div class="app-icon">${app.icon}</div>
+                    <div class="app-name">${app.name}</div>
+                    <div class="app-hint">${app.hint}</div>
+                `;
+                card.onclick = () => findApp(index);
+                card.style.animationDelay = `${index * 0.1}s`;
+                grid.appendChild(card);
+            });
+        }
+        // Find app
+        function findApp(index) {
+            if (!apps[index].found) {
+                apps[index].found = true;
+                foundApps++;
+                updateScore();
+                showMessage(`¡Encontraste ${apps[index].name}! 🎉`);
+                renderApps();
+                if (foundApps === totalApps) {
+                    endGame();
+                }
+            }
+        }
+        // Find hidden app
+        function findHiddenApp(element, icon) {
+            element.style.display = 'none';
+            foundApps++;
+            totalApps++;
+            updateScore();
+            showMessage(`¡Encontraste una app oculta ${icon}! ✨`);
+            createConfetti(element);
+            if (foundApps >= totalApps) {
+                endGame();
+            }
+        }
+        // Update score
+        function updateScore() {
+            document.getElementById('foundCount').textContent = foundApps;
+            const progress = (foundApps / totalApps) * 100;
+            document.getElementById('progressFill').style.width = `${progress}%`;
+            document.getElementById('progressText').textContent = `${Math.round(progress)}%`;
+        }
+        // Timer
+        function startTimer() {
+            timerInterval = setInterval(() => {
+                const elapsed = Math.floor((Date.now() - startTime) / 1000);
+                const minutes = Math.floor(elapsed / 60);
+                const seconds = elapsed % 60;
+                document.getElementById('timer').textContent =
+                    `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+            }, 1000);
+        }
+        // Search functionality
+        function setupSearch() {
+            const input = document.getElementById('searchInput');
+            input.addEventListener('input', (e) => {
+                const value = e.target.value.toLowerCase();
+                if (value.includes('magia') || value.includes('oculta') || value.includes('secreta')) {
+                    revealSecretApp();
+                }
+            });
+        }
+        // Reveal secret app
+        function revealSecretApp() {
+            const grid = document.getElementById('appGrid');
+            const secretCard = document.createElement('div');
+            secretCard.className = 'app-card';
+            secretCard.innerHTML = `
+                <div class="app-icon">🔮</div>
+                <div class="app-name">App Secreta</div>
+                <div class="app-hint">¡La encontraste!</div>
+            `;
+            secretCard.onclick = () => {
+                foundApps++;
+                totalApps++;
+                updateScore();
+                showMessage('¡Descubriste la app secreta! 🎊');
+                createConfetti(secretCard);
+                secretCard.remove();
+            };
+            grid.appendChild(secretCard);
+            document.getElementById('searchInput').value = '';
+        }
+        // Reveal hint
+        function revealHint() {
+            const hints = [
+                '👀 Busca en las esquinas...',
+                '💫 Hay apps ocultas en la página',
+                '🔍 Escribe palabras mágicas en el buscador',
+                '🌟 Las estrellas brillan para ti',
+                '🎨 El arte está en todas partes'
+            ];
+            const randomHint = hints[Math.floor(Math.random() * hints.length)];
+            showMessage(`💡 Pista: ${randomHint}`);
+        }
+        // Shuffle apps
+        function shuffleApps() {
+            apps.sort(() => Math.random() - 0.5);
+            renderApps();
+            showMessage('🔀 Apps reorganizadas!');
+        }
+        // Start new game
+        function startNewGame() {
+            foundApps = 0;
+            totalApps = 9;
+            startTime = Date.now();
+            apps.forEach(app => app.found = false);
+            // Reset hidden apps
+            document.querySelectorAll('.hidden-app').forEach(app => {
+                app.style.display = 'block';
+            });
+            updateScore();
+            renderApps();
+            showMessage('🎮 Nuevo juego iniciado!');
+        }
+        // Show message
+        function showMessage(text) {
+            const messageArea = document.getElementById('messageArea');
+            document.getElementById('messageText').textContent = text;
+            messageArea.classList.add('show');
+            setTimeout(() => {
+                messageArea.classList.remove('show');
+            }, 3000);
+        }
+        // Close message
+        function closeMessage() {
+            document.getElementById('messageArea').classList.remove('show');
+        }
+        // End game
+        function endGame() {
+            clearInterval(timerInterval);
+            const time = document.getElementById('timer').textContent;
+            showMessage(`🏆 ¡GANASTE! Tiempo: ${time}`);
+            createMassiveConfetti();
+        }
+        // Create confetti
+        function createConfetti(element) {
+            const rect = element.getBoundingClientRect();
+            for (let i = 0; i < 20; i++) {
+                const confetti = document.createElement('div');
+                confetti.className = 'confetti';
+                confetti.style.left = `${rect.left + rect.width / 2}px`;
+                confetti.style.top = `${rect.top}px`;
+                confetti.style.background = `hsl(${Math.random() * 360}, 100%, 50%)`;
+                document.body.appendChild(confetti);
+                setTimeout(() => confetti.remove(), 3000);
+            }
+        }
+        // Create massive confetti
+        function createMassiveConfetti() {
+            for (let i = 0; i < 100; i++) {
+                setTimeout(() => {
+                    const confetti = document.createElement('div');
+                    confetti.className = 'confetti';
+                    confetti.style.left = `${Math.random() * 100}%`;
+                    confetti.style.top = `-10px`;
+                    confetti.style.background = `hsl(${Math.random() * 360}, 100%, 50%)`;
+                    confetti.style.width = `${Math.random() * 10 + 5}px`;
+                    confetti.style.height = confetti.style.width;
+                    document.body.appendChild(confetti);
+                    setTimeout(() => confetti.remove(), 3000);
+                }, i * 30);
+            }
+        }
+        // Initialize on load
+        window.addEventListener('load', initGame);
+  </script>
+</body>
+</html>