Hugging Face's logo

Spaces:
Juno360219
/
cookie-coin
Running

App Files Community
Juno360219 commited on
Commit
8dc5c9f
·
verified ·
1 Parent(s): b08b870

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +332 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cookie Coin
3
- emoji: 🚀
4
- colorFrom: pink
5
  colorTo: purple
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-coin
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
  colorTo: purple
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,332 @@
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>CookieCoin Miner</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 pulse {
11
+ 0% { transform: scale(1); }
12
+ 50% { transform: scale(1.05); }
13
+ 100% { transform: scale(1); }
14
+ }
15
+ .pulse {
16
+ animation: pulse 2s infinite;
17
+ }
18
+ .gradient-bg {
19
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
20
+ }
21
+ .coin-spin {
22
+ animation: spin 4s linear infinite;
23
+ }
24
+ @keyframes spin {
25
+ 0% { transform: rotateY(0deg); }
26
+ 100% { transform: rotateY(360deg); }
27
+ }
28
+ .progress-bar {
29
+ transition: width 0.5s ease-in-out;
30
+ }
31
+ </style>
32
+ </head>
33
+ <body class="bg-gray-900 text-white min-h-screen">
34
+ <div class="container mx-auto px-4 py-8">
35
+ <header class="flex justify-between items-center mb-8">
36
+ <div class="flex items-center">
37
+ <i class="fas fa-cookie-bite text-3xl text-yellow-400 mr-3"></i>
38
+ <h1 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-yellow-400 to-yellow-200">
39
+ CookieCoin
40
+ </h1>
41
+ </div>
42
+ <div class="flex items-center space-x-4">
43
+ <div class="bg-gray-800 px-4 py-2 rounded-full flex items-center">
44
+ <i class="fas fa-network-wired text-yellow-400 mr-2"></i>
45
+ <span id="network-status" class="text-sm">Syncing...</span>
46
+ </div>
47
+ <div class="bg-gray-800 px-4 py-2 rounded-full">
48
+ <span id="current-time" class="text-sm">00:00:00</span>
49
+ </div>
50
+ </div>
51
+ </header>
52
+
53
+ <main class="grid grid-cols-1 lg:grid-cols-3 gap-8">
54
+ <div class="lg:col-span-2">
55
+ <div class="gradient-bg rounded-2xl p-6 shadow-lg">
56
+ <div class="flex justify-between items-center mb-6">
57
+ <h2 class="text-2xl font-bold">Mining Dashboard</h2>
58
+ <div class="flex items-center space-x-2">
59
+ <span class="text-sm opacity-75">Current Session</span>
60
+ <div class="w-3 h-3 rounded-full bg-green-400 animate-pulse"></div>
61
+ </div>
62
+ </div>
63
+
64
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
65
+ <div class="bg-gray-800 bg-opacity-50 rounded-xl p-4">
66
+ <div class="flex justify-between items-center mb-2">
67
+ <span class="text-sm opacity-75">CookieCoins</span>
68
+ <i class="fas fa-coins text-yellow-400"></i>
69
+ </div>
70
+ <div class="text-2xl font-bold" id="coin-balance">0.00</div>
71
+ <div class="text-xs opacity-50 mt-1">≈ $0.00</div>
72
+ </div>
73
+ <div class="bg-gray-800 bg-opacity-50 rounded-xl p-4">
74
+ <div class="flex justify-between items-center mb-2">
75
+ <span class="text-sm opacity-75">Mining Rate</span>
76
+ <i class="fas fa-bolt text-yellow-400"></i>
77
+ </div>
78
+ <div class="text-2xl font-bold" id="mining-rate">0.5</div>
79
+ <div class="text-xs opacity-50 mt-1">CC/min</div>
80
+ </div>
81
+ <div class="bg-gray-800 bg-opacity-50 rounded-xl p-4">
82
+ <div class="flex justify-between items-center mb-2">
83
+ <span class="text-sm opacity-75">Active Sites</span>
84
+ <i class="fas fa-globe text-yellow-400"></i>
85
+ </div>
86
+ <div class="text-2xl font-bold" id="active-sites">0</div>
87
+ <div class="text-xs opacity-50 mt-1">Mining</div>
88
+ </div>
89
+ </div>
90
+
91
+ <div class="mb-6">
92
+ <div class="flex justify-between items-center mb-2">
93
+ <span class="text-sm opacity-75">Session Progress</span>
94
+ <span class="text-sm" id="session-time">00:00:00</span>
95
+ </div>
96
+ <div class="w-full bg-gray-800 rounded-full h-2.5">
97
+ <div class="bg-yellow-400 h-2.5 rounded-full progress-bar" id="session-progress" style="width: 0%"></div>
98
+ </div>
99
+ </div>
100
+
101
+ <div class="flex justify-center">
102
+ <button id="claim-btn" class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-3 px-8 rounded-full flex items-center pulse">
103
+ <i class="fas fa-gem mr-2"></i>
104
+ Claim CookieCoins
105
+ </button>
106
+ </div>
107
+ </div>
108
+
109
+ <div class="mt-8 bg-gray-800 rounded-2xl p-6 shadow-lg">
110
+ <h2 class="text-xl font-bold mb-4">Top Earning Sites</h2>
111
+ <div class="space-y-3" id="top-sites">
112
+ <div class="flex items-center justify-between py-2 px-3 bg-gray-700 rounded-lg">
113
+ <div class="flex items-center">
114
+ <div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center mr-3">
115
+ <i class="fas fa-globe text-sm"></i>
116
+ </div>
117
+ <span>No data yet</span>
118
+ </div>
119
+ <span class="text-yellow-400">0 CC</span>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ </div>
124
+
125
+ <div>
126
+ <div class="bg-gray-800 rounded-2xl p-6 shadow-lg sticky top-8">
127
+ <h2 class="text-xl font-bold mb-6">CookieCoin</h2>
128
+ <div class="flex justify-center mb-6">
129
+ <div class="relative w-32 h-32 flex items-center justify-center">
130
+ <div class="absolute inset-0 rounded-full bg-yellow-400 opacity-20 blur-lg"></div>
131
+ <div class="relative w-24 h-24 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 flex items-center justify-center shadow-lg coin-spin">
132
+ <span class="text-2xl font-bold text-gray-900">CC</span>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ <div class="space-y-4">
137
+ <div>
138
+ <span class="text-sm opacity-75 block">Current Value</span>
139
+ <span class="font-bold">1 CC = $0.0012</span>
140
+ </div>
141
+ <div>
142
+ <span class="text-sm opacity-75 block">Total Mined</span>
143
+ <span class="font-bold" id="total-mined">0 CC</span>
144
+ </div>
145
+ <div>
146
+ <span class="text-sm opacity-75 block">Network Hashrate</span>
147
+ <span class="font-bold">4.2 TH/s</span>
148
+ </div>
149
+ </div>
150
+
151
+ <div class="mt-8">
152
+ <h3 class="text-lg font-semibold mb-3">How it works</h3>
153
+ <ul class="space-y-3 text-sm">
154
+ <li class="flex items-start">
155
+ <i class="fas fa-cookie text-yellow-400 mt-1 mr-2"></i>
156
+ <span>We analyze browser cookies to determine time spent on sites</span>
157
+ </li>
158
+ <li class="flex items-start">
159
+ <i class="fas fa-clock text-yellow-400 mt-1 mr-2"></i>
160
+ <span>More time = More CookieCoins (CC) mined</span>
161
+ </li>
162
+ <li class="flex items-start">
163
+ <i class="fas fa-chart-line text-yellow-400 mt-1 mr-2"></i>
164
+ <span>Productive sites earn bonus mining rates</span>
165
+ </li>
166
+ </ul>
167
+ </div>
168
+
169
+ <button id="connect-wallet" class="w-full mt-8 bg-gray-700 hover:bg-gray-600 py-3 px-4 rounded-lg flex items-center justify-center">
170
+ <i class="fab fa-ethereum mr-2"></i>
171
+ Connect Wallet
172
+ </button>
173
+ </div>
174
+ </div>
175
+ </main>
176
+ </div>
177
+
178
+ <script>
179
+ // Initialize variables
180
+ let coinBalance = 0;
181
+ let miningRate = 0.5; // Base mining rate (CC per minute)
182
+ let activeSites = 0;
183
+ let sessionSeconds = 0;
184
+ let totalMined = 0;
185
+ let miningInterval;
186
+ let sessionInterval;
187
+
188
+ // DOM elements
189
+ const coinBalanceEl = document.getElementById('coin-balance');
190
+ const miningRateEl = document.getElementById('mining-rate');
191
+ const activeSitesEl = document.getElementById('active-sites');
192
+ const sessionTimeEl = document.getElementById('session-time');
193
+ const sessionProgressEl = document.getElementById('session-progress');
194
+ const claimBtn = document.getElementById('claim-btn');
195
+ const topSitesEl = document.getElementById('top-sites');
196
+ const totalMinedEl = document.getElementById('total-mined');
197
+ const currentTimeEl = document.getElementById('current-time');
198
+ const networkStatusEl = document.getElementById('network-status');
199
+ const connectWalletBtn = document.getElementById('connect-wallet');
200
+
201
+ // Update current time
202
+ function updateCurrentTime() {
203
+ const now = new Date();
204
+ currentTimeEl.textContent = now.toLocaleTimeString();
205
+ }
206
+ setInterval(updateCurrentTime, 1000);
207
+ updateCurrentTime();
208
+
209
+ // Simulate network status changes
210
+ setTimeout(() => {
211
+ networkStatusEl.textContent = "Online";
212
+ }, 2000);
213
+
214
+ // Start mining session
215
+ function startMiningSession() {
216
+ // Simulate detecting active sites from cookies
217
+ activeSites = Math.floor(Math.random() * 5) + 1;
218
+ activeSitesEl.textContent = activeSites;
219
+
220
+ // Adjust mining rate based on active sites
221
+ miningRate = 0.5 + (activeSites * 0.2);
222
+ miningRateEl.textContent = miningRate.toFixed(1);
223
+
224
+ // Start session timer
225
+ sessionInterval = setInterval(() => {
226
+ sessionSeconds++;
227
+ const hours = Math.floor(sessionSeconds / 3600);
228
+ const minutes = Math.floor((sessionSeconds % 3600) / 60);
229
+ const seconds = sessionSeconds % 60;
230
+ sessionTimeEl.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
231
+
232
+ // Update progress bar (max 1 hour session)
233
+ const progressPercent = Math.min((sessionSeconds / 3600) * 100, 100);
234
+ sessionProgressEl.style.width = `${progressPercent}%`;
235
+
236
+ // Change color when session is complete
237
+ if (progressPercent >= 100) {
238
+ sessionProgressEl.classList.remove('bg-yellow-400');
239
+ sessionProgressEl.classList.add('bg-green-400');
240
+ claimBtn.classList.remove('bg-yellow-500', 'hover:bg-yellow-600');
241
+ claimBtn.classList.add('bg-green-500', 'hover:bg-green-600');
242
+ claimBtn.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Session Complete!';
243
+ }
244
+ }, 1000);
245
+
246
+ // Start mining coins
247
+ miningInterval = setInterval(() => {
248
+ const coinsMined = miningRate / 60; // Convert rate to per second
249
+ coinBalance += coinsMined;
250
+ totalMined += coinsMined;
251
+ coinBalanceEl.textContent = coinBalance.toFixed(2);
252
+ totalMinedEl.textContent = `${totalMined.toFixed(2)} CC`;
253
+
254
+ // Update estimated USD value
255
+ const usdValue = coinBalance * 0.0012;
256
+ document.querySelector('#coin-balance + .text-xs').textContent = `≈ $${usdValue.toFixed(4)}`;
257
+ }, 1000);
258
+
259
+ // Simulate top earning sites
260
+ updateTopSites();
261
+ }
262
+
263
+ // Update top earning sites
264
+ function updateTopSites() {
265
+ const sites = [
266
+ { name: "GitHub", icon: "fab fa-github", coins: (Math.random() * 5 + 1).toFixed(2) },
267
+ { name: "Stack Overflow", icon: "fab fa-stack-overflow", coins: (Math.random() * 4 + 1).toFixed(2) },
268
+ { name: "Medium", icon: "fab fa-medium", coins: (Math.random() * 3 + 1).toFixed(2) },
269
+ { name: "YouTube", icon: "fab fa-youtube", coins: (Math.random() * 2).toFixed(2) },
270
+ { name: "Twitter", icon: "fab fa-twitter", coins: (Math.random() * 1).toFixed(2) }
271
+ ].sort((a, b) => b.coins - a.coins);
272
+
273
+ topSitesEl.innerHTML = '';
274
+
275
+ sites.forEach(site => {
276
+ const siteEl = document.createElement('div');
277
+ siteEl.className = 'flex items-center justify-between py-2 px-3 bg-gray-700 rounded-lg';
278
+ siteEl.innerHTML = `
279
+ <div class="flex items-center">
280
+ <div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center mr-3">
281
+ <i class="${site.icon} text-sm"></i>
282
+ </div>
283
+ <span>${site.name}</span>
284
+ </div>
285
+ <span class="text-yellow-400">${site.coins} CC</span>
286
+ `;
287
+ topSitesEl.appendChild(siteEl);
288
+ });
289
+ }
290
+
291
+ // Claim coins
292
+ claimBtn.addEventListener('click', () => {
293
+ if (coinBalance > 0) {
294
+ // Show success animation
295
+ claimBtn.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Claimed!';
296
+ claimBtn.classList.remove('bg-yellow-500', 'hover:bg-yellow-600', 'pulse');
297
+ claimBtn.classList.add('bg-green-500', 'hover:bg-green-600');
298
+
299
+ // Reset session
300
+ setTimeout(() => {
301
+ clearInterval(miningInterval);
302
+ clearInterval(sessionInterval);
303
+ sessionSeconds = 0;
304
+ sessionTimeEl.textContent = '00:00:00';
305
+ sessionProgressEl.style.width = '0%';
306
+ sessionProgressEl.classList.remove('bg-green-400');
307
+ sessionProgressEl.classList.add('bg-yellow-400');
308
+ claimBtn.innerHTML = '<i class="fas fa-gem mr-2"></i> Claim CookieCoins';
309
+ claimBtn.classList.remove('bg-green-500', 'hover:bg-green-600');
310
+ claimBtn.classList.add('bg-yellow-500', 'hover:bg-yellow-600', 'pulse');
311
+
312
+ // Start new session
313
+ startMiningSession();
314
+ }, 2000);
315
+ }
316
+ });
317
+
318
+ // Connect wallet
319
+ connectWalletBtn.addEventListener('click', () => {
320
+ connectWalletBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Connecting...';
321
+ setTimeout(() => {
322
+ connectWalletBtn.innerHTML = '<i class="fab fa-ethereum mr-2"></i> 0x7f...3a4b';
323
+ connectWalletBtn.classList.remove('bg-gray-700', 'hover:bg-gray-600');
324
+ connectWalletBtn.classList.add('bg-blue-600', 'hover:bg-blue-700');
325
+ }, 1500);
326
+ });
327
+
328
+ // Start initial session
329
+ startMiningSession();
330
+ </script>
331
+ <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-coin" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
332
+ </html>