Hugging Face's logo

Spaces:
JarlJarle
/
bimlibai
Running

App Files Community
JarlJarle commited on
Commit
1cfbb54
·
verified ·
1 Parent(s): 6c1571e

an app for creating, updating and maintain BIM models for high end library - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +622 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Bimlibai
3
- emoji: 🔥
4
  colorFrom: pink
5
- colorTo: pink
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: bimlibai
3
+ emoji: 🐳
4
  colorFrom: pink
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,622 @@
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>LibraryBIM - High-End Library BIM 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
+ .model-viewer {
11
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
12
+ border-radius: 12px;
13
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
14
+ }
15
+
16
+ .sidebar {
17
+ transition: all 0.3s ease;
18
+ }
19
+
20
+ .collaboration-avatar {
21
+ transition: all 0.3s ease;
22
+ }
23
+
24
+ .collaboration-avatar:hover {
25
+ transform: translateY(-5px);
26
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
27
+ }
28
+
29
+ .bim-element {
30
+ transition: all 0.2s ease;
31
+ }
32
+
33
+ .bim-element:hover {
34
+ transform: scale(1.02);
35
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
36
+ }
37
+
38
+ @media (max-width: 768px) {
39
+ .sidebar {
40
+ position: absolute;
41
+ z-index: 50;
42
+ left: -100%;
43
+ }
44
+
45
+ .sidebar.active {
46
+ left: 0;
47
+ }
48
+ }
49
+
50
+ /* Custom scrollbar */
51
+ ::-webkit-scrollbar {
52
+ width: 8px;
53
+ }
54
+
55
+ ::-webkit-scrollbar-track {
56
+ background: #f1f1f1;
57
+ border-radius: 10px;
58
+ }
59
+
60
+ ::-webkit-scrollbar-thumb {
61
+ background: #888;
62
+ border-radius: 10px;
63
+ }
64
+
65
+ ::-webkit-scrollbar-thumb:hover {
66
+ background: #555;
67
+ }
68
+ </style>
69
+ </head>
70
+ <body class="bg-gray-50 font-sans">
71
+ <div class="flex h-screen overflow-hidden">
72
+ <!-- Sidebar -->
73
+ <div class="sidebar bg-indigo-900 text-white w-64 flex-shrink-0 overflow-y-auto">
74
+ <div class="p-4 flex items-center justify-between border-b border-indigo-800">
75
+ <div class="flex items-center space-x-2">
76
+ <i class="fas fa-book-open text-2xl text-indigo-300"></i>
77
+ <h1 class="text-xl font-bold">LibraryBIM</h1>
78
+ </div>
79
+ <button id="sidebarToggle" class="md:hidden text-gray-300 hover:text-white">
80
+ <i class="fas fa-times"></i>
81
+ </button>
82
+ </div>
83
+
84
+ <div class="p-4">
85
+ <div class="mb-6">
86
+ <h2 class="text-sm uppercase font-semibold text-indigo-400 mb-2">Current Project</h2>
87
+ <div class="bg-indigo-800 p-3 rounded-lg">
88
+ <h3 class="font-medium">New York Public Library - Renovation</h3>
89
+ <p class="text-xs text-indigo-300 mt-1">Version 3.2.1</p>
90
+ </div>
91
+ </div>
92
+
93
+ <div class="mb-6">
94
+ <h2 class="text-sm uppercase font-semibold text-indigo-400 mb-2">Navigation</h2>
95
+ <ul class="space-y-2">
96
+ <li>
97
+ <a href="#" class="flex items-center space-x-2 p-2 rounded-lg bg-indigo-800 text-white">
98
+ <i class="fas fa-cube"></i>
99
+ <span>3D Model</span>
100
+ </a>
101
+ </li>
102
+ <li>
103
+ <a href="#" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-indigo-800 text-indigo-100 hover:text-white">
104
+ <i class="fas fa-layer-group"></i>
105
+ <span>Elements</span>
106
+ </a>
107
+ </li>
108
+ <li>
109
+ <a href="#" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-indigo-800 text-indigo-100 hover:text-white">
110
+ <i class="fas fa-file-alt"></i>
111
+ <span>Documents</span>
112
+ </a>
113
+ </li>
114
+ <li>
115
+ <a href="#" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-indigo-800 text-indigo-100 hover:text-white">
116
+ <i class="fas fa-users"></i>
117
+ <span>Collaborators</span>
118
+ </a>
119
+ </li>
120
+ <li>
121
+ <a href="#" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-indigo-800 text-indigo-100 hover:text-white">
122
+ <i class="fas fa-chart-line"></i>
123
+ <span>Analytics</span>
124
+ </a>
125
+ </li>
126
+ </ul>
127
+ </div>
128
+
129
+ <div>
130
+ <h2 class="text-sm uppercase font-semibold text-indigo-400 mb-2">Recent Files</h2>
131
+ <ul class="space-y-2">
132
+ <li class="p-2 rounded-lg hover:bg-indigo-800 cursor-pointer">
133
+ <div class="flex items-center space-x-2">
134
+ <i class="fas fa-file text-indigo-300"></i>
135
+ <span class="text-sm">Floor_Plan_v3.1.rvt</span>
136
+ </div>
137
+ </li>
138
+ <li class="p-2 rounded-lg hover:bg-indigo-800 cursor-pointer">
139
+ <div class="flex items-center space-x-2">
140
+ <i class="fas fa-file text-indigo-300"></i>
141
+ <span class="text-sm">Lighting_Design.dwg</span>
142
+ </div>
143
+ </li>
144
+ <li class="p-2 rounded-lg hover:bg-indigo-800 cursor-pointer">
145
+ <div class="flex items-center space-x-2">
146
+ <i class="fas fa-file text-indigo-300"></i>
147
+ <span class="text-sm">Acoustic_Analysis.pdf</span>
148
+ </div>
149
+ </li>
150
+ </ul>
151
+ </div>
152
+ </div>
153
+ </div>
154
+
155
+ <!-- Main Content -->
156
+ <div class="flex-1 flex flex-col overflow-hidden">
157
+ <!-- Top Navigation -->
158
+ <header class="bg-white border-b border-gray-200 flex-shrink-0">
159
+ <div class="flex items-center justify-between p-4">
160
+ <div class="flex items-center space-x-4">
161
+ <button id="mobileSidebarToggle" class="md:hidden text-gray-600 hover:text-gray-900">
162
+ <i class="fas fa-bars"></i>
163
+ </button>
164
+ <h2 class="text-xl font-semibold text-gray-800">3D Model Viewer</h2>
165
+ </div>
166
+
167
+ <div class="flex items-center space-x-4">
168
+ <div class="relative">
169
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">
170
+ <i class="fas fa-bell"></i>
171
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
172
+ </button>
173
+ </div>
174
+
175
+ <div class="relative">
176
+ <button class="flex items-center space-x-2">
177
+ <div class="h-8 w-8 rounded-full bg-indigo-600 flex items-center justify-center text-white font-medium">JD</div>
178
+ <span class="hidden md:inline text-gray-700">John Doe</span>
179
+ <i class="fas fa-chevron-down text-xs text-gray-500"></i>
180
+ </button>
181
+ </div>
182
+ </div>
183
+ </div>
184
+
185
+ <div class="px-4 pb-4">
186
+ <div class="flex flex-wrap items-center justify-between gap-4">
187
+ <div class="flex space-x-2">
188
+ <button class="px-3 py-1 bg-indigo-600 text-white rounded-md text-sm flex items-center space-x-1">
189
+ <i class="fas fa-plus"></i>
190
+ <span>New Model</span>
191
+ </button>
192
+ <button class="px-3 py-1 bg-white border border-gray-300 rounded-md text-sm flex items-center space-x-1">
193
+ <i class="fas fa-upload"></i>
194
+ <span>Import</span>
195
+ </button>
196
+ <button class="px-3 py-1 bg-white border border-gray-300 rounded-md text-sm flex items-center space-x-1">
197
+ <i class="fas fa-share-alt"></i>
198
+ <span>Share</span>
199
+ </button>
200
+ </div>
201
+
202
+ <div class="flex items-center space-x-2">
203
+ <div class="relative">
204
+ <input type="text" placeholder="Search model..." class="pl-8 pr-4 py-1 border border-gray-300 rounded-md text-sm">
205
+ <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
206
+ </div>
207
+ <button class="p-2 rounded-md bg-gray-100 text-gray-600 hover:bg-gray-200">
208
+ <i class="fas fa-filter"></i>
209
+ </button>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </header>
214
+
215
+ <!-- Main Content Area -->
216
+ <main class="flex-1 overflow-auto p-4 bg-gray-100">
217
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
218
+ <!-- Model Viewer -->
219
+ <div class="lg:col-span-2">
220
+ <div class="model-viewer h-96 lg:h-full p-4 flex flex-col">
221
+ <div class="flex justify-between items-center mb-4">
222
+ <h3 class="font-medium text-gray-700">3D Model View</h3>
223
+ <div class="flex space-x-2">
224
+ <button class="p-2 bg-white rounded-md shadow-sm text-gray-600 hover:bg-gray-50">
225
+ <i class="fas fa-expand"></i>
226
+ </button>
227
+ <button class="p-2 bg-white rounded-md shadow-sm text-gray-600 hover:bg-gray-50">
228
+ <i class="fas fa-cog"></i>
229
+ </button>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- Placeholder for 3D model viewer -->
234
+ <div class="flex-1 bg-white rounded-lg flex items-center justify-center">
235
+ <div class="text-center p-6">
236
+ <i class="fas fa-cube text-5xl text-gray-300 mb-4"></i>
237
+ <h4 class="text-lg font-medium text-gray-600">3D Model Viewer</h4>
238
+ <p class="text-gray-500 mt-2">Interactive BIM model would appear here</p>
239
+ <button class="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-md text-sm">
240
+ Load Model
241
+ </button>
242
+ </div>
243
+ </div>
244
+
245
+ <div class="mt-4 flex justify-between items-center">
246
+ <div class="flex space-x-2">
247
+ <button class="p-2 bg-white rounded-md shadow-sm text-gray-600 hover:bg-gray-50">
248
+ <i class="fas fa-arrows-alt"></i>
249
+ </button>
250
+ <button class="p-2 bg-white rounded-md shadow-sm text-gray-600 hover:bg-gray-50">
251
+ <i class="fas fa-crop"></i>
252
+ </button>
253
+ <button class="p-2 bg-white rounded-md shadow-sm text-gray-600 hover:bg-gray-50">
254
+ <i class="fas fa-ruler"></i>
255
+ </button>
256
+ </div>
257
+ <div class="text-sm text-gray-500">
258
+ <span>Version 3.2.1</span>
259
+ <span class="mx-2">|</span>
260
+ <span>Last updated: 2 hours ago</span>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ </div>
265
+
266
+ <!-- Model Details and Elements -->
267
+ <div class="space-y-6">
268
+ <!-- Model Information -->
269
+ <div class="bg-white rounded-lg shadow-sm p-4">
270
+ <div class="flex justify-between items-center mb-4">
271
+ <h3 class="font-medium text-gray-700">Model Information</h3>
272
+ <button class="text-indigo-600 hover:text-indigo-800">
273
+ <i class="fas fa-pencil-alt"></i>
274
+ </button>
275
+ </div>
276
+
277
+ <div class="space-y-3">
278
+ <div>
279
+ <label class="text-xs text-gray-500">Project Name</label>
280
+ <p class="font-medium">New York Public Library - Renovation</p>
281
+ </div>
282
+ <div>
283
+ <label class="text-xs text-gray-500">Location</label>
284
+ <p class="font-medium">476 5th Ave, New York, NY 10018</p>
285
+ </div>
286
+ <div>
287
+ <label class="text-xs text-gray-500">BIM Manager</label>
288
+ <p class="font-medium">John Doe</p>
289
+ </div>
290
+ <div>
291
+ <label class="text-xs text-gray-500">Status</label>
292
+ <span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">In Progress</span>
293
+ </div>
294
+ </div>
295
+ </div>
296
+
297
+ <!-- Model Elements -->
298
+ <div class="bg-white rounded-lg shadow-sm p-4">
299
+ <div class="flex justify-between items-center mb-4">
300
+ <h3 class="font-medium text-gray-700">Model Elements</h3>
301
+ <div class="flex space-x-2">
302
+ <button class="text-indigo-600 hover:text-indigo-800">
303
+ <i class="fas fa-plus"></i>
304
+ </button>
305
+ <button class="text-gray-500 hover:text-gray-700">
306
+ <i class="fas fa-filter"></i>
307
+ </button>
308
+ </div>
309
+ </div>
310
+
311
+ <div class="space-y-3 max-h-64 overflow-y-auto">
312
+ <div class="bim-element p-3 border border-gray-100 rounded-lg hover:border-indigo-200 cursor-pointer">
313
+ <div class="flex justify-between items-center">
314
+ <div class="flex items-center space-x-3">
315
+ <div class="h-8 w-8 rounded-md bg-blue-100 flex items-center justify-center text-blue-600">
316
+ <i class="fas fa-columns"></i>
317
+ </div>
318
+ <div>
319
+ <p class="font-medium">Structural Columns</p>
320
+ <p class="text-xs text-gray-500">42 elements</p>
321
+ </div>
322
+ </div>
323
+ <i class="fas fa-chevron-right text-gray-400"></i>
324
+ </div>
325
+ </div>
326
+
327
+ <div class="bim-element p-3 border border-gray-100 rounded-lg hover:border-indigo-200 cursor-pointer">
328
+ <div class="flex justify-between items-center">
329
+ <div class="flex items-center space-x-3">
330
+ <div class="h-8 w-8 rounded-md bg-purple-100 flex items-center justify-center text-purple-600">
331
+ <i class="fas fa-book"></i>
332
+ </div>
333
+ <div>
334
+ <p class="font-medium">Bookshelves</p>
335
+ <p class="text-xs text-gray-500">128 elements</p>
336
+ </div>
337
+ </div>
338
+ <i class="fas fa-chevron-right text-gray-400"></i>
339
+ </div>
340
+ </div>
341
+
342
+ <div class="bim-element p-3 border border-gray-100 rounded-lg hover:border-indigo-200 cursor-pointer">
343
+ <div class="flex justify-between items-center">
344
+ <div class="flex items-center space-x-3">
345
+ <div class="h-8 w-8 rounded-md bg-yellow-100 flex items-center justify-center text-yellow-600">
346
+ <i class="fas fa-lightbulb"></i>
347
+ </div>
348
+ <div>
349
+ <p class="font-medium">Lighting Fixtures</p>
350
+ <p class="text-xs text-gray-500">76 elements</p>
351
+ </div>
352
+ </div>
353
+ <i class="fas fa-chevron-right text-gray-400"></i>
354
+ </div>
355
+ </div>
356
+
357
+ <div class="bim-element p-3 border border-gray-100 rounded-lg hover:border-indigo-200 cursor-pointer">
358
+ <div class="flex justify-between items-center">
359
+ <div class="flex items-center space-x-3">
360
+ <div class="h-8 w-8 rounded-md bg-green-100 flex items-center justify-center text-green-600">
361
+ <i class="fas fa-chair"></i>
362
+ </div>
363
+ <div>
364
+ <p class="font-medium">Reading Chairs</p>
365
+ <p class="text-xs text-gray-500">64 elements</p>
366
+ </div>
367
+ </div>
368
+ <i class="fas fa-chevron-right text-gray-400"></i>
369
+ </div>
370
+ </div>
371
+
372
+ <div class="bim-element p-3 border border-gray-100 rounded-lg hover:border-indigo-200 cursor-pointer">
373
+ <div class="flex justify-between items-center">
374
+ <div class="flex items-center space-x-3">
375
+ <div class="h-8 w-8 rounded-md bg-red-100 flex items-center justify-center text-red-600">
376
+ <i class="fas fa-fire-extinguisher"></i>
377
+ </div>
378
+ <div>
379
+ <p class="font-medium">Safety Equipment</p>
380
+ <p class="text-xs text-gray-500">18 elements</p>
381
+ </div>
382
+ </div>
383
+ <i class="fas fa-chevron-right text-gray-400"></i>
384
+ </div>
385
+ </div>
386
+ </div>
387
+ </div>
388
+
389
+ <!-- Collaboration -->
390
+ <div class="bg-white rounded-lg shadow-sm p-4">
391
+ <div class="flex justify-between items-center mb-4">
392
+ <h3 class="font-medium text-gray-700">Collaborators</h3>
393
+ <button class="text-indigo-600 hover:text-indigo-800">
394
+ <i class="fas fa-user-plus"></i>
395
+ </button>
396
+ </div>
397
+
398
+ <div class="flex flex-wrap gap-3">
399
+ <div class="collaboration-avatar relative">
400
+ <div class="h-10 w-10 rounded-full bg-indigo-600 flex items-center justify-center text-white font-medium">JD</div>
401
+ <div class="absolute -bottom-1 -right-1 h-4 w-4 rounded-full bg-green-500 border-2 border-white"></div>
402
+ </div>
403
+
404
+ <div class="collaboration-avatar relative">
405
+ <div class="h-10 w-10 rounded-full bg-purple-600 flex items-center justify-center text-white font-medium">AS</div>
406
+ <div class="absolute -bottom-1 -right-1 h-4 w-4 rounded-full bg-green-500 border-2 border-white"></div>
407
+ </div>
408
+
409
+ <div class="collaboration-avatar relative">
410
+ <div class="h-10 w-10 rounded-full bg-pink-600 flex items-center justify-center text-white font-medium">MR</div>
411
+ <div class="absolute -bottom-1 -right-1 h-4 w-4 rounded-full bg-yellow-500 border-2 border-white"></div>
412
+ </div>
413
+
414
+ <div class="collaboration-avatar relative">
415
+ <div class="h-10 w-10 rounded-full bg-blue-600 flex items-center justify-center text-white font-medium">TW</div>
416
+ <div class="absolute -bottom-1 -right-1 h-4 w-4 rounded-full bg-gray-500 border-2 border-white"></div>
417
+ </div>
418
+
419
+ <div class="collaboration-avatar relative">
420
+ <div class="h-10 w-10 rounded-full bg-green-600 flex items-center justify-center text-white font-medium">+3</div>
421
+ </div>
422
+ </div>
423
+
424
+ <div class="mt-4 p-3 bg-gray-50 rounded-lg">
425
+ <div class="flex items-start space-x-3">
426
+ <div class="flex-shrink-0">
427
+ <div class="h-8 w-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600">
428
+ <i class="fas fa-comment-alt"></i>
429
+ </div>
430
+ </div>
431
+ <div class="flex-1 min-w-0">
432
+ <p class="text-sm font-medium text-gray-800">John Doe</p>
433
+ <p class="text-sm text-gray-600">Has anyone reviewed the updated lighting plan for the reading area?</p>
434
+ <p class="text-xs text-gray-400 mt-1">2 minutes ago</p>
435
+ </div>
436
+ </div>
437
+ </div>
438
+
439
+ <div class="mt-3 flex items-center space-x-2">
440
+ <input type="text" placeholder="Add a comment..." class="flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm">
441
+ <button class="p-2 bg-indigo-600 text-white rounded-md">
442
+ <i class="fas fa-paper-plane"></i>
443
+ </button>
444
+ </div>
445
+ </div>
446
+ </div>
447
+ </div>
448
+
449
+ <!-- Recent Activity -->
450
+ <div class="mt-6 bg-white rounded-lg shadow-sm p-4">
451
+ <div class="flex justify-between items-center mb-4">
452
+ <h3 class="font-medium text-gray-700">Recent Activity</h3>
453
+ <button class="text-sm text-indigo-600 hover:text-indigo-800">View All</button>
454
+ </div>
455
+
456
+ <div class="space-y-4">
457
+ <div class="flex items-start space-x-3">
458
+ <div class="flex-shrink-0">
459
+ <div class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
460
+ <i class="fas fa-file-upload"></i>
461
+ </div>
462
+ </div>
463
+ <div class="flex-1 min-w-0">
464
+ <p class="text-sm text-gray-800"><span class="font-medium">Sarah Johnson</span> uploaded new version of <span class="font-medium">Structural_Plan.rvt</span></p>
465
+ <p class="text-xs text-gray-400 mt-1">1 hour ago</p>
466
+ </div>
467
+ </div>
468
+
469
+ <div class="flex items-start space-x-3">
470
+ <div class="flex-shrink-0">
471
+ <div class="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center text-green-600">
472
+ <i class="fas fa-check-circle"></i>
473
+ </div>
474
+ </div>
475
+ <div class="flex-1 min-w-0">
476
+ <p class="text-sm text-gray-800"><span class="font-medium">Michael Chen</span> approved the <span class="font-medium">Lighting Design</span></p>
477
+ <p class="text-xs text-gray-400 mt-1">3 hours ago</p>
478
+ </div>
479
+ </div>
480
+
481
+ <div class="flex items-start space-x-3">
482
+ <div class="flex-shrink-0">
483
+ <div class="h-8 w-8 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
484
+ <i class="fas fa-comment"></i>
485
+ </div>
486
+ </div>
487
+ <div class="flex-1 min-w-0">
488
+ <p class="text-sm text-gray-800"><span class="font-medium">Alex Smith</span> commented on <span class="font-medium">Bookshelf Layout</span>: "We need to adjust spacing for accessibility"</p>
489
+ <p class="text-xs text-gray-400 mt-1">5 hours ago</p>
490
+ </div>
491
+ </div>
492
+ </div>
493
+ </div>
494
+ </main>
495
+ </div>
496
+ </div>
497
+
498
+ <!-- Model Properties Panel (hidden by default) -->
499
+ <div id="propertiesPanel" class="fixed right-0 top-0 h-full w-80 bg-white shadow-lg transform translate-x-full transition-transform duration-300 z-40">
500
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center">
501
+ <h3 class="font-medium text-gray-700">Element Properties</h3>
502
+ <button id="closeProperties" class="text-gray-500 hover:text-gray-700">
503
+ <i class="fas fa-times"></i>
504
+ </button>
505
+ </div>
506
+ <div class="p-4 overflow-y-auto h-full">
507
+ <div class="space-y-4">
508
+ <div>
509
+ <label class="block text-sm font-medium text-gray-700 mb-1">Element Type</label>
510
+ <p class="text-sm bg-gray-100 p-2 rounded">Bookshelf - Standard (Type A)</p>
511
+ </div>
512
+
513
+ <div>
514
+ <label class="block text-sm font-medium text-gray-700 mb-1">Dimensions</label>
515
+ <div class="grid grid-cols-3 gap-2">
516
+ <div>
517
+ <label class="block text-xs text-gray-500">Width</label>
518
+ <p class="text-sm bg-gray-100 p-2 rounded">900 mm</p>
519
+ </div>
520
+ <div>
521
+ <label class="block text-xs text-gray-500">Height</label>
522
+ <p class="text-sm bg-gray-100 p-2 rounded">2200 mm</p>
523
+ </div>
524
+ <div>
525
+ <label class="block text-xs text-gray-500">Depth</label>
526
+ <p class="text-sm bg-gray-100 p-2 rounded">300 mm</p>
527
+ </div>
528
+ </div>
529
+ </div>
530
+
531
+ <div>
532
+ <label class="block text-sm font-medium text-gray-700 mb-1">Material</label>
533
+ <p class="text-sm bg-gray-100 p-2 rounded">Solid Oak with Clear Finish</p>
534
+ </div>
535
+
536
+ <div>
537
+ <label class="block text-sm font-medium text-gray-700 mb-1">Fire Rating</label>
538
+ <p class="text-sm bg-gray-100 p-2 rounded">30 minutes</p>
539
+ </div>
540
+
541
+ <div>
542
+ <label class="block text-sm font-medium text-gray-700 mb-1">Accessibility</label>
543
+ <p class="text-sm bg-gray-100 p-2 rounded">Compliant with ADA standards</p>
544
+ </div>
545
+
546
+ <div>
547
+ <label class="block text-sm font-medium text-gray-700 mb-1">Manufacturer</label>
548
+ <p class="text-sm bg-gray-100 p-2 rounded">Library Furnishings Inc.</p>
549
+ </div>
550
+
551
+ <div>
552
+ <label class="block text-sm font-medium text-gray-700 mb-1">Notes</label>
553
+ <textarea class="w-full border border-gray-300 rounded-md p-2 text-sm" rows="3">Adjust shelf heights to accommodate oversized art books in this section.</textarea>
554
+ </div>
555
+
556
+ <div class="pt-4">
557
+ <button class="w-full bg-indigo-600 text-white py-2 rounded-md text-sm font-medium">
558
+ Save Changes
559
+ </button>
560
+ </div>
561
+ </div>
562
+ </div>
563
+ </div>
564
+
565
+ <script>
566
+ // Toggle mobile sidebar
567
+ document.getElementById('mobileSidebarToggle').addEventListener('click', function() {
568
+ document.querySelector('.sidebar').classList.add('active');
569
+ });
570
+
571
+ document.getElementById('sidebarToggle').addEventListener('click', function() {
572
+ document.querySelector('.sidebar').classList.remove('active');
573
+ });
574
+
575
+ // Toggle properties panel
576
+ document.querySelectorAll('.bim-element').forEach(element => {
577
+ element.addEventListener('click', function() {
578
+ document.getElementById('propertiesPanel').classList.remove('translate-x-full');
579
+ });
580
+ });
581
+
582
+ document.getElementById('closeProperties').addEventListener('click', function() {
583
+ document.getElementById('propertiesPanel').classList.add('translate-x-full');
584
+ });
585
+
586
+ // Simulate loading a model
587
+ document.querySelector('.model-viewer button').addEventListener('click', function() {
588
+ const viewerPlaceholder = document.querySelector('.model-viewer .bg-white');
589
+ viewerPlaceholder.innerHTML = `
590
+ <div class="w-full h-full flex items-center justify-center">
591
+ <div class="text-center">
592
+ <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto mb-4"></div>
593
+ <p class="text-gray-600">Loading BIM model...</p>
594
+ </div>
595
+ </div>
596
+ `;
597
+
598
+ setTimeout(() => {
599
+ viewerPlaceholder.innerHTML = `
600
+ <div class="w-full h-full relative">
601
+ <div class="absolute inset-0 flex items-center justify-center bg-gray-100 rounded-lg">
602
+ <div class="text-center">
603
+ <i class="fas fa-cube text-5xl text-indigo-400 mb-4"></i>
604
+ <h4 class="text-lg font-medium text-gray-700">NYPL Renovation Model</h4>
605
+ <p class="text-gray-500 mt-2">Interactive 3D model loaded</p>
606
+ </div>
607
+ </div>
608
+ <div class="absolute top-4 right-4 flex space-x-2">
609
+ <button class="p-2 bg-white rounded-md shadow-sm text-gray-600 hover:bg-gray-50">
610
+ <i class="fas fa-layer-group"></i>
611
+ </button>
612
+ <button class="p-2 bg-white rounded-md shadow-sm text-gray-600 hover:bg-gray-50">
613
+ <i class="fas fa-eye"></i>
614
+ </button>
615
+ </div>
616
+ </div>
617
+ `;
618
+ }, 2000);
619
+ });
620
+ </script>
621
+ <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/bimlibai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
622
+ </html>