JarlJarle commited on
Commit
e128bf3
·
verified ·
1 Parent(s): 43c66fa

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +801 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Constructflow
3
- emoji: 🏃
4
- colorFrom: indigo
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: constructflow
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: purple
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,801 @@
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>ConstructFlow | Construction Project Management</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* Custom CSS for the 3D viewer and other elements */
11
+ #bim-viewer {
12
+ width: 100%;
13
+ height: 500px;
14
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
15
+ border-radius: 0.5rem;
16
+ position: relative;
17
+ overflow: hidden;
18
+ }
19
+
20
+ .viewer-controls {
21
+ position: absolute;
22
+ bottom: 1rem;
23
+ right: 1rem;
24
+ z-index: 10;
25
+ display: flex;
26
+ gap: 0.5rem;
27
+ }
28
+
29
+ .phase-indicator {
30
+ position: absolute;
31
+ top: 1rem;
32
+ left: 1rem;
33
+ background-color: rgba(255,255,255,0.9);
34
+ padding: 0.5rem 1rem;
35
+ border-radius: 2rem;
36
+ font-weight: 600;
37
+ box-shadow: 0 2px 5px rgba(0,0,0,0.1);
38
+ }
39
+
40
+ .co2-gauge {
41
+ width: 120px;
42
+ height: 120px;
43
+ position: relative;
44
+ }
45
+
46
+ .gauge-body {
47
+ width: 100%;
48
+ height: 100%;
49
+ border-radius: 50%;
50
+ background: conic-gradient(
51
+ #4ade80 0% 25%,
52
+ #facc15 25% 75%,
53
+ #f87171 75% 100%
54
+ );
55
+ position: relative;
56
+ display: flex;
57
+ align-items: center;
58
+ justify-content: center;
59
+ }
60
+
61
+ .gauge-inner {
62
+ width: 80%;
63
+ height: 80%;
64
+ background: white;
65
+ border-radius: 50%;
66
+ display: flex;
67
+ flex-direction: column;
68
+ align-items: center;
69
+ justify-content: center;
70
+ }
71
+
72
+ .task-item:hover {
73
+ transform: translateY(-2px);
74
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
75
+ }
76
+
77
+ .file-item:hover {
78
+ background-color: #f8fafc;
79
+ }
80
+
81
+ .timeline-item {
82
+ position: relative;
83
+ padding-left: 2rem;
84
+ }
85
+
86
+ .timeline-item:before {
87
+ content: '';
88
+ position: absolute;
89
+ left: 0.5rem;
90
+ top: 0;
91
+ height: 100%;
92
+ width: 2px;
93
+ background-color: #e2e8f0;
94
+ }
95
+
96
+ .timeline-dot {
97
+ position: absolute;
98
+ left: 0;
99
+ top: 0.25rem;
100
+ width: 1rem;
101
+ height: 1rem;
102
+ border-radius: 50%;
103
+ background-color: #3b82f6;
104
+ border: 2px solid white;
105
+ }
106
+
107
+ @media (max-width: 768px) {
108
+ .dashboard-grid {
109
+ grid-template-columns: 1fr;
110
+ }
111
+
112
+ #bim-viewer {
113
+ height: 300px;
114
+ }
115
+ }
116
+ </style>
117
+ </head>
118
+ <body class="bg-gray-50 text-gray-800">
119
+ <!-- Navigation -->
120
+ <nav class="bg-white shadow-sm">
121
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
122
+ <div class="flex justify-between h-16">
123
+ <div class="flex items-center">
124
+ <div class="flex-shrink-0 flex items-center">
125
+ <i class="fas fa-building text-blue-600 text-2xl mr-2"></i>
126
+ <span class="text-xl font-bold text-gray-900">ConstructFlow</span>
127
+ </div>
128
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
129
+ <a href="#" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a>
130
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Projects</a>
131
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Team</a>
132
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Reports</a>
133
+ </div>
134
+ </div>
135
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
136
+ <div class="ml-3 relative">
137
+ <div class="flex items-center space-x-4">
138
+ <div class="relative">
139
+ <button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
140
+ <i class="fas fa-bell text-xl"></i>
141
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
142
+ </button>
143
+ </div>
144
+ <div class="relative">
145
+ <button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
146
+ <i class="fas fa-comment-dots text-xl"></i>
147
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-blue-500"></span>
148
+ </button>
149
+ </div>
150
+ <div class="flex items-center">
151
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
152
+ <span class="ml-2 text-sm font-medium">John Doe</span>
153
+ <i class="fas fa-chevron-down ml-1 text-gray-400"></i>
154
+ </div>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ <div class="-mr-2 flex items-center sm:hidden">
159
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false">
160
+ <i class="fas fa-bars"></i>
161
+ </button>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </nav>
166
+
167
+ <!-- Main Content -->
168
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
169
+ <!-- Project Header -->
170
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
171
+ <div>
172
+ <h1 class="text-2xl font-bold text-gray-900">Riverfront Tower Project</h1>
173
+ <p class="text-gray-500">123 Main St, Portland, OR • Project ID: RF-2023-001</p>
174
+ </div>
175
+ <div class="mt-4 md:mt-0 flex space-x-3">
176
+ <button class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
177
+ <i class="fas fa-share-alt mr-2"></i> Share
178
+ </button>
179
+ <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
180
+ <i class="fas fa-plus mr-2"></i> New Task
181
+ </button>
182
+ </div>
183
+ </div>
184
+
185
+ <!-- Project Status -->
186
+ <div class="bg-white shadow rounded-lg p-4 mb-6">
187
+ <div class="flex flex-wrap items-center justify-between">
188
+ <div class="flex items-center space-x-4 mb-4 md:mb-0">
189
+ <div>
190
+ <span class="text-sm font-medium text-gray-500">Status</span>
191
+ <div class="flex items-center mt-1">
192
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Active</span>
193
+ <span class="ml-2 text-sm text-gray-500">Phase 2 of 5</span>
194
+ </div>
195
+ </div>
196
+ <div>
197
+ <span class="text-sm font-medium text-gray-500">Timeline</span>
198
+ <div class="flex items-center mt-1">
199
+ <span class="text-sm font-medium text-gray-900">45 days remaining</span>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ <div class="flex items-center space-x-4">
204
+ <div class="text-center">
205
+ <span class="text-sm font-medium text-gray-500">Budget</span>
206
+ <div class="mt-1">
207
+ <span class="text-sm font-medium text-gray-900">$2.4M / $3.2M</span>
208
+ <div class="w-32 h-2 bg-gray-200 rounded-full mt-1">
209
+ <div class="h-2 bg-blue-600 rounded-full" style="width: 75%"></div>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ <div class="text-center">
214
+ <span class="text-sm font-medium text-gray-500">CO₂ Saved</span>
215
+ <div class="mt-1">
216
+ <span class="text-sm font-medium text-gray-900">124 tons</span>
217
+ <div class="w-32 h-2 bg-gray-200 rounded-full mt-1">
218
+ <div class="h-2 bg-green-500 rounded-full" style="width: 62%"></div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </div>
225
+
226
+ <!-- Main Dashboard Grid -->
227
+ <div class="dashboard-grid grid grid-cols-1 lg:grid-cols-3 gap-6">
228
+ <!-- Left Column (3D Viewer) -->
229
+ <div class="lg:col-span-2 space-y-6">
230
+ <!-- 3D BIM/IFC Viewer -->
231
+ <div class="bg-white shadow rounded-lg overflow-hidden">
232
+ <div class="px-4 py-3 border-b border-gray-200 flex justify-between items-center">
233
+ <h2 class="text-lg font-medium text-gray-900">3D Model Viewer</h2>
234
+ <div class="flex space-x-2">
235
+ <button class="p-1 rounded text-gray-500 hover:text-gray-700 hover:bg-gray-100">
236
+ <i class="fas fa-layer-group"></i>
237
+ </button>
238
+ <button class="p-1 rounded text-gray-500 hover:text-gray-700 hover:bg-gray-100">
239
+ <i class="fas fa-ruler-combined"></i>
240
+ </button>
241
+ <button class="p-1 rounded text-gray-500 hover:text-gray-700 hover:bg-gray-100">
242
+ <i class="fas fa-comment"></i>
243
+ </button>
244
+ <button class="p-1 rounded text-gray-500 hover:text-gray-700 hover:bg-gray-100">
245
+ <i class="fas fa-expand"></i>
246
+ </button>
247
+ </div>
248
+ </div>
249
+ <div id="bim-viewer">
250
+ <!-- Placeholder for 3D viewer - would be replaced with actual viewer like xeokit, Forge, etc. -->
251
+ <div class="absolute inset-0 flex items-center justify-center">
252
+ <div class="text-center">
253
+ <i class="fas fa-cube text-6xl text-gray-300 mb-4"></i>
254
+ <p class="text-gray-500 font-medium">3D Model Viewer</p>
255
+ <p class="text-gray-400 text-sm mt-1">IFC/BIM model would be displayed here</p>
256
+ </div>
257
+ </div>
258
+ <div class="viewer-controls">
259
+ <button class="bg-white p-2 rounded-full shadow-md hover:bg-gray-100">
260
+ <i class="fas fa-arrows-alt text-gray-700"></i>
261
+ </button>
262
+ <button class="bg-white p-2 rounded-full shadow-md hover:bg-gray-100">
263
+ <i class="fas fa-search-plus text-gray-700"></i>
264
+ </button>
265
+ <button class="bg-white p-2 rounded-full shadow-md hover:bg-gray-100">
266
+ <i class="fas fa-search-minus text-gray-700"></i>
267
+ </button>
268
+ <button class="bg-white p-2 rounded-full shadow-md hover:bg-gray-100">
269
+ <i class="fas fa-home text-gray-700"></i>
270
+ </button>
271
+ </div>
272
+ <div class="phase-indicator">
273
+ <i class="fas fa-hard-hat text-blue-500 mr-1"></i>
274
+ <span>Structural Framing Phase</span>
275
+ </div>
276
+ </div>
277
+ </div>
278
+
279
+ <!-- Task Manager -->
280
+ <div class="bg-white shadow rounded-lg overflow-hidden">
281
+ <div class="px-4 py-3 border-b border-gray-200 flex justify-between items-center">
282
+ <h2 class="text-lg font-medium text-gray-900">Tasks</h2>
283
+ <div class="flex space-x-2">
284
+ <button class="p-1 rounded text-gray-500 hover:text-gray-700 hover:bg-gray-100">
285
+ <i class="fas fa-filter"></i>
286
+ </button>
287
+ <button class="p-1 rounded text-gray-500 hover:text-gray-700 hover:bg-gray-100">
288
+ <i class="fas fa-sort"></i>
289
+ </button>
290
+ </div>
291
+ </div>
292
+ <div class="divide-y divide-gray-200">
293
+ <!-- Task Item -->
294
+ <div class="task-item p-4 hover:bg-gray-50 transition-all duration-150 cursor-pointer">
295
+ <div class="flex items-start">
296
+ <div class="flex-shrink-0 pt-0.5">
297
+ <div class="h-5 w-5 rounded-full bg-blue-100 flex items-center justify-center">
298
+ <input type="checkbox" class="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500">
299
+ </div>
300
+ </div>
301
+ <div class="ml-3 flex-1">
302
+ <div class="flex items-center justify-between">
303
+ <p class="text-sm font-medium text-gray-900">Install steel beams - Level 3</p>
304
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">High</span>
305
+ </div>
306
+ <p class="text-sm text-gray-500 mt-1">Structural steel needs to be installed before concrete pouring can begin.</p>
307
+ <div class="mt-2 flex items-center text-xs text-gray-500">
308
+ <span class="flex items-center mr-3">
309
+ <i class="fas fa-calendar-alt mr-1"></i>
310
+ Due tomorrow
311
+ </span>
312
+ <span class="flex items-center mr-3">
313
+ <i class="fas fa-user-hard-hat mr-1"></i>
314
+ Steel Crew
315
+ </span>
316
+ <span class="flex items-center">
317
+ <i class="fas fa-comments mr-1"></i>
318
+ 3 comments
319
+ </span>
320
+ </div>
321
+ </div>
322
+ </div>
323
+ </div>
324
+
325
+ <!-- Task Item -->
326
+ <div class="task-item p-4 hover:bg-gray-50 transition-all duration-150 cursor-pointer">
327
+ <div class="flex items-start">
328
+ <div class="flex-shrink-0 pt-0.5">
329
+ <div class="h-5 w-5 rounded-full bg-blue-100 flex items-center justify-center">
330
+ <input type="checkbox" class="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500">
331
+ </div>
332
+ </div>
333
+ <div class="ml-3 flex-1">
334
+ <div class="flex items-center justify-between">
335
+ <p class="text-sm font-medium text-gray-900">Inspect concrete pour - Basement</p>
336
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">Medium</span>
337
+ </div>
338
+ <p class="text-sm text-gray-500 mt-1">Quality control inspection required before proceeding with next phase.</p>
339
+ <div class="mt-2 flex items-center text-xs text-gray-500">
340
+ <span class="flex items-center mr-3">
341
+ <i class="fas fa-calendar-alt mr-1"></i>
342
+ Due in 2 days
343
+ </span>
344
+ <span class="flex items-center mr-3">
345
+ <i class="fas fa-user-hard-hat mr-1"></i>
346
+ QC Team
347
+ </span>
348
+ <span class="flex items-center">
349
+ <i class="fas fa-paperclip mr-1"></i>
350
+ 1 attachment
351
+ </span>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+
357
+ <!-- Task Item -->
358
+ <div class="task-item p-4 hover:bg-gray-50 transition-all duration-150 cursor-pointer">
359
+ <div class="flex items-start">
360
+ <div class="flex-shrink-0 pt-0.5">
361
+ <div class="h-5 w-5 rounded-full bg-blue-100 flex items-center justify-center">
362
+ <input type="checkbox" class="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500" checked>
363
+ </div>
364
+ </div>
365
+ <div class="ml-3 flex-1">
366
+ <div class="flex items-center justify-between">
367
+ <p class="text-sm font-medium text-gray-900">Order window frames</p>
368
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">Completed</span>
369
+ </div>
370
+ <p class="text-sm text-gray-500 mt-1">Order placed with supplier, expected delivery in 3 weeks.</p>
371
+ <div class="mt-2 flex items-center text-xs text-gray-500">
372
+ <span class="flex items-center mr-3">
373
+ <i class="fas fa-calendar-check mr-1"></i>
374
+ Completed today
375
+ </span>
376
+ <span class="flex items-center mr-3">
377
+ <i class="fas fa-user-hard-hat mr-1"></i>
378
+ Procurement
379
+ </span>
380
+ <span class="flex items-center">
381
+ <i class="fas fa-file-invoice-dollar mr-1"></i>
382
+ PO #45678
383
+ </span>
384
+ </div>
385
+ </div>
386
+ </div>
387
+ </div>
388
+ </div>
389
+ <div class="px-4 py-3 bg-gray-50 text-right">
390
+ <button class="text-sm font-medium text-blue-600 hover:text-blue-500">View all tasks (24)</button>
391
+ </div>
392
+ </div>
393
+ </div>
394
+
395
+ <!-- Right Column -->
396
+ <div class="space-y-6">
397
+ <!-- CO₂ Tracker -->
398
+ <div class="bg-white shadow rounded-lg overflow-hidden">
399
+ <div class="px-4 py-3 border-b border-gray-200">
400
+ <h2 class="text-lg font-medium text-gray-900">CO₂ Emissions Tracker</h2>
401
+ </div>
402
+ <div class="p-4">
403
+ <div class="flex justify-center mb-4">
404
+ <div class="co2-gauge">
405
+ <div class="gauge-body">
406
+ <div class="gauge-inner">
407
+ <span class="text-2xl font-bold text-gray-800">1.2</span>
408
+ <span class="text-xs text-gray-500">tons/m²</span>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ </div>
413
+ <div class="space-y-3">
414
+ <div>
415
+ <div class="flex justify-between text-sm font-medium mb-1">
416
+ <span class="text-gray-700">Current Phase</span>
417
+ <span class="text-blue-600">42 tons</span>
418
+ </div>
419
+ <div class="w-full bg-gray-200 rounded-full h-2">
420
+ <div class="bg-blue-600 h-2 rounded-full" style="width: 45%"></div>
421
+ </div>
422
+ </div>
423
+ <div>
424
+ <div class="flex justify-between text-sm font-medium mb-1">
425
+ <span class="text-gray-700">Project Total</span>
426
+ <span class="text-green-600">124/200 tons</span>
427
+ </div>
428
+ <div class="w-full bg-gray-200 rounded-full h-2">
429
+ <div class="bg-green-500 h-2 rounded-full" style="width: 62%"></div>
430
+ </div>
431
+ </div>
432
+ <div>
433
+ <div class="flex justify-between text-sm font-medium mb-1">
434
+ <span class="text-gray-700">Industry Benchmark</span>
435
+ <span class="text-gray-600">1.8 tons/m²</span>
436
+ </div>
437
+ <div class="w-full bg-gray-200 rounded-full h-2">
438
+ <div class="bg-gray-400 h-2 rounded-full" style="width: 100%"></div>
439
+ </div>
440
+ </div>
441
+ </div>
442
+ <div class="mt-4 pt-4 border-t border-gray-200">
443
+ <h3 class="text-sm font-medium text-gray-900 mb-2">Breakdown by Material</h3>
444
+ <div class="space-y-2">
445
+ <div class="flex justify-between text-sm">
446
+ <span class="text-gray-600">Concrete</span>
447
+ <span class="font-medium">68 tons (55%)</span>
448
+ </div>
449
+ <div class="flex justify-between text-sm">
450
+ <span class="text-gray-600">Steel</span>
451
+ <span class="font-medium">32 tons (26%)</span>
452
+ </div>
453
+ <div class="flex justify-between text-sm">
454
+ <span class="text-gray-600">Transport</span>
455
+ <span class="font-medium">12 tons (10%)</span>
456
+ </div>
457
+ <div class="flex justify-between text-sm">
458
+ <span class="text-gray-600">Other</span>
459
+ <span class="font-medium">12 tons (9%)</span>
460
+ </div>
461
+ </div>
462
+ </div>
463
+ </div>
464
+ </div>
465
+
466
+ <!-- File Manager -->
467
+ <div class="bg-white shadow rounded-lg overflow-hidden">
468
+ <div class="px-4 py-3 border-b border-gray-200 flex justify-between items-center">
469
+ <h2 class="text-lg font-medium text-gray-900">Files & Documents</h2>
470
+ <button class="p-1 rounded text-gray-500 hover:text-gray-700 hover:bg-gray-100">
471
+ <i class="fas fa-ellipsis-v"></i>
472
+ </button>
473
+ </div>
474
+ <div class="divide-y divide-gray-200">
475
+ <!-- File Item -->
476
+ <div class="file-item p-3 hover:bg-gray-50 transition-colors duration-150 cursor-pointer">
477
+ <div class="flex items-center">
478
+ <div class="flex-shrink-0 bg-blue-100 rounded-md p-2">
479
+ <i class="fas fa-file-pdf text-blue-600"></i>
480
+ </div>
481
+ <div class="ml-3 flex-1 min-w-0">
482
+ <p class="text-sm font-medium text-gray-900 truncate">Structural_Design_v3.pdf</p>
483
+ <div class="flex items-center text-xs text-gray-500 mt-1">
484
+ <span class="truncate">2.4 MB</span>
485
+ <span class="mx-1">•</span>
486
+ <span class="truncate">Updated 2 days ago</span>
487
+ </div>
488
+ </div>
489
+ <div class="ml-2 flex-shrink-0 flex">
490
+ <button class="p-1 rounded text-gray-400 hover:text-gray-500 hover:bg-gray-100">
491
+ <i class="fas fa-ellipsis-v"></i>
492
+ </button>
493
+ </div>
494
+ </div>
495
+ </div>
496
+
497
+ <!-- File Item -->
498
+ <div class="file-item p-3 hover:bg-gray-50 transition-colors duration-150 cursor-pointer">
499
+ <div class="flex items-center">
500
+ <div class="flex-shrink-0 bg-green-100 rounded-md p-2">
501
+ <i class="fas fa-file-excel text-green-600"></i>
502
+ </div>
503
+ <div class="ml-3 flex-1 min-w-0">
504
+ <p class="text-sm font-medium text-gray-900 truncate">Material_Schedule.xlsx</p>
505
+ <div class="flex items-center text-xs text-gray-500 mt-1">
506
+ <span class="truncate">1.7 MB</span>
507
+ <span class="mx-1">•</span>
508
+ <span class="truncate">Updated today</span>
509
+ </div>
510
+ </div>
511
+ <div class="ml-2 flex-shrink-0 flex">
512
+ <button class="p-1 rounded text-gray-400 hover:text-gray-500 hover:bg-gray-100">
513
+ <i class="fas fa-ellipsis-v"></i>
514
+ </button>
515
+ </div>
516
+ </div>
517
+ </div>
518
+
519
+ <!-- File Item -->
520
+ <div class="file-item p-3 hover:bg-gray-50 transition-colors duration-150 cursor-pointer">
521
+ <div class="flex items-center">
522
+ <div class="flex-shrink-0 bg-purple-100 rounded-md p-2">
523
+ <i class="fas fa-file-image text-purple-600"></i>
524
+ </div>
525
+ <div class="ml-3 flex-1 min-w-0">
526
+ <p class="text-sm font-medium text-gray-900 truncate">Site_Progress_Photos.zip</p>
527
+ <div class="flex items-center text-xs text-gray-500 mt-1">
528
+ <span class="truncate">24.5 MB</span>
529
+ <span class="mx-1">•</span>
530
+ <span class="truncate">Updated 1 week ago</span>
531
+ </div>
532
+ </div>
533
+ <div class="ml-2 flex-shrink-0 flex">
534
+ <button class="p-1 rounded text-gray-400 hover:text-gray-500 hover:bg-gray-100">
535
+ <i class="fas fa-ellipsis-v"></i>
536
+ </button>
537
+ </div>
538
+ </div>
539
+ </div>
540
+
541
+ <!-- File Item -->
542
+ <div class="file-item p-3 hover:bg-gray-50 transition-colors duration-150 cursor-pointer">
543
+ <div class="flex items-center">
544
+ <div class="flex-shrink-0 bg-yellow-100 rounded-md p-2">
545
+ <i class="fas fa-file-word text-yellow-600"></i>
546
+ </div>
547
+ <div class="ml-3 flex-1 min-w-0">
548
+ <p class="text-sm font-medium text-gray-900 truncate">Contract_Amendment.docx</p>
549
+ <div class="flex items-center text-xs text-gray-500 mt-1">
550
+ <span class="truncate">0.8 MB</span>
551
+ <span class="mx-1">•</span>
552
+ <span class="truncate">Updated yesterday</span>
553
+ </div>
554
+ </div>
555
+ <div class="ml-2 flex-shrink-0 flex">
556
+ <button class="p-1 rounded text-gray-400 hover:text-gray-500 hover:bg-gray-100">
557
+ <i class="fas fa-ellipsis-v"></i>
558
+ </button>
559
+ </div>
560
+ </div>
561
+ </div>
562
+ </div>
563
+ <div class="px-4 py-3 bg-gray-50 text-center">
564
+ <button class="inline-flex items-center text-sm font-medium text-blue-600 hover:text-blue-500">
565
+ <i class="fas fa-cloud-upload-alt mr-2"></i>
566
+ Upload New File
567
+ </button>
568
+ </div>
569
+ </div>
570
+
571
+ <!-- Timeline -->
572
+ <div class="bg-white shadow rounded-lg overflow-hidden">
573
+ <div class="px-4 py-3 border-b border-gray-200">
574
+ <h2 class="text-lg font-medium text-gray-900">Project Timeline</h2>
575
+ </div>
576
+ <div class="p-4">
577
+ <div class="space-y-4">
578
+ <!-- Timeline Item -->
579
+ <div class="timeline-item">
580
+ <div class="timeline-dot"></div>
581
+ <div class="pl-4">
582
+ <div class="flex justify-between">
583
+ <span class="text-sm font-medium text-gray-900">Foundation Complete</span>
584
+ <span class="text-xs text-gray-500">May 15</span>
585
+ </div>
586
+ <p class="text-xs text-gray-500 mt-1">All foundation work completed and inspected</p>
587
+ </div>
588
+ </div>
589
+
590
+ <!-- Timeline Item -->
591
+ <div class="timeline-item">
592
+ <div class="timeline-dot bg-green-500"></div>
593
+ <div class="pl-4">
594
+ <div class="flex justify-between">
595
+ <span class="text-sm font-medium text-gray-900">Structural Framing</span>
596
+ <span class="text-xs text-gray-500">May 16 - Jun 30</span>
597
+ </div>
598
+ <p class="text-xs text-gray-500 mt-1">Current phase - 65% complete</p>
599
+ <div class="w-full bg-gray-200 rounded-full h-1.5 mt-2">
600
+ <div class="bg-green-500 h-1.5 rounded-full" style="width: 65%"></div>
601
+ </div>
602
+ </div>
603
+ </div>
604
+
605
+ <!-- Timeline Item -->
606
+ <div class="timeline-item">
607
+ <div class="timeline-dot bg-gray-300"></div>
608
+ <div class="pl-4">
609
+ <div class="flex justify-between">
610
+ <span class="text-sm font-medium text-gray-900">Enclosure</span>
611
+ <span class="text-xs text-gray-500">Jul 1 - Aug 15</span>
612
+ </div>
613
+ <p class="text-xs text-gray-500 mt-1">Windows, roofing and exterior walls</p>
614
+ </div>
615
+ </div>
616
+
617
+ <!-- Timeline Item -->
618
+ <div class="timeline-item">
619
+ <div class="timeline-dot bg-gray-300"></div>
620
+ <div class="pl-4">
621
+ <div class="flex justify-between">
622
+ <span class="text-sm font-medium text-gray-900">MEP Rough-in</span>
623
+ <span class="text-xs text-gray-500">Aug 16 - Sep 30</span>
624
+ </div>
625
+ <p class="text-xs text-gray-500 mt-1">Mechanical, electrical and plumbing</p>
626
+ </div>
627
+ </div>
628
+
629
+ <!-- Timeline Item -->
630
+ <div class="timeline-item">
631
+ <div class="timeline-dot bg-gray-300"></div>
632
+ <div class="pl-4">
633
+ <div class="flex justify-between">
634
+ <span class="text-sm font-medium text-gray-900">Interior Finishes</span>
635
+ <span class="text-xs text-gray-500">Oct 1 - Nov 15</span>
636
+ </div>
637
+ <p class="text-xs text-gray-500 mt-1">Drywall, flooring, painting, fixtures</p>
638
+ </div>
639
+ </div>
640
+ </div>
641
+ <div class="mt-4 pt-4 border-t border-gray-200 text-center">
642
+ <button class="text-sm font-medium text-blue-600 hover:text-blue-500">View Full Timeline</button>
643
+ </div>
644
+ </div>
645
+ </div>
646
+ </div>
647
+ </div>
648
+ </div>
649
+
650
+ <!-- Team Collaboration Footer -->
651
+ <div class="bg-white border-t border-gray-200 fixed bottom-0 left-0 right-0">
652
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
653
+ <div class="flex justify-between items-center py-2">
654
+ <div class="flex items-center space-x-4">
655
+ <div class="flex -space-x-2">
656
+ <img class="h-8 w-8 rounded-full border-2 border-white" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
657
+ <img class="h-8 w-8 rounded-full border-2 border-white" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
658
+ <img class="h-8 w-8 rounded-full border-2 border-white" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80" alt="">
659
+ <span class="h-8 w-8 rounded-full border-2 border-white bg-gray-100 flex items-center justify-center text-xs font-medium text-gray-500">+5</span>
660
+ </div>
661
+ <span class="text-sm text-gray-500">6 team members online</span>
662
+ </div>
663
+ <div class="flex items-center space-x-4">
664
+ <button class="p-2 rounded-full text-gray-400 hover:text-gray-500 hover:bg-gray-100">
665
+ <i class="fas fa-video"></i>
666
+ </button>
667
+ <button class="p-2 rounded-full text-gray-400 hover:text-gray-500 hover:bg-gray-100">
668
+ <i class="fas fa-phone"></i>
669
+ </button>
670
+ <div class="relative">
671
+ <input type="text" class="w-64 rounded-full border-gray-300 pl-4 pr-10 py-2 text-sm focus:ring-blue-500 focus:border-blue-500" placeholder="Message the team...">
672
+ <button class="absolute right-2 top-1/2 transform -translate-y-1/2 p-1 rounded-full text-gray-400 hover:text-gray-500">
673
+ <i class="fas fa-paper-plane"></i>
674
+ </button>
675
+ </div>
676
+ </div>
677
+ </div>
678
+ </div>
679
+ </div>
680
+
681
+ <script>
682
+ // This would be replaced with actual BIM viewer initialization in a real implementation
683
+ document.addEventListener('DOMContentLoaded', function() {
684
+ // Simulate loading the BIM viewer
685
+ setTimeout(() => {
686
+ const viewer = document.getElementById('bim-viewer');
687
+ viewer.innerHTML = `
688
+ <div class="absolute inset-0 flex items-center justify-center">
689
+ <div class="text-center">
690
+ <i class="fas fa-cube text-6xl text-blue-500 mb-4 animate-pulse"></i>
691
+ <p class="text-gray-700 font-medium">Loading 3D Model</p>
692
+ <p class="text-gray-500 text-sm mt-1">Riverfront_Tower_L3.ifc</p>
693
+ <div class="w-32 h-1 bg-gray-200 rounded-full mt-4 mx-auto">
694
+ <div class="h-1 bg-blue-500 rounded-full animate-progress" style="width: 0%"></div>
695
+ </div>
696
+ </div>
697
+ </div>
698
+ `;
699
+
700
+ // Simulate progress
701
+ let progress = 0;
702
+ const progressInterval = setInterval(() => {
703
+ progress += 5;
704
+ const progressBar = document.querySelector('.animate-progress');
705
+ if (progressBar) progressBar.style.width = `${progress}%`;
706
+
707
+ if (progress >= 100) {
708
+ clearInterval(progressInterval);
709
+ viewer.innerHTML = `
710
+ <div class="absolute inset-0 flex items-center justify-center">
711
+ <div class="text-center">
712
+ <i class="fas fa-check-circle text-6xl text-green-500 mb-4"></i>
713
+ <p class="text-gray-700 font-medium">Model Loaded Successfully</p>
714
+ <p class="text-gray-500 text-sm mt-1">3D visualization ready</p>
715
+ <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
716
+ Explore Model
717
+ </button>
718
+ </div>
719
+ </div>
720
+ <div class="viewer-controls">
721
+ <button class="bg-white p-2 rounded-full shadow-md hover:bg-gray-100">
722
+ <i class="fas fa-arrows-alt text-gray-700"></i>
723
+ </button>
724
+ <button class="bg-white p-2 rounded-full shadow-md hover:bg-gray-100">
725
+ <i class="fas fa-search-plus text-gray-700"></i>
726
+ </button>
727
+ <button class="bg-white p-2 rounded-full shadow-md hover:bg-gray-100">
728
+ <i class="fas fa-search-minus text-gray-700"></i>
729
+ </button>
730
+ <button class="bg-white p-2 rounded-full shadow-md hover:bg-gray-100">
731
+ <i class="fas fa-home text-gray-700"></i>
732
+ </button>
733
+ </div>
734
+ <div class="phase-indicator">
735
+ <i class="fas fa-hard-hat text-blue-500 mr-1"></i>
736
+ <span>Structural Framing Phase</span>
737
+ </div>
738
+ `;
739
+ }
740
+ }, 100);
741
+ }, 1000);
742
+
743
+ // Task completion toggle
744
+ document.querySelectorAll('.task-item input[type="checkbox"]').forEach(checkbox => {
745
+ checkbox.addEventListener('change', function() {
746
+ const taskItem = this.closest('.task-item');
747
+ if (this.checked) {
748
+ taskItem.classList.add('opacity-70');
749
+ } else {
750
+ taskItem.classList.remove('opacity-70');
751
+ }
752
+ });
753
+ });
754
+
755
+ // Simulate real-time collaboration
756
+ setInterval(() => {
757
+ const teamMembers = document.querySelectorAll('.flex.-space-x-2 img');
758
+ const randomMember = teamMembers[Math.floor(Math.random() * teamMembers.length)];
759
+
760
+ // Add pulse animation to show activity
761
+ randomMember.classList.add('animate-pulse');
762
+ setTimeout(() => {
763
+ randomMember.classList.remove('animate-pulse');
764
+ }, 1000);
765
+
766
+ // Randomly show a notification
767
+ if (Math.random() > 0.7) {
768
+ const notifications = [
769
+ "John updated task 'Install steel beams'",
770
+ "Sarah uploaded a new document",
771
+ "Mike commented on the foundation design",
772
+ "New message from the architect"
773
+ ];
774
+
775
+ const notification = document.createElement('div');
776
+ notification.className = 'fixed bottom-20 right-4 bg-white shadow-lg rounded-lg p-3 text-sm max-w-xs animate-fade-in-up';
777
+ notification.innerHTML = `
778
+ <div class="flex items-start">
779
+ <div class="flex-shrink-0">
780
+ <i class="fas fa-bell text-blue-500"></i>
781
+ </div>
782
+ <div class="ml-2">
783
+ <p class="font-medium text-gray-900">${notifications[Math.floor(Math.random() * notifications.length)]}</p>
784
+ <p class="text-xs text-gray-500 mt-1">Just now</p>
785
+ </div>
786
+ <button class="ml-2 text-gray-400 hover:text-gray-500" onclick="this.parentElement.remove()">
787
+ <i class="fas fa-times"></i>
788
+ </button>
789
+ </div>
790
+ `;
791
+ document.body.appendChild(notification);
792
+
793
+ setTimeout(() => {
794
+ notification.remove();
795
+ }, 5000);
796
+ }
797
+ }, 5000);
798
+ });
799
+ </script>
800
+ <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=JarlJarle/constructflow" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
801
+ </html>