<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pozzana — Galleria</title>
<meta name="description" content="Pozzana — galleria fotografica. Previsioni marine, maree, meteo, stato del sole, aurora boreale e orari del mondo." />
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌊</text></svg>" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet" />
<style>
:root{--bg:#0c0d10;--bg-2:#131419;--panel:#16181d;--ink:#e9e6e1;--ink-soft:#a7a39d;--ink-dim:#6f6c67;--accent:#c9a86a;--line:rgba(255,255,255,.08);--sea:#4ea3c7;--aurora:#7bd3a0;--sun:#e8b65a;--radius:14px;--maxw:1180px}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--ink);font-family:"Inter",system-ui,sans-serif;font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}
.dash{background:linear-gradient(180deg,#0a1a22,#0c0d10 92%);border-bottom:1px solid var(--line);padding:16px 18px 12px}.dash-row{max-width:var(--maxw);margin:0 auto 10px;display:grid;gap:10px}.dash-row:first-child{grid-template-columns:repeat(5,1fr)}.dash-row:nth-child(2){grid-template-columns:1fr 1fr 2fr}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px;min-height:84px}.card__icon{font-size:1.5rem;line-height:1;margin-bottom:6px}.card__label{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:3px}.card__value{font-size:1.3rem;font-weight:500;font-family:"Cormorant Garamond",serif;line-height:1.1}.card__sub{font-size:.72rem;color:var(--ink-soft);margin-top:2px}
.card--tides{background:linear-gradient(135deg,#16323d,#101b22)}.card--sun{background:linear-gradient(135deg,#231b10,#16181d)}.card--sun .card__value{color:var(--sun)}.card--aurora{background:linear-gradient(135deg,#11241a,#101b22)}.card--aurora .card__value{color:var(--aurora)}.card--wide{display:flex;flex-direction:column}
.clocks{display:flex;flex-wrap:wrap;gap:14px 22px;margin-top:2px}.clock{display:flex;flex-direction:column}.clock__city{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim)}.clock__time{font-family:"Cormorant Garamond",serif;font-size:1.15rem;color:var(--ink)}.dash__foot{max-width:var(--maxw);margin:8px auto 0;font-size:.72rem;color:var(--ink-dim);text-align:center}
.site-header{position:sticky;top:0;z-index:50;background:rgba(12,13,16,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}.site-header__inner{max-width:var(--maxw);margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between}.brand{font-family:"Cormorant Garamond",serif;font-size:1.6rem;font-weight:600;letter-spacing:.04em}.nav{display:flex;gap:26px}.nav a{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);transition:color .2s}.nav a:hover{color:var(--accent)}
.hero{max-width:var(--maxw);margin:0 auto;padding:90px 24px 70px}.hero__kicker{font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}.hero__title{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(2.8rem,7vw,5.4rem);line-height:1.02;margin-bottom:22px}.hero__lead{max-width:540px;color:var(--ink-soft);font-size:1.05rem;margin-bottom:34px}.hero__cta{display:inline-block;border:1px solid var(--accent);color:var(--accent);padding:13px 26px;border-radius:40px;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;transition:.25s}.hero__cta:hover{background:var(--accent);color:#0c0d10}
.section-title{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:2rem;margin-bottom:34px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.gallery{max-width:var(--maxw);margin:0 auto;padding:60px 24px}.gallery__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.tile{position:relative;overflow:hidden;border-radius:var(--radius);aspect-ratio:4/3;background:var(--bg-2);cursor:pointer}.tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease,filter .4s}.tile:hover img{transform:scale(1.05);filter:brightness(.92)}.tile__cap{position:absolute;left:0;bottom:0;right:0;padding:16px;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);font-size:.82rem;color:#fff;opacity:0;transition:opacity .3s}.tile:hover .tile__cap{opacity:1}.tile.tall{grid-row:span 2;aspect-ratio:3/4}.tile.wide{grid-column:span 2;aspect-ratio:2/1}
.forecast{max-width:var(--maxw);margin:0 auto;padding:60px 24px}.forecast__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}.daycard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;text-align:center}.daycard__d{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:10px}.daycard__ico{font-size:2rem;margin-bottom:8px}.daycard__main{font-family:"Cormorant Garamond",serif;font-size:1.5rem;color:var(--sea)}.daycard__deg{font-size:.8rem;color:var(--ink-soft)}
.contact{max-width:var(--maxw);margin:0 auto;padding:60px 24px 90px;text-align:center}.contact p{color:var(--ink-soft);margin-bottom:18px}.contact__mail{font-family:"Cormorant Garamond",serif;font-size:1.8rem;color:var(--accent);border-bottom:1px solid transparent;transition:border .2s}.contact__mail:hover{border-color:var(--accent)}
.site-footer{border-top:1px solid var(--line);padding:26px 24px;text-align:center;color:var(--ink-dim);font-size:.78rem}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center;padding:40px}.lightbox img{max-width:92vw;max-height:88vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.6)}.lightbox__close{position:absolute;top:22px;right:28px;background:none;border:none;color:#fff;font-size:2rem;cursor:pointer;opacity:.8}.lightbox__close:hover{opacity:1}
@media(max-width:980px){.dash-row:first-child{grid-template-columns:repeat(3,1fr)}.dash-row:nth-child(2){grid-template-columns:1fr 1fr}.card--wide{grid-column:span 2}}
@media(max-width:680px){.dash-row:first-child,.dash-row:nth-child(2){grid-template-columns:repeat(2,1fr)}.card--wide{grid-column:span 2}.gallery__grid{grid-template-columns:repeat(2,1fr)}.tile.wide{grid-column:span 2}.tile.tall{grid-row:auto;aspect-ratio:3/4}.nav{gap:16px}}
@media(max-width:480px){.dash-row:first-child,.dash-row:nth-child(2){grid-template-columns:1fr 1fr}.gallery__grid{grid-template-columns:1fr}.tile.wide,.tile.tall{grid-column:auto;grid-row:auto;aspect-ratio:4/3}.nav a{font-size:.72rem}}
</style>
</head>
<body>
<section class="dash" aria-label="Previsioni marine, meteo, sole, aurora e orari del mondo">
<div class="dash-row">
<div class="card"><div class="card__icon">🌊</div><div class="card__label">Stato del mare</div><div class="card__value" id="seaState">—</div><div class="card__sub" id="seaSub">onda · direzione</div></div>
<div class="card"><div class="card__icon">🌡️</div><div class="card__label">Temperatura acqua</div><div class="card__value" id="seaTemp">—</div><div class="card__sub">superficie</div></div>
<div class="card"><div class="card__icon">💨</div><div class="card__label">Vento</div><div class="card__value" id="wind">—</div><div class="card__sub" id="windSub">direzione</div></div>
<div class="card card--tides"><div class="card__icon">🌗</div><div class="card__label">Maree</div><div class="card__value" id="tides">—</div><div class="card__sub" id="tidesSub">prossima alta / bassa</div></div>
<div class="card"><div class="card__icon" id="wxIcon">☀️</div><div class="card__label">Meteo ora</div><div class="card__value" id="wxTemp">—</div><div class="card__sub" id="wxSub">condizioni</div></div>
</div>
<div class="dash-row">
<div class="card card--sun"><div class="card__icon">☀️</div><div class="card__label">Stato del sole</div><div class="card__value" id="sunState">—</div><div class="card__sub" id="sunSub">alba · tramonto · altezza</div></div>
<div class="card card--aurora"><div class="card__icon">🌌</div><div class="card__label">Aurora boreale</div><div class="card__value" id="aurora">—</div><div class="card__sub" id="auroraSub">indice Kp · visibilità</div></div>
<div class="card card--wide"><div class="card__icon">🕐</div><div class="card__label">Ore del mondo</div><div class="clocks" id="clocks"></div></div>
</div>
<p class="dash__foot" id="dashFoot">Caricamento previsioni…</p>
</section>
<header class="site-header"><div class="site-header__inner"><a class="brand" href="#">Pozzana</a><nav class="nav"><a href="#galleria">Galleria</a><a href="#meteo">Meteo</a><a href="#mare">Mare</a><a href="#contatti">Contatti</a></nav></div></header>
<section class="hero"><div class="hero__content"><p class="hero__kicker">Galleria fotografica</p><h1 class="hero__title">Luce del golfo</h1><p class="hero__lead">Scatti del mare, della costa e del cielo di Pozzana. Una collezione che cresce con le stagioni e con le maree.</p><a class="hero__cta" href="#galleria">Vedi la galleria →</a></div></section>
<section class="gallery" id="galleria"><h2 class="section-title">Galleria</h2><div class="gallery__grid" id="galleryGrid"></div></section>
<section class="forecast" id="meteo"><h2 class="section-title">Previsioni del tempo</h2><div class="forecast__grid" id="wxForecast"></div></section>
<section class="forecast" id="mare"><h2 class="section-title">Il Mare</h2><div class="forecast__grid" id="seaForecast"></div></section>
<section class="contact" id="contatti"><h2 class="section-title">Contatti</h2><p>Per stampe, licenze d'uso o collaborazioni:</p><a class="contact__mail" href="mailto:info@pozzana.it">info@pozzana.it</a></section>
<footer class="site-footer"><p>© <span id="year"></span> Pozzana — Galleria. Tutte le foto sono protette da copyright.</p></footer>
<div class="lightbox" id="lightbox" hidden><button class="lightbox__close" id="lbClose" aria-label="Chiudi">✕</button><img id="lbImg" src="" alt="" /></div>
<script>
const LAT=46.064,LON=13.236,PLACE_NAME="Udine",SEA_LAT=45.71,SEA_LON=13.40,TIDES_API_KEY="";
const WORLD_CITIES=[{name:"Roma",tz:"Europe/Rome"},{name:"Londra",tz:"Europe/London"},{name:"New York",tz:"America/New_York"},{name:"Tokyo",tz:"Asia/Tokyo"},{name:"Sydney",tz:"Australia/Sydney"}];
const PHOTOS=[{src:"https://picsum.photos/seed/pozzana1/900/680",cap:"Alba sul golfo",cls:"wide"},{src:"https://picsum.photos/seed/pozzana2/680/900",cap:"Scogliera",cls:"tall"},{src:"https://picsum.photos/seed/pozzana3/680/680",cap:"Onde"},{src:"https://picsum.photos/seed/pozzana4/680/680",cap:"Barche"},{src:"https://picsum.photos/seed/pozzana5/680/680",cap:"Tramonto"},{src:"https://picsum.photos/seed/pozzana6/900/680",cap:"Costa",cls:"wide"},{src:"https://picsum.photos/seed/pozzana7/680/680",cap:"Riflessi"},{src:"https://picsum.photos/seed/pozzana8/680/900",cap:"Faraglione",cls:"tall"},{src:"https://picsum.photos/seed/pozzana9/680/680",cap:"Mare calmo"}];
const WMO={0:["☀️","Sereno"],1:["🌤️","Preval. sereno"],2:["⛅","Nuvoloso"],3:["☁️","Coperto"],45:["🌫️","Nebbia"],48:["🌫️","Nebbia"],51:["🌦️","Pioviggine"],53:["🌦️","Pioviggine"],55:["🌧️","Pioggia"],61:["🌧️","Pioggia"],63:["🌧️","Pioggia"],65:["🌧️","Pioggia"],71:["🌨️","Neve"],73:["🌨️","Neve"],75:["❄️","Neve"],80:["🌧️","Rovesci"],81:["🌧️","Rovesci"],82:["⛈️","Rovesci"],95:["⛈️","Temporale"],96:["⛈️","Temporale"],99:["⛈️","Temporale"]};
const wmo=c=>WMO[c]||["🌡️","—"];
const dir=d=>{if(d==null)return"—";const r=["N","NNE","NE","ENE","E","ESE","SE","SSE","S","SSO","SO","OSO","O","ONO","NO","NNO"];return r[Math.round(d/22.5)%16];};
function douglas(h){if(h==null)return"—";if(h<0.1)return"Calmo";if(h<0.5)return"Quasi calmo";if(h<1.25)return"Poco mosso";if(h<2.5)return"Mosso";if(h<4)return"Molto mosso";if(h<6)return"Agitato";if(h<9)return"Molto agitato";return"Tempestoso";}
function buildGallery(){const g=document.getElementById("galleryGrid");PHOTOS.forEach(p=>{const t=document.createElement("div");t.className="tile"+(p.cls?(" "+p.cls):"");t.innerHTML=`<img src="${p.src}" alt="${p.cap}" loading="lazy"><div class="tile__cap">${p.cap}</div>`;t.addEventListener("click",()=>openLightbox(p.src,p.cap));g.appendChild(t);});}
function openLightbox(s,a){const lb=document.getElementById("lightbox");document.getElementById("lbImg").src=s;document.getElementById("lbImg").alt=a;lb.hidden=false;}
document.getElementById("lbClose").addEventListener("click",()=>document.getElementById("lightbox").hidden=true);
document.getElementById("lightbox").addEventListener("click",e=>{if(e.target.id==="lightbox")e.currentTarget.hidden=true;});
document.addEventListener("keydown",e=>{if(e.key==="Escape")document.getElementById("lightbox").hidden=true;});
async function fetchJson(u){const r=await fetch(u);if(!r.ok)throw new Error("HTTP "+r.status);return r.json();}
async function loadWeather(){const mu=`https://marine-api.open-meteo.com/v1/marine?latitude=${SEA_LAT}&longitude=${SEA_LON}¤t=wave_height,wave_direction,sea_surface_temperature&daily=wave_height_max,wave_direction_dominant&timezone=auto&forecast_days=5`;const wu=`https://api.open-meteo.com/v1/forecast?latitude=${LAT}&longitude=${LON}¤t=temperature_2m,wind_speed_10m,wind_direction_10m,weather_code&daily=weather_code,temperature_2m_max,temperature_2m_min,sunrise,sunset,uv_index_max&timezone=auto&forecast_days=5`;try{const[m,w]=await Promise.all([fetchJson(mu),fetchJson(wu)]);renderMarine(m,w);renderSun(w);renderWxForecast(w);renderSeaForecast(m,w);}catch(e){document.getElementById("dashFoot").textContent="Impossibile caricare le previsioni.";console.error(e);}}
function renderMarine(m,w){const mc=m.current||{},wc=w.current||{},wh=mc.wave_height;document.getElementById("seaState").textContent=douglas(wh);document.getElementById("seaSub").textContent=(wh!=null?wh.toFixed(1)+" m · ":"")+dir(mc.wave_direction);const st=mc.sea_surface_temperature;document.getElementById("seaTemp").textContent=st!=null?st.toFixed(1)+"°C":"—";document.getElementById("wind").textContent=wc.wind_speed_10m!=null?Math.round(wc.wind_speed_10m)+" km/h":"—";document.getElementById("windSub").textContent=dir(wc.wind_direction_10m);const[ico,desc]=wmo(wc.weather_code);document.getElementById("wxIcon").textContent=ico;document.getElementById("wxTemp").textContent=wc.temperature_2m!=null?Math.round(wc.temperature_2m)+"°C":"—";document.getElementById("wxSub").textContent=desc;const u=new Date().toLocaleTimeString("it-IT",{hour:"2-digit",minute:"2-digit"});document.getElementById("dashFoot").textContent=`Previsioni Open-Meteo · ${PLACE_NAME} · aggiornato alle ${u}`;}
function renderSun(w){const d=w.daily;if(!d||!d.sunrise){document.getElementById("sunState").textContent="—";return;}const now=new Date(),sr=new Date(d.sunrise[0]),ss=new Date(d.sunset[0]),elev=sunElevation(LAT,LON,now),isDay=elev>0,fmt=t=>t.toLocaleTimeString("it-IT",{hour:"2-digit",minute:"2-digit"});document.getElementById("sunState").textContent=isDay?"☀️ Giorno":"🌙 Notte";document.getElementById("sunSub").textContent=`alba ${fmt(sr)} · tramonto ${fmt(ss)} · ${elev.toFixed(0)}°`;}
function sunElevation(lat,lon,date){const rad=Math.PI/180,dayMs=86400000,J2000=2451545,jd=date.getTime()/dayMs+2440587.5,n=jd-J2000,L=(280.460+0.9856474*n)%360,g=((357.528+0.9856003*n)%360)*rad,lambda=(L+1.915*Math.sin(g)+0.020*Math.sin(2*g))*rad,eps=(23.439-0.0000004*n)*rad,ra=Math.atan2(Math.cos(eps)*Math.sin(lambda),Math.cos(lambda)),dec=Math.asin(Math.sin(eps)*Math.sin(lambda)),gmst=(18.697374558+24.06570982441908*n)%24,lst=gmst+lon/15;let ha=(lst*15-ra/rad)-180;while(ha>180)ha-=360;while(ha<-180)ha+=360;const h=ha*rad,latr=lat*rad;return Math.asin(Math.sin(latr)*Math.sin(dec)+Math.cos(latr)*Math.cos(dec)*Math.cos(h))/rad;}
async function loadAurora(){const el=document.getElementById("aurora"),sub=document.getElementById("auroraSub");try{const data=await fetchJson("https://services.swpc.noaa.gov/products/noaa-planetary-k-index.json"),last=data[data.length-1],kp=parseFloat(last[1]);el.textContent=`Kp ${kp.toFixed(1)}`;let note;if(kp>=9)note="Tempesta estrema · visibile anche a basse lat.";else if(kp>=8)note="Tempesta forte · possibile a basse lat.";else if(kp>=7)note="Tempesta · visibile ad alta lat.";else if(kp>=5)note="Attività moderata · alta lat.";else note="Attività bassa · non visibile qui";sub.textContent=note;}catch(e){el.textContent="—";sub.textContent="dato aurora non disponibile";}}
async function loadTides(){const el=document.getElementById("tides"),sub=document.getElementById("tidesSub");if(!TIDES_API_KEY){el.textContent="—";sub.innerHTML=`<a href="https://www.worldtides.info/developers" target="_blank" rel="noopener" style="color:var(--accent)">Aggiungi chiave maree →</a>`;return;}try{const data=await fetchJson(`https://www.worldtides.info/api/v3?extremes&lat=${SEA_LAT}&lon=${SEA_LON}&key=${TIDES_API_KEY}&days=2`),now=Date.now(),next=(data.extremes||[]).find(x=>x.dt*1000>now);if(!next){el.textContent="—";sub.textContent="nessun dato";return;}const t=new Date(next.dt*1000).toLocaleTimeString("it-IT",{hour:"2-digit",minute:"2-digit"});el.textContent=(next.type==="high"?"🟢 Alta":"🔵 Bassa")+" "+t;const after=(data.extremes||[]).find(x=>x.dt*1000>next.dt*1000);sub.textContent=after?"poi "+(after.type==="high"?"alta":"bassa")+" "+new Date(after.dt*1000).toLocaleTimeString("it-IT",{hour:"2-digit",minute:"2-digit"}):"—";}catch(e){el.textContent="—";sub.textContent="dato maree non disponibile";}}
function renderClocks(){document.getElementById("clocks").innerHTML=WORLD_CITIES.map(c=>`<div class="clock"><span class="clock__city">${c.name}</span><span class="clock__time" data-tz="${c.tz}">--:--</span></div>`).join("");}
function tickClocks(){const now=new Date();document.querySelectorAll(".clock__time").forEach(el=>{el.textContent=now.toLocaleTimeString("it-IT",{hour:"2-digit",minute:"2-digit",timeZone:el.getAttribute("data-tz"),hour12:false});});}
function renderWxForecast(w){const wrap=document.getElementById("wxForecast"),d=w.daily;if(!d||!d.time){wrap.textContent="Dati meteo non disponibili.";return;}wrap.innerHTML="";d.time.forEach((day,i)=>{const[ico,desc]=wmo(d.weather_code[i]);const c=document.createElement("div");c.className="daycard";const when=i===0?"Oggi":i===1?"Domani":new Date(day).toLocaleDateString("it-IT",{weekday:"short",day:"numeric",month:"short"});c.innerHTML=`<div class="daycard__d">${when}</div><div class="daycard__ico">${ico}</div><div class="daycard__main">${Math.round(d.temperature_2m_max[i])}° / ${Math.round(d.temperature_2m_min[i])}°</div><div class="daycard__deg">${desc}</div>`;wrap.appendChild(c);});}
function renderSeaForecast(m,w){const wrap=document.getElementById("seaForecast"),md=m.daily,wd=w.daily;if(!md||!md.time){wrap.textContent="Dati mare non disponibili.";return;}wrap.innerHTML="";md.time.forEach((day,i)=>{const[ico,desc]=wmo(wd.weather_code[i]);const c=document.createElement("div");c.className="daycard";const when=i===0?"Oggi":i===1?"Domani":new Date(day).toLocaleDateString("it-IT",{weekday:"short",day:"numeric",month:"short"});c.innerHTML=`<div class="daycard__d">${when}</div><div class="daycard__ico">${ico}</div><div class="daycard__main">${md.wave_height_max?md.wave_height_max[i].toFixed(1):"—"} m</div><div class="daycard__deg">${desc} · ${Math.round(wd.temperature_2m_max[i])}°</div>`;wrap.appendChild(c);});}
document.getElementById("year").textContent=new Date().getFullYear();buildGallery();renderClocks();tickClocks();setInterval(tickClocks,1000);loadWeather();loadAurora();loadTides();
</script>
</body>
</html>