Color Palette

Light Theme

Background: #F7F8FA (soft neutral)

Cards: #FFFFFF with subtle shadow

Text Primary: #111111

Text Secondary: #555555

Accent: #4A6CF7 (cool modern blue)

Success: #42C77A

Warning: #F7B84B

Danger: #EF4D4D

Dark Theme

Background: #0E0F12

Cards: #1A1C20

Text Primary: #FFFFFF

Text Secondary: #9A9BA1

Accent: #4A6CF7

Success/Warning/Danger similar but slightly desaturated

Typography

Headings: Bold, clean sans-serif (e.g., Inter / SF Pro / Manrope)

Body: Medium / Regular

Minimalistic with plenty of spacing

Rounded corners: 14–20px radius

Buttons: Rounded, bold, accent blue

Components

Modern bottom navigation (User app)

Clean sidebar or top nav (Admin)

Soft shadows (light theme), subtle outer glow (dark theme)

Graphs: Smooth curves, rounded bars, light grid lines

Icons: Minimal line icons

📱 USER APP – UI Page Descriptions
1. Splash Screen

Light Theme

White background

Center: Bold app logo with gradient accent

Small tagline below (“Stronger Every Day.”)

Minimal fade-in animation

Dark Theme

Black background

Neon-like accent glow around logo

2. Login / Signup

Light

Soft grey background

White card containing input fields

Blue CTA buttons

Clean line icons inside text fields

Dark

Deep charcoal background

Input fields with subtle blue outlines

White text and light-blue button glow

3. Dashboard (Home)

Light

White rounded cards spaced with lots of padding

Top area: Greeting + Profile picture

Today’s workout card with progress ring

Quick tiles:

Workout Plan

Track Workout

Subscription

Analytics

Bottom Navigation Bar (home, plan, track, profile)

Dark

Charcoal background

Cards in matte black with soft reflection

Accent blue highlights

4. Workout Plan

Light

Clean weekly schedule layout

Each day = rounded card with status icon

Exercise list inside collapsible cards with:

Set × Reps

Rest time

Small thumbnail or icon

Dark

Dark matte cards

Contrast white text

Hover/active states glow with blue tint

5. Track Progress

Light

Light background with floating white cards

Input controls: minimal sliders / + / – buttons

Graphs:

Soft grid

Smooth blue curve line

Volume & PB cards with icons

Dark

Black background

Graph lines glow slightly

Cards look elevated with shadow

6. Subscription Page

Light

White highlight on the active plan

Pricing shown in minimalistic grid

Renew / Upgrade buttons in accent colors

Dark

Active plan card glowing with blue border

All text clear with high-contrast labels

7. Analytics

Light

Clean charts: line chart, bar chart, radar chart

Sections:

Weak Muscle Groups

Volume Trend

Personal Best Timeline

Tabs with pill-style UI

Dark

Charts in neon-blue + cyan

Dark grid background

Tabs glowing softly on active

8. Profile

Light

White cards

Editable avatar

BMI display in circular gauge

Minimalistic form fields

Dark

Matte dark cards

Blue highlights on editable fields

Gauge with neon effect

🧑‍💼 ADMIN APP – UI Page Descriptions
1. Admin Dashboard

Light

Clean white background

Top stats cards: Total users, Active Plans, Revenue

Graph section (weekly revenue, new subscribers)

Sidebar: white with blue highlight strip on active tab

Dark

Black background

Cards with soft-outline borders

Sidebar with glowing accent line

2. Manage Users

Light

Large table with alternating row colors

Search bar at top

Filters: subscription status, plan

User row → Opens side panel with:

Profile

Assigned workouts

Payment history

Dark

Dark rows with thin separators

Highlight on selected row

3. Manage Workouts

Light

Grid of workout categories (Strength, Hypertrophy, etc.)

Each plan = minimal card with:

Title

Exercise count

Edit button

Dark

Dark rectangular cards with blue hover glow

Icons in white outline

4. Assign Plans

Light

Two-pane layout:

Left: User list

Right: Workout plan selection

Drag-and-drop style (optional)

Dark

Same layout with darker shades

Accent lines on hover

5. Subscription Management

Light

Table or grid of plans

Add / Edit plan modal with simple form

Color-coded status: green (active), red (expired)

Dark

Dark modals with neon accent form fields

6. Progress Reports

Light

Graph-heavy interface

Individual and group analytics

Trend charts in soft blues

Dark

Charts in glowing neon blue

Cards floating over dark canvas

✔️ Want me to convert this into high-fidelity wireframes or Figma-ready structure?
✔️ Or generate icons, layout diagrams, or color variations?

README.md

@@ -1,10 +1,13 @@
 ---
-title: Fitfusion Glow Tracker
-emoji: ⚡
-colorFrom: yellow
-colorTo: green
+title: FitFusion Glow Tracker 💪✨
+colorFrom: pink
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html

@@ -1,19 +1,189 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!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 -->
+        <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 Content -->
+        <main class="flex-1 p-6">
+            <div class="max-w-4xl mx-auto">
+                <!-- Greeting Card -->
+                <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>
+
+                <!-- Quick Actions -->
+                <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>
+
+                <!-- Today's Workout -->
+                <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>
+
+                <!-- Progress -->
+                <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">
+                        <!-- Chart placeholder -->
+                        <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>
+
+        <!-- Bottom Navigation -->
+        <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>

script.js

@@ -0,0 +1,35 @@
+// Dark mode toggle
+document.addEventListener('DOMContentLoaded', function() {
+    const themeToggle = document.getElementById('theme-toggle');
+    const themeIcon = document.getElementById('theme-icon');
+    
+    // Check for saved user preference or use system preference
+    const savedTheme = localStorage.getItem('theme') || 
+                      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+    
+    // Apply the saved theme
+    if (savedTheme === 'dark') {
+        document.documentElement.classList.add('dark');
+        themeIcon.dataset.feather = 'moon';
+    } else {
+        document.documentElement.classList.remove('dark');
+        themeIcon.dataset.feather = 'sun';
+    }
+    
+    // Toggle theme on button click
+    themeToggle.addEventListener('click', () => {
+        if (document.documentElement.classList.contains('dark')) {
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme', 'light');
+            themeIcon.dataset.feather = 'sun';
+        } else {
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme', 'dark');
+            themeIcon.dataset.feather = 'moon';
+        }
+        feather.replace();
+    });
+    
+    // Refresh feather icons after theme change
+    feather.replace();
+});

style.css

@@ -1,28 +1,49 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Smooth transitions for dark mode */
+* {
+    transition: background-color 0.3s ease, color 0.3s ease;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 6px;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+::-webkit-scrollbar-thumb {
+    background: #4a6cf7;
+    border-radius: 3px;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+::-webkit-scrollbar-thumb:hover {
+    background: #3a5ce4;
 }
+
+.dark ::-webkit-scrollbar-track {
+    background: #1a1c20;
+}
+
+.dark ::-webkit-scrollbar-thumb {
+    background: #4a6cf7;
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+    background: #3a5ce4;
+}
+
+/* Button animations */
+button {
+    transform: translateY(0);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(74, 108, 247, 0.2);
+}
+
+button:active {
+    transform: translateY(0);
+}