Upload folder using huggingface_hub

Dockerfile

@@ -12,7 +12,8 @@ COPY requirements.txt .
 RUN pip install --no-cache-dir -r requirements.txt
 
 # Copy application files
-COPY . .
+COPY app.py .
+COPY static/ static/
 
 # Expose port 7860 (Hugging Face default)
 EXPOSE 7860

README.md

@@ -1,41 +1,40 @@
 ---
-title: HR-AI Interview Simulation
+title: HR-AI Interview Simulation V2
 emoji: 🤖
 colorFrom: indigo
 colorTo: purple
 sdk: docker
 app_file: app.py
-pinned: false
+pinned: true
 license: mit
 ---
 
-# 🤖 HR-AI Interview Simulation Platform
+# 🤖 HR-AI Interview Simulation V2 - Premium Edition
 
-AI-Powered Technical Interview System using Groq LLaMA 3.3 70B
+**Next-Generation AI-Powered Technical Interview Platform**
 
-## Features
-- 📄 Resume Analysis (PDF upload)
-- 🎯 Dynamic Question Generation (10 questions)
-- ✅ Real-time Answer Evaluation with scoring
-- 📊 Comprehensive Assessment Reports
+## ✨ Features
+- 📄 **Resume Analysis** - AI-powered PDF parsing
+- 🎯 **Dynamic Questions** - 15 role-specific questions
+- ✅ **Real-time Evaluation** - Instant scoring & feedback
+- 📊 **Assessment Reports** - Comprehensive insights
+- 🎨 **Premium UI** - Modern glass-morphism design
 
-## How to Use
-1. **Upload Resume** - Upload your PDF resume
-2. **Review Profile** - AI extracts your information
-3. **Start Interview** - Answer 10 AI-generated questions
-4. **Get Assessment** - Receive detailed evaluation report
+## 🚀 How to Use
+1. Upload your PDF resume
+2. Review AI-extracted profile
+3. Enter target position
+4. Answer interview questions
+5. Get detailed assessment
 
-## Technology Stack
+## 🛠 Tech Stack
 - **Backend**: Python Flask
 - **AI**: Groq LLaMA 3.3 70B
-- **Frontend**: HTML5, CSS3, JavaScript
+- **Frontend**: Premium HTML5/CSS3/JS
 
-## Setup (for cloning)
-Add your `GROQ_API_KEY` as a secret in Space settings:
-1. Go to Settings → Repository secrets
-2. Add `GROQ_API_KEY` with your Groq API key
-
-Get your API key at: https://console.groq.com
+## ⚙️ Setup
+Add `GROQ_API_KEY` secret in Space settings.
+Get key: https://console.groq.com
 
 ---
-Made with ❤️ by Chris Daniel
+**HR-AI Simulation V2** by Chris Daniel

app.py

@@ -1,10 +1,10 @@
 """
-HR-AI Interview Simulation Platform - Full Flask Application
-Deployed on Hugging Face Spaces with Docker
+HR-AI Interview Simulation V2 - Full Premium UI
+Complete Flask Application with Premium Frontend
 """
 
 import os
-from flask import Flask, request, jsonify, render_template_string, send_from_directory
+from flask import Flask, request, jsonify, send_from_directory, send_file
 from flask_cors import CORS
 from groq import Groq
 import json
@@ -12,21 +12,18 @@ import uuid
 import re
 from datetime import datetime
 from PyPDF2 import PdfReader
-import io
 
 # Configuration
 API_KEY = os.getenv('GROQ_API_KEY', '')
 GROQ_MODEL = 'llama-3.3-70b-versatile'
 
-app = Flask(__name__)
+app = Flask(__name__, static_folder='static', static_url_path='')
 CORS(app)
 
-# Initialize Groq client
 client = None
 if API_KEY:
     client = Groq(api_key=API_KEY)
 
-# In-memory sessions
 sessions = {}
 
 def get_or_create_session(session_id):
@@ -41,56 +38,41 @@ def get_or_create_session(session_id):
     return sessions[session_id]
 
 def extract_text_from_pdf(pdf_file):
-    text = ""
     try:
         reader = PdfReader(pdf_file)
-        for page in reader.pages:
-            text += page.extract_text() or ""
-        return text
-    except Exception as e:
-        print(f"PDF Error: {e}")
+        return "".join(p.extract_text() or "" for p in reader.pages)
+    except:
         return ""
 
-
 def extract_json_from_response(text):
-    match = re.search(r'```(?:json)?\s*([\s\S]*?)\s*```|({\s*".*?"[\s\S]*})|(\[\s*[\s\S]*\])', text, re.DOTALL)
+    match = re.search(r'```(?:json)?\s*([\s\S]*?)\s*```', text)
     if match:
-        json_str = match.group(1) or match.group(2) or match.group(3)
-        if json_str:
-            try:
-                return json.loads(json_str)
-            except:
-                pass
-    if '{' in text and '}' in text:
-        try:
-            return json.loads(text[text.find('{'):text.rfind('}')+1])
-        except:
-            pass
+        try: return json.loads(match.group(1))
+        except: pass
+    if '{' in text:
+        try: return json.loads(text[text.find('{'):text.rfind('}')+1])
+        except: pass
     return None
 
+
 def generate_content_with_groq(prompt):
-    if not client:
-        return None
+    if not client: return None
     try:
-        response = client.chat.completions.create(
-            messages=[
-                {"role": "system", "content": "Return only valid JSON as requested."},
-                {"role": "user", "content": prompt}
-            ],
-            model=GROQ_MODEL,
-            temperature=0.7,
-            max_tokens=4096
+        resp = client.chat.completions.create(
+            messages=[{"role": "system", "content": "Return only valid JSON."}, {"role": "user", "content": prompt}],
+            model=GROQ_MODEL, temperature=0.7, max_tokens=4096
         )
-        content = response.choices[0].message.content
-        if content:
-            data = extract_json_from_response(content)
-            if data:
-                return json.dumps(data)
-        return None
+        data = extract_json_from_response(resp.choices[0].message.content)
+        return json.dumps(data) if data else None
     except Exception as e:
         print(f"Groq Error: {e}")
         return None
 
+# Serve main page
+@app.route('/')
+def index():
+    return send_file('static/index.html')
+
 # API Endpoints
 @app.route('/upload_resume', methods=['POST'])
 def upload_resume():
@@ -98,28 +80,23 @@ def upload_resume():
     session = get_or_create_session(session_id)
     
     if 'resume' not in request.files:
-        return jsonify({'error': 'No resume file provided'}), 400
+        return jsonify({'error': 'No resume file'}), 400
     
     file = request.files['resume']
-    if file.filename == '':
-        return jsonify({'error': 'No selected file'}), 400
-    
-    resume_content = extract_text_from_pdf(file)
-    if not resume_content.strip():
-        return jsonify({'error': 'Could not extract text from PDF'}), 400
+    text = extract_text_from_pdf(file)
+    if not text.strip():
+        return jsonify({'error': 'Cannot extract text from PDF'}), 400
     
-    prompt = f"""Analyze this resume and extract: name, email, experience, key_skills (array), inferred_position.
-Return JSON: {{"name":"","email":"","experience":"","key_skills":[],"inferred_position":""}}
-Resume: {resume_content[:8000]}"""
+    prompt = f'''Analyze resume: {{"name":"","email":"","experience":"","key_skills":[],"inferred_position":""}}
+Resume: {text[:8000]}'''
     
-    ai_response = generate_content_with_groq(prompt)
-    if ai_response:
-        profile = json.loads(ai_response)
-        if not isinstance(profile.get('key_skills'), list):
-            profile['key_skills'] = []
+    resp = generate_content_with_groq(prompt)
+    if resp:
+        profile = json.loads(resp)
+        if not isinstance(profile.get('key_skills'), list): profile['key_skills'] = []
         session['candidate_profile'] = profile
-        return jsonify({'message': 'Resume processed', 'candidate_profile': profile, 'session_id': session_id}), 200
-    return jsonify({'error': 'AI failed to parse resume'}), 500
+        return jsonify({'message': 'Success', 'candidate_profile': profile, 'session_id': session_id}), 200
+    return jsonify({'error': 'AI failed'}), 500
 
 @app.route('/setup_interview', methods=['POST'])
 def setup_interview():
@@ -136,21 +113,22 @@ def setup_interview():
         return jsonify({'error': 'Position and profile required'}), 400
     
     skills = ", ".join(profile.get('key_skills', []))
-    prompt = f"""Generate 10 interview questions for {profile.get('name','Candidate')} applying for '{position}'.
-Experience: {profile.get('experience','N/A')}. Skills: {skills}.
-Generate: 6 Technical, 2 Soft Skills, 2 Communication questions.
-Return: {{"questions":[{{"id":"q1","question":"...","tags":["technical"]}}]}}"""
-    
-    ai_response = generate_content_with_groq(prompt)
-    if ai_response:
-        result = json.loads(ai_response)
-        questions = result.get('questions', [])
-        session['interview_questions'] = questions
+    is_coding = any(k in position.lower() for k in ['developer','engineer','programmer','software'])
+    
+    coding_text = "- 2 Coding questions (simple problems)" if is_coding else ""
+    prompt = f'''Generate interview questions for {profile.get('name','Candidate')} for "{position}".
+Skills: {skills}. Experience: {profile.get('experience','N/A')}.
+Generate: 10 Technical, 3 Soft Skills, 2 Communication {coding_text}
+Return: {{"questions":[{{"id":"q1","question":"...","tags":["technical"]}}]}}'''
+    
+    resp = generate_content_with_groq(prompt)
+    if resp:
+        result = json.loads(resp)
+        session['interview_questions'] = result.get('questions', [])
         session['interview_responses'] = []
         session['interview_start_time'] = datetime.now().isoformat()
-        return jsonify({'message': 'Questions generated', 'questions': questions, 'is_coding_role': False}), 200
-    return jsonify({'error': 'Failed to generate questions'}), 500
-
+        return jsonify({'message': 'Generated', 'questions': result.get('questions', []), 'is_coding_role': is_coding}), 200
+    return jsonify({'error': 'Failed'}), 500
 
 @app.route('/submit_answer', methods=['POST'])
 def submit_answer():
@@ -160,35 +138,25 @@ def submit_answer():
     
     session = sessions[session_id]
     data = request.get_json()
-    question_id = data.get('question_id')
-    response_text = data.get('response_text', '')
+    qid = data.get('question_id')
+    answer = data.get('response_text', '')
     duration = data.get('duration', '00:00')
     
-    question_obj = next((q for q in session['interview_questions'] if q['id'] == question_id), None)
-    if not question_obj:
-        return jsonify({'error': 'Question not found'}), 404
+    q = next((x for x in session['interview_questions'] if x['id'] == qid), None)
+    if not q: return jsonify({'error': 'Question not found'}), 404
     
-    prompt = f"""Evaluate this interview response strictly:
-Question: {question_obj['question']}
-Answer: {response_text}
-Return: {{"technicalScore":85,"communicationScore":90,"relevanceScore":88,"feedback":"..."}}"""
+    prompt = f'''Evaluate strictly:
+Q: {q['question']}
+A: {answer}
+Return: {{"technicalScore":85,"communicationScore":90,"relevanceScore":88,"feedback":"..."}}'''
     
-    ai_response = generate_content_with_groq(prompt)
-    if ai_response:
-        evaluation = json.loads(ai_response)
-        score = (evaluation.get('technicalScore',0) + evaluation.get('communicationScore',0) + evaluation.get('relevanceScore',0)) / 3
-        evaluation['score'] = round(score)
-        
-        session['interview_responses'].append({
-            'question_id': question_id,
-            'question': question_obj['question'],
-            'tags': question_obj.get('tags', []),
-            'response': response_text,
-            'duration': duration,
-            'evaluation': evaluation
-        })
-        return jsonify({'message': 'Answer evaluated', 'evaluation': evaluation}), 200
-    return jsonify({'error': 'Evaluation failed'}), 500
+    resp = generate_content_with_groq(prompt)
+    if resp:
+        ev = json.loads(resp)
+        ev['score'] = round((ev.get('technicalScore',0)+ev.get('communicationScore',0)+ev.get('relevanceScore',0))/3)
+        session['interview_responses'].append({'question_id':qid,'question':q['question'],'tags':q.get('tags',[]),'response':answer,'duration':duration,'evaluation':ev})
+        return jsonify({'message': 'Evaluated', 'evaluation': ev}), 200
+    return jsonify({'error': 'Failed'}), 500
 
 @app.route('/get_assessment', methods=['GET'])
 def get_assessment():
@@ -198,360 +166,28 @@ def get_assessment():
     
     session = sessions[session_id]
     if not session.get('interview_responses'):
-        return jsonify({'error': 'No responses to assess'}), 400
+        return jsonify({'error': 'No responses'}), 400
     
     profile = session['candidate_profile']
     responses = session['interview_responses']
+    avg = sum(r['evaluation']['score'] for r in responses) / len(responses)
     
-    summary = "\n".join([f"Q: {r['question'][:80]}... Score: {r['evaluation']['score']}%" for r in responses[:5]])
-    avg_score = sum(r['evaluation']['score'] for r in responses) / len(responses)
-    
-    prompt = f"""Generate assessment for {profile.get('name','Candidate')}.
-Average Score: {avg_score:.1f}%. Questions: {len(responses)}.
-Summary: {summary}
-Return: {{"overallScore":85,"recommendation":"Recommended","keyStrengths":["..."],"areasForImprovement":["..."],"detailedScores":{{"technicalSkills":85,"communication":80,"softSkills":78}}}}"""
+    summary = "\n".join([f"Q: {r['question'][:60]}... Score: {r['evaluation']['score']}%" for r in responses[:5]])
+    prompt = f'''Assessment for {profile.get('name','Candidate')}. Avg: {avg:.1f}%. Questions: {len(responses)}.
+{summary}
+Return: {{"overallScore":85,"recommendation":"Recommended","keyStrengths":["..."],"areasForImprovement":["..."],"detailedScores":{{"technicalSkills":85,"communication":80,"softSkills":78}}}}'''
     
-    ai_response = generate_content_with_groq(prompt)
-    if ai_response:
-        assessment = json.loads(ai_response)
-        assessment['detailedQuestionAnalysis'] = [{
-            'question': r['question'],
-            'score': r['evaluation']['score'],
-            'technicalScore': r['evaluation'].get('technicalScore', 0),
-            'communicationScore': r['evaluation'].get('communicationScore', 0),
-            'relevanceScore': r['evaluation'].get('relevanceScore', 0)
-        } for r in responses]
-        return jsonify({'message': 'Assessment generated', 'assessment': assessment}), 200
-    
-    # Fallback
-    return jsonify({'assessment': {
-        'overallScore': round(avg_score),
-        'recommendation': 'Recommended' if avg_score >= 70 else 'Needs Improvement',
-        'keyStrengths': ['Completed interview'],
-        'areasForImprovement': ['Review feedback'],
-        'detailedScores': {'technicalSkills': round(avg_score), 'communication': round(avg_score), 'softSkills': round(avg_score)}
-    }}), 200
+    resp = generate_content_with_groq(prompt)
+    if resp:
+        a = json.loads(resp)
+        a['detailedQuestionAnalysis'] = [{'question':r['question'],'score':r['evaluation']['score'],'technicalScore':r['evaluation'].get('technicalScore',0),'communicationScore':r['evaluation'].get('communicationScore',0),'relevanceScore':r['evaluation'].get('relevanceScore',0)} for r in responses]
+        return jsonify({'message': 'Generated', 'assessment': a}), 200
+    return jsonify({'assessment': {'overallScore': round(avg), 'recommendation': 'Recommended' if avg >= 70 else 'Needs Improvement', 'keyStrengths': [], 'areasForImprovement': [], 'detailedScores': {'technicalSkills': round(avg), 'communication': round(avg), 'softSkills': round(avg)}}}), 200
 
 @app.route('/log_security', methods=['POST'])
 def log_security():
     return jsonify({'message': 'Logged'}), 200
 
-
-# Main UI Route
-@app.route('/')
-def index():
-    return render_template_string(HTML_TEMPLATE)
-
-HTML_TEMPLATE = '''
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>HR-AI Interview Platform</title>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style>
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-        body { font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); min-height: 100vh; color: #fff; }
-        .container { max-width: 900px; margin: 0 auto; padding: 20px; }
-        .header { text-align: center; padding: 40px 0; }
-        .header h1 { font-size: 2.5rem; background: linear-gradient(90deg, #667eea, #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
-        .header p { color: #a0aec0; margin-top: 10px; }
-        .card { background: rgba(255,255,255,0.05); backdrop-filter: blur(10px); border-radius: 20px; padding: 30px; margin: 20px 0; border: 1px solid rgba(255,255,255,0.1); }
-        .card h2 { color: #667eea; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
-        .upload-area { border: 2px dashed rgba(102,126,234,0.5); border-radius: 15px; padding: 40px; text-align: center; cursor: pointer; transition: all 0.3s; }
-        .upload-area:hover { border-color: #667eea; background: rgba(102,126,234,0.1); }
-        .upload-area i { font-size: 3rem; color: #667eea; margin-bottom: 15px; }
-        input[type="file"] { display: none; }
-        input[type="text"], textarea { width: 100%; padding: 15px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); color: #fff; font-size: 1rem; margin: 10px 0; }
-        textarea { min-height: 150px; resize: vertical; }
-        .btn { padding: 15px 30px; border-radius: 10px; border: none; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s; display: inline-flex; align-items: center; gap: 10px; }
-        .btn-primary { background: linear-gradient(90deg, #667eea, #764ba2); color: #fff; }
-        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(102,126,234,0.4); }
-        .btn-secondary { background: rgba(255,255,255,0.1); color: #fff; }
-        .hidden { display: none !important; }
-        .profile-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
-        .profile-item { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 10px; }
-        .profile-item label { color: #a0aec0; font-size: 0.85rem; }
-        .profile-item span { display: block; font-weight: 600; margin-top: 5px; }
-        .skills-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
-        .skill-tag { background: rgba(102,126,234,0.3); padding: 5px 12px; border-radius: 20px; font-size: 0.85rem; }
-        .question-box { background: rgba(102,126,234,0.1); padding: 25px; border-radius: 15px; margin: 20px 0; border-left: 4px solid #667eea; }
-        .question-tags { display: flex; gap: 8px; margin-bottom: 10px; }
-        .tag { background: rgba(118,75,162,0.3); padding: 4px 10px; border-radius: 15px; font-size: 0.75rem; }
-        .progress-bar { height: 8px; background: rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden; margin: 20px 0; }
-        .progress-fill { height: 100%; background: linear-gradient(90deg, #667eea, #764ba2); transition: width 0.3s; }
-        .score-display { text-align: center; padding: 30px; }
-        .score-circle { width: 150px; height: 150px; border-radius: 50%; background: conic-gradient(#667eea var(--score), rgba(255,255,255,0.1) 0); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
-        .score-inner { width: 120px; height: 120px; border-radius: 50%; background: #1a1a2e; display: flex; flex-direction: column; align-items: center; justify-content: center; }
-        .score-value { font-size: 2.5rem; font-weight: 700; }
-        .score-label { color: #a0aec0; font-size: 0.9rem; }
-        .recommendation { padding: 15px 25px; border-radius: 10px; display: inline-block; font-weight: 600; }
-        .rec-high { background: rgba(72,187,120,0.2); color: #48bb78; }
-        .rec-good { background: rgba(102,126,234,0.2); color: #667eea; }
-        .rec-low { background: rgba(237,137,54,0.2); color: #ed8936; }
-        .feedback-box { background: rgba(72,187,120,0.1); padding: 20px; border-radius: 10px; margin: 15px 0; border-left: 4px solid #48bb78; }
-        .loading { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); z-index: 1000; align-items: center; justify-content: center; flex-direction: column; }
-        .loading.show { display: flex; }
-        .spinner { width: 50px; height: 50px; border: 4px solid rgba(255,255,255,0.1); border-top-color: #667eea; border-radius: 50%; animation: spin 1s linear infinite; }
-        @keyframes spin { to { transform: rotate(360deg); } }
-        .timer { font-size: 1.5rem; font-weight: 600; color: #667eea; }
-        .actions { display: flex; gap: 15px; margin-top: 20px; flex-wrap: wrap; }
-        .breakdown { margin-top: 20px; }
-        .breakdown-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="header">
-            <h1><i class="fas fa-robot"></i> HR-AI Interview Platform</h1>
-            <p>AI-Powered Technical Interview Simulation</p>
-        </div>
-
-        <!-- Step 1: Upload Resume -->
-        <div class="card" id="uploadSection">
-            <h2><i class="fas fa-file-upload"></i> Step 1: Upload Resume</h2>
-            <div class="upload-area" onclick="document.getElementById('resumeInput').click()">
-                <i class="fas fa-cloud-upload-alt"></i>
-                <h3>Drop your resume here</h3>
-                <p>or click to browse (PDF only)</p>
-            </div>
-            <input type="file" id="resumeInput" accept=".pdf" onchange="uploadResume(this.files[0])">
-        </div>
-
-        <!-- Step 2: Profile & Setup -->
-        <div class="card hidden" id="setupSection">
-            <h2><i class="fas fa-user-check"></i> Step 2: Candidate Profile</h2>
-            <div class="profile-info" id="profileDisplay"></div>
-            <div style="margin-top: 20px;">
-                <label>Position/Role:</label>
-                <input type="text" id="positionInput" placeholder="e.g., Senior Software Engineer">
-            </div>
-            <div class="actions">
-                <button class="btn btn-primary" onclick="startInterview()"><i class="fas fa-play"></i> Start Interview</button>
-            </div>
-        </div>
-
-        <!-- Step 3: Interview -->
-        <div class="card hidden" id="interviewSection">
-            <h2><i class="fas fa-comments"></i> Step 3: Interview</h2>
-            <div class="progress-bar"><div class="progress-fill" id="progressFill" style="width: 0%"></div></div>
-            <p id="progressText">Question 1 of 10</p>
-            <div class="question-box" id="questionBox"></div>
-            <textarea id="answerInput" placeholder="Type your answer here..."></textarea>
-            <div class="feedback-box hidden" id="feedbackBox"></div>
-            <div class="actions">
-                <button class="btn btn-primary" onclick="submitAnswer()"><i class="fas fa-paper-plane"></i> Submit Answer</button>
-            </div>
-        </div>
-
-        <!-- Step 4: Assessment -->
-        <div class="card hidden" id="assessmentSection">
-            <h2><i class="fas fa-chart-pie"></i> Assessment Report</h2>
-            <div class="score-display" id="scoreDisplay"></div>
-            <div class="breakdown" id="breakdownDisplay"></div>
-            <div class="actions">
-                <button class="btn btn-secondary" onclick="location.reload()"><i class="fas fa-redo"></i> New Interview</button>
-            </div>
-        </div>
-    </div>
-
-    <!-- Loading Overlay -->
-    <div class="loading" id="loading">
-        <div class="spinner"></div>
-        <p style="margin-top: 20px;" id="loadingText">Processing...</p>
-    </div>
-
-    <script>
-        let sessionId = 'session_' + Date.now();
-        let questions = [];
-        let currentQuestion = 0;
-        let responses = [];
-
-        function showLoading(text) {
-            document.getElementById('loadingText').textContent = text || 'Processing...';
-            document.getElementById('loading').classList.add('show');
-        }
-        function hideLoading() { document.getElementById('loading').classList.remove('show'); }
-
-        async function uploadResume(file) {
-            if (!file) return;
-            showLoading('Analyzing resume with AI...');
-            
-            const formData = new FormData();
-            formData.append('resume', file);
-            
-            try {
-                const resp = await fetch('/upload_resume', {
-                    method: 'POST',
-                    headers: { 'X-User-Session-Id': sessionId },
-                    body: formData
-                });
-                const data = await resp.json();
-                hideLoading();
-                
-                if (data.candidate_profile) {
-                    const p = data.candidate_profile;
-                    document.getElementById('profileDisplay').innerHTML = `
-                        <div class="profile-item"><label>Name</label><span>${p.name || 'N/A'}</span></div>
-                        <div class="profile-item"><label>Email</label><span>${p.email || 'N/A'}</span></div>
-                        <div class="profile-item"><label>Experience</label><span>${p.experience || 'N/A'}</span></div>
-                        <div class="profile-item"><label>Suggested Role</label><span>${p.inferred_position || 'N/A'}</span></div>
-                        <div class="profile-item" style="grid-column: span 2;"><label>Skills</label>
-                            <div class="skills-tags">${(p.key_skills || []).map(s => `<span class="skill-tag">${s}</span>`).join('')}</div>
-                        </div>
-                    `;
-                    document.getElementById('positionInput').value = p.inferred_position || '';
-                    document.getElementById('uploadSection').classList.add('hidden');
-                    document.getElementById('setupSection').classList.remove('hidden');
-                } else {
-                    alert('Error: ' + (data.error || 'Failed to analyze resume'));
-                }
-            } catch (e) {
-                hideLoading();
-                alert('Error: ' + e.message);
-            }
-        }
-
-        async function startInterview() {
-            const position = document.getElementById('positionInput').value;
-            if (!position) { alert('Please enter a position'); return; }
-            
-            showLoading('Generating interview questions...');
-            try {
-                const resp = await fetch('/setup_interview', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json', 'X-User-Session-Id': sessionId },
-                    body: JSON.stringify({ position_role: position })
-                });
-                const data = await resp.json();
-                hideLoading();
-                
-                if (data.questions) {
-                    questions = data.questions;
-                    currentQuestion = 0;
-                    responses = [];
-                    document.getElementById('setupSection').classList.add('hidden');
-                    document.getElementById('interviewSection').classList.remove('hidden');
-                    showQuestion();
-                } else {
-                    alert('Error: ' + (data.error || 'Failed to generate questions'));
-                }
-            } catch (e) {
-                hideLoading();
-                alert('Error: ' + e.message);
-            }
-        }
-
-        function showQuestion() {
-            const q = questions[currentQuestion];
-            const progress = ((currentQuestion + 1) / questions.length) * 100;
-            document.getElementById('progressFill').style.width = progress + '%';
-            document.getElementById('progressText').textContent = `Question ${currentQuestion + 1} of ${questions.length}`;
-            document.getElementById('questionBox').innerHTML = `
-                <div class="question-tags">${(q.tags || []).map(t => `<span class="tag">${t}</span>`).join('')}</div>
-                <p style="font-size: 1.1rem; line-height: 1.6;">${q.question}</p>
-            `;
-            document.getElementById('answerInput').value = '';
-            document.getElementById('feedbackBox').classList.add('hidden');
-        }
-
-        async function submitAnswer() {
-            const answer = document.getElementById('answerInput').value.trim();
-            if (!answer) { alert('Please provide an answer'); return; }
-            
-            showLoading('Evaluating your answer...');
-            try {
-                const resp = await fetch('/submit_answer', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json', 'X-User-Session-Id': sessionId },
-                    body: JSON.stringify({
-                        question_id: questions[currentQuestion].id,
-                        response_text: answer,
-                        duration: '02:00'
-                    })
-                });
-                const data = await resp.json();
-                hideLoading();
-                
-                if (data.evaluation) {
-                    const e = data.evaluation;
-                    responses.push({ question: questions[currentQuestion].question, evaluation: e });
-                    
-                    document.getElementById('feedbackBox').innerHTML = `
-                        <strong>Score: ${e.score}/100</strong><br>
-                        Technical: ${e.technicalScore}% | Communication: ${e.communicationScore}% | Relevance: ${e.relevanceScore}%<br>
-                        <em>${e.feedback}</em>
-                    `;
-                    document.getElementById('feedbackBox').classList.remove('hidden');
-                    
-                    currentQuestion++;
-                    if (currentQuestion < questions.length) {
-                        setTimeout(showQuestion, 2000);
-                    } else {
-                        setTimeout(showAssessment, 2000);
-                    }
-                }
-            } catch (e) {
-                hideLoading();
-                alert('Error: ' + e.message);
-            }
-        }
-
-        async function showAssessment() {
-            showLoading('Generating assessment report...');
-            try {
-                const resp = await fetch('/get_assessment', {
-                    headers: { 'X-User-Session-Id': sessionId }
-                });
-                const data = await resp.json();
-                hideLoading();
-                
-                if (data.assessment) {
-                    const a = data.assessment;
-                    const score = a.overallScore || 0;
-                    const recClass = score >= 85 ? 'rec-high' : score >= 70 ? 'rec-good' : 'rec-low';
-                    
-                    document.getElementById('scoreDisplay').innerHTML = `
-                        <div class="score-circle" style="--score: ${score * 3.6}deg">
-                            <div class="score-inner">
-                                <span class="score-value">${score}</span>
-                                <span class="score-label">Overall</span>
-                            </div>
-                        </div>
-                        <div class="recommendation ${recClass}">${a.recommendation || 'N/A'}</div>
-                    `;
-                    
-                    let breakdown = '<h3>Detailed Scores</h3>';
-                    if (a.detailedScores) {
-                        breakdown += `
-                            <div class="breakdown-item"><span>Technical Skills</span><span>${a.detailedScores.technicalSkills}%</span></div>
-                            <div class="breakdown-item"><span>Communication</span><span>${a.detailedScores.communication}%</span></div>
-                            <div class="breakdown-item"><span>Soft Skills</span><span>${a.detailedScores.softSkills}%</span></div>
-                        `;
-                    }
-                    if (a.keyStrengths) {
-                        breakdown += '<h3 style="margin-top:20px">Key Strengths</h3><ul>' + a.keyStrengths.map(s => `<li>${s}</li>`).join('') + '</ul>';
-                    }
-                    if (a.areasForImprovement) {
-                        breakdown += '<h3 style="margin-top:20px">Areas for Improvement</h3><ul>' + a.areasForImprovement.map(s => `<li>${s}</li>`).join('') + '</ul>';
-                    }
-                    document.getElementById('breakdownDisplay').innerHTML = breakdown;
-                    
-                    document.getElementById('interviewSection').classList.add('hidden');
-                    document.getElementById('assessmentSection').classList.remove('hidden');
-                }
-            } catch (e) {
-                hideLoading();
-                alert('Error: ' + e.message);
-            }
-        }
-    </script>
-</body>
-</html>
-'''
-
 if __name__ == '__main__':
     port = int(os.environ.get('PORT', 7860))
     app.run(host='0.0.0.0', port=port, debug=False)

static/assets/css/premium.css

@@ -0,0 +1,1376 @@
+/* Premium AI Platform - Luxury Design System */
+
+:root {
+    /* Premium Color Palette */
+    --color-primary: #6366f1;
+    --color-primary-dark: #4f46e5;
+    --color-secondary: #8b5cf6;
+    --color-accent: #06b6d4;
+    --color-success: #10b981;
+    --color-warning: #f59e0b;
+    --color-danger: #ef4444;
+    
+    /* Dark Theme */
+    --color-bg-primary: #0a0a0f;
+    --color-bg-secondary: #13131a;
+    --color-bg-tertiary: #1a1a24;
+    --color-surface: rgba(255, 255, 255, 0.03);
+    --color-surface-hover: rgba(255, 255, 255, 0.06);
+    
+    /* Text Colors */
+    --color-text-primary: #ffffff;
+    --color-text-secondary: #a1a1aa;
+    --color-text-tertiary: #71717a;
+    
+    /* Glass Effect */
+    --glass-bg: rgba(255, 255, 255, 0.05);
+    --glass-border: rgba(255, 255, 255, 0.1);
+    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+    
+    /* Spacing */
+    --spacing-xs: 0.5rem;
+    --spacing-sm: 1rem;
+    --spacing-md: 1.5rem;
+    --spacing-lg: 2rem;
+    --spacing-xl: 3rem;
+    
+    /* Border Radius */
+    --radius-sm: 0.5rem;
+    --radius-md: 1rem;
+    --radius-lg: 1.5rem;
+    --radius-xl: 2rem;
+    
+    /* Transitions */
+    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    background: var(--color-bg-primary);
+    color: var(--color-text-primary);
+    line-height: 1.6;
+    overflow-x: hidden;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Poppins', sans-serif;
+    font-weight: 700;
+    line-height: 1.2;
+}
+
+/* Premium Background */
+.premium-bg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    overflow: hidden;
+}
+
+.gradient-mesh {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: 
+        radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
+        radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
+        radial-gradient(circle at 40% 20%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
+    animation: meshMove 20s ease-in-out infinite;
+}
+
+@keyframes meshMove {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    50% { transform: translate(50px, 30px) scale(1.1); }
+}
+
+.neural-network {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: 0.3;
+}
+
+#neuralCanvas {
+    width: 100%;
+    height: 100%;
+}
+
+/* Navigation */
+.premium-nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    background: var(--glass-bg);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border-bottom: 1px solid var(--glass-border);
+}
+
+.nav-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: var(--spacing-md) var(--spacing-lg);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.nav-brand {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+}
+
+.brand-icon {
+    width: 48px;
+    height: 48px;
+    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
+    border-radius: var(--radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
+}
+
+.brand-text {
+    font-size: 24px;
+    font-weight: 800;
+    letter-spacing: -0.5px;
+}
+
+.brand-pro {
+    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-left: 4px;
+}
+
+.nav-menu {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+}
+
+.nav-link {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    padding: var(--spacing-sm) var(--spacing-md);
+    border-radius: var(--radius-md);
+    color: var(--color-text-secondary);
+    text-decoration: none;
+    transition: all var(--transition-base);
+    font-weight: 500;
+}
+
+.nav-link:hover {
+    color: var(--color-text-primary);
+    background: var(--color-surface-hover);
+}
+
+.nav-link.active {
+    color: var(--color-primary);
+    background: rgba(99, 102, 241, 0.1);
+}
+
+.nav-user {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-xs) var(--spacing-sm);
+    background: var(--color-surface);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--glass-border);
+}
+
+.user-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.user-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.user-name {
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.user-role {
+    font-size: 12px;
+    color: var(--color-text-tertiary);
+}
+
+.logout-btn {
+    padding: var(--spacing-xs);
+    color: var(--color-text-secondary);
+    transition: color var(--transition-fast);
+    cursor: pointer;
+    text-decoration: none;
+}
+
+.logout-btn:hover {
+    color: var(--color-danger);
+}
+
+/* Main Content */
+.premium-main {
+    position: relative;
+    z-index: 1;
+    padding-top: 100px;
+    max-width: 1400px;
+    margin: 0 auto;
+    padding-left: var(--spacing-lg);
+    padding-right: var(--spacing-lg);
+}
+
+/* Hero Section */
+.hero-section {
+    min-height: 80vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: var(--spacing-xl) 0;
+}
+
+.hero-content {
+    max-width: 900px;
+}
+
+.hero-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+    padding: var(--spacing-xs) var(--spacing-md);
+    background: var(--glass-bg);
+    border: 1px solid var(--glass-border);
+    border-radius: var(--radius-xl);
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: var(--spacing-lg);
+    backdrop-filter: blur(10px);
+}
+
+.hero-badge i {
+    color: var(--color-accent);
+}
+
+.hero-title {
+    font-size: clamp(48px, 8vw, 72px);
+    font-weight: 800;
+    margin-bottom: var(--spacing-md);
+    letter-spacing: -2px;
+}
+
+.gradient-text {
+    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.hero-subtitle {
+    font-size: 20px;
+    color: var(--color-text-secondary);
+    margin-bottom: var(--spacing-xl);
+    line-height: 1.8;
+}
+
+.hero-actions {
+    display: flex;
+    gap: var(--spacing-md);
+    justify-content: center;
+    margin-bottom: var(--spacing-xl);
+}
+
+/* Buttons */
+.btn-primary, .btn-secondary {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: 16px 32px;
+    border-radius: var(--radius-lg);
+    font-size: 16px;
+    font-weight: 600;
+    border: none;
+    cursor: pointer;
+    transition: all var(--transition-base);
+    overflow: hidden;
+}
+
+.btn-primary {
+    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
+    color: white;
+    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.5);
+}
+
+.btn-glow {
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+    transition: left 0.5s;
+}
+
+.btn-primary:hover .btn-glow {
+    left: 100%;
+}
+
+.btn-secondary {
+    background: var(--color-surface);
+    color: var(--color-text-primary);
+    border: 1px solid var(--glass-border);
+}
+
+.btn-secondary:hover {
+    background: var(--color-surface-hover);
+    border-color: var(--color-primary);
+}
+
+/* Hero Stats */
+.hero-stats {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacing-lg);
+    padding: var(--spacing-lg);
+    background: var(--glass-bg);
+    border: 1px solid var(--glass-border);
+    border-radius: var(--radius-xl);
+    backdrop-filter: blur(10px);
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.stat-item {
+    text-align: center;
+}
+
+.stat-value {
+    font-size: 32px;
+    font-weight: 800;
+    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.stat-label {
+    font-size: 14px;
+    color: var(--color-text-tertiary);
+    margin-top: 4px;
+}
+
+.stat-divider {
+    width: 1px;
+    height: 40px;
+    background: var(--glass-border);
+}
+
+/* Glass Card */
+.glass-card {
+    background: var(--glass-bg);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid var(--glass-border);
+    border-radius: var(--radius-xl);
+    padding: var(--spacing-xl);
+    box-shadow: var(--glass-shadow);
+    transition: all var(--transition-base);
+}
+
+.glass-card:hover {
+    border-color: rgba(99, 102, 241, 0.3);
+    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
+}
+
+.glass-card.large {
+    padding: var(--spacing-xl) var(--spacing-xl);
+}
+
+/* Upload Section */
+.upload-section {
+    margin: var(--spacing-xl) 0;
+}
+
+.card-header {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+    margin-bottom: var(--spacing-xl);
+}
+
+.header-icon {
+    width: 64px;
+    height: 64px;
+    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
+    border-radius: var(--radius-lg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28px;
+    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
+}
+
+.card-title {
+    font-size: 28px;
+    font-weight: 700;
+    margin-bottom: 4px;
+}
+
+.card-subtitle {
+    font-size: 16px;
+    color: var(--color-text-secondary);
+}
+
+.upload-area {
+    border: 2px dashed var(--glass-border);
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-xl);
+    text-align: center;
+    cursor: pointer;
+    transition: all var(--transition-base);
+}
+
+.upload-area:hover {
+    border-color: var(--color-primary);
+    background: rgba(99, 102, 241, 0.05);
+}
+
+.upload-icon {
+    font-size: 64px;
+    color: var(--color-primary);
+    margin-bottom: var(--spacing-md);
+}
+
+.upload-title {
+    font-size: 24px;
+    margin-bottom: var(--spacing-sm);
+}
+
+.upload-text {
+    color: var(--color-text-secondary);
+    margin-bottom: var(--spacing-md);
+}
+
+.upload-formats {
+    display: flex;
+    gap: var(--spacing-sm);
+    justify-content: center;
+}
+
+.format-badge {
+    padding: 6px 16px;
+    background: var(--color-surface);
+    border: 1px solid var(--glass-border);
+    border-radius: var(--radius-sm);
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--color-primary);
+}
+
+/* Loading Overlay */
+.loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(10, 10, 15, 0.95);
+    backdrop-filter: blur(10px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+}
+
+.loading-overlay.hidden {
+    display: none;
+}
+
+.loading-content {
+    text-align: center;
+}
+
+.loading-spinner {
+    width: 80px;
+    height: 80px;
+    border: 4px solid var(--color-surface);
+    border-top-color: var(--color-primary);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin: 0 auto var(--spacing-md);
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+.loading-text {
+    font-size: 18px;
+    color: var(--color-text-secondary);
+}
+
+/* Interview Section */
+.interview-section {
+    margin: var(--spacing-xl) 0;
+}
+
+.interview-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--spacing-xl);
+}
+
+.progress-indicator {
+    position: relative;
+}
+
+.progress-circle {
+    position: relative;
+    width: 100px;
+    height: 100px;
+}
+
+.progress-circle svg {
+    transform: rotate(-90deg);
+}
+
+.progress-circle circle {
+    fill: none;
+    stroke: var(--color-surface);
+    stroke-width: 8;
+}
+
+.progress-circle .progress-ring {
+    stroke: var(--color-primary);
+    stroke-linecap: round;
+    transition: stroke-dashoffset 0.5s ease;
+}
+
+.progress-number {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 20px;
+    font-weight: 700;
+    color: var(--color-primary);
+}
+
+.timer {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm) var(--spacing-md);
+    background: var(--color-surface);
+    border-radius: var(--radius-lg);
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.question-container {
+    margin-bottom: var(--spacing-xl);
+}
+
+.question-tags {
+    display: flex;
+    gap: var(--spacing-sm);
+    margin-bottom: var(--spacing-md);
+}
+
+.tag {
+    padding: 6px 16px;
+    background: rgba(99, 102, 241, 0.1);
+    border: 1px solid rgba(99, 102, 241, 0.3);
+    border-radius: var(--radius-sm);
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--color-primary);
+}
+
+.question-text {
+    font-size: 24px;
+    line-height: 1.6;
+    color: var(--color-text-primary);
+}
+
+.answer-container {
+    margin-bottom: var(--spacing-xl);
+}
+
+.answer-input {
+    width: 100%;
+    padding: var(--spacing-md);
+    background: var(--color-surface);
+    border: 1px solid var(--glass-border);
+    border-radius: var(--radius-lg);
+    color: var(--color-text-primary);
+    font-size: 16px;
+    font-family: inherit;
+    resize: vertical;
+    min-height: 200px;
+    transition: all var(--transition-base);
+}
+
+.answer-input:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
+}
+
+.ai-warning {
+    margin-top: var(--spacing-md);
+    padding: var(--spacing-md);
+    background: rgba(239, 68, 68, 0.1);
+    border: 1px solid rgba(239, 68, 68, 0.3);
+    border-radius: var(--radius-md);
+    color: var(--color-danger);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+}
+
+.interview-actions {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--spacing-md);
+}
+
+/* Results Section */
+.results-section {
+    margin: var(--spacing-xl) 0;
+}
+
+.results-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--spacing-xl);
+}
+
+.section-title {
+    font-size: 32px;
+    font-weight: 700;
+}
+
+.results-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    gap: var(--spacing-lg);
+}
+
+.score-display {
+    text-align: center;
+}
+
+.score-circle {
+    position: relative;
+    width: 200px;
+    height: 200px;
+    margin: 0 auto var(--spacing-lg);
+}
+
+.score-circle svg {
+    transform: rotate(-90deg);
+}
+
+.score-circle circle {
+    fill: none;
+    stroke: var(--color-surface);
+    stroke-width: 12;
+}
+
+.score-circle .score-ring {
+    stroke: url(#scoreGradient);
+    stroke-linecap: round;
+}
+
+.score-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+}
+
+.score-value {
+    display: block;
+    font-size: 48px;
+    font-weight: 800;
+    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.score-label {
+    display: block;
+    font-size: 16px;
+    color: var(--color-text-secondary);
+    margin-top: 4px;
+}
+
+.recommendation {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-md);
+    background: rgba(16, 185, 129, 0.1);
+    border: 1px solid rgba(16, 185, 129, 0.3);
+    border-radius: var(--radius-lg);
+    color: var(--color-success);
+    font-weight: 600;
+}
+
+.score-breakdown {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md);
+}
+
+.score-item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+}
+
+.score-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.score-name {
+    font-weight: 600;
+    color: var(--color-text-secondary);
+}
+
+.score-percent {
+    font-weight: 700;
+    color: var(--color-primary);
+}
+
+.score-bar {
+    height: 8px;
+    background: var(--color-surface);
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+.score-bar-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
+    border-radius: 10px;
+    transition: width 1s ease;
+}
+
+/* Utility Classes */
+.hidden {
+    display: none !important;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .premium-main {
+        padding-left: var(--spacing-md);
+        padding-right: var(--spacing-md);
+    }
+    
+    .hero-title {
+        font-size: 36px;
+    }
+    
+    .hero-actions {
+        flex-direction: column;
+    }
+    
+    .hero-stats {
+        flex-direction: column;
+        gap: var(--spacing-md);
+    }
+    
+    .stat-divider {
+        width: 100%;
+        height: 1px;
+    }
+    
+    .nav-menu {
+        gap: var(--spacing-sm);
+    }
+    
+    .nav-link span {
+        display: none;
+    }
+}
+
+/* Exam Mode Styles */
+body.exam-mode {
+    overflow: hidden;
+}
+
+body.exam-mode .interview-section {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 9999;
+    background: var(--color-bg-primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    margin: 0;
+}
+
+body.exam-mode .interview-section .glass-card {
+    max-width: 900px;
+    width: 100%;
+    height: auto;
+    max-height: 90vh;
+    overflow-y: auto;
+}
+
+body.exam-mode .interview-section:not(.hidden) {
+    display: flex !important;
+}
+
+/* Hide elements during exam */
+body.exam-mode .premium-nav,
+body.exam-mode .hero-section,
+body.exam-mode .upload-section,
+body.exam-mode .results-section {
+    display: none !important;
+}
+
+/* Interview section full screen layout */
+.interview-section {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacing-xl);
+}
+
+.interview-section.hidden {
+    display: none;
+}
+
+.interview-section .glass-card {
+    width: 100%;
+    max-width: 900px;
+}
+
+.interview-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--spacing-lg);
+    padding-bottom: var(--spacing-md);
+    border-bottom: 1px solid var(--glass-border);
+}
+
+.progress-indicator {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+}
+
+.progress-circle {
+    position: relative;
+    width: 80px;
+    height: 80px;
+}
+
+.progress-circle svg {
+    width: 100%;
+    height: 100%;
+    transform: rotate(-90deg);
+}
+
+.progress-circle circle {
+    fill: none;
+    stroke-width: 8;
+}
+
+.progress-circle circle:first-child {
+    stroke: var(--color-surface);
+}
+
+.progress-circle circle.progress-ring {
+    stroke: var(--color-primary);
+    stroke-linecap: round;
+    transition: stroke-dashoffset 0.5s ease;
+}
+
+.progress-number {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--color-text-primary);
+}
+
+.timer {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm) var(--spacing-md);
+    background: var(--glass-bg);
+    border: 1px solid var(--glass-border);
+    border-radius: var(--radius-lg);
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--color-primary);
+}
+
+.timer i {
+    font-size: 20px;
+}
+
+.question-container {
+    margin-bottom: var(--spacing-xl);
+}
+
+.question-tags {
+    display: flex;
+    gap: var(--spacing-sm);
+    margin-bottom: var(--spacing-md);
+}
+
+.question-tags .tag {
+    padding: 6px 16px;
+    background: rgba(99, 102, 241, 0.1);
+    border: 1px solid rgba(99, 102, 241, 0.3);
+    border-radius: 20px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--color-primary);
+}
+
+.question-text {
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 1.6;
+    color: var(--color-text-primary);
+    margin: 0;
+}
+
+.answer-container {
+    margin-bottom: var(--spacing-xl);
+}
+
+.answer-input {
+    width: 100%;
+    min-height: 200px;
+    padding: var(--spacing-md);
+    background: var(--color-surface);
+    border: 1px solid var(--glass-border);
+    border-radius: var(--radius-lg);
+    color: var(--color-text-primary);
+    font-size: 16px;
+    font-family: 'Inter', sans-serif;
+    line-height: 1.6;
+    resize: vertical;
+    transition: all var(--transition-base);
+}
+
+.answer-input:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
+}
+
+.answer-input::placeholder {
+    color: var(--color-text-tertiary);
+}
+
+.ai-warning {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm) var(--spacing-md);
+    background: rgba(239, 68, 68, 0.1);
+    border: 1px solid rgba(239, 68, 68, 0.3);
+    border-radius: var(--radius-md);
+    color: var(--color-danger);
+    font-size: 14px;
+    font-weight: 500;
+    margin-top: var(--spacing-sm);
+}
+
+.ai-warning.hidden {
+    display: none;
+}
+
+.interview-actions {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--spacing-md);
+}
+
+.interview-actions button {
+    flex: 1;
+}
+
+/* Exam mode - center interview card */
+body.exam-mode .interview-section .glass-card {
+    animation: slideInUp 0.5s ease;
+}
+
+@keyframes slideInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Results section styles */
+.results-section {
+    padding: var(--spacing-xl);
+    min-height: 100vh;
+}
+
+.results-section.hidden {
+    display: none;
+}
+
+.results-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--spacing-xl);
+}
+
+.section-title {
+    font-size: 32px;
+    font-weight: 700;
+    color: var(--color-text-primary);
+}
+
+.results-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    gap: var(--spacing-lg);
+}
+
+.score-display {
+    text-align: center;
+    padding: var(--spacing-lg);
+}
+
+.score-circle {
+    position: relative;
+    width: 200px;
+    height: 200px;
+    margin: 0 auto var(--spacing-lg);
+}
+
+.score-circle svg {
+    width: 100%;
+    height: 100%;
+    transform: rotate(-90deg);
+}
+
+.score-circle circle {
+    fill: none;
+    stroke-width: 12;
+}
+
+.score-circle circle:first-child {
+    stroke: var(--color-surface);
+}
+
+.score-circle circle.score-ring {
+    stroke: var(--color-primary);
+    stroke-linecap: round;
+}
+
+.score-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+}
+
+.score-value {
+    display: block;
+    font-size: 48px;
+    font-weight: 800;
+    color: var(--color-text-primary);
+}
+
+.score-label {
+    display: block;
+    font-size: 16px;
+    color: var(--color-text-secondary);
+    margin-top: var(--spacing-xs);
+}
+
+.recommendation {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm) var(--spacing-md);
+    background: rgba(16, 185, 129, 0.1);
+    border: 1px solid rgba(16, 185, 129, 0.3);
+    border-radius: var(--radius-lg);
+    color: var(--color-success);
+    font-weight: 600;
+}
+
+.score-breakdown {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md);
+}
+
+.score-item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+}
+
+.score-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.score-name {
+    font-weight: 600;
+    color: var(--color-text-primary);
+}
+
+.score-percent {
+    font-weight: 700;
+    color: var(--color-primary);
+}
+
+.score-bar {
+    height: 8px;
+    background: var(--color-surface);
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.score-bar-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
+    border-radius: 4px;
+    transition: width 1s ease;
+}
+
+/* Coding Challenge Styles */
+.coding-challenge-notice {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-md);
+    background: rgba(99, 102, 241, 0.1);
+    border: 1px solid rgba(99, 102, 241, 0.3);
+    border-radius: var(--radius-md);
+    color: var(--color-primary);
+    font-weight: 600;
+    margin-bottom: var(--spacing-md);
+}
+
+.coding-challenge-notice i {
+    font-size: 20px;
+}
+
+.coding-language-selector {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+    padding: var(--spacing-md);
+    background: var(--color-surface);
+    border: 1px solid var(--glass-border);
+    border-radius: var(--radius-md);
+    margin-bottom: var(--spacing-md);
+}
+
+.coding-language-selector label {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    font-weight: 600;
+    color: var(--color-text-secondary);
+    margin: 0;
+}
+
+.language-dropdown {
+    padding: 10px 16px;
+    background: var(--color-bg-secondary);
+    border: 1px solid var(--glass-border);
+    border-radius: var(--radius-md);
+    color: var(--color-text-primary);
+    font-size: 16px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all var(--transition-base);
+    min-width: 200px;
+}
+
+.language-dropdown:hover {
+    border-color: var(--color-primary);
+}
+
+.language-dropdown:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
+}
+
+#codingEditor {
+    background: var(--color-surface);
+    border: 1px solid var(--glass-border);
+    border-radius: var(--radius-lg);
+    min-height: 700px;
+    font-size: 16px;
+}
+
+/* Ensure iframe content is properly sized */
+#codingEditor iframe {
+    width: 100%;
+    height: 100%;
+}
+
+/* Make interview card bigger for coding questions */
+body.exam-mode .interview-section .glass-card.coding-active {
+    max-width: 1200px;
+    max-height: 98vh;
+}
+
+/* Exam Mode - Hide UI Elements */
+body.exam-mode .premium-nav,
+body.exam-mode .hero-section,
+body.exam-mode .upload-section,
+body.exam-mode .results-section {
+    display: none !important;
+}
+
+body.exam-mode {
+    overflow: hidden;
+}
+
+body.exam-mode .interview-section {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 9999;
+    background: var(--color-bg-primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    margin: 0;
+    overflow-y: auto;
+}
+
+body.exam-mode .interview-section .glass-card {
+    max-width: 1000px;
+    width: 100%;
+    height: auto;
+    max-height: 95vh;
+    overflow-y: auto;
+}
+
+body.exam-mode .interview-section:not(.hidden) {
+    display: flex !important;
+}
+
+/* Fullscreen coding editor for coding questions */
+body.exam-mode .interview-section.coding-mode {
+    padding: 0 !important;
+    align-items: stretch !important;
+}
+
+body.exam-mode .interview-section.coding-mode .glass-card {
+    max-width: 100vw !important;
+    width: 100vw !important;
+    max-height: 100vh !important;
+    height: 100vh !important;
+    margin: 0 !important;
+    padding: 1.5rem !important;
+    border-radius: 0 !important;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+body.exam-mode .interview-section.coding-mode .interview-header {
+    flex-shrink: 0;
+}
+
+body.exam-mode .interview-section.coding-mode .question-container {
+    flex-shrink: 0;
+}
+
+body.exam-mode .interview-section.coding-mode .answer-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    overflow: hidden;
+}
+
+body.exam-mode .interview-section.coding-mode #codingEditor {
+    flex: 1;
+    min-height: 0 !important;
+    height: 100% !important;
+}
+
+body.exam-mode .interview-section.coding-mode .interview-actions {
+    flex-shrink: 0;
+    margin-top: 1rem;
+}

static/assets/js/config.js

@@ -0,0 +1,13 @@
+// API Configuration for HuggingFace Spaces
+const API_CONFIG = {
+    BASE_URL: '',  // Same origin
+    TIMEOUT: 30000,
+    SESSION_KEY: 'hr_ai_session_id'
+};
+
+function getApiUrl(endpoint) {
+    return `${API_CONFIG.BASE_URL}/${endpoint.replace(/^\//, '')}`;
+}
+
+window.API_CONFIG = API_CONFIG;
+window.getApiUrl = getApiUrl;

static/assets/js/exam-security.js

@@ -0,0 +1,754 @@
+/**
+ * Exam Security System
+ * - Tab switch detection (max 2 switches)
+ * - Right-click disabled
+ * - Copy/paste disabled
+ * - Auto fullscreen
+ * - Time limit per question (3 minutes)
+ * - No going back to previous questions
+ * - Browser restriction (Chrome-like only)
+ * - Extension detection (block AI extensions)
+ */
+
+class ExamSecurity {
+    constructor() {
+        this.tabSwitchCount = 0;
+        this.maxTabSwitches = 2;
+        this.isExamMode = false;
+        this.questionTimeLimit = 180; // 3 minutes in seconds
+        this.questionTimer = null;
+        this.currentQuestionStartTime = null;
+        this.allowedBrowsers = ['chrome', 'edge', 'brave', 'opera'];
+        this.blockedExtensions = [
+            'chatgpt', 'copilot', 'grammarly', 'quillbot', 
+            'jasper', 'writesonic', 'claude', 'bard'
+        ];
+        
+        this.init();
+    }
+    
+    init() {
+        // Disable right-click
+        document.addEventListener('contextmenu', (e) => {
+            if (this.isExamMode) {
+                e.preventDefault();
+                this.showWarning('Right-click is disabled during the interview');
+                return false;
+            }
+        });
+        
+        // Disable copy/cut/paste completely
+        document.addEventListener('copy', (e) => {
+            if (this.isExamMode) {
+                e.preventDefault();
+                this.showWarning('Copy is disabled during the interview');
+            }
+        });
+        
+        document.addEventListener('cut', (e) => {
+            if (this.isExamMode) {
+                e.preventDefault();
+                this.showWarning('Cut is disabled during the interview');
+            }
+        });
+        
+        document.addEventListener('paste', (e) => {
+            if (this.isExamMode) {
+                e.preventDefault();
+                this.showWarning('Paste is disabled during the interview');
+            }
+        });
+        
+        // Disable keyboard shortcuts
+        document.addEventListener('keydown', (e) => {
+            if (this.isExamMode) {
+                // Disable F12, Ctrl+Shift+I, Ctrl+Shift+J, Ctrl+U
+                if (e.key === 'F12' || 
+                    (e.ctrlKey && e.shiftKey && (e.key === 'I' || e.key === 'J')) ||
+                    (e.ctrlKey && e.key === 'u')) {
+                    e.preventDefault();
+                    this.showWarning('Developer tools are disabled during the interview');
+                    return false;
+                }
+                
+                // Disable Ctrl+C, Ctrl+V, Ctrl+X everywhere (no copy/paste allowed)
+                if (e.ctrlKey && (e.key === 'c' || e.key === 'v' || e.key === 'x')) {
+                    e.preventDefault();
+                    this.showWarning('Copy/Paste is disabled during the interview');
+                    return false;
+                }
+            }
+        });
+        
+        // Tab switch detection
+        document.addEventListener('visibilitychange', () => {
+            if (this.isExamMode && document.hidden) {
+                // Don't count if user is interacting with iframe (coding editor)
+                const activeElement = document.activeElement;
+                if (activeElement && activeElement.tagName === 'IFRAME') {
+                    console.log('Iframe interaction detected, not counting as tab switch');
+                    return;
+                }
+                this.handleTabSwitch();
+            }
+        });
+        
+        // Window blur detection (switching to another window)
+        window.addEventListener('blur', () => {
+            if (this.isExamMode) {
+                // Don't count if user is interacting with iframe (coding editor)
+                const activeElement = document.activeElement;
+                if (activeElement && activeElement.tagName === 'IFRAME') {
+                    console.log('Iframe interaction detected, not counting as tab switch');
+                    return;
+                }
+                
+                // Add a small delay to check if it's really a tab switch
+                setTimeout(() => {
+                    if (!document.hasFocus()) {
+                        this.handleTabSwitch();
+                    }
+                }, 100);
+            }
+        });
+        
+        // Prevent exit fullscreen
+        document.addEventListener('fullscreenchange', () => {
+            if (this.isExamMode && !document.fullscreenElement) {
+                this.showWarning('Please stay in fullscreen mode during the interview');
+                this.enterFullscreen();
+            }
+        });
+    }
+    
+    handleTabSwitch() {
+        this.tabSwitchCount++;
+        
+        console.log(`Tab switch detected: ${this.tabSwitchCount}/${this.maxTabSwitches}`);
+        
+        // Log to backend
+        this.logSecurityEvent('tab_switch', {
+            count: this.tabSwitchCount,
+            timestamp: new Date().toISOString()
+        });
+        
+        if (this.tabSwitchCount >= this.maxTabSwitches) {
+            this.terminateExam();
+        } else {
+            const remaining = this.maxTabSwitches - this.tabSwitchCount;
+            this.showCriticalWarning(
+                `⚠️ TAB SWITCH DETECTED!\n\nYou have ${remaining} warning(s) remaining.\n\nSwitching tabs again will terminate your interview.`
+            );
+        }
+    }
+    
+    terminateExam() {
+        this.isExamMode = false;
+        
+        // Log termination
+        this.logSecurityEvent('exam_terminated', {
+            reason: 'exceeded_tab_switches',
+            timestamp: new Date().toISOString()
+        });
+        
+        // Show termination message
+        const overlay = document.createElement('div');
+        overlay.className = 'critical-warning-overlay show';
+        overlay.style.zIndex = '99999';
+        overlay.innerHTML = `
+            <div class="critical-warning-box">
+                <div class="warning-icon">
+                    <i class="fas fa-ban"></i>
+                </div>
+                <h3>Interview Terminated</h3>
+                <p>You have exceeded the maximum number of tab switches (2).</p>
+                <p style="margin-top: 1rem;">Your interview has been automatically submitted with current progress.</p>
+                <div style="margin-top: 2rem; display: flex; gap: 1rem; justify-content: center;">
+                    <button class="btn-primary" onclick="window.location.href='index.php'">
+                        <span>Go to Home</span>
+                    </button>
+                </div>
+            </div>
+        `;
+        document.body.appendChild(overlay);
+        
+        // Auto-submit interview
+        this.autoSubmitInterview();
+    }
+    
+    async startExamMode() {
+        // Check browser compatibility
+        if (!this.checkBrowser()) {
+            this.showBrowserError();
+            return false;
+        }
+        
+        // Check for AI extensions
+        const hasBlockedExtensions = await this.detectExtensions();
+        if (hasBlockedExtensions) {
+            this.showExtensionError();
+            return false;
+        }
+        
+        // Don't activate exam mode yet - wait for proctoring to be set up
+        this.tabSwitchCount = 0;
+        
+        // Enter fullscreen
+        this.enterFullscreen();
+        
+        // Show security notice
+        this.showSecurityNotice();
+        
+        // Log exam start
+        this.logSecurityEvent('exam_started', {
+            timestamp: new Date().toISOString(),
+            browser: this.getBrowserInfo(),
+            userAgent: navigator.userAgent
+        });
+        
+        return true;
+    }
+    
+    activateExamMode() {
+        // Called after proctoring is set up
+        this.isExamMode = true;
+    }
+    
+    checkBrowser() {
+        const userAgent = navigator.userAgent.toLowerCase();
+        const isChrome = userAgent.includes('chrome') && !userAgent.includes('edg');
+        const isEdge = userAgent.includes('edg');
+        const isBrave = userAgent.includes('brave');
+        const isOpera = userAgent.includes('opr') || userAgent.includes('opera');
+        
+        return isChrome || isEdge || isBrave || isOpera;
+    }
+    
+    getBrowserInfo() {
+        const userAgent = navigator.userAgent.toLowerCase();
+        if (userAgent.includes('edg')) return 'Microsoft Edge';
+        if (userAgent.includes('brave')) return 'Brave';
+        if (userAgent.includes('opr') || userAgent.includes('opera')) return 'Opera';
+        if (userAgent.includes('chrome')) return 'Google Chrome';
+        return 'Unknown';
+    }
+    
+    async detectExtensions() {
+        // More specific AI extension detection to avoid false positives
+        const extensionTests = [
+            // ChatGPT specific elements
+            { id: 'chatgpt', test: () => document.querySelector('[data-testid*="chatgpt"]') || document.querySelector('[class*="chatgpt-"]') },
+            // Grammarly specific
+            { id: 'grammarly', test: () => document.querySelector('grammarly-extension') || document.querySelector('grammarly-desktop-integration') },
+            // Copilot specific
+            { id: 'copilot', test: () => document.querySelector('[class*="copilot"]') || document.querySelector('[id*="copilot"]') }
+        ];
+        
+        for (const test of extensionTests) {
+            try {
+                if (test.test()) {
+                    console.warn(`Detected AI extension: ${test.id}`);
+                    return true;
+                }
+            } catch (e) {
+                // Extension detection blocked, continue
+            }
+        }
+        
+        // Don't check for generic extensions - too many false positives
+        return false;
+    }
+    
+    showBrowserError() {
+        const overlay = document.createElement('div');
+        overlay.className = 'critical-warning-overlay show';
+        overlay.innerHTML = `
+            <div class="critical-warning-box">
+                <div class="warning-icon">
+                    <i class="fas fa-exclamation-circle"></i>
+                </div>
+                <h3>Unsupported Browser</h3>
+                <p>This interview can only be taken on the following browsers:</p>
+                <ul class="browser-list">
+                    <li><i class="fab fa-chrome"></i> Google Chrome</li>
+                    <li><i class="fab fa-edge"></i> Microsoft Edge</li>
+                    <li><i class="fab fa-brave"></i> Brave Browser</li>
+                    <li><i class="fab fa-opera"></i> Opera</li>
+                </ul>
+                <p style="margin-top: 1rem; color: var(--color-danger);">
+                    <strong>Current Browser:</strong> ${this.getBrowserInfo()}
+                </p>
+                <button class="btn-primary" onclick="window.location.href='index.php'">
+                    <span>Go Back</span>
+                </button>
+            </div>
+        `;
+        document.body.appendChild(overlay);
+    }
+    
+    showExtensionError() {
+        const overlay = document.createElement('div');
+        overlay.className = 'critical-warning-overlay show';
+        overlay.innerHTML = `
+            <div class="critical-warning-box">
+                <div class="warning-icon">
+                    <i class="fas fa-puzzle-piece"></i>
+                </div>
+                <h3>Extensions Detected</h3>
+                <p>AI-powered browser extensions must be disabled before starting the interview.</p>
+                <div class="extension-warning">
+                    <p><strong>Commonly blocked extensions:</strong></p>
+                    <ul class="extension-list">
+                        <li>ChatGPT / AI Assistants</li>
+                        <li>GitHub Copilot</li>
+                        <li>Grammarly</li>
+                        <li>QuillBot</li>
+                        <li>Any AI writing tools</li>
+                    </ul>
+                </div>
+                <p style="margin-top: 1rem;">
+                    <strong>How to disable extensions:</strong><br>
+                    1. Click the puzzle icon in your browser toolbar<br>
+                    2. Disable all AI-related extensions<br>
+                    3. Refresh this page and try again
+                </p>
+                <button class="btn-primary" onclick="window.location.reload()">
+                    <span>Refresh Page</span>
+                </button>
+            </div>
+        `;
+        document.body.appendChild(overlay);
+    }
+    
+    endExamMode() {
+        this.isExamMode = false;
+        this.exitFullscreen();
+        
+        if (this.questionTimer) {
+            clearInterval(this.questionTimer);
+        }
+    }
+    
+    enterFullscreen() {
+        const elem = document.documentElement;
+        if (elem.requestFullscreen) {
+            elem.requestFullscreen().catch(err => {
+                console.log('Fullscreen error:', err);
+            });
+        } else if (elem.webkitRequestFullscreen) {
+            elem.webkitRequestFullscreen();
+        } else if (elem.msRequestFullscreen) {
+            elem.msRequestFullscreen();
+        }
+    }
+    
+    exitFullscreen() {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        } else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+        } else if (document.msExitFullscreen) {
+            document.msExitFullscreen();
+        }
+    }
+    
+    startQuestionTimer(onTimeout, customTimeLimit = null) {
+        this.currentQuestionStartTime = Date.now();
+        // Use custom time limit if provided, otherwise use default
+        let remainingTime = customTimeLimit || this.questionTimeLimit;
+        
+        // Update timer display
+        const updateTimerDisplay = () => {
+            const minutes = Math.floor(remainingTime / 60);
+            const seconds = remainingTime % 60;
+            const timerElement = document.getElementById('timer');
+            if (timerElement) {
+                timerElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+                
+                // Change color when time is running out (for coding: < 2 min, regular: < 30 sec)
+                const warningThreshold = customTimeLimit ? 120 : 30;
+                const dangerThreshold = customTimeLimit ? 60 : 30;
+                
+                if (remainingTime < dangerThreshold) {
+                    timerElement.style.color = 'var(--color-danger)';
+                } else if (remainingTime < warningThreshold) {
+                    timerElement.style.color = 'var(--color-warning)';
+                } else {
+                    timerElement.style.color = 'var(--color-primary)';
+                }
+            }
+        };
+        
+        updateTimerDisplay();
+        
+        if (this.questionTimer) {
+            clearInterval(this.questionTimer);
+        }
+        
+        this.questionTimer = setInterval(() => {
+            remainingTime--;
+            updateTimerDisplay();
+            
+            // Warning based on question type
+            if (customTimeLimit) {
+                // Coding question - warn at 2 minutes
+                if (remainingTime === 120) {
+                    this.showWarning('⏰ 2 minutes remaining!');
+                }
+            } else {
+                // Regular question - warn at 30 seconds
+                if (remainingTime === 30) {
+                    this.showWarning('⏰ 30 seconds remaining!');
+                }
+            }
+            
+            // Time's up
+            if (remainingTime <= 0) {
+                clearInterval(this.questionTimer);
+                this.showWarning('⏰ Time is up! Moving to next question...');
+                
+                setTimeout(() => {
+                    if (onTimeout) onTimeout();
+                }, 1500);
+            }
+        }, 1000);
+    }
+    
+    stopQuestionTimer() {
+        if (this.questionTimer) {
+            clearInterval(this.questionTimer);
+        }
+    }
+    
+    getQuestionDuration() {
+        if (this.currentQuestionStartTime) {
+            const duration = Math.floor((Date.now() - this.currentQuestionStartTime) / 1000);
+            const minutes = Math.floor(duration / 60);
+            const seconds = duration % 60;
+            return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+        }
+        return '00:00';
+    }
+    
+    showSecurityNotice() {
+        const notice = document.createElement('div');
+        notice.className = 'security-notice';
+        notice.innerHTML = `
+            <div class="security-notice-content">
+                <div class="security-icon">
+                    <i class="fas fa-shield-alt"></i>
+                </div>
+                <h3>Interview Security Active</h3>
+                <div class="security-info">
+                    <p><strong>Browser:</strong> ${this.getBrowserInfo()}</p>
+                    <p><strong>Mode:</strong> Secure Exam Mode</p>
+                </div>
+                <ul class="security-rules">
+                    <li><i class="fas fa-check"></i> Fullscreen mode enabled</li>
+                    <li><i class="fas fa-check"></i> Tab switching limited (2 warnings max)</li>
+                    <li><i class="fas fa-check"></i> Right-click disabled</li>
+                    <li><i class="fas fa-check"></i> Copy/paste disabled</li>
+                    <li><i class="fas fa-check"></i> 3 minutes per question (auto-submit)</li>
+                    <li><i class="fas fa-check"></i> No going back to previous questions</li>
+                    <li><i class="fas fa-check"></i> AI extensions blocked</li>
+                    <li><i class="fas fa-check"></i> Developer tools disabled</li>
+                </ul>
+                <div class="security-warning-box">
+                    <i class="fas fa-exclamation-triangle"></i>
+                    <p><strong>Warning:</strong> Violating any security rule will result in automatic interview termination.</p>
+                </div>
+                <button class="btn-primary" onclick="this.parentElement.parentElement.remove()">
+                    <span>I Understand & Accept</span>
+                    <i class="fas fa-check"></i>
+                </button>
+            </div>
+        `;
+        
+        document.body.appendChild(notice);
+    }
+    
+    showWarning(message) {
+        const warning = document.createElement('div');
+        warning.className = 'security-warning';
+        warning.innerHTML = `
+            <i class="fas fa-exclamation-triangle"></i>
+            <span>${message}</span>
+        `;
+        
+        document.body.appendChild(warning);
+        
+        setTimeout(() => warning.classList.add('show'), 100);
+        
+        setTimeout(() => {
+            warning.classList.remove('show');
+            setTimeout(() => warning.remove(), 300);
+        }, 3000);
+    }
+    
+    showCriticalWarning(message) {
+        const overlay = document.createElement('div');
+        overlay.className = 'critical-warning-overlay';
+        overlay.innerHTML = `
+            <div class="critical-warning-box">
+                <div class="warning-icon">
+                    <i class="fas fa-exclamation-triangle"></i>
+                </div>
+                <h3>Security Warning</h3>
+                <p>${message.replace(/\n/g, '<br>')}</p>
+                <button class="btn-primary" onclick="this.parentElement.parentElement.remove()">
+                    <span>I Understand</span>
+                </button>
+            </div>
+        `;
+        
+        document.body.appendChild(overlay);
+        setTimeout(() => overlay.classList.add('show'), 100);
+    }
+    
+    logSecurityEvent(eventType, data) {
+        // Log to backend
+        fetch(getApiUrl('log_security'), {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-User-Session-Id': getSessionId()
+            },
+            body: JSON.stringify({
+                event_type: eventType,
+                data: data,
+                user_agent: navigator.userAgent,
+                timestamp: new Date().toISOString()
+            })
+        }).catch(err => console.error('Failed to log security event:', err));
+    }
+    
+    autoSubmitInterview() {
+        // Auto-submit current answers
+        console.log('Auto-submitting interview due to security violation');
+        
+        // Call assessment endpoint
+        fetch(getApiUrl('get_assessment'), {
+            method: 'GET',
+            headers: {
+                'X-User-Session-Id': getSessionId()
+            }
+        }).catch(err => console.error('Auto-submit failed:', err));
+    }
+}
+
+// Initialize security system
+const examSecurity = new ExamSecurity();
+
+// Add security styles
+const securityStyles = document.createElement('style');
+securityStyles.textContent = `
+.security-notice {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.95);
+    backdrop-filter: blur(10px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 99999;
+}
+
+.security-notice-content {
+    background: var(--glass-bg);
+    border: 1px solid var(--glass-border);
+    border-radius: var(--radius-xl);
+    padding: var(--spacing-xl);
+    max-width: 500px;
+    text-align: center;
+}
+
+.security-icon {
+    width: 80px;
+    height: 80px;
+    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 36px;
+    margin: 0 auto var(--spacing-lg);
+}
+
+.security-rules {
+    list-style: none;
+    text-align: left;
+    margin: var(--spacing-lg) 0;
+}
+
+.security-rules li {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm) 0;
+    color: var(--color-text-secondary);
+}
+
+.security-rules i {
+    color: var(--color-success);
+}
+
+.security-info {
+    background: rgba(99, 102, 241, 0.1);
+    border: 1px solid rgba(99, 102, 241, 0.3);
+    border-radius: var(--radius-md);
+    padding: var(--spacing-md);
+    margin: var(--spacing-md) 0;
+    text-align: left;
+}
+
+.security-info p {
+    margin: var(--spacing-xs) 0;
+    color: var(--color-text-secondary);
+}
+
+.security-warning-box {
+    background: rgba(239, 68, 68, 0.1);
+    border: 1px solid rgba(239, 68, 68, 0.3);
+    border-radius: var(--radius-md);
+    padding: var(--spacing-md);
+    margin: var(--spacing-lg) 0;
+    display: flex;
+    align-items: start;
+    gap: var(--spacing-sm);
+    text-align: left;
+}
+
+.security-warning-box i {
+    color: var(--color-danger);
+    font-size: 20px;
+    margin-top: 2px;
+}
+
+.security-warning-box p {
+    margin: 0;
+    color: var(--color-text-secondary);
+    font-size: 14px;
+}
+
+.browser-list, .extension-list {
+    list-style: none;
+    padding: 0;
+    margin: var(--spacing-md) 0;
+}
+
+.browser-list li, .extension-list li {
+    padding: var(--spacing-sm);
+    background: rgba(99, 102, 241, 0.1);
+    border-radius: var(--radius-sm);
+    margin: var(--spacing-xs) 0;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+}
+
+.extension-warning {
+    background: rgba(239, 68, 68, 0.1);
+    border: 1px solid rgba(239, 68, 68, 0.3);
+    border-radius: var(--radius-md);
+    padding: var(--spacing-md);
+    margin: var(--spacing-md) 0;
+    text-align: left;
+}
+
+.security-warning {
+    position: fixed;
+    top: 100px;
+    right: -400px;
+    padding: var(--spacing-md) var(--spacing-lg);
+    background: rgba(239, 68, 68, 0.95);
+    border: 2px solid var(--color-danger);
+    border-radius: var(--radius-lg);
+    color: white;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    z-index: 99999;
+    transition: right 0.3s ease;
+    box-shadow: 0 8px 32px rgba(239, 68, 68, 0.5);
+}
+
+.security-warning.show {
+    right: 20px;
+}
+
+.critical-warning-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.95);
+    backdrop-filter: blur(10px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 99999;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.critical-warning-overlay.show {
+    opacity: 1;
+}
+
+.critical-warning-box {
+    background: var(--glass-bg);
+    border: 2px solid var(--color-danger);
+    border-radius: var(--radius-xl);
+    padding: var(--spacing-xl);
+    max-width: 500px;
+    text-align: center;
+    animation: shake 0.5s;
+}
+
+@keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    25% { transform: translateX(-10px); }
+    75% { transform: translateX(10px); }
+}
+
+.warning-icon {
+    width: 100px;
+    height: 100px;
+    background: rgba(239, 68, 68, 0.2);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 48px;
+    color: var(--color-danger);
+    margin: 0 auto var(--spacing-lg);
+    animation: pulse 1s infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.1); }
+}
+
+.critical-warning-box h3 {
+    font-size: 28px;
+    color: var(--color-danger);
+    margin-bottom: var(--spacing-md);
+}
+
+.critical-warning-box p {
+    font-size: 16px;
+    color: var(--color-text-secondary);
+    line-height: 1.8;
+    margin-bottom: var(--spacing-lg);
+}
+`;
+document.head.appendChild(securityStyles);
+
+// Export for global use
+window.examSecurity = examSecurity;

static/assets/js/neural-bg.js

@@ -0,0 +1,90 @@
+// Neural Network Background Animation
+
+class NeuralNetwork {
+    constructor(canvas) {
+        this.canvas = canvas;
+        this.ctx = canvas.getContext('2d');
+        this.nodes = [];
+        this.connections = [];
+        this.nodeCount = 50;
+        
+        this.resize();
+        this.init();
+        this.animate();
+        
+        window.addEventListener('resize', () => this.resize());
+    }
+    
+    resize() {
+        this.canvas.width = window.innerWidth;
+        this.canvas.height = window.innerHeight;
+    }
+    
+    init() {
+        this.nodes = [];
+        for (let i = 0; i < this.nodeCount; i++) {
+            this.nodes.push({
+                x: Math.random() * this.canvas.width,
+                y: Math.random() * this.canvas.height,
+                vx: (Math.random() - 0.5) * 0.5,
+                vy: (Math.random() - 0.5) * 0.5,
+                radius: Math.random() * 2 + 1
+            });
+        }
+    }
+    
+    update() {
+        this.nodes.forEach(node => {
+            node.x += node.vx;
+            node.y += node.vy;
+            
+            if (node.x < 0 || node.x > this.canvas.width) node.vx *= -1;
+            if (node.y < 0 || node.y > this.canvas.height) node.vy *= -1;
+        });
+    }
+    
+    draw() {
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        
+        // Draw connections
+        this.nodes.forEach((node, i) => {
+            this.nodes.slice(i + 1).forEach(otherNode => {
+                const dx = node.x - otherNode.x;
+                const dy = node.y - otherNode.y;
+                const distance = Math.sqrt(dx * dx + dy * dy);
+                
+                if (distance < 150) {
+                    const opacity = (1 - distance / 150) * 0.3;
+                    this.ctx.strokeStyle = `rgba(99, 102, 241, ${opacity})`;
+                    this.ctx.lineWidth = 1;
+                    this.ctx.beginPath();
+                    this.ctx.moveTo(node.x, node.y);
+                    this.ctx.lineTo(otherNode.x, otherNode.y);
+                    this.ctx.stroke();
+                }
+            });
+        });
+        
+        // Draw nodes
+        this.nodes.forEach(node => {
+            this.ctx.fillStyle = 'rgba(99, 102, 241, 0.6)';
+            this.ctx.beginPath();
+            this.ctx.arc(node.x, node.y, node.radius, 0, Math.PI * 2);
+            this.ctx.fill();
+        });
+    }
+    
+    animate() {
+        this.update();
+        this.draw();
+        requestAnimationFrame(() => this.animate());
+    }
+}
+
+// Initialize when DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+    const canvas = document.getElementById('neuralCanvas');
+    if (canvas) {
+        new NeuralNetwork(canvas);
+    }
+});

static/assets/js/premium-app.js

@@ -0,0 +1,1450 @@
+// Premium IntervuAI Application
+
+// Scroll to upload section
+function scrollToUpload() {
+    const uploadSection = document.getElementById('uploadSection');
+    if (uploadSection) {
+        uploadSection.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+}
+
+// Upload area functionality
+document.addEventListener('DOMContentLoaded', () => {
+    const uploadArea = document.getElementById('uploadArea');
+    const resumeInput = document.getElementById('resumeInput');
+    
+    if (uploadArea && resumeInput) {
+        // Click to upload
+        uploadArea.addEventListener('click', () => {
+            resumeInput.click();
+        });
+        
+        // Drag and drop
+        uploadArea.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            uploadArea.style.borderColor = 'var(--color-primary)';
+            uploadArea.style.background = 'rgba(99, 102, 241, 0.05)';
+        });
+        
+        uploadArea.addEventListener('dragleave', () => {
+            uploadArea.style.borderColor = '';
+            uploadArea.style.background = '';
+        });
+        
+        uploadArea.addEventListener('drop', (e) => {
+            e.preventDefault();
+            uploadArea.style.borderColor = '';
+            uploadArea.style.background = '';
+            
+            const files = e.dataTransfer.files;
+            if (files.length > 0) {
+                handleFileUpload(files[0]);
+            }
+        });
+        
+        // File input change
+        resumeInput.addEventListener('change', (e) => {
+            if (e.target.files.length > 0) {
+                handleFileUpload(e.target.files[0]);
+            }
+        });
+    }
+});
+
+// Handle file upload
+async function handleFileUpload(file) {
+    console.log('Uploading file:', file.name);
+    
+    // Show loading
+    showLoading('Analyzing resume with AI...');
+    
+    const formData = new FormData();
+    formData.append('resume', file);
+    
+    try {
+        // Call Python backend via PHP proxy
+        const response = await fetch(getApiUrl('upload_resume'), {
+            method: 'POST',
+            body: formData,
+            headers: {
+                'X-User-Session-Id': getSessionId()
+            }
+        });
+        
+        if (!response.ok) {
+            throw new Error('Upload failed');
+        }
+        
+        const result = await response.json();
+        console.log('Upload result:', result);
+        
+        hideLoading();
+        
+        if (result.candidate_profile) {
+            // Store profile
+            sessionStorage.setItem('candidateProfile', JSON.stringify(result.candidate_profile));
+            
+            // Show success message
+            showAlert('Resume analyzed successfully!', 'success');
+            
+            // Show interview setup
+            setTimeout(() => {
+                showInterviewSetup(result.candidate_profile);
+            }, 1000);
+        } else {
+            showAlert('Failed to analyze resume. Please try again.', 'error');
+        }
+        
+    } catch (error) {
+        console.error('Upload error:', error);
+        hideLoading();
+        showAlert('Failed to upload resume: ' + error.message, 'error');
+    }
+}
+
+// Show interview setup
+function showInterviewSetup(profile) {
+    const uploadSection = document.getElementById('uploadSection');
+    
+    if (uploadSection) uploadSection.classList.add('hidden');
+    
+    // Create setup UI
+    const setupHTML = `
+        <div class="glass-card large">
+            <div class="card-header">
+                <div class="header-icon">
+                    <i class="fas fa-user-check"></i>
+                </div>
+                <div class="header-content">
+                    <h2 class="card-title">Interview Setup</h2>
+                    <p class="card-subtitle">Review candidate profile and configure interview</p>
+                </div>
+            </div>
+            
+            <div class="profile-display">
+                <div class="profile-item">
+                    <span class="profile-label">Name:</span>
+                    <span class="profile-value">${profile.name || 'N/A'}</span>
+                </div>
+                <div class="profile-item">
+                    <span class="profile-label">Email:</span>
+                    <span class="profile-value">${profile.email || 'N/A'}</span>
+                </div>
+                <div class="profile-item">
+                    <span class="profile-label">Experience:</span>
+                    <span class="profile-value">${profile.experience || 'N/A'}</span>
+                </div>
+                <div class="profile-item">
+                    <span class="profile-label">Skills:</span>
+                    <div class="skills-tags">
+                        ${(profile.key_skills || []).map(skill => `<span class="skill-tag">${skill}</span>`).join('')}
+                    </div>
+                </div>
+            </div>
+            
+            <div class="form-group" style="margin-top: 2rem;">
+                <label class="form-label">
+                    <i class="fas fa-briefcase"></i>
+                    <span>Position/Role</span>
+                </label>
+                <input 
+                    type="text" 
+                    id="positionInput" 
+                    class="form-input" 
+                    placeholder="e.g., Senior Software Engineer"
+                    value="${profile.inferred_position || ''}"
+                >
+            </div>
+            
+            <div class="interview-actions" style="margin-top: 2rem;">
+                <button class="btn-secondary" onclick="location.reload()">
+                    <i class="fas fa-arrow-left"></i>
+                    <span>Back</span>
+                </button>
+                <button class="btn-primary" onclick="startInterview()">
+                    <span>Start Interview</span>
+                    <i class="fas fa-arrow-right"></i>
+                    <div class="btn-glow"></div>
+                </button>
+            </div>
+        </div>
+    `;
+    
+    const container = document.createElement('section');
+    container.className = 'upload-section';
+    container.id = 'setupSection';
+    container.innerHTML = setupHTML;
+    
+    uploadSection.parentNode.insertBefore(container, uploadSection);
+}
+
+// Start interview
+async function startInterview() {
+    const position = document.getElementById('positionInput')?.value;
+    
+    if (!position) {
+        showAlert('Please enter a position/role', 'error');
+        return;
+    }
+    
+    // Show pre-exam checklist
+    showPreExamChecklist(position);
+}
+
+// Show pre-exam checklist and requirements
+async function showPreExamChecklist(position) {
+    const overlay = document.createElement('div');
+    overlay.className = 'critical-warning-overlay show';
+    overlay.id = 'preExamChecklist';
+    overlay.style.zIndex = '99999';
+    overlay.innerHTML = `
+        <div class="critical-warning-box" style="max-width: 600px;">
+            <div class="warning-icon" style="background: rgba(99, 102, 241, 0.2);">
+                <i class="fas fa-clipboard-check" style="color: var(--color-primary);"></i>
+            </div>
+            <h3>Pre-Interview Checklist</h3>
+            <p style="margin-bottom: 1.5rem;">Please ensure all requirements are met before starting:</p>
+            
+            <div class="checklist-items">
+                <div class="checklist-item" id="check-browser">
+                    <i class="fas fa-spinner fa-spin"></i>
+                    <span>Checking browser compatibility...</span>
+                </div>
+                <div class="checklist-item" id="check-extensions">
+                    <i class="fas fa-spinner fa-spin"></i>
+                    <span>Checking for blocked extensions...</span>
+                </div>
+                <div class="checklist-item" id="check-camera">
+                    <i class="fas fa-spinner fa-spin"></i>
+                    <span>Requesting camera access...</span>
+                </div>
+                <div class="checklist-item" id="check-microphone">
+                    <i class="fas fa-spinner fa-spin"></i>
+                    <span>Requesting microphone access...</span>
+                </div>
+                <div class="checklist-item" id="check-questions">
+                    <i class="fas fa-spinner fa-spin"></i>
+                    <span>Generating interview questions...</span>
+                </div>
+            </div>
+            
+            <div id="checklistActions" style="margin-top: 2rem; display: none;">
+                <button class="btn-primary" onclick="beginInterview()" style="width: 100%;">
+                    <i class="fas fa-play"></i>
+                    <span>Start Interview</span>
+                    <div class="btn-glow"></div>
+                </button>
+            </div>
+            
+            <div id="checklistError" style="margin-top: 2rem; display: none; display: flex; gap: 1rem;">
+                <button class="btn-secondary" onclick="recheckRequirements()" style="flex: 1;">
+                    <i class="fas fa-redo"></i>
+                    <span>Recheck</span>
+                </button>
+                <button class="btn-secondary" onclick="document.getElementById('preExamChecklist').remove()" style="flex: 1;">
+                    <i class="fas fa-times"></i>
+                    <span>Cancel</span>
+                </button>
+            </div>
+        </div>
+    `;
+    document.body.appendChild(overlay);
+    
+    // Add checklist styles
+    const style = document.createElement('style');
+    style.textContent = `
+        .checklist-items {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            margin: 1rem 0;
+        }
+        .checklist-item {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            padding: 1rem;
+            background: var(--color-surface);
+            border-radius: var(--radius-md);
+            border-left: 3px solid var(--color-text-tertiary);
+        }
+        .checklist-item.success {
+            border-left-color: var(--color-success);
+        }
+        .checklist-item.error {
+            border-left-color: var(--color-danger);
+        }
+        .checklist-item i {
+            font-size: 20px;
+            min-width: 20px;
+        }
+        .checklist-item.success i {
+            color: var(--color-success);
+        }
+        .checklist-item.error i {
+            color: var(--color-danger);
+        }
+    `;
+    document.head.appendChild(style);
+    
+    // Run checks
+    await runPreExamChecks(position);
+}
+
+// Recheck all requirements
+async function recheckRequirements() {
+    // Hide action buttons
+    document.getElementById('checklistActions').style.display = 'none';
+    document.getElementById('checklistError').style.display = 'none';
+    
+    // Reset all checklist items to loading state
+    const items = ['check-browser', 'check-extensions', 'check-camera', 'check-microphone', 'check-questions'];
+    items.forEach(itemId => {
+        const item = document.getElementById(itemId);
+        if (item) {
+            item.className = 'checklist-item';
+            item.innerHTML = `
+                <i class="fas fa-spinner fa-spin"></i>
+                <span>Checking...</span>
+            `;
+        }
+    });
+    
+    // Get position from session or input
+    const position = document.getElementById('positionInput')?.value || 'Software Engineer';
+    
+    // Re-run all checks
+    await runPreExamChecks(position);
+}
+
+// Run all pre-exam checks
+async function runPreExamChecks(position) {
+    let allPassed = true;
+    
+    // 1. Check browser
+    await checkItem('check-browser', async () => {
+        const isCompatible = window.examSecurity.checkBrowser();
+        if (!isCompatible) {
+            throw new Error('Unsupported browser. Please use Chrome, Edge, Brave, or Opera.');
+        }
+        return 'Browser compatible';
+    });
+    
+    // 2. Check extensions
+    const extensionsOk = await checkItem('check-extensions', async () => {
+        const hasBlocked = await window.examSecurity.detectExtensions();
+        if (hasBlocked) {
+            throw new Error('AI extensions detected. Please disable them and refresh.');
+        }
+        return 'No blocked extensions found';
+    });
+    
+    if (!extensionsOk) allPassed = false;
+    
+    // 3. Check camera
+    const cameraOk = await checkItem('check-camera', async () => {
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+            stream.getTracks().forEach(track => track.stop());
+            return 'Camera access granted';
+        } catch (error) {
+            throw new Error('Camera access denied. Please allow camera access.');
+        }
+    });
+    
+    if (!cameraOk) allPassed = false;
+    
+    // 4. Check microphone
+    const micOk = await checkItem('check-microphone', async () => {
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            stream.getTracks().forEach(track => track.stop());
+            return 'Microphone access granted';
+        } catch (error) {
+            throw new Error('Microphone access denied. Please allow microphone access.');
+        }
+    });
+    
+    if (!micOk) allPassed = false;
+    
+    // 5. Generate questions
+    const questionsOk = await checkItem('check-questions', async () => {
+        const response = await fetch(getApiUrl('setup_interview'), {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-User-Session-Id': getSessionId()
+            },
+            body: JSON.stringify({ position_role: position })
+        });
+        
+        const result = await response.json();
+        
+        if (!result.questions) {
+            throw new Error('Failed to generate questions');
+        }
+        
+        sessionStorage.setItem('questions', JSON.stringify(result.questions));
+        sessionStorage.setItem('currentQuestion', '0');
+        sessionStorage.setItem('responses', JSON.stringify([]));
+        sessionStorage.setItem('isCodingRole', result.is_coding_role || false);
+        
+        return `${result.questions.length} questions generated`;
+    });
+    
+    if (!questionsOk) allPassed = false;
+    
+    // Show appropriate action
+    if (allPassed) {
+        document.getElementById('checklistActions').style.display = 'block';
+    } else {
+        document.getElementById('checklistError').style.display = 'block';
+    }
+}
+
+// Check individual item
+async function checkItem(itemId, checkFunction) {
+    const item = document.getElementById(itemId);
+    if (!item) return false;
+    
+    try {
+        const message = await checkFunction();
+        item.innerHTML = `
+            <i class="fas fa-check-circle"></i>
+            <span>${message}</span>
+        `;
+        item.classList.add('success');
+        return true;
+    } catch (error) {
+        item.innerHTML = `
+            <i class="fas fa-times-circle"></i>
+            <span>${error.message}</span>
+        `;
+        item.classList.add('error');
+        return false;
+    }
+}
+
+// Begin interview after all checks pass
+async function beginInterview() {
+    // Remove checklist
+    document.getElementById('preExamChecklist')?.remove();
+    
+    showLoading('Initializing secure exam environment...');
+    
+    try {
+        // Start exam security mode
+        const securityStarted = await window.examSecurity.startExamMode();
+        if (!securityStarted) {
+            hideLoading();
+            return;
+        }
+        
+        // Start proctoring (camera + audio monitoring)
+        const proctoringStarted = await window.proctoringSystem.startProctoring();
+        if (!proctoringStarted) {
+            hideLoading();
+            return;
+        }
+        
+        // Activate exam mode
+        window.examSecurity.activateExamMode();
+        
+        hideLoading();
+        
+        // Hide all UI elements except interview section
+        hideAllUIForExam();
+        
+        // Hide setup, show interview
+        document.getElementById('setupSection')?.classList.add('hidden');
+        document.getElementById('interviewSection')?.classList.remove('hidden');
+        
+        loadQuestion(0);
+        
+    } catch (error) {
+        hideLoading();
+        showAlert('Error starting interview: ' + error.message, 'error');
+    }
+}
+
+// Load question
+function loadQuestion(index) {
+    const questions = JSON.parse(sessionStorage.getItem('questions') || '[]');
+    const question = questions[index];
+    const isCodingRole = sessionStorage.getItem('isCodingRole') === 'true';
+    
+    if (!question) return;
+    
+    // Clear previous answer
+    const answerTextarea = document.getElementById('answerText');
+    if (answerTextarea) {
+        answerTextarea.value = '';
+    }
+    
+    // Check if this is a coding question
+    const isCodingQuestion = question.tags && (
+        question.tags.includes('coding') || 
+        question.tags.includes('programming') ||
+        question.id.includes('code')
+    );
+    
+    // Show/hide coding editor based on question type
+    const answerContainer = document.querySelector('.answer-container');
+    if (answerContainer) {
+        if (isCodingRole && isCodingQuestion) {
+            // Show coding editor with language selector
+            answerContainer.innerHTML = `
+                <div class="coding-challenge-notice">
+                    <i class="fas fa-code"></i>
+                    <span>Coding Challenge - Write your solution below</span>
+                </div>
+                <div class="coding-language-selector">
+                    <label for="languageSelect">
+                        <i class="fas fa-laptop-code"></i>
+                        <span>Select Language:</span>
+                    </label>
+                    <select id="languageSelect" class="language-dropdown" onchange="changeLanguage(this.value)">
+                        <option value="python">Python</option>
+                        <option value="javascript">JavaScript</option>
+                        <option value="java">Java</option>
+                        <option value="cpp">C++</option>
+                        <option value="csharp">C#</option>
+                        <option value="php">PHP</option>
+                        <option value="ruby">Ruby</option>
+                        <option value="go">Go</option>
+                        <option value="rust">Rust</option>
+                        <option value="typescript">TypeScript</option>
+                        <option value="kotlin">Kotlin</option>
+                        <option value="swift">Swift</option>
+                    </select>
+                </div>
+                <iframe 
+                    id="codingEditor" 
+                    src="https://onecompiler.com/embed/python?hideNew=true&hideNewFileOption=true&hideLanguageSelection=true&theme=dark&hideStdin=true&hideResult=false&fontSize=16"
+                    style="width: 100%; height: 100%; min-height: 700px; border: 1px solid var(--glass-border); border-radius: var(--radius-lg); margin-top: 1rem;"
+                    frameborder="0"
+                ></iframe>
+                <div class="code-submission-notice" style="margin-top: 1rem; padding: 1rem; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: var(--radius-md);">
+                    <i class="fas fa-exclamation-triangle" style="color: var(--color-danger);"></i>
+                    <strong style="color: var(--color-danger);">Important:</strong> Copy your final working code from the editor above and paste it in the box below for evaluation.
+                </div>
+                <textarea 
+                    id="codeSubmission" 
+                    class="answer-input" 
+                    placeholder="Paste your final code here for evaluation..."
+                    rows="6"
+                    style="margin-top: 1rem; font-family: 'Courier New', monospace; font-size: 14px;"
+                ></textarea>
+                <textarea 
+                    id="answerText" 
+                    class="answer-input" 
+                    placeholder="Explain your approach and solution here..."
+                    rows="4"
+                    style="margin-top: 1rem;"
+                ></textarea>
+            `;
+        } else {
+            // Show regular textarea
+            answerContainer.innerHTML = `
+                <textarea 
+                    id="answerText" 
+                    class="answer-input" 
+                    placeholder="Type your response here..."
+                    rows="8"
+                ></textarea>
+                <div class="ai-warning hidden" id="aiWarning">
+                    <i class="fas fa-exclamation-triangle"></i>
+                    <span>AI-generated content detected</span>
+                </div>
+            `;
+        }
+    }
+    
+    document.getElementById('questionText').textContent = question.question;
+    
+    // Add coding-mode class to interview section if it's a coding question
+    const interviewSection = document.getElementById('interviewSection');
+    if (interviewSection) {
+        if (isCodingRole && isCodingQuestion) {
+            interviewSection.classList.add('coding-mode');
+        } else {
+            interviewSection.classList.remove('coding-mode');
+        }
+    }
+    
+    // Update progress
+    const progressNumber = document.querySelector('.progress-number');
+    if (progressNumber) {
+        progressNumber.textContent = `${index + 1}/${questions.length}`;
+    }
+    
+    // Update progress ring
+    const progress = ((index + 1) / questions.length) * 100;
+    const progressRing = document.querySelector('.progress-ring');
+    if (progressRing) {
+        const circumference = 2 * Math.PI * 45;
+        const offset = circumference - (progress / 100) * circumference;
+        progressRing.style.strokeDasharray = `${circumference} ${circumference}`;
+        progressRing.style.strokeDashoffset = offset;
+    }
+    
+    // Hide previous button (can't go back)
+    const prevButton = document.querySelector('[onclick="previousQuestion()"]');
+    if (prevButton) {
+        prevButton.style.display = 'none';
+    }
+    
+    // Start question timer with auto-submit
+    // Give more time for coding questions (20 minutes vs 3 minutes)
+    if (isCodingRole && isCodingQuestion) {
+        window.examSecurity.startQuestionTimer(() => {
+            autoSubmitAndNext();
+        }, 1200); // 20 minutes for coding questions
+    } else {
+        window.examSecurity.startQuestionTimer(() => {
+            autoSubmitAndNext();
+        }, 180); // 3 minutes for regular questions
+    }
+}
+
+// Submit answer and move to next question
+async function submitAnswer() {
+    const currentIndex = parseInt(sessionStorage.getItem('currentQuestion') || '0');
+    const questions = JSON.parse(sessionStorage.getItem('questions') || '[]');
+    const question = questions[currentIndex];
+    
+    // Check if this is a coding question
+    const isCodingQuestion = question.tags && (
+        question.tags.includes('coding') || 
+        question.tags.includes('programming')
+    );
+    
+    const answerTextarea = document.getElementById('answerText');
+    const answer = answerTextarea?.value.trim();
+    
+    // For coding questions, require code submission
+    let codeSubmission = '';
+    if (isCodingQuestion) {
+        const codeTextarea = document.getElementById('codeSubmission');
+        codeSubmission = codeTextarea?.value.trim() || '';
+        
+        if (!codeSubmission) {
+            showAlert('Please paste your code in the code submission box', 'error');
+            return;
+        }
+    }
+    
+    if (!answer && !isCodingQuestion) {
+        showAlert('Please provide an answer before continuing', 'error');
+        return;
+    }
+    
+    showLoading('Evaluating your answer...');
+    
+    try {
+        const response = await fetch(getApiUrl('submit_answer'), {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-User-Session-Id': getSessionId()
+            },
+            body: JSON.stringify({
+                question_id: question.id || `q${currentIndex + 1}`,
+                response_text: answer,
+                code_submission: codeSubmission,
+                is_coding_question: isCodingQuestion,
+                duration: window.examSecurity.getQuestionDuration()
+            })
+        });
+        
+        if (!response.ok) {
+            const errorData = await response.json();
+            throw new Error(errorData.error || 'Failed to submit answer');
+        }
+        
+        const result = await response.json();
+        hideLoading();
+        
+        // Store response
+        const responses = JSON.parse(sessionStorage.getItem('responses') || '[]');
+        responses.push({
+            question: question.question,
+            answer: answer,
+            evaluation: result.evaluation,
+            time_taken: window.examSecurity.getQuestionDuration()
+        });
+        sessionStorage.setItem('responses', JSON.stringify(responses));
+        
+        // Stop timer
+        window.examSecurity.stopQuestionTimer();
+        
+        // Move to next question
+        if (currentIndex < questions.length - 1) {
+            sessionStorage.setItem('currentQuestion', (currentIndex + 1).toString());
+            loadQuestion(currentIndex + 1);
+        } else {
+            // Interview complete
+            completeInterview();
+        }
+        
+    } catch (error) {
+        hideLoading();
+        console.error('Submit answer error:', error);
+        showAlert('Error submitting answer: ' + error.message, 'error');
+        
+        // Still move to next question to avoid getting stuck
+        const currentIndex = parseInt(sessionStorage.getItem('currentQuestion') || '0');
+        const questions = JSON.parse(sessionStorage.getItem('questions') || '[]');
+        if (currentIndex < questions.length - 1) {
+            setTimeout(() => {
+                sessionStorage.setItem('currentQuestion', (currentIndex + 1).toString());
+                loadQuestion(currentIndex + 1);
+            }, 2000);
+        }
+    }
+}
+
+// Auto-submit when time runs out
+async function autoSubmitAndNext() {
+    const answerTextarea = document.getElementById('answerText');
+    const answer = answerTextarea?.value.trim() || '[No answer provided - Time expired]';
+    
+    const currentIndex = parseInt(sessionStorage.getItem('currentQuestion') || '0');
+    const questions = JSON.parse(sessionStorage.getItem('questions') || '[]');
+    const question = questions[currentIndex];
+    
+    try {
+        const response = await fetch(getApiUrl('submit_answer'), {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-User-Session-Id': getSessionId()
+            },
+            body: JSON.stringify({
+                question_id: question.id || `q${currentIndex + 1}`,
+                response_text: answer,
+                duration: '03:00',
+                auto_submitted: true
+            })
+        });
+        
+        const result = await response.json();
+        
+        // Store response
+        const responses = JSON.parse(sessionStorage.getItem('responses') || '[]');
+        responses.push({
+            question: question.question,
+            answer: answer,
+            evaluation: result.evaluation,
+            time_taken: '03:00',
+            auto_submitted: true
+        });
+        sessionStorage.setItem('responses', JSON.stringify(responses));
+        
+        // Move to next question
+        if (currentIndex < questions.length - 1) {
+            sessionStorage.setItem('currentQuestion', (currentIndex + 1).toString());
+            loadQuestion(currentIndex + 1);
+        } else {
+            // Interview complete
+            completeInterview();
+        }
+        
+    } catch (error) {
+        console.error('Auto-submit error:', error);
+        // Still move to next question even if submit fails
+        if (currentIndex < questions.length - 1) {
+            sessionStorage.setItem('currentQuestion', (currentIndex + 1).toString());
+            loadQuestion(currentIndex + 1);
+        } else {
+            completeInterview();
+        }
+    }
+}
+
+// Previous question (disabled - can't go back)
+function previousQuestion() {
+    showAlert('You cannot go back to previous questions', 'error');
+}
+
+// Change coding language
+function changeLanguage(language) {
+    const iframe = document.getElementById('codingEditor');
+    if (iframe) {
+        iframe.src = `https://onecompiler.com/embed/${language}?hideNew=true&hideNewFileOption=true&hideLanguageSelection=true&theme=dark&hideStdin=true&hideResult=false&fontSize=16`;
+    }
+}
+
+// Hide all UI elements during exam
+function hideAllUIForExam() {
+    // Hide navigation
+    const nav = document.querySelector('.premium-nav');
+    if (nav) nav.style.display = 'none';
+    
+    // Hide hero section
+    const hero = document.querySelector('.hero-section');
+    if (hero) hero.style.display = 'none';
+    
+    // Hide background animations (dim them)
+    const bg = document.querySelector('.premium-bg');
+    if (bg) bg.style.opacity = '0.3';
+    
+    // Add exam mode class to body
+    document.body.classList.add('exam-mode');
+}
+
+// Show all UI elements after exam
+function showAllUIAfterExam() {
+    // Show navigation
+    const nav = document.querySelector('.premium-nav');
+    if (nav) nav.style.display = 'block';
+    
+    // Show hero section
+    const hero = document.querySelector('.hero-section');
+    if (hero) hero.style.display = 'flex';
+    
+    // Show background animations
+    const bg = document.querySelector('.premium-bg');
+    if (bg) bg.style.opacity = '1';
+    
+    // Remove exam mode class from body
+    document.body.classList.remove('exam-mode');
+}
+
+// Complete interview
+async function completeInterview() {
+    showLoading('Generating your assessment report...');
+    
+    // End exam mode
+    window.examSecurity.endExamMode();
+    
+    // Stop proctoring
+    window.proctoringSystem.stopProctoring();
+    
+    // Restore UI elements
+    showAllUIAfterExam();
+    
+    try {
+        const response = await fetch(getApiUrl('get_assessment'), {
+            method: 'GET',
+            headers: {
+                'X-User-Session-Id': getSessionId()
+            }
+        });
+        
+        if (!response.ok) {
+            const errorData = await response.json();
+            throw new Error(errorData.error || 'Failed to generate assessment');
+        }
+        
+        const result = await response.json();
+        hideLoading();
+        
+        if (result.assessment) {
+            sessionStorage.setItem('assessment', JSON.stringify(result.assessment));
+            showResults();
+        } else {
+            showAlert('Failed to generate assessment', 'error');
+        }
+        
+    } catch (error) {
+        hideLoading();
+        console.error('Assessment error:', error);
+        showAlert('Error generating assessment: ' + error.message, 'error');
+        
+        // Show results anyway with partial data
+        setTimeout(() => {
+            showResults();
+        }, 2000);
+    }
+}
+
+// Hide all UI elements during exam
+function hideAllUIForExam() {
+    // Hide navigation
+    const nav = document.querySelector('.premium-nav');
+    if (nav) nav.style.display = 'none';
+    
+    // Hide hero section
+    const hero = document.querySelector('.hero-section');
+    if (hero) hero.style.display = 'none';
+    
+    // Hide background animations
+    const bg = document.querySelector('.premium-bg');
+    if (bg) bg.style.opacity = '0.3';
+    
+    // Add exam mode class to body
+    document.body.classList.add('exam-mode');
+}
+
+// Show all UI elements after exam
+function showAllUIAfterExam() {
+    // Show navigation
+    const nav = document.querySelector('.premium-nav');
+    if (nav) nav.style.display = 'block';
+    
+    // Show hero section
+    const hero = document.querySelector('.hero-section');
+    if (hero) hero.style.display = 'flex';
+    
+    // Show background animations
+    const bg = document.querySelector('.premium-bg');
+    if (bg) bg.style.opacity = '1';
+    
+    // Remove exam mode class from body
+    document.body.classList.remove('exam-mode');
+}
+
+// Show results
+function showResults() {
+    // Check if we're on the results page or main page
+    const isResultsPage = window.location.pathname.includes('results.php');
+    
+    if (!isResultsPage) {
+        // Redirect to results page
+        window.location.href = 'results.php';
+        return;
+    }
+    
+    document.getElementById('interviewSection')?.classList.add('hidden');
+    document.getElementById('resultsSection')?.classList.remove('hidden');
+    
+    // Display assessment
+    const assessment = JSON.parse(sessionStorage.getItem('assessment') || '{}');
+    const responses = JSON.parse(sessionStorage.getItem('responses') || '[]');
+    
+    console.log('Assessment:', assessment);
+    console.log('Responses:', responses);
+    
+    // Check if we have assessment data
+    if (!assessment || typeof assessment.overallScore === 'undefined') {
+        showAlert('No assessment data available', 'error');
+        return;
+    }
+    
+    // Update overall score (handle 0 as valid score)
+    const overallScoreEl = document.getElementById('overallScore');
+    if (overallScoreEl) {
+        overallScoreEl.textContent = assessment.overallScore;
+    }
+    
+    // Update recommendation
+    const recommendationEl = document.getElementById('recommendation');
+    if (recommendationEl && assessment.recommendation) {
+        const rec = assessment.recommendation;
+        let icon = 'fa-check-circle';
+        let color = 'var(--color-success)';
+        
+        if (rec.toLowerCase().includes('not recommended')) {
+            icon = 'fa-times-circle';
+            color = 'var(--color-danger)';
+        } else if (rec.toLowerCase().includes('consider')) {
+            icon = 'fa-exclamation-circle';
+            color = 'var(--color-warning)';
+        }
+        
+        recommendationEl.innerHTML = `
+            <i class="fas ${icon}"></i>
+            <span>${rec}</span>
+        `;
+        recommendationEl.style.borderColor = color;
+        recommendationEl.style.color = color;
+        recommendationEl.style.background = color + '20';
+    }
+    
+    // Update detailed scores
+    if (assessment.detailedScores) {
+        const scores = assessment.detailedScores;
+        const scoreItems = document.querySelectorAll('.score-item');
+        
+        if (scoreItems.length >= 3) {
+            // Technical Skills
+            const techScore = scores.technicalSkills ?? 0;
+            scoreItems[0].querySelector('.score-percent').textContent = techScore + '%';
+            scoreItems[0].querySelector('.score-bar-fill').style.width = techScore + '%';
+            
+            // Communication
+            const commScore = scores.communication ?? 0;
+            scoreItems[1].querySelector('.score-percent').textContent = commScore + '%';
+            scoreItems[1].querySelector('.score-bar-fill').style.width = commScore + '%';
+            
+            // Soft Skills
+            const softScore = scores.softSkills ?? 0;
+            scoreItems[2].querySelector('.score-percent').textContent = softScore + '%';
+            scoreItems[2].querySelector('.score-bar-fill').style.width = softScore + '%';
+        }
+    }
+    
+    // Update progress ring
+    const scoreRing = document.querySelector('.results-section .score-ring');
+    if (scoreRing) {
+        const score = assessment.overallScore ?? 0;
+        const circumference = 2 * Math.PI * 90;
+        const progress = (score / 100) * circumference;
+        scoreRing.style.strokeDasharray = `${circumference} ${circumference}`;
+        scoreRing.style.strokeDashoffset = circumference - progress;
+    }
+    
+    // Update strengths list
+    const strengthsList = document.getElementById('strengthsList');
+    if (strengthsList && assessment.keyStrengths && assessment.keyStrengths.length > 0) {
+        strengthsList.innerHTML = assessment.keyStrengths.map(strength => 
+            `<li style="padding: 0.75rem; background: rgba(16, 185, 129, 0.1); border-left: 3px solid var(--color-success); margin: 0.5rem 0; border-radius: 4px;">
+                <i class="fas fa-check-circle" style="color: var(--color-success); margin-right: 0.5rem;"></i>
+                ${strength}
+            </li>`
+        ).join('');
+    }
+    
+    // Update improvements list
+    const improvementsList = document.getElementById('improvementsList');
+    if (improvementsList && assessment.areasForImprovement && assessment.areasForImprovement.length > 0) {
+        improvementsList.innerHTML = assessment.areasForImprovement.map(area => 
+            `<li style="padding: 0.75rem; background: rgba(239, 68, 68, 0.1); border-left: 3px solid var(--color-danger); margin: 0.5rem 0; border-radius: 4px;">
+                <i class="fas fa-exclamation-circle" style="color: var(--color-danger); margin-right: 0.5rem;"></i>
+                ${area}
+            </li>`
+        ).join('');
+    }
+}
+
+// Generate HTML content for report
+function generateReportHTML() {
+    const assessment = JSON.parse(sessionStorage.getItem('assessment') || '{}');
+    const profile = JSON.parse(sessionStorage.getItem('candidateProfile') || '{}');
+    const responses = JSON.parse(sessionStorage.getItem('responses') || '[]');
+    
+    // Check if assessment exists (allow 0 as valid score)
+    if (!assessment || typeof assessment.overallScore === 'undefined') {
+        return null;
+    }
+    
+    // Create HTML content
+    let htmlContent = `
+        <!DOCTYPE html>
+        <html>
+        <head>
+            <meta charset="UTF-8">
+            <title>Interview Assessment Report</title>
+            <style>
+                body { font-family: Arial, sans-serif; padding: 40px; color: #333; }
+                .header { text-align: center; margin-bottom: 40px; border-bottom: 3px solid #6366f1; padding-bottom: 20px; }
+                .header h1 { color: #6366f1; margin: 0; }
+                .header p { color: #666; margin: 5px 0; }
+                .section { margin: 30px 0; }
+                .section h2 { color: #6366f1; border-bottom: 2px solid #e5e7eb; padding-bottom: 10px; }
+                .profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 20px 0; }
+                .profile-item { padding: 10px; background: #f9fafb; border-radius: 5px; }
+                .profile-item strong { color: #6366f1; }
+                .score-box { text-align: center; padding: 30px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white; border-radius: 10px; margin: 20px 0; }
+                .score-box .score { font-size: 72px; font-weight: bold; }
+                .score-box .label { font-size: 18px; opacity: 0.9; }
+                .scores-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin: 20px 0; }
+                .score-card { padding: 20px; background: #f9fafb; border-radius: 8px; text-align: center; }
+                .score-card .value { font-size: 36px; font-weight: bold; color: #6366f1; }
+                .score-card .name { color: #666; margin-top: 10px; }
+                .recommendation { padding: 20px; background: #10b981; color: white; border-radius: 8px; text-align: center; font-size: 20px; font-weight: bold; margin: 20px 0; }
+                .recommendation.not-recommended { background: #ef4444; }
+                .recommendation.consider { background: #f59e0b; }
+                .list-section ul { list-style: none; padding: 0; }
+                .list-section li { padding: 10px; margin: 5px 0; background: #f9fafb; border-left: 4px solid #6366f1; }
+                .question-analysis { margin: 20px 0; padding: 15px; background: #f9fafb; border-radius: 8px; }
+                .question-analysis h4 { color: #6366f1; margin: 0 0 10px 0; }
+                .question-analysis .answer { color: #666; font-style: italic; margin: 10px 0; }
+                .question-analysis .scores { display: flex; gap: 15px; margin-top: 10px; }
+                .question-analysis .scores span { padding: 5px 10px; background: white; border-radius: 5px; font-size: 14px; }
+                .footer { margin-top: 50px; text-align: center; color: #999; font-size: 12px; border-top: 1px solid #e5e7eb; padding-top: 20px; }
+            </style>
+        </head>
+        <body>
+            <div class="header">
+                <h1>🧠 IntervuAI Pro</h1>
+                <p>AI-Powered Interview Assessment Report</p>
+                <p>Generated on ${new Date().toLocaleDateString()} at ${new Date().toLocaleTimeString()}</p>
+            </div>
+            
+            <div class="section">
+                <h2>Candidate Profile</h2>
+                <div class="profile-grid">
+                    <div class="profile-item"><strong>Name:</strong> ${profile.name || 'N/A'}</div>
+                    <div class="profile-item"><strong>Email:</strong> ${profile.email || 'N/A'}</div>
+                    <div class="profile-item"><strong>Position:</strong> ${profile.position || profile.inferred_position || 'N/A'}</div>
+                    <div class="profile-item"><strong>Experience:</strong> ${profile.experience || 'N/A'}</div>
+                </div>
+                <div class="profile-item" style="grid-column: 1 / -1;">
+                    <strong>Skills:</strong> ${(profile.key_skills || []).join(', ') || 'N/A'}
+                </div>
+            </div>
+            
+            <div class="score-box">
+                <div class="score">${assessment.overallScore || 0}</div>
+                <div class="label">Overall Score</div>
+            </div>
+            
+            <div class="recommendation ${getRecommendationClass(assessment.recommendation)}">
+                ${assessment.recommendation || 'No Recommendation'}
+            </div>
+            
+            <div class="section">
+                <h2>Detailed Scores</h2>
+                <div class="scores-grid">
+                    <div class="score-card">
+                        <div class="value">${assessment.detailedScores?.technicalSkills || 0}%</div>
+                        <div class="name">Technical Skills</div>
+                    </div>
+                    <div class="score-card">
+                        <div class="value">${assessment.detailedScores?.communication || 0}%</div>
+                        <div class="name">Communication</div>
+                    </div>
+                    <div class="score-card">
+                        <div class="value">${assessment.detailedScores?.softSkills || 0}%</div>
+                        <div class="name">Soft Skills</div>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="section list-section">
+                <h2>Key Strengths</h2>
+                <ul>
+                    ${(assessment.keyStrengths || ['No strengths identified']).map(s => `<li>${s}</li>`).join('')}
+                </ul>
+            </div>
+            
+            <div class="section list-section">
+                <h2>Areas for Improvement</h2>
+                <ul>
+                    ${(assessment.areasForImprovement || ['No areas identified']).map(a => `<li>${a}</li>`).join('')}
+                </ul>
+            </div>
+            
+            <div class="section">
+                <h2>Question-by-Question Analysis</h2>
+                ${responses.map((r, i) => `
+                    <div class="question-analysis">
+                        <h4>Question ${i + 1}: ${r.question}</h4>
+                        <div class="answer"><strong>Answer:</strong> ${r.answer.substring(0, 200)}${r.answer.length > 200 ? '...' : ''}</div>
+                        <div class="scores">
+                            <span>Technical: ${r.evaluation?.technicalScore || 0}%</span>
+                            <span>Communication: ${r.evaluation?.communicationScore || 0}%</span>
+                            <span>Relevance: ${r.evaluation?.relevanceScore || 0}%</span>
+                            <span>Overall: ${r.evaluation?.score || 0}%</span>
+                        </div>
+                        <p><strong>Feedback:</strong> ${r.evaluation?.feedback || 'No feedback'}</p>
+                    </div>
+                `).join('')}
+            </div>
+            
+            <div class="footer">
+                <p>This report was generated by IntervuAI Pro - AI-Powered Interview Platform</p>
+                <p>Interview Duration: ${assessment.interviewDuration || 'N/A'}</p>
+            </div>
+        </body>
+        </html>
+    `;
+    
+    return { htmlContent, profile, assessment };
+}
+
+// Download report as HTML
+function downloadReportHTML() {
+    const reportData = generateReportHTML();
+    
+    if (!reportData) {
+        showAlert('No assessment data available. Please complete the interview first.', 'error');
+        return;
+    }
+    
+    const { htmlContent, profile } = reportData;
+    
+    // Create a blob and download
+    const blob = new Blob([htmlContent], { type: 'text/html' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `Interview_Assessment_${profile.name || 'Candidate'}_${new Date().toISOString().split('T')[0]}.html`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+    
+    showAlert('HTML report downloaded successfully!', 'success');
+}
+
+// Download report as PDF
+async function downloadReportPDF() {
+    const reportData = generateReportHTML();
+    
+    if (!reportData) {
+        showAlert('No assessment data available. Please complete the interview first.', 'error');
+        return;
+    }
+    
+    const { htmlContent, profile, assessment } = reportData;
+    
+    showLoading('Generating PDF report...');
+    
+    try {
+        // Create a temporary container
+        const container = document.createElement('div');
+        container.style.position = 'absolute';
+        container.style.left = '-9999px';
+        container.style.width = '800px';
+        container.innerHTML = htmlContent;
+        document.body.appendChild(container);
+        
+        // Wait for content to render
+        await new Promise(resolve => setTimeout(resolve, 100));
+        
+        // Use html2canvas to capture the content
+        const canvas = await html2canvas(container, {
+            scale: 2,
+            useCORS: true,
+            logging: false,
+            backgroundColor: '#ffffff'
+        });
+        
+        // Remove temporary container
+        document.body.removeChild(container);
+        
+        // Create PDF using jsPDF
+        const { jsPDF } = window.jspdf;
+        const pdf = new jsPDF({
+            orientation: 'portrait',
+            unit: 'mm',
+            format: 'a4'
+        });
+        
+        const imgWidth = 210; // A4 width in mm
+        const pageHeight = 297; // A4 height in mm
+        const imgHeight = (canvas.height * imgWidth) / canvas.width;
+        let heightLeft = imgHeight;
+        let position = 0;
+        
+        const imgData = canvas.toDataURL('image/png');
+        
+        // Add first page
+        pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
+        heightLeft -= pageHeight;
+        
+        // Add additional pages if needed
+        while (heightLeft > 0) {
+            position = heightLeft - imgHeight;
+            pdf.addPage();
+            pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
+            heightLeft -= pageHeight;
+        }
+        
+        // Save PDF
+        pdf.save(`Interview_Assessment_${profile.name || 'Candidate'}_${new Date().toISOString().split('T')[0]}.pdf`);
+        
+        hideLoading();
+        showAlert('PDF report downloaded successfully!', 'success');
+        
+    } catch (error) {
+        hideLoading();
+        console.error('PDF generation error:', error);
+        showAlert('Failed to generate PDF. Try downloading HTML instead.', 'error');
+    }
+}
+
+function getRecommendationClass(recommendation) {
+    if (!recommendation) return '';
+    const rec = recommendation.toLowerCase();
+    if (rec.includes('not recommended')) return 'not-recommended';
+    if (rec.includes('consider')) return 'consider';
+    return '';
+}
+
+// Utility functions
+function getSessionId() {
+    let sessionId = sessionStorage.getItem('sessionId');
+    if (!sessionId) {
+        sessionId = 'session_' + Date.now() + '_' + Math.random().toString(36).substring(2, 11);
+        sessionStorage.setItem('sessionId', sessionId);
+    }
+    return sessionId;
+}
+
+function showLoading(message = 'Processing...') {
+    const overlay = document.getElementById('loadingOverlay');
+    if (overlay) {
+        overlay.querySelector('.loading-text').textContent = message;
+        overlay.classList.remove('hidden');
+    }
+}
+
+function hideLoading() {
+    const overlay = document.getElementById('loadingOverlay');
+    if (overlay) {
+        overlay.classList.add('hidden');
+    }
+}
+
+function showAlert(message, type = 'info') {
+    // Create alert element
+    const alert = document.createElement('div');
+    alert.className = `alert-toast alert-${type}`;
+    alert.innerHTML = `
+        <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'info-circle'}"></i>
+        <span>${message}</span>
+    `;
+    
+    document.body.appendChild(alert);
+    
+    // Animate in
+    setTimeout(() => alert.classList.add('show'), 100);
+    
+    // Remove after 3 seconds
+    setTimeout(() => {
+        alert.classList.remove('show');
+        setTimeout(() => alert.remove(), 300);
+    }, 3000);
+}
+
+// Add toast styles
+const style = document.createElement('style');
+style.textContent = `
+.alert-toast {
+    position: fixed;
+    top: 100px;
+    right: 20px;
+    padding: 16px 24px;
+    background: var(--glass-bg);
+    backdrop-filter: blur(20px);
+    border: 1px solid var(--glass-border);
+    border-radius: var(--radius-lg);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    z-index: 10000;
+    transform: translateX(400px);
+    transition: transform 0.3s ease;
+    box-shadow: var(--glass-shadow);
+}
+
+.alert-toast.show {
+    transform: translateX(0);
+}
+
+.alert-toast.alert-success {
+    border-color: var(--color-success);
+    color: var(--color-success);
+}
+
+.alert-toast.alert-error {
+    border-color: var(--color-danger);
+    color: var(--color-danger);
+}
+
+.alert-toast.alert-info {
+    border-color: var(--color-primary);
+    color: var(--color-primary);
+}
+
+.profile-display {
+    display: grid;
+    gap: 1rem;
+    padding: 1.5rem;
+    background: var(--color-surface);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--glass-border);
+}
+
+.profile-item {
+    display: flex;
+    gap: 1rem;
+    align-items: start;
+}
+
+.profile-label {
+    font-weight: 600;
+    color: var(--color-text-secondary);
+    min-width: 120px;
+}
+
+.profile-value {
+    color: var(--color-text-primary);
+}
+
+.skills-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.skill-tag {
+    padding: 4px 12px;
+    background: rgba(99, 102, 241, 0.1);
+    border: 1px solid rgba(99, 102, 241, 0.3);
+    border-radius: 20px;
+    font-size: 14px;
+    color: var(--color-primary);
+}
+
+.form-input {
+    width: 100%;
+    padding: 14px 16px;
+    background: var(--color-surface);
+    border: 1px solid var(--glass-border);
+    border-radius: var(--radius-md);
+    color: var(--color-text-primary);
+    font-size: 16px;
+    transition: all var(--transition-base);
+}
+
+.form-input:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
+}
+
+.form-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 8px;
+    color: var(--color-text-secondary);
+}
+`;
+document.head.appendChild(style);
+
+
+// Reset interview and go back to home
+function resetInterview() {
+    // During exam mode, show warning about termination
+    if (document.body.classList.contains('exam-mode')) {
+        if (confirm('⚠️ WARNING: Exiting will terminate your interview!\n\nYour progress will be lost and the interview will be marked as incomplete.\n\nAre you sure you want to exit?')) {
+            // End exam mode
+            window.examSecurity.endExamMode();
+            
+            // Log termination
+            window.examSecurity.logSecurityEvent('exam_abandoned', {
+                reason: 'user_exit',
+                timestamp: new Date().toISOString()
+            });
+            
+            sessionStorage.clear();
+            location.reload();
+        }
+    } else {
+        if (confirm('Are you sure you want to go back to home? All progress will be lost.')) {
+            sessionStorage.clear();
+            location.reload();
+        }
+    }
+}
+
+// Update next button to submit answer
+document.addEventListener('DOMContentLoaded', () => {
+    // Replace next button click handler
+    const nextButton = document.querySelector('[onclick="nextQuestion()"]');
+    if (nextButton) {
+        nextButton.setAttribute('onclick', 'submitAnswer()');
+        const buttonText = nextButton.querySelector('span');
+        if (buttonText) {
+            buttonText.textContent = 'Submit & Next';
+        }
+    }
+});

static/assets/js/proctoring.js

@@ -0,0 +1,605 @@
+/**
+ * Proctoring System - Camera and Audio Monitoring
+ * - Face detection
+ * - Looking away detection
+ * - Audio monitoring
+ * - Warning system (2 warnings max)
+ */
+
+class ProctoringSystem {
+    constructor() {
+        this.isActive = false;
+        this.stream = null;
+        this.videoElement = null;
+        this.lookAwayCount = 0;
+        this.maxLookAwayWarnings = 2;
+        this.lookAwayTimer = null;
+        this.lookAwayThreshold = 3000; // 3 seconds
+        this.faceDetectionInterval = null;
+        this.lastFaceDetected = Date.now();
+        this.noFaceDetectedTime = 0;
+        this.multipleFacesCount = 0;
+        
+        // BlazeFace model
+        this.faceDetectionModel = null;
+        
+        // Audio monitoring
+        this.audioContext = null;
+        this.analyser = null;
+        this.audioViolationCount = 0;
+        this.maxAudioViolations = 2;
+        this.audioThreshold = 30; // Lower threshold for better detection (0-100)
+        this.suspiciousAudioDuration = 0;
+        this.audioCheckInterval = null;
+    }
+    
+    async startProctoring() {
+        try {
+            // Load face detection model
+            console.log('Loading face detection model...');
+            this.faceDetectionModel = await blazeface.load();
+            console.log('Face detection model loaded');
+            
+            // Request camera and microphone access
+            this.stream = await navigator.mediaDevices.getUserMedia({
+                video: { 
+                    width: { ideal: 640 },
+                    height: { ideal: 480 },
+                    facingMode: 'user'
+                },
+                audio: {
+                    echoCancellation: false,
+                    noiseSuppression: false,
+                    autoGainControl: false
+                }
+            });
+            
+            // Create video element
+            this.createVideoElement();
+            this.videoElement.srcObject = this.stream;
+            await this.videoElement.play();
+            
+            this.isActive = true;
+            
+            // Start face detection
+            this.startFaceDetection();
+            
+            // Start audio monitoring
+            this.startAudioMonitoring();
+            
+            // Log proctoring start
+            this.logProctoringEvent('proctoring_started', {
+                timestamp: new Date().toISOString()
+            });
+            
+            return true;
+        } catch (error) {
+            console.error('Proctoring error:', error);
+            this.showProctoringError(error);
+            return false;
+        }
+    }
+    
+    createVideoElement() {
+        // Create video preview
+        const videoContainer = document.createElement('div');
+        videoContainer.id = 'proctoringVideo';
+        videoContainer.style.cssText = `
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            width: 200px;
+            height: 150px;
+            border: 2px solid var(--color-primary);
+            border-radius: var(--radius-lg);
+            overflow: hidden;
+            z-index: 9998;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+        `;
+        
+        this.videoElement = document.createElement('video');
+        this.videoElement.style.cssText = `
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            transform: scaleX(-1);
+        `;
+        this.videoElement.autoplay = true;
+        this.videoElement.muted = true;
+        
+        const label = document.createElement('div');
+        label.style.cssText = `
+            position: absolute;
+            top: 5px;
+            left: 5px;
+            background: rgba(0, 0, 0, 0.7);
+            color: white;
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 12px;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        `;
+        label.innerHTML = `
+            <i class="fas fa-video" style="color: var(--color-success);"></i>
+            <span>Proctoring Active</span>
+        `;
+        
+        videoContainer.appendChild(this.videoElement);
+        videoContainer.appendChild(label);
+        document.body.appendChild(videoContainer);
+    }
+    
+    startFaceDetection() {
+        // Use BlazeFace for accurate face detection
+        this.faceDetectionInterval = setInterval(() => {
+            if (!this.isActive) return;
+            
+            this.detectFace();
+        }, 1000); // Check every second
+    }
+    
+    async detectFace() {
+        try {
+            if (!this.faceDetectionModel || !this.videoElement) return;
+            
+            // Detect faces using BlazeFace
+            const predictions = await this.faceDetectionModel.estimateFaces(this.videoElement, false);
+            
+            const faceCount = predictions.length;
+            
+            // Update face count indicator
+            this.updateFaceCountIndicator(faceCount);
+            
+            if (faceCount === 0) {
+                // No face detected
+                this.noFaceDetectedTime += 1000;
+                
+                if (this.noFaceDetectedTime >= this.lookAwayThreshold) {
+                    this.handleNoFaceDetected();
+                    this.noFaceDetectedTime = 0;
+                }
+            } else if (faceCount === 1) {
+                // Exactly one face - good!
+                this.noFaceDetectedTime = 0;
+                this.lastFaceDetected = Date.now();
+            } else if (faceCount > 1) {
+                // Multiple faces detected
+                this.handleMultipleFaces(faceCount);
+            }
+            
+        } catch (error) {
+            console.error('Face detection error:', error);
+        }
+    }
+    
+    handleNoFaceDetected() {
+        this.lookAwayCount++;
+        
+        this.logProctoringEvent('no_face_detected', {
+            count: this.lookAwayCount,
+            timestamp: new Date().toISOString()
+        });
+        
+        if (this.lookAwayCount >= this.maxLookAwayWarnings) {
+            this.terminateExam();
+        } else {
+            const remaining = this.maxLookAwayWarnings - this.lookAwayCount;
+            this.showWarning(
+                `⚠️ NO FACE DETECTED!\n\nYou have ${remaining} warning(s) remaining.\n\nPlease look at the camera and stay in frame.`
+            );
+        }
+    }
+    
+    handleMultipleFaces(count) {
+        this.multipleFacesCount++;
+        
+        this.logProctoringEvent('multiple_faces_detected', {
+            face_count: count,
+            violation_count: this.multipleFacesCount,
+            timestamp: new Date().toISOString()
+        });
+        
+        if (this.multipleFacesCount >= 2) {
+            this.terminateExamMultipleFaces(count);
+        } else {
+            this.showWarning(
+                `⚠️ MULTIPLE PEOPLE DETECTED!\n\n${count} faces detected in frame.\n\nOnly the candidate should be visible.\n\nThis is your only warning.`
+            );
+        }
+    }
+    
+    terminateExamMultipleFaces(count) {
+        this.isActive = false;
+        
+        this.logProctoringEvent('exam_terminated', {
+            reason: 'multiple_faces_detected',
+            face_count: count,
+            timestamp: new Date().toISOString()
+        });
+        
+        const overlay = document.createElement('div');
+        overlay.className = 'critical-warning-overlay show';
+        overlay.style.zIndex = '99999';
+        overlay.innerHTML = `
+            <div class="critical-warning-box">
+                <div class="warning-icon">
+                    <i class="fas fa-ban"></i>
+                </div>
+                <h3>Interview Terminated</h3>
+                <p>Multiple people detected in the camera frame.</p>
+                <p style="margin-top: 1rem;">Only the candidate should be visible during the interview.</p>
+                <p style="margin-top: 1rem;">Your interview has been automatically submitted with current progress.</p>
+                <div style="margin-top: 2rem; display: flex; gap: 1rem; justify-content: center;">
+                    <button class="btn-primary" onclick="window.location.href='index.php'">
+                        <span>Go to Home</span>
+                    </button>
+                </div>
+            </div>
+        `;
+        document.body.appendChild(overlay);
+        
+        this.stopProctoring();
+    }
+    
+    updateFaceCountIndicator(count) {
+        const videoContainer = document.getElementById('proctoringVideo');
+        if (!videoContainer) return;
+        
+        let indicator = document.getElementById('faceCountIndicator');
+        if (!indicator) {
+            indicator = document.createElement('div');
+            indicator.id = 'faceCountIndicator';
+            indicator.style.cssText = `
+                position: absolute;
+                top: 5px;
+                right: 5px;
+                background: rgba(0, 0, 0, 0.7);
+                color: white;
+                padding: 4px 8px;
+                border-radius: 4px;
+                font-size: 12px;
+                font-weight: bold;
+            `;
+            videoContainer.appendChild(indicator);
+        }
+        
+        if (count === 0) {
+            indicator.style.background = 'rgba(239, 68, 68, 0.9)';
+            indicator.innerHTML = '<i class="fas fa-user-slash"></i> No Face';
+        } else if (count === 1) {
+            indicator.style.background = 'rgba(16, 185, 129, 0.9)';
+            indicator.innerHTML = '<i class="fas fa-user-check"></i> 1 Face';
+        } else {
+            indicator.style.background = 'rgba(239, 68, 68, 0.9)';
+            indicator.innerHTML = `<i class="fas fa-users"></i> ${count} Faces`;
+        }
+    }
+    
+    handleLookingAway() {
+        const timeSinceLastFace = Date.now() - this.lastFaceDetected;
+        
+        if (timeSinceLastFace > this.lookAwayThreshold && !this.lookAwayTimer) {
+            this.lookAwayTimer = setTimeout(() => {
+                this.lookAwayCount++;
+                
+                this.logProctoringEvent('looking_away', {
+                    count: this.lookAwayCount,
+                    timestamp: new Date().toISOString()
+                });
+                
+                if (this.lookAwayCount >= this.maxLookAwayWarnings) {
+                    this.terminateExam();
+                } else {
+                    const remaining = this.maxLookAwayWarnings - this.lookAwayCount;
+                    this.showWarning(
+                        `⚠️ FACE NOT DETECTED!\n\nYou have ${remaining} warning(s) remaining.\n\nPlease look at the camera and stay focused on the screen.`
+                    );
+                }
+                
+                this.lookAwayTimer = null;
+            }, 1000);
+        }
+    }
+    
+    clearLookAwayTimer() {
+        if (this.lookAwayTimer) {
+            clearTimeout(this.lookAwayTimer);
+            this.lookAwayTimer = null;
+        }
+    }
+    
+    terminateExam() {
+        this.isActive = false;
+        
+        this.logProctoringEvent('exam_terminated', {
+            reason: 'looking_away_exceeded',
+            timestamp: new Date().toISOString()
+        });
+        
+        const overlay = document.createElement('div');
+        overlay.className = 'critical-warning-overlay show';
+        overlay.style.zIndex = '99999';
+        overlay.innerHTML = `
+            <div class="critical-warning-box">
+                <div class="warning-icon">
+                    <i class="fas fa-ban"></i>
+                </div>
+                <h3>Interview Terminated</h3>
+                <p>You have been looking away from the screen for too long.</p>
+                <p style="margin-top: 1rem;">Your interview has been automatically submitted with current progress.</p>
+                <div style="margin-top: 2rem; display: flex; gap: 1rem; justify-content: center;">
+                    <button class="btn-primary" onclick="window.location.href='index.php'">
+                        <span>Go to Home</span>
+                    </button>
+                </div>
+            </div>
+        `;
+        document.body.appendChild(overlay);
+        
+        this.stopProctoring();
+    }
+    
+    startAudioMonitoring() {
+        try {
+            // Create audio context
+            this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
+            this.analyser = this.audioContext.createAnalyser();
+            this.analyser.fftSize = 256;
+            
+            // Connect microphone to analyser
+            const source = this.audioContext.createMediaStreamSource(this.stream);
+            source.connect(this.analyser);
+            
+            // Start monitoring
+            this.audioCheckInterval = setInterval(() => {
+                this.checkAudioLevel();
+            }, 500); // Check every 500ms
+            
+            // Add audio indicator to video preview
+            this.addAudioIndicator();
+            
+        } catch (error) {
+            console.error('Audio monitoring error:', error);
+        }
+    }
+    
+    checkAudioLevel() {
+        if (!this.isActive || !this.analyser) return;
+        
+        const dataArray = new Uint8Array(this.analyser.frequencyBinCount);
+        this.analyser.getByteFrequencyData(dataArray);
+        
+        // Calculate average volume
+        let sum = 0;
+        for (let i = 0; i < dataArray.length; i++) {
+            sum += dataArray[i];
+        }
+        const average = sum / dataArray.length;
+        const volumePercent = (average / 255) * 100;
+        
+        // Update audio indicator
+        this.updateAudioIndicator(volumePercent);
+        
+        // Check if volume exceeds threshold (someone speaking)
+        if (volumePercent > this.audioThreshold) {
+            this.suspiciousAudioDuration += 500; // Add 500ms
+            
+            // If speaking for more than 2 seconds (more sensitive)
+            if (this.suspiciousAudioDuration >= 2000) {
+                this.handleAudioViolation();
+                this.suspiciousAudioDuration = 0;
+            }
+        } else {
+            // Reset if quiet
+            if (this.suspiciousAudioDuration > 0) {
+                this.suspiciousAudioDuration = Math.max(0, this.suspiciousAudioDuration - 500);
+            }
+        }
+    }
+    
+    handleAudioViolation() {
+        this.audioViolationCount++;
+        
+        this.logProctoringEvent('audio_violation', {
+            count: this.audioViolationCount,
+            timestamp: new Date().toISOString()
+        });
+        
+        if (this.audioViolationCount >= this.maxAudioViolations) {
+            this.terminateExamAudio();
+        } else {
+            const remaining = this.maxAudioViolations - this.audioViolationCount;
+            this.showWarning(
+                `⚠️ SUSPICIOUS AUDIO DETECTED!\n\nVoice or conversation detected in the background.\n\nYou have ${remaining} warning(s) remaining.\n\nPlease ensure you are alone and silent during the interview.`
+            );
+        }
+    }
+    
+    terminateExamAudio() {
+        this.isActive = false;
+        
+        this.logProctoringEvent('exam_terminated', {
+            reason: 'audio_violations_exceeded',
+            timestamp: new Date().toISOString()
+        });
+        
+        const overlay = document.createElement('div');
+        overlay.className = 'critical-warning-overlay show';
+        overlay.style.zIndex = '99999';
+        overlay.innerHTML = `
+            <div class="critical-warning-box">
+                <div class="warning-icon">
+                    <i class="fas fa-ban"></i>
+                </div>
+                <h3>Interview Terminated</h3>
+                <p>Multiple audio violations detected.</p>
+                <p style="margin-top: 1rem;">Voice or conversation was detected in the background, which is not allowed during the interview.</p>
+                <p style="margin-top: 1rem;">Your interview has been automatically submitted with current progress.</p>
+                <div style="margin-top: 2rem; display: flex; gap: 1rem; justify-content: center;">
+                    <button class="btn-primary" onclick="window.location.href='index.php'">
+                        <span>Go to Home</span>
+                    </button>
+                </div>
+            </div>
+        `;
+        document.body.appendChild(overlay);
+        
+        this.stopProctoring();
+    }
+    
+    addAudioIndicator() {
+        const videoContainer = document.getElementById('proctoringVideo');
+        if (!videoContainer) return;
+        
+        const audioIndicator = document.createElement('div');
+        audioIndicator.id = 'audioIndicator';
+        audioIndicator.style.cssText = `
+            position: absolute;
+            bottom: 5px;
+            left: 5px;
+            right: 5px;
+            height: 20px;
+            background: rgba(0, 0, 0, 0.7);
+            border-radius: 4px;
+            overflow: hidden;
+        `;
+        
+        const audioBar = document.createElement('div');
+        audioBar.id = 'audioBar';
+        audioBar.style.cssText = `
+            height: 100%;
+            width: 0%;
+            background: linear-gradient(90deg, var(--color-success), var(--color-warning), var(--color-danger));
+            transition: width 0.1s ease;
+        `;
+        
+        const audioLabel = document.createElement('div');
+        audioLabel.style.cssText = `
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: white;
+            font-size: 10px;
+            font-weight: bold;
+            pointer-events: none;
+        `;
+        audioLabel.innerHTML = '<i class="fas fa-microphone"></i> Audio';
+        
+        audioIndicator.appendChild(audioBar);
+        audioIndicator.appendChild(audioLabel);
+        videoContainer.appendChild(audioIndicator);
+    }
+    
+    updateAudioIndicator(volumePercent) {
+        const audioBar = document.getElementById('audioBar');
+        if (audioBar) {
+            audioBar.style.width = `${Math.min(volumePercent, 100)}%`;
+            
+            // Change color based on volume
+            if (volumePercent > this.audioThreshold) {
+                audioBar.style.background = 'var(--color-danger)';
+            } else {
+                audioBar.style.background = 'linear-gradient(90deg, var(--color-success), var(--color-warning), var(--color-danger))';
+            }
+        }
+    }
+    
+    stopProctoring() {
+        this.isActive = false;
+        
+        if (this.faceDetectionInterval) {
+            clearInterval(this.faceDetectionInterval);
+        }
+        
+        if (this.audioCheckInterval) {
+            clearInterval(this.audioCheckInterval);
+        }
+        
+        if (this.audioContext) {
+            this.audioContext.close();
+        }
+        
+        if (this.stream) {
+            this.stream.getTracks().forEach(track => track.stop());
+        }
+        
+        const videoContainer = document.getElementById('proctoringVideo');
+        if (videoContainer) {
+            videoContainer.remove();
+        }
+    }
+    
+    showWarning(message) {
+        const warning = document.createElement('div');
+        warning.className = 'critical-warning-overlay show';
+        warning.style.zIndex = '99999';
+        warning.innerHTML = `
+            <div class="critical-warning-box">
+                <div class="warning-icon">
+                    <i class="fas fa-exclamation-triangle"></i>
+                </div>
+                <h3>Proctoring Warning</h3>
+                <p>${message.replace(/\n/g, '<br>')}</p>
+                <button class="btn-primary" onclick="this.parentElement.parentElement.remove()">
+                    <span>I Understand</span>
+                </button>
+            </div>
+        `;
+        document.body.appendChild(warning);
+    }
+    
+    showProctoringError(error) {
+        const errorMessage = error.name === 'NotAllowedError' 
+            ? 'Camera and microphone access is required for this interview. Please allow access and refresh the page.'
+            : 'Failed to access camera/microphone. Please check your device settings.';
+        
+        const overlay = document.createElement('div');
+        overlay.className = 'critical-warning-overlay show';
+        overlay.style.zIndex = '99999';
+        overlay.innerHTML = `
+            <div class="critical-warning-box">
+                <div class="warning-icon">
+                    <i class="fas fa-video-slash"></i>
+                </div>
+                <h3>Camera Access Required</h3>
+                <p>${errorMessage}</p>
+                <div style="margin-top: 2rem; display: flex; gap: 1rem; justify-content: center;">
+                    <button class="btn-secondary" onclick="window.location.href='index.php'">
+                        <span>Cancel</span>
+                    </button>
+                    <button class="btn-primary" onclick="window.location.reload()">
+                        <span>Retry</span>
+                    </button>
+                </div>
+            </div>
+        `;
+        document.body.appendChild(overlay);
+    }
+    
+    logProctoringEvent(eventType, data) {
+        console.log(`PROCTORING EVENT: ${eventType}`, data);
+        
+        // Send to backend
+        fetch(getApiUrl('log_security'), {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-User-Session-Id': getSessionId()
+            },
+            body: JSON.stringify({
+                event_type: eventType,
+                data: data,
+                timestamp: new Date().toISOString()
+            })
+        }).catch(err => console.error('Failed to log proctoring event:', err));
+    }
+}
+
+// Initialize proctoring system
+const proctoringSystem = new ProctoringSystem();
+
+// Export for global use
+window.proctoringSystem = proctoringSystem;

static/index.html

@@ -0,0 +1,481 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>IntervuAI Pro - Next-Gen AI Interview Platform</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="assets/css/premium.css">
+</head>
+<body>
+    <!-- Animated Background -->
+    <div class="premium-bg">
+        <div class="gradient-mesh"></div>
+        <div class="neural-network">
+            <canvas id="neuralCanvas"></canvas>
+        </div>
+    </div>
+
+    <!-- Navigation -->
+    <nav class="premium-nav">
+        <div class="nav-container">
+            <div class="nav-brand">
+                <div class="brand-icon">
+                    <i class="fas fa-brain"></i>
+                </div>
+                <span class="brand-text">IntervuAI<span class="brand-pro">Pro</span></span>
+            </div>
+            <div class="nav-menu">
+                <a href="#" class="nav-link active">
+                    <i class="fas fa-home"></i>
+                    <span>Dashboard</span>
+                </a>
+                <div class="nav-user">
+                    <div class="user-avatar">
+                        <i class="fas fa-user"></i>
+                    </div>
+                    <div class="user-info">
+                        <span class="user-name">Guest User</span>
+                        <span class="user-role">Premium Access</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="premium-main">
+        <!-- Hero Section -->
+        <section class="hero-section">
+            <div class="hero-content">
+                <div class="hero-badge">
+                    <i class="fas fa-sparkles"></i>
+                    <span>Powered by Advanced AI</span>
+                </div>
+                <h1 class="hero-title">
+                    Next-Generation
+                    <span class="gradient-text">AI Interview</span>
+                    Platform
+                </h1>
+                <p class="hero-subtitle">
+                    Experience intelligent candidate evaluation with real-time AI analysis,
+                    automated scoring, and comprehensive insights.
+                </p>
+                <div class="hero-actions">
+                    <button class="btn-primary" onclick="scrollToUpload()">
+                        <i class="fas fa-rocket"></i>
+                        <span>Start Interview</span>
+                        <div class="btn-glow"></div>
+                    </button>
+                </div>
+                <div class="hero-stats">
+                    <div class="stat-item">
+                        <div class="stat-value">10K+</div>
+                        <div class="stat-label">Interviews</div>
+                    </div>
+                    <div class="stat-divider"></div>
+                    <div class="stat-item">
+                        <div class="stat-value">98%</div>
+                        <div class="stat-label">Accuracy</div>
+                    </div>
+                    <div class="stat-divider"></div>
+                    <div class="stat-item">
+                        <div class="stat-value">AI</div>
+                        <div class="stat-label">Powered</div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Upload Section -->
+        <section class="upload-section" id="uploadSection">
+            <div class="glass-card large">
+                <div class="card-header">
+                    <div class="header-icon">
+                        <i class="fas fa-cloud-upload-alt"></i>
+                    </div>
+                    <div class="header-content">
+                        <h2 class="card-title">Upload Resume</h2>
+                        <p class="card-subtitle">AI-powered resume analysis in seconds</p>
+                    </div>
+                </div>
+                
+                <div class="upload-area" id="uploadArea">
+                    <input type="file" id="resumeInput" accept=".pdf" hidden>
+                    <div class="upload-icon">
+                        <i class="fas fa-file-upload"></i>
+                    </div>
+                    <h3 class="upload-title">Drop your resume here</h3>
+                    <p class="upload-text">or click to browse</p>
+                    <div class="upload-formats">
+                        <span class="format-badge">PDF</span>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Setup Section (Hidden) -->
+        <section class="upload-section hidden" id="setupSection">
+            <div class="glass-card large">
+                <div class="card-header">
+                    <div class="header-icon">
+                        <i class="fas fa-user-check"></i>
+                    </div>
+                    <div class="header-content">
+                        <h2 class="card-title">Candidate Profile</h2>
+                        <p class="card-subtitle">Review and configure interview</p>
+                    </div>
+                </div>
+                <div class="profile-display" id="profileDisplay"></div>
+                <div class="form-group" style="margin-top: 2rem;">
+                    <label class="form-label"><i class="fas fa-briefcase"></i> Position/Role</label>
+                    <input type="text" id="positionInput" class="form-input" placeholder="e.g., Senior Software Engineer">
+                </div>
+                <div class="interview-actions" style="margin-top: 2rem;">
+                    <button class="btn-secondary" onclick="location.reload()">
+                        <i class="fas fa-arrow-left"></i> Back
+                    </button>
+                    <button class="btn-primary" onclick="startInterview()">
+                        <span>Start Interview</span>
+                        <i class="fas fa-arrow-right"></i>
+                        <div class="btn-glow"></div>
+                    </button>
+                </div>
+            </div>
+        </section>
+
+        <!-- Interview Section (Hidden) -->
+        <section class="interview-section hidden" id="interviewSection">
+            <div class="glass-card">
+                <div class="interview-header">
+                    <div class="progress-indicator">
+                        <div class="progress-circle">
+                            <svg viewBox="0 0 100 100">
+                                <circle cx="50" cy="50" r="45"></circle>
+                                <circle cx="50" cy="50" r="45" class="progress-ring" id="progressRing"></circle>
+                            </svg>
+                            <span class="progress-number" id="progressNumber">1/10</span>
+                        </div>
+                    </div>
+                    <div class="timer">
+                        <i class="fas fa-clock"></i>
+                        <span id="timer">00:00</span>
+                    </div>
+                </div>
+                
+                <div class="question-container">
+                    <div class="question-tags" id="questionTags"></div>
+                    <h3 class="question-text" id="questionText">Loading question...</h3>
+                </div>
+                
+                <div class="answer-container">
+                    <textarea id="answerText" class="answer-input" placeholder="Type your response here..." rows="8"></textarea>
+                </div>
+                
+                <div class="feedback-box hidden" id="feedbackBox"></div>
+                
+                <div class="interview-actions">
+                    <button class="btn-secondary" onclick="location.reload()">
+                        <i class="fas fa-home"></i> Home
+                    </button>
+                    <button class="btn-primary" onclick="submitAnswer()">
+                        <span>Submit Answer</span>
+                        <i class="fas fa-paper-plane"></i>
+                        <div class="btn-glow"></div>
+                    </button>
+                </div>
+            </div>
+        </section>
+
+        <!-- Results Section (Hidden) -->
+        <section class="results-section hidden" id="resultsSection">
+            <div class="results-header">
+                <h2 class="section-title">Interview Assessment</h2>
+            </div>
+            
+            <div class="results-grid">
+                <div class="glass-card">
+                    <div class="score-display">
+                        <div class="score-circle">
+                            <svg viewBox="0 0 200 200">
+                                <circle cx="100" cy="100" r="90"></circle>
+                                <circle cx="100" cy="100" r="90" class="score-ring" id="scoreRing"></circle>
+                            </svg>
+                            <div class="score-content">
+                                <span class="score-value" id="overallScore">--</span>
+                                <span class="score-label">Overall</span>
+                            </div>
+                        </div>
+                        <div class="recommendation" id="recommendation">
+                            <i class="fas fa-hourglass-half"></i>
+                            <span>Loading...</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="glass-card">
+                    <h3 class="card-title">Detailed Scores</h3>
+                    <div class="score-breakdown" id="scoreBreakdown"></div>
+                </div>
+            </div>
+            
+            <div class="glass-card" style="margin-top: 2rem;">
+                <h3 class="card-title">Key Insights</h3>
+                <div class="insights-grid" id="insightsGrid"></div>
+            </div>
+            
+            <div class="interview-actions" style="margin-top: 2rem;">
+                <button class="btn-primary" onclick="location.reload()">
+                    <i class="fas fa-redo"></i> Start New Interview
+                    <div class="btn-glow"></div>
+                </button>
+            </div>
+        </section>
+    </main>
+
+    <!-- Loading Overlay -->
+    <div class="loading-overlay hidden" id="loadingOverlay">
+        <div class="loading-content">
+            <div class="loading-spinner"></div>
+            <p class="loading-text" id="loadingText">Processing with AI...</p>
+        </div>
+    </div>
+
+    <script src="assets/js/config.js"></script>
+    <script src="assets/js/neural-bg.js"></script>
+    <script>
+        // Session management
+        let sessionId = 'session_' + Date.now();
+        let questions = [];
+        let currentQuestion = 0;
+        let timerInterval = null;
+        let seconds = 0;
+
+        // Utility functions
+        function showLoading(text) {
+            document.getElementById('loadingText').textContent = text || 'Processing...';
+            document.getElementById('loadingOverlay').classList.remove('hidden');
+        }
+        function hideLoading() {
+            document.getElementById('loadingOverlay').classList.add('hidden');
+        }
+        function scrollToUpload() {
+            document.getElementById('uploadSection').scrollIntoView({ behavior: 'smooth' });
+        }
+        function getSessionId() { return sessionId; }
+
+        // Upload area events
+        document.addEventListener('DOMContentLoaded', () => {
+            const uploadArea = document.getElementById('uploadArea');
+            const resumeInput = document.getElementById('resumeInput');
+            
+            uploadArea.addEventListener('click', () => resumeInput.click());
+            uploadArea.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                uploadArea.style.borderColor = 'var(--color-primary)';
+            });
+            uploadArea.addEventListener('dragleave', () => {
+                uploadArea.style.borderColor = '';
+            });
+            uploadArea.addEventListener('drop', (e) => {
+                e.preventDefault();
+                uploadArea.style.borderColor = '';
+                if (e.dataTransfer.files.length > 0) handleFileUpload(e.dataTransfer.files[0]);
+            });
+            resumeInput.addEventListener('change', (e) => {
+                if (e.target.files.length > 0) handleFileUpload(e.target.files[0]);
+            });
+        });
+
+        // Handle file upload
+        async function handleFileUpload(file) {
+            showLoading('Analyzing resume with AI...');
+            const formData = new FormData();
+            formData.append('resume', file);
+            
+            try {
+                const resp = await fetch('/upload_resume', {
+                    method: 'POST',
+                    headers: { 'X-User-Session-Id': sessionId },
+                    body: formData
+                });
+                const data = await resp.json();
+                hideLoading();
+                
+                if (data.candidate_profile) {
+                    const p = data.candidate_profile;
+                    document.getElementById('profileDisplay').innerHTML = `
+                        <div class="profile-item"><span class="profile-label">Name:</span><span class="profile-value">${p.name || 'N/A'}</span></div>
+                        <div class="profile-item"><span class="profile-label">Email:</span><span class="profile-value">${p.email || 'N/A'}</span></div>
+                        <div class="profile-item"><span class="profile-label">Experience:</span><span class="profile-value">${p.experience || 'N/A'}</span></div>
+                        <div class="profile-item"><span class="profile-label">Skills:</span><div class="skills-tags">${(p.key_skills||[]).map(s=>`<span class="skill-tag">${s}</span>`).join('')}</div></div>
+                    `;
+                    document.getElementById('positionInput').value = p.inferred_position || '';
+                    document.getElementById('uploadSection').classList.add('hidden');
+                    document.getElementById('setupSection').classList.remove('hidden');
+                } else {
+                    alert('Error: ' + (data.error || 'Failed'));
+                }
+            } catch (e) {
+                hideLoading();
+                alert('Error: ' + e.message);
+            }
+        }
+
+        // Start interview
+        async function startInterview() {
+            const position = document.getElementById('positionInput').value;
+            if (!position) { alert('Enter a position'); return; }
+            
+            showLoading('Generating interview questions...');
+            try {
+                const resp = await fetch('/setup_interview', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json', 'X-User-Session-Id': sessionId },
+                    body: JSON.stringify({ position_role: position })
+                });
+                const data = await resp.json();
+                hideLoading();
+                
+                if (data.questions) {
+                    questions = data.questions;
+                    currentQuestion = 0;
+                    document.getElementById('setupSection').classList.add('hidden');
+                    document.getElementById('interviewSection').classList.remove('hidden');
+                    showQuestion();
+                    startTimer();
+                } else {
+                    alert('Error: ' + (data.error || 'Failed'));
+                }
+            } catch (e) {
+                hideLoading();
+                alert('Error: ' + e.message);
+            }
+        }
+
+        // Show question
+        function showQuestion() {
+            const q = questions[currentQuestion];
+            const progress = ((currentQuestion + 1) / questions.length) * 100;
+            
+            document.getElementById('progressNumber').textContent = `${currentQuestion + 1}/${questions.length}`;
+            document.getElementById('questionTags').innerHTML = (q.tags||[]).map(t=>`<span class="tag">${t}</span>`).join('');
+            document.getElementById('questionText').textContent = q.question;
+            document.getElementById('answerText').value = '';
+            document.getElementById('feedbackBox').classList.add('hidden');
+            
+            // Update progress ring
+            const ring = document.getElementById('progressRing');
+            const circumference = 2 * Math.PI * 45;
+            ring.style.strokeDasharray = `${circumference} ${circumference}`;
+            ring.style.strokeDashoffset = circumference - (progress / 100) * circumference;
+        }
+
+        // Timer
+        function startTimer() {
+            seconds = 0;
+            timerInterval = setInterval(() => {
+                seconds++;
+                const m = Math.floor(seconds / 60).toString().padStart(2, '0');
+                const s = (seconds % 60).toString().padStart(2, '0');
+                document.getElementById('timer').textContent = `${m}:${s}`;
+            }, 1000);
+        }
+
+        // Submit answer
+        async function submitAnswer() {
+            const answer = document.getElementById('answerText').value.trim();
+            if (!answer) { alert('Provide an answer'); return; }
+            
+            showLoading('Evaluating your answer...');
+            try {
+                const resp = await fetch('/submit_answer', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json', 'X-User-Session-Id': sessionId },
+                    body: JSON.stringify({
+                        question_id: questions[currentQuestion].id,
+                        response_text: answer,
+                        duration: document.getElementById('timer').textContent
+                    })
+                });
+                const data = await resp.json();
+                hideLoading();
+                
+                if (data.evaluation) {
+                    const e = data.evaluation;
+                    document.getElementById('feedbackBox').innerHTML = `
+                        <strong>Score: ${e.score}/100</strong><br>
+                        Technical: ${e.technicalScore}% | Communication: ${e.communicationScore}% | Relevance: ${e.relevanceScore}%<br>
+                        <em>${e.feedback}</em>
+                    `;
+                    document.getElementById('feedbackBox').classList.remove('hidden');
+                    
+                    currentQuestion++;
+                    if (currentQuestion < questions.length) {
+                        setTimeout(showQuestion, 2000);
+                    } else {
+                        clearInterval(timerInterval);
+                        setTimeout(showAssessment, 2000);
+                    }
+                }
+            } catch (e) {
+                hideLoading();
+                alert('Error: ' + e.message);
+            }
+        }
+
+        // Show assessment
+        async function showAssessment() {
+            showLoading('Generating assessment report...');
+            try {
+                const resp = await fetch('/get_assessment', { headers: { 'X-User-Session-Id': sessionId } });
+                const data = await resp.json();
+                hideLoading();
+                
+                if (data.assessment) {
+                    const a = data.assessment;
+                    const score = a.overallScore || 0;
+                    
+                    document.getElementById('overallScore').textContent = score;
+                    
+                    // Update score ring
+                    const ring = document.getElementById('scoreRing');
+                    const circumference = 2 * Math.PI * 90;
+                    ring.style.strokeDasharray = `${circumference} ${circumference}`;
+                    ring.style.strokeDashoffset = circumference - (score / 100) * circumference;
+                    
+                    // Recommendation
+                    const recClass = score >= 85 ? 'recommended' : score >= 70 ? 'consider' : 'not-recommended';
+                    document.getElementById('recommendation').innerHTML = `<i class="fas fa-${score >= 70 ? 'check-circle' : 'exclamation-circle'}"></i><span>${a.recommendation || 'N/A'}</span>`;
+                    document.getElementById('recommendation').className = 'recommendation ' + recClass;
+                    
+                    // Detailed scores
+                    const ds = a.detailedScores || {};
+                    document.getElementById('scoreBreakdown').innerHTML = `
+                        <div class="score-item"><div class="score-info"><span class="score-name">Technical Skills</span><span class="score-percent">${ds.technicalSkills || 0}%</span></div><div class="score-bar"><div class="score-bar-fill" style="width: ${ds.technicalSkills || 0}%"></div></div></div>
+                        <div class="score-item"><div class="score-info"><span class="score-name">Communication</span><span class="score-percent">${ds.communication || 0}%</span></div><div class="score-bar"><div class="score-bar-fill" style="width: ${ds.communication || 0}%"></div></div></div>
+                        <div class="score-item"><div class="score-info"><span class="score-name">Soft Skills</span><span class="score-percent">${ds.softSkills || 0}%</span></div><div class="score-bar"><div class="score-bar-fill" style="width: ${ds.softSkills || 0}%"></div></div></div>
+                    `;
+                    
+                    // Insights
+                    const strengths = (a.keyStrengths || []).map(s => `<div class="insight-item strength"><i class="fas fa-check"></i>${s}</div>`).join('');
+                    const improvements = (a.areasForImprovement || []).map(s => `<div class="insight-item improvement"><i class="fas fa-arrow-up"></i>${s}</div>`).join('');
+                    document.getElementById('insightsGrid').innerHTML = `
+                        <div class="insights-column"><h4>Key Strengths</h4>${strengths}</div>
+                        <div class="insights-column"><h4>Areas for Improvement</h4>${improvements}</div>
+                    `;
+                    
+                    document.getElementById('interviewSection').classList.add('hidden');
+                    document.getElementById('resultsSection').classList.remove('hidden');
+                }
+            } catch (e) {
+                hideLoading();
+                alert('Error: ' + e.message);
+            }
+        }
+    </script>
+</body>
+</html>