Hugging Face's logo

Spaces:
Mustafa7assan
/
mgso4-2
Running

App Files Community
Mustafa7assan commited on
Commit
4e651bd
·
verified ·
1 Parent(s): eae4cb1

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +452 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mgso4 2
3
- emoji: 📊
4
- colorFrom: gray
5
- colorTo: gray
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: mgso4-2
3
+ emoji: 🐳
4
+ colorFrom: blue
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,452 @@
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="ar" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>آلة حاسبة كيميائية متقدمة - Chemist/ Mostafa Hassan</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Tajawal', sans-serif;
14
+ background-color: #f8fafc;
15
+ }
16
+
17
+ .gradient-bg {
18
+ background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
19
+ }
20
+
21
+ .input-field {
22
+ transition: all 0.3s ease;
23
+ }
24
+
25
+ .input-field:focus {
26
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
27
+ }
28
+
29
+ .result-card {
30
+ background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
31
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
32
+ }
33
+
34
+ .floating-label {
35
+ position: absolute;
36
+ right: 1rem;
37
+ top: -0.5rem;
38
+ background-color: white;
39
+ padding: 0 0.5rem;
40
+ font-size: 0.75rem;
41
+ color: #4b5563;
42
+ }
43
+
44
+ .animate-bounce-once {
45
+ animation: bounceOnce 0.5s;
46
+ }
47
+
48
+ @keyframes bounceOnce {
49
+ 0%, 100% { transform: translateY(0); }
50
+ 50% { transform: translateY(-5px); }
51
+ }
52
+ </style>
53
+ </head>
54
+ <body class="min-h-screen bg-gray-50">
55
+ <div class="gradient-bg text-white py-6 shadow-lg">
56
+ <div class="container mx-auto px-4">
57
+ <div class="flex items-center justify-between">
58
+ <div>
59
+ <h1 class="text-3xl font-bold">آلة حاسبة كيميائية</h1>
60
+ <p class="text-blue-100 mt-1">Chemist/ Mostafa Hassan</p>
61
+ </div>
62
+ <div class="bg-white/20 p-3 rounded-full">
63
+ <i class="fas fa-flask text-2xl"></i>
64
+ </div>
65
+ </div>
66
+ </div>
67
+ </div>
68
+
69
+ <div class="container mx-auto px-4 py-8">
70
+ <!-- Section 1: Water Molecules Calculation -->
71
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8 transition-all duration-300 hover:shadow-lg">
72
+ <div class="gradient-bg px-6 py-4 flex items-center">
73
+ <i class="fas fa-tint text-white text-xl mr-3"></i>
74
+ <h2 class="text-xl font-bold text-white">حساب عدد جزيئات الماء (x)</h2>
75
+ </div>
76
+
77
+ <div class="p-6">
78
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
79
+ <div class="relative">
80
+ <div class="floating-label">وزن الجفنة فارغة (جم)</div>
81
+ <div class="relative mt-2">
82
+ <input type="number" id="emptyCrucibleWeight" step="0.001"
83
+ class="input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
84
+ <div class="absolute left-3 top-3 text-gray-400">g</div>
85
+ </div>
86
+ </div>
87
+
88
+ <div class="relative">
89
+ <div class="floating-label">وزن العينة (جم)</div>
90
+ <div class="relative mt-2">
91
+ <input type="number" id="sampleWeightSection1" step="0.001"
92
+ class="input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
93
+ <div class="absolute left-3 top-3 text-gray-400">g</div>
94
+ </div>
95
+ </div>
96
+
97
+ <div class="relative">
98
+ <div class="floating-label">وزن الجفنة بعد الحرق (جم)</div>
99
+ <div class="relative mt-2">
100
+ <input type="number" id="crucibleWeightAfterBurning" step="0.001"
101
+ class="input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
102
+ <div class="absolute left-3 top-3 text-gray-400">g</div>
103
+ </div>
104
+ </div>
105
+ </div>
106
+
107
+ <button onclick="calculateX()"
108
+ class="gradient-bg text-white px-6 py-3 rounded-lg font-medium hover:opacity-90 transition-all flex items-center justify-center">
109
+ <i class="fas fa-calculator ml-2"></i>
110
+ احسب عدد جزيئات الماء (x)
111
+ </button>
112
+
113
+ <div id="xResult" class="mt-6 hidden">
114
+ <div class="result-card p-5 rounded-lg border border-blue-100">
115
+ <div class="flex items-center justify-between">
116
+ <h3 class="font-bold text-lg text-gray-800">النتيجة:</h3>
117
+ <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">
118
+ <i class="fas fa-water mr-1"></i> جزيئات الماء
119
+ </div>
120
+ </div>
121
+ <div class="mt-3 text-2xl font-bold text-blue-600" id="xValue"></div>
122
+ <div class="mt-2 text-sm text-gray-600" id="xDetails"></div>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </div>
127
+
128
+ <!-- Section 2: Purity and Elements Calculation -->
129
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8 transition-all duration-300 hover:shadow-lg">
130
+ <div class="gradient-bg px-6 py-4 flex items-center">
131
+ <i class="fas fa-percentage text-white text-xl mr-3"></i>
132
+ <h2 class="text-xl font-bold text-white">حساب النقاوة ونسب العناصر</h2>
133
+ </div>
134
+
135
+ <div class="p-6">
136
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
137
+ <div class="relative">
138
+ <div class="floating-label">وزن العينة (جم)</div>
139
+ <div class="relative mt-2">
140
+ <input type="number" id="sampleWeightSection2" step="0.001"
141
+ class="input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
142
+ <div class="absolute left-3 top-3 text-gray-400">g</div>
143
+ </div>
144
+ </div>
145
+
146
+ <div class="relative">
147
+ <div class="floating-label">حجم السحبة (مل)</div>
148
+ <div class="relative mt-2">
149
+ <input type="number" id="aliquotVolume" step="0.001"
150
+ class="input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
151
+ <div class="absolute left-3 top-3 text-gray-400">ml</div>
152
+ </div>
153
+ </div>
154
+
155
+ <div class="relative">
156
+ <div class="floating-label">الحجم النازل من السحاحة (مل)</div>
157
+ <div class="relative mt-2">
158
+ <input type="number" id="titrantVolume" step="0.001"
159
+ class="input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
160
+ <div class="absolute left-3 top-3 text-gray-400">ml</div>
161
+ </div>
162
+ </div>
163
+
164
+ <div class="relative">
165
+ <div class="floating-label">عيارية EDTA (مول/لتر)</div>
166
+ <div class="relative mt-2">
167
+ <input type="number" id="edtaMolarity" step="0.001" value="0.01"
168
+ class="input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
169
+ <div class="absolute left-3 top-3 text-gray-400">M</div>
170
+ </div>
171
+ </div>
172
+ </div>
173
+
174
+ <button onclick="calculatePurityAndElements()"
175
+ class="gradient-bg text-white px-6 py-3 rounded-lg font-medium hover:opacity-90 transition-all flex items-center justify-center">
176
+ <i class="fas fa-atom ml-2"></i>
177
+ احسب النقاوة ونسب العناصر
178
+ </button>
179
+
180
+ <div id="purityResults" class="mt-6 hidden">
181
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
182
+ <!-- Purity Card -->
183
+ <div class="result-card p-5 rounded-lg border border-blue-100">
184
+ <div class="flex items-center justify-between">
185
+ <h3 class="font-bold text-lg text-gray-800">النقاوة</h3>
186
+ <div class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">
187
+ <i class="fas fa-certificate mr-1"></i> النقاوة
188
+ </div>
189
+ </div>
190
+ <div class="mt-3 flex items-end">
191
+ <div class="text-3xl font-bold text-green-600" id="purityValue"></div>
192
+ <div class="text-xl text-green-600 mb-1 ml-1">%</div>
193
+ </div>
194
+ <div class="mt-4">
195
+ <label class="block text-sm font-medium text-gray-700 mb-1">تعديل النقاوة يدويًا:</label>
196
+ <div class="relative">
197
+ <input type="number" id="manualPurity" step="0.001"
198
+ class="input-field w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500">
199
+ <div class="absolute left-3 top-2.5 text-gray-400">%</div>
200
+ </div>
201
+ </div>
202
+ </div>
203
+
204
+ <!-- Elements Card -->
205
+ <div class="result-card p-5 rounded-lg border border-blue-100">
206
+ <div class="flex items-center justify-between">
207
+ <h3 class="font-bold text-lg text-gray-800">نسب العناصر</h3>
208
+ <div class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-medium">
209
+ <i class="fas fa-chart-pie mr-1"></i> العناصر
210
+ </div>
211
+ </div>
212
+ <div class="mt-3 grid grid-cols-2 gap-4" id="elementsResult">
213
+ <!-- Elements will be populated here -->
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </div>
220
+
221
+ <!-- Info Section -->
222
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
223
+ <div class="bg-gray-800 px-6 py-4 flex items-center">
224
+ <i class="fas fa-info-circle text-white text-xl mr-3"></i>
225
+ <h2 class="text-xl font-bold text-white">معلومات عن الآلة الحاسبة</h2>
226
+ </div>
227
+
228
+ <div class="p-6">
229
+ <div class="prose prose-sm max-w-none text-gray-700">
230
+ <p>هذه الآلة الحاسبة تساعد في:</p>
231
+ <ul class="list-disc pr-5">
232
+ <li>حساب عدد جزيئات الماء (x) في مركب MgSO₄·xH₂O</li>
233
+ <li>تحديد نقاوة العينة بناءً على معايرة EDTA</li>
234
+ <li>حساب نسب العناصر المختلفة في المركب</li>
235
+ </ul>
236
+
237
+ <div class="mt-4 p-4 bg-blue-50 rounded-lg border border-blue-200">
238
+ <div class="flex items-start">
239
+ <div class="flex-shrink-0 pt-1">
240
+ <i class="fas fa-lightbulb text-blue-500"></i>
241
+ </div>
242
+ <div class="mr-3">
243
+ <h4 class="text-sm font-medium text-blue-800">نصيحة:</h4>
244
+ <p class="mt-1 text-sm text-blue-700">
245
+ تأكد من إدخال جميع القيم بدقة للحصول على نتائج موثوقة. يمكنك تعديل قيمة النقاوة يدويًا لرؤية تأثيرها على نسب العناصر.
246
+ </p>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+
255
+ <footer class="gradient-bg text-white py-6">
256
+ <div class="container mx-auto px-4 text-center">
257
+ <p>تم تطويره بواسطة Chemist/ Mostafa Hassan</p>
258
+ <div class="mt-3 flex justify-center space-x-4">
259
+ <a href="#" class="text-white hover:text-blue-200 transition-colors">
260
+ <i class="fab fa-facebook-f"></i>
261
+ </a>
262
+ <a href="#" class="text-white hover:text-blue-200 transition-colors">
263
+ <i class="fab fa-twitter"></i>
264
+ </a>
265
+ <a href="#" class="text-white hover:text-blue-200 transition-colors">
266
+ <i class="fab fa-linkedin-in"></i>
267
+ </a>
268
+ <a href="#" class="text-white hover:text-blue-200 transition-colors">
269
+ <i class="fab fa-github"></i>
270
+ </a>
271
+ </div>
272
+ </div>
273
+ </footer>
274
+
275
+ <script>
276
+ // Section 1: Water Molecules Calculation
277
+ function calculateX() {
278
+ const emptyCrucibleWeight = parseFloat(document.getElementById('emptyCrucibleWeight').value);
279
+ const sampleWeight = parseFloat(document.getElementById('sampleWeightSection1').value);
280
+ const crucibleWeightAfterBurning = parseFloat(document.getElementById('crucibleWeightAfterBurning').value);
281
+
282
+ if (isNaN(emptyCrucibleWeight) || isNaN(sampleWeight) || isNaN(crucibleWeightAfterBurning)) {
283
+ showError('xResult', 'يرجى إدخال جميع القيم بشكل صحيح.');
284
+ return;
285
+ }
286
+
287
+ // وزن العينة بعد الحرق (MgSO4)
288
+ const sampleWeightAfterBurning = crucibleWeightAfterBurning - emptyCrucibleWeight;
289
+
290
+ // وزن الماء المفقود
291
+ const waterWeight = sampleWeight - sampleWeightAfterBurning;
292
+
293
+ // عدد مولات MgSO4
294
+ const molesMgSO4 = sampleWeightAfterBurning / 120; // الكتلة المولية لـ MgSO4 = 120
295
+
296
+ // عدد مولات H2O
297
+ const molesH2O = waterWeight / 18; // الكتلة المولية لـ H2O = 18
298
+
299
+ // حساب x
300
+ const x = molesH2O / molesMgSO4;
301
+ const roundedX = Math.round(x);
302
+
303
+ // Display results
304
+ document.getElementById('xValue').textContent = roundedX;
305
+ document.getElementById('xDetails').innerHTML = `
306
+ <div class="grid grid-cols-2 gap-2 mt-3">
307
+ <div class="bg-gray-100 p-2 rounded">
308
+ <div class="text-xs text-gray-500">وزن الماء المفقود</div>
309
+ <div class="font-medium">${waterWeight.toFixed(3)} جم</div>
310
+ </div>
311
+ <div class="bg-gray-100 p-2 rounded">
312
+ <div class="text-xs text-gray-500">مولات الماء</div>
313
+ <div class="font-medium">${molesH2O.toFixed(5)} مول</div>
314
+ </div>
315
+ <div class="bg-gray-100 p-2 rounded">
316
+ <div class="text-xs text-gray-500">مولات MgSO₄</div>
317
+ <div class="font-medium">${molesMgSO4.toFixed(5)} مول</div>
318
+ </div>
319
+ <div class="bg-gray-100 p-2 rounded">
320
+ <div class="text-xs text-gray-500">القيمة الدقيقة</div>
321
+ <div class="font-medium">${x.toFixed(2)}</div>
322
+ </div>
323
+ </div>
324
+ `;
325
+
326
+ document.getElementById('xResult').classList.remove('hidden');
327
+ document.getElementById('xResult').classList.add('animate-bounce-once');
328
+ setTimeout(() => {
329
+ document.getElementById('xResult').classList.remove('animate-bounce-once');
330
+ }, 500);
331
+ }
332
+
333
+ // Section 2: Purity and Elements Calculation
334
+ function calculatePurityAndElements() {
335
+ const sampleWeight = parseFloat(document.getElementById('sampleWeightSection2').value);
336
+ const aliquotVolume = parseFloat(document.getElementById('aliquotVolume').value);
337
+ const titrantVolume = parseFloat(document.getElementById('titrantVolume').value);
338
+ const edtaMolarity = parseFloat(document.getElementById('edtaMolarity').value);
339
+
340
+ if (isNaN(sampleWeight) || isNaN(aliquotVolume) || isNaN(titrantVolume) || isNaN(edtaMolarity)) {
341
+ showError('purityResults', 'يرجى إدخال جميع القيم بشكل صحيح.');
342
+ return;
343
+ }
344
+
345
+ // عدد مولات EDTA
346
+ const molesEDTA = edtaMolarity * (titrantVolume / 1000);
347
+
348
+ // عدد مولات Mg2+ في السحبة
349
+ const molesMg = molesEDTA; // التفاعل 1:1
350
+
351
+ // تركيز Mg2+ في السحبة
352
+ const mgConcentration = molesMg / (aliquotVolume / 1000);
353
+
354
+ // عدد مولات Mg2+ في الفلاسك (500 مل)
355
+ const molesMgInFlask = mgConcentration * 0.5; // 500 مل = 0.5 لتر
356
+
357
+ // وزن MgSO4 الفعلي
358
+ const mgSO4Weight = molesMgInFlask * 120; // الكتلة المولية لـ MgSO4 = 120
359
+
360
+ // النقاوة
361
+ const purity = (mgSO4Weight / sampleWeight) * 100;
362
+
363
+ // عرض النقاوة
364
+ document.getElementById('purityValue').textContent = purity.toFixed(2);
365
+ document.getElementById('manualPurity').value = purity.toFixed(2);
366
+
367
+ // حساب نسب العناصر
368
+ updateElementPercentages();
369
+
370
+ document.getElementById('purityResults').classList.remove('hidden');
371
+ document.getElementById('purityResults').classList.add('animate-bounce-once');
372
+ setTimeout(() => {
373
+ document.getElementById('purityResults').classList.remove('animate-bounce-once');
374
+ }, 500);
375
+ }
376
+
377
+ // Function to update element percentages based on purity (calculated or manual)
378
+ function updateElementPercentages() {
379
+ const purity = parseFloat(document.getElementById('manualPurity').value);
380
+
381
+ if (isNaN(purity)) {
382
+ showError('elementsResult', 'يرجى إدخال قيمة نقاوة صحيحة.');
383
+ return;
384
+ }
385
+
386
+ // الكتلة المولية لـ MgSO4·7H2O = 246 (لأن x = 7)
387
+ const molarMassMgSO4_7H2O = 246;
388
+ const molarMassMgSO4 = 120;
389
+ const molarMassMgO = 40;
390
+ const molarMassMg = 24;
391
+ const molarMassS = 32;
392
+ const molarMassO = 16;
393
+
394
+ // حساب النسب
395
+ const mgSO4Percentage = (molarMassMgSO4 / molarMassMgSO4_7H2O) * purity;
396
+ const mgoPercentage = (molarMassMgO / molarMassMgSO4_7H2O) * purity;
397
+ const mgPercentage = (molarMassMg / molarMassMgSO4_7H2O) * purity;
398
+ const sPercentage = (molarMassS / molarMassMgSO4_7H2O) * purity;
399
+ const oPercentage = (molarMassO * 4 / molarMassMgSO4_7H2O) * purity;
400
+
401
+ // عرض النتائج
402
+ document.getElementById('elementsResult').innerHTML = `
403
+ <div class="bg-blue-50 p-3 rounded-lg">
404
+ <div class="text-xs text-blue-600">MgSO₄</div>
405
+ <div class="font-bold text-blue-800">${mgSO4Percentage.toFixed(2)}%</div>
406
+ </div>
407
+ <div class="bg-green-50 p-3 rounded-lg">
408
+ <div class="text-xs text-green-600">MgO</div>
409
+ <div class="font-bold text-green-800">${mgoPercentage.toFixed(2)}%</div>
410
+ </div>
411
+ <div class="bg-purple-50 p-3 rounded-lg">
412
+ <div class="text-xs text-purple-600">Mg</div>
413
+ <div class="font-bold text-purple-800">${mgPercentage.toFixed(2)}%</div>
414
+ </div>
415
+ <div class="bg-yellow-50 p-3 rounded-lg">
416
+ <div class="text-xs text-yellow-600">S</div>
417
+ <div class="font-bold text-yellow-800">${sPercentage.toFixed(2)}%</div>
418
+ </div>
419
+ <div class="bg-red-50 p-3 rounded-lg">
420
+ <div class="text-xs text-red-600">O</div>
421
+ <div class="font-bold text-red-800">${oPercentage.toFixed(2)}%</div>
422
+ </div>
423
+ <div class="bg-indigo-50 p-3 rounded-lg">
424
+ <div class="text-xs text-indigo-600">H₂O</div>
425
+ <div class="font-bold text-indigo-800">${(100 - purity).toFixed(2)}%</div>
426
+ </div>
427
+ `;
428
+ }
429
+
430
+ // Helper function to show errors
431
+ function showError(elementId, message) {
432
+ const element = document.getElementById(elementId);
433
+ element.innerHTML = `
434
+ <div class="bg-red-50 border-l-4 border-red-500 p-4">
435
+ <div class="flex">
436
+ <div class="flex-shrink-0">
437
+ <i class="fas fa-exclamation-circle text-red-500"></i>
438
+ </div>
439
+ <div class="mr-3">
440
+ <p class="text-sm text-red-700">${message}</p>
441
+ </div>
442
+ </div>
443
+ </div>
444
+ `;
445
+ element.classList.remove('hidden');
446
+ }
447
+
448
+ // Initialize manual purity input to trigger updates
449
+ document.getElementById('manualPurity').addEventListener('input', updateElementPercentages);
450
+ </script>
451
+ <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=Mustafa7assan/mgso4-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
452
+ </html>