Hugging Face's logo

Spaces:
abdelhak66
/
resume-analyzer
Running

App Files Community
resume-analyzer / index.html
abdelhak66's picture
abdelhak66
Add 1 files
bae5726 verified
raw
history blame contribute delete
31 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>FitStudio Pro | Fitness Management Platform</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%);
 }
 .sidebar {
 transition: all 0.3s ease;
 }
 .calendar-day {
 transition: all 0.2s ease;
 }
 .calendar-day:hover {
 transform: scale(1.05);
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 .class-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
 }
 @media (max-width: 768px) {
 .sidebar {
 transform: translateX(-100%);
 position: absolute;
 z-index: 50;
 height: 100vh;
 }
 .sidebar.active {
 transform: translateX(0);
 }
 }
 </style>
</head>
<body class="bg-gray-50 font-sans">
 <!-- Mobile Menu Button -->
 <div class="md:hidden fixed top-4 left-4 z-50">
 <button id="menuToggle" class="p-2 rounded-lg bg-white shadow-md text-purple-700">
 <i class="fas fa-bars text-xl"></i>
 </button>
 </div>
<!-- Sidebar -->
 <div id="sidebar" class="sidebar w-64 fixed h-full bg-white shadow-lg">
 <div class="p-4 gradient-bg text-white flex items-center">
 <i class="fas fa-dumbbell text-2xl mr-3"></i>
 <h1 class="text-xl font-bold">FitStudio Pro</h1>
 </div>
 <div class="p-4 border-b">
 <div class="flex items-center">
 <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-10 h-10 rounded-full mr-3">
 <div>
 <p class="font-medium">Sarah Johnson</p>
 <p class="text-xs text-gray-500">Premium Member</p>
 </div>
 </div>
 </div>
 <nav class="p-4">
 <ul>
 <li class="mb-2">
 <a href="#" class="flex items-center p-2 rounded-lg bg-purple-100 text-purple-700">
 <i class="fas fa-home mr-3"></i>
 Dashboard
 </a>
 </li>
 <li class="mb-2">
 <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-100">
 <i class="fas fa-calendar-alt mr-3"></i>
 Schedule
 </a>
 </li>
 <li class="mb-2">
 <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-100">
 <i class="fas fa-chart-line mr-3"></i>
 Progress
 </a>
 </li>
 <li class="mb-2">
 <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-100">
 <i class="fas fa-file-invoice-dollar mr-3"></i>
 Payments
 </a>
 </li>
 <li class="mb-2">
 <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-100">
 <i class="fas fa-cog mr-3"></i>
 Settings
 </a>
 </li>
 </ul>
 </nav>
 <div class="absolute bottom-0 w-full p-4 border-t">
 <button class="w-full flex items-center justify-center p-2 rounded-lg bg-red-100 text-red-600">
 <i class="fas fa-sign-out-alt mr-2"></i>
 Logout
 </button>
 </div>
 </div>
<!-- Main Content -->
 <div class="md:ml-64 min-h-screen">
 <!-- Header -->
 <header class="bg-white shadow-sm p-4 flex justify-between items-center">
 <h2 class="text-xl font-semibold text-gray-800">Member Dashboard</h2>
 <div class="flex items-center space-x-4">
 <div class="relative">
 <button class="p-2 rounded-full hover:bg-gray-100">
 <i class="fas fa-bell text-gray-600"></i>
 <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
 </button>
 </div>
 <button class="flex items-center space-x-2">
 <span class="text-sm font-medium">Help</span>
 <i class="fas fa-question-circle text-gray-600"></i>
 </button>
 </div>
 </header>
<!-- Dashboard Content -->
 <main class="p-6">
 <!-- Welcome Banner -->
 <div class="gradient-bg text-white rounded-xl p-6 mb-6 shadow-lg">
 <h1 class="text-2xl font-bold mb-2">Welcome back, Sarah!</h1>
 <p class="mb-4">You have 3 classes scheduled this week. Keep up the great work!</p>
 <div class="flex space-x-4">
 <div class="bg-white bg-opacity-20 p-3 rounded-lg">
 <p class="text-xs">Active Streak</p>
 <p class="font-bold">12 days</p>
 </div>
 <div class="bg-white bg-opacity-20 p-3 rounded-lg">
 <p class="text-xs">Classes This Month</p>
 <p class="font-bold">8/12</p>
 </div>
 <div class="bg-white bg-opacity-20 p-3 rounded-lg">
 <p class="text-xs">Membership</p>
 <p class="font-bold">Premium</p>
 </div>
 </div>
 </div>
<!-- Quick Stats -->
 <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
 <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
 <div class="flex justify-between items-center">
 <div>
 <p class="text-sm text-gray-500">Next Class</p>
 <p class="font-bold">Yoga Flow</p>
 <p class="text-sm text-gray-500">Tomorrow, 9:00 AM</p>
 </div>
 <div class="p-3 rounded-full bg-purple-100 text-purple-700">
 <i class="fas fa-calendar-check text-xl"></i>
 </div>
 </div>
 </div>
 <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
 <div class="flex justify-between items-center">
 <div>
 <p class="text-sm text-gray-500">Calories Burned</p>
 <p class="font-bold">1,240 kcal</p>
 <p class="text-sm text-gray-500">This week</p>
 </div>
 <div class="p-3 rounded-full bg-blue-100 text-blue-700">
 <i class="fas fa-fire text-xl"></i>
 </div>
 </div>
 </div>
 <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100">
 <div class="flex justify-between items-center">
 <div>
 <p class="text-sm text-gray-500">Membership Renewal</p>
 <p class="font-bold">15 days left</p>
 <p class="text-sm text-gray-500">Auto-renewal on</p>
 </div>
 <div class="p-3 rounded-full bg-green-100 text-green-700">
 <i class="fas fa-credit-card text-xl"></i>
 </div>
 </div>
 </div>
 </div>
<!-- Upcoming Classes -->
 <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
 <div class="flex justify-between items-center mb-4">
 <h3 class="text-lg font-semibold">Upcoming Classes</h3>
 <button class="text-sm text-purple-700 font-medium">View All</button>
 </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
 <!-- Class Card 1 -->
 <div class="class-card bg-white border border-gray-100 rounded-lg p-4 shadow-sm transition-all">
 <div class="flex justify-between items-start mb-3">
 <div>
 <span class="inline-block px-2 py-1 text-xs font-semibold bg-purple-100 text-purple-700 rounded-full mb-1">Yoga</span>
 <h4 class="font-bold">Morning Yoga Flow</h4>
 </div>
 <div class="text-xs text-gray-500 bg-gray-50 px-2 py-1 rounded">9:00 AM</div>
 </div>
 <div class="flex items-center text-sm text-gray-600 mb-3">
 <i class="fas fa-user mr-2 text-gray-400"></i>
 <span>Jessica Smith</span>
 </div>
 <div class="flex justify-between items-center text-sm">
 <div class="flex items-center">
 <i class="fas fa-users mr-1 text-gray-400"></i>
 <span>12/15 spots</span>
 </div>
 <button class="px-3 py-1 bg-purple-600 text-white text-xs rounded-full hover:bg-purple-700 transition">Details</button>
 </div>
 </div>
<!-- Class Card 2 -->
 <div class="class-card bg-white border border-gray-100 rounded-lg p-4 shadow-sm transition-all">
 <div class="flex justify-between items-start mb-3">
 <div>
 <span class="inline-block px-2 py-1 text-xs font-semibold bg-red-100 text-red-700 rounded-full mb-1">HIIT</span>
 <h4 class="font-bold">Power HIIT</h4>
 </div>
 <div class="text-xs text-gray-500 bg-gray-50 px-2 py-1 rounded">6:30 PM</div>
 </div>
 <div class="flex items-center text-sm text-gray-600 mb-3">
 <i class="fas fa-user mr-2 text-gray-400"></i>
 <span>Mike Johnson</span>
 </div>
 <div class="flex justify-between items-center text-sm">
 <div class="flex items-center">
 <i class="fas fa-users mr-1 text-gray-400"></i>
 <span>8/12 spots</span>
 </div>
 <button class="px-3 py-1 bg-purple-600 text-white text-xs rounded-full hover:bg-purple-700 transition">Details</button>
 </div>
 </div>
<!-- Class Card 3 -->
 <div class="class-card bg-white border border-gray-100 rounded-lg p-4 shadow-sm transition-all">
 <div class="flex justify-between items-start mb-3">
 <div>
 <span class="inline-block px-2 py-1 text-xs font-semibold bg-blue-100 text-blue-700 rounded-full mb-1">Pilates</span>
 <h4 class="font-bold">Reformer Pilates</h4>
 </div>
 <div class="text-xs text-gray-500 bg-gray-50 px-2 py-1 rounded">7:45 AM</div>
 </div>
 <div class="flex items-center text-sm text-gray-600 mb-3">
 <i class="fas fa-user mr-2 text-gray-400"></i>
 <span>Emma Wilson</span>
 </div>
 <div class="flex justify-between items-center text-sm">
 <div class="flex items-center">
 <i class="fas fa-users mr-1 text-gray-400"></i>
 <span>3/8 spots</span>
 </div>
 <button class="px-3 py-1 bg-purple-600 text-white text-xs rounded-full hover:bg-purple-700 transition">Details</button>
 </div>
 </div>
 </div>
 </div>
<!-- Calendar and Progress -->
 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
 <!-- Calendar Section -->
 <div class="bg-white rounded-xl shadow-sm p-6">
 <div class="flex justify-between items-center mb-4">
 <h3 class="text-lg font-semibold">Class Calendar</h3>
 <div class="flex space-x-2">
 <button class="p-1 rounded-full hover:bg-gray-100">
 <i class="fas fa-chevron-left text-gray-600"></i>
 </button>
 <span class="text-sm font-medium">June 2023</span>
 <button class="p-1 rounded-full hover:bg-gray-100">
 <i class="fas fa-chevron-right text-gray-600"></i>
 </button>
 </div>
 </div>
<div class="grid grid-cols-7 gap-1 mb-2">
 <div class="text-center text-xs font-medium text-gray-500 py-1">Sun</div>
 <div class="text-center text-xs font-medium text-gray-500 py-1">Mon</div>
 <div class="text-center text-xs font-medium text-gray-500 py-1">Tue</div>
 <div class="text-center text-xs font-medium text-gray-500 py-1">Wed</div>
 <div class="text-center text-xs font-medium text-gray-500 py-1">Thu</div>
 <div class="text-center text-xs font-medium text-gray-500 py-1">Fri</div>
 <div class="text-center text-xs font-medium text-gray-500 py-1">Sat</div>
 </div>
<div class="grid grid-cols-7 gap-1">
 <!-- Calendar days -->
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">28</div>
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">29</div>
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">30</div>
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">31</div>
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">1</div>
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">2</div>
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">3</div>
<!-- Week 2 -->
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">4</div>
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">5</div>
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg bg-purple-100 text-purple-700 font-medium">6</div>
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">7</div>
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg bg-blue-100 text-blue-700 font-medium">8</div>
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">9</div>
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">10</div>
<!-- Week 3 -->
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">11</div>
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg bg-red-100 text-red-700 font-medium">12</div>
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">13</div>
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">14</div>
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">15</div>
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">16</div>
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">17</div>
<!-- Week 4 -->
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">18</div>
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">19</div>
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">20</div>
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">21</div>
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">22</div>
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">23</div>
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">24</div>
<!-- Week 5 -->
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">25</div>
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">26</div>
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">27</div>
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">28</div>
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">29</div>
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">30</div>
 <div class="calendar-day h-12 flex items-center justify-center text-sm rounded-lg">1</div>
 </div>
<div class="mt-4 pt-4 border-t">
 <div class="flex items-center mb-2">
 <div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div>
 <span class="text-sm">Yoga Class</span>
 </div>
 <div class="flex items-center mb-2">
 <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
 <span class="text-sm">Pilates Class</span>
 </div>
 <div class="flex items-center">
 <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
 <span class="text-sm">HIIT Class</span>
 </div>
 </div>
 </div>
<!-- Progress Section -->
 <div class="bg-white rounded-xl shadow-sm p-6">
 <div class="flex justify-between items-center mb-4">
 <h3 class="text-lg font-semibold">Your Progress</h3>
 <select class="text-sm border rounded-lg px-3 py-1 bg-gray-50">
 <option>Last 7 days</option>
 <option>Last 30 days</option>
 <option>Last 3 months</option>
 </select>
 </div>
<div class="mb-6">
 <div class="flex justify-between items-center mb-1">
 <span class="text-sm font-medium">Attendance</span>
 <span class="text-sm font-medium text-purple-700">80%</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2">
 <div class="bg-purple-600 h-2 rounded-full" style="width: 80%"></div>
 </div>
 </div>
<div class="mb-6">
 <div class="flex justify-between items-center mb-1">
 <span class="text-sm font-medium">Calories Burned</span>
 <span class="text-sm font-medium text-blue-700">1,240 kcal</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2">
 <div class="bg-blue-600 h-2 rounded-full" style="width: 65%"></div>
 </div>
 </div>
<div class="mb-6">
 <div class="flex justify-between items-center mb-1">
 <span class="text-sm font-medium">Workout Minutes</span>
 <span class="text-sm font-medium text-green-700">320 min</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2">
 <div class="bg-green-600 h-2 rounded-full" style="width: 75%"></div>
 </div>
 </div>
<div>
 <h4 class="text-sm font-medium mb-2">Class Types</h4>
 <div class="flex space-x-4">
 <div class="text-center">
 <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center mx-auto mb-1">
 <span class="text-purple-700 font-bold">5</span>
 </div>
 <span class="text-xs">Yoga</span>
 </div>
 <div class="text-center">
 <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mx-auto mb-1">
 <span class="text-blue-700 font-bold">3</span>
 </div>
 <span class="text-xs">Pilates</span>
 </div>
 <div class="text-center">
 <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-1">
 <span class="text-red-700 font-bold">2</span>
 </div>
 <span class="text-xs">HIIT</span>
 </div>
 <div class="text-center">
 <div class="w-16 h-16 rounded-full bg-yellow-100 flex items-center justify-center mx-auto mb-1">
 <span class="text-yellow-700 font-bold">1</span>
 </div>
 <span class="text-xs">Other</span>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Recent Activity -->
 <div class="bg-white rounded-xl shadow-sm p-6">
 <div class="flex justify-between items-center mb-4">
 <h3 class="text-lg font-semibold">Recent Activity</h3>
 <button class="text-sm text-purple-700 font-medium">View All</button>
 </div>
<div class="space-y-4">
 <!-- Activity Item 1 -->
 <div class="flex items-start">
 <div class="p-2 rounded-full bg-green-100 text-green-700 mr-3">
 <i class="fas fa-check"></i>
 </div>
 <div class="flex-1">
 <p class="text-sm font-medium">You attended <span class="text-purple-700">Morning Yoga Flow</span></p>
 <p class="text-xs text-gray-500">Today at 9:30 AM</p>
 </div>
 <button class="text-gray-400 hover:text-gray-600">
 <i class="fas fa-ellipsis-v"></i>
 </button>
 </div>
<!-- Activity Item 2 -->
 <div class="flex items-start">
 <div class="p-2 rounded-full bg-blue-100 text-blue-700 mr-3">
 <i class="fas fa-calendar-plus"></i>
 </div>
 <div class="flex-1">
 <p class="text-sm font-medium">You booked <span class="text-blue-700">Power HIIT</span> for June 12</p>
 <p class="text-xs text-gray-500">Yesterday at 4:15 PM</p>
 </div>
 <button class="text-gray-400 hover:text-gray-600">
 <i class="fas fa-ellipsis-v"></i>
 </button>
 </div>
<!-- Activity Item 3 -->
 <div class="flex items-start">
 <div class="p-2 rounded-full bg-purple-100 text-purple-700 mr-3">
 <i class="fas fa-bolt"></i>
 </div>
 <div class="flex-1">
 <p class="text-sm font-medium">New personal record! 320 calories burned in HIIT class</p>
 <p class="text-xs text-gray-500">June 5 at 7:30 PM</p>
 </div>
 <button class="text-gray-400 hover:text-gray-600">
 <i class="fas fa-ellipsis-v"></i>
 </button>
 </div>
<!-- Activity Item 4 -->
 <div class="flex items-start">
 <div class="p-2 rounded-full bg-yellow-100 text-yellow-700 mr-3">
 <i class="fas fa-medal"></i>
 </div>
 <div class="flex-1">
 <p class="text-sm font-medium">You've reached a 12-day active streak!</p>
 <p class="text-xs text-gray-500">June 3 at 8:00 AM</p>
 </div>
 <button class="text-gray-400 hover:text-gray-600">
 <i class="fas fa-ellipsis-v"></i>
 </button>
 </div>
 </div>
 </div>
 </main>
 </div>
<script>
 // Mobile menu toggle
 document.getElementById('menuToggle').addEventListener('click', function() {
 document.getElementById('sidebar').classList.toggle('active');
 });
 // Sample data for demonstration
 const upcomingClasses = [
 { type: 'Yoga', title: 'Morning Yoga Flow', instructor: 'Jessica Smith', time: '9:00 AM', spots: '12/15' },
 { type: 'HIIT', title: 'Power HIIT', instructor: 'Mike Johnson', time: '6:30 PM', spots: '8/12' },
 { type: 'Pilates', title: 'Reformer Pilates', instructor: 'Emma Wilson', time: '7:45 AM', spots: '3/8' }
 ];
 // You could use this data to dynamically generate content
 // For example, to populate the upcoming classes section:
 /*
 const classesContainer = document.querySelector('.upcoming-classes-container');
 upcomingClasses.forEach(cls => {
 const classElement = document.createElement('div');
 classElement.className = 'class-card bg-white border border-gray-100 rounded-lg p-4 shadow-sm transition-all';
 classElement.innerHTML = `
 <div class="flex justify-between items-start mb-3">
 <div>
 <span class="inline-block px-2 py-1 text-xs font-semibold bg-${cls.type.toLowerCase()}-100 text-${cls.type.toLowerCase()}-700 rounded-full mb-1">${cls.type}</span>
 <h4 class="font-bold">${cls.title}</h4>
 </div>
 <div class="text-xs text-gray-500 bg-gray-50 px-2 py-1 rounded">${cls.time}</div>
 </div>
 <div class="flex items-center text-sm text-gray-600 mb-3">
 <i class="fas fa-user mr-2 text-gray-400"></i>
 <span>${cls.instructor}</span>
 </div>
 <div class="flex justify-between items-center text-sm">
 <div class="flex items-center">
 <i class="fas fa-users mr-1 text-gray-400"></i>
 <span>${cls.spots}</span>
 </div>
 <button class="px-3 py-1 bg-purple-600 text-white text-xs rounded-full hover:bg-purple-700 transition">Details</button>
 </div>
 `;
 classesContainer.appendChild(classElement);
 });
 */
 </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=abdelhak66/resume-analyzer" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>