emad600 commited on
Commit
8b7cd45
·
verified ·
1 Parent(s): fda3913

Upload 12 files

Browse files
.env ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+
2
+ VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inp4cGJrZ2ljcWFwbmJuZGtqd2R0Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDUxNTA4NDQsImV4cCI6MjA2MDcyNjg0NH0.rrZFi1tcKmumkFEipTrVQMHQMZ41zoTVzl2MYN3Vo6g
3
+ VITE_SUPABASE_URL=https://zxpbkgicqapnbndkjwdt.supabase.co
.gitignore ADDED
@@ -0,0 +1,24 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # Logs
2
+ logs
3
+ *.log
4
+ npm-debug.log*
5
+ yarn-debug.log*
6
+ yarn-error.log*
7
+ pnpm-debug.log*
8
+ lerna-debug.log*
9
+
10
+ node_modules
11
+ dist
12
+ dist-ssr
13
+ *.local
14
+
15
+ # Editor directories and files
16
+ .vscode/*
17
+ !.vscode/extensions.json
18
+ .idea
19
+ .DS_Store
20
+ *.suo
21
+ *.ntvs*
22
+ *.njsproj
23
+ *.sln
24
+ *.sw?
eslint.config.js ADDED
@@ -0,0 +1,28 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import js from '@eslint/js';
2
+ import globals from 'globals';
3
+ import reactHooks from 'eslint-plugin-react-hooks';
4
+ import reactRefresh from 'eslint-plugin-react-refresh';
5
+ import tseslint from 'typescript-eslint';
6
+
7
+ export default tseslint.config(
8
+ { ignores: ['dist'] },
9
+ {
10
+ extends: [js.configs.recommended, ...tseslint.configs.recommended],
11
+ files: ['**/*.{ts,tsx}'],
12
+ languageOptions: {
13
+ ecmaVersion: 2020,
14
+ globals: globals.browser,
15
+ },
16
+ plugins: {
17
+ 'react-hooks': reactHooks,
18
+ 'react-refresh': reactRefresh,
19
+ },
20
+ rules: {
21
+ ...reactHooks.configs.recommended.rules,
22
+ 'react-refresh/only-export-components': [
23
+ 'warn',
24
+ { allowConstantExport: true },
25
+ ],
26
+ },
27
+ }
28
+ );
index.html CHANGED
@@ -1,414 +1,13 @@
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>Future Predictions Dashboard</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
- .prediction-card {
11
- perspective: 1000px;
12
- transition: all 0.5s ease;
13
- }
14
- .prediction-card:hover {
15
- transform: translateY(-5px);
16
- }
17
- .card-inner {
18
- position: relative;
19
- width: 100%;
20
- height: 100%;
21
- transition: transform 0.8s;
22
- transform-style: preserve-3d;
23
- }
24
- .prediction-card:hover .card-inner {
25
- transform: rotateY(10deg);
26
- }
27
- .glow {
28
- box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
29
- }
30
- .progress-ring {
31
- transform: rotate(-90deg);
32
- }
33
- .progress-ring-circle {
34
- transition: stroke-dashoffset 0.5s;
35
- }
36
- .animate-pulse-slow {
37
- animation: pulse 3s infinite;
38
- }
39
- @keyframes pulse {
40
- 0%, 100% {
41
- opacity: 1;
42
- }
43
- 50% {
44
- opacity: 0.7;
45
- }
46
- }
47
- </style>
48
- </head>
49
- <body class="bg-gradient-to-br from-gray-900 to-blue-900 min-h-screen text-white">
50
- <div class="container mx-auto px-4 py-8">
51
- <!-- Header -->
52
- <header class="mb-12 text-center">
53
- <h1 class="text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-600">
54
- Future Predictions
55
- </h1>
56
- <p class="text-xl text-blue-200 max-w-2xl mx-auto">
57
- Explore data-driven forecasts and probabilistic outcomes across various domains
58
- </p>
59
- <div class="mt-6 relative max-w-md mx-auto">
60
- <input type="text" placeholder="Search predictions..."
61
- class="w-full px-6 py-3 rounded-full bg-gray-800 border border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500">
62
- <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-full">
63
- <i class="fas fa-search"></i>
64
- </button>
65
- </div>
66
- </header>
67
-
68
- <!-- Filters -->
69
- <div class="flex flex-wrap justify-center gap-4 mb-8">
70
- <button class="filter-btn active px-4 py-2 rounded-full bg-blue-600 hover:bg-blue-700 transition">
71
- All Categories
72
- </button>
73
- <button class="filter-btn px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">
74
- <i class="fas fa-chart-line mr-2"></i> Finance
75
- </button>
76
- <button class="filter-btn px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">
77
- <i class="fas fa-globe mr-2"></i> Climate
78
- </button>
79
- <button class="filter-btn px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">
80
- <i class="fas fa-flask mr-2"></i> Technology
81
- </button>
82
- <button class="filter-btn px-4 py-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">
83
- <i class="fas fa-heartbeat mr-2"></i> Health
84
- </button>
85
- </div>
86
-
87
- <!-- Stats Overview -->
88
- <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-10">
89
- <div class="bg-gray-800 rounded-xl p-6 flex items-center glow">
90
- <div class="mr-4">
91
- <div class="w-12 h-12 rounded-full bg-blue-900 flex items-center justify-center">
92
- <i class="fas fa-database text-blue-400 text-xl"></i>
93
- </div>
94
- </div>
95
- <div>
96
- <p class="text-gray-400">Total Predictions</p>
97
- <h3 class="text-2xl font-bold">1,248</h3>
98
- </div>
99
- </div>
100
- <div class="bg-gray-800 rounded-xl p-6 flex items-center">
101
- <div class="mr-4">
102
- <div class="w-12 h-12 rounded-full bg-purple-900 flex items-center justify-center">
103
- <i class="fas fa-check-circle text-purple-400 text-xl"></i>
104
- </div>
105
- </div>
106
- <div>
107
- <p class="text-gray-400">Verified</p>
108
- <h3 class="text-2xl font-bold">892</h3>
109
- </div>
110
- </div>
111
- <div class="bg-gray-800 rounded-xl p-6 flex items-center">
112
- <div class="mr-4">
113
- <div class="w-12 h-12 rounded-full bg-green-900 flex items-center justify-center">
114
- <i class="fas fa-chart-pie text-green-400 text-xl"></i>
115
- </div>
116
- </div>
117
- <div>
118
- <p class="text-gray-400">Accuracy</p>
119
- <h3 class="text-2xl font-bold">87.5%</h3>
120
- </div>
121
- </div>
122
- <div class="bg-gray-800 rounded-xl p-6 flex items-center">
123
- <div class="mr-4">
124
- <div class="w-12 h-12 rounded-full bg-yellow-900 flex items-center justify-center">
125
- <i class="fas fa-bolt text-yellow-400 text-xl"></i>
126
- </div>
127
- </div>
128
- <div>
129
- <p class="text-gray-400">New Today</p>
130
- <h3 class="text-2xl font-bold">24</h3>
131
- </div>
132
- </div>
133
- </div>
134
-
135
- <!-- Main Predictions Grid -->
136
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
137
- <!-- Prediction Card 1 -->
138
- <div class="prediction-card bg-gray-800 rounded-xl p-6 overflow-hidden border border-gray-700 hover:border-blue-500 transition">
139
- <div class="card-inner">
140
- <div class="flex justify-between items-start mb-4">
141
- <div>
142
- <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-blue-900 text-blue-300">TECHNOLOGY</span>
143
- </div>
144
- <div class="flex items-center text-yellow-400">
145
- <i class="fas fa-star mr-1"></i>
146
- <span>4.8</span>
147
- </div>
148
- </div>
149
- <h3 class="text-xl font-bold mb-3">Quantum Computing Breakthrough</h3>
150
- <p class="text-gray-400 mb-4">By 2028, quantum computers will solve problems in minutes that would take classical computers millennia.</p>
151
-
152
- <div class="flex items-center mb-4">
153
- <div class="relative w-12 h-12 mr-3">
154
- <svg class="progress-ring w-12 h-12" viewBox="0 0 36 36">
155
- <circle class="progress-ring-circle" stroke="#1E40AF" stroke-width="3" fill="transparent" r="16" cx="18" cy="18" />
156
- <circle class="progress-ring-circle" stroke="#3B82F6" stroke-width="3" stroke-dasharray="100 100" stroke-dashoffset="25" fill="transparent" r="16" cx="18" cy="18" />
157
- </svg>
158
- <div class="absolute inset-0 flex items-center justify-center text-xs font-bold">75%</div>
159
- </div>
160
- <div>
161
- <p class="text-sm text-gray-400">Confidence</p>
162
- <div class="flex -space-x-1">
163
- <img class="w-6 h-6 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
164
- <img class="w-6 h-6 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
165
- <img class="w-6 h-6 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/women/68.jpg" alt="">
166
- <div class="w-6 h-6 rounded-full border-2 border-gray-800 bg-gray-700 flex items-center justify-center text-xs">+5</div>
167
- </div>
168
- </div>
169
- </div>
170
-
171
- <div class="flex justify-between items-center pt-4 border-t border-gray-700">
172
- <span class="text-sm text-blue-400"><i class="far fa-clock mr-1"></i> 3-5 years</span>
173
- <button class="text-sm px-4 py-1 rounded-full bg-blue-600 hover:bg-blue-700 transition">
174
- <i class="fas fa-plus mr-1"></i> Track
175
- </button>
176
- </div>
177
- </div>
178
- </div>
179
-
180
- <!-- Prediction Card 2 -->
181
- <div class="prediction-card bg-gray-800 rounded-xl p-6 overflow-hidden border border-gray-700 hover:border-purple-500 transition">
182
- <div class="card-inner">
183
- <div class="flex justify-between items-start mb-4">
184
- <div>
185
- <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-purple-900 text-purple-300">FINANCE</span>
186
- </div>
187
- <div class="flex items-center text-yellow-400">
188
- <i class="fas fa-star mr-1"></i>
189
- <span>4.5</span>
190
- </div>
191
- </div>
192
- <h3 class="text-xl font-bold mb-3">CBDC Adoption</h3>
193
- <p class="text-gray-400 mb-4">Over 50% of G20 nations will have operational central bank digital currencies by 2030.</p>
194
-
195
- <div class="flex items-center mb-4">
196
- <div class="relative w-12 h-12 mr-3">
197
- <svg class="progress-ring w-12 h-12" viewBox="0 0 36 36">
198
- <circle class="progress-ring-circle" stroke="#5B21B6" stroke-width="3" fill="transparent" r="16" cx="18" cy="18" />
199
- <circle class="progress-ring-circle" stroke="#8B5CF6" stroke-width="3" stroke-dasharray="100 100" stroke-dashoffset="40" fill="transparent" r="16" cx="18" cy="18" />
200
- </svg>
201
- <div class="absolute inset-0 flex items-center justify-center text-xs font-bold">60%</div>
202
- </div>
203
- <div>
204
- <p class="text-sm text-gray-400">Confidence</p>
205
- <div class="flex -space-x-1">
206
- <img class="w-6 h-6 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/men/75.jpg" alt="">
207
- <img class="w-6 h-6 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/women/90.jpg" alt="">
208
- <div class="w-6 h-6 rounded-full border-2 border-gray-800 bg-gray-700 flex items-center justify-center text-xs">+8</div>
209
- </div>
210
- </div>
211
- </div>
212
-
213
- <div class="flex justify-between items-center pt-4 border-t border-gray-700">
214
- <span class="text-sm text-purple-400"><i class="far fa-clock mr-1"></i> 5-7 years</span>
215
- <button class="text-sm px-4 py-1 rounded-full bg-purple-600 hover:bg-purple-700 transition">
216
- <i class="fas fa-plus mr-1"></i> Track
217
- </button>
218
- </div>
219
- </div>
220
- </div>
221
-
222
- <!-- Prediction Card 3 -->
223
- <div class="prediction-card bg-gray-800 rounded-xl p-6 overflow-hidden border border-gray-700 hover:border-green-500 transition">
224
- <div class="card-inner">
225
- <div class="flex justify-between items-start mb-4">
226
- <div>
227
- <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-green-900 text-green-300">CLIMATE</span>
228
- </div>
229
- <div class="flex items-center text-yellow-400">
230
- <i class="fas fa-star mr-1"></i>
231
- <span>4.9</span>
232
- </div>
233
- </div>
234
- <h3 class="text-xl font-bold mb-3">Arctic Ice Melt</h3>
235
- <p class="text-gray-400 mb-4">Summer Arctic sea ice will completely disappear by 2040 if current emission trends continue.</p>
236
-
237
- <div class="flex items-center mb-4">
238
- <div class="relative w-12 h-12 mr-3">
239
- <svg class="progress-ring w-12 h-12" viewBox="0 0 36 36">
240
- <circle class="progress-ring-circle" stroke="#14532D" stroke-width="3" fill="transparent" r="16" cx="18" cy="18" />
241
- <circle class="progress-ring-circle" stroke="#22C55E" stroke-width="3" stroke-dasharray="100 100" stroke-dashoffset="15" fill="transparent" r="16" cx="18" cy="18" />
242
- </svg>
243
- <div class="absolute inset-0 flex items-center justify-center text-xs font-bold">85%</div>
244
- </div>
245
- <div>
246
- <p class="text-sm text-gray-400">Confidence</p>
247
- <div class="flex -space-x-1">
248
- <img class="w-6 h-6 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/men/22.jpg" alt="">
249
- <img class="w-6 h-6 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/women/33.jpg" alt="">
250
- <img class="w-6 h-6 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/men/44.jpg" alt="">
251
- <div class="w-6 h-6 rounded-full border-2 border-gray-800 bg-gray-700 flex items-center justify-center text-xs">+12</div>
252
- </div>
253
- </div>
254
- </div>
255
-
256
- <div class="flex justify-between items-center pt-4 border-t border-gray-700">
257
- <span class="text-sm text-green-400"><i class="far fa-clock mr-1"></i> 15-20 years</span>
258
- <button class="text-sm px-4 py-1 rounded-full bg-green-600 hover:bg-green-700 transition">
259
- <i class="fas fa-plus mr-1"></i> Track
260
- </button>
261
- </div>
262
- </div>
263
- </div>
264
-
265
- <!-- Prediction Card 4 -->
266
- <div class="prediction-card bg-gray-800 rounded-xl p-6 overflow-hidden border border-gray-700 hover:border-red-500 transition">
267
- <div class="card-inner">
268
- <div class="flex justify-between items-start mb-4">
269
- <div>
270
- <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-red-900 text-red-300">HEALTH</span>
271
- </div>
272
- <div class="flex items-center text-yellow-400">
273
- <i class="fas fa-star mr-1"></i>
274
- <span>4.2</span>
275
- </div>
276
- </div>
277
- <h3 class="text-xl font-bold mb-3">Cancer Treatment</h3>
278
- <p class="text-gray-400 mb-4">Personalized mRNA vaccines will become standard treatment for 5+ cancer types by 2035.</p>
279
-
280
- <div class="flex items-center mb-4">
281
- <div class="relative w-12 h-12 mr-3">
282
- <svg class="progress-ring w-12 h-12" viewBox="0 0 36 36">
283
- <circle class="progress-ring-circle" stroke="#7F1D1D" stroke-width="3" fill="transparent" r="16" cx="18" cy="18" />
284
- <circle class="progress-ring-circle" stroke="#EF4444" stroke-width="3" stroke-dasharray="100 100" stroke-dashoffset="35" fill="transparent" r="16" cx="18" cy="18" />
285
- </svg>
286
- <div class="absolute inset-0 flex items-center justify-center text-xs font-bold">65%</div>
287
- </div>
288
- <div>
289
- <p class="text-sm text-gray-400">Confidence</p>
290
- <div class="flex -space-x-1">
291
- <img class="w-6 h-6 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/women/22.jpg" alt="">
292
- <img class="w-6 h-6 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/men/11.jpg" alt="">
293
- <div class="w-6 h-6 rounded-full border-2 border-gray-800 bg-gray-700 flex items-center justify-center text-xs">+3</div>
294
- </div>
295
- </div>
296
- </div>
297
-
298
- <div class="flex justify-between items-center pt-4 border-t border-gray-700">
299
- <span class="text-sm text-red-400"><i class="far fa-clock mr-1"></i> 10-12 years</span>
300
- <button class="text-sm px-4 py-1 rounded-full bg-red-600 hover:bg-red-700 transition">
301
- <i class="fas fa-plus mr-1"></i> Track
302
- </button>
303
- </div>
304
- </div>
305
- </div>
306
-
307
- <!-- Prediction Card 5 -->
308
- <div class="prediction-card bg-gray-800 rounded-xl p-6 overflow-hidden border border-gray-700 hover:border-yellow-500 transition">
309
- <div class="card-inner">
310
- <div class="flex justify-between items-start mb-4">
311
- <div>
312
- <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-yellow-900 text-yellow-300">TECHNOLOGY</span>
313
- </div>
314
- <div class="flex items-center text-yellow-400">
315
- <i class="fas fa-star mr-1"></i>
316
- <span>4.7</span>
317
- </div>
318
- </div>
319
- <h3 class="text-xl font-bold mb-3">AI Regulation</h3>
320
- <p class="text-gray-400 mb-4">Global AI regulatory framework will be established by 2026, enforced by 2030.</p>
321
-
322
- <div class="flex items-center mb-4">
323
- <div class="relative w-12 h-12 mr-3">
324
- <svg class="progress-ring w-12 h-12" viewBox="0 0 36 36">
325
- <circle class="progress-ring-circle" stroke="#713F12" stroke-width="3" fill="transparent" r="16" cx="18" cy="18" />
326
- <circle class="progress-ring-circle" stroke="#F59E0B" stroke-width="3" stroke-dasharray="100 100" stroke-dashoffset="45" fill="transparent" r="16" cx="18" cy="18" />
327
- </svg>
328
- <div class="absolute inset-0 flex items-center justify-center text-xs font-bold">55%</div>
329
- </div>
330
- <div>
331
- <p class="text-sm text-gray-400">Confidence</p>
332
- <div class="flex -space-x-1">
333
- <img class="w-6 h-6 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/men/65.jpg" alt="">
334
- <img class="w-6 h-6 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/women/45.jpg" alt="">
335
- <img class="w-6 h-6 rounded-full border-2 border-gray-800" src="https://randomuser.me/api/portraits/men/33.jpg" alt="">
336
- <div class="w-6 h-6 rounded-full border-2 border-gray-800 bg-gray-700 flex items-center justify-center text-xs">+7</div>
337
- </div>
338
- </div>
339
- </div>
340
-
341
- <div class="flex justify-between items-center pt-4 border-t border-gray-700">
342
- <span class="text-sm text-yellow-400"><i class="far fa-clock mr-1"></i> 3-5 years</span>
343
- <button class="text-sm px-4 py-1 rounded-full bg-yellow-600 hover:bg-yellow-700 transition">
344
- <i class="fas fa-plus mr-1"></i> Track
345
- </button>
346
- </div>
347
- </div>
348
- </div>
349
-
350
- <!-- Add New Prediction Card -->
351
- <div class="prediction-card bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl p-6 overflow-hidden border-2 border-dashed border-gray-600 hover:border-blue-400 transition flex flex-col items-center justify-center">
352
- <div class="w-16 h-16 rounded-full bg-blue-900 flex items-center justify-center mb-4 animate-pulse-slow">
353
- <i class="fas fa-plus text-blue-400 text-2xl"></i>
354
- </div>
355
- <h3 class="text-xl font-bold mb-2">Add Your Prediction</h3>
356
- <p class="text-gray-400 text-center mb-4">Contribute to our collective foresight by sharing your data-driven forecast</p>
357
- <button class="px-6 py-2 rounded-full bg-blue-600 hover:bg-blue-700 transition flex items-center">
358
- <i class="fas fa-pen mr-2"></i> Create Prediction
359
- </button>
360
- </div>
361
- </div>
362
-
363
- <!-- View More Button -->
364
- <div class="text-center mt-12">
365
- <button class="px-8 py-3 rounded-full bg-gray-800 hover:bg-gray-700 border border-gray-700 transition flex items-center mx-auto">
366
- <i class="fas fa-arrow-down mr-2"></i> Load More Predictions
367
- </button>
368
- </div>
369
- </div>
370
-
371
- <script>
372
- // Filter functionality
373
- document.querySelectorAll('.filter-btn').forEach(btn => {
374
- btn.addEventListener('click', function() {
375
- document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active', 'bg-blue-600'));
376
- document.querySelectorAll('.filter-btn').forEach(b => b.classList.add('bg-gray-800'));
377
- this.classList.add('active', 'bg-blue-600');
378
- this.classList.remove('bg-gray-800');
379
-
380
- // In a real app, you would filter predictions here
381
- console.log(`Filtering by: ${this.textContent.trim()}`);
382
- });
383
- });
384
-
385
- // Track button functionality
386
- document.querySelectorAll('.prediction-card button').forEach(btn => {
387
- if (btn.textContent.includes('Track')) {
388
- btn.addEventListener('click', function(e) {
389
- e.stopPropagation();
390
- const card = this.closest('.prediction-card');
391
- card.classList.add('glow');
392
- this.innerHTML = '<i class="fas fa-check mr-1"></i> Tracking';
393
- this.classList.remove('bg-blue-600', 'bg-purple-600', 'bg-green-600', 'bg-red-600', 'bg-yellow-600');
394
- this.classList.add('bg-gray-700');
395
-
396
- setTimeout(() => {
397
- card.classList.remove('glow');
398
- }, 1000);
399
- });
400
- }
401
- });
402
-
403
- // Create prediction button
404
- document.querySelector('.prediction-card button')?.addEventListener('click', function() {
405
- alert('Prediction creation form would open here!');
406
- });
407
-
408
- // Load more button
409
- document.querySelector('.text-center button')?.addEventListener('click', function() {
410
- alert('Loading more predictions...');
411
- });
412
- </script>
413
- <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=emad600/future-predictions" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
414
  </html>
 
1
+ <!doctype html>
2
  <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
  <title>Future Predictions Dashboard</title>
8
+ </head>
9
+ <body>
10
+ <div id="root"></div>
11
+ <script type="module" src="/src/main.tsx"></script>
12
+ </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
13
  </html>
package-lock.json ADDED
The diff for this file is too large to render. See raw diff
 
package.json ADDED
@@ -0,0 +1,34 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "name": "vite-react-typescript-starter",
3
+ "private": true,
4
+ "version": "0.0.0",
5
+ "type": "module",
6
+ "scripts": {
7
+ "dev": "vite",
8
+ "build": "vite build",
9
+ "lint": "eslint .",
10
+ "preview": "vite preview"
11
+ },
12
+ "dependencies": {
13
+ "lucide-react": "^0.344.0",
14
+ "react": "^18.3.1",
15
+ "react-dom": "^18.3.1",
16
+ "@supabase/supabase-js": "^2.39.7"
17
+ },
18
+ "devDependencies": {
19
+ "@eslint/js": "^9.9.1",
20
+ "@types/react": "^18.3.5",
21
+ "@types/react-dom": "^18.3.0",
22
+ "@vitejs/plugin-react": "^4.3.1",
23
+ "autoprefixer": "^10.4.18",
24
+ "eslint": "^9.9.1",
25
+ "eslint-plugin-react-hooks": "^5.1.0-rc.0",
26
+ "eslint-plugin-react-refresh": "^0.4.11",
27
+ "globals": "^15.9.0",
28
+ "postcss": "^8.4.35",
29
+ "tailwindcss": "^3.4.1",
30
+ "typescript": "^5.5.3",
31
+ "typescript-eslint": "^8.3.0",
32
+ "vite": "^5.4.2"
33
+ }
34
+ }
postcss.config.js ADDED
@@ -0,0 +1,6 @@
 
 
 
 
 
 
 
1
+ export default {
2
+ plugins: {
3
+ tailwindcss: {},
4
+ autoprefixer: {},
5
+ },
6
+ };
tailwind.config.js ADDED
@@ -0,0 +1,8 @@
 
 
 
 
 
 
 
 
 
1
+ /** @type {import('tailwindcss').Config} */
2
+ export default {
3
+ content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
4
+ theme: {
5
+ extend: {},
6
+ },
7
+ plugins: [],
8
+ };
tsconfig.app.json ADDED
@@ -0,0 +1,24 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "compilerOptions": {
3
+ "target": "ES2020",
4
+ "useDefineForClassFields": true,
5
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
6
+ "module": "ESNext",
7
+ "skipLibCheck": true,
8
+
9
+ /* Bundler mode */
10
+ "moduleResolution": "bundler",
11
+ "allowImportingTsExtensions": true,
12
+ "isolatedModules": true,
13
+ "moduleDetection": "force",
14
+ "noEmit": true,
15
+ "jsx": "react-jsx",
16
+
17
+ /* Linting */
18
+ "strict": true,
19
+ "noUnusedLocals": true,
20
+ "noUnusedParameters": true,
21
+ "noFallthroughCasesInSwitch": true
22
+ },
23
+ "include": ["src"]
24
+ }
tsconfig.json ADDED
@@ -0,0 +1,7 @@
 
 
 
 
 
 
 
 
1
+ {
2
+ "files": [],
3
+ "references": [
4
+ { "path": "./tsconfig.app.json" },
5
+ { "path": "./tsconfig.node.json" }
6
+ ]
7
+ }
tsconfig.node.json ADDED
@@ -0,0 +1,22 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "compilerOptions": {
3
+ "target": "ES2022",
4
+ "lib": ["ES2023"],
5
+ "module": "ESNext",
6
+ "skipLibCheck": true,
7
+
8
+ /* Bundler mode */
9
+ "moduleResolution": "bundler",
10
+ "allowImportingTsExtensions": true,
11
+ "isolatedModules": true,
12
+ "moduleDetection": "force",
13
+ "noEmit": true,
14
+
15
+ /* Linting */
16
+ "strict": true,
17
+ "noUnusedLocals": true,
18
+ "noUnusedParameters": true,
19
+ "noFallthroughCasesInSwitch": true
20
+ },
21
+ "include": ["vite.config.ts"]
22
+ }
vite.config.ts ADDED
@@ -0,0 +1,10 @@
 
 
 
 
 
 
 
 
 
 
 
1
+ import { defineConfig } from 'vite';
2
+ import react from '@vitejs/plugin-react';
3
+
4
+ // https://vitejs.dev/config/
5
+ export default defineConfig({
6
+ plugins: [react()],
7
+ optimizeDeps: {
8
+ exclude: ['lucide-react'],
9
+ },
10
+ });