Bug somewhere

static/css/main.css

@@ -2472,6 +2472,39 @@ button:disabled,
   }
 }
 
+.modal {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(8px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999999;
+}
+
+.modal-content {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  width: 400px;
+  text-align: center;
+  z-index: 50000;
+}
+
+.open {
+  transform: rotate(15deg);
+}
+
+.open_inv {
+  transform: rotate(-15deg);
+}
+
 /* Wrapper */
 #wrapper {
   display: -moz-flex;

static/js/modal_handler.js

@@ -0,0 +1,27 @@
+// Open a specific modal
+function openModal(modalId) {
+    const modal = document.getElementById(modalId);
+    if (modal) {
+        modal.style.display = 'flex';
+    } else {
+        console.error(`Modal with ID "${modalId}" not found.`);
+    }
+}
+
+// Close a specific modal
+function closeModal(modalId) {
+    const modal = document.getElementById(modalId);
+    if (modal) {
+        modal.style.display = 'none';
+    } else {
+        console.error(`Modal with ID "${modalId}" not found.`);
+    }
+}
+
+// Ensure all modals are hidden on page load
+document.addEventListener('DOMContentLoaded', () => {
+    const modals = document.querySelectorAll('.modal'); // Select all modals
+    modals.forEach(modal => {
+        modal.style.display = 'none';
+    });
+});

static/sass/components/_modals.scss

@@ -0,0 +1,43 @@
+// Variables
+$modal-bg: rgba(0, 0, 0, 0.3);
+$modal-blur: 8px;
+$modal-z-index: 999999;
+$modal-content-z-index: 50000;
+$modal-content-bg: #fff;
+$modal-content-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+
+// Modal background with blur effect
+.modal {
+  display: none; // Hidden by default
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: $modal-bg; // Semi-transparent dark background
+  backdrop-filter: blur($modal-blur); // Blurs everything behind the modal
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: $modal-z-index; // Ensure it stays on top
+}
+
+// Modal content
+.modal-content {
+  background-color: $modal-content-bg;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: $modal-content-shadow;
+  width: 400px;
+  text-align: center;
+  z-index: $modal-content-z-index; // Content stays above the blurred overlay
+}
+
+// Rotating buttons
+.open {
+  transform: rotate(15deg); // Rotates button 15 degrees clockwise
+}
+
+.open_inv {
+  transform: rotate(-15deg); // Rotates button 15 degrees counterclockwise
+}

static/sass/main.scss

@@ -50,6 +50,7 @@
 	@import 'components/mini-posts';
 	@import 'components/features';
 	@import 'components/posts';
+	@import 'components/modals';
 
 // Layout.