103 lines
3.1 KiB
HTML
103 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
|
<meta name="theme-color" content="#0f1115" />
|
|
<title>天问</title>
|
|
<link rel="icon" type="image/png" href="favicon.png" />
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<div class="page">
|
|
<header class="hero">
|
|
<h1>天问</h1>
|
|
</header>
|
|
|
|
<main class="layout">
|
|
<section class="panel form-panel">
|
|
<div class="panel__header">
|
|
<h2>填写用户信息</h2>
|
|
<button class="ghost" type="button" id="fill-demo">使用示例数据</button>
|
|
</div>
|
|
<form id="fortune-form">
|
|
<div class="field-group">
|
|
<label for="type">分析类型</label>
|
|
<select id="type" name="type">
|
|
<option value="bazi" selected>八字分析</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<div class="field-group">
|
|
<label for="name">姓名 *</label>
|
|
<input id="name" name="name" placeholder="张三" required />
|
|
</div>
|
|
<div class="field-group">
|
|
<label for="gender">性别 *</label>
|
|
<select id="gender" name="gender" required>
|
|
<option value="male">男</option>
|
|
<option value="female">女</option>
|
|
<option value="unknown">保密</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<div class="field-group">
|
|
<label for="birth_date">出生日期 *</label>
|
|
<input type="date" id="birth_date" name="birth_date" required />
|
|
</div>
|
|
<div class="field-group">
|
|
<label for="birth_time">出生时间 *</label>
|
|
<input type="time" id="birth_time" name="birth_time" required />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field-group checkbox">
|
|
<label>
|
|
<input type="checkbox" id="is_lunar" name="is_lunar" />
|
|
使用农历生日
|
|
</label>
|
|
<small>若勾选，请确保日期已换算为农历。</small>
|
|
</div>
|
|
|
|
<div class="field-group">
|
|
<label for="question">想了解的重点</label>
|
|
<textarea id="question" name="question" rows="3" placeholder="近期事业与财运如何？"></textarea>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="form-actions">
|
|
<button id="submit-btn" type="submit">提交并生成解读</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="panel result-panel">
|
|
<div class="panel__header">
|
|
<h2>AI 解读结果</h2>
|
|
<div id="status" class="status idle">等待提交</div>
|
|
</div>
|
|
|
|
<article id="ai-text" class="ai-text">
|
|
</article>
|
|
|
|
<div id="warnings" class="warnings hidden"></div>
|
|
|
|
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<p>⚠️ 本服务仅供娱乐参考，任何结论不构成专业建议。</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="app.js" type="module"></script>
|
|
</body>
|
|
|
|
</html> |