|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Cricket DRS - LBW Decision System</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.cricket-pitch { |
|
|
background: linear-gradient(to right, #22c55e 20%, #166534 20%, #166534 80%, #22c55e 80%); |
|
|
position: relative; |
|
|
} |
|
|
.stumps { |
|
|
position: absolute; |
|
|
width: 2px; |
|
|
height: 28px; |
|
|
background: white; |
|
|
bottom: 0; |
|
|
} |
|
|
.ball { |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
background: #dc2626; |
|
|
border-radius: 50%; |
|
|
position: absolute; |
|
|
transition: all 0.5s linear; |
|
|
} |
|
|
.impact-zone { |
|
|
position: absolute; |
|
|
border: 2px dashed white; |
|
|
border-radius: 50%; |
|
|
} |
|
|
.tab-content { |
|
|
display: none; |
|
|
} |
|
|
.tab-content.active { |
|
|
display: block; |
|
|
} |
|
|
.video-container { |
|
|
position: relative; |
|
|
padding-bottom: 56.25%; |
|
|
height: 0; |
|
|
overflow: hidden; |
|
|
} |
|
|
.video-container video { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
} |
|
|
.auth-bg { |
|
|
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'); |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
} |
|
|
.auth-overlay { |
|
|
background: rgba(0, 0, 0, 0.7); |
|
|
} |
|
|
.sidebar { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.ball-trajectory { |
|
|
position: absolute; |
|
|
width: 4px; |
|
|
background: rgba(255, 255, 255, 0.7); |
|
|
transform-origin: bottom center; |
|
|
} |
|
|
@keyframes ballMove { |
|
|
0% { transform: translate(0, 0) scale(1); } |
|
|
50% { transform: translate(var(--tx), var(--ty)) scale(1.2); } |
|
|
100% { transform: translate(var(--tx2), var(--ty2)) scale(1); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 font-sans"> |
|
|
|
|
|
<nav class="bg-green-800 text-white shadow-lg"> |
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-cricket text-xl"></i> |
|
|
<span class="font-bold text-xl">Cricket DRS</span> |
|
|
</div> |
|
|
<div class="hidden md:flex space-x-6"> |
|
|
<a href="#home" class="hover:text-green-300">Home</a> |
|
|
<a href="#demo" class="hover:text-green-300">Demo</a> |
|
|
<a href="#features" class="hover:text-green-300">Features</a> |
|
|
<a href="#login" class="hover:text-green-300">Login</a> |
|
|
</div> |
|
|
<button class="md:hidden" id="mobile-menu-button"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="md:hidden hidden bg-green-700 px-4 py-2" id="mobile-menu"> |
|
|
<a href="#home" class="block py-2 hover:text-green-300">Home</a> |
|
|
<a href="#demo" class="block py-2 hover:text-green-300">Demo</a> |
|
|
<a href="#features" class="block py-2 hover:text-green-300">Features</a> |
|
|
<a href="#login" class="block py-2 hover:text-green-300">Login</a> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<main> |
|
|
|
|
|
<section id="home" class="py-16 px-4"> |
|
|
<div class="container mx-auto text-center"> |
|
|
<div class="max-w-4xl mx-auto bg-green-700 rounded-xl overflow-hidden shadow-2xl mb-12"> |
|
|
<div class="p-8 md:p-12 bg-gradient-to-r from-green-800 to-green-600 text-white"> |
|
|
<h1 class="text-3xl md:text-5xl font-bold mb-4">Cricket LBW Decision Review System</h1> |
|
|
<p class="text-xl mb-8">Make accurate LBW decisions with our advanced video analysis technology</p> |
|
|
<div class="flex flex-col md:flex-row justify-center gap-4"> |
|
|
<a href="#login" class="bg-white text-green-800 font-bold py-3 px-6 rounded-lg hover:bg-green-100 transition">Login</a> |
|
|
<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> |
|
|
<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> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8 mb-16"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-lg"> |
|
|
<div class="text-green-600 text-4xl mb-4"> |
|
|
<i class="fas fa-video"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Video Analysis</h3> |
|
|
<p>Upload match videos and get instant LBW decision analysis with ball tracking technology.</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-lg"> |
|
|
<div class="text-green-600 text-4xl mb-4"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Performance Stats</h3> |
|
|
<p>Track your decision accuracy over time and improve your umpiring skills.</p> |
|
|
</div> |
|
|
<div class="bg-white p-6 rounded-xl shadow-lg"> |
|
|
<div class="text-green-600 text-4xl mb-4"> |
|
|
<i class="fas fa-trophy"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">Leaderboards</h3> |
|
|
<p>Compete with other umpires and climb the rankings with accurate decisions.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="demo" class="py-16 px-4 bg-gray-200"> |
|
|
<div class="container mx-auto"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Try Our Demo</h2> |
|
|
|
|
|
<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-4">LBW Decision Analysis</h3> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-8"> |
|
|
<div> |
|
|
<div class="video-container mb-4 bg-black rounded-lg overflow-hidden"> |
|
|
<video id="demo-video" controls> |
|
|
<source src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4" type="video/mp4"> |
|
|
Your browser does not support the video tag. |
|
|
</video> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-center space-x-4 mb-6"> |
|
|
<button id="upload-btn" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700"> |
|
|
<i class="fas fa-upload mr-2"></i>Upload Video |
|
|
</button> |
|
|
<button id="record-btn" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700"> |
|
|
<i class="fas fa-video mr-2"></i>Record |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<input type="file" id="video-upload" accept="video/*" class="hidden"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="cricket-pitch h-64 w-full relative rounded-lg mb-4" id="pitch-view"> |
|
|
|
|
|
<div class="stumps" style="left: 50%; transform: translateX(-50%);"></div> |
|
|
<div class="stumps" style="left: calc(50% - 10px); transform: translateX(-50%);"></div> |
|
|
<div class="stumps" style="left: calc(50% + 10px); transform: translateX(-50%);"></div> |
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-100 p-4 rounded-lg"> |
|
|
<h4 class="font-bold mb-2">Decision Analysis</h4> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex justify-between"> |
|
|
<span>Pitching:</span> |
|
|
<span id="pitching-location" class="font-bold">-</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span>Impact:</span> |
|
|
<span id="impact-point" class="font-bold">-</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span>Wicket Height:</span> |
|
|
<span id="wicket-height" class="font-bold">-</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span>In Line:</span> |
|
|
<span id="in-line" class="font-bold">-</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4 p-4 rounded-lg bg-yellow-100 border border-yellow-300" id="decision-result"> |
|
|
<h4 class="font-bold text-lg text-center">Upload a video to analyze</h4> |
|
|
</div> |
|
|
|
|
|
<button id="analyze-btn" class="w-full bg-green-600 text-white py-3 rounded-lg mt-4 hover:bg-green-700 hidden"> |
|
|
Analyze LBW Decision |
|
|
</button> |
|
|
|
|
|
<button id="replay-btn" class="w-full bg-blue-600 text-white py-3 rounded-lg mt-4 hover:bg-blue-700 hidden"> |
|
|
<i class="fas fa-redo mr-2"></i>Replay Ball Tracking |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="features" class="py-16 px-4"> |
|
|
<div class="container mx-auto"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Key Features</h2> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-lg"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-green-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-bullseye text-green-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold">Ball Tracking</h3> |
|
|
</div> |
|
|
<p>Our advanced algorithms track the ball's trajectory with precision, showing pitching location, impact point, and predicted path.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-lg"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-blue-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-chart-pie text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold">Decision Analytics</h3> |
|
|
</div> |
|
|
<p>Get detailed statistics on your LBW decisions, including accuracy rates, common mistakes, and improvement suggestions.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-lg"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-yellow-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-trophy text-yellow-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold">Leaderboards</h3> |
|
|
</div> |
|
|
<p>Compete with other umpires and see how your decision accuracy compares in our global rankings.</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-lg"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="bg-purple-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-medal text-purple-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold">Achievements</h3> |
|
|
</div> |
|
|
<p>Earn badges and achievements for reaching milestones in your umpiring career.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="login-page" class="hidden py-16 px-4 auth-bg min-h-screen flex items-center justify-center"> |
|
|
<div class="auth-overlay absolute inset-0"></div> |
|
|
<div class="relative z-10 bg-white rounded-xl shadow-xl w-full max-w-md mx-4"> |
|
|
<div class="p-8"> |
|
|
<div class="text-center mb-8"> |
|
|
<i class="fas fa-cricket text-5xl text-green-600 mb-4"></i> |
|
|
<h2 class="text-3xl font-bold text-gray-800">Welcome Back</h2> |
|
|
<p class="text-gray-600">Sign in to your Cricket DRS account</p> |
|
|
</div> |
|
|
|
|
|
<form id="login-form" class="space-y-6"> |
|
|
<div> |
|
|
<label for="login-email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label> |
|
|
<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> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="login-password" class="block text-sm font-medium text-gray-700 mb-1">Password</label> |
|
|
<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> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="remember-me" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded"> |
|
|
<label for="remember-me" class="ml-2 block text-sm text-gray-700">Remember me</label> |
|
|
</div> |
|
|
<a href="#forgot-password" id="forgot-password-link" class="text-sm text-green-600 hover:text-green-800">Forgot password?</a> |
|
|
</div> |
|
|
|
|
|
<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"> |
|
|
Sign In |
|
|
</button> |
|
|
</form> |
|
|
|
|
|
<div class="mt-6 text-center"> |
|
|
<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> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="signup-page" class="hidden py-16 px-4 auth-bg min-h-screen flex items-center justify-center"> |
|
|
<div class="auth-overlay absolute inset-0"></div> |
|
|
<div class="relative z-10 bg-white rounded-xl shadow-xl w-full max-w-md mx-4"> |
|
|
<div class="p-8"> |
|
|
<div class="text-center mb-8"> |
|
|
<i class="fas fa-cricket text-5xl text-green-600 mb-4"></i> |
|
|
<h2 class="text-3xl font-bold text-gray-800">Create Account</h2> |
|
|
<p class="text-gray-600">Join Cricket DRS today</p> |
|
|
</div> |
|
|
|
|
|
<form id="signup-form" class="space-y-6"> |
|
|
<div> |
|
|
<label for="signup-name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label> |
|
|
<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> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="signup-email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label> |
|
|
<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> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="signup-phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label> |
|
|
<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> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="signup-password" class="block text-sm font-medium text-gray-700 mb-1">Password</label> |
|
|
<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> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="signup-confirm-password" class="block text-sm font-medium text-gray-700 mb-1">Confirm Password</label> |
|
|
<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> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="flex items-center h-5"> |
|
|
<input type="checkbox" id="terms" class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded" required> |
|
|
</div> |
|
|
<div class="ml-3 text-sm"> |
|
|
<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> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<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"> |
|
|
Create Account |
|
|
</button> |
|
|
</form> |
|
|
|
|
|
<div class="mt-6 text-center"> |
|
|
<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> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="forgot-password-page" class="hidden py-16 px-4 auth-bg min-h-screen flex items-center justify-center"> |
|
|
<div class="auth-overlay absolute inset-0"></div> |
|
|
<div class="relative z-10 bg-white rounded-xl shadow-xl w-full max-w-md mx-4"> |
|
|
<div class="p-8"> |
|
|
<div class="text-center mb-8"> |
|
|
<i class="fas fa-key text-5xl text-green-600 mb-4"></i> |
|
|
<h2 class="text-3xl font-bold text-gray-800">Reset Password</h2> |
|
|
<p class="text-gray-600">Enter your email to receive a reset link</p> |
|
|
</div> |
|
|
|
|
|
<form id="forgot-password-form" class="space-y-6"> |
|
|
<p class="text-sm text-gray-600">Enter your email address and we'll send you a link to reset your password.</p> |
|
|
|
|
|
<div> |
|
|
<label for="forgot-email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label> |
|
|
<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> |
|
|
</div> |
|
|
|
|
|
<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"> |
|
|
Send Reset Link |
|
|
</button> |
|
|
</form> |
|
|
|
|
|
<div class="mt-6 text-center"> |
|
|
<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> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div id="dashboard" class="hidden min-h-screen"> |
|
|
<div class="flex"> |
|
|
|
|
|
<div class="sidebar bg-green-800 text-white w-64 min-h-screen flex-shrink-0"> |
|
|
<div class="p-4 flex items-center space-x-2 border-b border-green-700"> |
|
|
<i class="fas fa-cricket text-xl"></i> |
|
|
<span class="font-bold text-xl">Cricket DRS</span> |
|
|
</div> |
|
|
|
|
|
<div class="p-4 flex items-center space-x-3 border-b border-green-700"> |
|
|
<div class="bg-green-100 text-green-800 rounded-full w-10 h-10 flex items-center justify-center font-bold"> |
|
|
JD |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">John Doe</p> |
|
|
<p class="text-xs text-green-200">Umpire Level: Intermediate</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<nav class="p-4 space-y-2"> |
|
|
<a href="#" class="block py-2 px-4 bg-green-700 rounded-lg flex items-center space-x-2"> |
|
|
<i class="fas fa-home"></i> |
|
|
<span>Dashboard</span> |
|
|
</a> |
|
|
<a href="#" class="block py-2 px-4 hover:bg-green-700 rounded-lg flex items-center space-x-2"> |
|
|
<i class="fas fa-upload"></i> |
|
|
<span>Upload Analysis</span> |
|
|
</a> |
|
|
<a href="#" class="block py-2 px-4 hover:bg-green-700 rounded-lg flex items-center space-x-2"> |
|
|
<i class="fas fa-history"></i> |
|
|
<span>Match History</span> |
|
|
</a> |
|
|
<a href="#" class="block py-2 px-4 hover:bg-green-700 rounded-lg flex items-center space-x-2"> |
|
|
<i class="fas fa-trophy"></i> |
|
|
<span>Achievements</span> |
|
|
</a> |
|
|
<a href="#" class="block py-2 px-4 hover:bg-green-700 rounded-lg flex items-center space-x-2"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
<span>Leaderboard</span> |
|
|
</a> |
|
|
<a href="#" class="block py-2 px-4 hover:bg-green-700 rounded-lg flex items-center space-x-2"> |
|
|
<i class="fas fa-cog"></i> |
|
|
<span>Settings</span> |
|
|
</a> |
|
|
</nav> |
|
|
|
|
|
<div class="p-4 border-t border-green-700 absolute bottom-0 w-64"> |
|
|
<button id="logout-btn" class="w-full py-2 px-4 hover:bg-green-700 rounded-lg flex items-center space-x-2"> |
|
|
<i class="fas fa-sign-out-alt"></i> |
|
|
<span>Logout</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1"> |
|
|
<div class="bg-white shadow"> |
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
|
|
<div> |
|
|
<h2 class="text-xl font-bold" id="dashboard-title">Upload Analysis</h2> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button id="sidebar-toggle" class="md:hidden text-gray-600"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
<div class="relative"> |
|
|
<button class="text-gray-600 hover:text-gray-900"> |
|
|
<i class="fas fa-bell text-xl"></i> |
|
|
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
<div class="grid md:grid-cols-4 gap-4 mb-8"> |
|
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
|
<p class="text-gray-500 text-sm">Matches</p> |
|
|
<p class="text-2xl font-bold">42</p> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
|
<p class="text-gray-500 text-sm">Wins</p> |
|
|
<p class="text-2xl font-bold">28</p> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
|
<p class="text-gray-500 text-sm">LBW Decisions</p> |
|
|
<p class="text-2xl font-bold">76</p> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-lg shadow"> |
|
|
<p class="text-gray-500 text-sm">Accuracy</p> |
|
|
<p class="text-2xl font-bold">82%</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden"> |
|
|
<div class="flex border-b"> |
|
|
<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> |
|
|
<button class="tab-btn py-4 px-6 font-medium text-gray-500 hover:text-gray-700" data-tab="history">Match History</button> |
|
|
<button class="tab-btn py-4 px-6 font-medium text-gray-500 hover:text-gray-700" data-tab="achievements">Achievements</button> |
|
|
<button class="tab-btn py-4 px-6 font-medium text-gray-500 hover:text-gray-700" data-tab="leaderboard">Leaderboard</button> |
|
|
</div> |
|
|
|
|
|
<div class="p-6"> |
|
|
|
|
|
<div id="upload-tab" class="tab-content active"> |
|
|
<h3 class="text-xl font-bold mb-4">LBW Decision Analysis</h3> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-8"> |
|
|
<div> |
|
|
<div class="video-container mb-4 bg-black rounded-lg overflow-hidden"> |
|
|
<video id="dashboard-video" controls> |
|
|
<source src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4" type="video/mp4"> |
|
|
Your browser does not support the video tag. |
|
|
</video> |
|
|
</div> |
|
|
|
|
|
<div class="flex justify-center space-x-4 mb-6"> |
|
|
<button id="dashboard-upload-btn" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700"> |
|
|
<i class="fas fa-upload mr-2"></i>Upload Video |
|
|
</button> |
|
|
<button id="dashboard-record-btn" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700"> |
|
|
<i class="fas fa-video mr-2"></i>Record |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<input type="file" id="dashboard-video-upload" accept="video/*" class="hidden"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<div class="cricket-pitch h-64 w-full relative rounded-lg mb-4" id="dashboard-pitch-view"> |
|
|
|
|
|
<div class="stumps" style="left: 50%; transform: translateX(-50%);"></div> |
|
|
<div class="stumps" style="left: calc(50% - 10px); transform: translateX(-50%);"></div> |
|
|
<div class="stumps" style="left: calc(50% + 10px); transform: translateX(-50%);"></div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-100 p-4 rounded-lg"> |
|
|
<h4 class="font-bold mb-2">Decision Analysis</h4> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex justify-between"> |
|
|
<span>Pitching:</span> |
|
|
<span id="dashboard-pitching-location" class="font-bold">-</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span>Impact:</span> |
|
|
<span id="dashboard-impact-point" class="font-bold">-</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span>Wicket Height:</span> |
|
|
<span id="dashboard-wicket-height" class="font-bold">-</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span>In Line:</span> |
|
|
<span id="dashboard-in-line" class="font-bold">-</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4 p-4 rounded-lg bg-yellow-100 border border-yellow-300" id="dashboard-decision-result"> |
|
|
<h4 class="font-bold text-lg text-center">Upload a video to analyze</h4> |
|
|
</div> |
|
|
|
|
|
<button id="dashboard-analyze-btn" class="w-full bg-green-600 text-white py-3 rounded-lg mt-4 hover:bg-green-700 hidden"> |
|
|
Analyze LBW Decision |
|
|
</button> |
|
|
|
|
|
<button id="dashboard-replay-btn" class="w-full bg-blue-600 text-white py-3 rounded-lg mt-4 hover:bg-blue-700 hidden"> |
|
|
<i class="fas fa-redo mr-2"></i>Replay Ball Tracking |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="history-tab" class="tab-content"> |
|
|
<h3 class="text-xl font-bold mb-4">Match History</h3> |
|
|
|
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full bg-white"> |
|
|
<thead> |
|
|
<tr class="bg-gray-100"> |
|
|
<th class="py-3 px-4 text-left">Date</th> |
|
|
<th class="py-3 px-4 text-left">Teams</th> |
|
|
<th class="py-3 px-4 text-left">LBW Decisions</th> |
|
|
<th class="py-3 px-4 text-left">Accuracy</th> |
|
|
<th class="py-3 px-4 text-left">Result</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody> |
|
|
<tr class="border-b hover:bg-gray-50 cursor-pointer"> |
|
|
<td class="py-3 px-4">2023-06-15</td> |
|
|
<td class="py-3 px-4">Team A vs Team B</td> |
|
|
<td class="py-3 px-4">3</td> |
|
|
<td class="py-3 px-4">100%</td> |
|
|
<td class="py-3 px-4"><span class="bg-green-100 text-green-800 px-2 py-1 rounded">Win</span></td> |
|
|
</tr> |
|
|
<tr class="border-b hover:bg-gray-50 cursor-pointer"> |
|
|
<td class="py-3 px-4">2023-06-10</td> |
|
|
<td class="py-3 px-4">Team C vs Team D</td> |
|
|
<td class="py-3 px-4">2</td> |
|
|
<td class="py-3 px-4">50%</td> |
|
|
<td class="py-3 px-4"><span class="bg-red-100 text-red-800 px-2 py-1 rounded">Loss</span></td> |
|
|
</tr> |
|
|
<tr class="border-b hover:bg-gray-50 cursor-pointer"> |
|
|
<td class="py-3 px-4">2023-06-05</td> |
|
|
<td class="py-3 px-4">Team E vs Team F</td> |
|
|
<td class="py-3 px-4">4</td> |
|
|
<td class="py-3 px-4">75%</td> |
|
|
<td class="py-3 px-4"><span class="bg-green-100 text-green-800 px-2 py-1 rounded">Win</span></td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="achievements-tab" class="tab-content"> |
|
|
<h3 class="text-xl font-bold mb-4">Your Achievements</h3> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-6"> |
|
|
<div class="bg-white border border-yellow-300 rounded-lg p-4 flex items-center"> |
|
|
<div class="bg-yellow-100 text-yellow-600 rounded-full w-12 h-12 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-medal text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">First Decision</h4> |
|
|
<p class="text-sm text-gray-600">Made your first LBW decision</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white border border-yellow-300 rounded-lg p-4 flex items-center"> |
|
|
<div class="bg-yellow-100 text-yellow-600 rounded-full w-12 h-12 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-trophy text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Perfect Match</h4> |
|
|
<p class="text-sm text-gray-600">100% accuracy in a match</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white border border-gray-200 rounded-lg p-4 flex items-center opacity-50"> |
|
|
<div class="bg-gray-100 text-gray-400 rounded-full w-12 h-12 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-star text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Top 10</h4> |
|
|
<p class="text-sm text-gray-400">Reach top 10 in leaderboard</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white border border-yellow-300 rounded-lg p-4 flex items-center"> |
|
|
<div class="bg-yellow-100 text-yellow-600 rounded-full w-12 h-12 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-award text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">10 LBW Outs</h4> |
|
|
<p class="text-sm text-gray-600">Correctly called 10 LBW outs</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white border border-gray-200 rounded-lg p-4 flex items-center opacity-50"> |
|
|
<div class="bg-gray-100 text-gray-400 rounded-full w-12 h-12 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-crown text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold">Master Umpire</h4> |
|
|
<p class="text-sm text-gray-400">Achieve 90%+ accuracy in 50 matches</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="leaderboard-tab" class="tab-content"> |
|
|
<h3 class="text-xl font-bold mb-4">Umpire Leaderboard</h3> |
|
|
|
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full bg-white"> |
|
|
<thead> |
|
|
<tr class="bg-gray-100"> |
|
|
<th class="py-3 px-4 text-left">Rank</th> |
|
|
<th class="py-3 px-4 text-left">Umpire</th> |
|
|
<th class="py-3 px-4 text-left">Matches</th> |
|
|
<th class="py-3 px-4 text-left">Accuracy</th> |
|
|
<th class="py-3 px-4 text-left">Points</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody> |
|
|
<tr class="border-b hover:bg-gray-50"> |
|
|
<td class="py-3 px-4 font-bold">1</td> |
|
|
<td class="py-3 px-4 flex items-center"> |
|
|
<div class="bg-purple-100 text-purple-800 rounded-full w-8 h-8 flex items-center justify-center mr-2"> |
|
|
AM |
|
|
</div> |
|
|
Alex Morgan |
|
|
</td> |
|
|
<td class="py-3 px-4">68</td> |
|
|
<td class="py-3 px-4">92%</td> |
|
|
<td class="py-3 px-4">1850</td> |
|
|
</tr> |
|
|
<tr class="border-b hover:bg-gray-50"> |
|
|
<td class="py-3 px-4 font-bold">2</td> |
|
|
<td class="py-3 px-4 flex items-center"> |
|
|
<div class="bg-blue-100 text-blue-800 rounded-full w-8 h-8 flex items-center justify-center mr-2"> |
|
|
SJ |
|
|
</div> |
|
|
Sarah Johnson |
|
|
</td> |
|
|
<td class="py-3 px-4">59</td> |
|
|
<td class="py-3 px-4">90%</td> |
|
|
<td class="py-3 px-4">1780</td> |
|
|
</tr> |
|
|
<tr class="border-b hover:bg-gray-50 bg-green-50"> |
|
|
<td class="py-3 px-4 font-bold">3</td> |
|
|
<td class="py-3 px-4 flex items-center"> |
|
|
<div class="bg-green-100 text-green-800 rounded-full w-8 h-8 flex items-center justify-center mr-2"> |
|
|
JD |
|
|
</div> |
|
|
John Doe |
|
|
</td> |
|
|
<td class="py-3 px-4">42</td> |
|
|
<td class="py-3 px-4">82%</td> |
|
|
<td class="py-3 px-4">1520</td> |
|
|
</tr> |
|
|
<tr class="border-b hover:bg-gray-50"> |
|
|
<td class="py-3 px-4">4</td> |
|
|
<td class="py-3 px-4 flex items-center"> |
|
|
<div class="bg-yellow-100 text-yellow-800 rounded-full w-8 h-8 flex items-center justify-center mr-2"> |
|
|
RB |
|
|
</div> |
|
|
Robert Brown |
|
|
</td> |
|
|
<td class="py-3 px-4">51</td> |
|
|
<td class="py-3 px-4">80%</td> |
|
|
<td class="py-3 px-4">1480</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800 text-white py-8 px-4"> |
|
|
<div class="container mx-auto"> |
|
|
<div class="grid md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4">Cricket DRS</h3> |
|
|
<p class="text-gray-400">Advanced LBW decision review system for cricket umpires and enthusiasts.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Quick Links</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#home" class="text-gray-400 hover:text-white">Home</a></li> |
|
|
<li><a href="#demo" class="text-gray-400 hover:text-white">Demo</a></li> |
|
|
<li><a href="#features" class="text-gray-400 hover:text-white">Features</a></li> |
|
|
<li><a href="#login" class="text-gray-400 hover:text-white">Login</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Support</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Connect</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400"> |
|
|
<p>© 2023 Cricket DRS. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobile-menu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('sidebar-toggle').addEventListener('click', function() { |
|
|
const sidebar = document.querySelector('.sidebar'); |
|
|
sidebar.classList.toggle('-translate-x-full'); |
|
|
}); |
|
|
|
|
|
|
|
|
function showPage(pageId) { |
|
|
|
|
|
document.querySelectorAll('section[id$="-page"]').forEach(page => { |
|
|
page.classList.add('hidden'); |
|
|
}); |
|
|
document.querySelector('main').classList.add('hidden'); |
|
|
document.querySelector('footer').classList.add('hidden'); |
|
|
document.getElementById('dashboard').classList.add('hidden'); |
|
|
|
|
|
|
|
|
if (pageId === 'dashboard') { |
|
|
document.getElementById('dashboard').classList.remove('hidden'); |
|
|
} else if (pageId === 'home') { |
|
|
document.querySelector('main').classList.remove('hidden'); |
|
|
document.querySelector('footer').classList.remove('hidden'); |
|
|
} else { |
|
|
document.getElementById(pageId + '-page').classList.remove('hidden'); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(link => { |
|
|
link.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
const pageId = this.getAttribute('href').substring(1); |
|
|
showPage(pageId); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('login-form').addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
const email = document.getElementById('login-email').value; |
|
|
const password = document.getElementById('login-password').value; |
|
|
|
|
|
|
|
|
if (!email || !password) { |
|
|
alert('Please enter both email and password'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
showPage('dashboard'); |
|
|
}); |
|
|
|
|
|
document.getElementById('signup-form').addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
const name = document.getElementById('signup-name').value; |
|
|
const email = document.getElementById('signup-email').value; |
|
|
const phone = document.getElementById('signup-phone').value; |
|
|
const password = document.getElementById('signup-password').value; |
|
|
const confirmPassword = document.getElementById('signup-confirm-password').value; |
|
|
const terms = document.getElementById('terms').checked; |
|
|
|
|
|
|
|
|
if (!name || !email || !phone || !password || !confirmPassword) { |
|
|
alert('Please fill in all fields'); |
|
|
return; |
|
|
} |
|
|
|
|
|
if (password !== confirmPassword) { |
|
|
alert('Passwords do not match'); |
|
|
return; |
|
|
} |
|
|
|
|
|
if (!terms) { |
|
|
alert('You must agree to the terms and conditions'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
alert('Account created successfully! Please login.'); |
|
|
showPage('login'); |
|
|
}); |
|
|
|
|
|
document.getElementById('forgot-password-form').addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
const email = document.getElementById('forgot-email').value; |
|
|
|
|
|
if (!email) { |
|
|
alert('Please enter your email address'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
alert('Password reset link sent to your email!'); |
|
|
showPage('login'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('logout-btn').addEventListener('click', function() { |
|
|
showPage('home'); |
|
|
}); |
|
|
|
|
|
|
|
|
function setupVideoUpload(uploadBtnId, videoInputId, videoElementId, analyzeBtnId, replayBtnId) { |
|
|
const uploadBtn = document.getElementById(uploadBtnId); |
|
|
const videoInput = document.getElementById(videoInputId); |
|
|
const videoElement = document.getElementById(videoElementId); |
|
|
const analyzeBtn = document.getElementById(analyzeBtnId); |
|
|
const replayBtn = document.getElementById(replayBtnId); |
|
|
|
|
|
uploadBtn.addEventListener('click', function() { |
|
|
videoInput.click(); |
|
|
}); |
|
|
|
|
|
videoInput.addEventListener('change', function(e) { |
|
|
if (e.target.files.length) { |
|
|
const file = e.target.files[0]; |
|
|
const videoURL = URL.createObjectURL(file); |
|
|
videoElement.src = videoURL; |
|
|
analyzeBtn.classList.remove('hidden'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
setupVideoUpload('upload-btn', 'video-upload', 'demo-video', 'analyze-btn', 'replay-btn'); |
|
|
setupVideoUpload('dashboard-upload-btn', 'dashboard-video-upload', 'dashboard-video', 'dashboard-analyze-btn', 'dashboard-replay-btn'); |
|
|
|
|
|
|
|
|
document.getElementById('analyze-btn').addEventListener('click', analyzeLBW); |
|
|
document.getElementById('dashboard-analyze-btn').addEventListener('click', analyzeLBW); |
|
|
|
|
|
|
|
|
document.getElementById('replay-btn').addEventListener('click', replayBallTracking); |
|
|
document.getElementById('dashboard-replay-btn').addEventListener('click', replayBallTracking); |
|
|
|
|
|
|
|
|
let currentAnalysis = null; |
|
|
let currentPrefix = ''; |
|
|
|
|
|
function analyzeLBW() { |
|
|
|
|
|
currentPrefix = this.id === 'analyze-btn' ? '' : 'dashboard-'; |
|
|
|
|
|
|
|
|
const pitchingLocations = ["Outside off", "Middle stump", "Leg stump"]; |
|
|
const impactPoints = ["Outside off", "In line", "Pad first"]; |
|
|
const wicketHeights = ["Below", "Middle", "Top"]; |
|
|
const inLineOptions = ["No", "Yes"]; |
|
|
|
|
|
const pitching = pitchingLocations[Math.floor(Math.random() * pitchingLocations.length)]; |
|
|
const impact = impactPoints[Math.floor(Math.random() * impactPoints.length)]; |
|
|
const height = wicketHeights[Math.floor(Math.random() * wicketHeights.length)]; |
|
|
const inLine = inLineOptions[Math.floor(Math.random() * inLineOptions.length)]; |
|
|
|
|
|
|
|
|
document.getElementById(`${currentPrefix}pitching-location`).textContent = pitching; |
|
|
document.getElementById(`${currentPrefix}impact-point`).textContent = impact; |
|
|
document.getElementById(`${currentPrefix}wicket-height`).textContent = height; |
|
|
document.getElementById(`${currentPrefix}in-line`).textContent = inLine; |
|
|
|
|
|
|
|
|
currentAnalysis = { |
|
|
pitching, |
|
|
impact, |
|
|
height, |
|
|
inLine |
|
|
}; |
|
|
|
|
|
|
|
|
const pitch = document.getElementById(`${currentPrefix}pitch-view`); |
|
|
|
|
|
const oldBall = pitch.querySelector('.ball'); |
|
|
if (oldBall) pitch.removeChild(oldBall); |
|
|
const oldImpact = pitch.querySelector('.impact-zone'); |
|
|
if (oldImpact) pitch.removeChild(oldImpact); |
|
|
const oldTrajectory = pitch.querySelector('.ball-trajectory'); |
|
|
if (oldTrajectory) pitch.removeChild(oldTrajectory); |
|
|
|
|
|
|
|
|
let ballStartX, ballStartY, ballMidX, ballMidY, ballEndX, ballEndY; |
|
|
|
|
|
if (pitching === "Outside off") { |
|
|
ballStartX = 65 + Math.random() * 10; |
|
|
} else if (pitching === "Middle stump") { |
|
|
ballStartX = 45 + Math.random() * 10; |
|
|
} else { |
|
|
ballStartX = 25 + Math.random() * 10; |
|
|
} |
|
|
ballStartY = 80; |
|
|
|
|
|
if (impact === "Outside off") { |
|
|
ballMidX = 60 + Math.random() * 10; |
|
|
} else if (impact === "In line") { |
|
|
ballMidX = 45 + Math.random() * 10; |
|
|
} else { |
|
|
ballMidX = 30 + Math.random() * 10; |
|
|
} |
|
|
ballMidY = 40; |
|
|
|
|
|
ballEndX = 50; |
|
|
ballEndY = 0; |
|
|
|
|
|
|
|
|
const trajectory = document.createElement('div'); |
|
|
trajectory.className = 'ball-trajectory'; |
|
|
trajectory.style.left = `${ballStartX}%`; |
|
|
trajectory.style.bottom = `${ballStartY}%`; |
|
|
|
|
|
|
|
|
const dx = ballMidX - ballStartX; |
|
|
const dy = ballStartY - ballMidY; |
|
|
const length = Math.sqrt(dx * dx + dy * dy); |
|
|
const angle = Math.atan2(dy, dx) * 180 / Math.PI; |
|
|
|
|
|
trajectory.style.width = `${length}%`; |
|
|
trajectory.style.transform = `rotate(${angle}deg)`; |
|
|
pitch.appendChild(trajectory); |
|
|
|
|
|
|
|
|
const trajectory2 = document.createElement('div'); |
|
|
trajectory2.className = 'ball-trajectory'; |
|
|
trajectory2.style.left = `${ballMidX}%`; |
|
|
trajectory2.style.bottom = `${ballMidY}%`; |
|
|
|
|
|
const dx2 = ballEndX - ballMidX; |
|
|
const dy2 = ballMidY - ballEndY; |
|
|
const length2 = Math.sqrt(dx2 * dx2 + dy2 * dy2); |
|
|
const angle2 = Math.atan2(dy2, dx2) * 180 / Math.PI; |
|
|
|
|
|
trajectory2.style.width = `${length2}%`; |
|
|
trajectory2.style.transform = `rotate(${angle2}deg)`; |
|
|
pitch.appendChild(trajectory2); |
|
|
|
|
|
|
|
|
const ball = document.createElement('div'); |
|
|
ball.className = 'ball'; |
|
|
ball.style.left = `${ballStartX}%`; |
|
|
ball.style.bottom = `${ballStartY}%`; |
|
|
pitch.appendChild(ball); |
|
|
|
|
|
|
|
|
const impactZone = document.createElement('div'); |
|
|
impactZone.className = 'impact-zone'; |
|
|
impactZone.style.width = '40px'; |
|
|
impactZone.style.height = '40px'; |
|
|
impactZone.style.left = `${ballMidX}%`; |
|
|
impactZone.style.bottom = `${ballMidY}%`; |
|
|
pitch.appendChild(impactZone); |
|
|
|
|
|
|
|
|
let decision, decisionClass; |
|
|
if ((impact === "Pad first" || impact === "In line") && inLine === "Yes" && height !== "Top") { |
|
|
decision = "OUT!"; |
|
|
decisionClass = "bg-red-100 border-red-300 text-red-800"; |
|
|
} else { |
|
|
decision = "NOT OUT"; |
|
|
decisionClass = "bg-green-100 border-green-300 text-green-800"; |
|
|
} |
|
|
|
|
|
const decisionElement = document.getElementById(`${currentPrefix}decision-result`); |
|
|
decisionElement.className = `mt-4 p-4 rounded-lg border ${decisionClass}`; |
|
|
decisionElement.innerHTML = ` |
|
|
<h4 class="font-bold text-lg text-center">Decision: ${decision}</h4> |
|
|
<p class="text-center mt-2">${decision === "OUT!" ? "The ball was hitting the stumps!" : "The ball was missing the stumps."}</p> |
|
|
`; |
|
|
|
|
|
|
|
|
document.getElementById(`${currentPrefix}replay-btn`).classList.remove('hidden'); |
|
|
} |
|
|
|
|
|
function replayBallTracking() { |
|
|
const prefix = this.id === 'replay-btn' ? '' : 'dashboard-'; |
|
|
const pitch = document.getElementById(`${prefix}pitch-view`); |
|
|
|
|
|
|
|
|
const oldBall = pitch.querySelector('.ball'); |
|
|
if (oldBall) pitch.removeChild(oldBall); |
|
|
|
|
|
|
|
|
const ball = document.createElement('div'); |
|
|
ball.className = 'ball'; |
|
|
ball.style.left = '65%'; |
|
|
ball.style.bottom = '80%'; |
|
|
pitch.appendChild(ball); |
|
|
|
|
|
|
|
|
ball.style.transition = 'all 1s linear'; |
|
|
setTimeout(() => { |
|
|
ball.style.left = '50%'; |
|
|
ball.style.bottom = '40%'; |
|
|
ball.style.transform = 'scale(1.2)'; |
|
|
|
|
|
setTimeout(() => { |
|
|
ball.style.left = '50%'; |
|
|
ball.style.bottom = '0%'; |
|
|
ball.style.transform = 'scale(1)'; |
|
|
}, 1000); |
|
|
}, 100); |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('.tab-btn').forEach(btn => { |
|
|
btn.addEventListener('click', function() { |
|
|
|
|
|
document.querySelectorAll('.tab-btn').forEach(b => { |
|
|
b.classList.remove('text-green-600', 'border-green-600'); |
|
|
b.classList.add('text-gray-500'); |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('.tab-content').forEach(content => { |
|
|
content.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
this.classList.remove('text-gray-500'); |
|
|
this.classList.add('text-green-600', 'border-green-600'); |
|
|
|
|
|
const tabId = this.getAttribute('data-tab') + '-tab'; |
|
|
document.getElementById(tabId).classList.add('active'); |
|
|
|
|
|
|
|
|
const titleMap = { |
|
|
'upload': 'Upload Analysis', |
|
|
'history': 'Match History', |
|
|
'achievements': 'Achievements', |
|
|
'leaderboard': 'Leaderboard' |
|
|
}; |
|
|
document.getElementById('dashboard-title').textContent = titleMap[this.getAttribute('data-tab')]; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
showPage('home'); |
|
|
</script> |
|
|
<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> |
|
|
</html> |
