Scribd
Upload
4 views2 pages

Button 7

The document is an HTML code for a smart home control panel that allows users to manage devices such as lights, fans, thermostats, and air conditioning. Each device has buttons to turn it on or off, and the status of each device is visually represented with colored indicators. The layout is styled with CSS for a modern and user-friendly interface.

Uploaded by

animehindiexplaner
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
4 views2 pages

Button 7

The document is an HTML code for a smart home control panel that allows users to manage devices such as lights, fans, thermostats, and air conditioning. Each device has buttons to turn it on or off, and the status of each device is visually represented with colored indicators. The layout is styled with CSS for a modern and user-friendly interface.

Uploaded by

animehindiexplaner
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>
<head>
<title>Smart Home Control</title>
<style>
body {
background-color: black;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
.control-panel {
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 10px;
text-align: center;
}
.device {
margin-bottom: 20px;
}
.status {
width: 20px;
height: 20px;
border-radius: 50%;
display: inline-block;
margin-left: 10px;
}
.on {
background-color: yellow;
}
.off {
background-color: grey;
}
button {
margin: 5px;
padding: 10px;
}
</style>
</head>
<body>
<div class="control-panel">
<div class="device">
<h2>Light</h2>
<div class="status" id="light-status"></div>
<br>
<button onclick="toggleDevice('light', 'on')">Turn On</button>
<button onclick="toggleDevice('light', 'off')">Turn Off</button>
</div>

<div class="device">
<h2>Fan</h2>
<div class="status" id="fan-status"></div>
<br>
<button onclick="toggleDevice('fan', 'on')">Turn On</button>
<button onclick="toggleDevice('fan', 'off')">Turn Off</button>
</div>
<div class="device">
<h2>Thermostat</h2>
<div class="status" id="thermostat-status"></div>
<br>
<button onclick="toggleDevice('thermostat', 'on')">Turn On</button>
<button onclick="toggleDevice('thermostat', 'off')">Turn Off</button>
</div>

<div class="device">
<h2>AC</h2>
<div class="status" id="ac-status"></div>
<br>
<button onclick="toggleDevice('ac', 'on')">Turn On</button>
<button onclick="toggleDevice('ac', 'off')">Turn Off</button>
</div>
</div>

<script>
function toggleDevice(device, state) {
const statusElement = document.getElementById(`${device}-status`);
if (state === 'on') {
statusElement.classList.add('on');
statusElement.classList.remove('off');
} else {
statusElement.classList.add('off');
statusElement.classList.remove('on');
}
}
</script>
</body>
</html>

You might also like