427 lines
14 KiB
HTML
427 lines
14 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>Weather App</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.weather-card {
|
|
background: rgba(255, 255, 255, 0.85);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border-radius: 32px;
|
|
box-shadow:
|
|
0 8px 32px rgba(0, 0, 0, 0.08),
|
|
0 2px 8px rgba(0, 0, 0, 0.04),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
|
padding: 32px;
|
|
width: 100%;
|
|
max-width: 420px;
|
|
border: 1px solid rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
/* 顶部区域 */
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.location {
|
|
font-size: 13px;
|
|
color: #8896a6;
|
|
font-weight: 500;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.location svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
stroke: #8896a6;
|
|
}
|
|
|
|
.date {
|
|
font-size: 12px;
|
|
color: #aab4c0;
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* 主要天气区域 */
|
|
.main-weather {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.weather-icon {
|
|
width: 120px;
|
|
height: 120px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.weather-icon svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
filter: drop-shadow(0 4px 12px rgba(255, 183, 77, 0.3));
|
|
}
|
|
|
|
.temperature {
|
|
font-size: 72px;
|
|
font-weight: 300;
|
|
color: #2d3748;
|
|
line-height: 1;
|
|
letter-spacing: -4px;
|
|
}
|
|
|
|
.temp-unit {
|
|
font-size: 28px;
|
|
color: #aab4c0;
|
|
vertical-align: super;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.weather-desc {
|
|
font-size: 14px;
|
|
color: #718096;
|
|
margin-top: 8px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
/* 次要数据网格 */
|
|
.secondary-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 12px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.data-card {
|
|
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
|
border-radius: 20px;
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
border: 1px solid rgba(226, 232, 240, 0.8);
|
|
}
|
|
|
|
.data-card svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
stroke: #94a3b8;
|
|
}
|
|
|
|
.data-label {
|
|
font-size: 11px;
|
|
color: #94a3b8;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.data-value {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
color: #475569;
|
|
}
|
|
|
|
/* 中间彩色卡片 */
|
|
.info-cards {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.info-card {
|
|
flex: 1;
|
|
border-radius: 20px;
|
|
padding: 16px 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.info-card.uv {
|
|
background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
|
|
}
|
|
|
|
.info-card.sunrise {
|
|
background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
|
|
}
|
|
|
|
.info-card.sunset {
|
|
background: linear-gradient(135deg, #e9d5ff 0%, #ddd6fe 100%);
|
|
}
|
|
|
|
.info-card svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
stroke: #78716c;
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 10px;
|
|
color: #78716c;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #44403c;
|
|
}
|
|
|
|
/* 小时预报 */
|
|
.hourly-title {
|
|
font-size: 12px;
|
|
color: #94a3b8;
|
|
margin-bottom: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.hourly-list {
|
|
display: flex;
|
|
gap: 10px;
|
|
overflow-x: auto;
|
|
padding-bottom: 8px;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.hourly-list::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.hourly-card {
|
|
flex-shrink: 0;
|
|
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
|
border-radius: 16px;
|
|
padding: 14px 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 64px;
|
|
border: 1px solid rgba(226, 232, 240, 0.8);
|
|
}
|
|
|
|
.hourly-time {
|
|
font-size: 11px;
|
|
color: #94a3b8;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.hourly-icon {
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
|
|
.hourly-icon svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.hourly-temp {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #475569;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="weather-card">
|
|
<!-- 顶部 -->
|
|
<div class="header">
|
|
<div class="location">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
|
<circle cx="12" cy="10" r="3"/>
|
|
</svg>
|
|
上海市
|
|
</div>
|
|
<div class="date">2026年2月6日 星期五</div>
|
|
</div>
|
|
|
|
<!-- 主天气 -->
|
|
<div class="main-weather">
|
|
<div>
|
|
<div class="temperature">28<span class="temp-unit">°</span></div>
|
|
<div class="weather-desc">晴转多云</div>
|
|
</div>
|
|
<div class="weather-icon">
|
|
<svg viewBox="0 0 120 120" fill="none">
|
|
<!-- 太阳 -->
|
|
<circle cx="55" cy="55" r="22" fill="#fbbf24" opacity="0.9"/>
|
|
<circle cx="55" cy="55" r="28" fill="#fbbf24" opacity="0.15"/>
|
|
<!-- 云朵 -->
|
|
<ellipse cx="78" cy="58" rx="26" ry="18" fill="#e2e8f0"/>
|
|
<ellipse cx="92" cy="52" rx="18" ry="14" fill="#f1f5f9"/>
|
|
<ellipse cx="68" cy="50" rx="16" ry="12" fill="#f8fafc"/>
|
|
<!-- 连接 -->
|
|
<rect x="70" y="52" width="8" height="8" fill="#e2e8f0"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 次要数据 -->
|
|
<div class="secondary-grid">
|
|
<div class="data-card">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"/>
|
|
</svg>
|
|
<span class="data-label">湿度</span>
|
|
<span class="data-value">65%</span>
|
|
</div>
|
|
<div class="data-card">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M9.59 4.59A2 2 0 1 1 11 8H2m10.59 11.41A2 2 0 1 0 14 16H2m15.73-8.27A2.5 2.5 0 1 1 19.5 12H2"/>
|
|
</svg>
|
|
<span class="data-label">风速</span>
|
|
<span class="data-value">12 km/h</span>
|
|
</div>
|
|
<div class="data-card">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="5"/>
|
|
<path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72 1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
|
|
</svg>
|
|
<span class="data-label">能见度</span>
|
|
<span class="data-value">10 km</span>
|
|
</div>
|
|
<div class="data-card">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
|
|
<line x1="16" y1="2" x2="16" y2="6"/>
|
|
<line x1="8" y1="2" x2="8" y2="6"/>
|
|
<line x1="3" y1="10" x2="21" y2="10"/>
|
|
</svg>
|
|
<span class="data-label">体感</span>
|
|
<span class="data-value">26°</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 中间信息卡片 -->
|
|
<div class="info-cards">
|
|
<div class="info-card uv">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="4"/>
|
|
<path d="M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32 1.41 1.41M2 12h2m16 0h2M4.93 19.07l1.41-1.41m11.32-11.32 1.41-1.41"/>
|
|
</svg>
|
|
<span class="info-label">紫外线</span>
|
|
<span class="info-value">中等 4</span>
|
|
</div>
|
|
<div class="info-card sunrise">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M17 18a5 5 0 0 0-10 0"/>
|
|
<line x1="12" y1="2" x2="12" y2="9"/>
|
|
<line x1="4.22" y1="10.22" x2="5.64" y2="11.64"/>
|
|
<line x1="1" y1="18" x2="3" y2="18"/>
|
|
<line x1="21" y1="18" x2="23" y2="18"/>
|
|
<line x1="18.36" y1="11.64" x2="19.78" y2="10.22"/>
|
|
</svg>
|
|
<span class="info-label">日出</span>
|
|
<span class="info-value">06:42</span>
|
|
</div>
|
|
<div class="info-card sunset">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M17 18a5 5 0 0 0-10 0"/>
|
|
<line x1="12" y1="9" x2="12" y2="2"/>
|
|
<line x1="4.22" y1="10.22" x2="5.64" y2="8.8"/>
|
|
<line x1="1" y1="18" x2="3" y2="18"/>
|
|
<line x1="21" y1="18" x2="23" y2="18"/>
|
|
<line x1="18.36" y1="8.8" x2="19.78" y2="10.22"/>
|
|
</svg>
|
|
<span class="info-label">日落</span>
|
|
<span class="info-value">17:38</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 小时预报 -->
|
|
<div class="hourly-title">每小时预报</div>
|
|
<div class="hourly-list">
|
|
<div class="hourly-card">
|
|
<span class="hourly-time">现在</span>
|
|
<div class="hourly-icon">
|
|
<svg viewBox="0 0 32 32" fill="none">
|
|
<circle cx="14" cy="14" r="6" fill="#fbbf24"/>
|
|
<ellipse cx="22" cy="16" rx="7" ry="5" fill="#e2e8f0"/>
|
|
</svg>
|
|
</div>
|
|
<span class="hourly-temp">28°</span>
|
|
</div>
|
|
<div class="hourly-card">
|
|
<span class="hourly-time">11:00</span>
|
|
<div class="hourly-icon">
|
|
<svg viewBox="0 0 32 32" fill="none">
|
|
<circle cx="14" cy="14" r="6" fill="#fbbf24"/>
|
|
<ellipse cx="22" cy="16" rx="7" ry="5" fill="#e2e8f0"/>
|
|
</svg>
|
|
</div>
|
|
<span class="hourly-temp">29°</span>
|
|
</div>
|
|
<div class="hourly-card">
|
|
<span class="hourly-time">12:00</span>
|
|
<div class="hourly-icon">
|
|
<svg viewBox="0 0 32 32" fill="none">
|
|
<ellipse cx="16" cy="17" rx="9" ry="6" fill="#e2e8f0"/>
|
|
<ellipse cx="20" cy="15" rx="6" ry="4" fill="#f1f5f9"/>
|
|
</svg>
|
|
</div>
|
|
<span class="hourly-temp">30°</span>
|
|
</div>
|
|
<div class="hourly-card">
|
|
<span class="hourly-time">13:00</span>
|
|
<div class="hourly-icon">
|
|
<svg viewBox="0 0 32 32" fill="none">
|
|
<ellipse cx="16" cy="17" rx="9" ry="6" fill="#e2e8f0"/>
|
|
<ellipse cx="20" cy="15" rx="6" ry="4" fill="#f1f5f9"/>
|
|
</svg>
|
|
</div>
|
|
<span class="hourly-temp">30°</span>
|
|
</div>
|
|
<div class="hourly-card">
|
|
<span class="hourly-time">14:00</span>
|
|
<div class="hourly-icon">
|
|
<svg viewBox="0 0 32 32" fill="none">
|
|
<ellipse cx="16" cy="17" rx="9" ry="6" fill="#e2e8f0"/>
|
|
<ellipse cx="20" cy="15" rx="6" ry="4" fill="#f1f5f9"/>
|
|
</svg>
|
|
</div>
|
|
<span class="hourly-temp">29°</span>
|
|
</div>
|
|
<div class="hourly-card">
|
|
<span class="hourly-time">15:00</span>
|
|
<div class="hourly-icon">
|
|
<svg viewBox="0 0 32 32" fill="none">
|
|
<ellipse cx="16" cy="17" rx="9" ry="6" fill="#cbd5e1"/>
|
|
<ellipse cx="20" cy="15" rx="6" ry="4" fill="#e2e8f0"/>
|
|
</svg>
|
|
</div>
|
|
<span class="hourly-temp">27°</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|