Skip to content

Instantly share code, notes, and snippets.

@fgouin2014

fgouin2014/Lightbulbs

Last active July 6, 2024 03:06
Show Gist options
  • Save fgouin2014/3539915fcbfa053b29836153976eeab3 to your computer and use it in GitHub Desktop.
Save fgouin2014/3539915fcbfa053b29836153976eeab3 to your computer and use it in GitHub Desktop.
Download ZIP
CodePen
Raw
Lightbulbs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Bulb Smart Light Control</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.4.5/jscolor.min.js"></script>
</head>
<body>
<h1>Multi-Bulb Smart Light Control</h1>
<div id="masterControlSection">
<h2>Master Control</h2>
<div class="control-item">
<label class="switch">
<input type="checkbox" id="masterToggle">
<span class="slider"></span>
</label>
</div>
<div class="control-item">
<label for="masterBrightness">Master Brightness:</label>
<input type="range" id="masterBrightness" min="0" max="100" value="50">
<span id="masterBrightnessValue">50%</span>
</div>
<div class="control-item">
<label for="masterColor">Master Color:</label>
<input type="text" id="masterColor" data-jscolor="" value="FFFFFF">
</div>
<div class="color-presets" id="masterColorPresets"></div>
</div>
<div id="bulbControls"></div>
<script src="script.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment