Hugging Face's logo

Spaces:
Juno360219
/
cookie-casino
Running

App Files Community
Juno360219 commited on
Commit
7d6c76b
·
verified ·
1 Parent(s): 31fd0e3

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1352 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cookie Casino
3
- emoji: 💻
4
- colorFrom: gray
5
- colorTo: yellow
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: cookie-casino
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: gray
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,1352 @@
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>Cookie Casino - Bet Your Browser Cookies!</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 spin {
11
+ 0% { transform: rotate(0deg); }
12
+ 100% { transform: rotate(360deg); }
13
+ }
14
+ @keyframes pulse {
15
+ 0% { transform: scale(1); }
16
+ 50% { transform: scale(1.05); }
17
+ 100% { transform: scale(1); }
18
+ }
19
+ @keyframes float {
20
+ 0% { transform: translateY(0px); }
21
+ 50% { transform: translateY(-10px); }
22
+ 100% { transform: translateY(0px); }
23
+ }
24
+ .slot-machine {
25
+ background: linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%);
26
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
27
+ }
28
+ .slot-window {
29
+ background: rgba(255, 255, 255, 0.9);
30
+ box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
31
+ }
32
+ .cookie-chip {
33
+ transition: all 0.3s ease;
34
+ }
35
+ .cookie-chip:hover {
36
+ transform: translateY(-5px);
37
+ }
38
+ .spinning {
39
+ animation: spin 0.1s linear infinite;
40
+ }
41
+ .win-animation {
42
+ animation: pulse 0.5s ease infinite;
43
+ }
44
+ .cookie-jar {
45
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
46
+ }
47
+ .freebie-card:hover {
48
+ transform: translateY(-5px);
49
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
50
+ }
51
+ .floating {
52
+ animation: float 3s ease-in-out infinite;
53
+ }
54
+ .reward-badge {
55
+ position: absolute;
56
+ top: -8px;
57
+ right: -8px;
58
+ background: #f59e0b;
59
+ color: white;
60
+ border-radius: 50%;
61
+ width: 24px;
62
+ height: 24px;
63
+ display: flex;
64
+ align-items: center;
65
+ justify-content: center;
66
+ font-size: 12px;
67
+ font-weight: bold;
68
+ }
69
+ </style>
70
+ </head>
71
+ <body class="bg-gray-900 text-white min-h-screen">
72
+ <div class="container mx-auto px-4 py-8">
73
+ <!-- Header -->
74
+ <header class="flex flex-col items-center mb-8">
75
+ <div class="flex items-center justify-center mb-4">
76
+ <i class="fas fa-cookie-bite text-4xl text-yellow-300 mr-3 floating"></i>
77
+ <h1 class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-yellow-300 to-yellow-500">
78
+ Cookie Casino
79
+ </h1>
80
+ </div>
81
+ <p class="text-gray-300 text-center max-w-2xl">
82
+ Welcome to the world's first casino where you bet with your browser cookies!
83
+ No real money involved - just delicious digital cookies at stake.
84
+ </p>
85
+ </header>
86
+
87
+ <!-- Cookie Stats -->
88
+ <div class="bg-gray-800 rounded-xl p-6 mb-8 shadow-lg">
89
+ <div class="flex flex-col md:flex-row justify-between items-center">
90
+ <div class="mb-4 md:mb-0">
91
+ <h2 class="text-xl font-semibold mb-2">Your Cookie Wallet</h2>
92
+ <div class="flex items-center">
93
+ <i class="fas fa-cookie text-2xl text-yellow-300 mr-2"></i>
94
+ <span id="cookieCount" class="text-2xl font-bold">100</span>
95
+ </div>
96
+ </div>
97
+ <div class="flex space-x-4">
98
+ <button id="infoBtn" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg flex items-center">
99
+ <i class="fas fa-info-circle mr-2"></i> Cookie Info
100
+ </button>
101
+ <button id="resetBtn" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg flex items-center">
102
+ <i class="fas fa-trash-alt mr-2"></i> Clear Cookies
103
+ </button>
104
+ </div>
105
+ </div>
106
+ </div>
107
+
108
+ <!-- Free Cookie Rewards -->
109
+ <div class="bg-gradient-to-r from-purple-800 to-indigo-800 rounded-xl p-6 mb-8 shadow-lg">
110
+ <div class="flex items-center justify-between mb-6">
111
+ <h2 class="text-2xl font-bold flex items-center">
112
+ <i class="fas fa-gift mr-3 text-yellow-300"></i>
113
+ Free Cookie Rewards
114
+ </h2>
115
+ <div class="text-yellow-300">
116
+ <i class="fas fa-clock mr-1"></i>
117
+ <span id="nextRewardTime">Next reward in: 00:00:00</span>
118
+ </div>
119
+ </div>
120
+
121
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
122
+ <div class="freebie-card bg-gray-800 rounded-lg p-4 shadow-md transition-all duration-300 relative cursor-pointer" data-reward="10" data-id="daily">
123
+ <div class="flex items-center mb-3">
124
+ <div class="bg-yellow-500 rounded-full w-10 h-10 flex items-center justify-center mr-3">
125
+ <i class="fas fa-calendar-day text-white"></i>
126
+ </div>
127
+ <h3 class="font-bold">Daily Reward</h3>
128
+ </div>
129
+ <p class="text-gray-400 text-sm mb-3">Claim your daily 10 cookies!</p>
130
+ <button class="claim-btn w-full bg-yellow-600 hover:bg-yellow-700 text-white py-2 rounded-lg flex items-center justify-center" disabled>
131
+ <i class="fas fa-lock mr-2"></i> Claimed
132
+ </button>
133
+ <div class="reward-badge">10</div>
134
+ </div>
135
+
136
+ <div class="freebie-card bg-gray-800 rounded-lg p-4 shadow-md transition-all duration-300 relative cursor-pointer" data-reward="25" data-id="social">
137
+ <div class="flex items-center mb-3">
138
+ <div class="bg-blue-500 rounded-full w-10 h-10 flex items-center justify-center mr-3">
139
+ <i class="fas fa-share-alt text-white"></i>
140
+ </div>
141
+ <h3 class="font-bold">Social Share</h3>
142
+ </div>
143
+ <p class="text-gray-400 text-sm mb-3">Share on social media for 25 cookies!</p>
144
+ <button class="claim-btn w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded-lg flex items-center justify-center">
145
+ <i class="fas fa-share mr-2"></i> Claim
146
+ </button>
147
+ <div class="reward-badge">25</div>
148
+ </div>
149
+
150
+ <div class="freebie-card bg-gray-800 rounded-lg p-4 shadow-md transition-all duration-300 relative cursor-pointer" data-reward="50" data-id="watch">
151
+ <div class="flex items-center mb-3">
152
+ <div class="bg-red-500 rounded-full w-10 h-10 flex items-center justify-center mr-3">
153
+ <i class="fas fa-video text-white"></i>
154
+ </div>
155
+ <h3 class="font-bold">Watch Ad</h3>
156
+ </div>
157
+ <p class="text-gray-400 text-sm mb-3">Watch a short video for 50 cookies!</p>
158
+ <button class="claim-btn w-full bg-red-600 hover:bg-red-700 text-white py-2 rounded-lg flex items-center justify-center">
159
+ <i class="fas fa-play mr-2"></i> Watch
160
+ </button>
161
+ <div class="reward-badge">50</div>
162
+ </div>
163
+
164
+ <div class="freebie-card bg-gray-800 rounded-lg p-4 shadow-md transition-all duration-300 relative cursor-pointer" data-reward="100" data-id="survey">
165
+ <div class="flex items-center mb-3">
166
+ <div class="bg-green-500 rounded-full w-10 h-10 flex items-center justify-center mr-3">
167
+ <i class="fas fa-poll text-white"></i>
168
+ </div>
169
+ <h3 class="font-bold">Quick Survey</h3>
170
+ </div>
171
+ <p class="text-gray-400 text-sm mb-3">Complete a quick survey for 100 cookies!</p>
172
+ <button class="claim-btn w-full bg-green-600 hover:bg-green-700 text-white py-2 rounded-lg flex items-center justify-center">
173
+ <i class="fas fa-check mr-2"></i> Start
174
+ </button>
175
+ <div class="reward-badge">100</div>
176
+ </div>
177
+ </div>
178
+
179
+ <div class="mt-6 text-center">
180
+ <button id="moreRewardsBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-6 rounded-lg inline-flex items-center">
181
+ <i class="fas fa-chevron-down mr-2"></i> Show More Rewards
182
+ </button>
183
+ </div>
184
+
185
+ <div id="moreRewardsSection" class="hidden mt-6">
186
+ <h3 class="text-xl font-semibold mb-4 flex items-center">
187
+ <i class="fas fa-star mr-2 text-yellow-300"></i>
188
+ Special Offers
189
+ </h3>
190
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
191
+ <div class="freebie-card bg-gray-800 rounded-lg p-4 shadow-md transition-all duration-300 relative cursor-pointer" data-reward="75" data-id="referral">
192
+ <div class="flex items-center mb-3">
193
+ <div class="bg-purple-500 rounded-full w-10 h-10 flex items-center justify-center mr-3">
194
+ <i class="fas fa-user-plus text-white"></i>
195
+ </div>
196
+ <h3 class="font-bold">Refer a Friend</h3>
197
+ </div>
198
+ <p class="text-gray-400 text-sm mb-3">Get 75 cookies for each friend!</p>
199
+ <button class="claim-btn w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg flex items-center justify-center">
200
+ <i class="fas fa-link mr-2"></i> Get Link
201
+ </button>
202
+ <div class="reward-badge">75</div>
203
+ </div>
204
+
205
+ <div class="freebie-card bg-gray-800 rounded-lg p-4 shadow-md transition-all duration-300 relative cursor-pointer" data-reward="200" data-id="achievement">
206
+ <div class="flex items-center mb-3">
207
+ <div class="bg-pink-500 rounded-full w-10 h-10 flex items-center justify-center mr-3">
208
+ <i class="fas fa-trophy text-white"></i>
209
+ </div>
210
+ <h3 class="font-bold">Achievement</h3>
211
+ </div>
212
+ <p class="text-gray-400 text-sm mb-3">Win 5 games to get 200 cookies!</p>
213
+ <button class="claim-btn w-full bg-pink-600 hover:bg-pink-700 text-white py-2 rounded-lg flex items-center justify-center">
214
+ <i class="fas fa-lock mr-2"></i> Locked
215
+ </button>
216
+ <div class="reward-badge">200</div>
217
+ </div>
218
+
219
+ <div class="freebie-card bg-gray-800 rounded-lg p-4 shadow-md transition-all duration-300 relative cursor-pointer" data-reward="150" data-id="streak">
220
+ <div class="flex items-center mb-3">
221
+ <div class="bg-orange-500 rounded-full w-10 h-10 flex items-center justify-center mr-3">
222
+ <i class="fas fa-fire text-white"></i>
223
+ </div>
224
+ <h3 class="font-bold">7-Day Streak</h3>
225
+ </div>
226
+ <p class="text-gray-400 text-sm mb-3">Play daily for a week to get 150 cookies!</p>
227
+ <button class="claim-btn w-full bg-orange-600 hover:bg-orange-700 text-white py-2 rounded-lg flex items-center justify-center">
228
+ <i class="fas fa-lock mr-2"></i> Locked
229
+ </button>
230
+ <div class="reward-badge">150</div>
231
+ </div>
232
+ </div>
233
+ </div>
234
+ </div>
235
+
236
+ <!-- Game Selection -->
237
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
238
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow cursor-pointer game-card" data-game="slots">
239
+ <div class="flex flex-col items-center">
240
+ <div class="bg-gray-700 p-4 rounded-full mb-4">
241
+ <i class="fas fa-sliders-h text-3xl text-yellow-300"></i>
242
+ </div>
243
+ <h3 class="text-xl font-semibold mb-2">Cookie Slots</h3>
244
+ <p class="text-gray-400 text-center">Spin to win delicious cookies! Match 3 symbols for a jackpot.</p>
245
+ </div>
246
+ </div>
247
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow cursor-pointer game-card" data-game="roulette">
248
+ <div class="flex flex-col items-center">
249
+ <div class="bg-gray-700 p-4 rounded-full mb-4">
250
+ <i class="fas fa-circle-notch text-3xl text-red-400"></i>
251
+ </div>
252
+ <h3 class="text-xl font-semibold mb-2">Cookie Roulette</h3>
253
+ <p class="text-gray-400 text-center">Bet on your favorite color and watch the wheel spin!</p>
254
+ </div>
255
+ </div>
256
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow cursor-pointer game-card" data-game="blackjack">
257
+ <div class="flex flex-col items-center">
258
+ <div class="bg-gray-700 p-4 rounded-full mb-4">
259
+ <i class="fas fa-club text-3xl text-green-400"></i>
260
+ </div>
261
+ <h3 class="text-xl font-semibold mb-2">Cookie Jack</h3>
262
+ <p class="text-gray-400 text-center">Get as close to 21 as possible without going over!</p>
263
+ </div>
264
+ </div>
265
+ </div>
266
+
267
+ <!-- Game Area -->
268
+ <div id="gameArea" class="hidden">
269
+ <!-- Slot Machine (default game) -->
270
+ <div id="slotGame" class="game-container">
271
+ <div class="slot-machine rounded-2xl p-8 mb-8">
272
+ <div class="flex justify-center mb-8">
273
+ <div class="slot-window w-16 h-16 mx-2 rounded-lg flex items-center justify-center text-3xl font-bold" id="slot1">🍪</div>
274
+ <div class="slot-window w-16 h-16 mx-2 rounded-lg flex items-center justify-center text-3xl font-bold" id="slot2">🍪</div>
275
+ <div class="slot-window w-16 h-16 mx-2 rounded-lg flex items-center justify-center text-3xl font-bold" id="slot3">🍪</div>
276
+ </div>
277
+ <div class="flex flex-col items-center">
278
+ <button id="spinBtn" class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-8 rounded-full text-lg mb-4">
279
+ SPIN (10 cookies)
280
+ </button>
281
+ <div id="slotResult" class="text-xl font-semibold text-center h-8"></div>
282
+ </div>
283
+ </div>
284
+ </div>
285
+
286
+ <!-- Roulette Game (hidden by default) -->
287
+ <div id="rouletteGame" class="game-container hidden">
288
+ <div class="bg-gray-800 rounded-2xl p-8 mb-8">
289
+ <div class="flex justify-center mb-8">
290
+ <div class="relative w-64 h-64 rounded-full border-8 border-gray-700 bg-green-700 overflow-hidden">
291
+ <div id="rouletteWheel" class="w-full h-full relative">
292
+ <!-- Roulette segments will be added by JS -->
293
+ </div>
294
+ <div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-4 h-8 bg-red-600 z-10"></div>
295
+ </div>
296
+ </div>
297
+ <div class="flex flex-col items-center">
298
+ <div class="flex space-x-4 mb-6">
299
+ <button class="bet-btn bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded" data-bet="red">
300
+ Bet Red (10 cookies)
301
+ </button>
302
+ <button class="bet-btn bg-black hover:bg-gray-900 text-white font-bold py-2 px-6 rounded" data-bet="black">
303
+ Bet Black (10 cookies)
304
+ </button>
305
+ <button class="bet-btn bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded" data-bet="green">
306
+ Bet Green (20 cookies)
307
+ </button>
308
+ </div>
309
+ <div id="rouletteResult" class="text-xl font-semibold text-center h-8"></div>
310
+ </div>
311
+ </div>
312
+ </div>
313
+
314
+ <!-- Blackjack Game (hidden by default) -->
315
+ <div id="blackjackGame" class="game-container hidden">
316
+ <div class="bg-gray-800 rounded-2xl p-8 mb-8">
317
+ <div class="flex flex-col items-center">
318
+ <div class="mb-8">
319
+ <h3 class="text-xl font-semibold mb-2">Dealer's Hand</h3>
320
+ <div id="dealerHand" class="flex space-x-2 mb-4 min-h-20"></div>
321
+ <h3 class="text-xl font-semibold mb-2">Your Hand</h3>
322
+ <div id="playerHand" class="flex space-x-2 mb-6 min-h-20"></div>
323
+ <div id="blackjackResult" class="text-xl font-semibold text-center mb-4 h-8"></div>
324
+ </div>
325
+ <div class="flex space-x-4">
326
+ <button id="hitBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded">
327
+ Hit (10 cookies)
328
+ </button>
329
+ <button id="standBtn" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-6 rounded">
330
+ Stand
331
+ </button>
332
+ <button id="newGameBtn" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded">
333
+ New Game
334
+ </button>
335
+ </div>
336
+ </div>
337
+ </div>
338
+ </div>
339
+
340
+ <div class="flex justify-center">
341
+ <button id="backBtn" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-6 rounded-lg">
342
+ <i class="fas fa-arrow-left mr-2"></i> Back to Games
343
+ </button>
344
+ </div>
345
+ </div>
346
+
347
+ <!-- Cookie Jar -->
348
+ <div class="cookie-jar rounded-xl p-6 mt-8">
349
+ <h2 class="text-2xl font-bold mb-4 text-center text-gray-800">Your Cookie Collection</h2>
350
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4" id="cookieCollection">
351
+ <!-- Cookies will be added here by JS -->
352
+ </div>
353
+ </div>
354
+
355
+ <!-- Info Modal -->
356
+ <div id="infoModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
357
+ <div class="bg-gray-800 rounded-xl p-6 max-w-md w-full mx-4">
358
+ <div class="flex justify-between items-center mb-4">
359
+ <h3 class="text-xl font-bold">About Cookie Casino</h3>
360
+ <button id="closeModal" class="text-gray-400 hover:text-white">
361
+ <i class="fas fa-times"></i>
362
+ </button>
363
+ </div>
364
+ <div class="space-y-4">
365
+ <p>
366
+ Cookie Casino is a fun, interactive game that uses your browser's cookies as currency.
367
+ No real money is involved, and all cookies are stored locally in your browser.
368
+ </p>
369
+ <p>
370
+ <strong>How it works:</strong> You start with 100 cookies. Bet them in our games to win more!
371
+ Different games have different odds and payouts.
372
+ </p>
373
+ <p>
374
+ <strong>New Rewards:</strong> Now you can earn free cookies by completing offers, watching ads,
375
+ sharing on social media, and more!
376
+ </p>
377
+ <div class="bg-yellow-900 bg-opacity-30 p-3 rounded-lg">
378
+ <i class="fas fa-exclamation-triangle text-yellow-400 mr-2"></i>
379
+ This is not a real gambling site. No real money or actual cookies are exchanged.
380
+ </div>
381
+ </div>
382
+ </div>
383
+ </div>
384
+
385
+ <!-- Reward Claim Modal -->
386
+ <div id="rewardModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
387
+ <div class="bg-gray-800 rounded-xl p-6 max-w-md w-full mx-4 text-center">
388
+ <div class="flex justify-center mb-4">
389
+ <div class="w-20 h-20 bg-yellow-500 rounded-full flex items-center justify-center text-4xl">
390
+ <i class="fas fa-gift text-white"></i>
391
+ </div>
392
+ </div>
393
+ <h3 class="text-xl font-bold mb-2" id="rewardTitle">Reward Claimed!</h3>
394
+ <p class="text-gray-300 mb-4" id="rewardMessage">You've earned 10 cookies!</p>
395
+ <div class="flex justify-center mb-4">
396
+ <div class="flex items-center bg-yellow-900 bg-opacity-30 px-4 py-2 rounded-lg">
397
+ <i class="fas fa-cookie text-yellow-300 mr-2"></i>
398
+ <span class="font-bold" id="rewardAmount">+10</span>
399
+ </div>
400
+ </div>
401
+ <button id="closeRewardModal" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg">
402
+ Awesome!
403
+ </button>
404
+ </div>
405
+ </div>
406
+ </div>
407
+
408
+ <script>
409
+ // Game state
410
+ let cookies = 100;
411
+ let currentGame = null;
412
+ let cookieCollection = ['🍪', '🍪', '🍪']; // Basic cookies everyone starts with
413
+ let claimedRewards = {};
414
+ let nextDailyReward = Date.now();
415
+ let gamesWon = 0;
416
+ let dailyStreak = 0;
417
+ let lastPlayedDate = null;
418
+
419
+ // DOM elements
420
+ const cookieCountEl = document.getElementById('cookieCount');
421
+ const gameArea = document.getElementById('gameArea');
422
+ const backBtn = document.getElementById('backBtn');
423
+ const gameCards = document.querySelectorAll('.game-card');
424
+ const slotGame = document.getElementById('slotGame');
425
+ const rouletteGame = document.getElementById('rouletteGame');
426
+ const blackjackGame = document.getElementById('blackjackGame');
427
+ const infoBtn = document.getElementById('infoBtn');
428
+ const resetBtn = document.getElementById('resetBtn');
429
+ const infoModal = document.getElementById('infoModal');
430
+ const closeModal = document.getElementById('closeModal');
431
+ const cookieCollectionEl = document.getElementById('cookieCollection');
432
+ const moreRewardsBtn = document.getElementById('moreRewardsBtn');
433
+ const moreRewardsSection = document.getElementById('moreRewardsSection');
434
+ const rewardModal = document.getElementById('rewardModal');
435
+ const closeRewardModal = document.getElementById('closeRewardModal');
436
+ const rewardTitle = document.getElementById('rewardTitle');
437
+ const rewardMessage = document.getElementById('rewardMessage');
438
+ const rewardAmount = document.getElementById('rewardAmount');
439
+ const nextRewardTime = document.getElementById('nextRewardTime');
440
+
441
+ // Slot machine elements
442
+ const spinBtn = document.getElementById('spinBtn');
443
+ const slot1 = document.getElementById('slot1');
444
+ const slot2 = document.getElementById('slot2');
445
+ const slot3 = document.getElementById('slot3');
446
+ const slotResult = document.getElementById('slotResult');
447
+
448
+ // Roulette elements
449
+ const rouletteWheel = document.getElementById('rouletteWheel');
450
+ const betButtons = document.querySelectorAll('.bet-btn');
451
+ const rouletteResult = document.getElementById('rouletteResult');
452
+
453
+ // Blackjack elements
454
+ const dealerHandEl = document.getElementById('dealerHand');
455
+ const playerHandEl = document.getElementById('playerHand');
456
+ const hitBtn = document.getElementById('hitBtn');
457
+ const standBtn = document.getElementById('standBtn');
458
+ const newGameBtn = document.getElementById('newGameBtn');
459
+ const blackjackResult = document.getElementById('blackjackResult');
460
+
461
+ // Blackjack game state
462
+ let blackjackGameState = {
463
+ deck: [],
464
+ dealerHand: [],
465
+ playerHand: [],
466
+ gameOver: false
467
+ };
468
+
469
+ // Initialize the app
470
+ function init() {
471
+ updateCookieDisplay();
472
+ renderCookieCollection();
473
+ setupRouletteWheel();
474
+ setupEventListeners();
475
+ setupRewards();
476
+ startRewardTimer();
477
+
478
+ // Try to load from localStorage
479
+ const savedCookies = localStorage.getItem('cookieCasinoCookies');
480
+ const savedCollection = localStorage.getItem('cookieCasinoCollection');
481
+ const savedRewards = localStorage.getItem('cookieCasinoRewards');
482
+ const savedStats = localStorage.getItem('cookieCasinoStats');
483
+
484
+ if (savedCookies) {
485
+ cookies = parseInt(savedCookies);
486
+ updateCookieDisplay();
487
+ }
488
+
489
+ if (savedCollection) {
490
+ cookieCollection = JSON.parse(savedCollection);
491
+ renderCookieCollection();
492
+ }
493
+
494
+ if (savedRewards) {
495
+ claimedRewards = JSON.parse(savedRewards);
496
+ updateRewardButtons();
497
+ }
498
+
499
+ if (savedStats) {
500
+ const stats = JSON.parse(savedStats);
501
+ gamesWon = stats.gamesWon || 0;
502
+ dailyStreak = stats.dailyStreak || 0;
503
+ lastPlayedDate = stats.lastPlayedDate ? new Date(stats.lastPlayedDate) : null;
504
+
505
+ // Check if we should reset the streak
506
+ if (lastPlayedDate) {
507
+ const today = new Date();
508
+ const yesterday = new Date(today);
509
+ yesterday.setDate(yesterday.getDate() - 1);
510
+
511
+ if (lastPlayedDate.toDateString() === today.toDateString()) {
512
+ // Already played today
513
+ } else if (lastPlayedDate.toDateString() === yesterday.toDateString()) {
514
+ // Played yesterday, increment streak
515
+ dailyStreak++;
516
+ } else {
517
+ // Missed a day, reset streak
518
+ dailyStreak = 0;
519
+ }
520
+ }
521
+
522
+ updateAchievementButtons();
523
+ }
524
+
525
+ // Check if daily reward is available
526
+ const savedDailyReward = localStorage.getItem('cookieCasinoNextDailyReward');
527
+ if (savedDailyReward) {
528
+ nextDailyReward = parseInt(savedDailyReward);
529
+ if (Date.now() >= nextDailyReward) {
530
+ enableDailyReward();
531
+ }
532
+ } else {
533
+ enableDailyReward();
534
+ }
535
+ }
536
+
537
+ // Set up event listeners
538
+ function setupEventListeners() {
539
+ // Game selection
540
+ gameCards.forEach(card => {
541
+ card.addEventListener('click', () => selectGame(card.dataset.game));
542
+ });
543
+
544
+ backBtn.addEventListener('click', () => {
545
+ gameArea.classList.add('hidden');
546
+ currentGame = null;
547
+ });
548
+
549
+ // Slot machine
550
+ spinBtn.addEventListener('click', spinSlots);
551
+
552
+ // Roulette
553
+ betButtons.forEach(btn => {
554
+ btn.addEventListener('click', () => placeBet(btn.dataset.bet));
555
+ });
556
+
557
+ // Blackjack
558
+ hitBtn.addEventListener('click', hit);
559
+ standBtn.addEventListener('click', stand);
560
+ newGameBtn.addEventListener('click', startBlackjack);
561
+
562
+ // Info and reset
563
+ infoBtn.addEventListener('click', () => infoModal.classList.remove('hidden'));
564
+ resetBtn.addEventListener('click', resetCookies);
565
+ closeModal.addEventListener('click', () => infoModal.classList.add('hidden'));
566
+
567
+ // Rewards
568
+ moreRewardsBtn.addEventListener('click', toggleMoreRewards);
569
+ closeRewardModal.addEventListener('click', () => rewardModal.classList.add('hidden'));
570
+
571
+ // Reward claim buttons
572
+ document.querySelectorAll('.freebie-card').forEach(card => {
573
+ card.addEventListener('click', (e) => {
574
+ if (e.target.classList.contains('claim-btn') && !e.target.disabled) {
575
+ claimReward(card.dataset.id, parseInt(card.dataset.reward));
576
+ }
577
+ });
578
+ });
579
+ }
580
+
581
+ // Set up rewards
582
+ function setupRewards() {
583
+ // Check if daily reward is already claimed today
584
+ const today = new Date().toDateString();
585
+ if (claimedRewards.daily === today) {
586
+ document.querySelector('.freebie-card[data-id="daily"] .claim-btn').disabled = true;
587
+ document.querySelector('.freebie-card[data-id="daily"] .claim-btn').innerHTML = '<i class="fas fa-check mr-2"></i> Claimed';
588
+ }
589
+ }
590
+
591
+ // Update reward buttons based on claimed status
592
+ function updateRewardButtons() {
593
+ document.querySelectorAll('.freebie-card').forEach(card => {
594
+ const rewardId = card.dataset.id;
595
+ const btn = card.querySelector('.claim-btn');
596
+
597
+ if (claimedRewards[rewardId]) {
598
+ btn.disabled = true;
599
+ btn.innerHTML = '<i class="fas fa-check mr-2"></i> Claimed';
600
+ } else {
601
+ btn.disabled = false;
602
+
603
+ if (rewardId === 'daily') {
604
+ btn.innerHTML = '<i class="fas fa-gift mr-2"></i> Claim';
605
+ } else if (rewardId === 'social') {
606
+ btn.innerHTML = '<i class="fas fa-share mr-2"></i> Claim';
607
+ } else if (rewardId === 'watch') {
608
+ btn.innerHTML = '<i class="fas fa-play mr-2"></i> Watch';
609
+ } else if (rewardId === 'survey') {
610
+ btn.innerHTML = '<i class="fas fa-check mr-2"></i> Start';
611
+ }
612
+ }
613
+ });
614
+ }
615
+
616
+ // Update achievement buttons based on progress
617
+ function updateAchievementButtons() {
618
+ const achievementBtn = document.querySelector('.freebie-card[data-id="achievement"] .claim-btn');
619
+ const streakBtn = document.querySelector('.freebie-card[data-id="streak"] .claim-btn');
620
+
621
+ if (gamesWon >= 5) {
622
+ achievementBtn.disabled = false;
623
+ achievementBtn.innerHTML = '<i class="fas fa-trophy mr-2"></i> Claim';
624
+ } else {
625
+ achievementBtn.disabled = true;
626
+ achievementBtn.innerHTML = `<i class="fas fa-lock mr-2"></i> ${gamesWon}/5 wins`;
627
+ }
628
+
629
+ if (dailyStreak >= 7) {
630
+ streakBtn.disabled = false;
631
+ streakBtn.innerHTML = '<i class="fas fa-fire mr-2"></i> Claim';
632
+ } else {
633
+ streakBtn.disabled = true;
634
+ streakBtn.innerHTML = `<i class="fas fa-lock mr-2"></i> ${dailyStreak}/7 days`;
635
+ }
636
+ }
637
+
638
+ // Enable daily reward
639
+ function enableDailyReward() {
640
+ const dailyCard = document.querySelector('.freebie-card[data-id="daily"]');
641
+ const btn = dailyCard.querySelector('.claim-btn');
642
+
643
+ btn.disabled = false;
644
+ btn.innerHTML = '<i class="fas fa-gift mr-2"></i> Claim';
645
+
646
+ // Update the timer display
647
+ nextRewardTime.textContent = "Daily reward available!";
648
+ }
649
+
650
+ // Start the countdown timer for next daily reward
651
+ function startRewardTimer() {
652
+ setInterval(() => {
653
+ const now = Date.now();
654
+ if (now < nextDailyReward) {
655
+ const diff = nextDailyReward - now;
656
+ const hours = Math.floor(diff / (1000 * 60 * 60));
657
+ const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
658
+ const seconds = Math.floor((diff % (1000 * 60)) / 1000);
659
+
660
+ nextRewardTime.textContent = `Next reward in: ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
661
+ } else {
662
+ nextRewardTime.textContent = "Daily reward available!";
663
+ }
664
+ }, 1000);
665
+ }
666
+
667
+ // Toggle more rewards section
668
+ function toggleMoreRewards() {
669
+ if (moreRewardsSection.classList.contains('hidden')) {
670
+ moreRewardsSection.classList.remove('hidden');
671
+ moreRewardsBtn.innerHTML = '<i class="fas fa-chevron-up mr-2"></i> Show Less';
672
+ } else {
673
+ moreRewardsSection.classList.add('hidden');
674
+ moreRewardsBtn.innerHTML = '<i class="fas fa-chevron-down mr-2"></i> Show More Rewards';
675
+ }
676
+ }
677
+
678
+ // Claim a reward
679
+ function claimReward(rewardId, amount) {
680
+ // Special handling for different reward types
681
+ if (rewardId === 'daily') {
682
+ const today = new Date().toDateString();
683
+ claimedRewards.daily = today;
684
+
685
+ // Set next daily reward to 24 hours from now
686
+ nextDailyReward = Date.now() + 24 * 60 * 60 * 1000;
687
+ localStorage.setItem('cookieCasinoNextDailyReward', nextDailyReward.toString());
688
+
689
+ // Disable the button until tomorrow
690
+ document.querySelector('.freebie-card[data-id="daily"] .claim-btn').disabled = true;
691
+ document.querySelector('.freebie-card[data-id="daily"] .claim-btn').innerHTML = '<i class="fas fa-check mr-2"></i> Claimed';
692
+ }
693
+ else if (rewardId === 'social') {
694
+ claimedRewards.social = true;
695
+ // In a real app, you would implement social sharing here
696
+ // For demo purposes, we'll just claim it
697
+ }
698
+ else if (rewardId === 'watch') {
699
+ claimedRewards.watch = true;
700
+ // In a real app, you would show an ad here
701
+ // For demo purposes, we'll just claim it
702
+ }
703
+ else if (rewardId === 'survey') {
704
+ claimedRewards.survey = true;
705
+ // In a real app, you would show a survey
706
+ // For demo purposes, we'll just claim it
707
+ }
708
+ else if (rewardId === 'achievement') {
709
+ claimedRewards.achievement = true;
710
+ }
711
+ else if (rewardId === 'streak') {
712
+ claimedRewards.streak = true;
713
+ }
714
+
715
+ // Add the cookies
716
+ cookies += amount;
717
+ updateCookieDisplay();
718
+
719
+ // Add a random special cookie for certain rewards
720
+ if (rewardId === 'daily' || rewardId === 'achievement' || rewardId === 'streak') {
721
+ const specialCookies = ['🌟', '🎖️', '🏆', '✨', '💎'];
722
+ const randomCookie = specialCookies[Math.floor(Math.random() * specialCookies.length)];
723
+ addToCollection(randomCookie);
724
+
725
+ rewardTitle.textContent = "Bonus Reward!";
726
+ rewardMessage.textContent = `You've earned ${amount} cookies and a special ${randomCookie}!`;
727
+ } else {
728
+ rewardTitle.textContent = "Reward Claimed!";
729
+ rewardMessage.textContent = `You've earned ${amount} cookies!`;
730
+ }
731
+
732
+ rewardAmount.textContent = `+${amount}`;
733
+ rewardModal.classList.remove('hidden');
734
+
735
+ // Save to localStorage
736
+ localStorage.setItem('cookieCasinoRewards', JSON.stringify(claimedRewards));
737
+ updateRewardButtons();
738
+ }
739
+
740
+ // Select a game to play
741
+ function selectGame(game) {
742
+ currentGame = game;
743
+ gameArea.classList.remove('hidden');
744
+
745
+ // Hide all games first
746
+ document.querySelectorAll('.game-container').forEach(el => {
747
+ el.classList.add('hidden');
748
+ });
749
+
750
+ // Show selected game
751
+ if (game === 'slots') {
752
+ slotGame.classList.remove('hidden');
753
+ } else if (game === 'roulette') {
754
+ rouletteGame.classList.remove('hidden');
755
+ } else if (game === 'blackjack') {
756
+ blackjackGame.classList.remove('hidden');
757
+ startBlackjack();
758
+ }
759
+
760
+ // Update last played date for streak tracking
761
+ const today = new Date();
762
+ lastPlayedDate = today;
763
+ saveStats();
764
+ }
765
+
766
+ // Update cookie display
767
+ function updateCookieDisplay() {
768
+ cookieCountEl.textContent = cookies;
769
+ localStorage.setItem('cookieCasinoCookies', cookies.toString());
770
+ }
771
+
772
+ // Render cookie collection
773
+ function renderCookieCollection() {
774
+ cookieCollectionEl.innerHTML = '';
775
+
776
+ // Count each type of cookie
777
+ const cookieCounts = {};
778
+ cookieCollection.forEach(cookie => {
779
+ cookieCounts[cookie] = (cookieCounts[cookie] || 0) + 1;
780
+ });
781
+
782
+ // Create elements for each unique cookie
783
+ Object.entries(cookieCounts).forEach(([cookie, count]) => {
784
+ const cookieEl = document.createElement('div');
785
+ cookieEl.className = 'flex flex-col items-center bg-white bg-opacity-10 p-3 rounded-lg';
786
+ cookieEl.innerHTML = `
787
+ <span class="text-4xl mb-1">${cookie}</span>
788
+ <span class="text-sm text-gray-300">x${count}</span>
789
+ `;
790
+ cookieCollectionEl.appendChild(cookieEl);
791
+ });
792
+
793
+ localStorage.setItem('cookieCasinoCollection', JSON.stringify(cookieCollection));
794
+ }
795
+
796
+ // Add cookies to collection
797
+ function addToCollection(cookie) {
798
+ cookieCollection.push(cookie);
799
+ renderCookieCollection();
800
+ }
801
+
802
+ // Save game stats
803
+ function saveStats() {
804
+ const stats = {
805
+ gamesWon,
806
+ dailyStreak,
807
+ lastPlayedDate
808
+ };
809
+ localStorage.setItem('cookieCasinoStats', JSON.stringify(stats));
810
+ }
811
+
812
+ // Slot machine logic
813
+ function spinSlots() {
814
+ if (cookies < 10) {
815
+ slotResult.textContent = "Not enough cookies to spin!";
816
+ return;
817
+ }
818
+
819
+ cookies -= 10;
820
+ updateCookieDisplay();
821
+
822
+ spinBtn.disabled = true;
823
+ slotResult.textContent = "Spinning...";
824
+
825
+ // Add spinning animation
826
+ [slot1, slot2, slot3].forEach(slot => {
827
+ slot.classList.add('spinning');
828
+ slot.textContent = "❓";
829
+ });
830
+
831
+ // Spin each slot with different durations
832
+ setTimeout(() => stopSlot(slot1), 500 + Math.random() * 500);
833
+ setTimeout(() => stopSlot(slot2), 1000 + Math.random() * 500);
834
+ setTimeout(() => stopSlot(slot3), 1500 + Math.random() * 500);
835
+ }
836
+
837
+ function stopSlot(slot) {
838
+ slot.classList.remove('spinning');
839
+
840
+ const symbols = ['🍪', '🍪', '🍪', '🍪', '🍎', '🍇', '🍒', '🍋', '💰', '🎁'];
841
+ const randomSymbol = symbols[Math.floor(Math.random() * symbols.length)];
842
+ slot.textContent = randomSymbol;
843
+
844
+ // Check if all slots have stopped
845
+ if (!slot1.classList.contains('spinning') &&
846
+ !slot2.classList.contains('spinning') &&
847
+ !slot3.classList.contains('spinning')) {
848
+ evaluateSpin();
849
+ }
850
+ }
851
+
852
+ function evaluateSpin() {
853
+ spinBtn.disabled = false;
854
+
855
+ const symbols = [
856
+ slot1.textContent,
857
+ slot2.textContent,
858
+ slot3.textContent
859
+ ];
860
+
861
+ // Check for wins
862
+ if (symbols[0] === symbols[1] && symbols[1] === symbols[2]) {
863
+ // All three match - jackpot!
864
+ let winAmount = 0;
865
+ let specialCookie = null;
866
+
867
+ if (symbols[0] === '🍪') {
868
+ winAmount = 50;
869
+ specialCookie = '🥠'; // Fortune cookie
870
+ } else if (symbols[0] === '💰') {
871
+ winAmount = 100;
872
+ specialCookie = '💎'; // Diamond
873
+ } else if (symbols[0] === '🎁') {
874
+ winAmount = 75;
875
+ specialCookie = '🎂'; // Cake
876
+ } else {
877
+ winAmount = 30;
878
+ specialCookie = symbols[0];
879
+ }
880
+
881
+ cookies += winAmount;
882
+ updateCookieDisplay();
883
+ slotResult.textContent = `JACKPOT! You won ${winAmount} cookies!`;
884
+
885
+ if (specialCookie) {
886
+ addToCollection(specialCookie);
887
+ slotResult.textContent += ` Plus a special ${specialCookie}!`;
888
+ }
889
+
890
+ // Celebration effect
891
+ [slot1, slot2, slot3].forEach(slot => {
892
+ slot.classList.add('win-animation');
893
+ setTimeout(() => slot.classList.remove('win-animation'), 2000);
894
+ });
895
+
896
+ // Count as a win for achievements
897
+ gamesWon++;
898
+ saveStats();
899
+ updateAchievementButtons();
900
+ } else if (symbols[0] === symbols[1] || symbols[1] === symbols[2] || symbols[0] === symbols[2]) {
901
+ // Two match - small win
902
+ cookies += 15;
903
+ updateCookieDisplay();
904
+ slotResult.textContent = "Two match! You won 15 cookies!";
905
+
906
+ // Small chance to get a special cookie
907
+ if (Math.random() < 0.2) {
908
+ const specialCookies = ['🍩', '🧁', '🍬'];
909
+ const specialCookie = specialCookies[Math.floor(Math.random() * specialCookies.length)];
910
+ addToCollection(specialCookie);
911
+ slotResult.textContent += ` Plus a special ${specialCookie}!`;
912
+ }
913
+ } else {
914
+ slotResult.textContent = "No match this time. Try again!";
915
+ }
916
+ }
917
+
918
+ // Roulette setup
919
+ function setupRouletteWheel() {
920
+ const segments = [
921
+ { number: 0, color: 'green' },
922
+ { number: 32, color: 'red' },
923
+ { number: 15, color: 'black' },
924
+ { number: 19, color: 'red' },
925
+ { number: 4, color: 'black' },
926
+ { number: 21, color: 'red' },
927
+ { number: 2, color: 'black' },
928
+ { number: 25, color: 'red' },
929
+ { number: 17, color: 'black' },
930
+ { number: 34, color: 'red' },
931
+ { number: 6, color: 'black' },
932
+ { number: 27, color: 'red' },
933
+ { number: 13, color: 'black' },
934
+ { number: 36, color: 'red' },
935
+ { number: 11, color: 'black' },
936
+ { number: 30, color: 'red' },
937
+ { number: 8, color: 'black' },
938
+ { number: 23, color: 'red' },
939
+ { number: 10, color: 'black' },
940
+ { number: 5, color: 'red' },
941
+ { number: 24, color: 'black' },
942
+ { number: 16, color: 'red' },
943
+ { number: 33, color: 'black' },
944
+ { number: 1, color: 'red' },
945
+ { number: 20, color: 'black' },
946
+ { number: 14, color: 'red' },
947
+ { number: 31, color: 'black' },
948
+ { number: 9, color: 'red' },
949
+ { number: 22, color: 'black' },
950
+ { number: 18, color: 'red' },
951
+ { number: 29, color: 'black' },
952
+ { number: 7, color: 'red' },
953
+ { number: 28, color: 'black' },
954
+ { number: 12, color: 'red' },
955
+ { number: 35, color: 'black' },
956
+ { number: 3, color: 'red' },
957
+ { number: 26, color: 'black' }
958
+ ];
959
+
960
+ // Create segments on the wheel
961
+ segments.forEach((segment, index) => {
962
+ const segmentEl = document.createElement('div');
963
+ segmentEl.className = `absolute w-full h-full origin-bottom`;
964
+ segmentEl.style.transform = `rotate(${index * (360 / segments.length)}deg)`;
965
+ segmentEl.innerHTML = `
966
+ <div class="absolute top-0 left-0 w-1/2 h-1/2 flex items-end justify-center"
967
+ style="transform-origin: bottom center; transform: rotate(${360 / segments.length / 2}deg)">
968
+ <div class="w-16 h-16 rounded-full flex items-center justify-center text-white font-bold
969
+ ${segment.color === 'red' ? 'bg-red-600' : segment.color === 'black' ? 'bg-black' : 'bg-green-600'}">
970
+ ${segment.number}
971
+ </div>
972
+ </div>
973
+ `;
974
+ rouletteWheel.appendChild(segmentEl);
975
+ });
976
+ }
977
+
978
+ // Place a roulette bet
979
+ function placeBet(betType) {
980
+ let betAmount = 10;
981
+ if (betType === 'green') betAmount = 20;
982
+
983
+ if (cookies < betAmount) {
984
+ rouletteResult.textContent = `Not enough cookies to bet ${betAmount}!`;
985
+ return;
986
+ }
987
+
988
+ cookies -= betAmount;
989
+ updateCookieDisplay();
990
+
991
+ // Disable buttons during spin
992
+ betButtons.forEach(btn => btn.disabled = true);
993
+ rouletteResult.textContent = "Spinning...";
994
+
995
+ // Spin animation
996
+ const spinDuration = 3000 + Math.random() * 2000; // 3-5 seconds
997
+ const spinDegrees = 360 * 5 + Math.random() * 360; // 5-6 full rotations
998
+
999
+ rouletteWheel.style.transition = `transform ${spinDuration/1000}s cubic-bezier(0.1, 0.7, 0.1, 1)`;
1000
+ rouletteWheel.style.transform = `rotate(${spinDegrees}deg)`;
1001
+
1002
+ // Determine result after spin
1003
+ setTimeout(() => {
1004
+ // The wheel stops at a random position, but we need to calculate which segment is at the top
1005
+ const segmentAngle = 360 / 37; // 37 segments (0-36)
1006
+ const winningSegment = Math.floor((spinDegrees % 360) / segmentAngle);
1007
+
1008
+ // In our setup, segment 0 is at 0 degrees, segment 1 at ~9.73 degrees, etc.
1009
+ let winningNumber, winningColor;
1010
+
1011
+ // This is a simplified version - in a real app you'd need to map segments to numbers
1012
+ if (winningSegment === 0) {
1013
+ winningNumber = 0;
1014
+ winningColor = 'green';
1015
+ } else if (winningSegment <= 18) {
1016
+ winningNumber = winningSegment * 2;
1017
+ winningColor = winningSegment % 2 === 0 ? 'black' : 'red';
1018
+ } else {
1019
+ winningNumber = (winningSegment - 18) * 2 - 1;
1020
+ winningColor = winningSegment % 2 === 0 ? 'red' : 'black';
1021
+ }
1022
+
1023
+ // Adjust for our specific wheel layout
1024
+ // This is a simplified version - a real implementation would need proper mapping
1025
+ winningNumber = (37 - winningSegment) % 37;
1026
+
1027
+ // Determine color based on standard roulette layout
1028
+ const greenNumbers = [0];
1029
+ const redNumbers = [1, 3, 5, 7, 9, 12, 14, 16, 18, 19, 21, 23, 25, 27, 30, 32, 34, 36];
1030
+
1031
+ if (greenNumbers.includes(winningNumber)) {
1032
+ winningColor = 'green';
1033
+ } else if (redNumbers.includes(winningNumber)) {
1034
+ winningColor = 'red';
1035
+ } else {
1036
+ winningColor = 'black';
1037
+ }
1038
+
1039
+ rouletteResult.textContent = `Landed on ${winningNumber} (${winningColor})`;
1040
+
1041
+ // Check if player won
1042
+ let winMultiplier = 1;
1043
+ let won = false;
1044
+
1045
+ if ((betType === 'red' && winningColor === 'red') ||
1046
+ (betType === 'black' && winningColor === 'black')) {
1047
+ won = true;
1048
+ winMultiplier = 1;
1049
+ } else if (betType === 'green' && winningColor === 'green') {
1050
+ won = true;
1051
+ winMultiplier = 14; // 35:1 payout for single number in real roulette, simplified here
1052
+ }
1053
+
1054
+ if (won) {
1055
+ const winnings = betAmount * (betType === 'green' ? 14 : 2);
1056
+ cookies += winnings;
1057
+ updateCookieDisplay();
1058
+ rouletteResult.textContent += ` - You won ${winnings} cookies!`;
1059
+
1060
+ // Count as a win for achievements
1061
+ gamesWon++;
1062
+ saveStats();
1063
+ updateAchievementButtons();
1064
+
1065
+ // Chance to win a special cookie
1066
+ if (Math.random() < 0.3) {
1067
+ const specialCookies = ['🍫', '🍭', '🍮'];
1068
+ const specialCookie = specialCookies[Math.floor(Math.random() * specialCookies.length)];
1069
+ addToCollection(specialCookie);
1070
+ rouletteResult.textContent += ` Plus a special ${specialCookie}!`;
1071
+ }
1072
+ } else {
1073
+ rouletteResult.textContent += " - Better luck next time!";
1074
+ }
1075
+
1076
+ // Reset wheel and enable buttons
1077
+ setTimeout(() => {
1078
+ rouletteWheel.style.transition = 'none';
1079
+ rouletteWheel.style.transform = 'rotate(0deg)';
1080
+ setTimeout(() => {
1081
+ rouletteWheel.style.transition = 'transform 3s cubic-bezier(0.1, 0.7, 0.1, 1)';
1082
+ betButtons.forEach(btn => btn.disabled = false);
1083
+ }, 10);
1084
+ }, 3000);
1085
+ }, spinDuration);
1086
+ }
1087
+
1088
+ // Blackjack functions
1089
+ function startBlackjack() {
1090
+ if (cookies < 10) {
1091
+ blackjackResult.textContent = "You need at least 10 cookies to play!";
1092
+ return;
1093
+ }
1094
+
1095
+ // Create a deck
1096
+ blackjackGameState.deck = createDeck();
1097
+ shuffleDeck(blackjackGameState.deck);
1098
+
1099
+ // Reset hands
1100
+ blackjackGameState.dealerHand = [];
1101
+ blackjackGameState.playerHand = [];
1102
+ blackjackGameState.gameOver = false;
1103
+
1104
+ // Deal initial cards
1105
+ blackjackGameState.playerHand.push(drawCard());
1106
+ blackjackGameState.dealerHand.push(drawCard());
1107
+ blackjackGameState.playerHand.push(drawCard());
1108
+ blackjackGameState.dealerHand.push(drawCard());
1109
+
1110
+ // Update display
1111
+ renderBlackjackHands();
1112
+
1113
+ // Check for blackjack
1114
+ if (calculateHandValue(blackjackGameState.playerHand) === 21) {
1115
+ blackjackGameState.gameOver = true;
1116
+ dealerReveal();
1117
+ blackjackResult.textContent = "Blackjack! You win 25 cookies!";
1118
+ cookies += 25;
1119
+ updateCookieDisplay();
1120
+
1121
+ // Count as a win for achievements
1122
+ gamesWon++;
1123
+ saveStats();
1124
+ updateAchievementButtons();
1125
+
1126
+ // Special cookie for blackjack
1127
+ addToCollection('🃏');
1128
+ }
1129
+
1130
+ // Enable/disable buttons
1131
+ hitBtn.disabled = blackjackGameState.gameOver;
1132
+ standBtn.disabled = blackjackGameState.gameOver;
1133
+ newGameBtn.disabled = !blackjackGameState.gameOver;
1134
+ }
1135
+
1136
+ function createDeck() {
1137
+ const suits = ['♥', '♦', '♣', '♠'];
1138
+ const values = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K'];
1139
+ const deck = [];
1140
+
1141
+ for (let suit of suits) {
1142
+ for (let value of values) {
1143
+ deck.push({ suit, value });
1144
+ }
1145
+ }
1146
+
1147
+ return deck;
1148
+ }
1149
+
1150
+ function shuffleDeck(deck) {
1151
+ for (let i = deck.length - 1; i > 0; i--) {
1152
+ const j = Math.floor(Math.random() * (i + 1));
1153
+ [deck[i], deck[j]] = [deck[j], deck[i]];
1154
+ }
1155
+ }
1156
+
1157
+ function drawCard() {
1158
+ return blackjackGameState.deck.pop();
1159
+ }
1160
+
1161
+ function renderBlackjackHands() {
1162
+ // Clear hands
1163
+ dealerHandEl.innerHTML = '';
1164
+ playerHandEl.innerHTML = '';
1165
+
1166
+ // Render dealer's hand (first card hidden)
1167
+ blackjackGameState.dealerHand.forEach((card, index) => {
1168
+ const cardEl = document.createElement('div');
1169
+ cardEl.className = 'w-12 h-16 bg-white rounded flex flex-col items-center justify-center text-black font-bold';
1170
+
1171
+ if (index === 0 && !blackjackGameState.gameOver) {
1172
+ cardEl.innerHTML = '<div class="w-full h-full bg-blue-900 rounded"></div>';
1173
+ } else {
1174
+ cardEl.innerHTML = `
1175
+ <div class="text-red-600">${card.suit}</div>
1176
+ <div>${card.value}</div>
1177
+ `;
1178
+ }
1179
+
1180
+ dealerHandEl.appendChild(cardEl);
1181
+ });
1182
+
1183
+ // Render player's hand
1184
+ blackjackGameState.playerHand.forEach(card => {
1185
+ const cardEl = document.createElement('div');
1186
+ cardEl.className = 'w-12 h-16 bg-white rounded flex flex-col items-center justify-center text-black font-bold';
1187
+ cardEl.innerHTML = `
1188
+ <div class="${card.suit === '♥' || card.suit === '♦' ? 'text-red-600' : 'text-black'}">${card.suit}</div>
1189
+ <div>${card.value}</div>
1190
+ `;
1191
+ playerHandEl.appendChild(cardEl);
1192
+ });
1193
+
1194
+ // Show player's hand value
1195
+ const playerValue = calculateHandValue(blackjackGameState.playerHand);
1196
+ if (playerValue > 21) {
1197
+ const bustEl = document.createElement('div');
1198
+ bustEl.className = 'text-red-500 font-bold ml-4';
1199
+ bustEl.textContent = 'BUST!';
1200
+ playerHandEl.appendChild(bustEl);
1201
+ }
1202
+ }
1203
+
1204
+ function calculateHandValue(hand) {
1205
+ let value = 0;
1206
+ let aces = 0;
1207
+
1208
+ for (let card of hand) {
1209
+ if (card.value === 'A') {
1210
+ aces++;
1211
+ value += 11;
1212
+ } else if (['K', 'Q', 'J'].includes(card.value)) {
1213
+ value += 10;
1214
+ } else {
1215
+ value += parseInt(card.value);
1216
+ }
1217
+ }
1218
+
1219
+ // Adjust for aces
1220
+ while (value > 21 && aces > 0) {
1221
+ value -= 10;
1222
+ aces--;
1223
+ }
1224
+
1225
+ return value;
1226
+ }
1227
+
1228
+ function hit() {
1229
+ if (blackjackGameState.gameOver) return;
1230
+
1231
+ // Deduct cookies for hit
1232
+ if (cookies >= 10) {
1233
+ cookies -= 10;
1234
+ updateCookieDisplay();
1235
+ } else {
1236
+ blackjackResult.textContent = "You need 10 cookies to hit!";
1237
+ return;
1238
+ }
1239
+
1240
+ blackjackGameState.playerHand.push(drawCard());
1241
+ renderBlackjackHands();
1242
+
1243
+ const playerValue = calculateHandValue(blackjackGameState.playerHand);
1244
+
1245
+ if (playerValue > 21) {
1246
+ blackjackGameState.gameOver = true;
1247
+ dealerReveal();
1248
+ blackjackResult.textContent = "Bust! You lose.";
1249
+ }
1250
+
1251
+ hitBtn.disabled = blackjackGameState.gameOver;
1252
+ standBtn.disabled = blackjackGameState.gameOver;
1253
+ newGameBtn.disabled = !blackjackGameState.gameOver;
1254
+ }
1255
+
1256
+ function stand() {
1257
+ if (blackjackGameState.gameOver) return;
1258
+
1259
+ blackjackGameState.gameOver = true;
1260
+ dealerReveal();
1261
+
1262
+ const playerValue = calculateHandValue(blackjackGameState.playerHand);
1263
+ const dealerValue = calculateHandValue(blackjackGameState.dealerHand);
1264
+
1265
+ if (dealerValue > 21) {
1266
+ blackjackResult.textContent = "Dealer busts! You win 20 cookies!";
1267
+ cookies += 20;
1268
+ updateCookieDisplay();
1269
+
1270
+ // Count as a win for achievements
1271
+ gamesWon++;
1272
+ saveStats();
1273
+ updateAchievementButtons();
1274
+
1275
+ // Special cookie for beating dealer
1276
+ if (Math.random() < 0.4) {
1277
+ addToCollection('🍾');
1278
+ }
1279
+ } else if (dealerValue > playerValue) {
1280
+ blackjackResult.textContent = "Dealer wins!";
1281
+ } else if (playerValue > dealerValue) {
1282
+ blackjackResult.textContent = "You win 20 cookies!";
1283
+ cookies += 20;
1284
+ updateCookieDisplay();
1285
+
1286
+ // Count as a win for achievements
1287
+ gamesWon++;
1288
+ saveStats();
1289
+ updateAchievementButtons();
1290
+
1291
+ // Special cookie for beating dealer
1292
+ if (Math.random() < 0.4) {
1293
+ addToCollection('🍾');
1294
+ }
1295
+ } else {
1296
+ blackjackResult.textContent = "Push! It's a tie.";
1297
+ cookies += 10; // Return the bet
1298
+ updateCookieDisplay();
1299
+ }
1300
+
1301
+ hitBtn.disabled = true;
1302
+ standBtn.disabled = true;
1303
+ newGameBtn.disabled = false;
1304
+ }
1305
+
1306
+ function dealerReveal() {
1307
+ // Dealer draws until hand value is at least 17
1308
+ while (calculateHandValue(blackjackGameState.dealerHand) < 17) {
1309
+ blackjackGameState.dealerHand.push(drawCard());
1310
+ }
1311
+
1312
+ renderBlackjackHands();
1313
+ }
1314
+
1315
+ // Reset cookies
1316
+ function resetCookies() {
1317
+ if (confirm("Are you sure you want to reset your cookies and collection?")) {
1318
+ cookies = 100;
1319
+ cookieCollection = ['🍪', '🍪', '🍪'];
1320
+ claimedRewards = {};
1321
+ gamesWon = 0;
1322
+ dailyStreak = 0;
1323
+ lastPlayedDate = null;
1324
+ nextDailyReward = Date.now();
1325
+
1326
+ updateCookieDisplay();
1327
+ renderCookieCollection();
1328
+ updateRewardButtons();
1329
+ updateAchievementButtons();
1330
+ enableDailyReward();
1331
+
1332
+ // Clear localStorage
1333
+ localStorage.removeItem('cookieCasinoCookies');
1334
+ localStorage.removeItem('cookieCasinoCollection');
1335
+ localStorage.removeItem('cookieCasinoRewards');
1336
+ localStorage.removeItem('cookieCasinoStats');
1337
+ localStorage.removeItem('cookieCasinoNextDailyReward');
1338
+
1339
+ // Show message
1340
+ const originalText = resetBtn.innerHTML;
1341
+ resetBtn.innerHTML = '<i class="fas fa-check mr-2"></i> Cookies Reset!';
1342
+ setTimeout(() => {
1343
+ resetBtn.innerHTML = originalText;
1344
+ }, 2000);
1345
+ }
1346
+ }
1347
+
1348
+ // Initialize the app
1349
+ init();
1350
+ </script>
1351
+ <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=Juno360219/cookie-casino" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1352
+ </html>