This commit is contained in:
parent
96bc6da8d4
commit
1a6877e91d
GPG key ID:
B67D7410F33A0F61
9 changed files with 186 additions and 175 deletions
223
src/components/head.html
Normal file
223
src/components/head.html
Normal file
|
|
@ -0,0 +1,223 @@
|
|||
<!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="stylesheet" href="apex.css">
|
||||
<link rel="preload" href="/assets/ApexMk2-Regular.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/assets/ApexMk2-LightCondensed.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<link rel="preload" href="/assets/ApexMk2-BoldExtended.woff2" as="font" type="font/woff2" crossorigin>
|
||||
<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>
|
||||
<meta name="htmx-config" content='{"responseHandling": [{"code":"204", "swap": false},{"code":"...", "swap": true}]}'>
|
||||
<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%);
|
||||
}
|
||||
}
|
||||
|
||||
#indicator {
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</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(275px, 50vw) + var(--energy)); overflow: hidden;">
|
||||
<div id="audioContainer" style="position: absolute;width:100%"></div>
|
||||
</div>
|
||||
<div style="height: min(30vw, 150px);"></div>
|
||||
<audio preload="none" id="player" src="/assets/westside.opus" loop></audio>
|
||||
<audio preload="none" 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>
|
||||
<center>
|
||||
<img id="indicator" class="htmx-indicator" width="64" height="64" src="/assets/spinner.svg">
|
||||
</center>
|
||||
<div id="tabs" hx-target="#tabs" hx-swap="innerHTML">
|
||||
<yield></yield>
|
||||
</div>
|
||||
</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() * 150;
|
||||
document.documentElement.style.setProperty('--energy', energy + 'px');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -4,13 +4,15 @@
|
|||
}
|
||||
</script>
|
||||
<nav class="tab-list" role="tablist" hx-indicator="#indicator">
|
||||
<button hx-get="/projects.html" class="{{ selected-- == 0 ? 'selected' : '' }}" role="tab"
|
||||
aria-selected="{{ selected == -1 ? 'true' : 'false' }}" aria-controls="tab-content">Our
|
||||
<button hx-get="/partials/projects.html" hx-push-url="/projects.html" class="{{ selected-- == 0 ? 'selected' : '' }}"
|
||||
role="tab" aria-selected="{{ selected == -1 ? 'true' : 'false' }}" aria-controls="tab-content">Our
|
||||
Projects</button>
|
||||
<button hx-get="/who_we_are.html" class="{{ selected-- == 0 ? 'selected' : '' }}" role="tab"
|
||||
aria-selected="{{ selected == -1 ? 'true' : 'false' }}" aria-controls="tab-content">Who we are</button>
|
||||
<button hx-get="/interests.html" class="{{ selected-- == 0 ? 'selected' : '' }}" role="tab"
|
||||
aria-selected="{{ selected == -1 ? 'true' : 'false' }}" aria-controls="tab-content">Our Interests</button>
|
||||
<button hx-get="/partials/who_we_are.html" hx-push-url="/who_we_are.html"
|
||||
class="{{ selected-- == 0 ? 'selected' : '' }}" role="tab" aria-selected="{{ selected == -1 ? 'true' : 'false' }}"
|
||||
aria-controls="tab-content">Who we are</button>
|
||||
<button hx-get="/partials/interests.html" hx-push-url="/interests.html"
|
||||
class="{{ selected-- == 0 ? 'selected' : '' }}" role="tab" aria-selected="{{ selected == -1 ? 'true' : 'false' }}"
|
||||
aria-controls="tab-content">Our Interests</button>
|
||||
</nav>
|
||||
<hr style="margin: 0">
|
||||
<div id="tab-content" role="tabpanel" class="tab-content">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue