Hugging Face's logo

Spaces:
gradsyntax
/
aqua-builder
Running

App Files Community
gradsyntax commited on
Commit
bb3183e
·
verified ·
1 Parent(s): 03b29c8

make the pdf which is going to be generated more visually appealing with matching layout and professional touch - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +971 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Aqua Builder
3
- emoji: 👀
4
- colorFrom: green
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: aqua-builder
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,971 @@
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>Aqua Builder | Green Souq Aquariums</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <style>
12
+ .tooltip {
13
+ position: relative;
14
+ display: inline-block;
15
+ }
16
+ .tooltip .tooltiptext {
17
+ visibility: hidden;
18
+ width: 200px;
19
+ background-color: #333;
20
+ color: #fff;
21
+ text-align: center;
22
+ border-radius: 6px;
23
+ padding: 5px;
24
+ position: absolute;
25
+ z-index: 1;
26
+ bottom: 125%;
27
+ left: 50%;
28
+ margin-left: -100px;
29
+ opacity: 0;
30
+ transition: opacity 0.3s;
31
+ }
32
+ .tooltip:hover .tooltiptext {
33
+ visibility: visible;
34
+ opacity: 1;
35
+ }
36
+ input[type=number]::-webkit-inner-spin-button,
37
+ input[type=number]::-webkit-outer-spin-button {
38
+ -webkit-appearance: none;
39
+ margin: 0;
40
+ }
41
+ .summary-item {
42
+ transition: all 0.3s ease;
43
+ }
44
+ .summary-item:hover {
45
+ background-color: #f0fdf4;
46
+ }
47
+ </style>
48
+ </head>
49
+ <body class="bg-gray-50">
50
+ <div class="container mx-auto px-4 py-8 max-w-6xl">
51
+ <!-- Company Header -->
52
+ <div class="bg-green-700 text-white py-3 px-4 mb-8 rounded-lg shadow-md">
53
+ <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
54
+ <div class="flex items-center mb-2 md:mb-0">
55
+ <div class="bg-white text-green-700 p-2 rounded-full mr-3">
56
+ <i class="fas fa-fish text-xl"></i>
57
+ </div>
58
+ <h1 class="text-xl md:text-2xl font-bold">Green Souq Aquariums</h1>
59
+ </div>
60
+ <div class="text-sm md:text-base">
61
+ <i class="fas fa-map-marker-alt mr-1"></i> Doha, Qatar
62
+ </div>
63
+ </div>
64
+ </div>
65
+
66
+ <!-- App Header -->
67
+ <header class="mb-8 text-center">
68
+ <div class="flex justify-center mb-4">
69
+ <div class="bg-green-600 text-white p-4 rounded-full shadow-lg">
70
+ <i class="fas fa-water text-4xl"></i>
71
+ </div>
72
+ </div>
73
+ <h1 class="text-3xl md:text-4xl font-bold text-green-800 mb-2">Aqua Builder</h1>
74
+ <p class="text-lg text-gray-600">Build your dream aquarium and get an instant quotation</p>
75
+ </header>
76
+
77
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
78
+ <!-- Configuration Panel -->
79
+ <div class="lg:col-span-2 bg-white rounded-xl shadow-md p-6">
80
+ <h2 class="text-2xl font-semibold text-green-700 mb-6 border-b pb-2">Aquarium Configuration</h2>
81
+
82
+ <!-- Dimensions Section -->
83
+ <div class="mb-8">
84
+ <h3 class="text-xl font-medium text-gray-800 mb-4 flex items-center">
85
+ <i class="fas fa-ruler-combined mr-2 text-green-600"></i> Aquarium Dimensions
86
+ </h3>
87
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
88
+ <div>
89
+ <label class="block text-sm font-medium text-gray-700 mb-1">Length (cm)</label>
90
+ <input type="number" id="length" min="30" value="30" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
91
+ </div>
92
+ <div>
93
+ <label class="block text-sm font-medium text-gray-700 mb-1">Breadth (cm)</label>
94
+ <input type="number" id="breadth" min="30" value="30" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
95
+ </div>
96
+ <div>
97
+ <label class="block text-sm font-medium text-gray-700 mb-1">Height (cm)</label>
98
+ <input type="number" id="height" min="30" value="30" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
99
+ </div>
100
+ </div>
101
+ <div id="volume-display" class="mt-3 text-sm text-gray-600">
102
+ Volume: 27 liters (30×30×30 cm)
103
+ </div>
104
+ </div>
105
+
106
+ <!-- Add-Ons Section -->
107
+ <div class="mb-8">
108
+ <h3 class="text-xl font-medium text-gray-800 mb-4 flex items-center">
109
+ <i class="fas fa-plus-circle mr-2 text-green-600"></i> Add-On Products
110
+ </h3>
111
+
112
+ <!-- Filters -->
113
+ <div class="mb-6">
114
+ <h4 class="text-lg font-medium text-gray-700 mb-3 flex items-center">
115
+ <i class="fas fa-filter mr-2 text-blue-500"></i> Filters
116
+ </h4>
117
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
118
+ <div class="flex items-center">
119
+ <input type="radio" id="filter-hangon" name="filter" value="Hang-on Filter" data-price="50" class="mr-2">
120
+ <label for="filter-hangon" class="flex-1">Hang-on Filter <span class="text-green-600 font-medium">50 QAR</span></label>
121
+ </div>
122
+ <div class="flex items-center">
123
+ <input type="radio" id="filter-internal" name="filter" value="Internal Filter" data-price="50" class="mr-2">
124
+ <label for="filter-internal" class="flex-1">Internal Filter <span class="text-green-600 font-medium">50 QAR</span></label>
125
+ </div>
126
+ <div class="flex items-center">
127
+ <input type="radio" id="filter-canister" name="filter" value="Canister Filter" data-price="200" class="mr-2">
128
+ <label for="filter-canister" class="flex-1">Canister Filter <span class="text-green-600 font-medium">200 QAR</span></label>
129
+ </div>
130
+ </div>
131
+ </div>
132
+
133
+ <!-- Lights -->
134
+ <div class="mb-6">
135
+ <h4 class="text-lg font-medium text-gray-700 mb-3 flex items-center">
136
+ <i class="fas fa-lightbulb mr-2 text-yellow-400"></i> Lights
137
+ </h4>
138
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
139
+ <div class="flex items-center">
140
+ <input type="radio" id="light-side" name="light" value="Side Light" data-price="50" class="mr-2">
141
+ <label for="light-side" class="flex-1">Side Light <span class="text-green-600 font-medium">50 QAR</span></label>
142
+ </div>
143
+ <div class="flex items-center">
144
+ <input type="radio" id="light-spot" name="light" value="Spot Light" data-price="30" class="mr-2">
145
+ <label for="light-spot" class="flex-1">Spot Light <span class="text-green-600 font-medium">30 QAR</span></label>
146
+ </div>
147
+ <div class="flex items-center">
148
+ <input type="radio" id="light-spectrum" name="light" value="Spectrum Light" data-price="90" class="mr-2">
149
+ <label for="light-spectrum" class="flex-1">Spectrum Light <span class="text-green-600 font-medium">90 QAR</span></label>
150
+ </div>
151
+ </div>
152
+ </div>
153
+
154
+ <!-- Stones -->
155
+ <div class="mb-6">
156
+ <h4 class="text-lg font-medium text-gray-700 mb-3 flex items-center">
157
+ <i class="fas fa-mountain mr-2 text-gray-500"></i> Stones
158
+ </h4>
159
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
160
+ <div>
161
+ <label class="block text-sm font-medium text-gray-700 mb-1">Dragon Stone (15 QAR/kg)</label>
162
+ <div class="flex">
163
+ <input type="number" id="dragon-stone-qty" min="0" value="0" class="w-20 px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-green-500">
164
+ <span class="inline-flex items-center px-3 rounded-r-md bg-gray-50 text-gray-500">kg</span>
165
+ </div>
166
+ </div>
167
+ <div>
168
+ <label class="block text-sm font-medium text-gray-700 mb-1">Seriyu Stone (12 QAR/kg)</label>
169
+ <div class="flex">
170
+ <input type="number" id="seriyu-stone-qty" min="0" value="0" class="w-20 px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-green-500">
171
+ <span class="inline-flex items-center px-3 rounded-r-md bg-gray-50 text-gray-500">kg</span>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </div>
176
+
177
+ <!-- Driftwood -->
178
+ <div class="mb-6">
179
+ <h4 class="text-lg font-medium text-gray-700 mb-3 flex items-center">
180
+ <i class="fas fa-tree mr-2 text-amber-800"></i> Driftwood
181
+ </h4>
182
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
183
+ <div>
184
+ <label class="block text-sm font-medium text-gray-700 mb-1">Black Wood (70 QAR/kg)</label>
185
+ <div class="flex">
186
+ <input type="number" id="black-wood-qty" min="0" value="0" class="w-20 px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-green-500">
187
+ <span class="inline-flex items-center px-3 rounded-r-md bg-gray-50 text-gray-500">kg</span>
188
+ </div>
189
+ </div>
190
+ <div>
191
+ <label class="block text-sm font-medium text-gray-700 mb-1">Normal Wood (90 QAR/kg)</label>
192
+ <div class="flex">
193
+ <input type="number" id="normal-wood-qty" min="0" value="0" class="w-20 px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-green-500">
194
+ <span class="inline-flex items-center px-3 rounded-r-md bg-gray-50 text-gray-500">kg</span>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+
200
+ <!-- Plants -->
201
+ <div class="mb-6">
202
+ <h4 class="text-lg font-medium text-gray-700 mb-3 flex items-center">
203
+ <i class="fas fa-leaf mr-2 text-green-500"></i> Plants
204
+ </h4>
205
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
206
+ <div>
207
+ <label class="block text-sm font-medium text-gray-700 mb-1">Moss (10 QAR/piece)</label>
208
+ <div class="flex">
209
+ <input type="number" id="moss-qty" min="0" value="0" class="w-20 px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-green-500">
210
+ <span class="inline-flex items-center px-3 rounded-r-md bg-gray-50 text-gray-500">pieces</span>
211
+ </div>
212
+ </div>
213
+ <div>
214
+ <label class="block text-sm font-medium text-gray-700 mb-1">Hanubias (30 QAR/piece)</label>
215
+ <div class="flex">
216
+ <input type="number" id="hanubias-qty" min="0" value="0" class="w-20 px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-green-500">
217
+ <span class="inline-flex items-center px-3 rounded-r-md bg-gray-50 text-gray-500">pieces</span>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+
223
+ <!-- Soil -->
224
+ <div class="mb-6">
225
+ <h4 class="text-lg font-medium text-gray-700 mb-3 flex items-center">
226
+ <i class="fas fa-seedling mr-2 text-amber-600"></i> Soil
227
+ </h4>
228
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
229
+ <div>
230
+ <label class="block text-sm font-medium text-gray-700 mb-1">Week Aqua Soil (40 QAR/3L)</label>
231
+ <div class="flex">
232
+ <input type="number" id="week-aqua-qty" min="0" value="0" class="w-20 px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-green-500">
233
+ <span class="inline-flex items-center px-3 rounded-r-md bg-gray-50 text-gray-500">packs</span>
234
+ </div>
235
+ </div>
236
+ <div>
237
+ <label class="block text-sm font-medium text-gray-700 mb-1">Amazonia Soil (40 QAR/3L)</label>
238
+ <div class="flex">
239
+ <input type="number" id="amazonia-qty" min="0" value="0" class="w-20 px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-green-500">
240
+ <span class="inline-flex items-center px-3 rounded-r-md bg-gray-50 text-gray-500">packs</span>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+
246
+ <!-- Finish Options -->
247
+ <div class="mb-6">
248
+ <h4 class="text-lg font-medium text-gray-700 mb-3 flex items-center">
249
+ <i class="fas fa-gem mr-2 text-blue-400"></i> Finish Options
250
+ </h4>
251
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
252
+ <div class="flex items-center">
253
+ <input type="radio" id="finish-unpolished" name="finish" value="Unpolished" data-price="0" checked class="mr-2">
254
+ <label for="finish-unpolished" class="flex-1">Unpolished <span class="text-green-600 font-medium">No extra charge</span></label>
255
+ </div>
256
+ <div class="flex items-center">
257
+ <input type="radio" id="finish-polished" name="finish" value="Polished Glass" data-price="40" class="mr-2">
258
+ <label for="finish-polished" class="flex-1">Polished Glass <span class="text-green-600 font-medium">+40 QAR</span></label>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+
264
+ <!-- Customer Info -->
265
+ <div class="mb-6">
266
+ <h3 class="text-xl font-medium text-gray-800 mb-4 flex items-center">
267
+ <i class="fas fa-user-circle mr-2 text-green-600"></i> Your Information (Optional)
268
+ </h3>
269
+ <div>
270
+ <label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
271
+ <input type="text" id="customer-name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500" placeholder="Enter your name">
272
+ </div>
273
+ </div>
274
+ </div>
275
+
276
+ <!-- Summary Panel -->
277
+ <div class="lg:col-span-1">
278
+ <div class="bg-white rounded-xl shadow-md p-6 sticky top-4">
279
+ <h2 class="text-2xl font-semibold text-green-700 mb-6 border-b pb-2">Quotation Summary</h2>
280
+
281
+ <div id="summary-content" class="mb-6">
282
+ <div class="summary-item mb-3 pb-3 border-b">
283
+ <div class="flex justify-between">
284
+ <span class="font-medium">Base Tank (27L)</span>
285
+ <span>70.00 QAR</span>
286
+ </div>
287
+ <div class="text-sm text-gray-500 mt-1">30×30×30 cm</div>
288
+ </div>
289
+
290
+ <div id="additional-volume" class="hidden summary-item mb-3 pb-3 border-b">
291
+ <div class="flex justify-between">
292
+ <span class="font-medium">Additional Volume</span>
293
+ <span>0.00 QAR</span>
294
+ </div>
295
+ </div>
296
+
297
+ <div id="filter-summary" class="hidden summary-item mb-3 pb-3 border-b">
298
+ <div class="flex justify-between">
299
+ <span class="font-medium">Filter</span>
300
+ <span>0.00 QAR</span>
301
+ </div>
302
+ </div>
303
+
304
+ <div id="light-summary" class="hidden summary-item mb-3 pb-3 border-b">
305
+ <div class="flex justify-between">
306
+ <span class="font-medium">Light</span>
307
+ <span>0.00 QAR</span>
308
+ </div>
309
+ </div>
310
+
311
+ <div id="stones-summary" class="hidden summary-item mb-3 pb-3 border-b">
312
+ <div class="flex justify-between">
313
+ <span class="font-medium">Stones</span>
314
+ <span>0.00 QAR</span>
315
+ </div>
316
+ </div>
317
+
318
+ <div id="driftwood-summary" class="hidden summary-item mb-3 pb-3 border-b">
319
+ <div class="flex justify-between">
320
+ <span class="font-medium">Driftwood</span>
321
+ <span>0.00 QAR</span>
322
+ </div>
323
+ </div>
324
+
325
+ <div id="plants-summary" class="hidden summary-item mb-3 pb-3 border-b">
326
+ <div class="flex justify-between">
327
+ <span class="font-medium">Plants</span>
328
+ <span>0.00 QAR</span>
329
+ </div>
330
+ </div>
331
+
332
+ <div id="soil-summary" class="hidden summary-item mb-3 pb-3 border-b">
333
+ <div class="flex justify-between">
334
+ <span class="font-medium">Soil</span>
335
+ <span>0.00 QAR</span>
336
+ </div>
337
+ </div>
338
+
339
+ <div id="finish-summary" class="hidden summary-item mb-3 pb-3 border-b">
340
+ <div class="flex justify-between">
341
+ <span class="font-medium">Finish</span>
342
+ <span>0.00 QAR</span>
343
+ </div>
344
+ </div>
345
+ </div>
346
+
347
+ <div class="bg-green-50 p-4 rounded-lg mb-6">
348
+ <div class="flex justify-between items-center">
349
+ <span class="font-bold text-lg text-green-800">Total</span>
350
+ <span id="grand-total" class="font-bold text-2xl text-green-800">70.00 QAR</span>
351
+ </div>
352
+ </div>
353
+
354
+ <div class="grid grid-cols-1 gap-3">
355
+ <button id="download-btn" class="w-full bg-green-600 hover:bg-green-700 text-white font-medium py-3 px-4 rounded-md flex items-center justify-center transition duration-300">
356
+ <i class="fas fa-file-pdf mr-2"></i> Download Quotation (PDF)
357
+ </button>
358
+ <button id="whatsapp-btn" class="w-full bg-green-500 hover:bg-green-600 text-white font-medium py-3 px-4 rounded-md flex items-center justify-center transition duration-300">
359
+ <i class="fab fa-whatsapp mr-2"></i> Share via WhatsApp
360
+ </button>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </div>
366
+
367
+ <!-- Hidden div for PDF generation -->
368
+ <div id="pdf-content" class="hidden p-8" style="width: 210mm; min-height: 297mm; background: white; margin: 0 auto;">
369
+ <div class="flex justify-between items-center mb-6 border-b pb-4">
370
+ <div>
371
+ <h1 class="text-3xl font-bold text-green-800">Green Souq Aquariums</h1>
372
+ <p class="text-gray-600">Doha, Qatar</p>
373
+ </div>
374
+ <div class="text-right">
375
+ <p class="text-gray-600">Date: <span id="pdf-date"></span></p>
376
+ <p class="text-gray-600">Quotation #: <span id="pdf-quote-id"></span></p>
377
+ </div>
378
+ </div>
379
+
380
+ <div class="mb-6">
381
+ <h2 class="text-xl font-semibold text-green-700 mb-2">Customer Information</h2>
382
+ <p id="pdf-customer-name" class="text-gray-700">Name: Not provided</p>
383
+ </div>
384
+
385
+ <h2 class="text-xl font-semibold text-green-700 mb-2">Aquarium Specifications</h2>
386
+ <table class="w-full mb-6">
387
+ <thead>
388
+ <tr class="bg-green-100">
389
+ <th class="text-left py-2 px-4">Item</th>
390
+ <th class="text-right py-2 px-4">Quantity</th>
391
+ <th class="text-right py-2 px-4">Price</th>
392
+ <th class="text-right py-2 px-4">Total</th>
393
+ </tr>
394
+ </thead>
395
+ <tbody id="pdf-items">
396
+ <tr class="border-b">
397
+ <td class="py-2 px-4">Base Tank</td>
398
+ <td class="text-right py-2 px-4" id="pdf-tank-size">30×30×30 cm</td>
399
+ <td class="text-right py-2 px-4">70.00 QAR</td>
400
+ <td class="text-right py-2 px-4">70.00 QAR</td>
401
+ </tr>
402
+ </tbody>
403
+ </table>
404
+
405
+ <div class="flex justify-end mb-8">
406
+ <div class="w-64">
407
+ <div class="flex justify-between py-2 border-b">
408
+ <span class="font-medium">Subtotal</span>
409
+ <span id="pdf-subtotal">70.00 QAR</span>
410
+ </div>
411
+ <div class="flex justify-between py-2 font-bold text-lg">
412
+ <span>Total</span>
413
+ <span id="pdf-total">70.00 QAR</span>
414
+ </div>
415
+ </div>
416
+ </div>
417
+
418
+ <div class="text-xs text-gray-500 border-t pt-4">
419
+ <p class="font-medium mb-2">Terms & Conditions:</p>
420
+ <p>1. Prices are valid for 30 days from the date of this quotation.</p>
421
+ <p>2. Delivery charges may apply depending on location.</p>
422
+ <p>3. Installation services available at additional cost.</p>
423
+ <p>4. Custom designs may require additional time and cost.</p>
424
+ </div>
425
+
426
+ <div class="mt-8 pt-4 border-t text-center text-sm text-gray-500">
427
+ <p>Green Souq Aquariums - Doha, Qatar</p>
428
+ <p>Phone: +974 3138 8895 | Web: www.greensouq.qa</p>
429
+ <p>© 2025 Green Souq Aquariums. All rights reserved.</p>
430
+ </div>
431
+ </div>
432
+
433
+ <script>
434
+ // Check if required libraries are loaded
435
+ if (!window.jspdf || !window.html2canvas) {
436
+ console.error('Required PDF libraries not loaded');
437
+ document.getElementById('download-btn').disabled = true;
438
+ document.getElementById('download-btn').innerHTML = '<i class="fas fa-exclamation-triangle mr-2"></i> PDF Unavailable';
439
+ document.getElementById('download-btn').classList.add('bg-gray-400');
440
+ document.getElementById('download-btn').classList.remove('bg-green-600', 'hover:bg-green-700');
441
+ }
442
+
443
+ // Initialize jsPDF
444
+ const { jsPDF } = window.jspdf;
445
+
446
+ // DOM Elements
447
+ const lengthInput = document.getElementById('length');
448
+ const breadthInput = document.getElementById('breadth');
449
+ const heightInput = document.getElementById('height');
450
+ const volumeDisplay = document.getElementById('volume-display');
451
+
452
+ // Pricing variables
453
+ const baseVolume = 27; // liters (30x30x30 cm)
454
+ const basePrice = 70; // QAR
455
+ const additionalLiterPrice = 2.59; // QAR per liter over base
456
+
457
+ // Summary elements
458
+ const additionalVolumeSummary = document.getElementById('additional-volume');
459
+ const filterSummary = document.getElementById('filter-summary');
460
+ const lightSummary = document.getElementById('light-summary');
461
+ const stonesSummary = document.getElementById('stones-summary');
462
+ const driftwoodSummary = document.getElementById('driftwood-summary');
463
+ const plantsSummary = document.getElementById('plants-summary');
464
+ const soilSummary = document.getElementById('soil-summary');
465
+ const finishSummary = document.getElementById('finish-summary');
466
+ const grandTotalElement = document.getElementById('grand-total');
467
+
468
+ // Buttons
469
+ const downloadBtn = document.getElementById('download-btn');
470
+ const whatsappBtn = document.getElementById('whatsapp-btn');
471
+
472
+ // PDF elements
473
+ const pdfContent = document.getElementById('pdf-content');
474
+
475
+ // Initialize calculation
476
+ let currentVolume = baseVolume;
477
+ let currentDimensions = '30×30×30 cm';
478
+ let currentTotal = basePrice;
479
+ let selectedFilter = null;
480
+ let selectedLight = null;
481
+ let selectedFinish = 'Unpolished';
482
+
483
+ // Event listeners for dimensions
484
+ [lengthInput, breadthInput, heightInput].forEach(input => {
485
+ input.addEventListener('input', calculateVolume);
486
+ });
487
+
488
+ // Event listeners for radio buttons
489
+ document.querySelectorAll('input[type="radio"]').forEach(radio => {
490
+ radio.addEventListener('change', updateSelection);
491
+ });
492
+
493
+ // Event listeners for quantity inputs
494
+ document.querySelectorAll('input[type="number"]:not(#length):not(#breadth):not(#height):not(#customer-name)').forEach(input => {
495
+ input.addEventListener('input', calculateTotal);
496
+ });
497
+
498
+ // Download button
499
+ downloadBtn.addEventListener('click', generatePDF);
500
+
501
+ // WhatsApp button
502
+ whatsappBtn.addEventListener('click', shareOnWhatsApp);
503
+
504
+ // Initial calculation
505
+ calculateTotal();
506
+
507
+ // Functions
508
+ function calculateVolume() {
509
+ // Ensure minimum 30cm for each dimension
510
+ let length = Math.max(30, parseInt(lengthInput.value) || 30);
511
+ let breadth = Math.max(30, parseInt(breadthInput.value) || 30);
512
+ let height = Math.max(30, parseInt(heightInput.value) || 30);
513
+
514
+ // Update input values
515
+ lengthInput.value = length;
516
+ breadthInput.value = breadth;
517
+ heightInput.value = height;
518
+
519
+ // Calculate volume in cm³ and convert to liters
520
+ const volumeCm3 = length * breadth * height;
521
+ const volumeLiters = volumeCm3 / 1000;
522
+ currentVolume = volumeLiters;
523
+ currentDimensions = `${length}×${breadth}×${height} cm`;
524
+
525
+ // Update display
526
+ volumeDisplay.textContent = `Volume: ${volumeLiters.toFixed(1)} liters (${length}×${breadth}×${height} cm)`;
527
+
528
+ // Recalculate total
529
+ calculateTotal();
530
+ }
531
+
532
+ function updateSelection(e) {
533
+ if (e.target.name === 'filter') {
534
+ selectedFilter = {
535
+ name: e.target.value,
536
+ price: parseFloat(e.target.dataset.price)
537
+ };
538
+ } else if (e.target.name === 'light') {
539
+ selectedLight = {
540
+ name: e.target.value,
541
+ price: parseFloat(e.target.dataset.price)
542
+ };
543
+ } else if (e.target.name === 'finish') {
544
+ selectedFinish = e.target.value;
545
+ }
546
+
547
+ calculateTotal();
548
+ }
549
+
550
+ function calculateTotal() {
551
+ // Base tank price
552
+ let additionalLiters = Math.max(0, currentVolume - baseVolume);
553
+ let additionalPrice = additionalLiters * additionalLiterPrice;
554
+ let tankPrice = basePrice + additionalPrice;
555
+
556
+ // Filter price
557
+ let filterPrice = selectedFilter ? selectedFilter.price : 0;
558
+
559
+ // Light price
560
+ let lightPrice = selectedLight ? selectedLight.price : 0;
561
+
562
+ // Stones
563
+ let dragonStoneQty = parseInt(document.getElementById('dragon-stone-qty').value) || 0;
564
+ let seriyuStoneQty = parseInt(document.getElementById('seriyu-stone-qty').value) || 0;
565
+ let stonesPrice = (dragonStoneQty * 15) + (seriyuStoneQty * 12);
566
+ let stonesText = [];
567
+ if (dragonStoneQty > 0) stonesText.push(`${dragonStoneQty}kg Dragon Stone`);
568
+ if (seriyuStoneQty > 0) stonesText.push(`${seriyuStoneQty}kg Seriyu Stone`);
569
+
570
+ // Driftwood
571
+ let blackWoodQty = parseInt(document.getElementById('black-wood-qty').value) || 0;
572
+ let normalWoodQty = parseInt(document.getElementById('normal-wood-qty').value) || 0;
573
+ let driftwoodPrice = (blackWoodQty * 70) + (normalWoodQty * 90);
574
+ let driftwoodText = [];
575
+ if (blackWoodQty > 0) driftwoodText.push(`${blackWoodQty}kg Black Wood`);
576
+ if (normalWoodQty > 0) driftwoodText.push(`${normalWoodQty}kg Normal Wood`);
577
+
578
+ // Plants
579
+ let mossQty = parseInt(document.getElementById('moss-qty').value) || 0;
580
+ let hanubiasQty = parseInt(document.getElementById('hanubias-qty').value) || 0;
581
+ let plantsPrice = (mossQty * 10) + (hanubiasQty * 30);
582
+ let plantsText = [];
583
+ if (mossQty > 0) plantsText.push(`${mossQty} Moss`);
584
+ if (hanubiasQty > 0) plantsText.push(`${hanubiasQty} Hanubias`);
585
+
586
+ // Soil
587
+ let weekAquaQty = parseInt(document.getElementById('week-aqua-qty').value) || 0;
588
+ let amazoniaQty = parseInt(document.getElementById('amazonia-qty').value) || 0;
589
+ let soilPrice = (weekAquaQty * 40) + (amazoniaQty * 40);
590
+ let soilText = [];
591
+ if (weekAquaQty > 0) soilText.push(`${weekAquaQty} Week Aqua Soil`);
592
+ if (amazoniaQty > 0) soilText.push(`${amazoniaQty} Amazonia Soil`);
593
+
594
+ // Finish
595
+ let finishPrice = selectedFinish === 'Polished Glass' ? 40 : 0;
596
+
597
+ // Calculate total
598
+ currentTotal = tankPrice + filterPrice + lightPrice + stonesPrice + driftwoodPrice + plantsPrice + soilPrice + finishPrice;
599
+
600
+ // Update summary display
601
+ updateSummaryDisplay(
602
+ additionalLiters, additionalPrice,
603
+ selectedFilter, filterPrice,
604
+ selectedLight, lightPrice,
605
+ stonesText, stonesPrice,
606
+ driftwoodText, driftwoodPrice,
607
+ plantsText, plantsPrice,
608
+ soilText, soilPrice,
609
+ selectedFinish, finishPrice
610
+ );
611
+
612
+ // Update grand total
613
+ grandTotalElement.textContent = currentTotal.toFixed(2) + ' QAR';
614
+ }
615
+
616
+ function updateSummaryDisplay(
617
+ additionalLiters, additionalPrice,
618
+ filter, filterPrice,
619
+ light, lightPrice,
620
+ stonesText, stonesPrice,
621
+ driftwoodText, driftwoodPrice,
622
+ plantsText, plantsPrice,
623
+ soilText, soilPrice,
624
+ finish, finishPrice
625
+ ) {
626
+ // Base tank and additional volume
627
+ if (additionalLiters > 0) {
628
+ additionalVolumeSummary.classList.remove('hidden');
629
+ additionalVolumeSummary.innerHTML = `
630
+ <div class="flex justify-between">
631
+ <span class="font-medium">Additional Volume (${additionalLiters.toFixed(1)}L)</span>
632
+ <span>${additionalPrice.toFixed(2)} QAR</span>
633
+ </div>
634
+ `;
635
+ } else {
636
+ additionalVolumeSummary.classList.add('hidden');
637
+ }
638
+
639
+ // Filter
640
+ if (filter) {
641
+ filterSummary.classList.remove('hidden');
642
+ filterSummary.innerHTML = `
643
+ <div class="flex justify-between">
644
+ <span class="font-medium">${filter.name}</span>
645
+ <span>${filterPrice.toFixed(2)} QAR</span>
646
+ </div>
647
+ `;
648
+ } else {
649
+ filterSummary.classList.add('hidden');
650
+ }
651
+
652
+ // Light
653
+ if (light) {
654
+ lightSummary.classList.remove('hidden');
655
+ lightSummary.innerHTML = `
656
+ <div class="flex justify-between">
657
+ <span class="font-medium">${light.name}</span>
658
+ <span>${lightPrice.toFixed(2)} QAR</span>
659
+ </div>
660
+ `;
661
+ } else {
662
+ lightSummary.classList.add('hidden');
663
+ }
664
+
665
+ // Stones
666
+ if (stonesText.length > 0) {
667
+ stonesSummary.classList.remove('hidden');
668
+ stonesSummary.innerHTML = `
669
+ <div class="flex justify-between">
670
+ <span class="font-medium">${stonesText.join(', ')}</span>
671
+ <span>${stonesPrice.toFixed(2)} QAR</span>
672
+ </div>
673
+ `;
674
+ } else {
675
+ stonesSummary.classList.add('hidden');
676
+ }
677
+
678
+ // Driftwood
679
+ if (driftwoodText.length > 0) {
680
+ driftwoodSummary.classList.remove('hidden');
681
+ driftwoodSummary.innerHTML = `
682
+ <div class="flex justify-between">
683
+ <span class="font-medium">${driftwoodText.join(', ')}</span>
684
+ <span>${driftwoodPrice.toFixed(2)} QAR</span>
685
+ </div>
686
+ `;
687
+ } else {
688
+ driftwoodSummary.classList.add('hidden');
689
+ }
690
+
691
+ // Plants
692
+ if (plantsText.length > 0) {
693
+ plantsSummary.classList.remove('hidden');
694
+ plantsSummary.innerHTML = `
695
+ <div class="flex justify-between">
696
+ <span class="font-medium">${plantsText.join(', ')}</span>
697
+ <span>${plantsPrice.toFixed(2)} QAR</span>
698
+ </div>
699
+ `;
700
+ } else {
701
+ plantsSummary.classList.add('hidden');
702
+ }
703
+
704
+ // Soil
705
+ if (soilText.length > 0) {
706
+ soilSummary.classList.remove('hidden');
707
+ soilSummary.innerHTML = `
708
+ <div class="flex justify-between">
709
+ <span class="font-medium">${soilText.join(', ')}</span>
710
+ <span>${soilPrice.toFixed(2)} QAR</span>
711
+ </div>
712
+ `;
713
+ } else {
714
+ soilSummary.classList.add('hidden');
715
+ }
716
+
717
+ // Finish
718
+ if (finishPrice > 0) {
719
+ finishSummary.classList.remove('hidden');
720
+ finishSummary.innerHTML = `
721
+ <div class="flex justify-between">
722
+ <span class="font-medium">${finish}</span>
723
+ <span>${finishPrice.toFixed(2)} QAR</span>
724
+ </div>
725
+ `;
726
+ } else {
727
+ finishSummary.classList.add('hidden');
728
+ }
729
+ }
730
+
731
+ function generatePDF() {
732
+ const downloadBtn = document.getElementById('download-btn');
733
+ const originalText = downloadBtn.innerHTML;
734
+ downloadBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Generating PDF...';
735
+ downloadBtn.disabled = true;
736
+
737
+ try {
738
+ // Create a new PDF document
739
+ const doc = new jsPDF();
740
+
741
+ // Add header with logo and info
742
+ doc.setFillColor(22, 163, 74); // Green-600
743
+ doc.rect(0, 0, 210, 30, 'F');
744
+
745
+ // Add logo text
746
+ doc.setFontSize(20);
747
+ doc.setTextColor(255, 255, 255);
748
+ doc.text('Green Souq Trading', 105, 20, { align: 'center' });
749
+
750
+ // Add quotation title
751
+ doc.setFontSize(16);
752
+ doc.setTextColor(22, 163, 74); // Green-600
753
+ doc.text('Aquarium Quotation', 105, 45, { align: 'center' });
754
+
755
+ // Add customer info section
756
+ doc.setFontSize(12);
757
+ doc.setTextColor(0, 0, 0);
758
+ const customerName = document.getElementById('customer-name').value || 'Not provided';
759
+ const today = new Date();
760
+
761
+ doc.setDrawColor(22, 163, 74);
762
+ doc.setLineWidth(0.5);
763
+ doc.line(15, 55, 195, 55);
764
+
765
+ doc.text(`Customer: ${customerName}`, 15, 65);
766
+ doc.text(`Date: ${today.toLocaleDateString()}`, 15, 75);
767
+ doc.text(`Quotation #: ${Math.floor(100000 + Math.random() * 900000)}`, 15, 85);
768
+
769
+ // Add aquarium details section
770
+ doc.setFontSize(14);
771
+ doc.setTextColor(22, 163, 74);
772
+ doc.text('Aquarium Specifications', 15, 105);
773
+
774
+ doc.setFontSize(12);
775
+ doc.setTextColor(0, 0, 0);
776
+ doc.text(`Dimensions: ${currentDimensions}`, 20, 115);
777
+ doc.text(`Volume: ${currentVolume.toFixed(1)} liters`, 20, 125);
778
+
779
+ // Add items table header
780
+ doc.setFillColor(240, 253, 244); // Green-50
781
+ doc.rect(15, 135, 180, 10, 'F');
782
+ doc.setFontSize(12);
783
+ doc.setTextColor(0, 0, 0);
784
+ doc.setFont(undefined, 'bold');
785
+ doc.text('Item', 20, 142);
786
+ doc.text('Price', 180, 142, { align: 'right' });
787
+
788
+ // Add items
789
+ let yPosition = 150;
790
+ doc.setFont(undefined, 'normal');
791
+
792
+ // Base tank
793
+ doc.text('Base Tank', 20, yPosition);
794
+ doc.text(`${basePrice.toFixed(2)} QAR`, 180, yPosition, { align: 'right' });
795
+ yPosition += 10;
796
+
797
+ // Additional volume if any
798
+ const additionalLiters = Math.max(0, currentVolume - baseVolume);
799
+ if (additionalLiters > 0) {
800
+ const additionalPrice = additionalLiters * additionalLiterPrice;
801
+ doc.text(`Additional Volume (${additionalLiters.toFixed(1)}L)`, 20, yPosition);
802
+ doc.text(`${additionalPrice.toFixed(2)} QAR`, 180, yPosition, { align: 'right' });
803
+ yPosition += 10;
804
+ }
805
+
806
+ // Add selected items
807
+ if (selectedFilter) {
808
+ doc.text(`${selectedFilter.name}`, 20, yPosition);
809
+ doc.text(`${selectedFilter.price.toFixed(2)} QAR`, 180, yPosition, { align: 'right' });
810
+ yPosition += 10;
811
+ }
812
+
813
+ if (selectedLight) {
814
+ doc.text(`${selectedLight.name}`, 20, yPosition);
815
+ doc.text(`${selectedLight.price.toFixed(2)} QAR`, 180, yPosition, { align: 'right' });
816
+ yPosition += 10;
817
+ }
818
+
819
+ // Add stones, driftwood, plants, etc. if any
820
+ const dragonStoneQty = parseInt(document.getElementById('dragon-stone-qty').value) || 0;
821
+ const seriyuStoneQty = parseInt(document.getElementById('seriyu-stone-qty').value) || 0;
822
+ if (dragonStoneQty > 0) {
823
+ doc.text(`Dragon Stone (${dragonStoneQty}kg)`, 20, yPosition);
824
+ doc.text(`${(dragonStoneQty * 15).toFixed(2)} QAR`, 180, yPosition, { align: 'right' });
825
+ yPosition += 10;
826
+ }
827
+ if (seriyuStoneQty > 0) {
828
+ doc.text(`Seriyu Stone (${seriyuStoneQty}kg)`, 20, yPosition);
829
+ doc.text(`${(seriyuStoneQty * 12).toFixed(2)} QAR`, 180, yPosition, { align: 'right' });
830
+ yPosition += 10;
831
+ }
832
+
833
+ // Add total section
834
+ doc.setDrawColor(22, 163, 74);
835
+ doc.setLineWidth(0.5);
836
+ doc.line(15, yPosition + 5, 195, yPosition + 5);
837
+
838
+ doc.setFontSize(14);
839
+ doc.setFont(undefined, 'bold');
840
+ doc.text('Total:', 20, yPosition + 15);
841
+ doc.text(`${currentTotal.toFixed(2)} QAR`, 180, yPosition + 15, { align: 'right' });
842
+
843
+ // Add footer
844
+ doc.setFontSize(10);
845
+ doc.setTextColor(100, 100, 100);
846
+ doc.text('Thank you for choosing Green Souq Trading!', 105, 280, { align: 'center' });
847
+ doc.text('Phone: +974 3138 8895 | Web: www.greensouqtrading.com', 105, 285, { align: 'center' });
848
+
849
+ // Add validity note
850
+ doc.setFontSize(8);
851
+ doc.text('* This quotation is valid for 30 days from the date of issue', 15, 290);
852
+
853
+ // Save the PDF
854
+ doc.save(`Aquarium_Quote_${today.getTime()}.pdf`);
855
+
856
+ } catch (error) {
857
+ console.error('PDF generation error:', error);
858
+ alert('Error generating PDF. Please try again.');
859
+ } finally {
860
+ downloadBtn.innerHTML = originalText;
861
+ downloadBtn.disabled = false;
862
+ }
863
+ }
864
+
865
+ function resetDownloadButton(button, originalText) {
866
+ button.innerHTML = originalText;
867
+ button.disabled = false;
868
+ }
869
+
870
+ function addPdfItem(container, name, quantity, price) {
871
+ const row = document.createElement('tr');
872
+ row.className = 'border-b';
873
+ row.innerHTML = `
874
+ <td class="py-2 px-4">${name}</td>
875
+ <td class="text-right py-2 px-4">${quantity}</td>
876
+ <td class="text-right py-2 px-4">${price.toFixed(2)} QAR</td>
877
+ <td class="text-right py-2 px-4">${price.toFixed(2)} QAR</td>
878
+ `;
879
+ container.appendChild(row);
880
+ }
881
+
882
+ function shareOnWhatsApp() {
883
+ // Build message
884
+ let message = `Hello Green Souq Trading, I would like to place an order for this aquarium setup:\n\n`;
885
+ message += `- Dimensions: ${currentDimensions}\n`;
886
+ message += `- Volume: ${currentVolume.toFixed(1)} liters\n`;
887
+ message += `- Total Price: ${currentTotal.toFixed(2)} QAR\n\n`;
888
+ message += `Accessories:\n`;
889
+
890
+ // Add filter if selected
891
+ if (selectedFilter) {
892
+ message += `- ${selectedFilter.name}: ${selectedFilter.price.toFixed(2)} QAR\n`;
893
+ }
894
+
895
+ // Add light if selected
896
+ if (selectedLight) {
897
+ message += `- ${selectedLight.name}: ${selectedLight.price.toFixed(2)} QAR\n`;
898
+ }
899
+
900
+ // Add stones
901
+ const dragonStoneQty = parseInt(document.getElementById('dragon-stone-qty').value) || 0;
902
+ const seriyuStoneQty = parseInt(document.getElementById('seriyu-stone-qty').value) || 0;
903
+ if (dragonStoneQty > 0) message += `- Dragon Stone: ${dragonStoneQty} kg\n`;
904
+ if (seriyuStoneQty > 0) message += `- Seriyu Stone: ${seriyuStoneQty} kg\n`;
905
+
906
+ // Add driftwood
907
+ const blackWoodQty = parseInt(document.getElementById('black-wood-qty').value) || 0;
908
+ const normalWoodQty = parseInt(document.getElementById('normal-wood-qty').value) || 0;
909
+ if (blackWoodQty > 0) message += `- Black Wood: ${blackWoodQty} kg\n`;
910
+ if (normalWoodQty > 0) message += `- Normal Wood: ${normalWoodQty} kg\n`;
911
+
912
+ // Add plants
913
+ const mossQty = parseInt(document.getElementById('moss-qty').value) || 0;
914
+ const hanubiasQty = parseInt(document.getElementById('hanubias-qty').value) || 0;
915
+ if (mossQty > 0) message += `- Moss: ${mossQty} pieces\n`;
916
+ if (hanubiasQty > 0) message += `- Hanubias: ${hanubiasQty} pieces\n`;
917
+
918
+ // Add soil
919
+ const weekAquaQty = parseInt(document.getElementById('week-aqua-qty').value) || 0;
920
+ const amazoniaQty = parseInt(document.getElementById('amazonia-qty').value) || 0;
921
+ if (weekAquaQty > 0) message += `- Week Aqua Soil: ${weekAquaQty} packs\n`;
922
+ if (amazoniaQty > 0) message += `- Amazonia Soil: ${amazoniaQty} packs\n`;
923
+
924
+ // Add finish
925
+ if (selectedFinish === 'Polished Glass') {
926
+ message += `- Polished Glass: 40.00 QAR\n`;
927
+ }
928
+
929
+ // Add customer name if provided
930
+ const customerName = document.getElementById('customer-name').value;
931
+ if (customerName) {
932
+ message += `\nCustomer Name: ${customerName}`;
933
+ }
934
+
935
+ // Encode message for URL
936
+ const encodedMessage = encodeURIComponent(message);
937
+
938
+ // Open WhatsApp
939
+ window.open(`https://wa.me/97431388895?text=${encodedMessage}`, '_blank');
940
+ }
941
+ </script>
942
+
943
+ <!-- Footer -->
944
+ <footer class="bg-gray-100 mt-12 py-6 border-t">
945
+ <div class="container mx-auto px-4">
946
+ <div class="flex flex-col md:flex-row justify-between items-center">
947
+ <div class="mb-4 md:mb-0 text-center md:text-left">
948
+ <h3 class="text-lg font-medium text-gray-800 mb-1">Green Souq Aquariums</h3>
949
+ <p class="text-sm text-gray-600">Doha, Qatar</p>
950
+ </div>
951
+ <div class="text-center mb-4 md:mb-0">
952
+ <p class="text-gray-700 mb-1">
953
+ <i class="fas fa-phone-alt mr-2"></i> +974 3138 8895
954
+ </p>
955
+ <p class="text-gray-700">
956
+ <i class="fas fa-globe mr-2"></i> www.greensouqtrading.com
957
+ </p>
958
+ </div>
959
+ <div class="text-center md:text-right">
960
+ <p class="text-sm text-gray-500">
961
+ © 2025 Green Souq Aquariums. All rights reserved.
962
+ </p>
963
+ <p class="text-xs text-gray-400 mt-1">
964
+ Developed by Green Souq Aquariums
965
+ </p>
966
+ </div>
967
+ </div>
968
+ </div>
969
+ </footer>
970
+ <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=gradsyntax/aqua-builder" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
971
+ </html>