Scribd
Upload
9 views2 pages

P

The document is an HTML template for a Smart Power Management System featuring a user interface with a home page and a dashboard. The dashboard includes options to add devices, view power charts, monitor power usage, and check alert messages. It utilizes CSS for styling and JavaScript for navigation functionality.

Uploaded by

Srimathi tj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
9 views2 pages

P

The document is an HTML template for a Smart Power Management System featuring a user interface with a home page and a dashboard. The dashboard includes options to add devices, view power charts, monitor power usage, and check alert messages. It utilizes CSS for styling and JavaScript for navigation functionality.

Uploaded by

Srimathi tj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smart Power Management System</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background: linear-gradient(120deg, #f6d365, #fda085);
margin: 0;
padding: 0;
}
.container {
margin-top: 15%;
}
.box {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
display: inline-block;
}
.btn {
display: block;
margin: 20px auto;
padding: 15px 30px;
font-size: 18px;
color: white;
background: #ff5733;
border: none;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.btn:hover {
background: #c70039;
}
.dashboard {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
margin-top: 5%;
}
.option {
background: white;
padding: 15px;
width: 200px;
text-align: center;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
cursor: pointer;
font-weight: bold;
transition: 0.3s;
}
.option:hover {
background: #ffcc29;
color: #333;
}
</style>
</head>
<body>
<div id="home" class="container">
<h1>Smart Power Management System</h1>
<div class="box">
<button class="btn" onclick="navigateToDashboard()">Start</button>
</div>
</div>

<div id="dashboard" class="container" style="display: none;">


<h1>Dashboard</h1>
<div class="box">
<div class="dashboard">
<div class="option" onclick="navigateTo('Add Device')">Add
Device</div>
<div class="option" onclick="navigateTo('Power Chart')">Power
Chart</div>
<div class="option" onclick="navigateTo('Power Usage')">Power
Usage</div>
<div class="option" onclick="navigateTo('Alert Messages')">Alert
Messages</div>
</div>
</div>
</div>

<script>
function navigateToDashboard() {
document.getElementById('home').style.display = 'none';
document.getElementById('dashboard').style.display = 'block';
}

function navigateTo(option) {
alert('Navigating to ' + option);
}
</script>
</body>
</html>

You might also like