Spaces:
Runtime error
Runtime error
| <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> | |
| <a href="#" class="nav-link"> | |
| <i class="fas fa-comment-dots"></i> | |
| <span>Feedback</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" id="userName"></span> | |
| <span class="user-role">Premium User</span> | |
| </div> | |
| <a href="login.html" class="logout-btn" title="Logout"> | |
| <i class="fas fa-sign-out-alt"></i> | |
| </a> | |
| </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> | |
| <button class="btn-secondary"> | |
| <i class="fas fa-play-circle"></i> | |
| <span>Watch Demo</span> | |
| </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">Detection</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,.doc,.docx" 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> | |
| <span class="format-badge">DOC</span> | |
| <span class="format-badge">DOCX</span> | |
| </div> | |
| <div class="upload-progress hidden" id="uploadProgress"> | |
| <div class="progress-bar"> | |
| <div class="progress-fill"></div> | |
| </div> | |
| <span class="progress-text">Analyzing...</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Interview Section (Hidden initially) --> | |
| <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"></circle> | |
| </svg> | |
| <span class="progress-number">1/15</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"> | |
| <span class="tag">Technical</span> | |
| <span class="tag">Problem Solving</span> | |
| </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 class="ai-warning hidden" id="aiWarning"> | |
| <i class="fas fa-exclamation-triangle"></i> | |
| <span>AI-generated content detected</span> | |
| </div> | |
| </div> | |
| <div class="interview-actions"> | |
| <button class="btn-secondary" onclick="resetInterview()"> | |
| <i class="fas fa-home"></i> | |
| <span>Home</span> | |
| </button> | |
| <button class="btn-primary" onclick="submitAnswer()"> | |
| <span>Submit & Next</span> | |
| <i class="fas fa-arrow-right"></i> | |
| <div class="btn-glow"></div> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Results Section (Hidden initially) --> | |
| <section class="results-section hidden" id="resultsSection"> | |
| <div class="results-header"> | |
| <h2 class="section-title">Interview Assessment</h2> | |
| <div style="display: flex; gap: 1rem;"> | |
| <button class="btn-secondary" onclick="downloadReportHTML()"> | |
| <i class="fas fa-file-code"></i> | |
| <span>Download HTML</span> | |
| </button> | |
| <button class="btn-primary" onclick="downloadReportPDF()"> | |
| <i class="fas fa-file-pdf"></i> | |
| <span>Download PDF</span> | |
| <div class="btn-glow"></div> | |
| </button> | |
| </div> | |
| </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"></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"> | |
| <div class="score-item"> | |
| <div class="score-info"> | |
| <span class="score-name">Technical Skills</span> | |
| <span class="score-percent">--%</span> | |
| </div> | |
| <div class="score-bar"> | |
| <div class="score-bar-fill" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div class="score-item"> | |
| <div class="score-info"> | |
| <span class="score-name">Communication</span> | |
| <span class="score-percent">--%</span> | |
| </div> | |
| <div class="score-bar"> | |
| <div class="score-bar-fill" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div class="score-item"> | |
| <div class="score-info"> | |
| <span class="score-name">Soft Skills</span> | |
| <span class="score-percent">--%</span> | |
| </div> | |
| <div class="score-bar"> | |
| <div class="score-bar-fill" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="glass-card" style="margin-top: 2rem;"> | |
| <h3 class="card-title">Key Insights</h3> | |
| <div class="insights-grid"> | |
| <div class="insights-column"> | |
| <h4><i class="fas fa-check-circle" style="color: var(--color-success);"></i> Strengths</h4> | |
| <ul id="strengthsList" style="list-style: none; padding: 0;"></ul> | |
| </div> | |
| <div class="insights-column"> | |
| <h4><i class="fas fa-exclamation-circle" style="color: var(--color-danger);"></i> Areas for Improvement</h4> | |
| <ul id="improvementsList" style="list-style: none; padding: 0;"></ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="interview-actions" style="margin-top: 2rem; justify-content: center;"> | |
| <button class="btn-primary" onclick="location.reload()"> | |
| <i class="fas fa-redo"></i> | |
| <span>Start New Interview</span> | |
| <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">Processing with AI...</p> | |
| </div> | |
| </div> | |
| <!-- Scripts --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.18.0/dist/tf.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/blazeface@0.0.7/dist/blazeface.min.js"></script> | |
| <script src="assets/js/config.js"></script> | |
| <script src="assets/js/neural-bg.js"></script> | |
| <script src="assets/js/exam-security.js"></script> | |
| <script src="assets/js/proctoring.js"></script> | |
| <script src="assets/js/premium-app.js"></script> | |
| <script> | |
| // Check login and load username | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const userName = sessionStorage.getItem('userName'); | |
| const isLoggedIn = sessionStorage.getItem('isLoggedIn'); | |
| const userNameEl = document.getElementById('userName'); | |
| // If not logged in, redirect to signup (home page) | |
| if (!isLoggedIn || !userName) { | |
| window.location.href = '/'; | |
| return; | |
| } | |
| // Display username | |
| if (userNameEl) { | |
| userNameEl.textContent = userName; | |
| } | |
| // Handle logout | |
| const logoutBtn = document.querySelector('.logout-btn'); | |
| if (logoutBtn) { | |
| logoutBtn.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| sessionStorage.clear(); | |
| window.location.href = '/'; | |
| }); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |