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,
|
||||
"version": "0.0.0",
|
||||
"source": "src/index.html",
|
||||
|
|
@ -7,8 +7,18 @@
|
|||
"start": "parcel",
|
||||
"build": "parcel build"
|
||||
},
|
||||
"dependencies": {},
|
||||
"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>
|
||||
292
src/index.html
292
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> 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>
|
||||
|
||||
</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 {
|
||||
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;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue