💻 代码预览 · 小草心动

1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
6<title>灵魂匹配 · 小草心动</title>
7<link rel="stylesheet" href="style.css">
8</head>
9<body data-page="soul">
10
11<div class="topbar"><div class="brand"><div class="logo">🔮</div><div><b>灵魂匹配</b><small>30秒找到同频的人</small></div></div></div>
12<div class="quizwrap">
13  <div id="intro" class="qintro">
14    <div class="orb">🔮</div>
15    <h1>灵魂鉴定</h1>
16    <p>不看出身与颜值，只用 4 道小问题<br>找到和你精神共鸣的那个人。<br>完成后为你推荐同频灵魂。</p>
17    <button class="btn" id="startQuiz" style="margin-top:20px">开始灵魂鉴定</button>
18  </div>
19  <div id="quiz" style="display:none">
20    <div class="qcount" id="step"></div>
21    <div class="progress"><i id="prog" style="width:0"></i></div>
22    <div class="qtext" id="qtext"></div>
23    <div id="opts"></div>
24  </div>
25  <div id="result" class="res" style="display:none">
26    <div class="badge glass" id="resBadge"><span id="resEmoji"></span></div>
27    <h2 id="resName"></h2>
28    <p id="resDesc"></p>
29    <div class="sec-title" style="margin-top:6px">为你推荐同频的人</div>
30    <div id="rec"></div>
31    <button class="btn ghost" id="retake" style="margin-top:14px">重新鉴定</button>
32  </div>
33</div>
34<nav class="nav"><a data-nav="home" href="index.html"><span class="ic">💞</span>心动</a><a data-nav="soul" href="soul.html"><span class="ic">🔮</span>灵魂</a><a data-nav="dazi" href="dazi.html"><span class="ic">🤝</span>搭子</a><a data-nav="moments" href="moments.html"><span class="ic">✨</span>动态</a><a data-nav="mine" href="mine.html"><span class="ic">👤</span>我的</a></nav>
35<div class="toast" id="toast"></div>
36<script src="data.js"></script>
37<script src="app.js"></script>
38</body>
39</html>