Spaces:

yomir
/

Atom-Calculator

Running

App Files Files Community

vip3 commited on Dec 10, 2024

Commit

2db639b

verified ·

1 Parent(s): 1d97e10

Update index.html

Browse files

Files changed (1) hide show

index.html +329 -18

index.html CHANGED Viewed

@@ -1,19 +1,330 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Advanced Atom Simulator</title>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            font-family: 'Roboto', sans-serif;
+            background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
+            color: #f0f0f0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+        }
+        #controls {
+            position: absolute;
+            top: 10px;
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            gap: 20px;
+            backdrop-filter: blur(10px);
+            padding: 20px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 10px;
+            z-index: 10;
+        }
+        .control {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .control label {
+            margin-bottom: 5px;
+            font-weight: bold;
+        }
+        .control input, .control select {
+            width: 80px;
+            padding: 10px;
+            border: none;
+            border-radius: 5px;
+            background: #333;
+            color: #fff;
+            text-align: center;
+        }
+        #info {
+            position: absolute;
+            bottom: 20px;
+            text-align: center;
+            background: rgba(255, 255, 255, 0.1);
+            padding: 20px;
+            border-radius: 10px;
+            backdrop-filter: blur(10px);
+            z-index: 10;
+        }
+        #info div {
+            margin: 5px 0;
+            font-size: 1.2em;
+        }
+        canvas {
+            background-color: transparent;
+        }
+    </style>
+</head>
+<body>
+    <div id="controls">
+        <div class="control">
+            <label for="elements">Element</label>
+            <select id="elements"></select>
+        </div>
+        <div class="control">
+            <label for="protons">Protons</label>
+            <input type="number" id="protons" min="1" value="1">
+        </div>
+        <div class="control">
+            <label for="neutrons">Neutrons</label>
+            <input type="number" id="neutrons" min="0" value="1">
+        </div>
+        <div class="control">
+            <label for="electrons">Electrons</label>
+            <input type="number" id="electrons" min="1" value="1">
+        </div>
+    </div>
+    <div id="info">
+        <div id="elementName">Element: Hydrogen</div>
+        <div id="azeNotation">AZE Notation: 2H1</div>
+        <div id="elementMass">Mass: 2.016 u</div>
+    </div>
+    <canvas id="atomCanvas"></canvas>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script>
+        const canvas = document.getElementById('atomCanvas');
+        const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
+        const scene = new THREE.Scene();
+        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        camera.position.z = 10;
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        const light = new THREE.AmbientLight(0x404040, 2);
+        scene.add(light);
+        const protonGeometry = new THREE.SphereGeometry(0.3, 32, 32);
+        const neutronGeometry = new THREE.SphereGeometry(0.3, 32, 32);
+        const electronGeometry = new THREE.SphereGeometry(0.1, 32, 32);
+        const protonMaterial = new THREE.MeshStandardMaterial({ color: 0xFF3333 });
+        const neutronMaterial = new THREE.MeshStandardMaterial({ color: 0x3333FF });
+        const electronMaterial = new THREE.MeshStandardMaterial({ color: 0x33FF33 });
+        const nucleus = new THREE.Group();
+        scene.add(nucleus);
+        const electrons = [];
+        const elements = {
+            1: { name: "Hydrogen", symbol: "H", mass: 1.008 },
+            2: { name: "Helium", symbol: "He", mass: 4.0026 },
+            3: { name: "Lithium", symbol: "Li", mass: 6.94 },
+            4: { name: "Beryllium", symbol: "Be", mass: 9.0122 },
+            5: { name: "Boron", symbol: "B", mass: 10.81 },
+            6: { name: "Carbon", symbol: "C", mass: 12.011 },
+            7: { name: "Nitrogen", symbol: "N", mass: 14.007 },
+            8: { name: "Oxygen", symbol: "O", mass: 15.999 },
+            9: { name: "Fluorine", symbol: "F", mass: 18.998 },
+            10: { name: "Neon", symbol: "Ne", mass: 20.180 },
+            11: { name: "Sodium", symbol: "Na", mass: 22.990 },
+            12: { name: "Magnesium", symbol: "Mg", mass: 24.305 },
+            13: { name: "Aluminium", symbol: "Al", mass: 26.982 },
+            14: { name: "Silicon", symbol: "Si", mass: 28.085 },
+            15: { name: "Phosphorus", symbol: "P", mass: 30.974 },
+            16: { name: "Sulfur", symbol: "S", mass: 32.06 },
+            17: { name: "Chlorine", symbol: "Cl", mass: 35.45 },
+            18: { name: "Argon", symbol: "Ar", mass: 39.948 },
+            19: { name: "Potassium", symbol: "K", mass: 39.098 },
+            20: { name: "Calcium", symbol: "Ca", mass: 40.078 },
+            21: { name: "Scandium", symbol: "Sc", mass: 44.956 },
+            22: { name: "Titanium", symbol: "Ti", mass: 47.867 },
+            23: { name: "Vanadium", symbol: "V", mass: 50.942 },
+            24: { name: "Chromium", symbol: "Cr", mass: 51.996 },
+            25: { name: "Manganese", symbol: "Mn", mass: 54.938 },
+            26: { name: "Iron", symbol: "Fe", mass: 55.845 },
+            27: { name: "Cobalt", symbol: "Co", mass: 58.933 },
+            28: { name: "Nickel", symbol: "Ni", mass: 58.693 },
+            29: { name: "Copper", symbol: "Cu", mass: 63.546 },
+            30: { name: "Zinc", symbol: "Zn", mass: 65.38 },
+            31: { name: "Gallium", symbol: "Ga", mass: 69.723 },
+            32: { name: "Germanium", symbol: "Ge", mass: 72.630 },
+            33: { name: "Arsenic", symbol: "As", mass: 74.922 },
+            34: { name: "Selenium", symbol: "Se", mass: 78.971 },
+            35: { name: "Bromine", symbol: "Br", mass: 79.904 },
+            36: { name: "Krypton", symbol: "Kr", mass: 83.798 },
+            37: { name: "Rubidium", symbol: "Rb", mass: 85.468 },
+            38: { name: "Strontium", symbol: "Sr", mass: 87.62 },
+            39: { name: "Yttrium", symbol: "Y", mass: 88.906 },
+            40: { name: "Zirconium", symbol: "Zr", mass: 91.224 },
+            41: { name: "Niobium", symbol: "Nb", mass: 92.906 },
+            42: { name: "Molybdenum", symbol: "Mo", mass: 95.95 },
+            43: { name: "Technetium", symbol: "Tc", mass: 98 },
+            44: { name: "Ruthenium", symbol: "Ru", mass: 101.07 },
+            45: { name: "Rhodium", symbol: "Rh", mass: 102.91 },
+            46: { name: "Palladium", symbol: "Pd", mass: 106.42 },
+            47: { name: "Silver", symbol: "Ag", mass: 107.87 },
+            48: { name: "Cadmium", symbol: "Cd", mass: 112.41 },
+            49: { name: "Indium", symbol: "In", mass: 114.82 },
+            50: { name: "Tin", symbol: "Sn", mass: 118.71 },
+            51: { name: "Antimony", symbol: "Sb", mass: 121.76 },
+            52: { name: "Tellurium", symbol: "Te", mass: 127.60 },
+            53: { name: "Iodine", symbol: "I", mass: 126.90 },
+            54: { name: "Xenon", symbol: "Xe", mass: 131.29 },
+            55: { name: "Cesium", symbol: "Cs", mass: 132.91 },
+            56: { name: "Barium", symbol: "Ba", mass: 137.33 },
+            57: { name: "Lanthanum", symbol: "La", mass: 138.91 },
+            58: { name: "Cerium", symbol: "Ce", mass: 140.12 },
+            59: { name: "Praseodymium", symbol: "Pr", mass: 140.91 },
+            60: { name: "Neodymium", symbol: "Nd", mass: 144.24 },
+            61: { name: "Promethium", symbol: "Pm", mass: 145 },
+            62: { name: "Samarium", symbol: "Sm", mass: 150.36 },
+            63: { name: "Europium", symbol: "Eu", mass: 151.96 },
+            64: { name: "Gadolinium", symbol: "Gd", mass: 157.25 },
+            65: { name: "Terbium", symbol: "Tb", mass: 158.93 },
+            66: { name: "Dysprosium", symbol: "Dy", mass: 162.50 },
+            67: { name: "Holmium", symbol: "Ho", mass: 164.93 },
+            68: { name: "Erbium", symbol: "Er", mass: 167.26 },
+            69: { name: "Thulium", symbol: "Tm", mass: 168.93 },
+            70: { name: "Ytterbium", symbol: "Yb", mass: 173.05 },
+            71: { name: "Lutetium", symbol: "Lu", mass: 174.97 },
+            72: { name: "Hafnium", symbol: "Hf", mass: 178.49 },
+            73: { name: "Tantalum", symbol: "Ta", mass: 180.95 },
+            74: { name: "Tungsten", symbol: "W", mass: 183.84 },
+            75: { name: "Rhenium", symbol: "Re", mass: 186.21 },
+            76: { name: "Osmium", symbol: "Os", mass: 190.23 },
+            77: { name: "Iridium", symbol: "Ir", mass: 192.22 },
+            78: { name: "Platinum", symbol: "Pt", mass: 195.08 },
+            79: { name: "Gold", symbol: "Au", mass: 196.97 },
+            80: { name: "Mercury", symbol: "Hg", mass: 200.59 },
+            81: { name: "Thallium", symbol: "Tl", mass: 204.38 },
+            82: { name: "Lead", symbol: "Pb", mass: 207.2 },
+            83: { name: "Bismuth", symbol: "Bi", mass: 208.98 },
+            84: { name: "Polonium", symbol: "Po", mass: 209 },
+            85: { name: "Astatine", symbol: "At", mass: 210 },
+            86: { name: "Radon", symbol: "Rn", mass: 222 },
+            87: { name: "Francium", symbol: "Fr", mass: 223 },
+            88: { name: "Radium", symbol: "Ra", mass: 226 },
+            89: { name: "Actinium", symbol: "Ac", mass: 227 },
+            90: { name: "Thorium", symbol: "Th", mass: 232.04 },
+            91: { name: "Protactinium", symbol: "Pa", mass: 231.04 },
+            92: { name: "Uranium", symbol: "U", mass: 238.03 },
+            93: { name: "Neptunium", symbol: "Np", mass: 237 },
+            94: { name: "Plutonium", symbol: "Pu", mass: 244 },
+            95: { name: "Americium", symbol: "Am", mass: 243 },
+            96: { name: "Curium", symbol: "Cm", mass: 247 },
+            97: { name: "Berkelium", symbol: "Bk", mass: 247 },
+            98: { name: "Californium", symbol: "Cf", mass: 251 },
+            99: { name: "Einsteinium", symbol: "Es", mass: 252 },
+            100: { name: "Fermium", symbol: "Fm", mass: 257 },
+            101: { name: "Mendelevium", symbol: "Md", mass: 258 },
+            102: { name: "Nobelium", symbol: "No", mass: 259 },
+            103: { name: "Lawrencium", symbol: "Lr", mass: 266 },
+            104: { name: "Rutherfordium", symbol: "Rf", mass: 267 },
+            105: { name: "Dubnium", symbol: "Db", mass: 270 },
+            106: { name: "Seaborgium", symbol: "Sg", mass: 271 },
+            107: { name: "Bohrium", symbol: "Bh", mass: 270 },
+            108: { name: "Hassium", symbol: "Hs", mass: 277 },
+            109: { name: "Meitnerium", symbol: "Mt", mass: 278 },
+            110: { name: "Darmstadtium", symbol: "Ds", mass: 281 },
+            111: { name: "Roentgenium", symbol: "Rg", mass: 282 },
+            112: { name: "Copernicium", symbol: "Cn", mass: 285 },
+            113: { name: "Nihonium", symbol: "Nh", mass: 286 },
+            114: { name: "Flerovium", symbol: "Fl", mass: 289 },
+            115: { name: "Moscovium", symbol: "Mc", mass: 290 },
+            116: { name: "Livermorium", symbol: "Lv", mass: 293 },
+            117: { name: "Tennessine", symbol: "Ts", mass: 294 },
+            118: { name: "Oganesson", symbol: "Og", mass: 294 }
+        };
+        const elementSelect = document.getElementById('elements');
+        Object.keys(elements).forEach(key => {
+            const option = document.createElement('option');
+            option.value = key;
+            option.textContent = elements[key].name;
+            elementSelect.appendChild(option);
+        });
+        function createParticles(numProtons, numNeutrons, numElectrons) {
+            nucleus.clear();
+            electrons.forEach(e => scene.remove(e));
+            electrons.length = 0;
+            for (let i = 0; i < numProtons; i++) {
+                const proton = new THREE.Mesh(protonGeometry, protonMaterial);
+                proton.position.set((Math.random() - 0.5), (Math.random() - 0.5), (Math.random() - 0.5));
+                nucleus.add(proton);
+            }
+            for (let i = 0; i < numNeutrons; i++) {
+                const neutron = new THREE.Mesh(neutronGeometry, neutronMaterial);
+                neutron.position.set((Math.random() - 0.5), (Math.random() - 0.5), (Math.random() - 0.5));
+                nucleus.add(neutron);
+            }
+            for (let i = 0; i < numElectrons; i++) {
+                const electron = new THREE.Mesh(electronGeometry, electronMaterial);
+                const angle = (i / numElectrons) * Math.PI * 2;
+                const radius = 2.5;
+                electron.position.set(Math.cos(angle) * radius, Math.sin(angle) * radius, 0);
+                scene.add(electron);
+                electrons.push(electron);
+            }
+        }
+        function animate() {
+            requestAnimationFrame(animate);
+            nucleus.rotation.y += 0.01;
+            electrons.forEach((e, i) => {
+                e.position.x = Math.cos(Date.now() * 0.001 + i) * 2.5;
+                e.position.y = Math.sin(Date.now() * 0.001 + i) * 2.5;
+            });
+            renderer.render(scene, camera);
+        }
+        function updateInfo() {
+            const numProtons = parseInt(document.getElementById('protons').value);
+            const numNeutrons = parseInt(document.getElementById('neutrons').value);
+            const numElectrons = parseInt(document.getElementById('electrons').value);
+            const selectedElement = elements[numProtons] || { name: "Unknown", symbol: "?", mass: 0 };
+            const massNumber = numProtons + numNeutrons;
+            const calculatedMass = numProtons * 1.007 + numNeutrons * 1.008 + numElectrons * 0.00055;
+            document.getElementById('elementName').textContent = `Element: ${selectedElement.name}`;
+            document.getElementById('azeNotation').textContent = `AZE Notation: ${massNumber}${selectedElement.symbol}${numProtons}`;
+            document.getElementById('elementMass').textContent = `Mass: ${calculatedMass.toFixed(3)} u`;
+        }
+        document.querySelectorAll('input[type="number"]').forEach(input => {
+            input.addEventListener('input', () => {
+                const numProtons = parseInt(document.getElementById('protons').value);
+                const numNeutrons = parseInt(document.getElementById('neutrons').value);
+                const numElectrons = parseInt(document.getElementById('electrons').value);
+                createParticles(numProtons, numNeutrons, numElectrons);
+                updateInfo();
+            });
+        });
+        elementSelect.addEventListener('change', () => {
+            const selectedElement = elements[elementSelect.value];
+            document.getElementById('protons').value = elementSelect.value;
+            document.getElementById('neutrons').value = Math.round(selectedElement.mass) - elementSelect.value;
+            document.getElementById('electrons').value = elementSelect.value;
+            createParticles(elementSelect.value, Math.round(selectedElement.mass) - elementSelect.value, elementSelect.value);
+            updateInfo();
+        });
+        createParticles(1, 1, 1);
+        animate();
+        updateInfo();
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+    </script>
+</body>
 </html>