56 lines
1.8 KiB
HTML
56 lines
1.8 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>AI姓名评测</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1 class="title">AI姓名评测</h1>
|
|
<p class="subtitle">智能分析姓名的稀有度、音韵美感与寓意内涵</p>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="nameInput">请输入姓名：</label>
|
|
<input
|
|
type="text"
|
|
id="nameInput"
|
|
class="form-input"
|
|
placeholder="请输入要分析的姓名，例如：张三、李雅婷、王子轩等..."
|
|
maxlength="10"
|
|
/>
|
|
</div>
|
|
|
|
<button id="analyzeBtn" class="btn">开始分析</button>
|
|
|
|
<div class="result-section">
|
|
<h3 class="result-title">分析结果</h3>
|
|
<div id="loading" class="loading">正在分析中，请稍候...</div>
|
|
|
|
<div id="resultContainer" class="result-container">
|
|
<div class="result-card">
|
|
<h4 class="card-title">稀有度评分</h4>
|
|
<div id="rarityScore" class="score-display">--%</div>
|
|
<div id="rarityDesc" class="score-desc">点击"开始分析"查看结果</div>
|
|
</div>
|
|
|
|
<div class="result-card">
|
|
<h4 class="card-title">音韵评价</h4>
|
|
<div id="phoneticScore" class="score-display">--%</div>
|
|
<div id="phoneticDesc" class="score-desc">点击"开始分析"查看结果</div>
|
|
</div>
|
|
|
|
<div class="result-card">
|
|
<h4 class="card-title">含义解读</h4>
|
|
<div id="meaningAnalysis" class="meaning-content">点击"开始分析"查看姓名的深层寓意</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |