<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Router Interface</title>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(to bottom right, #2c3e50, #4ca1af);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
color: #fff;
}
.router-container {
background: #34495e;
padding: 30px;
border-radius: 20px;
text-align: center;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
width: 300px;
}
.router-body {
background: #2c3e50;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
position: relative;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.light {
width: 15px;
height: 15px;
border-radius: 50%;
margin: 10px auto;
background: #555;
transition: background 0.3s;
}
.light.on {
background: #2ecc71;
box-shadow: 0 0 10px #2ecc71;
}
.label {
font-size: 14px;
margin-top: 5px;
}
.indicator-section {
display: flex;
justify-content: space-around;
margin-bottom: 20px;
}
.control-buttons, .onoff-switch {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 20px;
}
.button {
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: #2980b9;
color: #fff;
font-size: 18px;
cursor: pointer;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
transition: background 0.3s;
}
.button:active {
background: #3498db;
}
.onoff-button {
background: #e74c3c;
width: 60px;
}
.onoff-button.on {
background: #27ae60;
}
.status {
font-size: 16px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class=”router-container”>
<div class=”router-body”>
<div class=”indicator-section”>
<div>
<div class=”light” id=”power-light”></div>
<div class=”label”>Power</div>
</div>
<div>
<div class=”light” id=”internet-light”></div>
<div class=”label”>Internet</div>
</div>
<div>
<div class=”light” id=”wifi-light”></div>
<div class=”label”>Wi-Fi</div>
</div>
</div>
<div class=”status” id=”status-message”>Router is Off</div>
<div class=”control-buttons”>
<button class=”button” onclick=”toggleSignalStrength()”>🔄</button>
<button class=”button” onclick=”showConnectedDevices()”>💻</button>
</div>
<div class=”onoff-switch”>
<button class=”button onoff-button” id=”onoff-button” onclick=”toggleRouter()”>Off</button>
</div>
</div>
</div>
<script>
let routerOn = false;
let internetConnected = false;
let wifiEnabled = false;
function toggleRouter() {
routerOn = !routerOn;
const powerLight = document.getElementById(‘power-light’);
const internetLight = document.getElementById(‘internet-light’);
const wifiLight = document.getElementById(‘wifi-light’);
const statusMessage = document.getElementById(‘status-message’);
const onoffButton = document.getElementById(‘onoff-button’);
if (routerOn) {
powerLight.classList.add(‘on’);
internetConnected = true;
wifiEnabled = true;
internetLight.classList.add(‘on’);
wifiLight.classList.add(‘on’);
statusMessage.textContent = ‘Router is On. Internet and Wi-Fi enabled.’;
onoffButton.textContent = ‘On’;
onoffButton.classList.add(‘on’);
} else {
powerLight.classList.remove(‘on’);
internetLight.classList.remove(‘on’);
wifiLight.classList.remove(‘on’);
statusMessage.textContent = ‘Router is Off’;
onoffButton.textContent = ‘Off’;
onoffButton.classList.remove(‘on’);
}
}
function toggleSignalStrength() {
if (routerOn) {
const signalStrength = Math.floor(Math.random() * 5) + 1;
alert(‘Signal Strength: ‘ + signalStrength + ‘ bars’);
} else {
alert(‘Router is Off’);
}
}
function showConnectedDevices() {
if (routerOn && wifiEnabled) {
const connectedDevices = Math.floor(Math.random() * 10) + 1;
alert(‘Connected Devices: ‘ + connectedDevices);
} else if (!routerOn) {
alert(‘Router is Off’);
} else {
alert(‘Wi-Fi is not enabled’);
}
}
</script>
</body>
</html>