good i want tht each card to full wide but its right side of card is looking blank like somehinge is missing

README.md

@@ -1,10 +1,13 @@
 ---
-title: Health Pulse Dashboard Revamp
-emoji: 📊
-colorFrom: green
-colorTo: indigo
+title: Health Pulse Dashboard Revamp 🩺
+colorFrom: gray
+colorTo: yellow
+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/footer.js

@@ -0,0 +1,54 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        footer {
+          background: linear-gradient(135deg, #0f172a 0%, #020617 100%);
+          color: #94a3b8;
+          padding: 2rem;
+          text-align: center;
+          margin-top: 4rem;
+          border-top: 1px solid rgba(30, 41, 59, 0.5);
+        }
+        .footer-content {
+          max-width: 1200px;
+          margin: 0 auto;
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+        }
+        .footer-links {
+          display: flex;
+          justify-content: center;
+          gap: 1.5rem;
+          margin-bottom: 1rem;
+        }
+        .footer-links a {
+          color: #94a3b8;
+          text-decoration: none;
+          transition: color 0.2s;
+        }
+        .footer-links a:hover {
+          color: #e2e8f0;
+        }
+        .copyright {
+          font-size: 0.875rem;
+        }
+      </style>
+      <footer>
+        <div class="footer-content">
+          <div class="footer-links">
+            <a href="/privacy">Privacy</a>
+            <a href="/terms">Terms</a>
+            <a href="/contact">Contact</a>
+          </div>
+          <div class="copyright">
+            &copy; ${new Date().getFullYear()} Health Pulse Dashboard. All rights reserved.
+          </div>
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,61 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        nav {
+          background: linear-gradient(135deg, #0f172a 0%, #020617 100%);
+          padding: 1rem 2rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          border-bottom: 1px solid rgba(30, 41, 59, 0.5);
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+        .logo { 
+          color: white; 
+          font-weight: 700;
+          font-size: 1.25rem;
+          background: linear-gradient(90deg, #0ea5e9 0%, #8b5cf6 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+        ul { 
+          display: flex; 
+          gap: 1.5rem; 
+          list-style: none; 
+          margin: 0; 
+          padding: 0; 
+        }
+        a { 
+          color: #94a3b8; 
+          text-decoration: none; 
+          font-weight: 500;
+          transition: all 0.2s ease;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        a:hover { 
+          color: #e2e8f0; 
+        }
+        a.active {
+          color: #0ea5e9;
+        }
+        .nav-icon {
+          width: 20px;
+          height: 20px;
+        }
+      </style>
+      <nav>
+        <div class="logo">Health Pulse</div>
+        <ul>
+          <li><a href="/" class="active"><i data-feather="home" class="nav-icon"></i> Home</a></li>
+          <li><a href="/analytics.html"><i data-feather="activity" class="nav-icon"></i> Analytics</a></li>
+          <li><a href="/settings.html"><i data-feather="settings" class="nav-icon"></i> Settings</a></li>
+        </ul>
+      </nav>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,299 @@
-<!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">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Health Pulse Dashboard</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 src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              primary: {
+                50: '#f0f9ff',
+                100: '#e0f2fe',
+                200: '#bae6fd',
+                300: '#7dd3fc',
+                400: '#38bdf8',
+                500: '#0ea5e9',
+                600: '#0284c7',
+                700: '#0369a1',
+                800: '#075985',
+                900: '#0c4a6e',
+              },
+              secondary: {
+                50: '#f5f3ff',
+                100: '#ede9fe',
+                200: '#ddd6fe',
+                300: '#c4b5fd',
+                400: '#a78bfa',
+                500: '#8b5cf6',
+                600: '#7c3aed',
+                700: '#6d28d9',
+                800: '#5b21b6',
+                900: '#4c1d95',
+              }
+            }
+          }
+        }
+      }
+    </script>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-8">
+        <div class="flex justify-between items-center mb-8">
+            <div>
+                <p class="text-gray-400">Good Morning!</p>
+                <h1 class="text-3xl font-bold">Health Overview</h1>
+            </div>
+            <div id="connection-status" class="p-2 rounded-full bg-gray-800">
+                <i data-feather="bluetooth" class="text-green-500"></i>
+            </div>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <!-- Health Metrics Cards -->
+            <div class="health-card" data-metric="heart-rate">
+                <div class="absolute right-6 top-6 z-10">
+                    <i data-feather="heart" class="text-red-500 opacity-20" width="60" height="60"></i>
+                </div>
+<div class="flex justify-between items-start">
+                    <div class="p-3 rounded-full bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700">
+                        <i data-feather="heart" class="text-red-500"></i>
+                    </div>
+                    <div class="trend-badge positive">+2%</div>
+                </div>
+                <h2 class="text-4xl font-bold mt-4">72</h2>
+                <p class="text-gray-400 mt-1">Heart Rate</p>
+                <p class="text-sm text-gray-500">BPM</p>
+            </div>
+            <div class="health-card" data-metric="steps">
+                <div class="absolute right-6 top-6 z-10">
+                    <i data-feather="activity" class="text-green-500 opacity-20" width="60" height="60"></i>
+                </div>
+<div class="flex justify-between items-start">
+                    <div class="p-3 rounded-full bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700">
+                        <i data-feather="activity" class="text-green-500"></i>
+                    </div>
+                    <div class="trend-badge positive">+15%</div>
+                </div>
+                <h2 class="text-4xl font-bold mt-4">3,245</h2>
+                <p class="text-gray-400 mt-1">Steps</p>
+                <p class="text-sm text-gray-500">Today</p>
+            </div>
+            <div class="health-card" data-metric="sleep">
+                <div class="absolute right-6 top-6 z-10">
+                    <i data-feather="moon" class="text-purple-500 opacity-20" width="60" height="60"></i>
+                </div>
+<div class="flex justify-between items-start">
+                    <div class="p-3 rounded-full bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700">
+                        <i data-feather="moon" class="text-purple-500"></i>
+                    </div>
+                    <div class="trend-badge positive">+5%</div>
+                </div>
+                <h2 class="text-4xl font-bold mt-4">7.2</h2>
+                <p class="text-gray-400 mt-1">Sleep</p>
+                <p class="text-sm text-gray-500">Hours</p>
+            </div>
+            <div class="health-card" data-metric="calories">
+                <div class="absolute right-6 top-6 z-10">
+                    <i data-feather="zap" class="text-orange-500 opacity-20" width="60" height="60"></i>
+                </div>
+<div class="flex justify-between items-start">
+                    <div class="p-3 rounded-full bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700">
+                        <i data-feather="zap" class="text-orange-500"></i>
+                    </div>
+                    <div class="trend-badge positive">+8%</div>
+                </div>
+                <h2 class="text-4xl font-bold mt-4">1,850</h2>
+                <p class="text-gray-400 mt-1">Calories</p>
+                <p class="text-sm text-gray-500">kcal</p>
+            </div>
+            <div class="health-card" data-metric="spo2">
+                <div class="absolute right-6 top-6 z-10">
+                    <i data-feather="wind" class="text-blue-500 opacity-20" width="60" height="60"></i>
+                </div>
+<div class="flex justify-between items-start">
+                    <div class="p-3 rounded-full bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700">
+                        <i data-feather="wind" class="text-blue-500"></i>
+                    </div>
+                </div>
+                <h2 class="text-4xl font-bold mt-4">98</h2>
+                <p class="text-gray-400 mt-1">SpO₂</p>
+                <p class="text-sm text-gray-500">%</p>
+            </div>
+            <div class="health-card" data-metric="recovery">
+                <div class="absolute right-6 top-6 z-10">
+                    <i data-feather="shield" class="text-teal-500 opacity-20" width="60" height="60"></i>
+                </div>
+<div class="flex justify-between items-start">
+                    <div class="p-3 rounded-full bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700">
+                        <i data-feather="shield" class="text-teal-500"></i>
+                    </div>
+                    <div class="trend-badge positive">+3%</div>
+                </div>
+                <h2 class="text-4xl font-bold mt-4">85</h2>
+                <p class="text-gray-400 mt-1">Recovery</p>
+                <p class="text-sm text-gray-500">Score</p>
+            </div>
+        </div>
+        <!-- Add this in the head section -->
+        <style>
+            .health-card .content {
+                position: relative;
+                z-index: 2;
+            }
+        </style>
+
+        <!-- Activity Chart -->
+<div class="mt-10">
+            <div class="health-card">
+                <div class="flex justify-between items-center mb-6">
+                    <h2 class="text-xl font-semibold">Activity This Week</h2>
+                    <div class="trend-badge positive">+12%</div>
+                </div>
+                <div class="h-64 relative z-10">
+<canvas id="activityChart"></canvas>
+                </div>
+            </div>
+        </div>
+
+        <!-- Health Score -->
+        <div class="mt-10 grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <div class="health-card">
+                <h2 class="text-xl font-semibold mb-6">Health Overview</h2>
+                <div class="flex flex-col lg:flex-row items-center">
+                    <div class="relative w-48 h-48 mb-6 lg:mb-0 lg:mr-8">
+                        <div class="absolute inset-0 rounded-full border-8 border-gray-800"></div>
+                        <div class="absolute inset-0 rounded-full border-8 border-blue-500" style="clip: rect(0, 120px, 240px, 0);"></div>
+                        <div class="absolute inset-0 flex flex-col items-center justify-center">
+                            <span class="text-4xl font-bold">85</span>
+                            <span class="text-gray-400">/100</span>
+                            <p class="text-sm mt-2">Overall Score</p>
+                        </div>
+                    </div>
+                    <div class="w-full">
+                        <div class="mini-metric">
+                            <div class="flex items-center">
+                                <div class="p-2 rounded-full bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 mr-3">
+                                    <i data-feather="moon" class="text-purple-500"></i>
+                                </div>
+                                <span class="flex-grow">Sleep</span>
+                                <span class="text-purple-500 font-semibold">7.2h</span>
+                            </div>
+                        </div>
+                        <div class="mini-metric">
+                            <div class="flex items-center">
+                                <div class="p-2 rounded-full bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 mr-3">
+                                    <i data-feather="activity" class="text-green-500"></i>
+                                </div>
+                                <span class="flex-grow">Activity</span>
+                                <span class="text-green-500 font-semibold">85%</span>
+                            </div>
+                        </div>
+                        <div class="mini-metric">
+                            <div class="flex items-center">
+                                <div class="p-2 rounded-full bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 mr-3">
+                                    <i data-feather="shield" class="text-teal-500"></i>
+                                </div>
+                                <span class="flex-grow">Recovery</span>
+                                <span class="text-teal-500 font-semibold">85%</span>
+                            </div>
+                        </div>
+                        <div class="mini-metric">
+                            <div class="flex items-center">
+                                <div class="p-2 rounded-full bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 mr-3">
+                                    <i data-feather="wind" class="text-blue-500"></i>
+                                </div>
+                                <span class="flex-grow">SpO₂</span>
+                                <span class="text-blue-500 font-semibold">98%</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Quick Actions -->
+            <div class="grid grid-cols-3 gap-4">
+                <div class="quick-action">
+                    <div class="p-4 rounded-full bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 mx-auto mb-3">
+                        <i data-feather="activity" class="text-primary-500"></i>
+                    </div>
+                    <p class="text-center">Start Workout</p>
+                </div>
+                <div class="quick-action">
+                    <div class="p-4 rounded-full bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 mx-auto mb-3">
+                        <i data-feather="zap" class="text-yellow-500"></i>
+                    </div>
+                    <p class="text-center">Meditate</p>
+                </div>
+                <div class="quick-action">
+                    <div class="p-4 rounded-full bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 mx-auto mb-3">
+                        <i data-feather="wind" class="text-blue-500"></i>
+                    </div>
+                    <p class="text-center">Check SpO₂</p>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        
+        // Initialize activity chart
+        const ctx = document.getElementById('activityChart').getContext('2d');
+        const activityChart = new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
+                datasets: [{
+                    data: [6, 4, 8, 5, 7, 9, 7],
+                    backgroundColor: '#0ea5e9',
+                    borderRadius: 4,
+                    borderWidth: 0
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        grid: {
+                            display: false,
+                            drawBorder: false
+                        },
+                        ticks: {
+                            display: false
+                        }
+                    },
+                    x: {
+                        grid: {
+                            display: false,
+                            drawBorder: false
+                        }
+                    }
+                },
+                plugins: {
+                    legend: {
+                        display: false
+                    }
+                }
+            }
+        });
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,34 @@
+// Initialize health metrics with animation
+document.addEventListener('DOMContentLoaded', () => {
+    const healthCards = document.querySelectorAll('.health-card');
+    
+    healthCards.forEach((card, index) => {
+        card.style.opacity = '0';
+        card.style.transform = 'translateY(20px)';
+        card.style.transition = `all 0.5s ease ${index * 0.1}s`;
+        
+        setTimeout(() => {
+            card.style.opacity = '1';
+            card.style.transform = 'translateY(0)';
+        }, 100);
+    });
+
+    // Simulate connection status
+    const connectionStatus = document.getElementById('connection-status');
+    setInterval(() => {
+        connectionStatus.classList.toggle('bg-green-900');
+        connectionStatus.classList.toggle('bg-gray-800');
+        const icon = connectionStatus.querySelector('i');
+        icon.classList.toggle('text-green-500');
+        icon.classList.toggle('text-gray-500');
+    }, 3000);
+
+    // Add click event to cards
+    healthCards.forEach(card => {
+        card.addEventListener('click', () => {
+            const metric = card.getAttribute('data-metric');
+            console.log(`Navigating to ${metric} detail view`);
+            // In a real app, you would navigate to a detail page here
+        });
+    });
+});

style.css

@@ -1,28 +1,81 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+    background-color: #0f172a;
+}
+.health-card {
+    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(2, 6, 23, 0.9) 100%);
+    border: 1px solid rgba(30, 41, 59, 0.5);
+    border-radius: 16px;
+    padding: 24px;
+    transition: all 0.3s ease;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    position: relative;
+    overflow: hidden;
+}
+
+.health-card::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 20%;
+    background: linear-gradient(90deg, rgba(15, 23, 42, 0.3) 0%, rgba(59, 130, 246, 0.15) 100%);
+    z-index: 1;
+}
+
+.health-card:hover::after {
+    background: linear-gradient(90deg, rgba(15, 23, 42, 0.4) 0%, rgba(59, 130, 246, 0.25) 100%);
+}
+.health-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    border-color: rgba(59, 130, 246, 0.5);
+}
+
+.trend-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 8px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 600;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.trend-badge.positive {
+    background-color: rgba(34, 197, 94, 0.1);
+    color: rgb(34, 197, 94);
+    border: 1px solid rgba(34, 197, 94, 0.3);
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.trend-badge.negative {
+    background-color: rgba(239, 68, 68, 0.1);
+    color: rgb(239, 68, 68);
+    border: 1px solid rgba(239, 68, 68, 0.3);
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.mini-metric {
+    padding: 12px 0;
+    border-bottom: 1px solid rgba(30, 41, 59, 0.5);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.mini-metric:last-child {
+    border-bottom: none;
 }
+
+.quick-action {
+    background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(2, 6, 23, 0.9) 100%);
+    border: 1px solid rgba(30, 41, 59, 0.5);
+    border-radius: 12px;
+    padding: 16px;
+    transition: all 0.3s ease;
+    text-align: center;
+}
+
+.quick-action:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    border-color: rgba(59, 130, 246, 0.5);
+}