homebridge-roborock-vacuum-update
Version:
Comprehensive Homebridge plugin for Roborock vacuum cleaners with full HomeKit integration including mopping, dock features, and advanced controls.
111 lines (97 loc) • 3.24 kB
HTML
<html>
<head>
<script src="zones.js"></script>
<style>
body {
display: flex;
align-items: center;
background-color: #000000;
}
#myCanvas {
border: 2px solid #4F4F4F;
box-shadow: 0px 0px 10px #333;
border-radius: 15px;
/* image-rendering: pixelated; */
}
#addButton, #deleteButton {
display: inline-block;
width: 100px;
}
#addButton {
margin-right: 0px;
}
#deleteButton {
margin-left: 0px;
}
#startButton, #stopButton, #pauseButton {
display: inline-block;
width: 100px;
}
#startButton, #pauseButton {
margin-right: 0px;
}
#stopButton {
margin-left: 0px;
}
button, select {
margin: 10px 20px;
padding: 10px 20px;
border-radius: 10px;
background-color: #2D9CDB;
color: #F0F0F0;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
font-size: 16px;
font-weight: bold;
border: 1px solid #4F4F4F;
width: 200px;
}
button:hover, select:hover {
background-color: #47A9DC;
}
button:disabled {
color: gray;
background-color: lightgray;
cursor: not-allowed;
}
.hovered-option {
background-color: #47A9DC ;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="450" height="450"></canvas>
<div id="popup" style="display: none; position: absolute">
<div id="triangle" style="position: absolute; width: 0; height: 0; border-style: solid; border-width: 10px 5px 0 5px; border-color: #ffffff transparent transparent transparent; transform: translateY(1px);"></div>
<img id="popup-image" src="" style="width: 100px; height: 100px; border: 1px solid white;" />
</div>
<div id="largePhoto" style="top: 25px; left: 25px; display: none; position: absolute">
<img id="largePhoto-image" src="" style="width: 415px; height: 415px; border: 1px solid white;" />
</div>
<div style="display: flex; flex-direction: column; align-items: center;">
<div style="margin-left: auto;">
<select id="robotSelect"></select>
</div>
<div style="margin-left: auto;">
<select id="cleanCount">
<option value="1">1 Time</option>
<option value="2">2 Times</option>
<option value="3">3 Times</option>
</select>
</div>
<div style="display: flex;" id="zoneButtons">
<button id="addButton">+ Zone</button>
<button disabled id="deleteButton">- Zone</button>
</div>
<div style="display: flex;" id="robotButtons">
<button id="pauseButton" style="display: none;">Pause</button>
<button id="startButton">Start</button>
<button id="stopButton">Stop</button>
</div>
<button id="dockButton">Dock</button>
<button id="goToButton">Go to</button>
<button id="resetZoomButton">Reset zoom</button>
</div>
</body>
</html>