gpt-6-luna @ low · codex

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Weather — Field Notes</title>
<style>
:root{color-scheme:dark;--ink:#eef5ff;--muted:#99abc4;--line:rgba(224,238,255,.14);--aqua:#a8e5e1}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#09172b}body{min-height:100vh;display:grid;place-items:center;padding:40px;background:radial-gradient(ellipse at 50% 5%,#20395a 0%,transparent 45%),#09172b}.shell{width:min(1080px,100%);position:relative;isolation:isolate;border:1px solid rgba(221,238,255,.19);border-radius:30px;overflow:hidden;box-shadow:0 36px 100px rgba(0,0,0,.45);background:linear-gradient(110deg,rgba(9,24,45,.87),rgba(12,34,61,.72))}.shell:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,rgba(7,20,38,.74),rgba(9,28,51,.65)),radial-gradient(ellipse at 84% 12%,rgba(106,162,205,.24),transparent 34%),radial-gradient(ellipse at 8% 100%,rgba(82,139,174,.18),transparent 42%)}.inner{padding:38px 44px 34px}.top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:22px}.brand{display:flex;gap:12px;align-items:center;font-size:12px;letter-spacing:.19em;text-transform:uppercase;color:#b9c8dc}.mark{width:31px;height:31px;border:1px solid rgba(168,229,225,.5);border-radius:50%;display:grid;place-items:center;color:var(--aqua);font-size:16px}.eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#8ea6bf}.coords{font-variant-numeric:tabular-nums;text-align:right;color:var(--muted);font-size:12px}.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;padding:45px 0 40px;align-items:center}.place{font-size:15px;color:#bdd0e3;letter-spacing:.02em}.date{margin-top:9px;color:var(--muted);font-size:14px}.condition{margin-top:33px;font-size:17px;color:#dce9f4}.temperature{font-size:clamp(100px,13vw,164px);letter-spacing:-.095em;line-height:.85;font-weight:250;margin:16px 0 0}.temperature sup{font-size:.25em;vertical-align:top;letter-spacing:0;margin-left:10px;color:#b9d3df}.range{display:flex;gap:24px;margin-top:27px}.range-item{border-left:1px solid var(--line);padding-left:13px}.range-label{display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}.range strong{font-size:21px;font-weight:450}.weather-art{height:250px;display:grid;place-items:center;position:relative}.sun{width:104px;height:104px;border-radius:50%;background:linear-gradient(145deg,#f3e7b0,#d5c38c);box-shadow:0 0 55px 15px rgba(230,211,153,.12);position:absolute;top:25px;right:86px}.cloud{position:absolute;width:220px;height:66px;border-radius:50px;background:linear-gradient(180deg,#d7e2e8,#9eb2c2);top:117px;right:32px;filter:drop-shadow(0 18px 18px rgba(0,0,0,.24))}.cloud:before,.cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}.cloud:before{width:91px;height:91px;top:-40px;left:32px}.cloud:after{width:114px;height:114px;top:-55px;right:29px}.art-caption{position:absolute;bottom:7px;right:4px;text-align:right;color:rgba(201,221,237,.55);font-size:10px;letter-spacing:.16em;text-transform:uppercase}.hourly{border-top:1px solid var(--line);padding-top:23px}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.section-head h2{margin:0;font-size:10px;font-weight:550;letter-spacing:.21em;text-transform:uppercase;color:#a9bbce}.section-head span{font-size:10px;color:#8198b0}.hours{display:grid;grid-template-columns:repeat(12,1fr);gap:8px}.hour{min-width:0;text-align:center;padding:13px 5px 11px;border:1px solid rgba(220,238,255,.09);border-radius:13px;background:rgba(219,236,255,.035)}.hour time{font-size:10px;color:#9fb1c6}.mini-icon{height:27px;display:grid;place-items:center;color:#d5dfdb;font-size:14px}.hour strong{font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}.footer{display:flex;justify-content:space-between;margin-top:22px;color:#7790a9;font-size:9px;letter-spacing:.13em;text-transform:uppercase}.status{font-size:13px;color:#c5d4e5;margin-top:30px}.hidden{display:none!important}@media(max-width:760px){body{padding:15px}.inner{padding:24px 20px}.hero{grid-template-columns:1fr;padding:35px 0 24px}.weather-art{height:190px;grid-row:1}.sun{right:25%;top:14px}.cloud{right:12%;top:100px}.temperature{font-size:120px}.hours{grid-template-columns:repeat(6,1fr)}.top{align-items:flex-start}.footer{gap:20px;line-height:1.5}.art-caption{right:0}}
</style>
</head>
<body><main class="shell"><div class="inner"><header class="top"><div class="brand"><span class="mark">◌</span><span>Atmosphere / daily brief</span></div><div class="coords"><div class="eyebrow">Live conditions</div><div id="coordinates">—</div></div></header><section class="hero"><div><div class="place" id="place">Loading location…</div><div class="date" id="date">—</div><div class="condition" id="condition">Gathering the day’s forecast</div><div class="temperature" id="temperature">—<sup>°C</sup></div><div class="range"><div class="range-item"><span class="range-label">High</span><strong id="high">—</strong></div><div class="range-item"><span class="range-label">Low</span><strong id="low">—</strong></div></div></div><div class="weather-art" aria-hidden="true"><div class="sun"></div><div class="cloud"></div><div class="art-caption">A measured moment<br>in the moving sky</div></div></section><section class="hourly"><div class="section-head"><h2>Hourly temperature</h2><span>00:00 — 23:00 · UTC</span></div><div class="hours" id="hours"></div><div class="status hidden" id="status">Weather data could not be loaded. Please try again.</div></section><footer class="footer"><span>Weather, in perspective</span><span>Temperature · Celsius</span></footer></div></main>
<script>
(()=>{const params=new URLSearchParams(location.search),lat=params.get('lat')??'52.52',lon=params.get('lon')??'13.405',name=params.get('name')??'Berlin';const today=new Date().toISOString().slice(0,10),requested=params.get('date')??today;const dateValid=/^\d{4}-\d{2}-\d{2}$/.test(requested)&&!Number.isNaN(Date.parse(requested+'T00:00:00Z'));const d=dateValid?requested:today;const dateObj=new Date(d+'T00:00:00Z');document.getElementById('place').textContent=name;document.getElementById('date').textContent=new Intl.DateTimeFormat('en',{weekday:'long',year:'numeric',month:'long',day:'numeric',timeZone:'UTC'}).format(dateObj);document.getElementById('coordinates').textContent=`${Number(lat).toFixed(2)}° N  ·  ${Number(lon).toFixed(2)}° E`;const codes={0:'Clear sky',1:'Mainly clear',2:'Partly cloudy',3:'Overcast',45:'Fog',48:'Depositing rime fog',51:'Light drizzle',53:'Drizzle',55:'Dense drizzle',56:'Freezing drizzle',57:'Dense freezing drizzle',61:'Light rain',63:'Rain',65:'Heavy rain',66:'Freezing rain',67:'Heavy freezing rain',71:'Light snow',73:'Snow',75:'Heavy snow',77:'Snow grains',80:'Rain showers',81:'Rain showers',82:'Heavy rain showers',85:'Snow showers',86:'Heavy snow showers',95:'Thunderstorm',96:'Thunderstorm with hail',99:'Heavy thunderstorm with hail'};const fmtTemp=v=>`${Math.round(v)}°`;async function load(){try{if(!dateValid)throw Error('Invalid date');const base=d<today?'/api/om/archive':'/api/om/forecast';const q=new URLSearchParams({latitude:lat,longitude:lon,daily:'temperature_2m_max,temperature_2m_min,weather_code',hourly:'temperature_2m',timezone:'UTC',temperature_unit:'celsius',start_date:d,end_date:d});const response=await fetch(`${base}?${q}`);if(!response.ok)throw Error('Request failed');const data=await response.json();const i=data.daily.time.indexOf(d);if(i<0)throw Error('No daily data');const max=data.daily.temperature_2m_max[i],min=data.daily.temperature_2m_min[i],code=data.daily.weather_code[i];if(max==null||min==null)throw Error('Missing temperatures');document.getElementById('temperature').innerHTML=`${fmtTemp((max+min)/2).replace('°','')}<sup>°C</sup>`;document.getElementById('high').textContent=fmtTemp(max);document.getElementById('low').textContent=fmtTemp(min);document.getElementById('condition').textContent=codes[code]??'Weather conditions';const times=data.hourly.time,temps=data.hourly.temperature_2m;const hours=document.getElementById('hours');hours.innerHTML='';for(let j=0;j<times.length;j++){const hour=Number(times[j].slice(11,13));const el=document.createElement('div');el.className='hour';el.innerHTML=`<time>${String(hour).padStart(2,'0')}:00</time><div class="mini-icon">${hour>=6&&hour<19?'◒':'✦'}</div><strong>${temps[j]==null?'—':fmtTemp(temps[j])}</strong>`;hours.appendChild(el)}if(!times.length)throw Error('No hourly data')}catch(e){document.getElementById('condition').textContent='Forecast unavailable';document.getElementById('hours').classList.add('hidden');document.getElementById('status').classList.remove('hidden')}}load()})();
</script></body></html>