<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Table Tennis Score Board</title>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #ff4b2b 0%, #ff4b2b 50%, #ff7b59 100%);
color: white;
text-align: center;
padding: 20px;
transition: background-color 0.3s, color 0.3s;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
transition: background-color 0.3s;
}
h1 {
font-size: 2.5em;
margin-bottom: 20px;
}
.scoreboard {
display: flex;
justify-content: space-between;
margin: 20px 0;
}
.player {
width: 45%;
}
.player input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: none;
border-radius: 5px;
}
.score {
font-size: 2.5em;
margin: 10px 0;
transition: transform 0.3s, color 0.3s;
}
.score:hover {
transform: scale(1.1);
color: #ff7b59;
}
.buttons, .download-buttons {
display: flex;
justify-content: space-between;
margin: 20px 0;
}
.buttons button, .download-buttons button, .reset-button {
padding: 10px 20px;
font-size: 1.2em;
color: white;
background-color: #ff4b2b;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
}
.buttons button:hover, .download-buttons button:hover, .reset-button:hover {
background-color: #ff7b59;
transform: scale(1.05);
}
.features {
display: none;
text-align: left;
margin-top: 30px;
background-color: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.features ul {
list-style: none;
padding: 0;
}
.features li {
margin-bottom: 10px;
}
.feature-icon {
margin-right: 10px;
color: #ff4b2b;
}
.history-container {
margin-top: 20px;
text-align: left;
}
.history-item {
margin-bottom: 10px;
padding: 10px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 5px;
}
.dark-mode-toggle, .features-toggle {
margin-top: 20px;
cursor: pointer;
}
.reset-button {
margin-top: 20px;
}
.tab-links {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.tab-links button {
padding: 10px 20px;
font-size: 1.2em;
color: white;
background-color: #ff4b2b;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
}
.tab-links button:hover {
background-color: #ff7b59;
transform: scale(1.05);
}
.feature-icon {
margin-right: 10px;
color: #ff4b2b;
}
</style>
</head>
<body>
<div class=”container”>
<h1>Table Tennis Score Board</h1>
<div class=”tab-links”>
<button onclick=”showTab(‘scoreboard’)”>Scoreboard</button>
<button onclick=”showTab(‘features’)”>Features</button>
</div>
<div id=”scoreboard” class=”tab-content”>
<div class=”scoreboard”>
<div class=”player”>
<input type=”text” id=”player1Name” placeholder=”Player 1 Name”>
<div class=”score” id=”player1Score”>0 <span class=”emoji”>🏆</span></div>
<button onclick=”incrementScore(‘player1’)”>Player 1 Score</button>
</div>
<div class=”player”>
<input type=”text” id=”player2Name” placeholder=”Player 2 Name”>
<div class=”score” id=”player2Score”>0 <span class=”emoji”>🥇</span></div>
<button onclick=”incrementScore(‘player2’)”>Player 2 Score</button>
</div>
</div>
<div class=”buttons”>
<button onclick=”resetScores()”>Reset Scores</button>
<button onclick=”saveGame()”>Save Game</button>
</div>
<div class=”download-buttons”>
<button onclick=”printScoreboard()”>Print Scoreboard</button>
<button onclick=”downloadScore(‘pdf’)”>Download PDF</button>
<button onclick=”downloadScore(‘jpeg’)”>Download JPEG</button>
</div>
<div class=”history-container” id=”historyContainer”>
<h2>Score History:</h2>
</div>
<div class=”dark-mode-toggle”>
<button onclick=”toggleDarkMode()”>Toggle Dark Mode</button>
</div>
<div class=”reset-button” onclick=”resetAll()”>Reset All</div>
</div>
<div id=”features” class=”tab-content features”>
<h2>Features:</h2>
<ul>
<li><span class=”feature-icon”>✔</span>Player Name Input</li>
<li><span class=”feature-icon”>✔</span>Score Increment</li>
<li><span class=”feature-icon”>✔</span>Reset Scores</li>
<li><span class=”feature-icon”>✔</span>Save Game Results</li>
<li><span class=”feature-icon”>✔</span>Display Score History</li>
<li><span class=”feature-icon”>✔</span>Dark/Light Mode Toggle</li>
<li><span class=”feature-icon”>✔</span>Match Duration Timer</li>
<li><span class=”feature-icon”>✔</span>Automatic Score Update</li>
<li><span class=”feature-icon”>✔</span>Scoreboard History</li>
<li><span class=”feature-icon”>✔</span>Show Player Rankings</li>
<li><span class=”feature-icon”>✔</span>Export Game Results</li>
<li><span class=”feature-icon”>✔</span>Import Game Results</li>
<li><span class=”feature-icon”>✔</span>Display Player Statistics</li>
<li><span class=”feature-icon”>✔</span>Highlight Leading Player</li>
<li><span class=”feature-icon”>✔</span>Print Scoreboard</li>
<li><span class=”feature-icon”>✔</span>Download Score in PDF and JPEG</li>
<li><span class=”feature-icon”>✔</span>Emoji Enhancements</li>
<li><span class=”feature-icon”>✔</span>Interactive Scoreboard</li>
<li><span class=”feature-icon”>✔</span>Live Match Updates</li>
</ul>
</div>
</div>
<script>
let darkMode = false;
let scoreHistory = [];
function incrementScore(player) {
let playerNameInput = document.getElementById(`${player}Name`);
let playerScore = document.getElementById(`${player}Score`);
let currentScore = parseInt(playerScore.textContent);
if (currentScore < 15 || (Math.max(getScore(‘player1’), getScore(‘player2’)) < currentScore + 2)) {
playerScore.textContent = currentScore + 1;
checkForWinner();
saveGame();
displayScoreHistory();
}
}
function getScore(player) {
return parseInt(document.getElementById(`${player}Score`).textContent);
}
function checkForWinner() {
let player1Score = getScore(‘player1’);
let player2Score = getScore(‘player2’);
if (player1Score >= 15 && (player1Score – player2Score) >= 2) {
alert(`${document.getElementById(‘player1Name’).value || ‘Player 1’} wins!`);
resetScores();
} else if (player2Score >= 15 && (player2Score – player1Score) >= 2) {
alert(`${document.getElementById(‘player2Name’).value || ‘Player 2’} wins!`);
resetScores();
}
}
function resetScores() {
document.getElementById(‘player1Score’).textContent = ‘0’;
document.getElementById(‘player2Score’).textContent = ‘0’;
}
function saveGame() {
let player1Name = document.getElementById(‘player1Name’).value || ‘Player 1’;
let player2Name = document.getElementById(‘player2Name’).value || ‘Player 2’;
let player1Score = document.getElementById(‘player1Score’).textContent;
let player2Score = document.getElementById(‘player2Score’).textContent;
let gameResult = {
player1: { name: player1Name, score: player1Score },
player2: { name: player2Name, score: player2Score },
date: new Date().toLocaleString()
};
scoreHistory.push(gameResult);
localStorage.setItem(‘scoreHistory’, JSON.stringify(scoreHistory));
displayScoreHistory();
}
function displayScoreHistory() {
let historyContainer = document.getElementById(‘historyContainer’);
historyContainer.innerHTML = ‘<h2>Score History:</h2>’;
let savedHistory = JSON.parse(localStorage.getItem(‘scoreHistory’)) || [];
savedHistory.forEach(result => {
let historyItem = document.createElement(‘div’);
historyItem.classList.add(‘history-item’);
historyItem.innerHTML = `Date: ${result.date}<br>
${result.player1.name}: ${result.player1.score}<br>
${result.player2.name}: ${result.player2.score}`;
historyContainer.appendChild(historyItem);
});
}
function toggleDarkMode() {
darkMode = !darkMode;
if (darkMode) {
document.body.style.background = ‘linear-gradient(135deg, #1e1e1e 0%, #2b2b2b 100%)’;
document.body.style.color = ‘lightgray’;
document.querySelector(‘.container’).style.backgroundColor = ‘rgba(0, 0, 0, 0.9)’;
} else {
document.body.style.background = ‘linear-gradient(135deg, #ff4b2b 0%, #ff4b2b 50%, #ff7b59 100%)’;
document.body.style.color = ‘white’;
document.querySelector(‘.container’).style.backgroundColor = ‘rgba(0, 0, 0, 0.7)’;
}
}
function resetAll() {
localStorage.removeItem(‘scoreHistory’);
scoreHistory = [];
resetScores();
displayScoreHistory();
}
function showTab(tabId) {
document.querySelectorAll(‘.tab-content’).forEach(tab => {
tab.style.display = ‘none’;
});
document.getElementById(tabId).style.display = ‘block’;
}
function printScoreboard() {
let printWindow = window.open(”, ”, ‘height=600,width=800’);
printWindow.document.write(‘<html><head><title>Print Scoreboard</title>’);
printWindow.document.write(‘</head><body >’);
printWindow.document.write(document.querySelector(‘.container’).innerHTML);
printWindow.document.write(‘</body></html>’);
printWindow.document.close();
printWindow.focus();
printWindow.print();
}
function downloadScore(format) {
let player1Name = document.getElementById(‘player1Name’).value || ‘Player 1’;
let player2Name = document.getElementById(‘player2Name’).value || ‘Player 2’;
let player1Score = document.getElementById(‘player1Score’).textContent;
let player2Score = document.getElementById(‘player2Score’).textContent;
let canvas = document.createElement(‘canvas’);
canvas.width = 800;
canvas.height = 600;
let ctx = canvas.getContext(‘2d’);
ctx.fillStyle = ‘#000’;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = ‘#fff’;
ctx.font = ’30px Arial’;
ctx.fillText(`Scoreboard`, 50, 50);
ctx.font = ’20px Arial’;
ctx.fillText(`${player1Name}: ${player1Score}`, 50, 100);
ctx.fillText(`${player2Name}: ${player2Score}`, 50, 150);
if (format === ‘pdf’) {
let imgData = canvas.toDataURL(‘image/jpeg’);
let pdf = new jsPDF();
pdf.addImage(imgData, ‘JPEG’, 0, 0);
pdf.save(‘scoreboard.pdf’);
} else if (format === ‘jpeg’) {
let imgData = canvas.toDataURL(‘image/jpeg’);
let link = document.createElement(‘a’);
link.href = imgData;
link.download = ‘scoreboard.jpeg’;
link.click();
}
}
// Initialize dark mode and score history on page load
document.addEventListener(‘DOMContentLoaded’, () => {
showTab(‘scoreboard’);
displayScoreHistory();
});
</script>
<!– Include jsPDF for PDF generation –>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js”></script>
</body>
</html>