Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ResumeGenius - AI-Powered Resume & Cover Letter Generator</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"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); | |
| } | |
| .resume-paper { | |
| box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1); | |
| background: white; | |
| min-height: 11in; | |
| } | |
| .template-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .section-highlight { | |
| border-left: 4px solid #4f46e5; | |
| } | |
| .drag-handle { | |
| cursor: move; | |
| } | |
| .ai-suggestion { | |
| background-color: #f0f9ff; | |
| border-left: 3px solid #38bdf8; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #c7d2fe; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #a5b4fc; | |
| } | |
| /* Animation for AI loading */ | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-brain text-indigo-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-gray-900">ResumeGenius</span> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center space-x-4"> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-indigo-600">Templates</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-indigo-600">Pricing</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-indigo-600">Resources</a> | |
| <button id="loginBtn" class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| Sign In | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Auth Modal --> | |
| <div id="authModal" class="fixed z-10 inset-0 overflow-y-auto hidden"> | |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> | |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> | |
| </div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6"> | |
| <div> | |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100"> | |
| <i class="fas fa-user text-indigo-600"></i> | |
| </div> | |
| <div class="mt-3 text-center sm:mt-5"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900">Sign in to ResumeGenius</h3> | |
| <div class="mt-2"> | |
| <p class="text-sm text-gray-500">Access your saved resumes and cover letters</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-5 sm:mt-6 space-y-3"> | |
| <button type="button" class="w-full inline-flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| <i class="fab fa-google text-red-500 mr-2"></i> Continue with Google | |
| </button> | |
| <button type="button" class="w-full inline-flex justify-center items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| <i class="fab fa-linkedin text-blue-600 mr-2"></i> Continue with LinkedIn | |
| </button> | |
| <div class="relative"> | |
| <div class="absolute inset-0 flex items-center"> | |
| <div class="w-full border-t border-gray-300"></div> | |
| </div> | |
| <div class="relative flex justify-center text-sm"> | |
| <span class="px-2 bg-white text-gray-500">Or continue with email</span> | |
| </div> | |
| </div> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700">Email address</label> | |
| <input type="email" id="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"> | |
| </div> | |
| <div> | |
| <label for="password" class="block text-sm font-medium text-gray-700">Password</label> | |
| <input type="password" id="password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"> | |
| <label for="remember-me" class="ml-2 block text-sm text-gray-900">Remember me</label> | |
| </div> | |
| <div class="text-sm"> | |
| <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">Forgot password?</a> | |
| </div> | |
| </div> | |
| <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Sign in</button> | |
| </form> | |
| <p class="text-center text-sm text-gray-600"> | |
| Don't have an account? <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">Sign up</a> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <div class="lg:grid lg:grid-cols-12 lg:gap-8"> | |
| <!-- Left Sidebar --> | |
| <div class="lg:col-span-4 xl:col-span-3"> | |
| <div class="bg-white rounded-lg shadow p-6 sticky top-8"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-lg font-medium text-gray-900">Resume Builder</h2> | |
| <button id="newResumeBtn" class="text-sm text-indigo-600 hover:text-indigo-800">+ New</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- Personal Details --> | |
| <div class="section-highlight bg-gray-50 p-4 rounded-lg"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="text-sm font-medium text-gray-900 flex items-center"> | |
| <i class="fas fa-user mr-2 text-indigo-600"></i> Personal Details | |
| </h3> | |
| <button class="text-gray-400 hover:text-gray-500"> | |
| <i class="fas fa-chevron-down"></i> | |
| </button> | |
| </div> | |
| <div class="mt-3 space-y-3"> | |
| <div> | |
| <label class="block text-xs font-medium text-gray-500">Full Name</label> | |
| <input type="text" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-sm"> | |
| </div> | |
| <div> | |
| <label class="block text-xs font-medium text-gray-500">Email</label> | |
| <input type="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-sm"> | |
| </div> | |
| <div> | |
| <label class="block text-xs font-medium text-gray-500">Phone</label> | |
| <input type="tel" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-sm"> | |
| </div> | |
| <div> | |
| <label class="block text-xs font-medium text-gray-500">LinkedIn</label> | |
| <input type="url" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-sm"> | |
| </div> | |
| <div> | |
| <label class="block text-xs font-medium text-gray-500">Portfolio</label> | |
| <input type="url" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-sm"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Professional Summary --> | |
| <div class="section-highlight bg-gray-50 p-4 rounded-lg"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="text-sm font-medium text-gray-900 flex items-center"> | |
| <i class="fas fa-align-left mr-2 text-indigo-600"></i> Professional Summary | |
| </h3> | |
| <button class="text-gray-400 hover:text-gray-500"> | |
| <i class="fas fa-chevron-down"></i> | |
| </button> | |
| </div> | |
| <div class="mt-3"> | |
| <textarea rows="4" class="block w-full border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-sm" placeholder="Write a brief summary of your professional background..."></textarea> | |
| <button class="mt-2 text-xs text-indigo-600 hover:text-indigo-800 flex items-center"> | |
| <i class="fas fa-magic mr-1"></i> Generate with AI | |
| </button> | |
| <div class="ai-suggestion mt-2 p-2 rounded text-xs hidden"> | |
| <p>Results-driven software engineer with 5+ years of experience in full-stack development. Specialized in JavaScript frameworks with a proven track record of delivering scalable web applications. Passionate about clean code and agile methodologies.</p> | |
| <div class="flex justify-end mt-1"> | |
| <button class="text-xs text-indigo-600 hover:text-indigo-800 mr-2">Use This</button> | |
| <button class="text-xs text-gray-500 hover:text-gray-700">Regenerate</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Work Experience --> | |
| <div class="section-highlight bg-gray-50 p-4 rounded-lg"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="text-sm font-medium text-gray-900 flex items-center"> | |
| <i class="fas fa-briefcase mr-2 text-indigo-600"></i> Work Experience | |
| </h3> | |
| <div> | |
| <button class="text-gray-400 hover:text-gray-500 mr-2"> | |
| <i class="fas fa-chevron-down"></i> | |
| </button> | |
| <button class="text-indigo-600 hover:text-indigo-800 text-sm"> | |
| + Add | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-3 space-y-4"> | |
| <div class="border border-gray-200 rounded p-3"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <input type="text" class="font-medium text-sm border-b border-gray-200 focus:border-indigo-500 focus:outline-none w-full" placeholder="Job Title" value="Senior Software Engineer"> | |
| <input type="text" class="text-xs text-gray-500 border-b border-gray-200 focus:border-indigo-500 focus:outline-none w-full mt-1" placeholder="Company" value="TechCorp Inc."> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="flex mt-2"> | |
| <input type="text" class="text-xs text-gray-500 border-b border-gray-200 focus:border-indigo-500 focus:outline-none w-1/2 mr-2" placeholder="Start Date" value="Jan 2020"> | |
| <input type="text" class="text-xs text-gray-500 border-b border-gray-200 focus:border-indigo-500 focus:outline-none w-1/2" placeholder="End Date" value="Present"> | |
| </div> | |
| <div class="mt-2"> | |
| <div class="flex items-start"> | |
| <span class="text-xs mt-1 mr-2">•</span> | |
| <textarea rows="1" class="flex-1 text-xs border-b border-gray-200 focus:border-indigo-500 focus:outline-none" placeholder="Achievement or responsibility">Led a team of 5 developers to deliver a customer portal that increased user engagement by 40%</textarea> | |
| </div> | |
| <div class="flex items-start mt-1"> | |
| <span class="text-xs mt-1 mr-2">•</span> | |
| <textarea rows="1" class="flex-1 text-xs border-b border-gray-200 focus:border-indigo-500 focus:outline-none" placeholder="Achievement or responsibility">Optimized application performance, reducing load times by 60% through code refactoring</textarea> | |
| </div> | |
| <button class="mt-1 text-xs text-indigo-600 hover:text-indigo-800 flex items-center"> | |
| <i class="fas fa-plus mr-1"></i> Add Bullet Point | |
| </button> | |
| <button class="mt-1 text-xs text-indigo-600 hover:text-indigo-800 flex items-center"> | |
| <i class="fas fa-magic mr-1"></i> Enhance with AI | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Education --> | |
| <div class="section-highlight bg-gray-50 p-4 rounded-lg"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="text-sm font-medium text-gray-900 flex items-center"> | |
| <i class="fas fa-graduation-cap mr-2 text-indigo-600"></i> Education | |
| </h3> | |
| <div> | |
| <button class="text-gray-400 hover:text-gray-500 mr-2"> | |
| <i class="fas fa-chevron-down"></i> | |
| </button> | |
| <button class="text-indigo-600 hover:text-indigo-800 text-sm"> | |
| + Add | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-3 space-y-3"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <input type="text" class="font-medium text-sm border-b border-gray-200 focus:border-indigo-500 focus:outline-none w-full" placeholder="Degree" value="Master of Computer Science"> | |
| <input type="text" class="text-xs text-gray-500 border-b border-gray-200 focus:border-indigo-500 focus:outline-none w-full mt-1" placeholder="Institution" value="Stanford University"> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="flex"> | |
| <input type="text" class="text-xs text-gray-500 border-b border-gray-200 focus:border-indigo-500 focus:outline-none w-full" placeholder="Year" value="2018"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Skills --> | |
| <div class="section-highlight bg-gray-50 p-4 rounded-lg"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="text-sm font-medium text-gray-900 flex items-center"> | |
| <i class="fas fa-tools mr-2 text-indigo-600"></i> Skills | |
| </h3> | |
| <div> | |
| <button class="text-gray-400 hover:text-gray-500 mr-2"> | |
| <i class="fas fa-chevron-down"></i> | |
| </button> | |
| <button class="text-indigo-600 hover:text-indigo-800 text-sm"> | |
| + Add | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-3"> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800"> | |
| JavaScript | |
| <button class="ml-1 text-indigo-600 hover:text-indigo-900"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800"> | |
| React | |
| <button class="ml-1 text-indigo-600 hover:text-indigo-900"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800"> | |
| Node.js | |
| <button class="ml-1 text-indigo-600 hover:text-indigo-900"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </span> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800"> | |
| AWS | |
| <button class="ml-1 text-indigo-600 hover:text-indigo-900"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </span> | |
| </div> | |
| <div class="mt-2 relative"> | |
| <input type="text" class="block w-full border border-gray-300 rounded-md shadow-sm py-1 px-2 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 text-sm" placeholder="Add skill"> | |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3"> | |
| <button class="text-indigo-600 hover:text-indigo-800"> | |
| <i class="fas fa-magic"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="ai-suggestion mt-2 p-2 rounded text-xs hidden"> | |
| <p class="font-medium">Suggested skills for Software Engineer:</p> | |
| <div class="flex flex-wrap gap-1 mt-1"> | |
| <span class="cursor-pointer inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">TypeScript</span> | |
| <span class="cursor-pointer inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">GraphQL</span> | |
| <span class="cursor-pointer inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">Docker</span> | |
| <span class="cursor-pointer inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">CI/CD</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- More Sections (Collapsed by default) --> | |
| <div class="border-t border-gray-200 pt-4"> | |
| <button class="w-full flex justify-between items-center text-sm font-medium text-gray-700"> | |
| <span>More Sections</span> | |
| <i class="fas fa-chevron-down"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Cover Letter Generator --> | |
| <div class="bg-white rounded-lg shadow p-6 mt-6"> | |
| <h2 class="text-lg font-medium text-gray-900 mb-4">Cover Letter Generator</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Job Title</label> | |
| <input type="text" class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="e.g. Senior Software Engineer"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Company Name</label> | |
| <input type="text" class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="e.g. Google"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Job Description</label> | |
| <textarea rows="4" class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Paste the job description here..."></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Tone</label> | |
| <select class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"> | |
| <option>Formal</option> | |
| <option>Persuasive</option> | |
| <option>Casual</option> | |
| <option>Technical</option> | |
| </select> | |
| </div> | |
| <button class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| Generate Cover Letter | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content Area --> | |
| <div class="lg:col-span-8 xl:col-span-6 mt-8 lg:mt-0"> | |
| <!-- Template Selection --> | |
| <div class="bg-white rounded-lg shadow p-6 mb-6"> | |
| <h2 class="text-lg font-medium text-gray-900 mb-4">Select a Template</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-4"> | |
| <div class="template-card cursor-pointer border-2 border-indigo-500 rounded-lg overflow-hidden transition-all duration-200"> | |
| <div class="h-32 bg-gradient-to-r from-indigo-100 to-purple-100 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-file-alt text-indigo-500 text-3xl"></i> | |
| <p class="text-xs font-medium mt-1">Minimalist</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="template-card cursor-pointer border border-gray-200 rounded-lg overflow-hidden hover:border-indigo-300 transition-all duration-200"> | |
| <div class="h-32 bg-gradient-to-r from-blue-50 to-cyan-50 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-briefcase text-blue-500 text-3xl"></i> | |
| <p class="text-xs font-medium mt-1">Corporate</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="template-card cursor-pointer border border-gray-200 rounded-lg overflow-hidden hover:border-indigo-300 transition-all duration-200"> | |
| <div class="h-32 bg-gradient-to-r from-purple-50 to-pink-50 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-palette text-purple-500 text-3xl"></i> | |
| <p class="text-xs font-medium mt-1">Creative</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="template-card cursor-pointer border border-gray-200 rounded-lg overflow-hidden hover:border-indigo-300 transition-all duration-200"> | |
| <div class="h-32 bg-gradient-to-r from-gray-50 to-gray-100 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-desktop text-gray-500 text-3xl"></i> | |
| <p class="text-xs font-medium mt-1">Modern</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="template-card cursor-pointer border border-gray-200 rounded-lg overflow-hidden hover:border-indigo-300 transition-all duration-200"> | |
| <div class="h-32 bg-gradient-to-r from-green-50 to-teal-50 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-leaf text-green-500 text-3xl"></i> | |
| <p class="text-xs font-medium mt-1">Clean</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="template-card cursor-pointer border border-gray-200 rounded-lg overflow-hidden hover:border-indigo-300 transition-all duration-200"> | |
| <div class="h-32 bg-gradient-to-r from-yellow-50 to-orange-50 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-fire text-yellow-500 text-3xl"></i> | |
| <p class="text-xs font-medium mt-1">Bold</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Customization Options --> | |
| <div class="bg-white rounded-lg shadow p-6 mb-6"> | |
| <h2 class="text-lg font-medium text-gray-900 mb-4">Customize Design</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Font Family</label> | |
| <select class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"> | |
| <option>Inter</option> | |
| <option>Roboto</option> | |
| <option>Open Sans</option> | |
| <option>Lato</option> | |
| <option>Montserrat</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Primary Color</label> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-600 mr-2"></div> | |
| <select class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"> | |
| <option>Indigo</option> | |
| <option>Blue</option> | |
| <option>Purple</option> | |
| <option>Teal</option> | |
| <option>Red</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Font Size</label> | |
| <select class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"> | |
| <option>Small</option> | |
| <option selected>Medium</option> | |
| <option>Large</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Spacing</label> | |
| <select class="block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"> | |
| <option>Compact</option> | |
| <option selected>Normal</option> | |
| <option>Wide</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Resume Preview --> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h2 class="text-lg font-medium text-gray-900">Live Preview</h2> | |
| <div class="flex space-x-2"> | |
| <button class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| <i class="fas fa-redo mr-1"></i> Reset | |
| </button> | |
| <button class="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | |
| <i class="fas fa-download mr-1"></i> Export | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="resume-paper p-8 mx-auto" style="width: 8.5in;"> | |
| <!-- Minimalist Template --> | |
| <div class="mb-8"> | |
| <h1 class="text-3xl font-bold text-indigo-700 mb-1">Alex Johnson</h1> | |
| <div class="flex flex-wrap text-sm text-gray-600 space-x-4"> | |
| <span><i class="fas fa-envelope mr-1"></i> alex.johnson@example.com</span> | |
| <span><i class="fas fa-phone mr-1"></i> (123) 456-7890</span> | |
| <span><i class="fab fa-linkedin mr-1"></i> linkedin.com/in/alexjohnson</span> | |
| <span><i class="fas fa-globe mr-1"></i> alexjohnson.dev</span> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h2 class="text-xl font-semibold text-indigo-700 border-b border-indigo- | |
| </html> |