2569718930@qq.com
ded09df749
- 当地时间加时区缩写（KST/JST/HKT 等） - 温度 >= 30°C 暖橙色高亮 - 新高标记：紫色边框 + 紫色温度数字 - "今日最高" 与趋势箭头同行，对齐 docs 卡片布局 - CSS: temp-value.warm, new-high-card/high-val 样式
99 lines
3.0 KiB
HTML
99 lines
3.0 KiB
HTML
{% if full_page %}
|
|
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>市场监控 — PolyWeather</title>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
<meta http-equiv="refresh" content="120">
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
<header class="header">
|
|
<h1>🔥 市场监控</h1>
|
|
<span class="updated" id="update-time">更新中…</span>
|
|
</header>
|
|
{% endif %}
|
|
|
|
<div id="card-grid" class="card-grid"
|
|
hx-get="/api/data" hx-trigger="every 30s" hx-swap="outerHTML" hx-indicator="#spinner">
|
|
<span id="update-time" class="updated" style="display:block;grid-column:1/-1;text-align:right;margin-bottom:2px">
|
|
{{ generated_at }}</span>
|
|
{% for c in cities %}
|
|
<div class="card{% if c.new_high %} new-high-card{% endif %}">
|
|
<div class="card-top">
|
|
<span class="city-name">{{ c.display_name }}</span>
|
|
<span class="airport">/ {{ c.airport }}</span>
|
|
<span class="local-time">{{ c.local_time }}</span>
|
|
{% if c.new_high %}
|
|
<span class="badge new-high">◆新高</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="card-temp">
|
|
{% match c.current_temp %}
|
|
{% when Some with (t) %}
|
|
<span class="temp-value{% if c.temp_warm %} warm{% endif %}{% if c.new_high %} new-high-val{% endif %}">{{ "{:.1}"|format(t) }}</span><span class="temp-unit">°C</span>
|
|
{% when None %}
|
|
<span class="temp-value na">--</span>
|
|
{% endmatch %}
|
|
</div>
|
|
|
|
<div class="card-meta">
|
|
<div class="meta-row">
|
|
<span class="label">今日最高</span>
|
|
{% match c.today_max %}
|
|
{% when Some with (m) %}
|
|
<span class="value">{{ "{:.1}"|format(m) }}°C</span>
|
|
{% when None %}
|
|
<span class="value na">--</span>
|
|
{% endmatch %}
|
|
<span class="trend {{ c.trend.css_class() }}">{{ c.trend.symbol() }}</span>
|
|
</div>
|
|
<div class="meta-row">
|
|
<span class="label">观测</span>
|
|
{% match c.obs_age_min %}
|
|
{% when Some with (m) %}
|
|
<span class="value obs-age">{{ m }} 分钟前</span>
|
|
{% when None %}
|
|
<span class="value na">--</span>
|
|
{% endmatch %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div id="spinner" class="htmx-indicator">刷新中…</div>
|
|
|
|
{% if full_page %}
|
|
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
|
|
<script>
|
|
// flash updated cards whose temp changed
|
|
(function(){
|
|
let prev = {};
|
|
document.body.addEventListener('htmx:afterSwap', function(evt){
|
|
if(evt.detail.target.id !== 'card-grid') return;
|
|
document.querySelectorAll('.card').forEach(function(card){
|
|
var name = card.querySelector('.city-name').textContent;
|
|
var tv = card.querySelector('.temp-value').textContent;
|
|
var old = prev[name];
|
|
prev[name] = tv;
|
|
if(old && old !== tv && tv !== '--'){
|
|
card.style.transition = 'none';
|
|
card.style.boxShadow = '0 0 12px rgba(52,211,153,0.35)';
|
|
requestAnimationFrame(function(){
|
|
card.style.transition = 'box-shadow 2s ease-out';
|
|
card.style.boxShadow = '';
|
|
});
|
|
}
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
{% endif %}
|