Hugging Face's logo

Spaces:
great1sun
/
phy0
Running

App Files Community
phy0 / index.html
great1sun's picture
great1sun
Add 2 files
339012a verified
Raw
History Blame Contribute Delete
25.7 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>ElectroPhysics Calculator</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>
 .tab-content {
 display: none;
 }
 .tab-content.active {
 display: block;
 animation: fadeIn 0.5s;
 }
 @keyframes fadeIn {
 from { opacity: 0; transform: translateY(10px); }
 to { opacity: 1; transform: translateY(0); }
 }
 .formula-box {
 background: rgba(255, 255, 255, 0.1);
 border-left: 4px solid #4F46E5;
 }
 .result-box {
 background: rgba(16, 185, 129, 0.1);
 border-left: 4px solid #10B981;
 }
 .diagram {
 width: 100%;
 height: 200px;
 background: rgba(255, 255, 255, 0.05);
 border-radius: 8px;
 display: flex;
 justify-content: center;
 align-items: center;
 margin: 1rem 0;
 position: relative;
 }
 .sphere {
 width: 120px;
 height: 120px;
 border-radius: 50%;
 background: radial-gradient(circle at 30% 30%, #4F46E5, transparent 70%);
 border: 2px solid #4F46E5;
 position: relative;
 }
 .sphere::before {
 content: '+q';
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 color: white;
 font-weight: bold;
 }
 .field-lines {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 }
 .field-line {
 position: absolute;
 width: 2px;
 height: 120px;
 background: rgba(79, 70, 229, 0.5);
 top: 0;
 left: 50%;
 transform-origin: bottom center;
 }
 .cone {
 width: 0;
 height: 0;
 border-left: 60px solid transparent;
 border-right: 60px solid transparent;
 border-top: 100px solid rgba(79, 70, 229, 0.3);
 position: relative;
 }
 .cone::after {
 content: '';
 position: absolute;
 width: 20px;
 height: 20px;
 background: #4F46E5;
 border-radius: 50%;
 top: -110px;
 left: -10px;
 }
 </style>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen">
 <div class="container mx-auto px-4 py-8 max-w-4xl">
 <header class="text-center mb-8">
 <h1 class="text-4xl font-bold text-indigo-400 mb-2">ElectroPhysics Calculator</h1>
 <p class="text-gray-400">Calculate electric flux, Gauss's law applications, and solid angles</p>
 </header>
<div class="bg-gray-800 rounded-xl shadow-xl overflow-hidden mb-8">
 <div class="flex border-b border-gray-700">
 <button class="tab-btn py-4 px-6 font-medium text-indigo-300 border-b-2 border-indigo-500" data-tab="electric-flux">
 <i class="fas fa-bolt mr-2"></i>Electric Flux
 </button>
 <button class="tab-btn py-4 px-6 font-medium text-gray-400 hover:text-indigo-300" data-tab="gauss-law">
 <i class="fas fa-atom mr-2"></i>Gauss's Law
 </button>
 <button class="tab-btn py-4 px-6 font-medium text-gray-400 hover:text-indigo-300" data-tab="solid-angle">
 <i class="fas fa-shapes mr-2"></i>Solid Angle
 </button>
 </div>
<div class="p-6">
 <!-- Electric Flux Tab -->
 <div id="electric-flux" class="tab-content active">
 <h2 class="text-2xl font-semibold mb-4 text-indigo-300">Electric Flux Calculator</h2>
<div class="grid md:grid-cols-2 gap-6">
 <div>
 <div class="diagram">
 <div class="relative w-full h-full flex justify-center items-center">
 <div class="w-32 h-20 bg-indigo-500 opacity-20 rotate-45"></div>
 <div class="absolute w-32 h-20 border-2 border-indigo-500"></div>
 <div class="absolute w-full h-1 bg-indigo-500"></div>
 <div class="absolute w-4 h-4 bg-indigo-500 rounded-full -top-2 left-1/2 -translate-x-1/2"></div>
 <div class="absolute text-xs text-indigo-300 -top-6 left-1/2 -translate-x-1/2">E</div>
 <div class="absolute text-xs text-indigo-300 right-2 top-1/2 -translate-y-1/2">θ</div>
 <div class="absolute w-6 h-0.5 bg-indigo-300 right-4 top-1/2 -translate-y-1/2"></div>
 <div class="absolute w-0.5 h-6 bg-indigo-300 right-4 top-1/2 -translate-y-1/2"></div>
 </div>
 </div>
<div class="formula-box p-4 rounded-lg mb-4">
 <p class="text-sm text-gray-300 mb-1">Formula:</p>
 <p class="text-xl font-mono">Φ = E × A × cos(θ)</p>
 <p class="text-xs text-gray-400 mt-2">Where:</p>
 <ul class="text-xs text-gray-400 list-disc pl-4">
 <li>Φ = Electric Flux (N·m²/C)</li>
 <li>E = Electric Field (N/C)</li>
 <li>A = Area (m²)</li>
 <li>θ = Angle between E and normal to surface</li>
 </ul>
 </div>
 </div>
<div>
 <div class="mb-4">
 <label class="block text-gray-300 mb-2">Electric Field (E) in N/C</label>
 <input type="number" id="ef-electric-field" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Enter electric field">
 </div>
<div class="mb-4">
 <label class="block text-gray-300 mb-2">Area (A) in m²</label>
 <input type="number" id="ef-area" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Enter area">
 </div>
<div class="mb-4">
 <label class="block text-gray-300 mb-2">Angle (θ) in degrees</label>
 <input type="number" id="ef-angle" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Enter angle">
 <div class="flex justify-between text-xs text-gray-400 mt-1">
 <span>0° (parallel)</span>
 <span>90° (perpendicular)</span>
 </div>
 </div>
<button id="calculate-ef" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-lg transition duration-200 flex items-center justify-center">
 <i class="fas fa-calculator mr-2"></i> Calculate Flux
 </button>
<div id="ef-result" class="result-box p-4 rounded-lg mt-4 hidden">
 <p class="text-sm text-gray-300 mb-1">Result:</p>
 <p class="text-xl font-mono" id="ef-result-value">Φ = 0 N·m²/C</p>
 </div>
 </div>
 </div>
 </div>
<!-- Gauss's Law Tab -->
 <div id="gauss-law" class="tab-content">
 <h2 class="text-2xl font-semibold mb-4 text-indigo-300">Gauss's Law Calculator</h2>
<div class="grid md:grid-cols-2 gap-6">
 <div>
 <div class="diagram">
 <div class="sphere"></div>
 <div class="field-lines">
 <div class="field-line" style="transform: rotate(0deg)"></div>
 <div class="field-line" style="transform: rotate(45deg)"></div>
 <div class="field-line" style="transform: rotate(90deg)"></div>
 <div class="field-line" style="transform: rotate(135deg)"></div>
 <div class="field-line" style="transform: rotate(180deg)"></div>
 <div class="field-line" style="transform: rotate(225deg)"></div>
 <div class="field-line" style="transform: rotate(270deg)"></div>
 <div class="field-line" style="transform: rotate(315deg)"></div>
 </div>
 </div>
<div class="formula-box p-4 rounded-lg mb-4">
 <p class="text-sm text-gray-300 mb-1">Gauss's Law:</p>
 <p class="text-xl font-mono">∮E·dA = Q<sub>enc</sub>/ε₀</p>
 <p class="text-xs text-gray-400 mt-2">Where:</p>
 <ul class="text-xs text-gray-400 list-disc pl-4">
 <li>E = Electric Field (N/C)</li>
 <li>A = Area (m²)</li>
 <li>Q<sub>enc</sub> = Enclosed Charge (C)</li>
 <li>ε₀ = 8.85×10⁻¹² C²/N·m² (vacuum permittivity)</li>
 </ul>
 </div>
 </div>
<div>
 <div class="mb-4">
 <label class="block text-gray-300 mb-2">Shape</label>
 <select id="gl-shape" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
 <option value="sphere">Sphere</option>
 <option value="cylinder">Cylinder</option>
 <option value="plane">Infinite Plane</option>
 </select>
 </div>
<div class="mb-4">
 <label class="block text-gray-300 mb-2">Enclosed Charge (Q<sub>enc</sub>) in C</label>
 <input type="number" id="gl-charge" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Enter charge">
 </div>
<div class="mb-4" id="gl-radius-container">
 <label class="block text-gray-300 mb-2">Radius (r) in m</label>
 <input type="number" id="gl-radius" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Enter radius">
 </div>
<div class="mb-4 hidden" id="gl-length-container">
 <label class="block text-gray-300 mb-2">Length (L) in m</label>
 <input type="number" id="gl-length" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Enter length">
 </div>
<button id="calculate-gl" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-lg transition duration-200 flex items-center justify-center">
 <i class="fas fa-calculator mr-2"></i> Calculate Electric Field
 </button>
<div id="gl-result" class="result-box p-4 rounded-lg mt-4 hidden">
 <p class="text-sm text-gray-300 mb-1">Result:</p>
 <p class="text-xl font-mono" id="gl-result-value">E = 0 N/C</p>
 </div>
 </div>
 </div>
 </div>
<!-- Solid Angle Tab -->
 <div id="solid-angle" class="tab-content">
 <h2 class="text-2xl font-semibold mb-4 text-indigo-300">Solid Angle Calculator</h2>
<div class="grid md:grid-cols-2 gap-6">
 <div>
 <div class="diagram">
 <div class="cone"></div>
 </div>
<div class="formula-box p-4 rounded-lg mb-4">
 <p class="text-sm text-gray-300 mb-1">Formula:</p>
 <p class="text-xl font-mono">Ω = A/r²</p>
 <p class="text-xs text-gray-400 mt-2">Where:</p>
 <ul class="text-xs text-gray-400 list-disc pl-4">
 <li>Ω = Solid Angle (steradians)</li>
 <li>A = Spherical Surface Area (m²)</li>
 <li>r = Radius of Sphere (m)</li>
 </ul>
 <p class="text-xs text-gray-400 mt-2">For cone:</p>
 <p class="text-sm font-mono">Ω = 2π(1 - cos(θ/2))</p>
 </div>
 </div>
<div>
 <div class="mb-4">
 <label class="block text-gray-300 mb-2">Calculation Method</label>
 <select id="sa-method" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
 <option value="area">Using Area and Radius</option>
 <option value="cone">Using Cone Angle</option>
 </select>
 </div>
<div class="mb-4" id="sa-area-container">
 <label class="block text-gray-300 mb-2">Area (A) in m²</label>
 <input type="number" id="sa-area" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Enter area">
 </div>
<div class="mb-4" id="sa-radius-container">
 <label class="block text-gray-300 mb-2">Radius (r) in m</label>
 <input type="number" id="sa-radius" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Enter radius">
 </div>
<div class="mb-4 hidden" id="sa-angle-container">
 <label class="block text-gray-300 mb-2">Cone Angle (θ) in degrees</label>
 <input type="number" id="sa-angle" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Enter angle">
 </div>
<button id="calculate-sa" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-lg transition duration-200 flex items-center justify-center">
 <i class="fas fa-calculator mr-2"></i> Calculate Solid Angle
 </button>
<div id="sa-result" class="result-box p-4 rounded-lg mt-4 hidden">
 <p class="text-sm text-gray-300 mb-1">Result:</p>
 <p class="text-xl font-mono" id="sa-result-value">Ω = 0 sr</p>
 <p class="text-xs text-gray-400 mt-2" id="sa-fraction">Fraction of total sphere: 0%</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<footer class="text-center text-gray-500 text-sm mt-8">
 <p>ElectroPhysics Calculator &copy; 2023 | Uses ε₀ = 8.85×10⁻¹² C²/N·m²</p>
 </footer>
 </div>
<script>
 // Tab switching functionality
 const tabBtns = document.querySelectorAll('.tab-btn');
 const tabContents = document.querySelectorAll('.tab-content');
 tabBtns.forEach(btn => {
 btn.addEventListener('click', () => {
 // Remove active class from all buttons and contents
 tabBtns.forEach(b => b.classList.remove('text-indigo-300', 'border-indigo-500'));
 tabBtns.forEach(b => b.classList.add('text-gray-400'));
 tabContents.forEach(c => c.classList.remove('active'));
// Add active class to clicked button and corresponding content
 btn.classList.add('text-indigo-300', 'border-indigo-500');
 btn.classList.remove('text-gray-400');
 const tabId = btn.getAttribute('data-tab');
 document.getElementById(tabId).classList.add('active');
 });
 });
 // Electric Flux Calculation
 document.getElementById('calculate-ef').addEventListener('click', () => {
 const E = parseFloat(document.getElementById('ef-electric-field').value) || 0;
 const A = parseFloat(document.getElementById('ef-area').value) || 0;
 const θ = parseFloat(document.getElementById('ef-angle').value) || 0;
const θRad = θ * Math.PI / 180;
 const flux = E * A * Math.cos(θRad);
const resultElement = document.getElementById('ef-result-value');
 resultElement.textContent = `Φ = ${flux.toExponential(4)} N·m²/C`;
document.getElementById('ef-result').classList.remove('hidden');
 });
 // Gauss's Law Calculation
 const shapeSelect = document.getElementById('gl-shape');
 shapeSelect.addEventListener('change', () => {
 const shape = shapeSelect.value;
if (shape === 'cylinder') {
 document.getElementById('gl-radius-container').classList.remove('hidden');
 document.getElementById('gl-length-container').classList.remove('hidden');
 } else if (shape === 'plane') {
 document.getElementById('gl-radius-container').classList.add('hidden');
 document.getElementById('gl-length-container').classList.add('hidden');
 } else { // sphere
 document.getElementById('gl-radius-container').classList.remove('hidden');
 document.getElementById('gl-length-container').classList.add('hidden');
 }
 });
 document.getElementById('calculate-gl').addEventListener('click', () => {
 const ε0 = 8.8541878128e-12; // Vacuum permittivity
 const Q = parseFloat(document.getElementById('gl-charge').value) || 0;
 const shape = shapeSelect.value;
let E = 0;
 let formula = '';
if (shape === 'sphere') {
 const r = parseFloat(document.getElementById('gl-radius').value) || 0;
 if (r > 0) {
 E = Q / (4 * Math.PI * ε0 * r * r);
 formula = `E = Q/(4πε₀r²) = ${E.toExponential(4)} N/C`;
 }
 } else if (shape === 'cylinder') {
 const r = parseFloat(document.getElementById('gl-radius').value) || 0;
 const L = parseFloat(document.getElementById('gl-length').value) || 0;
 if (r > 0 && L > 0) {
 const λ = Q / L; // Linear charge density
 E = λ / (2 * Math.PI * ε0 * r);
 formula = `E = λ/(2πε₀r) = ${E.toExponential(4)} N/C`;
 }
 } else if (shape === 'plane') {
 const σ = Q; // Surface charge density (assuming Q is given as σA)
 E = σ / (2 * ε0);
 formula = `E = σ/(2ε₀) = ${E.toExponential(4)} N/C`;
 }
document.getElementById('gl-result-value').textContent = formula;
 document.getElementById('gl-result').classList.remove('hidden');
 });
 // Solid Angle Calculation
 const methodSelect = document.getElementById('sa-method');
 methodSelect.addEventListener('change', () => {
 const method = methodSelect.value;
if (method === 'cone') {
 document.getElementById('sa-area-container').classList.add('hidden');
 document.getElementById('sa-radius-container').classList.add('hidden');
 document.getElementById('sa-angle-container').classList.remove('hidden');
 } else { // area
 document.getElementById('sa-area-container').classList.remove('hidden');
 document.getElementById('sa-radius-container').classList.remove('hidden');
 document.getElementById('sa-angle-container').classList.add('hidden');
 }
 });
 document.getElementById('calculate-sa').addEventListener('click', () => {
 const method = methodSelect.value;
 let Ω = 0;
 let formula = '';
if (method === 'area') {
 const A = parseFloat(document.getElementById('sa-area').value) || 0;
 const r = parseFloat(document.getElementById('sa-radius').value) || 0;
if (r > 0) {
 Ω = A / (r * r);
 formula = `Ω = A/r² = ${Ω.toExponential(4)} sr`;
 }
 } else { // cone
 const θ = parseFloat(document.getElementById('sa-angle').value) || 0;
 const θRad = θ * Math.PI / 180;
 Ω = 2 * Math.PI * (1 - Math.cos(θRad / 2));
 formula = `Ω = 2π(1 - cos(θ/2)) = ${Ω.toExponential(4)} sr`;
 }
const fraction = (Ω / (4 * Math.PI)) * 100;
document.getElementById('sa-result-value').textContent = formula;
 document.getElementById('sa-fraction').textContent = `Fraction of total sphere: ${fraction.toFixed(2)}%`;
 document.getElementById('sa-result').classList.remove('hidden');
 });
 // Initialize diagrams with some field lines
 function initFieldLines() {
 const container = document.querySelector('.field-lines');
 for (let i = 0; i < 16; i++) {
 const line = document.createElement('div');
 line.className = 'field-line';
 line.style.transform = `rotate(${i * 22.5}deg)`;
 container.appendChild(line);
 }
 }
 // Initialize on load
 window.addEventListener('DOMContentLoaded', () => {
 initFieldLines();
 });
 </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=great1sun/phy0" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>