Hugging Face's logo

Spaces:
dschandra
/
drs
Running

App Files Community
dschandra commited on
Commit
c702374
·
verified ·
1 Parent(s): 49e9f4e

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1141 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Drs
3
- emoji: 🚀
4
- colorFrom: indigo
5
- colorTo: red
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: drs
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: pink
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,1141 @@
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>Cricket DRS - LBW Decision System</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
+ .cricket-pitch {
11
+ background: linear-gradient(to right, #22c55e 20%, #166534 20%, #166534 80%, #22c55e 80%);
12
+ position: relative;
13
+ }
14
+ .stumps {
15
+ position: absolute;
16
+ width: 2px;
17
+ height: 28px;
18
+ background: white;
19
+ bottom: 0;
20
+ }
21
+ .ball {
22
+ width: 12px;
23
+ height: 12px;
24
+ background: #dc2626;
25
+ border-radius: 50%;
26
+ position: absolute;
27
+ transition: all 0.5s linear;
28
+ }
29
+ .impact-zone {
30
+ position: absolute;
31
+ border: 2px dashed white;
32
+ border-radius: 50%;
33
+ }
34
+ .tab-content {
35
+ display: none;
36
+ }
37
+ .tab-content.active {
38
+ display: block;
39
+ }
40
+ .video-container {
41
+ position: relative;
42
+ padding-bottom: 56.25%;
43
+ height: 0;
44
+ overflow: hidden;
45
+ }
46
+ .video-container video {
47
+ position: absolute;
48
+ top: 0;
49
+ left: 0;
50
+ width: 100%;
51
+ height: 100%;
52
+ }
53
+ .auth-bg {
54
+ background: url('https://images.unsplash.com/photo-1540747913346-19e32dc3e97e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1605&q=80');
55
+ background-size: cover;
56
+ background-position: center;
57
+ }
58
+ .auth-overlay {
59
+ background: rgba(0, 0, 0, 0.7);
60
+ }
61
+ .sidebar {
62
+ transition: all 0.3s ease;
63
+ }
64
+ .ball-trajectory {
65
+ position: absolute;
66
+ width: 4px;
67
+ background: rgba(255, 255, 255, 0.7);
68
+ transform-origin: bottom center;
69
+ }
70
+ @keyframes ballMove {
71
+ 0% { transform: translate(0, 0) scale(1); }
72
+ 50% { transform: translate(var(--tx), var(--ty)) scale(1.2); }
73
+ 100% { transform: translate(var(--tx2), var(--ty2)) scale(1); }
74
+ }
75
+ </style>
76
+ </head>
77
+ <body class="bg-gray-100 font-sans">
78
+ <!-- Navigation -->
79
+ <nav class="bg-green-800 text-white shadow-lg">
80
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
81
+ <div class="flex items-center space-x-2">
82
+ <i class="fas fa-cricket text-xl"></i>
83
+ <span class="font-bold text-xl">Cricket DRS</span>
84
+ </div>
85
+ <div class="hidden md:flex space-x-6">
86
+ <a href="#home" class="hover:text-green-300">Home</a>
87
+ <a href="#demo" class="hover:text-green-300">Demo</a>
88
+ <a href="#features" class="hover:text-green-300">Features</a>
89
+ <a href="#login" class="hover:text-green-300">Login</a>
90
+ </div>
91
+ <button class="md:hidden" id="mobile-menu-button">
92
+ <i class="fas fa-bars text-xl"></i>
93
+ </button>
94
+ </div>
95
+ <!-- Mobile menu -->
96
+ <div class="md:hidden hidden bg-green-700 px-4 py-2" id="mobile-menu">
97
+ <a href="#home" class="block py-2 hover:text-green-300">Home</a>
98
+ <a href="#demo" class="block py-2 hover:text-green-300">Demo</a>
99
+ <a href="#features" class="block py-2 hover:text-green-300">Features</a>
100
+ <a href="#login" class="block py-2 hover:text-green-300">Login</a>
101
+ </div>
102
+ </nav>
103
+
104
+ <!-- Main Content -->
105
+ <main>
106
+ <!-- Homepage -->
107
+ <section id="home" class="py-16 px-4">
108
+ <div class="container mx-auto text-center">
109
+ <div class="max-w-4xl mx-auto bg-green-700 rounded-xl overflow-hidden shadow-2xl mb-12">
110
+ <div class="p-8 md:p-12 bg-gradient-to-r from-green-800 to-green-600 text-white">
111
+ <h1 class="text-3xl md:text-5xl font-bold mb-4">Cricket LBW Decision Review System</h1>
112
+ <p class="text-xl mb-8">Make accurate LBW decisions with our advanced video analysis technology</p>
113
+ <div class="flex flex-col md:flex-row justify-center gap-4">
114
+ <a href="#login" class="bg-white text-green-800 font-bold py-3 px-6 rounded-lg hover:bg-green-100 transition">Login</a>
115
+ <a href="#signup" class="bg-transparent border-2 border-white text-white font-bold py-3 px-6 rounded-lg hover:bg-green-800 transition">Sign Up</a>
116
+ <a href="#demo" class="bg-yellow-500 text-gray-900 font-bold py-3 px-6 rounded-lg hover:bg-yellow-400 transition">Try Demo</a>
117
+ </div>
118
+ </div>
119
+ </div>
120
+
121
+ <div class="grid md:grid-cols-3 gap-8 mb-16">
122
+ <div class="bg-white p-6 rounded-xl shadow-lg">
123
+ <div class="text-green-600 text-4xl mb-4">
124
+ <i class="fas fa-video"></i>
125
+ </div>
126
+ <h3 class="text-xl font-bold mb-2">Video Analysis</h3>
127
+ <p>Upload match videos and get instant LBW decision analysis with ball tracking technology.</p>
128
+ </div>
129
+ <div class="bg-white p-6 rounded-xl shadow-lg">
130
+ <div class="text-green-600 text-4xl mb-4">
131
+ <i class="fas fa-chart-line"></i>
132
+ </div>
133
+ <h3 class="text-xl font-bold mb-2">Performance Stats</h3>
134
+ <p>Track your decision accuracy over time and improve your umpiring skills.</p>
135
+ </div>
136
+ <div class="bg-white p-6 rounded-xl shadow-lg">
137
+ <div class="text-green-600 text-4xl mb-4">
138
+ <i class="fas fa-trophy"></i>
139
+ </div>
140
+ <h3 class="text-xl font-bold mb-2">Leaderboards</h3>
141
+ <p>Compete with other umpires and climb the rankings with accurate decisions.</p>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </section>
146
+
147
+ <!-- Demo Section -->
148
+ <section id="demo" class="py-16 px-4 bg-gray-200">
149
+ <div class="container mx-auto">
150
+ <h2 class="text-3xl font-bold text-center mb-12">Try Our Demo</h2>
151
+
152
+ <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
153
+ <div class="p-6">
154
+ <h3 class="text-xl font-bold mb-4">LBW Decision Analysis</h3>
155
+
156
+ <div class="grid md:grid-cols-2 gap-8">
157
+ <div>
158
+ <div class="video-container mb-4 bg-black rounded-lg overflow-hidden">
159
+ <video id="demo-video" controls>
160
+ <source src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4" type="video/mp4">
161
+ Your browser does not support the video tag.
162
+ </video>
163
+ </div>
164
+
165
+ <div class="flex justify-center space-x-4 mb-6">
166
+ <button id="upload-btn" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700">
167
+ <i class="fas fa-upload mr-2"></i>Upload Video
168
+ </button>
169
+ <button id="record-btn" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
170
+ <i class="fas fa-video mr-2"></i>Record
171
+ </button>
172
+ </div>
173
+
174
+ <input type="file" id="video-upload" accept="video/*" class="hidden">
175
+ </div>
176
+
177
+ <div>
178
+ <div class="cricket-pitch h-64 w-full relative rounded-lg mb-4" id="pitch-view">
179
+ <!-- Stumps -->
180
+ <div class="stumps" style="left: 50%; transform: translateX(-50%);"></div>
181
+ <div class="stumps" style="left: calc(50% - 10px); transform: translateX(-50%);"></div>
182
+ <div class="stumps" style="left: calc(50% + 10px); transform: translateX(-50%);"></div>
183
+
184
+ <!-- Ball trajectory will be added by JS -->
185
+ </div>
186
+
187
+ <div class="bg-gray-100 p-4 rounded-lg">
188
+ <h4 class="font-bold mb-2">Decision Analysis</h4>
189
+ <div class="space-y-2">
190
+ <div class="flex justify-between">
191
+ <span>Pitching:</span>
192
+ <span id="pitching-location" class="font-bold">-</span>
193
+ </div>
194
+ <div class="flex justify-between">
195
+ <span>Impact:</span>
196
+ <span id="impact-point" class="font-bold">-</span>
197
+ </div>
198
+ <div class="flex justify-between">
199
+ <span>Wicket Height:</span>
200
+ <span id="wicket-height" class="font-bold">-</span>
201
+ </div>
202
+ <div class="flex justify-between">
203
+ <span>In Line:</span>
204
+ <span id="in-line" class="font-bold">-</span>
205
+ </div>
206
+ </div>
207
+ </div>
208
+
209
+ <div class="mt-4 p-4 rounded-lg bg-yellow-100 border border-yellow-300" id="decision-result">
210
+ <h4 class="font-bold text-lg text-center">Upload a video to analyze</h4>
211
+ </div>
212
+
213
+ <button id="analyze-btn" class="w-full bg-green-600 text-white py-3 rounded-lg mt-4 hover:bg-green-700 hidden">
214
+ Analyze LBW Decision
215
+ </button>
216
+
217
+ <button id="replay-btn" class="w-full bg-blue-600 text-white py-3 rounded-lg mt-4 hover:bg-blue-700 hidden">
218
+ <i class="fas fa-redo mr-2"></i>Replay Ball Tracking
219
+ </button>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ </section>
226
+
227
+ <!-- Features Section -->
228
+ <section id="features" class="py-16 px-4">
229
+ <div class="container mx-auto">
230
+ <h2 class="text-3xl font-bold text-center mb-12">Key Features</h2>
231
+
232
+ <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
233
+ <div class="bg-white p-6 rounded-xl shadow-lg">
234
+ <div class="flex items-center mb-4">
235
+ <div class="bg-green-100 p-3 rounded-full mr-4">
236
+ <i class="fas fa-bullseye text-green-600 text-xl"></i>
237
+ </div>
238
+ <h3 class="text-xl font-bold">Ball Tracking</h3>
239
+ </div>
240
+ <p>Our advanced algorithms track the ball's trajectory with precision, showing pitching location, impact point, and predicted path.</p>
241
+ </div>
242
+
243
+ <div class="bg-white p-6 rounded-xl shadow-lg">
244
+ <div class="flex items-center mb-4">
245
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
246
+ <i class="fas fa-chart-pie text-blue-600 text-xl"></i>
247
+ </div>
248
+ <h3 class="text-xl font-bold">Decision Analytics</h3>
249
+ </div>
250
+ <p>Get detailed statistics on your LBW decisions, including accuracy rates, common mistakes, and improvement suggestions.</p>
251
+ </div>
252
+
253
+ <div class="bg-white p-6 rounded-xl shadow-lg">
254
+ <div class="flex items-center mb-4">
255
+ <div class="bg-yellow-100 p-3 rounded-full mr-4">
256
+ <i class="fas fa-trophy text-yellow-600 text-xl"></i>
257
+ </div>
258
+ <h3 class="text-xl font-bold">Leaderboards</h3>
259
+ </div>
260
+ <p>Compete with other umpires and see how your decision accuracy compares in our global rankings.</p>
261
+ </div>
262
+
263
+ <div class="bg-white p-6 rounded-xl shadow-lg">
264
+ <div class="flex items-center mb-4">
265
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
266
+ <i class="fas fa-medal text-purple-600 text-xl"></i>
267
+ </div>
268
+ <h3 class="text-xl font-bold">Achievements</h3>
269
+ </div>
270
+ <p>Earn badges and achievements for reaching milestones in your umpiring career.</p>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ </section>
275
+
276
+ <!-- Login Page -->
277
+ <section id="login-page" class="hidden py-16 px-4 auth-bg min-h-screen flex items-center justify-center">
278
+ <div class="auth-overlay absolute inset-0"></div>
279
+ <div class="relative z-10 bg-white rounded-xl shadow-xl w-full max-w-md mx-4">
280
+ <div class="p-8">
281
+ <div class="text-center mb-8">
282
+ <i class="fas fa-cricket text-5xl text-green-600 mb-4"></i>
283
+ <h2 class="text-3xl font-bold text-gray-800">Welcome Back</h2>
284
+ <p class="text-gray-600">Sign in to your Cricket DRS account</p>
285
+ </div>
286
+
287
+ <form id="login-form" class="space-y-6">
288
+ <div>
289
+ <label for="login-email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
290
+ <input type="email" id="login-email" class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500" placeholder="[email protected]" required>
291
+ </div>
292
+
293
+ <div>
294
+ <label for="login-password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
295
+ <input type="password" id="login-password" class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500" placeholder="••••••••" required>
296
+ </div>
297
+
298
+ <div class="flex justify-between items-center">
299
+ <div class="flex items-center">
300
+ <input type="checkbox" id="remember-me" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded">
301
+ <label for="remember-me" class="ml-2 block text-sm text-gray-700">Remember me</label>
302
+ </div>
303
+ <a href="#forgot-password" id="forgot-password-link" class="text-sm text-green-600 hover:text-green-800">Forgot password?</a>
304
+ </div>
305
+
306
+ <button type="submit" class="w-full bg-green-600 text-white py-3 px-4 rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 font-medium">
307
+ Sign In
308
+ </button>
309
+ </form>
310
+
311
+ <div class="mt-6 text-center">
312
+ <p class="text-sm text-gray-600">Don't have an account? <a href="#signup" id="signup-link" class="text-green-600 hover:text-green-800 font-medium">Sign up</a></p>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ </section>
317
+
318
+ <!-- Signup Page -->
319
+ <section id="signup-page" class="hidden py-16 px-4 auth-bg min-h-screen flex items-center justify-center">
320
+ <div class="auth-overlay absolute inset-0"></div>
321
+ <div class="relative z-10 bg-white rounded-xl shadow-xl w-full max-w-md mx-4">
322
+ <div class="p-8">
323
+ <div class="text-center mb-8">
324
+ <i class="fas fa-cricket text-5xl text-green-600 mb-4"></i>
325
+ <h2 class="text-3xl font-bold text-gray-800">Create Account</h2>
326
+ <p class="text-gray-600">Join Cricket DRS today</p>
327
+ </div>
328
+
329
+ <form id="signup-form" class="space-y-6">
330
+ <div>
331
+ <label for="signup-name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
332
+ <input type="text" id="signup-name" class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500" placeholder="John Doe" required>
333
+ </div>
334
+
335
+ <div>
336
+ <label for="signup-email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
337
+ <input type="email" id="signup-email" class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500" placeholder="[email protected]" required>
338
+ </div>
339
+
340
+ <div>
341
+ <label for="signup-phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
342
+ <input type="tel" id="signup-phone" class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500" placeholder="+1 (123) 456-7890" required>
343
+ </div>
344
+
345
+ <div>
346
+ <label for="signup-password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
347
+ <input type="password" id="signup-password" class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500" placeholder="••••••••" required>
348
+ </div>
349
+
350
+ <div>
351
+ <label for="signup-confirm-password" class="block text-sm font-medium text-gray-700 mb-1">Confirm Password</label>
352
+ <input type="password" id="signup-confirm-password" class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500" placeholder="••••••••" required>
353
+ </div>
354
+
355
+ <div class="flex items-start">
356
+ <div class="flex items-center h-5">
357
+ <input type="checkbox" id="terms" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded" required>
358
+ </div>
359
+ <div class="ml-3 text-sm">
360
+ <label for="terms" class="text-gray-700">I agree to the <a href="#" class="text-green-600 hover:text-green-800">Terms of Service</a> and <a href="#" class="text-green-600 hover:text-green-800">Privacy Policy</a></label>
361
+ </div>
362
+ </div>
363
+
364
+ <button type="submit" class="w-full bg-green-600 text-white py-3 px-4 rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 font-medium">
365
+ Create Account
366
+ </button>
367
+ </form>
368
+
369
+ <div class="mt-6 text-center">
370
+ <p class="text-sm text-gray-600">Already have an account? <a href="#login" id="login-link" class="text-green-600 hover:text-green-800 font-medium">Sign in</a></p>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </section>
375
+
376
+ <!-- Forgot Password Page -->
377
+ <section id="forgot-password-page" class="hidden py-16 px-4 auth-bg min-h-screen flex items-center justify-center">
378
+ <div class="auth-overlay absolute inset-0"></div>
379
+ <div class="relative z-10 bg-white rounded-xl shadow-xl w-full max-w-md mx-4">
380
+ <div class="p-8">
381
+ <div class="text-center mb-8">
382
+ <i class="fas fa-key text-5xl text-green-600 mb-4"></i>
383
+ <h2 class="text-3xl font-bold text-gray-800">Reset Password</h2>
384
+ <p class="text-gray-600">Enter your email to receive a reset link</p>
385
+ </div>
386
+
387
+ <form id="forgot-password-form" class="space-y-6">
388
+ <p class="text-sm text-gray-600">Enter your email address and we'll send you a link to reset your password.</p>
389
+
390
+ <div>
391
+ <label for="forgot-email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
392
+ <input type="email" id="forgot-email" class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500" placeholder="[email protected]" required>
393
+ </div>
394
+
395
+ <button type="submit" class="w-full bg-green-600 text-white py-3 px-4 rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 font-medium">
396
+ Send Reset Link
397
+ </button>
398
+ </form>
399
+
400
+ <div class="mt-6 text-center">
401
+ <p class="text-sm text-gray-600">Remember your password? <a href="#login" id="back-to-login" class="text-green-600 hover:text-green-800 font-medium">Sign in</a></p>
402
+ </div>
403
+ </div>
404
+ </div>
405
+ </section>
406
+
407
+ <!-- Dashboard (shown after login) -->
408
+ <div id="dashboard" class="hidden min-h-screen">
409
+ <div class="flex">
410
+ <!-- Sidebar -->
411
+ <div class="sidebar bg-green-800 text-white w-64 min-h-screen flex-shrink-0">
412
+ <div class="p-4 flex items-center space-x-2 border-b border-green-700">
413
+ <i class="fas fa-cricket text-xl"></i>
414
+ <span class="font-bold text-xl">Cricket DRS</span>
415
+ </div>
416
+
417
+ <div class="p-4 flex items-center space-x-3 border-b border-green-700">
418
+ <div class="bg-green-100 text-green-800 rounded-full w-10 h-10 flex items-center justify-center font-bold">
419
+ JD
420
+ </div>
421
+ <div>
422
+ <p class="font-medium">John Doe</p>
423
+ <p class="text-xs text-green-200">Umpire Level: Intermediate</p>
424
+ </div>
425
+ </div>
426
+
427
+ <nav class="p-4 space-y-2">
428
+ <a href="#" class="block py-2 px-4 bg-green-700 rounded-lg flex items-center space-x-2">
429
+ <i class="fas fa-home"></i>
430
+ <span>Dashboard</span>
431
+ </a>
432
+ <a href="#" class="block py-2 px-4 hover:bg-green-700 rounded-lg flex items-center space-x-2">
433
+ <i class="fas fa-upload"></i>
434
+ <span>Upload Analysis</span>
435
+ </a>
436
+ <a href="#" class="block py-2 px-4 hover:bg-green-700 rounded-lg flex items-center space-x-2">
437
+ <i class="fas fa-history"></i>
438
+ <span>Match History</span>
439
+ </a>
440
+ <a href="#" class="block py-2 px-4 hover:bg-green-700 rounded-lg flex items-center space-x-2">
441
+ <i class="fas fa-trophy"></i>
442
+ <span>Achievements</span>
443
+ </a>
444
+ <a href="#" class="block py-2 px-4 hover:bg-green-700 rounded-lg flex items-center space-x-2">
445
+ <i class="fas fa-chart-line"></i>
446
+ <span>Leaderboard</span>
447
+ </a>
448
+ <a href="#" class="block py-2 px-4 hover:bg-green-700 rounded-lg flex items-center space-x-2">
449
+ <i class="fas fa-cog"></i>
450
+ <span>Settings</span>
451
+ </a>
452
+ </nav>
453
+
454
+ <div class="p-4 border-t border-green-700 absolute bottom-0 w-64">
455
+ <button id="logout-btn" class="w-full py-2 px-4 hover:bg-green-700 rounded-lg flex items-center space-x-2">
456
+ <i class="fas fa-sign-out-alt"></i>
457
+ <span>Logout</span>
458
+ </button>
459
+ </div>
460
+ </div>
461
+
462
+ <!-- Main Content -->
463
+ <div class="flex-1">
464
+ <div class="bg-white shadow">
465
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
466
+ <div>
467
+ <h2 class="text-xl font-bold" id="dashboard-title">Upload Analysis</h2>
468
+ </div>
469
+ <div class="flex items-center space-x-4">
470
+ <button id="sidebar-toggle" class="md:hidden text-gray-600">
471
+ <i class="fas fa-bars text-xl"></i>
472
+ </button>
473
+ <div class="relative">
474
+ <button class="text-gray-600 hover:text-gray-900">
475
+ <i class="fas fa-bell text-xl"></i>
476
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
477
+ </button>
478
+ </div>
479
+ </div>
480
+ </div>
481
+ </div>
482
+
483
+ <div class="container mx-auto px-4 py-6">
484
+ <div class="grid md:grid-cols-4 gap-4 mb-8">
485
+ <div class="bg-white p-4 rounded-lg shadow">
486
+ <p class="text-gray-500 text-sm">Matches</p>
487
+ <p class="text-2xl font-bold">42</p>
488
+ </div>
489
+ <div class="bg-white p-4 rounded-lg shadow">
490
+ <p class="text-gray-500 text-sm">Wins</p>
491
+ <p class="text-2xl font-bold">28</p>
492
+ </div>
493
+ <div class="bg-white p-4 rounded-lg shadow">
494
+ <p class="text-gray-500 text-sm">LBW Decisions</p>
495
+ <p class="text-2xl font-bold">76</p>
496
+ </div>
497
+ <div class="bg-white p-4 rounded-lg shadow">
498
+ <p class="text-gray-500 text-sm">Accuracy</p>
499
+ <p class="text-2xl font-bold">82%</p>
500
+ </div>
501
+ </div>
502
+
503
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden">
504
+ <div class="flex border-b">
505
+ <button class="tab-btn py-4 px-6 font-medium text-green-600 border-b-2 border-green-600" data-tab="upload">Upload Analysis</button>
506
+ <button class="tab-btn py-4 px-6 font-medium text-gray-500 hover:text-gray-700" data-tab="history">Match History</button>
507
+ <button class="tab-btn py-4 px-6 font-medium text-gray-500 hover:text-gray-700" data-tab="achievements">Achievements</button>
508
+ <button class="tab-btn py-4 px-6 font-medium text-gray-500 hover:text-gray-700" data-tab="leaderboard">Leaderboard</button>
509
+ </div>
510
+
511
+ <div class="p-6">
512
+ <!-- Upload Analysis Tab -->
513
+ <div id="upload-tab" class="tab-content active">
514
+ <h3 class="text-xl font-bold mb-4">LBW Decision Analysis</h3>
515
+
516
+ <div class="grid md:grid-cols-2 gap-8">
517
+ <div>
518
+ <div class="video-container mb-4 bg-black rounded-lg overflow-hidden">
519
+ <video id="dashboard-video" controls>
520
+ <source src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4" type="video/mp4">
521
+ Your browser does not support the video tag.
522
+ </video>
523
+ </div>
524
+
525
+ <div class="flex justify-center space-x-4 mb-6">
526
+ <button id="dashboard-upload-btn" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700">
527
+ <i class="fas fa-upload mr-2"></i>Upload Video
528
+ </button>
529
+ <button id="dashboard-record-btn" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
530
+ <i class="fas fa-video mr-2"></i>Record
531
+ </button>
532
+ </div>
533
+
534
+ <input type="file" id="dashboard-video-upload" accept="video/*" class="hidden">
535
+ </div>
536
+
537
+ <div>
538
+ <div class="cricket-pitch h-64 w-full relative rounded-lg mb-4" id="dashboard-pitch-view">
539
+ <!-- Stumps -->
540
+ <div class="stumps" style="left: 50%; transform: translateX(-50%);"></div>
541
+ <div class="stumps" style="left: calc(50% - 10px); transform: translateX(-50%);"></div>
542
+ <div class="stumps" style="left: calc(50% + 10px); transform: translateX(-50%);"></div>
543
+ </div>
544
+
545
+ <div class="bg-gray-100 p-4 rounded-lg">
546
+ <h4 class="font-bold mb-2">Decision Analysis</h4>
547
+ <div class="space-y-2">
548
+ <div class="flex justify-between">
549
+ <span>Pitching:</span>
550
+ <span id="dashboard-pitching-location" class="font-bold">-</span>
551
+ </div>
552
+ <div class="flex justify-between">
553
+ <span>Impact:</span>
554
+ <span id="dashboard-impact-point" class="font-bold">-</span>
555
+ </div>
556
+ <div class="flex justify-between">
557
+ <span>Wicket Height:</span>
558
+ <span id="dashboard-wicket-height" class="font-bold">-</span>
559
+ </div>
560
+ <div class="flex justify-between">
561
+ <span>In Line:</span>
562
+ <span id="dashboard-in-line" class="font-bold">-</span>
563
+ </div>
564
+ </div>
565
+ </div>
566
+
567
+ <div class="mt-4 p-4 rounded-lg bg-yellow-100 border border-yellow-300" id="dashboard-decision-result">
568
+ <h4 class="font-bold text-lg text-center">Upload a video to analyze</h4>
569
+ </div>
570
+
571
+ <button id="dashboard-analyze-btn" class="w-full bg-green-600 text-white py-3 rounded-lg mt-4 hover:bg-green-700 hidden">
572
+ Analyze LBW Decision
573
+ </button>
574
+
575
+ <button id="dashboard-replay-btn" class="w-full bg-blue-600 text-white py-3 rounded-lg mt-4 hover:bg-blue-700 hidden">
576
+ <i class="fas fa-redo mr-2"></i>Replay Ball Tracking
577
+ </button>
578
+ </div>
579
+ </div>
580
+ </div>
581
+
582
+ <!-- Match History Tab -->
583
+ <div id="history-tab" class="tab-content">
584
+ <h3 class="text-xl font-bold mb-4">Match History</h3>
585
+
586
+ <div class="overflow-x-auto">
587
+ <table class="min-w-full bg-white">
588
+ <thead>
589
+ <tr class="bg-gray-100">
590
+ <th class="py-3 px-4 text-left">Date</th>
591
+ <th class="py-3 px-4 text-left">Teams</th>
592
+ <th class="py-3 px-4 text-left">LBW Decisions</th>
593
+ <th class="py-3 px-4 text-left">Accuracy</th>
594
+ <th class="py-3 px-4 text-left">Result</th>
595
+ </tr>
596
+ </thead>
597
+ <tbody>
598
+ <tr class="border-b hover:bg-gray-50 cursor-pointer">
599
+ <td class="py-3 px-4">2023-06-15</td>
600
+ <td class="py-3 px-4">Team A vs Team B</td>
601
+ <td class="py-3 px-4">3</td>
602
+ <td class="py-3 px-4">100%</td>
603
+ <td class="py-3 px-4"><span class="bg-green-100 text-green-800 px-2 py-1 rounded">Win</span></td>
604
+ </tr>
605
+ <tr class="border-b hover:bg-gray-50 cursor-pointer">
606
+ <td class="py-3 px-4">2023-06-10</td>
607
+ <td class="py-3 px-4">Team C vs Team D</td>
608
+ <td class="py-3 px-4">2</td>
609
+ <td class="py-3 px-4">50%</td>
610
+ <td class="py-3 px-4"><span class="bg-red-100 text-red-800 px-2 py-1 rounded">Loss</span></td>
611
+ </tr>
612
+ <tr class="border-b hover:bg-gray-50 cursor-pointer">
613
+ <td class="py-3 px-4">2023-06-05</td>
614
+ <td class="py-3 px-4">Team E vs Team F</td>
615
+ <td class="py-3 px-4">4</td>
616
+ <td class="py-3 px-4">75%</td>
617
+ <td class="py-3 px-4"><span class="bg-green-100 text-green-800 px-2 py-1 rounded">Win</span></td>
618
+ </tr>
619
+ </tbody>
620
+ </table>
621
+ </div>
622
+ </div>
623
+
624
+ <!-- Achievements Tab -->
625
+ <div id="achievements-tab" class="tab-content">
626
+ <h3 class="text-xl font-bold mb-4">Your Achievements</h3>
627
+
628
+ <div class="grid md:grid-cols-3 gap-6">
629
+ <div class="bg-white border border-yellow-300 rounded-lg p-4 flex items-center">
630
+ <div class="bg-yellow-100 text-yellow-600 rounded-full w-12 h-12 flex items-center justify-center mr-4">
631
+ <i class="fas fa-medal text-xl"></i>
632
+ </div>
633
+ <div>
634
+ <h4 class="font-bold">First Decision</h4>
635
+ <p class="text-sm text-gray-600">Made your first LBW decision</p>
636
+ </div>
637
+ </div>
638
+
639
+ <div class="bg-white border border-yellow-300 rounded-lg p-4 flex items-center">
640
+ <div class="bg-yellow-100 text-yellow-600 rounded-full w-12 h-12 flex items-center justify-center mr-4">
641
+ <i class="fas fa-trophy text-xl"></i>
642
+ </div>
643
+ <div>
644
+ <h4 class="font-bold">Perfect Match</h4>
645
+ <p class="text-sm text-gray-600">100% accuracy in a match</p>
646
+ </div>
647
+ </div>
648
+
649
+ <div class="bg-white border border-gray-200 rounded-lg p-4 flex items-center opacity-50">
650
+ <div class="bg-gray-100 text-gray-400 rounded-full w-12 h-12 flex items-center justify-center mr-4">
651
+ <i class="fas fa-star text-xl"></i>
652
+ </div>
653
+ <div>
654
+ <h4 class="font-bold">Top 10</h4>
655
+ <p class="text-sm text-gray-400">Reach top 10 in leaderboard</p>
656
+ </div>
657
+ </div>
658
+
659
+ <div class="bg-white border border-yellow-300 rounded-lg p-4 flex items-center">
660
+ <div class="bg-yellow-100 text-yellow-600 rounded-full w-12 h-12 flex items-center justify-center mr-4">
661
+ <i class="fas fa-award text-xl"></i>
662
+ </div>
663
+ <div>
664
+ <h4 class="font-bold">10 LBW Outs</h4>
665
+ <p class="text-sm text-gray-600">Correctly called 10 LBW outs</p>
666
+ </div>
667
+ </div>
668
+
669
+ <div class="bg-white border border-gray-200 rounded-lg p-4 flex items-center opacity-50">
670
+ <div class="bg-gray-100 text-gray-400 rounded-full w-12 h-12 flex items-center justify-center mr-4">
671
+ <i class="fas fa-crown text-xl"></i>
672
+ </div>
673
+ <div>
674
+ <h4 class="font-bold">Master Umpire</h4>
675
+ <p class="text-sm text-gray-400">Achieve 90%+ accuracy in 50 matches</p>
676
+ </div>
677
+ </div>
678
+ </div>
679
+ </div>
680
+
681
+ <!-- Leaderboard Tab -->
682
+ <div id="leaderboard-tab" class="tab-content">
683
+ <h3 class="text-xl font-bold mb-4">Umpire Leaderboard</h3>
684
+
685
+ <div class="overflow-x-auto">
686
+ <table class="min-w-full bg-white">
687
+ <thead>
688
+ <tr class="bg-gray-100">
689
+ <th class="py-3 px-4 text-left">Rank</th>
690
+ <th class="py-3 px-4 text-left">Umpire</th>
691
+ <th class="py-3 px-4 text-left">Matches</th>
692
+ <th class="py-3 px-4 text-left">Accuracy</th>
693
+ <th class="py-3 px-4 text-left">Points</th>
694
+ </tr>
695
+ </thead>
696
+ <tbody>
697
+ <tr class="border-b hover:bg-gray-50">
698
+ <td class="py-3 px-4 font-bold">1</td>
699
+ <td class="py-3 px-4 flex items-center">
700
+ <div class="bg-purple-100 text-purple-800 rounded-full w-8 h-8 flex items-center justify-center mr-2">
701
+ AM
702
+ </div>
703
+ Alex Morgan
704
+ </td>
705
+ <td class="py-3 px-4">68</td>
706
+ <td class="py-3 px-4">92%</td>
707
+ <td class="py-3 px-4">1850</td>
708
+ </tr>
709
+ <tr class="border-b hover:bg-gray-50">
710
+ <td class="py-3 px-4 font-bold">2</td>
711
+ <td class="py-3 px-4 flex items-center">
712
+ <div class="bg-blue-100 text-blue-800 rounded-full w-8 h-8 flex items-center justify-center mr-2">
713
+ SJ
714
+ </div>
715
+ Sarah Johnson
716
+ </td>
717
+ <td class="py-3 px-4">59</td>
718
+ <td class="py-3 px-4">90%</td>
719
+ <td class="py-3 px-4">1780</td>
720
+ </tr>
721
+ <tr class="border-b hover:bg-gray-50 bg-green-50">
722
+ <td class="py-3 px-4 font-bold">3</td>
723
+ <td class="py-3 px-4 flex items-center">
724
+ <div class="bg-green-100 text-green-800 rounded-full w-8 h-8 flex items-center justify-center mr-2">
725
+ JD
726
+ </div>
727
+ John Doe
728
+ </td>
729
+ <td class="py-3 px-4">42</td>
730
+ <td class="py-3 px-4">82%</td>
731
+ <td class="py-3 px-4">1520</td>
732
+ </tr>
733
+ <tr class="border-b hover:bg-gray-50">
734
+ <td class="py-3 px-4">4</td>
735
+ <td class="py-3 px-4 flex items-center">
736
+ <div class="bg-yellow-100 text-yellow-800 rounded-full w-8 h-8 flex items-center justify-center mr-2">
737
+ RB
738
+ </div>
739
+ Robert Brown
740
+ </td>
741
+ <td class="py-3 px-4">51</td>
742
+ <td class="py-3 px-4">80%</td>
743
+ <td class="py-3 px-4">1480</td>
744
+ </tr>
745
+ </tbody>
746
+ </table>
747
+ </div>
748
+ </div>
749
+ </div>
750
+ </div>
751
+ </div>
752
+ </div>
753
+ </div>
754
+ </div>
755
+ </main>
756
+
757
+ <!-- Footer -->
758
+ <footer class="bg-gray-800 text-white py-8 px-4">
759
+ <div class="container mx-auto">
760
+ <div class="grid md:grid-cols-4 gap-8">
761
+ <div>
762
+ <h3 class="text-xl font-bold mb-4">Cricket DRS</h3>
763
+ <p class="text-gray-400">Advanced LBW decision review system for cricket umpires and enthusiasts.</p>
764
+ </div>
765
+ <div>
766
+ <h4 class="font-bold mb-4">Quick Links</h4>
767
+ <ul class="space-y-2">
768
+ <li><a href="#home" class="text-gray-400 hover:text-white">Home</a></li>
769
+ <li><a href="#demo" class="text-gray-400 hover:text-white">Demo</a></li>
770
+ <li><a href="#features" class="text-gray-400 hover:text-white">Features</a></li>
771
+ <li><a href="#login" class="text-gray-400 hover:text-white">Login</a></li>
772
+ </ul>
773
+ </div>
774
+ <div>
775
+ <h4 class="font-bold mb-4">Support</h4>
776
+ <ul class="space-y-2">
777
+ <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li>
778
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li>
779
+ <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
780
+ <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>
781
+ </ul>
782
+ </div>
783
+ <div>
784
+ <h4 class="font-bold mb-4">Connect</h4>
785
+ <div class="flex space-x-4">
786
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
787
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
788
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
789
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a>
790
+ </div>
791
+ </div>
792
+ </div>
793
+ <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
794
+ <p>&copy; 2023 Cricket DRS. All rights reserved.</p>
795
+ </div>
796
+ </div>
797
+ </footer>
798
+
799
+ <script>
800
+ // Mobile menu toggle
801
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
802
+ const menu = document.getElementById('mobile-menu');
803
+ menu.classList.toggle('hidden');
804
+ });
805
+
806
+ // Sidebar toggle for mobile
807
+ document.getElementById('sidebar-toggle').addEventListener('click', function() {
808
+ const sidebar = document.querySelector('.sidebar');
809
+ sidebar.classList.toggle('-translate-x-full');
810
+ });
811
+
812
+ // Page navigation
813
+ function showPage(pageId) {
814
+ // Hide all pages
815
+ document.querySelectorAll('section[id$="-page"]').forEach(page => {
816
+ page.classList.add('hidden');
817
+ });
818
+ document.querySelector('main').classList.add('hidden');
819
+ document.querySelector('footer').classList.add('hidden');
820
+ document.getElementById('dashboard').classList.add('hidden');
821
+
822
+ // Show requested page
823
+ if (pageId === 'dashboard') {
824
+ document.getElementById('dashboard').classList.remove('hidden');
825
+ } else if (pageId === 'home') {
826
+ document.querySelector('main').classList.remove('hidden');
827
+ document.querySelector('footer').classList.remove('hidden');
828
+ } else {
829
+ document.getElementById(pageId + '-page').classList.remove('hidden');
830
+ }
831
+ }
832
+
833
+ // Link navigation
834
+ document.querySelectorAll('a[href^="#"]').forEach(link => {
835
+ link.addEventListener('click', function(e) {
836
+ e.preventDefault();
837
+ const pageId = this.getAttribute('href').substring(1);
838
+ showPage(pageId);
839
+ });
840
+ });
841
+
842
+ // Form submissions
843
+ document.getElementById('login-form').addEventListener('submit', function(e) {
844
+ e.preventDefault();
845
+ const email = document.getElementById('login-email').value;
846
+ const password = document.getElementById('login-password').value;
847
+
848
+ // Simple validation
849
+ if (!email || !password) {
850
+ alert('Please enter both email and password');
851
+ return;
852
+ }
853
+
854
+ // In a real app, you would authenticate here
855
+ showPage('dashboard');
856
+ });
857
+
858
+ document.getElementById('signup-form').addEventListener('submit', function(e) {
859
+ e.preventDefault();
860
+ const name = document.getElementById('signup-name').value;
861
+ const email = document.getElementById('signup-email').value;
862
+ const phone = document.getElementById('signup-phone').value;
863
+ const password = document.getElementById('signup-password').value;
864
+ const confirmPassword = document.getElementById('signup-confirm-password').value;
865
+ const terms = document.getElementById('terms').checked;
866
+
867
+ // Validation
868
+ if (!name || !email || !phone || !password || !confirmPassword) {
869
+ alert('Please fill in all fields');
870
+ return;
871
+ }
872
+
873
+ if (password !== confirmPassword) {
874
+ alert('Passwords do not match');
875
+ return;
876
+ }
877
+
878
+ if (!terms) {
879
+ alert('You must agree to the terms and conditions');
880
+ return;
881
+ }
882
+
883
+ // In a real app, you would create an account here
884
+ alert('Account created successfully! Please login.');
885
+ showPage('login');
886
+ });
887
+
888
+ document.getElementById('forgot-password-form').addEventListener('submit', function(e) {
889
+ e.preventDefault();
890
+ const email = document.getElementById('forgot-email').value;
891
+
892
+ if (!email) {
893
+ alert('Please enter your email address');
894
+ return;
895
+ }
896
+
897
+ // In a real app, you would send a reset link here
898
+ alert('Password reset link sent to your email!');
899
+ showPage('login');
900
+ });
901
+
902
+ // Logout
903
+ document.getElementById('logout-btn').addEventListener('click', function() {
904
+ showPage('home');
905
+ });
906
+
907
+ // Video upload and analysis
908
+ function setupVideoUpload(uploadBtnId, videoInputId, videoElementId, analyzeBtnId, replayBtnId) {
909
+ const uploadBtn = document.getElementById(uploadBtnId);
910
+ const videoInput = document.getElementById(videoInputId);
911
+ const videoElement = document.getElementById(videoElementId);
912
+ const analyzeBtn = document.getElementById(analyzeBtnId);
913
+ const replayBtn = document.getElementById(replayBtnId);
914
+
915
+ uploadBtn.addEventListener('click', function() {
916
+ videoInput.click();
917
+ });
918
+
919
+ videoInput.addEventListener('change', function(e) {
920
+ if (e.target.files.length) {
921
+ const file = e.target.files[0];
922
+ const videoURL = URL.createObjectURL(file);
923
+ videoElement.src = videoURL;
924
+ analyzeBtn.classList.remove('hidden');
925
+ }
926
+ });
927
+ }
928
+
929
+ // Setup for demo and dashboard video uploads
930
+ setupVideoUpload('upload-btn', 'video-upload', 'demo-video', 'analyze-btn', 'replay-btn');
931
+ setupVideoUpload('dashboard-upload-btn', 'dashboard-video-upload', 'dashboard-video', 'dashboard-analyze-btn', 'dashboard-replay-btn');
932
+
933
+ // Analyze buttons
934
+ document.getElementById('analyze-btn').addEventListener('click', analyzeLBW);
935
+ document.getElementById('dashboard-analyze-btn').addEventListener('click', analyzeLBW);
936
+
937
+ // Replay buttons
938
+ document.getElementById('replay-btn').addEventListener('click', replayBallTracking);
939
+ document.getElementById('dashboard-replay-btn').addEventListener('click', replayBallTracking);
940
+
941
+ // Track analysis results for replay
942
+ let currentAnalysis = null;
943
+ let currentPrefix = '';
944
+
945
+ function analyzeLBW() {
946
+ // Determine if this is demo or dashboard
947
+ currentPrefix = this.id === 'analyze-btn' ? '' : 'dashboard-';
948
+
949
+ // Mock analysis - in a real app this would call an API
950
+ const pitchingLocations = ["Outside off", "Middle stump", "Leg stump"];
951
+ const impactPoints = ["Outside off", "In line", "Pad first"];
952
+ const wicketHeights = ["Below", "Middle", "Top"];
953
+ const inLineOptions = ["No", "Yes"];
954
+
955
+ const pitching = pitchingLocations[Math.floor(Math.random() * pitchingLocations.length)];
956
+ const impact = impactPoints[Math.floor(Math.random() * impactPoints.length)];
957
+ const height = wicketHeights[Math.floor(Math.random() * wicketHeights.length)];
958
+ const inLine = inLineOptions[Math.floor(Math.random() * inLineOptions.length)];
959
+
960
+ // Update the display
961
+ document.getElementById(`${currentPrefix}pitching-location`).textContent = pitching;
962
+ document.getElementById(`${currentPrefix}impact-point`).textContent = impact;
963
+ document.getElementById(`${currentPrefix}wicket-height`).textContent = height;
964
+ document.getElementById(`${currentPrefix}in-line`).textContent = inLine;
965
+
966
+ // Store analysis for replay
967
+ currentAnalysis = {
968
+ pitching,
969
+ impact,
970
+ height,
971
+ inLine
972
+ };
973
+
974
+ // Show ball trajectory on pitch
975
+ const pitch = document.getElementById(`${currentPrefix}pitch-view`);
976
+ // Clear previous elements
977
+ const oldBall = pitch.querySelector('.ball');
978
+ if (oldBall) pitch.removeChild(oldBall);
979
+ const oldImpact = pitch.querySelector('.impact-zone');
980
+ if (oldImpact) pitch.removeChild(oldImpact);
981
+ const oldTrajectory = pitch.querySelector('.ball-trajectory');
982
+ if (oldTrajectory) pitch.removeChild(oldTrajectory);
983
+
984
+ // Determine ball positions based on analysis
985
+ let ballStartX, ballStartY, ballMidX, ballMidY, ballEndX, ballEndY;
986
+
987
+ if (pitching === "Outside off") {
988
+ ballStartX = 65 + Math.random() * 10;
989
+ } else if (pitching === "Middle stump") {
990
+ ballStartX = 45 + Math.random() * 10;
991
+ } else { // Leg stump
992
+ ballStartX = 25 + Math.random() * 10;
993
+ }
994
+ ballStartY = 80;
995
+
996
+ if (impact === "Outside off") {
997
+ ballMidX = 60 + Math.random() * 10;
998
+ } else if (impact === "In line") {
999
+ ballMidX = 45 + Math.random() * 10;
1000
+ } else { // Pad first
1001
+ ballMidX = 30 + Math.random() * 10;
1002
+ }
1003
+ ballMidY = 40;
1004
+
1005
+ ballEndX = 50;
1006
+ ballEndY = 0;
1007
+
1008
+ // Add ball trajectory line
1009
+ const trajectory = document.createElement('div');
1010
+ trajectory.className = 'ball-trajectory';
1011
+ trajectory.style.left = `${ballStartX}%`;
1012
+ trajectory.style.bottom = `${ballStartY}%`;
1013
+
1014
+ // Calculate angle and length of trajectory
1015
+ const dx = ballMidX - ballStartX;
1016
+ const dy = ballStartY - ballMidY;
1017
+ const length = Math.sqrt(dx * dx + dy * dy);
1018
+ const angle = Math.atan2(dy, dx) * 180 / Math.PI;
1019
+
1020
+ trajectory.style.width = `${length}%`;
1021
+ trajectory.style.transform = `rotate(${angle}deg)`;
1022
+ pitch.appendChild(trajectory);
1023
+
1024
+ // Add second trajectory line (mid to end)
1025
+ const trajectory2 = document.createElement('div');
1026
+ trajectory2.className = 'ball-trajectory';
1027
+ trajectory2.style.left = `${ballMidX}%`;
1028
+ trajectory2.style.bottom = `${ballMidY}%`;
1029
+
1030
+ const dx2 = ballEndX - ballMidX;
1031
+ const dy2 = ballMidY - ballEndY;
1032
+ const length2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
1033
+ const angle2 = Math.atan2(dy2, dx2) * 180 / Math.PI;
1034
+
1035
+ trajectory2.style.width = `${length2}%`;
1036
+ trajectory2.style.transform = `rotate(${angle2}deg)`;
1037
+ pitch.appendChild(trajectory2);
1038
+
1039
+ // Add ball element
1040
+ const ball = document.createElement('div');
1041
+ ball.className = 'ball';
1042
+ ball.style.left = `${ballStartX}%`;
1043
+ ball.style.bottom = `${ballStartY}%`;
1044
+ pitch.appendChild(ball);
1045
+
1046
+ // Add impact zone
1047
+ const impactZone = document.createElement('div');
1048
+ impactZone.className = 'impact-zone';
1049
+ impactZone.style.width = '40px';
1050
+ impactZone.style.height = '40px';
1051
+ impactZone.style.left = `${ballMidX}%`;
1052
+ impactZone.style.bottom = `${ballMidY}%`;
1053
+ pitch.appendChild(impactZone);
1054
+
1055
+ // Determine decision
1056
+ let decision, decisionClass;
1057
+ if ((impact === "Pad first" || impact === "In line") && inLine === "Yes" && height !== "Top") {
1058
+ decision = "OUT!";
1059
+ decisionClass = "bg-red-100 border-red-300 text-red-800";
1060
+ } else {
1061
+ decision = "NOT OUT";
1062
+ decisionClass = "bg-green-100 border-green-300 text-green-800";
1063
+ }
1064
+
1065
+ const decisionElement = document.getElementById(`${currentPrefix}decision-result`);
1066
+ decisionElement.className = `mt-4 p-4 rounded-lg border ${decisionClass}`;
1067
+ decisionElement.innerHTML = `
1068
+ <h4 class="font-bold text-lg text-center">Decision: ${decision}</h4>
1069
+ <p class="text-center mt-2">${decision === "OUT!" ? "The ball was hitting the stumps!" : "The ball was missing the stumps."}</p>
1070
+ `;
1071
+
1072
+ // Show replay button
1073
+ document.getElementById(`${currentPrefix}replay-btn`).classList.remove('hidden');
1074
+ }
1075
+
1076
+ function replayBallTracking() {
1077
+ const prefix = this.id === 'replay-btn' ? '' : 'dashboard-';
1078
+ const pitch = document.getElementById(`${prefix}pitch-view`);
1079
+
1080
+ // Clear previous ball
1081
+ const oldBall = pitch.querySelector('.ball');
1082
+ if (oldBall) pitch.removeChild(oldBall);
1083
+
1084
+ // Add new ball
1085
+ const ball = document.createElement('div');
1086
+ ball.className = 'ball';
1087
+ ball.style.left = '65%';
1088
+ ball.style.bottom = '80%';
1089
+ pitch.appendChild(ball);
1090
+
1091
+ // Animate the ball
1092
+ ball.style.transition = 'all 1s linear';
1093
+ setTimeout(() => {
1094
+ ball.style.left = '50%';
1095
+ ball.style.bottom = '40%';
1096
+ ball.style.transform = 'scale(1.2)';
1097
+
1098
+ setTimeout(() => {
1099
+ ball.style.left = '50%';
1100
+ ball.style.bottom = '0%';
1101
+ ball.style.transform = 'scale(1)';
1102
+ }, 1000);
1103
+ }, 100);
1104
+ }
1105
+
1106
+ // Tab switching in dashboard
1107
+ document.querySelectorAll('.tab-btn').forEach(btn => {
1108
+ btn.addEventListener('click', function() {
1109
+ // Remove active class from all tabs and buttons
1110
+ document.querySelectorAll('.tab-btn').forEach(b => {
1111
+ b.classList.remove('text-green-600', 'border-green-600');
1112
+ b.classList.add('text-gray-500');
1113
+ });
1114
+
1115
+ document.querySelectorAll('.tab-content').forEach(content => {
1116
+ content.classList.remove('active');
1117
+ });
1118
+
1119
+ // Add active class to clicked tab
1120
+ this.classList.remove('text-gray-500');
1121
+ this.classList.add('text-green-600', 'border-green-600');
1122
+
1123
+ const tabId = this.getAttribute('data-tab') + '-tab';
1124
+ document.getElementById(tabId).classList.add('active');
1125
+
1126
+ // Update dashboard title
1127
+ const titleMap = {
1128
+ 'upload': 'Upload Analysis',
1129
+ 'history': 'Match History',
1130
+ 'achievements': 'Achievements',
1131
+ 'leaderboard': 'Leaderboard'
1132
+ };
1133
+ document.getElementById('dashboard-title').textContent = titleMap[this.getAttribute('data-tab')];
1134
+ });
1135
+ });
1136
+
1137
+ // Show home page by default
1138
+ showPage('home');
1139
+ </script>
1140
+ <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=dschandra/drs" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1141
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ Build a mobile-friendly web application for a cricket Decision Review System (DRS) focused on LBW decisions. The app should be built with Next.js (React) and Tailwind CSS, and hosted on Vercel. The application must support user authentication, a video upload interface, decision analysis, and a full user dashboard. Here's the detailed functionality: 1. **Authentication**: - Signup Page: Fields for name, email, phone number, and password - Login Page: Email and password fields with "Forgot Password" link - Forgot Password: Email input → Sends reset link - Auth should redirect users properly after login/signup 2. **Homepage**: - Welcome message with a cricket-themed banner - Buttons: Login | Signup | Try Demo 3. **User Dashboard**: - Total Matches Played - Wins Count - LBW Decisions Taken - Success Rate (%) - Navigation Tabs: Upload Analysis, Match History, Achievements, Leaderboard 4. **Upload Analysis Page**: - Upload or record a video - Backend integration to analyze video (mock API for now) - Display results: - Pitching location - Impact point - Wicket zone height - Inline or not - Final LBW decision with explanation 5. **Leaderboard Page**: - List of users sorted by rank, wins, accuracy - Each entry shows: Name, Rank, Wins, Rewards, Avatar 6. **Achievements Tab**: - Badge system for milestones (e.g., 10 LBW outs, top 10 ranking, etc.) 7. **Tech Stack**: - Frontend: Next.js + Tailwind CSS - Backend: Vercel Serverless Functions (mock analysis API) - Auth: Firebase or NextAuth - DB: Firebase Firestore or Supabase for storing users, matches, and stats - Storage: Firebase Storage for uploaded videos 8. **Routing**: - `/login`, `/signup`, `/forgot-password`, `/dashboard`, `/upload`, `/leaderboard`, `/achievements` - Use protected routes for dashboard and internal pages 9. **UI**: - Mobile-first design - Use Tailwind components with card layouts, tabs, avatars - Clean and modern style with professional spacing and color scheme Deploy the app on Vercel with all routes and authentication flows connected.
2
+ still few changes are add side bar and signup page and login authentication required and also replay video is dispaly here with ball tracking position how ball is went to wicket and lbw out or not out