update

2026-05-17 15:30:11 +05:30
commit cae37e5af7
23 changed files with 3607 additions and 0 deletions
--- a/public/3/center.html
+++ b/public/3/center.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Stacked Iframes with Opacity & Scrollbar</title>
+  <style>
+    /* common full-screen container */
+    .full-screen {
+      position: fixed;
+      top: 0; left: 0;
+      width: 100vw;
+      height: 100vh;
+      margin: 0; padding: 0;
+      overflow: hidden;
+    }
+
+    /* background layer (fills entire screen again) */
+    #layer1 {
+      z-index: 1;
+    }
+
+    /* top layer: semi-transparent + scrollable */
+    #layer2 {
+      z-index: 2;
+      opacity: 0.7;
+      /* overflow-y: scroll; */
+    }
+
+    /* restore: every full-screen iframe fills its parent */
+    .full-screen iframe {
+      display: block;
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+
+    /* stack two 100vh-high iframes inside layer2 */
+    #layer2 iframe {
+      height: 100vh; /* overrides the 100% so each iframe is full viewport */
+    }
+
+    /* custom cyan scrollbar for WebKit */
+    #layer2::-webkit-scrollbar {
+      width: 12px;
+    }
+    #layer2::-webkit-scrollbar-thumb {
+      background: cyan;
+      border-radius: 6px;
+    }
+
+    /* custom scrollbar for Firefox */
+    #layer2 {
+      scrollbar-color: cyan transparent;
+      scrollbar-width: thin;
+    }
+  </style>
+</head>
+<body>
+  <!-- Background layer, now again truly full-screen -->
+  <div id="layer1" class="full-screen">
+    <iframe src="../3/arc_reactor.html"></iframe>
+  </div>
+
+  <!-- Top layer: semi-transparent, scrollable, two iframes -->
+  <div id="layer2" class="full-screen">
+    <iframe id="chat" src="../3/Chat_page.html"></iframe>
+    <!-- <iframe src="../3/Chat_page.html"></iframe> -->
+  </div>
+
+
+  
+
+
+
+  <script>
+    // Listen for messages from the parent
+    window.addEventListener('message', (event) => {
+      if (event.origin !== window.location.origin) return; // Security check
+
+      const message__object  = event.data;      
+      
+      const id_of_recipant__iframe_element = document.getElementById('chat').contentWindow;
+      id_of_recipant__iframe_element.postMessage(message__object, '*'); // Forward to iframe2
+    });
+  </script>
+
+  <!-- <p id="output">No message yet.</p> -->
+</body>
+</html>