Hugging Face's logo

Spaces:
antiquesordo
/
ak-permaculture-designer-2-0
Running

App Files Community
antiquesordo commited on
Commit
15ec021
·
verified ·
1 Parent(s): be4eda3

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +896 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ak Permaculture Designer 2 0
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: ak-permaculture-designer-2-0
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: green
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,896 @@
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>Permaculture 3D Site Designer</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
9
+ <link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/terraformer.min.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
13
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
14
+ <style>
15
+ #map {
16
+ position: absolute;
17
+ top: 0;
18
+ bottom: 0;
19
+ width: 100%;
20
+ height: 100%;
21
+ }
22
+ #rendererContainer {
23
+ position: absolute;
24
+ top: 0;
25
+ right: 0;
26
+ width: 50%;
27
+ height: 100%;
28
+ background: rgba(255,255,255,0.9);
29
+ box-shadow: -5px 0 15px rgba(0,0,0,0.1);
30
+ transition: all 0.3s ease;
31
+ }
32
+ #rendererContainer.collapsed {
33
+ width: 30%;
34
+ }
35
+ #threejs-canvas {
36
+ width: 100%;
37
+ height: 100%;
38
+ display: block;
39
+ }
40
+ .map-overlay {
41
+ position: absolute;
42
+ bottom: 20px;
43
+ left: 20px;
44
+ background: white;
45
+ padding: 10px;
46
+ border-radius: 8px;
47
+ box-shadow: 0 0 10px rgba(0,0,0,0.1);
48
+ z-index: 1;
49
+ }
50
+ .element-card {
51
+ transition: all 0.2s ease;
52
+ }
53
+ .element-card:hover {
54
+ transform: translateY(-2px);
55
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
56
+ }
57
+ .draggable-element {
58
+ cursor: move;
59
+ user-select: none;
60
+ }
61
+ .slider-thumb::-webkit-slider-thumb {
62
+ -webkit-appearance: none;
63
+ appearance: none;
64
+ width: 20px;
65
+ height: 20px;
66
+ border-radius: 50%;
67
+ background: #4CAF50;
68
+ cursor: pointer;
69
+ }
70
+ .slider-thumb::-moz-range-thumb {
71
+ width: 20px;
72
+ height: 20px;
73
+ border-radius: 50%;
74
+ background: #4CAF50;
75
+ cursor: pointer;
76
+ }
77
+ .drawing-tool-active {
78
+ background-color: #4CAF50 !important;
79
+ color: white !important;
80
+ }
81
+ .tab-content {
82
+ display: none;
83
+ }
84
+ .tab-content.active {
85
+ display: block;
86
+ }
87
+ .tab-button {
88
+ transition: all 0.2s ease;
89
+ }
90
+ .tab-button.active {
91
+ background-color: #4CAF50;
92
+ color: white;
93
+ }
94
+ </style>
95
+ </head>
96
+ <body class="bg-gray-100 font-sans">
97
+ <div class="flex flex-col h-screen">
98
+ <!-- Header -->
99
+ <header class="bg-green-800 text-white p-4 shadow-md">
100
+ <div class="container mx-auto flex justify-between items-center">
101
+ <div class="flex items-center space-x-2">
102
+ <i class="fas fa-leaf text-2xl"></i>
103
+ <h1 class="text-2xl font-bold">Permaculture 3D Designer</h1>
104
+ </div>
105
+ <div class="flex space-x-4">
106
+ <button id="export-btn" class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-md flex items-center">
107
+ <i class="fas fa-download mr-2"></i> Export Design
108
+ </button>
109
+ <button id="help-btn" class="bg-gray-600 hover:bg-gray-700 px-4 py-2 rounded-md flex items-center">
110
+ <i class="fas fa-question-circle mr-2"></i> Help
111
+ </button>
112
+ </div>
113
+ </div>
114
+ </header>
115
+
116
+ <!-- Main Content -->
117
+ <div class="flex flex-1 overflow-hidden">
118
+ <!-- Left Panel - Tools -->
119
+ <div class="w-64 bg-white p-4 shadow-md overflow-y-auto">
120
+ <div class="mb-6">
121
+ <h2 class="text-lg font-semibold mb-3 text-green-800 border-b pb-2">Design Tools</h2>
122
+ <div class="space-y-2">
123
+ <button id="draw-polygon" class="w-full bg-gray-200 hover:bg-gray-300 px-3 py-2 rounded-md text-left flex items-center">
124
+ <i class="fas fa-draw-polygon mr-2"></i> Draw Boundary
125
+ </button>
126
+ <button id="draw-point" class="w-full bg-gray-200 hover:bg-gray-300 px-3 py-2 rounded-md text-left flex items-center">
127
+ <i class="fas fa-map-marker-alt mr-2"></i> Add Feature
128
+ </button>
129
+ <button id="measure" class="w-full bg-gray-200 hover:bg-gray-300 px-3 py-2 rounded-md text-left flex items-center">
130
+ <i class="fas fa-ruler-combined mr-2"></i> Measure
131
+ </button>
132
+ <button id="clear-all" class="w-full bg-red-100 hover:bg-red-200 px-3 py-2 rounded-md text-left flex items-center text-red-800">
133
+ <i class="fas fa-trash-alt mr-2"></i> Clear All
134
+ </button>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- Tabs for different element categories -->
139
+ <div class="mb-4">
140
+ <div class="flex border-b">
141
+ <button class="tab-button flex-1 py-2 px-1 text-sm font-medium text-center active" data-tab="plants">
142
+ <i class="fas fa-seedling mr-1"></i> Plants
143
+ </button>
144
+ <button class="tab-button flex-1 py-2 px-1 text-sm font-medium text-center" data-tab="animals">
145
+ <i class="fas fa-paw mr-1"></i> Animals
146
+ </button>
147
+ <button class="tab-button flex-1 py-2 px-1 text-sm font-medium text-center" data-tab="water">
148
+ <i class="fas fa-tint mr-1"></i> Water
149
+ </button>
150
+ </div>
151
+ </div>
152
+
153
+ <!-- Plants Tab -->
154
+ <div id="plants-tab" class="tab-content active">
155
+ <h3 class="text-sm font-semibold mb-2 text-gray-700">Fruit Trees</h3>
156
+ <div class="grid grid-cols-2 gap-2 mb-3">
157
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="apple-tree" data-name="Apple (Malus domestica)">
158
+ <div class="text-center">
159
+ <i class="fas fa-apple-alt text-xl text-red-500 mb-1"></i>
160
+ <p class="text-xs">Apple</p>
161
+ </div>
162
+ </div>
163
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="pear-tree" data-name="Pear (Pyrus communis)">
164
+ <div class="text-center">
165
+ <i class="fas fa-apple-alt text-xl text-green-600 mb-1"></i>
166
+ <p class="text-xs">Pear</p>
167
+ </div>
168
+ </div>
169
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="cherry-tree" data-name="Cherry (Prunus avium)">
170
+ <div class="text-center">
171
+ <i class="fas fa-apple-alt text-xl text-pink-500 mb-1"></i>
172
+ <p class="text-xs">Cherry</p>
173
+ </div>
174
+ </div>
175
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="fig-tree" data-name="Fig (Ficus carica)">
176
+ <div class="text-center">
177
+ <i class="fas fa-apple-alt text-xl text-purple-600 mb-1"></i>
178
+ <p class="text-xs">Fig</p>
179
+ </div>
180
+ </div>
181
+ </div>
182
+
183
+ <h3 class="text-sm font-semibold mb-2 text-gray-700">Nut Trees</h3>
184
+ <div class="grid grid-cols-2 gap-2 mb-3">
185
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="walnut-tree" data-name="Walnut (Juglans regia)">
186
+ <div class="text-center">
187
+ <i class="fas fa-tree text-xl text-brown-600 mb-1"></i>
188
+ <p class="text-xs">Walnut</p>
189
+ </div>
190
+ </div>
191
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="hazelnut-tree" data-name="Hazelnut (Corylus avellana)">
192
+ <div class="text-center">
193
+ <i class="fas fa-tree text-xl text-yellow-700 mb-1"></i>
194
+ <p class="text-xs">Hazelnut</p>
195
+ </div>
196
+ </div>
197
+ </div>
198
+
199
+ <h3 class="text-sm font-semibold mb-2 text-gray-700">Berry Bushes</h3>
200
+ <div class="grid grid-cols-2 gap-2 mb-3">
201
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="raspberry-bush" data-name="Raspberry (Rubus idaeus)">
202
+ <div class="text-center">
203
+ <i class="fas fa-raspberry text-xl text-red-600 mb-1"></i>
204
+ <p class="text-xs">Raspberry</p>
205
+ </div>
206
+ </div>
207
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="blackberry-bush" data-name="Blackberry (Rubus fruticosus)">
208
+ <div class="text-center">
209
+ <i class="fas fa-raspberry text-xl text-black mb-1"></i>
210
+ <p class="text-xs">Blackberry</p>
211
+ </div>
212
+ </div>
213
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="blueberry-bush" data-name="Blueberry (Vaccinium corymbosum)">
214
+ <div class="text-center">
215
+ <i class="fas fa-raspberry text-xl text-blue-700 mb-1"></i>
216
+ <p class="text-xs">Blueberry</p>
217
+ </div>
218
+ </div>
219
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="goji-bush" data-name="Goji Berry (Lycium barbarum)">
220
+ <div class="text-center">
221
+ <i class="fas fa-raspberry text-xl text-red-700 mb-1"></i>
222
+ <p class="text-xs">Goji Berry</p>
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ <h3 class="text-sm font-semibold mb-2 text-gray-700">Vegetables</h3>
228
+ <div class="grid grid-cols-2 gap-2 mb-3">
229
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="tomato-plant" data-name="Tomato (Solanum lycopersicum)">
230
+ <div class="text-center">
231
+ <i class="fas fa-carrot text-xl text-red-500 mb-1"></i>
232
+ <p class="text-xs">Tomato</p>
233
+ </div>
234
+ </div>
235
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="potato-plant" data-name="Potato (Solanum tuberosum)">
236
+ <div class="text-center">
237
+ <i class="fas fa-carrot text-xl text-yellow-600 mb-1"></i>
238
+ <p class="text-xs">Potato</p>
239
+ </div>
240
+ </div>
241
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="zucchini-plant" data-name="Zucchini (Cucurbita pepo)">
242
+ <div class="text-center">
243
+ <i class="fas fa-carrot text-xl text-green-700 mb-1"></i>
244
+ <p class="text-xs">Zucchini</p>
245
+ </div>
246
+ </div>
247
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="beans-plant" data-name="Beans (Phaseolus vulgaris)">
248
+ <div class="text-center">
249
+ <i class="fas fa-carrot text-xl text-green-800 mb-1"></i>
250
+ <p class="text-xs">Beans</p>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </div>
255
+
256
+ <!-- Animals Tab -->
257
+ <div id="animals-tab" class="tab-content">
258
+ <h3 class="text-sm font-semibold mb-2 text-gray-700">Livestock</h3>
259
+ <div class="grid grid-cols-2 gap-2 mb-3">
260
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="chicken" data-name="Chicken (Gallus gallus domesticus)">
261
+ <div class="text-center">
262
+ <i class="fas fa-egg text-xl text-yellow-600 mb-1"></i>
263
+ <p class="text-xs">Chicken</p>
264
+ </div>
265
+ </div>
266
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="duck" data-name="Duck (Anas platyrhynchos domesticus)">
267
+ <div class="text-center">
268
+ <i class="fas fa-feather text-xl text-brown-500 mb-1"></i>
269
+ <p class="text-xs">Duck</p>
270
+ </div>
271
+ </div>
272
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="goat" data-name="Goat (Capra aegagrus hircus)">
273
+ <div class="text-center">
274
+ <i class="fas fa-paw text-xl text-gray-600 mb-1"></i>
275
+ <p class="text-xs">Goat</p>
276
+ </div>
277
+ </div>
278
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="sheep" data-name="Sheep (Ovis aries)">
279
+ <div class="text-center">
280
+ <i class="fas fa-paw text-xl text-white bg-gray-400 rounded-full mb-1"></i>
281
+ <p class="text-xs">Sheep</p>
282
+ </div>
283
+ </div>
284
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="cow" data-name="Cow (Bos taurus)">
285
+ <div class="text-center">
286
+ <i class="fas fa-cow text-xl text-black mb-1"></i>
287
+ <p class="text-xs">Cow</p>
288
+ </div>
289
+ </div>
290
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="rabbit" data-name="Rabbit (Oryctolagus cuniculus)">
291
+ <div class="text-center">
292
+ <i class="fas fa-paw text-xl text-brown-400 mb-1"></i>
293
+ <p class="text-xs">Rabbit</p>
294
+ </div>
295
+ </div>
296
+ </div>
297
+
298
+ <h3 class="text-sm font-semibold mb-2 text-gray-700">Pollinators</h3>
299
+ <div class="grid grid-cols-2 gap-2 mb-3">
300
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="beehive" data-name="Honey Bee (Apis mellifera)">
301
+ <div class="text-center">
302
+ <i class="fas fa-bug text-xl text-yellow-500 mb-1"></i>
303
+ <p class="text-xs">Beehive</p>
304
+ </div>
305
+ </div>
306
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="butterfly-garden" data-name="Butterfly Habitat">
307
+ <div class="text-center">
308
+ <i class="fas fa-butterfly text-xl text-orange-400 mb-1"></i>
309
+ <p class="text-xs">Butterfly Garden</p>
310
+ </div>
311
+ </div>
312
+ </div>
313
+
314
+ <h3 class="text-sm font-semibold mb-2 text-gray-700">Infrastructure</h3>
315
+ <div class="grid grid-cols-2 gap-2 mb-3">
316
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="chicken-coop" data-name="Chicken Coop">
317
+ <div class="text-center">
318
+ <i class="fas fa-home text-xl text-brown-600 mb-1"></i>
319
+ <p class="text-xs">Chicken Coop</p>
320
+ </div>
321
+ </div>
322
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="goat-shelter" data-name="Goat Shelter">
323
+ <div class="text-center">
324
+ <i class="fas fa-home text-xl text-gray-500 mb-1"></i>
325
+ <p class="text-xs">Goat Shelter</p>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ </div>
330
+
331
+ <!-- Water Tab -->
332
+ <div id="water-tab" class="tab-content">
333
+ <h3 class="text-sm font-semibold mb-2 text-gray-700">Water Features</h3>
334
+ <div class="grid grid-cols-2 gap-2 mb-3">
335
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="pond" data-name="Pond">
336
+ <div class="text-center">
337
+ <i class="fas fa-water text-xl text-blue-400 mb-1"></i>
338
+ <p class="text-xs">Pond</p>
339
+ </div>
340
+ </div>
341
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="swale" data-name="Swale">
342
+ <div class="text-center">
343
+ <i class="fas fa-water text-xl text-blue-500 mb-1"></i>
344
+ <p class="text-xs">Swale</p>
345
+ </div>
346
+ </div>
347
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="rain-garden" data-name="Rain Garden">
348
+ <div class="text-center">
349
+ <i class="fas fa-water text-xl text-blue-300 mb-1"></i>
350
+ <p class="text-xs">Rain Garden</p>
351
+ </div>
352
+ </div>
353
+ </div>
354
+
355
+ <h3 class="text-sm font-semibold mb-2 text-gray-700">Water Harvesting</h3>
356
+ <div class="grid grid-cols-2 gap-2 mb-3">
357
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="rain-barrel" data-name="Rain Barrel">
358
+ <div class="text-center">
359
+ <i class="fas fa-tint text-xl text-blue-600 mb-1"></i>
360
+ <p class="text-xs">Rain Barrel</p>
361
+ </div>
362
+ </div>
363
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="cistern" data-name="Cistern">
364
+ <div class="text-center">
365
+ <i class="fas fa-tint text-xl text-blue-700 mb-1"></i>
366
+ <p class="text-xs">Cistern</p>
367
+ </div>
368
+ </div>
369
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="greywater" data-name="Greywater System">
370
+ <div class="text-center">
371
+ <i class="fas fa-recycle text-xl text-gray-500 mb-1"></i>
372
+ <p class="text-xs">Greywater</p>
373
+ </div>
374
+ </div>
375
+ </div>
376
+
377
+ <h3 class="text-sm font-semibold mb-2 text-gray-700">Irrigation</h3>
378
+ <div class="grid grid-cols-2 gap-2 mb-3">
379
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="drip-irrigation" data-name="Drip Irrigation">
380
+ <div class="text-center">
381
+ <i class="fas fa-tint text-xl text-blue-400 mb-1"></i>
382
+ <p class="text-xs">Drip Irrigation</p>
383
+ </div>
384
+ </div>
385
+ <div class="element-card bg-white p-2 rounded-md border border-gray-200 shadow-sm cursor-pointer draggable-element" data-type="sprinkler" data-name="Sprinkler System">
386
+ <div class="text-center">
387
+ <i class="fas fa-tint text-xl text-blue-300 mb-1"></i>
388
+ <p class="text-xs">Sprinkler</p>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </div>
393
+
394
+ <div class="mb-6">
395
+ <h2 class="text-lg font-semibold mb-3 text-green-800 border-b pb-2">Terrain Settings</h2>
396
+ <div class="space-y-4">
397
+ <div>
398
+ <label class="block text-sm font-medium text-gray-700 mb-1">Elevation</label>
399
+ <input type="range" min="0" max="100" value="30" class="w-full slider-thumb">
400
+ </div>
401
+ <div>
402
+ <label class="block text-sm font-medium text-gray-700 mb-1">Slope Angle</label>
403
+ <input type="range" min="0" max="45" value="5" class="w-full slider-thumb">
404
+ </div>
405
+ <div>
406
+ <label class="block text-sm font-medium text-gray-700 mb-1">Water Flow</label>
407
+ <select class="w-full border border-gray-300 rounded-md p-1 text-sm">
408
+ <option>Natural</option>
409
+ <option>Swale-based</option>
410
+ <option>Terrace</option>
411
+ </select>
412
+ </div>
413
+ </div>
414
+ </div>
415
+ </div>
416
+
417
+ <!-- Map and 3D Viewer -->
418
+ <div class="flex-1 relative">
419
+ <div id="map"></div>
420
+ <div id="rendererContainer">
421
+ <canvas id="threejs-canvas"></canvas>
422
+ <button id="toggle-3d" class="absolute top-4 left-4 bg-white p-2 rounded-full shadow-md z-10">
423
+ <i class="fas fa-expand"></i>
424
+ </button>
425
+ </div>
426
+
427
+ <div class="map-overlay">
428
+ <div class="flex space-x-2 mb-2">
429
+ <button id="satellite-btn" class="bg-gray-200 hover:bg-gray-300 px-2 py-1 rounded text-sm">
430
+ Satellite
431
+ </button>
432
+ <button id="topo-btn" class="bg-gray-200 hover:bg-gray-300 px-2 py-1 rounded text-sm">
433
+ Topographic
434
+ </button>
435
+ </div>
436
+ <div class="text-xs text-gray-600">
437
+ <p>Click on map to add elements</p>
438
+ <p>Drag elements to reposition</p>
439
+ </div>
440
+ </div>
441
+ </div>
442
+ </div>
443
+ </div>
444
+
445
+ <!-- Export Modal -->
446
+ <div id="export-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
447
+ <div class="bg-white rounded-lg p-6 w-full max-w-md">
448
+ <div class="flex justify-between items-center mb-4">
449
+ <h3 class="text-xl font-semibold">Export Design</h3>
450
+ <button id="close-export-modal" class="text-gray-500 hover:text-gray-700">
451
+ <i class="fas fa-times"></i>
452
+ </button>
453
+ </div>
454
+ <div class="space-y-4">
455
+ <div class="border border-gray-200 rounded-md p-4 hover:bg-gray-50 cursor-pointer flex items-center" data-format="png">
456
+ <i class="fas fa-image text-3xl text-blue-500 mr-4"></i>
457
+ <div>
458
+ <h4 class="font-medium">PNG Image</h4>
459
+ <p class="text-sm text-gray-500">High resolution static image</p>
460
+ </div>
461
+ </div>
462
+ <div class="border border-gray-200 rounded-md p-4 hover:bg-gray-50 cursor-pointer flex items-center" data-format="mp4">
463
+ <i class="fas fa-video text-3xl text-red-500 mr-4"></i>
464
+ <div>
465
+ <h4 class="font-medium">MP4 Video</h4>
466
+ <p class="text-sm text-gray-500">3D animation of your design</p>
467
+ </div>
468
+ </div>
469
+ <div class="border border-gray-200 rounded-md p-4 hover:bg-gray-50 cursor-pointer flex items-center" data-format="kml">
470
+ <i class="fas fa-map text-3xl text-green-500 mr-4"></i>
471
+ <div>
472
+ <h4 class="font-medium">KML File</h4>
473
+ <p class="text-sm text-gray-500">For GIS applications</p>
474
+ </div>
475
+ </div>
476
+ </div>
477
+ </div>
478
+ </div>
479
+
480
+ <!-- Element Info Modal -->
481
+ <div id="info-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
482
+ <div class="bg-white rounded-lg p-6 w-full max-w-sm">
483
+ <div class="flex justify-between items-center mb-4">
484
+ <h3 id="element-name" class="text-xl font-semibold">Element Information</h3>
485
+ <button id="close-info-modal" class="text-gray-500 hover:text-gray-700">
486
+ <i class="fas fa-times"></i>
487
+ </button>
488
+ </div>
489
+ <div id="element-info-content" class="text-sm text-gray-700">
490
+ <!-- Dynamic content will be inserted here -->
491
+ </div>
492
+ <div class="mt-4">
493
+ <button id="remove-element" class="w-full bg-red-100 hover:bg-red-200 text-red-800 py-2 rounded-md">
494
+ <i class="fas fa-trash-alt mr-2"></i> Remove Element
495
+ </button>
496
+ </div>
497
+ </div>
498
+ </div>
499
+
500
+ <script>
501
+ // Initialize map
502
+ const map = new maplibregl.Map({
503
+ container: 'map',
504
+ style: 'https://demotiles.maplibre.org/style.json',
505
+ center: [0, 0],
506
+ zoom: 2
507
+ });
508
+
509
+ // 3D Scene setup
510
+ const rendererContainer = document.getElementById('rendererContainer');
511
+ const canvas = document.getElementById('threejs-canvas');
512
+ const scene = new THREE.Scene();
513
+ const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
514
+ const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
515
+ renderer.setSize(canvas.clientWidth, canvas.clientHeight);
516
+
517
+ // Add lights
518
+ const ambientLight = new THREE.AmbientLight(0x404040);
519
+ scene.add(ambientLight);
520
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
521
+ directionalLight.position.set(1, 1, 1);
522
+ scene.add(directionalLight);
523
+
524
+ // Add ground plane
525
+ const groundGeometry = new THREE.PlaneGeometry(100, 100);
526
+ const groundMaterial = new THREE.MeshStandardMaterial({
527
+ color: 0x8B4513,
528
+ side: THREE.DoubleSide
529
+ });
530
+ const ground = new THREE.Mesh(groundGeometry, groundMaterial);
531
+ ground.rotation.x = -Math.PI / 2;
532
+ scene.add(ground);
533
+
534
+ // Camera position
535
+ camera.position.set(0, 50, 50);
536
+ camera.lookAt(0, 0, 0);
537
+
538
+ // Store all added elements
539
+ const addedElements = [];
540
+ let selectedElement = null;
541
+
542
+ // Animation loop
543
+ function animate() {
544
+ requestAnimationFrame(animate);
545
+ renderer.render(scene, camera);
546
+ }
547
+ animate();
548
+
549
+ // Tab functionality
550
+ document.querySelectorAll('.tab-button').forEach(button => {
551
+ button.addEventListener('click', function() {
552
+ const tabId = this.getAttribute('data-tab');
553
+
554
+ // Update active tab button
555
+ document.querySelectorAll('.tab-button').forEach(btn => {
556
+ btn.classList.remove('active');
557
+ });
558
+ this.classList.add('active');
559
+
560
+ // Show corresponding tab content
561
+ document.querySelectorAll('.tab-content').forEach(content => {
562
+ content.classList.remove('active');
563
+ });
564
+ document.getElementById(`${tabId}-tab`).classList.add('active');
565
+ });
566
+ });
567
+
568
+ // UI Interactions
569
+ document.getElementById('toggle-3d').addEventListener('click', function() {
570
+ rendererContainer.classList.toggle('collapsed');
571
+ renderer.setSize(rendererContainer.clientWidth, rendererContainer.clientHeight);
572
+ camera.aspect = rendererContainer.clientWidth / rendererContainer.clientHeight;
573
+ camera.updateProjectionMatrix();
574
+ });
575
+
576
+ document.getElementById('export-btn').addEventListener('click', function() {
577
+ document.getElementById('export-modal').classList.remove('hidden');
578
+ });
579
+
580
+ document.getElementById('close-export-modal').addEventListener('click', function() {
581
+ document.getElementById('export-modal').classList.add('hidden');
582
+ });
583
+
584
+ document.getElementById('close-info-modal').addEventListener('click', function() {
585
+ document.getElementById('info-modal').classList.add('hidden');
586
+ });
587
+
588
+ document.getElementById('remove-element').addEventListener('click', function() {
589
+ if (selectedElement) {
590
+ scene.remove(selectedElement.object);
591
+ const index = addedElements.indexOf(selectedElement);
592
+ if (index > -1) {
593
+ addedElements.splice(index, 1);
594
+ }
595
+ document.getElementById('info-modal').classList.add('hidden');
596
+ }
597
+ });
598
+
599
+ // Export format selection
600
+ document.querySelectorAll('[data-format]').forEach(item => {
601
+ item.addEventListener('click', function() {
602
+ const format = this.getAttribute('data-format');
603
+ alert(`Exporting as ${format.toUpperCase()}... This would trigger a real export in a production app.`);
604
+ document.getElementById('export-modal').classList.add('hidden');
605
+ });
606
+ });
607
+
608
+ // Map style switching
609
+ document.getElementById('satellite-btn').addEventListener('click', function() {
610
+ map.setStyle('https://demotiles.maplibre.org/style.json');
611
+ });
612
+
613
+ document.getElementById('topo-btn').addEventListener('click', function() {
614
+ map.setStyle('https://demotiles.maplibre.org/style.json');
615
+ });
616
+
617
+ // Drawing tools
618
+ let currentTool = null;
619
+ document.getElementById('draw-polygon').addEventListener('click', function() {
620
+ resetTools();
621
+ this.classList.add('drawing-tool-active');
622
+ currentTool = 'polygon';
623
+ });
624
+
625
+ document.getElementById('draw-point').addEventListener('click', function() {
626
+ resetTools();
627
+ this.classList.add('drawing-tool-active');
628
+ currentTool = 'point';
629
+ });
630
+
631
+ document.getElementById('measure').addEventListener('click', function() {
632
+ resetTools();
633
+ this.classList.add('drawing-tool-active');
634
+ currentTool = 'measure';
635
+ });
636
+
637
+ document.getElementById('clear-all').addEventListener('click', function() {
638
+ // Clear all 3D elements
639
+ addedElements.forEach(element => {
640
+ scene.remove(element.object);
641
+ });
642
+ addedElements.length = 0;
643
+ });
644
+
645
+ function resetTools() {
646
+ document.querySelectorAll('.drawing-tool-active').forEach(el => {
647
+ el.classList.remove('drawing-tool-active');
648
+ });
649
+ currentTool = null;
650
+ }
651
+
652
+ // Make elements draggable
653
+ document.querySelectorAll('.draggable-element').forEach(element => {
654
+ element.addEventListener('dragstart', function(e) {
655
+ e.dataTransfer.setData('text/plain', JSON.stringify({
656
+ type: this.getAttribute('data-type'),
657
+ name: this.getAttribute('data-name')
658
+ }));
659
+ });
660
+ });
661
+
662
+ // Handle map clicks
663
+ map.on('click', function(e) {
664
+ if (!currentTool) return;
665
+
666
+ const lngLat = e.lngLat;
667
+
668
+ if (currentTool === 'point') {
669
+ // Add a marker at the clicked location
670
+ const marker = new maplibregl.Marker({
671
+ draggable: true,
672
+ color: '#4CAF50'
673
+ }).setLngLat([lngLat.lng, lngLat.lat])
674
+ .addTo(map);
675
+
676
+ // Add corresponding 3D element
677
+ const elementType = 'tree'; // Default for demo
678
+ add3DElement(elementType, lngLat.lng, lngLat.lat);
679
+ }
680
+ });
681
+
682
+ // Handle map drops (from draggable elements)
683
+ map.on('drop', function(e) {
684
+ const data = JSON.parse(e.originalEvent.dataTransfer.getData('text/plain'));
685
+ const lngLat = e.lngLat;
686
+
687
+ // Add 3D element
688
+ const element = add3DElement(data.type, lngLat.lng, lngLat.lat, data.name);
689
+
690
+ // Add map marker
691
+ const marker = new maplibregl.Marker({
692
+ draggable: true,
693
+ color: '#4CAF50'
694
+ }).setLngLat([lngLat.lng, lngLat.lat])
695
+ .addTo(map);
696
+
697
+ // Connect marker to 3D element
698
+ marker.getElement().addEventListener('click', function() {
699
+ showElementInfo(element);
700
+ });
701
+
702
+ // Update position when marker is dragged
703
+ marker.on('dragend', function() {
704
+ const newLngLat = marker.getLngLat();
705
+ element.object.position.x = newLngLat.lng * 10;
706
+ element.object.position.z = newLngLat.lat * 10;
707
+ });
708
+ });
709
+
710
+ // Add 3D elements based on map interactions
711
+ function add3DElement(type, x, z, name = '') {
712
+ let element;
713
+ let color = 0x228B22; // Default green
714
+
715
+ switch(type) {
716
+ // Trees
717
+ case 'apple-tree':
718
+ const appleGeometry = new THREE.ConeGeometry(2, 5, 8);
719
+ const appleMaterial = new THREE.MeshStandardMaterial({ color: 0x8B0000 });
720
+ element = new THREE.Mesh(appleGeometry, appleMaterial);
721
+ element.position.set(x * 10, 2.5, z * 10);
722
+ name = name || 'Apple Tree';
723
+ break;
724
+
725
+ case 'pear-tree':
726
+ const pearGeometry = new THREE.ConeGeometry(2, 5, 8);
727
+ const pearMaterial = new THREE.MeshStandardMaterial({ color: 0x2E8B57 });
728
+ element = new THREE.Mesh(pearGeometry, pearMaterial);
729
+ element.position.set(x * 10, 2.5, z * 10);
730
+ name = name || 'Pear Tree';
731
+ break;
732
+
733
+ case 'cherry-tree':
734
+ const cherryGeometry = new THREE.ConeGeometry(2, 5, 8);
735
+ const cherryMaterial = new THREE.MeshStandardMaterial({ color: 0xFF69B4 });
736
+ element = new THREE.Mesh(cherryGeometry, cherryMaterial);
737
+ element.position.set(x * 10, 2.5, z * 10);
738
+ name = name || 'Cherry Tree';
739
+ break;
740
+
741
+ // Animals
742
+ case 'chicken':
743
+ const chickenGeometry = new THREE.SphereGeometry(1, 16, 16);
744
+ const chickenMaterial = new THREE.MeshStandardMaterial({ color: 0xFFD700 });
745
+ element = new THREE.Mesh(chickenGeometry, chickenMaterial);
746
+ element.position.set(x * 10, 1, z * 10);
747
+ name = name || 'Chicken';
748
+ break;
749
+
750
+ case 'goat':
751
+ const goatGeometry = new THREE.ConeGeometry(1, 2, 4);
752
+ const goatMaterial = new THREE.MeshStandardMaterial({ color: 0xA9A9A9 });
753
+ element = new THREE.Mesh(goatGeometry, goatMaterial);
754
+ element.position.set(x * 10, 1, z * 10);
755
+ name = name || 'Goat';
756
+ break;
757
+
758
+ case 'beehive':
759
+ const beehiveGeometry = new THREE.BoxGeometry(2, 2, 2);
760
+ const beehiveMaterial = new THREE.MeshStandardMaterial({ color: 0xF5DEB3 });
761
+ element = new THREE.Mesh(beehiveGeometry, beehiveMaterial);
762
+ element.position.set(x * 10, 1, z * 10);
763
+ name = name || 'Beehive';
764
+ break;
765
+
766
+ // Water features
767
+ case 'pond':
768
+ const pondGeometry = new THREE.CylinderGeometry(5, 5, 0.5, 32);
769
+ const pondMaterial = new THREE.MeshStandardMaterial({ color: 0x1E90FF });
770
+ element = new THREE.Mesh(pondGeometry, pondMaterial);
771
+ element.position.set(x * 10, 0.25, z * 10);
772
+ element.rotation.x = Math.PI / 2;
773
+ name = name || 'Pond';
774
+ break;
775
+
776
+ case 'swale':
777
+ const swaleGeometry = new THREE.CylinderGeometry(3, 3, 0.3, 32);
778
+ const swaleMaterial = new THREE.MeshStandardMaterial({ color: 0x4682B4 });
779
+ element = new THREE.Mesh(swaleGeometry, swaleMaterial);
780
+ element.position.set(x * 10, 0.15, z * 10);
781
+ element.rotation.x = Math.PI / 2;
782
+ name = name || 'Swale';
783
+ break;
784
+
785
+ case 'rain-barrel':
786
+ const barrelGeometry = new THREE.CylinderGeometry(1.5, 1.5, 3, 32);
787
+ const barrelMaterial = new THREE.MeshStandardMaterial({ color: 0x4169E1 });
788
+ element = new THREE.Mesh(barrelGeometry, barrelMaterial);
789
+ element.position.set(x * 10, 1.5, z * 10);
790
+ name = name || 'Rain Barrel';
791
+ break;
792
+
793
+ // Default tree
794
+ default:
795
+ const treeGeometry = new THREE.ConeGeometry(2, 5, 8);
796
+ const treeMaterial = new THREE.MeshStandardMaterial({ color });
797
+ element = new THREE.Mesh(treeGeometry, treeMaterial);
798
+ element.position.set(x * 10, 2.5, z * 10);
799
+ name = name || 'Tree';
800
+ }
801
+
802
+ if (element) {
803
+ scene.add(element);
804
+ const elementData = {
805
+ object: element,
806
+ type: type,
807
+ name: name,
808
+ position: { x: x * 10, y: element.position.y, z: z * 10 }
809
+ };
810
+ addedElements.push(elementData);
811
+
812
+ // Make element clickable
813
+ element.userData = { clickable: true, info: elementData };
814
+
815
+ return elementData;
816
+ }
817
+ }
818
+
819
+ // Show element information
820
+ function showElementInfo(element) {
821
+ selectedElement = element;
822
+ document.getElementById('element-name').textContent = element.name;
823
+
824
+ let infoContent = '';
825
+ switch(element.type) {
826
+ case 'apple-tree':
827
+ infoContent = `
828
+ <p><strong>Scientific Name:</strong> Malus domestica</p>
829
+ <p><strong>Type:</strong> Deciduous fruit tree</p>
830
+ <p><strong>Height:</strong> 2-4.5m</p>
831
+ <p><strong>Spacing:</strong> 3-5m apart</p>
832
+ <p><strong>Companion Plants:</strong> Chives, Nasturtium, Garlic</p>
833
+ `;
834
+ break;
835
+
836
+ case 'chicken':
837
+ infoContent = `
838
+ <p><strong>Scientific Name:</strong> Gallus gallus domesticus</p>
839
+ <p><strong>Benefits:</strong> Pest control, eggs, manure</p>
840
+ <p><strong>Space Needed:</strong> 1m² per bird in coop</p>
841
+ <p><strong>Foraging Area:</strong> 10m² per bird recommended</p>
842
+ `;
843
+ break;
844
+
845
+ case 'pond':
846
+ infoContent = `
847
+ <p><strong>Type:</strong> Water feature</p>
848
+ <p><strong>Functions:</strong> Water storage, wildlife habitat, microclimate</p>
849
+ <p><strong>Depth:</strong> Minimum 60cm for fish</p>
850
+ <p><strong>Edge Plants:</strong> Cattails, Watercress, Duckweed</p>
851
+ `;
852
+ break;
853
+
854
+ default:
855
+ infoContent = `
856
+ <p>This is a ${element.name} element in your permaculture design.</p>
857
+ <p>Click "Remove Element" to delete it from your design.</p>
858
+ `;
859
+ }
860
+
861
+ document.getElementById('element-info-content').innerHTML = infoContent;
862
+ document.getElementById('info-modal').classList.remove('hidden');
863
+ }
864
+
865
+ // Handle 3D object clicks
866
+ function onDocumentMouseDown(event) {
867
+ event.preventDefault();
868
+
869
+ const mouse = new THREE.Vector2(
870
+ (event.clientX / window.innerWidth) * 2 - 1,
871
+ -(event.clientY / window.innerHeight) * 2 + 1
872
+ );
873
+
874
+ const raycaster = new THREE.Raycaster();
875
+ raycaster.setFromCamera(mouse, camera);
876
+
877
+ const intersects = raycaster.intersectObjects(scene.children);
878
+
879
+ if (intersects.length > 0) {
880
+ const object = intersects[0].object;
881
+ if (object.userData.clickable) {
882
+ showElementInfo(object.userData.info);
883
+ }
884
+ }
885
+ }
886
+ document.addEventListener('mousedown', onDocumentMouseDown, false);
887
+
888
+ // Handle window resize
889
+ window.addEventListener('resize', function() {
890
+ renderer.setSize(rendererContainer.clientWidth, rendererContainer.clientHeight);
891
+ camera.aspect = rendererContainer.clientWidth / rendererContainer.clientHeight;
892
+ camera.updateProjectionMatrix();
893
+ });
894
+ </script>
895
+ <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=antiquesordo/ak-permaculture-designer-2-0" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
896
+ </html>