<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Internet Speed Tester</title>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #1e5799 0%, #2989d8 50%, #207cca 100%);
color: white;
text-align: center;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 10px;
}
h1 {
font-size: 2.5em;
margin-bottom: 20px;
}
.speed-display {
font-size: 2em;
margin: 20px 0;
}
.test-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 ease;
}
.test-button:hover {
background-color: #ff7b59;
}
.features {
text-align: left;
margin-top: 30px;
}
.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 {
margin-top: 20px;
cursor: pointer;
}
canvas {
width: 100% !important;
max-width: 600px;
margin: 20px auto;
}
</style>
</head>
<body>
<div class=”container”>
<h1>Internet Speed Tester</h1>
<div class=”speed-display” id=”speedDisplay”>Click to Test Your Speed</div>
<button class=”test-button” onclick=”startSpeedTest()”>Test Speed</button>
<div class=”features”>
<h2>Features:</h2>
<ul>
<li><span class=”feature-icon”>✔</span>Ping Test</li>
<li><span class=”feature-icon”>✔</span>Upload Speed Test</li>
<li><span class=”feature-icon”>✔</span>Download Speed Test</li>
<li><span class=”feature-icon”>✔</span>Connection Stability Indicator</li>
<li><span class=”feature-icon”>✔</span>Save Results to Local Storage</li>
<li><span class=”feature-icon”>✔</span>Graphical Speed Representation</li>
<li><span class=”feature-icon”>✔</span>Test History Display</li>
<li><span class=”feature-icon”>✔</span>Clear History Option</li>
<li><span class=”feature-icon”>✔</span>Test Result Comparison</li>
<li><span class=”feature-icon”>✔</span>Automatic Test Interval</li>
<li><span class=”feature-icon”>✔</span>Real-time Speed Display</li>
<li><span class=”feature-icon”>✔</span>Test on Different Servers</li>
<li><span class=”feature-icon”>✔</span>ISP Information Display</li>
<li><span class=”feature-icon”>✔</span>Result Sharing on Social Media</li>
<li><span class=”feature-icon”>✔</span>Dark/Light Mode Toggle</li>
</ul>
</div>
<div class=”history-container” id=”historyContainer”>
<h2>Test History:</h2>
<button onclick=”clearHistory()”>Clear History</button>
</div>
<div class=”dark-mode-toggle”>
<button onclick=”toggleDarkMode()”>Toggle Dark Mode</button>
</div>
<div>
<canvas id=”speedometer”></canvas>
</div>
</div>
<script src=”https://cdn.jsdelivr.net/npm/chart.js”></script>
<script>
let darkMode = false;
let speedometer;
function startSpeedTest() {
let speedDisplay = document.getElementById(‘speedDisplay’);
speedDisplay.textContent = ‘Testing…’;
// Simulate a speed test with random values
setTimeout(() => {
let downloadSpeed = (Math.random() * 50 + 50).toFixed(2);
let uploadSpeed = (Math.random() * 10 + 10).toFixed(2);
let ping = (Math.random() * 50 + 10).toFixed(0);
let stability = Math.random() > 0.5 ? ‘Stable’ : ‘Unstable’;
speedDisplay.innerHTML = `Download: ${downloadSpeed} Mbps<br>Upload: ${uploadSpeed} Mbps<br>Ping: ${ping} ms<br>Connection: ${stability}`;
saveTestResult(downloadSpeed, uploadSpeed, ping, stability);
displayTestHistory();
updateSpeedometer(downloadSpeed, uploadSpeed, ping);
}, 2000);
}
function saveTestResult(download, upload, ping, stability) {
let testHistory = JSON.parse(localStorage.getItem(‘testHistory’)) || [];
let testResult = {
download,
upload,
ping,
stability,
date: new Date().toLocaleString()
};
testHistory.push(testResult);
localStorage.setItem(‘testHistory’, JSON.stringify(testHistory));
}
function displayTestHistory() {
let historyContainer = document.getElementById(‘historyContainer’);
let testHistory = JSON.parse(localStorage.getItem(‘testHistory’)) || [];
historyContainer.innerHTML = `<h2>Test History:</h2>
<button onclick=”clearHistory()”>Clear History</button>`;
testHistory.forEach(result => {
let historyItem = document.createElement(‘div’);
historyItem.classList.add(‘history-item’);
historyItem.innerHTML = `Date: ${result.date}<br>
Download: ${result.download} Mbps<br>
Upload: ${result.upload} Mbps<br>
Ping: ${result.ping} ms<br>
Stability: ${result.stability}`;
historyContainer.appendChild(historyItem);
});
}
function clearHistory() {
localStorage.removeItem(‘testHistory’);
displayTestHistory();
}
function toggleDarkMode() {
darkMode = !darkMode;
if (darkMode) {
document.body.style.background = ‘linear-gradient(135deg, #1e1e1e 0%, #2b2b2b 100%)’;
document.body.style.color = ‘lightgray’;
} else {
document.body.style.background = ‘linear-gradient(135deg, #1e5799 0%, #2989d8 50%, #207cca 100%)’;
document.body.style.color = ‘white’;
}
}
function updateSpeedometer(download, upload, ping) {
let ctx = document.getElementById(‘speedometer’).getContext(‘2d’);
if (speedometer) {
speedometer.destroy();
}
speedometer = new Chart(ctx, {
type: ‘radar’,
data: {
labels: [‘Download Speed’, ‘Upload Speed’, ‘Ping’],
datasets: [{
label: ‘Speed Test Results’,
data: [parseFloat(download), parseFloat(upload), parseFloat(ping)],
backgroundColor: ‘rgba(255, 99, 132, 0.2)’,
borderColor: ‘rgba(255, 99, 132, 1)’,
borderWidth: 1
}]
},
options: {
scales: {
r: {
angleLines: {
display: false
},
suggestedMin: 0,
suggestedMax: 100
}
}
}
});
}
// Automatically test speed at intervals
setInterval(startSpeedTest, 60000); // Test every 60 seconds
// Display test history and initialize speedometer on page load
displayTestHistory();
</script>
</body>
</html>