dialog

flok/index.html

@@ -132,6 +132,17 @@
     padding: 0px;
     /* height: 2000px; */
   }
+
+  .dialog-holder {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 </style>
 
 <main>
@@ -158,11 +169,39 @@
     >
   </header>
   <iframe
+    style="display: none"
     sandbox="allow-scripts allow-same-origin allow-forms"
     src="https://flok.cc/s/todepond">
   </iframe>
 </main>
 
+<article class="dialog-holder">
+  <dialog open id="key-information">
+    <h2>welcome to pastagang!</h2>
+    <p>
+      this is a public <a href="https://flok.cc">flok</a> room hosted by
+      <a href="https://todepond.com">todepond</a>.
+    </p>
+    <p>
+      flok is a collaborative environment made by
+      <a href="https://github.com/munshkr">munshkr</a>. please support them on
+      <a href="https://ko-fi.com/munshkr">their kofi</a>.
+    </p>
+    <p><strong>press alt + enter to run code.</strong></p>
+    <p>
+      check out the
+      <a
+        href="https://www.youtube.com/playlist?list=PL9uRa69RF-7wOS5CnK0wy34t5HYgFLIng"
+        >pastagang playlist</a
+      >
+      for some past recordings.
+    </p>
+    <form method="dialog">
+      <button id="cool-button" autofocus>cool</button>
+    </form>
+  </dialog>
+</article>
+
 <script type="module">
   const reloadButton = document.getElementById("reload-button");
   reloadButton.addEventListener("click", () => {
@@ -235,4 +274,21 @@
       }, FADE_TIME);
     }, FADE_TIME);
   }, MANTRA_UPDATE_INTERVAL);
+
+  const iframe = document.querySelector("iframe");
+  const coolButton = document.getElementById("cool-button");
+  const dialogHolder = document.querySelector(".dialog-holder");
+  coolButton.addEventListener("click", () => {
+    document.getElementById("key-information").close();
+    iframe.style.display = "block";
+    dialogHolder.style.display = "none";
+    iframe.focus();
+  });
+
+  dialogHolder.addEventListener("click", (e) => {
+    if (e.target !== dialogHolder) {
+      return;
+    }
+    coolButton.focus();
+  });
 </script>

style.css

@@ -102,6 +102,10 @@ video {
   width: 100%;
 }
 
+dialog a {
+  color: black;
+}
+
 a {
   color: #46ff80;
 }
@@ -221,10 +225,18 @@ summary.button:hover {
   /* transform: scale(1.1); */
 }
 
+dialog {
+  max-width: 400px;
+}
+
 dialog h2 {
   margin: 0px;
 }
 
+button:focus {
+  outline: 2px solid #4680ff;
+}
+
 dialog input[type="password"],
 dialog input[type="text"],
 dialog textarea {
@@ -240,7 +252,9 @@ dialog textarea {
 
 dialog::selection,
 dialog p::selection,
-dialog h2::selection {
+dialog strong::selection,
+dialog h2::selection,
+dialog a::selection {
   background-color: #46ff80;
 }
 
@@ -407,6 +421,14 @@ button {
   color: black;
 }
 
+button:hover {
+  background-color: #46ff80;
+}
+
+summary:hover {
+  background-color: black;
+}
+
 button:disabled {
   cursor: not-allowed;
 }