Isaac Mills
39032776b4
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
311 lines
No EOL
12 KiB
HTML
311 lines
No EOL
12 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<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> 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> 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> 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> 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 compute your serve 'till you edge</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 Player 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>
|
|
Crush your friends in the game of life and get receipts using **c0re**! Gamify the effort of surpassing your
|
|
peers in every possible area and become objectively and quantifiably the _best_ person.
|
|
</markdown>
|
|
<p>Join the fray, and become your best self <span id="c0re-countup"></span> ago!</p>
|
|
<script>
|
|
// Code from https://www.w3schools.com/howto/howto_js_countdown.asp
|
|
// Set the date we're counting down to
|
|
var countDownDate = new Date("March 7, 2025").getTime();
|
|
|
|
function countup() {
|
|
// Get today's date and time
|
|
var now = new Date().getTime();
|
|
|
|
// Find the distance between now and the count down date
|
|
var distance = now - countDownDate;
|
|
|
|
// Time calculations for days, hours, minutes and seconds
|
|
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
|
|
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
|
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
|
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
|
|
|
// Output the result in an element with id="demo"
|
|
document.getElementById("c0re-countup").innerHTML = days + "d " + hours + "h "
|
|
+ minutes + "m " + seconds + "s ";
|
|
|
|
|
|
}
|
|
countup();
|
|
// Update the count down every 1 second
|
|
var x = setInterval(countup, 1000);
|
|
</script>
|
|
</fill:description>
|
|
</x-project>
|
|
<x-blockquote cite="The Washington Post">
|
|
Please stop sending your projects to the review department
|
|
</x-blockquote>
|
|
<x-project text="e" 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>
|
|
Imagine a slideshow, but with extra lizard brain! That's what Grezi is. On top of making your
|
|
presentation extra skibidi bop bop yes yes, it also allows you to write your presentation with a markup
|
|
language! Instead of dragging things around on a slide, you can open notepad and make your silly text move
|
|
around on the screen that way. What an incredible innovation!
|
|
</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" hx-target="#speculation-result">
|
|
<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>
|
|
<div id="speculation-result"></div>
|
|
</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>
|
|
<x-project text="?">
|
|
<fill:title># Coming soon to theaters</fill:title>
|
|
<fill:subtitle>## This website is under construction</fill:subtitle>
|
|
<fill:description>We'll get to it, trust</fill:description>
|
|
</x-project>
|
|
</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> |