| <!DOCTYPE html> |
| <html lang="en" class="h-full"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>FitFusion | Dashboard</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#4A6CF7', |
| secondary: '#42C77A', |
| darkbg: '#0E1F12', |
| carddark: '#1A1C20', |
| } |
| } |
| } |
| } |
| </script> |
| <link rel="stylesheet" href="style.css"> |
| </head> |
| <body class="bg-gray-50 dark:bg-darkbg h-full transition-colors duration-300"> |
| <div class="min-h-screen flex flex-col"> |
| |
| <header class="bg-white dark:bg-carddark shadow-sm py-4 px-6"> |
| <div class="flex items-center justify-between"> |
| <div class="flex items-center space-x-2"> |
| <i data-feather="activity" class="text-primary w-6 h-6"></i> |
| <h1 class="text-xl font-bold dark:text-white">FitFusion</h1> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <button id="theme-toggle" class="p-2 rounded-full"> |
| <i id="theme-icon" data-feather="sun" class="w-5 h-5 dark:text-white"></i> |
| </button> |
| <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white"> |
| <i data-feather="user" class="w-4 h-4"></i> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="flex-1 p-6"> |
| <div class="max-w-4xl mx-auto"> |
| |
| <div class="bg-white dark:bg-carddark rounded-2xl shadow-sm p-6 mb-6"> |
| <h2 class="text-2xl font-bold dark:text-white">Good morning, Alex!</h2> |
| <p class="text-gray-500 dark:text-gray-400 mt-1">Let's crush your goals today</p> |
| |
| <div class="mt-6 relative"> |
| <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded-full"> |
| <div class="h-4 bg-primary rounded-full w-3/4"></div> |
| </div> |
| <p class="text-sm text-gray-600 dark:text-gray-300 mt-2">4 days streak this week</p> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6"> |
| <div class="bg-white dark:bg-carddark rounded-xl shadow-sm p-4 flex flex-col items-center justify-center"> |
| <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mb-2"> |
| <i data-feather="calendar" class="text-primary w-6 h-6"></i> |
| </div> |
| <span class="text-sm font-medium dark:text-white">Plan</span> |
| </div> |
| <div class="bg-white dark:bg-carddark rounded-xl shadow-sm p-4 flex flex-col items-center justify-center"> |
| <div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mb-2"> |
| <i data-feather="activity" class="text-secondary w-6 h-6"></i> |
| </div> |
| <span class="text-sm font-medium dark:text-white">Track</span> |
| </div> |
| <div class="bg-white dark:bg-carddark rounded-xl shadow-sm p-4 flex flex-col items-center justify-center"> |
| <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center mb-2"> |
| <i data-feather="percent" class="text-purple-500 w-6 h-6"></i> |
| </div> |
| <span class="text-sm font-medium dark:text-white">Stats</span> |
| </div> |
| <div class="bg-white dark:bg-carddark rounded-xl shadow-sm p-4 flex flex-col items-center justify-center"> |
| <div class="w-12 h-12 bg-yellow-100 dark:bg-yellow-900 rounded-full flex items-center justify-center mb-2"> |
| <i data-feather="award" class="text-yellow-500 w-6 h-6"></i> |
| </div> |
| <span class="text-sm font-medium dark:text-white">Goals</span> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white dark:bg-carddark rounded-2xl shadow-sm p-6 mb-6"> |
| <div class="flex items-center justify-between mb-4"> |
| <h3 class="text-lg font-semibold dark:text-white">Today's Workout</h3> |
| <span class="text-sm text-primary font-medium">Chest & Triceps</span> |
| </div> |
| |
| <div class="space-y-3"> |
| <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-10 h-10 bg-red-100 dark:bg-red-900 rounded-md flex items-center justify-center"> |
| <i data-feather="activity" class="text-red-500 w-4 h-4"></i> |
| </div> |
| <span class="font-medium dark:text-white">Bench Press</span> |
| </div> |
| <span class="text-gray-500 dark:text-gray-400">4x8</span> |
| </div> |
| <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-md flex items-center justify-center"> |
| <i data-feather="activity" class="text-blue-500 w-4 h-4"></i> |
| </div> |
| <span class="font-medium dark:text-white">Incline DB Press</span> |
| </div> |
| <span class="text-gray-500 dark:text-gray-400">3x10</span> |
| </div> |
| <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-10 h-10 bg-green-100 dark:bg-green-900 rounded-md flex items-center justify-center"> |
| <i data-feather="activity" class="text-green-500 w-4 h-4"></i> |
| </div> |
| <span class="font-medium dark:text-white">Tricep Dips</span> |
| </div> |
| <span class="text-gray-500 dark:text-gray-400">3x12</span> |
| </div> |
| </div> |
| |
| <button class="mt-6 w-full py-3 bg-primary hover:bg-blue-600 text-white font-medium rounded-lg transition-all"> |
| Start Workout |
| </button> |
| </div> |
|
|
| |
| <div class="bg-white dark:bg-carddark rounded-2xl shadow-sm p-6"> |
| <h3 class="text-lg font-semibold dark:text-white mb-4">Weekly Progress</h3> |
| <div class="h-40"> |
| |
| <div class="flex items-end h-32 space-x-2"> |
| <div class="flex-1 bg-blue-100 dark:bg-blue-900 rounded-t-md" style="height: 20%"></div> |
| <div class="flex-1 bg-blue-200 dark:bg-blue-800 rounded-t-md" style="height: 40%"></div> |
| <div class="flex-1 bg-primary rounded-t-md" style="height: 60%"></div> |
| <div class="flex-1 bg-blue-400 dark:bg-blue-700 rounded-t-md" style="height: 80%"></div> |
| <div class="flex-1 bg-blue-300 dark:bg-blue-600 rounded-t-md" style="height: 60%"></div> |
| <div class="flex-1 bg-blue-200 dark:bg-blue-800 rounded-t-md" style="height: 30%"></div> |
| <div class="flex-1 bg-blue-100 dark:bg-blue-900 rounded-t-md" style="height: 50%"></div> |
| </div> |
| <div class="flex justify-between mt-2 text-sm text-gray-500 dark:text-gray-400"> |
| <span>Mon</span> |
| <span>Tue</span> |
| <span>Wed</span> |
| <span>Thu</span> |
| <span>Fri</span> |
| <span>Sat</span> |
| <span>Sun</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <nav class="bg-white dark:bg-carddark shadow-lg py-3 px-6 border-t dark:border-gray-700"> |
| <div class="flex justify-around"> |
| <a href="#" class="flex flex-col items-center text-primary"> |
| <i data-feather="home" class="w-5 h-5"></i> |
| <span class="text-xs mt-1">Home</span> |
| </a> |
| <a href="#" class="flex flex-col items-center text-gray-500 dark:text-gray-400"> |
| <i data-feather="calendar" class="w-5 h-5"></i> |
| <span class="text-xs mt-1">Plan</span> |
| </a> |
| <a href="#" class="flex flex-col items-center text-gray-500 dark:text-gray-400"> |
| <i data-feather="activity" class="w-5 h-5"></i> |
| <span class="text-xs mt-1">Track</span> |
| </a> |
| <a href="#" class="flex flex-col items-center text-gray-500 dark:text-gray-400"> |
| <i data-feather="user" class="w-5 h-5"></i> |
| <span class="text-xs mt-1">Profile</span> |
| </a> |
| </div> |
| </nav> |
| </div> |
|
|
| <script src="script.js"></script> |
| <script> |
| feather.replace(); |
| </script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
