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: Flexfusion Glow
-emoji: 🏢
+title: FlexFusion Glow 💪✨
 colorFrom: pink
-colorTo: yellow
+colorTo: red
+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).

components/workout-card.js

@@ -0,0 +1,101 @@
+class WorkoutCard extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .card {
+          background: var(--card-bg, #FFFFFF);
+          border-radius: 16px;
+          padding: 1.5rem;
+          box-shadow: var(--card-shadow, 0 4px 6px rgba(0, 0, 0, 0.05));
+          transition: all 0.3s ease;
+          margin-bottom: 1rem;
+        }
+        .card:hover {
+          transform: translateY(-2px);
+          box-shadow: var(--card-shadow-hover, 0 10px 15px rgba(0, 0, 0, 0.1));
+        }
+        .header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 1rem;
+        }
+        .title {
+          font-weight: 600;
+          font-size: 1.125rem;
+          color: var(--text-primary, #111111);
+          margin: 0;
+        }
+        .difficulty {
+          padding: 0.25rem 0.5rem;
+          border-radius: 8px;
+          font-size: 0.75rem;
+          font-weight: 500;
+          background: var(--difficulty-bg, #EFF6FF);
+          color: var(--difficulty-text, #4A6CF7);
+        }
+        .stats {
+          display: grid;
+          grid-template-columns: repeat(3, 1fr);
+          gap: 1rem;
+          margin-bottom: 1rem;
+        }
+        .stat {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+        .stat-value {
+          font-weight: 700;
+          font-size: 1.25rem;
+          color: var(--text-primary, #111111);
+        }
+        .stat-label {
+          font-size: 0.75rem;
+          color: var(--text-secondary, #555555);
+        }
+        .button {
+          width: 100%;
+          padding: 0.75rem;
+          border-radius: 12px;
+          font-weight: 600;
+          background: var(--primary, #4A6CF7);
+          color: white;
+          border: none;
+          cursor: pointer;
+          transition: background 0.2s;
+        }
+        .button:hover {
+          background: var(--primary-hover, #3A5CE6);
+        }
+      </style>
+      <div class="card">
+        <div class="header">
+          <h3 class="title"><slot name="title">Workout Title</slot></h3>
+          <span class="difficulty"><slot name="difficulty">Beginner</slot></span>
+        </div>
+        <div class="stats">
+          <div class="stat">
+            <span class="stat-value"><slot name="duration">30</slot>min</span>
+            <span class="stat-label">Duration</span>
+          </div>
+          <div class="stat">
+            <span class="stat-value"><slot name="exercises">8</slot></span>
+            <span class="stat-label">Exercises</span>
+          </div>
+          <div class="stat">
+            <span class="stat-value"><slot name="calories">280</slot></span>
+            <span class="stat-label">Calories</span>
+          </div>
+        </div>
+        <button class="button">
+          <slot name="button">Start Workout</slot>
+        </button>
+      </div>
+    `;
+  }
+}
+
+customElements.define('workout-card', WorkoutCard);

index.html

@@ -1,19 +1,107 @@
-<!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="light">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FitFusion Glow | Home</title>
+    <link rel="stylesheet" href="style.css">
+    <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',
+                        success: '#42C77A',
+                        warning: '#F7B84B',
+                        danger: '#EF4D4D',
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-50 dark:bg-[#0E0F12] transition-colors duration-300">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-8">
+        <!-- Hero Section -->
+        <section class="flex flex-col md:flex-row items-center justify-between gap-8 mb-16">
+            <div class="md:w-1/2">
+                <h1 class="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
+                    Stronger <span class="text-primary">Every</span> Day
+                </h1>
+                <p class="text-lg text-gray-600 dark:text-gray-300 mb-8">
+                    Transform your fitness journey with personalized workouts, progress tracking, and expert guidance.
+                </p>
+                <div class="flex gap-4">
+                    <a href="login.html" class="bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-xl font-medium transition-all">
+                        Get Started
+                    </a>
+                    <a href="#features" class="border border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300 px-6 py-3 rounded-xl font-medium transition-all">
+                        Learn More
+                    </a>
+                </div>
+            </div>
+            <div class="md:w-1/2">
+                <img src="http://static.photos/fitness/1024x576/1" alt="Fitness App" class="rounded-2xl shadow-xl dark:shadow-lg dark:shadow-primary/20">
+            </div>
+        </section>
+
+        <!-- Features Section -->
+        <section id="features" class="mb-16">
+            <h2 class="text-3xl font-bold text-center text-gray-900 dark:text-white mb-12">Why Choose FitFusion</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="bg-white dark:bg-[#1A1C20] p-6 rounded-2xl shadow-md dark:shadow-none">
+                    <div class="w-12 h-12 bg-primary/10 dark:bg-primary/20 rounded-xl flex items-center justify-center mb-4">
+                        <i data-feather="activity" class="text-primary w-6 h-6"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Smart Workouts</h3>
+                    <p class="text-gray-600 dark:text-gray-400">
+                        Personalized plans that adapt to your progress and goals.
+                    </p>
+                </div>
+                <div class="bg-white dark:bg-[#1A1C20] p-6 rounded-2xl shadow-md dark:shadow-none">
+                    <div class="w-12 h-12 bg-primary/10 dark:bg-primary/20 rounded-xl flex items-center justify-center mb-4">
+                        <i data-feather="trending-up" class="text-primary w-6 h-6"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Progress Tracking</h3>
+                    <p class="text-gray-600 dark:text-gray-400">
+                        Visualize your improvements with detailed analytics.
+                    </p>
+                </div>
+                <div class="bg-white dark:bg-[#1A1C20] p-6 rounded-2xl shadow-md dark:shadow-none">
+                    <div class="w-12 h-12 bg-primary/10 dark:bg-primary/20 rounded-xl flex items-center justify-center mb-4">
+                        <i data-feather="award" class="text-primary w-6 h-6"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Expert Guidance</h3>
+                    <p class="text-gray-600 dark:text-gray-400">
+                        Access professional advice and form corrections.
+                    </p>
+                </div>
+            </div>
+        </section>
+
+        <!-- CTA Section -->
+        <section class="bg-primary/5 dark:bg-primary/10 p-8 rounded-2xl text-center mb-16">
+            <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Ready to Transform Your Fitness?</h2>
+            <p class="text-gray-600 dark:text-gray-300 mb-6 max-w-2xl mx-auto">
+                Join thousands of users who have already achieved their fitness goals with FitFusion Glow.
+            </p>
+            <a href="signup.html" class="inline-block bg-primary hover:bg-primary/90 text-white px-8 py-3 rounded-xl font-medium transition-all">
+                Start Your Journey Today
+            </a>
+        </section>
+    </main>
+
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="components/workout-card.js"></script>
+    <script src="script.js"></script>
+<script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

style.css

@@ -1,28 +1,38 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+* {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+:root {
+  --card-bg: #FFFFFF;
+  --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+  --card-shadow-hover: 0 10px 15px rgba(0, 0, 0, 0.1);
+  --text-primary: #111111;
+  --text-secondary: #555555;
+  --primary: #4A6CF7;
+  --primary-hover: #3A5CE6;
+  --difficulty-bg: #EFF6FF;
+  --difficulty-text: #4A6CF7;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.dark {
+  --card-bg: #1A1C20;
+  --card-shadow: none;
+  --card-shadow-hover: 0 10px 15px rgba(74, 108, 247, 0.1);
+  --text-primary: #FFFFFF;
+  --text-secondary: #9A9BA1;
+  --difficulty-bg: rgba(74, 108, 247, 0.2);
+  --difficulty-text: #4A6CF7;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
 }
+
+::-webkit