homebridge-roborock-matter 2.1.0

package/roborockLib/lib/map/map.html

@@ -0,0 +1,137 @@
+<!doctype 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 !important;
+      }
+    </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>