Adding cityscape and junk
This commit is contained in:
Dan
parent
0d21b06acd
commit
c51942e5c0
19 changed files with 1351 additions and 146 deletions
|
|
@ -3,6 +3,8 @@
|
|||
{{ end }}{{ define "main" }}
|
||||
<div class="wall"></div>
|
||||
|
||||
<div class="window">{{ partial "elements/window.html" . }}</div>
|
||||
|
||||
<!-- Neon sign above monitor -->
|
||||
{{ partial "elements/neon-sign.html" . }}
|
||||
|
||||
|
|
@ -67,122 +69,29 @@
|
|||
<div class="desk"></div>
|
||||
|
||||
<!-- Desk monitor -->
|
||||
{{/*
|
||||
<div class="secondary-screen desk-monitor">
|
||||
<div class="screen-display large crt">
|
||||
<span class="cursor-blink">_</span>
|
||||
</div>
|
||||
<div class="monitor-stand-small"></div>
|
||||
</div>
|
||||
*/}}
|
||||
|
||||
<!-- Desk clutter -->
|
||||
{{/*
|
||||
<div class="desk-item keyboard"></div>
|
||||
<div class="desk-item mouse"></div>
|
||||
<div class="desk-item coffee-mug"></div>
|
||||
|
||||
*/}}
|
||||
|
||||
<!-- MUSICAL STUFF -->
|
||||
<a href="/audio/">
|
||||
<div class="music">
|
||||
<div class="music-text">MUSIC & AUDIO GEAR</div>
|
||||
|
||||
<div class="ipod-group">
|
||||
<div class="ipod">
|
||||
<div class="ipod-wheel"></div>
|
||||
</div>
|
||||
|
||||
<!-- Earbud cables within the group container -->
|
||||
<svg class="ipod-cables" viewBox="0 0 150 100" style="overflow: visible">
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="cableGradient"
|
||||
x1="0%"
|
||||
y1="0%"
|
||||
x2="100%"
|
||||
y2="100%"
|
||||
>
|
||||
<stop offset="0%" style="stop-color: #6b4fb3" />
|
||||
<stop offset="100%" style="stop-color: #4169e1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<path
|
||||
d="M 85,3 C 85,-12 75,-22 55,-22 C 35,-22 25,-15 25,0 C 25,15 28,35 32,50 L 35,65"
|
||||
stroke="url(#cableGradient)"
|
||||
stroke-width="2.5"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
|
||||
<path
|
||||
d="M 35,65 C 28,72 20,82 5,88"
|
||||
stroke="url(#cableGradient)"
|
||||
stroke-width="1.8"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
|
||||
<path
|
||||
d="M 35,65 C 55,73 95,82 125,83"
|
||||
stroke="url(#cableGradient)"
|
||||
stroke-width="1.8"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div class="earbud earbud-left"></div>
|
||||
<div class="earbud earbud-right"></div>
|
||||
</div>
|
||||
|
||||
<div class="vu-meter">
|
||||
<div class="vu-meter-body">
|
||||
<div class="vu-meter-screen">
|
||||
<div class="vu-bars crt">
|
||||
<div class="vu-bar" style="--delay: 0s; --height: 45%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.1s; --height: 65%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.2s; --height: 80%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.3s; --height: 55%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.4s; --height: 90%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.5s; --height: 70%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.6s; --height: 85%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.7s; --height: 60%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.8s; --height: 75%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.9s; --height: 50%"></div>
|
||||
<div class="vu-bar" style="--delay: 1s; --height: 65%"></div>
|
||||
<div class="vu-bar" style="--delay: 1.1s; --height: 40%"></div>
|
||||
<div class="vu-bar" style="--delay: 1.2s; --height: 55%"></div>
|
||||
<div class="vu-bar" style="--delay: 1.3s; --height: 70%"></div>
|
||||
<div class="vu-bar" style="--delay: 1.4s; --height: 45%"></div>
|
||||
<div class="vu-bar" style="--delay: 1.5s; --height: 35%"></div>
|
||||
</div>
|
||||
<!-- Peak indicator line -->
|
||||
<div class="vu-peak-line"></div>
|
||||
</div>
|
||||
<!-- VU Meter LEDs -->
|
||||
<div class="vu-leds">
|
||||
<div class="vu-led green"></div>
|
||||
<div class="vu-led green"></div>
|
||||
<div class="vu-led yellow"></div>
|
||||
<div class="vu-led red"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="notes">
|
||||
<div class="note">♪</div>
|
||||
<div class="note">♫</div>
|
||||
<div class="note">♪</div>
|
||||
<div class="note">♫</div>
|
||||
<div class="note">♪</div>
|
||||
<div class="note">♫</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Widgets and gadgets -->
|
||||
{{/*
|
||||
<div class="widget router"></div>
|
||||
<div class="widget hard-drive"></div>
|
||||
|
||||
{{ partial "elements/lavalamp.html" . }}
|
||||
*/}}
|
||||
|
||||
<!-- CRT Monitor -->
|
||||
<div class="crt-container">
|
||||
|
|
@ -210,7 +119,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Wall-mounted monitors -->
|
||||
<div class="secondary-screen wall-monitor-1">
|
||||
<div class="secondary-screen wall-monitor-1 hidden-xl-down">
|
||||
<div class="screen-display crt">
|
||||
> updates -lah<br />
|
||||
{{ $pages := where .Site.RegularPages "Kind" "page" }} {{ range first 5
|
||||
|
|
@ -226,7 +135,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="secondary-screen wall-monitor-2">
|
||||
<div class="secondary-screen wall-monitor-2 hidden-xl-down">
|
||||
<div class="screen-display tiny cyan crt">
|
||||
<div class="scroll-text">
|
||||
[PKT] 192.168.1.1:443<br />
|
||||
|
|
@ -308,7 +217,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="secondary-screen wall-monitor-3">
|
||||
<div class="secondary-screen wall-monitor-3 hidden-xl-down">
|
||||
<div class="screen-display crt">
|
||||
PING 8.8.8.8<br />
|
||||
64 bytes: 12ms<br />
|
||||
|
|
@ -318,7 +227,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="secondary-screen wall-monitor-4">
|
||||
<div class="secondary-screen wall-monitor-4 hidden-xl-down">
|
||||
<div class="screen-display tiny amber crt">
|
||||
> tail -f /var/log<br />
|
||||
[INFO] Process OK<br />
|
||||
|
|
@ -336,6 +245,39 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navigation">
|
||||
<div class="nav-lamp">{{ partial "elements/lavalamp.html" . }}</div>
|
||||
<div>
|
||||
<a href="/audio/">
|
||||
<div class="music">
|
||||
<div class="music-text">MUSIC & AUDIO GEAR</div>
|
||||
|
||||
{{ partial "elements/ipod.html" . }}
|
||||
|
||||
<div class="hidden-md-down">
|
||||
{{ partial "elements/vu-meter.html" . }}
|
||||
</div>
|
||||
|
||||
<div class="notes">
|
||||
<div class="note">♪</div>
|
||||
<div class="note">♫</div>
|
||||
<div class="note">♪</div>
|
||||
<div class="note">♫</div>
|
||||
<div class="note">♪</div>
|
||||
<div class="note">♫</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="time-display">
|
||||
{{ partial "elements/lcd-screen.html" (dict "text" "12:03:31" "placeholder"
|
||||
"00:00:00") }}
|
||||
</div>
|
||||
<div class="hidden-xl-down">
|
||||
<div class="coffee-mug"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ $pages := where .Site.RegularPages "Kind" "page" }} {{ range first 1 (sort
|
||||
$pages "Lastmod" "desc") }}
|
||||
|
||||
|
|
|
|||
332
layouts/now/single.html
Normal file
332
layouts/now/single.html
Normal file
|
|
@ -0,0 +1,332 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Basement Window</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
|
||||
font-family: "Courier New", monospace;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.basement-wall {
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
|
||||
box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.8);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.window-frame {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
background: #3a3a3a;
|
||||
border: 20px solid #2a2520;
|
||||
box-shadow:
|
||||
inset 0 0 20px rgba(0, 0, 0, 0.8),
|
||||
0 10px 40px rgba(0, 0, 0, 0.9);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.window-frame::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -20px;
|
||||
border: 5px solid #1a1510;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Cityscape view */
|
||||
.cityscape {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
#1a2332 0%,
|
||||
#2a3a52 30%,
|
||||
#4a5a72 60%,
|
||||
#6a7a92 100%
|
||||
);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Sky with slight gradient */
|
||||
.sky {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40%;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
#0a0f1a 0%,
|
||||
#1a2a3a 50%,
|
||||
#2a3a52 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* Buildings container */
|
||||
.buildings {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 60%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-around;
|
||||
gap: 20px;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
.building {
|
||||
position: relative;
|
||||
background: linear-gradient(180deg, #1a1a2e 0%, #0a0a1e 100%);
|
||||
box-shadow:
|
||||
inset -2px 0 10px rgba(0, 0, 0, 0.5),
|
||||
0 0 20px rgba(255, 200, 100, 0.1);
|
||||
animation: buildingGlow 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.building:nth-child(1) {
|
||||
width: 80px;
|
||||
height: 280px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.building:nth-child(2) {
|
||||
width: 60px;
|
||||
height: 200px;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
.building:nth-child(3) {
|
||||
width: 90px;
|
||||
height: 320px;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.building:nth-child(4) {
|
||||
width: 70px;
|
||||
height: 240px;
|
||||
animation-delay: 1.5s;
|
||||
}
|
||||
|
||||
.building:nth-child(5) {
|
||||
width: 85px;
|
||||
height: 300px;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
/* Building windows */
|
||||
.building-windows {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 8px;
|
||||
padding: 15px 10px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.window-light {
|
||||
background: #ffd700;
|
||||
opacity: 0;
|
||||
box-shadow: 0 0 10px #ffd700;
|
||||
animation: windowFlicker 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.window-light:nth-child(odd) {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
.window-light:nth-child(3n) {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.window-light:nth-child(4n) {
|
||||
animation-delay: 1.5s;
|
||||
}
|
||||
|
||||
@keyframes windowFlicker {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes buildingGlow {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow:
|
||||
inset -2px 0 10px rgba(0, 0, 0, 0.5),
|
||||
0 0 20px rgba(255, 200, 100, 0.1);
|
||||
}
|
||||
50% {
|
||||
box-shadow:
|
||||
inset -2px 0 10px rgba(0, 0, 0, 0.5),
|
||||
0 0 30px rgba(255, 200, 100, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* Dirt and grime on window */
|
||||
.window-grime {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 20% 30%,
|
||||
rgba(50, 40, 30, 0.2) 0%,
|
||||
transparent 40%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 80% 60%,
|
||||
rgba(40, 35, 25, 0.15) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 50% 80%,
|
||||
rgba(45, 38, 28, 0.18) 0%,
|
||||
transparent 45%
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
/* Glass reflection */
|
||||
.glass-reflection {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.1) 0%,
|
||||
transparent 30%,
|
||||
transparent 70%,
|
||||
rgba(255, 255, 255, 0.05) 100%
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 7;
|
||||
}
|
||||
|
||||
/* Ambient light from city */
|
||||
.ambient-light {
|
||||
position: absolute;
|
||||
bottom: -50px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 200%;
|
||||
height: 200px;
|
||||
background: radial-gradient(
|
||||
ellipse at center,
|
||||
rgba(255, 200, 100, 0.2) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
filter: blur(40px);
|
||||
animation: ambientPulse 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes ambientPulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="basement-wall">
|
||||
<div class="window-frame">
|
||||
<!-- Cityscape -->
|
||||
<div class="cityscape">
|
||||
<div class="sky"></div>
|
||||
<div class="buildings">
|
||||
<div class="building">
|
||||
<div class="building-windows">
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="building">
|
||||
<div class="building-windows">
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="building">
|
||||
<div class="building-windows">
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="building">
|
||||
<div class="building-windows">
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="building">
|
||||
<div class="building-windows">
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
<div class="window-light"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ambient-light"></div>
|
||||
</div>
|
||||
|
||||
<!-- Window effects -->
|
||||
<div class="window-grime"></div>
|
||||
<div class="glass-reflection"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
46
layouts/partials/elements/ipod.html
Normal file
46
layouts/partials/elements/ipod.html
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<div class="ipod-group">
|
||||
<div class="ipod">
|
||||
<div class="ipod-wheel"></div>
|
||||
</div>
|
||||
|
||||
<!-- Earbud cables within the group container -->
|
||||
<svg
|
||||
class="ipod-cables hidden-lg-down"
|
||||
viewBox="0 0 150 100"
|
||||
style="overflow: visible"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="cableGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color: #6b4fb3" />
|
||||
<stop offset="100%" style="stop-color: #4169e1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<path
|
||||
d="M 85,3 C 85,-12 75,-22 55,-22 C 35,-22 25,-15 25,0 C 25,15 28,35 32,50 L 35,65"
|
||||
stroke="url(#cableGradient)"
|
||||
stroke-width="2.5"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
|
||||
<path
|
||||
d="M 35,65 C 28,72 20,82 5,88"
|
||||
stroke="url(#cableGradient)"
|
||||
stroke-width="1.8"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
|
||||
<path
|
||||
d="M 35,65 C 55,73 95,82 125,83"
|
||||
stroke="url(#cableGradient)"
|
||||
stroke-width="1.8"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<div class="earbud earbud-left hidden-lg-down"></div>
|
||||
<div class="earbud earbud-right hidden-lg-down"></div>
|
||||
</div>
|
||||
|
|
@ -21,9 +21,8 @@
|
|||
<div class="lava-lamp-container">
|
||||
<div class="lamp-cap"></div>
|
||||
<div class="lava-lamp" id="lavaLamp">
|
||||
<div class="blobs-container"></div>
|
||||
<!-- NEW: wrapper for blobs -->
|
||||
<div class="lamp-text">ABOUT</div>
|
||||
<div class="blobs-container"><div class="lamp-text">ABOUT</div></div>
|
||||
<div class="lamp-text-shadow">ABOUT</div>
|
||||
</div>
|
||||
<div class="lamp-base"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
{{ $text := .text | default "" }} {{ $placeholder := strings.Repeat (len $text)
|
||||
"8" }}
|
||||
|
||||
{{ $text := .text | default "" }} {{ $placeholder := .placeholder | default
|
||||
(strings.Repeat (len $text) "8" ) }}
|
||||
<div class="lcd-container">
|
||||
<div class="lcd-screen">
|
||||
<span class="lcd-text" data-placeholder="{{ $placeholder }}"
|
||||
|
|
|
|||
33
layouts/partials/elements/vu-meter.html
Normal file
33
layouts/partials/elements/vu-meter.html
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<div class="vu-meter">
|
||||
<div class="vu-meter-body">
|
||||
<div class="vu-meter-screen">
|
||||
<div class="vu-bars crt">
|
||||
<div class="vu-bar" style="--delay: 0s; --height: 45%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.1s; --height: 65%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.2s; --height: 80%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.3s; --height: 55%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.4s; --height: 90%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.5s; --height: 70%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.6s; --height: 85%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.7s; --height: 60%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.8s; --height: 75%"></div>
|
||||
<div class="vu-bar" style="--delay: 0.9s; --height: 50%"></div>
|
||||
<div class="vu-bar" style="--delay: 1s; --height: 65%"></div>
|
||||
<div class="vu-bar" style="--delay: 1.1s; --height: 40%"></div>
|
||||
<div class="vu-bar" style="--delay: 1.2s; --height: 55%"></div>
|
||||
<div class="vu-bar" style="--delay: 1.3s; --height: 70%"></div>
|
||||
<div class="vu-bar" style="--delay: 1.4s; --height: 45%"></div>
|
||||
<div class="vu-bar" style="--delay: 1.5s; --height: 35%"></div>
|
||||
</div>
|
||||
<!-- Peak indicator line -->
|
||||
<div class="vu-peak-line"></div>
|
||||
</div>
|
||||
<!-- VU Meter LEDs -->
|
||||
<div class="vu-leds">
|
||||
<div class="vu-led green"></div>
|
||||
<div class="vu-led green"></div>
|
||||
<div class="vu-led yellow"></div>
|
||||
<div class="vu-led red"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
14
layouts/partials/elements/window.html
Normal file
14
layouts/partials/elements/window.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<div class="window-frame">
|
||||
<!-- Cityscape -->
|
||||
<div class="cityscape">
|
||||
<div class="starfield" id="starfield" data-stars="50"></div>
|
||||
<div class="buildings-far"></div>
|
||||
<div class="buildings-mid"></div>
|
||||
<div class="buildings-near"></div>
|
||||
<div class="ambient-light"></div>
|
||||
</div>
|
||||
|
||||
<!-- Window effects -->
|
||||
<div class="window-grime"></div>
|
||||
<div class="glass-reflection"></div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue