53e0065e3e
配置 SSOT（TOML + .env） 统一错误契约 Auth 与事务边界 Redis / Celery 可靠性:业务 Redis（DB/0）与 Celery broker/backend（DB/1）显式拆分；连接池、sync client 可观测性（OpenTelemetry + LGTM）
1363 lines
44 KiB
HTML
1363 lines
44 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>岁月留书 - 让每一段人生故事都被温柔记录</title>
|
|
<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=Noto+Sans+SC:wght@300;400;500;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--deep-purple: #200028;
|
|
--slate-purple: #8C8EA3;
|
|
--medium-purple: #A177A6;
|
|
--lavender: #CEB0DA;
|
|
--blush: #DBBABA;
|
|
--cream: #FAF7F8;
|
|
--white: #FFFFFF;
|
|
--font-serif: 'Noto Serif SC', 'PingFang SC', 'Hiragino Sans GB', serif;
|
|
--font-sans: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-sans);
|
|
color: var(--deep-purple);
|
|
background: var(--cream);
|
|
line-height: 1.6;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* ========== Navigation ========== */
|
|
.navbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
background: rgba(250, 247, 248, 0.85);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border-bottom: 1px solid rgba(32, 0, 40, 0.06);
|
|
transition: box-shadow 0.3s ease;
|
|
}
|
|
|
|
.navbar.scrolled {
|
|
box-shadow: 0 2px 20px rgba(32, 0, 40, 0.08);
|
|
}
|
|
|
|
.nav-inner {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 24px;
|
|
height: 72px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.nav-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav-logo-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 12px;
|
|
background: linear-gradient(135deg, var(--medium-purple), var(--lavender));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--white);
|
|
font-size: 18px;
|
|
font-family: var(--font-serif);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.nav-logo-text {
|
|
font-family: var(--font-serif);
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
color: var(--deep-purple);
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 32px;
|
|
}
|
|
|
|
.nav-links a {
|
|
text-decoration: none;
|
|
color: var(--slate-purple);
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
color: var(--medium-purple);
|
|
}
|
|
|
|
.nav-download-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 10px 24px;
|
|
background: var(--medium-purple);
|
|
color: var(--white) !important;
|
|
border-radius: 24px;
|
|
font-weight: 500 !important;
|
|
font-size: 14px !important;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 12px rgba(161, 119, 166, 0.3);
|
|
}
|
|
|
|
.nav-download-btn:hover {
|
|
background: #8f6694;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 6px 20px rgba(161, 119, 166, 0.4);
|
|
color: var(--white) !important;
|
|
}
|
|
|
|
.nav-menu-btn {
|
|
display: none;
|
|
width: 40px;
|
|
height: 40px;
|
|
border: none;
|
|
background: none;
|
|
cursor: pointer;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.nav-menu-btn span {
|
|
display: block;
|
|
width: 22px;
|
|
height: 2px;
|
|
background: var(--deep-purple);
|
|
border-radius: 1px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* ========== Hero Section ========== */
|
|
.hero {
|
|
padding: 160px 24px 100px;
|
|
text-align: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -200px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 800px;
|
|
height: 800px;
|
|
background: radial-gradient(circle, rgba(206, 176, 218, 0.3) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hero-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 20px;
|
|
background: var(--white);
|
|
border-radius: 24px;
|
|
font-size: 14px;
|
|
color: var(--medium-purple);
|
|
margin-bottom: 32px;
|
|
box-shadow: 0 2px 12px rgba(32, 0, 40, 0.06);
|
|
}
|
|
|
|
.hero-badge-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--medium-purple);
|
|
animation: pulse-dot 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse-dot {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.4; }
|
|
}
|
|
|
|
.hero h1 {
|
|
font-family: var(--font-serif);
|
|
font-size: 56px;
|
|
font-weight: 700;
|
|
letter-spacing: 4px;
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 22px;
|
|
color: var(--slate-purple);
|
|
margin-bottom: 16px;
|
|
font-weight: 300;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.hero-desc {
|
|
font-size: 16px;
|
|
color: var(--slate-purple);
|
|
max-width: 560px;
|
|
margin: 0 auto 48px;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.hero-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn-primary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 16px 36px;
|
|
background: var(--medium-purple);
|
|
color: var(--white);
|
|
border: none;
|
|
border-radius: 32px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 8px 24px rgba(161, 119, 166, 0.3);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #8f6694;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 12px 32px rgba(161, 119, 166, 0.4);
|
|
}
|
|
|
|
.btn-secondary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 16px 36px;
|
|
background: var(--white);
|
|
color: var(--deep-purple);
|
|
border: 1.5px solid rgba(32, 0, 40, 0.1);
|
|
border-radius: 32px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
border-color: var(--medium-purple);
|
|
color: var(--medium-purple);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.hero-phone {
|
|
margin-top: 80px;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.phone-mockup {
|
|
width: 300px;
|
|
height: 620px;
|
|
background: var(--white);
|
|
border-radius: 40px;
|
|
box-shadow:
|
|
0 0 0 8px #1a1a1a,
|
|
0 0 0 10px #3a3a3a,
|
|
0 40px 80px -20px rgba(32, 0, 40, 0.25);
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.phone-notch {
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 100px;
|
|
height: 28px;
|
|
background: #000;
|
|
border-radius: 20px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.phone-screen {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--cream);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Chat header */
|
|
.chat-header {
|
|
background: var(--medium-purple);
|
|
padding: 32px 16px 10px;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.chat-header-title {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: var(--white);
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.chat-header-status {
|
|
font-size: 10px;
|
|
color: rgba(255,255,255,0.8);
|
|
margin-top: 2px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.chat-header-status::before {
|
|
content: '';
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: #6f6;
|
|
}
|
|
|
|
/* Chat messages */
|
|
.chat-messages {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
padding: 10px 10px 6px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.chat-msg {
|
|
display: flex;
|
|
gap: 7px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.chat-msg.user {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.chat-avatar {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.chat-avatar.ai {
|
|
background: var(--lavender);
|
|
}
|
|
|
|
.chat-avatar.ai img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.chat-avatar.user {
|
|
background: var(--blush);
|
|
}
|
|
|
|
.chat-avatar svg {
|
|
width: 15px;
|
|
height: 15px;
|
|
stroke: var(--deep-purple);
|
|
fill: none;
|
|
stroke-width: 2;
|
|
}
|
|
|
|
.chat-bubble {
|
|
max-width: 80%;
|
|
padding: 9px 11px;
|
|
border-radius: 14px;
|
|
font-size: 11px;
|
|
line-height: 1.6;
|
|
text-align: left;
|
|
}
|
|
|
|
.chat-msg:not(.user) .chat-bubble {
|
|
background: var(--white);
|
|
color: var(--deep-purple);
|
|
border-bottom-left-radius: 4px;
|
|
box-shadow: 0 1px 4px rgba(32,0,40,0.06);
|
|
}
|
|
|
|
.chat-msg.user .chat-bubble {
|
|
background: var(--medium-purple);
|
|
color: var(--white);
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
|
|
/* Chat input bar */
|
|
.chat-input-bar {
|
|
padding: 8px 10px 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
border-top: 1px solid rgba(32,0,40,0.06);
|
|
background: var(--white);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.chat-input-kbd {
|
|
width: 22px;
|
|
height: 22px;
|
|
stroke: var(--medium-purple);
|
|
fill: none;
|
|
stroke-width: 1.5;
|
|
flex-shrink: 0;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.chat-input-voice {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
background: var(--cream);
|
|
border-radius: 20px;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.chat-input-voice svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
stroke: var(--slate-purple);
|
|
fill: none;
|
|
stroke-width: 2;
|
|
}
|
|
|
|
.chat-input-voice span {
|
|
font-size: 12px;
|
|
color: var(--slate-purple);
|
|
}
|
|
|
|
/* ========== Features Section ========== */
|
|
.section {
|
|
padding: 100px 24px;
|
|
}
|
|
|
|
.section-header {
|
|
text-align: center;
|
|
margin-bottom: 64px;
|
|
}
|
|
|
|
.section-tag {
|
|
display: inline-block;
|
|
font-size: 13px;
|
|
color: var(--medium-purple);
|
|
font-weight: 500;
|
|
letter-spacing: 2px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.section-title {
|
|
font-family: var(--font-serif);
|
|
font-size: 36px;
|
|
font-weight: 600;
|
|
letter-spacing: 2px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.section-desc {
|
|
font-size: 16px;
|
|
color: var(--slate-purple);
|
|
max-width: 480px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.features-grid {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 24px;
|
|
}
|
|
|
|
.feature-card {
|
|
background: var(--white);
|
|
border-radius: 24px;
|
|
padding: 36px 28px;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 2px 12px rgba(32, 0, 40, 0.04);
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 12px 32px rgba(32, 0, 40, 0.08);
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 16px;
|
|
background: var(--lavender);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.feature-icon svg {
|
|
width: 28px;
|
|
height: 28px;
|
|
stroke: var(--deep-purple);
|
|
fill: none;
|
|
stroke-width: 1.8;
|
|
}
|
|
|
|
.feature-card h3 {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.feature-card p {
|
|
font-size: 14px;
|
|
color: var(--slate-purple);
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* ========== How It Works ========== */
|
|
.how-it-works {
|
|
background: var(--white);
|
|
}
|
|
|
|
.steps-container {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
}
|
|
|
|
.steps-container::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 40px;
|
|
left: 80px;
|
|
right: 80px;
|
|
height: 2px;
|
|
background: linear-gradient(to right, var(--lavender), var(--medium-purple), var(--lavender));
|
|
}
|
|
|
|
.step {
|
|
text-align: center;
|
|
position: relative;
|
|
flex: 1;
|
|
}
|
|
|
|
.step-number {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
background: var(--cream);
|
|
border: 3px solid var(--lavender);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 20px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.step-number svg {
|
|
width: 32px;
|
|
height: 32px;
|
|
stroke: var(--medium-purple);
|
|
fill: none;
|
|
stroke-width: 1.8;
|
|
}
|
|
|
|
.step h3 {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.step p {
|
|
font-size: 14px;
|
|
color: var(--slate-purple);
|
|
max-width: 200px;
|
|
margin: 0 auto;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ========== Pricing Section ========== */
|
|
.pricing-grid {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 24px;
|
|
align-items: start;
|
|
}
|
|
|
|
.pricing-card {
|
|
background: var(--white);
|
|
border-radius: 24px;
|
|
padding: 36px 28px;
|
|
text-align: center;
|
|
position: relative;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 2px 12px rgba(32, 0, 40, 0.04);
|
|
border: 2px solid transparent;
|
|
}
|
|
|
|
.pricing-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 12px 32px rgba(32, 0, 40, 0.08);
|
|
}
|
|
|
|
.pricing-card.popular {
|
|
border-color: var(--medium-purple);
|
|
}
|
|
|
|
.pricing-badge {
|
|
position: absolute;
|
|
top: -12px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: var(--medium-purple);
|
|
color: var(--white);
|
|
padding: 4px 16px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.pricing-name {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.pricing-desc {
|
|
font-size: 14px;
|
|
color: var(--slate-purple);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.pricing-price {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.pricing-price .currency {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
vertical-align: super;
|
|
}
|
|
|
|
.pricing-price .amount {
|
|
font-size: 48px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
}
|
|
|
|
.pricing-price .period {
|
|
font-size: 14px;
|
|
color: var(--slate-purple);
|
|
display: block;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.pricing-features {
|
|
list-style: none;
|
|
text-align: left;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.pricing-features li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 0;
|
|
font-size: 14px;
|
|
color: var(--deep-purple);
|
|
}
|
|
|
|
.pricing-features li svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
stroke: var(--medium-purple);
|
|
fill: none;
|
|
stroke-width: 2;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.pricing-btn {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 14px;
|
|
border-radius: 16px;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
transition: all 0.3s ease;
|
|
border: none;
|
|
}
|
|
|
|
.pricing-btn.primary {
|
|
background: var(--medium-purple);
|
|
color: var(--white);
|
|
box-shadow: 0 4px 12px rgba(161, 119, 166, 0.3);
|
|
}
|
|
|
|
.pricing-btn.primary:hover {
|
|
background: #8f6694;
|
|
}
|
|
|
|
.pricing-btn.outline {
|
|
background: var(--cream);
|
|
color: var(--deep-purple);
|
|
border: 1.5px solid rgba(32, 0, 40, 0.1);
|
|
}
|
|
|
|
.pricing-btn.outline:hover {
|
|
border-color: var(--medium-purple);
|
|
color: var(--medium-purple);
|
|
}
|
|
|
|
/* ========== Download Section ========== */
|
|
.download-section {
|
|
background: var(--white);
|
|
text-align: center;
|
|
}
|
|
|
|
.download-buttons {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
flex-wrap: wrap;
|
|
margin-top: 48px;
|
|
}
|
|
|
|
.download-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 16px 32px;
|
|
background: var(--deep-purple);
|
|
color: var(--white);
|
|
border-radius: 16px;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
min-width: 220px;
|
|
}
|
|
|
|
.download-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 24px rgba(32, 0, 40, 0.2);
|
|
}
|
|
|
|
.download-btn svg {
|
|
width: 32px;
|
|
height: 32px;
|
|
fill: var(--white);
|
|
}
|
|
|
|
.download-btn-text {
|
|
text-align: left;
|
|
}
|
|
|
|
.download-btn-text .small {
|
|
font-size: 11px;
|
|
opacity: 0.7;
|
|
display: block;
|
|
}
|
|
|
|
.download-btn-text .big {
|
|
font-size: 17px;
|
|
font-weight: 600;
|
|
display: block;
|
|
}
|
|
|
|
/* ========== Footer ========== */
|
|
.footer {
|
|
background: var(--deep-purple);
|
|
color: rgba(255, 255, 255, 0.7);
|
|
padding: 64px 24px 32px;
|
|
}
|
|
|
|
.footer-inner {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 48px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.footer-brand {
|
|
flex: 1;
|
|
min-width: 240px;
|
|
}
|
|
|
|
.footer-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.footer-logo-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 10px;
|
|
background: linear-gradient(135deg, var(--medium-purple), var(--lavender));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--white);
|
|
font-size: 16px;
|
|
font-family: var(--font-serif);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.footer-logo-text {
|
|
font-family: var(--font-serif);
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: var(--white);
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.footer-brand p {
|
|
font-size: 14px;
|
|
line-height: 1.7;
|
|
max-width: 280px;
|
|
}
|
|
|
|
.footer-col {
|
|
min-width: 120px;
|
|
}
|
|
|
|
.footer-col h4 {
|
|
color: var(--white);
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.footer-col a {
|
|
display: block;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
padding: 4px 0;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.footer-col a:hover {
|
|
color: var(--lavender);
|
|
}
|
|
|
|
.footer-bottom {
|
|
max-width: 1000px;
|
|
margin: 48px auto 0;
|
|
padding-top: 24px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
text-align: center;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* ========== Responsive ========== */
|
|
@media (max-width: 768px) {
|
|
.nav-links {
|
|
display: none;
|
|
}
|
|
|
|
.nav-menu-btn {
|
|
display: flex;
|
|
}
|
|
|
|
.hero {
|
|
padding: 120px 20px 60px;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 36px;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.features-grid {
|
|
grid-template-columns: 1fr;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.steps-container {
|
|
flex-direction: column;
|
|
gap: 40px;
|
|
}
|
|
|
|
.steps-container::before {
|
|
display: none;
|
|
}
|
|
|
|
.pricing-grid {
|
|
grid-template-columns: 1fr;
|
|
max-width: 400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.phone-mockup {
|
|
width: 240px;
|
|
height: 480px;
|
|
}
|
|
|
|
.section {
|
|
padding: 64px 20px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 28px;
|
|
}
|
|
|
|
.hero-actions {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.download-buttons {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.footer-inner {
|
|
flex-direction: column;
|
|
gap: 32px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1024px) and (min-width: 769px) {
|
|
.features-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.pricing-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.pricing-card:last-child {
|
|
grid-column: 1 / -1;
|
|
max-width: 400px;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="navbar" id="navbar">
|
|
<div class="nav-inner">
|
|
<a href="#" class="nav-logo">
|
|
<div class="nav-logo-icon">书</div>
|
|
<span class="nav-logo-text">岁月留书</span>
|
|
</a>
|
|
<div class="nav-links">
|
|
<a href="#features">功能介绍</a>
|
|
<a href="#how-it-works">使用方式</a>
|
|
<a href="#pricing">订阅方案</a>
|
|
<a href="#download" class="nav-download-btn">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
|
|
下载应用
|
|
</a>
|
|
</div>
|
|
<button class="nav-menu-btn" id="menuBtn" onclick="document.querySelector('.nav-links').style.display = this.classList.toggle('open') ? 'none' : 'none'">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero">
|
|
<div class="hero-badge">
|
|
<span class="hero-badge-dot"></span>
|
|
AI 驱动的智能回忆录
|
|
</div>
|
|
<h1>岁月留书</h1>
|
|
<p class="hero-subtitle">让每一段人生故事都被温柔记录</p>
|
|
<p class="hero-desc">只需和 AI 聊天，就能将您的人生经历自动整理成一本精美的回忆录。无需动笔，只需倾诉，岁月留书为您温柔执笔。</p>
|
|
<div class="hero-actions">
|
|
<a href="#download" class="btn-primary">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
|
|
立即下载
|
|
</a>
|
|
<a href="#features" class="btn-secondary">了解更多</a>
|
|
</div>
|
|
|
|
<!-- Phone Mockup -->
|
|
<div class="hero-phone">
|
|
<div class="phone-mockup">
|
|
<div class="phone-notch"></div>
|
|
<div class="phone-screen">
|
|
<!-- Chat Header -->
|
|
<div class="chat-header">
|
|
<div class="chat-header-title">岁月知己</div>
|
|
<div class="chat-header-status">在线</div>
|
|
</div>
|
|
<!-- Chat Messages -->
|
|
<div class="chat-messages">
|
|
<div class="chat-msg">
|
|
<div class="chat-avatar ai">
|
|
<img src="/static/avatar_assistant.png" alt="岁月知己">
|
|
</div>
|
|
<div class="chat-bubble">
|
|
我小时候在南方一个小镇长大，家门口有条石板路，下雨天踩上去会发出“嗒嗒”的清脆声。<br>
|
|
最记得夏天的傍晚，外婆总在巷口摇着蒲扇等我放学。
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chat-msg user">
|
|
<div class="chat-avatar user">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2M12 11a4 4 0 100-8 4 4 0 000 8z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="chat-bubble">
|
|
我生在北方，冬天经常下雪。我记得小时候最喜欢在雪地里打雪仗，堆雪人。
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chat-msg">
|
|
<div class="chat-avatar ai">
|
|
<img src="/static/avatar_assistant.png" alt="岁月知己">
|
|
</div>
|
|
<div class="chat-bubble">
|
|
听你这样说，我仿佛能看到那片白茫茫的雪地。<br>
|
|
那时候的冬天，是冷得发亮的那种吗？
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chat-msg user">
|
|
<div class="chat-avatar user">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2M12 11a4 4 0 100-8 4 4 0 000 8z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="chat-bubble">
|
|
是啊，很冷，但也很开心。
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chat-msg">
|
|
<div class="chat-avatar ai">
|
|
<img src="/static/avatar_assistant.png" alt="岁月知己">
|
|
</div>
|
|
<div class="chat-bubble">
|
|
原来如此。<br>
|
|
有些快乐，往往发生在最简单的时候。<br><br>
|
|
除了童年，你愿不愿意聊聊后来的人生？<br>
|
|
比如第一次离开家乡，或者开始工作的那段日子。
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Chat Input -->
|
|
<div class="chat-input-bar">
|
|
<svg class="chat-input-kbd" viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="16" rx="2" ry="2"/><path d="M6 8h.01M10 8h.01M14 8h.01M18 8h.01M6 12h.01M10 12h.01M14 12h.01M18 12h.01M8 16h8"/></svg>
|
|
<div class="chat-input-voice">
|
|
<svg viewBox="0 0 24 24"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2M12 19v4M8 23h8"/></svg>
|
|
<span>按住说话</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<section class="section" id="features">
|
|
<div class="section-header">
|
|
<div class="section-tag">核心功能</div>
|
|
<h2 class="section-title">用声音书写人生</h2>
|
|
<p class="section-desc">岁月留书将前沿 AI 技术与温暖的人文关怀相结合，让记录回忆变得前所未有的简单</p>
|
|
</div>
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2M12 19v4M8 23h8"/></svg>
|
|
</div>
|
|
<h3>实时语音对话</h3>
|
|
<p>像跟老朋友聊天一样，自然地讲述您的故事。岁月知己会认真倾听，适时引导，帮您回忆更多珍贵细节。</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01"/></svg>
|
|
</div>
|
|
<h3>智能引导访谈</h3>
|
|
<p>岁月知己根据传记学结构，从童年、求学、事业到家庭，系统而温柔地引导您回顾人生每一个重要阶段。</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg>
|
|
</div>
|
|
<h3>自动整理成章</h3>
|
|
<p>您的口述内容会被自动整理成优美的书面文字，按照回忆录章节结构编排，无需手动排版。</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24"><path d="M4 19.5A2.5 2.5 0 016.5 17H20M4 19.5A2.5 2.5 0 004 14.5V5a2 2 0 012-2h14v16.5"/></svg>
|
|
</div>
|
|
<h3>精美回忆录</h3>
|
|
<p>自动生成结构完整的回忆录，包含童年家庭、求学时光、工作事业、爱情婚姻等章节，随时阅读。</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>
|
|
</div>
|
|
<h3>PDF 导出</h3>
|
|
<p>一键将回忆录导出为精美排版的 PDF 文档，可以打印装订成册，作为珍贵的家族传承礼物。</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
|
|
</div>
|
|
<h3>隐私安全</h3>
|
|
<p>您的人生故事是最私密的财富。我们采用端到端加密和安全存储，确保您的回忆只属于您。</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- How It Works -->
|
|
<section class="section how-it-works" id="how-it-works">
|
|
<div class="section-header">
|
|
<div class="section-tag">使用流程</div>
|
|
<h2 class="section-title">三步开启您的回忆之旅</h2>
|
|
<p class="section-desc">无需任何技术基础，只需三步，即可拥有属于自己的人生回忆录</p>
|
|
</div>
|
|
<div class="steps-container">
|
|
<div class="step">
|
|
<div class="step-number">
|
|
<svg viewBox="0 0 24 24"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2M12 19v4M8 23h8"/></svg>
|
|
</div>
|
|
<h3>开口聊天</h3>
|
|
<p>打开应用，点击开始聊天，像和朋友闲聊一样讲述您的故事</p>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-number">
|
|
<svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg>
|
|
</div>
|
|
<h3>自动整理</h3>
|
|
<p>岁月知己将您的口述内容自动转化为优美文字，整理成册</p>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-number">
|
|
<svg viewBox="0 0 24 24"><path d="M4 19.5A2.5 2.5 0 016.5 17H20M4 19.5A2.5 2.5 0 004 14.5V5a2 2 0 012-2h14v16.5"/></svg>
|
|
</div>
|
|
<h3>阅读分享</h3>
|
|
<p>随时阅读您的回忆录，导出 PDF 分享给家人朋友</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pricing Section -->
|
|
<section class="section" id="pricing">
|
|
<div class="section-header">
|
|
<div class="section-tag">订阅方案</div>
|
|
<h2 class="section-title">选择适合您的方案</h2>
|
|
<p class="section-desc">免费开始体验，随时升级获得更多对话轮次</p>
|
|
</div>
|
|
<div class="pricing-grid">
|
|
<div class="pricing-card">
|
|
<div class="pricing-name">免费体验版</div>
|
|
<div class="pricing-desc">初次体验回忆录创作</div>
|
|
<div class="pricing-price">
|
|
<span class="currency">¥</span><span class="amount">0</span>
|
|
<span class="period">永久免费</span>
|
|
</div>
|
|
<ul class="pricing-features">
|
|
<li>
|
|
<svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>
|
|
500 轮对话
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>
|
|
完整回忆录生成
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>
|
|
无限章节
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>
|
|
PDF 导出
|
|
</li>
|
|
</ul>
|
|
<a href="#download" class="pricing-btn outline">免费开始</a>
|
|
</div>
|
|
<div class="pricing-card popular">
|
|
<div class="pricing-badge">推荐</div>
|
|
<div class="pricing-name">Pro 版</div>
|
|
<div class="pricing-desc">深度记录您的人生故事</div>
|
|
<div class="pricing-price">
|
|
<span class="currency">¥</span><span class="amount">88</span>
|
|
<span class="period">一次性购买</span>
|
|
</div>
|
|
<ul class="pricing-features">
|
|
<li>
|
|
<svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>
|
|
2000 轮对话
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>
|
|
完整回忆录生成
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>
|
|
无限章节
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>
|
|
PDF 导出
|
|
</li>
|
|
</ul>
|
|
<a href="#download" class="pricing-btn primary">立即购买</a>
|
|
</div>
|
|
<div class="pricing-card">
|
|
<div class="pricing-name">Pro+ 版</div>
|
|
<div class="pricing-desc">长期深度创作回忆录</div>
|
|
<div class="pricing-price">
|
|
<span class="currency">¥</span><span class="amount">288</span>
|
|
<span class="period">一次性购买</span>
|
|
</div>
|
|
<ul class="pricing-features">
|
|
<li>
|
|
<svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>
|
|
10000 轮对话
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>
|
|
完整回忆录生成
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>
|
|
无限章节
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>
|
|
PDF 导出
|
|
</li>
|
|
<li>
|
|
<svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>
|
|
长期深度创作
|
|
</li>
|
|
</ul>
|
|
<a href="#download" class="pricing-btn outline">立即购买</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Download Section -->
|
|
<section class="section download-section" id="download">
|
|
<div class="section-header">
|
|
<div class="section-tag">立即下载</div>
|
|
<h2 class="section-title">开始记录您的人生故事</h2>
|
|
<p class="section-desc">下载岁月留书，让 AI 帮您将珍贵回忆化为永恒文字</p>
|
|
</div>
|
|
<div class="download-buttons">
|
|
<a href="#" class="download-btn">
|
|
<svg viewBox="0 0 24 24"><path d="M17.523 2.287a.668.668 0 00-.79.106c-1.04 1.04-1.564 2.416-1.564 3.95 0 .564.09 1.13.26 1.7a6.14 6.14 0 01-1.952-.844A8.16 8.16 0 0112 6.074a8.16 8.16 0 01-1.477 1.125 6.14 6.14 0 01-1.952.844c.17-.57.26-1.136.26-1.7 0-1.534-.524-2.91-1.564-3.95a.668.668 0 00-1.118.268c-.477 1.43-.188 3.02.716 4.23a.339.339 0 01-.294.536c-1.45-.07-2.755-.68-3.82-1.746a.668.668 0 00-1.093.322 6.72 6.72 0 00.52 4.71c.5.97 1.222 1.8 2.15 2.418a.339.339 0 01-.06.59 5.07 5.07 0 01-1.564.377.668.668 0 00-.472 1.06c1.32 1.87 3.262 2.99 5.456 3.204v3.97c0 .368.298.668.668.668h4.688a.668.668 0 00.668-.668v-3.97c2.194-.213 4.136-1.334 5.456-3.204a.668.668 0 00-.472-1.06 5.07 5.07 0 01-1.564-.378.339.339 0 01-.06-.59 6.9 6.9 0 002.15-2.417 6.72 6.72 0 00.52-4.71.668.668 0 00-1.094-.323c-1.064 1.065-2.37 1.676-3.82 1.746a.339.339 0 01-.293-.536c.904-1.21 1.193-2.8.716-4.23a.668.668 0 00-.328-.374z"/></svg>
|
|
<div class="download-btn-text">
|
|
<span class="small">Android 下载</span>
|
|
<span class="big">安卓版下载</span>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="download-btn" style="background: var(--medium-purple)">
|
|
<svg viewBox="0 0 24 24"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
|
|
<div class="download-btn-text">
|
|
<span class="small">iOS 下载</span>
|
|
<span class="big">App Store</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="footer-inner">
|
|
<div class="footer-brand">
|
|
<div class="footer-logo">
|
|
<div class="footer-logo-icon">书</div>
|
|
<span class="footer-logo-text">岁月留书</span>
|
|
</div>
|
|
<p>让每一段人生故事都被温柔记录。岁月留书是上海华嘎科技有限公司旗下的智能回忆录生成平台。</p>
|
|
</div>
|
|
<div class="footer-col">
|
|
<h4>产品</h4>
|
|
<a href="#features">功能介绍</a>
|
|
<a href="#pricing">订阅方案</a>
|
|
<a href="#download">下载应用</a>
|
|
</div>
|
|
<div class="footer-col">
|
|
<h4>支持</h4>
|
|
<a href="#">常见问题</a>
|
|
<a href="#">反馈与客服</a>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p>© 2026 上海华嘎科技有限公司 版权所有</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Navbar scroll effect
|
|
window.addEventListener('scroll', function() {
|
|
const navbar = document.getElementById('navbar');
|
|
if (window.scrollY > 10) {
|
|
navbar.classList.add('scrolled');
|
|
} else {
|
|
navbar.classList.remove('scrolled');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |