Spaces:

gtkh
/

project-tracker-pro

Running

App Files Files Community

gtkh commited on Dec 9, 2025

Commit

0709d5c

verified ·

1 Parent(s): 2c05a18

J'aime pas

Browse files

Files changed (4) hide show

components/footer.js +3 -3
components/navbar.js +5 -5
index.html +4 -4
style.css +21 -29

components/footer.js CHANGED Viewed

@@ -4,10 +4,10 @@ class CustomFooter extends HTMLElement {
         this.shadowRoot.innerHTML = `
             <style>
                 .footer {
-                    background-color: #f8fafc;
-                    border-top: 1px solid #e2e8f0;
                 }
-                .footer-link {
                     transition: all 0.2s ease;
                 }
                 .footer-link:hover {

         this.shadowRoot.innerHTML = `
             <style>
                 .footer {
+                    background-color: #ffffff;
+                    border-top: 1px solid #e5e7eb;
                 }
+.footer-link {
                     transition: all 0.2s ease;
                 }
                 .footer-link:hover {

components/navbar.js CHANGED Viewed

@@ -5,19 +5,19 @@ class CustomNavbar extends HTMLElement {
             <style>
                 .navbar {
                     background-color: #ffffff;
-                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
                 }
-                .nav-link {
                     transition: all 0.2s ease;
                 }
                 .nav-link:hover {
                     color: #3B82F6;
                 }
                 .active {
-                    color: #3B82F6;
-                    border-bottom: 2px solid #3B82F6;
                 }
-            </style>
             <nav class="navbar px-4 py-3">
 <div class="container mx-auto flex justify-between items-center">
                     <div class="flex items-center space-x-8">

             <style>
                 .navbar {
                     background-color: #ffffff;
+                    border-bottom: 1px solid #e5e7eb;
                 }
+.nav-link {
                     transition: all 0.2s ease;
                 }
                 .nav-link:hover {
                     color: #3B82F6;
                 }
                 .active {
+                    color: #111827;
+                    font-weight: 500;
                 }
+</style>
             <nav class="navbar px-4 py-3">
 <div class="container mx-auto flex justify-between items-center">
                     <div class="flex items-center space-x-8">

index.html CHANGED Viewed

@@ -21,8 +21,8 @@
         }
     </script>
 </head>
-<body class="bg-gray-50">
-    <div class="min-h-screen">
         <custom-navbar></custom-navbar>
         <main class="container mx-auto px-4 py-8">
@@ -32,8 +32,8 @@
                     <i data-feather="plus"></i> Nouveau Projet
                 </button>
             </div>
-            <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-8 border border-gray-100">
-                <div class="overflow-x-auto">
                     <table class="w-full min-w-max">
 <thead class="bg-primary text-white">
                             <tr>

         }
     </script>
 </head>
+<body class="bg-gray-50 min-h-screen">
+<div class="min-h-screen">
         <custom-navbar></custom-navbar>
         <main class="container mx-auto px-4 py-8">
                     <i data-feather="plus"></i> Nouveau Projet
                 </button>
             </div>
+            <div class="bg-white rounded-lg overflow-hidden mb-8">
+<div class="overflow-x-auto">
                     <table class="w-full min-w-max">
 <thead class="bg-primary text-white">
                             <tr>

style.css CHANGED Viewed

@@ -1,9 +1,9 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 body {
     font-family: 'Inter', sans-serif;
 }
 /* Custom scrollbar */
 ::-webkit-scrollbar {
     width: 8px;
@@ -41,17 +41,16 @@ thead {
     backdrop-filter: blur(5px);
 }
 thead th {
-    background-color: #3B82F6;
-    color: white;
     font-weight: 600;
     padding: var(--table-padding);
     font-size: 0.875rem;
     position: relative;
     white-space: nowrap;
-    text-transform: uppercase;
     letter-spacing: 0.5px;
     font-family: 'Inter', sans-serif;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 thead th:first-child {
     border-top-left-radius: var(--table-radius);
@@ -74,10 +73,8 @@ tbody tr:last-child td:first-child {
 tbody tr:last-child td:last-child {
     border-bottom-right-radius: var(--table-radius);
 }
 tbody tr:hover {
-    background-color: var(--hover-bg) !important;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
 }
 tbody td {
     padding: var(--table-padding);
@@ -97,34 +94,29 @@ tbody tr:not(:last-child) td::after {
     height: 1px;
     background-color: rgba(0, 0, 0, 0.05);
 }
-/* Status badges */
 .status-badge {
-    display: inline-block;
-    padding: 2px 8px;
-    border-radius: 12px;
     font-size: 0.75rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.3px;
 }
 .status-en-cours {
-    background-color: #dbeafe;
-    color: #1e40af;
-    border-left: 4px solid #3b82f6;
 }
 .status-planifie {
-    background-color: #e0f2fe;
-    color: #0369a1;
-    border-left: 4px solid #0ea5e9;
 }
 .status-termine {
-    background-color: #dcfce7;
-    color: #166534;
-    border-left: 4px solid #10b981;
 }
 /* Progress bars */
 .progress-container {
     width: 80px;
@@ -166,9 +158,9 @@ tbody tr:nth-child(3) { animation-delay: 0.3s; }
     color: #dc2626;
     font-weight: 600;
 }
-/* Modern zebra striping */
-tbody tr:nth-child(even) {
-    background-color: rgba(243, 244, 246, 0.5);
 }
 tbody tr {
     height: 56px;

 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 body {
     font-family: 'Inter', sans-serif;
+    background-color: #f9fafb;
+    color: #111827;
 }
 /* Custom scrollbar */
 ::-webkit-scrollbar {
     width: 8px;
     backdrop-filter: blur(5px);
 }
 thead th {
+    background-color: #fff;
+    color: #374151;
     font-weight: 600;
     padding: var(--table-padding);
     font-size: 0.875rem;
     position: relative;
     white-space: nowrap;
     letter-spacing: 0.5px;
     font-family: 'Inter', sans-serif;
+    border-bottom: 1px solid #e5e7eb;
 }
 thead th:first-child {
     border-top-left-radius: var(--table-radius);
 tbody tr:last-child td:last-child {
     border-bottom-right-radius: var(--table-radius);
 }
 tbody tr:hover {
+    background-color: #f8fafc !important;
 }
 tbody td {
     padding: var(--table-padding);
     height: 1px;
     background-color: rgba(0, 0, 0, 0.05);
 }
 .status-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 8px;
+    border-radius: 6px;
     font-size: 0.75rem;
+    font-weight: 500;
 }
 .status-en-cours {
+    background-color: #eff6ff;
+    color: #1d4ed8;
 }
 .status-planifie {
+    background-color: #ecfdf5;
+    color: #047857;
 }
 .status-termine {
+    background-color: #f5f3ff;
+    color: #6d28d9;
 }
 /* Progress bars */
 .progress-container {
     width: 80px;
     color: #dc2626;
     font-weight: 600;
 }
+tbody tr {
+    background-color: #fff;
+    border-bottom: 1px solid #e5e7eb;
 }
 tbody tr {
     height: 56px;