i

index.css

@@ -1,17 +1,8 @@
-/* =========
-   Dark TV Dashboard Theme (4K, grid-hardened, NO media queries)
-   Updated:
-   - Current weather: guaranteed fit (tighter spacing + weather block uses grid rows)
-   - Radar: no cropping (object-fit: contain + subtle background)
-   ========= */
-
 :root{
   --bg: #0b0f16;
-  --border: rgba(255,255,255,0.10);
-
-  --text: rgba(255,255,255,0.92);
-  --muted: rgba(255,255,255,0.68);
-
+  --border: rgba(255,255,255,.1);
+  --text: rgba(255,255,255,.92);
+  --muted: rgba(255,255,255,.68);
   --accent: #4cc9f0;
   --accent-2: #a78bfa;
 
@@ -22,394 +13,311 @@
 
   --font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, sans-serif;
 
-  /* Sizing tuned to fit all content in a 2x2 4K layout */
   --time-size: clamp(40px, 2.55vh, 62px);
   --date-size: clamp(16px, 1.25vh, 22px);
-
   --h2-size: clamp(15px, 1.05vh, 19px);
   --cond-size: clamp(16px, 1.25vh, 21px);
+  --info-size: clamp(12px, 1vh, 17px);
 
-  --info-size: clamp(12px, 1.00vh, 17px);
-
-  --table-head: clamp(12px, 1.00vh, 15px);
+  --table-head: clamp(12px, 1vh, 15px);
   --table-cell: clamp(12px, 1.05vh, 16px);
 }
 
-*{ box-sizing:border-box; }
-html, body{ height:100%; width:100%; }
+*{box-sizing:border-box}
+html,body{height:100%;width:100%}
 
 body{
   margin:0;
-  font-family: var(--font);
-  color: var(--text);
+  font-family:var(--font);
+  color:var(--text);
   background:
-    radial-gradient(1200px 600px at 20% 10%, rgba(76,201,240,0.12), transparent 60%),
-    radial-gradient(900px 500px at 85% 20%, rgba(167,139,250,0.10), transparent 55%),
-    radial-gradient(800px 600px at 50% 100%, rgba(255,255,255,0.06), transparent 55%),
+    radial-gradient(1200px 600px at 20% 10%,rgba(76,201,240,.12),transparent 60%),
+    radial-gradient(900px 500px at 85% 20%,rgba(167,139,250,.1),transparent 55%),
+    radial-gradient(800px 600px at 50% 100%,rgba(255,255,255,.06),transparent 55%),
     var(--bg);
   overflow:hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: geometricPrecision;
+  -webkit-font-smoothing:antialiased;
+  text-rendering:geometricPrecision
 }
 
-/* =========
-   Grid Layout (2x2 always)
-   ========= */
 .grid{
   height:100vh;
   width:100vw;
-  padding: var(--outer-pad);
-
+  padding:var(--outer-pad);
   display:grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
-  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
-  gap: var(--gap);
-
-  filter: brightness(0.98);
+  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
+  grid-template-rows:minmax(0,1fr) minmax(0,1fr);
+  gap:var(--gap);
+  filter:brightness(.98)
 }
+.grid>*{min-width:0;min-height:0}
 
-.grid > *{
-  min-width: 0;
-  min-height: 0;
-}
-
-.topLeft, .topRight, .bottomLeft, .bottomRight{
+.topLeft,.topRight,.bottomLeft,.bottomRight{
   position:relative;
-  min-width: 0;
-  min-height: 0;
-
-  border-radius: var(--radius);
-  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
-  border: 1px solid var(--border);
-  box-shadow:
-    0 10px 30px rgba(0,0,0,0.35),
-    inset 0 1px 0 rgba(255,255,255,0.06);
-  overflow:hidden;
+  min-width:0;
+  min-height:0;
+  border-radius:var(--radius);
+  background:linear-gradient(180deg,#ffffff0f,#ffffff08);
+  border:1px solid var(--border);
+  box-shadow:0 10px 30px #00000059,inset 0 1px #ffffff0f;
+  overflow:hidden
 }
 
-/* =========
-   Top Left: Date/Time + Current Weather
-   ========= */
+/* -------- Top Left -------- */
 .topLeft{
   display:flex;
   flex-direction:column;
-  min-width: 0;
-  min-height: 0;
-
-  padding: 12px;
-  gap: 10px;
+  min-width:0;
+  min-height:0;
+  padding:12px;
+  gap:10px
 }
 
-/* Date/Time card */
 .dateTime{
-  flex: 0 0 auto;
-  min-width: 0;
-
+  flex:0 0 auto;
+  min-width:0;
   display:flex;
   flex-direction:column;
-  gap: 4px;
-
-  padding: 10px 12px;
-  border-radius: var(--radius-sm);
-  background: rgba(0,0,0,0.22);
-  border: 1px solid rgba(255,255,255,0.08);
+  gap:4px;
+  padding:10px 12px;
+  border-radius:var(--radius-sm);
+  background:#00000038;
+  border:1px solid rgba(255,255,255,.08)
 }
 
 #date{
   margin:0;
-  font-size: var(--date-size);
-  letter-spacing: 0.35px;
-  color: var(--muted);
+  font-size:var(--date-size);
+  letter-spacing:.35px;
+  color:var(--muted)
 }
 
 #time{
   margin:0;
-  font-size: var(--time-size);
-  font-weight: 760;
-  letter-spacing: 0.8px;
-  line-height: 1.02;
-  color: var(--text);
-
+  font-size:var(--time-size);
+  font-weight:760;
+  letter-spacing:.8px;
+  line-height:1.02;
+  color:var(--text);
   overflow:hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  text-overflow:ellipsis;
+  white-space:nowrap
 }
 
-/* Weather container */
 .weather{
-  flex: 1 1 auto;
-  min-width: 0;
-  min-height: 0;
-  display:flex;
+  flex:1 1 auto;
+  min-width:0;
+  min-height:0;
+  display:flex
 }
 
-/* Weather block: use grid rows so content *must* fit the tile */
 .weatherBlock{
-  flex: 1 1 auto;
-  min-width: 0;
-  min-height: 0;
-
-  padding: 10px;
-  border-radius: var(--radius-sm);
-  background:
-    radial-gradient(600px 240px at 20% 10%, rgba(76,201,240,0.10), transparent 60%),
-    rgba(0,0,0,0.18);
-  border: 1px solid rgba(255,255,255,0.08);
-
+  flex:1 1 auto;
+  min-width:0;
+  min-height:0;
+  padding:10px;
+  border-radius:var(--radius-sm);
+  background:radial-gradient(600px 240px at 20% 10%,rgba(76,201,240,.1),transparent 60%),#0000002e;
+  border:1px solid rgba(255,255,255,.08);
   display:grid;
-  grid-template-rows: auto auto minmax(0, 1fr);
-  gap: 8px;
-}
-
-.weatherBlock h2{
-  margin:0;
-  font-size: var(--h2-size);
-  font-weight: 820;
-  letter-spacing: 0.5px;
-  display:flex;
-  align-items:center;
-  gap: 10px;
+  grid-template-rows:auto auto minmax(0,1fr);
+  gap:8px
 }
 
-.weatherBlock h2::before{
+.weatherBlock h2:before{
   content:"";
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, var(--accent), var(--accent-2));
-  box-shadow: 0 0 18px rgba(76,201,240,0.35);
+  width:10px;
+  height:10px;
+  border-radius:50%;
+  background:linear-gradient(135deg,var(--accent),var(--accent-2));
+  box-shadow:0 0 18px #4cc9f059
 }
 
-/* Condition row (2-line clamp) */
 .condition{
   display:flex;
   align-items:center;
-  gap: 10px;
-
-  padding: 8px 10px;
-  border-radius: 14px;
-  background: rgba(255,255,255,0.04);
-  border: 1px solid rgba(255,255,255,0.06);
-
-  min-width: 0;
+  gap:10px;
+  padding:8px 10px;
+  border-radius:14px;
+  background:#ffffff0a;
+  border:1px solid rgba(255,255,255,.06);
+  min-width:0
 }
 
 .condition img{
-  width: clamp(34px, 2.2vh, 48px);
-  height: clamp(34px, 2.2vh, 48px);
-  object-fit: contain;
-  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.45));
-  flex: 0 0 auto;
+  width:clamp(34px,2.2vh,48px);
+  height:clamp(34px,2.2vh,48px);
+  object-fit:contain;
+  filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));
+  flex:0 0 auto
 }
 
 .conditionText{
   margin:0;
-  font-size: var(--cond-size);
-  font-weight: 700;
-  letter-spacing: 0.15px;
-  color: var(--text);
-
-  min-width: 0;
-
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-  line-height: 1.12;
+  font-size:var(--cond-size);
+  font-weight:700;
+  letter-spacing:.15px;
+  color:var(--text);
+  min-width:0;
+  display:-webkit-box;
+  -webkit-box-orient:vertical;
+  -webkit-line-clamp:2;
+  overflow:hidden;
+  line-height:1.10
 }
 
-/* Weather info list: set to stretch and shrink safely inside remaining space */
+/* FIX 1: make weatherInfo a strict 2x2 grid so the last two rows can't get clipped */
 .weatherInfo{
-  min-width: 0;
-  min-height: 0;
+  min-width:0;
+  min-height:50px;
 
   display:grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  grid-auto-rows: 1fr;           /* forces the 4 cells to share available height */
-  gap: 8px 10px;
-  align-content: stretch;
+  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
+  grid-template-rows:minmax(0,1fr) minmax(0,1fr);
+  gap:6px 8px;
+
+  align-content:stretch;
+  align-items:stretch;
 }
 
 .weatherInfo p{
   margin:0;
-  padding: 7px 10px;             /* tightened to prevent bottom clipping */
-  border-radius: 14px;
-
-  background: rgba(255,255,255,0.035);
-  border: 1px solid rgba(255,255,255,0.06);
-
-  font-size: var(--info-size);
-  line-height: 1.08;
-  color: var(--muted);
+  padding:6px 9px;             /* slightly tighter */
+  border-radius:14px;
+  background:#ffffff09;
+  border:1px solid rgba(255,255,255,.06);
+  font-size:var(--info-size);
+  line-height:1.00;            /* tighter to stop bottom clipping */
+  color:var(--muted);
 
   display:flex;
   align-items:center;
   justify-content:space-between;
 
-  min-width: 0;
-  min-height: 0;
+  min-width:0;
+  min-height:0;
 
   overflow:hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  text-overflow:ellipsis;
+  white-space:nowrap
 }
 
-#temp, #feels, #wind, #humidity{
-  color: var(--text);
-  font-weight: 650;
-}
+#temp,#feels,#wind,#humidity{color:var(--text);font-weight:650}
 
-/* =========
-   Top Right: Radar Image (NO CROP)
-   ========= */
+/* -------- Top Right (Radar) -------- */
 .topRight{
-  padding: 12px;
+  padding:12px;
   display:flex;
   align-items:center;
   justify-content:center;
-
-  background:
-    radial-gradient(800px 520px at 70% 10%, rgba(167,139,250,0.09), transparent 55%),
-    rgba(0,0,0,0.10);
+  background:radial-gradient(800px 520px at 70% 10%,rgba(167,139,250,.09),transparent 55%),#0000001a
 }
 
+/* FIX 2: slight zoom, clip a bit top/bottom */
 #radar{
   width:100%;
   height:100%;
 
-  /* Key change: show the whole radar without cropping */
-  object-fit: contain;
-  object-position: center;
+  object-fit:scale-down;             /* crop instead of letterbox */
+  object-position:center 55%;   /* trims a touch more top/bottom */
+  transform:scale(1.5);        /* very slight zoom */
+  transform-origin:center;
 
-  border-radius: calc(var(--radius) - 6px);
-  border: 1px solid rgba(255,255,255,0.08);
-  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
-
-  /* If the gif has transparency or odd edges, this makes letterboxing look intentional */
-  background: rgba(0,0,0,0.22);
-
-  display:block;
+  border-radius:calc(var(--radius) - 6px);
+  border:1px solid rgba(255,255,255,.08);
+  box-shadow:0 14px 40px #00000073;
+  background:#00000038;
+  display:block
 }
 
-.topRight::after{
+.topRight:after{
   content:"Radar";
   position:absolute;
-  top: 12px;
-  left: 14px;
-  padding: 6px 10px;
-
-  font-size: 14px;
-  letter-spacing: 0.6px;
-  text-transform: uppercase;
-  color: rgba(255,255,255,0.72);
-
-  background: rgba(0,0,0,0.40);
-  border: 1px solid rgba(255,255,255,0.08);
-  border-radius: 999px;
+  top:12px;
+  left:14px;
+  padding:6px 10px;
+  font-size:14px;
+  letter-spacing:.6px;
+  text-transform:uppercase;
+  color:#ffffffb8;
+  background:#0006;
+  border:1px solid rgba(255,255,255,.08);
+  border-radius:999px
 }
 
-/* =========
-   Bottom Left: Forecast Table (already tightened)
-   ========= */
-.bottomLeft{
-  padding: 12px;
-  display:flex;
-  min-width: 0;
-  min-height: 0;
-}
+/* -------- Bottom Left (Forecast) -------- */
+.bottomLeft{padding:12px;display:flex;min-width:0;min-height:0}
 
 table{
   width:100%;
   height:100%;
-  border-collapse: separate;
-  border-spacing: 0;
+  border-collapse:separate;
+  border-spacing:0;
   overflow:hidden;
-
-  border-radius: calc(var(--radius) - 6px);
-  background: rgba(0,0,0,0.18);
-  border: 1px solid rgba(255,255,255,0.08);
-
-  table-layout: fixed;
+  border-radius:calc(var(--radius) - 6px);
+  background:#0000002e;
+  border:1px solid rgba(255,255,255,.08);
+  table-layout:fixed
 }
 
 thead th{
-  padding: 8px 8px;
-  font-size: var(--table-head);
-  line-height: 1.1;
-
-  color: rgba(255,255,255,0.82);
-  letter-spacing: 0.4px;
-  text-transform: uppercase;
-
-  background: linear-gradient(90deg, rgba(76,201,240,0.10), rgba(167,139,250,0.08));
-  border-bottom: 1px solid rgba(255,255,255,0.10);
-
+  padding:8px;
+  font-size:var(--table-head);
+  line-height:1.1;
+  color:#ffffffd1;
+  letter-spacing:.4px;
+  text-transform:uppercase;
+  background:linear-gradient(90deg,#4cc9f01a,#a78bfa14);
+  border-bottom:1px solid rgba(255,255,255,.1);
   overflow:hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  text-overflow:ellipsis;
+  white-space:nowrap
 }
 
 tbody td{
-  padding: 6px 8px;
-  font-size: var(--table-cell);
-  line-height: 1.1;
-
-  color: var(--muted);
-  border-bottom: 1px solid rgba(255,255,255,0.06);
-
+  padding:6px 8px;
+  font-size:var(--table-cell);
+  line-height:1.1;
+  color:var(--muted);
+  border-bottom:1px solid rgba(255,255,255,.06);
   overflow:hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  text-overflow:ellipsis;
+  white-space:nowrap
 }
 
 tbody td:first-child{
-  width: 44%;
-  color: rgba(255,255,255,0.88);
-  font-weight: 760;
-  letter-spacing: 0.15px;
-
-  background: rgba(255,255,255,0.03);
-  border-right: 1px solid rgba(255,255,255,0.06);
+  width:44%;
+  color:#ffffffe0;
+  font-weight:760;
+  letter-spacing:.15px;
+  background:#ffffff08;
+  border-right:1px solid rgba(255,255,255,.06)
 }
 
-tbody td:not(:first-child),
-thead th:not(:first-child){
-  text-align:center;
-}
-
-tbody tr:nth-child(odd) td{ background: rgba(255,255,255,0.018); }
-tbody tr:nth-child(even) td{ background: rgba(255,255,255,0.028); }
-tbody tr:nth-child(odd) td:first-child{ background: rgba(255,255,255,0.040); }
-tbody tr:nth-child(even) td:first-child{ background: rgba(255,255,255,0.055); }
-
-tbody tr:last-child td{ border-bottom: none; }
+tbody td:not(:first-child),thead th:not(:first-child){text-align:center}
+tbody tr:nth-child(odd) td{background:#ffffff05}
+tbody tr:nth-child(2n) td{background:#ffffff07}
+tbody tr:nth-child(odd) td:first-child{background:#ffffff0a}
+tbody tr:nth-child(2n) td:first-child{background:#ffffff0e}
+tbody tr:last-child td{border-bottom:none}
 
-/* =========
-   Bottom Right: YouTube iframe
-   ========= */
+/* -------- Bottom Right -------- */
 .bottomRight{
-  padding: 12px;
-  background:
-    radial-gradient(900px 600px at 20% 20%, rgba(76,201,240,0.08), transparent 55%),
-    rgba(0,0,0,0.10);
-
-  min-width: 0;
-  min-height: 0;
+  padding:12px;
+  background:radial-gradient(900px 600px at 20% 20%,rgba(76,201,240,.08),transparent 55%),#0000001a;
+  min-width:0;
+  min-height:0
 }
 
 .bottomRight iframe{
   width:100%;
   height:100%;
-  border: 1px solid rgba(255,255,255,0.10);
-  border-radius: calc(var(--radius) - 6px);
-  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
-  background: #000;
-  display:block;
+  border:1px solid rgba(255,255,255,.1);
+  border-radius:calc(var(--radius) - 6px);
+  box-shadow:0 18px 50px #0000008c;
+  background:#000;
+  display:block
 }
 
-/* Focus styling */
-:focus{
-  outline: 2px solid rgba(76,201,240,0.55);
-  outline-offset: 2px;
-}
+:focus{outline:2px solid rgba(76,201,240,.55);outline-offset:2px}
 

index.html

@@ -1,402 +1,95 @@
-/* =========
-   Dark TV Dashboard Theme tuned for:
-   - viewport: 960 x 540
-   - devicePixelRatio (DPI): 2
-   - NO media queries
-   Notes:
-   - All sizing is based on the 960x540 viewport, so everything fits without clipping.
-   - Radar is non-cropped (contain).
-   ========= */
-
-:root{
-  --bg: #0b0f16;
-  --border: rgba(255,255,255,0.10);
-
-  --text: rgba(255,255,255,0.92);
-  --muted: rgba(255,255,255,0.68);
-
-  --accent: #4cc9f0;
-  --accent-2: #a78bfa;
-
-  /* Layout tuned to 960x540 */
-  --outer-pad: 10px;
-  --gap: 10px;
-  --radius: 14px;
-  --radius-sm: 10px;
-
-  --font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, sans-serif;
-}
-
-*{ box-sizing:border-box; }
-html, body{ height:100%; width:100%; }
-
-body{
-  margin:0;
-  font-family: var(--font);
-  color: var(--text);
-  background:
-    radial-gradient(900px 520px at 20% 10%, rgba(76,201,240,0.12), transparent 60%),
-    radial-gradient(700px 420px at 85% 20%, rgba(167,139,250,0.10), transparent 55%),
-    radial-gradient(700px 480px at 50% 100%, rgba(255,255,255,0.06), transparent 55%),
-    var(--bg);
-  overflow:hidden;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: geometricPrecision;
-}
-
-/* =========
-   2x2 Grid fixed for this viewport
-   ========= */
-.grid{
-  height:100vh;
-  width:100vw;
-  padding: var(--outer-pad);
-
-  display:grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1.30fr);
-  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
-  gap: var(--gap);
-}
-
-.grid > *{
-  min-width: 0;
-  min-height: 0;
-}
-
-.topLeft, .topRight, .bottomLeft, .bottomRight{
-  position:relative;
-  min-width: 0;
-  min-height: 0;
-
-  border-radius: var(--radius);
-  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
-  border: 1px solid var(--border);
-  box-shadow:
-    0 8px 24px rgba(0,0,0,0.35),
-    inset 0 1px 0 rgba(255,255,255,0.06);
-  overflow:hidden;
-}
-
-/* =========
-   Top Left: Date/Time + Current Weather
-   Sized to fit in a 960x540 tile.
-   ========= */
-.topLeft{
-  display:flex;
-  flex-direction:column;
-  min-width: 0;
-  min-height: 0;
-
-  padding: 8px;
-  gap: 8px;
-}
-
-.dateTime{
-  flex: 0 0 auto;
-  min-width: 0;
-
-  display:flex;
-  flex-direction:column;
-  gap: 2px;
-
-  padding: 7px 9px;
-  border-radius: var(--radius-sm);
-  background: rgba(0,0,0,0.22);
-  border: 1px solid rgba(255,255,255,0.08);
-}
-
-#date{
-  margin:0;
-  font-size: 12px;
-  letter-spacing: 0.35px;
-  color: var(--muted);
-}
-
-#time{
-  margin:0;
-  font-size: 32px;
-  font-weight: 760;
-  letter-spacing: 0.6px;
-  line-height: 1.00;
-  color: var(--text);
-
-  overflow:hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.weather{
-  flex: 1 1 auto;
-  min-width: 0;
-  min-height: 0;
-  display:flex;
-}
-
-.weatherBlock{
-  flex: 1 1 auto;
-  min-width: 0;
-  min-height: 0;
-
-  padding: 8px;
-  border-radius: var(--radius-sm);
-  background:
-    radial-gradient(420px 200px at 20% 10%, rgba(76,201,240,0.10), transparent 60%),
-    rgba(0,0,0,0.18);
-  border: 1px solid rgba(255,255,255,0.08);
-
-  display:grid;
-  grid-template-rows: auto auto minmax(0, 1fr);
-  gap: 6px;
-}
-
-.weatherBlock h2{
-  margin:0;
-  font-size: 12px;
-  font-weight: 820;
-  letter-spacing: 0.45px;
-  display:flex;
-  align-items:center;
-  gap: 8px;
-}
-
-.weatherBlock h2::before{
-  content:"";
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, var(--accent), var(--accent-2));
-  box-shadow: 0 0 14px rgba(76,201,240,0.35);
-}
-
-.condition{
-  display:flex;
-  align-items:center;
-  gap: 8px;
-
-  padding: 6px 8px;
-  border-radius: 12px;
-  background: rgba(255,255,255,0.04);
-  border: 1px solid rgba(255,255,255,0.06);
-
-  min-width: 0;
-}
-
-.condition img{
-  width: 26px;
-  height: 26px;
-  object-fit: contain;
-  filter: drop-shadow(0 5px 8px rgba(0,0,0,0.45));
-  flex: 0 0 auto;
-}
-
-.conditionText{
-  margin:0;
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.1px;
-  color: var(--text);
-
-  min-width: 0;
-  line-height: 1.05;
-
-  /* allow up to 2 lines without exploding height */
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-}
-
-.weatherInfo{
-  min-width: 0;
-  min-height: 0;
-
-  display:grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
-  gap: 6px 8px;
-  align-content: stretch;
-}
-
-.weatherInfo p{
-  margin:0;
-  padding: 5px 8px;
-  border-radius: 12px;
-
-  background: rgba(255,255,255,0.035);
-  border: 1px solid rgba(255,255,255,0.06);
-
-  font-size: 11px;
-  line-height: 1.00;
-  color: var(--muted);
-
-  display:flex;
-  align-items:center;
-  justify-content:space-between;
-
-  min-width: 0;
-  min-height: 0;
-
-  overflow:hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-#temp, #feels, #wind, #humidity{
-  color: var(--text);
-  font-weight: 650;
-}
-
-/* =========
-   Top Right: Radar (no crop)
-   ========= */
-.topRight{
-  padding: 8px;
-  display:flex;
-  align-items:center;
-  justify-content:center;
-
-  background:
-    radial-gradient(620px 420px at 70% 10%, rgba(167,139,250,0.09), transparent 55%),
-    rgba(0,0,0,0.10);
-}
-
-#radar{
-  width:100%;
-  height:100%;
-
-  object-fit: contain;
-  object-position: center;
-
-  max-width: 100%;
-  max-height: 100%;
-
-  border-radius: calc(var(--radius) - 4px);
-  border: 1px solid rgba(255,255,255,0.08);
-  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
-  background: rgba(0,0,0,0.22);
-
-  display:block;
-}
-
-.topRight::after{
-  content:"Radar";
-  position:absolute;
-  top: 8px;
-  left: 10px;
-  padding: 4px 8px;
-
-  font-size: 10px;
-  letter-spacing: 0.6px;
-  text-transform: uppercase;
-  color: rgba(255,255,255,0.72);
-
-  background: rgba(0,0,0,0.40);
-  border: 1px solid rgba(255,255,255,0.08);
-  border-radius: 999px;
-}
-
-/* =========
-   Bottom Left: Forecast Table (already tight)
-   ========= */
-.bottomLeft{
-  padding: 8px;
-  display:flex;
-  min-width: 0;
-  min-height: 0;
-}
-
-table{
-  width:100%;
-  height:100%;
-  border-collapse: separate;
-  border-spacing: 0;
-  overflow:hidden;
-
-  border-radius: calc(var(--radius) - 4px);
-  background: rgba(0,0,0,0.18);
-  border: 1px solid rgba(255,255,255,0.08);
-
-  table-layout: fixed;
-}
-
-thead th{
-  padding: 6px 6px;
-  font-size: 10px;
-  line-height: 1.05;
-
-  color: rgba(255,255,255,0.82);
-  letter-spacing: 0.35px;
-  text-transform: uppercase;
-
-  background: linear-gradient(90deg, rgba(76,201,240,0.10), rgba(167,139,250,0.08));
-  border-bottom: 1px solid rgba(255,255,255,0.10);
-
-  overflow:hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-tbody td{
-  padding: 5px 6px;
-  font-size: 10px;
-  line-height: 1.05;
-
-  color: var(--muted);
-  border-bottom: 1px solid rgba(255,255,255,0.06);
-
-  overflow:hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-tbody td:first-child{
-  width: 46%;
-  color: rgba(255,255,255,0.88);
-  font-weight: 760;
-  letter-spacing: 0.10px;
-
-  background: rgba(255,255,255,0.03);
-  border-right: 1px solid rgba(255,255,255,0.06);
-}
-
-tbody td:not(:first-child),
-thead th:not(:first-child){
-  text-align:center;
-}
-
-tbody tr:nth-child(odd) td{ background: rgba(255,255,255,0.018); }
-tbody tr:nth-child(even) td{ background: rgba(255,255,255,0.028); }
-tbody tr:nth-child(odd) td:first-child{ background: rgba(255,255,255,0.040); }
-tbody tr:nth-child(even) td:first-child{ background: rgba(255,255,255,0.055); }
-
-tbody tr:last-child td{ border-bottom: none; }
-
-/* =========
-   Bottom Right: YouTube iframe
-   ========= */
-.bottomRight{
-  padding: 8px;
-  background:
-    radial-gradient(700px 480px at 20% 20%, rgba(76,201,240,0.08), transparent 55%),
-    rgba(0,0,0,0.10);
-
-  min-width: 0;
-  min-height: 0;
-}
-
-.bottomRight iframe{
-  width:100%;
-  height:100%;
-  border: 1px solid rgba(255,255,255,0.10);
-  border-radius: calc(var(--radius) - 4px);
-  box-shadow: 0 12px 36px rgba(0,0,0,0.55);
-  background: #000;
-  display:block;
-}
-
-/* Focus styling */
-:focus{
-  outline: 2px solid rgba(76,201,240,0.55);
-  outline-offset: 2px;
-}
-
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <style></style>
+    </head>
+    <body>
+        <div class="grid">
+            <div class="topLeft">
+                <div class="dateTime">
+                    <p id="date"></p>
+                    <p id="time"></p>
+                </div>
+                <div class="weather">
+                    <div id="currentWeather" class="weatherBlock">
+                        <div class="condition">
+                            <img> 
+                            <p class="conditionText"></p>
+                        </div>
+                        <div class="weatherInfo">
+                            <p id="temp"></p>
+                            <p id="feels"></p>
+                            <p id="wind"></p>
+                            <p id="humidity"></p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="topRight">
+                <img id="radar" src="https://radar.weather.gov/ridge/standard/KLTX_0.gif" alt="radar">
+            </div>
+            <div class="bottomLeft">
+                <table>
+                    <thead id="forecastHead">
+                        <tr>
+                            <th></th>
+                            <th></th>
+                            <th></th>
+                            <th></th>
+                        </tr>
+                    </thead>
+                    <tbody id="forecastBody">
+                        <tr>
+                            <td>Temp (&deg;F)</td>
+                            <td></td>
+                            <td></td>
+                            <td></td>
+                        </tr>
+                        <tr>
+                            <td>Humidity</td>
+                            <td></td>
+                            <td></td>
+                            <td></td>
+                        </tr>
+                        <tr>
+                            <td>Chance Of Rain</td>
+                            <td></td>
+                            <td></td>
+                            <td></td>
+                        </tr>
+                        <tr>
+                            <td>Precipitation (inches)</td>
+                            <td></td>
+                            <td></td>
+                            <td></td>
+                        </tr>
+                        <tr>
+                            <td>Max Wind (MPH)</td>
+                            <td></td>
+                            <td></td>
+                            <td></td>
+                        </tr>
+                        <tr>
+                            <td>Sunrise</td>
+                            <td></td>
+                            <td></td>
+                            <td></td>
+                        </tr>
+                        <tr>
+                            <td>Sunset</td>
+                            <td></td>
+                            <td></td>
+                            <td></td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div class="bottomRight">
+                <iframe src="https://www.youtube-nocookie.com/embed/4nMfRpesYfw?si=O9Up2lQKNo8v9gi2" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+            </div>
+        </div>
+        <script></script>
+    </body>
+</html>