Spaces:

Injamul77
/

lifetracker-pro

Running

App Files Files Community

Injamul77 commited on Nov 5, 2025

Commit

6a8bcc4

verified ·

1 Parent(s): 712623d

Give it a modern futuristic design

Browse files

Files changed (3) hide show

components/navbar.js +33 -9
index.html +18 -21
style.css +229 -19

components/navbar.js CHANGED Viewed

@@ -27,8 +27,11 @@ class CustomNavbar extends HTMLElement {
                     font-weight: bold;
                     font-size: 1.5rem;
                     text-decoration: none;
                 }
-                .nav-links {
                     display: flex;
                     gap: 2rem;
                     align-items: center;
@@ -38,12 +41,33 @@ class CustomNavbar extends HTMLElement {
                     text-decoration: none;
                     padding: 0.5rem 1rem;
                     border-radius: 0.375rem;
-                    transition: background-color 0.2s;
                 }
                 .nav-link:hover {
-                    background-color: rgba(255, 255, 255, 0.1);
                 }
-                @media (max-width: 768px) {
                     .nav-links {
                         gap: 1rem;
                     }
@@ -55,11 +79,11 @@ class CustomNavbar extends HTMLElement {
             </style>
             <nav>
                 <div class="nav-container">
-                    <a href="index.html" class="logo">
-                        <i data-feather="activity" class="mr-2"></i>
-                        LifeTracker Pro
-                    </a>
-                    <div class="nav-links">
                         <a href="index.html" class="nav-link">Dashboard</a>
                         <a href="stats.html" class="nav-link">Statistics</a>
                         <a href="settings.html" class="nav-link">Settings</a>

                     font-weight: bold;
                     font-size: 1.5rem;
                     text-decoration: none;
+                    font-family: 'Orbitron', sans-serif;
+                    text-transform: uppercase;
+                    letter-spacing: 1px;
                 }
+.nav-links {
                     display: flex;
                     gap: 2rem;
                     align-items: center;
                     text-decoration: none;
                     padding: 0.5rem 1rem;
                     border-radius: 0.375rem;
+                    transition: all 0.3s ease;
+                    position: relative;
+                    font-family: 'Orbitron', sans-serif;
+                    text-transform: uppercase;
+                    letter-spacing: 1px;
+                    font-size: 0.9rem;
                 }
                 .nav-link:hover {
+                    background: rgba(255, 255, 255, 0.1);
+                    box-shadow: 0 0 15px rgba(0, 217, 255, 0.5);
+                    transform: translateY(-2px);
                 }
+                .nav-link::after {
+                    content: '';
+                    position: absolute;
+                    bottom: -2px;
+                    left: 50%;
+                    width: 0;
+                    height: 2px;
+                    background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple));
+                    transition: all 0.3s ease;
+                    transform: translateX(-50%);
+                }
+                .nav-link:hover::after {
+                    width: 80%;
+                }
+@media (max-width: 768px) {
                     .nav-links {
                         gap: 1rem;
                     }
             </style>
             <nav>
                 <div class="nav-container">
+                <a href="index.html" class="logo glow-text">
+                    <i data-feather="activity" class="mr-2"></i>
+                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-neon-blue to-neon-purple">LIFETRACKER PRO</span>
+                </a>
+<div class="nav-links">
                         <a href="index.html" class="nav-link">Dashboard</a>
                         <a href="stats.html" class="nav-link">Statistics</a>
                         <a href="settings.html" class="nav-link">Settings</a>

index.html CHANGED Viewed

@@ -11,38 +11,35 @@
 </head>
 <body class="bg-gray-50">
     <custom-navbar></custom-navbar>
     <main class="container mx-auto px-4 py-8">
         <!-- Dashboard Header -->
-        <div class="mb-8 text-center">
-            <h1 class="text-4xl font-bold text-gray-800 mb-2">Daily Life Dashboard</h1>
-            <p class="text-gray-600">Track your daily activities and progress</p>
         </div>
         <!-- Activity Tracking Section -->
-        <section class="mb-12">
-            <h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center">
-                <i data-feather="activity" class="mr-2"></i>
-                Daily Activities
             </h2>
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                 <!-- Sleep Tracker -->
-                <div class="bg-white rounded-xl shadow-md p-6">
-                    <div class="flex items-center justify-between mb-4">
-                        <h3 class="text-lg font-semibold text-gray-800">Sleep</h3>
-                        <i data-feather="moon" class="text-blue-500"></i>
                     </div>
-                    <div class="text-3xl font-bold text-blue-600 mb-2">0h 0m</div>
-                    <div class="w-full bg-gray-200 rounded-full h-2">
                         <div class="bg-blue-500 h-2 rounded-full" style="width: 0%"></div>
                     </div>
-                    <button class="mt-4 w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 transition-colors">
-                        Log Sleep
                     </button>
                 </div>
-                <!-- Work Tracker -->
                 <div class="bg-white rounded-xl shadow-md p-6">
                     <div class="flex items-center justify-between mb-4">
                         <h3 class="text-lg font-semibold text-gray-800">Work</h3>

 </head>
 <body class="bg-gray-50">
     <custom-navbar></custom-navbar>
     <main class="container mx-auto px-4 py-8">
         <!-- Dashboard Header -->
+        <div class="mb-12 text-center">
+            <h1 class="text-5xl font-bold mb-4 glow-text">DAILY LIFE DASHBOARD</h1>
+            <p class="text-xl text-gray-400">TRACK YOUR ACTIVITIES IN REAL-TIME</p>
+            <div class="mt-4 h-1 w-24 bg-gradient-to-r from-neon-blue to-neon-purple mx-auto rounded-full"></div>
         </div>
         <!-- Activity Tracking Section -->
+        <section class="mb-16">
+            <h2 class="text-3xl font-semibold mb-8 flex items-center justify-center">
+                <i data-feather="activity" class="mr-3 text-neon-blue"></i>
+                <span class="glow-text">DAILY ACTIVITIES</span>
             </h2>
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                 <!-- Sleep Tracker -->
+                <div class="bg-white rounded-xl p-6 pulse">
+                    <div class="flex items-center justify-between mb-6">
+                        <h3 class="text-xl font-semibold">SLEEP</h3>
+                        <i data-feather="moon" class="text-neon-blue" style="width: 28px; height: 28px;"></i>
                     </div>
+                    <div class="text-4xl font-bold text-neon-blue mb-4 glow-text">0h 0m</div>
+                    <div class="w-full bg-gray-200 rounded-full h-2 mb-6">
                         <div class="bg-blue-500 h-2 rounded-full" style="width: 0%"></div>
                     </div>
+                    <button class="w-full bg-gradient-to-r from-neon-blue to-blue-600 text-white py-3 rounded-xl font-mono tracking-wider hover:shadow-lg transition-all">
+                        LOG SLEEP
                     </button>
                 </div>
+<!-- Work Tracker -->
                 <div class="bg-white rounded-xl shadow-md p-6">
                     <div class="flex items-center justify-between mb-4">
                         <h3 class="text-lg font-semibold text-gray-800">Work</h3>

style.css CHANGED Viewed

@@ -1,27 +1,159 @@
-/* Custom Styles for LifeTracker Pro */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 body {
     font-family: 'Inter', sans-serif;
 }
 .container {
     max-width: 1200px;
 }
 /* Custom checkbox styles */
 .workout-checkbox {
-    width: 20px;
-    height: 20px;
-    border: 2px solid #d1d5db;
-    border-radius: 4px;
     cursor: pointer;
-    transition: all 0.2s ease;
 }
 .workout-checkbox.checked {
-    background-color: #3b82f6;
-    border-color: #3b82f6;
 }
 .workout-checkbox.checked::after {
@@ -31,27 +163,105 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 12px;
 }
-/* Progress bar animation */
-.progress-bar {
-    transition: width 0.3s ease-in-out;
 }
-/* Hover effects */
-.hover-lift {
-    transition: transform 0.2s ease;
 }
-.hover-lift:hover {
-    transform: translateY(-2px);
 }
 /* Responsive adjustments */
 @media (max-width: 768px) {
     .container {
         padding-left: 1rem;
         padding-right: 1rem;
     }
-}

+/* Futuristic Styles for LifeTracker Pro */
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Roboto+Mono:wght@300;400;500&family=Inter:wght@300;400;500;600;700&display=swap');
+:root {
+    --neon-blue: #00d9ff;
+    --neon-purple: #bd00ff;
+    --neon-pink: #ff00c8;
+    --neon-green: #00ff9d;
+    --dark-bg: #0a0a14;
+    --dark-card: #13131f;
+    --dark-border: #252536;
+    --glow-blue: 0 0 10px rgba(0, 217, 255, 0.7), 0 0 20px rgba(0, 217, 255, 0.4);
+    --glow-purple: 0 0 10px rgba(189, 0, 255, 0.7), 0 0 20px rgba(189, 0, 255, 0.4);
+    --glow-pink: 0 0 10px rgba(255, 0, 200, 0.7), 0 0 20px rgba(255, 0, 200, 0.4);
+    --glow-green: 0 0 10px rgba(0, 255, 157, 0.7), 0 0 20px rgba(0, 255, 157, 0.4);
+}
 body {
     font-family: 'Inter', sans-serif;
+    background: var(--dark-bg);
+    color: #ffffff;
+    min-height: 100vh;
+    overflow-x: hidden;
+}
+/* Cyberpunk gradient background */
+body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    background: linear-gradient(45deg,
+        rgba(0, 217, 255, 0.1) 0%,
+        rgba(189, 0, 255, 0.1) 25%,
+        rgba(255, 0, 200, 0.1) 50%,
+        rgba(0, 255, 157, 0.1) 75%);
+    pointer-events: none;
+    z-index: -1;
 }
 .container {
     max-width: 1200px;
 }
+/* Futuristic typography */
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Orbitron', sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    background: linear-gradient(45deg, var(--neon-blue), var(--neon-purple));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-shadow: var(--glow-blue);
+}
+/* Activity cards */
+.bg-white {
+    background: var(--dark-card) !important;
+    border: 1px solid var(--dark-border);
+    border-radius: 16px;
+    backdrop-filter: blur(10px);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+.bg-white::before {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    background: linear-gradient(45deg, var(--neon-blue), var(--neon-purple), var(--neon-pink), var(--neon-green));
+    z-index: -1;
+    border-radius: 18px;
+    animation: border-glow 3s ease-in-out infinite alternate;
+}
+.bg-white:hover {
+    transform: translateY(-5px) scale(1.02);
+    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
+}
+/* Progress bars */
+.w-full.bg-gray-200 {
+    background: rgba(255, 255, 255, 0.1) !important;
+    border-radius: 20px;
+    height: 6px;
+}
+.bg-blue-500, .bg-green-500, .bg-purple-500, .bg-red-500 {
+    border-radius: 20px;
+    height: 6px;
+    position: relative;
+    overflow: hidden;
+}
+.bg-blue-500 { background: linear-gradient(90deg, var(--neon-blue), #0088ff); box-shadow: var(--glow-blue); }
+.bg-green-500 { background: linear-gradient(90deg, var(--neon-green), #00cc88); box-shadow: var(--glow-green); }
+.bg-purple-500 { background: linear-gradient(90deg, var(--neon-purple), #aa00ff); box-shadow: var(--glow-purple); }
+.bg-red-500 { background: linear-gradient(90deg, var(--neon-pink), #ff0066); box-shadow: var(--glow-pink); }
+/* Buttons */
+button {
+    font-family: 'Orbitron', sans-serif !important;
+    border: none !important;
+    border-radius: 12px !important;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-weight: 600 !important;
+    transition: all 0.3s ease !important;
+    position: relative;
+    overflow: hidden;
+}
+button::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: left 0.5s ease;
+}
+button:hover::before {
+    left: 100%;
+}
+button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+}
 /* Custom checkbox styles */
 .workout-checkbox {
+    width: 24px;
+    height: 24px;
+    border: 2px solid var(--neon-blue);
+    border-radius: 6px;
     cursor: pointer;
+    transition: all 0.3s ease;
+    position: relative;
+    background: rgba(0, 217, 255, 0.1);
+    box-shadow: var(--glow-blue);
 }
 .workout-checkbox.checked {
+    background-color: var(--neon-blue);
+    border-color: var(--neon-blue);
 }
 .workout-checkbox.checked::after {
     display: flex;
     align-items: center;
     justify-content: center;
+    font-size: 14px;
+    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
 }
+/* Workout items */
+.flex.items-center.p-3 {
+    background: rgba(255, 255, 255, 0.05) !important;
+    border: 1px solid var(--dark-border);
+    border-radius: 12px;
+    transition: all 0.3s ease;
 }
+.flex.items-center.p-3:hover {
+    background: rgba(255, 255, 255, 0.1) !important;
+    border-color: var(--neon-blue);
+    transform: translateX(5px);
 }
+/* Progress stats */
+.bg-gray-50 {
+    background: rgba(255, 255, 255, 0.05) !important;
+    border: 1px solid var(--dark-border);
+    border-radius: 16px;
 }
+/* Animations */
+@keyframes border-glow {
+    0% { opacity: 0.5; }
+    100% { opacity: 1; }
+}
+@keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+}
+/* Grid enhancements */
+.grid {
+    gap: 1.5rem;
+}
+/* Text enhancements */
+.text-gray-800 {
+    color: #ffffff !important;
+}
+.text-gray-600 {
+    color: rgba(255, 255, 255, 0.7) !important;
+}
+.text-blue-600 { color: var(--neon-blue) !important; text-shadow: var(--glow-blue); }
+.text-green-600 { color: var(--neon-green) !important; text-shadow: var(--glow-green); }
+.text-purple-600 { color: var(--neon-purple) !important; text-shadow: var(--glow-purple); }
+.text-red-600 { color: var(--neon-pink) !important; text-shadow: var(--glow-pink); }
 /* Responsive adjustments */
 @media (max-width: 768px) {
     .container {
         padding-left: 1rem;
         padding-right: 1rem;
     }
+    .grid {
+        gap: 1rem;
+    }
+    h1 {
+        font-size: 2rem !important;
+    }
+    h2 {
+        font-size: 1.5rem !important;
+    }
+}
+/* Special effects for futuristic feel */
+.glow-text {
+    text-shadow: 0 0 10px currentColor;
+}
+.pulse {
+    animation: pulse 2s infinite ease-in-out;
+}
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+::-webkit-scrollbar-track {
+    background: var(--dark-bg);
+}
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(45deg, var(--neon-blue), var(--neon-purple));
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(45deg, var(--neon-purple), var(--neon-pink));
+}