trying chatgpt widget
This commit is contained in:
@@ -365,108 +365,139 @@ data:
|
||||
- type: split-column
|
||||
max-columns: 3
|
||||
widgets:
|
||||
# Weather Widget - Időkép Scraper
|
||||
# Weather Widget (Időkép)
|
||||
- type: custom-api
|
||||
url: https://www.idokep.hu/idojaras/Budapest
|
||||
title: Időkép – Budapest VIII.
|
||||
url: http://idokep-proxy.glance-system.svc.cluster.local:8000/api/idokep?place=Budapest%20VIII.%20ker
|
||||
cache: 15m
|
||||
skip-json-validation: true
|
||||
style:
|
||||
grid-column: span 4
|
||||
grid-row: span 3
|
||||
template: |
|
||||
{{/* 1. Extract Body and Current Data */}}
|
||||
{{ $body := .Body }}
|
||||
{{ $temp := findSubmatch "current-temperature\">([^˚<]+)" $body | trimSpace }}
|
||||
{{ $cond := findSubmatch "current-weather\">([^<]+)</div>" $body | trimSpace }}
|
||||
{{ $icon := findSubmatch "forecast-bigicon\"[^>]+src=\"([^\"]+)\"" $body }}
|
||||
{{ $sunrise := findSubmatch "Napkelte ([0-9:]+)" $body }}
|
||||
{{ $sunset := findSubmatch "Napnyugta ([0-9:]+)" $body }}
|
||||
|
||||
{{/* 2. Split HTML by the Forecast Column class to get daily blocks */}}
|
||||
{{ $parts := split $body "<div class=\"ik dailyForecastCol\">" }}
|
||||
|
||||
<style>
|
||||
.weather-card {
|
||||
background: rgba(15, 23, 42, 0.4);
|
||||
backdrop-filter: blur(16px);
|
||||
border-radius: 1.5rem;
|
||||
padding: 1.25rem;
|
||||
color: #f8fafc;
|
||||
font-family: ui-sans-serif, system-ui, sans-serif;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.idokep-wrap { display:grid; gap:12px; }
|
||||
|
||||
/* TOP */
|
||||
.idokep-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
|
||||
.idokep-now { display:flex; align-items:center; gap:12px; }
|
||||
.idokep-now img { width:44px; height:44px; }
|
||||
.idokep-temp { font-size:44px; font-weight:700; line-height:1; }
|
||||
.idokep-cond { opacity:.85; font-size:13px; margin-top:2px; }
|
||||
.idokep-place { opacity:.75; font-size:12px; text-align:right; }
|
||||
|
||||
/* HOURLY STRIP */
|
||||
.idokep-hourly {
|
||||
display:grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap:8px;
|
||||
}
|
||||
.forecast-row {
|
||||
display: grid;
|
||||
grid-template-columns: 3.5rem 2rem 2.5rem 1fr 2.5rem;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.6rem 0;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
.idokep-h {
|
||||
background: rgba(255,255,255,0.04);
|
||||
border-radius: 12px;
|
||||
padding: 8px;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
gap:6px;
|
||||
}
|
||||
.temp-bar-bg {
|
||||
height: 6px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 99px;
|
||||
.idokep-h .t { font-size:12px; opacity:.85; }
|
||||
.idokep-h img { width:22px; height:22px; opacity:.95; }
|
||||
.idokep-h .v { font-weight:600; }
|
||||
.idokep-h .p { font-size:11px; opacity:.70; }
|
||||
|
||||
/* DAILY BARS */
|
||||
.idokep-daily { display:grid; gap:10px; margin-top:2px; }
|
||||
.idokep-d {
|
||||
display:grid;
|
||||
grid-template-columns: 42px 22px 1fr auto;
|
||||
align-items:center;
|
||||
gap:10px;
|
||||
}
|
||||
.idokep-d .dow { font-size:12px; opacity:.9; }
|
||||
.idokep-d img { width:18px; height:18px; opacity:.95; }
|
||||
|
||||
.idokep-bar {
|
||||
height: 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255,255,255,0.08);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.temp-bar-fill {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
border-radius: 99px;
|
||||
background: linear-gradient(90deg, #60a5fa, #facc15, #f87171);
|
||||
.idokep-bar > span{
|
||||
position:absolute;
|
||||
top:0; bottom:0;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, #7dd3fc, #a7f3d0, #fde68a, #fdba74, #fca5a5);
|
||||
}
|
||||
|
||||
.idokep-mm { font-size:11px; opacity:.7; margin-left:8px; white-space:nowrap; }
|
||||
.idokep-foot { font-size:11px; opacity:.65; margin-top:2px; }
|
||||
.idokep-foot a { opacity:.8; }
|
||||
.idokep-err { opacity:.85; font-size:13px; }
|
||||
</style>
|
||||
|
||||
<div class="weather-card">
|
||||
{{/* Current Conditions Section */}}
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<h3 class="text-xs font-black uppercase tracking-widest opacity-40 mb-1">Budapest</h3>
|
||||
<div class="text-4xl font-extrabold tracking-tighter">{{ $temp }}°C</div>
|
||||
<div class="text-sm font-medium opacity-90 mt-1">{{ $cond }}</div>
|
||||
{{ if .JSON.Exists "error" }}
|
||||
<div class="idokep-err">
|
||||
{{ .JSON.String "error" }}<br>
|
||||
Place: <b>{{ .JSON.String "place" }}</b>
|
||||
</div>
|
||||
{{ else }}
|
||||
{{ $c := .JSON.JSON "current" }}
|
||||
{{ $hourly := .JSON.Array "hourly" }}
|
||||
{{ $daily := .JSON.Array "daily" }}
|
||||
{{ $src := .JSON.JSON "source" }}
|
||||
|
||||
<div class="idokep-wrap">
|
||||
<div class="idokep-top">
|
||||
<div class="idokep-now">
|
||||
{{ if $c.Exists "icon_url" }}<img src="{{ $c.String "icon_url" }}" alt="">{{ end }}
|
||||
<div>
|
||||
<div class="idokep-temp">{{ $c.Float "temp_c" | toInt }}°C</div>
|
||||
<div class="idokep-cond">{{ $c.String "condition_hu" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="idokep-place">{{ .JSON.String "place" }}</div>
|
||||
</div>
|
||||
<img src="https://www.idokep.hu{{ $icon }}" class="w-16 h-16 object-contain" alt="weather">
|
||||
</div>
|
||||
|
||||
{{/* Sunrise/Sunset info */}}
|
||||
<div class="flex gap-4 text-[11px] font-semibold opacity-60 mb-5">
|
||||
<span>↑ {{ $sunrise }}</span>
|
||||
<span>↓ {{ $sunset }}</span>
|
||||
</div>
|
||||
|
||||
{{/* 5-Day Forecast List */}}
|
||||
<div class="flex-grow">
|
||||
{{ range $i := list 1 2 3 4 5 }}
|
||||
{{ $block := index $parts $i }}
|
||||
{{ if $block }}
|
||||
{{ $d_num := findSubmatch "dfDayNum\">([0-9]+)" $block }}
|
||||
{{ $d_name := findSubmatch "dfDay\">([^<]+)" $block }}
|
||||
{{ $d_icon := findSubmatch "src=\"([^\"]+)\"" $block }}
|
||||
{{ $d_max := findSubmatch "class=\"max\">([^<]+)" $block }}
|
||||
{{ $d_min := findSubmatch "class=\"min\">([^<]+)" $block }}
|
||||
|
||||
<div class="forecast-row">
|
||||
<span class="text-xs font-bold whitespace-nowrap">{{ $d_num }} {{ $d_name }}</span>
|
||||
<img src="https://www.idokep.hu{{ $d_icon }}" class="w-6 h-6 object-contain">
|
||||
<span class="text-[11px] text-right font-medium opacity-50">{{ $d_min }}°</span>
|
||||
<div class="temp-bar-bg">
|
||||
<div class="temp-bar-fill" style="left: 20%; width: 60%;"></div>
|
||||
</div>
|
||||
<span class="text-[11px] font-bold">{{ $d_max }}°</span>
|
||||
<div class="idokep-hourly">
|
||||
{{ range $hourly }}
|
||||
<div class="idokep-h">
|
||||
<div class="t">{{ .String "hour" }}</div>
|
||||
{{ if .Exists "icon_url" }}<img src="{{ .String "icon_url" }}" alt="">{{ end }}
|
||||
<div class="v">{{ .Float "temp_c" | toInt }}°</div>
|
||||
{{ if .Exists "precip_pct" }}
|
||||
<div class="p">{{ .Float "precip_pct" | toInt }}%</div>
|
||||
{{ else }}
|
||||
<div class="p"> </div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{/* Footer Link */}}
|
||||
<div class="mt-4 pt-2 text-center opacity-30">
|
||||
<a href="https://www.idokep.hu/elorejelzes/Budapest" class="text-[9px] uppercase tracking-[0.2em] font-bold hover:opacity-100 transition-opacity">idokep.hu elorejelzes</a>
|
||||
<div class="idokep-daily">
|
||||
{{ range $daily }}
|
||||
<div class="idokep-d">
|
||||
<div class="dow">{{ .String "dow" }}</div>
|
||||
{{ if .Exists "icon_url" }}<img src="{{ .String "icon_url" }}" alt="">{{ end }}
|
||||
<div class="idokep-bar">
|
||||
{{ if and (.Exists "bar_left_pct") (.Exists "bar_width_pct") }}
|
||||
<span style="left: {{ .Float "bar_left_pct" }}%; width: {{ .Float "bar_width_pct" }}%; opacity:.95;"></span>
|
||||
{{ else }}
|
||||
<span style="left: 0%; width: 100%; opacity:.6;"></span>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; gap:8px;">
|
||||
<div style="font-weight:600;">{{ .Float "tmin_c" | toInt }}°</div>
|
||||
<div style="opacity:.85;">{{ .Float "tmax_c" | toInt }}°</div>
|
||||
{{ if .Exists "prec_mm" }}<div class="idokep-mm">{{ .Float "prec_mm" }}mm</div>{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="idokep-foot">
|
||||
Forrás: <a href="{{ $src.String "url" }}" target="_blank">{{ $src.String "name" }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
# Calendar Widget
|
||||
- type: calendar
|
||||
|
||||
Reference in New Issue
Block a user