Click here to zoom In or Out
1HHydrogen1.0078 3LiLithium6.938 4BeBeryllium9.0122 5BBoron10.806 6CCarbon12.009 7NNitrogen14.006 8OOxygen15.999 9FFluorine18.998 10NeNeon20.180 2HeHelium4.0026 11NaSodium22.990 12MgMagnesium24.305 13AlAluminium26.982 14SiSilicon28.084 15PPhosphorus30.974 16SSulphur32.059 17ClChlorine35.446 18ArArgon39.948 19KPotassium39.008 20CaCalcium40.078 21ScScandium44.956 22TiTitanium47.867 23VVanadium50.942 24CrChromium51.996 25MnManganese54.938 26FeIron55.845 27CoCobalt58.933 28NiNickel58.693 29CuCopper63.546 30ZnZinc65.38 31GaGallium69.723 32GeGermanium72.63 33AsArsenic74.922 34SeSelenium78.96 35BrBromine79.904 36KrKrypton83.798 37RbRubidium85.468 38SrStrontium87.62 39YYttrium88.906 40ZrZirconium91.224 41NbNiobium92.906 42MoMolybdenum95.96 43TcTechnetium98.9062 44RuRuthenium101.07 45RhRhodium102.91 46PdPalladium106.42 47AgSilver107.87 48CdCadmium112.41 49InIndium114.82 50SnTin118.71 51SbAntimony121.76 52TeTellurium127.60 53IIodine126.90 54XeXenon131.29 55CsCaesium132.91 56BaBarium137.33 57-71  See Below 72HfHafnium178.49 73TaTantalum180.95 74WTungsten183.84 75ReRhenium186.21 76OsOsmium190.23 77IrIridium192.22 78PtPlatinum195.08 79AuGold196.97 80HgMercury200.59 81TlThallium204.38 82PbLead207.2 83BiBismuth208.98 84PoPolonium209 85AtAstatine210 86RnRadon222 87FrFrancium223 88RaRadium226 104RfRutherfordium261 105DbDubnium262 106SgSeaborgium268 107BhBohrium271 108HsHassium272 109MtMeitnerium270 110DsDarmstadtium276 111RgRoentgenium281 112CnCopernicium285 113NhNihonium284 114FlFlerovium289 115McMoscovium288 116LvLivermorium293 117TsTennessine294 118OgOganessom294 57LaLanthanum138.91 58CeCerium140.12 60NdNeodymium144.24 61PmPromethium148 62SmSamarium150.36 63EuEuropium151.96 64GdGadolinium157.25 65TbTerbium158.93 66DyDysprosium162.50 67HoHolmium164.93 68ErErbium167.26 69TmThulium168.93 70YbYtterbium173.04 71LuLutetium174.97 89AcActinium227 90ThThorium232.04 91PaProtactinium231.04 92UUranium238.03 93NpNeptunium237 94PuPlutonium244 95AmAmericium243 96CmCurium247 <97BkBerkelium247 98CfCalifornium251 99EsEinsteinium252 100FmFermium257 101MdMendelevium258 102NoNobelium259 103LrLawrencium262 89-103   See Below 59PrPraseodymium140.91 Alkali Metals Alkaline Earth MetalsTransition MetalsPost-Transition MetalsMetalloidsOther NonmetalsHalogensNoble GasesLanthanidesActinidesUnknown Properties 1HHydrogen1.0078GuideAtomic NumberElement SymbolElement NameAtomic WeightPeriodic Table of the Elements
Cryo <-> White Hot
Au Gold
H Hydrogen
Fe Iron
(function() { // 1. Data Mock for real logic (Example: H, He, Li) // In a full build, we'd pull this from a JSON file. const elementData = { 1: { melt: -259, boil: -253 }, // Hydrogen 2: { melt: -272, boil: -269 }, // Helium 3: { melt: 180, boil: 1342 }, // Lithium // ... (We can map all 118) }; // 2. Create the Pro Slider UI const ui = document.createElement('div'); ui.id = "custom-ptable-controller"; ui.style = "position:fixed; bottom:30px; right:30px; z-index:10000; background:#1a1a1a; color:white; padding:20px; border-radius:15px; border:1px solid #444; font-family:sans-serif; width:300px; box-shadow:0 10px 30px rgba(0,0,0,0.5);"; ui.innerHTML = `
Thermal Engine 20°C
`; document.body.appendChild(ui); // 3. Inject Circles & Fix Links const items = document.querySelectorAll('ol > li > a'); items.forEach(el => { const atomicNumber = el.querySelector('b')?.innerText || el.getAttribute('href').match(/\d+/); if (!atomicNumber) return; // Set the link to your custom format el.setAttribute('href', `${atomicNumber}.html`); el.style.position = "relative"; el.style.overflow = "hidden"; // Create the "Under the wings" Circle const circle = document.createElement('div'); circle.className = "element-thermal-circle"; circle.dataset.num = atomicNumber; circle.style = ` position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); border-radius: 50%; z-index: 1; /* Below the text (Titpytop) */ transition: all 0.4s ease; opacity: 0.6; pointer-events: none; `; // Ensure the element symbol (text) is on "Titpytop" const symbol = el.querySelector('abbr, em, strong'); if (symbol) symbol.style.cssText += "position:relative; z-index:5;"; el.appendChild(circle); }); // 4. Slider Logic: Real-time State Coloring document.getElementById('masterTemp').addEventListener('input', (e) => { const t = parseInt(e.target.value); document.getElementById('tempDisplay').innerText = `${t}°C`; document.querySelectorAll('.element-thermal-circle').forEach(circle => { const num = circle.dataset.num; const data = elementData[num] || { melt: 0, boil: 100 }; // Default for demo let color = "rgba(100, 100, 100, 0.5)"; // Unknown if (t < data.melt) color = "rgba(0, 180, 255, 0.7)"; // Solid (Blue) else if (t < data.boil) color = "rgba(0, 255, 150, 0.7)"; // Liquid (Green) else color = "rgba(255, 80, 0, 0.7)"; // Gas (Hot Red) circle.style.backgroundColor = color; circle.style.transform = `translate(-50%, -50%) scale(${1 + (t / 6000)})`; // Subtle pulse }); }); })();