This commit is contained in:
2026-01-14 15:11:04 +01:00
parent 6b86eb8d23
commit f19d939442
+70 -37
View File
@@ -369,7 +369,7 @@ data:
- type: custom-api
url: https://www.idokep.hu/idojaras/Budapest
cache: 15m
skip-json-validation: true # CRITICAL: Fixes the JSON error
skip-json-validation: true # Mandatory for HTML scraping
style:
grid-column: span 4
grid-row: span 3
@@ -383,56 +383,89 @@ data:
{{ $sunset := findSubmatch `Napnyugta ([0-9:]+)` $body }}
<style>
.idokep-card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border-radius: 1.25rem; padding: 1.5rem; color: #fff; border: 1px solid rgba(255,255,255,0.1); }
.idokep-header { display: flex; justify-content: space-between; margin-bottom: 1.5rem; }
.idokep-main { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; }
.forecast-list { display: flex; flex-direction: column; gap: 0.5rem; border-top: 1px solid rgba(255,255,255,0.1); pt-4; }
.forecast-item { display: grid; grid-template-columns: 2.5rem 2rem 2.5rem 1fr 2.5rem; align-items: center; font-size: 0.85rem; }
.bar-container { height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; margin: 0 8px; position: relative; }
.bar-fill { position: absolute; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #60a5fa, #f87171); }
.weather-card {
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(12px);
border-radius: 1.25rem;
padding: 1.5rem;
color: #fff;
height: 100%;
display: flex;
flex-direction: column;
border: 1px solid rgba(255,255,255,0.1);
}
.temp-now { font-size: 3.5rem; font-weight: 900; line-height: 1; letter-spacing: -2px; }
.cond-now { font-size: 1rem; font-weight: 500; opacity: 0.9; margin-top: 0.25rem; }
.sun-info { display: flex; gap: 1rem; font-size: 0.75rem; opacity: 0.6; margin-top: 0.75rem; }
.forecast-table { width: 100%; border-top: 1px solid rgba(255,255,255,0.1); margin-top: 1.25rem; padding-top: 1rem; }
.day-row {
display: grid;
grid-template-columns: 3.8rem 2.5rem 2.5rem 1fr 2.5rem;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0;
font-size: 0.85rem;
}
.day-label { font-weight: 600; opacity: 0.8; }
.temp-min { text-align: right; opacity: 0.5; font-size: 0.8rem; }
.temp-max { text-align: left; font-weight: 800; font-size: 0.8rem; }
.bar-bg { height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; position: relative; }
.bar-val {
position: absolute;
height: 100%;
border-radius: 2px;
background: linear-gradient(90deg, #3b82f6, #f87171);
left: 20%;
width: 60%;
}
</style>
<div class="idokep-card">
<div class="idokep-header">
<div class="weather-card">
{{/* Current Section */}}
<div class="flex justify-between items-start">
<div>
<div class="text-xl font-bold uppercase tracking-tight">Budapest</div>
<div class="text-xs opacity-50">{{ now | formatTime "Monday, Jan 02" }}</div>
</div>
<div class="text-right text-xs opacity-60">
<div>↑ {{ $sunrise }}</div>
<div>↓ {{ $sunset }}</div>
<div class="text-[10px] uppercase tracking-[0.2em] opacity-50 font-black mb-1">Budapest</div>
<div class="temp-now">{{ $temp }}°</div>
<div class="cond-now">{{ $cond }}</div>
<div class="sun-info">
<span><i class="fas fa-sun"></i> ↑ {{ $sunrise }}</span>
<span><i class="fas fa-moon"></i> ↓ {{ $sunset }}</span>
</div>
</div>
<img src="https://www.idokep.hu{{ $icon }}" class="w-24 h-24 -mt-2 object-contain" alt="weather">
</div>
<div class="idokep-main">
<img src="https://www.idokep.hu{{ $icon }}" class="w-16 h-16 object-contain" alt="icon">
<div>
<div class="text-4xl font-black">{{ $temp }}°</div>
<div class="text-sm font-medium opacity-80">{{ $cond }}</div>
</div>
</div>
<div class="forecast-list pt-4">
{{/* Loop through daily forecast columns found in the HTML */}}
{{ $dayBlocks := findAllMatches `(?s)<div class="ik dailyForecastCol">.*?</div>` $body }}
{{ range $i, $block := $dayBlocks }}
{{ if lt $i 5 }} {{/* Show only next 5 days */}}
{{/* Daily Forecast Section */}}
<div class="forecast-table">
{{/* findMatches returns a slice of the daily forecast columns */}}
{{ $blocks := findMatches `(?s)<div class="ik dailyForecastCol">.*?</div>` $body }}
{{ range $i, $block := $blocks }}
{{ if lt $i 5 }} {{/* Display only the next 5 days */}}
{{ $d_num := findSubmatch `dfDayNum">([0-9]+)` $block }}
{{ $d_name := findSubmatch `dfDay">([^<]+)` $block }}
{{ $d_icon := findSubmatch `src="([^"]+)"` $block }}
{{ $d_max := findSubmatch `max[^>]+>([^<]+)</a>` $block }}
{{ $d_min := findSubmatch `min[^>]+>([^<]+)</a>` $block }}
{{ $d_max := findSubmatch `max">([^<]+)</a>` $block }}
{{ $d_min := findSubmatch `min">([^<]+)</a>` $block }}
<div class="forecast-item py-1">
<span class="font-bold opacity-90">{{ $d_num }} {{ $d_name }}</span>
<img src="https://www.idokep.hu{{ $d_icon }}" class="w-6 h-6 mx-auto">
<span class="text-right text-xs opacity-60">{{ $d_min }}°</span>
<div class="bar-container"><div class="bar-fill" style="left: 20%; width: 60%;"></div></div>
<span class="text-left text-xs font-bold">{{ $d_max }}°</span>
<div class="day-row">
<span class="day-label">{{ $d_num }} {{ $d_name }}</span>
<img src="https://www.idokep.hu{{ $d_icon }}" class="w-6 h-6 mx-auto object-contain">
<span class="temp-min">{{ $d_min }}°</span>
<div class="bar-bg">
<div class="bar-val"></div>
</div>
<span class="temp-max">{{ $d_max }}°</span>
</div>
{{ end }}
{{ end }}
</div>
{{/* Footer Link */}}
<div class="mt-auto pt-4 text-center">
<a href="https://www.idokep.hu/elorejelzes/Budapest" class="text-[9px] uppercase tracking-widest opacity-30 hover:opacity-100 transition-opacity">
Időkép.hu Előrejelzés →
</a>
</div>
</div>
# Calendar Widget