Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hold'em Mastery - Poker Tutorial & Simulator</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap'); | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%); | |
| color: #ffffff; | |
| overflow-x: hidden; | |
| } | |
| .casino-felt { | |
| background: radial-gradient(circle, #056608 0%, #033c05 100%); | |
| box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.8); | |
| } | |
| .card { | |
| width: 80px; | |
| height: 120px; | |
| border-radius: 8px; | |
| background: #ffffff; | |
| color: #000000; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-size: 24px; | |
| font-weight: bold; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); | |
| position: relative; | |
| transition: transform 0.3s ease; | |
| } | |
| .card.hearts, .card.diamonds { | |
| color: #e74c3c; | |
| } | |
| .card.clubs, .card.spades { | |
| color: #000000; | |
| } | |
| .card.face-down { | |
| background: linear-gradient(135deg, #3498db 0%, #2c3e50 100%); | |
| color: transparent; | |
| } | |
| .chip { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-weight: bold; | |
| font-size: 12px; | |
| color: white; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); | |
| cursor: pointer; | |
| transition: transform 0.2s ease; | |
| } | |
| .chip:hover { | |
| transform: scale(1.1); | |
| } | |
| .player-seat { | |
| position: absolute; | |
| width: 180px; | |
| height: 100px; | |
| border-radius: 10px; | |
| background: rgba(0, 0, 0, 0.7); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| transition: all 0.3s ease; | |
| border: 2px solid transparent; | |
| } | |
| .player-seat.active { | |
| border-color: #f39c12; | |
| box-shadow: 0 0 15px rgba(243, 156, 18, 0.5); | |
| } | |
| .player-seat.you { | |
| border-color: #2ecc71; | |
| box-shadow: 0 0 15px rgba(46, 204, 113, 0.5); | |
| } | |
| @keyframes dealCard { | |
| 0% { transform: scale(0.5) rotate(-180deg); opacity: 0; } | |
| 100% { transform: scale(1) rotate(0deg); opacity: 1; } | |
| } | |
| .deal-animation { | |
| animation: dealCard 0.5s ease-out forwards; | |
| } | |
| @keyframes pulseGold { | |
| 0% { box-shadow: 0 0 5px rgba(243, 156, 18, 0.5); } | |
| 50% { box-shadow: 0 0 20px rgba(243, 156, 18, 0.8); } | |
| 100% { box-shadow: 0 0 5px rgba(243, 156, 18, 0.5); } | |
| } | |
| .pulse-gold { | |
| animation: pulseGold 2s infinite; | |
| } | |
| .hand-strength-indicator { | |
| height: 4px; | |
| border-radius: 2px; | |
| margin-top: 5px; | |
| } | |
| .tutorial-modal { | |
| background: rgba(0, 0, 0, 0.9); | |
| backdrop-filter: blur(10px); | |
| } | |
| .scroll-hidden::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .scroll-hidden { | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Main Container --> | |
| <div class="relative min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="bg-black bg-opacity-80 text-white py-4 px-6 flex justify-between items-center border-b border-yellow-600 sticky top-0 z-50"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-crown text-yellow-400 text-2xl"></i> | |
| <h1 class="text-xl font-bold">Hold'em Mastery</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center space-x-2 text-yellow-400"> | |
| <i class="fas fa-coins"></i> | |
| <span id="balance" class="font-bold">10,000</span> | |
| </div> | |
| <button id="settings-btn" class="text-gray-300 hover:text-white"> | |
| <i class="fas fa-cog text-xl"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-1 flex flex-col lg:flex-row"> | |
| <!-- Left Sidebar - Menu & Information --> | |
| <aside class="lg:w-64 bg-black bg-opacity-70 p-4 border-r border-gray-800 hidden lg:block"> | |
| <div class="space-y-6"> | |
| <div class="space-y-2"> | |
| <h2 class="font-bold text-yellow-400 uppercase text-sm tracking-wider">Menu</h2> | |
| <ul class="space-y-1"> | |
| <li> | |
| <button class="w-full text-left px-3 py-2 rounded bg-yellow-900 bg-opacity-30 text-yellow-400 font-medium flex items-center space-x-2"> | |
| <i class="fas fa-play"></i> | |
| <span>Quick Play</span> | |
| </button> | |
| </li> | |
| <li> | |
| <button id="tutorials-btn" class="w-full text-left px-3 py-2 rounded hover:bg-gray-800 text-gray-300 font-medium flex items-center space-x-2"> | |
| <i class="fas fa-graduation-cap"></i> | |
| <span>Tutorials</span> | |
| </button> | |
| </li> | |
| <li> | |
| <button class="w-full text-left px-3 py-2 rounded hover:bg-gray-800 text-gray-300 font-medium flex items-center space-x-2"> | |
| <i class="fas fa-chart-line"></i> | |
| <span>Statistics</span> | |
| </button> | |
| </li> | |
| <li> | |
| <button class="w-full text-left px-3 py-2 rounded hover:bg-gray-800 text-gray-300 font-medium flex items-center space-x-2"> | |
| <i class="fas fa-trophy"></i> | |
| <span>Achievements</span> | |
| </button> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="space-y-2"> | |
| <h2 class="font-bold text-yellow-400 uppercase text-sm tracking-wider">Game Info</h2> | |
| <div class="bg-gray-900 bg-opacity-50 rounded p-3"> | |
| <div class="grid grid-cols-2 gap-2 text-sm"> | |
| <div class="text-gray-400">Blinds:</div> | |
| <div class="text-right font-medium">100/200</div> | |
| <div class="text-gray-400">Players:</div> | |
| <div class="text-right font-medium">6/6</div> | |
| <div class="text-gray-400">AI Level:</div> | |
| <div class="text-right font-medium">Intermediate</div> | |
| <div class="text-gray-400">Hands Played:</div> | |
| <div class="text-right font-medium">42</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h2 class="font-bold text-yellow-400 uppercase text-sm tracking-wider mb-2">Player Progress</h2> | |
| <div class="bg-gray-900 bg-opacity-50 rounded p-3 space-y-2"> | |
| <div> | |
| <div class="flex justify-between text-sm"> | |
| <span>Beginner Basics</span> | |
| <span>80%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 h-2 rounded-full overflow-hidden"> | |
| <div class="bg-blue-500 h-full" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm"> | |
| <span>Betting Strategy</span> | |
| <span>45%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 h-2 rounded-full overflow-hidden"> | |
| <div class="bg-green-500 h-full" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm"> | |
| <span>Bluff Detection</span> | |
| <span>20%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 h-2 rounded-full overflow-hidden"> | |
| <div class="bg-yellow-500 h-full" style="width: 20%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Game Area --> | |
| <div class="flex-1 flex flex-col"> | |
| <!-- Mobile Menu Toggle --> | |
| <div class="lg:hidden p-2 border-b border-gray-800 flex justify-between bg-black bg-opacity-70"> | |
| <button id="mobile-menu-btn" class="px-3 py-2 rounded text-gray-300 hover:text-white"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <div class="flex space-x-4"> | |
| <button id="mobile-tutorials-btn" class="text-gray-300 hover:text-white"> | |
| <i class="fas fa-graduation-cap"></i> | |
| </button> | |
| <button class="text-gray-300 hover:text-white"> | |
| <i class="fas fa-chart-line"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Poker Table --> | |
| <div class="flex-1 relative overflow-hidden"> | |
| <div class="casino-felt absolute inset-0 rounded-t-lg lg:rounded-none"> | |
| <!-- Table Center with Community Cards --> | |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> | |
| <div class="bg-black bg-opacity-30 rounded-lg p-3 flex flex-col items-center"> | |
| <div class="text-gray-300 text-sm mb-2">Pot: <span class="text-yellow-400 font-bold text-lg">1,750</span></div> | |
| <div class="flex space-x-2 mb-4"> | |
| <div class="card hearts deal-animation" style="animation-delay: 0.5s">A♥</div> | |
| <div class="card diamonds deal-animation" style="animation-delay: 0.6s">K♦</div> | |
| <div class="card clubs deal-animation" style="animation-delay: 0.7s">10♣</div> | |
| <div class="card spades deal-animation" style="animation-delay: 0.8s">3♠</div> | |
| <div class="card face-down">?</div> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <div class="bg-gray-900 bg-opacity-80 rounded px-3 py-1 text-sm text-yellow-400"> | |
| Flop | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Player Seats --> | |
| <div class="player-seat" style="top: 10%; left: 50%; transform: translateX(-50%);"> | |
| <div class="text-xs text-gray-300">AI Joe</div> | |
| <div class="flex space-x-1 mt-1"> | |
| <div class="card spades">2♠</div> | |
| <div class="card spades">7♠</div> | |
| </div> | |
| <div class="text-xs text-green-500 font-bold mt-1">Calls</div> | |
| <div class="text-xs text-yellow-400">1,200 chips</div> | |
| </div> | |
| <div class="player-seat" style="top: 20%; right: 5%;"> | |
| <div class="text-xs text-gray-300">AI Mike</div> | |
| <div class="flex space-x-1 mt-1"> | |
| <div class="card face-down">?</div> | |
| <div class="card face-down">?</div> | |
| </div> | |
| <div class="text-xs text-gray-400 font-bold mt-1">Folded</div> | |
| </div> | |
| <div class="player-seat" style="bottom: 40%; right: 5%;"> | |
| <div class="text-xs text-gray-300">AI Sarah</div> | |
| <div class="flex space-x-1 mt-1"> | |
| <div class="card face-down">?</div> | |
| <div class="card face-down">?</div> | |
| </div> | |
| <div class="text-xs text-gray-400 font-bold mt-1">Folded</div> | |
| </div> | |
| <div class="player-seat active" style="bottom: 10%; left: 50%; transform: translateX(-50%);"> | |
| <div class="text-xs text-gray-300">AI Tom</div> | |
| <div class="flex space-x-1 mt-1"> | |
| <div class="card face-down">?</div> | |
| <div class="card face-down">?</div> | |
| </div> | |
| <div class="text-xs text-blue-500 font-bold mt-1">Checks</div> | |
| </div> | |
| <div class="player-seat active" style="bottom: 40%; left: 5%;"> | |
| <div class="text-xs text-gray-300">AI Lisa</div> | |
| <div class="flex space-x-1 mt-1"> | |
| <div class="card face-down">?</div> | |
| <div class="card face-down">?</div> | |
| </div> | |
| <div class="text-xs text-blue-500 font-bold mt-1">Checks</div> | |
| </div> | |
| <div class="player-seat you pulse-gold" style="top: 20%; left: 5%;"> | |
| <div class="text-xs text-green-400 font-bold">YOU</div> | |
| <div class="flex space-x-1 mt-1"> | |
| <div class="card hearts">Q♥</div> | |
| <div class="card hearts">J♥</div> | |
| </div> | |
| <div class="flex justify-center w-full mt-1"> | |
| <div class="hand-strength-indicator bg-gradient-to-r from-red-500 via-yellow-500 to-green-500" style="width: 70%"></div> | |
| </div> | |
| <div class="text-xs text-green-500 mt-1">Flush Draw</div> | |
| <div class="text-xs text-yellow-400">5,420 chips</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Player Controls --> | |
| <div class="bg-black bg-opacity-90 p-4 border-t border-yellow-600"> | |
| <div class="max-w-3xl mx-auto"> | |
| <!-- Action Buttons --> | |
| <div class="flex justify-center space-x-3 mb-4"> | |
| <button class="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg font-bold flex items-center space-x-2"> | |
| <i class="fas fa-times"></i> | |
| <span>Fold</span> | |
| </button> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-bold flex items-center space-x-2"> | |
| <i class="fas fa-exchange-alt"></i> | |
| <span>Check</span> | |
| </button> | |
| <button class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-bold flex items-center space-x-2"> | |
| <i class="fas fa-check"></i> | |
| <span>Call 400</span> | |
| </button> | |
| <button class="bg-yellow-600 hover:bg-yellow-700 text-white px-6 py-3 rounded-lg font-bold flex items-center space-x-2"> | |
| <i class="fas fa-plus"></i> | |
| <span>Raise</span> | |
| </button> | |
| </div> | |
| <!-- Betting Slider --> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-xs text-gray-400 mb-1"> | |
| <span>Min: 400</span> | |
| <span>Max: 5,420</span> | |
| </div> | |
| <input type="range" min="400" max="5420" value="800" class="w-full h-3 bg-gray-700 rounded-lg appearance-none cursor-pointer"> | |
| <div class="flex justify-between"> | |
| <span class="text-sm text-gray-300">Raise to: 1,200</span> | |
| <button class="text-xs text-yellow-400 hover:text-yellow-300">Set Pot Bet</button> | |
| </div> | |
| </div> | |
| <!-- Quick Bet Chips --> | |
| <div class="flex justify-center space-x-2"> | |
| <div class="chip bg-red-500">400</div> | |
| <div class="chip bg-blue-500">1,000</div> | |
| <div class="chip bg-purple-500">1,500</div> | |
| <div class="chip bg-green-500">2,000</div> | |
| <div class="chip bg-yellow-500">All-in</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Sidebar - Game Info & Coaching --> | |
| <aside class="lg:w-72 bg-black bg-opacity-70 p-4 border-l border-gray-800 hidden lg:block"> | |
| <div class="space-y-6"> | |
| <div> | |
| <h2 class="font-bold text-yellow-400 uppercase text-sm tracking-wider mb-2 flex items-center space-x-2"> | |
| <i class="fas fa-robot"></i> | |
| <span>AI Coaching</span> | |
| </h2> | |
| <div class="bg-gray-900 bg-opacity-50 rounded-lg p-4"> | |
| <div class="flex items-start space-x-2 mb-3"> | |
| <div class="bg-blue-600 rounded-full w-8 h-8 flex items-center justify-center text-white"> | |
| <i class="fas fa-lightbulb"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="text-sm font-medium text-blue-300">Current Situation</div> | |
| <div class="text-xs text-gray-300 mt-1">You have a strong flush draw with 2 overcards (Queen & Jack). There are 5 opponents in the hand with 3 remaining active.</div> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-2 mb-3"> | |
| <div class="bg-purple-600 rounded-full w-8 h-8 flex items-center justify-center text-white"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="text-sm font-medium text-purple-300">Hand Strength</div> | |
| <div class="text-xs text-gray-300 mt-1"> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <div>Flush draw: <span class="text-green-400">38%</span></div> | |
| <div>Pair Q/J: <span class="text-yellow-400">25%</span></div> | |
| <div>Two pair: <span class="text-blue-400">10%</span></div> | |
| <div>Straight: <span class="text-red-400">5%</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-2"> | |
| <div class="bg-yellow-600 rounded-full w-8 h-8 flex items-center justify-center text-white"> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="text-sm font-medium text-yellow-300">Recommended Action</div> | |
| <div class="text-xs text-gray-300 mt-1">A semi-bluff raise of 3-4x the current bet (1,200-1,600) would be optimal given your position and hand potential.</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h2 class="font-bold text-yellow-400 uppercase text-sm tracking-wider mb-2 flex items-center space-x-2"> | |
| <i class="fas fa-history"></i> | |
| <span>Hand History</span> | |
| </h2> | |
| <div class="bg-gray-900 bg-opacity-50 rounded-lg p-3 max-h-60 overflow-y-auto scroll-hidden"> | |
| <div class="space-y-2"> | |
| <div class="text-xs text-gray-400 border-b border-gray-800 pb-2"> | |
| <div class="font-medium">Pre-flop</div> | |
| <div class="text-xxs">You: Raise to 400</div> | |
| <div class="text-xxs">AI Joe: Calls 400</div> | |
| <div class="text-xxs">AI Mike: Folds</div> | |
| </div> | |
| <div class="text-xs text-gray-400 border-b border-gray-800 pb-2"> | |
| <div class="font-medium">Flop</div> | |
| <div class="text-xxs">A♥ K♦ 10♣</div> | |
| <div class="text-xxs">AI Lisa: Checks</div> | |
| <div class="text-xxs">AI Tom: Checks</div> | |
| <div class="text-xxs">AI Joe: Bets 400</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h2 class="font-bold text-yellow-400 uppercase text-sm tracking-wider mb-2 flex items-center space-x-2"> | |
| <i class="fas fa-chart-pie"></i> | |
| <span>Quick Stats</span> | |
| </h2> | |
| <div class="bg-gray-900 bg-opacity-50 rounded-lg p-3 grid grid-cols-2 gap-4 text-xs"> | |
| <div class="space-y-1"> | |
| <div class="text-gray-400">VPIP</div> | |
| <div class="text-lg font-bold text-green-400">28%</div> | |
| </div> | |
| <div class="space-y-1"> | |
| <div class="text-gray-400">PFR</div> | |
| <div class="text-lg font-bold text-blue-400">18%</div> | |
| </div> | |
| <div class="space-y-1"> | |
| <div class="text-gray-400">3-Bet</div> | |
| <div class="text-lg font-bold text-yellow-400">9%</div> | |
| </div> | |
| <div class="space-y-1"> | |
| <div class="text-gray-400">Win Rate</div> | |
| <div class="text-lg font-bold">12bb/100</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |
| </main> | |
| <!-- Mobile Bottom Navigation --> | |
| <div class="lg:hidden bg-black bg-opacity-90 border-t border-gray-800 flex justify-around py-3"> | |
| <button class="flex flex-col items-center text-gray-400 hover:text-yellow-400"> | |
| <i class="fas fa-home text-xl mb-1"></i> | |
| <span class="text-xxs">Home</span> | |
| </button> | |
| <button id="mobile-coaching-btn" class="flex flex-col items-center text-gray-400 hover:text-blue-400"> | |
| <i class="fas fa-robot text-xl mb-1"></i> | |
| <span class="text-xxs">Coaching</span> | |
| </button> | |
| <button class="flex flex-col items-center text-yellow-400"> | |
| <i class="fas fa-play-circle text-xl mb-1"></i> | |
| <span class="text-xxs">Play</span> | |
| </button> | |
| <button id="mobile-stats-btn" class="flex flex-col items-center text-gray-400 hover:text-green-400"> | |
| <i class="fas fa-chart-line text-xl mb-1"></i> | |
| <span class="text-xxs">Stats</span> | |
| </button> | |
| <button class="flex flex-col items-center text-gray-400 hover:text-purple-400"> | |
| <i class="fas fa-cog text-xl mb-1"></i> | |
| <span class="text-xxs">Settings</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu Modal --> | |
| <div id="mobile-menu-modal" class="fixed inset-0 bg-black bg-opacity-90 z-50 flex flex-col hidden"> | |
| <div class="p-4 flex justify-between items-center border-b border-gray-800"> | |
| <h2 class="text-xl font-bold text-yellow-400">Menu</h2> | |
| <button id="close-mobile-menu" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times text-2xl"></i> | |
| </button> | |
| </div> | |
| <div class="flex-1 p-4 overflow-y-auto"> | |
| <ul class="space-y-2"> | |
| <li> | |
| <button class="w-full text-left px-4 py-3 rounded-lg bg-gray-800 text-white font-medium flex items-center space-x-3"> | |
| <i class="fas fa-play text-lg text-green-400"></i> | |
| <span>Quick Play</span> | |
| </button> | |
| </li> | |
| <li> | |
| <button id="mobile-tutorials-menu-btn" class="w-full text-left px-4 py-3 rounded-lg bg-gray-800 text-white font-medium flex items-center space-x-3"> | |
| <i class="fas fa-graduation-cap text-lg text-blue-400"></i> | |
| <span>Tutorials</span> | |
| </button> | |
| </li> | |
| <li> | |
| <button class="w-full text-left px-4 py-3 rounded-lg bg-gray-800 text-white font-medium flex items-center space-x-3"> | |
| <i class="fas fa-chart-line text-lg text-purple-400"></i> | |
| <span>Statistics</span> | |
| </button> | |
| </li> | |
| <li> | |
| <button class="w-full text-left px-4 py-3 rounded-lg bg-gray-800 text-white font-medium flex items-center space-x-3"> | |
| <i class="fas fa-trophy text-lg text-yellow-400"></i> | |
| <span>Achievements</span> | |
| </button> | |
| </li> | |
| <li> | |
| <button class="w-full text-left px-4 py-3 rounded-lg bg-gray-800 text-white font-medium flex items-center space-x-3"> | |
| <i class="fas fa-cog text-lg text-gray-400"></i> | |
| <span>Settings</span> | |
| </button> | |
| </li> | |
| </ul> | |
| <div class="mt-8"> | |
| <h3 class="text-gray-400 text-sm uppercase mb-3">Player Progress</h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-gray-300">Beginner Basics</span> | |
| <span class="text-yellow-400">80%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 h-2 rounded-full overflow-hidden"> | |
| <div class="bg-blue-500 h-full" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-gray-300">Betting Strategy</span> | |
| <span class="text-yellow-400">45%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 h-2 rounded-full overflow-hidden"> | |
| <div class="bg-green-500 h-full" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-gray-300">Bluff Detection</span> | |
| <span class="text-yellow-400">20%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 h-2 rounded-full overflow-hidden"> | |
| <div class="bg-yellow-500 h-full" style="width: 20%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tutorial Modal --> | |
| <div id="tutorial-modal" class="fixed inset-0 bg-black bg-opacity-90 z-50 flex justify-center items-center hidden tutorial-modal"> | |
| <div class="bg-gray-900 bg-opacity-90 rounded-lg max-w-md w-full mx-4 border border-yellow-500 overflow-hidden"> | |
| <div class="p-4 bg-gradient-to-b from-gray-800 to-gray-900 border-b border-yellow-500 flex justify-between items-center"> | |
| <h2 class="text-xl font-bold text-yellow-400"> | |
| <i class="fas fa-graduation-cap mr-2"></i> | |
| Poker Basics | |
| </h2> | |
| <button id="close-tutorial" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times text-xl"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-4"> | |
| <h3 class="text-lg font-semibold text-white mb-2">Lesson 1: Hand Rankings</h3> | |
| <div class="text-sm text-gray-300 mb-4"> | |
| <p>The first step to mastering poker is understanding hand values:</p> | |
| <ol class="list-decimal pl-5 mt-2 space-y-1"> | |
| <li>Royal Flush: A-K-Q-J-10, all same suit</li> | |
| <li>Straight Flush: Five cards in sequence, same suit</li> | |
| <li>Four of a Kind: Four cards of the same rank</li> | |
| <li>Full House: Three of a kind plus a pair</li> | |
| <li>Flush: Five cards of the same suit</li> | |
| <li>Straight: Five cards in sequence</li> | |
| <li>Three of a Kind: Three cards of the same rank</li> | |
| <li>Two Pair: Two different pairs</li> | |
| <li>One Pair: Two cards of the same rank</li> | |
| <li>High Card: The highest card when no other hand is made</li> | |
| </ol> | |
| </div> | |
| <div class="bg-gray-800 p-3 rounded-lg"> | |
| <div class="flex space-x-2 overflow-x-auto pb-2"> | |
| <div class="card hearts">A♥</div> | |
| <div class="card hearts">K♥</div> | |
| <div class="card hearts">Q♥</div> | |
| <div class="card hearts">J♥</div> | |
| <div class="card hearts">10♥</div> | |
| </div> | |
| <div class="text-xs text-center mt-2 text-yellow-400">Royal Flush - The strongest possible hand</div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between border-t border-gray-800 pt-4"> | |
| <button class="px-4 py-2 rounded-lg bg-gray-700 text-gray-300 text-sm font-medium"> | |
| <i class="fas fa-arrow-left mr-2"></i> Back | |
| </button> | |
| <button class="px-4 py-2 rounded-lg bg-yellow-600 text-white text-sm font-medium"> | |
| Next <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Coaching Panel (Mobile) --> | |
| <div id="mobile-coaching-panel" class="fixed bottom-0 left-0 right-0 bg-black bg-opacity-90 border-t border-gray-800 z-40 hidden transform translate-y-full"> | |
| <div class="p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h3 class="text-lg font-bold text-blue-400"> | |
| <i class="fas fa-robot mr-2"></i> | |
| AI Coaching | |
| </h3> | |
| <button id="close-coaching" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="text-xs text-gray-300 mb-4"> | |
| You have a strong flush draw with 2 overcards (Queen & Jack). A semi-bluff raise of 3-4x the current bet (1,200-1,600) would be optimal. | |
| </div> | |
| <div class="grid grid-cols-2 gap-2 text-xxs"> | |
| <div class="bg-gray-800 p-2 rounded"> | |
| <div class="text-green-400 font-bold mb-1">Flush draw</div> | |
| <div class="text-gray-300">38% chance</div> | |
| </div> | |
| <div class="bg-gray-800 p-2 rounded"> | |
| <div class="text-yellow-400 font-bold mb-1">Pair Q/J</div> | |
| <div class="text-gray-300">25% chance</div> | |
| </div> | |
| <div class="bg-gray-800 p-2 rounded"> | |
| <div class="text-blue-400 font-bold mb-1">Two pair</div> | |
| <div class="text-gray-300">10% chance</div> | |
| </div> | |
| <div class="bg-gray-800 p-2 rounded"> | |
| <div class="text-red-400 font-bold mb-1">Straight</div> | |
| <div class="text-gray-300">5% chance</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stats Panel (Mobile) --> | |
| <div id="mobile-stats-panel" class="fixed bottom-0 left-0 right-0 bg-black bg-opacity-90 border-t border-gray-800 z-40 hidden transform translate-y-full"> | |
| <div class="p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h3 class="text-lg font-bold text-green-400"> | |
| <i class="fas fa-chart-pie mr-2"></i> | |
| Quick Stats | |
| </h3> | |
| <button id="close-stats" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 text-xs"> | |
| <div class="space-y-1"> | |
| <div class="text-gray-400">VPIP</div> | |
| <div class="text-lg font-bold text-green-400">28%</div> | |
| </div> | |
| <div class="space-y-1"> | |
| <div class="text-gray-400">PFR</div> | |
| <div class="text-lg font-bold text-blue-400">18%</div> | |
| </div> | |
| <div class="space-y-1"> | |
| <div class="text-gray-400">3-Bet</div> | |
| <div class="text-lg font-bold text-yellow-400">9%</div> | |
| </div> | |
| <div class="space-y-1"> | |
| <div class="text-gray-400">Win Rate</div> | |
| <div class="text-lg font-bold">12bb/100</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Mobile Menu Toggle | |
| document.getElementById('mobile-menu-btn').addEventListener('click', function() { | |
| document.getElementById('mobile-menu-modal').classList.remove('hidden'); | |
| }); | |
| document.getElementById('close-mobile-menu').addEventListener('click', function() { | |
| document.getElementById('mobile-menu-modal').classList.add('hidden'); | |
| }); | |
| // Tutorial Modal | |
| document.getElementById('tutorials-btn').addEventListener('click', function() { | |
| document.getElementById('tutorial-modal').classList.remove('hidden'); | |
| }); | |
| document.getElementById('mobile-tutorials-btn').addEventListener('click', function() { | |
| document.getElementById('tutorial-modal').classList.remove('hidden'); | |
| }); | |
| document.getElementById('mobile-tutorials-menu-btn').addEventListener('click', function() { | |
| document.getElementById('tutorial-modal').classList.remove('hidden'); | |
| document.getElementById('mobile-menu-modal').classList.add('hidden'); | |
| }); | |
| document.getElementById('close-tutorial').addEventListener('click', function() { | |
| document.getElementById('tutorial-modal').classList.add('hidden'); | |
| }); | |
| // Mobile Coaching Panel | |
| document.getElementById('mobile-coaching-btn').addEventListener('click', function() { | |
| document.getElementById('mobile-coaching-panel').classList.remove('hidden'); | |
| document.getElementById('mobile-coaching-panel').classList.remove('translate-y-full'); | |
| document.getElementById('mobile-coaching-panel').classList.add('translate-y-0'); | |
| }); | |
| document.getElementById('close-coaching').addEventListener('click', function() { | |
| document.getElementById('mobile-coaching-panel').classList.add('translate-y-full'); | |
| setTimeout(() => { | |
| document.getElementById('mobile-coaching-panel').classList.add('hidden'); | |
| }, 300); | |
| }); | |
| // Mobile Stats Panel | |
| document.getElementById('mobile-stats-btn').addEventListener('click', function() { | |
| document.getElementById('mobile-stats-panel').classList.remove('hidden'); | |
| document.getElementById('mobile-stats-panel').classList.remove('translate-y-full'); | |
| document.getElementById('mobile-stats-panel').classList.add('translate-y-0'); | |
| }); | |
| document.getElementById('close-stats').addEventListener('click', function() { | |
| document.getElementById('mobile-stats-panel').classList.add('translate-y-full'); | |
| setTimeout(() => { | |
| document.getElementById('mobile-stats-panel').classList.add('hidden'); | |
| }, 300); | |
| }); | |
| // Animation for dealing cards | |
| setTimeout(() => { | |
| const cards = document.querySelectorAll('.deal-animation'); | |
| cards.forEach(card => { | |
| card.style.opacity = '1'; | |
| }); | |
| }, 100); | |
| </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=LukasBe/held-em-mastery" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p><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=sudo-soldier/holdem" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |