From 07907831dc0653d6619530c88d795dbb77e87e5c Mon Sep 17 00:00:00 2001
From: malik <malik.wachter@protonmail.com>
Date: Sun, 4 Feb 2024 23:43:14 +0100
Subject: [PATCH] Add PGP Key to contact page

---
 contactme.html | 22 ++++++++++++++++++++++
 css/style.css  | 49 +++++++++++++++++++++++++++++++++++++++++++++++++
 js/popups.js   | 25 +++++++++++++++++++++++++
 3 files changed, 96 insertions(+)
 create mode 100644 js/popups.js

diff --git a/contactme.html b/contactme.html
index 4648ca0..fd6c425 100644
--- a/contactme.html
+++ b/contactme.html
@@ -36,6 +36,27 @@
           <div class="col-1">
             <h1 id="contacttitle"></h1>
             <h2 id="contact"></h2>
+            <a id="popupButton">PGP Key</a>
+
+            <div id="myPopup" class="Popup">
+              <div class="popupContent">
+                <span class="close">&times;</span>
+                <h1>PGP Key</h1>
+                <p>-----BEGIN PGP PUBLIC KEY BLOCK-----<br>
+                  xjMEZb6aVBYJKwYBBAHaRw8BAQdAoOqb346rMo1iB+4uhOk/5P01bMKkz3lz<br> 
+                  f/VkW/nOcq/NKWNvbnRhY3RAbWF3YWNvZGUuZGUgPGNvbnRhY3RAbWF3YWNv<br>
+                  ZGUuZGU+wowEEBYKAD4FgmW+mlQECwkHCAmQF7yxOY8Xq6gDFQgKBBYAAgEC<br>
+                  GQECmwMCHgEWIQTp4k0bwYyQDzuOcfkXvLE5jxerqAAACAgA/AuDAmTI7a1A<br>
+                  FTzz5yg0srbLKiNyApa6Jp6W57U3VrRkAQC8Eh001VNeda9ZI70VKMETCdfA<br>
+                  AD+gELPomlR3CRAaBM44BGW+mlQSCisGAQQBl1UBBQEBB0COggG2IPWv21Qz<br>
+                  1lenwokMxqj3t2e6EWvVCHWnRFVUZwMBCAfCeAQYFgoAKgWCZb6aVAmQF7yx<br>
+                  OY8Xq6gCmwwWIQTp4k0bwYyQDzuOcfkXvLE5jxerqAAA2BMA/0oUUD7XV5wx<br>
+                  MqPmF+ZkVJBLpoYmsGCnInjRbXKjMKVWAQDi3+hfP9I81n1k0BzZ/aEwosoS<br>
+                  V1WPds4rTX6GEzj+Cw==<br>
+                  =rzUE<br>
+                  -----END PGP PUBLIC KEY BLOCK-----</p>
+              </div>
+            </div>
           </div>
           <div class="col-2">
             <a href="https://xkcd.com/1783/"><img src="pics/emails.png" class="comic"></a>
@@ -51,6 +72,7 @@
     </div>
 
     <script src="js/lang.js"></script>
+    <script src="js/popups.js"></script>
 
   </body>
 
diff --git a/css/style.css b/css/style.css
index 71c6446..481b526 100644
--- a/css/style.css
+++ b/css/style.css
@@ -130,6 +130,55 @@ h2{
     color: black;
 }
 
+#popupButton {
+    color: black;
+    font-size: 100%;
+    padding: 5px;
+    text-decoration: none;
+    background-color: #e0d94c;
+    box-shadow: 5px 5px 5px black;
+}
+
+#popupButton:hover{
+    color: #ecfeaa;
+    cursor: pointer;
+}
+
+.Popup {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    padding-top: 100px;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.4);
+}
+  
+.popupContent {
+    background-color: #e2de84;
+    margin: auto;
+    padding: 20px;
+    border: 1px solid #000000;
+    width: 80%;
+    color: black;
+}
+
+.close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover, .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+}
+
 .socialmedia img{
     height: 30px;
     margin: 5px;
diff --git a/js/popups.js b/js/popups.js
new file mode 100644
index 0000000..44a8681
--- /dev/null
+++ b/js/popups.js
@@ -0,0 +1,25 @@
+// Get the Popup
+var Popup = document.getElementById("myPopup");
+
+// Get the button that opens the Popup
+var btn = document.getElementById("popupButton");
+
+// Get the <span> element that closes the Popup
+var span = document.getElementsByClassName("close")[0];
+
+// When the user clicks the button, open the Popup 
+btn.onclick = function() {
+  Popup.style.display = "block";
+}
+
+// When the user clicks on <span> (x), close the Popup
+span.onclick = function() {
+  Popup.style.display = "none";
+}
+
+// When the user clicks anywhere outside of the Popup, close it
+window.onclick = function(event) {
+  if (event.target == Popup) {
+    Popup.style.display = "none";
+  }
+}
\ No newline at end of file