add under construciton

social-dist0rtion-protocol · Nov 12, 2024 · 7c3d309 · 7c3d309
1 parent 2aa01fb
commit 7c3d309
Show file tree

Hide file tree

Showing 2 changed files with 153 additions and 0 deletions.
diff --git a/CNAME b/CNAME
@@ -0,0 +1 @@
+sybil-defense.dist0rtion.com
diff --git a/index.html b/index.html
@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>THC as in Treasure Hunt Challenge</title>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+
+      body {
+        --border: calc(1vmin / 4);
+        --sine-ease: cubic-bezier(0.37, 0, 0.63, 1);
+        --dur: 4s;
+        --size: 40vmin;
+        --gap: 4vmin;
+        background-color: #fcecc9;
+        margin: 0;
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transform: translate3d(0, 0, 0);
+        overflow: hidden;
+      }
+
+      .grid div {
+        text-align: center;
+      }
+      .grid {
+        position: relative;
+        display: grid;
+        grid-template:
+          "c y" auto
+          "x b" auto
+          / auto auto;
+        gap: var(--gap);
+        animation: var(--dur) var(--sine-ease) calc(-0.5 * var(--dur)) infinite
+            alternate x,
+          var(--dur) var(--sine-ease) infinite alternate y,
+          calc(var(--dur) * 2) linear infinite rot;
+      }
+
+      .xy-wave {
+        grid-area: b;
+        left: 0;
+        background-blend-mode: color-burn;
+        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 1' preserveAspectRatio='none'><path fill='rgb(249, 57, 67)' d='M 0 1 C .37 1, .63 0, 1 0 C 1.37 0, 1.63 1, 2 1 Z'></path></svg>"),
+          url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 1' preserveAspectRatio='none'><path fill='rgb(126, 178, 221)' d='M 0 1 C .37 1, .63 0, 1 0 C 1.37 0, 1.63 1, 2 1 Z'></path></svg>");
+        background-size: 200% 100%;
+        background-repeat: repeat-x;
+        background-position: center left calc(var(--rot) * 2 * var(--size)),
+          center left calc(var(--size) * 0.5 + (var(--rot) * 2 * var(--size)));
+        border-radius: calc(var(--size) * 0.125);
+      }
+
+      .x-wave,
+      .y-wave,
+      .xy-wave {
+        position: relative;
+        width: var(--size);
+        height: var(--size);
+      }
+
+      .circle,
+      .x-bar,
+      .y-bar {
+        position: relative;
+
+        &:before {
+          content: "";
+          position: absolute;
+          top: var(--top);
+          left: var(--left);
+          height: calc(var(--size) / 32);
+          width: calc(var(--size) / 32);
+          background-color: #fcecc9;
+          border: var(--border) solid var(--color);
+          border-radius: 50%;
+          transform: translate(-50%, -50%);
+          z-index: 1;
+        }
+
+        &:after {
+          content: "";
+          position: absolute;
+        }
+      }
+
+      .x-bar,
+      .y-bar {
+        --length: calc(var(--gap) + ((1 - var(--dim)) * var(--size)));
+        --width: var(--border);
+
+        &:after {
+          background-color: var(--color);
+        }
+      }
+
+      @keyframes x {
+        from {
+          --x: 0;
+        }
+        to {
+          --x: 1;
+        }
+      }
+
+      @keyframes y {
+        from {
+          --y: 0;
+        }
+        to {
+          --y: 1;
+        }
+      }
+
+      @keyframes rot {
+        from {
+          --rot: 0;
+        }
+        to {
+          --rot: 1;
+        }
+      }
+
+      @property --x {
+        syntax: "<number>";
+        inherits: true;
+        initial-value: 0.5;
+      }
+
+      @property --y {
+        syntax: "<number>";
+        inherits: true;
+        initial-value: 0;
+      }
+
+      @property --rot {
+        syntax: "<number>";
+        inherits: true;
+        initial-value: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="grid">
+      <div class="xy-wave">We're setting up.<br />Check back soon.</div>
+    </div>
+  </body>
+</html>