This commit is contained in:
parent
32aad3bfd3
commit
ee7195b82a
GPG key ID:
B67D7410F33A0F61
22 changed files with 2067 additions and 781 deletions
7
.htmlnanorc
Normal file
7
.htmlnanorc
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"minifySvg": {
|
||||||
|
"plugins": [
|
||||||
|
{ "removeUnknownsAndDefaults": false }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
10
.parcelrc
Normal file
10
.parcelrc
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"extends": "@parcel/config-default",
|
||||||
|
"compressors": {
|
||||||
|
"*.{html,css,js,svg,map}": [
|
||||||
|
"...",
|
||||||
|
"@parcel/compressor-gzip",
|
||||||
|
"@parcel/compressor-brotli"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
9
.posthtmlrc
Normal file
9
.posthtmlrc
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
{
|
||||||
|
"plugins": {
|
||||||
|
"posthtml-component": {
|
||||||
|
"root": "./src"
|
||||||
|
},
|
||||||
|
"posthtml-include": {},
|
||||||
|
"posthtml-markdownit": {}
|
||||||
|
}
|
||||||
|
}
|
||||||
16
.woodpecker.yml
Normal file
16
.woodpecker.yml
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
steps:
|
||||||
|
- name: build
|
||||||
|
image: node:20-slim
|
||||||
|
environment:
|
||||||
|
PNPM_HOME: /pnpm
|
||||||
|
PATH: "/pnpm:$PATH"
|
||||||
|
commands:
|
||||||
|
- corepack enable
|
||||||
|
- pnpm install
|
||||||
|
- pnpm run build --no-chache
|
||||||
|
- rm -rf /var/woodpecker/thesandwich/*
|
||||||
|
- mv dist/* /var/woodpecker/thesandwich/
|
||||||
|
volumes:
|
||||||
|
- /var/woodpecker:/var/woodpecker
|
||||||
|
- /usr/share/fonts:/usr/share/fonts
|
||||||
|
- /usr/lib/helix/runtime/:/usr/lib/helix/runtime/
|
||||||
BIN
assets/apple-touch-icon.png
Normal file
BIN
assets/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
363
assets/c0re.svg
Normal file
363
assets/c0re.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 50 KiB |
BIN
assets/createdwith.jpeg
Normal file
BIN
assets/createdwith.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
assets/favicon.ico
Normal file
BIN
assets/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
71
assets/favicon.svg
Normal file
71
assets/favicon.svg
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
width="1024"
|
||||||
|
height="1024"
|
||||||
|
viewBox="0 0 1024 1024"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs1">
|
||||||
|
<linearGradient
|
||||||
|
id="linearGradient5">
|
||||||
|
<stop
|
||||||
|
style="stop-color:#957b09;stop-opacity:1;"
|
||||||
|
offset="0"
|
||||||
|
id="stop5" />
|
||||||
|
<stop
|
||||||
|
style="stop-color:#f8d170;stop-opacity:1;"
|
||||||
|
offset="0.64978778"
|
||||||
|
id="stop6" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
id="linearGradient1">
|
||||||
|
<stop
|
||||||
|
style="stop-color:#000000;stop-opacity:1;"
|
||||||
|
offset="0"
|
||||||
|
id="stop1" />
|
||||||
|
<stop
|
||||||
|
style="stop-color:#636363;stop-opacity:1;"
|
||||||
|
offset="0.65339267"
|
||||||
|
id="stop2" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
xlink:href="#linearGradient1"
|
||||||
|
id="linearGradient2"
|
||||||
|
x1="0"
|
||||||
|
y1="1024"
|
||||||
|
x2="1024"
|
||||||
|
y2="0"
|
||||||
|
gradientUnits="userSpaceOnUse" />
|
||||||
|
<linearGradient
|
||||||
|
xlink:href="#linearGradient5"
|
||||||
|
id="linearGradient6"
|
||||||
|
x1="238.13318"
|
||||||
|
y1="785.09656"
|
||||||
|
x2="784.8255"
|
||||||
|
y2="237.32028"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
gradientTransform="translate(0.520675,0.791595)" />
|
||||||
|
</defs>
|
||||||
|
<g
|
||||||
|
id="g1">
|
||||||
|
<rect
|
||||||
|
style="display:inline;opacity:1;fill:url(#linearGradient2);fill-opacity:1;stroke:none;stroke-width:1.88976;stroke-linejoin:round"
|
||||||
|
id="rect1"
|
||||||
|
width="1024"
|
||||||
|
height="1024"
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
rx="5.1585231"
|
||||||
|
ry="5.1585231" />
|
||||||
|
<path
|
||||||
|
id="path5"
|
||||||
|
style="opacity:1;fill:none;fill-opacity:1;stroke:url(#linearGradient6);stroke-width:55;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 266.15385,265.61187 757.84614,757.30416 M 512.52067,266.40345 V 759.17973 M 266.15385,265.61187 H 757.84614 V 758.38812 H 266.15385 Z" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2 KiB |
102
assets/icon.svg
Normal file
102
assets/icon.svg
Normal file
|
|
@ -0,0 +1,102 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
width="1024"
|
||||||
|
height="1024"
|
||||||
|
viewBox="0 0 1024 1024"
|
||||||
|
sodipodi:docname="icon.svg"
|
||||||
|
inkscape:version="1.4.1 (93de688d07, 2025-03-30)"
|
||||||
|
inkscape:export-filename="icon.png"
|
||||||
|
inkscape:export-xdpi="6"
|
||||||
|
inkscape:export-ydpi="6"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs1">
|
||||||
|
<linearGradient
|
||||||
|
id="linearGradient5"
|
||||||
|
inkscape:collect="always">
|
||||||
|
<stop
|
||||||
|
style="stop-color:#957b09;stop-opacity:1;"
|
||||||
|
offset="0"
|
||||||
|
id="stop5" />
|
||||||
|
<stop
|
||||||
|
style="stop-color:#f8d170;stop-opacity:1;"
|
||||||
|
offset="0.64978778"
|
||||||
|
id="stop6" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
id="linearGradient1"
|
||||||
|
inkscape:collect="always">
|
||||||
|
<stop
|
||||||
|
style="stop-color:#000000;stop-opacity:1;"
|
||||||
|
offset="0"
|
||||||
|
id="stop1" />
|
||||||
|
<stop
|
||||||
|
style="stop-color:#636363;stop-opacity:1;"
|
||||||
|
offset="0.65339267"
|
||||||
|
id="stop2" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
xlink:href="#linearGradient1"
|
||||||
|
id="linearGradient2"
|
||||||
|
x1="0"
|
||||||
|
y1="1024"
|
||||||
|
x2="1024"
|
||||||
|
y2="0"
|
||||||
|
gradientUnits="userSpaceOnUse" />
|
||||||
|
<linearGradient
|
||||||
|
inkscape:collect="always"
|
||||||
|
xlink:href="#linearGradient5"
|
||||||
|
id="linearGradient6"
|
||||||
|
x1="238.13318"
|
||||||
|
y1="785.09656"
|
||||||
|
x2="784.8255"
|
||||||
|
y2="237.32028"
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
gradientTransform="translate(0.520675,0.791595)" />
|
||||||
|
</defs>
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview1"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:zoom="0.35090702"
|
||||||
|
inkscape:cx="471.63491"
|
||||||
|
inkscape:cy="387.56706"
|
||||||
|
inkscape:window-width="1727"
|
||||||
|
inkscape:window-height="1057"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:current-layer="g1" />
|
||||||
|
<g
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
inkscape:label="Image"
|
||||||
|
id="g1">
|
||||||
|
<rect
|
||||||
|
style="display:none;opacity:1;fill:url(#linearGradient2);fill-opacity:1;stroke:none;stroke-width:1.88976;stroke-linejoin:round"
|
||||||
|
id="rect1"
|
||||||
|
width="1024"
|
||||||
|
height="1024"
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
rx="5.1585231"
|
||||||
|
ry="5.1585231" />
|
||||||
|
<path
|
||||||
|
id="path5"
|
||||||
|
style="opacity:1;fill:none;fill-opacity:1;stroke:url(#linearGradient6);stroke-width:55;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 266.15385,265.61187 757.84614,757.30416 M 512.52067,266.40345 V 759.17973 M 266.15385,265.61187 H 757.84614 V 758.38812 H 266.15385 Z" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3 KiB |
BIN
assets/mario.opus
Normal file
BIN
assets/mario.opus
Normal file
Binary file not shown.
76
assets/simulo.svg
Normal file
76
assets/simulo.svg
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
xml:space="preserve"
|
||||||
|
width="512"
|
||||||
|
height="512"
|
||||||
|
viewbox="0 0 512 512"
|
||||||
|
sodipodi:docname="simulo.svg"
|
||||||
|
inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"><defs
|
||||||
|
id="defs1"><filter
|
||||||
|
style="color-interpolation-filters:sRGB"
|
||||||
|
inkscape:label="Drop Shadow"
|
||||||
|
id="filter22"
|
||||||
|
x="-0.19533082"
|
||||||
|
y="-0.2255481"
|
||||||
|
width="1.3906616"
|
||||||
|
height="1.4510962"><feFlood
|
||||||
|
result="flood"
|
||||||
|
in="SourceGraphic"
|
||||||
|
flood-opacity="1.000000"
|
||||||
|
flood-color="rgb(255,255,255)"
|
||||||
|
id="feFlood21" /><feGaussianBlur
|
||||||
|
result="blur"
|
||||||
|
in="SourceGraphic"
|
||||||
|
stdDeviation="10.000000"
|
||||||
|
id="feGaussianBlur21" /><feOffset
|
||||||
|
result="offset"
|
||||||
|
in="blur"
|
||||||
|
dx="0.000000"
|
||||||
|
dy="0.000000"
|
||||||
|
id="feOffset21" /><feComposite
|
||||||
|
result="comp1"
|
||||||
|
operator="in"
|
||||||
|
in="flood"
|
||||||
|
in2="offset"
|
||||||
|
id="feComposite21" /><feComposite
|
||||||
|
result="comp2"
|
||||||
|
operator="over"
|
||||||
|
in="SourceGraphic"
|
||||||
|
in2="comp1"
|
||||||
|
id="feComposite22" /></filter></defs><sodipodi:namedview
|
||||||
|
id="namedview1"
|
||||||
|
pagecolor="#000000"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:zoom="1.2620189"
|
||||||
|
inkscape:cx="158.47623"
|
||||||
|
inkscape:cy="465.92012"
|
||||||
|
inkscape:window-width="990"
|
||||||
|
inkscape:window-height="1057"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:current-layer="layer1" /><inkscape:clipboard
|
||||||
|
style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;stroke-width:9.4488189;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;filter:url(#filter22);stop-color:#000000;stop-opacity:1"
|
||||||
|
min="73.949545,202.43782"
|
||||||
|
max="719.75163,786.02505"
|
||||||
|
geom-min="164.6582,293.14648"
|
||||||
|
geom-max="629.04299,695.3164" /><g
|
||||||
|
id="layer1"
|
||||||
|
transform="matrix(3.7795276,0,0,3.7795276,-73.949545,-202.43783)"><path
|
||||||
|
d="M 87.298887,68.091283 56.581901,121.29527 53.123198,127.28612 86.863777,138.97585 H 46.373739 L 25.864913,174.49874 H 87.298887 148.73339 L 118.0164,121.29527 114.61144,115.39796 87.849247,103.86688 H 107.95396 Z"
|
||||||
|
style="fill:#ffffff;fill-opacity:1;stroke-width:2.5;stroke-linecap:square;stroke-miterlimit:0;filter:url(#filter22)"
|
||||||
|
id="path4"
|
||||||
|
transform="matrix(0.79281252,0,0,0.79281252,18.087291,25.130807)" /></g></svg>
|
||||||
|
After Width: | Height: | Size: 3 KiB |
100
assets/tysoncloud.svg
Normal file
100
assets/tysoncloud.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
BIN
assets/westside.opus
Normal file
BIN
assets/westside.opus
Normal file
Binary file not shown.
BIN
icon.png
Normal file
BIN
icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
16
package.json
16
package.json
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"name": "parcel-vanilla-starter",
|
"name": "thesandwich",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"source": "src/index.html",
|
"source": "src/index.html",
|
||||||
|
|
@ -7,8 +7,18 @@
|
||||||
"start": "parcel",
|
"start": "parcel",
|
||||||
"build": "parcel build"
|
"build": "parcel build"
|
||||||
},
|
},
|
||||||
"dependencies": {},
|
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"parcel": "^2.14.0"
|
"@parcel/compressor-brotli": "^2.15.2",
|
||||||
|
"@parcel/compressor-gzip": "^2.15.2",
|
||||||
|
"@parcel/config-default": "^2.15.2",
|
||||||
|
"parcel": "^2.15.2",
|
||||||
|
"posthtml": "^0.16.6",
|
||||||
|
"posthtml-component": "^2.1.0",
|
||||||
|
"posthtml-include": "^2.0.1",
|
||||||
|
"posthtml-markdownit": "^3.1.1"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"audiomotion-analyzer": "^4.5.0",
|
||||||
|
"htmx.org": "^1.9.12"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
1594
pnpm-lock.yaml
generated
1594
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load diff
13
src/blockquote.html
Normal file
13
src/blockquote.html
Normal file
|
|
@ -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>
|
||||||
276
src/index.html
276
src/index.html
|
|
@ -1,13 +1,283 @@
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Parcel Vanilla App</title>
|
<meta name="color-scheme" content="dark">
|
||||||
|
<title>The SANDWICH</title>
|
||||||
<link rel="stylesheet" href="style.css">
|
<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>
|
</head>
|
||||||
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>Parcel Vanilla App</h1>
|
<iframe id="tubes" src="https://1j01.github.io/pipes/#{%22hideUI%22:true}" loading="lazy"
|
||||||
<p>Edit <code>src/index.html</code> to get started!</p>
|
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 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>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
7
src/marquee.html
Normal file
7
src/marquee.html
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<div class="marquee">
|
||||||
|
<div class="track">
|
||||||
|
<div class="content">
|
||||||
|
<yield></yield>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
37
src/project.html
Normal file
37
src/project.html
Normal file
|
|
@ -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>
|
||||||
135
src/style.css
135
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 {
|
html {
|
||||||
color-scheme: light dark;
|
color-scheme: light dark;
|
||||||
font-family: system-ui;
|
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;
|
||||||
}
|
}
|
||||||
Loading…
Add table
Reference in a new issue