Download index.html from LucianoM39/https-huggingface-co-lucianom39: direct link, hf CLI and curl.
- Browser
- Download file 54 kB
-
https://huggingface.co/spaces/LucianoM39/https-huggingface-co-lucianom39/resolve/main/index.html
- Command line
-
hf download hf://spaces/LucianoM39/https-huggingface-co-lucianom39/index.html
-
curl -L -o index.html https://huggingface.co/spaces/LucianoM39/https-huggingface-co-lucianom39/resolve/main/index.html
54 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>UWPRK Freelance Manager Pro</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .project-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar.collapsed { | |
| width: 80px; | |
| } | |
| .sidebar.collapsed .sidebar-text { | |
| display: none; | |
| } | |
| .chart-container { | |
| position: relative; | |
| height: 300px; | |
| width: 100%; | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| .connection-status { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin-right: 6px; | |
| } | |
| .connected { | |
| background-color: #10B981; | |
| } | |
| .disconnected { | |
| background-color: #EF4444; | |
| } | |
| .message-unread { | |
| background-color: #EFF6FF; | |
| } | |
| .job-match-score { | |
| position: absolute; | |
| right: 1rem; | |
| top: 1rem; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| } | |
| .match-high { | |
| background-color: #D1FAE5; | |
| color: #065F46; | |
| } | |
| .match-medium { | |
| background-color: #FEF3C7; | |
| color: #92400E; | |
| } | |
| .tag { | |
| display: inline-block; | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 9999px; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| } | |
| .ai-assistant { | |
| border-left: 4px solid #8B5CF6; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-indigo-800 text-white w-64 flex-shrink-0 flex flex-col"> | |
| <div class="p-4 flex items-center justify-between border-b border-indigo-700"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-rocket text-2xl mr-3"></i> | |
| <span class="sidebar-text text-xl font-bold">UWPRK Pro</span> | |
| </div> | |
| <button id="toggleSidebar" class="text-white focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <div class="flex-1 overflow-y-auto"> | |
| <nav class="p-4"> | |
| <div class="mb-8"> | |
| <p class="sidebar-text uppercase text-xs font-semibold text-indigo-300 mb-4">Navigation</p> | |
| <ul> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded-lg bg-indigo-700"> | |
| <i class="fas fa-home mr-3"></i> | |
| <span class="sidebar-text">Dashboard</span> | |
| </a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-700"> | |
| <i class="fas fa-briefcase mr-3"></i> | |
| <span class="sidebar-text">Projects</span> | |
| </a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#jobs-section" class="flex items-center p-2 rounded-lg hover:bg-indigo-700"> | |
| <i class="fas fa-search-dollar mr-3"></i> | |
| <span class="sidebar-text">Job Finder</span> | |
| </a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#messages-section" class="flex items-center p-2 rounded-lg hover:bg-indigo-700"> | |
| <i class="fas fa-comments mr-3"></i> | |
| <span class="sidebar-text">Messages</span> | |
| <span class="ml-auto bg-red-500 text-white text-xs px-2 py-1 rounded-full">3</span> | |
| </a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-700"> | |
| <i class="fas fa-clock mr-3"></i> | |
| <span class="sidebar-text">Time Tracking</span> | |
| </a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-700"> | |
| <i class="fas fa-file-invoice-dollar mr-3"></i> | |
| <span class="sidebar-text">Invoices</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <p class="sidebar-text uppercase text-xs font-semibold text-indigo-300 mb-4">Automation</p> | |
| <ul> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-700"> | |
| <i class="fas fa-robot mr-3"></i> | |
| <span class="sidebar-text">AI Assistant</span> | |
| </a> | |
| </li> | |
| <li class="mb-2"> | |
| <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-700"> | |
| <i class="fas fa-bolt mr-3"></i> | |
| <span class="sidebar-text">Quick Apply</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </nav> | |
| </div> | |
| <div class="p-4 border-t border-indigo-700"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-10 h-10 rounded-full mr-3"> | |
| <div class="sidebar-text"> | |
| <p class="font-medium">John Doe</p> | |
| <p class="text-xs text-indigo-300">Full Stack Developer</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 overflow-auto"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="px-6 py-4 flex items-center justify-between"> | |
| <h1 class="text-2xl font-bold text-gray-800">Dashboard</h1> | |
| <div class="flex items-center space-x-4"> | |
| <div id="upworkConnection" class="flex items-center mr-4"> | |
| <span class="connection-status connected"></span> | |
| <span class="text-sm">Connected to Upwork</span> | |
| </div> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 relative"> | |
| <i class="fas fa-bell"></i> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main class="p-6"> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Active Projects</p> | |
| <h3 id="activeProjectsCount" class="text-2xl font-bold text-gray-800">5</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-indigo-100 text-indigo-600"> | |
| <i class="fas fa-briefcase"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="text-sm font-medium text-green-600">+2 this week</span> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Earnings (This Month)</p> | |
| <h3 id="monthlyEarnings" class="text-2xl font-bold text-gray-800">$4,250</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> | |
| <i class="fas fa-dollar-sign"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="text-sm font-medium text-green-600">12% increase</span> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Job Applications</p> | |
| <h3 id="jobApplications" class="text-2xl font-bold text-gray-800">18</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600"> | |
| <i class="fas fa-paper-plane"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="text-sm font-medium text-green-600">3 interviews</span> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Unread Messages</p> | |
| <h3 id="unreadMessages" class="text-2xl font-bold text-gray-800">7</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="text-sm font-medium text-red-600">2 urgent</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Job Finder Section --> | |
| <div id="jobs-section" class="mb-8"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-lg font-semibold text-gray-800">Job Finder</h2> | |
| <div class="flex space-x-3"> | |
| <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <i class="fas fa-sync-alt mr-2"></i> Refresh Jobs | |
| </button> | |
| <div class="relative"> | |
| <select class="pl-3 pr-8 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 appearance-none"> | |
| <option>All Platforms</option> | |
| <option>Upwork</option> | |
| <option>Freelancer</option> | |
| <option>Toptal</option> | |
| </select> | |
| <i class="fas fa-chevron-down absolute right-3 top-3 text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Job Search Filters --> | |
| <div class="bg-white rounded-xl shadow-sm p-6 mb-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Skills</label> | |
| <div class="relative"> | |
| <input type="text" placeholder="React, Node, etc." class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Rate ($/hr)</label> | |
| <div class="flex items-center space-x-2"> | |
| <input type="number" placeholder="Min" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <span>-</span> | |
| <input type="number" placeholder="Max" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Job Type</label> | |
| <select class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option>All Types</option> | |
| <option>Hourly</option> | |
| <option>Fixed Price</option> | |
| <option>Long-term</option> | |
| </select> | |
| </div> | |
| <div class="flex items-end"> | |
| <button class="w-full px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <i class="fas fa-filter mr-2"></i> Filter Jobs | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Job Listings --> | |
| <div class="grid grid-cols-1 gap-6"> | |
| <!-- Job Card 1 (High Match) --> | |
| <div class="bg-white rounded-xl shadow-sm p-6 relative"> | |
| <div class="job-match-score match-high">92%</div> | |
| <div class="flex items-start mb-4"> | |
| <img src="https://logo.clearbit.com/techcompany.com" alt="Company" class="w-12 h-12 rounded-lg mr-4"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800">Senior React Developer</h3> | |
| <p class="text-sm text-gray-600">Tech Solutions Inc. • Posted 2 hours ago</p> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="text-gray-700">We're looking for an experienced React developer to join our team building a next-generation e-commerce platform. You'll work with GraphQL, TypeScript, and our design system.</p> | |
| </div> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="tag bg-blue-100 text-blue-800">React</span> | |
| <span class="tag bg-purple-100 text-purple-800">TypeScript</span> | |
| <span class="tag bg-green-100 text-green-800">GraphQL</span> | |
| <span class="tag bg-yellow-100 text-yellow-800">Redux</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <span class="text-lg font-semibold">$75-$90/hr</span> | |
| <span class="text-sm text-gray-500 ml-2">• 20-30 hrs/week</span> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"> | |
| <i class="far fa-bookmark mr-2"></i> Save | |
| </button> | |
| <button class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700"> | |
| <i class="fas fa-paper-plane mr-2"></i> Quick Apply | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Job Card 2 (Medium Match) --> | |
| <div class="bg-white rounded-xl shadow-sm p-6 relative"> | |
| <div class="job-match-score match-medium">76%</div> | |
| <div class="flex items-start mb-4"> | |
| <img src="https://logo.clearbit.com/startup.com" alt="Company" class="w-12 h-12 rounded-lg mr-4"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800">Full Stack Developer (Node + React)</h3> | |
| <p class="text-sm text-gray-600">Startup Ventures • Posted 1 day ago</p> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <p class="text-gray-700">Early-stage startup looking for a full-stack developer to help build our MVP. You'll be working directly with the founders on all aspects of the product.</p> | |
| </div> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="tag bg-blue-100 text-blue-800">React</span> | |
| <span class="tag bg-green-100 text-green-800">Node.js</span> | |
| <span class="tag bg-red-100 text-red-800">MongoDB</span> | |
| <span class="tag bg-indigo-100 text-indigo-800">AWS</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <span class="text-lg font-semibold">$8,000-$12,000</span> | |
| <span class="text-sm text-gray-500 ml-2">• Fixed Price</span> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"> | |
| <i class="far fa-bookmark mr-2"></i> Save | |
| </button> | |
| <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"> | |
| <i class="fas fa-eye mr-2"></i> View Details | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Messages Section --> | |
| <div id="messages-section" class="mb-8"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-lg font-semibold text-gray-800">Client Messages</h2> | |
| <div class="flex space-x-3"> | |
| <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <i class="fas fa-sync-alt mr-2"></i> Refresh | |
| </button> | |
| <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <i class="fas fa-plus mr-2"></i> New Message | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden"> | |
| <!-- Message List --> | |
| <div class="divide-y"> | |
| <!-- Unread Message --> | |
| <div class="message-unread p-4 flex items-start hover:bg-gray-50 cursor-pointer"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client" class="w-10 h-10 rounded-full mr-4"> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <h3 class="font-semibold">Sarah Johnson</h3> | |
| <span class="text-xs text-gray-500">2 hours ago</span> | |
| </div> | |
| <p class="text-sm text-gray-700 truncate">Hi John, I've reviewed the latest updates and have some feedback about the dashboard design. Can we schedule a call tomorrow to discuss?</p> | |
| <div class="flex items-center mt-2 space-x-3"> | |
| <span class="text-xs px-2 py-1 bg-blue-100 text-blue-800 rounded-full">Project: E-commerce Site</span> | |
| <span class="text-xs px-2 py-1 bg-red-100 text-red-800 rounded-full flex items-center"> | |
| <i class="fas fa-exclamation-circle mr-1"></i> Urgent | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Read Message --> | |
| <div class="p-4 flex items-start hover:bg-gray-50 cursor-pointer"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Client" class="w-10 h-10 rounded-full mr-4"> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <h3 class="font-medium">Michael Chen</h3> | |
| <span class="text-xs text-gray-500">1 day ago</span> | |
| </div> | |
| <p class="text-sm text-gray-700 truncate">The API endpoints are working perfectly now. Just wanted to say great job on the quick turnaround!</p> | |
| <div class="flex items-center mt-2"> | |
| <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">Project: Mobile App Backend</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Message with AI Suggestion --> | |
| <div class="p-4 flex items-start hover:bg-gray-50 cursor-pointer"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client" class="w-10 h-10 rounded-full mr-4"> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <h3 class="font-medium">Emma Rodriguez</h3> | |
| <span class="text-xs text-gray-500">3 days ago</span> | |
| </div> | |
| <p class="text-sm text-gray-700 truncate">I'm not sure about the color scheme for the landing page. Do you have any alternative suggestions?</p> | |
| <div class="flex items-center mt-2"> | |
| <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 rounded-full">Project: Marketing Site</span> | |
| </div> | |
| <!-- AI Assistant Suggestion --> | |
| <div class="mt-3 p-3 bg-gray-50 rounded-lg ai-assistant"> | |
| <div class="flex items-start mb-2"> | |
| <i class="fas fa-robot text-purple-600 mr-2 mt-1"></i> | |
| <p class="text-sm font-medium text-gray-800">AI Reply Suggestion:</p> | |
| </div> | |
| <p class="text-sm text-gray-700 ml-6 mb-2">"I can prepare 2-3 alternative color schemes based on modern design trends. Would you prefer warm or cool tones for this project?"</p> | |
| <button class="ml-6 text-xs px-3 py-1 bg-purple-600 text-white rounded hover:bg-purple-700"> | |
| <i class="fas fa-paper-plane mr-1"></i> Use This Reply | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Message Composer (Hidden by default) --> | |
| <div id="messageComposer" class="p-4 bg-gray-50 border-t hidden"> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">To:</label> | |
| <input type="text" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="client@example.com"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Subject:</label> | |
| <input type="text" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Project Update"> | |
| </div> | |
| <div class="mb-4"> | |
| <textarea rows="5" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Type your message here..."></textarea> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 text-gray-400 hover:text-indigo-600"> | |
| <i class="fas fa-paperclip"></i> | |
| </button> | |
| <button class="p-2 text-gray-400 hover:text-indigo-600"> | |
| <i class="fas fa-robot"></i> | |
| </button> | |
| <button class="p-2 text-gray-400 hover:text-indigo-600"> | |
| <i class="fas fa-history"></i> | |
| </button> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"> | |
| Cancel | |
| </button> | |
| <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"> | |
| <i class="fas fa-paper-plane mr-2"></i> Send | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Projects Section --> | |
| <div class="mb-8"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-lg font-semibold text-gray-800">Active Projects</h2> | |
| <div class="flex space-x-3"> | |
| <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <i class="fas fa-sync-alt mr-2"></i> Sync Projects | |
| </button> | |
| <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <i class="fas fa-plus mr-2"></i> New Project | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Project Card 1 --> | |
| <div class="project-card bg-white rounded-xl shadow-sm p-6 transition-all duration-300"> | |
| <div class="flex items-start justify-between mb-4"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800">E-commerce Website</h3> | |
| <p class="text-sm text-gray-500">Client: Tech Solutions Inc.</p> | |
| </div> | |
| <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">Active</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Building a complete e-commerce platform with payment integration and inventory management.</p> | |
| <div class="mb-4"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-500">Progress</span> | |
| <span class="text-sm font-medium text-indigo-600">65%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-indigo-600 h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between text-sm"> | |
| <div> | |
| <i class="fas fa-clock text-gray-400 mr-1"></i> | |
| <span class="text-gray-500">42 hrs</span> | |
| </div> | |
| <div> | |
| <i class="fas fa-dollar-sign text-gray-400 mr-1"></i> | |
| <span class="text-gray-500">$2,800</span> | |
| </div> | |
| <div> | |
| <i class="fas fa-calendar-alt text-gray-400 mr-1"></i> | |
| <span class="text-gray-500">Jun 15</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project Card 2 --> | |
| <div class="project-card bg-white rounded-xl shadow-sm p-6 transition-all duration-300"> | |
| <div class="flex items-start justify-between mb-4"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800">Mobile App UI/UX</h3> | |
| <p class="text-sm text-gray-500">Client: Startup Ventures</p> | |
| </div> | |
| <span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded-full">Pending</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Designing the user interface and experience for a new fitness tracking mobile application.</p> | |
| <div class="mb-4"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-500">Progress</span> | |
| <span class="text-sm font-medium text-indigo-600">90%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-indigo-600 h-2 rounded-full" style="width: 90%"></div> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between text-sm"> | |
| <div> | |
| <i class="fas fa-clock text-gray-400 mr-1"></i> | |
| <span class="text-gray-500">28 hrs</span> | |
| </div> | |
| <div> | |
| <i class="fas fa-dollar-sign text-gray-400 mr-1"></i> | |
| <span class="text-gray-500">$1,500</span> | |
| </div> | |
| <div> | |
| <i class="fas fa-calendar-alt text-gray-400 mr-1"></i> | |
| <span class="text-gray-500">Jun 20</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <!-- Job Application Modal --> | |
| <div id="jobApplyModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl p-6 w-full max-w-2xl"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold text-gray-800">Apply to Senior React Developer</h3> | |
| <button id="closeJobModal" class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Cover Letter</label> | |
| <div class="bg-gray-50 p-4 rounded-lg mb-3"> | |
| <div class="flex items-center mb-2"> | |
| <input type="radio" id="cover1" name="cover" class="mr-2" checked> | |
| <label for="cover1" class="text-sm">Default Template</label> | |
| </div> | |
| <div class="flex items-center mb-2"> | |
| <input type="radio" id="cover2" name="cover" class="mr-2"> | |
| <label for="cover2" class="text-sm">React Specialist</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="cover3" name="cover" class="mr-2"> | |
| <label for="cover3" class="text-sm">Custom</label> | |
| </div> | |
| </div> | |
| <textarea rows="8" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Your cover letter...">Dear Hiring Manager, | |
| I'm excited to apply for the Senior React Developer position. With 5+ years of React experience and expertise in TypeScript and GraphQL, I'm confident I can deliver high-quality results for your e-commerce platform. | |
| My recent projects include: | |
| - Built performant React storefront for [Similar Project] | |
| - Optimized GraphQL queries reducing load times by 40% | |
| - Led TypeScript migration for 50k LOC codebase | |
| I'd love to discuss how I can contribute to your team. My portfolio and Upwork profile showcase additional relevant work. | |
| Best regards, | |
| John Doe</textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Rate Proposal</label> | |
| <div class="bg-gray-50 p-4 rounded-lg mb-3"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <div class="flex items-center"> | |
| <input type="radio" id="rate1" name="rate" class="mr-2" checked> | |
| <label for="rate1" class="text-sm">$85/hr</label> | |
| </div> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Within range</span> | |
| </div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <div class="flex items-center"> | |
| <input type="radio" id="rate2" name="rate" class="mr-2"> | |
| <label for="rate2" class="text-sm">$75/hr</label> | |
| </div> | |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">Minimum</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="rate3" name="rate" class="mr-2"> | |
| <label for="rate3" class="text-sm">Custom: $</label> | |
| <input type="number" class="w-20 border-b ml-2 px-1"> | |
| <span class="text-sm ml-1">/hr</span> | |
| </div> | |
| </div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Attachments</label> | |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 mb-3"> | |
| <div class="flex flex-col items-center justify-center"> | |
| <i class="fas fa-cloud-upload-alt text-gray-400 text-3xl mb-2"></i> | |
| <p class="text-sm text-gray-500">Drag & drop files or <span class="text-indigo-600 cursor-pointer">browse</span></p> | |
| </div> | |
| </div> | |
| <div class="text-xs text-gray-500 mb-4"> | |
| <p><i class="fas fa-check-circle text-green-500 mr-1"></i> Portfolio.pdf</p> | |
| <p><i class="fas fa-check-circle text-green-500 mr-1"></i> React-Certificate.pdf</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="saveTemplate" class="mr-2" checked> | |
| <label for="saveTemplate" class="text-sm text-gray-700">Save as template for similar jobs</label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button id="cancelJobBtn" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">Cancel</button> | |
| <button id="submitJobBtn" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"> | |
| <i class="fas fa-paper-plane mr-2"></i> Submit Application | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Message Detail Modal --> | |
| <div id="messageDetailModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl p-6 w-full max-w-3xl"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold text-gray-800">Message from Sarah Johnson</h3> | |
| <button id="closeMessageModal" class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="bg-gray-50 p-4 rounded-lg mb-4"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client" class="w-8 h-8 rounded-full mr-3"> | |
| <div> | |
| <p class="font-medium">Sarah Johnson</p> | |
| <p class="text-xs text-gray-500">Client • E-commerce Site</p> | |
| </div> | |
| </div> | |
| <span class="text-xs text-gray-500">Jun 15, 2023 10:24 AM</span> | |
| </div> | |
| <div class="pl-11"> | |
| <p class="text-gray-700 mb-3">Hi John,</p> | |
| <p class="text-gray-700 mb-3">I've reviewed the latest updates and have some feedback about the dashboard design. The color scheme feels a bit too dark for our brand, and the navigation isn't as intuitive as we'd like.</p> | |
| <p class="text-gray-700 mb-3">Can we schedule a call tomorrow to discuss? I'm available between 10 AM - 12 PM or after 3 PM EST.</p> | |
| <p class="text-gray-700">Looking forward to your thoughts.</p> | |
| <p class="text-gray-700 mt-3">Best,<br>Sarah</p> | |
| </div> | |
| </div> | |
| <!-- AI Reply Suggestions --> | |
| <div class="mb-6"> | |
| <div class="flex items-center mb-3"> | |
| <i class="fas fa-robot text-purple-600 mr-2"></i> | |
| <h4 class="font-medium">AI Reply Suggestions</h4> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200 cursor-pointer hover:border-purple-300"> | |
| <p class="text-sm font-medium text-gray-800 mb-2">Professional</p> | |
| <p class="text-sm text-gray-700 mb-3">"Thanks for your feedback, Sarah. I'll prepare some alternative color schemes and navigation improvements. Would 11 AM EST work for our call?"</p> | |
| <button class="text-xs px-3 py-1 bg-purple-600 text-white rounded hover:bg-purple-700"> | |
| <i class="fas fa-paper-plane mr-1"></i> Use This | |
| </button> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg border border-gray-200 cursor-pointer hover:border-purple-300"> | |
| <p class="text-sm font-medium text-gray-800 mb-2">Friendly</p> | |
| <p class="text-sm text-gray-700 mb-3">"Hi Sarah, I appreciate the feedback! Let's definitely go over the changes. How about we meet at 3:30 PM EST? I'll have some mockups ready to show you."</p> | |
| <button class="text-xs px-3 py-1 bg-purple-600 text-white rounded hover:bg-purple-700"> | |
| <i class="fas fa-paper-plane mr-1"></i> Use This | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Reply Composer --> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Your Reply</label> | |
| <textarea rows="5" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 mb-3" placeholder="Type your reply here...">Hi Sarah, | |
| Thank you for your feedback. I'll prepare 3 alternative color schemes with lighter tones and redesign the navigation structure. | |
| 11 AM EST works perfectly for me. I'll send over some concepts before our call so we can discuss them in detail. | |
| Looking forward to our conversation. | |
| Best regards, | |
| John</textarea> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 text-gray-400 hover:text-indigo-600"> | |
| <i class="fas fa-paperclip"></i> | |
| </button> | |
| <button class="p-2 text-gray-400 hover:text-indigo-600"> | |
| <i class="fas fa-robot"></i> | |
| </button> | |
| <button class="p-2 text-gray-400 hover:text-indigo-600"> | |
| <i class="fas fa-history"></i> | |
| </button> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"> | |
| Save Draft | |
| </button> | |
| <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"> | |
| <i class="fas fa-paper-plane mr-2"></i> Send | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scripts --> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| // DOM elements | |
| const jobApplyModal = document.getElementById('jobApplyModal'); | |
| const closeJobModal = document.getElementById('closeJobModal'); | |
| const cancelJobBtn = document.getElementById('cancelJobBtn'); | |
| const submitJobBtn = document.getElementById('submitJobBtn'); | |
| const messageDetailModal = document.getElementById('messageDetailModal'); | |
| const closeMessageModal = document.getElementById('closeMessageModal'); | |
| const messageComposer = document.getElementById('messageComposer'); | |
| // Sample data | |
| const jobApplications = [ | |
| { | |
| id: 1, | |
| title: "Senior React Developer", | |
| client: "Tech Solutions Inc.", | |
| date: "2023-06-15", | |
| status: "submitted", | |
| rate: "$85/hr", | |
| match: 92 | |
| }, | |
| { | |
| id: 2, | |
| title: "Full Stack Developer", | |
| client: "Startup Ventures", | |
| date: "2023-06-14", | |
| status: "viewed", | |
| rate: "$8,000-$12,000", | |
| match: 76 | |
| } | |
| ]; | |
| const messages = [ | |
| { | |
| id: 1, | |
| client: "Sarah Johnson", | |
| project: "E-commerce Site", | |
| date: "2 hours ago", | |
| content: "Hi John, I've reviewed the latest updates and have some feedback about the dashboard design. Can we schedule a call tomorrow to discuss?", | |
| urgent: true, | |
| unread: true | |
| }, | |
| { | |
| id: 2, | |
| client: "Michael Chen", | |
| project: "Mobile App Backend", | |
| date: "1 day ago", | |
| content: "The API endpoints are working perfectly now. Just wanted to say great job on the quick turnaround!", | |
| urgent: false, | |
| unread: false | |
| } | |
| ]; | |
| // Event listeners | |
| document.querySelectorAll('.project-card').forEach(card => { | |
| card.addEventListener('click', () => { | |
| // In a real app, this would open project details | |
| console.log('Project clicked'); | |
| }); | |
| }); | |
| document.querySelectorAll('.job-match-score').forEach(score => { | |
| score.addEventListener('click', () => { | |
| // Show match details tooltip in a real app | |
| console.log('Match score clicked'); | |
| }); | |
| }); | |
| document.querySelectorAll('.quick-apply-btn').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| jobApplyModal.classList.remove('hidden'); | |
| }); | |
| }); | |
| closeJobModal.addEventListener('click', () => { | |
| jobApplyModal.classList.add('hidden'); | |
| }); | |
| cancelJobBtn.addEventListener('click', () => { | |
| jobApplyModal.classList.add('hidden'); | |
| }); | |
| submitJobBtn.addEventListener('click', () => { | |
| // In a real app, this would submit the application | |
| jobApplyModal.classList.add('hidden'); | |
| // Show success notification | |
| const notification = document.createElement('div'); | |
| notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg flex items-center'; | |
| notification.innerHTML = ` | |
| <i class="fas fa-check-circle mr-2"></i> | |
| <span>Application submitted successfully</span> | |
| `; | |
| document.body.appendChild(notification); | |
| setTimeout(() => { | |
| notification.remove(); | |
| }, 3000); | |
| }); | |
| document.querySelectorAll('.message-unread, .message-read').forEach(message => { | |
| message.addEventListener('click', () => { | |
| messageDetailModal.classList.remove('hidden'); | |
| // In a real app, this would mark as read | |
| message.classList.remove('message-unread'); | |
| message.classList.add('message-read'); | |
| }); | |
| }); | |
| closeMessageModal.addEventListener('click', () => { | |
| messageDetailModal.classList.add('hidden'); | |
| }); | |
| document.querySelectorAll('.new-message-btn').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| messageComposer.classList.remove('hidden'); | |
| }); | |
| }); | |
| // Initialize charts | |
| function initCharts() { | |
| // Earnings chart would be initialized here | |
| console.log('Charts initialized'); | |
| } | |
| // Initialize the app | |
| document.addEventListener('DOMContentLoaded', () => { | |
| initCharts(); | |
| // Simulate unread messages | |
| const unreadCount = messages.filter(m => m.unread).length; | |
| document.getElementById('unreadMessages').textContent = unreadCount; | |
| // Simulate job applications | |
| document.getElementById('jobApplications').textContent = jobApplications.length; | |
| }); | |
| </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=LucianoM39/https-huggingface-co-lucianom39" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |