gavindiaz/PolyWeather
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a6bef9a57fa0469bc1663cd6b6bed59bb8eb80ee
PolyWeather/frontend/public/legacy/index.html
T

242 lines
13 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PolyWeather - 天气衍生品智能地图</title>
<meta name="description" content="PolyWeather 天气衍生品智能地图，聚合 METAR、MGM、DEB、多模型预报与历史对账分析。">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="/static/style.css?v=legacy-v19">
</head>
<body>
<div id="map"></div>
<header id="header">
<div class="brand">
<h1>PolyWeather</h1>
<span class="subtitle">天气衍生品智能分析</span>
</div>
<button class="info-btn" id="btnShowGuide" title="查看系统技术说明">技术说明</button>
<div class="live-badge" id="liveBadge">
<span class="pulse-dot"></span>
<span>实时</span>
</div>
<button class="refresh-btn" id="refreshAllBtn" title="刷新所有数据" aria-label="刷新所有数据">↻</button>
</header>
<nav id="cityList" class="city-list">
<div class="city-list-header">
<span>监控城市</span>
<span class="city-count" id="cityCount">0</span>
</div>
<div id="cityListItems" class="city-list-items">
<!-- Dynamically populated -->
</div>
</nav>
<aside id="panel" class="detail-panel hidden">
<div class="panel-header">
<button class="panel-close" id="panelClose">✕</button>
<div class="panel-title-area">
<h2 id="panelCityName">—</h2>
<div class="panel-meta">
<span id="panelRiskBadge" class="risk-badge">—</span>
<span id="panelLocalTime" class="local-time">—</span>
<button class="history-btn" id="btnShowHistory" title="查看历史记录与准确率">历史对账</button>
</div>
</div>
</div>
<div id="panelContent" class="panel-body">
<section class="hero-section">
<div class="hero-weather" id="heroWeather"></div>
<div class="hero-temp">
<span class="hero-value" id="heroTemp">—</span>
<span class="hero-unit" id="heroUnit">°C</span>
</div>
<div class="hero-max-time" id="heroMaxTime"></div>
<div class="hero-details">
<div class="hero-item">
<span class="label">当前实测</span>
<span class="value" id="heroCurrent">—</span>
</div>
<div class="hero-item">
<span class="label">WU 结算参考</span>
<span class="value highlight" id="heroWU">—</span>
</div>
<div class="hero-item">
<span class="label">DEB 预测</span>
<span class="value" id="heroDEB">—</span>
</div>
</div>
<div class="hero-sub" id="heroSub"></div>
</section>
<section class="chart-section">
<h3>今日温度走势</h3>
<div class="chart-wrapper">
<canvas id="tempChart"></canvas>
</div>
<div class="chart-legend" id="chartLegend"></div>
</section>
<section class="prob-section">
<h3>结算概率分布</h3>
<div id="probBars" class="prob-bars"></div>
</section>
<section class="models-section">
<h3>多模型预报</h3>
<div id="modelBars" class="model-bars"></div>
</section>
<section class="forecast-section">
<h3>多日预报</h3>
<div id="forecastTable" class="forecast-table"></div>
<div class="sun-info" id="sunInfo"></div>
</section>
<section class="ai-section">
<h3>AI 深度分析</h3>
<div id="aiAnalysis" class="ai-box">
<span class="ai-placeholder">点击城市后加载...</span>
</div>
</section>
<section class="risk-section">
<h3>数据偏差风险</h3>
<div id="riskInfo" class="risk-info"></div>
</section>
</div>
</aside>
<div id="loading" class="loading-overlay hidden">
<div class="loading-spinner"></div>
<span>正在获取气象数据，请稍候...</span>
</div>
<!-- 鈹€鈹€ Technical Guide Modal 鈹€鈹€ -->
<div id="guideModal" class="modal-overlay hidden">
<div class="modal-content large">
<div class="modal-header">
<h2>&#128218; PolyWeather &#x7CFB;&#x7EDF;&#x6280;&#x672F;&#x8BF4;&#x660E;</h2>
<button class="modal-close" id="guideModalClose">&#x2715;</button>
</div>
<div class="modal-body">
<div class="guide-grid">
<div class="guide-card">
<h3>&#129518; DEB &#x52A8;&#x6001;&#x878D;&#x5408;&#x9884;&#x6D4B;</h3>
<p><b>Dynamic Ensemble Blending</b> &#x662F;&#x7CFB;&#x7EDF;&#x7684;&#x6838;&#x5FC3;&#x9884;&#x6D4B;&#x5C42;&#x3002;&#x5B83;&#x4E0D;&#x662F;&#x5BF9; ECMWF&#x3001;GFS&#x3001;ICON&#x3001;GEM&#x3001;JMA &#x7B49;&#x6A21;&#x578B;&#x7684;&#x7B80;&#x5355;&#x5E73;&#x5747;&#xFF0C;&#x800C;&#x662F;&#x7ED3;&#x5408;&#x6700;&#x8FD1;&#x6837;&#x672C;&#x8868;&#x73B0;&#x3001;&#x5F53;&#x524D;&#x5B9E;&#x51B5;&#x4E0E;&#x57CE;&#x5E02;&#x504F;&#x7F6E;&#x540E;&#x5F97;&#x5230;&#x7684;&#x52A8;&#x6001;&#x52A0;&#x6743;&#x7ED3;&#x679C;&#x3002;</p>
</div>
<div class="guide-card">
<h3>&#127919; &#x7ED3;&#x7B97;&#x6982;&#x7387;&#x5F15;&#x64CE;</h3>
<p>&#x53F3;&#x4FA7;&#x7684;&#x7ED3;&#x7B97;&#x6982;&#x7387;&#x5206;&#x5E03;&#x57FA;&#x4E8E; DEB &#x9884;&#x6D4B;&#x503C;&#x4E0E;&#x591A;&#x6A21;&#x578B;&#x79BB;&#x6563;&#x5EA6;&#x52A8;&#x6001;&#x8BA1;&#x7B97;&#x3002;&#x03BC;&#x4EE3;&#x8868;&#x5F53;&#x524D;&#x5206;&#x5E03;&#x4E2D;&#x5FC3;&#xFF0C;&#x4F1A;&#x968F;&#x7740;&#x6A21;&#x578B;&#x3001;&#x5B9E;&#x51B5;&#x548C;&#x65F6;&#x95F4;&#x53D8;&#x5316;&#x800C;&#x53D8;&#x52A8;&#xFF0C;&#x4E0D;&#x662F;&#x56FA;&#x5B9A;&#x9884;&#x62A5;&#x503C;&#x3002;</p>
</div>
<div class="guide-card">
<h3>&#9992;&#65039; &#x7ED3;&#x7B97;&#x70B9;&#x4E0E;&#x4E3B;&#x89C2;&#x6D4B;&#x6E90;</h3>
<p>Polymarket &#x7ED3;&#x7B97;&#x903B;&#x8F91;&#x4EE5;&#x673A;&#x573A; METAR &#x4E3A;&#x4E3B;&#x3002;&#x7CFB;&#x7EDF;&#x73B0;&#x5728;&#x4F18;&#x5148;&#x4F7F;&#x7528; Aviation Weather API &#x7684;&#x673A;&#x573A;&#x62A5;&#x6587;&#x4E0E;&#x539F;&#x59CB; METAR&#xFF0C;&#x5E76;&#x533A;&#x5206;&#x89C2;&#x6D4B;&#x65F6;&#x95F4;&#x4E0E;&#x63A5;&#x6536;&#x65F6;&#x95F4;&#xFF0C;&#x907F;&#x514D;&#x628A;&#x53D1;&#x5E03;&#x5EF6;&#x8FDF;&#x8BEF;&#x8BA4;&#x6210;&#x6E29;&#x5EA6;&#x53D8;&#x5316;&#x3002;</p>
</div>
<div class="guide-card">
<h3>&#128205; Ankara &#x4E13;&#x5C5E;&#x589E;&#x5F3A;</h3>
<p>Ankara &#x4E0D;&#x8D70;&#x901A;&#x7528;&#x57CE;&#x5E02;&#x903B;&#x8F91;&#x3002;&#x7ED3;&#x7B97;&#x4E3B;&#x7AD9;&#x4EE5; LTAC / Esenbo&#287;a &#x4E3A;&#x51C6;&#xFF0C;&#x5468;&#x8FB9;&#x9886;&#x5148;&#x4FE1;&#x53F7;&#x4F18;&#x5148;&#x53C2;&#x8003; Turkish MGM &#x7AD9;&#x7F51;&#xFF0C;&#x5176;&#x4E2D; <b>Ankara (B&#246;lge/Center)</b> &#x662F;&#x91CD;&#x70B9;&#x76D1;&#x63A7;&#x7AD9;&#xFF0C;&#x4E0D;&#x7531; Etimesgut &#x4EE3;&#x66FF;&#x3002;</p>
</div>
<div class="guide-card">
<h3>&#128198; &#x672A;&#x6765;&#x65E5;&#x671F;&#x5206;&#x6790;</h3>
<p>&#x70B9;&#x51FB;&#x591A;&#x65E5;&#x9884;&#x62A5;&#x540E;&#x6253;&#x5F00;&#x7684;&#x6A21;&#x6001;&#x6846;&#xFF0C;&#x4E3B;&#x8981;&#x7528;&#x4E8E;&#x5206;&#x6790;&#x4E0B;&#x4E00;&#x4E2A;&#x4EA4;&#x6613;&#x65E5;&#x3002; 6-48 &#x5C0F;&#x65F6;&#x8D8B;&#x52BF;&#x4EE5; weather.gov &#x548C; Open-Meteo &#x4E3A;&#x4E3B;&#xFF0C;&#x90E8;&#x5206;&#x57CE;&#x5E02;&#x53EF;&#x4F1A;&#x8865;&#x5145; Meteoblue&#xFF1B; 0-2 &#x5C0F;&#x65F6;&#x4E34;&#x8FD1;&#x5224;&#x65AD;&#x5219;&#x4F18;&#x5148;&#x770B; METAR &#x4E0E;&#x5468;&#x8FB9;&#x7AD9;&#x3002;</p>
</div>
<div class="guide-card">
<h3>&#128202; &#x5386;&#x53F2;&#x5BF9;&#x8D26;&#x89C4;&#x5219;</h3>
<p>&#x5386;&#x53F2;&#x51C6;&#x786E;&#x7387;&#x5BF9;&#x8D26;&#x53EA;&#x7EDF;&#x8BA1;&#x5DF2;&#x7ED3;&#x7B97;&#x7684;&#x6837;&#x672C;&#x3002;&#x7F51;&#x9875;&#x7AEF;&#x91C7;&#x7528;&#x8FD1;15&#x5929;&#x6EDA;&#x52A8;&#x89C6;&#x56FE;&#xFF0C;&#x673A;&#x5668;&#x4EBA; /deb &#x62A5;&#x544A;&#x91C7;&#x7528;&#x8FD1;7&#x5929;&#x7A97;&#x53E3;&#xFF0C;&#x4E0D;&#x628A;&#x5F53;&#x5929;&#x672A;&#x7ED3;&#x7B97;&#x7684;&#x6837;&#x672C;&#x7B97;&#x5165;&#x80DC;&#x7387;&#x548C; MAE&#x3002;</p>
</div>
</div>
<div class="guide-footer">
<p>&#x203B; &#x6570;&#x636E;&#x6E90;&#x4EE5; Aviation Weather / METAR&#x3001;Turkish MGM&#x3001;Open-Meteo&#x3001;weather.gov &#x4E3A;&#x4E3B;&#xFF0C;&#x90E8;&#x5206;&#x57CE;&#x5E02;&#x8865;&#x5145; Meteoblue&#x3002;</p>
</div>
</div>
</div>
</div>
<!-- 鈹€鈹€ History Chart Modal 鈹€鈹€ -->
<div id="historyModal" class="modal-overlay hidden">
<div class="modal-content">
<div class="modal-header">
<h2>&#128202; <span id="historyModalTitle">&#x5386;&#x53F2;&#x51C6;&#x786E;&#x7387;&#x5BF9;&#x8D26;</span></h2>
<button class="modal-close" id="historyModalClose">&#x2715;</button>
</div>
<div class="modal-body">
<div class="history-stats" id="historyStats"></div>
<div class="history-chart-wrapper">
<canvas id="historyChart"></canvas>
</div>
</div>
</div>
</div>
<div id="futureForecastModal" class="modal-overlay hidden">
<div class="modal-content large future-modal">
<div class="modal-header">
<h2>&#128198; <span id="futureForecastTitle">&#x672A;&#x6765;&#x65E5;&#x671F;&#x5206;&#x6790;</span></h2>
<button class="modal-close" id="futureForecastClose" aria-label="&#x5173;&#x95ED;&#x672A;&#x6765;&#x65E5;&#x671F;&#x5206;&#x6790;">&#x2715;</button>
</div>
<div class="modal-body future-modal-body">
<div class="history-stats" id="futureForecastStats"></div>
<section class="future-modal-section">
<h3>&#128200; &#x6E29;&#x5EA6;&#x8D70;&#x52BF;</h3>
<div class="history-chart-wrapper future-chart-wrapper">
<canvas id="futureForecastChart"></canvas>
</div>
</section>
<div class="future-modal-grid">
<section class="future-modal-section">
<h3>&#127919; &#x7ED3;&#x7B97;&#x6982;&#x7387;&#x5206;&#x5E03;</h3>
<div id="futureProbBars" class="prob-bars future-prob-bars"></div>
</section>
<section class="future-modal-section">
<h3>&#129518; &#x591A;&#x6A21;&#x578B;&#x9884;&#x62A5;</h3>
<div id="futureModelBars" class="model-bars"></div>
</section>
</div>
<div class="future-modal-grid">
<section class="future-modal-section">
<h3><span class="section-inline-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19V5"/><path d="M10 19V10"/><path d="M16 19V7"/><path d="M22 19V13"/></svg></span>&#x672A;&#x6765; 6-48 &#x5C0F;&#x65F6;&#x8D8B;&#x52BF;</h3>
<div id="futureTrendGrid" class="future-trend-grid"></div>
</section>
<section class="future-modal-section">
<h3 id="futureNowcastTitle">&#9201; &#x76EE;&#x6807;&#x65E5;&#x5348;&#x540E;&#x5CF0;&#x503C;&#x7A97;&#x53E3;</h3>
<div id="futureNowcast" class="future-text-block"></div>
</section>
</div>
</div>
</div>
</div>
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<!-- Leaflet Heatmap Plugin -->
<script src="https://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"></script>
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
<script src="/static/app.js?v=legacy-v19"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink