Upload index.html with huggingface_hub

index.html

@@ -0,0 +1,306 @@
+<!DOCTYPE html>
+<html lang="es">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ponele — Juego de Palabras</title>
+    <meta name="description"
+        content="Adiviná la palabra secreta. Cuanto más cerca semánticamente, menor distancia. Jugá, pensá, ponele.">
+
+    <!-- Open Graph / Facebook / WhatsApp -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://ponele.ar/">
+    <meta property="og:title" content="Ponele — Juego de Palabras">
+    <meta property="og:description"
+        content="Adiviná la palabra secreta. Cuanto más cerca semánticamente, menor distancia. Jugá, pensá, ponele.">
+    <meta property="og:image" content="https://ponele.ar/static/og-image.png">
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:url" content="https://ponele.ar/">
+    <meta property="twitter:title" content="Ponele — Juego de Palabras">
+    <meta property="twitter:description"
+        content="Adiviná la palabra secreta. Cuanto más cerca semánticamente, menor distancia. Jugá, pensá, ponele.">
+    <meta property="twitter:image" content="https://ponele.ar/static/og-image.png">
+
+    <link rel="icon" type="image/png" href="https://ponele.ar/static/favicon.png">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Syne:wght@700;800&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
+</head>
+
+<body>
+    <div class="app-container">
+        <!-- Header -->
+        <header class="game-header">
+            <div class="logo">
+                <div class="logo-icon-wrapper">
+                    <svg class="logo-svg" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <!-- Shadow -->
+                        <circle cx="54" cy="54" r="40" fill="black" />
+                        <!-- Target Circles -->
+                        <circle cx="50" cy="50" r="40" fill="#A855F7" stroke="white" stroke-width="4" />
+                        <circle cx="50" cy="50" r="28" fill="white" stroke="black" stroke-width="4" />
+                        <circle cx="50" cy="50" r="16" fill="var(--warm-yellow)" stroke="black" stroke-width="4" />
+                        <!-- Arrow -->
+                        <g transform="rotate(-45 50 50) translate(0, -10)">
+                            <rect x="47" y="20" width="6" height="50" fill="#E5E7EB" stroke="black" stroke-width="2" />
+                            <path d="M40 25 L50 5 L60 25 Z" fill="#3B82F6" stroke="black" stroke-width="2" />
+                        </g>
+                    </svg>
+                </div>
+                <div class="logo-text">
+                    <h1 class="brand-name">Ponele</h1>
+                    <span class="brand-tagline">ADIVINÁ LA PALABRA</span>
+                    <div class="game-status-line">
+                        <span id="game-number-label" class="game-number hidden">#0</span>
+                        <span id="game-mode-tag" class="mode-tag">DIARIO</span>
+                    </div>
+                </div>
+            </div>
+            <div class="header-controls">
+                <div class="server-dot" id="server-status" title="Servidor online"></div>
+                <button id="btn-new-game" class="icon-btn hide-mobile" aria-label="Nueva Palabra"
+                    title="Nueva palabra aleatoria"><i class="fa-solid fa-rotate"></i></button>
+                <button id="btn-hint" class="icon-btn hide-mobile" aria-label="Pedir Pista" title="Pedir una pista"><i
+                        class="fa-solid fa-lightbulb"></i></button>
+                <button id="btn-give-up" class="icon-btn hide-mobile" aria-label="Rendirse" title="Rendirse"><i
+                        class="fa-solid fa-flag-checkered"></i></button>
+                <button id="btn-stats" class="icon-btn hide-mobile" aria-label="Estadísticas"><i
+                        class="fa-solid fa-chart-simple"></i></button>
+                <button id="btn-help" class="icon-btn hide-mobile" aria-label="Ayuda"><i
+                        class="fa-solid fa-circle-question"></i></button>
+            </div>
+        </header>
+
+        <!-- Mobile Action Toolbar: visible only on mobile, sits between header and game -->
+        <div class="mobile-toolbar">
+            <button id="btn-new-game-mob" class="mob-btn" aria-label="Nueva Palabra">
+                <i class="fa-solid fa-rotate"></i><span>Nueva</span>
+            </button>
+            <button id="btn-hint-mob" class="mob-btn" aria-label="Pista">
+                <i class="fa-solid fa-lightbulb"></i><span>Pista</span>
+            </button>
+            <button id="btn-give-up-mob" class="mob-btn" aria-label="Rendirse">
+                <i class="fa-solid fa-flag-checkered"></i><span>Rendirse</span>
+            </button>
+            <button id="btn-stats-mob" class="mob-btn" aria-label="Estadísticas">
+                <i class="fa-solid fa-chart-simple"></i><span>Stats</span>
+            </button>
+            <button id="btn-help-mob" class="mob-btn" aria-label="Ayuda">
+                <i class="fa-solid fa-circle-question"></i><span>Ayuda</span>
+            </button>
+        </div>
+
+        <!-- Main Game Area -->
+        <main class="game-board">
+            <div class="input-section">
+                <div class="input-wrapper">
+                    <input type="text" id="word-input" placeholder="Escribí una palabra..." autocomplete="on"
+                        autocorrect="on" spellcheck="true" autocapitalize="none">
+                    <button id="btn-submit" aria-label="Enviar"><i class="fa-solid fa-arrow-up"></i></button>
+                </div>
+            </div>
+
+            <div class="guesses-container">
+                <div class="guesses-header">
+                    <span>Palabra</span>
+                    <span>Distancia</span>
+                </div>
+                <div id="guesses-list" class="guesses-list">
+                    <!-- Guesses will be injected here -->
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <!-- Stats Modal -->
+    <div id="stats-modal" class="modal hidden">
+        <div class="modal-content stats-modal-content">
+            <button class="modal-close" id="btn-close-stats"><i class="fa-solid fa-xmark"></i></button>
+            <div class="stats-modal-header">
+                <i class="fa-solid fa-chart-simple"></i>
+                <h2>Métricas</h2>
+            </div>
+
+            <div class="stats-grid">
+                <div class="stat-card">
+                    <span class="stat-value" id="stats-attempts">0</span>
+                    <span class="stat-label">Intentos</span>
+                </div>
+                <div class="stat-card">
+                    <span class="stat-value" id="stats-words">0</span>
+                    <span class="stat-label">Palabras</span>
+                </div>
+                <div class="stat-card">
+                    <span class="stat-value" id="stats-best-rank">—</span>
+                    <span class="stat-label">Mejor Rank</span>
+                </div>
+                <div class="stat-card">
+                    <span class="stat-value" id="stats-status">🔍</span>
+                    <span class="stat-label">Estado</span>
+                </div>
+            </div>
+
+            <div class="stats-progress-section">
+                <div class="stats-progress-label">
+                    <span>Progreso</span>
+                    <span id="stats-progress-text">Sin intentos</span>
+                </div>
+                <div class="stats-progress-bar">
+                    <div class="stats-progress-fill" id="stats-progress-fill" style="width: 0%"></div>
+                </div>
+            </div>
+
+            <div class="stats-hint" id="stats-hint">
+                <i class="fa-solid fa-lightbulb"></i>
+                <span>Escribí palabras para descubrir la palabra secreta</span>
+            </div>
+
+            <button class="btn-primary" id="btn-close-stats-action">Seguir Jugando</button>
+        </div>
+    </div>
+
+    <!-- Victory Modal -->
+    <div id="victory-modal" class="modal hidden">
+        <div class="modal-content victory-content">
+            <div class="victory-header" id="victory-header">
+                <i class="fa-solid fa-trophy" id="victory-icon"></i>
+                <h2 id="victory-title">¡Victoria!</h2>
+            </div>
+            <div class="winning-word-display">
+                <span class="rank-badge">#1</span>
+                <h1 id="winning-word">FRUTA</h1>
+            </div>
+
+            <div class="stats-grid">
+                <div class="stat-card">
+                    <span class="stat-label">Intentos</span>
+                    <span class="stat-value" id="victory-attempts">14</span>
+                </div>
+                <div class="stat-card">
+                    <span class="stat-label">Tiempo</span>
+                    <span class="stat-value" id="victory-time">02:45</span>
+                </div>
+            </div>
+
+            <div class="modal-actions">
+                <button class="btn-primary" id="btn-share"><i class="fa-solid fa-share-nodes"></i> Compartir</button>
+                <button class="btn-secondary" id="btn-new-word"><i class="fa-solid fa-rotate"></i> Nueva
+                    Palabra</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Help Modal -->
+    <div id="help-modal" class="modal hidden">
+        <div class="modal-content help-content">
+            <button class="modal-close" id="btn-close-help"><i class="fa-solid fa-xmark"></i></button>
+            <div class="help-illustration">
+                <i class="fa-solid fa-lightbulb"></i>
+            </div>
+            <h2>Cómo Jugar</h2>
+            <p>Encuentra la palabra secreta escribiendo palabras relacionadas. Cuanto más cerca esté semánticamente,
+                menor será el número de distancia.</p>
+            <p><strong>Pistas:</strong> Usa la bombilla para obtener una palabra que te acerque a la solución.</p>
+            <p><strong>Rendirse:</strong> Usa la bandera si no logras encontrarla; revelará la palabra secreta.</p>
+
+            <div class="examples-list">
+                <div class="example-card high-sim">
+                    <div class="ex-header">
+                        <span>Manzana</span>
+                        <span class="badge">#10</span>
+                    </div>
+                    <div class="ex-bar"></div>
+                    <p>Alta similitud (Cerca)</p>
+                </div>
+                <div class="example-card low-sim">
+                    <div class="ex-header">
+                        <span>Silla</span>
+                        <span class="badge">#5000</span>
+                    </div>
+                    <div class="ex-bar"></div>
+                    <p>Baja similitud (Lejos)</p>
+                </div>
+            </div>
+
+            <button class="btn-primary" id="btn-understood">¡Entendido!</button>
+        </div>
+    </div>
+
+    <!-- Generic Message Modal -->
+    <div id="message-modal" class="modal hidden">
+        <div class="modal-content message-content">
+            <button class="modal-close" id="btn-close-message"><i class="fa-solid fa-xmark"></i></button>
+            <div class="message-header">
+                <i class="fa-solid fa-circle-exclamation" id="message-icon"></i>
+                <h2 id="message-title">Aviso</h2>
+            </div>
+            <p id="message-text" class="message-body">Mensaje del sistema</p>
+            <button class="btn-primary" id="btn-message-ok">Aceptar</button>
+        </div>
+    </div>
+
+    <!-- Confirmation Modal -->
+    <div id="confirm-modal" class="modal hidden">
+        <div class="modal-content confirm-content">
+            <div class="message-header">
+                <i class="fa-solid fa-circle-question" id="confirm-icon"></i>
+                <h2 id="confirm-title">¿Seguro?</h2>
+            </div>
+            <p id="confirm-text" class="message-body">¿Desesa continuar?</p>
+            <div class="modal-actions">
+                <button class="btn-secondary" id="btn-confirm-cancel">Cancelar</button>
+                <button class="btn-primary" id="btn-confirm-ok">Confirmar</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Share Modal -->
+    <div id="share-modal" class="modal hidden">
+        <div class="modal-content share-content">
+            <button class="modal-close" id="btn-close-share"><i class="fa-solid fa-xmark"></i></button>
+            <div class="message-header">
+                <i class="fa-solid fa-share-nodes" id="share-icon"></i>
+                <h2 id="share-title">¡Comparte tu victoria!</h2>
+            </div>
+            <p class="message-body">Desafía a tus amigos a encontrar la palabra secreta.</p>
+
+            <div class="share-grid">
+                <button class="share-btn whatsapp" id="btn-share-wa" aria-label="WhatsApp">
+                    <i class="fa-brands fa-whatsapp"></i>
+                    <span>WhatsApp</span>
+                </button>
+                <button class="share-btn twitter" id="btn-share-tw" aria-label="X / Twitter">
+                    <i class="fa-brands fa-x-twitter"></i>
+                    <span>X</span>
+                </button>
+                <button class="share-btn facebook" id="btn-share-fb" aria-label="Facebook">
+                    <i class="fa-brands fa-facebook-f"></i>
+                    <span>Facebook</span>
+                </button>
+                <button class="share-btn copy" id="btn-share-copy" aria-label="Copiar Enlace">
+                    <i class="fa-regular fa-copy"></i>
+                    <span>Copiar</span>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Back to top: standalone, no FAB menu -->
+    <div class="floating-controls" id="floating-controls">
+        <button id="btn-back-to-top" class="floating-btn hidden" aria-label="Volver arriba">
+            <i class="fa-solid fa-arrow-up"></i>
+        </button>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>