|
|
@@ -1,100 +1,402 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html>
|
|
|
- <head>
|
|
|
- <meta charset="utf-8">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
- <style></style>
|
|
|
- </head>
|
|
|
- <body>
|
|
|
- <h1 id="one"></h1>
|
|
|
- <h1 id="two"></h1>
|
|
|
- <h1 id="three"></h1>
|
|
|
- <h1 id="four"></h1>
|
|
|
- <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">
|
|
|
- <h2>Current Weather</h2>
|
|
|
- <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 (°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>
|
|
|
+/* =========
|
|
|
+ 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;
|
|
|
+}
|
|
|
+
|
