Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Resume Salary Analyzer - MCP Client</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.12.313/pdf.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#4F46E5', | |
| secondary: '#10B981', | |
| dark: '#1F2937', | |
| light: '#F3F4F6', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .resume-preview { | |
| height: 500px; | |
| overflow-y: auto; | |
| border: 1px solid #E5E7EB; | |
| border-radius: 0.5rem; | |
| padding: 1rem; | |
| background-color: white; | |
| } | |
| .loading-spinner { | |
| border: 4px solid rgba(0, 0, 0, 0.1); | |
| border-radius: 50%; | |
| border-top: 4px solid #4F46E5; | |
| width: 30px; | |
| height: 30px; | |
| animation: spin 1s linear infinite; | |
| margin: 0 auto; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .tooltip { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .tooltip .tooltiptext { | |
| visibility: hidden; | |
| width: 200px; | |
| background-color: #1F2937; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 6px; | |
| padding: 5px; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; | |
| left: 50%; | |
| margin-left: -100px; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .tooltip:hover .tooltiptext { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="bg-white shadow rounded-lg p-6 mb-8"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-gray-800">Resume Salary Analyzer</h1> | |
| <p class="text-gray-600">MCP Client powered by Groq LLM and Agno Agents</p> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="bg-primary text-white px-4 py-2 rounded-lg flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd" /> | |
| </svg> | |
| <span>MCP Server Connected</span> | |
| </div> | |
| <button id="settings-btn" class="p-2 rounded-full hover:bg-gray-200"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Upload Section --> | |
| <div class="bg-white shadow rounded-lg p-6 lg:col-span-1"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">Upload Resume</h2> | |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" /> | |
| </svg> | |
| <p class="text-gray-500 mt-2">Drag and drop your resume here</p> | |
| <p class="text-gray-400 text-sm mt-1">or</p> | |
| <input type="file" id="resume-upload" class="hidden" accept=".pdf,.doc,.docx"> | |
| <label for="resume-upload" class="mt-2 inline-block bg-primary text-white px-4 py-2 rounded-lg cursor-pointer hover:bg-indigo-600 transition"> | |
| Browse Files | |
| </label> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="font-medium text-gray-700 mb-2">Additional Information</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label for="current-role" class="block text-sm font-medium text-gray-700 mb-1">Current Role (if not in resume)</label> | |
| <input type="text" id="current-role" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="years-exp" class="block text-sm font-medium text-gray-700 mb-1">Years of Experience (if not in resume)</label> | |
| <input type="number" id="years-exp" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="location" class="block text-sm font-medium text-gray-700 mb-1">Location (for market data)</label> | |
| <input type="text" id="location" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="analyze-btn" class="mt-6 w-full bg-secondary text-white px-4 py-3 rounded-lg font-medium hover:bg-emerald-600 transition flex items-center justify-center"> | |
| <span>Analyze Resume</span> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" /> | |
| </svg> | |
| </button> | |
| <div id="loading-indicator" class="hidden mt-4"> | |
| <div class="loading-spinner"></div> | |
| <p class="text-center text-gray-600 mt-2">Analyzing resume with MCP server...</p> | |
| </div> | |
| </div> | |
| <!-- Resume Preview --> | |
| <div class="bg-white shadow rounded-lg p-6 lg:col-span-1"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold text-gray-800">Resume Preview</h2> | |
| <button id="clear-resume" class="text-sm text-red-500 hover:text-red-700">Clear</button> | |
| </div> | |
| <div id="resume-preview" class="resume-preview"> | |
| <div class="flex flex-col items-center justify-center h-full text-gray-400"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /> | |
| </svg> | |
| <p class="mt-2">No resume uploaded</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Results Section --> | |
| <div class="bg-white shadow rounded-lg p-6 lg:col-span-1"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">Salary Analysis Results</h2> | |
| <div id="results-placeholder" class="text-center py-12"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /> | |
| </svg> | |
| <p class="text-gray-500 mt-2">Upload a resume to see salary analysis</p> | |
| </div> | |
| <div id="results-container" class="hidden"> | |
| <!-- Salary Summary --> | |
| <div class="mb-6"> | |
| <h3 class="font-medium text-gray-700 mb-3">Salary Summary</h3> | |
| <div class="grid grid-cols-3 gap-4"> | |
| <div class="bg-blue-50 p-4 rounded-lg"> | |
| <p class="text-sm text-blue-600">Current Employer</p> | |
| <p class="text-xl font-bold text-blue-800">$85,000</p> | |
| <p class="text-xs text-blue-500">Estimated</p> | |
| </div> | |
| <div class="bg-green-50 p-4 rounded-lg"> | |
| <p class="text-sm text-green-600">Market Value</p> | |
| <p class="text-xl font-bold text-green-800">$92,000</p> | |
| <p class="text-xs text-green-500">Range: $85k-$105k</p> | |
| </div> | |
| <div class="bg-purple-50 p-4 rounded-lg"> | |
| <p class="text-sm text-purple-600">Experience Premium</p> | |
| <p class="text-xl font-bold text-purple-800">+12%</p> | |
| <p class="text-xs text-purple-500">vs. market avg</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Charts will be inserted here --> | |
| <div class="mb-6"> | |
| <h3 class="font-medium text-gray-700 mb-3">Salary Comparison</h3> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <canvas id="salaryChart" height="250"></canvas> | |
| </div> | |
| </div> | |
| <!-- Detailed Breakdown --> | |
| <div class="mb-6"> | |
| <h3 class="font-medium text-gray-700 mb-3">Detailed Breakdown</h3> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Metric</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Value</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Comparison</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200" id="detailed-results"> | |
| <!-- Will be populated by JavaScript --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Recommendations --> | |
| <div> | |
| <h3 class="font-medium text-gray-700 mb-3">Recommendations</h3> | |
| <div class="space-y-3" id="recommendations"> | |
| <!-- Will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Agent Status Footer --> | |
| <footer class="mt-8 bg-white shadow rounded-lg p-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="h-3 w-3 rounded-full bg-green-500"></div> | |
| <span class="text-sm text-gray-600">MCP Server: Connected</span> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center space-x-1"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /> | |
| </svg> | |
| <span class="text-sm text-gray-600">Agno Agent: Active</span> | |
| </div> | |
| <div class="flex items-center space-x-1"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" /> | |
| </svg> | |
| <span class="text-sm text-gray-600">DuckDuckGo: Ready</span> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Initialize PDF.js worker | |
| pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.12.313/pdf.worker.min.js'; | |
| // DOM Elements | |
| const resumeUpload = document.getElementById('resume-upload'); | |
| const resumePreview = document.getElementById('resume-preview'); | |
| const analyzeBtn = document.getElementById('analyze-btn'); | |
| const loadingIndicator = document.getElementById('loading-indicator'); | |
| const clearResumeBtn = document.getElementById('clear-resume'); | |
| const resultsPlaceholder = document.getElementById('results-placeholder'); | |
| const resultsContainer = document.getElementById('results-container'); | |
| // Event Listeners | |
| resumeUpload.addEventListener('change', handleResumeUpload); | |
| analyzeBtn.addEventListener('click', analyzeResume); | |
| clearResumeBtn.addEventListener('click', clearResume); | |
| // Functions | |
| function handleResumeUpload(event) { | |
| const file = event.target.files[0]; | |
| if (!file) return; | |
| if (file.type === 'application/pdf') { | |
| displayPdfPreview(file); | |
| } else if (file.type === 'application/msword' || | |
| file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') { | |
| displayTextPreview(file); | |
| } else { | |
| alert('Please upload a PDF or Word document'); | |
| } | |
| } | |
| function displayPdfPreview(file) { | |
| const fileReader = new FileReader(); | |
| fileReader.onload = function() { | |
| const typedArray = new Uint8Array(this.result); | |
| pdfjsLib.getDocument(typedArray).promise.then(function(pdf) { | |
| // Get the first page | |
| pdf.getPage(1).then(function(page) { | |
| const viewport = page.getViewport({ scale: 1.0 }); | |
| const canvas = document.createElement('canvas'); | |
| const context = canvas.getContext('2d'); | |
| canvas.height = viewport.height; | |
| canvas.width = viewport.width; | |
| // Render PDF page into canvas context | |
| page.render({ | |
| canvasContext: context, | |
| viewport: viewport | |
| }).promise.then(function() { | |
| resumePreview.innerHTML = ''; | |
| resumePreview.appendChild(canvas); | |
| }); | |
| }); | |
| }); | |
| }; | |
| fileReader.readAsArrayBuffer(file); | |
| } | |
| function displayTextPreview(file) { | |
| const fileReader = new FileReader(); | |
| fileReader.onload = function(e) { | |
| // This is a simplified version - in a real app you'd need a proper DOCX parser | |
| const content = e.target.result; | |
| resumePreview.innerHTML = ` | |
| <div class="p-4"> | |
| <h3 class="font-bold mb-2">Document Preview (Text Only)</h3> | |
| <p class="text-sm text-gray-600">Full document parsing requires server processing.</p> | |
| <div class="mt-4 p-2 bg-gray-50 rounded"> | |
| <pre class="text-xs text-gray-800 overflow-x-auto">${content.substring(0, 1000)}...</pre> | |
| </div> | |
| </div> | |
| `; | |
| }; | |
| fileReader.readAsText(file); | |
| } | |
| function analyzeResume() { | |
| if (!resumeUpload.files[0]) { | |
| alert('Please upload a resume first'); | |
| return; | |
| } | |
| // Show loading indicator | |
| loadingIndicator.classList.remove('hidden'); | |
| analyzeBtn.disabled = true; | |
| // Simulate MCP server processing | |
| setTimeout(() => { | |
| loadingIndicator.classList.add('hidden'); | |
| analyzeBtn.disabled = false; | |
| showResults(); | |
| }, 3000); | |
| } | |
| function showResults() { | |
| resultsPlaceholder.classList.add('hidden'); | |
| resultsContainer.classList.remove('hidden'); | |
| // Generate sample data | |
| const sampleData = { | |
| currentSalary: 85000, | |
| marketRange: { min: 85000, max: 105000, avg: 92000 }, | |
| experiencePremium: 12, | |
| details: [ | |
| { metric: "Base Salary", value: "$85,000", comparison: "5% below market" }, | |
| { metric: "Bonus Potential", value: "$5,000", comparison: "Market average" }, | |
| { metric: "Total Compensation", value: "$90,000", comparison: "2% below market" }, | |
| { metric: "Years of Experience", value: "7 years", comparison: "+2 years vs role avg" }, | |
| { metric: "Education Level", value: "Master's Degree", comparison: "+10% premium" }, | |
| { metric: "Certifications", value: "2 relevant", comparison: "+5% premium" } | |
| ], | |
| recommendations: [ | |
| "Your current salary is slightly below market average for your experience level.", | |
| "Consider negotiating for a 8-12% raise based on market data.", | |
| "Obtaining additional certifications could increase your market value by 5-7%.", | |
| "Roles in [Nearby City] show 15% higher compensation for similar profiles." | |
| ] | |
| }; | |
| // Populate detailed results table | |
| const detailsTable = document.getElementById('detailed-results'); | |
| detailsTable.innerHTML = ''; | |
| sampleData.details.forEach(item => { | |
| const row = document.createElement('tr'); | |
| row.innerHTML = ` | |
| <td class="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-900">${item.metric}</td> | |
| <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">${item.value}</td> | |
| <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">${item.comparison}</td> | |
| `; | |
| detailsTable.appendChild(row); | |
| }); | |
| // Populate recommendations | |
| const recommendationsContainer = document.getElementById('recommendations'); | |
| recommendationsContainer.innerHTML = ''; | |
| sampleData.recommendations.forEach(rec => { | |
| const recElement = document.createElement('div'); | |
| recElement.className = 'flex items-start'; | |
| recElement.innerHTML = ` | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-secondary mt-0.5 mr-2 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" /> | |
| </svg> | |
| <span class="text-sm text-gray-700">${rec}</span> | |
| `; | |
| recommendationsContainer.appendChild(recElement); | |
| }); | |
| // Create salary comparison chart | |
| createSalaryChart(sampleData); | |
| } | |
| function createSalaryChart(data) { | |
| const ctx = document.getElementById('salaryChart').getContext('2d'); | |
| // Destroy previous chart if exists | |
| if (window.salaryChart) { | |
| window.salaryChart.destroy(); | |
| } | |
| window.salaryChart = new Chart(ctx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Current Salary', 'Market Average', 'Market Range'], | |
| datasets: [ | |
| { | |
| label: 'Salary ($)', | |
| data: [data.currentSalary, data.marketRange.avg, null], | |
| backgroundColor: [ | |
| 'rgba(79, 70, 229, 0.7)', | |
| 'rgba(16, 185, 129, 0.7)', | |
| 'rgba(156, 163, 175, 0.1)' | |
| ], | |
| borderColor: [ | |
| 'rgba(79, 70, 229, 1)', | |
| 'rgba(16, 185, 129, 1)', | |
| 'rgba(156, 163, 175, 0.3)' | |
| ], | |
| borderWidth: 1 | |
| }, | |
| { | |
| label: 'Market Range', | |
| data: [null, null, data.marketRange.max - data.marketRange.min], | |
| backgroundColor: 'rgba(16, 185, 129, 0.2)', | |
| borderColor: 'rgba(16, 185, 129, 0.5)', | |
| borderWidth: 1, | |
| borderSkipped: false, | |
| borderRadius: 4, | |
| borderDash: [5, 5], | |
| type: 'bar', | |
| barPercentage: 0.3 | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| position: 'top', | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| let label = context.dataset.label || ''; | |
| if (label) { | |
| label += ': '; | |
| } | |
| if (context.parsed.y !== null) { | |
| if (context.dataIndex === 2) { | |
| label += `$${data.marketRange.min} - $${data.marketRange.max}`; | |
| } else { | |
| label += '$' + context.parsed.y.toLocaleString(); | |
| } | |
| } | |
| return label; | |
| } | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| ticks: { | |
| callback: function(value) { | |
| return '$' + value.toLocaleString(); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| } | |
| function clearResume() { | |
| resumeUpload.value = ''; | |
| resumePreview.innerHTML = ` | |
| <div class="flex flex-col items-center justify-center h-full text-gray-400"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /> | |
| </svg> | |
| <p class="mt-2">No resume uploaded</p> | |
| </div> | |
| `; | |
| resultsContainer.classList.add('hidden'); | |
| resultsPlaceholder.classList.remove('hidden'); | |
| } | |
| // Initialize with sample data for demo | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // This would be replaced with actual MCP server connection in production | |
| console.log("MCP Client initialized. Ready to connect to server."); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=rajkumar218/salary-analyser" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |