|
|
<!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> |
