Initial commit

2025-05-29 09:14:36 -06:00 · 2025-05-29 09:14:36 -06:00 · ee7195b82a
commit ee7195b82a
parent 32aad3bfd3
22 changed files with 2067 additions and 781 deletions
--- a/src/blockquote.html
+++ b/src/blockquote.html
@ -0,0 +1,13 @@
+<script props>
+  module.exports = {
+    cite: props.cite || ''
+  }
+</script>
+<center style="margin: 16px;">
+  <blockquote>
+    <markdown>
+      <yield></yield>
+    </markdown>
+  </blockquote>
+  <p>—{{cite}}</p>
+</center>
--- a/src/index.html
+++ b/src/index.html
@ -1,13 +1,283 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Parcel Vanilla App</title>
-    <link rel="stylesheet" href="style.css">
-  </head>
-  <body>
-    <h1>Parcel Vanilla App</h1>
-    <p>Edit <code>src/index.html</code> to get started!</p>
-  </body>
-</html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="color-scheme" content="dark">
+  <title>The SANDWICH</title>
+  <link rel="stylesheet" href="style.css">
+  <link rel="icon" href="/assets/favicon.ico" sizes="16x16 32x32">
+  <link rel="icon" href="/assets/favicon.svg" type="image/svg+xml">
+  <link rel="apple-touch-icon" href="/assets/apple-touch-icon.png">
+  <script type="module">
+    window.htmx = require('htmx.org');
+  </script>
+  <style>
+    .flex-container {
+      display: flex;
+
+      justify-content: center;
+      align-items: center;
+      /* flex-flow: column; */
+      flex-direction: column;
+
+      height: 100%;
+      gap: 5px;
+
+    }
+
+    /* From https://codepen.io/Knovour/pen/boJNPN */
+    .marquee {
+      margin: 0;
+      padding: 0;
+      color: #343434;
+      font-size: 72px;
+      font-weight: bold;
+      position: relative;
+      width: 100vw;
+      max-width: 100%;
+      height: 80px;
+      line-height: 1.0;
+      overflow-x: hidden;
+    }
+
+    .track {
+      position: absolute;
+      white-space: nowrap;
+      will-change: transform;
+      animation: marquee 32s linear infinite;
+    }
+
+    @keyframes marquee {
+      from {
+        transform: translateX(0);
+      }
+
+      to {
+        transform: translateX(-50%);
+      }
+    }
+  </style>
+</head>
+
+
+<body>
+  <iframe id="tubes" src="https://1j01.github.io/pipes/#{%22hideUI%22:true}" loading="lazy"
+    style="position: fixed; left: 0; top: 0; height: 100%; width: 100%; border-width: 0; display: none; z-index: 0;"></iframe>
+  <center id="page-content">
+    <x-marquee>&nbsp; THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE
+      SANDWICH THE SANDWICH
+      THE
+      SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH</x-marquee>
+    <x-marquee>&nbsp; THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE
+      SANDWICH THE SANDWICH
+      THE
+      SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH</x-marquee>
+    <x-marquee>&nbsp; THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE
+      SANDWICH THE SANDWICH
+      THE
+      SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH</x-marquee>
+    <x-marquee>&nbsp; THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE
+      SANDWICH THE SANDWICH
+      THE
+      SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH THE SANDWICH</x-marquee>
+    <div style="position: relative; pointer-events: none;" class="flex-container">
+      <img id="logo" class="icon" src="/assets/icon.svg"
+        style="position: absolute; height: calc(min(512px, 95vw) + var(--energy));">
+      <div id="audioContainer" style="position: absolute;"></div>
+    </div>
+    <div style="height: min(30vw, 150px);"></div>
+    <audio id="player" src="/assets/westside.opus" loop></audio>
+    <audio id="player-spaghetti" src="/assets/mario.opus"></audio>
+    <div id="page-content-content">
+      <center style="margin: 16px;">
+        <h1 class="title">Very professional people making<br>very professional things</h1>
+      </center>
+      <center>
+        <div style="margin: 16px; margin-bottom: 32px; width: fit-content; text-align: left;">
+          <h1>Deliverables:</h1>
+          <ul>
+            <li>
+              <input type="checkbox" id="playpause" name="playpause" onclick="westSide()">
+              <label for="playpause">Increase productivity</label>
+            </li>
+            <li>
+              <input id="tube" type="checkbox" onclick="tube()">
+              <label for="tube">Increase tubes</label>
+            </li>
+          </ul>
+        </div>
+      </center>
+      <x-blockquote cite="You, just now">
+        Wow, such professionalism! What are these guys working on now?
+      </x-blockquote>
+      <x-project img="/assets/tysoncloud.svg">
+        <fill:title># TYSONCLOUD</fill:title>
+        <fill:subtitle>## When she computes your edge 'till you serve</fill:subtitle>
+        <fill:description>
+          <markdown>
+            You're really gonna give up your web baby to big cloud? _Non-sense!_ Slap that baby
+            into
+            the loving arms of Tyson Jenkins at **TYSONCLOUD**! Don't worry, he pesonally makes sure that every
+            web baby gets exactly one pat on the head each day. That's more than AWS can say about it's web servies!
+          </markdown>
+        </fill:description>
+      </x-project>
+      <x-project img="/assets/simulo.svg" href="https://github.com/richgrov/simulo" onclick="spaghetti()"
+        class="project-alt">
+        <fill:title># Simulo</fill:title>
+        <fill:subtitle>## Super Mario in real life</fill:subtitle>
+        <fill:description>
+          <markdown>
+            Imagine Ready Play One, but with minimum dystopia. **Simulo** allows you to use the _Earth_ as
+            your
+            game
+            engine!
+            We've all been in that sticky situation where you wanna play soccer with the boys but you forgot to bring
+            a
+            soccer ball, _however_ you happen to have a $600 laser projector on you. Now with Simulo, no more will
+            your
+            soccer seshes be ruined by your idiotic forgetfulness.
+          </markdown>
+        </fill:description>
+      </x-project>
+      <x-project svg="assets/c0re.svg" href="https://c0re.com">
+        <fill:title>
+          # c0re
+          #### So shiny!
+        </fill:title>
+        <fill:subtitle>## Git gud scrub!</fill:subtitle>
+        <fill:description>
+          <markdown>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+            labore
+            et
+            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+            ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+            fugiat
+            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+            anim id est laborum.
+          </markdown>
+        </fill:description>
+      </x-project>
+      <x-project svg="assets/c0re.svg" href="https://github.com/StratusFearMe21/grezi-next" class="project-alt">
+        <fill:title># Grezi</fill:title>
+        <fill:subtitle>## When the power is point</fill:subtitle>
+        <fill:description>
+          <markdown>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+            labore
+            et
+            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+            ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+            fugiat
+            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+            anim id est laborum.
+          </markdown>
+        </fill:description>
+      </x-project>
+      <x-project text="?">
+        <fill:title># Mystery</fill:title>
+        <fill:subtitle>## Oooooooo</fill:subtitle>
+        <fill:description>
+          <markdown>Nobody knows what this project is gonna be. The creator, Josh, won't tell anyone.</markdown>
+          <form hx-post="/api/speculate">
+            <label for="speculation">
+              Speculate about the <i>secret</i> project below:
+            </label><br>
+            <textarea name="speculation" id="speculation"></textarea>
+            <input type="submit" value="Speculate!">
+          </form>
+        </fill:description>
+      </x-project>
+      <x-blockquote cite="Your mom, last night">
+        OMG these projects are so skibidi! I must know the rizzlers behind them!
+      </x-blockquote>
+    </div>
+    <div style="background-color: #484848;">
+      <p style="font-size: 8pt;">Copyright, The SANDWICH™ 2025 ©®☺ⓖⓨⓐⓣⓣ</p>
+    </div>
+  </center>
+
+  <style>
+    .icon {
+      height: 128px;
+      display: block;
+      margin: auto;
+      /* width: 50%; */
+      /* animation: spinner-1o3y8q 10s infinite linear; */
+    }
+
+    #core-conic,
+    /* Mesh gradiants are rasterized to an
+    <image> in most browsers. We rotate
+    that generated image */
+    svg image {
+      transform-origin: 50% 50%;
+      animation: spin 15s infinite linear;
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  </style>
+  <script>
+    document.getElementById('playpause').checked = false
+    document.getElementById('tube').checked = false
+    function spaghetti() {
+      var player = document.getElementById('player-spaghetti');
+
+      if (player.paused) {
+        player.play()
+      } else {
+        player.pause()
+      }
+    }
+    function westSide() {
+      var player = document.getElementById('player');
+
+      if (player.paused) {
+        player.play()
+      } else {
+        player.pause()
+      }
+    }
+    function tube() {
+      const tubeBg = document.getElementById('tubes');
+      const pageContent = document.getElementById("page-content");
+
+      if (tubeBg.style.display == "block") {
+        tubeBg.style.display = "none";
+        pageContent.style.backgroundImage = "linear-gradient(to bottom, rgb(0, 0, 0), #636363 1024px)";
+      } else {
+        tubeBg.style.display = "block";
+        pageContent.style.backgroundImage = "linear-gradient(to bottom, rgb(0, 0, 0, 0), #636363BE 768px)";
+      }
+    }
+  </script>
+  <script type="module">
+    import AudioMotionAnalyzer from 'audiomotion-analyzer';
+    const container = document.getElementById('audioContainer');
+    const audioSource = document.getElementById('player');
+    const audioMotion = new AudioMotionAnalyzer(container, {source: audioSource});
+    audioMotion.registerGradient('sandwich', {
+      dir: 'h',           // add this property to create a horizontal gradient (optional)
+      colorStops: [       // list your gradient colors in this array (at least one color is required)
+        {color: '#957b09', pos: .0},  // use `level` to set the max bar amplitude (0 to 1) to use this color
+        {color: '#f8d170', pos: .65}, // in an object, use `pos` to adjust the offset (0 to 1) of a colorStop
+      ]
+    });
+    audioMotion.setOptions({source: audioSource, height: 256, overlay: true, bgAlpha: 0.0, showScaleX: false, gradient: 'sandwich', ledBars: true, mode: 7, reflexRatio: 0.5, reflexAlpha: 1.0, alphaBars: true, weightingFilter: '468', onCanvasDraw: drawCallback});
+
+
+    function drawCallback(instance, info) {
+      const energy = instance.getEnergy() * 256;
+      document.documentElement.style.setProperty('--energy', energy + 'px');
+    }
+  </script>
+</body>
+
+</html>
--- a/src/marquee.html
+++ b/src/marquee.html
@ -0,0 +1,7 @@
+<div class="marquee">
+  <div class="track">
+    <div class="content">
+      <yield></yield>
+    </div>
+  </div>
+</div>
--- a/src/project.html
+++ b/src/project.html
@ -0,0 +1,37 @@
+<script props>
+  module.exports = {
+    img: props.img || '',
+    svg: props.svg || '',
+    text: props.text || '',
+    href: props.href || '/',
+    onclick: props.onclick || ''
+  }
+</script>
+<div class="project">
+  <div class="project-title" style="min-width: 275px;">
+    <a href="{{href}}" target="_blank">
+      <if condition="img != ''">
+        <img class="figure" src="{{img}}">
+      </if>
+      <if condition="svg != ''">
+        <div class="figure">
+          <include src="{{svg}}"></include>
+        </div>
+      </if>
+      <if condition="text != ''">
+        <p style="font-size: 200px; text-align: center; margin: 0; padding: 0;">{{text}}</p>
+      </if>
+      <markdown>
+        <slot:title />
+      </markdown>
+    </a>
+  </div>
+  <div class="description">
+    <div onclick="{{onclick}}">
+      <markdown>
+        <slot:subtitle />
+      </markdown>
+    </div>
+    <slot:description />
+  </div>
+</div>
--- a/src/style.css
+++ b/src/style.css
@ -1,8 +1,135 @@
+:root {
+  --energy: 0px;
+}
+
+.title {
+  font-size: min(10vw, 36pt);
+  margin-bottom: 48px;
+}
+
+
+center:has(> blockquote) {
+  margin: 10px auto;
+  font-size: min(5vw, 22pt);
+  padding: 15px;
+  border-radius: 5px;
+}
+
+blockquote p {
+  text-align: center;
+}
+
+blockquote p::before {
+  content: "\201C";
+}
+
+blockquote p::after {
+  content: "\201D";
+}
+
+blockquote+p {
+  text-align: right;
+}
+
 html {
  color-scheme: light dark;
  font-family: system-ui;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
 }
+
+
+#page-content {
+  background-image: linear-gradient(to bottom, #000000, #636363 1024px);
+}
+
+#page-content-content {
+  width: min(100%, 1024px);
+}
+
+#page-content,
+#page-content>* {
+  position: relative;
+  z-index: 1;
+}
+
+.project {
+  background-color: #484848;
+  padding: 16px 24px;
+  display: flex;
+  align-content: space-around;
+  align-items: center;
+  margin: 32px;
+}
+
+
+.project>div {
+  padding: 16px;
+}
+
+
+img.figure,
+.figure>svg {
+  width: 80%;
+}
+
+.figure>svg {
+  height: 80%;
+}
+
+.project-title h1 {
+  font-size: 24pt;
+}
+
+.project-alt {
+  flex-direction: row-reverse;
+}
+
+
+@media only screen and (max-width: 700px) {
+  .project {
+    flex-direction: column;
+    padding: 32px;
+  }
+
+  .project>div {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  blockquote {
+    margin: 0px auto;
+  }
+}
+
+body {
+  margin: 0;
+}
+
+h1 {
+  font-size: 32pt;
+  /* margin: 0; */
+}
+
+input[type="checkbox"] {
+  transform: scale(1.5);
+  margin: 10px;
+}
+
+li,
+p {
+  font-size: 16pt;
+  text-align: left;
+}
+
+form {
+  text-align: left;
+}
+
+textarea {
+  width: 100%;
+}
+
+a {
+  color: inherit;
+  /* no underline */
+  text-decoration: none;
+}