From f7d73a6ef24c5d48a780ab43253c3e0a490a028f Mon Sep 17 00:00:00 2001
From: peterino2 <peterlimail47@gmail.com>
Date: Thu, 2 Jul 2026 14:56:05 -0700
Subject: [PATCH] Add Hot Dog Stand theme

---
 public/index.html |  1 +
 public/styles.css | 91 +++++++++++++++++++++++++++++++++++++++++++++++
 public/themes.js  |  1 +
 3 files changed, 93 insertions(+)

diff --git a/public/index.html b/public/index.html
index 9e1e80b..b92eb64 100644
--- a/public/index.html
+++ b/public/index.html
@@ -64,6 +64,7 @@
             <option value="cinema">Cinema Queue</option>
           </optgroup>
           <optgroup label="Bad Ideas">
+            <option value="hotdog">Hot Dog Stand</option>
             <option value="spreadsheet">Bad Spreadsheet</option>
             <option value="myspace">MySpace Accident</option>
             <option value="sideways">Sideways Doomscroll</option>
diff --git a/public/styles.css b/public/styles.css
index 624e5d7..86a2c70 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -931,6 +931,97 @@ body[data-ui-theme="cinema"] #queue-panel { order: 3; max-height: 70vh; }
 body[data-ui-theme="cinema"] #queue .track.active { font-size: 1rem; padding: 0.65rem 0.75rem; }
 body[data-ui-theme="cinema"] #player-bar { border-top: 4px solid var(--accent); }
 
+body[data-ui-theme="hotdog"] {
+  --panel-bg: #ffff00;
+  --panel-border: #000000;
+  --text-color: #000000;
+  --heading-color: #ffff00;
+  --control-bg: #ffffff;
+  --control-border: #000000;
+  --control-color: #000000;
+  --hover-bg: #ff0000;
+  --active-bg: #ff0000;
+  --active-color: #ffffff;
+  --accent: #ff0000;
+  --warning: #000000;
+  background: #ff0000;
+  color: #000000;
+  font-family: "MS Sans Serif", "Arial", sans-serif;
+}
+
+body[data-ui-theme="hotdog"] #site-header h1,
+body[data-ui-theme="hotdog"] h3,
+body[data-ui-theme="hotdog"] .panel-tab.active {
+  background: #ff0000;
+  color: #ffff00;
+  padding: 0.1rem 0.25rem;
+}
+
+body[data-ui-theme="hotdog"] #channels-panel,
+body[data-ui-theme="hotdog"] #library-panel,
+body[data-ui-theme="hotdog"] #queue-panel,
+body[data-ui-theme="hotdog"] #player-bar,
+body[data-ui-theme="hotdog"] #login-panel,
+body[data-ui-theme="hotdog"] .panel-views,
+body[data-ui-theme="hotdog"] #toast-history,
+body[data-ui-theme="hotdog"] .context-menu {
+  border: 3px solid #000000;
+  border-radius: 0;
+  box-shadow: 5px 5px 0 #000000;
+}
+
+body[data-ui-theme="hotdog"] button,
+body[data-ui-theme="hotdog"] select,
+body[data-ui-theme="hotdog"] input,
+body[data-ui-theme="hotdog"] .panel-tab,
+body[data-ui-theme="hotdog"] .track-actions .track-menu-btn,
+body[data-ui-theme="hotdog"] .track-actions .track-play-btn,
+body[data-ui-theme="hotdog"] .track-actions .track-preview-btn {
+  border: 2px outset #ffffff;
+  border-radius: 0;
+  font-weight: 700;
+}
+
+body[data-ui-theme="hotdog"] button:active,
+body[data-ui-theme="hotdog"] .panel-tab.active {
+  border-style: inset;
+}
+
+body[data-ui-theme="hotdog"] .panel-tab,
+body[data-ui-theme="hotdog"] .track,
+body[data-ui-theme="hotdog"] .playlist-item,
+body[data-ui-theme="hotdog"] .context-menu-item,
+body[data-ui-theme="hotdog"] .channel-item {
+  border-radius: 0;
+}
+
+body[data-ui-theme="hotdog"] .track:hover,
+body[data-ui-theme="hotdog"] .context-menu-item:hover,
+body[data-ui-theme="hotdog"] .playlist-item:hover {
+  color: #ffff00;
+}
+
+body[data-ui-theme="hotdog"] #queue .track.active,
+body[data-ui-theme="hotdog"] .now-playing-bar,
+body[data-ui-theme="hotdog"] .mobile-tab.active,
+body[data-ui-theme="hotdog"] .toast {
+  border: 2px solid #000000;
+  text-transform: uppercase;
+}
+
+body[data-ui-theme="hotdog"] #progress-container,
+body[data-ui-theme="hotdog"] #buffer-bar .segment {
+  background: #ffffff;
+  border: 1px solid #000000;
+  border-radius: 0;
+}
+
+body[data-ui-theme="hotdog"] #progress-bar.playing.synced,
+body[data-ui-theme="hotdog"] #buffer-bar .segment.available,
+body[data-ui-theme="hotdog"] .track.cached .cache-indicator {
+  background: #ff0000;
+}
+
 html[data-ui-theme="spreadsheet"],
 html[data-ui-theme="myspace"],
 html[data-ui-theme="sideways"] {
diff --git a/public/themes.js b/public/themes.js
index b68b6eb..6c4f5a7 100644
--- a/public/themes.js
+++ b/public/themes.js
@@ -14,6 +14,7 @@
     "amber",
     "compact",
     "cinema",
+    "hotdog",
     "spreadsheet",
     "myspace",
     "sideways"