| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>IQKiller - Modern Apple Glass UI Preview</title> |
| <style> |
| .glass-container { |
| background: rgba(255, 255, 255, 0.08); |
| backdrop-filter: blur(20px); |
| -webkit-backdrop-filter: blur(20px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-radius: 20px; |
| padding: 2rem; |
| margin: 1rem 0; |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); |
| } |
| |
| .hero-section { |
| background: linear-gradient(135deg, |
| rgba(102, 126, 234, 0.9) 0%, |
| rgba(118, 75, 162, 0.9) 100%); |
| backdrop-filter: blur(20px); |
| border-radius: 24px; |
| padding: 3rem 2rem; |
| text-align: center; |
| color: white; |
| margin-bottom: 2rem; |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| } |
| |
| .progress-container { |
| background: rgba(255, 255, 255, 0.05); |
| backdrop-filter: blur(10px); |
| border-radius: 16px; |
| padding: 1.5rem; |
| margin: 1rem 0; |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| |
| .step-indicator { |
| display: flex; |
| align-items: center; |
| gap: 1rem; |
| padding: 0.75rem 1rem; |
| margin: 0.5rem 0; |
| background: rgba(255, 255, 255, 0.06); |
| border-radius: 12px; |
| transition: all 0.3s ease; |
| } |
| |
| .step-active { |
| background: rgba(102, 126, 234, 0.2); |
| border: 1px solid rgba(102, 126, 234, 0.3); |
| box-shadow: 0 4px 16px rgba(102, 126, 234, 0.1); |
| } |
| |
| .step-completed { |
| background: rgba(34, 197, 94, 0.15); |
| border: 1px solid rgba(34, 197, 94, 0.3); |
| } |
| |
| .news-ticker { |
| background: rgba(255, 255, 255, 0.03); |
| backdrop-filter: blur(8px); |
| border-radius: 12px; |
| padding: 1rem; |
| margin: 1rem 0; |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| overflow: hidden; |
| } |
| |
| .news-text { |
| animation: scroll-left 15s linear infinite; |
| white-space: nowrap; |
| color: #e2e8f0; |
| font-size: 0.95rem; |
| } |
| |
| @keyframes scroll-left { |
| 0% { transform: translateX(100%); } |
| 100% { transform: translateX(-100%); } |
| } |
| |
| .form-glass { |
| background: rgba(255, 255, 255, 0.04); |
| backdrop-filter: blur(12px); |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| border-radius: 16px; |
| padding: 1.5rem; |
| } |
| |
| .pulse-dot { |
| display: inline-block; |
| width: 8px; |
| height: 8px; |
| background: #3b82f6; |
| border-radius: 50%; |
| margin-right: 0.5rem; |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0%, 100% { opacity: 1; transform: scale(1); } |
| 50% { opacity: 0.5; transform: scale(1.1); } |
| } |
| |
| .gradient-border { |
| background: linear-gradient(45deg, #667eea, #764ba2); |
| padding: 2px; |
| border-radius: 18px; |
| } |
| |
| .inner-glass { |
| background: rgba(255, 255, 255, 0.06); |
| backdrop-filter: blur(20px); |
| border-radius: 16px; |
| padding: 2rem; |
| } |
| |
| body { |
| background: linear-gradient(135deg, #1e293b 0%, #334155 100%); |
| min-height: 100vh; |
| margin: 0; |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
| color: #e2e8f0; |
| } |
| |
| .container { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 2rem; |
| } |
| |
| .tab-content { |
| display: none; |
| } |
| |
| .tab-content.active { |
| display: block; |
| } |
| |
| .tab-buttons { |
| display: flex; |
| gap: 1rem; |
| margin-bottom: 2rem; |
| } |
| |
| .tab-button { |
| background: rgba(255, 255, 255, 0.08); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-radius: 12px; |
| padding: 1rem 1.5rem; |
| color: #e2e8f0; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
| |
| .tab-button.active { |
| background: rgba(102, 126, 234, 0.2); |
| border-color: rgba(102, 126, 234, 0.3); |
| } |
| |
| .input-group { |
| margin-bottom: 1.5rem; |
| } |
| |
| .input-label { |
| display: block; |
| margin-bottom: 0.5rem; |
| color: #94a3b8; |
| font-weight: 500; |
| } |
| |
| .glass-input { |
| width: 100%; |
| background: rgba(255, 255, 255, 0.05); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-radius: 12px; |
| padding: 1rem; |
| color: #e2e8f0; |
| font-size: 1rem; |
| transition: all 0.3s ease; |
| } |
| |
| .glass-input:focus { |
| outline: none; |
| border-color: rgba(102, 126, 234, 0.5); |
| box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); |
| } |
| |
| .glass-button { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| border: none; |
| border-radius: 12px; |
| padding: 1rem 2rem; |
| color: white; |
| font-size: 1.1rem; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| width: 100%; |
| } |
| |
| .glass-button:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| |
| <div class="hero-section"> |
| <h1 style="font-size: 3rem; margin-bottom: 1rem; font-weight: 700; background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;"> |
| ⚡ IQKiller |
| </h1> |
| <p style="font-size: 1.4rem; opacity: 0.95; margin-bottom: 0.5rem;">AI-Powered Interview Guide Generator</p> |
| <p style="font-size: 1.1rem; opacity: 0.8;">Resume + Job → Personalized Interview Strategy</p> |
| <div class="news-ticker"> |
| <div class="news-text">🚀 AI and Machine Learning roles see 45% growth this quarter</div> |
| </div> |
| </div> |
|
|
| |
| <div class="tab-buttons"> |
| <div class="tab-button active" onclick="showTab('guide')">🎯 Interview Guide Generator</div> |
| <div class="tab-button" onclick="showTab('brief')">⚡ Quick Job Brief</div> |
| </div> |
|
|
| |
| <div id="guide" class="tab-content active"> |
| <div class="glass-container"> |
| <h3 style="color: #e2e8f0; margin-top: 0;">Get Your Personalized Interview Strategy</h3> |
| <p style="color: #94a3b8;">Upload your resume and target job to receive advanced gap analysis, tailored questions, and strategic advice powered by AI.</p> |
| </div> |
| |
| <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;"> |
| <div class="form-glass"> |
| <h4 style="color: #e2e8f0; margin-top: 0;">📋 Your Resume</h4> |
| <div class="input-group"> |
| <label class="input-label">📝 Paste your resume text</label> |
| <textarea class="glass-input" rows="8" placeholder="Copy and paste your complete resume here..."></textarea> |
| </div> |
| <div class="input-group"> |
| <label class="input-label">📎 Or upload resume file</label> |
| <input type="file" class="glass-input" accept=".pdf,.txt,.docx"> |
| </div> |
| |
| <h4 style="color: #e2e8f0; margin-top: 2rem;">🎯 Target Job</h4> |
| <div class="input-group"> |
| <label class="input-label">🔗 Job posting URL (optional)</label> |
| <input type="url" class="glass-input" placeholder="https://company.com/jobs/role-id"> |
| </div> |
| <div class="input-group"> |
| <label class="input-label">📝 Or paste job description</label> |
| <textarea class="glass-input" rows="6" placeholder="Copy the complete job posting here..."></textarea> |
| </div> |
| |
| <button class="glass-button" onclick="showProgress()">🚀 Generate Interview Guide</button> |
| </div> |
| |
| <div id="output"> |
| <div class="glass-container"> |
| <h3 style="color: #e2e8f0; margin-top: 0;">✨ Your Results Will Appear Here</h3> |
| <p style="color: #94a3b8;">Click "Generate Interview Guide" to start the AI analysis process.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="brief" class="tab-content"> |
| <div class="glass-container"> |
| <h3 style="color: #e2e8f0; margin-top: 0;">Fast Job Analysis</h3> |
| <p style="color: #94a3b8;">Get instant job insights, salary info, and key requirements in seconds.</p> |
| </div> |
| |
| <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;"> |
| <div class="form-glass"> |
| <div class="input-group"> |
| <label class="input-label">🔗 Job URL (optional)</label> |
| <input type="url" class="glass-input" placeholder="https://company.com/jobs/role-id"> |
| </div> |
| <div class="input-group"> |
| <label class="input-label">📝 Or paste job description text</label> |
| <textarea class="glass-input" rows="8" placeholder="Paste the complete job posting here..."></textarea> |
| </div> |
| |
| <button class="glass-button">⚡ Generate Brief</button> |
| </div> |
| |
| <div> |
| <div class="glass-container"> |
| <h3 style="color: #e2e8f0; margin-top: 0;">📊 Quick Analysis Results</h3> |
| <p style="color: #94a3b8;">Fast job analysis results will appear here.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="progress" style="display: none;"> |
| <div class="progress-container"> |
| <div style="text-align: center; margin-bottom: 1rem;"> |
| <h3 style="color: #e2e8f0; margin: 0;">Processing Your Interview Guide</h3> |
| <p style="color: #94a3b8; margin: 0.5rem 0;">Step 3 of 6</p> |
| </div> |
| <div style="background: rgba(255,255,255,0.1); height: 4px; border-radius: 2px; margin: 1rem 0;"> |
| <div style="background: linear-gradient(90deg, #667eea, #764ba2); height: 100%; width: 50%; border-radius: 2px; transition: width 0.5s ease;"></div> |
| </div> |
| |
| <div class="step-indicator step-completed"> |
| ✅ <span style="color: #e2e8f0;">🔍 Processing Job Description</span> |
| </div> |
| <div class="step-indicator step-completed"> |
| ✅ <span style="color: #e2e8f0;">🎯 Analyzing Requirements</span> |
| </div> |
| <div class="step-indicator step-active"> |
| <span class="pulse-dot"></span> <span style="color: #e2e8f0;">📋 Parsing Resume</span> |
| </div> |
| <div class="step-indicator"> |
| ⏳ <span style="color: #e2e8f0;">⚖️ Gap Analysis</span> |
| </div> |
| <div class="step-indicator"> |
| ⏳ <span style="color: #e2e8f0;">✨ Generating Guide</span> |
| </div> |
| <div class="step-indicator"> |
| ⏳ <span style="color: #e2e8f0;">🎨 Finalizing Results</span> |
| </div> |
| </div> |
| |
| <div class="news-ticker"> |
| <div class="news-text">💼 Remote work opportunities increased 38% across tech companies</div> |
| </div> |
| </div> |
|
|
| |
| <div class="glass-container" style="text-align: center; margin-top: 2rem;"> |
| <p style="color: #94a3b8;"> |
| 🚀 Powered by GPT-4o-mini • 🎯 Advanced Skills Matching • 📊 Real-time Gap Analysis |
| </p> |
| <div class="news-ticker"> |
| <div class="news-text">📈 Data Science positions show highest salary growth at 12% YoY</div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| function showTab(tabName) { |
| |
| document.querySelectorAll('.tab-content').forEach(tab => { |
| tab.classList.remove('active'); |
| }); |
| |
| |
| document.querySelectorAll('.tab-button').forEach(btn => { |
| btn.classList.remove('active'); |
| }); |
| |
| |
| document.getElementById(tabName).classList.add('active'); |
| |
| |
| event.target.classList.add('active'); |
| } |
| |
| function showProgress() { |
| document.getElementById('output').innerHTML = document.getElementById('progress').innerHTML; |
| |
| |
| let step = 3; |
| const interval = setInterval(() => { |
| step++; |
| if (step > 6) { |
| clearInterval(interval); |
| showResults(); |
| return; |
| } |
| updateProgress(step); |
| }, 2000); |
| } |
| |
| function updateProgress(currentStep) { |
| |
| const progressHtml = ` |
| <div class="progress-container"> |
| <div style="text-align: center; margin-bottom: 1rem;"> |
| <h3 style="color: #e2e8f0; margin: 0;">Processing Your Interview Guide</h3> |
| <p style="color: #94a3b8; margin: 0.5rem 0;">Step ${currentStep} of 6</p> |
| </div> |
| <div style="background: rgba(255,255,255,0.1); height: 4px; border-radius: 2px; margin: 1rem 0;"> |
| <div style="background: linear-gradient(90deg, #667eea, #764ba2); height: 100%; width: ${currentStep/6 * 100}%; border-radius: 2px; transition: width 0.5s ease;"></div> |
| </div> |
| ${generateStepIndicators(currentStep)} |
| </div> |
| <div class="news-ticker"> |
| <div class="news-text">${getRandomNews()}</div> |
| </div> |
| `; |
| document.getElementById('output').innerHTML = progressHtml; |
| } |
| |
| function generateStepIndicators(currentStep) { |
| const steps = [ |
| "🔍 Processing Job Description", |
| "🎯 Analyzing Requirements", |
| "📋 Parsing Resume", |
| "⚖️ Gap Analysis", |
| "✨ Generating Guide", |
| "🎨 Finalizing Results" |
| ]; |
| |
| return steps.map((step, i) => { |
| let statusClass = ''; |
| let icon = '⏳'; |
| |
| if (i < currentStep - 1) { |
| statusClass = 'step-completed'; |
| icon = '✅'; |
| } else if (i === currentStep - 1) { |
| statusClass = 'step-active'; |
| icon = '<span class="pulse-dot"></span>'; |
| } |
| |
| return `<div class="step-indicator ${statusClass}"> |
| ${icon} <span style="color: #e2e8f0;">${step}</span> |
| </div>`; |
| }).join(''); |
| } |
| |
| function getRandomNews() { |
| const news = [ |
| "💼 Remote work opportunities increased 38% across tech companies", |
| "📈 Data Science positions show highest salary growth at 12% YoY", |
| "🌟 Startup hiring surge: 67% increase in early-stage opportunities", |
| "🎯 Skills gap widening: Python and cloud expertise in high demand", |
| "💡 AI-first companies hiring 3x faster than traditional firms" |
| ]; |
| return news[Math.floor(Math.random() * news.length)]; |
| } |
| |
| function showResults() { |
| const resultsHtml = ` |
| <div class="gradient-border"> |
| <div class="inner-glass"> |
| <div style="text-align: center; margin-bottom: 2rem;"> |
| <h2 style="color: #e2e8f0; margin: 0;">✅ Interview Guide Complete</h2> |
| <p style="color: #94a3b8;">Match Score: <span style="color: #10b981; font-weight: bold;">89.2%</span></p> |
| </div> |
| <div class="glass-container"> |
| <h3 style="color: #e2e8f0;">🎯 Personalized Interview Guide: Data Scientist at Spotify</h3> |
| <p style="color: #94a3b8;">Your background shows an excellent 89.2% match with this role...</p> |
| <div style="margin: 1rem 0;"> |
| <strong style="color: #10b981;">✅ Your Strengths:</strong> Python, SQL, Machine Learning, Data Analysis |
| </div> |
| <div style="margin: 1rem 0;"> |
| <strong style="color: #3b82f6;">📊 Match Analysis:</strong> 12 strong skill matches identified |
| </div> |
| <div style="margin: 1rem 0;"> |
| <strong style="color: #8b5cf6;">🎯 Interview Strategy:</strong> Focus on your ML project experience and quantitative impact |
| </div> |
| </div> |
| </div> |
| </div> |
| `; |
| document.getElementById('output').innerHTML = resultsHtml; |
| } |
| </script> |
| </body> |
| </html> |
