Hugging Face's logo

Spaces:
LukasBe
/
hodlem-mastery
Running

App Files Community
hodlem-mastery / index.html
LukasBe's picture
LukasBe
Add 2 files
2af6410 verified
raw
history blame contribute delete
62.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Hold'em Mastery | Offline 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>
 @keyframes dealCard {
 0% { transform: translateY(-100px) rotate(-10deg); opacity: 0; }
 100% { transform: translateY(0) rotate(0deg); opacity: 1; }
 }
@keyframes chipGlow {
 0% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
 50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.8); }
 100% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
 }
.card-animate {
 animation: dealCard 0.5s ease-out forwards;
 }
.chip-glow {
 animation: chipGlow 1.5s infinite;
 }
.hand-strength-bar {
 height: 6px;
 background: linear-gradient(90deg, #ff5e5e 0%, #ffe600 50%, #4ade80 100%);
 }
.blur-filter {
 backdrop-filter: blur(5px);
 }
.table-felt {
 background: radial-gradient(circle, #1a5f1a 0%, #124712 70%, #0a300a 100%);
 }
.card {
 width: 80px;
 height: 120px;
 border-radius: 8px;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 }
.chip {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 transition: transform 0.2s;
 }
.chip:hover {
 transform: translateY(-5px);
 }
.action-button {
 transition: all 0.2s;
 transform-style: preserve-3d;
 }
.action-button:active {
 transform: translateY(2px) scale(0.98);
 }
.action-button::after {
 content: '';
 position: absolute;
 inset: 0;
 border-radius: 9999px;
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
 opacity: 0;
 transition: opacity 0.2s;
 }
.action-button:hover::after {
 opacity: 1;
 }
.tooltip {
 position: absolute;
 padding: 6px 12px;
 background: rgba(0, 0, 0, 0.8);
 color: white;
 border-radius: 4px;
 font-size: 12px;
 pointer-events: none;
 opacity: 0;
 transition: opacity 0.2s;
 z-index: 50;
 }
.has-tooltip:hover .tooltip {
 opacity: 1;
 }
/* Responsive adjustments */
 @media (max-width: 768px) {
 .card {
 width: 50px;
 height: 75px;
 font-size: 12px;
 }
.chip {
 width: 30px;
 height: 30px;
 font-size: 10px;
 }
.player-info {
 font-size: 12px;
 }
 }
 </style>
</head>
<body class="bg-gray-900 text-white font-sans overflow-x-hidden">
 <!-- App Container -->
 <div class="min-h-screen flex flex-col">
 <!-- Header/Navigation -->
 <header class="bg-gray-800 shadow-lg py-4 px-6 flex items-center justify-between sticky top-0 z-50">
 <div class="flex items-center space-x-4">
 <div class="bg-yellow-500 text-gray-900 font-bold rounded-full w-10 h-10 flex items-center justify-center">
 <i class="fas fa-spade"></i>
 </div>
 <h1 class="text-xl font-bold bg-gradient-to-r from-yellow-400 to-yellow-200 bg-clip-text text-transparent">
 Hold'em Mastery
 </h1>
 </div>
<nav class="hidden md:flex items-center space-x-6">
 <a href="#tutorials" class="hover:text-yellow-400 transition">Tutorials</a>
 <a href="#simulator" class="hover:text-yellow-400 transition">Simulator</a>
 <a href="#analytics" class="hover:text-yellow-400 transition">Analytics</a>
 <button id="help-btn" class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg transition">
 <i class="fas fa-question-circle mr-1"></i> Help
 </button>
 </nav>
<div class="flex items-center space-x-4">
 <button id="sound-toggle" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-gray-600 transition">
 <i class="fas fa-volume-up"></i>
 </button>
 <button id="menu-toggle" class="md:hidden w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-gray-600 transition">
 <i class="fas fa-bars"></i>
 </button>
 </div>
 </header>
<!-- Mobile Menu (Hidden by default) -->
 <div id="mobile-menu" class="hidden md:hidden bg-gray-800 shadow-lg py-3 px-6 fixed top-20 left-0 right-0 z-40">
 <nav class="flex flex-col space-y-3">
 <a href="#tutorials" class="hover:text-yellow-400 transition py-2">Tutorials</a>
 <a href="#simulator" class="hover:text-yellow-400 transition py-2">Simulator</a>
 <a href="#analytics" class="hover:text-yellow-400 transition py-2">Analytics</a>
 <button id="mobile-help-btn" class="text-left py-2 hover:text-yellow-400 transition">
 <i class="fas fa-question-circle mr-2"></i> Help
 </button>
 </nav>
 </div>
<!-- Main Content Area -->
 <main class="flex-grow p-4 md:p-6">
 <!-- Game View - Default Screen -->
 <div id="game-view" class="max-w-6xl mx-auto">
 <!-- Poker Table -->
 <div class="table-felt rounded-3xl shadow-xl p-6 md:p-8 relative overflow-hidden border-4 border-yellow-800">
 <!-- Table Decoration -->
 <div class="absolute inset-0 opacity-20 flex items-center justify-center">
 <div class="w-full h-full bg-repeat" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\"><text x=\"50\" y=\"50\" font-size=\"20\" fill=\"white\" opacity=\"0.3\" text-anchor=\"middle\" dominant-baseline=\"middle\">♠</text></svg>')"></div>
 </div>
<!-- Pot Display -->
 <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black bg-opacity-30 rounded-full px-4 py-2 flex items-center justify-center space-x-2 z-10">
 <div class="chip-glow bg-yellow-500 text-black font-bold">500</div>
 <span class="font-bold">Pot</span>
 </div>
<!-- Community Cards -->
 <div class="flex justify-center space-x-2 md:space-x-4 mb-16 md:mb-24 relative z-10">
 <!-- Placeholder for flop/turn/river cards -->
 <div class="card bg-gray-100"></div>
 <div class="card bg-gray-100"></div>
 <div class="card bg-gray-100"></div>
 <div class="card bg-gray-100 opacity-50"></div>
 <div class="card bg-gray-100 opacity-50"></div>
 </div>
<!-- Players (AI opponents) -->
 <div class="grid grid-cols-2 md:grid-cols-5 gap-4 relative z-10">
 <!-- Player 1 (Top Left) -->
 <div class="player-info bg-gray-800 bg-opacity-70 rounded-lg p-3 text-center">
 <div class="flex justify-center mb-1">
 <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
 <i class="fas fa-robot"></i>
 </div>
 </div>
 <div class="text-xs font-semibold">AI Player 1</div>
 <div class="text-xs">$2,450</div>
 <div class="inline-block mt-1 px-2 py-0.5 text-xs bg-gray-700 rounded-md">Folding 20%</div>
 </div>
<!-- Player 2 (Top Middle - only on larger screens) -->
 <div class="hidden md:block player-info bg-gray-800 bg-opacity-70 rounded-lg p-3 text-center">
 <div class="flex justify-center mb-1">
 <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center">
 <i class="fas fa-robot"></i>
 </div>
 </div>
 <div class="text-xs font-semibold">AI Player 2</div>
 <div class="text-xs">$1,780</div>
 <div class="inline-block mt-1 px-2 py-0.5 text-xs bg-gray-700 rounded-md">Raised</div>
 </div>
<!-- Player 3 (Top Right) -->
 <div class="player-info bg-gray-800 bg-opacity-70 rounded-lg p-3 text-center">
 <div class="flex justify-center mb-1">
 <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center">
 <i class="fas fa-robot"></i>
 </div>
 </div>
 <div class="text-xs font-semibold">AI Player 3</div>
 <div class="text-xs">$3,210</div>
 <div class="inline-block mt-1 px-2 py-0.5 text-xs bg-gray-700 rounded-md">Calling 70%</div>
 </div>
<!-- Player 4 (Bottom Right - only on larger screens) -->
 <div class="hidden md:block player-info bg-gray-800 bg-opacity-70 rounded-lg p-3 text-center">
 <div class="flex justify-center mb-1">
 <div class="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center">
 <i class="fas fa-robot"></i>
 </div>
 </div>
 <div class="text-xs font-semibold">AI Player 4</div>
 <div class="text-xs">$1,250</div>
 <div class="inline-block mt-1 px-2 py-0.5 text-xs bg-gray-700 rounded-md">All-in!</div>
 </div>
<!-- Player 5 (Bottom Left - only on larger screens) -->
 <div class="hidden md:block player-info bg-gray-800 bg-opacity-70 rounded-lg p-3 text-center">
 <div class="flex justify-center mb-1">
 <div class="w-8 h-8 rounded-full bg-yellow-500 flex items-center justify-center">
 <i class="fas fa-robot"></i>
 </div>
 </div>
 <div class="text-xs font-semibold">AI Player 5</div>
 <div class="text-xs">$2,920</div>
 <div class="inline-block mt-1 px-2 py-0.5 text-xs bg-gray-700 rounded-md">Checking</div>
 </div>
 </div>
<!-- User Player Area -->
 <div class="mt-8 md:mt-12 flex flex-col items-center relative z-10">
 <div class="bg-gray-800 bg-opacity-80 rounded-xl p-4 w-full max-w-md">
 <!-- User's Cards -->
 <div class="flex justify-center space-x-2 mb-4">
 <div class="card bg-white text-black flex flex-col items-center justify-center card-animate">
 <span class="text-red-500 text-xl font-bold">A</span>
 <span class="text-red-500">♥</span>
 </div>
 <div class="card bg-white text-black flex flex-col items-center justify-center card-animate" style="animation-delay: 0.1s">
 <span class="text-black text-xl font-bold">K</span>
 <span class="text-black">♠</span>
 </div>
 </div>
<!-- Hand Strength Indicator -->
 <div class="mb-4">
 <div class="text-xs font-semibold mb-1 flex justify-between">
 <span>Hand Strength:</span>
 <span>87% (Very Strong)</span>
 </div>
 <div class="hand-strength-bar rounded-full h-2 w-full">
 <div class="bg-blue-500 h-2 rounded-full" style="width: 87%"></div>
 </div>
 </div>
<!-- Action Buttons -->
 <div class="flex flex-wrap justify-center gap-2 mt-4">
 <button class="action-button bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg font-bold relative">
 <i class="fas fa-times mr-1"></i> Fold
 <span class="tooltip">Discard your hand and forfeit the current pot</span>
 </button>
 <button class="action-button bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg font-bold relative">
 <i class="fas fa-pause mr-1"></i> Check
 <span class="tooltip">Pass the action to the next player without betting</span>
 </button>
 <button class="action-button bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg font-bold relative">
 <i class="fas fa-check mr-1"></i> Call $50
 <span class="tooltip">Match the current bet of $50 to stay in the hand</span>
 </button>
 <button class="action-button bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg font-bold relative">
 <i class="fas fa-arrow-up mr-1"></i> Raise
 <span class="tooltip">Increase the current bet amount</span>
 </button>
 </div>
<!-- Betting Controls (Appears when Raise is selected) -->
 <div class="mt-4 bg-gray-700 rounded-lg p-3 hidden">
 <div class="flex items-center justify-between mb-2">
 <div class="text-sm font-semibold">Raise Amount:</div>
 <div class="text-sm font-bold">$150</div>
 </div>
 <input type="range" min="50" max="500" value="150" class="w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer">
 <div class="flex justify-between text-xs text-gray-300 mt-1">
 <span>Min: $50</span>
 <span>Max: $500</span>
 </div>
 <div class="flex justify-center mt-2">
 <button class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 px-4 py-1 rounded-lg font-bold">
 Confirm Raise
 </button>
 </div>
 </div>
<!-- Chip Selection -->
 <div class="mt-4 flex justify-center space-x-2">
 <div class="chip bg-red-600 text-white font-bold">5</div>
 <div class="chip bg-blue-600 text-white font-bold">25</div>
 <div class="chip bg-green-600 text-white font-bold">50</div>
 <div class="chip bg-yellow-500 text-black font-bold">100</div>
 <div class="chip bg-purple-600 text-white font-bold">500</div>
 <div class="chip bg-gray-100 text-black font-bold">1000</div>
 </div>
 </div>
 </div>
 </div>
<!-- Player Stats & Info -->
 <div class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
 <div class="bg-gray-800 rounded-lg p-4">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-bold text-yellow-400">Current Hand Stats</h3>
 <button class="text-gray-400 hover:text-white">
 <i class="fas fa-info-circle"></i>
 </button>
 </div>
 <div class="space-y-2 text-sm">
 <div class="flex justify-between">
 <span>Win Probability:</span>
 <span class="font-bold text-green-400">68%</span>
 </div>
 <div class="flex justify-between">
 <span>Expected Value:</span>
 <span class="font-bold">+$42.50</span>
 </div>
 <div class="flex justify-between">
 <span>Pot Odds:</span>
 <span class="font-bold">2.5:1</span>
 </div>
 <div class="flex justify-between">
 <span>Best Possible:</span>
 <span class="font-bold">Two Pair</span>
 </div>
 </div>
 </div>
<div class="bg-gray-800 rounded-lg p-4">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-bold text-yellow-400">Session Stats</h3>
 <button class="text-gray-400 hover:text-white">
 <i class="fas fa-chart-line"></i>
 </button>
 </div>
 <div class="space-y-2 text-sm">
 <div class="flex justify-between">
 <span>Hands Played:</span>
 <span class="font-bold">24</span>
 </div>
 <div class="flex justify-between">
 <span>Win Rate:</span>
 <span class="font-bold text-green-400">58%</span>
 </div>
 <div class="flex justify-between">
 <span>Profit/Loss:</span>
 <span class="font-bold text-green-400">+$320</span>
 </div>
 <div class="flex justify-between">
 <span>VPIP (Voluntarily Put $ In Pot):</span>
 <span class="font-bold">42%</span>
 </div>
 </div>
 </div>
<div class="bg-gray-800 rounded-lg p-4">
 <div class="flex items-center justify-between mb-2">
 <h3 class="font-bold text-yellow-400">Suggested Action</h3>
 <button class="text-gray-400 hover:text-white">
 <i class="fas fa-lightbulb"></i>
 </button>
 </div>
 <div class="bg-gray-700 rounded-lg p-3 text-sm">
 <div class="flex items-start">
 <div class="text-yellow-400 mr-2 mt-0.5">
 <i class="fas fa-check-circle"></i>
 </div>
 <div>
 <p class="font-bold">Recommendation: Call or Raise</p>
 <p class="text-gray-300 mt-1">You have a strong Ace-high with top kicker. The pot odds are favorable, and your hand has good potential to improve on later streets.</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Tutorial View (Hidden by default) -->
 <div id="tutorial-view" class="hidden max-w-6xl mx-auto">
 <div class="bg-gray-800 rounded-xl shadow-lg overflow-hidden">
 <div class="p-6 bg-gray-700">
 <h2 class="text-xl font-bold">Texas Hold'em Basics</h2>
 <p class="text-gray-300 mt-1">Learn the fundamental rules and strategies of poker</p>
 </div>
<div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-6">
 <!-- Tutorial Cards -->
 <div class="bg-gray-800 rounded-lg overflow-hidden border border-gray-700 hover:border-yellow-500 transition cursor-pointer">
 <div class="bg-gradient-to-r from-blue-800 to-blue-600 p-4">
 <div class="text-xl font-bold">Hand Rankings</div>
 <div class="text-sm opacity-80 mt-1">Learn what beats what</div>
 </div>
 <div class="p-4">
 <div class="flex justify-center space-x-2 mb-3">
 <div class="card bg-white text-black flex flex-col items-center justify-center">
 <span class="text-red-500 text-sm font-bold">A</span>
 <span class="text-red-500">♥</span>
 </div>
 <div class="card bg-white text-black flex flex-col items-center justify-center">
 <span class="text-red-500 text-sm font-bold">A</span>
 <span class="text-red-500">♠</span>
 </div>
 </div>
 <div class="text-sm text-gray-300">
 Understand the hierarchy of poker hands from high card to royal flush.
 </div>
 <button class="mt-3 w-full bg-blue-600 hover:bg-blue-700 text-white py-1 rounded-md text-sm">
 Start Lesson
 </button>
 </div>
 </div>
<div class="bg-gray-800 rounded-lg overflow-hidden border border-gray-700 hover:border-yellow-500 transition cursor-pointer">
 <div class="bg-gradient-to-r from-green-800 to-green-600 p-4">
 <div class="text-xl font-bold">Betting Rounds</div>
 <div class="text-sm opacity-80 mt-1">Pre-flop to River</div>
 </div>
 <div class="p-4">
 <div class="flex justify-center space-x-1 mb-3">
 <div class="w-6 h-6 rounded-full bg-yellow-500 text-black text-xs flex items-center justify-center font-bold">P</div>
 <div class="w-6 h-6 rounded-full bg-yellow-500 text-black text-xs flex items-center justify-center font-bold">F</div>
 <div class="w-6 h-6 rounded-full bg-blue-500 text-white text-xs flex items-center justify-center font-bold">T</div>
 <div class="w-6 h-6 rounded-full bg-red-500 text-white text-xs flex items-center justify-center font-bold">R</div>
 </div>
 <div class="text-sm text-gray-300">
 Master the flow of the game through each betting round and community card reveal.
 </div>
 <button class="mt-3 w-full bg-green-600 hover:bg-green-700 text-white py-1 rounded-md text-sm">
 Start Lesson
 </button>
 </div>
 </div>
<div class="bg-gray-800 rounded-lg overflow-hidden border border-gray-700 hover:border-yellow-500 transition cursor-pointer">
 <div class="bg-gradient-to-r from-purple-800 to-purple-600 p-4">
 <div class="text-xl font-bold">Position Play</div>
 <div class="text-sm opacity-80 mt-1">Why seat matters</div>
 </div>
 <div class="p-4">
 <div class="flex justify-center mb-3">
 <div class="relative w-20 h-20">
 <div class="absolute top-0 left-0 w-6 h-6 rounded-full bg-gray-700 flex items-center justify-center text-xs">BTN</div>
 <div class="absolute top-1/2 right-0 w-6 h-6 rounded-full bg-gray-700 flex items-center justify-center text-xs">SB</div>
 <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-6 h-6 rounded-full bg-green-500 flex items-center justify-center text-xs">
 <i class="fas fa-user"></i>
 </div>
 <div class="absolute top-1/2 left-0 w-6 h-6 rounded-full bg-gray-700 flex items-center justify-center text-xs">BB</div>
 </div>
 </div>
 <div class="text-sm text-gray-300">
 Learn how your position at the table affects your strategy and decision making.
 </div>
 <button class="mt-3 w-full bg-purple-600 hover:bg-purple-700 text-white py-1 rounded-md text-sm">
 Start Lesson
 </button>
 </div>
 </div>
 </div>
<div class="p-6 bg-gray-700 border-t border-gray-600">
 <div class="flex items-center justify-between">
 <div>
 <h3 class="font-semibold">Your Progress</h3>
 <p class="text-sm text-gray-300">2 of 10 lessons completed</p>
 </div>
 <div class="w-24 h-3 bg-gray-600 rounded-full overflow-hidden">
 <div class="h-full bg-yellow-500" style="width: 20%"></div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Analytics View (Hidden by default) -->
 <div id="analytics-view" class="hidden max-w-6xl mx-auto">
 <div class="bg-gray-800 rounded-xl shadow-lg overflow-hidden">
 <div class="p-6 bg-gray-700">
 <h2 class="text-xl font-bold">Player Analytics</h2>
 <p class="text-gray-300 mt-1">Review your performance and identify areas for improvement</p>
 </div>
<div class="p-6">
 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 <!-- Win Rate Chart -->
 <div class="bg-gray-900 rounded-lg p-4 border border-gray-700">
 <div class="flex items-center justify-between mb-3">
 <h3 class="font-semibold">Win Rate by Position</h3>
 <select class="bg-gray-800 text-sm rounded px-2 py-1">
 <option>Last 100 Hands</option>
 <option>Last 50 Hands</option>
 <option>All Time</option>
 </select>
 </div>
 <div class="h-48 flex items-end justify-between">
 <div class="flex flex-col items-center w-1/6">
 <div class="w-6 bg-blue-500" style="height: 30%;"></div>
 <div class="text-xs mt-1">BTN</div>
 <div class="text-xs text-blue-400">62%</div>
 </div>
 <div class="flex flex-col items-center w-1/6">
 <div class="w-6 bg-blue-500" style="height: 45%;"></div>
 <div class="text-xs mt-1">SB</div>
 <div class="text-xs text-blue-400">48%</div>
 </div>
 <div class="flex flex-col items-center w-1/6">
 <div class="w-6 bg-blue-500" style="height: 70%;"></div>
 <div class="text-xs mt-1">BB</div>
 <div class="text-xs text-blue-400">51%</div>
 </div>
 <div class="flex flex-col items-center w-1/6">
 <div class="w-6 bg-blue-500" style="height: 55%;"></div>
 <div class="text-xs mt-1">MP</div>
 <div class="text-xs text-blue-400">58%</div>
 </div>
 <div class="flex flex-col items-center w-1/6">
 <div class="w-6 bg-blue-500" style="height: 65%;"></div>
 <div class="text-xs mt-1">CO</div>
 <div class="text-xs text-blue-400">60%</div>
 </div>
 </div>
 </div>
<!-- VPIP/PFR -->
 <div class="bg-gray-900 rounded-lg p-4 border border-gray-700">
 <div class="flex items-center justify-between mb-3">
 <h3 class="font-semibold">VPIP / PFR</h3>
 <select class="bg-gray-800 text-sm rounded px-2 py-1">
 <option>Last 100 Hands</option>
 <option>Last 50 Hands</option>
 <option>All Time</option>
 </select>
 </div>
 <div class="flex items-center justify-center h-48">
 <div class="relative w-32 h-32">
 <svg class="w-full h-full" viewBox="0 0 100 100">
 <!-- Background circle -->
 <circle cx="50" cy="50" r="45" stroke="#374151" stroke-width="5" fill="none"/>
 <!-- VPIP (Voluntarily put $ in pot) -->
 <circle cx="50" cy="50" r="45" stroke="#3B82F6" stroke-width="5" fill="none"
 stroke-dasharray="282.743" stroke-dashoffset="70.6858" transform="rotate(-90 50 50)"/>
 <!-- PFR (Pre-flop raise) -->
 <circle cx="50" cy="50" r="35" stroke="#10B981" stroke-width="5" fill="none"
 stroke-dasharray="219.911" stroke-dashoffset="109.955" transform="rotate(-90 50 50)"/>
 </svg>
 <div class="absolute inset-0 flex flex-col items-center justify-center">
 <div class="text-2xl font-bold">28/18</div>
 <div class="text-xs text-gray-400">VPIP/PFR</div>
 </div>
 </div>
 </div>
 <div class="flex justify-center mt-2 text-xs space-x-4">
 <div class="flex items-center">
 <div class="w-3 h-3 bg-blue-500 mr-1"></div>
 <span>VPIP: 28%</span>
 </div>
 <div class="flex items-center">
 <div class="w-3 h-3 bg-green-500 mr-1"></div>
 <span>PFR: 18%</span>
 </div>
 </div>
 </div>
<!-- Hand Analysis -->
 <div class="bg-gray-900 rounded-lg p-4 border border-gray-700 col-span-1 md:col-span-2">
 <div class="flex items-center justify-between mb-3">
 <h3 class="font-semibold">Recent Hand Analysis</h3>
 <select class="bg-gray-800 text-sm rounded px-2 py-1">
 <option>Last 10 Hands</option>
 <option>Last 25 Hands</option>
 <option>All Hands Today</option>
 </select>
 </div>
 <div class="overflow-x-auto">
 <table class="min-w-full text-xs">
 <thead>
 <tr class="border-b border-gray-700">
 <th class="text-left py-2 px-1">Hand</th>
 <th class="text-left py-2 px-1">Cards</th>
 <th class="text-left py-2 px-1">Position</th>
 <th class="text-left py-2 px-1">Action</th>
 <th class="text-left py-2 px-1">Result</th>
 <th class="text-left py-2 px-1">Net</th>
 <th class="text-left py-2 px-1">Review</th>
 </tr>
 </thead>
 <tbody>
 <tr class="border-b border-gray-800 hover:bg-gray-800">
 <td class="py-2 px-1">#2479</td>
 <td class="py-2 px-1">
 <span class="text-red-500">A♥</span>
 <span class="text-black">K♠</span>
 </td>
 <td class="py-2 px-1">BTN</td>
 <td class="py-2 px-1">Raised, Called</td>
 <td class="py-2 px-1 text-green-400">Won</td>
 <td class="py-2 px-1 text-green-400">+$45</td>
 <td class="py-2 px-1">
 <button class="text-blue-400 hover:text-blue-300">
 <i class="fas fa-eye"></i>
 </button>
 </td>
 </tr>
 <tr class="border-b border-gray-800 hover:bg-gray-800">
 <td class="py-2 px-1">#2478</td>
 <td class="py-2 px-1">
 <span class="text-black">Q♣</span>
 <span class="text-black">J♣</span>
 </td>
 <td class="py-2 px-1">MP</td>
 <td class="py-2 px-1">Called</td>
 <td class="py-2 px-1 text-red-400">Lost</td>
 <td class="py-2 px-1 text-red-400">-$20</td>
 <td class="py-2 px-1">
 <button class="text-blue-400 hover:text-blue-300">
 <i class="fas fa-eye"></i>
 </button>
 </td>
 </tr>
 <tr class="border-b border-gray-800 hover:bg-gray-800">
 <td class="py-2 px-1">#2477</td>
 <td class="py-2 px-1">
 <span class="text-black">K♦</span>
 <span class="text-black">K♣</span>
 </td>
 <td class="py-2 px-1">BB</td>
 <td class="py-2 px-1">Raised, Called</td>
 <td class="py-2 px-1 text-green-400">Won</td>
 <td class="py-2 px-1 text-green-400">+$85</td>
 <td class="py-2 px-1">
 <button class="text-blue-400 hover:text-blue-300">
 <i class="fas fa-eye"></i>
 </button>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 <div class="mt-3 text-center">
 <button class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded">
 View All Hands
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Settings View (Hidden by default) -->
 <div id="settings-view" class="hidden max-w-3xl mx-auto">
 <div class="bg-gray-800 rounded-xl shadow-lg overflow-hidden">
 <div class="p-6 bg-gray-700">
 <h2 class="text-xl font-bold">Settings</h2>
 </div>
<div class="p-6">
 <div class="space-y-6">
 <!-- Game Settings -->
 <div>
 <h3 class="font-semibold border-b border-gray-700 pb-2 mb-4">Game Settings</h3>
 <div class="space-y-4">
 <div class="flex items-center justify-between">
 <div>
 <div class="text-sm font-medium">Sounds</div>
 <div class="text-xs text-gray-400">Enable or disable sound effects</div>
 </div>
 <label class="relative inline-flex items-center cursor-pointer">
 <input type="checkbox" value="" class="sr-only peer" checked>
 <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
 </label>
 </div>
<div class="flex items-center justify-between">
 <div>
 <div class="text-sm font-medium">Animations</div>
 <div class="text-xs text-gray-400">Toggle card and chip animations</div>
 </div>
 <label class="relative inline-flex items-center cursor-pointer">
 <input type="checkbox" value="" class="sr-only peer" checked>
 <div class="w-11 h-6 bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
 </label>
 </div>
<div class="flex items-center justify-between">
 <div>
 <div class="text-sm font-medium">AI Difficulty</div>
 <div class="text-xs text-gray-400">Set challenge level of AI opponents</div>
 </div>
 <select class="bg-gray-700 text-sm rounded px-3 py-1">
 <option>Beginner</option>
 <option selected>Intermediate</option>
 <option>Advanced</option>
 </select>
 </div>
 </div>
 </div>
<!-- Account Settings -->
 <div>
 <h3 class="font-semibold border-b border-gray-700 pb-2 mb-4">Account</h3>
 <div class="space-y-4">
 <div class="flex items-center justify-between">
 <div>
 <div class="text-sm font-medium">Player Name</div>
 <div class="text-xs text-gray-400">Your display name at tables</div>
 </div>
 <input type="text" value="Player1" class="bg-gray-700 text-sm rounded px-3 py-1 w-40">
 </div>
<div class="flex items-center justify-between">
 <div>
 <div class="text-sm font-medium">Starting Stack</div>
 <div class="text-xs text-gray-400">Chip count for new games</div>
 </div>
 <select class="bg-gray-700 text-sm rounded px-3 py-1">
 <option>1,000</option>
 <option selected>2,000</option>
 <option>5,000</option>
 <option>10,000</option>
 </select>
 </div>
 </div>
 </div>
<!-- Data Management -->
 <div>
 <h3 class="font-semibold border-b border-gray-700 pb-2 mb-4">Data</h3>
 <div class="space-y-4">
 <div class="flex items-center justify-between">
 <div>
 <div class="text-sm font-medium">Export Data</div>
 <div class="text-xs text-gray-400">Download your game history</div>
 </div>
 <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm">
 Export
 </button>
 </div>
<div class="flex items-center justify-between">
 <div>
 <div class="text-sm font-medium">Reset Data</div>
 <div class="text-xs text-gray-400">Clear all stats and history</div>
 </div>
 <button class="bg-red-600 hover:bg-red-700 px-3 py-1 rounded text-sm">
 Reset
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </main>
<!-- Bottom Navigation -->
 <nav class="bg-gray-800 shadow-lg py-2 px-4 flex justify-around md:hidden fixed bottom-0 left-0 right-0 z-50">
 <button class="nav-btn active p-2 rounded-lg text-center" data-view="game">
 <i class="fas fa-gamepad block text-2xl mb-1 text-yellow-400"></i>
 <span class="text-xs">Game</span>
 </button>
 <button class="nav-btn p-2 rounded-lg text-center" data-view="tutorial">
 <i class="fas fa-graduation-cap block text-2xl mb-1"></i>
 <span class="text-xs">Learn</span>
 </button>
 <button class="nav-btn p-2 rounded-lg text-center" data-view="analytics">
 <i class="fas fa-chart-bar block text-2xl mb-1"></i>
 <span class="text-xs">Stats</span>
 </button>
 <button class="nav-btn p-2 rounded-lg text-center" data-view="settings">
 <i class="fas fa-cog block text-2xl mb-1"></i>
 <span class="text-xs">Settings</span>
 </button>
 </nav>
<!-- Help Modal (Hidden by default) -->
 <div id="help-modal" class="hidden fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4">
 <div class="bg-gray-800 rounded-xl max-w-md w-full max-h-[90vh] overflow-y-auto">
 <div class="p-6 bg-gray-700 sticky top-0 flex justify-between items-center">
 <h2 class="text-xl font-bold">Help & Support</h2>
 <button id="close-help" class="text-2xl">&times;</button>
 </div>
<div class="p-6 space-y-6">
 <div>
 <h3 class="font-semibold text-lg mb-2">Getting Started</h3>
 <p class="text-gray-300">
 Welcome to Hold'em Mastery! This offline poker tutorial and simulator helps you learn and improve your Texas Hold'em skills.
 </p>
 </div>
<div>
 <h3 class="font-semibold text-lg mb-2">How to Play</h3>
 <div class="space-y-3 text-sm text-gray-300">
 <div class="flex items-start">
 <div class="bg-yellow-500 text-gray-900 rounded-full w-5 h-5 flex items-center justify-center mt-0.5 mr-2 flex-shrink-0">1</div>
 <p>Start with the tutorials to learn poker basics and strategies.</p>
 </div>
 <div class="flex items-start">
 <div class="bg-yellow-500 text-gray-900 rounded-full w-5 h-5 flex items-center justify-center mt-0.5 mr-2 flex-shrink-0">2</div>
 <p>Practice in the simulator against AI opponents of varying difficulty.</p>
 </div>
 <div class="flex items-start">
 <div class="bg-yellow-500 text-gray-900 rounded-full w-5 h-5 flex items-center justify-center mt-0.5 mr-2 flex-shrink-0">3</div>
 <p>Review your statistics in the analytics section to identify strengths and weaknesses.</p>
 </div>
 </div>
 </div>
<div>
 <h3 class="font-semibold text-lg mb-2">Features</h3>
 <ul class="list-disc list-inside text-sm text-gray-300 space-y-1">
 <li>Fully offline functionality - no internet required after loading</li>
 <li>Interactive lessons with guided feedback</li>
 <li>Adjustable AI difficulty levels</li>
 <li>Detailed hand analysis and statistics</li>
 <li>Progress tracking across devices</li>
 </ul>
 </div>
<div>
 <h3 class="font-semibold text-lg mb-2">Support</h3>
 <p class="text-gray-300 mb-2">
 For additional help or to report issues, please contact our support team.
 </p>
 <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg">
 Contact Support
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Install Prompt (Hidden by default) -->
 <div id="install-prompt" class="hidden fixed bottom-4 right-4 bg-gray-800 border border-gray2-600 rounded-lg shadow-xl z-50 max-w-xs">
 <div class="p-4">
 <div class="flex items-start">
 <div class="bg-yellow-500 text-gray-900 rounded-full w-6 h-6 flex items-center justify-center mt-0.5 mr-2 flex-shrink-0">
 <i class="fas fa-download"></i>
 </div>
 <div>
 <h3 class="font-semibold">Install Hold'em Mastery</h3>
 <p class="text-sm text-gray-300 mt-1">
 Add this app to your home screen for quick access and full offline play.
 </p>
 </div>
 </div>
 <div class="flex justify-end mt-3 space-x-2">
 <button id="cancel-install" class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded">
 Not Now
 </button>
 <button id="confirm-install" class="text-sm bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded">
 Install
 </button>
 </div>
 </div>
 </div>
 </div>
<script>
 // DOM Elements
 const gameView = document.getElementById('game-view');
 const tutorialView = document.getElementById('tutorial-view');
 const analyticsView = document.getElementById('analytics-view');
 const settingsView = document.getElementById('settings-view');
 const helpModal = document.getElementById('help-modal');
 const closeHelp = document.getElementById('close-help');
 const helpBtn = document.getElementById('help-btn');
 const mobileHelpBtn = document.getElementById('mobile-help-btn');
 const menuToggle = document.getElementById('menu-toggle');
 const mobileMenu = document.getElementById('mobile-menu');
 const navBtns = document.querySelectorAll('.nav-btn');
 const installPrompt = document.getElementById('install-prompt');
 const cancelInstall = document.getElementById('cancel-install');
 const confirmInstall = document.getElementById('confirm-install');
 const soundToggle = document.getElementById('sound-toggle');
// Mobile menu toggle
 menuToggle.addEventListener('click', () => {
 mobileMenu.classList.toggle('hidden');
 });
// Navigation controls
 navBtns.forEach(btn => {
 btn.addEventListener('click', () => {
 // Remove active class from all buttons
 navBtns.forEach(b => b.classList.remove('active', 'bg-gray-700', 'text-yellow-400'));
 navBtns.forEach(b => b.querySelector('span').classList.remove('text-yellow-400'));
 navBtns.forEach(b => b.querySelector('i').classList.remove('text-yellow-400'));
// Add active class to clicked button
 btn.classList.add('active', 'bg-gray-700');
 btn.querySelector('span').classList.add('text-yellow-400');
 btn.querySelector('i').classList.add('text-yellow-400');
// Show the corresponding view
 const view = btn.getAttribute('data-view');
// Hide all views
 gameView.classList.add('hidden');
 tutorialView.classList.add('hidden');
 analyticsView.classList.add('hidden');
 settingsView.classList.add('hidden');
// Show selected view
 if (view === 'game') {
 gameView.classList.remove('hidden');
 } else if (view === 'tutorial') {
 tutorialView.classList.remove('hidden');
 } else if (view === 'analytics') {
 analyticsView.classList.remove('hidden');
 } else if (view === 'settings') {
 settingsView.classList.remove('hidden');
 }
 });
 });
// Help modal controls
 helpBtn.addEventListener('click', () => {
 helpModal.classList.remove('hidden');
 });
mobileHelpBtn.addEventListener('click', () => {
 helpModal.classList.remove('hidden');
 mobileMenu.classList.add('hidden');
 });
closeHelp.addEventListener('click', () => {
 helpModal.classList.add('hidden');
 });
// Install prompt controls
 cancelInstall.addEventListener('click', () => {
 installPrompt.classList.add('hidden');
 });
confirmInstall.addEventListener('click', () => {
 // In a real app, this would trigger the PWA install prompt
 alert('App installation would be triggered here. For demo purposes, we\'re just showing the UI.');
 installPrompt.classList.add('hidden');
 });
// Simulate a delayed install prompt (would use PWA detection in a real app)
 setTimeout(() => {
 installPrompt.classList.remove('hidden');
 }, 15000);
// Sound toggle
 let soundOn = true;
 soundToggle.addEventListener('click', () => {
 soundOn = !soundOn;
 const icon = soundToggle.querySelector('i');
 icon.className = soundOn ? 'fas fa-volume-up' : 'fas fa-volume-mute';
 });
// Tooltip positioning
 document.querySelectorAll('.has-tooltip').forEach(el => {
 const tooltip = el.querySelector('.tooltip');
 el.addEventListener('mousemove', (e) => {
 tooltip.style.left = `${e.pageX + 10}px`;
 tooltip.style.top = `${e.pageY + 10}px`;
 });
 });
// Demo: Show community cards progressively
 if (gameView) {
 setTimeout(() => {
 const communityCards = document.querySelectorAll('#game-view .card');
// Show flop
 for (let i = 0; i < 3; i++) {
 setTimeout(() => {
 communityCards[i].innerHTML = `
 <div class="flex flex-col items-center justify-center h-full">
 ${getRandomCardHtml()}
 </div>
 `;
 communityCards[i].classList.add('card-animate');
 }, i * 200);
 }
// Show turn
 setTimeout(() => {
 communityCards[3].innerHTML = `
 <div class="flex flex-col items-center justify-center h-full">
 ${getRandomCardHtml()}
 </div>
 `;
 communityCards[3].classList.remove('opacity-50');
 communityCards[3].classList.add('card-animate');
 }, 1500);
// Show river
 setTimeout(() => {
 communityCards[4].innerHTML = `
 <div class="flex flex-col items-center justify-center h-full">
 ${getRandomCardHtml()}
 </div>
 `;
 communityCards[4].classList.remove('opacity-50');
 communityCards[4].classList.add('card-animate');
 }, 2500);
 }, 1000);
 }
// Helper function for demo
 function getRandomCardHtml() {
 const ranks = ['A', 'K', 'Q', 'J', '10', '9', '8', '7', '6', '5', '4', '3', '2'];
 const suits = ['♥', '♦', '♣', '♠'];
const rank = ranks[Math.floor(Math.random() * ranks.length)];
 const suit = suits[Math.floor(Math.random() * suits.length)];
const color = (suit === '♥' || suit === '♦') ? 'text-red-500' : 'text-black';
return `
 <span class="${color} text-xl font-bold">${rank}</span>
 <span class="${color}">${suit}</span>
 `;
 }
 </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/hodlem-mastery" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>