Jhatin/Cricket
0
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>IPL-Style Cricket Scorecard</title>
7 <link rel="stylesheet" href="styles.css">
8 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
9</head>
10<body>
11 <header>
12 <h1>Cricket Scorecard</h1>
13 <nav>
14 <button onclick="showSection('player-management')" class="nav-btn">Add Players</button>
15 <button onclick="showSection('match')" class="nav-btn">Start Match</button>
16 <button onclick="showSection('dashboard')" class="nav-btn">Dashboard</button>
17 </nav>
18 </header>
19
20 <main>
21 <section id="player-management" class="card">
22 <h2>Add Players</h2>
23 <div class="input-group">
24 <input type="text" id="player-name" placeholder="Enter Player Name">
25 <button onclick="addPlayer()" class="btn-primary">Add Player</button>
26 </div>
27 <ul id="player-list" class="player-list"></ul>
28 </section>
29
30 <section id="match" class="card" style="display: none;">
31 <h2>Start Match (2 Overs)</h2>
32 <div class="selection">
33 <select id="batsman-select"><option value="">Select Batsman</option></select>
34 <select id="bowler1-select"><option value="">Select Bowler 1</option></select>
35 <select id="bowler2-select"><option value="">Select Bowler 2</option></select>
36 <button id="begin-match-btn" class="btn-primary">Begin Match</button>
37 </div>
38 <div id="scoring" style="display: none;">
39 <div class="scoreboard">
40 <p>Batsman: <span id="current-batsman"></span> - <span id="batsman-runs">0</span> runs</p>
41 <p>Current Bowler: <span id="current-bowler"></span> - <span id="bowler-stats">0/0</span></p>
42 <p>Overs: <span id="overs-left">0.0/2</span></p>
43 <p>Total: <span id="total-score">0/0</span></p>
44 <p id="over-message" class="over-message" style="display: none;"></p>
45 </div>
46 <div id="score-buttons" class="score-buttons"></div>
47 <button onclick="endMatch()" class="btn-secondary">End Match</button>
48 </div>
49 </section>
50
51 <section id="dashboard" class="card" style="display: none;">
52 <h2>Dashboard</h2>
53 <button onclick="showOverallStats()" class="btn-primary">Overall Stats</button>
54 <div class="player-stats">
55 <select id="player-select" onchange="showPlayerStats()">
56 <option value="">Select Player</option>
57 </select>
58 <button onclick="deletePlayerStats()" class="btn-secondary">Delete Player Stats</button>
59 <div id="player-stats" class="stats-grid" style="display: none;"></div>
60 </div>
61 <button onclick="deleteAllStats()" class="btn-secondary">Delete All Stats</button>
62 <div id="stats" class="stats-grid" style="display: none;"></div>
63 <button onclick="downloadCSV()" class="btn-primary">Download Stats</button>
64 </section>
65 </main>
66
67 <footer>
68 <p>© 2025 Jhatin Sai Mallarapu. All rights reserved.</p>
69 </footer>
70
71 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
72 <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
73 <script src="data.js"></script>
74 <script src="ui.js"></script>
75 <script src="game.js"></script>
76 <script>
77 document.addEventListener("DOMContentLoaded", () => {
78 updatePlayerList();
79 updateSelectOptions();
80 showSection("player-management");
81 document.getElementById("begin-match-btn").addEventListener("click", startMatch);
82 });
83 </script>
84</body>
85</html>