Acasă Explorează Ajutor
Înregistrare Autentificare
lee
/
home-display
1
0
Bifurcare 0
Fisiere Probleme 0 Trageți solicitările 0 Wiki
Arbore: 8dd341e0f4
Ramuri Etichete
home-display
/
index.html

index.html 8.7 KB
Istoric Crud

123 
  1. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style>:root{--bg: #0b0f16;--surface: rgba(255,255,255,.06);--surface-2: rgba(255,255,255,.09);--border: rgba(255,255,255,.1);--text: rgba(255,255,255,.92);--muted: rgba(255,255,255,.68);--faint: rgba(255,255,255,.52);--accent: #4cc9f0;--accent-2: #a78bfa;--good: #34d399;--warn: #fbbf24;--radius: 18px;--radius-sm: 12px;--pad: 18px;--gap: 16px;--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(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}body{-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}.grid{height:100vh;width:100vw;padding:18px;display:grid;grid-template-columns:1.1fr 1.4fr;grid-template-rows:1fr 1fr;gap:var(--gap)}.topLeft,.topRight,.bottomLeft,.bottomRight{position:relative;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}.topLeft{display:flex;flex-direction:column;padding:var(--pad);gap:14px}.dateTime{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:var(--radius-sm);background:#00000038;border:1px solid rgba(255,255,255,.08)}#date{margin:0;font-size:22px;letter-spacing:.4px;color:var(--muted)}#time{margin:0;font-size:56px;font-weight:700;letter-spacing:1.2px;line-height:1.05;color:var(--text)}.weather{flex:1;min-height:0;display:flex}.weatherBlock{flex:1;min-height:0;padding:16px;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:flex;flex-direction:column;gap:12px}.weatherBlock h2{margin:0;font-size:18px;font-weight:700;letter-spacing:.5px;color:var(--text);display:flex;align-items:center;gap:10px}.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 #4cc9f059}.condition{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:#ffffff0a;border:1px solid rgba(255,255,255,.06)}.condition img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}.conditionText{margin:0;font-size:22px;font-weight:650;letter-spacing:.2px;color:var(--text)}.weatherInfo{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin-top:2px}.weatherInfo p{margin:0;padding:10px 12px;border-radius:14px;background:#ffffff09;border:1px solid rgba(255,255,255,.06);font-size:18px;color:var(--muted);display:flex;align-items:center;justify-content:space-between}.weatherInfo p strong,#temp,#feels,#wind,#humidity{color:var(--text)}#temp{font-size:20px;font-weight:650}#feels,#wind,#humidity{font-weight:550}.topRight{padding:12px;display:flex;align-items:center;justify-content:center;background:radial-gradient(800px 520px at 70% 10%,rgba(167,139,250,.09),transparent 55%),#0000001a}#radar{width:100%;height:100%;object-fit:cover;border-radius:calc(var(--radius) - 6px);border:1px solid rgba(255,255,255,.08);box-shadow:0 14px 40px #00000073;filter:contrast(1.04) saturate(1.05)}.topRight:after{content:"Radar";position:absolute;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;backdrop-filter:blur(8px)}.bottomLeft{padding:12px;display:flex}table{width:100%;height:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:calc(var(--radius) - 6px);background:#0000002e;border:1px solid rgba(255,255,255,.08)}thead th{padding:12px 10px;font-size:15px;color:#fffc;letter-spacing:.4px;text-transform:uppercase;background:linear-gradient(90deg,#4cc9f01a,#a78bfa14);border-bottom:1px solid rgba(255,255,255,.1)}tbody td{padding:12px 10px;font-size:16px;color:var(--muted);border-bottom:1px solid rgba(255,255,255,.06)}tbody td:first-child{width:38%;color:#ffffffdb;font-weight:650;letter-spacing:.2px;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:#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}.bottomRight{padding:10px;background:radial-gradient(900px 600px at 20% 20%,rgba(76,201,240,.08),transparent 55%),#0000001a}.bottomRight iframe{width:100%;height:100%;border:1px solid rgba(255,255,255,.1);border-radius:calc(var(--radius) - 6px);box-shadow:0 18px 50px #0000008c;background:#000}:focus{outline:2px solid rgba(76,201,240,.55);outline-offset:2px}@media(max-width:1100px){.grid{grid-template-columns:1fr;grid-template-rows:auto auto auto auto}#time{font-size:48px}.weatherInfo{grid-template-columns:1fr}}.grid{filter:brightness(.98)}
    2. 

  2. </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"> <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>(()=>{var i=()=>{let t=new Date;document.getElementById("date").textContent=t.toLocaleDateString("en-US",{weekday:"long",year:"numeric",month:"long",day:"numeric"}),document.getElementById("time").textContent=t.toLocaleTimeString("en-US",{hour:"numeric",minute:"2-digit",hour12:!0})},l=t=>{let c=document.getElementById("forecastHead").children[0],n=document.getElementById("forecastBody");for(let e=0;e<t.length;e++){let[o,r,d]=t[e].date.split("-").map(Number),m=new Date(o,r-1,d);c.children[e+1].textContent=m.toLocaleDateString("en-US",{month:"short",day:"numeric",year:"2-digit"}),n.children[0].children[e+1].textContent=`${t[e].day.mintemp_f} - ${t[e].day.maxtemp_f}`,n.children[1].children[e+1].textContent=`${t[e].day.avghumidity}%`,n.children[2].children[e+1].textContent=`${t[e].day.daily_chance_of_rain}%`,n.children[3].children[e+1].textContent=t[e].day.totalprecip_in,n.children[4].children[e+1].textContent=t[e].day.maxwind_mph,n.children[5].children[e+1].textContent=t[e].astro.sunrise,n.children[6].children[e+1].textContent=t[e].astro.sunset}},a=()=>{fetch("https://api.weatherapi.com/v1/forecast.json?key=519f51763fa8477b864184849251502&q=29576&days=3&aqi=no",{method:"get"}).then(t=>t.json()).then(t=>{console.log(t);let c=`Temperature: ${t.current.temp_f}\xB0F`;document.getElementById("temp").textContent=c;let n=`Feels Like: ${t.current.feelslike_f}\xB0F`;document.getElementById("feels").textContent=n;let e=document.querySelector("#currentWeather img");e.src=`https:${t.current.condition.icon}`,e.alt=t.current.condition.text;let o=document.querySelector("#currentWeather .conditionText");o.textContent=t.current.condition.text;let r=`Wind: ${t.current.wind_mph}mph ${t.current.wind_dir}`;document.getElementById("wind").textContent=r;let d=`Humidity: ${t.current.humidity}%`;document.getElementById("humidity").textContent=d,l(t.forecast.forecastday)}).catch(t=>{console.log(t)})},u=()=>{let t=document.getElementById("radar"),c=t.src.split("?")[0];t.src=c+"?t="+Date.now()};a();setInterval(a,6e4);i();setInterval(i,1e4);setInterval(u,10*1e3);})();
    3. 

  3. </script> </body> </html> 
    4.