713 lines
53 KiB
HTML
713 lines
53 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 — 引导页设计方案对比 v2</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;
|
||
--error: #FF3B30; --info: #007AFF; --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;
|
||
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
|
||
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
|
||
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
|
||
}
|
||
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }
|
||
|
||
.top-nav { position: sticky; top: 0; z-index: 100; background: rgba(245,245,247,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(0,0,0,0.06); padding: 12px 24px; }
|
||
.top-nav h1 { font-size: 18px; font-weight: 700; text-align: center; }
|
||
.top-nav p { font-size: 13px; color: var(--text2); text-align: center; margin-top: 2px; }
|
||
|
||
.approach-tabs { display: flex; gap: 8px; padding: 16px 24px; max-width: 960px; margin: 0 auto; }
|
||
.approach-tab { flex: 1; padding: 12px 16px; border-radius: var(--radius-xl); border: 2px solid transparent; background: white; cursor: pointer; text-align: center; transition: all 0.3s ease; box-shadow: var(--shadow-sm); }
|
||
.approach-tab:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
|
||
.approach-tab.active { border-color: var(--primary); background: rgba(108,99,255,0.06); }
|
||
.approach-tab .tab-icon { font-size: 24px; margin-bottom: 4px; }
|
||
.approach-tab .tab-title { font-size: 14px; font-weight: 600; }
|
||
.approach-tab .tab-desc { font-size: 11px; color: var(--text2); margin-top: 2px; }
|
||
|
||
.approach-container { display: none; max-width: 960px; margin: 0 auto; padding: 0 24px 40px; }
|
||
.approach-container.active { display: block; }
|
||
|
||
.approach-header { background: white; border-radius: var(--radius-2xl); padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow-sm); }
|
||
.approach-header h2 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
|
||
.approach-header p { font-size: 13px; color: var(--text2); line-height: 1.6; }
|
||
.approach-header .pros-cons { display: flex; gap: 16px; margin-top: 12px; }
|
||
.approach-header .pros, .approach-header .cons { flex: 1; padding: 12px; border-radius: var(--radius-lg); font-size: 12px; line-height: 1.6; }
|
||
.approach-header .pros { background: rgba(52,199,89,0.08); border: 1px solid rgba(52,199,89,0.15); }
|
||
.approach-header .cons { background: rgba(255,149,0,0.08); border: 1px solid rgba(255,149,0,0.15); }
|
||
.approach-header .pros h4 { color: var(--success); margin-bottom: 4px; }
|
||
.approach-header .cons h4 { color: var(--warning); margin-bottom: 4px; }
|
||
|
||
.pages-row { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
|
||
.phone-wrapper { display: flex; flex-direction: column; align-items: center; gap: 8px; }
|
||
.phone-label { font-size: 12px; font-weight: 600; color: var(--text2); background: white; padding: 4px 12px; border-radius: var(--radius-full); }
|
||
.phone { width: 280px; height: 580px; border-radius: 36px; overflow: hidden; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05); }
|
||
.dynamic-island { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 90px; height: 24px; background: #000; border-radius: 20px; z-index: 10; }
|
||
.home-indicator { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); width: 100px; height: 4px; background: rgba(0,0,0,0.2); border-radius: 2px; z-index: 10; }
|
||
|
||
/* ====== Shared: Guide Feature Card ====== */
|
||
.guide-feature { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
|
||
.guide-feature + .guide-feature { border-top: 1px solid rgba(0,0,0,0.04); }
|
||
.guide-feature-icon { width: 36px; height: 36px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
|
||
.guide-feature-info { flex: 1; min-width: 0; }
|
||
.guide-feature-name { font-size: 12px; font-weight: 600; }
|
||
.guide-feature-desc { font-size: 10px; color: var(--text2); margin-top: 1px; }
|
||
|
||
/* ====== 方案A: 液态玻璃 ====== */
|
||
.phone-a { background: linear-gradient(145deg, #E8E0FF 0%, #F0E6FF 25%, #FFE8EC 50%, #E0F7FA 75%, #FFF8E1 100%); }
|
||
.phone-a .page-content { padding: 48px 20px 30px; height: 100%; display: flex; flex-direction: column; position: relative; z-index: 1; }
|
||
.phone-a .glass-card { background: rgba(255,255,255,0.45); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.6); border-radius: var(--radius-2xl); padding: 14px; box-shadow: 0 8px 32px rgba(108,99,255,0.08); }
|
||
.phone-a .glass-card-sm { background: rgba(255,255,255,0.35); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.5); border-radius: var(--radius-xl); padding: 12px; }
|
||
.phone-a .page-title { font-size: 22px; font-weight: 700; color: var(--text); text-align: center; margin-bottom: 2px; }
|
||
.phone-a .page-subtitle { font-size: 11px; color: var(--text2); text-align: center; margin-bottom: 12px; }
|
||
.phone-a .lang-chips { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
|
||
.phone-a .lang-chip { padding: 4px 10px; border-radius: var(--radius-full); font-size: 11px; font-weight: 500; background: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.6); color: var(--text); cursor: pointer; }
|
||
.phone-a .lang-chip.active { background: var(--primary); color: white; border-color: var(--primary); }
|
||
.phone-a .step-dots { display: flex; gap: 6px; justify-content: center; margin-top: auto; padding-top: 10px; }
|
||
.phone-a .step-dot { width: 6px; height: 6px; border-radius: 3px; background: rgba(108,99,255,0.25); }
|
||
.phone-a .step-dot.active { width: 18px; background: var(--primary); }
|
||
.phone-a .btn-primary { background: var(--primary); color: white; border: none; border-radius: var(--radius-full); padding: 10px 24px; font-size: 13px; font-weight: 600; cursor: pointer; width: 100%; text-align: center; }
|
||
.phone-a .agreement-text { font-size: 11px; color: var(--text2); line-height: 1.7; max-height: 280px; overflow-y: auto; padding-right: 4px; }
|
||
.phone-a .agreement-text::-webkit-scrollbar { width: 3px; }
|
||
.phone-a .agreement-text::-webkit-scrollbar-thumb { background: rgba(108,99,255,0.2); border-radius: 2px; }
|
||
.phone-a .checkbox-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
|
||
.phone-a .checkbox { width: 18px; height: 18px; border-radius: var(--radius-sm); border: 2px solid var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||
.phone-a .checkbox.checked { background: var(--primary); }
|
||
.phone-a .checkbox.checked::after { content: '✓'; color: white; font-size: 11px; font-weight: 700; }
|
||
.phone-a .setting-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
|
||
.phone-a .setting-row + .setting-row { border-top: 1px solid rgba(255,255,255,0.3); }
|
||
.phone-a .setting-label { font-size: 12px; font-weight: 500; color: var(--text); }
|
||
.phone-a .setting-value { font-size: 11px; color: var(--primary); font-weight: 500; }
|
||
.phone-a .color-dots { display: flex; gap: 6px; }
|
||
.phone-a .color-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
|
||
.phone-a .color-dot.active { border-color: var(--text); box-shadow: 0 0 0 2px white; }
|
||
.phone-a .floating-orb { position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0.4; z-index: 0; animation: float 8s ease-in-out infinite; }
|
||
@keyframes float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-20px) scale(1.05); } }
|
||
.phone-a .welcome-emoji { font-size: 44px; text-align: center; margin-bottom: 4px; }
|
||
.phone-a .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.4); cursor: pointer; }
|
||
.phone-a .perm-entry:hover { background: rgba(255,255,255,0.5); }
|
||
.phone-a .perm-entry-icon { width: 32px; height: 32px; border-radius: var(--radius-md); background: rgba(108,99,255,0.12); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
|
||
.phone-a .perm-entry-text { flex: 1; }
|
||
.phone-a .perm-entry-title { font-size: 12px; font-weight: 600; color: var(--text); }
|
||
.phone-a .perm-entry-desc { font-size: 10px; color: var(--text2); margin-top: 1px; }
|
||
.phone-a .perm-entry-arrow { color: var(--text3); font-size: 14px; }
|
||
|
||
/* ====== 方案B: 极简留白 ====== */
|
||
.phone-b { background: #FFFFFF; }
|
||
.phone-b .page-content { padding: 52px 24px 30px; height: 100%; display: flex; flex-direction: column; }
|
||
.phone-b .page-title { font-size: 26px; font-weight: 700; color: var(--text); margin-bottom: 4px; letter-spacing: -0.5px; }
|
||
.phone-b .page-subtitle { font-size: 13px; color: var(--text3); margin-bottom: 20px; line-height: 1.5; }
|
||
.phone-b .section-label { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; margin-top: 14px; }
|
||
.phone-b .agreement-box { background: #FAFAFA; border-radius: var(--radius-lg); padding: 16px; flex: 1; overflow-y: auto; font-size: 12px; color: var(--text2); line-height: 1.8; }
|
||
.phone-b .agreement-box::-webkit-scrollbar { width: 3px; }
|
||
.phone-b .agreement-box::-webkit-scrollbar-thumb { background: #E0E0E0; border-radius: 2px; }
|
||
.phone-b .agreement-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px; background: #FAFAFA; border-radius: var(--radius-lg); }
|
||
.phone-b .agreement-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); margin-top: 1px; flex-shrink: 0; }
|
||
.phone-b .agreement-check label { font-size: 12px; color: var(--text2); line-height: 1.5; }
|
||
.phone-b .agreement-check a { color: var(--primary); text-decoration: none; font-weight: 500; }
|
||
.phone-b .setting-group { margin-bottom: 10px; }
|
||
.phone-b .setting-group-title { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
|
||
.phone-b .setting-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #F5F5F5; }
|
||
.phone-b .setting-item-label { font-size: 13px; color: var(--text); }
|
||
.phone-b .setting-item-value { font-size: 12px; color: var(--text3); }
|
||
.phone-b .ios-toggle { width: 40px; height: 24px; border-radius: 12px; background: #E5E5EA; position: relative; flex-shrink: 0; }
|
||
.phone-b .ios-toggle.on { background: var(--success); }
|
||
.phone-b .ios-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.15); transition: transform 0.2s; }
|
||
.phone-b .ios-toggle.on::after { transform: translateX(16px); }
|
||
.phone-b .btn-next { margin-top: auto; background: var(--text); color: white; border: none; border-radius: var(--radius-full); padding: 12px; font-size: 14px; font-weight: 600; cursor: pointer; width: 100%; }
|
||
.phone-b .step-bar { display: flex; gap: 4px; margin-top: 12px; }
|
||
.phone-b .step-seg { flex: 1; height: 3px; border-radius: 1.5px; background: #E5E5EA; }
|
||
.phone-b .step-seg.done { background: var(--text); }
|
||
.phone-b .step-seg.current { background: var(--text); }
|
||
.phone-b .welcome-icon { width: 56px; height: 56px; border-radius: var(--radius-xl); background: #F5F5F7; display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 12px; }
|
||
.phone-b .feature-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
|
||
.phone-b .feature-row + .feature-row { border-top: 1px solid #F5F5F5; }
|
||
.phone-b .feature-icon-b { font-size: 20px; width: 28px; text-align: center; flex-shrink: 0; }
|
||
.phone-b .feature-info-b { flex: 1; }
|
||
.phone-b .feature-name-b { font-size: 13px; font-weight: 500; color: var(--text); }
|
||
.phone-b .feature-desc-b { font-size: 11px; color: var(--text3); margin-top: 1px; }
|
||
.phone-b .perm-entry-b { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-lg); background: #F5F5F7; cursor: pointer; margin-top: 6px; }
|
||
.phone-b .perm-entry-b:hover { background: #EDEDF0; }
|
||
.phone-b .perm-entry-b-icon { font-size: 18px; }
|
||
.phone-b .perm-entry-b-text { flex: 1; }
|
||
.phone-b .perm-entry-b-title { font-size: 13px; font-weight: 500; color: var(--text); }
|
||
.phone-b .perm-entry-b-desc { font-size: 11px; color: var(--text3); }
|
||
.phone-b .perm-entry-b-arrow { color: var(--text3); font-size: 14px; }
|
||
.phone-b .lang-item { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #F0F0F0; font-size: 13px; color: var(--text); }
|
||
.phone-b .lang-item .check { color: var(--primary); font-size: 16px; }
|
||
|
||
/* ====== 方案C: 沉浸渐变 ====== */
|
||
.phone-c { background: linear-gradient(160deg, #1A1A2E 0%, #16213E 50%, #0F3460 100%); }
|
||
.phone-c .page-content { padding: 48px 20px 30px; height: 100%; display: flex; flex-direction: column; position: relative; }
|
||
.phone-c .glow-orb { position: absolute; border-radius: 50%; filter: blur(60px); z-index: 0; }
|
||
.phone-c .page-title { font-size: 22px; font-weight: 700; color: #F5F5F5; text-align: center; margin-bottom: 2px; position: relative; z-index: 1; }
|
||
.phone-c .page-subtitle { font-size: 11px; color: rgba(255,255,255,0.5); text-align: center; margin-bottom: 12px; position: relative; z-index: 1; }
|
||
.phone-c .dark-card { background: rgba(255,255,255,0.08); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-2xl); padding: 14px; position: relative; z-index: 1; }
|
||
.phone-c .dark-card-sm { background: rgba(255,255,255,0.06); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-xl); padding: 10px 12px; position: relative; z-index: 1; }
|
||
.phone-c .lang-pill { display: inline-block; padding: 5px 12px; border-radius: var(--radius-full); font-size: 11px; font-weight: 500; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); cursor: pointer; }
|
||
.phone-c .lang-pill.active { background: linear-gradient(135deg, var(--primary), var(--accent)); color: white; border-color: transparent; box-shadow: 0 0 16px rgba(108,99,255,0.3); }
|
||
.phone-c .agreement-scroll { font-size: 11px; color: rgba(255,255,255,0.5); line-height: 1.7; max-height: 260px; overflow-y: auto; padding-right: 4px; }
|
||
.phone-c .agreement-scroll::-webkit-scrollbar { width: 3px; }
|
||
.phone-c .agreement-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
|
||
.phone-c .glow-checkbox { width: 18px; height: 18px; border-radius: var(--radius-sm); border: 2px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||
.phone-c .glow-checkbox.checked { background: linear-gradient(135deg, var(--primary), var(--accent)); border-color: transparent; }
|
||
.phone-c .glow-checkbox.checked::after { content: '✓'; color: white; font-size: 10px; font-weight: 700; }
|
||
.phone-c .setting-item-c { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; }
|
||
.phone-c .setting-item-c + .setting-item-c { border-top: 1px solid rgba(255,255,255,0.06); }
|
||
.phone-c .setting-label-c { font-size: 12px; color: #E5E5E5; }
|
||
.phone-c .setting-value-c { font-size: 11px; color: var(--accent); font-weight: 500; }
|
||
.phone-c .color-orbs { display: flex; gap: 6px; }
|
||
.phone-c .color-orb { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; }
|
||
.phone-c .color-orb.active { border-color: white; box-shadow: 0 0 8px currentColor; }
|
||
.phone-c .btn-glow { background: linear-gradient(135deg, var(--primary), #8B83FF); color: white; border: none; border-radius: var(--radius-full); padding: 10px 24px; font-size: 13px; font-weight: 600; cursor: pointer; width: 100%; text-align: center; box-shadow: 0 4px 20px rgba(108,99,255,0.4); position: relative; z-index: 1; }
|
||
.phone-c .step-glow { display: flex; gap: 6px; justify-content: center; margin-top: auto; padding-top: 10px; position: relative; z-index: 1; }
|
||
.phone-c .step-glow-dot { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.2); }
|
||
.phone-c .step-glow-dot.active { width: 18px; background: linear-gradient(90deg, var(--primary), var(--accent)); box-shadow: 0 0 8px rgba(108,99,255,0.4); }
|
||
.phone-c .welcome-emoji-c { font-size: 48px; text-align: center; margin-bottom: 4px; position: relative; z-index: 1; }
|
||
.phone-c .perm-entry-c { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-lg); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); cursor: pointer; }
|
||
.phone-c .perm-entry-c:hover { background: rgba(255,255,255,0.1); }
|
||
.phone-c .perm-entry-c-icon { width: 30px; height: 30px; border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(108,99,255,0.2), rgba(78,205,196,0.2)); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
|
||
.phone-c .perm-entry-c-text { flex: 1; }
|
||
.phone-c .perm-entry-c-title { font-size: 12px; font-weight: 500; color: #E5E5E5; }
|
||
.phone-c .perm-entry-c-desc { font-size: 10px; color: rgba(255,255,255,0.4); margin-top: 1px; }
|
||
.phone-c .perm-entry-c-arrow { color: rgba(255,255,255,0.3); font-size: 14px; }
|
||
.phone-c .guide-feature-c { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
|
||
.phone-c .guide-feature-c + .guide-feature-c { border-top: 1px solid rgba(255,255,255,0.06); }
|
||
.phone-c .guide-feature-c-icon { width: 30px; height: 30px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
|
||
.phone-c .guide-feature-c-name { font-size: 11px; font-weight: 500; color: #E5E5E5; }
|
||
.phone-c .guide-feature-c-desc { font-size: 9px; color: rgba(255,255,255,0.4); margin-top: 1px; }
|
||
|
||
/* ====== Decision ====== */
|
||
.decision-section { max-width: 960px; margin: 32px auto 0; padding: 0 24px 40px; }
|
||
.decision-card { background: white; border-radius: var(--radius-2xl); padding: 24px; box-shadow: var(--shadow-md); border: 2px solid transparent; cursor: pointer; transition: all 0.3s ease; margin-bottom: 12px; }
|
||
.decision-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
|
||
.decision-card.selected { border-color: var(--primary); background: rgba(108,99,255,0.03); }
|
||
.decision-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
|
||
.decision-card p { font-size: 13px; color: var(--text2); line-height: 1.5; }
|
||
.decision-card .tag { display: inline-block; padding: 2px 8px; border-radius: var(--radius-full); font-size: 10px; font-weight: 600; margin-right: 4px; }
|
||
.tag-recommend { background: rgba(108,99,255,0.1); color: var(--primary); }
|
||
.tag-visual { background: rgba(78,205,196,0.1); color: var(--accent); }
|
||
.tag-minimal { background: rgba(255,107,107,0.1); color: var(--secondary); }
|
||
.submit-section { text-align: center; margin-top: 20px; }
|
||
.submit-btn { background: var(--primary); color: white; border: none; border-radius: var(--radius-full); padding: 12px 48px; font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 16px rgba(108,99,255,0.3); transition: all 0.2s; }
|
||
.submit-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(108,99,255,0.4); }
|
||
|
||
@media (max-width: 920px) { .pages-row { flex-wrap: wrap; } .phone { width: 260px; height: 540px; } }
|
||
@media (max-width: 640px) { .pages-row { flex-direction: column; align-items: center; } .phone { width: 300px; height: 600px; } .approach-tabs { flex-direction: column; } }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<nav class="top-nav">
|
||
<h1>✨ 闲言APP — 引导页设计方案 v2</h1>
|
||
<p>第1页重新设计：权限简化为入口 + 新手指引内容</p>
|
||
</nav>
|
||
|
||
<div class="approach-tabs">
|
||
<div class="approach-tab active" onclick="switchApproach('a')">
|
||
<div class="tab-icon">🫧</div>
|
||
<div class="tab-title">方案A · 液态玻璃</div>
|
||
<div class="tab-desc">iOS 26 Liquid Glass</div>
|
||
</div>
|
||
<div class="approach-tab" onclick="switchApproach('b')">
|
||
<div class="tab-icon">⬜</div>
|
||
<div class="tab-title">方案B · 极简留白</div>
|
||
<div class="tab-desc">Apple Setup Wizard</div>
|
||
</div>
|
||
<div class="approach-tab" onclick="switchApproach('c')">
|
||
<div class="tab-icon">🌌</div>
|
||
<div class="tab-title">方案C · 沉浸渐变</div>
|
||
<div class="tab-desc">Immersive Gradient</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ====== 方案A ====== -->
|
||
<div class="approach-container active" id="approach-a">
|
||
<div class="approach-header">
|
||
<h2>🫧 方案A — iOS 26 液态玻璃风格</h2>
|
||
<p>权限简化为单行入口，释放空间展示核心功能指引。用户可点击"了解软件权限"查看详情，首屏聚焦于产品价值传递。</p>
|
||
<div class="pros-cons">
|
||
<div class="pros"><h4>✅ 优势</h4>· 复用 GlassContainer，开发成本低<br>· 首屏信息聚焦，新手指引充分<br>· 支持动态主题自适应</div>
|
||
<div class="cons"><h4>⚠️ 权衡</h4>· 毛玻璃有轻微性能开销<br>· 低端设备需降级<br>· 信息密度需平衡</div>
|
||
</div>
|
||
</div>
|
||
<div class="pages-row">
|
||
<!-- A-Page1 -->
|
||
<div class="phone-wrapper">
|
||
<div class="phone-label">第1页 · 欢迎与指引</div>
|
||
<div class="phone phone-a">
|
||
<div class="dynamic-island"></div>
|
||
<div class="home-indicator"></div>
|
||
<div class="floating-orb" style="width:120px;height:120px;background:#6C63FF;top:20px;right:-20px;"></div>
|
||
<div class="floating-orb" style="width:100px;height:100px;background:#4ECDC4;bottom:80px;left:-20px;animation-delay:2s;"></div>
|
||
<div class="floating-orb" style="width:70px;height:70px;background:#FF6B6B;top:220px;left:30px;animation-delay:4s;"></div>
|
||
<div class="page-content">
|
||
<div class="welcome-emoji">📖</div>
|
||
<div class="page-title">欢迎使用闲言</div>
|
||
<div class="page-subtitle">文字阅读更纯粹 · 句子阅读 + 壁纸制作</div>
|
||
|
||
<!-- Feature Guide -->
|
||
<div class="glass-card" style="margin-bottom:8px;">
|
||
<div style="font-size:11px;font-weight:600;margin-bottom:6px;color:var(--text);">✨ 核心功能</div>
|
||
<div class="guide-feature">
|
||
<div class="guide-feature-icon" style="background:rgba(108,99,255,0.1);">📝</div>
|
||
<div class="guide-feature-info">
|
||
<div class="guide-feature-name">每日拾句</div>
|
||
<div class="guide-feature-desc">每天精选一句，开启美好阅读</div>
|
||
</div>
|
||
</div>
|
||
<div class="guide-feature">
|
||
<div class="guide-feature-icon" style="background:rgba(255,107,107,0.1);">🎨</div>
|
||
<div class="guide-feature-info">
|
||
<div class="guide-feature-name">壁纸制作</div>
|
||
<div class="guide-feature-desc">将句子变成精美壁纸，分享给朋友</div>
|
||
</div>
|
||
</div>
|
||
<div class="guide-feature">
|
||
<div class="guide-feature-icon" style="background:rgba(78,205,196,0.1);">💡</div>
|
||
<div class="guide-feature-info">
|
||
<div class="guide-feature-name">灵感对话</div>
|
||
<div class="guide-feature-desc">AI 陪你聊灵感、翻译、写诗</div>
|
||
</div>
|
||
</div>
|
||
<div class="guide-feature">
|
||
<div class="guide-feature-icon" style="background:rgba(255,149,0,0.1);">📂</div>
|
||
<div class="guide-feature-info">
|
||
<div class="guide-feature-name">文件传输</div>
|
||
<div class="guide-feature-desc">局域网/蓝牙跨设备极速传输</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Permission Entry -->
|
||
<div class="perm-entry" style="margin-bottom:8px;">
|
||
<div class="perm-entry-icon">🔐</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-card-sm" style="margin-bottom:10px;">
|
||
<div style="font-size:11px;font-weight:600;margin-bottom:5px;color:var(--text);">🌐 语言</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>
|
||
<div class="step-dots"><div class="step-dot active"></div><div class="step-dot"></div><div class="step-dot"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- A-Page2 -->
|
||
<div class="phone-wrapper">
|
||
<div class="phone-label">第2页 · 软件协议</div>
|
||
<div class="phone phone-a">
|
||
<div class="dynamic-island"></div>
|
||
<div class="home-indicator"></div>
|
||
<div class="floating-orb" style="width:100px;height:100px;background:#6C63FF;top:60px;left:-10px;animation-delay:1s;"></div>
|
||
<div class="floating-orb" style="width:90px;height:90px;background:#4ECDC4;bottom:120px;right:-10px;animation-delay:3s;"></div>
|
||
<div class="page-content">
|
||
<div style="font-size:36px;text-align:center;margin-bottom:6px;">📜</div>
|
||
<div class="page-title">软件协议</div>
|
||
<div class="page-subtitle">请阅读并同意以下协议以继续</div>
|
||
<div class="glass-card" style="flex:1;margin-bottom:8px;display:flex;flex-direction:column;">
|
||
<div style="display:flex;gap:6px;margin-bottom:8px;">
|
||
<span style="padding:4px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:500;background:rgba(108,99,255,0.1);color:var(--primary);">用户协议</span>
|
||
<span style="padding:4px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:500;background:rgba(78,205,196,0.1);color:var(--accent);">隐私政策</span>
|
||
<span style="padding:4px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:500;background:rgba(255,149,0,0.1);color:var(--warning);">权限说明</span>
|
||
</div>
|
||
<div class="agreement-text">
|
||
<p style="margin-bottom:6px;"><strong>一、总则</strong></p>
|
||
<p>欢迎您使用闲言（WordsLeisure）应用程序。在使用本应用之前，请您仔细阅读并充分理解本协议各条款。</p>
|
||
<p style="margin-top:4px;">本协议是您与闲言之间关于使用闲言服务所订立的协议。您点击"同意"按钮即表示您已阅读并同意本协议的约束。</p>
|
||
<p style="margin-top:6px;"><strong>二、服务内容</strong></p>
|
||
<p style="margin-top:2px;">闲言提供句子阅读、壁纸制作、灵感对话、文件传输等服务功能。</p>
|
||
<p style="margin-top:6px;"><strong>三、隐私保护</strong></p>
|
||
<p style="margin-top:2px;">我们重视您的隐私保护。闲言仅收集必要信息以提供核心服务，不会向第三方出售您的个人数据。</p>
|
||
<p style="margin-top:6px;"><strong>四、知识产权</strong></p>
|
||
<p style="margin-top:2px;">闲言应用中的所有内容均受知识产权法保护。</p>
|
||
</div>
|
||
</div>
|
||
<div class="checkbox-row"><div class="checkbox checked"></div><span style="font-size:11px;color:var(--text2);">我已阅读并同意 <a href="#" style="color:var(--primary);text-decoration:none;font-weight:500;">用户协议</a> 和 <a href="#" style="color:var(--primary);text-decoration:none;font-weight:500;">隐私政策</a></span></div>
|
||
<div class="checkbox-row" style="margin-top:4px;"><div class="checkbox"></div><span style="font-size:11px;color:var(--text2);">我已阅读 <a href="#" style="color:var(--primary);text-decoration:none;font-weight:500;">权限使用说明</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>
|
||
<!-- A-Page3 -->
|
||
<div class="phone-wrapper">
|
||
<div class="phone-label">第3页 · 个性化设置</div>
|
||
<div class="phone phone-a">
|
||
<div class="dynamic-island"></div>
|
||
<div class="home-indicator"></div>
|
||
<div class="floating-orb" style="width:110px;height:110px;background:#FF6B6B;top:30px;right:-15px;animation-delay:0.5s;"></div>
|
||
<div class="floating-orb" style="width:80px;height:80px;background:#6C63FF;bottom:100px;left:10px;animation-delay:2.5s;"></div>
|
||
<div class="page-content">
|
||
<div style="font-size:36px;text-align:center;margin-bottom:6px;">🎨</div>
|
||
<div class="page-title">个性化设置</div>
|
||
<div class="page-subtitle">打造专属于你的阅读体验</div>
|
||
<div class="glass-card-sm" style="margin-bottom:6px;">
|
||
<div class="setting-row"><span class="setting-label">🌓 主题模式</span><span class="setting-value">跟随系统</span></div>
|
||
<div class="setting-row"><span class="setting-label">🎨 强调色</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">🔤 字体大小</span><span class="setting-value">标准</span></div>
|
||
</div>
|
||
<div class="glass-card-sm" style="margin-bottom:6px;">
|
||
<div class="setting-row"><span class="setting-label">🫧 毛玻璃强度</span><span class="setting-value">中等</span></div>
|
||
<div class="setting-row"><span class="setting-label">✨ 动画强度</span><span class="setting-value">标准</span></div>
|
||
<div class="setting-row"><span class="setting-label">⬜ 圆角风格</span><span class="setting-value">标准</span></div>
|
||
<div class="setting-row"><span class="setting-label">🃏 卡片样式</span><span class="setting-value">标准</span></div>
|
||
</div>
|
||
<div class="glass-card-sm" style="margin-bottom:8px;text-align:center;">
|
||
<div style="font-size:10px;color:var(--text3);margin-bottom:5px;">实时预览</div>
|
||
<div style="padding:10px;border-radius:var(--radius-lg);background:linear-gradient(135deg,#6C63FF,#8B83FF);color:white;">
|
||
<div style="font-size:13px;font-weight:600;">生活不是等待暴风雨过去</div>
|
||
<div style="font-size:10px;opacity:0.8;margin-top:2px;">而是学会在雨中翩翩起舞</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>
|
||
</div>
|
||
|
||
<!-- ====== 方案B ====== -->
|
||
<div class="approach-container" id="approach-b">
|
||
<div class="approach-header">
|
||
<h2>⬜ 方案B — 极简留白风格</h2>
|
||
<p>Apple Setup Wizard 风格，权限入口极简化，功能指引用图标+文字列表清晰呈现，大量留白让用户快速理解。</p>
|
||
<div class="pros-cons">
|
||
<div class="pros"><h4>✅ 优势</h4>· 信息层次最清晰<br>· 性能最优，无渲染开销<br>· 适配所有设备</div>
|
||
<div class="cons"><h4>⚠️ 权衡</h4>· 视觉冲击力较弱<br>· 与闲言液态玻璃风格有差异</div>
|
||
</div>
|
||
</div>
|
||
<div class="pages-row">
|
||
<!-- B-Page1 -->
|
||
<div class="phone-wrapper">
|
||
<div class="phone-label">第1页 · 欢迎与指引</div>
|
||
<div class="phone phone-b">
|
||
<div class="dynamic-island"></div>
|
||
<div class="home-indicator"></div>
|
||
<div class="page-content">
|
||
<div class="welcome-icon">📖</div>
|
||
<div class="page-title">欢迎使用闲言</div>
|
||
<div class="page-subtitle">文字阅读更纯粹。了解核心功能，开启你的阅读之旅。</div>
|
||
|
||
<div class="section-label">核心功能</div>
|
||
<div class="feature-row">
|
||
<div class="feature-icon-b">📝</div>
|
||
<div class="feature-info-b">
|
||
<div class="feature-name-b">每日拾句</div>
|
||
<div class="feature-desc-b">每天精选一句，开启美好阅读</div>
|
||
</div>
|
||
</div>
|
||
<div class="feature-row">
|
||
<div class="feature-icon-b">🎨</div>
|
||
<div class="feature-info-b">
|
||
<div class="feature-name-b">壁纸制作</div>
|
||
<div class="feature-desc-b">将句子变成精美壁纸，分享给朋友</div>
|
||
</div>
|
||
</div>
|
||
<div class="feature-row">
|
||
<div class="feature-icon-b">💡</div>
|
||
<div class="feature-info-b">
|
||
<div class="feature-name-b">灵感对话</div>
|
||
<div class="feature-desc-b">AI 陪你聊灵感、翻译、写诗</div>
|
||
</div>
|
||
</div>
|
||
<div class="feature-row">
|
||
<div class="feature-icon-b">📂</div>
|
||
<div class="feature-info-b">
|
||
<div class="feature-name-b">文件传输</div>
|
||
<div class="feature-desc-b">局域网/蓝牙跨设备极速传输</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="perm-entry-b">
|
||
<div class="perm-entry-b-icon">🔐</div>
|
||
<div class="perm-entry-b-text">
|
||
<div class="perm-entry-b-title">了解软件权限</div>
|
||
<div class="perm-entry-b-desc">闲言仅请求必要权限</div>
|
||
</div>
|
||
<div class="perm-entry-b-arrow">›</div>
|
||
</div>
|
||
|
||
<div class="section-label" style="margin-top:12px;">语言</div>
|
||
<div class="lang-item">简体中文 <span class="check">✓</span></div>
|
||
<div class="lang-item">English</div>
|
||
<div class="lang-item">日本語</div>
|
||
|
||
<button class="btn-next" style="margin-top:auto;">继续</button>
|
||
<div class="step-bar"><div class="step-seg current"></div><div class="step-seg"></div><div class="step-seg"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- B-Page2 -->
|
||
<div class="phone-wrapper">
|
||
<div class="phone-label">第2页 · 软件协议</div>
|
||
<div class="phone phone-b">
|
||
<div class="dynamic-island"></div>
|
||
<div class="home-indicator"></div>
|
||
<div class="page-content">
|
||
<div class="page-title">协议与政策</div>
|
||
<div class="page-subtitle">请阅读并同意以下协议，这是使用闲言的基础。</div>
|
||
<div class="agreement-box">
|
||
<p style="margin-bottom:8px;font-weight:600;color:var(--text);font-size:13px;">用户服务协议</p>
|
||
<p><strong>一、总则</strong></p>
|
||
<p>欢迎您使用闲言（WordsLeisure）应用程序。请您仔细阅读并充分理解本协议各条款。</p>
|
||
<p style="margin-top:4px;">您点击"同意"按钮即表示您已阅读并同意受本协议约束。</p>
|
||
<p style="margin-top:6px;"><strong>二、服务内容</strong></p>
|
||
<p>闲言提供句子阅读、壁纸制作、灵感对话、文件传输等服务功能。</p>
|
||
<p style="margin-top:6px;"><strong>三、隐私保护</strong></p>
|
||
<p>我们重视您的隐私保护。闲言仅收集必要信息以提供核心服务。</p>
|
||
<p style="margin-top:6px;"><strong>四、知识产权</strong></p>
|
||
<p>闲言应用中的所有内容均受知识产权法保护。</p>
|
||
<p style="margin-top:10px;font-weight:600;color:var(--text);font-size:13px;">隐私政策</p>
|
||
<p style="margin-top:2px;">闲言深知个人信息对您的重要性，我们将按照法律法规保护您的个人信息及隐私安全。</p>
|
||
</div>
|
||
<div class="agreement-check"><input type="checkbox" checked id="b-agree1"><label for="b-agree1">我已阅读并同意 <a href="#">《用户服务协议》</a> 和 <a href="#">《隐私政策》</a></label></div>
|
||
<div class="agreement-check" style="margin-top:6px;background:transparent;padding:0 12px;"><input type="checkbox" id="b-agree2"><label for="b-agree2" style="font-size:11px;color:var(--text3);">我已阅读 <a href="#">《权限使用说明》</a></label></div>
|
||
<button class="btn-next" style="margin-top:auto;">同意并继续</button>
|
||
<div class="step-bar"><div class="step-seg done"></div><div class="step-seg current"></div><div class="step-seg"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- B-Page3 -->
|
||
<div class="phone-wrapper">
|
||
<div class="phone-label">第3页 · 个性化设置</div>
|
||
<div class="phone phone-b">
|
||
<div class="dynamic-island"></div>
|
||
<div class="home-indicator"></div>
|
||
<div class="page-content">
|
||
<div class="page-title">个性化</div>
|
||
<div class="page-subtitle">稍后可在设置中随时调整这些选项。</div>
|
||
<div class="setting-group">
|
||
<div class="setting-group-title">外观</div>
|
||
<div class="setting-item"><span class="setting-item-label">主题模式</span><span class="setting-item-value">跟随系统 ›</span></div>
|
||
<div class="setting-item"><span class="setting-item-label">强调色</span><div style="display:flex;gap:5px;"><div style="width:16px;height:16px;border-radius:50%;background:#6C63FF;border:2px solid var(--text);"></div><div style="width:16px;height:16px;border-radius:50%;background:#FF6B6B;border:2px solid transparent;"></div><div style="width:16px;height:16px;border-radius:50%;background:#4ECDC4;border:2px solid transparent;"></div><div style="width:16px;height:16px;border-radius:50%;background:#3B82F6;border:2px solid transparent;"></div><div style="width:16px;height:16px;border-radius:50%;background:#F59E0B;border:2px solid transparent;"></div></div></div>
|
||
</div>
|
||
<div class="setting-group">
|
||
<div class="setting-group-title">排版</div>
|
||
<div class="setting-item"><span class="setting-item-label">字体大小</span><span class="setting-item-value">标准 ›</span></div>
|
||
<div class="setting-item"><span class="setting-item-label">字体粗细</span><span class="setting-item-value">常规 ›</span></div>
|
||
</div>
|
||
<div class="setting-group">
|
||
<div class="setting-group-title">效果</div>
|
||
<div class="setting-item"><span class="setting-item-label">毛玻璃效果</span><div class="ios-toggle on"></div></div>
|
||
<div class="setting-item"><span class="setting-item-label">动画效果</span><div class="ios-toggle on"></div></div>
|
||
<div class="setting-item"><span class="setting-item-label">圆角风格</span><span class="setting-item-value">标准 ›</span></div>
|
||
<div class="setting-item"><span class="setting-item-label">卡片样式</span><span class="setting-item-value">标准 ›</span></div>
|
||
</div>
|
||
<div class="setting-group">
|
||
<div class="setting-group-title">功能</div>
|
||
<div class="setting-item"><span class="setting-item-label">摇一摇换句</span><div class="ios-toggle on"></div></div>
|
||
<div class="setting-item"><span class="setting-item-label">音效反馈</span><div class="ios-toggle off"></div></div>
|
||
</div>
|
||
<button class="btn-next" style="margin-top:auto;">完成设置</button>
|
||
<div class="step-bar"><div class="step-seg done"></div><div class="step-seg done"></div><div class="step-seg current"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ====== 方案C ====== -->
|
||
<div class="approach-container" id="approach-c">
|
||
<div class="approach-header">
|
||
<h2>🌌 方案C — 沉浸渐变风格</h2>
|
||
<p>深色沉浸 + 发光渐变，权限入口融入暗色卡片，功能指引用微光图标呈现，科技感最强。</p>
|
||
<div class="pros-cons">
|
||
<div class="pros"><h4>✅ 优势</h4>· 视觉冲击力最强<br>· OLED 屏幕友好<br>· 品牌辨识度高</div>
|
||
<div class="cons"><h4>⚠️ 权衡</h4>· 日间模式需额外适配<br>· 低端设备可能卡顿<br>· 与现有浅色风格差异大</div>
|
||
</div>
|
||
</div>
|
||
<div class="pages-row">
|
||
<!-- C-Page1 -->
|
||
<div class="phone-wrapper">
|
||
<div class="phone-label">第1页 · 欢迎与指引</div>
|
||
<div class="phone phone-c">
|
||
<div class="dynamic-island"></div>
|
||
<div class="home-indicator" style="background:rgba(255,255,255,0.15);"></div>
|
||
<div class="glow-orb" style="width:160px;height:160px;background:#6C63FF;top:-20px;right:-40px;opacity:0.3;"></div>
|
||
<div class="glow-orb" style="width:120px;height:120px;background:#4ECDC4;bottom:60px;left:-30px;opacity:0.2;"></div>
|
||
<div class="glow-orb" style="width:70px;height:70px;background:#FF6B6B;top:200px;left:50px;opacity:0.15;"></div>
|
||
<div class="page-content">
|
||
<div class="welcome-emoji-c">📖</div>
|
||
<div class="page-title">欢迎使用闲言</div>
|
||
<div class="page-subtitle">文字阅读更纯粹</div>
|
||
|
||
<div class="dark-card" style="margin-bottom:6px;">
|
||
<div style="font-size:10px;font-weight:600;margin-bottom:5px;color:rgba(255,255,255,0.6);">✨ 核心功能</div>
|
||
<div class="guide-feature-c">
|
||
<div class="guide-feature-c-icon" style="background:rgba(108,99,255,0.15);">📝</div>
|
||
<div style="flex:1;"><div class="guide-feature-c-name">每日拾句</div><div class="guide-feature-c-desc">每天精选一句，开启美好阅读</div></div>
|
||
</div>
|
||
<div class="guide-feature-c">
|
||
<div class="guide-feature-c-icon" style="background:rgba(255,107,107,0.15);">🎨</div>
|
||
<div style="flex:1;"><div class="guide-feature-c-name">壁纸制作</div><div class="guide-feature-c-desc">将句子变成精美壁纸</div></div>
|
||
</div>
|
||
<div class="guide-feature-c">
|
||
<div class="guide-feature-c-icon" style="background:rgba(78,205,196,0.15);">💡</div>
|
||
<div style="flex:1;"><div class="guide-feature-c-name">灵感对话</div><div class="guide-feature-c-desc">AI 陪你聊灵感、翻译、写诗</div></div>
|
||
</div>
|
||
<div class="guide-feature-c">
|
||
<div class="guide-feature-c-icon" style="background:rgba(255,149,0,0.15);">📂</div>
|
||
<div style="flex:1;"><div class="guide-feature-c-name">文件传输</div><div class="guide-feature-c-desc">跨设备极速传输</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="perm-entry-c" style="margin-bottom:6px;">
|
||
<div class="perm-entry-c-icon">🔐</div>
|
||
<div class="perm-entry-c-text">
|
||
<div class="perm-entry-c-title">了解软件权限</div>
|
||
<div class="perm-entry-c-desc">闲言仅请求必要权限</div>
|
||
</div>
|
||
<div class="perm-entry-c-arrow">›</div>
|
||
</div>
|
||
|
||
<div class="dark-card-sm" style="margin-bottom:8px;">
|
||
<div style="font-size:10px;font-weight:600;margin-bottom:5px;color:rgba(255,255,255,0.5);">🌐 语言</div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:5px;justify-content:center;">
|
||
<span class="lang-pill active">简体中文</span>
|
||
<span class="lang-pill">English</span>
|
||
<span class="lang-pill">日本語</span>
|
||
<span class="lang-pill">繁體中文</span>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="btn-glow">开始使用</button>
|
||
<div class="step-glow"><div class="step-glow-dot active"></div><div class="step-glow-dot"></div><div class="step-glow-dot"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- C-Page2 -->
|
||
<div class="phone-wrapper">
|
||
<div class="phone-label">第2页 · 软件协议</div>
|
||
<div class="phone phone-c">
|
||
<div class="dynamic-island"></div>
|
||
<div class="home-indicator" style="background:rgba(255,255,255,0.15);"></div>
|
||
<div class="glow-orb" style="width:140px;height:140px;background:#6C63FF;top:40px;left:-30px;opacity:0.25;"></div>
|
||
<div class="glow-orb" style="width:100px;height:100px;background:#4ECDC4;bottom:100px;right:-20px;opacity:0.2;"></div>
|
||
<div class="page-content">
|
||
<div style="font-size:40px;text-align:center;margin-bottom:6px;position:relative;z-index:1;">📜</div>
|
||
<div class="page-title">软件协议</div>
|
||
<div class="page-subtitle">请阅读并同意以下协议</div>
|
||
<div class="dark-card" style="flex:1;margin-bottom:8px;display:flex;flex-direction:column;">
|
||
<div style="display:flex;gap:5px;margin-bottom:8px;">
|
||
<span style="padding:3px 10px;border-radius:var(--radius-full);font-size:10px;font-weight:500;background:linear-gradient(135deg,rgba(108,99,255,0.3),rgba(108,99,255,0.1));color:#B8B3FF;">用户协议</span>
|
||
<span style="padding:3px 10px;border-radius:var(--radius-full);font-size:10px;font-weight:500;background:linear-gradient(135deg,rgba(78,205,196,0.3),rgba(78,205,196,0.1));color:#7EDED8;">隐私政策</span>
|
||
<span style="padding:3px 10px;border-radius:var(--radius-full);font-size:10px;font-weight:500;background:linear-gradient(135deg,rgba(255,149,0,0.3),rgba(255,149,0,0.1));color:#FFB84D;">权限说明</span>
|
||
</div>
|
||
<div class="agreement-scroll">
|
||
<p style="margin-bottom:4px;font-weight:600;color:rgba(255,255,255,0.7);">一、总则</p>
|
||
<p>欢迎您使用闲言（WordsLeisure）。请您仔细阅读本协议各条款。</p>
|
||
<p style="margin-top:4px;font-weight:600;color:rgba(255,255,255,0.7);">二、服务内容</p>
|
||
<p style="margin-top:2px;">闲言提供句子阅读、壁纸制作、灵感对话、文件传输等服务。</p>
|
||
<p style="margin-top:4px;font-weight:600;color:rgba(255,255,255,0.7);">三、隐私保护</p>
|
||
<p style="margin-top:2px;">闲言仅收集必要信息以提供核心服务，不会向第三方出售您的个人数据。</p>
|
||
<p style="margin-top:4px;font-weight:600;color:rgba(255,255,255,0.7);">四、知识产权</p>
|
||
<p style="margin-top:2px;">闲言应用中的所有内容均受知识产权法保护。</p>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:8px;position:relative;z-index:1;"><div class="glow-checkbox checked"></div><span style="font-size:11px;color:rgba(255,255,255,0.5);">我已阅读并同意 <a href="#" style="color:#B8B3FF;text-decoration:none;">用户协议</a> 和 <a href="#" style="color:#7EDED8;text-decoration:none;">隐私政策</a></span></div>
|
||
<div style="display:flex;align-items:center;gap:8px;margin-top:4px;position:relative;z-index:1;"><div class="glow-checkbox"></div><span style="font-size:11px;color:rgba(255,255,255,0.4);">我已阅读 <a href="#" style="color:#FFB84D;text-decoration:none;">权限使用说明</a></span></div>
|
||
<button class="btn-glow" style="margin-top:8px;">同意并继续</button>
|
||
<div class="step-glow"><div class="step-glow-dot"></div><div class="step-glow-dot active"></div><div class="step-glow-dot"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- C-Page3 -->
|
||
<div class="phone-wrapper">
|
||
<div class="phone-label">第3页 · 个性化设置</div>
|
||
<div class="phone phone-c">
|
||
<div class="dynamic-island"></div>
|
||
<div class="home-indicator" style="background:rgba(255,255,255,0.15);"></div>
|
||
<div class="glow-orb" style="width:130px;height:130px;background:#FF6B6B;top:20px;right:-30px;opacity:0.2;"></div>
|
||
<div class="glow-orb" style="width:90px;height:90px;background:#6C63FF;bottom:80px;left:10px;opacity:0.2;"></div>
|
||
<div class="page-content">
|
||
<div style="font-size:40px;text-align:center;margin-bottom:6px;position:relative;z-index:1;">🎨</div>
|
||
<div class="page-title">个性化</div>
|
||
<div class="page-subtitle">打造你的专属体验</div>
|
||
<div class="dark-card-sm" style="margin-bottom:5px;">
|
||
<div class="setting-item-c"><span class="setting-label-c">🌓 主题模式</span><span class="setting-value-c">跟随系统</span></div>
|
||
<div class="setting-item-c"><span class="setting-label-c">🎨 强调色</span><div class="color-orbs"><div class="color-orb active" style="background:#6C63FF;color:#6C63FF;"></div><div class="color-orb" style="background:#FF6B6B;color:#FF6B6B;"></div><div class="color-orb" style="background:#4ECDC4;color:#4ECDC4;"></div><div class="color-orb" style="background:#3B82F6;color:#3B82F6;"></div><div class="color-orb" style="background:#F59E0B;color:#F59E0B;"></div></div></div>
|
||
<div class="setting-item-c"><span class="setting-label-c">🔤 字体大小</span><span class="setting-value-c">标准</span></div>
|
||
</div>
|
||
<div class="dark-card-sm" style="margin-bottom:5px;">
|
||
<div class="setting-item-c"><span class="setting-label-c">🫧 毛玻璃</span><span class="setting-value-c">中等</span></div>
|
||
<div class="setting-item-c"><span class="setting-label-c">✨ 动画</span><span class="setting-value-c">标准</span></div>
|
||
<div class="setting-item-c"><span class="setting-label-c">⬜ 圆角</span><span class="setting-value-c">标准</span></div>
|
||
<div class="setting-item-c"><span class="setting-label-c">🃏 卡片</span><span class="setting-value-c">标准</span></div>
|
||
</div>
|
||
<div class="dark-card-sm" style="margin-bottom:8px;text-align:center;">
|
||
<div style="font-size:9px;color:rgba(255,255,255,0.3);margin-bottom:4px;">实时预览</div>
|
||
<div style="padding:10px;border-radius:var(--radius-lg);background:linear-gradient(135deg,#6C63FF,#4ECDC4);color:white;">
|
||
<div style="font-size:13px;font-weight:600;">生活不是等待暴风雨过去</div>
|
||
<div style="font-size:10px;opacity:0.8;margin-top:2px;">而是学会在雨中翩翩起舞</div>
|
||
</div>
|
||
</div>
|
||
<button class="btn-glow">完成设置</button>
|
||
<div class="step-glow"><div class="step-glow-dot"></div><div class="step-glow-dot"></div><div class="step-glow-dot active"></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Decision -->
|
||
<div class="decision-section">
|
||
<h2 style="font-size:18px;font-weight:700;margin-bottom:4px;">🎯 选择你倾向的方案</h2>
|
||
<p style="font-size:13px;color:var(--text2);margin-bottom:16px;">点击选择后，我将基于该方案进行详细设计和开发。</p>
|
||
<div class="decision-card" onclick="selectDecision(this, 'a')">
|
||
<h3>🫧 方案A · 液态玻璃 <span class="tag tag-recommend">推荐</span> <span class="tag tag-visual">视觉最佳</span></h3>
|
||
<p>与闲言 iOS 26 风格高度统一，复用 GlassContainer，首屏聚焦功能指引 + 权限入口。</p>
|
||
</div>
|
||
<div class="decision-card" onclick="selectDecision(this, 'b')">
|
||
<h3>⬜ 方案B · 极简留白 <span class="tag tag-minimal">最简约</span></h3>
|
||
<p>Apple Setup Wizard 风格，信息层次最清晰，性能最优，适配所有设备。</p>
|
||
</div>
|
||
<div class="decision-card" onclick="selectDecision(this, 'c')">
|
||
<h3>🌌 方案C · 沉浸渐变 <span class="tag tag-visual">最酷炫</span></h3>
|
||
<p>深色沉浸 + 发光渐变，科技感最强，OLED 友好，但日间适配复杂。</p>
|
||
</div>
|
||
<div class="submit-section"><button class="submit-btn" onclick="confirmDecision()">确认选择</button></div>
|
||
</div>
|
||
|
||
<script>
|
||
let selectedApproach = null;
|
||
function switchApproach(id) {
|
||
document.querySelectorAll('.approach-container').forEach(el => el.classList.remove('active'));
|
||
document.querySelectorAll('.approach-tab').forEach(el => el.classList.remove('active'));
|
||
document.getElementById('approach-' + id).classList.add('active');
|
||
document.querySelectorAll('.approach-tab')[id === 'a' ? 0 : id === 'b' ? 1 : 2].classList.add('active');
|
||
}
|
||
function selectDecision(el, approach) {
|
||
document.querySelectorAll('.decision-card').forEach(c => c.classList.remove('selected'));
|
||
el.classList.add('selected');
|
||
selectedApproach = approach;
|
||
}
|
||
function confirmDecision() {
|
||
if (!selectedApproach) { alert('请先选择一个方案！'); return; }
|
||
const names = { a: '方案A · 液态玻璃', b: '方案B · 极简留白', c: '方案C · 沉浸渐变' };
|
||
alert('你选择了：' + names[selectedApproach] + '\n\n请回到对话中告诉我你的选择。');
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|