Hugging Face's logo

Spaces:
codebeat77
/
3d-interior-studio
Running

App Files Community
codebeat77 commited on
Commit
9ce43f4
·
verified ·
1 Parent(s): 177d6bf

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +627 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: 3d Interior Studio
3
- emoji: 🏢
4
- colorFrom: gray
5
- colorTo: blue
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: 3d-interior-studio
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,627 @@
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>3D Interior Design Studio</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/GLTFLoader.min.js"></script>
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
12
+ <style>
13
+ #designer-container {
14
+ position: relative;
15
+ width: 100%;
16
+ height: 70vh;
17
+ background-color: #f0f0f0;
18
+ overflow: hidden;
19
+ }
20
+
21
+ #room-3d-view {
22
+ width: 100%;
23
+ height: 100%;
24
+ }
25
+
26
+ .tooltip {
27
+ position: absolute;
28
+ background: rgba(0,0,0,0.7);
29
+ color: white;
30
+ padding: 5px 10px;
31
+ border-radius: 4px;
32
+ font-size: 12px;
33
+ pointer-events: none;
34
+ z-index: 100;
35
+ }
36
+
37
+ .furniture-item {
38
+ transition: all 0.2s;
39
+ cursor: pointer;
40
+ }
41
+
42
+ .furniture-item:hover {
43
+ transform: scale(1.05);
44
+ box-shadow: 0 0 15px rgba(0,0,0,0.2);
45
+ }
46
+
47
+ .color-option {
48
+ width: 30px;
49
+ height: 30px;
50
+ border-radius: 50%;
51
+ margin: 5px;
52
+ cursor: pointer;
53
+ border: 2px solid transparent;
54
+ }
55
+
56
+ .color-option.selected {
57
+ border-color: #000;
58
+ transform: scale(1.1);
59
+ }
60
+
61
+ .wall-selection {
62
+ position: absolute;
63
+ top: 10px;
64
+ left: 10px;
65
+ z-index: 10;
66
+ }
67
+
68
+ .loading-overlay {
69
+ position: absolute;
70
+ top: 0;
71
+ left: 0;
72
+ width: 100%;
73
+ height: 100%;
74
+ background: rgba(255,255,255,0.8);
75
+ display: flex;
76
+ justify-content: center;
77
+ align-items: center;
78
+ z-index: 1000;
79
+ }
80
+
81
+ .spinner {
82
+ border: 5px solid #f3f3f3;
83
+ border-top: 5px solid #3498db;
84
+ border-radius: 50%;
85
+ width: 50px;
86
+ height: 50px;
87
+ animation: spin 1s linear infinite;
88
+ }
89
+
90
+ @keyframes spin {
91
+ 0% { transform: rotate(0deg); }
92
+ 100% { transform: rotate(360deg); }
93
+ }
94
+ </style>
95
+ </head>
96
+ <body class="bg-gray-100">
97
+ <header class="bg-indigo-800 text-white shadow-lg">
98
+ <div class="container mx-auto px-4 py-6">
99
+ <div class="flex justify-between items-center">
100
+ <div class="flex items-center space-x-2">
101
+ <i class="fas fa-couch text-3xl"></i>
102
+ <h1 class="text-2xl font-bold">3D Interior Design Studio</h1>
103
+ </div>
104
+ <nav>
105
+ <ul class="flex space-x-6">
106
+ <li><a href="#" class="hover:text-indigo-200">Home</a></li>
107
+ <li><a href="#" class="hover:text-indigo-200">Templates</a></li>
108
+ <li><a href="#" class="hover:text-indigo-200">Gallery</a></li>
109
+ <li><a href="#" class="hover:text-indigo-200">Help</a></li>
110
+ </ul>
111
+ </nav>
112
+ </div>
113
+ </div>
114
+ </header>
115
+
116
+ <main class="container mx-auto px-4 py-8">
117
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
118
+ <!-- Left sidebar - Controls -->
119
+ <div class="lg:col-span-1 bg-white p-6 rounded-lg shadow-md">
120
+ <h2 class="text-xl font-semibold mb-4 border-b pb-2">Design Controls</h2>
121
+
122
+ <!-- Room Creation -->
123
+ <div class="mb-6">
124
+ <h3 class="font-medium mb-2 flex items-center">
125
+ <i class="fas fa-ruler-combined mr-2"></i> Room Dimensions
126
+ </h3>
127
+ <div class="grid grid-cols-2 gap-2 mb-3">
128
+ <div>
129
+ <label class="block text-sm text-gray-600">Length (ft)</label>
130
+ <input type="number" id="room-length" value="12" min="5" max="50" class="w-full p-2 border rounded">
131
+ </div>
132
+ <div>
133
+ <label class="block text-sm text-gray-600">Width (ft)</label>
134
+ <input type="number" id="room-width" value="10" min="5" max="50" class="w-full p-2 border rounded">
135
+ </div>
136
+ </div>
137
+ <div>
138
+ <label class="block text-sm text-gray-600">Height (ft)</label>
139
+ <input type="number" id="room-height" value="8" min="5" max="20" class="w-full p-2 border rounded">
140
+ </div>
141
+ <button id="create-room-btn" class="mt-3 w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition">
142
+ Create Room
143
+ </button>
144
+ </div>
145
+
146
+ <!-- Wall Customization -->
147
+ <div class="mb-6">
148
+ <h3 class="font-medium mb-2 flex items-center">
149
+ <i class="fas fa-paint-roller mr-2"></i> Wall Customization
150
+ </h3>
151
+ <div id="wall-selection" class="mb-3">
152
+ <label class="block text-sm text-gray-600 mb-1">Select Wall</label>
153
+ <select id="wall-select" class="w-full p-2 border rounded">
154
+ <option value="all">All Walls</option>
155
+ <option value="north">North Wall</option>
156
+ <option value="east">East Wall</option>
157
+ <option value="south">South Wall</option>
158
+ <option value="west">West Wall</option>
159
+ </select>
160
+ </div>
161
+ <div>
162
+ <label class="block text-sm text-gray-600 mb-1">Wall Color</label>
163
+ <div class="flex flex-wrap">
164
+ <div class="color-option bg-white selected" data-color="#ffffff" onclick="selectColor(this, 'wall')"></div>
165
+ <div class="color-option bg-gray-200" data-color="#e5e7eb" onclick="selectColor(this, 'wall')"></div>
166
+ <div class="color-option bg-blue-100" data-color="#dbeafe" onclick="selectColor(this, 'wall')"></div>
167
+ <div class="color-option bg-green-100" data-color="#d1fae5" onclick="selectColor(this, 'wall')"></div>
168
+ <div class="color-option bg-yellow-100" data-color="#fef3c7" onclick="selectColor(this, 'wall')"></div>
169
+ <div class="color-option bg-red-100" data-color="#fee2e2" onclick="selectColor(this, 'wall')"></div>
170
+ <div class="color-option bg-indigo-100" data-color="#e0e7ff" onclick="selectColor(this, 'wall')"></div>
171
+ <div class="color-option bg-purple-100" data-color="#ede9fe" onclick="selectColor(this, 'wall')"></div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <!-- Floor Customization -->
177
+ <div class="mb-6">
178
+ <h3 class="font-medium mb-2 flex items-center">
179
+ <i class="fas fa-border-style mr-2"></i> Floor & Ceiling
180
+ </h3>
181
+ <div class="mb-3">
182
+ <label class="block text-sm text-gray-600 mb-1">Floor Material</label>
183
+ <select id="floor-material" class="w-full p-2 border rounded">
184
+ <option value="wood">Wood</option>
185
+ <option value="tile">Tile</option>
186
+ <option value="carpet">Carpet</option>
187
+ <option value="concrete">Concrete</option>
188
+ </select>
189
+ </div>
190
+ <div>
191
+ <label class="block text-sm text-gray-600 mb-1">Ceiling Color</label>
192
+ <div class="flex flex-wrap">
193
+ <div class="color-option bg-white selected" data-color="#ffffff" onclick="selectColor(this, 'ceiling')"></div>
194
+ <div class="color-option bg-gray-100" data-color="#f3f4f6" onclick="selectColor(this, 'ceiling')"></div>
195
+ <div class="color-option bg-blue-50" data-color="#eff6ff" onclick="selectColor(this, 'ceiling')"></div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+
200
+ <!-- Lighting -->
201
+ <div class="mb-6">
202
+ <h3 class="font-medium mb-2 flex items-center">
203
+ <i class="fas fa-lightbulb mr-2"></i> Lighting
204
+ </h3>
205
+ <div class="flex items-center mb-2">
206
+ <input type="checkbox" id="natural-light" class="mr-2" checked>
207
+ <label for="natural-light" class="text-sm">Natural Light</label>
208
+ </div>
209
+ <div class="flex items-center mb-3">
210
+ <input type="range" id="light-intensity" min="0" max="2" step="0.1" value="1" class="w-full">
211
+ </div>
212
+ <button id="add-light-btn" class="w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition">
213
+ Add Light Fixture
214
+ </button>
215
+ </div>
216
+ </div>
217
+
218
+ <!-- Main 3D Viewer -->
219
+ <div class="lg:col-span-2">
220
+ <div id="designer-container">
221
+ <div id="room-3d-view"></div>
222
+ <div id="tooltip" class="tooltip" style="display: none;"></div>
223
+ <div id="loading-overlay" class="loading-overlay" style="display: none;">
224
+ <div class="spinner"></div>
225
+ </div>
226
+ </div>
227
+
228
+ <!-- Camera Controls -->
229
+ <div class="bg-white p-4 mt-4 rounded-lg shadow-md">
230
+ <h3 class="font-medium mb-3 flex items-center">
231
+ <i class="fas fa-camera mr-2"></i> Camera Controls
232
+ </h3>
233
+ <div class="grid grid-cols-4 gap-2">
234
+ <button id="view-front" class="bg-gray-200 p-2 rounded hover:bg-gray-300">
235
+ <i class="fas fa-arrow-up"></i> Front
236
+ </button>
237
+ <button id="view-back" class="bg-gray-200 p-2 rounded hover:bg-gray-300">
238
+ <i class="fas fa-arrow-down"></i> Back
239
+ </button>
240
+ <button id="view-left" class="bg-gray-200 p-2 rounded hover:bg-gray-300">
241
+ <i class="fas fa-arrow-left"></i> Left
242
+ </button>
243
+ <button id="view-right" class="bg-gray-200 p-2 rounded hover:bg-gray-300">
244
+ <i class="fas fa-arrow-right"></i> Right
245
+ </button>
246
+ </div>
247
+ <div class="mt-3">
248
+ <button id="reset-camera" class="w-full bg-gray-600 text-white py-2 rounded hover:bg-gray-700 transition">
249
+ Reset View
250
+ </button>
251
+ </div>
252
+ </div>
253
+ </div>
254
+
255
+ <!-- Right sidebar - Furniture Library -->
256
+ <div class="lg:col-span-1 bg-white p-6 rounded-lg shadow-md">
257
+ <h2 class="text-xl font-semibold mb-4 border-b pb-2">Furniture Library</h2>
258
+
259
+ <!-- Furniture Categories -->
260
+ <div class="mb-4">
261
+ <h3 class="font-medium mb-2">Categories</h3>
262
+ <div class="flex flex-wrap gap-2">
263
+ <button class="category-btn active bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm" data-category="all">All</button>
264
+ <button class="category-btn bg-gray-100 px-3 py-1 rounded-full text-sm" data-category="seating">Seating</button>
265
+ <button class="category-btn bg-gray-100 px-3 py-1 rounded-full text-sm" data-category="tables">Tables</button>
266
+ <button class="category-btn bg-gray-100 px-3 py-1 rounded-full text-sm" data-category="storage">Storage</button>
267
+ <button class="category-btn bg-gray-100 px-3 py-1 rounded-full text-sm" data-category="beds">Beds</button>
268
+ <button class="category-btn bg-gray-100 px-3 py-1 rounded-full text-sm" data-category="lighting">Lighting</button>
269
+ <button class="category-btn bg-gray-100 px-3 py-1 rounded-full text-sm" data-category="decor">Decor</button>
270
+ </div>
271
+ </div>
272
+
273
+ <!-- Search -->
274
+ <div class="mb-4 relative">
275
+ <input type="text" placeholder="Search furniture..." class="w-full p-2 pl-8 border rounded">
276
+ <i class="fas fa-search absolute left-2 top-3 text-gray-400"></i>
277
+ </div>
278
+
279
+ <!-- Furniture Items -->
280
+ <div class="overflow-y-auto" style="max-height: 400px;">
281
+ <div class="grid grid-cols-2 gap-3">
282
+ <!-- Sofa -->
283
+ <div class="furniture-item p-3 border rounded" data-type="sofa" data-category="seating" onclick="addFurniture('sofa')">
284
+ <div class="bg-gray-100 h-24 mb-2 flex items-center justify-center">
285
+ <i class="fas fa-couch text-3xl text-gray-500"></i>
286
+ </div>
287
+ <h4 class="font-medium text-sm">Sofa</h4>
288
+ <p class="text-xs text-gray-500">3-seater</p>
289
+ </div>
290
+
291
+ <!-- Armchair -->
292
+ <div class="furniture-item p-3 border rounded" data-type="armchair" data-category="seating" onclick="addFurniture('armchair')">
293
+ <div class="bg-gray-100 h-24 mb-2 flex items-center justify-center">
294
+ <i class="fas fa-chair text-3xl text-gray-500"></i>
295
+ </div>
296
+ <h4 class="font-medium text-sm">Armchair</h4>
297
+ <p class="text-xs text-gray-500">Single</p>
298
+ </div>
299
+
300
+ <!-- Coffee Table -->
301
+ <div class="furniture-item p-3 border rounded" data-type="coffee-table" data-category="tables" onclick="addFurniture('coffee-table')">
302
+ <div class="bg-gray-100 h-24 mb-2 flex items-center justify-center">
303
+ <i class="fas fa-coffee text-3xl text-gray-500"></i>
304
+ </div>
305
+ <h4 class="font-medium text-sm">Coffee Table</h4>
306
+ <p class="text-xs text-gray-500">Round</p>
307
+ </div>
308
+
309
+ <!-- Dining Table -->
310
+ <div class="furniture-item p-3 border rounded" data-type="dining-table" data-category="tables" onclick="addFurniture('dining-table')">
311
+ <div class="bg-gray-100 h-24 mb-2 flex items-center justify-center">
312
+ <i class="fas fa-utensils text-3xl text-gray-500"></i>
313
+ </div>
314
+ <h4 class="font-medium text-sm">Dining Table</h4>
315
+ <p class="text-xs text-gray-500">6-seater</p>
316
+ </div>
317
+
318
+ <!-- Bookshelf -->
319
+ <div class="furniture-item p-3 border rounded" data-type="bookshelf" data-category="storage" onclick="addFurniture('bookshelf')">
320
+ <div class="bg-gray-100 h-24 mb-2 flex items-center justify-center">
321
+ <i class="fas fa-book text-3xl text-gray-500"></i>
322
+ </div>
323
+ <h4 class="font-medium text-sm">Bookshelf</h4>
324
+ <p class="text-xs text-gray-500">5 shelves</p>
325
+ </div>
326
+
327
+ <!-- Wardrobe -->
328
+ <div class="furniture-item p-3 border rounded" data-type="wardrobe" data-category="storage" onclick="addFurniture('wardrobe')">
329
+ <div class="bg-gray-100 h-24 mb-2 flex items-center justify-center">
330
+ <i class="fas fa-tshirt text-3xl text-gray-500"></i>
331
+ </div>
332
+ <h4 class="font-medium text-sm">Wardrobe</h4>
333
+ <p class="text-xs text-gray-500">2 doors</p>
334
+ </div>
335
+
336
+ <!-- Bed -->
337
+ <div class="furniture-item p-3 border rounded" data-type="bed" data-category="beds" onclick="addFurniture('bed')">
338
+ <div class="bg-gray-100 h-24 mb-2 flex items-center justify-center">
339
+ <i class="fas fa-bed text-3xl text-gray-500"></i>
340
+ </div>
341
+ <h4 class="font-medium text-sm">Bed</h4>
342
+ <p class="text-xs text-gray-500">Queen size</p>
343
+ </div>
344
+
345
+ <!-- Lamp -->
346
+ <div class="furniture-item p-3 border rounded" data-type="lamp" data-category="lighting" onclick="addFurniture('lamp')">
347
+ <div class="bg-gray-100 h-24 mb-2 flex items-center justify-center">
348
+ <i class="fas fa-lightbulb text-3xl text-gray-500"></i>
349
+ </div>
350
+ <h4 class="font-medium text-sm">Table Lamp</h4>
351
+ <p class="text-xs text-gray-500">Modern</p>
352
+ </div>
353
+ </div>
354
+ </div>
355
+
356
+ <!-- Selected Furniture Controls -->
357
+ <div id="furniture-controls" class="mt-4 p-3 bg-gray-50 rounded" style="display: none;">
358
+ <h3 class="font-medium mb-2">Selected Item</h3>
359
+ <div class="flex justify-between items-center mb-2">
360
+ <span id="selected-furniture-name" class="font-medium">Sofa</span>
361
+ <button id="remove-furniture" class="text-red-500 hover:text-red-700">
362
+ <i class="fas fa-trash"></i>
363
+ </button>
364
+ </div>
365
+ <div class="grid grid-cols-3 gap-2 mb-3">
366
+ <div>
367
+ <label class="block text-xs text-gray-600">X Position</label>
368
+ <input type="number" id="furniture-x" class="w-full p-1 border rounded text-sm">
369
+ </div>
370
+ <div>
371
+ <label class="block text-xs text-gray-600">Y Position</label>
372
+ <input type="number" id="furniture-y" class="w-full p-1 border rounded text-sm">
373
+ </div>
374
+ <div>
375
+ <label class="block text-xs text-gray-600">Z Position</label>
376
+ <input type="number" id="furniture-z" class="w-full p-1 border rounded text-sm">
377
+ </div>
378
+ </div>
379
+ <div class="grid grid-cols-2 gap-2">
380
+ <div>
381
+ <label class="block text-xs text-gray-600">Rotation</label>
382
+ <input type="number" id="furniture-rotation" class="w-full p-1 border rounded text-sm">
383
+ </div>
384
+ <div>
385
+ <label class="block text-xs text-gray-600">Scale</label>
386
+ <input type="number" id="furniture-scale" value="1" step="0.1" min="0.5" max="2" class="w-full p-1 border rounded text-sm">
387
+ </div>
388
+ </div>
389
+ <div class="mt-2">
390
+ <label class="block text-xs text-gray-600 mb-1">Color</label>
391
+ <div class="flex flex-wrap">
392
+ <div class="color-option bg-brown-500" style="background-color: #78350f;" data-color="#78350f" onclick="selectColor(this, 'furniture')"></div>
393
+ <div class="color-option bg-gray-700" style="background-color: #374151;" data-color="#374151" onclick="selectColor(this, 'furniture')"></div>
394
+ <div class="color-option bg-black" style="background-color: #000000;" data-color="#000000" onclick="selectColor(this, 'furniture')"></div>
395
+ <div class="color-option bg-white" style="background-color: #ffffff;" data-color="#ffffff" onclick="selectColor(this, 'furniture')"></div>
396
+ <div class="color-option bg-blue-500" style="background-color: #3b82f6;" data-color="#3b82f6" onclick="selectColor(this, 'furniture')"></div>
397
+ <div class="color-option bg-red-500" style="background-color: #ef4444;" data-color="#ef4444" onclick="selectColor(this, 'furniture')"></div>
398
+ </div>
399
+ </div>
400
+ </div>
401
+ </div>
402
+ </div>
403
+
404
+ <!-- Save/Export Section -->
405
+ <div class="mt-8 bg-white p-6 rounded-lg shadow-md">
406
+ <h2 class="text-xl font-semibold mb-4 border-b pb-2">Save & Export</h2>
407
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
408
+ <div class="border rounded p-4 text-center hover:bg-gray-50 cursor-pointer">
409
+ <i class="fas fa-save text-3xl text-indigo-600 mb-2"></i>
410
+ <h3 class="font-medium">Save Project</h3>
411
+ <p class="text-sm text-gray-600">Save your current design</p>
412
+ </div>
413
+ <div class="border rounded p-4 text-center hover:bg-gray-50 cursor-pointer">
414
+ <i class="fas fa-file-image text-3xl text-indigo-600 mb-2"></i>
415
+ <h3 class="font-medium">Export Image</h3>
416
+ <p class="text-sm text-gray-600">Save as PNG or JPG</p>
417
+ </div>
418
+ <div class="border rounded p-4 text-center hover:bg-gray-50 cursor-pointer">
419
+ <i class="fas fa-file-pdf text-3xl text-indigo-600 mb-2"></i>
420
+ <h3 class="font-medium">Export PDF</h3>
421
+ <p class="text-sm text-gray-600">Generate a PDF report</p>
422
+ </div>
423
+ </div>
424
+ </div>
425
+ </main>
426
+
427
+ <footer class="bg-gray-800 text-white py-8 mt-12">
428
+ <div class="container mx-auto px-4">
429
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
430
+ <div>
431
+ <h3 class="text-lg font-semibold mb-4">3D Interior Design Studio</h3>
432
+ <p class="text-gray-400">Create beautiful interior designs with our easy-to-use 3D tool.</p>
433
+ </div>
434
+ <div>
435
+ <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
436
+ <ul class="space-y-2">
437
+ <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li>
438
+ <li><a href="#" class="text-gray-400 hover:text-white">Templates</a></li>
439
+ <li><a href="#" class="text-gray-400 hover:text-white">Gallery</a></li>
440
+ <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
441
+ </ul>
442
+ </div>
443
+ <div>
444
+ <h3 class="text-lg font-semibold mb-4">Resources</h3>
445
+ <ul class="space-y-2">
446
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
447
+ <li><a href="#" class="text-gray-400 hover:text-white">Tutorials</a></li>
448
+ <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
449
+ <li><a href="#" class="text-gray-400 hover:text-white">Support</a></li>
450
+ </ul>
451
+ </div>
452
+ <div>
453
+ <h3 class="text-lg font-semibold mb-4">Contact</h3>
454
+ <ul class="space-y-2">
455
+ <li class="text-gray-400">[email protected]</li>
456
+ <li class="text-gray-400">+1 (555) 123-4567</li>
457
+ <li class="text-gray-400">123 Design St, Creative City</li>
458
+ </ul>
459
+ </div>
460
+ </div>
461
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
462
+ <p>&copy; 2023 3D Interior Design Studio. All rights reserved.</p>
463
+ </div>
464
+ </div>
465
+ </footer>
466
+
467
+ <script>
468
+ // Three.js variables
469
+ let scene, camera, renderer, controls;
470
+ let room = null;
471
+ let walls = {};
472
+ let floor = null;
473
+ let ceiling = null;
474
+ let furniture = [];
475
+ let selectedFurniture = null;
476
+ let selectedWall = 'all';
477
+ let wallColors = {
478
+ north: '#ffffff',
479
+ east: '#ffffff',
480
+ south: '#ffffff',
481
+ west: '#ffffff'
482
+ };
483
+ let ceilingColor = '#ffffff';
484
+ let floorMaterial = 'wood';
485
+
486
+ // Initialize the 3D scene
487
+ function init() {
488
+ // Create scene
489
+ scene = new THREE.Scene();
490
+ scene.background = new THREE.Color(0xf0f0f0);
491
+
492
+ // Create camera
493
+ camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
494
+ camera.position.set(10, 10, 10);
495
+
496
+ // Create renderer
497
+ const container = document.getElementById('room-3d-view');
498
+ renderer = new THREE.WebGLRenderer({ antialias: true });
499
+ renderer.setSize(container.clientWidth, container.clientHeight);
500
+ container.appendChild(renderer.domElement);
501
+
502
+ // Add orbit controls
503
+ controls = new THREE.OrbitControls(camera, renderer.domElement);
504
+ controls.enableDamping = true;
505
+ controls.dampingFactor = 0.05;
506
+
507
+ // Add lights
508
+ const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
509
+ scene.add(ambientLight);
510
+
511
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
512
+ directionalLight.position.set(5, 10, 7);
513
+ scene.add(directionalLight);
514
+
515
+ // Add grid helper
516
+ const gridHelper = new THREE.GridHelper(50, 50);
517
+ scene.add(gridHelper);
518
+
519
+ // Add axes helper
520
+ const axesHelper = new THREE.AxesHelper(5);
521
+ scene.add(axesHelper);
522
+
523
+ // Handle window resize
524
+ window.addEventListener('resize', onWindowResize);
525
+
526
+ // Event listeners for UI controls
527
+ setupEventListeners();
528
+
529
+ // Start animation loop
530
+ animate();
531
+ }
532
+
533
+ // Animation loop
534
+ function animate() {
535
+ requestAnimationFrame(animate);
536
+ controls.update();
537
+ renderer.render(scene, camera);
538
+ }
539
+
540
+ // Handle window resize
541
+ function onWindowResize() {
542
+ const container = document.getElementById('room-3d-view');
543
+ camera.aspect = container.clientWidth / container.clientHeight;
544
+ camera.updateProjectionMatrix();
545
+ renderer.setSize(container.clientWidth, container.clientHeight);
546
+ }
547
+
548
+ // Create a room with specified dimensions
549
+ function createRoom(length, width, height) {
550
+ // Remove existing room if any
551
+ if (room) {
552
+ scene.remove(room);
553
+ Object.values(walls).forEach(wall => scene.remove(wall));
554
+ if (floor) scene.remove(floor);
555
+ if (ceiling) scene.remove(ceiling);
556
+ }
557
+
558
+ // Convert feet to Three.js units (1 unit = 1 foot)
559
+ const l = length;
560
+ const w = width;
561
+ const h = height;
562
+
563
+ // Create walls
564
+ const wallThickness = 0.2;
565
+ const wallHeight = h;
566
+
567
+ // North wall
568
+ const northWallGeometry = new THREE.BoxGeometry(l, wallHeight, wallThickness);
569
+ const northWallMaterial = new THREE.MeshStandardMaterial({ color: new THREE.Color(wallColors.north) });
570
+ walls.north = new THREE.Mesh(northWallGeometry, northWallMaterial);
571
+ walls.north.position.set(0, wallHeight/2, w/2);
572
+ walls.north.userData.type = 'wall';
573
+ walls.north.userData.wallId = 'north';
574
+ scene.add(walls.north);
575
+
576
+ // East wall
577
+ const eastWallGeometry = new THREE.BoxGeometry(wallThickness, wallHeight, w);
578
+ const eastWallMaterial = new THREE.MeshStandardMaterial({ color: new THREE.Color(wallColors.east) });
579
+ walls.east = new THREE.Mesh(eastWallGeometry, eastWallMaterial);
580
+ walls.east.position.set(l/2, wallHeight/2, 0);
581
+ walls.east.userData.type = 'wall';
582
+ walls.east.userData.wallId = 'east';
583
+ scene.add(walls.east);
584
+
585
+ // South wall
586
+ const southWallGeometry = new THREE.BoxGeometry(l, wallHeight, wallThickness);
587
+ const southWallMaterial = new THREE.MeshStandardMaterial({ color: new THREE.Color(wallColors.south) });
588
+ walls.south = new THREE.Mesh(southWallGeometry, southWallMaterial);
589
+ walls.south.position.set(0, wallHeight/2, -w/2);
590
+ walls.south.userData.type = 'wall';
591
+ walls.south.userData.wallId = 'south';
592
+ scene.add(walls.south);
593
+
594
+ // West wall
595
+ const westWallGeometry = new THREE.BoxGeometry(wallThickness, wallHeight, w);
596
+ const westWallMaterial = new THREE.MeshStandardMaterial({ color: new THREE.Color(wallColors.west) });
597
+ walls.west = new THREE.Mesh(westWallGeometry, westWallMaterial);
598
+ walls.west.position.set(-l/2, wallHeight/2, 0);
599
+ walls.west.userData.type = 'wall';
600
+ walls.west.userData.wallId = 'west';
601
+ scene.add(walls.west);
602
+
603
+ // Create floor
604
+ const floorGeometry = new THREE.BoxGeometry(l, 0.1, w);
605
+ let floorMaterial;
606
+
607
+ switch (floorMaterial) {
608
+ case 'wood':
609
+ floorMaterial = new THREE.MeshStandardMaterial({
610
+ color: 0x8B4513,
611
+ roughness: 0.3,
612
+ metalness: 0.1
613
+ });
614
+ break;
615
+ case 'tile':
616
+ floorMaterial = new THREE.MeshStandardMaterial({
617
+ color: 0xDDDDDD,
618
+ roughness: 0.2,
619
+ metalness: 0.5
620
+ });
621
+ break;
622
+ case 'carpet':
623
+ floorMaterial = new THREE.MeshStandardMaterial({
624
+ color: 0x1E90FF,
625
+ roughness: 0.8,
626
+ metalness
627
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ interactive 3d interior design website where users can create rooms as per dimensions or upload blueprints. they should be able select each walls and choose colours and change them. they should be able to add furniture, design items lighting fixtures etc. and move them around the room. users should be able to rotate the 3d rooms 360 degree angle