jack/digital-psychology
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
14b836f53be48842569a0de177b87e4f919fb439
digital-psychology/pages/xingjing.html
T
jackyu66gitandCursor 2fb1dfee14 chore: seal Design Vision v1 and monorepo scaffold 
Archive the differentiated YuXinGu product docs, AI engineering system,
design contract, and Go/Vue scaffold. Next execution prioritizes Cece-parity
over early innovation (see .ai/product/STRATEGY.md).

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-02 16:00:44 +08:00

238 lines
15 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-LVVXH3TL04"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-LVVXH3TL04');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1">
<title>星镜 · 愈心谷</title>
<link rel="stylesheet" href="../css/app.css">
<link rel="stylesheet" href="../css/xingjing.css">
</head>
<body class="app-page" data-nav="none">
<div class="topbar" id="topbar">
<button class="back-btn" id="backBtn" onclick="goBack()">←</button>
<img src="../logo.png" alt="愈心谷"><span class="tbt">星镜</span>
<div style="width:32px;flex-shrink:0"></div>
</div>
<!-- ═══════ PAGE: 首页 ═══════ -->
<div class="page active" id="page-home">
<div class="hero-card" id="homeHero">
<div class="h-stars"><span></span><span></span><span></span><span></span><span></span></div>
<div class="hlabel" id="hlMonth">今日星象</div>
<div class="hzodiac" id="hzEmoji">🔭</div>
<div class="hsign" id="hzSign">探索你的星盘</div>
<div class="hdate" id="hzDate">发现内在的宇宙</div>
<div class="haction" onclick="goTest()">✦ 开始星盘测试</div>
</div>
<div class="horo-card" id="horoCard">
<div class="hday"></div><div class="hstars">★★★★☆</div><div class="hmsg"></div>
<div style="font-size:10px;color:var(--sub);margin-top:6px">💛 幸运色：<span id="hlColor">—</span> · 幸运数字：<span id="hlNum">—</span></div>
</div>
<div class="quick-grid">
<div class="quick-item" onclick="goTest()"><div class="qi">🔮</div><div class="qt">星盘测试</div><div class="qd">生辰排盘 · 性格解读</div></div>
<div class="quick-item" onclick="switchTab('chart')"><div class="qi">◎</div><div class="qt">动态星盘</div><div class="qd">行星运转 · 实时动画</div></div>
<div class="quick-item" onclick="switchTab('community')"><div class="qi">▤</div><div class="qt">视频社区</div><div class="qd">达人解读 · 热门内容</div></div>
<div class="quick-item" onclick="switchTab('report')"><div class="qi">🎬</div><div class="qt">我的报告</div><div class="qd">历史记录 · 视频回放</div></div>
<div class="quick-item" onclick="openSchulte()"><div class="qi">🧊</div><div class="qt">舒尔特训练</div><div class="qd">3D魔方 · 前额叶激活</div></div>
<div class="quick-item" onclick="openSynastry()"><div class="qi">💫</div><div class="qt">合盘配对</div><div class="qd">双人星盘 · 缘分契合度</div></div>
</div>
<div class="sec-head"><span class="dot"></span>热门解读</div>
<div class="scroll-x" id="trendingRow"></div>
</div>
<!-- ═══════ PAGE: 测试-输入出生 ═══════ -->
<div class="page" id="page-test-birth">
<div class="back-row"><span class="bk" onclick="goHome()">← 返回首页</span></div>
<div class="card" style="text-align:center">
<div style="font-size:36px;margin-bottom:6px">🔭</div>
<div class="card-title">输入出生信息</div>
<div class="card-sub">解锁专属星盘与性格解读</div>
</div>
<div class="card">
<div class="input-row">
<input type="number" id="tYear" placeholder="1990" style="flex:1.2"><span class="lbl">年</span>
<select id="tMonth" style="flex:0.9"><option value="">月</option></select>
<select id="tDay" style="flex:0.9"><option value="">日</option></select>
</div>
<div class="input-row">
<select id="tHour" style="flex:1"><option value="">时辰</option></select>
<span class="lbl">时</span>
</div>
<div class="input-row">
<select id="tProv" style="flex:1" onchange="onProvChange()"><option value="">省份</option></select>
<select id="tCity" style="flex:1" onchange="onCityChange()"><option value="">市区</option></select>
<select id="tDist" style="flex:1"><option value="">县/区</option></select>
</div>
<button class="btn btn-pri btn-block" onclick="startQuiz()" style="margin-top:8px">下一步 →</button>
</div>
</div>
<!-- ═══════ PAGE: 测试-答题 ═══════ -->
<div class="page" id="page-test-quiz">
<div class="back-row"><span class="bk" onclick="goTest()">← 返回修改</span></div>
<div style="text-align:center;margin-bottom:8px">
<span style="font-size:11px;color:var(--sub)" id="quizHint"></span>
<div style="font-size:12px;color:var(--sub);margin-top:2px">第 <span id="qNow">1</span> / <span id="qTotal">10</span> 题</div>
<div style="height:4px;background:#eee;border-radius:2px;overflow:hidden;margin-top:4px">
<div id="qBar" style="height:100%;background:var(--pri);border-radius:2px;transition:width 0.3s;width:10%"></div>
</div>
</div>
<div id="quizCard"></div>
</div>
<!-- ═══════ PAGE: 测试-结果 ═══════ -->
<div class="page" id="page-test-result">
<div class="back-row"><span class="bk" onclick="goHome()">← 返回首页</span></div>
<div id="resultContent"></div>
</div>
<!-- ═══════ PAGE: 星盘 ═══════ -->
<div class="page" id="page-chart">
<div style="text-align:center;padding:8px 0 4px;font-size:12px;color:var(--sub)" id="chartHint">点击行星查看详情</div>
<canvas id="chartCanvas"></canvas>
<div class="chart-info" id="chartInfo">
<span style="cursor:pointer;color:var(--pri);font-weight:600" onclick="toggleChartMode()" id="chartToggle">◎ 实时天象</span>
<span style="margin-left:8px;font-size:11px;color:var(--sub)">拖拽旋转 · 双指缩放 · 点击行星</span>
</div>
</div>
<!-- ═══════ PAGE: 报告 ═══════ -->
<div class="page" id="page-report">
<div class="sec-head"><span class="dot"></span>测试历史</div>
<div id="historyList"></div>
</div>
<!-- ═══════ PAGE: 社区 ═══════ -->
<div class="page" id="page-community">
<div class="feed-tabs" id="feedTabs"></div>
<div id="feedList"></div>
</div>
<!-- ═══════ PAGE: 我的 ═══════ -->
<div class="page" id="page-profile">
<div class="card" style="text-align:center">
<div style="width:56px;height:56px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center" id="pAvatar"><span class="zodiac-dh earth" style="width:56px;height:56px;font-size:26px">羯</span></div>
<div class="card-title" id="pSign">探索者</div><div class="card-sub" id="pDetail">完成测试解锁完整档案</div>
</div>
<div class="sec-head"><span class="dot"></span>成就徽章</div>
<div class="badge-row" id="badgeRow"></div>
<div class="sec-head"><span class="dot"></span>会员订阅</div>
<div class="tier-card"><div class="t-name">免费版</div><div class="t-price">¥0<span class="unit"> /月</span></div><div class="t-feat">✓ 基础排盘 &nbsp; ✓ 30秒带水印报告 &nbsp; ✓ 每日运势 &nbsp; ✓ 社区浏览</div></div>
<div class="tier-card pro" onclick="openPurchase()"><div class="t-name">星镜会员</div><div class="t-price">¥24<span class="unit"> /月</span> <span style="font-size:11px;color:var(--sub);text-decoration:line-through">首月¥9.9</span></div><div class="t-feat">✓ 无水印完整视频报告 &nbsp; ✓ 高清3D星盘 &nbsp; ✓ AI数字人多风格 &nbsp; ✓ 专属课程库 &nbsp; ✓ 不限次数生成</div><button class="btn btn-pri btn-block btn-sm" style="margin-top:8px">立即开通</button></div>
<div class="tier-card" onclick="openPurchase()"><div class="t-name">年度会员</div><div class="t-price">¥168<span class="unit"> /年</span> <span style="font-size:11px;color:var(--teal)">省 ¥120</span></div><div class="t-feat">✓ 包含全部月会员权益 + 年度专属深度报告</div><button class="btn btn-outline btn-block btn-sm" style="margin-top:6px">开通年度</button></div>
<div class="sec-head"><span class="dot"></span>预约达人咨询</div>
<div class="card card-sm" style="margin-bottom:16px">
<select style="width:100%;padding:10px;border:1.5px solid #e8e0d8;border-radius:10px;font-size:13px;margin-bottom:8px;background:#fdfaf7"><option>选择咨询类型</option><option>视频一对一 · ¥199/30min</option><option>预制短视频解读 · ¥99/次</option><option>语音咨询 · ¥129/30min</option><option>图文咨询 · ¥49/次</option></select>
<textarea placeholder="简述你想咨询的问题..." style="width:100%;padding:10px;border:1.5px solid #e8e0d8;border-radius:10px;font-size:13px;resize:none;min-height:64px;font-family:inherit;background:#fdfaf7"></textarea>
<button class="btn btn-pri btn-block btn-sm" style="margin-top:8px" onclick="showToast('预约请求已提交，达人将在24小时内回复')">提交预约</button>
</div>
</div>
<!-- ═══════ PAGE: 舒尔特 ═══════ -->
<div class="page" id="page-schulte">
<div class="back-row"><span class="bk" onclick="goHome()">← 返回首页</span></div>
<div class="card" style="text-align:center;margin-bottom:12px">
<div style="font-size:28px">🧊</div>
<div class="card-title">舒尔特前额叶训练</div>
<div class="card-sub" id="schulteSub">按顺序点击 1→25，训练专注力与反应速度</div>
</div>
<div class="cube-scene" id="cubeScene">
<div class="cube" id="cubeEl">
<div class="cube-face cube-front"><div class="deco-face">✦<br>愈心谷</div></div>
<div class="cube-face cube-back"><div class="deco-face">◎<br>专注<br>前额叶</div></div>
<div class="cube-face cube-left"><div class="deco-face">◉<br>反应<br>速度</div></div>
<div class="cube-face cube-right"><div class="deco-face">⬡<br>注意力</div></div>
<div class="cube-face cube-top"><div class="deco-face">▣<br>视觉<br>搜索</div></div>
<div class="cube-face cube-bottom"><div class="deco-face">♢<br>记忆</div></div>
</div>
<div class="cube-grid" id="cubeFront"></div>
</div>
<div class="schulte-timer" id="schulteTimer">00:00.0</div>
<div class="schulte-best" id="schulteBest"></div>
<button class="btn btn-pri schulte-cta" id="schulteBtn" onclick="startSchulte()">开始训练</button>
<div class="schulte-info">拖拽旋转 · 点击数字按序消除</div>
</div>
<!-- ═══════ PAGE: 合盘 ═══════ -->
<div class="page" id="page-synastry">
<div class="back-row"><span class="bk" onclick="goHome()">← 返回首页</span></div>
<div class="card" style="text-align:center">
<div style="font-size:36px" id="synIcon">💫</div>
<div class="card-title" id="synTitle">双人合盘 · 缘分配对</div>
<div class="card-sub" id="synSub">输入两人的出生信息，解锁星座契合度分析</div>
</div>
<div style="display:flex;gap:4px;margin-bottom:10px" id="synTabs">
<button class="syn-tab active" onclick="setSynMode('romance')" id="synTabRomance">❤️ 两性合盘</button>
<button class="syn-tab" onclick="setSynMode('friendship')" id="synTabFriend">🤝 缘分配对</button>
<button class="syn-tab" onclick="setSynMode('family')" id="synTabFamily">🏠 家庭合盘</button>
</div>
<div style="display:flex;gap:4px;margin-bottom:10px" id="synChartTabs">
<button class="syn-tab active" onclick="setSynChart('compare')">◎ 比较盘</button>
<button class="syn-tab" onclick="setSynChart('composite')">◉ 组合盘</button>
<button class="syn-tab" onclick="setSynChart('marksAB')">👁 马盘 A→B</button>
<button class="syn-tab" onclick="setSynChart('marksBA')">👁 马盘 B→A</button>
</div>
<div style="margin-bottom:8px">
<div class="card card-sm" style="background:linear-gradient(135deg,#fff5f5,#fff);border-left:3px solid #E54D42">
<div style="font-size:11px;color:var(--pri);font-weight:700;margin-bottom:6px" id="synLabel1">👤 你</div>
<div class="input-row"><input type="number" id="s1Year" placeholder="1990" style="flex:1.2"><span class="lbl">年</span><select id="s1Month" style="flex:0.9"><option value="">月</option></select><select id="s1Day" style="flex:0.9"><option value="">日</option></select></div>
</div>
<div class="card card-sm" style="background:linear-gradient(135deg,#f5f0ff,#fff);border-left:3px solid #7B68EE;margin-top:8px">
<div style="font-size:11px;color:#7B68EE;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:6px">
<span id="synLabel2">👤 TA</span>
<select id="synFamilyRel" style="display:none;padding:3px 6px;border:1px solid #7B68EE;border-radius:8px;font-size:11px;background:#fdfaf7;color:#7B68EE">
<option>父亲</option><option>母亲</option><option>兄弟</option><option>姐妹</option><option>子女</option><option>祖父母</option><option>其他家人</option>
</select>
</div>
<div class="input-row"><input type="number" id="s2Year" placeholder="1995" style="flex:1.2"><span class="lbl">年</span><select id="s2Month" style="flex:0.9"><option value="">月</option></select><select id="s2Day" style="flex:0.9"><option value="">日</option></select></div>
</div>
</div>
<button class="btn btn-pri btn-block" onclick="runSynastry()" style="margin-bottom:12px" id="synBtn">💫 开始合盘分析</button>
<div id="synastryResult"></div>
</div>
<!-- ═══════ BOTTOM NAV ═══════ -->
<div class="nav" id="bottomNav" style="display:none" aria-hidden="true"></div>
<div class="nav-item" onclick="switchTab('chart')"><span class="ni">◎</span>星盘</div>
<div class="nav-item" onclick="switchTab('report')"><span class="ni">▶</span>报告</div>
<div class="nav-item" onclick="switchTab('community')"><span class="ni">▤</span>社区</div>
<div class="nav-item" onclick="switchTab('profile')"><span class="ni">◍</span>我的</div>
</div>
<!-- ═══════ VIDEO OVERLAY ═══════ -->
<div class="video-overlay" id="videoOverlay">
<button class="v-close" onclick="stopVideo()">✕</button>
<canvas class="v-canvas" id="videoCanvas"></canvas>
<div class="v-progress"><div class="v-bar" id="vBar" style="width:0%"></div></div>
<div class="v-watermark" id="vWatermark">星镜 · 预览版</div>
</div>
<div class="toast" id="toast"></div>
<div class="modal-overlay" id="purchaseModal">
<div class="modal-box">
<div class="m-icon">⭐</div><div class="m-title">开通星镜会员</div>
<div class="m-desc">解锁无水印完整视频报告、高清3D星盘、专属课程等全部权益。<br>首月仅需 ¥9.9</div>
<button class="btn btn-pri btn-block" onclick="doPurchase()">¥9.9 立即开通</button>
<button class="btn btn-outline btn-block btn-sm" style="margin-top:6px" onclick="closePurchase()">暂不需要</button>
</div>
</div>
<script src="../js/shell.js"></script>
<script src="../js/xingjing.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink