From 2ff7310a6664913ad8315ffc59538c9397e29264 Mon Sep 17 00:00:00 2001
From: yarnom <admin@yarnom.com>
Date: Thu, 24 Jul 2025 17:05:33 +0800
Subject: [PATCH] feat: Add index.html

---
 templates/index.html | 171 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 171 insertions(+)
 create mode 100644 templates/index.html
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..1706a7f
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>英卓气象站</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background: #f8f9fa;
+        }
+        .header {
+            padding: 18px 0 12px 0;
+            text-align: center;
+            font-size: 2.2rem;
+            font-weight: bold;
+            color: #007bff;
+            background: #fff;
+            border-bottom: 1px solid #ddd;
+            letter-spacing: 2px;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 24px 10px;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+        }
+        .stations {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 20px;
+            justify-content: flex-start;
+        }
+        .station-card {
+            background: #fff;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.03);
+            padding: 20px 18px 16px 18px;
+            min-width: 260px;
+            max-width: 320px;
+            flex: 1 1 260px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+        .station-title {
+            font-size: 1.2rem;
+            font-weight: bold;
+            color: #333;
+            margin-bottom: 6px;
+        }
+        .station-meta {
+            font-size: 0.95rem;
+            color: #888;
+            margin-bottom: 8px;
+        }
+        .station-data {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 8px 12px;
+        }
+        .data-label {
+            color: #555;
+            font-size: 0.95rem;
+        }
+        .data-value {
+            font-size: 1.1rem;
+            color: #007bff;
+            font-weight: bold;
+        }
+        .chart-area {
+            margin-top: 10px;
+            background: #f8f9fa;
+            border-radius: 6px;
+            padding: 10px 0 0 0;
+        }
+        @media (max-width: 900px) {
+            .stations { flex-direction: column; }
+            .station-card { max-width: 100%; }
+        }
+    </style>
+</head>
+<body>
+    <div class="header">英卓气象站</div>
+    <div class="container">
+        <div class="stations" id="stations-list">
+            <!-- 站点卡片由JS动态渲染 -->
+        </div>
+    </div>
+    <script>
+    // 示例数据，后端可替换为接口数据
+    const stations = [
+        {
+            id: '001',
+            name: '站点A',
+            location: '北京',
+            temp: 23.5,
+            humidity: 56,
+            rain: 0.2,
+            wind: 3.1,
+            time: '2024-07-21 15:30',
+            chart: [1,2,3,2,1,0,0.2]
+        },
+        {
+            id: '002',
+            name: '站点B',
+            location: '上海',
+            temp: 28.1,
+            humidity: 62,
+            rain: 0.0,
+            wind: 2.5,
+            time: '2024-07-21 15:30',
+            chart: [0,0,0,0,0,0,0]
+        }
+    ];
+    function renderStations() {
+        const list = document.getElementById('stations-list');
+        list.innerHTML = '';
+        stations.forEach((s, idx) => {
+            const card = document.createElement('div');
+            card.className = 'station-card';
+            card.innerHTML = `
+                <div class="station-title">${s.name} <span style="font-size:0.9rem;color:#888;">(${s.id})</span></div>
+                <div class="station-meta">${s.location} | 更新时间: ${s.time}</div>
+                <div class="station-data">
+                    <div><span class="data-label">温度</span>: <span class="data-value">${s.temp}°C</span></div>
+                    <div><span class="data-label">湿度</span>: <span class="data-value">${s.humidity}%</span></div>
+                    <div><span class="data-label">降雨</span>: <span class="data-value">${s.rain}mm</span></div>
+                    <div><span class="data-label">风速</span>: <span class="data-value">${s.wind}m/s</span></div>
+                </div>
+                <div class="chart-area">
+                    <canvas id="chart${idx}" height="60"></canvas>
+                </div>
+            `;
+            list.appendChild(card);
+            setTimeout(() => renderChart(`chart${idx}`, s.chart), 0);
+        });
+    }
+    function renderChart(id, data) {
+        new Chart(document.getElementById(id).getContext('2d'), {
+            type: 'line',
+            data: {
+                labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
+                datasets: [{
+                    label: '降雨量',
+                    data: data,
+                    borderColor: '#007bff',
+                    backgroundColor: 'rgba(0,123,255,0.08)',
+                    fill: true,
+                    tension: 0.3,
+                    pointRadius: 2
+                }]
+            },
+            options: {
+                plugins: { legend: { display: false } },
+                scales: { x: { display: false }, y: { display: false } },
+                responsive: true,
+                maintainAspectRatio: false
+            }
+        });
+    }
+    renderStations();
+    </script>
+</body>
+</html> 
\ No newline at end of file
