Spaces:

Akarrahe
/

IQKiller

Runtime error

File size: 19,355 Bytes

16a9080

<!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">
        <!-- Hero Section -->
        <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>

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

        <!-- Interview Guide Tab -->
        <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>

        <!-- Quick Brief Tab -->
        <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>

        <!-- Progress Display (Hidden by default) -->
        <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>

        <!-- Footer -->
        <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) {
            // Hide all tab contents
            document.querySelectorAll('.tab-content').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // Remove active class from all buttons
            document.querySelectorAll('.tab-button').forEach(btn => {
                btn.classList.remove('active');
            });
            
            // Show selected tab
            document.getElementById(tabName).classList.add('active');
            
            // Activate selected button
            event.target.classList.add('active');
        }
        
        function showProgress() {
            document.getElementById('output').innerHTML = document.getElementById('progress').innerHTML;
            
            // Simulate progress updates
            let step = 3;
            const interval = setInterval(() => {
                step++;
                if (step > 6) {
                    clearInterval(interval);
                    showResults();
                    return;
                }
                updateProgress(step);
            }, 2000);
        }
        
        function updateProgress(currentStep) {
            // Update progress bar and step indicators
            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>