155 lines
7.2 KiB
HTML
155 lines
7.2 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="/static/css/style.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header class="header">
|
||
<div class="logo">
|
||
<span class="logo-icon">👔</span>
|
||
<h1>面试官</h1>
|
||
</div>
|
||
<p class="tagline">AI驱动的智能面试助手，帮助你轻松应对面试</p>
|
||
</header>
|
||
|
||
<main class="main-content">
|
||
<section class="feature-section">
|
||
<div class="feature-card" onclick="showFeature('resume')">
|
||
<div class="feature-icon">📄</div>
|
||
<h3>简历优化</h3>
|
||
<p>AI分析简历，提供针对性优化建议，让你的简历脱颖而出</p>
|
||
</div>
|
||
|
||
<div class="feature-card" onclick="showFeature('interview')">
|
||
<div class="feature-icon">🎯</div>
|
||
<h3>模拟面试</h3>
|
||
<p>模拟真实面试场景，AI扮演面试官进行问答练习</p>
|
||
</div>
|
||
|
||
<div class="feature-card" onclick="showFeature('feedback')">
|
||
<div class="feature-icon">💡</div>
|
||
<h3>反馈建议</h3>
|
||
<p>实时评估回答质量，提供具体改进建议和参考范例</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="resume-section" class="tool-section" style="display: none;">
|
||
<div class="section-header">
|
||
<h2>📄 简历优化助手</h2>
|
||
<button class="back-btn" onclick="showFeature(null)">返回</button>
|
||
</div>
|
||
|
||
<div class="input-group">
|
||
<label for="target-position">目标岗位（选填）</label>
|
||
<input type="text" id="target-position" placeholder="例如：产品经理、Java开发工程师">
|
||
</div>
|
||
|
||
<div class="input-group">
|
||
<label for="resume-content">简历内容</label>
|
||
<textarea id="resume-content" rows="10" placeholder="请粘贴你的简历内容，或描述你的工作经验和技能..."></textarea>
|
||
</div>
|
||
|
||
<button class="submit-btn" onclick="optimizeResume()">开始优化</button>
|
||
|
||
<div id="resume-result" class="result-box" style="display: none;">
|
||
<h3>优化建议</h3>
|
||
<div id="resume-suggestions" class="suggestions-content"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="interview-section" class="tool-section" style="display: none;">
|
||
<div class="section-header">
|
||
<h2>🎯 模拟面试</h2>
|
||
<button class="back-btn" onclick="showFeature(null)">返回</button>
|
||
</div>
|
||
|
||
<div id="interview-setup" class="interview-setup">
|
||
<div class="input-group">
|
||
<label for="job-position">目标岗位</label>
|
||
<input type="text" id="job-position" placeholder="例如：产品经理、数据分析师" required>
|
||
</div>
|
||
|
||
<div class="input-group">
|
||
<label>难度级别</label>
|
||
<div class="difficulty-options">
|
||
<label class="radio-label">
|
||
<input type="radio" name="difficulty" value="junior" checked>
|
||
<span>初级</span>
|
||
</label>
|
||
<label class="radio-label">
|
||
<input type="radio" name="difficulty" value="intermediate">
|
||
<span>中级</span>
|
||
</label>
|
||
<label class="radio-label">
|
||
<input type="radio" name="difficulty" value="senior">
|
||
<span>高级</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="submit-btn" onclick="startInterview()">开始面试</button>
|
||
</div>
|
||
|
||
<div id="interview-active" class="interview-active" style="display: none;">
|
||
<div class="interview-info">
|
||
<span id="current-position"></span>
|
||
<span id="current-phase" class="phase-badge"></span>
|
||
</div>
|
||
|
||
<div id="interview-messages" class="interview-messages"></div>
|
||
|
||
<div class="interview-input-area">
|
||
<textarea id="answer-input" rows="3" placeholder="请输入你的回答..."></textarea>
|
||
<div class="input-actions">
|
||
<button class="action-btn secondary" onclick="requestFeedback()">请求反馈</button>
|
||
<button class="action-btn primary" onclick="submitAnswer()">提交回答</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="interview-controls">
|
||
<button class="control-btn" onclick="endInterview()">结束面试</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="interview-feedback" class="interview-feedback" style="display: none;">
|
||
<h3>面试反馈</h3>
|
||
<div id="feedback-content" class="feedback-content"></div>
|
||
<button class="submit-btn" onclick="resetInterview()">重新开始</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="chat-section" class="tool-section" style="display: none;">
|
||
<div class="section-header">
|
||
<h2>💬 求职问答</h2>
|
||
<button class="back-btn" onclick="showFeature(null)">返回</button>
|
||
</div>
|
||
|
||
<div class="chat-container">
|
||
<div id="chat-messages" class="chat-messages"></div>
|
||
|
||
<div class="chat-input-area">
|
||
<input type="text" id="chat-input" placeholder="输入你的问题，例如：如何准备产品经理面试？">
|
||
<button class="send-btn" onclick="sendChatMessage()">发送</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="footer">
|
||
<p>Powered by DeepSeek AI</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<div id="loading-overlay" class="loading-overlay" style="display: none;">
|
||
<div class="loading-spinner"></div>
|
||
<p>AI思考中，请稍候...</p>
|
||
</div>
|
||
|
||
<script src="/static/js/main.js"></script>
|
||
</body>
|
||
</html>
|