From d9d892682f269c8b7296c86ae584c11259312efa Mon Sep 17 00:00:00 2001
From: max-42 <max@oppermann.fun>
Date: Wed, 20 Sep 2023 23:05:36 +0200
Subject: [PATCH] add some legal notice

---
 assets/css/style.css | 78 +++++++++++++++++++++++++++++++-------------
 index.html           | 22 +++++++++++++
 2 files changed, 78 insertions(+), 22 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index d213295..518ce1e 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -135,38 +135,72 @@ h1 {
         background-color: transparent;
     }
 }
+
 #shareIcon {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  cursor: pointer;
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    cursor: pointer;
+}
+
+#openLegal {
+    position: fixed;
+    bottom: 20px;
+    left: 20px;
+    cursor: pointer;
 }
 
 #qrCodePopup {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: #fff;
-  padding: 20px;
-  border: 2px solid #0071F0;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  display: none;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: #fff;
+    padding: 20px;
+    border: 2px solid #0071F0;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    display: none;
 }
 
 #qrCodePopup img {
-  max-width: 100%;
-  height: auto;
+    max-width: 100%;
+    height: auto;
 }
 
 #closePopup {
-  display: block;
-  margin-top: 10px;
-  background-color: #0071F0;
-  color: #fff;
-  border: none;
-  padding: 10px 20px;
-  cursor: pointer;
+    display: block;
+    margin-top: 10px;
+    background-color: #0071F0;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    cursor: pointer;
+}
+
+
+
+#legalPopup {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: #fff;
+    padding: 20px;
+    border: 2px solid #0071F0;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    display: none;
+
+}
+
+
+#closeLegal {
+    display: block;
+    margin-top: 10px;
+    background-color: #0071F0;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    cursor: pointer;
 }
 
 .matrix-latex {
diff --git a/index.html b/index.html
index 20076f3..70d370d 100644
--- a/index.html
+++ b/index.html
@@ -68,6 +68,21 @@ <h1>Max-Matrix-Multiplikationsspiel</h1>
             <button id="closePopup">Schließen</button>
         </div>
 
+        <a id="openLegal">Rechtliches</a>
+
+        <div id="legalPopup">
+            <h3>Impressum</h3>
+            <p>Max Oppermann</p>
+            <p>Lindholz, 9</p>
+            <p>31139 Hildesheim</p>
+            <br>
+            <p>Icons von <a href="https://tablericons.com/" target="_blank">Tabler Icons</a></p>
+            <p>MathJax von <a href="https://www.mathjax.org/" target="_blank">MathJax</a></p>
+            <button id="closeLegal">Schließen</button>
+        </div>
+
+        
+
 
     </div>
 
@@ -303,6 +318,13 @@ <h1>Max-Matrix-Multiplikationsspiel</h1>
         document.getElementById('closePopup').addEventListener('click', function () {
             document.getElementById('qrCodePopup').style.display = 'none';
         });
+        document.getElementById('openLegal').addEventListener('click', function () {
+            document.getElementById('legalPopup').style.display = 'block';
+        });
+
+        document.getElementById('closeLegal').addEventListener('click', function () {
+            document.getElementById('legalPopup').style.display = 'none';
+        });
 
     </script>
 </body>