Spaces:
Sleeping
Sleeping
File size: 7,378 Bytes
358819e d316651 358819e d8d4264 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IPL AI Predictor | Live Match</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">
</head>
<body>
<nav class="navbar">
<div class="logo">
<span class="ai-glow">Predict</span>IPL
</div>
<div class="nav-center">
<select id="matchSelector" class="match-dropdown">
<option value="">Fetching Live Global Feeds...</option>
</select>
</div>
<ul class="nav-links">
<li><button id="refreshBtn" class="refresh-btn">🔄 Refresh Live State</button></li>
<li><a href="index.html" class="active">Live Prediction</a></li>
<li><a href="history.html">Match History</a></li>
</ul>
</nav>
<main class="dashboard">
<header class="match-header">
<div class="team" id="team1Text">--</div>
<div class="score-container">
<div id="matchStatusBadge" class="status-badge">FETCHING LIVE API DATA...</div>
<h1 id="liveScoreText" class="hidden">-- / --</h1>
<p id="liveOverText" class="hidden">-- Overs</p>
<div class="run-rate hidden" id="matchRunRateText">CRR: --</div>
</div>
<div class="team" id="team2Text">--</div>
<div id="apiStatus" class="api-status">API: CONNECTING</div>
</header>
<div class="grid-container">
<section class="context-panel panel">
<h3>Match Context</h3>
<div class="stats-row">
<span class="label">Match Subtitle</span>
<span class="value" id="matchSubtitle">Scanning...</span>
</div>
<div class="stats-row">
<span class="label" id="contextLabel1">-</span>
<span class="value" id="contextValue1">-</span>
</div>
<div class="stats-row">
<span class="label" id="contextLabel2">-</span>
<span class="value" id="contextValue2">-</span>
</div>
<hr>
<div class="stats-row">
<span class="label">Ground</span>
<span class="value" id="venueText">Predicting Database Venue...</span>
</div>
<div class="stats-row">
<span class="label">Pitch Condition</span>
<span class="value highlight" id="pitchText">Analysing AI Model...</span>
</div>
</section>
<section class="prediction-panel panel emphasis">
<div class="live-indicator">
<div class="pulse" id="pulseIndicator"></div>
<span id="predictionTitle">INITIALIZING MODEL NETWORK...</span>
</div>
<div id="livePredictorBox" class="prediction-box hidden">
<div id="predictionResult" class="result" style="width: 100%;">
<h3 class="upcoming-ball-badge">⚡ NEXT BALL PREDICTION ⚡</h3>
<div class="prediction-item">
<h4>Model's Expected Deliveries</h4>
<div class="split-predict">
<div class="half-pred">
<h3 class="" id="del1Out">...</h3>
<div class="prob-bar"><div class="fill cyan" id="del1ProbBar" style="width: 0%"></div></div>
<span class="prob-text" id="del1ProbText">--% Probability</span>
</div>
<div class="half-pred">
<h3 class="" id="del2Out">...</h3>
<div class="prob-bar"><div class="fill cyan" id="del2ProbBar" style="width: 0%"></div></div>
<span class="prob-text" id="del2ProbText">--% Probability</span>
</div>
</div>
</div>
<div class="prediction-item mt-2">
<h4>Batter's Counter Reaction</h4>
<h2 class="green-text" id="outcomeOut">...</h2>
<div class="prob-bar"><div class="fill green" id="outProbBar" style="width: 0%"></div></div>
<span class="prob-text" id="outProbText">--% Probability</span>
</div>
</div>
</div>
<div id="upcomingPredictorBox" class="prediction-box hidden">
<div class="result">
<div class="prediction-item">
<h4>AI Overall Match Winner Prediction</h4>
<h2 class="cyan-text" id="favoredTeamText">...</h2>
<div class="prob-bar"><div class="fill cyan" id="winProbBar" style="width: 0%"></div></div>
<span class="prob-text" id="winProbText">--% Win Probability</span>
</div>
<div class="prediction-item mt-2">
<h4>Key Deciding Variables</h4>
<div style="text-align: left; margin-top: 15px; color: var(--text-main); font-size: 1.1rem; line-height: 1.5;">
🏏 <span id="factor1">Calculating team head-to-head metrics...</span><br><br>
🏟️ <span id="factor2">Scanning stadium ground history...</span>
</div>
</div>
</div>
</div>
</section>
<section class="model-stats-panel panel">
<h3>Model Health</h3>
<div class="accuracy-circle">
<svg viewBox="0 0 36 36" class="circular-chart green">
<path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="circle" stroke-dasharray="87, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
<text x="18" y="20.35" class="percentage">94%</text>
</svg>
</div>
<p class="accuracy-desc">Current Dataset Confidence</p>
<div class="mini-stats">
<div class="mini-stat">
<span class="val">Live</span>
<span class="lbl">Hook State</span>
</div>
<div class="mini-stat">
<span class="val" id="modelLat">12ms</span>
<span class="lbl">Latency</span>
</div>
</div>
</section>
</div>
</main>
<script src="app.js"></script>
</body>
</html> |