Hugging Face's logo

Spaces:
sudo-soldier
/
holdem
Running

App Files Community
sudo-soldier commited on
Commit
d3bdc4b
·
verified ·
1 Parent(s): 06a6697

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +782 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Holdem
3
- emoji: 🐢
4
- colorFrom: yellow
5
- colorTo: blue
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: holdem
3
+ emoji: 🐳
4
+ colorFrom: blue
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,782 @@
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 - 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
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
11
+
12
+ body {
13
+ font-family: 'Montserrat', sans-serif;
14
+ background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
15
+ color: #ffffff;
16
+ overflow-x: hidden;
17
+ }
18
+
19
+ .casino-felt {
20
+ background: radial-gradient(circle, #056608 0%, #033c05 100%);
21
+ box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.8);
22
+ }
23
+
24
+ .card {
25
+ width: 80px;
26
+ height: 120px;
27
+ border-radius: 8px;
28
+ background: #ffffff;
29
+ color: #000000;
30
+ display: flex;
31
+ justify-content: center;
32
+ align-items: center;
33
+ font-size: 24px;
34
+ font-weight: bold;
35
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
36
+ position: relative;
37
+ transition: transform 0.3s ease;
38
+ }
39
+
40
+ .card.hearts, .card.diamonds {
41
+ color: #e74c3c;
42
+ }
43
+
44
+ .card.clubs, .card.spades {
45
+ color: #000000;
46
+ }
47
+
48
+ .card.face-down {
49
+ background: linear-gradient(135deg, #3498db 0%, #2c3e50 100%);
50
+ color: transparent;
51
+ }
52
+
53
+ .chip {
54
+ width: 40px;
55
+ height: 40px;
56
+ border-radius: 50%;
57
+ display: flex;
58
+ justify-content: center;
59
+ align-items: center;
60
+ font-weight: bold;
61
+ font-size: 12px;
62
+ color: white;
63
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
64
+ cursor: pointer;
65
+ transition: transform 0.2s ease;
66
+ }
67
+
68
+ .chip:hover {
69
+ transform: scale(1.1);
70
+ }
71
+
72
+ .player-seat {
73
+ position: absolute;
74
+ width: 180px;
75
+ height: 100px;
76
+ border-radius: 10px;
77
+ background: rgba(0, 0, 0, 0.7);
78
+ display: flex;
79
+ flex-direction: column;
80
+ justify-content: center;
81
+ align-items: center;
82
+ transition: all 0.3s ease;
83
+ border: 2px solid transparent;
84
+ }
85
+
86
+ .player-seat.active {
87
+ border-color: #f39c12;
88
+ box-shadow: 0 0 15px rgba(243, 156, 18, 0.5);
89
+ }
90
+
91
+ .player-seat.you {
92
+ border-color: #2ecc71;
93
+ box-shadow: 0 0 15px rgba(46, 204, 113, 0.5);
94
+ }
95
+
96
+ @keyframes dealCard {
97
+ 0% { transform: scale(0.5) rotate(-180deg); opacity: 0; }
98
+ 100% { transform: scale(1) rotate(0deg); opacity: 1; }
99
+ }
100
+
101
+ .deal-animation {
102
+ animation: dealCard 0.5s ease-out forwards;
103
+ }
104
+
105
+ @keyframes pulseGold {
106
+ 0% { box-shadow: 0 0 5px rgba(243, 156, 18, 0.5); }
107
+ 50% { box-shadow: 0 0 20px rgba(243, 156, 18, 0.8); }
108
+ 100% { box-shadow: 0 0 5px rgba(243, 156, 18, 0.5); }
109
+ }
110
+
111
+ .pulse-gold {
112
+ animation: pulseGold 2s infinite;
113
+ }
114
+
115
+ .hand-strength-indicator {
116
+ height: 4px;
117
+ border-radius: 2px;
118
+ margin-top: 5px;
119
+ }
120
+
121
+ .tutorial-modal {
122
+ background: rgba(0, 0, 0, 0.9);
123
+ backdrop-filter: blur(10px);
124
+ }
125
+
126
+ .scroll-hidden::-webkit-scrollbar {
127
+ display: none;
128
+ }
129
+
130
+ .scroll-hidden {
131
+ -ms-overflow-style: none;
132
+ scrollbar-width: none;
133
+ }
134
+ </style>
135
+ </head>
136
+ <body class="min-h-screen">
137
+ <!-- Main Container -->
138
+ <div class="relative min-h-screen flex flex-col">
139
+ <!-- Header -->
140
+ <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">
141
+ <div class="flex items-center space-x-2">
142
+ <i class="fas fa-crown text-yellow-400 text-2xl"></i>
143
+ <h1 class="text-xl font-bold">Hold'em Mastery</h1>
144
+ </div>
145
+ <div class="flex items-center space-x-4">
146
+ <div class="flex items-center space-x-2 text-yellow-400">
147
+ <i class="fas fa-coins"></i>
148
+ <span id="balance" class="font-bold">10,000</span>
149
+ </div>
150
+ <button id="settings-btn" class="text-gray-300 hover:text-white">
151
+ <i class="fas fa-cog text-xl"></i>
152
+ </button>
153
+ </div>
154
+ </header>
155
+
156
+ <!-- Main Content -->
157
+ <main class="flex-1 flex flex-col lg:flex-row">
158
+ <!-- Left Sidebar - Menu & Information -->
159
+ <aside class="lg:w-64 bg-black bg-opacity-70 p-4 border-r border-gray-800 hidden lg:block">
160
+ <div class="space-y-6">
161
+ <div class="space-y-2">
162
+ <h2 class="font-bold text-yellow-400 uppercase text-sm tracking-wider">Menu</h2>
163
+ <ul class="space-y-1">
164
+ <li>
165
+ <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">
166
+ <i class="fas fa-play"></i>
167
+ <span>Quick Play</span>
168
+ </button>
169
+ </li>
170
+ <li>
171
+ <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">
172
+ <i class="fas fa-graduation-cap"></i>
173
+ <span>Tutorials</span>
174
+ </button>
175
+ </li>
176
+ <li>
177
+ <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">
178
+ <i class="fas fa-chart-line"></i>
179
+ <span>Statistics</span>
180
+ </button>
181
+ </li>
182
+ <li>
183
+ <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">
184
+ <i class="fas fa-trophy"></i>
185
+ <span>Achievements</span>
186
+ </button>
187
+ </li>
188
+ </ul>
189
+ </div>
190
+
191
+ <div class="space-y-2">
192
+ <h2 class="font-bold text-yellow-400 uppercase text-sm tracking-wider">Game Info</h2>
193
+ <div class="bg-gray-900 bg-opacity-50 rounded p-3">
194
+ <div class="grid grid-cols-2 gap-2 text-sm">
195
+ <div class="text-gray-400">Blinds:</div>
196
+ <div class="text-right font-medium">100/200</div>
197
+
198
+ <div class="text-gray-400">Players:</div>
199
+ <div class="text-right font-medium">6/6</div>
200
+
201
+ <div class="text-gray-400">AI Level:</div>
202
+ <div class="text-right font-medium">Intermediate</div>
203
+
204
+ <div class="text-gray-400">Hands Played:</div>
205
+ <div class="text-right font-medium">42</div>
206
+ </div>
207
+ </div>
208
+ </div>
209
+
210
+ <div>
211
+ <h2 class="font-bold text-yellow-400 uppercase text-sm tracking-wider mb-2">Player Progress</h2>
212
+ <div class="bg-gray-900 bg-opacity-50 rounded p-3 space-y-2">
213
+ <div>
214
+ <div class="flex justify-between text-sm">
215
+ <span>Beginner Basics</span>
216
+ <span>80%</span>
217
+ </div>
218
+ <div class="w-full bg-gray-700 h-2 rounded-full overflow-hidden">
219
+ <div class="bg-blue-500 h-full" style="width: 80%"></div>
220
+ </div>
221
+ </div>
222
+ <div>
223
+ <div class="flex justify-between text-sm">
224
+ <span>Betting Strategy</span>
225
+ <span>45%</span>
226
+ </div>
227
+ <div class="w-full bg-gray-700 h-2 rounded-full overflow-hidden">
228
+ <div class="bg-green-500 h-full" style="width: 45%"></div>
229
+ </div>
230
+ </div>
231
+ <div>
232
+ <div class="flex justify-between text-sm">
233
+ <span>Bluff Detection</span>
234
+ <span>20%</span>
235
+ </div>
236
+ <div class="w-full bg-gray-700 h-2 rounded-full overflow-hidden">
237
+ <div class="bg-yellow-500 h-full" style="width: 20%"></div>
238
+ </div>
239
+ </div>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </aside>
244
+
245
+ <!-- Main Game Area -->
246
+ <div class="flex-1 flex flex-col">
247
+ <!-- Mobile Menu Toggle -->
248
+ <div class="lg:hidden p-2 border-b border-gray-800 flex justify-between bg-black bg-opacity-70">
249
+ <button id="mobile-menu-btn" class="px-3 py-2 rounded text-gray-300 hover:text-white">
250
+ <i class="fas fa-bars"></i>
251
+ </button>
252
+ <div class="flex space-x-4">
253
+ <button id="mobile-tutorials-btn" class="text-gray-300 hover:text-white">
254
+ <i class="fas fa-graduation-cap"></i>
255
+ </button>
256
+ <button class="text-gray-300 hover:text-white">
257
+ <i class="fas fa-chart-line"></i>
258
+ </button>
259
+ </div>
260
+ </div>
261
+
262
+ <!-- Poker Table -->
263
+ <div class="flex-1 relative overflow-hidden">
264
+ <div class="casino-felt absolute inset-0 rounded-t-lg lg:rounded-none">
265
+ <!-- Table Center with Community Cards -->
266
+ <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
267
+ <div class="bg-black bg-opacity-30 rounded-lg p-3 flex flex-col items-center">
268
+ <div class="text-gray-300 text-sm mb-2">Pot: <span class="text-yellow-400 font-bold text-lg">1,750</span></div>
269
+ <div class="flex space-x-2 mb-4">
270
+ <div class="card hearts deal-animation" style="animation-delay: 0.5s">A♥</div>
271
+ <div class="card diamonds deal-animation" style="animation-delay: 0.6s">K♦</div>
272
+ <div class="card clubs deal-animation" style="animation-delay: 0.7s">10♣</div>
273
+ <div class="card spades deal-animation" style="animation-delay: 0.8s">3♠</div>
274
+ <div class="card face-down">?</div>
275
+ </div>
276
+ <div class="flex space-x-4">
277
+ <div class="bg-gray-900 bg-opacity-80 rounded px-3 py-1 text-sm text-yellow-400">
278
+ Flop
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </div>
283
+
284
+ <!-- Player Seats -->
285
+ <div class="player-seat" style="top: 10%; left: 50%; transform: translateX(-50%);">
286
+ <div class="text-xs text-gray-300">AI Joe</div>
287
+ <div class="flex space-x-1 mt-1">
288
+ <div class="card spades">2♠</div>
289
+ <div class="card spades">7♠</div>
290
+ </div>
291
+ <div class="text-xs text-green-500 font-bold mt-1">Calls</div>
292
+ <div class="text-xs text-yellow-400">1,200 chips</div>
293
+ </div>
294
+
295
+ <div class="player-seat" style="top: 20%; right: 5%;">
296
+ <div class="text-xs text-gray-300">AI Mike</div>
297
+ <div class="flex space-x-1 mt-1">
298
+ <div class="card face-down">?</div>
299
+ <div class="card face-down">?</div>
300
+ </div>
301
+ <div class="text-xs text-gray-400 font-bold mt-1">Folded</div>
302
+ </div>
303
+
304
+ <div class="player-seat" style="bottom: 40%; right: 5%;">
305
+ <div class="text-xs text-gray-300">AI Sarah</div>
306
+ <div class="flex space-x-1 mt-1">
307
+ <div class="card face-down">?</div>
308
+ <div class="card face-down">?</div>
309
+ </div>
310
+ <div class="text-xs text-gray-400 font-bold mt-1">Folded</div>
311
+ </div>
312
+
313
+ <div class="player-seat active" style="bottom: 10%; left: 50%; transform: translateX(-50%);">
314
+ <div class="text-xs text-gray-300">AI Tom</div>
315
+ <div class="flex space-x-1 mt-1">
316
+ <div class="card face-down">?</div>
317
+ <div class="card face-down">?</div>
318
+ </div>
319
+ <div class="text-xs text-blue-500 font-bold mt-1">Checks</div>
320
+ </div>
321
+
322
+ <div class="player-seat active" style="bottom: 40%; left: 5%;">
323
+ <div class="text-xs text-gray-300">AI Lisa</div>
324
+ <div class="flex space-x-1 mt-1">
325
+ <div class="card face-down">?</div>
326
+ <div class="card face-down">?</div>
327
+ </div>
328
+ <div class="text-xs text-blue-500 font-bold mt-1">Checks</div>
329
+ </div>
330
+
331
+ <div class="player-seat you pulse-gold" style="top: 20%; left: 5%;">
332
+ <div class="text-xs text-green-400 font-bold">YOU</div>
333
+ <div class="flex space-x-1 mt-1">
334
+ <div class="card hearts">Q♥</div>
335
+ <div class="card hearts">J♥</div>
336
+ </div>
337
+ <div class="flex justify-center w-full mt-1">
338
+ <div class="hand-strength-indicator bg-gradient-to-r from-red-500 via-yellow-500 to-green-500" style="width: 70%"></div>
339
+ </div>
340
+ <div class="text-xs text-green-500 mt-1">Flush Draw</div>
341
+ <div class="text-xs text-yellow-400">5,420 chips</div>
342
+ </div>
343
+ </div>
344
+ </div>
345
+
346
+ <!-- Player Controls -->
347
+ <div class="bg-black bg-opacity-90 p-4 border-t border-yellow-600">
348
+ <div class="max-w-3xl mx-auto">
349
+ <!-- Action Buttons -->
350
+ <div class="flex justify-center space-x-3 mb-4">
351
+ <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">
352
+ <i class="fas fa-times"></i>
353
+ <span>Fold</span>
354
+ </button>
355
+ <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">
356
+ <i class="fas fa-exchange-alt"></i>
357
+ <span>Check</span>
358
+ </button>
359
+ <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">
360
+ <i class="fas fa-check"></i>
361
+ <span>Call 400</span>
362
+ </button>
363
+ <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">
364
+ <i class="fas fa-plus"></i>
365
+ <span>Raise</span>
366
+ </button>
367
+ </div>
368
+
369
+ <!-- Betting Slider -->
370
+ <div class="mb-4">
371
+ <div class="flex justify-between text-xs text-gray-400 mb-1">
372
+ <span>Min: 400</span>
373
+ <span>Max: 5,420</span>
374
+ </div>
375
+ <input type="range" min="400" max="5420" value="800" class="w-full h-3 bg-gray-700 rounded-lg appearance-none cursor-pointer">
376
+ <div class="flex justify-between">
377
+ <span class="text-sm text-gray-300">Raise to: 1,200</span>
378
+ <button class="text-xs text-yellow-400 hover:text-yellow-300">Set Pot Bet</button>
379
+ </div>
380
+ </div>
381
+
382
+ <!-- Quick Bet Chips -->
383
+ <div class="flex justify-center space-x-2">
384
+ <div class="chip bg-red-500">400</div>
385
+ <div class="chip bg-blue-500">1,000</div>
386
+ <div class="chip bg-purple-500">1,500</div>
387
+ <div class="chip bg-green-500">2,000</div>
388
+ <div class="chip bg-yellow-500">All-in</div>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </div>
393
+
394
+ <!-- Right Sidebar - Game Info & Coaching -->
395
+ <aside class="lg:w-72 bg-black bg-opacity-70 p-4 border-l border-gray-800 hidden lg:block">
396
+ <div class="space-y-6">
397
+ <div>
398
+ <h2 class="font-bold text-yellow-400 uppercase text-sm tracking-wider mb-2 flex items-center space-x-2">
399
+ <i class="fas fa-robot"></i>
400
+ <span>AI Coaching</span>
401
+ </h2>
402
+ <div class="bg-gray-900 bg-opacity-50 rounded-lg p-4">
403
+ <div class="flex items-start space-x-2 mb-3">
404
+ <div class="bg-blue-600 rounded-full w-8 h-8 flex items-center justify-center text-white">
405
+ <i class="fas fa-lightbulb"></i>
406
+ </div>
407
+ <div class="flex-1">
408
+ <div class="text-sm font-medium text-blue-300">Current Situation</div>
409
+ <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>
410
+ </div>
411
+ </div>
412
+ <div class="flex items-start space-x-2 mb-3">
413
+ <div class="bg-purple-600 rounded-full w-8 h-8 flex items-center justify-center text-white">
414
+ <i class="fas fa-brain"></i>
415
+ </div>
416
+ <div class="flex-1">
417
+ <div class="text-sm font-medium text-purple-300">Hand Strength</div>
418
+ <div class="text-xs text-gray-300 mt-1">
419
+ <div class="grid grid-cols-2 gap-2">
420
+ <div>Flush draw: <span class="text-green-400">38%</span></div>
421
+ <div>Pair Q/J: <span class="text-yellow-400">25%</span></div>
422
+ <div>Two pair: <span class="text-blue-400">10%</span></div>
423
+ <div>Straight: <span class="text-red-400">5%</span></div>
424
+ </div>
425
+ </div>
426
+ </div>
427
+ </div>
428
+ <div class="flex items-start space-x-2">
429
+ <div class="bg-yellow-600 rounded-full w-8 h-8 flex items-center justify-center text-white">
430
+ <i class="fas fa-star"></i>
431
+ </div>
432
+ <div class="flex-1">
433
+ <div class="text-sm font-medium text-yellow-300">Recommended Action</div>
434
+ <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>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </div>
439
+
440
+ <div>
441
+ <h2 class="font-bold text-yellow-400 uppercase text-sm tracking-wider mb-2 flex items-center space-x-2">
442
+ <i class="fas fa-history"></i>
443
+ <span>Hand History</span>
444
+ </h2>
445
+ <div class="bg-gray-900 bg-opacity-50 rounded-lg p-3 max-h-60 overflow-y-auto scroll-hidden">
446
+ <div class="space-y-2">
447
+ <div class="text-xs text-gray-400 border-b border-gray-800 pb-2">
448
+ <div class="font-medium">Pre-flop</div>
449
+ <div class="text-xxs">You: Raise to 400</div>
450
+ <div class="text-xxs">AI Joe: Calls 400</div>
451
+ <div class="text-xxs">AI Mike: Folds</div>
452
+ </div>
453
+ <div class="text-xs text-gray-400 border-b border-gray-800 pb-2">
454
+ <div class="font-medium">Flop</div>
455
+ <div class="text-xxs">A♥ K♦ 10♣</div>
456
+ <div class="text-xxs">AI Lisa: Checks</div>
457
+ <div class="text-xxs">AI Tom: Checks</div>
458
+ <div class="text-xxs">AI Joe: Bets 400</div>
459
+ </div>
460
+ </div>
461
+ </div>
462
+ </div>
463
+
464
+ <div>
465
+ <h2 class="font-bold text-yellow-400 uppercase text-sm tracking-wider mb-2 flex items-center space-x-2">
466
+ <i class="fas fa-chart-pie"></i>
467
+ <span>Quick Stats</span>
468
+ </h2>
469
+ <div class="bg-gray-900 bg-opacity-50 rounded-lg p-3 grid grid-cols-2 gap-4 text-xs">
470
+ <div class="space-y-1">
471
+ <div class="text-gray-400">VPIP</div>
472
+ <div class="text-lg font-bold text-green-400">28%</div>
473
+ </div>
474
+ <div class="space-y-1">
475
+ <div class="text-gray-400">PFR</div>
476
+ <div class="text-lg font-bold text-blue-400">18%</div>
477
+ </div>
478
+ <div class="space-y-1">
479
+ <div class="text-gray-400">3-Bet</div>
480
+ <div class="text-lg font-bold text-yellow-400">9%</div>
481
+ </div>
482
+ <div class="space-y-1">
483
+ <div class="text-gray-400">Win Rate</div>
484
+ <div class="text-lg font-bold">12bb/100</div>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </div>
489
+ </aside>
490
+ </main>
491
+
492
+ <!-- Mobile Bottom Navigation -->
493
+ <div class="lg:hidden bg-black bg-opacity-90 border-t border-gray-800 flex justify-around py-3">
494
+ <button class="flex flex-col items-center text-gray-400 hover:text-yellow-400">
495
+ <i class="fas fa-home text-xl mb-1"></i>
496
+ <span class="text-xxs">Home</span>
497
+ </button>
498
+ <button id="mobile-coaching-btn" class="flex flex-col items-center text-gray-400 hover:text-blue-400">
499
+ <i class="fas fa-robot text-xl mb-1"></i>
500
+ <span class="text-xxs">Coaching</span>
501
+ </button>
502
+ <button class="flex flex-col items-center text-yellow-400">
503
+ <i class="fas fa-play-circle text-xl mb-1"></i>
504
+ <span class="text-xxs">Play</span>
505
+ </button>
506
+ <button id="mobile-stats-btn" class="flex flex-col items-center text-gray-400 hover:text-green-400">
507
+ <i class="fas fa-chart-line text-xl mb-1"></i>
508
+ <span class="text-xxs">Stats</span>
509
+ </button>
510
+ <button class="flex flex-col items-center text-gray-400 hover:text-purple-400">
511
+ <i class="fas fa-cog text-xl mb-1"></i>
512
+ <span class="text-xxs">Settings</span>
513
+ </button>
514
+ </div>
515
+ </div>
516
+
517
+ <!-- Mobile Menu Modal -->
518
+ <div id="mobile-menu-modal" class="fixed inset-0 bg-black bg-opacity-90 z-50 flex flex-col hidden">
519
+ <div class="p-4 flex justify-between items-center border-b border-gray-800">
520
+ <h2 class="text-xl font-bold text-yellow-400">Menu</h2>
521
+ <button id="close-mobile-menu" class="text-gray-400 hover:text-white">
522
+ <i class="fas fa-times text-2xl"></i>
523
+ </button>
524
+ </div>
525
+ <div class="flex-1 p-4 overflow-y-auto">
526
+ <ul class="space-y-2">
527
+ <li>
528
+ <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">
529
+ <i class="fas fa-play text-lg text-green-400"></i>
530
+ <span>Quick Play</span>
531
+ </button>
532
+ </li>
533
+ <li>
534
+ <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">
535
+ <i class="fas fa-graduation-cap text-lg text-blue-400"></i>
536
+ <span>Tutorials</span>
537
+ </button>
538
+ </li>
539
+ <li>
540
+ <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">
541
+ <i class="fas fa-chart-line text-lg text-purple-400"></i>
542
+ <span>Statistics</span>
543
+ </button>
544
+ </li>
545
+ <li>
546
+ <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">
547
+ <i class="fas fa-trophy text-lg text-yellow-400"></i>
548
+ <span>Achievements</span>
549
+ </button>
550
+ </li>
551
+ <li>
552
+ <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">
553
+ <i class="fas fa-cog text-lg text-gray-400"></i>
554
+ <span>Settings</span>
555
+ </button>
556
+ </li>
557
+ </ul>
558
+
559
+ <div class="mt-8">
560
+ <h3 class="text-gray-400 text-sm uppercase mb-3">Player Progress</h3>
561
+ <div class="space-y-3">
562
+ <div>
563
+ <div class="flex justify-between text-sm mb-1">
564
+ <span class="text-gray-300">Beginner Basics</span>
565
+ <span class="text-yellow-400">80%</span>
566
+ </div>
567
+ <div class="w-full bg-gray-700 h-2 rounded-full overflow-hidden">
568
+ <div class="bg-blue-500 h-full" style="width: 80%"></div>
569
+ </div>
570
+ </div>
571
+ <div>
572
+ <div class="flex justify-between text-sm mb-1">
573
+ <span class="text-gray-300">Betting Strategy</span>
574
+ <span class="text-yellow-400">45%</span>
575
+ </div>
576
+ <div class="w-full bg-gray-700 h-2 rounded-full overflow-hidden">
577
+ <div class="bg-green-500 h-full" style="width: 45%"></div>
578
+ </div>
579
+ </div>
580
+ <div>
581
+ <div class="flex justify-between text-sm mb-1">
582
+ <span class="text-gray-300">Bluff Detection</span>
583
+ <span class="text-yellow-400">20%</span>
584
+ </div>
585
+ <div class="w-full bg-gray-700 h-2 rounded-full overflow-hidden">
586
+ <div class="bg-yellow-500 h-full" style="width: 20%"></div>
587
+ </div>
588
+ </div>
589
+ </div>
590
+ </div>
591
+ </div>
592
+ </div>
593
+
594
+ <!-- Tutorial Modal -->
595
+ <div id="tutorial-modal" class="fixed inset-0 bg-black bg-opacity-90 z-50 flex justify-center items-center hidden tutorial-modal">
596
+ <div class="bg-gray-900 bg-opacity-90 rounded-lg max-w-md w-full mx-4 border border-yellow-500 overflow-hidden">
597
+ <div class="p-4 bg-gradient-to-b from-gray-800 to-gray-900 border-b border-yellow-500 flex justify-between items-center">
598
+ <h2 class="text-xl font-bold text-yellow-400">
599
+ <i class="fas fa-graduation-cap mr-2"></i>
600
+ Poker Basics
601
+ </h2>
602
+ <button id="close-tutorial" class="text-gray-400 hover:text-white">
603
+ <i class="fas fa-times text-xl"></i>
604
+ </button>
605
+ </div>
606
+ <div class="p-4">
607
+ <div class="mb-4">
608
+ <h3 class="text-lg font-semibold text-white mb-2">Lesson 1: Hand Rankings</h3>
609
+ <div class="text-sm text-gray-300 mb-4">
610
+ <p>The first step to mastering poker is understanding hand values:</p>
611
+ <ol class="list-decimal pl-5 mt-2 space-y-1">
612
+ <li>Royal Flush: A-K-Q-J-10, all same suit</li>
613
+ <li>Straight Flush: Five cards in sequence, same suit</li>
614
+ <li>Four of a Kind: Four cards of the same rank</li>
615
+ <li>Full House: Three of a kind plus a pair</li>
616
+ <li>Flush: Five cards of the same suit</li>
617
+ <li>Straight: Five cards in sequence</li>
618
+ <li>Three of a Kind: Three cards of the same rank</li>
619
+ <li>Two Pair: Two different pairs</li>
620
+ <li>One Pair: Two cards of the same rank</li>
621
+ <li>High Card: The highest card when no other hand is made</li>
622
+ </ol>
623
+ </div>
624
+ <div class="bg-gray-800 p-3 rounded-lg">
625
+ <div class="flex space-x-2 overflow-x-auto pb-2">
626
+ <div class="card hearts">A♥</div>
627
+ <div class="card hearts">K♥</div>
628
+ <div class="card hearts">Q♥</div>
629
+ <div class="card hearts">J♥</div>
630
+ <div class="card hearts">10♥</div>
631
+ </div>
632
+ <div class="text-xs text-center mt-2 text-yellow-400">Royal Flush - The strongest possible hand</div>
633
+ </div>
634
+ </div>
635
+
636
+ <div class="flex justify-between border-t border-gray-800 pt-4">
637
+ <button class="px-4 py-2 rounded-lg bg-gray-700 text-gray-300 text-sm font-medium">
638
+ <i class="fas fa-arrow-left mr-2"></i> Back
639
+ </button>
640
+ <button class="px-4 py-2 rounded-lg bg-yellow-600 text-white text-sm font-medium">
641
+ Next <i class="fas fa-arrow-right ml-2"></i>
642
+ </button>
643
+ </div>
644
+ </div>
645
+ </div>
646
+ </div>
647
+
648
+ <!-- Coaching Panel (Mobile) -->
649
+ <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">
650
+ <div class="p-4">
651
+ <div class="flex items-center justify-between mb-3">
652
+ <h3 class="text-lg font-bold text-blue-400">
653
+ <i class="fas fa-robot mr-2"></i>
654
+ AI Coaching
655
+ </h3>
656
+ <button id="close-coaching" class="text-gray-400 hover:text-white">
657
+ <i class="fas fa-times"></i>
658
+ </button>
659
+ </div>
660
+ <div class="text-xs text-gray-300 mb-4">
661
+ 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.
662
+ </div>
663
+ <div class="grid grid-cols-2 gap-2 text-xxs">
664
+ <div class="bg-gray-800 p-2 rounded">
665
+ <div class="text-green-400 font-bold mb-1">Flush draw</div>
666
+ <div class="text-gray-300">38% chance</div>
667
+ </div>
668
+ <div class="bg-gray-800 p-2 rounded">
669
+ <div class="text-yellow-400 font-bold mb-1">Pair Q/J</div>
670
+ <div class="text-gray-300">25% chance</div>
671
+ </div>
672
+ <div class="bg-gray-800 p-2 rounded">
673
+ <div class="text-blue-400 font-bold mb-1">Two pair</div>
674
+ <div class="text-gray-300">10% chance</div>
675
+ </div>
676
+ <div class="bg-gray-800 p-2 rounded">
677
+ <div class="text-red-400 font-bold mb-1">Straight</div>
678
+ <div class="text-gray-300">5% chance</div>
679
+ </div>
680
+ </div>
681
+ </div>
682
+ </div>
683
+
684
+ <!-- Stats Panel (Mobile) -->
685
+ <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">
686
+ <div class="p-4">
687
+ <div class="flex items-center justify-between mb-3">
688
+ <h3 class="text-lg font-bold text-green-400">
689
+ <i class="fas fa-chart-pie mr-2"></i>
690
+ Quick Stats
691
+ </h3>
692
+ <button id="close-stats" class="text-gray-400 hover:text-white">
693
+ <i class="fas fa-times"></i>
694
+ </button>
695
+ </div>
696
+ <div class="grid grid-cols-2 gap-4 text-xs">
697
+ <div class="space-y-1">
698
+ <div class="text-gray-400">VPIP</div>
699
+ <div class="text-lg font-bold text-green-400">28%</div>
700
+ </div>
701
+ <div class="space-y-1">
702
+ <div class="text-gray-400">PFR</div>
703
+ <div class="text-lg font-bold text-blue-400">18%</div>
704
+ </div>
705
+ <div class="space-y-1">
706
+ <div class="text-gray-400">3-Bet</div>
707
+ <div class="text-lg font-bold text-yellow-400">9%</div>
708
+ </div>
709
+ <div class="space-y-1">
710
+ <div class="text-gray-400">Win Rate</div>
711
+ <div class="text-lg font-bold">12bb/100</div>
712
+ </div>
713
+ </div>
714
+ </div>
715
+ </div>
716
+
717
+ <script>
718
+ // Mobile Menu Toggle
719
+ document.getElementById('mobile-menu-btn').addEventListener('click', function() {
720
+ document.getElementById('mobile-menu-modal').classList.remove('hidden');
721
+ });
722
+
723
+ document.getElementById('close-mobile-menu').addEventListener('click', function() {
724
+ document.getElementById('mobile-menu-modal').classList.add('hidden');
725
+ });
726
+
727
+ // Tutorial Modal
728
+ document.getElementById('tutorials-btn').addEventListener('click', function() {
729
+ document.getElementById('tutorial-modal').classList.remove('hidden');
730
+ });
731
+
732
+ document.getElementById('mobile-tutorials-btn').addEventListener('click', function() {
733
+ document.getElementById('tutorial-modal').classList.remove('hidden');
734
+ });
735
+
736
+ document.getElementById('mobile-tutorials-menu-btn').addEventListener('click', function() {
737
+ document.getElementById('tutorial-modal').classList.remove('hidden');
738
+ document.getElementById('mobile-menu-modal').classList.add('hidden');
739
+ });
740
+
741
+ document.getElementById('close-tutorial').addEventListener('click', function() {
742
+ document.getElementById('tutorial-modal').classList.add('hidden');
743
+ });
744
+
745
+ // Mobile Coaching Panel
746
+ document.getElementById('mobile-coaching-btn').addEventListener('click', function() {
747
+ document.getElementById('mobile-coaching-panel').classList.remove('hidden');
748
+ document.getElementById('mobile-coaching-panel').classList.remove('translate-y-full');
749
+ document.getElementById('mobile-coaching-panel').classList.add('translate-y-0');
750
+ });
751
+
752
+ document.getElementById('close-coaching').addEventListener('click', function() {
753
+ document.getElementById('mobile-coaching-panel').classList.add('translate-y-full');
754
+ setTimeout(() => {
755
+ document.getElementById('mobile-coaching-panel').classList.add('hidden');
756
+ }, 300);
757
+ });
758
+
759
+ // Mobile Stats Panel
760
+ document.getElementById('mobile-stats-btn').addEventListener('click', function() {
761
+ document.getElementById('mobile-stats-panel').classList.remove('hidden');
762
+ document.getElementById('mobile-stats-panel').classList.remove('translate-y-full');
763
+ document.getElementById('mobile-stats-panel').classList.add('translate-y-0');
764
+ });
765
+
766
+ document.getElementById('close-stats').addEventListener('click', function() {
767
+ document.getElementById('mobile-stats-panel').classList.add('translate-y-full');
768
+ setTimeout(() => {
769
+ document.getElementById('mobile-stats-panel').classList.add('hidden');
770
+ }, 300);
771
+ });
772
+
773
+ // Animation for dealing cards
774
+ setTimeout(() => {
775
+ const cards = document.querySelectorAll('.deal-animation');
776
+ cards.forEach(card => {
777
+ card.style.opacity = '1';
778
+ });
779
+ }, 100);
780
+ </script>
781
+ <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>
782
+ </html>
prompts.txt ADDED
File without changes