Front-end: video panel markup/styles, mellow cards, banner spacing

  - The "Video Stream" collapsible bar markup (index.html) and its styles
    (main.css): always-visible bar, red/grey status dot, chevron, 16:9 responsive
    video box, corner mute toggle, offline placeholder.
  - Audio player + chat cards recoloured from stark white to #dadada (the same
    grey the shared footer uses), so the page reads as one system.
  - Removed the padding between the Daveo Radio banner and the players/video
    (margin, not padding -- a background image paints across the padding box).
  - Includes hand edits to index.html.

src/css/main.css

@@ -20,6 +20,97 @@ body {
   background: #484c57;
 }
 
+/* ===== the-ham.org live video panel =====
+   The "Video Stream" bar is always visible; the video body collapses beneath
+   it. Sits directly under the Daveo Radio banner. */
+#ham-panel {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+.ham-card { background: #2b2e36; border: none; overflow: hidden; }
+
+/* The whole bar is the collapse toggle (a full-width button). */
+.ham-head {
+  width: 100%;
+  background: #2b2e36;
+  border: none;
+  border-bottom: 1px solid rgba(255,255,255,.08);
+  color: #dadada;
+  padding: 10px 15px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  text-align: left;
+}
+.ham-head:hover { background: #31343d; }
+.ham-live { font-weight: 700; letter-spacing: .02em; }
+
+/* Dot: dim grey when idle, red + pulse when a source is live. */
+.ham-dot {
+  display: inline-block; width: 9px; height: 9px; margin-right: 7px;
+  border-radius: 50%; background: #6b6f79;
+  vertical-align: middle;
+}
+.ham-dot.live {
+  background: #e0483d;
+  box-shadow: 0 0 0 0 rgba(224,72,61,.7);
+  animation: ham-pulse 1.8s infinite;
+}
+@keyframes ham-pulse {
+  0%   { box-shadow: 0 0 0 0 rgba(224,72,61,.6); }
+  70%  { box-shadow: 0 0 0 7px rgba(224,72,61,0); }
+  100% { box-shadow: 0 0 0 0 rgba(224,72,61,0); }
+}
+
+/* Chevron points down when collapsed, flips up when expanded. */
+.ham-chevron {
+  color: #9a9ea8;
+  font-size: 12px;
+  transition: transform .2s ease;
+}
+.ham-head[aria-expanded="true"] .ham-chevron { transform: rotate(180deg); }
+
+.ham-body[hidden] { display: none; }
+.ham-offline[hidden] { display: none; }
+.ham-offline {
+  color: #9a9ea8;
+  font-size: 14px;
+  text-align: center;
+  padding: 28px 15px;
+  background: #2b2e36;
+}
+
+/* 16:9 responsive box (padding-top hack — works without aspect-ratio support). */
+.ham-video-wrap {
+  position: relative;
+  width: 100%;
+  padding-top: 56.25%;
+  background: #000;
+}
+.ham-video-wrap > #ham-video {
+  position: absolute; inset: 0;
+  width: 100%; height: 100%;
+  display: block; background: #000;
+}
+/* Small mute/unmute toggle in the corner (video autoplays muted). */
+.ham-mute {
+  position: absolute; right: 12px; bottom: 12px;
+  width: 40px; height: 40px; border-radius: 50%;
+  border: none; cursor: pointer;
+  background: rgba(43,46,54,.7); color: #fff;
+  font-size: 16px; line-height: 40px; text-align: center;
+  transition: background .15s;
+  z-index: 2;
+}
+.ham-mute:hover { background: rgba(43,46,54,.95); }
+.ham-error {
+  position: absolute; left: 0; right: 0; bottom: 0;
+  background: rgba(0,0,0,.65); color: #f2c1bd;
+  font-size: 13px; text-align: center; padding: 6px;
+}
+.ham-error[hidden] { display: none; }
+
 /* Post button in the page's own slate instead of Bootstrap's default blue.
    Targeted by id so it outranks .btn-primary and its :hover/:active variants
    without having to fight specificity or reach for !important. */
@@ -109,9 +200,11 @@ body {
 ========== Audio Player ============ 
 ***********************************/
 
-#audio_player {
-  background-color: #f7f7f7;
-
+/* Muted card background for the audio player and chat — softer than stark
+   white, and the same grey the shared footer uses for its text. */
+#audio_player,
+#request-line .panel-default {
+  background-color: #dadada;
 }
 
 /* Player tab icons in the page's slate instead of Bootstrap's link blue. These

src/index.html

@@ -18,6 +18,29 @@
      under the site chrome rather than standing in for it. -->
 <div class="radio-banner"></div>
 
+<!-- the-ham.org live video. The "Video Stream" bar is always visible; the video
+     collapses/expands beneath it. The dot goes red when /api/live reports a
+     publisher, and the chevron flips up when expanded. ham.js drives the state,
+     hls.js playback, and muted autoplay. -->
+<div id="ham-panel" class="container">
+   <div class="panel panel-default ham-card">
+      <button type="button" class="ham-head" id="ham-toggle" aria-expanded="false" aria-controls="ham-body">
+         <span class="ham-live"><span class="ham-dot"></span> Video Stream</span>
+         <span class="ham-chevron glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
+      </button>
+      <div class="ham-body" id="ham-body" hidden>
+         <div class="ham-video-wrap">
+            <video id="ham-video" playsinline muted preload="none"></video>
+            <button type="button" id="ham-mute" class="ham-mute" aria-label="Unmute video">
+               <span class="glyphicon glyphicon-volume-off" aria-hidden="true"></span>
+            </button>
+            <div id="ham-error" class="ham-error" hidden>Stream interrupted &mdash; retrying&hellip;</div>
+         </div>
+         <div id="ham-offline" class="ham-offline" hidden>Nothing broadcasting right now.</div>
+      </div>
+   </div>
+</div>
+
 <div class="outer-container">
 <div class="container">
    <div class="row">
@@ -310,7 +333,6 @@
             <p><b>Daveo Radio</b> is just a little place I can share some music and chat with friends. It's only on when I'm listening, but I enjoy listening to music and I spend quite a bit of time doing so. I like to tune into terrestrial stations that stream to help find new music, but I’ve found almost all of the robot mixes from the big streaming providers unsatisfying. For the last couple years, I've been scanning all kinds of discovery mechanisms and making a new mix every month. I'd like to teach others how to setup a basic microphone and board to broacast to these streaming servers so that I can have a variety of playlist and my friends can also host live shows I can listen to. I'd like to thank <a target="_blank" href="https://www.radioparadise.com">Radio Paradise</a> for the original motivation to setup my own servers. It's taken me some time to learn the ropes of building out the servers, but right now I've got two servers running from Los Angeles and Atlanta. It wouldn't be possible without the work of numerous others who have built the software to power this page.</p>
             <p><b>Kudos</b>:</p>
                <ul>
-                  <li><a target="_blank" href="https://www.linode.com/?r=827b1692af8a9de4f44267d8d82fd44fd1c4f29c">Linode</a> &amp; <a target="_blank" href="http://bit.ly/1RwygMH">Media Temple</a>: great hosting companies.</li> 
                   <li><a target="_blank" href="https://nodejs.org/en/">Node.js</a>: A JavaScript runtime built on Chrome's V8 JavaScript engine.</li>
                   <li><a target="_blank" href="http://expressjs.com/">Express</a>: Fast, unopinionated, minimalist web framework for Node.js.</li>
                   <li><a target="_blank" href="http://socket.io/">Socket.io</a>: Enables real-time bidirectional event-based communication.</li>
@@ -354,10 +376,10 @@
          <h4 class="modal-title"><span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span> Support</h4>
          </div>
          <div class="modal-body">
-            <p>The cost associated with running the servers and the licensing to broadcast music are just about $1500 dollars a year. As the audience grows, so does the cost. Royalties are based on the number of listener hours and I add new relay servers to scale to keep the audio quality up and reduce lag time. If you would like to help support this effort, I've set up some easy ways to do so:</p>
+            <p>The cost associated for running the servers and the licensing the music are about $1500/yr.</p>
             <ul>
-               <li>Make a donation: <a target="_blank" href="https://davidawindham.com/contact/">davidawindham.com/donate/</a></li>
-               <li>Buy some swag: <a target="_blank" href="https://shop.davidawindham.com">shop.davidawindham.com</a></li>
+               <li>Donate: <a target="_blank" href="https://davidwindham.com/contact/">davidawindham.com/donate/</a></li>
+               <li>Buy: <a target="_blank" href="https://davidwindham.com/shop">shop.davidwindham.com/shop</a></li>
             </ul>
             <p>Thank you,<br />&nbsp;David</p>
          </div>