GuangYu/huiyuti
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Nelson
2026-04-26 13:47:21 +08:00
commit 4983f34202
24 changed files with 2559 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

218
index.html Normal file
View File

@@ -0,0 +1,218 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="description" content="传承基因测试 - 3分钟发现你的家族传承类型">
<title>传承基因测试</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700;900&family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- ==================== 首页 ==================== -->
<section id="home" class="page active">
<div class="bg-noise"></div>
<div class="deco-circle deco-1"></div>
<div class="deco-circle deco-2"></div>
<div class="deco-circle deco-3"></div>
<div class="deco-glow"></div>
<div class="home-content">
<div class="home-badge">HERITAGE GENE TEST</div>
<h1 class="home-title">你的传承基因<br>是什么？</h1>
<p class="home-subtitle">3 分钟测试，发现你的家族传承类型</p>
<button id="btn-start" class="btn btn-start">
<span>开始测试</span>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</button>
</div>
<div class="home-footer">
<a href="javascript:void(0)" id="btn-privacy" class="privacy-link">隐私声明</a>
<p class="disclaimer">本测试仅供自我探索参考，不构成专业心理评估或诊断</p>
</div>
</section>
<!-- ==================== 答题页 ==================== -->
<section id="quiz" class="page">
<div class="bg-noise"></div>
<!-- 进度区域 -->
<div class="quiz-topbar">
<button id="btn-prev" class="btn-back" style="visibility:hidden;">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
</button>
<div class="progress-area">
<div class="progress-track">
<div class="progress-fill" id="progress-fill"></div>
</div>
<span class="progress-label" id="progress-text">1 / 18</span>
</div>
<div style="width:40px;"></div>
</div>
<!-- 题目区域 -->
<div class="quiz-body">
<div class="question-wrapper" id="question-wrapper">
<div class="question-inner">
<span class="question-number" id="question-number">Q1</span>
<p class="quiz-question" id="quiz-question"></p>
</div>
</div>
<div class="scale-buttons" id="scale-buttons">
<button class="btn-scale" data-value="1">
<span class="scale-emoji">😞</span>
<span class="scale-text">非常不符合</span>
</button>
<button class="btn-scale" data-value="2">
<span class="scale-emoji">😕</span>
<span class="scale-text">比较不符合</span>
</button>
<button class="btn-scale" data-value="3">
<span class="scale-emoji">😐</span>
<span class="scale-text">一般</span>
</button>
<button class="btn-scale" data-value="4">
<span class="scale-emoji">🙂</span>
<span class="scale-text">比较符合</span>
</button>
<button class="btn-scale" data-value="5">
<span class="scale-emoji">😊</span>
<span class="scale-text">非常符合</span>
</button>
</div>
<p class="quiz-disclaimer">本测试仅供自我探索参考，不构成专业心理评估或诊断</p>
</div>
</section>
<!-- ==================== 计算页 ==================== -->
<section id="loading" class="page">
<div class="bg-noise"></div>
<div class="loading-content">
<div class="loading-dna">
<div class="dna-strand">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div class="dna-strand dna-strand-2">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
</div>
<p class="loading-text">正在解码你的传承基因<span class="loading-dots"></span></p>
</div>
</section>
<!-- ==================== 结果页 ==================== -->
<section id="result" class="page">
<div class="bg-noise"></div>
<div class="result-scroll">
<!-- 类型展示区 -->
<div class="result-hero">
<div class="result-icon-ring">
<img id="result-icon" class="result-icon" src="" alt="类型图标">
</div>
<div class="result-hero-text">
<p class="result-label">你的传承类型是</p>
<h2 id="result-name" class="result-name"></h2>
<p id="result-desc" class="result-desc"></p>
</div>
</div>
<!-- 雷达图 -->
<div class="result-card">
<h3 class="card-title">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"/><line x1="12" y1="22" x2="12" y2="15.5"/><polyline points="22 8.5 12 15.5 2 8.5"/></svg>
六维能力图谱
</h3>
<canvas id="radar-canvas" width="300" height="300"></canvas>
</div>
<!-- 详细分析 -->
<div class="result-card">
<h3 class="card-title">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
深度解析
</h3>
<p id="result-analysis" class="result-analysis"></p>
</div>
<!-- 课程推荐 -->
<div class="result-card recommend-card">
<h3 class="card-title">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
专属成长建议
</h3>
<p id="result-recommend" class="result-recommend"></p>
<div class="course-card-wrapper">
<img src="assets/course-card.jpg" alt="卢慧-家庭关系直播课" class="course-card-img" id="course-card-img">
<p class="course-card-hint">👆 点击查看大图 · 长按识别二维码</p>
</div>
</div>
<!-- 操作按钮 -->
<div class="result-actions">
<button id="btn-share" class="btn btn-share">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
分享我的结果
</button>
<button id="btn-retry" class="btn btn-retry">重新测试</button>
</div>
<p class="disclaimer result-disclaimer">本测试仅供自我探索参考，不构成专业心理评估或诊断</p>
</div>
</section>
<!-- ==================== 海报页 ==================== -->
<div id="poster" class="poster-container">
<div id="poster-content" class="poster-content">
<div class="poster-header">
<p class="poster-brand">传承基因测试</p>
<img id="poster-icon" class="poster-icon" src="" alt="">
<h2 id="poster-name" class="poster-name"></h2>
<p id="poster-desc" class="poster-desc"></p>
<p id="poster-quote" class="poster-quote"></p>
</div>
<div class="poster-radar-wrap">
<canvas id="poster-radar-canvas" width="400" height="400"></canvas>
</div>
<div class="poster-footer">
<p class="poster-cta">你属于哪种传承类型？</p>
<p class="poster-slogan">扫码测测你的传承基因</p>
<img src="assets/qrcode-site.png" alt="扫码测测你的传承基因" class="poster-qrcode">
</div>
</div>
<div id="poster-preview" class="poster-preview" style="display:none;">
<h3 class="poster-preview-title">长按图片保存分享</h3>
<img id="poster-image" class="poster-image" src="" alt="分享海报">
<button id="btn-poster-close" class="btn btn-retry">关闭</button>
</div>
</div>
<!-- ==================== 课程大图弹窗 ==================== -->
<div id="course-modal" class="modal-overlay" style="display:none;">
<img id="course-modal-img" class="course-modal-img" src="" alt="课程详情">
</div>
<!-- ==================== 隐私声明弹窗 ==================== -->
<div id="privacy-modal" class="modal-overlay" style="display:none;">
<div class="modal-card">
<h3 class="modal-title">隐私声明</h3>
<div class="modal-body">
<p>1. 本测试<strong>不收集</strong>任何个人信息，包括但不限于姓名、手机号、邮箱等。</p>
<p>2. 所有答题数据和计算过程均在<strong>您的浏览器本地完成</strong>，不会上传到任何服务器。</p>
<p>3. 本网站<strong>不使用Cookie</strong>，不追踪用户行为，不使用任何第三方分析工具。</p>
<p>4. 您的测试结果仅保存在本地浏览器的临时存储中，关闭浏览器后可被清除。</p>
<p>5. 我们尊重并保护每一位用户的隐私权。</p>
</div>
<button id="btn-close-privacy" class="btn btn-modal-confirm">我知道了</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>