Adding cityscape and junk

This commit is contained in:
Dan 2025-12-11 11:58:40 +00:00
parent 0d21b06acd
commit c51942e5c0
19 changed files with 1351 additions and 146 deletions

View 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>

View file

@ -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>

View file

@ -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 }}"

View 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>

View 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>