generated from dellevin/template
988 lines
23 KiB
Vue
988 lines
23 KiB
Vue
<template>
|
||
<div class="home">
|
||
<!-- Hero Section -->
|
||
<section class="hero">
|
||
<div class="hero-content">
|
||
<div class="hero-badge animate-on-scroll">MookNote</div>
|
||
<h1 class="hero-title animate-on-scroll">记录你的<br>观影、阅读与笔记</h1>
|
||
<p class="hero-desc animate-on-scroll">一款简洁优雅的记录工具，帮助你整理生活中的每一份感动与思考。<br>支持观影记录、阅读管理和笔记整理，让回忆有迹可循。</p>
|
||
<div class="hero-actions animate-on-scroll">
|
||
<a href="#download" class="btn btn-primary">立即下载</a>
|
||
<router-link to="/guide" class="btn btn-secondary">了解更多</router-link>
|
||
</div>
|
||
<div class="hero-stats animate-on-scroll">
|
||
<div class="stat-item">
|
||
<span class="stat-number">WebDAV</span>
|
||
<span class="stat-label">云备份支持</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-number">无需注册</span>
|
||
<span class="stat-label">零门槛使用</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-number">本地存储</span>
|
||
<span class="stat-label">隐私安全</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hero-visual animate-on-scroll">
|
||
<div class="phone-mockup">
|
||
<div class="phone-screen">
|
||
<div class="mockup-header">
|
||
<span class="mockup-title">观影</span>
|
||
<span class="mockup-icon"></span>
|
||
</div>
|
||
<div class="mockup-tabs">
|
||
<span class="active">观影</span>
|
||
<span>阅读</span>
|
||
<span>笔记</span>
|
||
</div>
|
||
<div class="mockup-filters">
|
||
<span class="filter active">已看</span>
|
||
<span class="filter">在看</span>
|
||
<span class="filter">想看</span>
|
||
</div>
|
||
<div class="mockup-grid">
|
||
<div class="mockup-card">
|
||
<div class="card-image card-image-1"></div>
|
||
<div class="card-title">楚门的世界</div>
|
||
<div class="card-rating">★ 9.5</div>
|
||
</div>
|
||
<div class="mockup-card">
|
||
<div class="card-image card-image-2"></div>
|
||
<div class="card-title">我的三体</div>
|
||
<div class="card-rating">★ 9.3</div>
|
||
</div>
|
||
<div class="mockup-card">
|
||
<div class="card-image card-image-3"></div>
|
||
<div class="card-title">仙剑奇侠传</div>
|
||
<div class="card-rating">★ 9.2</div>
|
||
</div>
|
||
<div class="mockup-card">
|
||
<div class="card-image card-image-4"></div>
|
||
<div class="card-title">这个杀手不太冷</div>
|
||
<div class="card-rating">★ 9.7</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Features Preview -->
|
||
<section class="features-preview">
|
||
<div class="container">
|
||
<h2 class="section-title animate-on-scroll">核心功能</h2>
|
||
<p class="section-subtitle animate-on-scroll">三大模块，全面记录你的生活点滴</p>
|
||
<div class="features-grid">
|
||
<div class="feature-card animate-on-scroll">
|
||
<div class="feature-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<rect x="2" y="2" width="20" height="20" rx="2.18"/>
|
||
<line x1="7" y1="2" x2="7" y2="22"/>
|
||
<line x1="17" y1="2" x2="17" y2="22"/>
|
||
<line x1="2" y1="12" x2="22" y2="12"/>
|
||
<line x1="2" y1="7" x2="7" y2="7"/>
|
||
<line x1="2" y1="17" x2="7" y2="17"/>
|
||
<line x1="17" y1="17" x2="22" y2="17"/>
|
||
<line x1="17" y1="7" x2="22" y2="7"/>
|
||
</svg>
|
||
</div>
|
||
<h3>观影记录</h3>
|
||
<p>记录已看、在看、想看的电影，添加评分和观影笔记，建立自己的观影档案。</p>
|
||
</div>
|
||
<div class="feature-card animate-on-scroll">
|
||
<div class="feature-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
|
||
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
|
||
</svg>
|
||
</div>
|
||
<h3>阅读管理</h3>
|
||
<p>追踪阅读进度，记录已读、在读、准备读的书籍，写下读书心得。</p>
|
||
</div>
|
||
<div class="feature-card animate-on-scroll">
|
||
<div class="feature-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||
<polyline points="14 2 14 8 20 8"/>
|
||
<line x1="16" y1="13" x2="8" y2="13"/>
|
||
<line x1="16" y1="17" x2="8" y2="17"/>
|
||
<polyline points="10 9 9 9 8 9"/>
|
||
</svg>
|
||
</div>
|
||
<h3>笔记整理</h3>
|
||
<p>随时记录灵感和想法，支持标签分类，让知识井井有条。</p>
|
||
</div>
|
||
</div>
|
||
<div class="features-cta animate-on-scroll">
|
||
<router-link to="/features" class="btn btn-outline">查看全部功能</router-link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Highlights -->
|
||
<section class="highlights">
|
||
<div class="container">
|
||
<div class="highlight-row animate-on-scroll">
|
||
<div class="highlight-content">
|
||
<h3>简洁优雅的设计</h3>
|
||
<p>采用极简黑白灰配色，界面清爽无干扰。专注于内容本身，让记录成为一种享受。</p>
|
||
<ul class="highlight-list">
|
||
<li>黑白灰极简配色方案</li>
|
||
<li>扁平化设计风格</li>
|
||
<li>清晰的信息层级</li>
|
||
</ul>
|
||
</div>
|
||
<div class="highlight-visual">
|
||
<div class="visual-card">
|
||
<div class="visual-header">
|
||
<span>我的</span>
|
||
<span>⚙</span>
|
||
</div>
|
||
<div class="visual-profile">
|
||
<div class="avatar"></div>
|
||
<div class="info">
|
||
<div class="name">Mook</div>
|
||
<div class="bio">好运不会眷顾一无所有之人。</div>
|
||
</div>
|
||
</div>
|
||
<div class="visual-stats">
|
||
<div class="v-stat">
|
||
<div class="v-label">观影</div>
|
||
<div class="v-value">9<span>场</span></div>
|
||
</div>
|
||
<div class="v-stat">
|
||
<div class="v-label">阅读</div>
|
||
<div class="v-value">5<span>本</span></div>
|
||
</div>
|
||
<div class="v-stat">
|
||
<div class="v-label">笔记</div>
|
||
<div class="v-value">5<span>条</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="highlight-row reverse animate-on-scroll">
|
||
<div class="highlight-content">
|
||
<h3>数据安全可控</h3>
|
||
<p>数据本地存储，隐私完全掌控。支持本地备份和云备份，再也不怕数据丢失。</p>
|
||
<ul class="highlight-list">
|
||
<li>本地 SQLite 数据库存储</li>
|
||
<li>本地备份zip导出</li>
|
||
<li>WebDAV 云备份支持</li>
|
||
</ul>
|
||
</div>
|
||
<div class="highlight-visual">
|
||
<div class="visual-card dark">
|
||
<div class="backup-item">
|
||
<span class="backup-icon"></span>
|
||
<span>数据统计</span>
|
||
<span class="arrow">›</span>
|
||
</div>
|
||
<div class="backup-item">
|
||
<span class="backup-icon"></span>
|
||
<span>本地备份</span>
|
||
<span class="arrow">›</span>
|
||
</div>
|
||
<div class="backup-item">
|
||
<span class="backup-icon"></span>
|
||
<span>云备份</span>
|
||
<span class="arrow">›</span>
|
||
</div>
|
||
<div class="backup-item">
|
||
<span class="backup-icon"></span>
|
||
<span>回收站</span>
|
||
<span class="arrow">›</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Download Section -->
|
||
<section id="download" class="download">
|
||
<div class="container">
|
||
<h2 class="section-title animate-on-scroll">开始使用</h2>
|
||
<p class="section-subtitle animate-on-scroll">支持 Android 和 Windows 平台，iOS 版本正在开发中</p>
|
||
<div class="download-options">
|
||
<div class="download-card animate-on-scroll">
|
||
<div class="download-icon">
|
||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M17.523 15.3414c-.5511 0-.9993-.4486-.9993-.9997s.4482-.9993.9993-.9993c.5511 0 .9993.4482.9993.9993.0001.5511-.4482.9997-.9993.9997m-11.046 0c-.5511 0-.9993-.4486-.9993-.9997s.4482-.9993.9993-.9993c.5511 0 .9993.4482.9993.9993 0 .5511-.4482.9997-.9993.9997m11.4045-6.02l1.9973-3.4592a.416.416 0 0 0-.1521-.5676.416.416 0 0 0-.5676.1521l-2.0225 3.503C15.5902 8.4796 13.8533 8.208 12 8.208c-1.8533 0-3.5902.2716-5.1368.7621L4.8407 5.4671a.416.416 0 0 0-.5676-.1521.416.416 0 0 0-.1521.5676l1.9973 3.4592C2.6889 11.1867.3432 14.6589.3432 18.6617h23.3136c0-4.0028-2.3457-7.475-5.775-9.3403"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Android</h3>
|
||
<p>支持 Android 5.0 及以上版本</p>
|
||
<a href="https://mooknote.iletter.top/download/mooknote.apk" class="btn btn-primary">下载 APK</a>
|
||
</div>
|
||
<div class="download-card animate-on-scroll">
|
||
<div class="download-icon">
|
||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Windows</h3>
|
||
<p>解压后点击 mooknote.exe 即可使用</p>
|
||
<a href="https://mooknote.iletter.top/download/mooknote.rar" class="btn btn-primary">下载 RAR</a>
|
||
</div>
|
||
</div>
|
||
<div class="version-info animate-on-scroll">
|
||
<p>当前版本：{{ latestVersion }} | 更新日期：{{ latestDate }}</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'Home',
|
||
data() {
|
||
return {
|
||
latestVersion: 'v0.1.7',
|
||
latestDate: '2025年3月',
|
||
visibleSections: {
|
||
hero: false,
|
||
features: false,
|
||
highlights: false,
|
||
download: false
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
fetch('https://api.mooknote.iletter.top/api/changelog')
|
||
.then(res => res.json())
|
||
.then(data => {
|
||
if (data.items && data.items.length) {
|
||
const latest = data.items.reduce((max, item) =>
|
||
(item.sort || 0) > (max.sort || 0) ? item : max
|
||
)
|
||
this.latestVersion = latest.version
|
||
this.latestDate = latest.date
|
||
}
|
||
})
|
||
.catch(() => {})
|
||
|
||
// 初始化滚动动画
|
||
this.initScrollObserver()
|
||
},
|
||
methods: {
|
||
showDownloadTip() {
|
||
alert('APK 下载功能即将上线，敬请期待！')
|
||
},
|
||
initScrollObserver() {
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('is-visible')
|
||
}
|
||
})
|
||
}, { threshold: 0.1 })
|
||
|
||
// 观察所有需要动画的元素
|
||
this.$nextTick(() => {
|
||
const animatedElements = this.$el.querySelectorAll('.animate-on-scroll')
|
||
animatedElements.forEach(el => observer.observe(el))
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* Animation utilities */
|
||
.animate-on-scroll {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||
}
|
||
|
||
.animate-on-scroll.is-visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* Staggered animation delays */
|
||
.animate-on-scroll:nth-child(1) { transition-delay: 0.05s; }
|
||
.animate-on-scroll:nth-child(2) { transition-delay: 0.1s; }
|
||
.animate-on-scroll:nth-child(3) { transition-delay: 0.15s; }
|
||
.animate-on-scroll:nth-child(4) { transition-delay: 0.2s; }
|
||
.animate-on-scroll:nth-child(5) { transition-delay: 0.25s; }
|
||
.animate-on-scroll:nth-child(6) { transition-delay: 0.3s; }
|
||
|
||
/* Hero Section */
|
||
.hero {
|
||
min-height: calc(100vh - 64px);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 80px 24px;
|
||
background: linear-gradient(180deg, #FAFAFA 0%, #FFFFFF 100%);
|
||
}
|
||
|
||
.hero-content {
|
||
max-width: 560px;
|
||
text-align: center;
|
||
}
|
||
|
||
.hero-badge {
|
||
display: inline-block;
|
||
padding: 6px 14px;
|
||
background: var(--color-bg-secondary);
|
||
border-radius: 20px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: var(--color-text-secondary);
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: 56px;
|
||
font-weight: 700;
|
||
letter-spacing: -1px;
|
||
margin-bottom: 16px;
|
||
color: var(--color-text);
|
||
line-height: 1.15;
|
||
}
|
||
|
||
.hero-subtitle {
|
||
font-size: 24px;
|
||
font-weight: 500;
|
||
color: var(--color-text);
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.hero-desc {
|
||
font-size: 16px;
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.8;
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
.hero-actions {
|
||
display: flex;
|
||
gap: 16px;
|
||
justify-content: center;
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 12px 28px;
|
||
border-radius: 8px;
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
text-decoration: none;
|
||
transition: all 0.2s ease;
|
||
cursor: pointer;
|
||
border: none;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: var(--color-accent);
|
||
color: white;
|
||
box-shadow: 0 2px 8px rgba(26, 26, 26, 0.15);
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: #333333;
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 12px rgba(26, 26, 26, 0.2);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: var(--color-bg-secondary);
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: #EBEBEB;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.btn-outline {
|
||
background: transparent;
|
||
color: var(--color-text);
|
||
border: 1px solid var(--color-border);
|
||
}
|
||
|
||
.btn-outline:hover {
|
||
background: var(--color-bg-secondary);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.hero-stats {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 48px;
|
||
}
|
||
|
||
.stat-item {
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-number {
|
||
display: block;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
color: var(--color-text);
|
||
line-height: 1;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 13px;
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
/* Phone Mockup */
|
||
.hero-visual {
|
||
display: none;
|
||
}
|
||
|
||
.phone-mockup {
|
||
width: 280px;
|
||
height: 560px;
|
||
background: var(--color-text);
|
||
border-radius: 36px;
|
||
padding: 12px;
|
||
box-shadow: 0 25px 80px rgba(0,0,0,0.15);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.phone-mockup:hover {
|
||
transform: translateY(-8px) rotate(1deg);
|
||
}
|
||
|
||
.phone-screen {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: white;
|
||
border-radius: 24px;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.mockup-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 16px 20px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.mockup-tabs {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 24px;
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid var(--color-border);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.mockup-tabs .active {
|
||
font-weight: 600;
|
||
position: relative;
|
||
}
|
||
|
||
.mockup-tabs .active::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -9px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 20px;
|
||
height: 2px;
|
||
background: var(--color-text);
|
||
}
|
||
|
||
.mockup-tabs span:not(.active) {
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.mockup-filters {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
padding: 16px;
|
||
}
|
||
|
||
.filter {
|
||
padding: 6px 14px;
|
||
border-radius: 16px;
|
||
font-size: 12px;
|
||
background: var(--color-bg-secondary);
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.filter.active {
|
||
background: var(--color-text);
|
||
color: white;
|
||
}
|
||
|
||
.mockup-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 12px;
|
||
padding: 0 16px 16px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.mockup-card {
|
||
background: var(--color-bg-secondary);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.mockup-card:hover {
|
||
transform: scale(1.03);
|
||
}
|
||
|
||
.card-image {
|
||
aspect-ratio: 3/4;
|
||
background-size: cover;
|
||
background-position: center;
|
||
}
|
||
|
||
.card-image-1 {
|
||
background-image: url('~@/assets/img/chumendeshijie.jpg');
|
||
}
|
||
|
||
.card-image-2 {
|
||
background-image: url('~@/assets/img/wodesanti.jpg');
|
||
}
|
||
|
||
.card-image-3 {
|
||
background-image: url('~@/assets/img/xianjianqixiazhuan.jpg');
|
||
}
|
||
|
||
.card-image-4 {
|
||
background-image: url('~@/assets/img/zhegeshashoubutaileng.jpg');
|
||
}
|
||
|
||
.card-title {
|
||
padding: 8px;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.card-rating {
|
||
padding: 0 8px 8px;
|
||
font-size: 10px;
|
||
color: #FFB800;
|
||
}
|
||
|
||
/* Features Preview */
|
||
.features-preview {
|
||
padding: 100px 24px;
|
||
background: white;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 36px;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
margin-bottom: 12px;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.section-subtitle {
|
||
font-size: 16px;
|
||
color: var(--color-text-secondary);
|
||
text-align: center;
|
||
margin-bottom: 60px;
|
||
}
|
||
|
||
.features-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 32px;
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
.feature-card {
|
||
padding: 40px 32px;
|
||
background: var(--color-bg-secondary);
|
||
border-radius: 16px;
|
||
text-align: center;
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
|
||
.feature-card:hover {
|
||
transform: translateY(-6px);
|
||
box-shadow: 0 12px 40px rgba(0,0,0,0.08);
|
||
}
|
||
|
||
.feature-icon {
|
||
width: 56px;
|
||
height: 56px;
|
||
margin: 0 auto 24px;
|
||
background: white;
|
||
border-radius: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--color-text);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.feature-card:hover .feature-icon {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.feature-icon svg {
|
||
width: 28px;
|
||
height: 28px;
|
||
}
|
||
|
||
.feature-card h3 {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
margin-bottom: 12px;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.feature-card p {
|
||
font-size: 15px;
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.features-cta {
|
||
text-align: center;
|
||
}
|
||
|
||
/* Highlights */
|
||
.highlights {
|
||
padding: 100px 24px;
|
||
background: var(--color-bg-secondary);
|
||
}
|
||
|
||
.highlight-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 80px;
|
||
margin-bottom: 100px;
|
||
}
|
||
|
||
.highlight-row:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.highlight-row.reverse {
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.highlight-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.highlight-content h3 {
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
margin-bottom: 20px;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.highlight-content p {
|
||
font-size: 16px;
|
||
color: var(--color-text-secondary);
|
||
line-height: 1.8;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.highlight-list {
|
||
list-style: none;
|
||
}
|
||
|
||
.highlight-list li {
|
||
padding: 10px 0;
|
||
padding-left: 28px;
|
||
position: relative;
|
||
font-size: 15px;
|
||
color: var(--color-text-secondary);
|
||
}
|
||
|
||
.highlight-list li::before {
|
||
content: '✓';
|
||
position: absolute;
|
||
left: 0;
|
||
color: var(--color-text);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.highlight-visual {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.visual-card {
|
||
width: 280px;
|
||
background: white;
|
||
border-radius: 16px;
|
||
padding: 24px;
|
||
box-shadow: 0 4px 24px rgba(0,0,0,0.06);
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
|
||
.visual-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.visual-card.dark {
|
||
background: var(--color-text);
|
||
color: white;
|
||
}
|
||
|
||
.visual-card.dark:hover {
|
||
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.visual-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.visual-profile {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.avatar {
|
||
width: 56px;
|
||
height: 56px;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
border-radius: 50%;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.visual-card:hover .avatar {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.info .name {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.info .bio {
|
||
font-size: 13px;
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.visual-stats {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-top: 20px;
|
||
border-top: 1px solid var(--color-border);
|
||
}
|
||
|
||
.v-stat {
|
||
text-align: center;
|
||
}
|
||
|
||
.v-label {
|
||
font-size: 12px;
|
||
color: var(--color-text-muted);
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.v-value {
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.v-value span {
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
color: var(--color-text-muted);
|
||
margin-left: 2px;
|
||
}
|
||
|
||
.backup-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 16px 0;
|
||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||
font-size: 15px;
|
||
transition: color 0.2s ease;
|
||
}
|
||
|
||
.backup-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.backup-item:hover {
|
||
color: rgba(255,255,255,0.8);
|
||
}
|
||
|
||
.backup-icon {
|
||
margin-right: 12px;
|
||
}
|
||
|
||
.arrow {
|
||
margin-left: auto;
|
||
color: rgba(255,255,255,0.5);
|
||
transition: transform 0.2s ease, color 0.2s ease;
|
||
}
|
||
|
||
.backup-item:hover .arrow {
|
||
transform: translateX(4px);
|
||
color: rgba(255,255,255,0.8);
|
||
}
|
||
|
||
/* Download Section */
|
||
.download {
|
||
padding: 100px 24px;
|
||
background: white;
|
||
text-align: center;
|
||
}
|
||
|
||
.download-options {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 32px;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.download-card {
|
||
padding: 48px 40px;
|
||
background: var(--color-bg-secondary);
|
||
border-radius: 16px;
|
||
text-align: center;
|
||
min-width: 280px;
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
|
||
.download-card:hover {
|
||
transform: translateY(-6px);
|
||
box-shadow: 0 12px 40px rgba(0,0,0,0.08);
|
||
}
|
||
|
||
.download-icon {
|
||
width: 64px;
|
||
height: 64px;
|
||
margin: 0 auto 24px;
|
||
background: white;
|
||
border-radius: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.download-card:hover .download-icon {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.download-icon svg {
|
||
width: 32px;
|
||
height: 32px;
|
||
}
|
||
|
||
.download-card h3 {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.download-card p {
|
||
font-size: 14px;
|
||
color: var(--color-text-secondary);
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.version-info {
|
||
font-size: 14px;
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (min-width: 1024px) {
|
||
.hero {
|
||
gap: 180px;
|
||
}
|
||
|
||
.hero-content {
|
||
text-align: left;
|
||
}
|
||
|
||
.hero-actions {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.hero-stats {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.hero-visual {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.hero-title {
|
||
font-size: 40px;
|
||
}
|
||
|
||
.hero-subtitle {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.hero-actions {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.hero-stats {
|
||
gap: 32px;
|
||
}
|
||
|
||
.highlight-row,
|
||
.highlight-row.reverse {
|
||
flex-direction: column;
|
||
gap: 40px;
|
||
}
|
||
|
||
.highlight-content h3 {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.download-options {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.animate-on-scroll {
|
||
opacity: 1;
|
||
transform: none;
|
||
transition: none;
|
||
}
|
||
}
|
||
</style>
|