Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>حاسبة كبريتات المغنيسيوم</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap'); | |
| body { | |
| font-family: 'Tajawal', sans-serif; | |
| background-color: #f0f7f4; | |
| } | |
| .card { | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .card:hover { | |
| box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); | |
| } | |
| .input-field { | |
| transition: all 0.3s ease; | |
| } | |
| .input-field:focus { | |
| border-color: #4f46e5; | |
| box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2); | |
| } | |
| .btn-primary { | |
| background-color: #4f46e5; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| background-color: #4338ca; | |
| transform: translateY(-2px); | |
| } | |
| .result-card { | |
| background: linear-gradient(135deg, #f0f7f4 0%, #e3f2fd 100%); | |
| } | |
| .floating-label { | |
| transition: all 0.3s ease; | |
| transform-origin: right center; | |
| } | |
| input:focus + .floating-label, | |
| input:not(:placeholder-shown) + .floating-label { | |
| transform: translateY(-1.5rem) scale(0.85); | |
| color: #4f46e5; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex items-center justify-center p-4"> | |
| <div class="w-full max-w-md"> | |
| <div class="card bg-white rounded-xl overflow-hidden p-6"> | |
| <div class="text-center mb-6"> | |
| <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-flask text-indigo-600 text-2xl"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold text-gray-800">حاسبة كبريتات المغنيسيوم</h1> | |
| <p class="text-gray-600 mt-2">أدخل القيم لحساب خصائص العينة</p> | |
| </div> | |
| <form id="calculatorForm" class="space-y-4"> | |
| <div class="relative"> | |
| <input type="number" id="emptyWeight" class="input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none" placeholder=" " step="0.0001" required> | |
| <label for="emptyWeight" class="floating-label absolute right-4 top-3 text-gray-500 pointer-events-none">وزن الجفنة الفارغة (جم)</label> | |
| </div> | |
| <div class="relative"> | |
| <input type="number" id="beforeWeight" class="input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none" placeholder=" " step="0.0001" required> | |
| <label for="beforeWeight" class="floating-label absolute right-4 top-3 text-gray-500 pointer-events-none">وزن الجفنة + العينة قبل الحرق (جم)</label> | |
| </div> | |
| <div class="relative"> | |
| <input type="number" id="afterWeight" class="input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none" placeholder=" " step="0.0001" required> | |
| <label for="afterWeight" class="floating-label absolute right-4 top-3 text-gray-500 pointer-events-none">وزن الجفنة + العينة بعد الحرق (جم)</label> | |
| </div> | |
| <button type="submit" class="btn-primary w-full py-3 px-4 text-white font-medium rounded-lg flex items-center justify-center space-x-2"> | |
| <i class="fas fa-calculator"></i> | |
| <span>احسب النتائج</span> | |
| </button> | |
| </form> | |
| </div> | |
| <div id="resultContainer" class="card result-card rounded-xl overflow-hidden p-6 mt-6 hidden"> | |
| <h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-chart-bar text-indigo-600 ml-2"></i> | |
| <span>النتائج</span> | |
| </h2> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between items-center py-2 border-b border-gray-200"> | |
| <span class="text-gray-600 font-medium">عدد جزيئات الماء (X)</span> | |
| <span id="waterMolecules" class="font-bold text-indigo-600">-</span> | |
| </div> | |
| <div class="mt-4"> | |
| <h3 class="font-medium text-gray-700 mb-2">النسب النظرية:</h3> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <div class="bg-indigo-50 p-3 rounded-lg"> | |
| <div class="text-sm text-indigo-500">Mg</div> | |
| <div id="mgPercent" class="font-bold text-indigo-700">- %</div> | |
| </div> | |
| <div class="bg-indigo-50 p-3 rounded-lg"> | |
| <div class="text-sm text-indigo-500">MgO</div> | |
| <div id="mgoPercent" class="font-bold text-indigo-700">- %</div> | |
| </div> | |
| <div class="bg-indigo-50 p-3 rounded-lg"> | |
| <div class="text-sm text-indigo-500">MgSO₄</div> | |
| <div id="mgso4Percent" class="font-bold text-indigo-700">- %</div> | |
| </div> | |
| <div class="bg-indigo-50 p-3 rounded-lg"> | |
| <div class="text-sm text-indigo-500">S</div> | |
| <div id="sPercent" class="font-bold text-indigo-700">- %</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 bg-green-50 p-4 rounded-lg"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-green-700 font-medium">النقاوة</span> | |
| <span id="purityPercent" class="font-bold text-green-700 text-xl">- %</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="resetBtn" class="mt-6 w-full py-2 px-4 border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition"> | |
| <i class="fas fa-redo mr-2"></i> | |
| إعادة تعيين | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| document.getElementById('calculatorForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| try { | |
| // Parse input values | |
| const w_empty = parseFloat(document.getElementById('emptyWeight').value); | |
| const w_before = parseFloat(document.getElementById('beforeWeight').value); | |
| const w_after = parseFloat(document.getElementById('afterWeight').value); | |
| // Input validation | |
| if (isNaN(w_empty) || isNaN(w_before) || isNaN(w_after)) { | |
| throw new Error("يرجى إدخال قيم صحيحة"); | |
| } | |
| if (w_empty < 0 || w_before < 0 || w_after < 0) { | |
| throw new Error("الأوزان لا يمكن أن تكون سالبة"); | |
| } | |
| if (w_before <= w_empty) { | |
| throw new Error("وزن الجفنة مع العينة قبل الحرق يجب أن يكون أكبر من وزن الجفنة الفارغة"); | |
| } | |
| if (w_after <= w_empty) { | |
| throw new Error("وزن الجفنة مع العينة بعد الحرق يجب أن يكون أكبر من وزن الجفنة الفارغة"); | |
| } | |
| if (w_after > w_before) { | |
| throw new Error("وزن الجفنة مع العينة بعد الحرق يجب أن يكون أقل من وزنها قبل الحرق"); | |
| } | |
| // Calculate weights | |
| const w_hydrate = w_before - w_empty; // Mass of hydrated sample | |
| const w_anhydrous = w_after - w_empty; // Mass of anhydrous MgSO₄ | |
| const w_water = w_before - w_after; // Mass of water lost | |
| // Calculate moles and hydration number (X) | |
| const mol_MgSO4 = w_anhydrous / 120.36; // Molar mass of MgSO₄ | |
| const mol_H2O = w_water / 18.015; // Molar mass of H₂O | |
| const x = mol_H2O / mol_MgSO4; | |
| // Calculate dynamic molar mass of MgSO₄·xH₂O | |
| const molar_mass_hydrate = 120.36 + (x * 18.015); | |
| // Calculate theoretical percentages | |
| const Mg = (24.305 / molar_mass_hydrate) * 100; // Mg atomic mass | |
| const MgO = (40.304 / molar_mass_hydrate) * 100; // MgO molar mass | |
| const MgSO4 = (120.36 / molar_mass_hydrate) * 100; // MgSO₄ molar mass | |
| const S = (32.065 / molar_mass_hydrate) * 100; // S atomic mass | |
| // Calculate purity | |
| const theoretical_anhydrous = w_hydrate * (120.36 / molar_mass_hydrate); | |
| const purity = (w_anhydrous / theoretical_anhydrous) * 100; | |
| // Display results | |
| document.getElementById('waterMolecules').textContent = x.toFixed(2); | |
| document.getElementById('mgPercent').textContent = Mg.toFixed(2) + ' %'; | |
| document.getElementById('mgoPercent').textContent = MgO.toFixed(2) + ' %'; | |
| document.getElementById('mgso4Percent').textContent = MgSO4.toFixed(2) + ' %'; | |
| document.getElementById('sPercent').textContent = S.toFixed(2) + ' %'; | |
| document.getElementById('purityPercent').textContent = purity.toFixed(2) + ' %'; | |
| // Show results section | |
| document.getElementById('resultContainer').classList.remove('hidden'); | |
| document.getElementById('resultContainer').scrollIntoView({ behavior: 'smooth' }); | |
| } catch (error) { | |
| alert(error.message); | |
| } | |
| }); | |
| document.getElementById('resetBtn').addEventListener('click', function() { | |
| document.getElementById('calculatorForm').reset(); | |
| document.getElementById('resultContainer').classList.add('hidden'); | |
| }); | |
| </script> | |
| <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" style="color: #fff; text-decoration: underline;" target="_blank">Remix</a> | |
| </p> | |
| </body> | |
| </html> |