Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Harvard CV Generator AI</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script> | |
| <style> | |
| .dropzone { | |
| border: 2px dashed #3b82f6; | |
| transition: all 0.3s ease; | |
| } | |
| .dropzone.active { | |
| border-color: #10b981; | |
| background-color: #f0fdf4; | |
| } | |
| .dropzone.reject { | |
| border-color: #ef4444; | |
| background-color: #fef2f2; | |
| } | |
| .cv-preview { | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| min-height: 800px; | |
| } | |
| .harvard-style { | |
| font-family: 'Times New Roman', Times, serif; | |
| line-height: 1.5; | |
| } | |
| .section-divider { | |
| border-bottom: 1px solid #000; | |
| margin: 1rem 0; | |
| } | |
| .progress-bar { | |
| transition: width 0.5s ease; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @media print { | |
| .no-print { | |
| display: none ; | |
| } | |
| .cv-preview { | |
| box-shadow: none; | |
| border: none; | |
| } | |
| } | |
| .highlight-added { | |
| background-color: #d1fae5; | |
| padding: 0.1rem 0.2rem; | |
| border-radius: 0.2rem; | |
| } | |
| .highlight-removed { | |
| background-color: #fee2e2; | |
| padding: 0.1rem 0.2rem; | |
| border-radius: 0.2rem; | |
| text-decoration: line-through; | |
| } | |
| .highlight-changed { | |
| background-color: #bfdbfe; | |
| padding: 0.1rem 0.2rem; | |
| border-radius: 0.2rem; | |
| } | |
| .diff-view { | |
| font-family: monospace; | |
| white-space: pre-wrap; | |
| background-color: #f8fafc; | |
| padding: 1rem; | |
| border-radius: 0.5rem; | |
| border: 1px solid #e2e8f0; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <div class="flex flex-col md:flex-row items-center justify-between"> | |
| <div class="mb-4 md:mb-0"> | |
| <h1 class="text-3xl font-bold text-blue-800"> | |
| <i class="fas fa-graduation-cap mr-2"></i> Harvard CV Generator AI | |
| </h1> | |
| <p class="text-gray-600 mt-2">Transform your resume into a professional Harvard-style CV tailored for your dream job</p> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="bg-blue-100 p-3 rounded-full"> | |
| <i class="fas fa-robot text-blue-600 text-2xl"></i> | |
| </div> | |
| <div class="bg-green-100 p-3 rounded-full"> | |
| <i class="fas fa-file-pdf text-green-600 text-2xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main> | |
| <!-- Upload Section --> | |
| <section id="upload-section" class="bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">1. Upload Your Resume</h2> | |
| <div id="dropzone" class="dropzone rounded-lg p-8 text-center cursor-pointer mb-6"> | |
| <div class="flex flex-col items-center justify-center"> | |
| <i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-3"></i> | |
| <p class="text-lg font-medium text-gray-700">Drag & drop your PDF resume here</p> | |
| <p class="text-gray-500 mt-1">or click to browse files</p> | |
| <input type="file" id="file-upload" class="hidden" accept=".pdf,.doc,.docx,.txt"> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="job-title" class="block text-sm font-medium text-gray-700 mb-1"> | |
| Target Job Title | |
| </label> | |
| <input type="text" id="job-title" placeholder="e.g. Senior Data Scientist" | |
| class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="company-name" class="block text-sm font-medium text-gray-700 mb-1"> | |
| Target Company (optional) | |
| </label> | |
| <input type="text" id="company-name" placeholder="e.g. Google" | |
| class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <label for="job-description" class="block text-sm font-medium text-gray-700 mb-1"> | |
| Job Description (paste or upload) | |
| </label> | |
| <textarea id="job-description" rows="4" | |
| class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" | |
| placeholder="Paste the job description here..."></textarea> | |
| <div class="mt-2 flex justify-between items-center"> | |
| <button id="upload-jd-btn" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> | |
| <i class="fas fa-file-upload mr-2"></i> Upload JD File | |
| </button> | |
| <span class="text-sm text-gray-500">Supports .pdf, .docx, .txt</span> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button id="analyze-btn" disabled class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <i class="fas fa-magic mr-2"></i> Analyze & Adapt CV | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Processing Section --> | |
| <section id="processing-section" class="hidden bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">Processing Your CV</h2> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm text-gray-600 mb-1"> | |
| <span id="progress-text">0% completed</span> | |
| <span id="step-text">Extracting text...</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div id="progress-bar" class="progress-bar bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <div id="status-message" class="flex items-center p-4 mb-4 text-sm text-blue-700 bg-blue-100 rounded-lg"> | |
| <i class="fas fa-info-circle mr-2"></i> | |
| <span id="status-text">Starting CV analysis...</span> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-4 mt-6"> | |
| <div class="bg-blue-50 p-4 rounded-lg border border-blue-200"> | |
| <div class="flex items-center"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-3"> | |
| <i class="fas fa-file-alt text-blue-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Document Type</p> | |
| <p id="doc-type" class="text-lg font-bold text-gray-800">PDF</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-green-50 p-4 rounded-lg border border-green-200"> | |
| <div class="flex items-center"> | |
| <div class="bg-green-100 p-3 rounded-full mr-3"> | |
| <i class="fas fa-font text-green-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Text Extracted</p> | |
| <p id="text-length" class="text-lg font-bold text-gray-800">0 words</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-purple-50 p-4 rounded-lg border border-purple-200"> | |
| <div class="flex items-center"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-3"> | |
| <i class="fas fa-brain text-purple-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">AI Analysis</p> | |
| <p id="ai-status" class="text-lg font-bold text-gray-800">Pending</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="cancel-btn" class="mt-6 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"> | |
| <i class="fas fa-stop-circle mr-2"></i> Cancel Processing | |
| </button> | |
| </section> | |
| <!-- Results Section --> | |
| <section id="results-section" class="hidden bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6"> | |
| <div> | |
| <h2 class="text-xl font-semibold text-gray-800">Your Harvard-Style CV</h2> | |
| <p class="text-gray-600">Tailored for <span id="target-job-display" class="font-medium">Senior Data Scientist</span> position</p> | |
| </div> | |
| <div class="mt-4 md:mt-0 flex space-x-2"> | |
| <button id="edit-btn" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"> | |
| <i class="fas fa-edit mr-2"></i> Edit | |
| </button> | |
| <button id="export-btn" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700"> | |
| <i class="fas fa-download mr-2"></i> Export | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex space-x-4 mb-4"> | |
| <button id="original-tab" class="px-4 py-2 text-sm font-medium text-blue-600 border-b-2 border-blue-600"> | |
| Original CV | |
| </button> | |
| <button id="harvard-tab" class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent"> | |
| Harvard CV | |
| </button> | |
| <button id="comparison-tab" class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent"> | |
| Comparison | |
| </button> | |
| <button id="diff-tab" class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent"> | |
| Changes | |
| </button> | |
| </div> | |
| <div id="original-cv" class="cv-preview bg-white p-6 rounded-lg border border-gray-200"> | |
| <div class="flex justify-center items-center h-full"> | |
| <div class="text-center"> | |
| <i class="fas fa-file-pdf text-4xl text-gray-400 mb-3"></i> | |
| <p class="text-gray-500">Original CV will appear here</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="harvard-cv" class="cv-preview bg-white p-6 rounded-lg border border-gray-200 harvard-style hidden"> | |
| <div class="flex justify-center items-center h-full"> | |
| <div class="text-center"> | |
| <i class="fas fa-university text-4xl text-gray-400 mb-3"></i> | |
| <p class="text-gray-500">Harvard-style CV will appear here</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="comparison-view" class="hidden"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div class="cv-preview bg-white p-6 rounded-lg border border-gray-200"> | |
| <h3 class="text-lg font-semibold mb-4 text-center">Original CV</h3> | |
| <!-- Original CV content will go here --> | |
| </div> | |
| <div class="cv-preview bg-white p-6 rounded-lg border border-gray-200 harvard-style"> | |
| <h3 class="text-lg font-semibold mb-4 text-center">Harvard CV</h3> | |
| <!-- Harvard CV content will go here --> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="diff-view" class="cv-preview bg-white p-6 rounded-lg border border-gray-200 hidden"> | |
| <div class="flex justify-center items-center h-full"> | |
| <div class="text-center"> | |
| <i class="fas fa-code-compare text-4xl text-gray-400 mb-3"></i> | |
| <p class="text-gray-500">Changes between versions will appear here</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-3">AI Adaptation Insights</h3> | |
| <div id="ai-insights" class="space-y-3"> | |
| <!-- AI insights will be added here dynamically --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Export Modal --> | |
| <div id="export-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center p-4 z-50"> | |
| <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Export Options</h3> | |
| <button id="close-export-modal" class="text-gray-400 hover:text-gray-500"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <button id="export-pdf" class="w-full flex items-center justify-between px-4 py-3 border border-gray-300 rounded-md hover:bg-gray-50"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-file-pdf text-red-500 text-xl mr-3"></i> | |
| <span>PDF Document</span> | |
| </div> | |
| <i class="fas fa-chevron-right text-gray-400"></i> | |
| </button> | |
| <button id="export-docx" class="w-full flex items-center justify-between px-4 py-3 border border-gray-300 rounded-md hover:bg-gray-50"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-file-word text-blue-500 text-xl mr-3 | |
| </html> |