{{ define "main" }}
<div class="wall"></div>

<!-- Neon sign above monitor -->
<div class="neon-sign">
  <div class="neon-text">ritual.sh</div>
</div>

<!-- Sticky notes -->
<div class="sticky-note note1">fix bugs</div>
<div class="sticky-note note2">pwd:<br />puppies</div>
<div class="sticky-note note3">finish<br />coffee</div>
<div class="sticky-note note4">CALL<br />WIFE</div>

<!-- Papers pinned to wall -->
<div class="wall-paper paper1"></div>
<div class="wall-paper paper2"></div>

<!-- X-Files "I want to believe" poster -->
<div class="xfiles-poster">
  <div class="xfiles-content">
    <div class="ufo-illustration">
      <div class="ufo-dome"></div>
      <div class="ufo-body">
        <div class="ufo-lights">
          <div class="ufo-light"></div>
          <div class="ufo-light"></div>
          <div class="ufo-light"></div>
          <div class="ufo-light"></div>
        </div>
      </div>
      <div class="light-beam"></div>
    </div>
    <div class="believe-text">I WANT TO<br />BELIEVE</div>
  </div>
</div>

<!-- Poster on wall -->
<div class="poster">
  <div class="poster-image" id="posterImage">
    <script src="/js/nowplaying.js"></script>

    <div class="nowplayingcard">
      <div class="nowplayingcontainer-inner">
        <img id="trackart" src="" />
      </div>
    </div>
  </div>
  <div class="now-playing-note">Recently Played</div>
  <div class="now-playing-artist">
    <div class="trackInfo">
      <span id="artist"></span>
      <a id="tracktitle" style="display: none"></a>
      <a id="album" style="display: none"></a>
    </div>
  </div>
</div>

<script>
  setInterval(
    getLastTrack("ritualplays", "3a4fef48fecc593d25e0f9a40df1fefe"),
    10 * 1000,
  );
</script>

<!-- Desk -->
<div class="desk"></div>

<!-- Curved cables on desk using SVG -->
<svg
  class="cable-svg"
  style="position: absolute; bottom: 8%; left: 15%; width: 200px; height: 150px"
>
  <path
    d="M 20 10 Q 40 60, 80 120"
    stroke="#222"
    stroke-width="3"
    fill="none"
  />
</svg>
<svg
  class="cable-svg"
  style="
    position: absolute;
    bottom: 8%;
    right: 20%;
    width: 180px;
    height: 140px;
  "
>
  <path
    d="M 150 20 Q 100 70, 40 130"
    stroke="#1a1a1a"
    stroke-width="3"
    fill="none"
  />
</svg>
<svg
  class="cable-svg"
  style="position: absolute; bottom: 8%; left: 28%; width: 220px; height: 160px"
>
  <path
    d="M 10 30 Q 80 40, 160 140"
    stroke="#252525"
    stroke-width="2.5"
    fill="none"
  />
</svg>
<svg
  class="cable-svg"
  style="
    position: absolute;
    bottom: 8%;
    right: 35%;
    width: 150px;
    height: 120px;
  "
>
  <path
    d="M 130 15 Q 70 50, 20 110"
    stroke="#2a2a2a"
    stroke-width="2.5"
    fill="none"
  />
</svg>
<svg
  class="cable-svg"
  style="position: absolute; bottom: 8%; left: 42%; width: 160px; height: 130px"
>
  <path
    d="M 30 20 Q 60 80, 120 125"
    stroke="#1f1f1f"
    stroke-width="2"
    fill="none"
  />
</svg>

<div class="monitor-stand-small"></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&nbsp;&amp;&nbsp;AUDIO&nbsp;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 "lavalamp.html" . }}

<!-- CRT Monitor -->
<div class="crt-container">
  <div class="crt-monitor">
    <div class="crt-screen">
      <div class="content crt">
        <div id="terminal">
          <div id="output"></div>
          <div id="input-container" class="input-line hidden">
            <span class="prompt">></span>
            <input
              type="text"
              id="input"
              autocomplete="off"
              spellcheck="false"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="monitor-stand">
    <div class="stand-neck"></div>
    <div class="stand-base"></div>
  </div>

  <!-- Wall-mounted monitors -->
  <div class="secondary-screen wall-monitor-1">
    <div class="screen-display crt">
      > updates -lah<br />
      {{ $pages := where .Site.RegularPages "Kind" "page" }} {{ range first 5
      (sort $pages "Lastmod" "desc") }} [<time
        >{{ .Lastmod.Format "2006-01-02" }}</time
      >] -
      <a href="{{ .Permalink }}">{{ .Title }}</a>

      <br />
      {{ end }}

      <span class="cursor-blink">_</span>
    </div>
  </div>

  <div class="secondary-screen wall-monitor-2">
    <div class="screen-display tiny cyan crt">
      <div class="scroll-text">
        [PKT] 192.168.1.1:443<br />
        [PKT] 10.0.0.15:8080<br />
        [PKT] 172.16.0.1:22<br />
        [PKT] 192.168.1.1:443<br />
        [PKT] 10.0.0.15:8080<br />
        [PKT] 192.168.1.1:443<br />
        [PKT] 10.0.0.15:8080<br />
        [PKT] 172.16.0.1:22<br />
        [PKT] 192.168.1.1:443<br />
        [PKT] 10.0.0.15:8080<br />
        [PKT] 192.168.1.1:443<br />
        [PKT] 10.0.0.15:8080<br />
        [PKT] 172.16.0.1:22<br />
        [PKT] 192.168.1.1:443<br />
        [PKT] 10.0.0.15:8080<br />
        [PKT] 192.168.1.1:443<br />
        [PKT] 10.0.0.15:8080<br />
        [PKT] 172.16.0.1:22<br />
        [PKT] 192.168.1.1:443<br />
        [PKT] 10.0.0.15:8080<br />
        [PKT] 192.168.1.1:443<br />
        [PKT] 10.0.0.15:8080<br />
        [PKT] 172.16.0.1:22<br />
        [PKT] 192.168.1.1:443<br />
        [PKT] 10.0.0.15:8080<br />
        [PKT] 192.168.1.1:443<br />
        [PKT] 10.0.0.15:8080<br />
        [PKT] 172.16.0.1:22<br />
        [PKT] 192.168.1.1:443<br />
        [PKT] 10.0.0.15:8080<br />
        [PKT] 192.168.1.1:443<br />
        [PKT] 10.0.0.15:8080<br />
        [PKT] 172.16.0.1:22<br />
        [PKT] 192.168.1.1:443<br />
        [PKT] 10.0.0.15:8080<br />
        [PKT] 192.168.1.1:443<br />
        [PKT] 10.0.0.15:8080<br />
        [PKT] 172.16.0.1:22<br />
        [PKT] 192.168.1.1:443<br />
        [PKT] 10.0.0.15:8080<br />
        [PKT] 192.168.1.1:443<br />
        [PKT] 10.0.0.15:8080<br />
        [PKT] 172.16.0.1:22<br />
        [PKT] 192.168.1.1:443<br />
        [PKT] 10.0.0.15:8080<br />
        [PKT] 192.168.1.1:443<br />
        [PKT] 10.0.0.15:8080<br />
        [PKT] 172.16.0.1:22<br />
        [PKT] 192.168.1.1:443<br />
        [PKT] 10.0.0.15:8080<br />
        [PKT] 192.168.1.1:443<br />
        [PKT] 10.0.0.15:8080<br />
        [PKT] 172.16.0.1:22<br />
        [PKT] 192.168.1.1:443<br />
        [PKT] 10.0.0.15:8080<br />
        [PKT] 192.168.1.1:443<br />
        [PKT] 10.0.0.15:8080<br />
        [PKT] 172.16.0.1:22<br />
        [PKT] 192.168.1.1:443<br />
        [PKT] 10.0.0.15:8080<br />
        [PKT] 192.168.1.1:443<br />
        [PKT] 10.0.0.15:8080<br />
        [PKT] 172.16.0.1:22<br />
        [PKT] 192.168.1.1:443<br />
        [PKT] 10.0.0.15:8080<br />
        [PKT] 192.168.1.1:443<br />
        [PKT] 10.0.0.15:8080<br />
        [PKT] 172.16.0.1:22<br />
        [PKT] 192.168.1.1:443<br />
        [PKT] 10.0.0.15:8080<br />
        [PKT] 192.168.1.1:443<br />
        [PKT] 10.0.0.15:8080<br />
        [PKT] 172.16.0.1:22<br />
        [PKT] 192.168.1.1:443<br />
        [PKT] 10.0.0.15:8080<br />
      </div>
    </div>
  </div>

  <div class="secondary-screen wall-monitor-3">
    <div class="screen-display crt">
      PING 8.8.8.8<br />
      64 bytes: 12ms<br />
      64 bytes: 11ms<br />
      64 bytes: 13ms<br />
      <span class="cursor-blink">_</span>
    </div>
  </div>

  <div class="secondary-screen wall-monitor-4">
    <div class="screen-display tiny amber crt">
      > tail -f /var/log<br />
      [INFO] Process OK<br />
      [WARN] High load detected - time for coffee break<br />
      [INFO] Connected to database (it's in a relationship now)<br />
      [ERROR] 404: Motivation not found<br />
      [WARN] Firewall detected actual fire, calling emergency services<br />
      [INFO] Successfully hacked into mainframe (jk it's just localhost)<br />
      [ERROR] Keyboard not found. Press F1 to continue.<br />
      [WARN] Too many open tabs. Browser having existential crisis.<br />
      [INFO] Ping 127.0.0.1 - there's no place like home<br />
      [ERROR] SQL injection attempt detected. Nice try, Bobby Tables.<br />
      <span class="cursor-blink">_</span>
    </div>
  </div>
</div>

{{ $pages := where .Site.RegularPages "Kind" "page" }} {{ range first 1 (sort
$pages "Lastmod" "desc") }}

<div id="latest-post">
  <div id="latest-post-link">{{ .Permalink }}</div>
  <div id="latest-post-title">{{ .Title }}</div>
  <div id="latest-post-date">{{ .Date.Format "Jan 2, 2006" }}</div>
</div>
{{ end }} {{ end }}