From 954c41855627ffaaae1f1eb2d808e9591c99be25 Mon Sep 17 00:00:00 2001
From: Matt Batchelder <matt@buzzbee.dev>
Date: Sat, 21 Feb 2026 02:23:06 -0500
Subject: [PATCH] Add dashboard TV frame styles and update rendering structure
 for animated charts

---
 theme/assets/css/main.css | 66 ++++++++++++++++++++++++++++++++-------
 theme/blocks/index.php    |  8 +++--
 2 files changed, 61 insertions(+), 13 deletions(-)

diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css
index 01cdfd8..3869368 100644
--- a/theme/assets/css/main.css
+++ b/theme/assets/css/main.css
@@ -1995,6 +1995,61 @@ p:last-child { margin-bottom: 0; }
   box-shadow: none;
 }
 
+/* ── Dashboard TV frame ────────────────────────── */
+.dashboard-tv {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.dashboard-tv__body {
+  width: 100%;
+  max-width: 520px;
+  background: var(--color-bg-alt);
+  border: 4px solid var(--color-bg-alt);
+  border-radius: 6px 6px 4px 4px;
+  outline: 1px solid var(--color-border);
+  padding: 3px;
+  position: relative;
+  box-shadow: 0 14px 48px rgba(0,0,0,0.55);
+}
+.dashboard-tv__body::after {
+  content: '\25B6';
+  position: absolute;
+  bottom: -13px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 8px;
+  color: rgba(74,222,128,0.7);
+}
+.dashboard-tv__screen {
+  width: 100%;
+  aspect-ratio: 16/9;
+  background: #111;
+  border-radius: 2px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.dashboard-tv__screen .dashboard-chart {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.dashboard-tv__feet {
+  display: flex;
+  justify-content: space-between;
+  width: 60%;
+  max-width: 300px;
+}
+.dashboard-tv__foot {
+  width: 12px;
+  height: 8px;
+  background: var(--color-bg-alt);
+  border: 1px solid var(--color-border);
+  border-radius: 0 0 4px 4px;
+}
+
 /* ── 10b. Device Animator ───────────────────────────────────── */
 .platform-visual.has-anim {
   background: none !important;
@@ -2614,17 +2669,6 @@ p:last-child { margin-bottom: 0; }
 }
 
 /* ── Dashboard Chart ───────────────────────────────────── */
-.dashboard-chart-container {
-  position: relative;
-  width: 100%;
-  max-width: 900px;
-  margin: 0 auto;
-  padding: 1.5rem;
-  background: none;
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-}
 .dashboard-chart {
   width: 100%;
   height: auto;
diff --git a/theme/blocks/index.php b/theme/blocks/index.php
index a4a5ef2..48f7771 100644
--- a/theme/blocks/index.php
+++ b/theme/blocks/index.php
@@ -1347,8 +1347,10 @@ function oribi_render_platform_row( $a ) {
         // Render animated dashboard chart SVG
         // Text uses class hooks: .ct = title, .cl = label, .cv = value
         // JS will dynamically set fill colours based on data-theme
-        $visual_html = '<div class="dashboard-chart-container" data-dashboard-container="true">
-<svg viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg" class="dashboard-chart" role="img" aria-label="Animated dashboard charts" style="border-radius:4px">
+        $visual_html = '<div class="dashboard-tv" data-dashboard-container="true">
+<div class="dashboard-tv__body">
+<div class="dashboard-tv__screen">
+<svg viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg" class="dashboard-chart" role="img" aria-label="Animated dashboard charts">
   <defs>
     <linearGradient id="barGradient" x1="0%" y1="0%" x2="0%" y2="100%">
       <stop offset="0%"   stop-color="#004225" stop-opacity="1"/>
@@ -1455,6 +1457,8 @@ function oribi_render_platform_row( $a ) {
     </g>
   </g>
 </svg>
+</div></div>
+<div class="dashboard-tv__feet"><div class="dashboard-tv__foot"></div><div class="dashboard-tv__foot"></div></div>
 </div>';
         $visual_cls  = 'platform-visual has-dashboard';
     } elseif ( $img_url ) {