116 lines
5.5 KiB
HTML
116 lines
5.5 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="{{ url_for('static', filename='styles.css') }}">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<header>
|
||
|
|
<h1>📋 面试流程</h1>
|
||
|
|
<a href="{{ url_for('home') }}" class="btn btn-secondary">返回首页</a>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main class="interview-container">
|
||
|
|
<!-- 面试流程侧边栏 -->
|
||
|
|
<aside class="process-sidebar">
|
||
|
|
<h2>面试环节</h2>
|
||
|
|
<div class="process-steps">
|
||
|
|
{% for step in process %}
|
||
|
|
<div class="process-step" data-step-id="{{ step.id }}">
|
||
|
|
<div class="step-number">{{ step.id }}</div>
|
||
|
|
<div class="step-content">
|
||
|
|
<h3>{{ step.title }}</h3>
|
||
|
|
<p>{{ step.description }}</p>
|
||
|
|
<span class="step-duration">⏱️ {{ step.duration }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
<button id="finish-interview-btn" class="btn btn-primary">完成面试</button>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<!-- 主面试区域 -->
|
||
|
|
<section class="interview-main">
|
||
|
|
<div class="interview-stage" id="question-stage">
|
||
|
|
<h2 id="current-question-title">自我介绍</h2>
|
||
|
|
<p id="current-question-description">请简要介绍您自己，包括教育背景和工作经验</p>
|
||
|
|
<div class="answer-input">
|
||
|
|
<textarea id="answer-text" placeholder="请输入您的回答..."></textarea>
|
||
|
|
<div class="input-actions">
|
||
|
|
<button id="analyze-btn" class="btn btn-primary">AI分析</button>
|
||
|
|
<button id="next-question-btn" class="btn btn-secondary">下一题</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- AI分析结果区域 -->
|
||
|
|
<div class="interview-stage hidden" id="analysis-stage">
|
||
|
|
<h2>🤖 AI分析结果</h2>
|
||
|
|
<div class="analysis-results">
|
||
|
|
<div class="score-card">
|
||
|
|
<h3>综合评分</h3>
|
||
|
|
<div class="score-value" id="overall-score">85</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="analysis-details">
|
||
|
|
<h3>内容分析</h3>
|
||
|
|
<div class="progress-bars">
|
||
|
|
<div class="progress-bar">
|
||
|
|
<label>完整性</label>
|
||
|
|
<div class="progress">
|
||
|
|
<div class="progress-fill" id="completeness-bar" style="width: 85%"></div>
|
||
|
|
</div>
|
||
|
|
<span class="progress-value" id="completeness-value">85%</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="progress-bar">
|
||
|
|
<label>相关性</label>
|
||
|
|
<div class="progress">
|
||
|
|
<div class="progress-fill" id="relevance-bar" style="width: 90%"></div>
|
||
|
|
</div>
|
||
|
|
<span class="progress-value" id="relevance-value">90%</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="progress-bar">
|
||
|
|
<label>深度</label>
|
||
|
|
<div class="progress">
|
||
|
|
<div class="progress-fill" id="depth-bar" style="width: 75%"></div>
|
||
|
|
</div>
|
||
|
|
<span class="progress-value" id="depth-value">75%</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="suggestions">
|
||
|
|
<h3>改进建议</h3>
|
||
|
|
<ul id="suggestions-list">
|
||
|
|
<li>可以提供更多具体的项目成果数据</li>
|
||
|
|
<li>注意控制回答时间，保持简洁明了</li>
|
||
|
|
<li>可以结合实例说明技术能力</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button id="back-to-question-btn" class="btn btn-secondary">返回修改</button>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<!-- 面试结果弹窗 -->
|
||
|
|
<div class="modal hidden" id="results-modal">
|
||
|
|
<div class="modal-content">
|
||
|
|
<span class="close">×</span>
|
||
|
|
<h2>🏆 面试结果</h2>
|
||
|
|
<div id="results-container">
|
||
|
|
<!-- 结果将通过JavaScript动态加载 -->
|
||
|
|
</div>
|
||
|
|
<a href="{{ url_for('home') }}" class="btn btn-primary">返回首页</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="{{ url_for('static', filename='script.js') }}"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|