K2CrO4/NeoBot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(plugins): 更新天气插件html

Browse Source
This commit is contained in:
baby20162016
2026-03-01 11:25:36 +08:00
parent 311b1985dd
commit 898c9e7a38
2 changed files with 309 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

543
templates/weather.html
View File

@@ -4,23 +4,16 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>天气查询结果</title>
<script src="https://unpkg.com/lucide@latest"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
:root {
--bg-color: #0f172a; /* 深蓝黑背景 */
--window-bg: rgba(30, 41, 59, 0.85); /* 窗口背景 */
--border-color: rgba(255, 255, 255, 0.08);
--accent: #6366f1; /* 核心强调色 - 靛蓝 */
--accent-glow: rgba(99, 102, 241, 0.4);
--text-title: #f8fafc;
--text-desc: #94a3b8;
--text-code: #a5f3fc; /* 代码高亮色 - 浅青 */
--card-bg: rgba(0, 0, 0, 0.2);
--weather-bg: #0b1120; /* 天气卡片深色背景 */
--sunny-color: #fbbf24; /* 晴天橙色 */
--cloudy-color: #6b7280; /* 多云灰色 */
--rainy-color: #3b82f6; /* 雨天蓝色 */
--bg-color: #7C96E8; /* 图片中的典型 Fluent 蓝色 */
--glass-bg: rgba(255, 255, 255, 0.15);
--glass-border: rgba(255, 255, 255, 0.2);
--text-main: #FFFFFF;
--text-secondary: rgba(255, 255, 255, 0.8);
}
* {
@@ -30,283 +23,363 @@
}
body {
font-family: 'Noto Sans SC', system-ui, sans-serif;
font-family: 'Noto Sans SC', system-ui, -apple-system, sans-serif;
background-color: var(--bg-color);
color: var(--text-title);
color: var(--text-main);
display: flex;
justify-content: center;
padding: 0;
min-height: 100vh;
padding: 40px 20px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 窗口容器 */
.window {
.container {
width: 100%;
min-height: 100vh;
background: var(--window-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 0;
border: none;
box-shadow: none;
overflow: auto;
max-width: 500px; /* 窄屏手机比例 */
display: flex;
flex-direction: column;
}
/* 顶部标题栏 */
.header {
padding: 32px 40px;
border-bottom: 1px solid var(--border-color);
background: rgba(255, 255, 255, 0.02);
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
}
.dots {
display: flex;
gap: 8px;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.red { background: #ef4444; }
.yellow { background: #f59e0b; }
.green { background: #10b981; }
.title {
font-size: 18px;
font-weight: 700;
letter-spacing: 1.5px;
color: var(--text-desc);
text-transform: uppercase;
}
/* 内容区域 */
.content {
padding: 40px;
display: flex;
flex-direction: column;
gap: 32px;
}
.page-title {
margin-bottom: 10px;
}
.page-title h1 {
font-size: 48px;
background: linear-gradient(to right, #fff, #94a3b8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.page-title p {
color: var(--text-desc);
font-size: 20px;
margin-top: 12px;
}
/* 城市信息 */
.city-info {
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 32px;
/* 顶部城市信息 */
.header-section {
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
width: 100%;
}
.city-name {
font-size: 36px;
font-weight: 700;
color: var(--text-title);
margin-bottom: 8px;
font-size: 28px;
font-weight: 400;
letter-spacing: 2px;
margin-bottom: 30px;
opacity: 0.95;
}
.query-time {
font-size: 16px;
color: var(--text-desc);
.main-temp-wrapper {
position: relative;
display: inline-block;
margin-bottom: 20px;
margin-left: -10px;
}
/* 天气网格 */
.weather-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
.main-temp {
font-size: 120px;
font-weight: 300;
line-height: 1;
}
/* 天气卡片 */
.weather-card {
background: var(--weather-bg);
border-radius: 16px;
.temp-unit {
position: absolute;
top: 15px;
right: -35px;
font-size: 40px;
font-weight: 300;
}
.weather-desc-row {
font-size: 20px;
font-weight: 400;
opacity: 0.9;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.divider {
width: 1px;
height: 16px;
background: rgba(255, 255, 255, 0.5);
}
/* 列表卡片部分 */
.forecast-card {
width: 100%;
background: var(--glass-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: 24px;
padding: 24px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
border: 1px solid var(--border-color);
display: flex;
flex-direction: column;
gap: 16px;
transition: transform 0.2s;
gap: 10px;
}
.weather-card:hover {
transform: translateY(-2px);
.chart-container {
width: 100%;
height: 160px;
margin: 15px 0;
position: relative;
}
.weather-header {
.chart-svg {
width: 100%;
height: 100%;
}
.chart-line-high {
fill: none;
stroke: rgba(255, 255, 255, 0.95);
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.chart-line-low {
fill: none;
stroke: rgba(255, 255, 255, 0.95);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.chart-dot-high {
fill: #FFFFFF;
}
.chart-dot-low {
fill: #FFFFFF;
}
.chart-label {
font-family: 'Noto Sans SC', sans-serif;
font-size: 20px;
font-weight: 500;
fill: rgba(255, 255, 255, 0.95);
}
.chart-label-low {
font-family: 'Noto Sans SC', sans-serif;
font-size: 20px;
font-weight: 400;
fill: rgba(255, 255, 255, 0.95);
}
.forecast-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 8px 10px 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 10px;
}
.weather-day {
font-size: 24px;
font-weight: 700;
color: var(--text-title);
}
.weather-condition {
font-size: 18px;
color: var(--text-desc);
}
.weather-main {
.header-item {
flex: 1;
text-align: center;
}
.weather-temp {
font-size: 48px;
font-weight: 900;
color: var(--sunny-color);
margin: 16px 0;
}
.weather-details {
display: flex;
justify-content: space-between;
font-size: 14px;
color: var(--text-desc);
}
.weather-detail-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.detail-label {
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.detail-value {
color: var(--text-title);
}
/* 页脚 */
.footer {
margin-top: auto;
padding: 32px;
border-top: 1px solid var(--border-color);
text-align: center;
color: var(--text-desc);
font-size: 14px;
background: rgba(0, 0, 0, 0.1);
}
.footer .info-row {
margin-bottom: 8px;
}
.footer .version-info {
font-size: 12px;
opacity: 0.8;
margin-top: 16px;
}
/* 响应式设计 */
@media (max-width: 768px) {
.content {
padding: 20px;
}
.forecast-grid {
display: flex;
justify-content: space-between;
width: 100%;
padding: 0 5px;
}
.page-title h1 {
font-size: 36px;
}
.grid-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
flex: 1;
}
.weather-grid {
grid-template-columns: 1fr;
}
.grid-day {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.weather-card {
padding: 20px;
}
.day-label {
font-size: 15px;
font-weight: 500;
color: rgba(255, 255, 255, 0.95);
}
.weather-temp {
font-size: 36px;
}
.day-date {
font-size: 13px;
font-weight: 400;
color: rgba(255, 255, 255, 0.7);
}
.grid-icon {
width: 24px;
height: 24px;
stroke-width: 2;
}
.grid-temp {
font-size: 14px;
margin-top: 130px; /* 为图表留出空间 */
}
.footer {
margin-top: 20px;
font-size: 12px;
opacity: 0.6;
text-align: center;
}
@media (max-width: 400px) {
.main-temp { font-size: 100px; }
.city-name { font-size: 24px; }
}
</style>
</head>
<body>
<div class="window">
<div class="header">
<div class="dots">
<div class="dot red"></div>
<div class="dot yellow"></div>
<div class="dot green"></div>
<div class="container">
<!-- 顶部核心信息 -->
<div class="header-section">
<div class="city-name">{{ city_name }}</div>
{% set first_day = weather_data[0] %}
<div class="main-temp-wrapper">
<span class="main-temp">{{ first_day.temperature.split(' / ')[0].replace('℃', '') if ' / ' in first_day.temperature else first_day.temperature.replace('℃', '') }}</span>
<span class="temp-unit">°C</span>
</div>
<div class="weather-desc-row">
<span>{{ first_day.weather }}</span>
<div class="divider"></div>
<span>风力 {{ first_day.wind_power }}</span>
</div>
<div class="title">天气查询</div>
</div>
<div class="content">
<div class="page-title">
<h1>天气查询结果</h1>
<p>{{ timestamp }}</p>
</div>
<div class="city-info">
<div class="city-name">{{ city_name }}</div>
<div class="query-time">查询时间: {{ query_time }}</div>
</div>
<div class="weather-grid">
{% for day_weather in weather_data %}
<div class="weather-card">
<div class="weather-header">
<div class="weather-day">{{ day_weather.day }}</div>
<div class="weather-condition">{{ day_weather.weather }}</div>
</div>
<div class="weather-main">
<div class="weather-temp">{{ day_weather.temperature }}</div>
</div>
<div class="weather-details">
<div class="weather-detail-item">
<div class="detail-label">风力</div>
<div class="detail-value">{{ day_weather.wind_power }}</div>
</div>
<div class="weather-detail-item">
<div class="detail-label">风向</div>
<div class="detail-value">{{ day_weather.wind_direction }}</div>
</div>
<!-- 预测卡片 -->
<div class="forecast-card">
<div class="forecast-grid">
{% set month = query_time.split('年')[1].split('月')[0] if '年' in query_time else '3' %}
{# 星期名称映射 #}
{% set week_names = ['日', '一', '二', '三', '四', '五', '六'] %}
{# 从第一天数据中提取今天是星期几 #}
{% set first_day_text = weather_data[0].day %}
{% set today_week_text = first_day_text.split('(')[1].replace(')', '') if '(' in first_day_text else '今天' %}
{# 将文字星期转换为数字：今天=0, 明天=1, 后天=2, 周一=1, 周二=2... #}
{% if today_week_text == '今天' %}
{% set today_week_num = 0 %}
{% elif today_week_text == '明天' %}
{% set today_week_num = 1 %}
{% elif today_week_text == '后天' %}
{% set today_week_num = 2 %}
{% elif '周' in today_week_text %}
{% set week_day_char = today_week_text.replace('周', '').replace('星期', '') %}
{% set week_map = {'日': 0, '一': 1, '二': 2, '三': 3, '四': 4, '五': 5, '六': 6} %}
{% set today_week_num = week_map[week_day_char] if week_day_char in week_map else 0 %}
{% else %}
{% set today_week_num = 0 %}
{% endif %}
{% for day_weather in weather_data[:5] %}
<div class="grid-item">
<div class="grid-day">
{% set day_text = day_weather.day %}
{% set day_num = day_text.split('日')[0] %}
{% if loop.index0 == 0 %}
<span class="day-label">今日</span>
{% elif loop.index0 == 1 %}
<span class="day-label">明日</span>
{% elif loop.index0 == 2 %}
<span class="day-label">后日</span>
{% else %}
{# 计算这一天的星期：今天 + 天数偏移 #}
{% set target_week_num = (today_week_num + loop.index0) % 7 %}
<span class="day-label">星期{{ week_names[target_week_num] }}</span>
{% endif %}
<span class="day-date">{{ month }}/{{ day_num }}</span>
</div>
<i data-lucide="cloud" class="forecast-icon grid-icon" data-condition="{{ day_weather.weather }}"></i>
</div>
{% endfor %}
</div>
<div class="footer">
<div class="info-row">数据来源: 中国天气网</div>
<div class="info-row">查询城市: {{ city_name }}</div>
<div class="version-info">
CalglauBot | Powered by NeoBot Framework
</div>
<div class="chart-container">
<svg class="chart-svg" viewBox="0 0 400 160" preserveAspectRatio="xMidYMid meet">
{# 收集最高温和最低温数据 #}
{% set high_list = [] %}
{% set low_list = [] %}
{% for day in weather_data[:5] %}
{% set parts = day.temperature.split(' / ') %}
{% set high_str = parts[0].replace('℃', '') %}
{% set low_str = parts[1].replace('℃', '') if parts | length > 1 else parts[0].replace('℃', '') %}
{% set high_val = high_str | int if high_str | int is defined else 0 %}
{% set low_val = low_str | int if low_str | int is defined else 0 %}
{% set _ = high_list.append(high_val) %}
{% set _ = low_list.append(low_val) %}
{% endfor %}
{% set all_temps = high_list + low_list %}
{% set min_t = all_temps | min %}
{% set max_t = all_temps | max %}
{% set temp_range = (max_t - min_t) if (max_t - min_t) > 0 else 1 %}
{% set pad_x = 40 %}
{% set pad_top = 25 %}
{% set pad_bottom = 20 %}
{% set cw = 320 %}
{% set ch = 115 %}
{# 绘制最低温折线 #}
<polyline class="chart-line-low" points="{% for t in low_list %}{{ pad_x + (loop.index0 * cw / 4) }},{{ pad_top + ch - ((t - min_t) / temp_range * ch) }}{% if not loop.last %} {% endif %}{% endfor %}"/>
{# 绘制最高温折线 #}
<polyline class="chart-line-high" points="{% for t in high_list %}{{ pad_x + (loop.index0 * cw / 4) }},{{ pad_top + ch - ((t - min_t) / temp_range * ch) }}{% if not loop.last %} {% endif %}{% endfor %}"/>
{# 绘制最低温圆点和标签 #}
{% for t in low_list %}
{% set x = pad_x + (loop.index0 * cw / 4) %}
{% set y = pad_top + ch - ((t - min_t) / temp_range * ch) %}
<circle class="chart-dot-low" cx="{{ x }}" cy="{{ y }}" r="3.5"/>
<text class="chart-label-low" x="{{ x }}" y="{{ y + 22 }}" text-anchor="middle">{{ t }}°</text>
{% endfor %}
{# 绘制最高温圆点和标签 #}
{% for t in high_list %}
{% set x = pad_x + (loop.index0 * cw / 4) %}
{% set y = pad_top + ch - ((t - min_t) / temp_range * ch) %}
<circle class="chart-dot-high" cx="{{ x }}" cy="{{ y }}" r="4"/>
<text class="chart-label" x="{{ x }}" y="{{ y - 14 }}" text-anchor="middle">{{ t }}°</text>
{% endfor %}
</svg>
</div>
</div>
<div class="footer">
<p>数据更新于 {{ query_time }}</p>
<p>数据来源: 中国天气网 | NeoBot</p>
</div>
</div>
<script>
// 根据天气状况动态切换图标
function updateIcons() {
document.querySelectorAll('.forecast-icon').forEach(icon => {
const condition = icon.getAttribute('data-condition');
let iconName = 'cloud';
if (condition.includes('晴')) {
iconName = 'sun';
} else if (condition.includes('大雨') || condition.includes('暴雨')) {
iconName = 'cloud-rain-wind';
} else if (condition.includes('雨')) {
iconName = 'cloud-rain';
} else if (condition.includes('雪')) {
iconName = 'cloud-snow';
} else if (condition.includes('雷') || condition.includes('电')) {
iconName = 'cloud-lightning';
} else if (condition.includes('阴')) {
iconName = 'cloud';
} else if (condition.includes('云')) {
iconName = 'cloudy';
} else if (condition.includes('霾') || condition.includes('雾')) {
iconName = 'haze';
}
icon.setAttribute('data-lucide', iconName);
});
lucide.createIcons();
}
updateIcons();
</script>
</body>
</html></content>
</html>
</content>