Spaces:

artsmithai
/

taskflow-dock-shipment-sidekick

Running

App Files Files Community

artsmithai commited on Dec 4, 2025

Commit

cb14410

verified ·

1 Parent(s): 015310a

can you modernize please, this looks like a database form the 90s

Browse files

Files changed (5) hide show

components/navbar.js +6 -3
components/task-card.js +5 -4
components/task-drawer.js +8 -11
index.html +6 -8
style.css +42 -21

components/navbar.js CHANGED Viewed

@@ -4,11 +4,14 @@ class CustomNavbar extends HTMLElement {
         this.shadowRoot.innerHTML = `
             <style>
                 nav {
-                    background-color: white;
-                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                     padding: 1rem 2rem;
                 }
-                .nav-container {
                     max-width: 1400px;
                     margin: 0 auto;
                     display: flex;

         this.shadowRoot.innerHTML = `
             <style>
                 nav {
+                    background-color: var(--surface);
+                    box-shadow: var(--shadow);
                     padding: 1rem 2rem;
+                    backdrop-filter: blur(8px);
+                    background-color: rgba(255, 255, 255, 0.8);
+                    border-bottom: 1px solid var(--border);
                 }
+.nav-container {
                     max-width: 1400px;
                     margin: 0 auto;
                     display: flex;

components/task-card.js CHANGED Viewed

@@ -13,13 +13,14 @@ class CustomTaskCard extends HTMLElement {
                 .task-card {
                     transition: all 0.2s ease;
                     cursor: pointer;
-                    background-color: white;
-                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
                     padding: 1.5rem;
                     position: relative;
                 }
-                .task-header {
                     display: flex;
                     justify-content: space-between;
                     align-items: flex-start;

                 .task-card {
                     transition: all 0.2s ease;
                     cursor: pointer;
+                    background-color: var(--surface);
+                    box-shadow: var(--shadow-sm);
                     padding: 1.5rem;
                     position: relative;
+                    border-radius: var(--radius);
+                    border: 1px solid var(--border);
                 }
+.task-header {
                     display: flex;
                     justify-content: space-between;
                     align-items: flex-start;

components/task-drawer.js CHANGED Viewed

@@ -19,34 +19,31 @@ class CustomTaskDrawer extends HTMLElement {
                     width: 42rem;
                     max-width: 90vw;
                     height: 100vh;
-                    background-color: white;
                     box-shadow: -4px 0 15px rgba(0,0,0,0.1);
                     z-index: 100;
                     transform: translateX(100%);
                     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                 }
 :host([open]) {
                     transform: translateX(0);
                 }
                 .drawer-header {
-                    border-bottom: 1px solid #e5e7eb;
                 }
-                .drawer-content {
                     height: calc(100vh - 60px);
                     overflow-y: auto;
                 }
                 .info-section {
-                    border-bottom: 1px solid #e5e7eb;
                 }
                 .activity-item {
-                    border-left: 2px solid #e5e7eb;
                 }
-                @media (max-width: 1024px) {
                     :host {
                         width: 60%;
                     }

                     width: 42rem;
                     max-width: 90vw;
                     height: 100vh;
+                    background-color: var(--surface);
                     box-shadow: -4px 0 15px rgba(0,0,0,0.1);
                     z-index: 100;
                     transform: translateX(100%);
                     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                    border-left: 1px solid var(--border);
                 }
 :host([open]) {
                     transform: translateX(0);
                 }
                 .drawer-header {
+                    border-bottom: 1px solid var(--border);
+                    background: var(--surface-2);
                 }
+.drawer-content {
                     height: calc(100vh - 60px);
                     overflow-y: auto;
                 }
                 .info-section {
+                    border-bottom: 1px solid var(--border);
                 }
                 .activity-item {
+                    border-left: 2px solid var(--border);
                 }
+@media (max-width: 1024px) {
                     :host {
                         width: 60%;
                     }

index.html CHANGED Viewed

@@ -14,8 +14,8 @@
 </head>
 <body class="bg-gray-50">
     <custom-navbar></custom-navbar>
-    <div class="container mx-auto px-4 py-8">
-        <div class="dashboard-header">
             <div class="flex justify-between items-start">
                 <div>
                     <h1 class="text-3xl font-bold mb-2">Purchase Order Tasks</h1>
@@ -33,18 +33,16 @@
                 </div>
             </div>
         </div>
         <div class="flex justify-between items-center mb-8">
             <div>
-                <h2 class="text-2xl font-bold text-gray-800">Active Tasks</h2>
-                <p class="text-gray-600">Tasks that need your attention</p>
             </div>
-            <button id="openDrawer" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center shadow-md hover:shadow-lg transition-all">
                 <i data-feather="plus" class="mr-2"></i> Add Task
             </button>
         </div>
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
 <custom-task-card
                 title="QC Cotton Shipment"
                 po="#12345"

 </head>
 <body class="bg-gray-50">
     <custom-navbar></custom-navbar>
+    <div class="container mx-auto px-4 py-8 max-w-7xl">
+<div class="dashboard-header">
             <div class="flex justify-between items-start">
                 <div>
                     <h1 class="text-3xl font-bold mb-2">Purchase Order Tasks</h1>
                 </div>
             </div>
         </div>
         <div class="flex justify-between items-center mb-8">
             <div>
+                <h2 class="text-2xl font-bold text-gray-900">Active Tasks</h2>
+                <p class="text-gray-500">Tasks that need your attention</p>
             </div>
+            <button id="openDrawer" class="bg-primary hover:bg-primary-hover text-white px-4 py-2 rounded-lg flex items-center shadow hover:shadow-md transition-all">
                 <i data-feather="plus" class="mr-2"></i> Add Task
             </button>
         </div>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
 <custom-task-card
                 title="QC Cotton Shipment"
                 po="#12345"

style.css CHANGED Viewed

@@ -1,9 +1,29 @@
 @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: #f8fafc;
 }
 .container {
     max-width: 1400px;
 }
@@ -63,12 +83,14 @@ body {
     background-color: #dcfce7;
     color: #166534;
 }
 .task-card {
     transition: all 0.2s ease;
-    border-radius: 0.75rem;
     overflow: hidden;
     position: relative;
 }
 .task-card::before {
@@ -81,43 +103,42 @@ body {
 }
 .task-card.priority-high::before {
-    background-color: #ef4444;
 }
 .task-card.priority-medium::before {
-    background-color: #f59e0b;
 }
 .task-card.priority-low::before {
-    background-color: #10b981;
 }
 .task-card:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
 .dashboard-header {
-    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
-    color: white;
-    border-radius: 0.75rem;
     padding: 2rem;
     margin-bottom: 2rem;
     position: relative;
     overflow: hidden;
 }
-.dashboard-header::after {
     content: '';
     position: absolute;
-    top: -50%;
-    right: -50%;
     width: 100%;
-    height: 200%;
-    background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
-    background-size: 20px 20px;
-    opacity: 0.5;
-    transform: rotate(30deg);
 }
 .task-drawer {
     transition: transform 0.3s ease-in-out;

 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+:root {
+    --primary: #6366f1;
+    --primary-hover: #4f46e5;
+    --surface: #ffffff;
+    --surface-2: #f9fafb;
+    --surface-3: #f3f4f6;
+    --text-primary: #111827;
+    --text-secondary: #6b7280;
+    --border: #e5e7eb;
+    --success: #10b981;
+    --warning: #f59e0b;
+    --danger: #ef4444;
+    --radius: 12px;
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
 body {
     font-family: 'Inter', sans-serif;
+    background-color: var(--surface-2);
+    color: var(--text-primary);
+    -webkit-font-smoothing: antialiased;
 }
 .container {
     max-width: 1400px;
 }
     background-color: #dcfce7;
     color: #166534;
 }
 .task-card {
     transition: all 0.2s ease;
+    border-radius: var(--radius);
     overflow: hidden;
     position: relative;
+    background: var(--surface);
+    box-shadow: var(--shadow-sm);
+    border: 1px solid var(--border);
 }
 .task-card::before {
 }
 .task-card.priority-high::before {
+    background-color: var(--danger);
 }
 .task-card.priority-medium::before {
+    background-color: var(--warning);
 }
 .task-card.priority-low::before {
+    background-color: var(--success);
 }
 .task-card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+    border-color: var(--primary);
 }
 .dashboard-header {
+    background: var(--surface);
+    color: var(--text-primary);
+    border-radius: var(--radius);
     padding: 2rem;
     margin-bottom: 2rem;
     position: relative;
     overflow: hidden;
+    box-shadow: var(--shadow);
+    border: 1px solid var(--border);
 }
+.dashboard-header::before {
     content: '';
     position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
+    height: 4px;
+    background: linear-gradient(90deg, var(--primary), var(--success));
 }
 .task-drawer {
     transition: transform 0.3s ease-in-out;