From 6886207e07d5dd15c8f6f1d57fe519931f4f152d Mon Sep 17 00:00:00 2001
From: "Toerd@archlinux" <philipg@posteo.de>
Date: Wed, 1 Jul 2020 21:29:14 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20Prototyp=20Uniaufgabe=20f=C3=BCr=20Etti?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Stunde anzeigen und Minuten als "Füllung"
---
 etti.html | 84 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 84 insertions(+)
 create mode 100644 etti.html
diff --git a/etti.html b/etti.html
new file mode 100644
index 0000000..79faea9
--- /dev/null
+++ b/etti.html
@@ -0,0 +1,84 @@
+<html>
+    <head>
+        <meta charset="UTF-8"/>
+        <title>Clock</title>
+        <style type="text/css">
+         #clock {
+             width: 400px;
+             height: 400px;
+         }
+        </style>
+    </head>
+    <body>
+        <svg width="0" height="0">
+            <defs>
+                <clipPath id="21">
+                    <!-- Hier kommt dein SVG rein -->
+                    <path style="fill:#FFC107;" d="M362.676,192H293.77l78.656-177.067c2.356-5.399-0.11-11.686-5.509-14.043
+	                             c-1.338-0.584-2.781-0.887-4.24-0.89H149.343c-5.891-0.018-10.681,4.743-10.699,10.634c-0.001,0.289,0.01,0.577,0.032,0.865
+	                             l21.333,277.333c0.435,5.564,5.086,9.852,10.667,9.835H203.7L224.074,502.4c0.59,5.861,5.82,10.135,11.682,9.544
+	                             c3.86-0.389,7.205-2.843,8.734-6.408l128-298.667c2.321-5.415-0.187-11.685-5.601-14.006
+	                             C365.557,192.292,364.124,191.999,362.676,192z"/>
+                    <g>
+                    </g>
+                    <g>
+                    </g>
+                    <g>
+                    </g>
+                    <g>
+                    </g>
+                    <g>
+                    </g>
+                    <g>
+                    </g>
+                    <g>
+                    </g>
+                    <g>
+                    </g>
+                    <g>
+                    </g>
+                    <g>
+                    </g>
+                    <g>
+                    </g>
+                    <g>
+                    </g>
+                    <g>
+                    </g>
+                    <g>
+                    </g>
+                    <g>
+                    </g>
+                </clipPath>
+            </defs>
+        </svg>
+        <div id="clock"></div>
+    </body>
+    <script>
+     /* let time = new Date().getTime(); */
+     async function start_animation() {
+         let clock = document.getElementById("clock");
+         while (true) {
+             animate_clock(clock);
+             await sleep(1000);
+         }
+     }
+
+     function animate_clock(c) {
+         let hour = new Date().getHours();
+         let min = new Date().getMinutes();
+
+         let p = min / 60 * 100;
+
+         c.style.background = `linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) ${p}%,rgba(9,121,32,1) ${p}%)`;
+         // 1.svg, ..., 12.svg
+         c.style.clipPath = `url("#${hour}")`;
+     }
+
+     function sleep(ms) {
+         return new Promise((nil) => setTimeout(nil, ms));
+     }
+
+     start_animation();
+    </script>
+</html>
\ No newline at end of file
