From 49428a4ffdf136d359d6ffeb4cc089254d99c356 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?=
 =?UTF-8?q?=E3=83=BC=2Eeth?= <gpg@pavlovcik.com>
Date: Sun, 3 Mar 2024 11:05:40 +0900
Subject: [PATCH] feat: devpool spread

---
 static/code/css/ubq.css                       | 45 ++++++++++++++++++-
 .../devpool-directory-spread.ts               | 26 +++++++++++
 .../fetch-total-rewards.ts                    |  7 +++
 static/code/js/ubq.ts                         | 19 +-------
 static/index.html                             | 12 +++--
 5 files changed, 86 insertions(+), 23 deletions(-)
 create mode 100644 static/code/js/devpool-directory-spread/devpool-directory-spread.ts
 create mode 100644 static/code/js/devpool-directory-spread/fetch-total-rewards.ts

diff --git a/static/code/css/ubq.css b/static/code/css/ubq.css
index 02b5537..421fc30 100644
--- a/static/code/css/ubq.css
+++ b/static/code/css/ubq.css
@@ -53,6 +53,7 @@ h1 {
   text-rendering: geometricPrecision;
   font-weight: 400;
   text-align: center;
+  font-size: 36px;
 }
 body.Active foreground > span {
   transition: var(--page-init);
@@ -1127,16 +1128,56 @@ div#down-arrow-wrapper {
 }
 #DevPool {
   margin-top: 100vh;
-  background: #000;
+  /* background: #000; */
+  position: relative;
+  /* background: red; */
 }
 
 #DevPool div {
-  max-width: 640px;
+  /* max-width: 640px; */
   /* width: 100%; */
   /* text-align: center; */
 }
 
+#DevPool h1 {
+  margin-top: 23px;
+  font-size: 40px;
+  /* text-align: left; */
+  line-height: 1.25;
+}
 #DevPool h2,
 #DevPool h3 {
   text-align: center;
 }
+#DevPool #iframe-wrapper {
+  overflow: hidden;
+  height: calc(100% - 57px);
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+#DevPool iframe {
+  -webkit-mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5) 50%, transparent);
+  width: 100%;
+  height: calc(100% + 57px);
+  /* max-width: 640px; */
+  /* max-height: 360px; */
+  margin: 0 auto;
+  /* display: block; */
+  /* position: absolute; */
+  margin-top: -57px;
+  pointer-events: none;
+}
+#DevPool #devpool-overlay {
+  position: absolute;
+  width: 100%;
+  /* height: 100%; */
+  /* top: 0; */
+  transform: translateY(-50%);
+  backdrop-filter: blur(12px);
+  border: 1px solid #202020;
+  border-width: 1px 0;
+  padding-bottom: 24px;
+  background-image: url(../../image/grid-25.png);
+}
diff --git a/static/code/js/devpool-directory-spread/devpool-directory-spread.ts b/static/code/js/devpool-directory-spread/devpool-directory-spread.ts
new file mode 100644
index 0000000..635d486
--- /dev/null
+++ b/static/code/js/devpool-directory-spread/devpool-directory-spread.ts
@@ -0,0 +1,26 @@
+import { fetchTotalRewards } from "./fetch-total-rewards";
+
+export function devPoolSpread() {
+  document.addEventListener("DOMContentLoaded", () => {
+    const iframe = document.querySelector("#DevPool iframe") as HTMLIFrameElement;
+    if (!iframe) throw new Error("No iframe element");
+    const observer = new IntersectionObserver(((entries) => {
+      if (entries[0].isIntersecting) {
+        if (!iframe) throw new Error("No iframe element");
+        iframe.src = "https://work.ubq.fi/";
+        observer.disconnect();
+      }
+    }), {});
+    observer.observe(iframe);
+  });
+
+  fetchTotalRewards()
+    .then((totalRewards) => {
+      const totalRewardsElement = document.getElementById("fetch-total-rewards-target");
+      if (!totalRewardsElement) throw new Error("No total rewards element");
+      totalRewardsElement.innerText = `$${totalRewards} USD in task rewards now.`;
+    })
+    .catch((error) => {
+      console.error("Error fetching total rewards:", error);
+    });
+}
diff --git a/static/code/js/devpool-directory-spread/fetch-total-rewards.ts b/static/code/js/devpool-directory-spread/fetch-total-rewards.ts
new file mode 100644
index 0000000..1018e7b
--- /dev/null
+++ b/static/code/js/devpool-directory-spread/fetch-total-rewards.ts
@@ -0,0 +1,7 @@
+export async function fetchTotalRewards() {
+  const response = await fetch("https://raw.githubusercontent.com/ubiquity/devpool-directory/development/total-rewards.txt");
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  return await response.text();
+}
diff --git a/static/code/js/ubq.ts b/static/code/js/ubq.ts
index 6e66835..78c8dfb 100644
--- a/static/code/js/ubq.ts
+++ b/static/code/js/ubq.ts
@@ -1,3 +1,4 @@
+import { devPoolSpread } from "./devpool-directory-spread/devpool-directory-spread";
 import { logoClick } from "./logo-click";
 import { note } from "./note";
 import { sine } from "./sine";
@@ -51,20 +52,4 @@ grid(gridDynamic);
 
 sine();
 
-async function fetchTotalRewards() {
-  const response = await fetch("https://raw.githubusercontent.com/ubiquity/devpool-directory/development/total-rewards.txt");
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  }
-  return await response.text();
-}
-
-fetchTotalRewards()
-  .then((totalRewards) => {
-    const totalRewardsElement = document.getElementById("fetch-total-rewards-target");
-    if (!totalRewardsElement) throw new Error("No total rewards element");
-    totalRewardsElement.innerText = `$${totalRewards} USD in task rewards now.`;
-  })
-  .catch((error) => {
-    console.error("Error fetching total rewards:", error);
-  });
+devPoolSpread();
diff --git a/static/index.html b/static/index.html
index d2f2a7b..626a336 100644
--- a/static/index.html
+++ b/static/index.html
@@ -56,20 +56,24 @@
 
       <section id="DevPool" class="Active">
         <article>
-          <div>
+          <div id="iframe-wrapper">
+            <iframe src="" frameborder="0"></iframe>
+          </div>
+          <div id="devpool-overlay">
             <header>
-              <h1>Join the DevPool</h1>
+              <h1>Join Ubiquity DAO</h1>
               <aside>Discover the future of work.</aside>
             </header>
             <figure>
               <h2 id="fetch-total-rewards-target"></h2>
-              <h3><a href="https://work.ubq.fi/"><input type="button" value="Contribute" /></a></h3>
+              <h3
+                ><a href="https://work.ubq.fi/"><input type="button" value="View the DevPool Directory" /></a
+              ></h3>
             </figure>
           </div>
         </article>
       </section>
 
-
       <section id="Hero" class="Active">
         <article>
           <div id="Info">