Better css

2023-09-12 23:42:51 +02:00
parent b82724664e
commit 82f3f33478
3 changed files with 187 additions and 110 deletions
--- a/projectorpi_web/index.html
+++ b/projectorpi_web/index.html
@@ -1,22 +1,99 @@
 <!DOCTYPE html>
 <html>
-<head></head>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        #top {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            grid-template-rows: repeat(7, 1fr);
+
+            column-gap: normal;
+            justify-items: center;
+        }
+
+        #bottom {
+            display: grid;
+            grid-template: auto / repeat(4, 1fr);
+
+            justify-items: center;
+        }
+
+        .remote-button {
+            width: 70px;
+            height: 70px;
+            font-size: 50px;
+        }
+
+        #pwr {
+            grid-area: 1 / 3;
+        }
+
+        [data-direction="up"] {
+            grid-area: 2 / 2;
+        }
+        [data-direction="down"] {
+            grid-area: 4 / 2;
+        }
+        [data-direction="left"] {
+            grid-area: 3 / 1;
+        }
+        [data-direction="right"] {
+            grid-area: 3 / 3;
+        }
+        [data-direction="enter"] {
+            grid-area: 3 / 2;
+        }
+        [data-direction="menu"] {
+            grid-area: 5 / 1;
+        }
+        [data-direction="vol_up"] {
+            grid-area: 6 / 2;
+        }
+        [data-direction="vol_down"] {
+            grid-area: 7 / 2;
+        }
+     </style>
+</head>
 <body>
    <main>
-        <button class="remote-button" data-direction="up">UP</button>
-        <button class="remote-button" data-direction="right">RIGHT</button>
-        <button class="remote-button" data-direction="down">DOWN</button>
-        <button class="remote-button" data-direction="left">LEFT</button>
-        <button class="remote-button" data-direction="enter">ENTER</button>
-        <button class="remote-button" data-direction="menu">MENU</button>
-        <button class="remote-button" data-direction="vol_up">VOL UP</button>
-        <button class="remote-button" data-direction="vol_down">VOL DOWN</button>
+        <div id="top">
+            <button class="remote-button" data-direction="up">🔼</button>
+            <button class="remote-button" data-direction="right">▶️</button>
+            <button class="remote-button" data-direction="down">🔽</button>
+            <button class="remote-button" data-direction="left">◀️</button>
+            <button class="remote-button" data-direction="enter">🆗</button>
+            <button class="remote-button" data-direction="menu">↩️</button>
+            <button class="remote-button" data-direction="vol_up">⏫️</button>
+            <button class="remote-button" data-direction="vol_down">⏬️</button>
+            <button class="remote-button" id="pwr">⏹️</button></div>
+        <div id="bottom">
+            <button class="remote-button" data-number="1">1️⃣</button>
+            <button class="remote-button" data-number="2">2️⃣</button>
+            <button class="remote-button" data-number="3">3️⃣</button>
+            <button class="remote-button" data-number="4">4️⃣</button>
+        </div>
+
+
    </main>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            document.addEventListener('click', (e) => {
                let direction = e.target.dataset.direction
-                fetch(`/control/${direction}`, {method: 'POST'})
+                let number = e.target.dataset.number
+
+                if (direction) {
+                    fetch(`/control/${direction}`, {method: 'POST'})
+                }
+
+                if (number) {
+                    fetch(`/select/${number}`, {method: 'POST'})
+                }
+
+                if (e.target.id === 'pwr') {
+                    fetch('/sleep', {method: 'POST'})
+                }
            });
        })
    </script>