Hugging Face's logo

Spaces:
LukasBe
/
hodlem-mastery
Running

App Files Community
LukasBe commited on
Commit
2af6410
·
verified ·
1 Parent(s): 0e9b826

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1059 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Hodlem Mastery
3
- emoji: 🏢
4
- colorFrom: yellow
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: hodlem-mastery
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1059 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Hold'em Mastery | Offline Poker Tutorial & Simulator</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @keyframes dealCard {
11
+ 0% { transform: translateY(-100px) rotate(-10deg); opacity: 0; }
12
+ 100% { transform: translateY(0) rotate(0deg); opacity: 1; }
13
+ }
14
+
15
+ @keyframes chipGlow {
16
+ 0% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
17
+ 50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.8); }
18
+ 100% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
19
+ }
20
+
21
+ .card-animate {
22
+ animation: dealCard 0.5s ease-out forwards;
23
+ }
24
+
25
+ .chip-glow {
26
+ animation: chipGlow 1.5s infinite;
27
+ }
28
+
29
+ .hand-strength-bar {
30
+ height: 6px;
31
+ background: linear-gradient(90deg, #ff5e5e 0%, #ffe600 50%, #4ade80 100%);
32
+ }
33
+
34
+ .blur-filter {
35
+ backdrop-filter: blur(5px);
36
+ }
37
+
38
+ .table-felt {
39
+ background: radial-gradient(circle, #1a5f1a 0%, #124712 70%, #0a300a 100%);
40
+ }
41
+
42
+ .card {
43
+ width: 80px;
44
+ height: 120px;
45
+ border-radius: 8px;
46
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
47
+ }
48
+
49
+ .chip {
50
+ width: 40px;
51
+ height: 40px;
52
+ border-radius: 50%;
53
+ display: flex;
54
+ align-items: center;
55
+ justify-content: center;
56
+ cursor: pointer;
57
+ transition: transform 0.2s;
58
+ }
59
+
60
+ .chip:hover {
61
+ transform: translateY(-5px);
62
+ }
63
+
64
+ .action-button {
65
+ transition: all 0.2s;
66
+ transform-style: preserve-3d;
67
+ }
68
+
69
+ .action-button:active {
70
+ transform: translateY(2px) scale(0.98);
71
+ }
72
+
73
+ .action-button::after {
74
+ content: '';
75
+ position: absolute;
76
+ inset: 0;
77
+ border-radius: 9999px;
78
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
79
+ opacity: 0;
80
+ transition: opacity 0.2s;
81
+ }
82
+
83
+ .action-button:hover::after {
84
+ opacity: 1;
85
+ }
86
+
87
+ .tooltip {
88
+ position: absolute;
89
+ padding: 6px 12px;
90
+ background: rgba(0, 0, 0, 0.8);
91
+ color: white;
92
+ border-radius: 4px;
93
+ font-size: 12px;
94
+ pointer-events: none;
95
+ opacity: 0;
96
+ transition: opacity 0.2s;
97
+ z-index: 50;
98
+ }
99
+
100
+ .has-tooltip:hover .tooltip {
101
+ opacity: 1;
102
+ }
103
+
104
+ /* Responsive adjustments */
105
+ @media (max-width: 768px) {
106
+ .card {
107
+ width: 50px;
108
+ height: 75px;
109
+ font-size: 12px;
110
+ }
111
+
112
+ .chip {
113
+ width: 30px;
114
+ height: 30px;
115
+ font-size: 10px;
116
+ }
117
+
118
+ .player-info {
119
+ font-size: 12px;
120
+ }
121
+ }
122
+ </style>
123
+ </head>
124
+ <body class="bg-gray-900 text-white font-sans overflow-x-hidden">
125
+ <!-- App Container -->
126
+ <div class="min-h-screen flex flex-col">
127
+ <!-- Header/Navigation -->
128
+ <header class="bg-gray-800 shadow-lg py-4 px-6 flex items-center justify-between sticky top-0 z-50">
129
+ <div class="flex items-center space-x-4">
130
+ <div class="bg-yellow-500 text-gray-900 font-bold rounded-full w-10 h-10 flex items-center justify-center">
131
+ <i class="fas fa-spade"></i>
132
+ </div>
133
+ <h1 class="text-xl font-bold bg-gradient-to-r from-yellow-400 to-yellow-200 bg-clip-text text-transparent">
134
+ Hold'em Mastery
135
+ </h1>
136
+ </div>
137
+
138
+ <nav class="hidden md:flex items-center space-x-6">
139
+ <a href="#tutorials" class="hover:text-yellow-400 transition">Tutorials</a>
140
+ <a href="#simulator" class="hover:text-yellow-400 transition">Simulator</a>
141
+ <a href="#analytics" class="hover:text-yellow-400 transition">Analytics</a>
142
+ <button id="help-btn" class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded-lg transition">
143
+ <i class="fas fa-question-circle mr-1"></i> Help
144
+ </button>
145
+ </nav>
146
+
147
+ <div class="flex items-center space-x-4">
148
+ <button id="sound-toggle" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center hover:bg-gray-600 transition">
149
+ <i class="fas fa-volume-up"></i>
150
+ </button>
151
+ <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">
152
+ <i class="fas fa-bars"></i>
153
+ </button>
154
+ </div>
155
+ </header>
156
+
157
+ <!-- Mobile Menu (Hidden by default) -->
158
+ <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">
159
+ <nav class="flex flex-col space-y-3">
160
+ <a href="#tutorials" class="hover:text-yellow-400 transition py-2">Tutorials</a>
161
+ <a href="#simulator" class="hover:text-yellow-400 transition py-2">Simulator</a>
162
+ <a href="#analytics" class="hover:text-yellow-400 transition py-2">Analytics</a>
163
+ <button id="mobile-help-btn" class="text-left py-2 hover:text-yellow-400 transition">
164
+ <i class="fas fa-question-circle mr-2"></i> Help
165
+ </button>
166
+ </nav>
167
+ </div>
168
+
169
+ <!-- Main Content Area -->
170
+ <main class="flex-grow p-4 md:p-6">
171
+ <!-- Game View - Default Screen -->
172
+ <div id="game-view" class="max-w-6xl mx-auto">
173
+ <!-- Poker Table -->
174
+ <div class="table-felt rounded-3xl shadow-xl p-6 md:p-8 relative overflow-hidden border-4 border-yellow-800">
175
+ <!-- Table Decoration -->
176
+ <div class="absolute inset-0 opacity-20 flex items-center justify-center">
177
+ <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>
178
+ </div>
179
+
180
+ <!-- Pot Display -->
181
+ <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">
182
+ <div class="chip-glow bg-yellow-500 text-black font-bold">500</div>
183
+ <span class="font-bold">Pot</span>
184
+ </div>
185
+
186
+ <!-- Community Cards -->
187
+ <div class="flex justify-center space-x-2 md:space-x-4 mb-16 md:mb-24 relative z-10">
188
+ <!-- Placeholder for flop/turn/river cards -->
189
+ <div class="card bg-gray-100"></div>
190
+ <div class="card bg-gray-100"></div>
191
+ <div class="card bg-gray-100"></div>
192
+ <div class="card bg-gray-100 opacity-50"></div>
193
+ <div class="card bg-gray-100 opacity-50"></div>
194
+ </div>
195
+
196
+ <!-- Players (AI opponents) -->
197
+ <div class="grid grid-cols-2 md:grid-cols-5 gap-4 relative z-10">
198
+ <!-- Player 1 (Top Left) -->
199
+ <div class="player-info bg-gray-800 bg-opacity-70 rounded-lg p-3 text-center">
200
+ <div class="flex justify-center mb-1">
201
+ <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
202
+ <i class="fas fa-robot"></i>
203
+ </div>
204
+ </div>
205
+ <div class="text-xs font-semibold">AI Player 1</div>
206
+ <div class="text-xs">$2,450</div>
207
+ <div class="inline-block mt-1 px-2 py-0.5 text-xs bg-gray-700 rounded-md">Folding 20%</div>
208
+ </div>
209
+
210
+ <!-- Player 2 (Top Middle - only on larger screens) -->
211
+ <div class="hidden md:block player-info bg-gray-800 bg-opacity-70 rounded-lg p-3 text-center">
212
+ <div class="flex justify-center mb-1">
213
+ <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center">
214
+ <i class="fas fa-robot"></i>
215
+ </div>
216
+ </div>
217
+ <div class="text-xs font-semibold">AI Player 2</div>
218
+ <div class="text-xs">$1,780</div>
219
+ <div class="inline-block mt-1 px-2 py-0.5 text-xs bg-gray-700 rounded-md">Raised</div>
220
+ </div>
221
+
222
+ <!-- Player 3 (Top Right) -->
223
+ <div class="player-info bg-gray-800 bg-opacity-70 rounded-lg p-3 text-center">
224
+ <div class="flex justify-center mb-1">
225
+ <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center">
226
+ <i class="fas fa-robot"></i>
227
+ </div>
228
+ </div>
229
+ <div class="text-xs font-semibold">AI Player 3</div>
230
+ <div class="text-xs">$3,210</div>
231
+ <div class="inline-block mt-1 px-2 py-0.5 text-xs bg-gray-700 rounded-md">Calling 70%</div>
232
+ </div>
233
+
234
+ <!-- Player 4 (Bottom Right - only on larger screens) -->
235
+ <div class="hidden md:block player-info bg-gray-800 bg-opacity-70 rounded-lg p-3 text-center">
236
+ <div class="flex justify-center mb-1">
237
+ <div class="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center">
238
+ <i class="fas fa-robot"></i>
239
+ </div>
240
+ </div>
241
+ <div class="text-xs font-semibold">AI Player 4</div>
242
+ <div class="text-xs">$1,250</div>
243
+ <div class="inline-block mt-1 px-2 py-0.5 text-xs bg-gray-700 rounded-md">All-in!</div>
244
+ </div>
245
+
246
+ <!-- Player 5 (Bottom Left - only on larger screens) -->
247
+ <div class="hidden md:block player-info bg-gray-800 bg-opacity-70 rounded-lg p-3 text-center">
248
+ <div class="flex justify-center mb-1">
249
+ <div class="w-8 h-8 rounded-full bg-yellow-500 flex items-center justify-center">
250
+ <i class="fas fa-robot"></i>
251
+ </div>
252
+ </div>
253
+ <div class="text-xs font-semibold">AI Player 5</div>
254
+ <div class="text-xs">$2,920</div>
255
+ <div class="inline-block mt-1 px-2 py-0.5 text-xs bg-gray-700 rounded-md">Checking</div>
256
+ </div>
257
+ </div>
258
+
259
+ <!-- User Player Area -->
260
+ <div class="mt-8 md:mt-12 flex flex-col items-center relative z-10">
261
+ <div class="bg-gray-800 bg-opacity-80 rounded-xl p-4 w-full max-w-md">
262
+ <!-- User's Cards -->
263
+ <div class="flex justify-center space-x-2 mb-4">
264
+ <div class="card bg-white text-black flex flex-col items-center justify-center card-animate">
265
+ <span class="text-red-500 text-xl font-bold">A</span>
266
+ <span class="text-red-500">♥</span>
267
+ </div>
268
+ <div class="card bg-white text-black flex flex-col items-center justify-center card-animate" style="animation-delay: 0.1s">
269
+ <span class="text-black text-xl font-bold">K</span>
270
+ <span class="text-black">♠</span>
271
+ </div>
272
+ </div>
273
+
274
+ <!-- Hand Strength Indicator -->
275
+ <div class="mb-4">
276
+ <div class="text-xs font-semibold mb-1 flex justify-between">
277
+ <span>Hand Strength:</span>
278
+ <span>87% (Very Strong)</span>
279
+ </div>
280
+ <div class="hand-strength-bar rounded-full h-2 w-full">
281
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 87%"></div>
282
+ </div>
283
+ </div>
284
+
285
+ <!-- Action Buttons -->
286
+ <div class="flex flex-wrap justify-center gap-2 mt-4">
287
+ <button class="action-button bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg font-bold relative">
288
+ <i class="fas fa-times mr-1"></i> Fold
289
+ <span class="tooltip">Discard your hand and forfeit the current pot</span>
290
+ </button>
291
+ <button class="action-button bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg font-bold relative">
292
+ <i class="fas fa-pause mr-1"></i> Check
293
+ <span class="tooltip">Pass the action to the next player without betting</span>
294
+ </button>
295
+ <button class="action-button bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg font-bold relative">
296
+ <i class="fas fa-check mr-1"></i> Call $50
297
+ <span class="tooltip">Match the current bet of $50 to stay in the hand</span>
298
+ </button>
299
+ <button class="action-button bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg font-bold relative">
300
+ <i class="fas fa-arrow-up mr-1"></i> Raise
301
+ <span class="tooltip">Increase the current bet amount</span>
302
+ </button>
303
+ </div>
304
+
305
+ <!-- Betting Controls (Appears when Raise is selected) -->
306
+ <div class="mt-4 bg-gray-700 rounded-lg p-3 hidden">
307
+ <div class="flex items-center justify-between mb-2">
308
+ <div class="text-sm font-semibold">Raise Amount:</div>
309
+ <div class="text-sm font-bold">$150</div>
310
+ </div>
311
+ <input type="range" min="50" max="500" value="150" class="w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer">
312
+ <div class="flex justify-between text-xs text-gray-300 mt-1">
313
+ <span>Min: $50</span>
314
+ <span>Max: $500</span>
315
+ </div>
316
+ <div class="flex justify-center mt-2">
317
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 px-4 py-1 rounded-lg font-bold">
318
+ Confirm Raise
319
+ </button>
320
+ </div>
321
+ </div>
322
+
323
+ <!-- Chip Selection -->
324
+ <div class="mt-4 flex justify-center space-x-2">
325
+ <div class="chip bg-red-600 text-white font-bold">5</div>
326
+ <div class="chip bg-blue-600 text-white font-bold">25</div>
327
+ <div class="chip bg-green-600 text-white font-bold">50</div>
328
+ <div class="chip bg-yellow-500 text-black font-bold">100</div>
329
+ <div class="chip bg-purple-600 text-white font-bold">500</div>
330
+ <div class="chip bg-gray-100 text-black font-bold">1000</div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+
336
+ <!-- Player Stats & Info -->
337
+ <div class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
338
+ <div class="bg-gray-800 rounded-lg p-4">
339
+ <div class="flex items-center justify-between mb-2">
340
+ <h3 class="font-bold text-yellow-400">Current Hand Stats</h3>
341
+ <button class="text-gray-400 hover:text-white">
342
+ <i class="fas fa-info-circle"></i>
343
+ </button>
344
+ </div>
345
+ <div class="space-y-2 text-sm">
346
+ <div class="flex justify-between">
347
+ <span>Win Probability:</span>
348
+ <span class="font-bold text-green-400">68%</span>
349
+ </div>
350
+ <div class="flex justify-between">
351
+ <span>Expected Value:</span>
352
+ <span class="font-bold">+$42.50</span>
353
+ </div>
354
+ <div class="flex justify-between">
355
+ <span>Pot Odds:</span>
356
+ <span class="font-bold">2.5:1</span>
357
+ </div>
358
+ <div class="flex justify-between">
359
+ <span>Best Possible:</span>
360
+ <span class="font-bold">Two Pair</span>
361
+ </div>
362
+ </div>
363
+ </div>
364
+
365
+ <div class="bg-gray-800 rounded-lg p-4">
366
+ <div class="flex items-center justify-between mb-2">
367
+ <h3 class="font-bold text-yellow-400">Session Stats</h3>
368
+ <button class="text-gray-400 hover:text-white">
369
+ <i class="fas fa-chart-line"></i>
370
+ </button>
371
+ </div>
372
+ <div class="space-y-2 text-sm">
373
+ <div class="flex justify-between">
374
+ <span>Hands Played:</span>
375
+ <span class="font-bold">24</span>
376
+ </div>
377
+ <div class="flex justify-between">
378
+ <span>Win Rate:</span>
379
+ <span class="font-bold text-green-400">58%</span>
380
+ </div>
381
+ <div class="flex justify-between">
382
+ <span>Profit/Loss:</span>
383
+ <span class="font-bold text-green-400">+$320</span>
384
+ </div>
385
+ <div class="flex justify-between">
386
+ <span>VPIP (Voluntarily Put $ In Pot):</span>
387
+ <span class="font-bold">42%</span>
388
+ </div>
389
+ </div>
390
+ </div>
391
+
392
+ <div class="bg-gray-800 rounded-lg p-4">
393
+ <div class="flex items-center justify-between mb-2">
394
+ <h3 class="font-bold text-yellow-400">Suggested Action</h3>
395
+ <button class="text-gray-400 hover:text-white">
396
+ <i class="fas fa-lightbulb"></i>
397
+ </button>
398
+ </div>
399
+ <div class="bg-gray-700 rounded-lg p-3 text-sm">
400
+ <div class="flex items-start">
401
+ <div class="text-yellow-400 mr-2 mt-0.5">
402
+ <i class="fas fa-check-circle"></i>
403
+ </div>
404
+ <div>
405
+ <p class="font-bold">Recommendation: Call or Raise</p>
406
+ <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>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ </div>
413
+
414
+ <!-- Tutorial View (Hidden by default) -->
415
+ <div id="tutorial-view" class="hidden max-w-6xl mx-auto">
416
+ <div class="bg-gray-800 rounded-xl shadow-lg overflow-hidden">
417
+ <div class="p-6 bg-gray-700">
418
+ <h2 class="text-xl font-bold">Texas Hold'em Basics</h2>
419
+ <p class="text-gray-300 mt-1">Learn the fundamental rules and strategies of poker</p>
420
+ </div>
421
+
422
+ <div class="p-6 grid grid-cols-1 md:grid-cols-3 gap-6">
423
+ <!-- Tutorial Cards -->
424
+ <div class="bg-gray-800 rounded-lg overflow-hidden border border-gray-700 hover:border-yellow-500 transition cursor-pointer">
425
+ <div class="bg-gradient-to-r from-blue-800 to-blue-600 p-4">
426
+ <div class="text-xl font-bold">Hand Rankings</div>
427
+ <div class="text-sm opacity-80 mt-1">Learn what beats what</div>
428
+ </div>
429
+ <div class="p-4">
430
+ <div class="flex justify-center space-x-2 mb-3">
431
+ <div class="card bg-white text-black flex flex-col items-center justify-center">
432
+ <span class="text-red-500 text-sm font-bold">A</span>
433
+ <span class="text-red-500">♥</span>
434
+ </div>
435
+ <div class="card bg-white text-black flex flex-col items-center justify-center">
436
+ <span class="text-red-500 text-sm font-bold">A</span>
437
+ <span class="text-red-500">♠</span>
438
+ </div>
439
+ </div>
440
+ <div class="text-sm text-gray-300">
441
+ Understand the hierarchy of poker hands from high card to royal flush.
442
+ </div>
443
+ <button class="mt-3 w-full bg-blue-600 hover:bg-blue-700 text-white py-1 rounded-md text-sm">
444
+ Start Lesson
445
+ </button>
446
+ </div>
447
+ </div>
448
+
449
+ <div class="bg-gray-800 rounded-lg overflow-hidden border border-gray-700 hover:border-yellow-500 transition cursor-pointer">
450
+ <div class="bg-gradient-to-r from-green-800 to-green-600 p-4">
451
+ <div class="text-xl font-bold">Betting Rounds</div>
452
+ <div class="text-sm opacity-80 mt-1">Pre-flop to River</div>
453
+ </div>
454
+ <div class="p-4">
455
+ <div class="flex justify-center space-x-1 mb-3">
456
+ <div class="w-6 h-6 rounded-full bg-yellow-500 text-black text-xs flex items-center justify-center font-bold">P</div>
457
+ <div class="w-6 h-6 rounded-full bg-yellow-500 text-black text-xs flex items-center justify-center font-bold">F</div>
458
+ <div class="w-6 h-6 rounded-full bg-blue-500 text-white text-xs flex items-center justify-center font-bold">T</div>
459
+ <div class="w-6 h-6 rounded-full bg-red-500 text-white text-xs flex items-center justify-center font-bold">R</div>
460
+ </div>
461
+ <div class="text-sm text-gray-300">
462
+ Master the flow of the game through each betting round and community card reveal.
463
+ </div>
464
+ <button class="mt-3 w-full bg-green-600 hover:bg-green-700 text-white py-1 rounded-md text-sm">
465
+ Start Lesson
466
+ </button>
467
+ </div>
468
+ </div>
469
+
470
+ <div class="bg-gray-800 rounded-lg overflow-hidden border border-gray-700 hover:border-yellow-500 transition cursor-pointer">
471
+ <div class="bg-gradient-to-r from-purple-800 to-purple-600 p-4">
472
+ <div class="text-xl font-bold">Position Play</div>
473
+ <div class="text-sm opacity-80 mt-1">Why seat matters</div>
474
+ </div>
475
+ <div class="p-4">
476
+ <div class="flex justify-center mb-3">
477
+ <div class="relative w-20 h-20">
478
+ <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>
479
+ <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>
480
+ <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">
481
+ <i class="fas fa-user"></i>
482
+ </div>
483
+ <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>
484
+ </div>
485
+ </div>
486
+ <div class="text-sm text-gray-300">
487
+ Learn how your position at the table affects your strategy and decision making.
488
+ </div>
489
+ <button class="mt-3 w-full bg-purple-600 hover:bg-purple-700 text-white py-1 rounded-md text-sm">
490
+ Start Lesson
491
+ </button>
492
+ </div>
493
+ </div>
494
+ </div>
495
+
496
+ <div class="p-6 bg-gray-700 border-t border-gray-600">
497
+ <div class="flex items-center justify-between">
498
+ <div>
499
+ <h3 class="font-semibold">Your Progress</h3>
500
+ <p class="text-sm text-gray-300">2 of 10 lessons completed</p>
501
+ </div>
502
+ <div class="w-24 h-3 bg-gray-600 rounded-full overflow-hidden">
503
+ <div class="h-full bg-yellow-500" style="width: 20%"></div>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ </div>
509
+
510
+ <!-- Analytics View (Hidden by default) -->
511
+ <div id="analytics-view" class="hidden max-w-6xl mx-auto">
512
+ <div class="bg-gray-800 rounded-xl shadow-lg overflow-hidden">
513
+ <div class="p-6 bg-gray-700">
514
+ <h2 class="text-xl font-bold">Player Analytics</h2>
515
+ <p class="text-gray-300 mt-1">Review your performance and identify areas for improvement</p>
516
+ </div>
517
+
518
+ <div class="p-6">
519
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
520
+ <!-- Win Rate Chart -->
521
+ <div class="bg-gray-900 rounded-lg p-4 border border-gray-700">
522
+ <div class="flex items-center justify-between mb-3">
523
+ <h3 class="font-semibold">Win Rate by Position</h3>
524
+ <select class="bg-gray-800 text-sm rounded px-2 py-1">
525
+ <option>Last 100 Hands</option>
526
+ <option>Last 50 Hands</option>
527
+ <option>All Time</option>
528
+ </select>
529
+ </div>
530
+ <div class="h-48 flex items-end justify-between">
531
+ <div class="flex flex-col items-center w-1/6">
532
+ <div class="w-6 bg-blue-500" style="height: 30%;"></div>
533
+ <div class="text-xs mt-1">BTN</div>
534
+ <div class="text-xs text-blue-400">62%</div>
535
+ </div>
536
+ <div class="flex flex-col items-center w-1/6">
537
+ <div class="w-6 bg-blue-500" style="height: 45%;"></div>
538
+ <div class="text-xs mt-1">SB</div>
539
+ <div class="text-xs text-blue-400">48%</div>
540
+ </div>
541
+ <div class="flex flex-col items-center w-1/6">
542
+ <div class="w-6 bg-blue-500" style="height: 70%;"></div>
543
+ <div class="text-xs mt-1">BB</div>
544
+ <div class="text-xs text-blue-400">51%</div>
545
+ </div>
546
+ <div class="flex flex-col items-center w-1/6">
547
+ <div class="w-6 bg-blue-500" style="height: 55%;"></div>
548
+ <div class="text-xs mt-1">MP</div>
549
+ <div class="text-xs text-blue-400">58%</div>
550
+ </div>
551
+ <div class="flex flex-col items-center w-1/6">
552
+ <div class="w-6 bg-blue-500" style="height: 65%;"></div>
553
+ <div class="text-xs mt-1">CO</div>
554
+ <div class="text-xs text-blue-400">60%</div>
555
+ </div>
556
+ </div>
557
+ </div>
558
+
559
+ <!-- VPIP/PFR -->
560
+ <div class="bg-gray-900 rounded-lg p-4 border border-gray-700">
561
+ <div class="flex items-center justify-between mb-3">
562
+ <h3 class="font-semibold">VPIP / PFR</h3>
563
+ <select class="bg-gray-800 text-sm rounded px-2 py-1">
564
+ <option>Last 100 Hands</option>
565
+ <option>Last 50 Hands</option>
566
+ <option>All Time</option>
567
+ </select>
568
+ </div>
569
+ <div class="flex items-center justify-center h-48">
570
+ <div class="relative w-32 h-32">
571
+ <svg class="w-full h-full" viewBox="0 0 100 100">
572
+ <!-- Background circle -->
573
+ <circle cx="50" cy="50" r="45" stroke="#374151" stroke-width="5" fill="none"/>
574
+ <!-- VPIP (Voluntarily put $ in pot) -->
575
+ <circle cx="50" cy="50" r="45" stroke="#3B82F6" stroke-width="5" fill="none"
576
+ stroke-dasharray="282.743" stroke-dashoffset="70.6858" transform="rotate(-90 50 50)"/>
577
+ <!-- PFR (Pre-flop raise) -->
578
+ <circle cx="50" cy="50" r="35" stroke="#10B981" stroke-width="5" fill="none"
579
+ stroke-dasharray="219.911" stroke-dashoffset="109.955" transform="rotate(-90 50 50)"/>
580
+ </svg>
581
+ <div class="absolute inset-0 flex flex-col items-center justify-center">
582
+ <div class="text-2xl font-bold">28/18</div>
583
+ <div class="text-xs text-gray-400">VPIP/PFR</div>
584
+ </div>
585
+ </div>
586
+ </div>
587
+ <div class="flex justify-center mt-2 text-xs space-x-4">
588
+ <div class="flex items-center">
589
+ <div class="w-3 h-3 bg-blue-500 mr-1"></div>
590
+ <span>VPIP: 28%</span>
591
+ </div>
592
+ <div class="flex items-center">
593
+ <div class="w-3 h-3 bg-green-500 mr-1"></div>
594
+ <span>PFR: 18%</span>
595
+ </div>
596
+ </div>
597
+ </div>
598
+
599
+ <!-- Hand Analysis -->
600
+ <div class="bg-gray-900 rounded-lg p-4 border border-gray-700 col-span-1 md:col-span-2">
601
+ <div class="flex items-center justify-between mb-3">
602
+ <h3 class="font-semibold">Recent Hand Analysis</h3>
603
+ <select class="bg-gray-800 text-sm rounded px-2 py-1">
604
+ <option>Last 10 Hands</option>
605
+ <option>Last 25 Hands</option>
606
+ <option>All Hands Today</option>
607
+ </select>
608
+ </div>
609
+ <div class="overflow-x-auto">
610
+ <table class="min-w-full text-xs">
611
+ <thead>
612
+ <tr class="border-b border-gray-700">
613
+ <th class="text-left py-2 px-1">Hand</th>
614
+ <th class="text-left py-2 px-1">Cards</th>
615
+ <th class="text-left py-2 px-1">Position</th>
616
+ <th class="text-left py-2 px-1">Action</th>
617
+ <th class="text-left py-2 px-1">Result</th>
618
+ <th class="text-left py-2 px-1">Net</th>
619
+ <th class="text-left py-2 px-1">Review</th>
620
+ </tr>
621
+ </thead>
622
+ <tbody>
623
+ <tr class="border-b border-gray-800 hover:bg-gray-800">
624
+ <td class="py-2 px-1">#2479</td>
625
+ <td class="py-2 px-1">
626
+ <span class="text-red-500">A♥</span>
627
+ <span class="text-black">K♠</span>
628
+ </td>
629
+ <td class="py-2 px-1">BTN</td>
630
+ <td class="py-2 px-1">Raised, Called</td>
631
+ <td class="py-2 px-1 text-green-400">Won</td>
632
+ <td class="py-2 px-1 text-green-400">+$45</td>
633
+ <td class="py-2 px-1">
634
+ <button class="text-blue-400 hover:text-blue-300">
635
+ <i class="fas fa-eye"></i>
636
+ </button>
637
+ </td>
638
+ </tr>
639
+ <tr class="border-b border-gray-800 hover:bg-gray-800">
640
+ <td class="py-2 px-1">#2478</td>
641
+ <td class="py-2 px-1">
642
+ <span class="text-black">Q♣</span>
643
+ <span class="text-black">J♣</span>
644
+ </td>
645
+ <td class="py-2 px-1">MP</td>
646
+ <td class="py-2 px-1">Called</td>
647
+ <td class="py-2 px-1 text-red-400">Lost</td>
648
+ <td class="py-2 px-1 text-red-400">-$20</td>
649
+ <td class="py-2 px-1">
650
+ <button class="text-blue-400 hover:text-blue-300">
651
+ <i class="fas fa-eye"></i>
652
+ </button>
653
+ </td>
654
+ </tr>
655
+ <tr class="border-b border-gray-800 hover:bg-gray-800">
656
+ <td class="py-2 px-1">#2477</td>
657
+ <td class="py-2 px-1">
658
+ <span class="text-black">K♦</span>
659
+ <span class="text-black">K♣</span>
660
+ </td>
661
+ <td class="py-2 px-1">BB</td>
662
+ <td class="py-2 px-1">Raised, Called</td>
663
+ <td class="py-2 px-1 text-green-400">Won</td>
664
+ <td class="py-2 px-1 text-green-400">+$85</td>
665
+ <td class="py-2 px-1">
666
+ <button class="text-blue-400 hover:text-blue-300">
667
+ <i class="fas fa-eye"></i>
668
+ </button>
669
+ </td>
670
+ </tr>
671
+ </tbody>
672
+ </table>
673
+ </div>
674
+ <div class="mt-3 text-center">
675
+ <button class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded">
676
+ View All Hands
677
+ </button>
678
+ </div>
679
+ </div>
680
+ </div>
681
+ </div>
682
+ </div>
683
+ </div>
684
+
685
+ <!-- Settings View (Hidden by default) -->
686
+ <div id="settings-view" class="hidden max-w-3xl mx-auto">
687
+ <div class="bg-gray-800 rounded-xl shadow-lg overflow-hidden">
688
+ <div class="p-6 bg-gray-700">
689
+ <h2 class="text-xl font-bold">Settings</h2>
690
+ </div>
691
+
692
+ <div class="p-6">
693
+ <div class="space-y-6">
694
+ <!-- Game Settings -->
695
+ <div>
696
+ <h3 class="font-semibold border-b border-gray-700 pb-2 mb-4">Game Settings</h3>
697
+ <div class="space-y-4">
698
+ <div class="flex items-center justify-between">
699
+ <div>
700
+ <div class="text-sm font-medium">Sounds</div>
701
+ <div class="text-xs text-gray-400">Enable or disable sound effects</div>
702
+ </div>
703
+ <label class="relative inline-flex items-center cursor-pointer">
704
+ <input type="checkbox" value="" class="sr-only peer" checked>
705
+ <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>
706
+ </label>
707
+ </div>
708
+
709
+ <div class="flex items-center justify-between">
710
+ <div>
711
+ <div class="text-sm font-medium">Animations</div>
712
+ <div class="text-xs text-gray-400">Toggle card and chip animations</div>
713
+ </div>
714
+ <label class="relative inline-flex items-center cursor-pointer">
715
+ <input type="checkbox" value="" class="sr-only peer" checked>
716
+ <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>
717
+ </label>
718
+ </div>
719
+
720
+ <div class="flex items-center justify-between">
721
+ <div>
722
+ <div class="text-sm font-medium">AI Difficulty</div>
723
+ <div class="text-xs text-gray-400">Set challenge level of AI opponents</div>
724
+ </div>
725
+ <select class="bg-gray-700 text-sm rounded px-3 py-1">
726
+ <option>Beginner</option>
727
+ <option selected>Intermediate</option>
728
+ <option>Advanced</option>
729
+ </select>
730
+ </div>
731
+ </div>
732
+ </div>
733
+
734
+ <!-- Account Settings -->
735
+ <div>
736
+ <h3 class="font-semibold border-b border-gray-700 pb-2 mb-4">Account</h3>
737
+ <div class="space-y-4">
738
+ <div class="flex items-center justify-between">
739
+ <div>
740
+ <div class="text-sm font-medium">Player Name</div>
741
+ <div class="text-xs text-gray-400">Your display name at tables</div>
742
+ </div>
743
+ <input type="text" value="Player1" class="bg-gray-700 text-sm rounded px-3 py-1 w-40">
744
+ </div>
745
+
746
+ <div class="flex items-center justify-between">
747
+ <div>
748
+ <div class="text-sm font-medium">Starting Stack</div>
749
+ <div class="text-xs text-gray-400">Chip count for new games</div>
750
+ </div>
751
+ <select class="bg-gray-700 text-sm rounded px-3 py-1">
752
+ <option>1,000</option>
753
+ <option selected>2,000</option>
754
+ <option>5,000</option>
755
+ <option>10,000</option>
756
+ </select>
757
+ </div>
758
+ </div>
759
+ </div>
760
+
761
+ <!-- Data Management -->
762
+ <div>
763
+ <h3 class="font-semibold border-b border-gray-700 pb-2 mb-4">Data</h3>
764
+ <div class="space-y-4">
765
+ <div class="flex items-center justify-between">
766
+ <div>
767
+ <div class="text-sm font-medium">Export Data</div>
768
+ <div class="text-xs text-gray-400">Download your game history</div>
769
+ </div>
770
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm">
771
+ Export
772
+ </button>
773
+ </div>
774
+
775
+ <div class="flex items-center justify-between">
776
+ <div>
777
+ <div class="text-sm font-medium">Reset Data</div>
778
+ <div class="text-xs text-gray-400">Clear all stats and history</div>
779
+ </div>
780
+ <button class="bg-red-600 hover:bg-red-700 px-3 py-1 rounded text-sm">
781
+ Reset
782
+ </button>
783
+ </div>
784
+ </div>
785
+ </div>
786
+ </div>
787
+ </div>
788
+ </div>
789
+ </div>
790
+ </main>
791
+
792
+ <!-- Bottom Navigation -->
793
+ <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">
794
+ <button class="nav-btn active p-2 rounded-lg text-center" data-view="game">
795
+ <i class="fas fa-gamepad block text-2xl mb-1 text-yellow-400"></i>
796
+ <span class="text-xs">Game</span>
797
+ </button>
798
+ <button class="nav-btn p-2 rounded-lg text-center" data-view="tutorial">
799
+ <i class="fas fa-graduation-cap block text-2xl mb-1"></i>
800
+ <span class="text-xs">Learn</span>
801
+ </button>
802
+ <button class="nav-btn p-2 rounded-lg text-center" data-view="analytics">
803
+ <i class="fas fa-chart-bar block text-2xl mb-1"></i>
804
+ <span class="text-xs">Stats</span>
805
+ </button>
806
+ <button class="nav-btn p-2 rounded-lg text-center" data-view="settings">
807
+ <i class="fas fa-cog block text-2xl mb-1"></i>
808
+ <span class="text-xs">Settings</span>
809
+ </button>
810
+ </nav>
811
+
812
+ <!-- Help Modal (Hidden by default) -->
813
+ <div id="help-modal" class="hidden fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 p-4">
814
+ <div class="bg-gray-800 rounded-xl max-w-md w-full max-h-[90vh] overflow-y-auto">
815
+ <div class="p-6 bg-gray-700 sticky top-0 flex justify-between items-center">
816
+ <h2 class="text-xl font-bold">Help & Support</h2>
817
+ <button id="close-help" class="text-2xl">&times;</button>
818
+ </div>
819
+
820
+ <div class="p-6 space-y-6">
821
+ <div>
822
+ <h3 class="font-semibold text-lg mb-2">Getting Started</h3>
823
+ <p class="text-gray-300">
824
+ Welcome to Hold'em Mastery! This offline poker tutorial and simulator helps you learn and improve your Texas Hold'em skills.
825
+ </p>
826
+ </div>
827
+
828
+ <div>
829
+ <h3 class="font-semibold text-lg mb-2">How to Play</h3>
830
+ <div class="space-y-3 text-sm text-gray-300">
831
+ <div class="flex items-start">
832
+ <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>
833
+ <p>Start with the tutorials to learn poker basics and strategies.</p>
834
+ </div>
835
+ <div class="flex items-start">
836
+ <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>
837
+ <p>Practice in the simulator against AI opponents of varying difficulty.</p>
838
+ </div>
839
+ <div class="flex items-start">
840
+ <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>
841
+ <p>Review your statistics in the analytics section to identify strengths and weaknesses.</p>
842
+ </div>
843
+ </div>
844
+ </div>
845
+
846
+ <div>
847
+ <h3 class="font-semibold text-lg mb-2">Features</h3>
848
+ <ul class="list-disc list-inside text-sm text-gray-300 space-y-1">
849
+ <li>Fully offline functionality - no internet required after loading</li>
850
+ <li>Interactive lessons with guided feedback</li>
851
+ <li>Adjustable AI difficulty levels</li>
852
+ <li>Detailed hand analysis and statistics</li>
853
+ <li>Progress tracking across devices</li>
854
+ </ul>
855
+ </div>
856
+
857
+ <div>
858
+ <h3 class="font-semibold text-lg mb-2">Support</h3>
859
+ <p class="text-gray-300 mb-2">
860
+ For additional help or to report issues, please contact our support team.
861
+ </p>
862
+ <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg">
863
+ Contact Support
864
+ </button>
865
+ </div>
866
+ </div>
867
+ </div>
868
+ </div>
869
+
870
+ <!-- Install Prompt (Hidden by default) -->
871
+ <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">
872
+ <div class="p-4">
873
+ <div class="flex items-start">
874
+ <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">
875
+ <i class="fas fa-download"></i>
876
+ </div>
877
+ <div>
878
+ <h3 class="font-semibold">Install Hold'em Mastery</h3>
879
+ <p class="text-sm text-gray-300 mt-1">
880
+ Add this app to your home screen for quick access and full offline play.
881
+ </p>
882
+ </div>
883
+ </div>
884
+ <div class="flex justify-end mt-3 space-x-2">
885
+ <button id="cancel-install" class="text-sm bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded">
886
+ Not Now
887
+ </button>
888
+ <button id="confirm-install" class="text-sm bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded">
889
+ Install
890
+ </button>
891
+ </div>
892
+ </div>
893
+ </div>
894
+ </div>
895
+
896
+ <script>
897
+ // DOM Elements
898
+ const gameView = document.getElementById('game-view');
899
+ const tutorialView = document.getElementById('tutorial-view');
900
+ const analyticsView = document.getElementById('analytics-view');
901
+ const settingsView = document.getElementById('settings-view');
902
+ const helpModal = document.getElementById('help-modal');
903
+ const closeHelp = document.getElementById('close-help');
904
+ const helpBtn = document.getElementById('help-btn');
905
+ const mobileHelpBtn = document.getElementById('mobile-help-btn');
906
+ const menuToggle = document.getElementById('menu-toggle');
907
+ const mobileMenu = document.getElementById('mobile-menu');
908
+ const navBtns = document.querySelectorAll('.nav-btn');
909
+ const installPrompt = document.getElementById('install-prompt');
910
+ const cancelInstall = document.getElementById('cancel-install');
911
+ const confirmInstall = document.getElementById('confirm-install');
912
+ const soundToggle = document.getElementById('sound-toggle');
913
+
914
+ // Mobile menu toggle
915
+ menuToggle.addEventListener('click', () => {
916
+ mobileMenu.classList.toggle('hidden');
917
+ });
918
+
919
+ // Navigation controls
920
+ navBtns.forEach(btn => {
921
+ btn.addEventListener('click', () => {
922
+ // Remove active class from all buttons
923
+ navBtns.forEach(b => b.classList.remove('active', 'bg-gray-700', 'text-yellow-400'));
924
+ navBtns.forEach(b => b.querySelector('span').classList.remove('text-yellow-400'));
925
+ navBtns.forEach(b => b.querySelector('i').classList.remove('text-yellow-400'));
926
+
927
+ // Add active class to clicked button
928
+ btn.classList.add('active', 'bg-gray-700');
929
+ btn.querySelector('span').classList.add('text-yellow-400');
930
+ btn.querySelector('i').classList.add('text-yellow-400');
931
+
932
+ // Show the corresponding view
933
+ const view = btn.getAttribute('data-view');
934
+
935
+ // Hide all views
936
+ gameView.classList.add('hidden');
937
+ tutorialView.classList.add('hidden');
938
+ analyticsView.classList.add('hidden');
939
+ settingsView.classList.add('hidden');
940
+
941
+ // Show selected view
942
+ if (view === 'game') {
943
+ gameView.classList.remove('hidden');
944
+ } else if (view === 'tutorial') {
945
+ tutorialView.classList.remove('hidden');
946
+ } else if (view === 'analytics') {
947
+ analyticsView.classList.remove('hidden');
948
+ } else if (view === 'settings') {
949
+ settingsView.classList.remove('hidden');
950
+ }
951
+ });
952
+ });
953
+
954
+ // Help modal controls
955
+ helpBtn.addEventListener('click', () => {
956
+ helpModal.classList.remove('hidden');
957
+ });
958
+
959
+ mobileHelpBtn.addEventListener('click', () => {
960
+ helpModal.classList.remove('hidden');
961
+ mobileMenu.classList.add('hidden');
962
+ });
963
+
964
+ closeHelp.addEventListener('click', () => {
965
+ helpModal.classList.add('hidden');
966
+ });
967
+
968
+ // Install prompt controls
969
+ cancelInstall.addEventListener('click', () => {
970
+ installPrompt.classList.add('hidden');
971
+ });
972
+
973
+ confirmInstall.addEventListener('click', () => {
974
+ // In a real app, this would trigger the PWA install prompt
975
+ alert('App installation would be triggered here. For demo purposes, we\'re just showing the UI.');
976
+ installPrompt.classList.add('hidden');
977
+ });
978
+
979
+ // Simulate a delayed install prompt (would use PWA detection in a real app)
980
+ setTimeout(() => {
981
+ installPrompt.classList.remove('hidden');
982
+ }, 15000);
983
+
984
+ // Sound toggle
985
+ let soundOn = true;
986
+ soundToggle.addEventListener('click', () => {
987
+ soundOn = !soundOn;
988
+ const icon = soundToggle.querySelector('i');
989
+ icon.className = soundOn ? 'fas fa-volume-up' : 'fas fa-volume-mute';
990
+ });
991
+
992
+ // Tooltip positioning
993
+ document.querySelectorAll('.has-tooltip').forEach(el => {
994
+ const tooltip = el.querySelector('.tooltip');
995
+ el.addEventListener('mousemove', (e) => {
996
+ tooltip.style.left = `${e.pageX + 10}px`;
997
+ tooltip.style.top = `${e.pageY + 10}px`;
998
+ });
999
+ });
1000
+
1001
+ // Demo: Show community cards progressively
1002
+ if (gameView) {
1003
+ setTimeout(() => {
1004
+ const communityCards = document.querySelectorAll('#game-view .card');
1005
+
1006
+ // Show flop
1007
+ for (let i = 0; i < 3; i++) {
1008
+ setTimeout(() => {
1009
+ communityCards[i].innerHTML = `
1010
+ <div class="flex flex-col items-center justify-center h-full">
1011
+ ${getRandomCardHtml()}
1012
+ </div>
1013
+ `;
1014
+ communityCards[i].classList.add('card-animate');
1015
+ }, i * 200);
1016
+ }
1017
+
1018
+ // Show turn
1019
+ setTimeout(() => {
1020
+ communityCards[3].innerHTML = `
1021
+ <div class="flex flex-col items-center justify-center h-full">
1022
+ ${getRandomCardHtml()}
1023
+ </div>
1024
+ `;
1025
+ communityCards[3].classList.remove('opacity-50');
1026
+ communityCards[3].classList.add('card-animate');
1027
+ }, 1500);
1028
+
1029
+ // Show river
1030
+ setTimeout(() => {
1031
+ communityCards[4].innerHTML = `
1032
+ <div class="flex flex-col items-center justify-center h-full">
1033
+ ${getRandomCardHtml()}
1034
+ </div>
1035
+ `;
1036
+ communityCards[4].classList.remove('opacity-50');
1037
+ communityCards[4].classList.add('card-animate');
1038
+ }, 2500);
1039
+ }, 1000);
1040
+ }
1041
+
1042
+ // Helper function for demo
1043
+ function getRandomCardHtml() {
1044
+ const ranks = ['A', 'K', 'Q', 'J', '10', '9', '8', '7', '6', '5', '4', '3', '2'];
1045
+ const suits = ['♥', '♦', '♣', '♠'];
1046
+
1047
+ const rank = ranks[Math.floor(Math.random() * ranks.length)];
1048
+ const suit = suits[Math.floor(Math.random() * suits.length)];
1049
+
1050
+ const color = (suit === '♥' || suit === '♦') ? 'text-red-500' : 'text-black';
1051
+
1052
+ return `
1053
+ <span class="${color} text-xl font-bold">${rank}</span>
1054
+ <span class="${color}">${suit}</span>
1055
+ `;
1056
+ }
1057
+ </script>
1058
+ <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>
1059
+ </html>