Home Esplora Aiuto
Registrati Accedi
lee
/
home-display
1
0
Forka 0
File Problemi 0 Pull Requests 0 Wiki
Sfoglia il codice sorgente

i

Lee Morgan 6 mesi fa
parent
e56858d6c7
commit
70d2de3e17
2 ha cambiato i file con 402 aggiunte e 105 eliminazioni
Visualizzazione unificata Mostra Diff Stats
  1. 402 100
      index.html
  2. 0 5
      index.js

+ 402 - 100
index.html
Vedi File 

@@ -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 (&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>
 
+/* =========
 
+   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;
 
+}
 
+

+ 0 - 5
index.js
Vedi File 

@@ -1,8 +1,3 @@
 
-document.getElementById("one").textContent = window.innerWidth;
 
-document.getElementById("two").textContent = window.innerHeight;
 
-document.getElementById("three").textContent = window.devicePixelRatio;
 
-document.getElementById("four").textContent = navigator.userAgent;
 
-
 
 const setDateTime = ()=>{
 
 const setDateTime = ()=>{
 
     const dateTime = new Date();
 
     const dateTime = new Date();
 
     document.getElementById("date").textContent = dateTime.toLocaleDateString("en-US", {
 
     document.getElementById("date").textContent = dateTime.toLocaleDateString("en-US", {