Gave Settings Navigation functionality

still need it to actually work, this'll involve python
zdkrimson · Jul 6, 2024 · 1dbce57 · 1dbce57
1 parent a521c29
commit 1dbce57
Show file tree

Hide file tree

Showing 7 changed files with 880 additions and 474 deletions.
diff --git a/index.css b/index.css
@@ -162,4 +162,71 @@ button:active {
   display: flex;
   justify-content: center;
   align-items: center;
-} 
+} 
+
+/*.settings {
+	position: fixed;
+	background-color: #000000;
+	width: 80%;
+	height: 69%;
+	inset: 0;
+}
+*/
+.settings {
+  position: fixed;
+  width: 80%;
+  height: 80%;
+  padding: 0px;
+  margin: auto;
+  inset: 0px;
+  display: flex;
+  flex-direction: column;
+  backdrop-filter: blur(20px) brightness(40%);
+  border-radius: 20px;
+  box-shadow: 0px 0px 20px #00000055;
+  z-index: 7; /* i like the number 7 */
+  opacity: 0;
+  scale: 0.8;
+  pointer-events: none;
+}
+
+@keyframes popup {
+  from {
+    scale: 0.8;
+    opacity: 0;
+    pointer-events: none;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+    pointer-events: all;
+  }
+}
+
+.popup {
+	animation: popup 0.5s ease-out forwards;
+}
+
+@keyframes popout {
+  from {
+    scale: 1;
+    opacity: 1;
+    pointer-events: all;
+  }
+  to {
+    scale: 0.8;
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+.popout {
+	animation: popout 0.5s ease-in forwards;
+}
+
+.settingsiframe {
+	width: 100%;
+	height: 100%;
+	border: 0;
+	border-radius: 20px;
+}
diff --git a/index.html b/index.html
@@ -3,14 +3,18 @@
 	<head>
 		<title>zdkrimson</title>
 		<link rel="stylesheet" href="index.css">
+		<script src=index.js></script>
 	</head>
 	<body>
+		<div id=settings class=settings>
+			<iframe allow-scripts=true allow-same-origin=true allow-transparency=true class=settingsiframe src='settings.html' title='zdkrimson Settings'></iframe>
+		</div>
 		<div class=main>
 			<div class=homescrn>
 				<button class=helpbtn>
 					<img width=30px src='assets/icons/questionmark.svg'>
 				</button>
-				<button class=settingsbtn>
+				<button onclick='settings("show")' class=settingsbtn>
 					<img width=30px src='assets/icons/settings.svg'>
 				</button>
 				<div class=logocenter>

diff --git a/index.js b/index.js
@@ -0,0 +1,25 @@
+function settings(status) {
+	var settingsmenu = document.getElementById("settings");
+
+	if (status == "show") {
+		settingsmenu.classList.add("popup");
+		settingsmenu.classList.remove("popout");
+	}
+
+	if (status == "hide") {
+		settingsmenu.classList.remove("popup");
+		settingsmenu.classList.add("popout");
+	}
+}
+
+// Listen for messages from iframe
+window.addEventListener('message', function(event) {
+    // Verify origin of the iframe (optional, for security)
+    // if (event.origin !== 'https://your-iframe-domain.com') return;
+
+    // Check the message received from iframe
+    if (event.data === 'hideSettings') {
+        // Call settings function in the parent window
+        settings('hide');
+    }
+});