Hugging Face's logo

Spaces:
Douass2
/
logistica
Running

App Files Community
Douass2 commited on
Commit
4242abb
·
verified ·
1 Parent(s): 11f2d88

Logistica - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +308 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Logistica
3
- emoji: 📈
4
- colorFrom: pink
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: logistica
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,308 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Logistica | Advanced Logistics Management Dashboard</title>
7
+ <meta name="description" content="Logistica - Comprehensive logistics management platform for tracking shipments, inventory, and delivery routes">
8
+ <link rel="icon" href="https://cdn-icons-png.flaticon.com/512/2906/2906274.png" type="image/x-icon">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <style>
12
+ .sidebar {
13
+ transition: all 0.3s ease;
14
+ }
15
+ .sidebar.collapsed {
16
+ width: 70px;
17
+ }
18
+ .sidebar.collapsed .sidebar-text {
19
+ display: none;
20
+ }
21
+ .sidebar.collapsed .logo-text {
22
+ display: none;
23
+ }
24
+ .sidebar.collapsed .nav-item {
25
+ justify-content: center;
26
+ }
27
+ .main-content {
28
+ transition: all 0.3s ease;
29
+ }
30
+ .main-content.expanded {
31
+ margin-left: 70px;
32
+ }
33
+ .chart-container {
34
+ position: relative;
35
+ height: 300px;
36
+ }
37
+ @media (max-width: 768px) {
38
+ .sidebar {
39
+ position: fixed;
40
+ z-index: 100;
41
+ transform: translateX(-100%);
42
+ }
43
+ .sidebar.open {
44
+ transform: translateX(0);
45
+ }
46
+ .main-content {
47
+ margin-left: 0 !important;
48
+ }
49
+ .mobile-menu-btn {
50
+ display: block !important;
51
+ }
52
+ }
53
+ </style>
54
+ </head>
55
+ <body class="bg-gray-100 font-sans">
56
+ <div class="flex h-screen overflow-hidden">
57
+ <!-- Sidebar -->
58
+ <div class="sidebar bg-blue-800 text-white w-64 flex flex-col">
59
+ <!-- Logo -->
60
+ <div class="p-4 flex items-center border-b border-blue-700">
61
+ <div class="bg-white p-2 rounded-lg mr-3">
62
+ <i class="fas fa-truck text-blue-800 text-xl"></i>
63
+ </div>
64
+ <h1 class="logo-text text-xl font-bold">LOGISTICA</h1>
65
+ </div>
66
+
67
+ <!-- Navigation -->
68
+ <nav class="flex-1 overflow-y-auto py-4">
69
+ <div class="space-y-2 px-4">
70
+ <a href="#" class="nav-item flex items-center px-4 py-3 rounded-lg bg-blue-700">
71
+ <i class="fas fa-tachometer-alt mr-3"></i>
72
+ <span class="sidebar-text">Dashboard</span>
73
+ </a>
74
+ <a href="#" class="nav-item flex items-center px-4 py-3 rounded-lg hover:bg-blue-700">
75
+ <i class="fas fa-shipping-fast mr-3"></i>
76
+ <span class="sidebar-text">Shipments</span>
77
+ </a>
78
+ <a href="#" class="nav-item flex items-center px-4 py-3 rounded-lg hover:bg-blue-700">
79
+ <i class="fas fa-warehouse mr-3"></i>
80
+ <span class="sidebar-text">Inventory</span>
81
+ </a>
82
+ <a href="#" class="nav-item flex items-center px-4 py-3 rounded-lg hover:bg-blue-700">
83
+ <i class="fas fa-route mr-3"></i>
84
+ <span class="sidebar-text">Routes</span>
85
+ </a>
86
+ <a href="#" class="nav-item flex items-center px-4 py-3 rounded-lg hover:bg-blue-700">
87
+ <i class="fas fa-users mr-3"></i>
88
+ <span class="sidebar-text">Drivers</span>
89
+ </a>
90
+ <a href="#" class="nav-item flex items-center px-4 py-3 rounded-lg hover:bg-blue-700">
91
+ <i class="fas fa-chart-line mr-3"></i>
92
+ <span class="sidebar-text">Analytics</span>
93
+ </a>
94
+ <a href="#" class="nav-item flex items-center px-4 py-3 rounded-lg hover:bg-blue-700">
95
+ <i class="fas fa-cog mr-3"></i>
96
+ <span class="sidebar-text">Settings</span>
97
+ </a>
98
+ </div>
99
+ </nav>
100
+
101
+ <!-- User Profile -->
102
+ <div class="p-4 border-t border-blue-700 flex items-center">
103
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-10 h-10 rounded-full mr-3">
104
+ <div class="sidebar-text">
105
+ <div class="font-medium">John Doe</div>
106
+ <div class="text-sm text-blue-200">Admin</div>
107
+ </div>
108
+ </div>
109
+ </div>
110
+
111
+ <!-- Main Content -->
112
+ <div class="main-content flex-1 overflow-y-auto">
113
+ <!-- Top Navigation -->
114
+ <header class="bg-white shadow-sm">
115
+ <div class="flex items-center justify-between px-6 py-4">
116
+ <div class="flex items-center">
117
+ <button id="sidebarToggle" class="mobile-menu-btn hidden mr-4 text-gray-600 hover:text-blue-800">
118
+ <i class="fas fa-bars text-xl"></i>
119
+ </button>
120
+ <h2 class="text-xl font-semibold text-gray-800">Dashboard</h2>
121
+ </div>
122
+ <div class="flex items-center space-x-4">
123
+ <div class="relative">
124
+ <button class="text-gray-600 hover:text-blue-800">
125
+ <i class="fas fa-bell text-xl"></i>
126
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
127
+ </button>
128
+ </div>
129
+ <div class="relative">
130
+ <button class="text-gray-600 hover:text-blue-800">
131
+ <i class="fas fa-envelope text-xl"></i>
132
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
133
+ </button>
134
+ </div>
135
+ <div class="relative">
136
+ <button id="themeToggle" class="text-gray-600 hover:text-blue-800">
137
+ <i class="fas fa-moon text-xl"></i>
138
+ </button>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ </header>
143
+
144
+ <!-- Dashboard Content -->
145
+ <main class="p-6">
146
+ <!-- Stats Cards -->
147
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
148
+ <div class="bg-white rounded-lg shadow p-6 flex items-center">
149
+ <div class="p-3 rounded-full bg-blue-100 text-blue-800 mr-4">
150
+ <i class="fas fa-shipping-fast text-xl"></i>
151
+ </div>
152
+ <div>
153
+ <p class="text-gray-500">Total Shipments</p>
154
+ <h3 class="text-2xl font-bold">1,248</h3>
155
+ <p class="text-green-500 text-sm"><i class="fas fa-arrow-up mr-1"></i> 12% from last month</p>
156
+ </div>
157
+ </div>
158
+ <div class="bg-white rounded-lg shadow p-6 flex items-center">
159
+ <div class="p-3 rounded-full bg-green-100 text-green-800 mr-4">
160
+ <i class="fas fa-check-circle text-xl"></i>
161
+ </div>
162
+ <div>
163
+ <p class="text-gray-500">Delivered</p>
164
+ <h3 class="text-2xl font-bold">1,024</h3>
165
+ <p class="text-green-500 text-sm"><i class="fas fa-arrow-up mr-1"></i> 8% from last month</p>
166
+ </div>
167
+ </div>
168
+ <div class="bg-white rounded-lg shadow p-6 flex items-center">
169
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-800 mr-4">
170
+ <i class="fas fa-clock text-xl"></i>
171
+ </div>
172
+ <div>
173
+ <p class="text-gray-500">In Transit</p>
174
+ <h3 class="text-2xl font-bold">156</h3>
175
+ <p class="text-red-500 text-sm"><i class="fas fa-arrow-down mr-1"></i> 5% from last month</p>
176
+ </div>
177
+ </div>
178
+ <div class="bg-white rounded-lg shadow p-6 flex items-center">
179
+ <div class="p-3 rounded-full bg-red-100 text-red-800 mr-4">
180
+ <i class="fas fa-exclamation-triangle text-xl"></i>
181
+ </div>
182
+ <div>
183
+ <p class="text-gray-500">Delayed</p>
184
+ <h3 class="text-2xl font-bold">68</h3>
185
+ <p class="text-red-500 text-sm"><i class="fas fa-arrow-up mr-1"></i> 3% from last month</p>
186
+ </div>
187
+ </div>
188
+ </div>
189
+
190
+ <!-- Charts and Recent Shipments -->
191
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
192
+ <!-- Shipment Status Chart -->
193
+ <div class="bg-white rounded-lg shadow p-6 lg:col-span-2">
194
+ <div class="flex justify-between items-center mb-4">
195
+ <h3 class="text-lg font-semibold">Shipment Status Overview</h3>
196
+ <select class="border border-gray-300 rounded px-3 py-1 text-sm">
197
+ <option>Last 7 Days</option>
198
+ <option>Last 30 Days</option>
199
+ <option>Last 90 Days</option>
200
+ </select>
201
+ </div>
202
+ <div class="chart-container">
203
+ <canvas id="shipmentChart"></canvas>
204
+ </div>
205
+ </div>
206
+
207
+ <!-- Recent Activities -->
208
+ <div class="bg-white rounded-lg shadow p-6">
209
+ <h3 class="text-lg font-semibold mb-4">Recent Activities</h3>
210
+ <div class="space-y-4">
211
+ <div class="flex items-start">
212
+ <div class="p-2 rounded-full bg-blue-100 text-blue-800 mr-3">
213
+ <i class="fas fa-truck"></i>
214
+ </div>
215
+ <div>
216
+ <p class="font-medium">Shipment #LGS-4829 delivered</p>
217
+ <p class="text-gray-500 text-sm">Los Angeles to New York</p>
218
+ <p class="text-gray-400 text-xs">2 hours ago</p>
219
+ </div>
220
+ </div>
221
+ <div class="flex items-start">
222
+ <div class="p-2 rounded-full bg-green-100 text-green-800 mr-3">
223
+ <i class="fas fa-check"></i>
224
+ </div>
225
+ <div>
226
+ <p class="font-medium">Inventory updated</p>
227
+ <p class="text-gray-500 text-sm">Warehouse #3 received 250 units</p>
228
+ <p class="text-gray-400 text-xs">5 hours ago</p>
229
+ </div>
230
+ </div>
231
+ <div class="flex items-start">
232
+ <div class="p-2 rounded-full bg-yellow-100 text-yellow-800 mr-3">
233
+ <i class="fas fa-exclamation"></i>
234
+ </div>
235
+ <div>
236
+ <p class="font-medium">Delay reported</p>
237
+ <p class="text-gray-500 text-sm">Shipment #LGS-4831 delayed by 2 days</p>
238
+ <p class="text-gray-400 text-xs">Yesterday</p>
239
+ </div>
240
+ </div>
241
+ <div class="flex items-start">
242
+ <div class="p-2 rounded-full bg-purple-100 text-purple-800 mr-3">
243
+ <i class="fas fa-route"></i>
244
+ </div>
245
+ <div>
246
+ <p class="font-medium">New route added</p>
247
+ <p class="text-gray-500 text-sm">Chicago to Dallas via I-55</p>
248
+ <p class="text-gray-400 text-xs">Yesterday</p>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+
255
+ <!-- Recent Shipments Table -->
256
+ <div class="bg-white rounded-lg shadow overflow-hidden">
257
+ <div class="p-6 border-b border-gray-200">
258
+ <h3 class="text-lg font-semibold">Recent Shipments</h3>
259
+ </div>
260
+ <div class="overflow-x-auto">
261
+ <table class="min-w-full divide-y divide-gray-200">
262
+ <thead class="bg-gray-50">
263
+ <tr>
264
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tracking ID</th>
265
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Origin</th>
266
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Destination</th>
267
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
268
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Estimated Delivery</th>
269
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
270
+ </tr>
271
+ </thead>
272
+ <tbody class="bg-white divide-y divide-gray-200">
273
+ <tr>
274
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">#LGS-4835</td>
275
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">New York, NY</td>
276
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Miami, FL</td>
277
+ <td class="px-6 py-4 whitespace-nowrap">
278
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Delivered</span>
279
+ </td>
280
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jun 15, 2023</td>
281
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
282
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
283
+ <button class="text-gray-600 hover:text-gray-900"><i class="fas fa-ellipsis-v"></i></button>
284
+ </td>
285
+ </tr>
286
+ <tr>
287
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">#LGS-4834</td>
288
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Chicago, IL</td>
289
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Denver, CO</td>
290
+ <td class="px-6 py-4 whitespace-nowrap">
291
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">In Transit</span>
292
+ </td>
293
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jun 18, 2023</td>
294
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
295
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
296
+ <button class="text-gray-600 hover:text-gray-900"><i class="fas fa-ellipsis-v"></i></button>
297
+ </td>
298
+ </tr>
299
+ <tr>
300
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">#LGS-4833</td>
301
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Houston, TX</td>
302
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Atlanta, GA</td>
303
+ <td class="px-6 py-4 whitespace-nowrap">
304
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Processing</span>
305
+ </td>
306
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jun 20, 202
307
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Douass2/logistica" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
308
+ </html>u