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>آلة حاسبة كيميائية سلفات الماغنسيوم - Chemist/ Mostafa Hassan</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: #f8fafc; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%); | |
| } | |
| .input-field { | |
| transition: all 0.3s ease; | |
| } | |
| .input-field:focus { | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); | |
| } | |
| .result-card { | |
| background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); | |
| } | |
| .floating-label { | |
| position: absolute; | |
| right: 1rem; | |
| top: -0.5rem; | |
| background-color: white; | |
| padding: 0 0.5rem; | |
| font-size: 0.75rem; | |
| color: #4b5563; | |
| } | |
| .animate-bounce-once { | |
| animation: bounceOnce 0.5s; | |
| } | |
| @keyframes bounceOnce { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-5px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gray-50"> | |
| <div class="gradient-bg text-white py-6 shadow-lg"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h1 class="text-3xl font-bold">آلة حاسبة كيميائية</h1> | |
| <p class="text-blue-100 mt-1">Chemist/ Mostafa Hassan</p> | |
| </div> | |
| <div class="bg-white/20 p-3 rounded-full"> | |
| <i class="fas fa-flask text-2xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Section 1: Water Molecules Calculation --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8 transition-all duration-300 hover:shadow-lg"> | |
| <div class="gradient-bg px-6 py-4 flex items-center"> | |
| <i class="fas fa-tint text-white text-xl mr-3"></i> | |
| <h2 class="text-xl font-bold text-white">حساب عدد جزيئات الماء (x)</h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> | |
| <div class="relative"> | |
| <div class="floating-label">وزن الجفنة فارغة (جم)</div> | |
| <div class="relative mt-2"> | |
| <input type="number" id="emptyCrucibleWeight" step="0.001" | |
| class="input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"> | |
| <div class="absolute left-3 top-3 text-gray-400">g</div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="floating-label">وزن العينة (جم)</div> | |
| <div class="relative mt-2"> | |
| <input type="number" id="sampleWeightSection1" step="0.001" | |
| class="input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"> | |
| <div class="absolute left-3 top-3 text-gray-400">g</div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="floating-label">وزن الجفنة بعد الحرق (جم)</div> | |
| <div class="relative mt-2"> | |
| <input type="number" id="crucibleWeightAfterBurning" step="0.001" | |
| class="input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"> | |
| <div class="absolute left-3 top-3 text-gray-400">g</div> | |
| </div> | |
| </div> | |
| </div> | |
| <button onclick="calculateX()" | |
| class="gradient-bg text-white px-6 py-3 rounded-lg font-medium hover:opacity-90 transition-all flex items-center justify-center"> | |
| <i class="fas fa-calculator ml-2"></i> | |
| احسب عدد جزيئات الماء (x) | |
| </button> | |
| <div id="xResult" class="mt-6 hidden"> | |
| <div class="result-card p-5 rounded-lg border border-blue-100"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="font-bold text-lg text-gray-800">النتيجة:</h3> | |
| <div class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium"> | |
| <i class="fas fa-water mr-1"></i> جزيئات الماء | |
| </div> | |
| </div> | |
| <div class="mt-3 text-2xl font-bold text-blue-600" id="xValue"></div> | |
| <div class="mt-2 text-sm text-gray-600" id="xDetails"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Section 2: Purity and Elements Calculation --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8 transition-all duration-300 hover:shadow-lg"> | |
| <div class="gradient-bg px-6 py-4 flex items-center"> | |
| <i class="fas fa-percentage text-white text-xl mr-3"></i> | |
| <h2 class="text-xl font-bold text-white">حساب النقاوة ونسب العناصر</h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="relative"> | |
| <div class="floating-label">وزن العينة (جم)</div> | |
| <div class="relative mt-2"> | |
| <input type="number" id="sampleWeightSection2" step="0.001" | |
| class="input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"> | |
| <div class="absolute left-3 top-3 text-gray-400">g</div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="floating-label">حجم السحبة (مل)</div> | |
| <div class="relative mt-2"> | |
| <input type="number" id="aliquotVolume" step="0.001" | |
| class="input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"> | |
| <div class="absolute left-3 top-3 text-gray-400">ml</div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="floating-label">الحجم النازل من السحاحة (مل)</div> | |
| <div class="relative mt-2"> | |
| <input type="number" id="titrantVolume" step="0.001" | |
| class="input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"> | |
| <div class="absolute left-3 top-3 text-gray-400">ml</div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="floating-label">عيارية EDTA (مول/لتر)</div> | |
| <div class="relative mt-2"> | |
| <input type="number" id="edtaMolarity" step="0.001" value="0.01" | |
| class="input-field w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"> | |
| <div class="absolute left-3 top-3 text-gray-400">M</div> | |
| </div> | |
| </div> | |
| </div> | |
| <button onclick="calculatePurityAndElements()" | |
| class="gradient-bg text-white px-6 py-3 rounded-lg font-medium hover:opacity-90 transition-all flex items-center justify-center"> | |
| <i class="fas fa-atom ml-2"></i> | |
| احسب النقاوة ونسب العناصر | |
| </button> | |
| <div id="purityResults" class="mt-6 hidden"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Purity Card --> | |
| <div class="result-card p-5 rounded-lg border border-blue-100"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="font-bold text-lg text-gray-800">النقاوة</h3> | |
| <div class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium"> | |
| <i class="fas fa-certificate mr-1"></i> النقاوة | |
| </div> | |
| </div> | |
| <div class="mt-3 flex items-end"> | |
| <div class="text-3xl font-bold text-green-600" id="purityValue"></div> | |
| <div class="text-xl text-green-600 mb-1 ml-1">%</div> | |
| </div> | |
| <div class="mt-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">تعديل النقاوة يدويًا:</label> | |
| <div class="relative"> | |
| <input type="number" id="manualPurity" step="0.001" | |
| class="input-field w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"> | |
| <div class="absolute left-3 top-2.5 text-gray-400">%</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Elements Card --> | |
| <div class="result-card p-5 rounded-lg border border-blue-100"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="font-bold text-lg text-gray-800">نسب العناصر</h3> | |
| <div class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-medium"> | |
| <i class="fas fa-chart-pie mr-1"></i> العناصر | |
| </div> | |
| </div> | |
| <div class="mt-3 grid grid-cols-2 gap-4" id="elementsResult"> | |
| <!-- Elements will be populated here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Info Section --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8"> | |
| <div class="bg-gray-800 px-6 py-4 flex items-center"> | |
| <i class="fas fa-info-circle text-white text-xl mr-3"></i> | |
| <h2 class="text-xl font-bold text-white">معلومات عن الآلة الحاسبة</h2> | |
| </div> | |
| <div class="p-6"> | |
| <div class="prose prose-sm max-w-none text-gray-700"> | |
| <p>هذه الآلة الحاسبة تساعد في:</p> | |
| <ul class="list-disc pr-5"> | |
| <li>حساب عدد جزيئات الماء (x) في مركب MgSO₄·xH₂O</li> | |
| <li>تحديد نقاوة العينة بناءً على معايرة EDTA</li> | |
| <li>حساب نسب العناصر المختلفة في المركب</li> | |
| </ul> | |
| <div class="mt-4 p-4 bg-blue-50 rounded-lg border border-blue-200"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 pt-1"> | |
| <i class="fas fa-lightbulb text-blue-500"></i> | |
| </div> | |
| <div class="mr-3"> | |
| <h4 class="text-sm font-medium text-blue-800">نصيحة:</h4> | |
| <p class="mt-1 text-sm text-blue-700"> | |
| تأكد من إدخال جميع القيم بدقة للحصول على نتائج موثوقة. يمكنك تعديل قيمة النقاوة يدويًا لرؤية تأثيرها على نسب العناصر. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="gradient-bg text-white py-6"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <p>تم تطويره بواسطة Chemist/ Mostafa Hassan</p> | |
| <div class="mt-3 flex justify-center space-x-4"> | |
| <a href="#" class="text-white hover:text-blue-200 transition-colors"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-white hover:text-blue-200 transition-colors"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-white hover:text-blue-200 transition-colors"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-white hover:text-blue-200 transition-colors"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Section 1: Water Molecules Calculation | |
| function calculateX() { | |
| const emptyCrucibleWeight = parseFloat(document.getElementById('emptyCrucibleWeight').value); | |
| const sampleWeight = parseFloat(document.getElementById('sampleWeightSection1').value); | |
| const crucibleWeightAfterBurning = parseFloat(document.getElementById('crucibleWeightAfterBurning').value); | |
| if (isNaN(emptyCrucibleWeight) || isNaN(sampleWeight) || isNaN(crucibleWeightAfterBurning)) { | |
| showError('xResult', 'يرجى إدخال جميع القيم بشكل صحيح.'); | |
| return; | |
| } | |
| // وزن العينة بعد الحرق (MgSO4) | |
| const sampleWeightAfterBurning = crucibleWeightAfterBurning - emptyCrucibleWeight; | |
| // وزن الماء المفقود | |
| const waterWeight = sampleWeight - sampleWeightAfterBurning; | |
| // عدد مولات MgSO4 | |
| const molesMgSO4 = sampleWeightAfterBurning / 120; // الكتلة المولية لـ MgSO4 = 120 | |
| // عدد مولات H2O | |
| const molesH2O = waterWeight / 18; // الكتلة المولية لـ H2O = 18 | |
| // حساب x | |
| const x = molesH2O / molesMgSO4; | |
| const roundedX = Math.round(x); | |
| // Display results | |
| document.getElementById('xValue').textContent = roundedX; | |
| document.getElementById('xDetails').innerHTML = ` | |
| <div class="grid grid-cols-2 gap-2 mt-3"> | |
| <div class="bg-gray-100 p-2 rounded"> | |
| <div class="text-xs text-gray-500">وزن الماء المفقود</div> | |
| <div class="font-medium">${waterWeight.toFixed(3)} جم</div> | |
| </div> | |
| <div class="bg-gray-100 p-2 rounded"> | |
| <div class="text-xs text-gray-500">مولات الماء</div> | |
| <div class="font-medium">${molesH2O.toFixed(5)} مول</div> | |
| </div> | |
| <div class="bg-gray-100 p-2 rounded"> | |
| <div class="text-xs text-gray-500">مولات MgSO₄</div> | |
| <div class="font-medium">${molesMgSO4.toFixed(5)} مول</div> | |
| </div> | |
| <div class="bg-gray-100 p-2 rounded"> | |
| <div class="text-xs text-gray-500">القيمة الدقيقة</div> | |
| <div class="font-medium">${x.toFixed(2)}</div> | |
| </div> | |
| </div> | |
| `; | |
| document.getElementById('xResult').classList.remove('hidden'); | |
| document.getElementById('xResult').classList.add('animate-bounce-once'); | |
| setTimeout(() => { | |
| document.getElementById('xResult').classList.remove('animate-bounce-once'); | |
| }, 500); | |
| } | |
| // Section 2: Purity and Elements Calculation | |
| function calculatePurityAndElements() { | |
| const sampleWeight = parseFloat(document.getElementById('sampleWeightSection2').value); | |
| const aliquotVolume = parseFloat(document.getElementById('aliquotVolume').value); | |
| const titrantVolume = parseFloat(document.getElementById('titrantVolume').value); | |
| const edtaMolarity = parseFloat(document.getElementById('edtaMolarity').value); | |
| if (isNaN(sampleWeight) || isNaN(aliquotVolume) || isNaN(titrantVolume) || isNaN(edtaMolarity)) { | |
| showError('purityResults', 'يرجى إدخال جميع القيم بشكل صحيح.'); | |
| return; | |
| } | |
| // عدد مولات EDTA | |
| const molesEDTA = edtaMolarity * (titrantVolume / 1000); | |
| // عدد مولات Mg2+ في السحبة | |
| const molesMg = molesEDTA; // التفاعل 1:1 | |
| // تركيز Mg2+ في السحبة | |
| const mgConcentration = molesMg / (aliquotVolume / 1000); | |
| // عدد مولات Mg2+ في الفلاسك (500 مل) | |
| const molesMgInFlask = mgConcentration * 0.5; // 500 مل = 0.5 لتر | |
| // وزن MgSO4 الفعلي | |
| const mgSO4Weight = molesMgInFlask * 120; // الكتلة المولية لـ MgSO4 = 120 | |
| // النقاوة | |
| const purity = (mgSO4Weight / sampleWeight) * 100; | |
| // عرض النقاوة | |
| document.getElementById('purityValue').textContent = purity.toFixed(2); | |
| document.getElementById('manualPurity').value = purity.toFixed(2); | |
| // حساب نسب العناصر | |
| updateElementPercentages(); | |
| document.getElementById('purityResults').classList.remove('hidden'); | |
| document.getElementById('purityResults').classList.add('animate-bounce-once'); | |
| setTimeout(() => { | |
| document.getElementById('purityResults').classList.remove('animate-bounce-once'); | |
| }, 500); | |
| } | |
| // Function to update element percentages based on purity (calculated or manual) | |
| function updateElementPercentages() { | |
| const purity = parseFloat(document.getElementById('manualPurity').value); | |
| if (isNaN(purity)) { | |
| showError('elementsResult', 'يرجى إدخال قيمة نقاوة صحيحة.'); | |
| return; | |
| } | |
| // الكتلة المولية لـ MgSO4·7H2O = 246 (لأن x = 7) | |
| const molarMassMgSO4_7H2O = 246; | |
| const molarMassMgSO4 = 120; | |
| const molarMassMgO = 40; | |
| const molarMassMg = 24; | |
| const molarMassS = 32; | |
| const molarMassO = 16; | |
| // حساب النسب | |
| const mgSO4Percentage = (molarMassMgSO4 / molarMassMgSO4_7H2O) * purity; | |
| const mgoPercentage = (molarMassMgO / molarMassMgSO4_7H2O) * purity; | |
| const mgPercentage = (molarMassMg / molarMassMgSO4_7H2O) * purity; | |
| const sPercentage = (molarMassS / molarMassMgSO4_7H2O) * purity; | |
| const oPercentage = (molarMassO * 4 / molarMassMgSO4_7H2O) * purity; | |
| // عرض النتائج | |
| document.getElementById('elementsResult').innerHTML = ` | |
| <div class="bg-blue-50 p-3 rounded-lg"> | |
| <div class="text-xs text-blue-600">MgSO₄</div> | |
| <div class="font-bold text-blue-800">${mgSO4Percentage.toFixed(2)}%</div> | |
| </div> | |
| <div class="bg-green-50 p-3 rounded-lg"> | |
| <div class="text-xs text-green-600">MgO</div> | |
| <div class="font-bold text-green-800">${mgoPercentage.toFixed(2)}%</div> | |
| </div> | |
| <div class="bg-purple-50 p-3 rounded-lg"> | |
| <div class="text-xs text-purple-600">Mg</div> | |
| <div class="font-bold text-purple-800">${mgPercentage.toFixed(2)}%</div> | |
| </div> | |
| <div class="bg-yellow-50 p-3 rounded-lg"> | |
| <div class="text-xs text-yellow-600">S</div> | |
| <div class="font-bold text-yellow-800">${sPercentage.toFixed(2)}%</div> | |
| </div> | |
| <div class="bg-red-50 p-3 rounded-lg"> | |
| <div class="text-xs text-red-600">O</div> | |
| <div class="font-bold text-red-800">${oPercentage.toFixed(2)}%</div> | |
| </div> | |
| <div class="bg-indigo-50 p-3 rounded-lg"> | |
| <div class="text-xs text-indigo-600">H₂O</div> | |
| <div class="font-bold text-indigo-800">${(100 - purity).toFixed(2)}%</div> | |
| </div> | |
| `; | |
| } | |
| // Helper function to show errors | |
| function showError(elementId, message) { | |
| const element = document.getElementById(elementId); | |
| element.innerHTML = ` | |
| <div class="bg-red-50 border-l-4 border-red-500 p-4"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-exclamation-circle text-red-500"></i> | |
| </div> | |
| <div class="mr-3"> | |
| <p class="text-sm text-red-700">${message}</p> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| element.classList.remove('hidden'); | |
| } | |
| // Initialize manual purity input to trigger updates | |
| document.getElementById('manualPurity').addEventListener('input', updateElementPercentages); | |
| </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-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |