Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Checkmate Nexus | Play Chess vs AI</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.3/chess.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#10b981', // Emerald 500 | |
| secondary: '#6366f1', // Indigo 500 | |
| dark: '#0f172a', // Slate 900 | |
| surface: '#1e293b', // Slate 800 | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-dark text-gray-200 min-h-screen flex flex-col font-sans selection:bg-primary selection:text-white"> | |
| <!-- Navbar Component --> | |
| <custom-navbar></custom-navbar> | |
| <!-- Main Content --> | |
| <main class="flex-grow container mx-auto px-4 py-8 flex flex-col items-center justify-center"> | |
| <!-- Header Section --> | |
| <div class="text-center mb-8 animate-fade-in-down"> | |
| <h1 class="text-4xl md:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary mb-2"> | |
| Checkmate Nexus | |
| </h1> | |
| <p class="text-gray-400 text-lg">Challenge the AI in a battle of wits.</p> | |
| </div> | |
| <div class="flex flex-col lg:flex-row gap-8 w-full max-w-6xl items-start justify-center"> | |
| <!-- Chess Board Container --> | |
| <div class="w-full lg:w-auto flex flex-col items-center"> | |
| <!-- Status Bar --> | |
| <div class="w-full max-w-[600px] bg-surface rounded-t-xl p-4 flex justify-between items-center shadow-lg border-b border-gray-700"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-3 h-3 rounded-full bg-primary animate-pulse"></div> | |
| <span id="game-status" class="font-semibold text-gray-200">White to Move</span> | |
| </div> | |
| <button onclick="resetGame()" class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded transition flex items-center gap-1"> | |
| <i data-feather="refresh-cw" class="w-3 h-3"></i> Reset | |
| </button> | |
| </div> | |
| <!-- The Board --> | |
| <div id="board" class="w-full max-w-[600px] aspect-square bg-surface rounded-b-xl shadow-2xl overflow-hidden border-x border-b border-gray-700 relative"> | |
| <!-- Grid generated by JS --> | |
| </div> | |
| </div> | |
| <!-- Sidebar / Controls --> | |
| <div class="w-full lg:w-80 bg-surface rounded-xl p-6 shadow-xl border border-gray-700 flex flex-col gap-6 h-fit"> | |
| <!-- AI Settings --> | |
| <div> | |
| <h3 class="text-xl font-bold text-white mb-4 flex items-center gap-2"> | |
| <i data-feather="cpu"></i> AI Configuration | |
| </h3> | |
| <div class="mb-4"> | |
| <label class="block text-sm text-gray-400 mb-2">Difficulty (Depth)</label> | |
| <div class="flex bg-dark rounded-lg p-1"> | |
| <button onclick="setDifficulty(1)" class="diff-btn flex-1 py-1 text-sm rounded-md transition bg-primary text-white font-medium">Easy</button> | |
| <button onclick="setDifficulty(2)" class="diff-btn flex-1 py-1 text-sm rounded-md transition text-gray-400 hover:text-white">Med</button> | |
| <button onclick="setDifficulty(3)" class="diff-btn flex-1 py-1 text-sm rounded-md transition text-gray-400 hover:text-white">Hard</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Info --> | |
| <div class="flex-grow"> | |
| <h3 class="text-xl font-bold text-white mb-4 flex items-center gap-2"> | |
| <i data-feather="list"></i> Move History | |
| </h3> | |
| <div id="move-history" class="bg-dark rounded-lg p-3 h-48 overflow-y-auto text-sm font-mono text-gray-400 space-y-1 border border-gray-700"> | |
| <p class="text-center italic opacity-50">Game started...</p> | |
| </div> | |
| </div> | |
| <!-- Captured Pieces (Visual only) --> | |
| <div> | |
| <h3 class="text-sm font-bold text-gray-500 uppercase tracking-wider mb-2">Captured</h3> | |
| <div class="flex gap-2 text-2xl opacity-70"> | |
| <span id="captured-white" class="text-white"></span> | |
| </div> | |
| <div class="flex gap-2 text-2xl opacity-70 mt-1"> | |
| <span id="captured-black" class="text-gray-900 bg-white rounded-full w-6 h-6 flex items-center justify-center text-xs"></span> | |
| </div> | |
| </div> | |
| <!-- Call to Action --> | |
| <a href="https://github.com/public-apis/public-apis" target="_blank" class="mt-4 block w-full text-center py-3 bg-secondary hover:bg-indigo-600 text-white font-bold rounded-lg transition shadow-lg hover:shadow-secondary/50"> | |
| Learn More APIs | |
| </a> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer Component --> | |
| <custom-footer></custom-footer> | |
| <!-- Components --> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <!-- Logic --> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |