Spaces:
Sleeping
Sleeping
| <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> |