2569718930@qq.com
93 lines
3.5 KiB
HTML
93 lines
3.5 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>PolyWeather Panel</title>
|
|
<link rel="stylesheet" href="./sidepanel.css" />
|
|
</head>
|
|
<body>
|
|
<main class="panel">
|
|
<div id="loadingOverlay" class="loading-overlay hidden" aria-live="polite">
|
|
<div class="loading-spinner" aria-hidden="true"></div>
|
|
<div id="loadingText" class="loading-text">正在加载温度数据...</div>
|
|
</div>
|
|
<header class="topbar">
|
|
<div id="riskBadge" class="risk-badge medium">中风险</div>
|
|
<div class="city-picker-wrap">
|
|
<label id="cityLabel" for="citySelect">城市</label>
|
|
<select id="citySelect"></select>
|
|
</div>
|
|
<button id="refreshBtn" class="refresh-btn" title="刷新数据" aria-label="刷新数据">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
|
|
<path d="M3 3v5h5" />
|
|
</svg>
|
|
</button>
|
|
</header>
|
|
|
|
<div id="freshnessHint" class="freshness-hint hidden"></div>
|
|
|
|
<section class="section">
|
|
<h3 id="profileTitle">城市档案</h3>
|
|
<div class="grid2">
|
|
<article class="mini-card">
|
|
<span class="mini-label" id="settlementLabel">结算站点</span>
|
|
<strong id="settlementValue">--</strong>
|
|
</article>
|
|
<article class="mini-card">
|
|
<span id="distanceLabel" class="mini-label">站点距离</span>
|
|
<strong id="distanceValue">--</strong>
|
|
</article>
|
|
<article class="mini-card">
|
|
<span id="obsTimeLabel" class="mini-label">观测更新</span>
|
|
<strong id="obsTimeValue">--</strong>
|
|
</article>
|
|
<article class="mini-card">
|
|
<span id="nearbyLabel" class="mini-label">周边站点</span>
|
|
<strong id="nearbyValue">--</strong>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h3 id="trendTitle">今日日内走势（简版）</h3>
|
|
<div class="chart-wrap">
|
|
<canvas id="trendCanvas" width="560" height="220"></canvas>
|
|
<div id="chartTooltip" class="chart-tooltip hidden"></div>
|
|
</div>
|
|
<div id="chartLegend" class="legend-text">--</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h3 id="decisionTitle">方向判断</h3>
|
|
<div class="decision-card">
|
|
<div class="decision-top">
|
|
<div>
|
|
<div id="decisionDirection" class="decision-direction">--</div>
|
|
<div id="decisionWindow" class="decision-window">--</div>
|
|
</div>
|
|
<div id="decisionConfidence" class="decision-confidence neutral">--</div>
|
|
</div>
|
|
<div id="decisionSummary" class="decision-summary">--</div>
|
|
<ul id="decisionReasons" class="decision-reasons"></ul>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h3 id="forecastTitle">多日预报</h3>
|
|
<div id="forecastRow" class="forecast-row"></div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div id="openFullHint" class="open-full-hint"></div>
|
|
<button id="openFullBtn" class="btn btn-open-full">打开完整网站分析</button>
|
|
</section>
|
|
|
|
<section id="errorBox" class="error hidden"></section>
|
|
</main>
|
|
|
|
<script src="./sidepanel.js"></script>
|
|
</body>
|
|
</html>
|