<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>LIFX Control</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
}
#root {
width: 100%;
min-height: 100vh;
}
/* Custom range input styling */
input[type="range"] {
-webkit-appearance: none;
appearance: none;
height: 6px;
background: var(--color-background-tertiary, #ddd);
border-radius: 3px;
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
background: var(--color-accent, #4CAF50);
border-radius: 50%;
cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
width: 18px;
height: 18px;
background: var(--color-accent, #4CAF50);
border-radius: 50%;
cursor: pointer;
border: none;
}
button {
transition: all 0.2s ease;
}
button:hover {
opacity: 0.8;
transform: translateY(-1px);
}
button:active {
transform: translateY(0);
}
</style>
</head>
<body>
<div id="root"></div>
<script type="module" src="./mcp-app.tsx"></script>
</body>
</html>
