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>حاسبة نقاوة MgSO4 - كيميائي مصطفى حسن</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 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| transition: all 0.3s ease; | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .input-field { | |
| transition: all 0.3s ease; | |
| } | |
| .input-field:focus { | |
| border-color: #3b82f6; | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); | |
| } | |
| .btn-primary { | |
| background-color: #3b82f6; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| background-color: #2563eb; | |
| transform: translateY(-2px); | |
| } | |
| .btn-secondary { | |
| background-color: #10b981; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-secondary:hover { | |
| background-color: #059669; | |
| transform: translateY(-2px); | |
| } | |
| .result-box { | |
| background-color: #e0f2fe; | |
| border-left: 4px solid #3b82f6; | |
| } | |
| .flask-icon { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gradient-to-b from-blue-50 to-green-50"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="text-center mb-12"> | |
| <div class="flex justify-center items-center mb-4"> | |
| <i class="fas fa-flask text-5xl text-blue-600 mr-4 flask-icon"></i> | |
| <h1 class="text-3xl font-bold text-gray-800">حاسبة نقاوة كبريتات المغنيسيوم</h1> | |
| </div> | |
| <p class="text-lg text-gray-600">أداة لحساب عدد جزيئات الماء (X) والنسب المئوية للمكونات</p> | |
| <p class="text-sm text-gray-500 mt-2">تم التطوير بواسطة كيميائي مصطفى حسن</p> | |
| </header> | |
| <!-- Calculator Section --> | |
| <div class="max-w-3xl mx-auto"> | |
| <!-- Step 1: Calculate X and Theoretical Ratios --> | |
| <div class="card bg-white rounded-lg p-6 mb-8"> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-blue-100 text-blue-800 rounded-full w-10 h-10 flex items-center justify-center mr-3"> | |
| <span class="font-bold">1</span> | |
| </div> | |
| <h2 class="text-xl font-semibold text-gray-800">حساب عدد جزيئات الماء (X) والنسب النظرية</h2> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div> | |
| <label for="empty_weight" class="block text-sm font-medium text-gray-700 mb-1">وزن الإناء الفارغ (جم)</label> | |
| <input type="number" step="0.0001" id="empty_weight" class="input-field w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="with_sample_weight" class="block text-sm font-medium text-gray-700 mb-1">وزن الإناء + العينة (جم)</label> | |
| <input type="number" step="0.0001" id="with_sample_weight" class="input-field w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="after_heating_weight" class="block text-sm font-medium text-gray-700 mb-1">الوزن بعد الحرق (جم)</label> | |
| <input type="number" step="0.0001" id="after_heating_weight" class="input-field w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| </div> | |
| <button onclick="calculateXAndRatios()" class="btn-primary w-full md:w-auto px-6 py-3 text-white font-medium rounded-md shadow-md flex items-center justify-center"> | |
| <i class="fas fa-calculator mr-2"></i> احسب X والنسب النظرية | |
| </button> | |
| <!-- Results --> | |
| <div id="x_result" class="result-box mt-6 p-4 rounded-md hidden"> | |
| <h3 class="font-medium text-gray-800 mb-2">النتائج:</h3> | |
| <p id="x_value" class="text-blue-600 font-bold"></p> | |
| <p id="theoretical_ratios" class="text-gray-700 mt-2"></p> | |
| </div> | |
| </div> | |
| <!-- Step 2: Calculate Purity and Actual Ratios --> | |
| <div class="card bg-white rounded-lg p-6"> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-green-100 text-green-800 rounded-full w-10 h-10 flex items-center justify-center mr-3"> | |
| <span class="font-bold">2</span> | |
| </div> | |
| <h2 class="text-xl font-semibold text-gray-800">حساب النقاوة والنسب الفعلية</h2> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div> | |
| <label for="volume" class="block text-sm font-medium text-gray-700 mb-1">الحجم النازل من السحاحة (مل)</label> | |
| <input type="number" step="0.1" id="volume" class="input-field w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="aliquot" class="block text-sm font-medium text-gray-700 mb-1">حجم السحبة (مل)</label> | |
| <input type="number" step="0.1" id="aliquot" class="input-field w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="weight" class="block text-sm font-medium text-gray-700 mb-1">وزن العينة (جم)</label> | |
| <input type="number" step="0.0001" id="weight" class="input-field w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| </div> | |
| <button onclick="calculatePurity()" class="btn-secondary w-full md:w-auto px-6 py-3 text-white font-medium rounded-md shadow-md flex items-center justify-center"> | |
| <i class="fas fa-percentage mr-2"></i> احسب النقاوة والنسب الفعلية | |
| </button> | |
| <!-- Results --> | |
| <div id="purity_result" class="result-box mt-6 p-4 rounded-md hidden"> | |
| <h3 class="font-medium text-gray-800 mb-2">النتائج:</h3> | |
| <p id="purity_value" class="text-green-600 font-bold"></p> | |
| <p id="actual_ratios" class="text-gray-700 mt-2"></p> | |
| </div> | |
| </div> | |
| <!-- Info Section --> | |
| <div class="mt-8 bg-blue-50 rounded-lg p-6"> | |
| <h3 class="text-lg font-semibold text-blue-800 mb-4 flex items-center"> | |
| <i class="fas fa-info-circle mr-2"></i> معلومات عن الحسابات | |
| </h3> | |
| <div class="text-sm text-gray-700 space-y-2"> | |
| <p>• الصيغة المستخدمة لحساب X: X = (كتلة الماء المفقودة × كتلة المولية لـ MgSO₄) / (كتلة المولية للماء × كتلة العينة بعد الحرق)</p> | |
| <p>• الصيغة المستخدمة لحساب النقاوة: النقاوة = (0.01 × كتلة المولية لـ MgSO₄ × 500 × 100 × الحجم) / (السحبة × الوزن)</p> | |
| <p>• الكتل المولية المستخدمة: MgSO₄ = 120 جم/مول، H₂O = 18 جم/مول، MgO = 40 جم/مول، S = 32 جم/مول</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Constants | |
| const M_MgSO4 = 120; | |
| const M_H2O = 18; | |
| const M_MgO = 40; | |
| const M_S = 32; | |
| // Store ratios between steps | |
| let appState = { | |
| ratios: null | |
| }; | |
| // Calculate X and Theoretical Ratios | |
| function calculateXAndRatios() { | |
| try { | |
| const empty = parseFloat(document.getElementById('empty_weight').value); | |
| const withSample = parseFloat(document.getElementById('with_sample_weight').value); | |
| const afterHeating = parseFloat(document.getElementById('after_heating_weight').value); | |
| if (isNaN(empty) || isNaN(withSample) || isNaN(afterHeating)) { | |
| throw new Error("يرجى إدخال جميع القيم بشكل صحيح"); | |
| } | |
| const grossSample = withSample - empty; | |
| const netAfter = afterHeating - empty; | |
| const waterLost = grossSample - netAfter; | |
| const x = (waterLost * M_MgSO4) / (M_H2O * netAfter); | |
| const totalMass = M_MgSO4 + x * M_H2O; | |
| const ratioMgSO4 = (M_MgSO4 / totalMass) * 100; | |
| const ratioMgO = (M_MgO / totalMass) * 100; | |
| const ratioS = (M_S / totalMass) * 100; | |
| // Display results | |
| document.getElementById('x_value').textContent = `X = ${x.toFixed(2)}`; | |
| document.getElementById('theoretical_ratios').textContent = | |
| `النسب النظرية: MgSO₄ = ${ratioMgSO4.toFixed(2)}%، MgO = ${ratioMgO.toFixed(2)}%، S = ${ratioS.toFixed(2)}%`; | |
| // Show result box | |
| document.getElementById('x_result').classList.remove('hidden'); | |
| // Store ratios for purity calculation | |
| appState.ratios = { | |
| ratioMgSO4, | |
| ratioMgO, | |
| ratioS | |
| }; | |
| } catch (error) { | |
| alert(error.message); | |
| } | |
| } | |
| // Calculate Purity and Actual Ratios | |
| function calculatePurity() { | |
| try { | |
| const volume = parseFloat(document.getElementById('volume').value); | |
| const aliquot = parseFloat(document.getElementById('aliquot').value); | |
| const weight = parseFloat(document.getElementById('weight').value); | |
| if (isNaN(volume) || isNaN(aliquot) || isNaN(weight)) { | |
| throw new Error("يرجى إدخال جميع القيم بشكل صحيح"); | |
| } | |
| const purity = (0.01 * M_MgSO4 * 500 * 100 * (volume / 1000)) / (aliquot * weight); | |
| // Display purity | |
| document.getElementById('purity_value').textContent = `النقاوة = ${purity.toFixed(2)}%`; | |
| // Calculate and display actual ratios if available | |
| if (appState.ratios) { | |
| const { ratioMgSO4, ratioMgO, ratioS } = appState.ratios; | |
| const actualMgSO4 = ratioMgSO4 * purity / 100; | |
| const actualMgO = ratioMgO * purity / 100; | |
| const actualS = ratioS * purity / 100; | |
| document.getElementById('actual_ratios').textContent = | |
| `النسب الفعلية: MgSO₄ = ${actualMgSO4.toFixed(2)}%، MgO = ${actualMgO.toFixed(2)}%، S = ${actualS.toFixed(2)}%`; | |
| } | |
| // Show result box | |
| document.getElementById('purity_result').classList.remove('hidden'); | |
| } catch (error) { | |
| alert(error.message); | |
| } | |
| } | |
| </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-ul" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |