Hugging Face's logo

Spaces:
DSatishchandra
/
drs
Running

App Files Community
drs / index.html
dschandra's picture
dschandra
Add 3 files
c702374 verified
raw
history blame contribute delete
66.9 kB
 <!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">
<!-- Navigation -->
<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>
<!-- Mobile menu -->
<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 Content -->
<main>
<!-- Homepage -->
<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>
<!-- Demo 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">
<!-- Stumps -->
<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>
<!-- Ball trajectory will be added by JS -->
</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>
<!-- Features 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>
<!-- Login Page -->
<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="your@email.com" 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>
<!-- Signup Page -->
<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="your@email.com" 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>
<!-- Forgot Password Page -->
<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="your@email.com" 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>
<!-- Dashboard (shown after login) -->
<div id="dashboard" class="hidden min-h-screen">
<div class="flex">
<!-- Sidebar -->
<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>
<!-- Main Content -->
<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">
<!-- Upload Analysis Tab -->
<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">
<!-- Stumps -->
<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>
<!-- Match History Tab -->
<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>
<!-- Achievements Tab -->
<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>
<!-- Leaderboard Tab -->
<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 -->
<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>&copy; 2023 Cricket DRS. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
// Sidebar toggle for mobile
document.getElementById('sidebar-toggle').addEventListener('click', function() {
const sidebar = document.querySelector('.sidebar');
sidebar.classList.toggle('-translate-x-full');
});
// Page navigation
function showPage(pageId) {
// Hide all pages
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');
// Show requested page
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');
}
}
// Link navigation
document.querySelectorAll('a[href^="#"]').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const pageId = this.getAttribute('href').substring(1);
showPage(pageId);
});
});
// Form submissions
document.getElementById('login-form').addEventListener('submit', function(e) {
e.preventDefault();
const email = document.getElementById('login-email').value;
const password = document.getElementById('login-password').value;
// Simple validation
if (!email || !password) {
alert('Please enter both email and password');
return;
}
// In a real app, you would authenticate here
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;
// Validation
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;
}
// In a real app, you would create an account here
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;
}
// In a real app, you would send a reset link here
alert('Password reset link sent to your email!');
showPage('login');
});
// Logout
document.getElementById('logout-btn').addEventListener('click', function() {
showPage('home');
});
// Video upload and analysis
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');
}
});
}
// Setup for demo and dashboard video uploads
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');
// Analyze buttons
document.getElementById('analyze-btn').addEventListener('click', analyzeLBW);
document.getElementById('dashboard-analyze-btn').addEventListener('click', analyzeLBW);
// Replay buttons
document.getElementById('replay-btn').addEventListener('click', replayBallTracking);
document.getElementById('dashboard-replay-btn').addEventListener('click', replayBallTracking);
// Track analysis results for replay
let currentAnalysis = null;
let currentPrefix = '';
function analyzeLBW() {
// Determine if this is demo or dashboard
currentPrefix = this.id === 'analyze-btn' ? '' : 'dashboard-';
// Mock analysis - in a real app this would call an API
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)];
// Update the display
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;
// Store analysis for replay
currentAnalysis = {
pitching,
impact,
height,
inLine
};
// Show ball trajectory on pitch
const pitch = document.getElementById(`${currentPrefix}pitch-view`);
// Clear previous elements
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);
// Determine ball positions based on analysis
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 { // Leg stump
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 { // Pad first
ballMidX = 30 + Math.random() * 10;
}
ballMidY = 40;
ballEndX = 50;
ballEndY = 0;
// Add ball trajectory line
const trajectory = document.createElement('div');
trajectory.className = 'ball-trajectory';
trajectory.style.left = `${ballStartX}%`;
trajectory.style.bottom = `${ballStartY}%`;
// Calculate angle and length of trajectory
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);
// Add second trajectory line (mid to end)
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);
// Add ball element
const ball = document.createElement('div');
ball.className = 'ball';
ball.style.left = `${ballStartX}%`;
ball.style.bottom = `${ballStartY}%`;
pitch.appendChild(ball);
// Add impact zone
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);
// Determine decision
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>
`;
// Show replay button
document.getElementById(`${currentPrefix}replay-btn`).classList.remove('hidden');
}
function replayBallTracking() {
const prefix = this.id === 'replay-btn' ? '' : 'dashboard-';
const pitch = document.getElementById(`${prefix}pitch-view`);
// Clear previous ball
const oldBall = pitch.querySelector('.ball');
if (oldBall) pitch.removeChild(oldBall);
// Add new ball
const ball = document.createElement('div');
ball.className = 'ball';
ball.style.left = '65%';
ball.style.bottom = '80%';
pitch.appendChild(ball);
// Animate the 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);
}
// Tab switching in dashboard
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.addEventListener('click', function() {
// Remove active class from all tabs and buttons
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');
});
// Add active class to clicked tab
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');
// Update dashboard title
const titleMap = {
'upload': 'Upload Analysis',
'history': 'Match History',
'achievements': 'Achievements',
'leaderboard': 'Leaderboard'
};
document.getElementById('dashboard-title').textContent = titleMap[this.getAttribute('data-tab')];
});
});
// Show home page by default
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>