1071 lines
33 KiB
HTML
1071 lines
33 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>情景诗词 - 诗意生活，触手可及</title>
|
|
<meta name="description" content="一款优雅的 Flutter 跨平台诗词阅读应用，融合中国传统文化与现代科技，让诗词之美触手可及。">
|
|
<meta name="keywords" content="诗词,古典文学,中国文化,阅读,收藏,答题,离线,跨平台,Flutter,鸿蒙,iOS,Android">
|
|
<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=Noto+Serif+SC:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--ios-blue: #007AFF;
|
|
--ios-blue-hover: #0051D5;
|
|
--ios-bg: #F2F2F7;
|
|
--ios-card: #FFFFFF;
|
|
--ios-text: #1C1C1E;
|
|
--ios-text-secondary: #8E8E93;
|
|
--ios-border: #E5E5EA;
|
|
--ios-green: #34C759;
|
|
--ios-orange: #FF9500;
|
|
--ios-purple: #AF52DE;
|
|
--ios-teal: #5AC8FA;
|
|
--gradient-start: #E3F2FD;
|
|
--gradient-end: #F3E5F5;
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
|
|
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
|
|
--radius-sm: 8px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 20px;
|
|
--radius-xl: 28px;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
background: linear-gradient(180deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
|
|
background-attachment: fixed;
|
|
color: var(--ios-text);
|
|
line-height: 1.6;
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Navigation */
|
|
.nav {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
background: rgba(255, 255, 255, 0.72);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.nav-content {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 16px 24px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-logo {
|
|
font-family: 'Noto Serif SC', serif;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: var(--ios-text);
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.nav-logo::before {
|
|
content: '📜';
|
|
font-size: 24px;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 32px;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-link {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--ios-text);
|
|
text-decoration: none;
|
|
opacity: 0.8;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.nav-cta {
|
|
background: var(--ios-blue);
|
|
color: white;
|
|
padding: 8px 20px;
|
|
border-radius: 20px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.nav-cta:hover {
|
|
background: var(--ios-blue-hover);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 120px 24px 80px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background:
|
|
radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 122, 255, 0.15), transparent),
|
|
radial-gradient(ellipse 60% 40% at 80% 80%, rgba(175, 82, 222, 0.1), transparent);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-content {
|
|
max-width: 1200px;
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 80px;
|
|
align-items: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.hero-text {
|
|
animation: fadeInUp 0.8s ease-out;
|
|
}
|
|
|
|
.hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: rgba(0, 122, 255, 0.1);
|
|
color: var(--ios-blue);
|
|
padding: 8px 16px;
|
|
border-radius: 100px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.hero-title {
|
|
font-family: 'Noto Serif SC', serif;
|
|
font-size: 56px;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
margin-bottom: 20px;
|
|
background: linear-gradient(135deg, var(--ios-text) 0%, #4A4A4A 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 20px;
|
|
color: var(--ios-text-secondary);
|
|
margin-bottom: 40px;
|
|
font-weight: 400;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.hero-buttons {
|
|
display: flex;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--ios-blue);
|
|
color: white;
|
|
padding: 16px 32px;
|
|
border-radius: var(--radius-xl);
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 16px rgba(0, 122, 255, 0.3);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--ios-blue-hover);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 24px rgba(0, 122, 255, 0.4);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--ios-card);
|
|
color: var(--ios-text);
|
|
padding: 16px 32px;
|
|
border-radius: var(--radius-xl);
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
transition: all 0.3s ease;
|
|
border: 1px solid var(--ios-border);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--ios-bg);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Phone Mockup */
|
|
.hero-visual {
|
|
display: flex;
|
|
justify-content: center;
|
|
animation: fadeInUp 0.8s ease-out 0.2s both;
|
|
}
|
|
|
|
.phone-mockup {
|
|
width: 320px;
|
|
height: 640px;
|
|
background: var(--ios-card);
|
|
border-radius: 48px;
|
|
box-shadow:
|
|
0 25px 80px rgba(0, 0, 0, 0.15),
|
|
0 10px 30px rgba(0, 0, 0, 0.1),
|
|
inset 0 0 0 2px rgba(255, 255, 255, 0.5);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
|
|
transition: transform 0.5s ease;
|
|
}
|
|
|
|
.phone-mockup:hover {
|
|
transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
|
|
}
|
|
|
|
.phone-notch {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 120px;
|
|
height: 32px;
|
|
background: var(--ios-text);
|
|
border-radius: 0 0 20px 20px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.phone-screen {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 60px 24px 40px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
background: linear-gradient(180deg, #F8F9FA 0%, #FFFFFF 100%);
|
|
}
|
|
|
|
.poetry-card {
|
|
background: white;
|
|
border-radius: var(--radius-lg);
|
|
padding: 24px;
|
|
box-shadow: var(--shadow-sm);
|
|
border: 1px solid var(--ios-border);
|
|
}
|
|
|
|
.poetry-title {
|
|
font-family: 'Noto Serif SC', serif;
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
color: var(--ios-text);
|
|
}
|
|
|
|
.poetry-author {
|
|
font-size: 14px;
|
|
color: var(--ios-text-secondary);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.poetry-content {
|
|
font-family: 'Noto Serif SC', serif;
|
|
font-size: 16px;
|
|
line-height: 2;
|
|
color: var(--ios-text);
|
|
}
|
|
|
|
.phone-nav {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 80px;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
backdrop-filter: blur(10px);
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
padding: 0 20px 20px;
|
|
border-top: 0.5px solid var(--ios-border);
|
|
}
|
|
|
|
.phone-nav-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 11px;
|
|
color: var(--ios-text-secondary);
|
|
}
|
|
|
|
.phone-nav-item.active {
|
|
color: var(--ios-blue);
|
|
}
|
|
|
|
.phone-nav-icon {
|
|
font-size: 24px;
|
|
}
|
|
|
|
/* Features Section */
|
|
.features {
|
|
padding: 100px 24px;
|
|
background: var(--ios-card);
|
|
}
|
|
|
|
.section-header {
|
|
text-align: center;
|
|
max-width: 600px;
|
|
margin: 0 auto 60px;
|
|
}
|
|
|
|
.section-label {
|
|
display: inline-block;
|
|
background: rgba(0, 122, 255, 0.1);
|
|
color: var(--ios-blue);
|
|
padding: 6px 14px;
|
|
border-radius: 100px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
margin-bottom: 16px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.section-title {
|
|
font-family: 'Noto Serif SC', serif;
|
|
font-size: 40px;
|
|
font-weight: 700;
|
|
margin-bottom: 16px;
|
|
color: var(--ios-text);
|
|
}
|
|
|
|
.section-subtitle {
|
|
font-size: 18px;
|
|
color: var(--ios-text-secondary);
|
|
}
|
|
|
|
.features-grid {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 24px;
|
|
}
|
|
|
|
.feature-card {
|
|
background: var(--ios-bg);
|
|
border-radius: var(--radius-lg);
|
|
padding: 32px;
|
|
transition: all 0.3s ease;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: var(--shadow-lg);
|
|
border-color: var(--ios-border);
|
|
background: var(--ios-card);
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: var(--radius-md);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 28px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.feature-icon.blue { background: rgba(0, 122, 255, 0.1); }
|
|
.feature-icon.green { background: rgba(52, 199, 89, 0.1); }
|
|
.feature-icon.orange { background: rgba(255, 149, 0, 0.1); }
|
|
.feature-icon.purple { background: rgba(175, 82, 222, 0.1); }
|
|
.feature-icon.teal { background: rgba(90, 200, 250, 0.1); }
|
|
.feature-icon.red { background: rgba(255, 59, 48, 0.1); }
|
|
|
|
.feature-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
color: var(--ios-text);
|
|
}
|
|
|
|
.feature-desc {
|
|
font-size: 15px;
|
|
color: var(--ios-text-secondary);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Download Section */
|
|
.download {
|
|
padding: 100px 24px;
|
|
background: linear-gradient(180deg, var(--ios-bg) 0%, var(--gradient-end) 100%);
|
|
}
|
|
|
|
.download-content {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.platforms {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
flex-wrap: wrap;
|
|
margin-top: 48px;
|
|
}
|
|
|
|
.platform-card {
|
|
background: var(--ios-card);
|
|
border-radius: var(--radius-lg);
|
|
padding: 32px 40px;
|
|
min-width: 200px;
|
|
box-shadow: var(--shadow-sm);
|
|
border: 1px solid var(--ios-border);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.platform-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.platform-icon {
|
|
font-size: 48px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.platform-name {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
color: var(--ios-text);
|
|
}
|
|
|
|
.platform-version {
|
|
font-size: 13px;
|
|
color: var(--ios-text-secondary);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.platform-btn {
|
|
background: var(--ios-blue);
|
|
color: white;
|
|
padding: 12px 24px;
|
|
border-radius: var(--radius-md);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.platform-btn:hover {
|
|
background: var(--ios-blue-hover);
|
|
}
|
|
|
|
.platform-btn.coming {
|
|
background: var(--ios-border);
|
|
color: var(--ios-text-secondary);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Stats Section */
|
|
.stats {
|
|
padding: 80px 24px;
|
|
background: var(--ios-card);
|
|
}
|
|
|
|
.stats-grid {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-item {
|
|
padding: 20px;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 48px;
|
|
font-weight: 700;
|
|
color: var(--ios-blue);
|
|
margin-bottom: 8px;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 15px;
|
|
color: var(--ios-text-secondary);
|
|
}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
padding: 60px 24px 40px;
|
|
background: var(--ios-text);
|
|
color: white;
|
|
}
|
|
|
|
.footer-content {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: 2fr 1fr 1fr 1fr;
|
|
gap: 60px;
|
|
}
|
|
|
|
.footer-brand {
|
|
font-family: 'Noto Serif SC', serif;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
margin-bottom: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.footer-desc {
|
|
font-size: 14px;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
line-height: 1.6;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.footer-social {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.social-link {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
text-decoration: none;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.social-link:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.footer-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
margin-bottom: 20px;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.footer-links {
|
|
list-style: none;
|
|
}
|
|
|
|
.footer-links li {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.footer-links a {
|
|
font-size: 14px;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
text-decoration: none;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.footer-links a:hover {
|
|
color: white;
|
|
}
|
|
|
|
.footer-bottom {
|
|
max-width: 1200px;
|
|
margin: 60px auto 0;
|
|
padding-top: 24px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
text-align: center;
|
|
font-size: 13px;
|
|
color: rgba(255, 255, 255, 0.4);
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 1024px) {
|
|
.hero-content {
|
|
grid-template-columns: 1fr;
|
|
gap: 60px;
|
|
text-align: center;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 44px;
|
|
}
|
|
|
|
.hero-buttons {
|
|
justify-content: center;
|
|
}
|
|
|
|
.phone-mockup {
|
|
width: 280px;
|
|
height: 560px;
|
|
transform: none;
|
|
}
|
|
|
|
.footer-content {
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 40px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.nav-links {
|
|
display: none;
|
|
}
|
|
|
|
.hero {
|
|
padding: 100px 20px 60px;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 36px;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 17px;
|
|
}
|
|
|
|
.hero-buttons {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.btn-primary, .btn-secondary {
|
|
width: 100%;
|
|
max-width: 280px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 32px;
|
|
}
|
|
|
|
.features-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.platforms {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.platform-card {
|
|
width: 100%;
|
|
max-width: 320px;
|
|
}
|
|
|
|
.stats-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 20px;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 36px;
|
|
}
|
|
|
|
.footer-content {
|
|
grid-template-columns: 1fr;
|
|
text-align: center;
|
|
gap: 40px;
|
|
}
|
|
|
|
.footer-social {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.hero-title {
|
|
font-size: 28px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 26px;
|
|
}
|
|
|
|
.phone-mockup {
|
|
width: 240px;
|
|
height: 480px;
|
|
}
|
|
|
|
.stats-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Scroll animations */
|
|
.animate-on-scroll {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: all 0.6s ease;
|
|
}
|
|
|
|
.animate-on-scroll.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Navigation -->
|
|
<nav class="nav">
|
|
<div class="nav-content">
|
|
<a href="#" class="nav-logo">情景诗词</a>
|
|
<div class="nav-links">
|
|
<a href="#features" class="nav-link">功能</a>
|
|
<a href="#download" class="nav-link">下载</a>
|
|
<a href="#stats" class="nav-link">关于</a>
|
|
<a href="#download" class="nav-cta">立即下载</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero">
|
|
<div class="hero-bg"></div>
|
|
<div class="hero-content">
|
|
<div class="hero-text">
|
|
<div class="hero-badge">
|
|
<span>✨</span>
|
|
<span>Flutter 跨平台应用</span>
|
|
</div>
|
|
<h1 class="hero-title">诗意生活<br>触手可及</h1>
|
|
<p class="hero-subtitle">一款专注于中国古典诗词阅读与欣赏的移动应用，融合传统文化与现代科技，让诗词之美触手可及。</p>
|
|
<div class="hero-buttons">
|
|
<a href="#download" class="btn-primary">
|
|
<span>⬇️</span>
|
|
<span>立即下载</span>
|
|
</a>
|
|
<a href="#features" class="btn-secondary">
|
|
<span>📖</span>
|
|
<span>了解更多</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="hero-visual">
|
|
<div class="phone-mockup">
|
|
<div class="phone-notch"></div>
|
|
<div class="phone-screen">
|
|
<div class="poetry-card">
|
|
<div class="poetry-title">静夜思</div>
|
|
<div class="poetry-author">唐 · 李白</div>
|
|
<div class="poetry-content">
|
|
床前明月光，<br>
|
|
疑是地上霜。<br>
|
|
举头望明月，<br>
|
|
低头思故乡。
|
|
</div>
|
|
</div>
|
|
<div class="poetry-card">
|
|
<div class="poetry-title">春晓</div>
|
|
<div class="poetry-author">唐 · 孟浩然</div>
|
|
<div class="poetry-content">
|
|
春眠不觉晓，<br>
|
|
处处闻啼鸟。
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="phone-nav">
|
|
<div class="phone-nav-item active">
|
|
<span class="phone-nav-icon">🏠</span>
|
|
<span>主页</span>
|
|
</div>
|
|
<div class="phone-nav-item">
|
|
<span class="phone-nav-icon">🔍</span>
|
|
<span>发现</span>
|
|
</div>
|
|
<div class="phone-nav-item">
|
|
<span class="phone-nav-icon">❤️</span>
|
|
<span>收藏</span>
|
|
</div>
|
|
<div class="phone-nav-item">
|
|
<span class="phone-nav-icon">👤</span>
|
|
<span>我的</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<section class="features" id="features">
|
|
<div class="section-header">
|
|
<div class="section-label">主要功能</div>
|
|
<h2 class="section-title">丰富的诗词体验</h2>
|
|
<p class="section-subtitle">精心设计的每一个功能，只为让您更好地感受诗词之美</p>
|
|
</div>
|
|
<div class="features-grid">
|
|
<div class="feature-card animate-on-scroll">
|
|
<div class="feature-icon blue">📚</div>
|
|
<h3 class="feature-title">精美诗词阅读</h3>
|
|
<p class="feature-desc">经典、现代、毛玻璃三种主题风格，支持自定义颜色和圆角，打造专属阅读体验</p>
|
|
</div>
|
|
<div class="feature-card animate-on-scroll">
|
|
<div class="feature-icon green">❤️</div>
|
|
<h3 class="feature-title">收藏与管理</h3>
|
|
<p class="feature-desc">一键收藏喜欢的诗词，随时查看和管理您的诗词收藏夹</p>
|
|
</div>
|
|
<div class="feature-card animate-on-scroll">
|
|
<div class="feature-icon orange">🎮</div>
|
|
<h3 class="feature-title">诗词答题挑战</h3>
|
|
<p class="feature-desc">参与诗词答题，测试您的诗词知识，记录答题历史和成绩</p>
|
|
</div>
|
|
<div class="feature-card animate-on-scroll">
|
|
<div class="feature-icon purple">🌐</div>
|
|
<h3 class="feature-title">离线模式支持</h3>
|
|
<p class="feature-desc">下载诗词和答题数据到本地，随时随地享受诗词之美</p>
|
|
</div>
|
|
<div class="feature-card animate-on-scroll">
|
|
<div class="feature-icon teal">🎨</div>
|
|
<h3 class="feature-title">个性化设置</h3>
|
|
<p class="feature-desc">主题切换、卡片样式、颜色自定义，打造独一无二的诗词应用</p>
|
|
</div>
|
|
<div class="feature-card animate-on-scroll">
|
|
<div class="feature-icon red">📸</div>
|
|
<h3 class="feature-title">诗词分享</h3>
|
|
<p class="feature-desc">将诗词生成精美图片，与朋友分享诗词之美</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Stats Section -->
|
|
<section class="stats" id="stats">
|
|
<div class="section-header">
|
|
<div class="section-label">数据统计</div>
|
|
<h2 class="section-title">持续成长中</h2>
|
|
</div>
|
|
<div class="stats-grid">
|
|
<div class="stat-item animate-on-scroll">
|
|
<div class="stat-number">6+</div>
|
|
<div class="stat-label">支持平台</div>
|
|
</div>
|
|
<div class="stat-item animate-on-scroll">
|
|
<div class="stat-number">1000+</div>
|
|
<div class="stat-label">诗词收录</div>
|
|
</div>
|
|
<div class="stat-item animate-on-scroll">
|
|
<div class="stat-number">3</div>
|
|
<div class="stat-label">主题风格</div>
|
|
</div>
|
|
<div class="stat-item animate-on-scroll">
|
|
<div class="stat-number">∞</div>
|
|
<div class="stat-label">诗词之美</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Download Section -->
|
|
<section class="download" id="download">
|
|
<div class="download-content">
|
|
<div class="section-header">
|
|
<div class="section-label">立即下载</div>
|
|
<h2 class="section-title">选择您的平台</h2>
|
|
<p class="section-subtitle">支持 Android、iOS、鸿蒙、Web、Windows、macOS 多平台</p>
|
|
</div>
|
|
<div class="platforms">
|
|
<div class="platform-card animate-on-scroll">
|
|
<div class="platform-icon">🤖</div>
|
|
<div class="platform-name">Android</div>
|
|
<div class="platform-version">Android 8.0+</div>
|
|
<a href="#" class="platform-btn">下载 APK</a>
|
|
</div>
|
|
<div class="platform-card animate-on-scroll">
|
|
<div class="platform-icon">🍎</div>
|
|
<div class="platform-name">iOS</div>
|
|
<div class="platform-version">iOS 16.0+</div>
|
|
<a href="#" class="platform-btn">App Store</a>
|
|
</div>
|
|
<div class="platform-card animate-on-scroll">
|
|
<div class="platform-icon">🌸</div>
|
|
<div class="platform-name">鸿蒙</div>
|
|
<div class="platform-version">HarmonyOS 5.0+</div>
|
|
<a href="#" class="platform-btn">应用市场</a>
|
|
</div>
|
|
<div class="platform-card animate-on-scroll">
|
|
<div class="platform-icon">🌐</div>
|
|
<div class="platform-name">Web</div>
|
|
<div class="platform-version">现代浏览器</div>
|
|
<a href="#" class="platform-btn">在线使用</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="footer-content">
|
|
<div class="footer-section">
|
|
<div class="footer-brand">
|
|
<span>📜</span>
|
|
<span>情景诗词</span>
|
|
</div>
|
|
<p class="footer-desc">一款优雅的 Flutter 跨平台诗词阅读应用，融合中国传统文化与现代科技，让诗词之美触手可及。</p>
|
|
<div class="footer-social">
|
|
<a href="#" class="social-link" title="QQ群">💬</a>
|
|
<a href="#" class="social-link" title="GitHub">💻</a>
|
|
<a href="#" class="social-link" title="邮箱">✉️</a>
|
|
</div>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h4 class="footer-title">产品</h4>
|
|
<ul class="footer-links">
|
|
<li><a href="#features">功能介绍</a></li>
|
|
<li><a href="#download">下载应用</a></li>
|
|
<li><a href="#">更新日志</a></li>
|
|
<li><a href="#">开发计划</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h4 class="footer-title">支持</h4>
|
|
<ul class="footer-links">
|
|
<li><a href="#">使用指南</a></li>
|
|
<li><a href="#">常见问题</a></li>
|
|
<li><a href="#">反馈问题</a></li>
|
|
<li><a href="#">功能建议</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h4 class="footer-title">关于</h4>
|
|
<ul class="footer-links">
|
|
<li><a href="#">关于我们</a></li>
|
|
<li><a href="#">开源协议</a></li>
|
|
<li><a href="#">隐私政策</a></li>
|
|
<li><a href="#">联系我们</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p>© 2026 情景诗词. 诗意生活，触手可及.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Scroll animations
|
|
const observerOptions = {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
document.querySelectorAll('.animate-on-scroll').forEach(el => {
|
|
observer.observe(el);
|
|
});
|
|
|
|
// Smooth scroll for navigation links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// Navigation background on scroll
|
|
const nav = document.querySelector('.nav');
|
|
let lastScroll = 0;
|
|
|
|
window.addEventListener('scroll', () => {
|
|
const currentScroll = window.pageYOffset;
|
|
|
|
if (currentScroll > 100) {
|
|
nav.style.background = 'rgba(255, 255, 255, 0.9)';
|
|
} else {
|
|
nav.style.background = 'rgba(255, 255, 255, 0.72)';
|
|
}
|
|
|
|
lastScroll = currentScroll;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |