test 4
This commit is contained in:
@@ -369,7 +369,7 @@ data:
|
|||||||
- type: custom-api
|
- type: custom-api
|
||||||
url: https://www.idokep.hu/idojaras/Budapest
|
url: https://www.idokep.hu/idojaras/Budapest
|
||||||
cache: 15m
|
cache: 15m
|
||||||
skip-json-validation: true # CRITICAL: Fixes the JSON error
|
skip-json-validation: true # Mandatory for HTML scraping
|
||||||
style:
|
style:
|
||||||
grid-column: span 4
|
grid-column: span 4
|
||||||
grid-row: span 3
|
grid-row: span 3
|
||||||
@@ -383,56 +383,89 @@ data:
|
|||||||
{{ $sunset := findSubmatch `Napnyugta ([0-9:]+)` $body }}
|
{{ $sunset := findSubmatch `Napnyugta ([0-9:]+)` $body }}
|
||||||
|
|
||||||
<style>
|
<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); }
|
.weather-card {
|
||||||
.idokep-header { display: flex; justify-content: space-between; margin-bottom: 1.5rem; }
|
background: rgba(0, 0, 0, 0.3);
|
||||||
.idokep-main { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; }
|
backdrop-filter: blur(12px);
|
||||||
.forecast-list { display: flex; flex-direction: column; gap: 0.5rem; border-top: 1px solid rgba(255,255,255,0.1); pt-4; }
|
border-radius: 1.25rem;
|
||||||
.forecast-item { display: grid; grid-template-columns: 2.5rem 2rem 2.5rem 1fr 2.5rem; align-items: center; font-size: 0.85rem; }
|
padding: 1.5rem;
|
||||||
.bar-container { height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; margin: 0 8px; position: relative; }
|
color: #fff;
|
||||||
.bar-fill { position: absolute; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #60a5fa, #f87171); }
|
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>
|
</style>
|
||||||
|
|
||||||
<div class="idokep-card">
|
<div class="weather-card">
|
||||||
<div class="idokep-header">
|
{{/* Current Section */}}
|
||||||
|
<div class="flex justify-between items-start">
|
||||||
<div>
|
<div>
|
||||||
<div class="text-xl font-bold uppercase tracking-tight">Budapest</div>
|
<div class="text-[10px] uppercase tracking-[0.2em] opacity-50 font-black mb-1">Budapest</div>
|
||||||
<div class="text-xs opacity-50">{{ now | formatTime "Monday, Jan 02" }}</div>
|
<div class="temp-now">{{ $temp }}°</div>
|
||||||
</div>
|
<div class="cond-now">{{ $cond }}</div>
|
||||||
<div class="text-right text-xs opacity-60">
|
<div class="sun-info">
|
||||||
<div>↑ {{ $sunrise }}</div>
|
<span><i class="fas fa-sun"></i> ↑ {{ $sunrise }}</span>
|
||||||
<div>↓ {{ $sunset }}</div>
|
<span><i class="fas fa-moon"></i> ↓ {{ $sunset }}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<img src="https://www.idokep.hu{{ $icon }}" class="w-24 h-24 -mt-2 object-contain" alt="weather">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="idokep-main">
|
{{/* Daily Forecast Section */}}
|
||||||
<img src="https://www.idokep.hu{{ $icon }}" class="w-16 h-16 object-contain" alt="icon">
|
<div class="forecast-table">
|
||||||
<div>
|
{{/* findMatches returns a slice of the daily forecast columns */}}
|
||||||
<div class="text-4xl font-black">{{ $temp }}°</div>
|
{{ $blocks := findMatches `(?s)<div class="ik dailyForecastCol">.*?</div>` $body }}
|
||||||
<div class="text-sm font-medium opacity-80">{{ $cond }}</div>
|
{{ range $i, $block := $blocks }}
|
||||||
</div>
|
{{ if lt $i 5 }} {{/* Display only the next 5 days */}}
|
||||||
</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 */}}
|
|
||||||
{{ $d_num := findSubmatch `dfDayNum">([0-9]+)` $block }}
|
{{ $d_num := findSubmatch `dfDayNum">([0-9]+)` $block }}
|
||||||
{{ $d_name := findSubmatch `dfDay">([^<]+)` $block }}
|
{{ $d_name := findSubmatch `dfDay">([^<]+)` $block }}
|
||||||
{{ $d_icon := findSubmatch `src="([^"]+)"` $block }}
|
{{ $d_icon := findSubmatch `src="([^"]+)"` $block }}
|
||||||
{{ $d_max := findSubmatch `max[^>]+>([^<]+)</a>` $block }}
|
{{ $d_max := findSubmatch `max">([^<]+)</a>` $block }}
|
||||||
{{ $d_min := findSubmatch `min[^>]+>([^<]+)</a>` $block }}
|
{{ $d_min := findSubmatch `min">([^<]+)</a>` $block }}
|
||||||
|
|
||||||
<div class="forecast-item py-1">
|
<div class="day-row">
|
||||||
<span class="font-bold opacity-90">{{ $d_num }} {{ $d_name }}</span>
|
<span class="day-label">{{ $d_num }} {{ $d_name }}</span>
|
||||||
<img src="https://www.idokep.hu{{ $d_icon }}" class="w-6 h-6 mx-auto">
|
<img src="https://www.idokep.hu{{ $d_icon }}" class="w-6 h-6 mx-auto object-contain">
|
||||||
<span class="text-right text-xs opacity-60">{{ $d_min }}°</span>
|
<span class="temp-min">{{ $d_min }}°</span>
|
||||||
<div class="bar-container"><div class="bar-fill" style="left: 20%; width: 60%;"></div></div>
|
<div class="bar-bg">
|
||||||
<span class="text-left text-xs font-bold">{{ $d_max }}°</span>
|
<div class="bar-val"></div>
|
||||||
|
</div>
|
||||||
|
<span class="temp-max">{{ $d_max }}°</span>
|
||||||
</div>
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
# Calendar Widget
|
# Calendar Widget
|
||||||
|
|||||||
Reference in New Issue
Block a user