547 lines
33 KiB
HTML
547 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">
|
||
<title>闲言APP — 引导页方案A · 液态玻璃</title>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||
*{margin:0;padding:0;box-sizing:border-box}
|
||
:root{
|
||
--primary:#6C63FF;--primary-light:#8B83FF;--secondary:#FF6B6B;
|
||
--accent:#4ECDC4;--success:#34C759;--warning:#FF9500;
|
||
--bg:#F5F5F7;--text:#1A1A2E;--text2:#6B7280;--text3:#9CA3AF;
|
||
--radius-sm:4px;--radius-md:8px;--radius-lg:12px;
|
||
--radius-xl:16px;--radius-2xl:20px;--radius-full:999px;
|
||
}
|
||
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}
|
||
|
||
/* ====== Page Header ====== */
|
||
.page-header{text-align:center;padding:32px 24px 16px}
|
||
.page-header h1{font-size:24px;font-weight:700;margin-bottom:4px}
|
||
.page-header p{font-size:14px;color:var(--text2)}
|
||
.page-header .badge{display:inline-block;padding:4px 12px;border-radius:var(--radius-full);font-size:11px;font-weight:600;background:rgba(108,99,255,0.1);color:var(--primary);margin-top:8px}
|
||
|
||
/* ====== Phone Row ====== */
|
||
.pages-row{display:flex;gap:24px;justify-content:center;padding:0 24px 40px;flex-wrap:wrap}
|
||
.phone-wrapper{display:flex;flex-direction:column;align-items:center;gap:10px}
|
||
.phone-label{font-size:12px;font-weight:600;color:var(--text2);background:white;padding:6px 16px;border-radius:var(--radius-full);box-shadow:0 1px 4px rgba(0,0,0,0.06)}
|
||
|
||
.phone{width:300px;height:620px;border-radius:40px;overflow:hidden;position:relative;box-shadow:0 24px 80px rgba(0,0,0,0.18),0 0 0 1px rgba(0,0,0,0.04)}
|
||
.dynamic-island{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:100px;height:28px;background:#000;border-radius:20px;z-index:20}
|
||
.home-indicator{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:110px;height:4px;background:rgba(0,0,0,0.18);border-radius:2px;z-index:20}
|
||
|
||
/* ====== Flowing Mesh Gradient ====== */
|
||
.mesh-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
|
||
.mesh-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:0.55;will-change:transform}
|
||
.mesh-blob:nth-child(1){width:220px;height:220px;background:#6C63FF;top:-40px;right:-30px;animation:drift1 12s ease-in-out infinite}
|
||
.mesh-blob:nth-child(2){width:180px;height:180px;background:#4ECDC4;bottom:60px;left:-40px;animation:drift2 14s ease-in-out infinite}
|
||
.mesh-blob:nth-child(3){width:140px;height:140px;background:#FF6B6B;top:200px;left:20px;animation:drift3 10s ease-in-out infinite}
|
||
.mesh-blob:nth-child(4){width:160px;height:160px;background:#FFB84D;bottom:-20px;right:10px;animation:drift4 16s ease-in-out infinite}
|
||
.mesh-blob:nth-child(5){width:100px;height:100px;background:#E040FB;top:120px;right:40px;animation:drift5 11s ease-in-out infinite}
|
||
|
||
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(-30px,40px) scale(1.1)}50%{transform:translate(20px,-20px) scale(0.95)}75%{transform:translate(-10px,30px) scale(1.05)}}
|
||
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}30%{transform:translate(40px,-30px) scale(1.08)}60%{transform:translate(-20px,20px) scale(0.92)}80%{transform:translate(10px,-10px) scale(1.03)}}
|
||
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}20%{transform:translate(30px,20px) scale(1.12)}50%{transform:translate(-40px,-10px) scale(0.9)}70%{transform:translate(20px,-30px) scale(1.06)}}
|
||
@keyframes drift4{0%,100%{transform:translate(0,0) scale(1)}35%{transform:translate(-25px,-35px) scale(1.1)}65%{transform:translate(30px,15px) scale(0.93)}85%{transform:translate(-15px,20px) scale(1.04)}}
|
||
@keyframes drift5{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(-20px,30px) scale(1.15)}70%{transform:translate(25px,-25px) scale(0.88)}}
|
||
|
||
/* ====== Page Content ====== */
|
||
.page-content{padding:52px 22px 34px;height:100%;display:flex;flex-direction:column;position:relative;z-index:1}
|
||
|
||
/* ====== Glass Components ====== */
|
||
.glass{background:rgba(255,255,255,0.42);backdrop-filter:blur(28px) saturate(1.6);-webkit-backdrop-filter:blur(28px) saturate(1.6);border:1px solid rgba(255,255,255,0.55);box-shadow:0 8px 32px rgba(108,99,255,0.06),inset 0 1px 0 rgba(255,255,255,0.5)}
|
||
.glass-lg{border-radius:var(--radius-2xl);padding:14px}
|
||
.glass-md{border-radius:var(--radius-xl);padding:12px}
|
||
.glass-sm{border-radius:var(--radius-lg);padding:10px}
|
||
|
||
.glass-subtle{background:rgba(255,255,255,0.28);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.4);border-radius:var(--radius-xl);padding:10px 12px}
|
||
|
||
/* ====== Typography ====== */
|
||
.page-title{font-size:24px;font-weight:700;color:var(--text);text-align:right;margin-bottom:2px;letter-spacing:-0.3px}
|
||
.page-subtitle{font-size:12px;color:var(--text2);text-align:right;margin-bottom:14px;line-height:1.5}
|
||
|
||
/* ====== Page Nav Header ====== */
|
||
.page-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;position:relative}
|
||
.page-nav-icon{width:48px;height:48px;border-radius:var(--radius-xl);background:rgba(255,255,255,0.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.6);flex-shrink:0}
|
||
.page-nav-back{display:flex;align-items:center;gap:6px;cursor:pointer;padding:6px 10px;border-radius:var(--radius-full);background:rgba(255,255,255,0.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.4);transition:all 0.2s;flex-shrink:0}
|
||
.page-nav-back:hover{background:rgba(255,255,255,0.5)}
|
||
.page-nav-back svg{width:16px;height:16px;color:var(--primary)}
|
||
.page-nav-back-text{display:flex;flex-direction:column;gap:0}
|
||
.page-nav-back-label{font-size:9px;color:var(--text3);line-height:1}
|
||
.page-nav-back-title{font-size:11px;font-weight:600;color:var(--primary);line-height:1.3}
|
||
.page-nav-spacer{width:48px;flex-shrink:0}
|
||
|
||
/* ====== SVG Icon Containers ====== */
|
||
.icon-box{width:36px;height:36px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}
|
||
.icon-box svg{width:20px;height:20px}
|
||
.icon-box-sm{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
|
||
.icon-box-sm svg{width:17px;height:17px}
|
||
|
||
/* ====== Feature Row ====== */
|
||
.feature-row{display:flex;align-items:center;gap:10px;padding:8px 0}
|
||
.feature-row+.feature-row{border-top:1px solid rgba(0,0,0,0.04)}
|
||
.feature-info{flex:1;min-width:0}
|
||
.feature-name{font-size:12px;font-weight:600;color:var(--text)}
|
||
.feature-desc{font-size:10px;color:var(--text2);margin-top:1px;line-height:1.4}
|
||
|
||
/* ====== Permission Entry ====== */
|
||
.perm-entry{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-lg);background:rgba(255,255,255,0.3);border:1px solid rgba(255,255,255,0.45);cursor:pointer;transition:background 0.2s}
|
||
.perm-entry:hover{background:rgba(255,255,255,0.5)}
|
||
.perm-entry-text{flex:1}
|
||
.perm-entry-title{font-size:12px;font-weight:600;color:var(--text)}
|
||
.perm-entry-desc{font-size:10px;color:var(--text2);margin-top:1px}
|
||
.perm-entry-arrow{color:var(--text3);font-size:16px;font-weight:300}
|
||
|
||
/* ====== Language Chips ====== */
|
||
.lang-chips{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
|
||
.lang-chip{padding:4px 11px;border-radius:var(--radius-full);font-size:11px;font-weight:500;background:rgba(255,255,255,0.45);border:1px solid rgba(255,255,255,0.55);color:var(--text);cursor:pointer;transition:all 0.2s}
|
||
.lang-chip.active{background:var(--primary);color:white;border-color:var(--primary);box-shadow:0 2px 8px rgba(108,99,255,0.3)}
|
||
.lang-chip:hover:not(.active){background:rgba(255,255,255,0.6)}
|
||
|
||
/* ====== Buttons ====== */
|
||
.btn-primary{background:var(--primary);color:white;border:none;border-radius:var(--radius-full);padding:11px 24px;font-size:14px;font-weight:600;cursor:pointer;width:100%;text-align:center;transition:all 0.2s;box-shadow:0 4px 16px rgba(108,99,255,0.25)}
|
||
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(108,99,255,0.35)}
|
||
.btn-skip{background:none;border:none;color:var(--text3);font-size:12px;cursor:pointer;text-align:center;padding:6px;width:100%;margin-top:4px}
|
||
|
||
/* ====== Step Dots ====== */
|
||
.step-dots{display:flex;gap:6px;justify-content:center;margin-top:auto;padding-top:10px}
|
||
.step-dot{width:6px;height:6px;border-radius:3px;background:rgba(108,99,255,0.2);transition:all 0.3s}
|
||
.step-dot.active{width:20px;background:var(--primary)}
|
||
|
||
/* ====== Agreement Page ====== */
|
||
.agreement-tabs{display:flex;gap:5px;margin-bottom:8px}
|
||
.agreement-tab{padding:4px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:500;cursor:pointer;transition:all 0.2s}
|
||
.agreement-tab.active{background:rgba(108,99,255,0.12);color:var(--primary)}
|
||
.agreement-tab:not(.active){background:rgba(0,0,0,0.03);color:var(--text2)}
|
||
.agreement-text{font-size:11px;color:var(--text2);line-height:1.8;max-height:300px;overflow-y:auto;padding-right:4px;scrollbar-width:thin}
|
||
.agreement-text::-webkit-scrollbar{width:3px}
|
||
.agreement-text::-webkit-scrollbar-thumb{background:rgba(108,99,255,0.15);border-radius:2px}
|
||
.agreement-text p{margin-bottom:4px}
|
||
.agreement-text strong{color:var(--text);font-weight:600}
|
||
|
||
.checkbox-row{display:flex;align-items:center;gap:8px;margin-top:8px}
|
||
.checkbox{width:18px;height:18px;border-radius:5px;border:2px solid var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:all 0.2s}
|
||
.checkbox.checked{background:var(--primary);border-color:var(--primary)}
|
||
.checkbox.checked::after{content:'✓';color:white;font-size:11px;font-weight:700}
|
||
.checkbox-label{font-size:11px;color:var(--text2);line-height:1.5}
|
||
.checkbox-label a{color:var(--primary);text-decoration:none;font-weight:500}
|
||
|
||
/* ====== Settings Page ====== */
|
||
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0}
|
||
.setting-row+.setting-row{border-top:1px solid rgba(0,0,0,0.04)}
|
||
.setting-label{font-size:12px;font-weight:500;color:var(--text);display:flex;align-items:center;gap:6px}
|
||
.setting-value{font-size:11px;color:var(--primary);font-weight:500}
|
||
.color-dots{display:flex;gap:5px}
|
||
.color-dot{width:18px;height:18px;border-radius:50%;border:2.5px solid transparent;cursor:pointer;transition:all 0.2s}
|
||
.color-dot.active{border-color:var(--text);box-shadow:0 0 0 2px white}
|
||
|
||
/* Toggle */
|
||
.ios-toggle{width:38px;height:22px;border-radius:11px;background:#D1D5DB;position:relative;flex-shrink:0;cursor:pointer;transition:background 0.2s}
|
||
.ios-toggle.on{background:var(--success)}
|
||
.ios-toggle::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.15);transition:transform 0.2s}
|
||
.ios-toggle.on::after{transform:translateX(16px)}
|
||
|
||
/* Preview Card */
|
||
.preview-card{padding:12px;border-radius:var(--radius-lg);background:linear-gradient(135deg,#6C63FF,#8B83FF);color:white;text-align:center;position:relative;overflow:hidden}
|
||
.preview-card::before{content:'';position:absolute;top:-50%;right:-50%;width:100%;height:100%;background:radial-gradient(circle,rgba(255,255,255,0.15) 0%,transparent 70%);animation:shimmer 4s ease-in-out infinite}
|
||
@keyframes shimmer{0%,100%{transform:translate(0,0)}50%{transform:translate(-20%,20%)}}
|
||
.preview-card .quote{font-size:14px;font-weight:600;position:relative;z-index:1}
|
||
.preview-card .author{font-size:10px;opacity:0.7;margin-top:3px;position:relative;z-index:1}
|
||
|
||
/* ====== Responsive ====== */
|
||
@media(max-width:960px){.pages-row{gap:16px}.phone{width:280px;height:580px}}
|
||
@media(max-width:640px){.pages-row{flex-direction:column;align-items:center}.phone{width:320px;height:640px}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="page-header">
|
||
<h1>🫧 闲言APP · 引导页方案A</h1>
|
||
<p>iOS 26 液态玻璃风格 — 流动渐变 · 本地图标 · 三页完整设计</p>
|
||
<div class="badge">方案A · 液态玻璃 ✓ 已选择</div>
|
||
</div>
|
||
|
||
<div class="pages-row">
|
||
|
||
<!-- ============================================================
|
||
第1页 · 欢迎与指引
|
||
============================================================ -->
|
||
<div class="phone-wrapper">
|
||
<div class="phone-label">第1页 · 欢迎与指引</div>
|
||
<div class="phone">
|
||
<div class="dynamic-island"></div>
|
||
<div class="home-indicator"></div>
|
||
<!-- 流动渐变背景 -->
|
||
<div class="mesh-bg">
|
||
<div class="mesh-blob"></div>
|
||
<div class="mesh-blob"></div>
|
||
<div class="mesh-blob"></div>
|
||
<div class="mesh-blob"></div>
|
||
<div class="mesh-blob"></div>
|
||
</div>
|
||
|
||
<div class="page-content">
|
||
<!-- Nav Header: icon right-aligned -->
|
||
<div class="page-nav">
|
||
<div class="page-nav-spacer"></div>
|
||
<div class="page-nav-icon" style="width:52px;height:52px;">
|
||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#6C63FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/><path d="M8 7h6"/><path d="M8 11h8"/></svg>
|
||
</div>
|
||
</div>
|
||
<div style="text-align:right;margin-bottom:12px;">
|
||
<div class="page-title">欢迎使用闲言</div>
|
||
<div class="page-subtitle">文字阅读更纯粹 · 句子阅读 + 壁纸制作</div>
|
||
</div>
|
||
|
||
<!-- Core Features -->
|
||
<div class="glass glass-lg" style="margin-bottom:8px;">
|
||
<div style="font-size:11px;font-weight:600;margin-bottom:6px;color:var(--text);display:flex;align-items:center;gap:4px;">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="#6C63FF"><path d="M7 2v11h3v9l7-12h-4l4-8H7z"/></svg>
|
||
核心功能
|
||
</div>
|
||
<!-- 每日拾句 -->
|
||
<div class="feature-row">
|
||
<div class="icon-box" style="background:rgba(108,99,255,0.1);">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="#6C63FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.5 4.5H18l-3.5 2.8L16 15l-4-3-4 3 1.5-4.7L6 7.5h4.5z"/><path d="M5 21c0-3 3-5 7-5s7 2 7 5"/></svg>
|
||
</div>
|
||
<div class="feature-info">
|
||
<div class="feature-name">每日拾句</div>
|
||
<div class="feature-desc">每天精选一句，开启美好阅读</div>
|
||
</div>
|
||
</div>
|
||
<!-- 壁纸制作 -->
|
||
<div class="feature-row">
|
||
<div class="icon-box" style="background:rgba(255,107,107,0.1);">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="#FF6B6B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" stroke-dasharray="4 3"/><circle cx="8" cy="8" r="1.5" fill="#FF6B6B"/><path d="M21 15l-5-5L5 21"/></svg>
|
||
</div>
|
||
<div class="feature-info">
|
||
<div class="feature-name">壁纸制作</div>
|
||
<div class="feature-desc">将句子变成精美壁纸，分享给朋友</div>
|
||
</div>
|
||
</div>
|
||
<!-- 文件传输 -->
|
||
<div class="feature-row">
|
||
<div class="icon-box" style="background:rgba(255,149,0,0.1);">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="#FF9500" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
|
||
</div>
|
||
<div class="feature-info">
|
||
<div class="feature-name">文件传输</div>
|
||
<div class="feature-desc">局域网/蓝牙跨设备极速传输</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Permission Entry -->
|
||
<div class="perm-entry" style="margin-bottom:8px;">
|
||
<div class="icon-box-sm" style="background:rgba(108,99,255,0.08);">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="#6C63FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
|
||
</div>
|
||
<div class="perm-entry-text">
|
||
<div class="perm-entry-title">了解软件权限</div>
|
||
<div class="perm-entry-desc">闲言仅请求必要权限，点击查看详情</div>
|
||
</div>
|
||
<div class="perm-entry-arrow">›</div>
|
||
</div>
|
||
|
||
<!-- Language -->
|
||
<div class="glass-subtle" style="margin-bottom:10px;">
|
||
<div style="font-size:10px;font-weight:600;margin-bottom:5px;color:var(--text2);display:flex;align-items:center;gap:4px;">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
|
||
语言
|
||
</div>
|
||
<div class="lang-chips">
|
||
<span class="lang-chip active">简体中文</span>
|
||
<span class="lang-chip">English</span>
|
||
<span class="lang-chip">日本語</span>
|
||
<span class="lang-chip">繁體中文</span>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="btn-primary">开始使用</button>
|
||
<button class="btn-skip">跳过引导</button>
|
||
<div class="step-dots"><div class="step-dot active"></div><div class="step-dot"></div><div class="step-dot"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================
|
||
第2页 · 软件协议
|
||
============================================================ -->
|
||
<div class="phone-wrapper">
|
||
<div class="phone-label">第2页 · 软件协议</div>
|
||
<div class="phone">
|
||
<div class="dynamic-island"></div>
|
||
<div class="home-indicator"></div>
|
||
<div class="mesh-bg">
|
||
<div class="mesh-blob" style="background:#6C63FF;top:40px;left:-30px;animation-delay:1s"></div>
|
||
<div class="mesh-blob" style="background:#4ECDC4;bottom:80px;right:-20px;animation-delay:3s"></div>
|
||
<div class="mesh-blob" style="background:#FFB84D;top:250px;right:30px;animation-delay:5s;width:120px;height:120px"></div>
|
||
</div>
|
||
|
||
<div class="page-content">
|
||
<!-- Nav Header: back left + icon right -->
|
||
<div class="page-nav">
|
||
<div class="page-nav-back">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
|
||
<div class="page-nav-back-text">
|
||
<span class="page-nav-back-label">上一步</span>
|
||
<span class="page-nav-back-title">欢迎与指引</span>
|
||
</div>
|
||
</div>
|
||
<div class="page-nav-icon">
|
||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#6C63FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><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>
|
||
</div>
|
||
<div style="text-align:right;margin-bottom:10px;">
|
||
<div class="page-title">软件协议</div>
|
||
<div class="page-subtitle">请阅读并同意以下协议以继续使用闲言</div>
|
||
</div>
|
||
|
||
<div class="glass glass-lg" style="flex:1;margin-bottom:8px;display:flex;flex-direction:column;min-height:0;">
|
||
<!-- Agreement Tabs -->
|
||
<div class="agreement-tabs">
|
||
<span class="agreement-tab active" onclick="switchTab(this)">隐私政策</span>
|
||
<span class="agreement-tab" onclick="switchTab(this)">用户协议</span>
|
||
<span class="agreement-tab" onclick="switchTab(this)">权限说明</span>
|
||
</div>
|
||
<!-- Agreement Content -->
|
||
<div class="agreement-text" style="flex:1;">
|
||
<p><strong>一、总则</strong></p>
|
||
<p>欢迎您使用闲言（WordsLeisure）应用程序。在使用本应用之前，请您仔细阅读并充分理解本协议各条款。本协议是您与闲言之间关于使用闲言服务所订立的协议。</p>
|
||
<p>您点击"同意并继续"按钮即表示您已阅读并同意受本协议约束。如果您不同意本协议的任何内容，请停止使用本应用。</p>
|
||
<p><strong>二、服务内容</strong></p>
|
||
<p>闲言提供以下核心服务功能：</p>
|
||
<p>· 每日拾句 — 每天精选优质句子，支持收藏与分享</p>
|
||
<p>· 壁纸制作 — 将句子制作为精美壁纸，保存或分享</p>
|
||
<p>· 灵感对话 — AI 驱动的灵感生成、翻译、诗词创作</p>
|
||
<p>· 文件传输 — 局域网/蓝牙跨设备极速文件传输</p>
|
||
<p>我们保留随时变更、中断或终止部分服务的权利，并将尽合理努力提前通知。</p>
|
||
<p><strong>三、用户行为规范</strong></p>
|
||
<p>用户不得利用闲言服务制作、上传、复制、传播含有以下内容的信息：违反法律法规、危害国家安全、破坏社会稳定、侵犯他人合法权益、散布虚假信息等。</p>
|
||
<p><strong>四、隐私保护</strong></p>
|
||
<p>我们重视您的隐私保护。闲言遵循最小必要原则，仅收集实现服务功能所必需的信息，不会向第三方出售您的个人数据。详细内容请参阅《隐私政策》。</p>
|
||
<p><strong>五、知识产权</strong></p>
|
||
<p>闲言应用中的所有内容，包括但不限于文字、图片、音频、视频、软件、界面设计、版面编排等，均受知识产权法保护。未经授权，任何人不得复制、修改、传播。</p>
|
||
<p><strong>六、免责声明</strong></p>
|
||
<p>闲言不对用户生成的内容承担审查义务，但有权依法删除违规内容。用户因使用本应用而产生的任何直接或间接损失，闲言不承担赔偿责任。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Checkboxes -->
|
||
<div class="checkbox-row">
|
||
<div class="checkbox checked"></div>
|
||
<span class="checkbox-label">我已阅读并同意 <a href="#">《用户服务协议》</a> 和 <a href="#">《隐私政策》</a></span>
|
||
</div>
|
||
<div class="checkbox-row" style="margin-top:4px;">
|
||
<div class="checkbox"></div>
|
||
<span class="checkbox-label">我已阅读 <a href="#">《软件权限使用说明》</a></span>
|
||
</div>
|
||
|
||
<button class="btn-primary" style="margin-top:8px;">同意并继续</button>
|
||
<div class="step-dots"><div class="step-dot"></div><div class="step-dot active"></div><div class="step-dot"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================================
|
||
第3页 · 个性化设置
|
||
============================================================ -->
|
||
<div class="phone-wrapper">
|
||
<div class="phone-label">第3页 · 个性化设置</div>
|
||
<div class="phone">
|
||
<div class="dynamic-island"></div>
|
||
<div class="home-indicator"></div>
|
||
<div class="mesh-bg">
|
||
<div class="mesh-blob" style="background:#FF6B6B;top:20px;right:-20px;animation-delay:0.5s"></div>
|
||
<div class="mesh-blob" style="background:#6C63FF;bottom:60px;left:-20px;animation-delay:2.5s"></div>
|
||
<div class="mesh-blob" style="background:#4ECDC4;top:180px;left:40px;animation-delay:4s;width:100px;height:100px"></div>
|
||
</div>
|
||
|
||
<div class="page-content">
|
||
<!-- Nav Header: back left + icon right -->
|
||
<div class="page-nav">
|
||
<div class="page-nav-back">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
|
||
<div class="page-nav-back-text">
|
||
<span class="page-nav-back-label">上一步</span>
|
||
<span class="page-nav-back-title">软件协议</span>
|
||
</div>
|
||
</div>
|
||
<div class="page-nav-icon">
|
||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#6C63FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="13.5" cy="6.5" r="2.5"/><circle cx="17.5" cy="10.5" r="2.5"/><circle cx="8.5" cy="7.5" r="2.5"/><circle cx="6.5" cy="12.5" r="2.5"/><path d="M12 22C6.5 22 2 17.5 2 12S6.5 2 12 2s10 4.5 10 10"/><path d="M17.5 15l-2 7-2-3-3-1 7-3z"/></svg>
|
||
</div>
|
||
</div>
|
||
<div style="text-align:right;margin-bottom:10px;">
|
||
<div class="page-title">个性化设置</div>
|
||
<div class="page-subtitle">打造专属于你的阅读体验，稍后可随时调整</div>
|
||
</div>
|
||
|
||
<!-- Appearance -->
|
||
<div class="glass glass-md" style="margin-bottom:6px;">
|
||
<div class="setting-row">
|
||
<span class="setting-label">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
|
||
主题模式
|
||
</span>
|
||
<span class="setting-value">跟随系统 ›</span>
|
||
</div>
|
||
<div class="setting-row">
|
||
<span class="setting-label">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="13.5" cy="6.5" r="2.5"/><circle cx="17.5" cy="10.5" r="2.5"/><circle cx="8.5" cy="7.5" r="2.5"/><circle cx="6.5" cy="12.5" r="2.5"/><path d="M12 22C6.5 22 2 17.5 2 12S6.5 2 12 2s10 4.5 10 10"/><path d="M17.5 15l-2 7-2-3-3-1 7-3z"/></svg>
|
||
强调色
|
||
</span>
|
||
<div class="color-dots">
|
||
<div class="color-dot active" style="background:#6C63FF;"></div>
|
||
<div class="color-dot" style="background:#FF6B6B;"></div>
|
||
<div class="color-dot" style="background:#4ECDC4;"></div>
|
||
<div class="color-dot" style="background:#3B82F6;"></div>
|
||
<div class="color-dot" style="background:#F59E0B;"></div>
|
||
</div>
|
||
</div>
|
||
<div class="setting-row">
|
||
<span class="setting-label">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7V4h16v3"/><path d="M9 20h6"/><path d="M12 4v16"/></svg>
|
||
字体大小
|
||
</span>
|
||
<span class="setting-value">标准 ›</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Effects -->
|
||
<div class="glass glass-md" style="margin-bottom:6px;">
|
||
<div class="setting-row">
|
||
<span class="setting-label">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.5 4.5H18l-3.5 2.8L16 15l-4-3-4 3 1.5-4.7L6 7.5h4.5z"/></svg>
|
||
毛玻璃强度
|
||
</span>
|
||
<span class="setting-value">中等 ›</span>
|
||
</div>
|
||
<div class="setting-row">
|
||
<span class="setting-label">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="#6C63FF"><path d="M7 2v11h3v9l7-12h-4l4-8H7z"/></svg>
|
||
动画强度
|
||
</span>
|
||
<span class="setting-value">标准 ›</span>
|
||
</div>
|
||
<div class="setting-row">
|
||
<span class="setting-label">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="3"/></svg>
|
||
圆角风格
|
||
</span>
|
||
<span class="setting-value">标准 ›</span>
|
||
</div>
|
||
<div class="setting-row">
|
||
<span class="setting-label">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M2 8h20"/></svg>
|
||
卡片样式
|
||
</span>
|
||
<span class="setting-value">标准 ›</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Quick Toggles -->
|
||
<div class="glass glass-md" style="margin-bottom:6px;">
|
||
<div class="setting-row">
|
||
<span class="setting-label">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
|
||
摇一摇换句
|
||
</span>
|
||
<div class="ios-toggle on"></div>
|
||
</div>
|
||
<div class="setting-row">
|
||
<span class="setting-label">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
|
||
音效反馈
|
||
</span>
|
||
<div class="ios-toggle"></div>
|
||
</div>
|
||
<div class="setting-row">
|
||
<span class="setting-label">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/><path d="M8 7h6"/><path d="M8 11h8"/></svg>
|
||
下次继续显示引导页
|
||
</span>
|
||
<div class="ios-toggle on"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Preview -->
|
||
<div class="glass glass-sm" style="margin-bottom:8px;text-align:center;">
|
||
<div style="font-size:10px;color:var(--text3);margin-bottom:5px;display:flex;align-items:center;justify-content:center;gap:4px;">
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||
实时预览
|
||
</div>
|
||
<div class="preview-card">
|
||
<div class="quote">生活不是等待暴风雨过去</div>
|
||
<div class="author">而是学会在雨中翩翩起舞</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="btn-primary">完成设置，进入闲言</button>
|
||
<div class="step-dots"><div class="step-dot"></div><div class="step-dot"></div><div class="step-dot active"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ====== Design Notes ====== -->
|
||
<div style="max-width:960px;margin:0 auto;padding:0 24px 60px;">
|
||
<div style="background:white;border-radius:var(--radius-2xl);padding:24px;box-shadow:0 2px 8px rgba(0,0,0,0.04);">
|
||
<h2 style="font-size:16px;font-weight:700;margin-bottom:12px;">📋 方案A 设计要点</h2>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:13px;color:var(--text2);line-height:1.7;">
|
||
<div>
|
||
<p style="font-weight:600;color:var(--text);margin-bottom:4px;">🫧 液态玻璃</p>
|
||
<p>· 复用项目 GlassContainer 组件<br>· backdrop-filter: blur(28px) saturate(1.6)<br>· 半透明白色底 + 白色边框 + 内发光<br>· 低端设备降级为纯色卡片</p>
|
||
</div>
|
||
<div>
|
||
<p style="font-weight:600;color:var(--text);margin-bottom:4px;">🌊 流动渐变</p>
|
||
<p>· 5 个不规则色块 + blur(60px)<br>· 每个色块独立动画周期(10-16s)<br>· CSS will-change 优化性能<br>· Flutter 用 AnimatedContainer 实现</p>
|
||
</div>
|
||
<div>
|
||
<p style="font-weight:600;color:var(--text);margin-bottom:4px;">🎨 本地图标</p>
|
||
<p>· 使用 assets/svgs/ 目录 SVG 图标<br>· sparkles → 每日拾句<br>· photo → 壁纸制作<br>· chat_bubble → 灵感对话<br>· upload → 文件传输</p>
|
||
</div>
|
||
<div>
|
||
<p style="font-weight:600;color:var(--text);margin-bottom:4px;">⚙️ 动态主题</p>
|
||
<p>· 所有颜色引用 AppThemeExtension<br>· light/dark/amoled 三套自适应<br>· 强调色实时切换<br>· 预览卡片跟随主题变化</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function switchTab(el) {
|
||
el.parentElement.querySelectorAll('.agreement-tab').forEach(t => t.classList.remove('active'));
|
||
el.classList.add('active');
|
||
}
|
||
|
||
document.querySelectorAll('.lang-chip').forEach(chip => {
|
||
chip.addEventListener('click', function() {
|
||
this.parentElement.querySelectorAll('.lang-chip').forEach(c => c.classList.remove('active'));
|
||
this.classList.add('active');
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll('.color-dot').forEach(dot => {
|
||
dot.addEventListener('click', function() {
|
||
this.parentElement.querySelectorAll('.color-dot').forEach(d => d.classList.remove('active'));
|
||
this.classList.add('active');
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll('.checkbox').forEach(cb => {
|
||
cb.addEventListener('click', function() {
|
||
this.classList.toggle('checked');
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll('.ios-toggle').forEach(toggle => {
|
||
toggle.addEventListener('click', function() {
|
||
this.classList.toggle('on');
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|