Prathmesh0001/interview-system
0
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Interview Complete - Results</title>
7 <link rel="stylesheet" href="/static/css/style.css">
8</head>
9<body>
10 <div class="container results-container">
11 <header>
12 <h1>🎉 Interview Complete!</h1>
13 <p>Generating your comprehensive performance report...</p>
14 </header>
15
16 <div id="loading" class="loading-section">
17 <div class="spinner"></div>
18 <p>Analyzing your responses and calculating scores...</p>
19 <p class="loading-details">This will take 10-15 seconds</p>
20 </div>
21
22 <div id="results" class="results-section" style="display: none;">
23 <div class="score-summary">
24 <div class="overall-score">
25 <h2>Overall Score</h2>
26 <div class="score-circle" id="overallScore">0</div>
27 <p class="score-label" id="scoreLabel">Calculating...</p>
28 </div>
29
30 <div class="metrics-grid">
31 <div class="metric-card">
32 <h3>Content Quality</h3>
33 <div class="metric-score" id="contentScore">0</div>
34 <div class="metric-bar">
35 <div class="metric-fill" id="contentFill" style="width: 0%"></div>
36 </div>
37 </div>
38
39 <div class="metric-card">
40 <h3>Communication</h3>
41 <div class="metric-score" id="clarityScore">0</div>
42 <div class="metric-bar">
43 <div class="metric-fill" id="clarityFill" style="width: 0%"></div>
44 </div>
45 </div>
46
47 <div class="metric-card">
48 <h3>Confidence</h3>
49 <div class="metric-score" id="confidenceScore">0</div>
50 <div class="metric-bar">
51 <div class="metric-fill" id="confidenceFill" style="width: 0%"></div>
52 </div>
53 </div>
54
55 <div class="metric-card">
56 <h3>Professionalism</h3>
57 <div class="metric-score" id="professionalScore">0</div>
58 <div class="metric-bar">
59 <div class="metric-fill" id="professionalFill" style="width: 0%"></div>
60 </div>
61 </div>
62 </div>
63 </div>
64
65 <div class="actions-section">
66 <a href="#" id="downloadReport" class="btn-download" style="display: none;">
67 📄 Download Detailed PDF Report
68 </a>
69 <a href="/" class="btn-secondary">
70 🔄 Practice Again
71 </a>
72 </div>
73
74 <div class="summary-section">
75 <h3>Quick Summary</h3>
76 <div class="summary-text" id="summaryText">
77 <!-- Summary will be generated here -->
78 </div>
79 </div>
80 </div>
81
82 <div id="error" class="error-message" style="display: none;"></div>
83 </div>
84
85 <script>
86 const sessionId = '{{ session_id }}';
87
88 // Generate report on page load
89 window.addEventListener('load', async () => {
90 try {
91 const response = await fetch(`/api/generate-report/${sessionId}`, {
92 method: 'POST'
93 });
94
95 const data = await response.json();
96
97 if (data.success) {
98 // Hide loading
99 document.getElementById('loading').style.display = 'none';
100 document.getElementById('results').style.display = 'block';
101
102 // Display scores
103 displayResults(data);
104 } else {
105 showError(data.error || 'Failed to generate report');
106 }
107 } catch (error) {
108 console.error('Error generating report:', error);
109 showError('Error generating report: ' + error.message);
110 }
111 });
112
113 function displayResults(data) {
114 const overallScore = data.overall_score.toFixed(1);
115 const metrics = data.metrics;
116
117 // Overall score
118 document.getElementById('overallScore').textContent = overallScore;
119
120 // Score label
121 let label = '';
122 let color = '';
123 if (overallScore >= 85) {
124 label = 'Excellent! 🌟';
125 color = '#27ae60';
126 } else if (overallScore >= 70) {
127 label = 'Good! 👍';
128 color = '#3498db';
129 } else if (overallScore >= 50) {
130 label = 'Average ⚠️';
131 color = '#f39c12';
132 } else {
133 label = 'Needs Improvement 📈';
134 color = '#e74c3c';
135 }
136 document.getElementById('scoreLabel').textContent = label;
137 document.getElementById('overallScore').style.color = color;
138
139 // Individual metrics
140 setMetric('content', metrics.content_score);
141 setMetric('clarity', metrics.clarity_score);
142 setMetric('confidence', metrics.confidence_score);
143 setMetric('professional', metrics.professionalism_score);
144
145 // Enable download
146 const downloadBtn = document.getElementById('downloadReport');
147 downloadBtn.href = data.report_url;
148 downloadBtn.style.display = 'inline-block';
149
150 // Generate summary
151 generateSummary(overallScore, metrics);
152 }
153
154 function setMetric(name, score) {
155 const scoreElement = document.getElementById(`${name}Score`);
156 const fillElement = document.getElementById(`${name}Fill`);
157
158 scoreElement.textContent = score.toFixed(1);
159 fillElement.style.width = score + '%';
160
161 // Color based on score
162 if (score >= 75) {
163 fillElement.style.backgroundColor = '#27ae60';
164 } else if (score >= 60) {
165 fillElement.style.backgroundColor = '#3498db';
166 } else if (score >= 45) {
167 fillElement.style.backgroundColor = '#f39c12';
168 } else {
169 fillElement.style.backgroundColor = '#e74c3c';
170 }
171 }
172
173 function generateSummary(overallScore, metrics) {
174 let summary = '<ul class="summary-list">';
175
176 if (overallScore >= 70) {
177 summary += '<li>✅ Great overall performance! You showed strong interviewing skills.</li>';
178 } else {
179 summary += '<li>📈 There\'s room for improvement. Focus on the areas highlighted below.</li>';
180 }
181
182 // Content
183 if (metrics.content_score >= 75) {
184 summary += '<li>✅ Excellent content quality - you provided specific examples and details.</li>';
185 } else if (metrics.content_score < 60) {
186 summary += '<li>⚠️ Focus on providing more specific examples and quantifiable achievements in your answers.</li>';
187 }
188
189 // Clarity
190 if (metrics.clarity_score >= 75) {
191 summary += '<li>✅ Clear and articulate communication throughout the interview.</li>';
192 } else if (metrics.clarity_score < 60) {
193 summary += '<li>⚠️ Work on reducing filler words and organizing your thoughts more clearly.</li>';
194 }
195
196 // Confidence
197 if (metrics.confidence_score >= 75) {
198 summary += '<li>✅ You demonstrated good confidence and positive energy.</li>';
199 } else if (metrics.confidence_score < 60) {
200 summary += '<li>⚠️ Practice speaking with more confidence and conviction in your answers.</li>';
201 }
202
203 summary += '<li>📄 Download the detailed PDF report below for in-depth analysis and specific recommendations.</li>';
204 summary += '</ul>';
205
206 document.getElementById('summaryText').innerHTML = summary;
207 }
208
209 function showError(message) {
210 document.getElementById('loading').style.display = 'none';
211 document.getElementById('error').textContent = message;
212 document.getElementById('error').style.display = 'block';
213 }
214 </script>
215</body>
216</html>