The periodic table is a cornerstone of modern chemistry, organizing elements in a way that reveals their properties and relationships. Understanding its structure can unlock a deeper comprehension of the natural world.
In this article, we will explore 10 periodic table examples that highlight its versatility and importance in scientific discovery. Each example will provide unique insights into how the periodic table continues to shape our understanding of chemistry.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Designers and developers, elevate your projects with Subframe's drag-and-drop interface and intuitive, responsive canvas. Create pixel-perfect UIs effortlessly, whether it's a periodic table or any other design.
Loved by professionals for its ease and precision, Subframe is your go-to tool. Start for free today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Ready to elevate your UI designs? With Subframe, you can create pixel-perfect interfaces, including Periodic Tables, in minutes. Experience unparalleled efficiency with our drag-and-drop editor.
Start creating stunning UIs immediately. Start for free today!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Interactive Periodic Table</title> <style> :root { --alkali-metal: #ff6b6b; --alkaline-earth: #ffa36b; --transition-metal: #ffd56b; --post-transition: #c5ff6b; --metalloid: #6bffa3; --nonmetal: #6bcaff; --halogen: #6b6bff; --noble-gas: #ca6bff; --lanthanide: #ff6bca; --actinide: #ff6b9e; --unknown: #cccccc; --background: #1a1a2e; --text: #e6e6e6; --card-bg: #16213e; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Roboto', sans-serif; } body { background-color: var(--background); color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 700px; max-width: 700px; margin: 0 auto; overflow-x: hidden; padding: 15px; } header { text-align: center; margin-bottom: 20px; width: 100%; } header h1 { font-size: 1.8rem; margin-bottom: 5px; background: linear-gradient(45deg, #ff6b6b, #6bcaff); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: 1px; animation: titleGlow 5s infinite alternate; } @keyframes titleGlow { 0% { text-shadow: 0 0 5px rgba(107, 202, 255, 0.5); } 50% { text-shadow: 0 0 20px rgba(255, 107, 107, 0.5); } 100% { text-shadow: 0 0 5px rgba(107, 202, 255, 0.5); } } header p { font-size: 0.9rem; max-width: 600px; margin: 0 auto; opacity: 0.8; } .controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; width: 100%; } .legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 15px; width: 100%; } .legend-item { display: flex; align-items: center; font-size: 0.7rem; margin-right: 5px; } .legend-color { width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .search-container { position: relative; width: 100%; max-width: 300px; margin-bottom: 10px; } #elementSearch { width: 100%; padding: 8px 12px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.1); color: var(--text); font-size: 0.9rem; outline: none; transition: all 0.3s ease; } #elementSearch:focus { border-color: rgba(107, 202, 255, 0.6); box-shadow: 0 0 10px rgba(107, 202, 255, 0.3); } .clear-search { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.5); cursor: pointer; font-size: 0.9rem; } .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.5); font-size: 0.9rem; } .filter-button { background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--text); padding: 5px 10px; border-radius: 15px; cursor: pointer; font-size: 0.75rem; transition: all 0.3s ease; } .filter-button:hover { background-color: rgba(255, 255, 255, 0.2); } .filter-button.active { background-color: rgba(107, 202, 255, 0.3); border-color: rgba(107, 202, 255, 0.6); } .periodic-table { display: grid; grid-template-columns: repeat(18, 1fr); grid-gap: 3px; width: 100%; max-width: 700px; margin: 0 auto; position: relative; overflow-x: auto; } .element { background-color: var(--unknown); aspect-ratio: 1; border-radius: 4px; padding: 3px; cursor: pointer; transition: all 0.3s ease; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); overflow: hidden; user-select: none; } .element::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent); opacity: 0.3; } .element:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); z-index: 10; } .element:hover::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 70%; height: 5px; background: inherit; filter: blur(7px); border-radius: 50%; opacity: 0.7; } .atomic-number { font-size: 0.55rem; position: absolute; top: 2px; left: 3px; opacity: 0.9; } .symbol { font-size: 0.9rem; font-weight: bold; margin-top: 2px; } .name { font-size: 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-align: center; opacity: 0.9; } .atomic-weight { font-size: 0.5rem; opacity: 0.7; margin-top: 1px; } .element-info { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--card-bg); padding: 20px; border-radius: 10px; width: 90%; max-width: 350px; z-index: 1000; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); animation: popIn 0.3s ease-out; } @keyframes popIn { 0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } } .element-info-header { display: flex; align-items: center; margin-bottom: 15px; position: relative; } .element-symbol { font-size: 2.5rem; font-weight: bold; margin-right: 15px; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 8px; } .element-details { flex: 1; } .element-name { font-size: 1.5rem; margin-bottom: 5px; } .element-category { font-size: 0.8rem; opacity: 0.8; margin-bottom: 5px; } .element-info-close { position: absolute; top: -10px; right: -10px; background-color: rgba(255, 107, 107, 0.8); color: white; border: none; width: 25px; height: 25px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.8rem; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); } .element-properties { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .property { font-size: 0.85rem; margin-bottom: 5px; } .property-label { font-weight: bold; display: block; font-size: 0.7rem; opacity: 0.7; margin-bottom: 2px; } .overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 999; animation: fadeIn 0.2s ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .element.alkali-metal { background-color: var(--alkali-metal); } .element.alkaline-earth { background-color: var(--alkaline-earth); } .element.transition-metal { background-color: var(--transition-metal); } .element.post-transition { background-color: var(--post-transition); } .element.metalloid { background-color: var(--metalloid); } .element.nonmetal { background-color: var(--nonmetal); } .element.halogen { background-color: var(--halogen); } .element.noble-gas { background-color: var(--noble-gas); } .element.lanthanide { background-color: var(--lanthanide); } .element.actinide { background-color: var(--actinide); } .element.highlighted { animation: pulse 1.5s infinite; z-index: 5; } .element.dimmed { opacity: 0.3; filter: grayscale(50%); } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } .element-placeholder { visibility: hidden; } .section-indicator { grid-column: span 10; text-align: center; margin-top: 10px; margin-bottom: 5px; font-size: 0.7rem; font-weight: bold; opacity: 0.7; letter-spacing: 1px; } footer { margin-top: 15px; text-align: center; font-size: 0.7rem; opacity: 0.7; width: 100%; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); } .custom-tooltip { position: absolute; background-color: var(--card-bg); color: var(--text); padding: 8px 12px; border-radius: 5px; font-size: 0.8rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); pointer-events: none; z-index: 1000; opacity: 0; transition: opacity 0.2s ease; max-width: 200px; white-space: nowrap; } .custom-tooltip.visible { opacity: 1; } @media (max-width: 700px) { .periodic-table { grid-gap: 2px; } .element { padding: 2px; } .symbol { font-size: 0.7rem; } .name, .atomic-weight { font-size: 0.45rem; } .atomic-number { font-size: 0.45rem; } header h1 { font-size: 1.5rem; } header p { font-size: 0.8rem; } } @media (max-width: 500px) { .periodic-table { transform: scale(0.9); transform-origin: top center; } .legend { font-size: 0.6rem; } header p { display: none; } } /* Scroll styles */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: rgba(107, 202, 255, 0.5); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(107, 202, 255, 0.7); } </style> </head> <body> <header> <h1>Elemental Explorer</h1> <p>Discover the fascinating world of chemical elements through our interactive periodic table. Hover over elements to preview key facts or click for comprehensive information.</p> </header> <div class="search-container"> <input type="text" id="elementSearch" placeholder="Search elements by name, symbol, or number"> <span class="clear-search" id="clearSearch">×</span> </div> <div class="controls"> <button class="filter-button active" data-filter="all">All Elements</button> <button class="filter-button" data-filter="metals">Metals</button> <button class="filter-button" data-filter="nonmetals">Nonmetals</button> <button class="filter-button" data-filter="transition">Transition Metals</button> </div> <div class="legend"> <div class="legend-item"> <div class="legend-color" style="background-color: var(--alkali-metal);"></div> <span>Alkali Metals</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--alkaline-earth);"></div> <span>Alkaline Earth</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--transition-metal);"></div> <span>Transition Metals</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--post-transition);"></div> <span>Post-Transition</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--metalloid);"></div> <span>Metalloids</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--nonmetal);"></div> <span>Nonmetals</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--halogen);"></div> <span>Halogens</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--noble-gas);"></div> <span>Noble Gases</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--lanthanide);"></div> <span>Lanthanides</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--actinide);"></div> <span>Actinides</span> </div> </div> <div class="periodic-table" id="periodicTable"> <!-- Elements will be dynamically inserted here --> </div> <div class="overlay" id="overlay"></div> <div class="element-info" id="elementInfo"> <div class="element-info-header"> <div class="element-symbol" id="infoSymbol">H</div> <div class="element-details"> <div class="element-name" id="infoName">Hydrogen</div> <div class="element-category" id="infoCategory">Nonmetal</div> </div> <button class="element-info-close" id="closeInfo">×</button> </div> <div class="element-properties" id="elementProperties"> <!-- Properties will be dynamically inserted here --> </div> </div> <div class="custom-tooltip" id="customTooltip"></div> <footer> <p>© 2023 Elemental Explorer - Interactive Periodic Table for Chemistry Education</p> </footer> <script> document.addEventListener('DOMContentLoaded', function() { const periodicTable = document.getElementById('periodicTable'); const elementInfo = document.getElementById('elementInfo'); const overlay = document.getElementById('overlay'); const closeInfo = document.getElementById('closeInfo'); const infoSymbol = document.getElementById('infoSymbol'); const infoName = document.getElementById('infoName'); const infoCategory = document.getElementById('infoCategory'); const elementProperties = document.getElementById('elementProperties'); const elementSearch = document.getElementById('elementSearch'); const clearSearch = document.getElementById('clearSearch'); const filterButtons = document.querySelectorAll('.filter-button'); const customTooltip = document.getElementById('customTooltip'); // Element data const elements = [ { atomicNumber: 1, symbol: 'H', name: 'Hydrogen', category: 'nonmetal', weight: '1.008', row: 1, col: 1, electronConfig: '1s¹', density: '0.00009 g/cm³', meltingPoint: '-259.16°C', discoveredBy: 'Henry Cavendish (1766)', description: 'The lightest and most abundant chemical element in the universe. Essential for water formation and many organic compounds.' }, { atomicNumber: 2, symbol: 'He', name: 'Helium', category: 'noble-gas', weight: '4.0026', row: 1, col: 18, electronConfig: '1s²', density: '0.00018 g/cm³', meltingPoint: '-272.2°C (25 atm)', discoveredBy: 'Pierre Janssen, Norman Lockyer (1868)', description: 'An inert gas that is the second most abundant element in the universe. Used in balloons, cryogenics, and as a cooling medium.' }, { atomicNumber: 3, symbol: 'Li', name: 'Lithium', category: 'alkali-metal', weight: '6.94', row: 2, col: 1, electronConfig: '[He]2s¹', density: '0.534 g/cm³', meltingPoint: '180.5°C', discoveredBy: 'Johan Arfwedson (1817)', description: 'Soft, silvery-white alkali metal. Used in rechargeable batteries, ceramics, and pharmaceuticals for treating bipolar disorder.' }, { atomicNumber: 4, symbol: 'Be', name: 'Beryllium', category: 'alkaline-earth', weight: '9.0122', row: 2, col: 2, electronConfig: '[He]2s²', density: '1.85 g/cm³', meltingPoint: '1287°C', discoveredBy: 'Louis-Nicolas Vauquelin (1798)', description: 'Steel-gray, strong, lightweight metal used in aerospace alloys, X-ray equipment, and nuclear reactors. Highly toxic if inhaled.' }, { atomicNumber: 5, symbol: 'B', name: 'Boron', category: 'metalloid', weight: '10.81', row: 2, col: 13, electronConfig: '[He]2s²2p¹', density: '2.34 g/cm³', meltingPoint: '2076°C', discoveredBy: 'Joseph Louis Gay-Lussac, Louis Jacques Thénard (1808)', description: 'Black-brown metalloid essential to plant growth. Used in detergents, glass, ceramics, and as neutron absorber in nuclear reactors.' }, { atomicNumber: 6, symbol: 'C', name: 'Carbon', category: 'nonmetal', weight: '12.011', row: 2, col: 14, electronConfig: '[He]2s²2p²', density: '2.27 g/cm³ (graphite)', meltingPoint: '3550°C (graphite)', discoveredBy: 'Known since ancient times', description: 'Basis of organic chemistry and life. Exists in multiple forms (allotropes) including diamond, graphite, and fullerenes.' }, { atomicNumber: 7, symbol: 'N', name: 'Nitrogen', category: 'nonmetal', weight: '14.007', row: 2, col: 15, electronConfig: '[He]2s²2p³', density: '0.00125 g/cm³', meltingPoint: '-210.1°C', discoveredBy: 'Daniel Rutherford (1772)', description: 'Colorless, odorless gas that forms 78% of Earth's atmosphere. Essential component of proteins and DNA in all living organisms.' }, { atomicNumber: 8, symbol: 'O', name: 'Oxygen', category: 'nonmetal', weight: '15.999', row: 2, col: 16, electronConfig: '[He]2s²2p⁴', density: '0.00143 g/cm³', meltingPoint: '-218.8°C', discoveredBy: 'Carl Wilhelm Scheele, Joseph Priestley (1770s)', description: 'Reactive nonmetal essential for respiration in most living organisms. Makes up 21% of Earth's atmosphere and most of its crust.' }, { atomicNumber: 9, symbol: 'F', name: 'Fluorine', category: 'halogen', weight: '18.998', row: 2, col: 17, electronConfig: '[He]2s²2p⁵', density: '0.00170 g/cm³', meltingPoint: '-219.6°C', discoveredBy: 'Henri Moissan (1886)', description: 'Pale yellow, highly reactive gas. Most electronegative element; forms strong bonds with carbon. Used in toothpaste and refrigerants.' }, { atomicNumber: 10, symbol: 'Ne', name: 'Neon', category: 'noble-gas', weight: '20.180', row: 2, col: 18, electronConfig: '[He]2s²2p⁶', density: '0.0009 g/cm³', meltingPoint: '-248.6°C', discoveredBy: 'William Ramsay, Morris Travers (1898)', description: 'Colorless, inert gas used in illuminated signs. Produces distinctive orange-red glow when used in electric discharge tubes.' }, { atomicNumber: 11, symbol: 'Na', name: 'Sodium', category: 'alkali-metal', weight: '22.990', row: 3, col: 1, electronConfig: '[Ne]3s¹', density: '0.97 g/cm³', meltingPoint: '97.8°C', discoveredBy: 'Humphry Davy (1807)', description: 'Soft, silvery-white, highly reactive metal. Essential for nerve function in animals. Table salt (NaCl) is its most common compound.' }, { atomicNumber: 12, symbol: 'Mg', name: 'Magnesium', category: 'alkaline-earth', weight: '24.305', row: 3, col: 2, electronConfig: '[Ne]3s²', density: '1.74 g/cm³', meltingPoint: '650°C', discoveredBy: 'Joseph Black (1755), Humphry Davy (1808)', description: 'Lightweight, silvery-white metal. Central atom in chlorophyll. Used in alloys, flashbulbs, and fireworks for bright white light.' }, { atomicNumber: 13, symbol: 'Al', name: 'Aluminum', category: 'post-transition', weight: '26.982', row: 3, col: 13, electronConfig: '[Ne]3s²3p¹', density: '2.70 g/cm³', meltingPoint: '660.3°C', discoveredBy: 'Hans Christian Ørsted (1825)', description: 'Lightweight, silvery-white metal. Third most abundant element in Earth's crust. Used in packaging, construction, and transportation.' }, { atomicNumber: 14, symbol: 'Si', name: 'Silicon', category: 'metalloid', weight: '28.085', row: 3, col: 14, electronConfig: '[Ne]3s²3p²', density: '2.33 g/cm³', meltingPoint: '1414°C', discoveredBy: 'Jöns Jacob Berzelius (1824)', description: 'Second most abundant element in Earth's crust. Crucial semiconductor material for electronics, solar cells, and glass production.' }, { atomicNumber: 15, symbol: 'P', name: 'Phosphorus', category: 'nonmetal', weight: '30.974', row: 3, col: 15, electronConfig: '[Ne]3s²3p³', density: '1.82 g/cm³ (white)', meltingPoint: '44.1°C (white)', discoveredBy: 'Hennig Brand (1669)', description: 'Essential for DNA, ATP energy transfer, and bone formation. White phosphorus glows in the dark and is highly reactive.' }, { atomicNumber: 16, symbol: 'S', name: 'Sulfur', category: 'nonmetal', weight: '32.06', row: 3, col: 16, electronConfig: '[Ne]3s²3p⁴', density: '2.07 g/cm³', meltingPoint: '115.2°C', discoveredBy: 'Known since ancient times', description: 'Yellow crystalline solid used in gunpowder, fertilizers, and sulfuric acid production. Essential for proteins and vitamins.' }, { atomicNumber: 17, symbol: 'Cl', name: 'Chlorine', category: 'halogen', weight: '35.45', row: 3, col: 17, electronConfig: '[Ne]3s²3p⁵', density: '0.0033 g/cm³', meltingPoint: '-101.5°C', discoveredBy: 'Carl Wilhelm Scheele (1774)', description: 'Yellow-green toxic gas used for water purification and in PVC production. Essential nutrient for plants and animals.' }, { atomicNumber: 18, symbol: 'Ar', name: 'Argon', category: 'noble-gas', weight: '39.948', row: 3, col: 18, electronConfig: '[Ne]3s²3p⁶', density: '0.0018 g/cm³', meltingPoint: '-189.4°C', discoveredBy: 'Lord Rayleigh, William Ramsay (1894)', description: 'Third most abundant gas in Earth's atmosphere. Used in lighting, welding, and to create inert atmospheres in scientific research.' }, { atomicNumber: 19, symbol: 'K', name: 'Potassium', category: 'alkali-metal', weight: '39.098', row: 4, col: 1, electronConfig: '[Ar]4s¹', density: '0.89 g/cm³', meltingPoint: '63.5°C', discoveredBy: 'Humphry Davy (1807)', description: 'Soft, silvery-white metal that oxidizes rapidly in air. Essential for nerve and muscle function in the human body.' }, { atomicNumber: 20, symbol: 'Ca', name: 'Calcium', category: 'alkaline-earth', weight: '40.078', row: 4, col: 2, electronConfig: '[Ar]4s²', density: '1.54 g/cm³', meltingPoint: '842°C', discoveredBy: 'Humphry Davy (1808)', description: 'Fifth most abundant element in Earth's crust. Essential for bone and teeth formation and many cellular processes.' }, { atomicNumber: 21, symbol: 'Sc', name: 'Scandium', category: 'transition-metal', weight: '44.956', row: 4, col: 3, electronConfig: '[Ar]4s²3d¹', density: '2.99 g/cm³', meltingPoint: '1541°C', discoveredBy: 'Lars Fredrik Nilson (1879)', description: 'Silvery-white metal used in aerospace alloys and sports equipment. More common in the sun and certain stars than on Earth.' }, { atomicNumber: 22, symbol: 'Ti', name: 'Titanium', category: 'transition-metal', weight: '47.867', row: 4, col: 4, electronConfig: '[Ar]4s²3d²', density: '4.5 g/cm³', meltingPoint: '1668°C', discoveredBy: 'William Gregor (1791)', description: 'Strong, lightweight, corrosion-resistant metal used in aerospace, medical implants, and high-end bicycles and watches.' }, { atomicNumber: 23, symbol: 'V', name: 'Vanadium', category: 'transition-metal', weight: '50.942', row: 4, col: 5, electronConfig: '[Ar]4s²3d³', density: '6.0 g/cm³', meltingPoint: '1910°C', discoveredBy: 'Andrés Manuel del Río (1801)', description: 'Rare element used to strengthen steel alloys. Essential trace element for some organisms, including sea squirts.' }, { atomicNumber: 24, symbol: 'Cr', name: 'Chromium', category: 'transition-metal', weight: '51.996', row: 4, col: 6, electronConfig: '[Ar]4s¹3d⁵', density: '7.15 g/cm³', meltingPoint: '1907°C', discoveredBy: 'Louis Nicolas Vauquelin (1797)', description: 'Steely-gray, lustrous metal used for plating to prevent corrosion. Gives ruby its red color and is essential for glucose metabolism.' }, { atomicNumber: 25, symbol: 'Mn', name: 'Manganese', category: 'transition-metal', weight: '54.938', row: 4, col: 7, electronConfig: '[Ar]4s²3d⁵', density: '7.44 g/cm³', meltingPoint: '1246°C', discoveredBy: 'Johan Gottlieb Gahn (1774)', description: 'Hard, brittle metal essential for photosynthesis and bone formation. Used in steel production and as a powerful oxidizing agent.' }, { atomicNumber: 26, symbol: 'Fe', name: 'Iron', category: 'transition-metal', weight: '55.845', row: 4, col: 8, electronConfig: '[Ar]4s²3d⁶', density: '7.87 g/cm³', meltingPoint: '1538°C', discoveredBy: 'Known since ancient times', description: 'Most common element on Earth by mass. Essential for hemoglobin in blood. Widely used in steel and construction.' }, { atomicNumber: 27, symbol: 'Co', name: 'Cobalt', category: 'transition-metal', weight: '58.933', row: 4, col: 9, electronConfig: '[Ar]4s²3d⁷', density: '8.86 g/cm³', meltingPoint: '1495°C', discoveredBy: 'Georg Brandt (1735)', description: 'Ferromagnetic metal used in magnets, batteries, and alloys. Essential for vitamin B12 and produces brilliant blue pigments.' }, { atomicNumber: 28, symbol: 'Ni', name: 'Nickel', category: 'transition-metal', weight: '58.693', row: 4, col: 10, electronConfig: '[Ar]4s²3d⁸', density: '8.91 g/cm³', meltingPoint: '1455°C', discoveredBy: 'Axel Fredrik Cronstedt (1751)', description: 'Silvery-white metal used in stainless steel and rechargeable batteries. Forms the core of the Earth along with iron.' }, { atomicNumber: 29, symbol: 'Cu', name: 'Copper', category: 'transition-metal', weight: '63.546', row: 4, col: 11, electronConfig: '[Ar]4s¹3d¹⁰', density: '8.96 g/cm³', meltingPoint: '1085°C', discoveredBy: 'Known since ancient times', description: 'Reddish metal with excellent electrical conductivity. One of the first metals used by humans, essential for all living organisms.' }, { atomicNumber: 30, symbol: 'Zn', name: 'Zinc', category: 'transition-metal', weight: '65.38', row: 4, col: 12, electronConfig: '[Ar]4s²3d¹⁰', density: '7.14 g/cm³', meltingPoint: '419.5°C', discoveredBy: 'Known since ancient times', description: 'Bluish-white metal used for galvanizing iron and in batteries. Essential for immune function, wound healing, and DNA synthesis.' }, { atomicNumber: 31, symbol: 'Ga', name: 'Gallium', category: 'post-transition', weight: '69.723', row: 4, col: 13, electronConfig: '[Ar]4s²3d¹⁰4p¹', density: '5.91 g/cm³', meltingPoint: '29.8°C', discoveredBy: 'Lecoq de Boisbaudran (1875)', description: 'Soft, silvery metal that can melt in your hand (29.8°C). Used in semiconductors, LEDs, and high-temperature thermometers.' }, { atomicNumber: 32, symbol: 'Ge', name: 'Germanium', category: 'metalloid', weight: '72.630', row: 4, col: 14, electronConfig: '[Ar]4s²3d¹⁰4p²', density: '5.32 g/cm³', meltingPoint: '938.3°C', discoveredBy: 'Clemens Winkler (1886)', description: 'Grayish-white metalloid and semiconductor used in fiber optics, infrared optics, and polymerization catalysts.' }, { atomicNumber: 33, symbol: 'As', name: 'Arsenic', category: 'metalloid', weight: '74.922', row: 4, col: 15, electronConfig: '[Ar]4s²3d¹⁰4p³', density: '5.73 g/cm³', meltingPoint: '816°C (at 28 atm)', discoveredBy: 'Known since ancient times', description: '
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Chemistry Laboratory Dashboard</title> <style> :root { --primary-color: #2c3e50; --secondary-color: #ecf0f1; --accent-color: #3498db; --highlight-color: #2980b9; --metal-color: #7f8c8d; --nonmetal-color: #16a085; --noble-gas-color: #9b59b6; --alkali-metal-color: #e74c3c; --alkaline-earth-color: #e67e22; --transition-metal-color: #f1c40f; --metalloid-color: #27ae60; --halogen-color: #1abc9c; --lanthanide-color: #d35400; --actinide-color: #c0392b; --font-main: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font-main); } body { background-color: var(--secondary-color); color: var(--primary-color); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100vh; padding: 15px; overflow-x: hidden; } .dashboard-container { width: 100%; max-width: 700px; display: flex; flex-direction: column; gap: 20px; } .dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .dashboard-title { font-size: 1.5rem; font-weight: 500; letter-spacing: 0.5px; } .lab-info { display: flex; align-items: center; gap: 15px; font-size: 0.875rem; } .lab-status { padding: 4px 10px; border-radius: 20px; background-color: var(--accent-color); color: white; font-weight: 500; display: flex; align-items: center; gap: 5px; } .status-indicator { height: 8px; width: 8px; border-radius: 50%; background-color: #2ecc71; display: inline-block; } .search-bar { display: flex; width: 100%; margin-bottom: 15px; } .search-bar input { flex: 1; padding: 10px 15px; border: 2px solid var(--primary-color); border-radius: 4px; font-size: 0.95rem; background-color: white; transition: all 0.3s ease; } .search-bar input:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.3); } .category-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 15px; } .category-btn { padding: 6px 12px; background-color: var(--primary-color); color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 0.85rem; transition: all 0.2s ease; opacity: 0.7; } .category-btn.active { opacity: 1; } .category-btn:hover { opacity: 1; } .periodic-table { display: grid; grid-template-columns: repeat(18, 1fr); gap: 2px; width: 100%; } .element { aspect-ratio: 1/1; background-color: var(--primary-color); color: white; border-radius: 2px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2px; cursor: pointer; transition: all 0.2s ease; position: relative; overflow: hidden; } .element:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 5; } .element:before { content: ''; position: absolute; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(255,255,255,0.1), transparent); top: 0; left: 0; opacity: 0; transition: opacity 0.3s ease; } .element:hover:before { opacity: 1; } .element.alkali-metal { background-color: var(--alkali-metal-color); } .element.alkaline-earth { background-color: var(--alkaline-earth-color); } .element.transition-metal { background-color: var(--transition-metal-color); color: var(--primary-color); } .element.metalloid { background-color: var(--metalloid-color); } .element.nonmetal { background-color: var(--nonmetal-color); } .element.noble-gas { background-color: var(--noble-gas-color); } .element.metal { background-color: var(--metal-color); } .element.halogen { background-color: var(--halogen-color); } .element.lanthanide { background-color: var(--lanthanide-color); } .element.actinide { background-color: var(--actinide-color); } .element-number { font-size: 0.6rem; position: absolute; top: 2px; left: 3px; opacity: 0.8; } .element-symbol { font-size: 0.85rem; font-weight: 700; letter-spacing: -0.5px; } .element-name { font-size: 0.5rem; line-height: 1; opacity: 0.9; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; padding: 0 2px; } .element-mass { font-size: 0.5rem; opacity: 0.7; } .placeholder { grid-column: span 1; visibility: hidden; } .element-detail { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); background-color: white; border-radius: 8px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); width: 90%; max-width: 500px; padding: 20px; z-index: 100; opacity: 0; visibility: hidden; transition: all 0.3s ease; overflow: hidden; } .element-detail.active { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } .detail-header { display: flex; align-items: center; margin-bottom: 15px; } .detail-symbol { font-size: 3rem; font-weight: 700; margin-right: 15px; padding: 10px 15px; border-radius: 8px; color: white; } .detail-info h2 { font-size: 1.5rem; margin-bottom: 5px; } .detail-info p { font-size: 0.9rem; opacity: 0.8; } .detail-properties { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 20px; } .property { padding: 10px; background-color: var(--secondary-color); border-radius: 6px; } .property-name { font-size: 0.75rem; opacity: 0.7; margin-bottom: 5px; } .property-value { font-size: 1rem; font-weight: 500; } .close-detail { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--primary-color); opacity: 0.7; transition: opacity 0.2s ease; } .close-detail:hover { opacity: 1; } .backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 90; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .backdrop.active { opacity: 1; visibility: visible; } .category-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; margin-bottom: 5px; } .legend-item { display: flex; align-items: center; font-size: 0.7rem; margin-right: 5px; } .legend-color { width: 12px; height: 12px; border-radius: 2px; margin-right: 5px; } .data-feed { margin-top: 15px; background-color: white; padding: 10px 15px; border-radius: 6px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } .data-feed-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 0.9rem; font-weight: 500; } .data-feed-content { font-size: 0.8rem; line-height: 1.5; } .data-item { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,0.05); } .data-time { opacity: 0.6; font-size: 0.75rem; } @media (max-width: 600px) { .periodic-table { gap: 1px; } .element-symbol { font-size: 0.7rem; } .element-number, .element-name, .element-mass { font-size: 0.45rem; } .detail-properties { grid-template-columns: 1fr; } } @media (max-width: 400px) { .element-name { display: none; } } /* Animation for the dashboard */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .dashboard-container { animation: fadeIn 0.5s ease-out forwards; } .notification-dot { position: absolute; top: 2px; right: 2px; height: 6px; width: 6px; border-radius: 50%; background-color: #e74c3c; opacity: 0; transition: opacity 0.3s ease; } .element.in-use .notification-dot { opacity: 1; } /* Lab usage indicators */ .lab-usage { display: flex; align-items: center; gap: 15px; margin-top: 10px; font-size: 0.8rem; } .usage-item { display: flex; align-items: center; gap: 5px; } .usage-indicator { width: 8px; height: 8px; border-radius: 50%; } .current-experiments { margin-top: 10px; font-size: 0.75rem; color: var(--primary-color); opacity: 0.8; } </style> </head> <body> <div class="dashboard-container"> <div class="dashboard-header"> <div class="dashboard-title">Chemistry Lab Dashboard</div> <div class="lab-info"> <div class="lab-status"> <span class="status-indicator"></span> Lab Active </div> <div class="current-time">10:45 AM</div> </div> </div> <div class="search-bar"> <input type="text" id="element-search" placeholder="Search elements by name, symbol or atomic number..."> </div> <div class="category-filters"> <button class="category-btn active" data-category="all">All</button> <button class="category-btn" data-category="metal">Metals</button> <button class="category-btn" data-category="nonmetal">Nonmetals</button> <button class="category-btn" data-category="in-use">In Use</button> </div> <div class="periodic-table" id="periodic-table"> <!-- Filled dynamically with JavaScript --> </div> <div class="category-legend"> <div class="legend-item"> <div class="legend-color" style="background-color: var(--alkali-metal-color);"></div> <span>Alkali Metals</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--alkaline-earth-color);"></div> <span>Alkaline Earth Metals</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--transition-metal-color);"></div> <span>Transition Metals</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--metalloid-color);"></div> <span>Metalloids</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--nonmetal-color);"></div> <span>Nonmetals</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--halogen-color);"></div> <span>Halogens</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--noble-gas-color);"></div> <span>Noble Gases</span> </div> </div> <div class="lab-usage"> <div class="usage-item"> <div class="usage-indicator" style="background-color: #e74c3c;"></div> <span>Elements in use</span> </div> <div class="usage-item"> <div class="usage-indicator" style="background-color: #2ecc71;"></div> <span>Available</span> </div> </div> <div class="current-experiments"> <p>Current experiments: Titration (NaOH), Spectroscopy (Cu, Ag), Thermodynamics (O, N)</p> </div> <div class="data-feed"> <div class="data-feed-header"> <span>Lab Activity Feed</span> <span>Today</span> </div> <div class="data-feed-content"> <div class="data-item"> <span>Sodium (Na) stock level decreased to 80%</span> <span class="data-time">10:32 AM</span> </div> <div class="data-item"> <span>Temperature increased to 24.2°C in Lab 3</span> <span class="data-time">10:15 AM</span> </div> <div class="data-item"> <span>Silver (Ag) samples prepared for spectroscopy</span> <span class="data-time">09:45 AM</span> </div> <div class="data-item"> <span>Lab equipment calibration completed</span> <span class="data-time">09:00 AM</span> </div> </div> </div> </div> <div class="element-detail" id="element-detail"> <button class="close-detail" id="close-detail">×</button> <div class="detail-header"> <div class="detail-symbol" id="detail-symbol">H</div> <div class="detail-info"> <h2 id="detail-name">Hydrogen</h2> <p id="detail-number-weight">Atomic number: 1 | Atomic weight: 1.008</p> </div> </div> <div class="detail-properties"> <div class="property"> <div class="property-name">Electron Configuration</div> <div class="property-value" id="detail-electron">1s¹</div> </div> <div class="property"> <div class="property-name">Electronegativity</div> <div class="property-value" id="detail-electronegativity">2.20</div> </div> <div class="property"> <div class="property-name">Density</div> <div class="property-value" id="detail-density">0.0000899 g/cm³</div> </div> <div class="property"> <div class="property-name">Melting Point</div> <div class="property-value" id="detail-melting">-259.1 °C</div> </div> <div class="property"> <div class="property-name">Boiling Point</div> <div class="property-value" id="detail-boiling">-252.9 °C</div> </div> <div class="property"> <div class="property-name">Lab Status</div> <div class="property-value" id="detail-status">Available (98% stock)</div> </div> </div> </div> <div class="backdrop" id="backdrop"></div> <script> const elements = [ { number: 1, symbol: 'H', name: 'Hydrogen', mass: 1.008, category: 'nonmetal', electron: '1s¹', electronegativity: '2.20', density: '0.0000899 g/cm³', melting: '-259.1 °C', boiling: '-252.9 °C', status: 'Available (98% stock)' }, { number: 2, symbol: 'He', name: 'Helium', mass: 4.0026, category: 'noble-gas', electron: '1s²', electronegativity: 'N/A', density: '0.0001785 g/cm³', melting: '-272.2 °C', boiling: '-268.9 °C', status: 'Limited (28% stock)' }, { number: 3, symbol: 'Li', name: 'Lithium', mass: 6.94, category: 'alkali-metal', electron: '[He] 2s¹', electronegativity: '0.98', density: '0.534 g/cm³', melting: '180.5 °C', boiling: '1342 °C', status: 'Available (85% stock)' }, { number: 4, symbol: 'Be', name: 'Beryllium', mass: 9.0122, category: 'alkaline-earth', electron: '[He] 2s²', electronegativity: '1.57', density: '1.85 g/cm³', melting: '1287 °C', boiling: '2470 °C', status: 'Limited (15% stock)' }, { number: 5, symbol: 'B', name: 'Boron', mass: 10.81, category: 'metalloid', electron: '[He] 2s² 2p¹', electronegativity: '2.04', density: '2.34 g/cm³', melting: '2076 °C', boiling: '3927 °C', status: 'Available (65% stock)' }, { number: 6, symbol: 'C', name: 'Carbon', mass: 12.011, category: 'nonmetal', electron: '[He] 2s² 2p²', electronegativity: '2.55', density: '2.267 g/cm³', melting: '3550 °C', boiling: '4827 °C', status: 'Available (90% stock)' }, { number: 7, symbol: 'N', name: 'Nitrogen', mass: 14.007, category: 'nonmetal', electron: '[He] 2s² 2p³', electronegativity: '3.04', density: '0.001251 g/cm³', melting: '-210.1 °C', boiling: '-195.8 °C', status: 'In use (Thermodynamics lab)' }, { number: 8, symbol: 'O', name: 'Oxygen', mass: 15.999, category: 'nonmetal', electron: '[He] 2s² 2p⁴', electronegativity: '3.44', density: '0.001429 g/cm³', melting: '-218.3 °C', boiling: '-183.0 °C', status: 'In use (Thermodynamics lab)' }, { number: 9, symbol: 'F', name: 'Fluorine', mass: 18.998, category: 'halogen', electron: '[He] 2s² 2p⁵', electronegativity: '3.98', density: '0.001696 g/cm³', melting: '-220.0 °C', boiling: '-188.1 °C', status: 'Available (55% stock)' }, { number: 10, symbol: 'Ne', name: 'Neon', mass: 20.180, category: 'noble-gas', electron: '[He] 2s² 2p⁶', electronegativity: 'N/A', density: '0.0008999 g/cm³', melting: '-248.6 °C', boiling: '-246.1 °C', status: 'Available (72% stock)' }, { number: 11, symbol: 'Na', name: 'Sodium', mass: 22.990, category: 'alkali-metal', electron: '[Ne] 3s¹', electronegativity: '0.93', density: '0.971 g/cm³', melting: '97.72 °C', boiling: '883 °C', status: 'In use (Titration lab)' }, { number: 12, symbol: 'Mg', name: 'Magnesium', mass: 24.305, category: 'alkaline-earth', electron: '[Ne] 3s²', electronegativity: '1.31', density: '1.738 g/cm³', melting: '650 °C', boiling: '1090 °C', status: 'Available (88% stock)' }, { number: 13, symbol: 'Al', name: 'Aluminum', mass: 26.982, category: 'metal', electron: '[Ne] 3s² 3p¹', electronegativity: '1.61', density: '2.698 g/cm³', melting: '660.3 °C', boiling: '2519 °C', status: 'Available (95% stock)' }, { number: 14, symbol: 'Si', name: 'Silicon', mass: 28.085, category: 'metalloid', electron: '[Ne] 3s² 3p²', electronegativity: '1.90', density: '2.3296 g/cm³', melting: '1414 °C', boiling: '3265 °C', status: 'Available (78% stock)' }, { number: 15, symbol: 'P', name: 'Phosphorus', mass: 30.974, category: 'nonmetal', electron: '[Ne] 3s² 3p³', electronegativity: '2.19', density: '1.82 g/cm³', melting: '44.1 °C', boiling: '280.5 °C', status: 'Available (63% stock)' }, { number: 16, symbol: 'S', name: 'Sulfur', mass: 32.06, category: 'nonmetal', electron: '[Ne] 3s² 3p⁴', electronegativity: '2.58', density: '2.067 g/cm³', melting: '115.2 °C', boiling: '444.6 °C', status: 'Available (85% stock)' }, { number: 17, symbol: 'Cl', name: 'Chlorine', mass: 35.45, category: 'halogen', electron: '[Ne] 3s² 3p⁵', electronegativity: '3.16', density: '0.003214 g/cm³', melting: '-101.5 °C', boiling: '-34.04 °C', status: 'Available (70% stock)' }, { number: 18, symbol: 'Ar', name: 'Argon', mass: 39.948, category: 'noble-gas', electron: '[Ne] 3s² 3p⁶', electronegativity: 'N/A', density: '0.0017837 g/cm³', melting: '-189.3 °C', boiling: '-185.8 °C', status: 'Available (92% stock)' }, { number: 19, symbol: 'K', name: 'Potassium', mass: 39.098, category: 'alkali-metal', electron: '[Ar] 4s¹', electronegativity: '0.82', density: '0.862 g/cm³', melting: '63.38 °C', boiling: '759 °C', status: 'Available (75% stock)' }, { number: 20, symbol: 'Ca', name: 'Calcium', mass: 40.078, category: 'alkaline-earth', electron: '[Ar] 4s²', electronegativity: '1.00', density: '1.54 g/cm³', melting: '842 °C', boiling: '1484 °C', status: 'Available (80% stock)' }, { number: 21, symbol: 'Sc', name: 'Scandium', mass: 44.956, category: 'transition-metal', electron: '[Ar] 3d¹ 4s²', electronegativity: '1.36', density: '2.989 g/cm³', melting: '1541 °C', boiling: '2836 °C', status: 'Limited (25% stock)' }, { number: 22, symbol: 'Ti', name: 'Titanium', mass: 47.867, category: 'transition-metal', electron: '[Ar] 3d² 4s²', electronegativity: '1.54', density: '4.54 g/cm³', melting: '1668 °C', boiling: '3287 °C', status: 'Available (68% stock)' }, { number: 23, symbol: 'V', name: 'Vanadium', mass: 50.942, category: 'transition-metal', electron: '[Ar] 3d³ 4s²', electronegativity: '1.63', density: '6.11 g/cm³', melting: '1910 °C', boiling: '3407 °C', status: 'Limited (30% stock)' }, { number: 24, symbol: 'Cr', name: 'Chromium', mass: 51.996, category: 'transition-metal', electron: '[Ar] 3d⁵ 4s¹', electronegativity: '1.66', density: '7.15 g/cm³', melting: '1907 °C', boiling: '2671 °C', status: 'Available (60% stock)' }, { number: 25, symbol: 'Mn', name: 'Manganese', mass: 54.938, category: 'transition-metal', electron: '[Ar] 3d⁵ 4s²', electronegativity: '1.55', density: '7.44 g/cm³', melting: '1246 °C', boiling: '2061 °C', status: 'Available (55% stock)' }, { number: 26, symbol: 'Fe', name: 'Iron', mass: 55.845, category: 'transition-metal', electron: '[Ar] 3d⁶ 4s²', electronegativity: '1.83', density: '7.874 g/cm³', melting: '1538 °C', boiling: '2862 °C', status: 'Available (90% stock)' }, { number: 27, symbol: 'Co', name: 'Cobalt', mass: 58.933, category: 'transition-metal', electron: '[Ar] 3d⁷ 4s²', electronegativity: '1.88', density: '8.86 g/cm³', melting: '1495 °C', boiling: '2927 °C', status: 'Available (65% stock)' }, { number: 28, symbol: 'Ni', name: 'Nickel', mass: 58.693, category: 'transition-metal', electron: '[Ar] 3d⁸ 4s²', electronegativity: '1.91', density: '8.912 g/cm³', melting: '1455 °C', boiling: '2913 °C', status: 'Available (72% stock)' }, { number: 29, symbol: 'Cu', name: 'Copper', mass: 63.546, category: 'transition-metal', electron: '[Ar] 3d¹⁰ 4s¹', electronegativity: '1.90', density: '8.96 g/cm³', melting: '1084.6 °C', boiling: '2562 °C', status: 'In use (Spectroscopy lab)' }, { number: 30, symbol: 'Zn', name: 'Zinc', mass: 65.38, category: 'transition-metal', electron: '[Ar] 3d¹⁰ 4s²', electronegativity: '1.65', density: '7.134 g/cm³', melting: '419.5 °C', boiling: '907 °C', status: 'Available (83% stock)' }, { number: 31, symbol: 'Ga', name: 'Gallium', mass: 69.723, category: 'metal', electron: '[Ar] 3d¹⁰ 4s² 4p¹', electronegativity: '1.81', density: '5.907 g/cm³', melting: '29.76 °C', boiling: '2204 °C', status: 'Limited (32% stock)' }, { number: 32, symbol: 'Ge', name: 'Germanium', mass: 72.630, category: 'metalloid', electron: '[Ar] 3d¹⁰ 4s² 4p²', electronegativity: '2.01', density: '5.323 g/cm³', melting: '938.3 °C', boiling: '2833 °C', status: 'Limited (28% stock)' }, { number: 33, symbol: 'As', name: 'Arsenic', mass: 74.922, category: 'metalloid', electron: '[Ar] 3d¹⁰ 4s² 4p³', electronegativity: '2.18', density: '5.776 g/cm³', melting: '817 °C', boiling: '614 °C', status: 'Limited (20% stock)' }, { number: 34, symbol: 'Se', name: 'Selenium', mass: 78.971, category: 'nonmetal', electron: '[Ar] 3d¹⁰ 4s² 4p⁴', electronegativity: '2.55', density: '4.809 g/cm³', melting: '221 °C', boiling: '685 °C', status: 'Available (50% stock)' }, { number: 35, symbol: 'Br', name: 'Bromine', mass: 79.904, category: 'halogen', electron: '[Ar] 3d¹⁰ 4s² 4p⁵', electronegativity: '2.96', density: '3.122 g/cm³', melting: '-7.3 °C', boiling: '58.8 °C', status: 'Available (68% stock)' }, { number: 36, symbol: 'Kr', name: 'Krypton', mass: 83.798, category: 'noble-gas', electron: '[Ar] 3d¹⁰ 4s² 4p⁶', electronegativity: '3.00', density: '0.003733 g/cm³', melting: '-157.4 °C', boiling: '-153.4 °C', status: 'Limited (35% stock)' }, { number: 37, symbol: 'Rb', name: 'Rubidium', mass: 85.468, category: 'alkali-metal', electron: '[Kr] 5s¹', electronegativity: '0.82', density: '1.532 g/cm³', melting: '39.31 °C', boiling: '688 °C', status: 'Limited (25% stock)' }, { number: 38, symbol: 'Sr', name: 'Strontium', mass: 87.62, category: 'alkaline-earth', electron: '[Kr] 5s²', electronegativity: '0.95', density: '2.64 g/cm³', melting: '777 °C', boiling: '1382 °C', status: 'Limited (30% stock)' }, { number: 39, symbol: 'Y', name: 'Yttrium', mass: 88.906, category: 'transition-metal', electron: '[Kr] 4d¹ 5s²', electronegativity: '1.22', density: '4.469 g/cm³', melting: '1526 °C', boiling: '3336 °C', status: 'Limited (20% stock)' }, { number: 40, symbol: 'Zr', name: 'Zirconium', mass: 91.224, category: 'transition-metal', electron: '[Kr] 4d² 5s²', electronegativity: '1.33', density: '6.506 g/cm³', melting: '1855 °C', boiling: '4409 °C', status: 'Limited (15% stock)' }, { number: 41, symbol: 'Nb', name: 'Niobium', mass: 92.906, category: 'transition-metal', electron: '[Kr] 4d⁴ 5s¹', electronegativity: '1.6', density: '8.57 g/cm³', melting: '2477 °C', boiling: '4744 °C', status: 'Limited (10% stock)' }, { number: 42, symbol: 'Mo', name: 'Molybdenum', mass: 95.95, category: 'transition-metal', electron: '[Kr] 4d⁵ 5s¹', electronegativity: '2.16', density: '10.22 g/cm³', melting: '2623 °C', boiling: '4639 °C', status: 'Available (45% stock)' }, { number: 43, symbol: 'Tc', name: 'Technetium', mass: 98, category: 'transition-metal', electron: '[Kr] 4d⁵ 5s²', electronegativity: '1.9', density: '11.5 g/cm³', melting: '2157 °C', boiling: '4265 °C', status: 'Not available' }, { number: 44, symbol: 'Ru', name: 'Ruthenium', mass: 101.07, category: 'transition-metal', electron: '[Kr] 4d⁷ 5s
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PeriodiGo: Mobile Periodic Table</title> <style> :root { --primary: #4a6bff; --secondary: #ff5e7a; --tertiary: #24d6a6; --light: #f5f7ff; --dark: #202639; --alkali: #ff5757; --alkaline-earth: #ffb74d; --transition: #64b5f6; --post-transition: #9575cd; --metalloid: #4db6ac; --nonmetal: #81c784; --halogen: #fff176; --noble-gas: #ff80ab; --lanthanide: #ce93d8; --actinide: #c5cae9; --unknown: #e0e0e0; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--light); color: var(--dark); overflow: hidden; touch-action: manipulation; height: 100vh; width: 100%; } .container { max-width: 700px; height: 700px; margin: 0 auto; padding: 10px; overflow: hidden; position: relative; } header { display: flex; justify-content: space-between; align-items: center; padding: 10px; background-color: var(--primary); color: white; border-radius: 15px; margin-bottom: 10px; box-shadow: 0 4px 12px rgba(74, 107, 255, 0.2); } .logo { font-weight: bold; font-size: 1.5rem; display: flex; align-items: center; } .logo-icon { margin-right: 8px; background: white; color: var(--primary); border-radius: 8px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 18px; } .controls { display: flex; gap: 10px; } .btn { background-color: rgba(255, 255, 255, 0.2); border: none; color: white; border-radius: 8px; padding: 8px 12px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; } .btn:hover, .btn.active { background-color: rgba(255, 255, 255, 0.3); } .btn i { font-size: 18px; } .periodic-table-container { position: relative; overflow: hidden; height: calc(100% - 60px); transform-origin: 0 0; touch-action: none; } .periodic-table { display: grid; grid-template-columns: repeat(18, 50px); grid-template-rows: repeat(10, 50px); gap: 4px; padding: 10px; transform-origin: 0 0; transition: transform 0.3s ease; } .element { border-radius: 10px; padding: 4px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .element:active { transform: scale(0.95); } .element.tapped { animation: pulse 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .element .atomic-number { font-size: 10px; align-self: flex-start; } .element .symbol { font-size: 18px; font-weight: bold; text-align: center; } .element .name { font-size: 8px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .element .mass { font-size: 8px; text-align: center; } .element-details { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); background-color: white; border-radius: 20px; padding: 20px; width: 90%; max-width: 300px; z-index: 100; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .element-details.active { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: all; } .details-header { display: flex; align-items: center; margin-bottom: 15px; } .element-symbol { font-size: 36px; font-weight: bold; margin-right: 15px; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 12px; } .element-info h2 { font-size: 20px; margin-bottom: 4px; } .element-info p { font-size: 14px; color: #666; } .details-body { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; } .property { padding: 8px; border-radius: 8px; background-color: #f5f5f5; } .property-name { font-size: 12px; color: #666; } .property-value { font-size: 14px; font-weight: bold; } .details-close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background-color: #f5f5f5; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; border: none; } .overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 50; } .overlay.active { opacity: 1; pointer-events: all; } .legend { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; position: absolute; bottom: 0; left: 0; right: 0; background-color: rgba(255, 255, 255, 0.9); border-top-left-radius: 15px; border-top-right-radius: 15px; box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1); transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 40; } .legend.active { transform: translateY(0); } .legend-item { display: flex; align-items: center; font-size: 10px; } .legend-color { width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; } .category-selector { position: absolute; top: 15px; right: 15px; z-index: 30; } .category-selector select { padding: 8px 12px; border-radius: 8px; border: 1px solid #ddd; background-color: white; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .ripple { position: absolute; border-radius: 50%; background-color: rgba(255, 255, 255, 0.6); transform: scale(0); animation: ripple 0.6s linear; pointer-events: none; } @keyframes ripple { to { transform: scale(4); opacity: 0; } } /* Categories styles */ .alkali { background-color: var(--alkali); } .alkaline-earth { background-color: var(--alkaline-earth); } .transition { background-color: var(--transition); } .post-transition { background-color: var(--post-transition); } .metalloid { background-color: var(--metalloid); } .nonmetal { background-color: var(--nonmetal); } .halogen { background-color: var(--halogen); } .noble-gas { background-color: var(--noble-gas); } .lanthanide { background-color: var(--lanthanide); } .actinide { background-color: var(--actinide); } .unknown { background-color: var(--unknown); } /* Zoom controls */ .zoom-controls { position: absolute; bottom: 15px; right: 15px; display: flex; flex-direction: column; gap: 5px; z-index: 30; } .zoom-btn { width: 40px; height: 40px; border-radius: 50%; background-color: var(--primary); color: white; border: none; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .zoom-btn:active { transform: scale(0.95); } .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(100px); background-color: var(--primary); color: white; padding: 10px 20px; border-radius: 20px; font-size: 14px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); opacity: 0; transition: all 0.3s ease; z-index: 1000; } .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } /* Responsive adjustments */ @media (max-width: 600px) { .periodic-table { grid-template-columns: repeat(18, 40px); grid-template-rows: repeat(10, 40px); } .element .symbol { font-size: 14px; } .element .atomic-number { font-size: 8px; } .element .name, .element .mass { font-size: 7px; } } @media (max-width: 450px) { .periodic-table { grid-template-columns: repeat(18, 35px); grid-template-rows: repeat(10, 35px); gap: 2px; } header { padding: 8px; } .logo { font-size: 1.2rem; } } </style> </head> <body> <div class="container"> <header> <div class="logo"> <div class="logo-icon">⚛️</div> <span>PeriodiGo</span> </div> <div class="controls"> <button class="btn" id="legend-toggle" title="Show legend"> <svg width="20" height="20" fill="currentColor" viewBox="0 0 16 16"> <path d="M2 2a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V2zm7.5 1.5a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zm0 2.5a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zm0 2.5a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zm-6-2.5a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zm0 2.5a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3z"/> </svg> </button> <button class="btn" id="reset-view" title="Reset view"> <svg width="20" height="20" fill="currentColor" viewBox="0 0 16 16"> <path d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/> <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/> </svg> </button> </div> </header> <div class="periodic-table-container" id="periodic-table-container"> <div class="periodic-table" id="periodic-table"></div> </div> <div class="zoom-controls"> <button class="zoom-btn" id="zoom-in">+</button> <button class="zoom-btn" id="zoom-out">−</button> </div> <div class="legend" id="legend"> <div class="legend-item"> <div class="legend-color alkali"></div> <span>Alkali Metal</span> </div> <div class="legend-item"> <div class="legend-color alkaline-earth"></div> <span>Alkaline Earth</span> </div> <div class="legend-item"> <div class="legend-color transition"></div> <span>Transition Metal</span> </div> <div class="legend-item"> <div class="legend-color post-transition"></div> <span>Post-Transition</span> </div> <div class="legend-item"> <div class="legend-color metalloid"></div> <span>Metalloid</span> </div> <div class="legend-item"> <div class="legend-color nonmetal"></div> <span>Nonmetal</span> </div> <div class="legend-item"> <div class="legend-color halogen"></div> <span>Halogen</span> </div> <div class="legend-item"> <div class="legend-color noble-gas"></div> <span>Noble Gas</span> </div> <div class="legend-item"> <div class="legend-color lanthanide"></div> <span>Lanthanide</span> </div> <div class="legend-item"> <div class="legend-color actinide"></div> <span>Actinide</span> </div> </div> <div class="element-details" id="element-details"> <button class="details-close" id="details-close">×</button> <div class="details-header"> <div class="element-symbol" id="details-symbol">H</div> <div class="element-info"> <h2 id="details-name">Hydrogen</h2> <p id="details-category">Nonmetal</p> </div> </div> <div class="details-body"> <div class="property"> <div class="property-name">Atomic Number</div> <div class="property-value" id="details-number">1</div> </div> <div class="property"> <div class="property-name">Atomic Mass</div> <div class="property-value" id="details-mass">1.008</div> </div> <div class="property"> <div class="property-name">Period</div> <div class="property-value" id="details-period">1</div> </div> <div class="property"> <div class="property-name">Group</div> <div class="property-value" id="details-group">1</div> </div> <div class="property"> <div class="property-name">State at Room Temp</div> <div class="property-value" id="details-state">Gas</div> </div> <div class="property"> <div class="property-name">Electron Configuration</div> <div class="property-value" id="details-electrons">1s¹</div> </div> </div> <div class="details-fact" id="details-fact"> Hydrogen is the most abundant element in the universe, making up about 75% of all normal matter. </div> </div> <div class="overlay" id="overlay"></div> <div class="toast" id="toast">Tap an element to view details</div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const periodicTable = document.getElementById('periodic-table'); const elementDetails = document.getElementById('element-details'); const overlay = document.getElementById('overlay'); const legendToggle = document.getElementById('legend-toggle'); const legend = document.getElementById('legend'); const resetViewBtn = document.getElementById('reset-view'); const zoomInBtn = document.getElementById('zoom-in'); const zoomOutBtn = document.getElementById('zoom-out'); const tableContainer = document.getElementById('periodic-table-container'); const detailsClose = document.getElementById('details-close'); const toast = document.getElementById('toast'); // Show welcome toast setTimeout(() => { toast.classList.add('show'); setTimeout(() => { toast.classList.remove('show'); }, 3000); }, 1000); // Elements data const elements = [ { number: 1, symbol: "H", name: "Hydrogen", mass: "1.008", category: "nonmetal", period: 1, group: 1, state: "Gas", electrons: "1s¹", fact: "Hydrogen is the most abundant element in the universe, making up about 75% of all normal matter." }, { number: 2, symbol: "He", name: "Helium", mass: "4.0026", category: "noble-gas", period: 1, group: 18, state: "Gas", electrons: "1s²", fact: "Helium is the only element discovered in space before being found on Earth. It was first detected through spectroscopy during a solar eclipse." }, { number: 3, symbol: "Li", name: "Lithium", mass: "6.94", category: "alkali", period: 2, group: 1, state: "Solid", electrons: "1s² 2s¹", fact: "Lithium is the key component in modern rechargeable batteries powering everything from smartphones to electric vehicles." }, { number: 4, symbol: "Be", name: "Beryllium", mass: "9.0122", category: "alkaline-earth", period: 2, group: 2, state: "Solid", electrons: "1s² 2s²", fact: "Beryllium is transparent to X-rays, making it invaluable in X-ray windows for medical imaging equipment." }, { number: 5, symbol: "B", name: "Boron", mass: "10.81", category: "metalloid", period: 2, group: 13, state: "Solid", electrons: "1s² 2s² 2p¹", fact: "Boron is an essential element for plant growth and is used in detergents, glass, and as a neutron absorber in nuclear reactors." }, { number: 6, symbol: "C", name: "Carbon", mass: "12.011", category: "nonmetal", period: 2, group: 14, state: "Solid", electrons: "1s² 2s² 2p²", fact: "Carbon forms nearly 10 million different compounds, more than any other element, making it the foundation of all organic chemistry and life." }, { number: 7, symbol: "N", name: "Nitrogen", mass: "14.007", category: "nonmetal", period: 2, group: 15, state: "Gas", electrons: "1s² 2s² 2p³", fact: "Nitrogen makes up 78% of Earth's atmosphere and is crucial for protein synthesis in all living organisms." }, { number: 8, symbol: "O", name: "Oxygen", mass: "15.999", category: "nonmetal", period: 2, group: 16, state: "Gas", electrons: "1s² 2s² 2p⁴", fact: "Though essential for life on Earth, oxygen is actually quite toxic - our bodies have evolved complex antioxidant systems to protect cells from oxygen damage." }, { number: 9, symbol: "F", name: "Fluorine", mass: "18.998", category: "halogen", period: 2, group: 17, state: "Gas", electrons: "1s² 2s² 2p⁵", fact: "Fluorine is the most reactive and electronegative of all elements, capable of forming compounds with almost all other elements, even noble gases." }, { number: 10, symbol: "Ne", name: "Neon", mass: "20.180", category: "noble-gas", period: 2, group: 18, state: "Gas", electrons: "1s² 2s² 2p⁶", fact: "Neon signs get their iconic bright red-orange glow from electric current passing through neon gas in glass tubes." }, { number: 11, symbol: "Na", name: "Sodium", mass: "22.990", category: "alkali", period: 3, group: 1, state: "Solid", electrons: "[Ne] 3s¹", fact: "Sodium is so reactive that it can explode on contact with water, producing hydrogen gas and sodium hydroxide." }, { number: 12, symbol: "Mg", name: "Magnesium", mass: "24.305", category: "alkaline-earth", period: 3, group: 2, state: "Solid", electrons: "[Ne] 3s²", fact: "Magnesium burns with a brilliant white light and is used in fireworks and flash photography." }, { number: 13, symbol: "Al", name: "Aluminum", mass: "26.982", category: "post-transition", period: 3, group: 13, state: "Solid", electrons: "[Ne] 3s² 3p¹", fact: "Once more precious than gold, aluminum is now one of the most widely used metals due to its light weight and resistance to corrosion." }, { number: 14, symbol: "Si", name: "Silicon", mass: "28.085", category: "metalloid", period: 3, group: 14, state: "Solid", electrons: "[Ne] 3s² 3p²", fact: "Silicon is the backbone of modern electronics and computing, forming the semiconductor chips that power our digital world." }, { number: 15, symbol: "P", name: "Phosphorus", mass: "30.974", category: "nonmetal", period: 3, group: 15, state: "Solid", electrons: "[Ne] 3s² 3p³", fact: "Phosphorus is essential for DNA, RNA, and ATP - the cellular energy carrier - making it indispensable for all living organisms." }, { number: 16, symbol: "S", name: "Sulfur", mass: "32.06", category: "nonmetal", period: 3, group: 16, state: "Solid", electrons: "[Ne] 3s² 3p⁴", fact: "Ancient civilizations called sulfur 'brimstone' and its distinctive smell is added to natural gas as a safety measure to detect leaks." }, { number: 17, symbol: "Cl", name: "Chlorine", mass: "35.45", category: "halogen", period: 3, group: 17, state: "Gas", electrons: "[Ne] 3s² 3p⁵", fact: "Chlorine revolutionized public health through water purification, dramatically reducing waterborne diseases worldwide." }, { number: 18, symbol: "Ar", name: "Argon", mass: "39.948", category: "noble-gas", period: 3, group: 18, state: "Gas", electrons: "[Ne] 3s² 3p⁶", fact: "Argon makes up about 1% of Earth's atmosphere and is used to create the blue-green glow in vintage electric lights." }, { number: 19, symbol: "K", name: "Potassium", mass: "39.098", category: "alkali", period: 4, group: 1, state: "Solid", electrons: "[Ar] 4s¹", fact: "Potassium is vital for nerve and muscle function, with bananas being a well-known dietary source." }, { number: 20, symbol: "Ca", name: "Calcium", mass: "40.078", category: "alkaline-earth", period: 4, group: 2, state: "Solid", electrons: "[Ar] 4s²", fact: "Though we associate calcium with bones and teeth, it's also crucial for blood clotting, muscle contraction, and nerve signaling." } ]; // Elements positions const positions = { 1: [0, 0], 2: [17, 0], 3: [0, 1], 4: [1, 1], 5: [12, 1], 6: [13, 1], 7: [14, 1], 8: [15, 1], 9: [16, 1], 10: [17, 1], 11: [0, 2], 12: [1, 2], 13: [12, 2], 14: [13, 2], 15: [14, 2], 16: [15, 2], 17: [16, 2], 18: [17, 2], 19: [0, 3], 20: [1, 3] }; // Create periodic table elements.forEach(element => { if (positions[element.number]) { const [x, y] = positions[element.number]; const elementDiv = document.createElement('div'); elementDiv.className = `element ${element.category}`; elementDiv.dataset.element = JSON.stringify(element); elementDiv.style.gridColumn = x + 1; elementDiv.style.gridRow = y + 1; elementDiv.innerHTML = ` <div class="atomic-number">${element.number}</div> <div class="symbol">${element.symbol}</div> <div class="name">${element.name}</div> <div class="mass">${element.mass}</div> `; periodicTable.appendChild(elementDiv); } }); // Mobile zoom and pan let currentScale = 1; let isDragging = false; let startPos = { x: 0, y: 0 }; let currentPos = { x: 0, y: 0 }; // Set up zoom function setTransform() { periodicTable.style.transform = `translate(${currentPos.x}px, ${currentPos.y}px) scale(${currentScale})`; } // Zoom controls zoomInBtn.addEventListener('click', () => { currentScale = Math.min(currentScale * 1.2, 2.5); setTransform(); }); zoomOutBtn.addEventListener('click', () => { currentScale = Math.max(currentScale / 1.2, 0.5); setTransform(); }); // Reset view resetViewBtn.addEventListener('click', () => { currentScale = 1; currentPos = { x: 0, y: 0 }; setTransform(); }); // Pan handlers tableContainer.addEventListener('mousedown', startDrag); tableContainer.addEventListener('touchstart', (e) => { if (e.touches.length === 1) { startDrag(e.touches[0]); } }); function startDrag(e) { isDragging = true; startPos = { x: e.clientX - currentPos.x, y: e.clientY - currentPos.y }; e.preventDefault(); } window.addEventListener('mousemove', (e) => { if (isDragging) { currentPos = { x: e.clientX - startPos.x, y: e.clientY - startPos.y }; setTransform(); } }); window.addEventListener('touchmove', (e) => { if (isDragging && e.touches.length === 1) { currentPos = { x: e.touches[0].clientX - startPos.x, y: e.touches[0].clientY - startPos.y }; setTransform(); e.preventDefault(); } }); window.addEventListener('mouseup', () => { isDragging = false; }); window.addEventListener('touchend', () => { isDragging = false; }); // Element Details document.querySelectorAll('.element').forEach(el => { el.addEventListener('click', (e) => { const elementData = JSON.parse(el.dataset.element); // Create ripple effect const ripple = document.createElement('span'); ripple.className = 'ripple'; const rect = el.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); ripple.style.width = ripple.style.height = `${size}px`; ripple.style.left = `${e.clientX - rect.left - size/2}px`; ripple.style.top = `${e.clientY - rect.top - size/2}px`; el.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); // Show tap animation el.classList.add('tapped'); setTimeout(() => { el.classList.remove('tapped'); }, 600); // Update element details document.getElementById('details-symbol').textContent = elementData.symbol; document.getElementById('details-symbol').className = `element-symbol ${elementData.category}`; document.getElementById('details-name').textContent = elementData.name; document.getElementById('details-category').textContent = elementData.category.replace('-', ' ').replace(/\b\w/g, l => l.toUpperCase()); document.getElementById('details-number').textContent = elementData.number; document.getElementById('details-mass').textContent = elementData.mass; document.getElementById('details-period').textContent = elementData.period; document.getElementById('details-group').textContent = elementData.group; document.getElementById('details-state').textContent = elementData.state; document.getElementById('details-electrons').textContent = elementData.electrons; document.getElementById('details-fact').textContent = elementData.fact; // Show details elementDetails.classList.add('active'); overlay.classList.add('active'); }); }); // Close details detailsClose.addEventListener('click', () => { elementDetails.classList.remove('active'); overlay.classList.remove('active'); }); overlay.addEventListener('click', () => { elementDetails.classList.remove('active'); overlay.classList.remove('active'); legend.classList.remove('active'); }); // Toggle legend legendToggle.addEventListener('click', () => { legend.classList.toggle('active'); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Interactive Periodic Table</title> <style> :root { --primary: #2a3f54; --secondary: #1abc9c; --tertiary: #3498db; --quaternary: #e74c3c; --light: #ecf0f1; --dark: #2c3e50; --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); --metal: linear-gradient(135deg, #bdc3c7, #95a5a6); --nonmetal: linear-gradient(135deg, #3498db, #2980b9); --metalloid: linear-gradient(135deg, #f1c40f, #f39c12); --noble-gas: linear-gradient(135deg, #9b59b6, #8e44ad); --alkali-metal: linear-gradient(135deg, #e74c3c, #c0392b); --alkaline-earth: linear-gradient(135deg, #e67e22, #d35400); --transition-metal: linear-gradient(135deg, #1abc9c, #16a085); --lanthanide: linear-gradient(135deg, #27ae60, #2ecc71); --actinide: linear-gradient(135deg, #2c3e50, #34495e); --halogen: linear-gradient(135deg, #f39c12, #ff5733); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', 'Segoe UI', Roboto, sans-serif; } body { background-color: var(--light); color: var(--dark); display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; width: 100%; max-width: 700px; margin: 0 auto; } .container { width: 100%; max-width: 700px; margin: 0 auto; padding: 1rem; display: flex; flex-direction: column; height: 100vh; max-height: 700px; } header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } h1 { font-size: 1.5rem; font-weight: 700; color: var(--primary); display: flex; align-items: center; } h1 span { color: var(--secondary); margin-left: 0.5rem; } .filters { background-color: white; border-radius: 8px; padding: 0.75rem; box-shadow: var(--shadow); display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; z-index: 10; } .filter-group { display: flex; flex-direction: column; flex: 1; min-width: 120px; } .filter-group label { font-size: 0.75rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--dark); } select, button { padding: 0.5rem; border-radius: 4px; border: 1px solid #ddd; background-color: white; font-size: 0.875rem; transition: var(--transition); } select:focus, button:focus { outline: none; border-color: var(--tertiary); box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); } button { cursor: pointer; background-color: var(--tertiary); color: white; border: none; font-weight: 600; } button:hover { background-color: #2980b9; } .reset-btn { background-color: #e74c3c; } .reset-btn:hover { background-color: #c0392b; } .periodic-table { display: grid; grid-template-columns: repeat(18, 1fr); grid-template-rows: repeat(10, 1fr); gap: 2px; overflow-y: auto; flex: 1; background-color: rgba(236, 240, 241, 0.5); border-radius: 8px; padding: 0.5rem; position: relative; } .element { background-color: white; border-radius: 4px; padding: 0.25rem; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); position: relative; box-shadow: var(--shadow); aspect-ratio: 1; font-size: 0.6rem; } .element:hover { transform: scale(1.05); z-index: 2; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); } .element.active { transform: scale(1.1); z-index: 3; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); } .atomic-number { position: absolute; top: 2px; left: 2px; font-size: 0.6rem; font-weight: 600; } .symbol { font-size: 1rem; font-weight: 700; margin-bottom: 0.1rem; } .name { font-size: 0.55rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .mass { font-size: 0.5rem; color: #7f8c8d; } .element-detail { position: absolute; background: white; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); padding: 1rem; z-index: 5; width: 300px; max-width: 90%; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.9); opacity: 0; visibility: hidden; transition: var(--transition); display: flex; flex-direction: column; } .element-detail.active { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } .detail-header { display: flex; align-items: center; margin-bottom: 1rem; gap: 1rem; } .detail-symbol { font-size: 2.5rem; font-weight: 700; background: var(--tertiary); color: white; width: 60px; height: 60px; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .detail-name-group h2 { font-size: 1.5rem; margin-bottom: 0.25rem; } .detail-name-group p { font-size: 0.875rem; color: #7f8c8d; } .detail-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1rem; } .detail-item { display: flex; flex-direction: column; } .detail-item span:first-child { font-size: 0.75rem; color: #7f8c8d; margin-bottom: 0.1rem; } .detail-item span:last-child { font-weight: 600; font-size: 0.875rem; } .close-detail { position: absolute; top: 0.5rem; right: 0.5rem; background: transparent; border: none; font-size: 1.25rem; cursor: pointer; color: #7f8c8d; padding: 0.25rem; } .close-detail:hover { color: var(--quaternary); background: transparent; } .element-stats { margin-top: 1rem; position: relative; height: 120px; } .bar-chart { display: flex; align-items: flex-end; height: 100px; position: relative; } .bar { flex: 1; background: var(--tertiary); margin: 0 2px; border-radius: 4px 4px 0 0; position: relative; transition: height 0.5s ease; min-height: 1px; } .bar-label { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 0.6rem; color: #7f8c8d; } .legend { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; } .legend-item { display: flex; align-items: center; font-size: 0.7rem; margin-right: 0.5rem; } .legend-color { width: 12px; height: 12px; border-radius: 2px; margin-right: 0.25rem; } /* Element types colors */ .alkali-metal { background: var(--alkali-metal); } .alkaline-earth { background: var(--alkaline-earth); } .transition-metal { background: var(--transition-metal); } .metal { background: var(--metal); } .metalloid { background: var(--metalloid); } .nonmetal { background: var(--nonmetal); } .halogen { background: var(--halogen); } .noble-gas { background: var(--noble-gas); } .lanthanide { background: var(--lanthanide); } .actinide { background: var(--actinide); } .hidden { opacity: 0.3; pointer-events: none; } .placeholder { grid-column: span 10; grid-row: span 1; background: transparent; box-shadow: none; pointer-events: none; } .lanthanide-block, .actinide-block { grid-column: span 14; grid-row: span 1; display: flex; gap: 2px; } .lanthanide-block .element, .actinide-block .element { flex: 1; } .overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 4; opacity: 0; visibility: hidden; transition: var(--transition); } .overlay.active { opacity: 1; visibility: visible; } /* Responsive styles */ @media (max-width: 700px) { .periodic-table { gap: 1px; padding: 0.25rem; } .element { font-size: 0.5rem; } .symbol { font-size: 0.8rem; } .name, .mass { font-size: 0.45rem; } .atomic-number { font-size: 0.5rem; } } @media (max-width: 500px) { h1 { font-size: 1.2rem; } .filter-group { min-width: 100px; } .element-detail { width: 280px; } } /* Loading animation */ .loading { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.9); display: flex; align-items: center; justify-content: center; z-index: 100; transition: opacity 0.5s ease; } .spinner { width: 40px; height: 40px; border-radius: 50%; border: 4px solid rgba(52, 152, 219, 0.2); border-top-color: var(--tertiary); animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .fade-out { opacity: 0; pointer-events: none; } </style> </head> <body> <div class="container"> <header> <h1>Elemental<span>Explorer</span></h1> </header> <div class="filters"> <div class="filter-group"> <label for="category-filter">Element Category</label> <select id="category-filter"> <option value="all">All Categories</option> <option value="alkali-metal">Alkali Metals</option> <option value="alkaline-earth">Alkaline Earth</option> <option value="transition-metal">Transition Metals</option> <option value="metal">Other Metals</option> <option value="metalloid">Metalloids</option> <option value="nonmetal">Nonmetals</option> <option value="halogen">Halogens</option> <option value="noble-gas">Noble Gases</option> <option value="lanthanide">Lanthanides</option> <option value="actinide">Actinides</option> </select> </div> <div class="filter-group"> <label for="state-filter">Physical State</label> <select id="state-filter"> <option value="all">All States</option> <option value="solid">Solid</option> <option value="liquid">Liquid</option> <option value="gas">Gas</option> </select> </div> <div class="filter-group"> <label for="property-sort">Sort By</label> <select id="property-sort"> <option value="atomic-number">Atomic Number</option> <option value="atomic-mass">Atomic Mass</option> <option value="electronegativity">Electronegativity</option> <option value="melting-point">Melting Point</option> </select> </div> <div class="filter-group"> <label> </label> <button id="reset-filters" class="reset-btn">Reset</button> </div> </div> <div class="periodic-table" id="periodic-table"> <div class="loading"> <div class="spinner"></div> </div> <!-- Elements will be populated here by JS --> </div> <div class="element-detail" id="element-detail"> <button class="close-detail" id="close-detail">✕</button> <div class="detail-header"> <div class="detail-symbol" id="detail-symbol">H</div> <div class="detail-name-group"> <h2 id="detail-name">Hydrogen</h2> <p id="detail-category">Nonmetal</p> </div> </div> <div class="detail-info"> <div class="detail-item"> <span>Atomic Number</span> <span id="detail-atomic-number">1</span> </div> <div class="detail-item"> <span>Atomic Mass</span> <span id="detail-atomic-mass">1.008 u</span> </div> <div class="detail-item"> <span>Electron Configuration</span> <span id="detail-electron-config">1s¹</span> </div> <div class="detail-item"> <span>Standard State</span> <span id="detail-state">Gas</span> </div> <div class="detail-item"> <span>Discovery Year</span> <span id="detail-year">1766</span> </div> <div class="detail-item"> <span>Electronegativity</span> <span id="detail-electronegativity">2.20</span> </div> <div class="detail-item"> <span>Density</span> <span id="detail-density">0.000082 g/cm³</span> </div> <div class="detail-item"> <span>Group / Period</span> <span id="detail-group-period">1 / 1</span> </div> </div> <div class="element-stats"> <h3>Property Comparison</h3> <div class="bar-chart" id="bar-chart"> <!-- Bars will be populated by JS --> </div> </div> </div> <div class="overlay" id="overlay"></div> </div> <script> document.addEventListener('DOMContentLoaded', () => { // Element data const elements = [ { number: 1, symbol: 'H', name: 'Hydrogen', category: 'nonmetal', atomicMass: 1.008, state: 'gas', electronegativity: 2.20, density: 0.000082, group: 1, period: 1, electronConfig: '1s¹', discoveryYear: 1766, meltingPoint: -259.1, boilingPoint: -252.9 }, { number: 2, symbol: 'He', name: 'Helium', category: 'noble-gas', atomicMass: 4.0026, state: 'gas', electronegativity: null, density: 0.000164, group: 18, period: 1, electronConfig: '1s²', discoveryYear: 1868, meltingPoint: -272.2, boilingPoint: -268.9 }, { number: 3, symbol: 'Li', name: 'Lithium', category: 'alkali-metal', atomicMass: 6.94, state: 'solid', electronegativity: 0.98, density: 0.534, group: 1, period: 2, electronConfig: '[He] 2s¹', discoveryYear: 1817, meltingPoint: 180.5, boilingPoint: 1342 }, { number: 4, symbol: 'Be', name: 'Beryllium', category: 'alkaline-earth', atomicMass: 9.0122, state: 'solid', electronegativity: 1.57, density: 1.85, group: 2, period: 2, electronConfig: '[He] 2s²', discoveryYear: 1798, meltingPoint: 1287, boilingPoint: 2471 }, { number: 5, symbol: 'B', name: 'Boron', category: 'metalloid', atomicMass: 10.81, state: 'solid', electronegativity: 2.04, density: 2.34, group: 13, period: 2, electronConfig: '[He] 2s² 2p¹', discoveryYear: 1808, meltingPoint: 2076, boilingPoint: 3927 }, { number: 6, symbol: 'C', name: 'Carbon', category: 'nonmetal', atomicMass: 12.011, state: 'solid', electronegativity: 2.55, density: 2.267, group: 14, period: 2, electronConfig: '[He] 2s² 2p²', discoveryYear: -3750, meltingPoint: 3550, boilingPoint: 4827 }, { number: 7, symbol: 'N', name: 'Nitrogen', category: 'nonmetal', atomicMass: 14.007, state: 'gas', electronegativity: 3.04, density: 0.001165, group: 15, period: 2, electronConfig: '[He] 2s² 2p³', discoveryYear: 1772, meltingPoint: -210, boilingPoint: -195.8 }, { number: 8, symbol: 'O', name: 'Oxygen', category: 'nonmetal', atomicMass: 15.999, state: 'gas', electronegativity: 3.44, density: 0.001308, group: 16, period: 2, electronConfig: '[He] 2s² 2p⁴', discoveryYear: 1774, meltingPoint: -218.8, boilingPoint: -183 }, { number: 9, symbol: 'F', name: 'Fluorine', category: 'halogen', atomicMass: 18.998, state: 'gas', electronegativity: 3.98, density: 0.001553, group: 17, period: 2, electronConfig: '[He] 2s² 2p⁵', discoveryYear: 1886, meltingPoint: -220, boilingPoint: -188.1 }, { number: 10, symbol: 'Ne', name: 'Neon', category: 'noble-gas', atomicMass: 20.180, state: 'gas', electronegativity: null, density: 0.000825, group: 18, period: 2, electronConfig: '[He] 2s² 2p⁶', discoveryYear: 1898, meltingPoint: -248.6, boilingPoint: -246.1 }, { number: 11, symbol: 'Na', name: 'Sodium', category: 'alkali-metal', atomicMass: 22.990, state: 'solid', electronegativity: 0.93, density: 0.971, group: 1, period: 3, electronConfig: '[Ne] 3s¹', discoveryYear: 1807, meltingPoint: 97.72, boilingPoint: 883 }, { number: 12, symbol: 'Mg', name: 'Magnesium', category: 'alkaline-earth', atomicMass: 24.305, state: 'solid', electronegativity: 1.31, density: 1.738, group: 2, period: 3, electronConfig: '[Ne] 3s²', discoveryYear: 1808, meltingPoint: 650, boilingPoint: 1090 }, { number: 13, symbol: 'Al', name: 'Aluminum', category: 'metal', atomicMass: 26.982, state: 'solid', electronegativity: 1.61, density: 2.7, group: 13, period: 3, electronConfig: '[Ne] 3s² 3p¹', discoveryYear: 1825, meltingPoint: 660.3, boilingPoint: 2519 }, { number: 14, symbol: 'Si', name: 'Silicon', category: 'metalloid', atomicMass: 28.085, state: 'solid', electronegativity: 1.90, density: 2.33, group: 14, period: 3, electronConfig: '[Ne] 3s² 3p²', discoveryYear: 1824, meltingPoint: 1414, boilingPoint: 3265 }, { number: 15, symbol: 'P', name: 'Phosphorus', category: 'nonmetal', atomicMass: 30.974, state: 'solid', electronegativity: 2.19, density: 1.82, group: 15, period: 3, electronConfig: '[Ne] 3s² 3p³', discoveryYear: 1669, meltingPoint: 44.1, boilingPoint: 280.5 }, { number: 16, symbol: 'S', name: 'Sulfur', category: 'nonmetal', atomicMass: 32.06, state: 'solid', electronegativity: 2.58, density: 2.067, group: 16, period: 3, electronConfig: '[Ne] 3s² 3p⁴', discoveryYear: -2000, meltingPoint: 115.2, boilingPoint: 444.6 }, { number: 17, symbol: 'Cl', name: 'Chlorine', category: 'halogen', atomicMass: 35.45, state: 'gas', electronegativity: 3.16, density: 0.002898, group: 17, period: 3, electronConfig: '[Ne] 3s² 3p⁵', discoveryYear: 1774, meltingPoint: -101.5, boilingPoint: -34.04 }, { number: 18, symbol: 'Ar', name: 'Argon', category: 'noble-gas', atomicMass: 39.95, state: 'gas', electronegativity: null, density: 0.001633, group: 18, period: 3, electronConfig: '[Ne] 3s² 3p⁶', discoveryYear: 1894, meltingPoint: -189.3, boilingPoint: -185.8 }, { number: 19, symbol: 'K', name: 'Potassium', category: 'alkali-metal', atomicMass: 39.098, state: 'solid', electronegativity: 0.82, density: 0.856, group: 1, period: 4, electronConfig: '[Ar] 4s¹', discoveryYear: 1807, meltingPoint: 63.38, boilingPoint: 759 }, { number: 20, symbol: 'Ca', name: 'Calcium', category: 'alkaline-earth', atomicMass: 40.078, state: 'solid', electronegativity: 1.00, density: 1.55, group: 2, period: 4, electronConfig: '[Ar] 4s²', discoveryYear: 1808, meltingPoint: 842, boilingPoint: 1484 }, // Add more elements as needed - these are just the first 20 { number: 26, symbol: 'Fe', name: 'Iron', category: 'transition-metal', atomicMass: 55.845, state: 'solid', electronegativity: 1.83, density: 7.874, group: 8, period: 4, electronConfig: '[Ar] 4s² 3d⁶', discoveryYear: -3500, meltingPoint: 1538, boilingPoint: 2862 }, { number: 29, symbol: 'Cu', name: 'Copper', category: 'transition-metal', atomicMass: 63.546, state: 'solid', electronegativity: 1.90, density: 8.96, group: 11, period: 4, electronConfig: '[Ar] 4s¹ 3d¹⁰', discoveryYear: -8000, meltingPoint: 1085, boilingPoint: 2562 }, { number: 47, symbol: 'Ag', name: 'Silver', category: 'transition-metal', atomicMass: 107.87, state: 'solid', electronegativity: 1.93, density: 10.49, group: 11, period: 5, electronConfig: '[Kr] 5s¹ 4d¹⁰', discoveryYear: -3000, meltingPoint: 961.8, boilingPoint: 2162 }, { number: 79, symbol: 'Au', name: 'Gold', category: 'transition-metal', atomicMass: 196.97, state: 'solid', electronegativity: 2.54, density: 19.3, group: 11, period: 6, electronConfig: '[Xe] 6s¹ 4f¹⁴ 5d¹⁰', discoveryYear: -4000, meltingPoint: 1064, boilingPoint: 2856 }, { number: 80, symbol: 'Hg', name: 'Mercury', category: 'transition-metal', atomicMass: 200.59, state: 'liquid', electronegativity: 2.00, density: 13.546, group: 12, period: 6, electronConfig: '[Xe] 6s² 4f¹⁴ 5d¹⁰', discoveryYear: -1500, meltingPoint: -38.83, boilingPoint: 356.7 }, { number: 82, symbol: 'Pb', name: 'Lead', category: 'metal', atomicMass: 207.2, state: 'solid', electronegativity: 2.33, density: 11.34, group: 14, period: 6, electronConfig: '[Xe] 6s² 4f¹⁴ 5d¹⁰ 6p²', discoveryYear: -4000, meltingPoint: 327.5, boilingPoint: 1749 }, { number: 92, symbol: 'U', name: 'Uranium', category: 'actinide', atomicMass: 238.03, state: 'solid', electronegativity: 1.38, density: 19.1, group: 0, period: 7, electronConfig: '[Rn] 7s² 5f³ 6d¹', discoveryYear: 1789, meltingPoint: 1135, boilingPoint: 4131 }, { number: 57, symbol: 'La', name: 'Lanthanum', category: 'lanthanide', atomicMass: 138.91, state: 'solid', electronegativity: 1.10, density: 6.145, group: 0, period: 6, electronConfig: '[Xe] 6s² 5d¹', discoveryYear: 1839, meltingPoint: 920, boilingPoint: 3464 }, { number: 89, symbol: 'Ac', name: 'Actinium', category: 'actinide', atomicMass: 227, state: 'solid', electronegativity: 1.10, density: 10.07, group: 0, period: 7, electronConfig: '[Rn] 7s² 6d¹', discoveryYear: 1899, meltingPoint: 1050, boilingPoint: 3200 } // Additional elements would be added here to complete the table ]; // Element grid positions const elementGridPositions = { 1: { row: 1, col: 1 }, 2: { row: 1, col: 18 }, 3: { row: 2, col: 1 }, 4: { row: 2, col: 2 }, 5: { row: 2, col: 13 }, 6: { row: 2, col: 14 }, 7: { row: 2, col: 15 }, 8: { row: 2, col: 16 }, 9: { row: 2, col: 17 }, 10: { row: 2, col: 18 }, 11: { row: 3, col: 1 }, 12: { row: 3, col: 2 }, 13: { row: 3, col: 13 }, 14: { row: 3, col: 14 }, 15: { row: 3, col: 15 }, 16: { row: 3, col: 16 }, 17: { row: 3, col: 17 }, 18: { row: 3, col: 18 }, 19: { row: 4, col: 1 }, 20: { row: 4, col: 2 }, 26: { row: 4, col: 8 }, 29: { row: 4, col: 11 }, 47: { row: 5, col: 11 }, 57: { row: 6, col: 3 }, 79: { row: 6, col: 11 }, 80: { row: 6, col: 12 }, 82: { row: 6, col: 14 }, 89: { row: 7, col: 3 }, 92: { row: 7, col: 6 } // Additional positions would be defined here }; // Category display names const categoryNames = { 'alkali-metal': 'Alkali Metal', 'alkaline-earth': 'Alkaline Earth Metal', 'transition-metal': 'Transition Metal', 'metal': 'Post-Transition Metal', 'metalloid': 'Metalloid', 'nonmetal': 'Nonmetal', 'halogen': 'Halogen', 'noble-gas': 'Noble Gas', 'lanthanide': 'Lanthanide', 'actinide': 'Actinide' }; // DOM elements const periodicTable = document.getElementById('periodic-table'); const elementDetail = document.getElementById('element-detail'); const overlay = document.getElementById('overlay'); const closeDetailBtn = document.getElementById('close-detail'); const categoryFilter = document.getElementById('category-filter'); const stateFilter = document.getElementById('state-filter'); const propertySort = document.getElementById('property-sort'); const resetFiltersBtn = document.getElementById('reset-filters'); const loading = document.querySelector('.loading'); // Initialize the periodic table function initPeriodicTable() { // Clear the table first while (periodicTable.firstChild) { if (!periodicTable.firstChild.classList || !periodicTable.firstChild.classList.contains('loading')) { periodicTable.removeChild(periodicTable.firstChild); } } // Create element cells elements.forEach(element => { const position = elementGridPositions[element.number]; if (position) { const elementCell = createElementCell(element); elementCell.style.gridRow = position.row; elementCell.style.gridColumn = position.col; periodicTable.appendChild(elementCell); } }); // Add placeholders for lanthanides and actinides const lanthanideLabel = document.createElement('div'); lanthanideLabel.className = 'element placeholder'; lanthanideLabel.style.gridRow = 8; lanthanideLabel.style.gridColumn = 3; lanthanideLabel.textContent = '* Lanthanides'; periodicTable.appendChild(lanthanideLabel); const actinideLabel = document.createElement('div'); actinideLabel.className = 'element placeholder'; actinideLabel.style.gridRow = 9; actinideLabel.style.gridColumn = 3; actinideLabel.textContent = '** Actinides'; periodicTable.appendChild(
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Chemical Safety Periodic Table</title> <style> :root { --primary-color: #1a1a2e; --secondary-color: #16213e; --accent-color: #0f3460; --text-color: #e6e6e6; --danger-color: #e94560; --warning-color: #f7b731; --caution-color: #26a69a; --safe-color: #66bb6a; --hover-glow: 0 0 15px rgba(230, 230, 230, 0.5); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', 'Segoe UI', sans-serif; } body { background-color: var(--primary-color); color: var(--text-color); overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 700px; margin: 0 auto; } .container { width: 100%; max-width: 700px; padding: 15px; margin: 0 auto; position: relative; } header { text-align: center; margin-bottom: 20px; position: relative; width: 100%; } h1 { font-size: 1.8rem; margin-bottom: 10px; background: linear-gradient(45deg, #e94560, #f7b731, #26a69a, #66bb6a); -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradient 10s ease infinite; background-size: 300% 300%; } .subheading { font-size: 0.9rem; opacity: 0.8; max-width: 600px; margin: 0 auto 15px; } .legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; padding: 10px; background-color: rgba(22, 33, 62, 0.7); border-radius: 8px; width: fit-content; margin: 0 auto 15px; } .legend-item { display: flex; align-items: center; margin-right: 10px; font-size: 0.75rem; } .legend-color { width: 12px; height: 12px; margin-right: 5px; border-radius: 3px; } .periodic-table { display: grid; grid-template-columns: repeat(18, 1fr); grid-gap: 3px; margin: 0 auto; max-width: 100%; position: relative; } .element { position: relative; padding: 4px; border-radius: 4px; text-align: center; cursor: pointer; transition: all 0.3s ease, transform 0.2s ease; aspect-ratio: 1/1; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: clamp(0.5rem, 1.5vw, 0.7rem); } .element:hover { transform: scale(1.1); box-shadow: var(--hover-glow); z-index: 10; } .element-symbol { font-weight: bold; font-size: 1.2em; } .element-number { position: absolute; top: 2px; left: 3px; font-size: 0.65em; opacity: 0.9; } .hazard-icons { position: absolute; bottom: 2px; right: 2px; display: flex; gap: 1px; } .hazard-icon { width: 8px; height: 8px; display: flex; align-items: center; justify-content: center; } .hazard-icon svg { width: 100%; height: 100%; } .extremely-dangerous { background-color: var(--danger-color); border: 1px solid rgba(255, 255, 255, 0.2); } .dangerous { background-color: var(--warning-color); border: 1px solid rgba(255, 255, 255, 0.2); } .caution { background-color: var(--caution-color); border: 1px solid rgba(255, 255, 255, 0.2); } .safe { background-color: var(--safe-color); border: 1px solid rgba(255, 255, 255, 0.2); } .element-details { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--secondary-color); padding: 20px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); width: 90%; max-width: 350px; max-height: 80vh; overflow-y: auto; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .element-details.active { opacity: 1; visibility: visible; } .details-header { display: flex; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .details-symbol { font-size: 2rem; font-weight: bold; margin-right: 15px; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } .details-name-number { flex: 1; } .details-name { font-size: 1.3rem; margin-bottom: 5px; } .details-number { opacity: 0.8; font-size: 0.9rem; } .details-hazards { margin-bottom: 15px; } .hazard-title { font-weight: bold; margin-bottom: 5px; font-size: 0.9rem; } .hazard-list { list-style-type: none; font-size: 0.85rem; } .hazard-list li { margin-bottom: 5px; display: flex; align-items: center; } .hazard-list li::before { content: "•"; margin-right: 8px; font-size: 1.2rem; line-height: 0; } .details-safety { margin-bottom: 15px; font-size: 0.85rem; } .safety-title { font-weight: bold; margin-bottom: 5px; font-size: 0.9rem; } .safety-info { line-height: 1.4; } .close-details { position: absolute; top: 10px; right: 10px; background: none; border: none; color: var(--text-color); font-size: 1.5rem; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; transition: all 0.2s ease; } .close-details:hover { background-color: rgba(255, 255, 255, 0.1); } .overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 999; opacity: 0; visibility: hidden; transition: all 0.3s ease; backdrop-filter: blur(3px); } .overlay.active { opacity: 1; visibility: visible; } .search-controls { display: flex; justify-content: center; margin-bottom: 15px; width: 100%; } .search-input { padding: 8px 12px; border-radius: 20px; border: none; background-color: var(--secondary-color); color: var(--text-color); font-size: 0.85rem; width: 200px; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.1); } .search-input:focus { outline: none; width: 220px; box-shadow: 0 0 0 2px rgba(230, 230, 230, 0.2); } .filter-buttons { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; } .filter-button { padding: 5px 10px; border: none; border-radius: 15px; font-size: 0.75rem; cursor: pointer; transition: all 0.2s ease; background-color: var(--secondary-color); color: var(--text-color); border: 1px solid rgba(255, 255, 255, 0.1); } .filter-button.active { transform: scale(1.05); } .filter-button:hover { transform: translateY(-2px); } .filter-button[data-filter="extremely-dangerous"] { background-color: rgba(233, 69, 96, 0.2); border: 1px solid var(--danger-color); } .filter-button[data-filter="extremely-dangerous"].active { background-color: var(--danger-color); } .filter-button[data-filter="dangerous"] { background-color: rgba(247, 183, 49, 0.2); border: 1px solid var(--warning-color); } .filter-button[data-filter="dangerous"].active { background-color: var(--warning-color); } .filter-button[data-filter="caution"] { background-color: rgba(38, 166, 154, 0.2); border: 1px solid var(--caution-color); } .filter-button[data-filter="caution"].active { background-color: var(--caution-color); } .filter-button[data-filter="safe"] { background-color: rgba(102, 187, 106, 0.2); border: 1px solid var(--safe-color); } .filter-button[data-filter="safe"].active { background-color: var(--safe-color); } .filter-button[data-filter="all"] { background-color: var(--accent-color); } .filter-button[data-filter="all"].active { background-color: var(--accent-color); box-shadow: 0 0 5px var(--accent-color); } .empty-spaces { visibility: hidden; } .lanthanide-note, .actinide-note { grid-column: span 3; font-size: 0.6rem; display: flex; align-items: center; justify-content: center; opacity: 0.7; border: 1px dashed rgba(255, 255, 255, 0.2); border-radius: 4px; } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @media (max-width: 600px) { .periodic-table { grid-gap: 2px; } .element { padding: 2px; font-size: clamp(0.4rem, 1vw, 0.6rem); } .element-symbol { font-size: 1em; } .element-number { font-size: 0.6em; } .hazard-icons { bottom: 1px; right: 1px; } .hazard-icon { width: 6px; height: 6px; } h1 { font-size: 1.5rem; } .subheading { font-size: 0.8rem; } .legend-item { font-size: 0.7rem; } .search-input { width: 150px; padding: 6px 10px; font-size: 0.8rem; } .search-input:focus { width: 170px; } .filter-button { padding: 4px 8px; font-size: 0.7rem; } } @media (max-width: 400px) { .periodic-table { grid-gap: 1px; } .element { padding: 1px; font-size: 0.4rem; } .hazard-icon { width: 4px; height: 4px; } } </style> </head> <body> <div class="container"> <header> <h1>Chemical Safety Periodic Table</h1> <p class="subheading">Interactive guide to element hazards, safety precautions, and handling protocols for laboratory and industrial use</p> </header> <div class="search-controls"> <input type="text" class="search-input" placeholder="Search by element name or symbol..."> </div> <div class="filter-buttons"> <button class="filter-button active" data-filter="all">All Elements</button> <button class="filter-button" data-filter="extremely-dangerous">Extremely Dangerous</button> <button class="filter-button" data-filter="dangerous">Dangerous</button> <button class="filter-button" data-filter="caution">Caution</button> <button class="filter-button" data-filter="safe">Safe</button> </div> <div class="legend"> <div class="legend-item"> <div class="legend-color extremely-dangerous"></div> <span>Extremely Dangerous</span> </div> <div class="legend-item"> <div class="legend-color dangerous"></div> <span>Dangerous</span> </div> <div class="legend-item"> <div class="legend-color caution"></div> <span>Caution</span> </div> <div class="legend-item"> <div class="legend-color safe"></div> <span>Safe</span> </div> </div> <div class="periodic-table" id="periodic-table"> <!-- Elements will be added via JavaScript --> </div> </div> <div class="element-details" id="element-details"> <button class="close-details">×</button> <div class="details-header"> <div class="details-symbol" id="details-symbol">H</div> <div class="details-name-number"> <div class="details-name" id="details-name">Hydrogen</div> <div class="details-number" id="details-number">Element 1</div> </div> </div> <div class="details-hazards"> <div class="hazard-title">Hazard Classification:</div> <div id="details-hazard-rating"></div> <ul class="hazard-list" id="details-hazards"></ul> </div> <div class="details-safety"> <div class="safety-title">Safety Guidelines:</div> <div class="safety-info" id="details-safety"></div> </div> </div> <div class="overlay" id="overlay"></div> <script> document.addEventListener('DOMContentLoaded', function() { const elementsData = [ { number: 1, symbol: 'H', name: 'Hydrogen', position: { row: 1, col: 1 }, hazardLevel: 'dangerous', hazards: ['Highly flammable', 'Can form explosive mixtures with air', 'Asphyxiant in high concentrations'], hazardIcons: ['flame'], safety: 'Store in well-ventilated area away from heat sources. Use non-sparking tools. Keep away from oxidizing agents. Handle under inert gas.' }, { number: 2, symbol: 'He', name: 'Helium', position: { row: 1, col: 18 }, hazardLevel: 'safe', hazards: ['Simple asphyxiant in confined spaces', 'Cryogenic hazard when liquid'], hazardIcons: ['lowTemp'], safety: 'Ensure adequate ventilation. Use protective gloves when handling liquid form. Store in cool, dry place.' }, { number: 3, symbol: 'Li', name: 'Lithium', position: { row: 2, col: 1 }, hazardLevel: 'dangerous', hazards: ['Highly reactive with water', 'Burns with intense heat', 'Corrosive to tissue'], hazardIcons: ['corrosive', 'flame'], safety: 'Store under mineral oil. Keep away from water, acids, and oxidizers. Use face shield, gloves, and fire-resistant clothing when handling.' }, { number: 4, symbol: 'Be', name: 'Beryllium', position: { row: 2, col: 2 }, hazardLevel: 'extremely-dangerous', hazards: ['Highly toxic by inhalation', 'Known carcinogen', 'Can cause chronic beryllium disease'], hazardIcons: ['toxic', 'health'], safety: 'Use specialized containment systems. Full PPE required. Medical monitoring for workers. Avoid creating dust or fumes.' }, { number: 5, symbol: 'B', name: 'Boron', position: { row: 2, col: 13 }, hazardLevel: 'caution', hazards: ['Irritant to eyes, skin and respiratory system', 'May cause harm if ingested in large amounts'], hazardIcons: ['irritant'], safety: 'Use dust mask and gloves. Ensure good ventilation. Wash hands thoroughly after handling.' }, { number: 6, symbol: 'C', name: 'Carbon', position: { row: 2, col: 14 }, hazardLevel: 'caution', hazards: ['Combustible dust hazard', 'May cause respiratory irritation'], hazardIcons: ['dust'], safety: 'Avoid dust generation. Use appropriate dust mask. Keep away from ignition sources.' }, { number: 7, symbol: 'N', name: 'Nitrogen', position: { row: 2, col: 15 }, hazardLevel: 'caution', hazards: ['Asphyxiant gas', 'Cryogenic hazard in liquid form'], hazardIcons: ['lowTemp'], safety: 'Use in well-ventilated area. Wear cryogenic gloves when handling liquid form. Monitor oxygen levels in confined spaces.' }, { number: 8, symbol: 'O', name: 'Oxygen', position: { row: 2, col: 16 }, hazardLevel: 'dangerous', hazards: ['Vigorously accelerates combustion', 'Reacts violently with oils and grease', 'Liquid form causes severe frostbite'], hazardIcons: ['oxidizer', 'lowTemp'], safety: 'Keep away from flammable materials, oils and grease. Use oil-free equipment. Store in well-ventilated area.' }, { number: 9, symbol: 'F', name: 'Fluorine', position: { row: 2, col: 17 }, hazardLevel: 'extremely-dangerous', hazards: ['Extremely corrosive', 'Highly toxic', 'Violent reactions with most materials'], hazardIcons: ['corrosive', 'toxic'], safety: 'Specialized handling equipment required. Full body protection. Work in fume hood. Emergency protocols must be in place.' }, { number: 10, symbol: 'Ne', name: 'Neon', position: { row: 2, col: 18 }, hazardLevel: 'safe', hazards: ['Simple asphyxiant at high concentrations'], hazardIcons: [], safety: 'Standard gas cylinder handling procedures. Ensure adequate ventilation.' }, { number: 11, symbol: 'Na', name: 'Sodium', position: { row: 3, col: 1 }, hazardLevel: 'dangerous', hazards: ['Violently reacts with water', 'Highly flammable', 'Causes severe burns'], hazardIcons: ['flame', 'corrosive'], safety: 'Store under mineral oil. Keep away from water and acids. Use face shield and fire-resistant gloves. Have class D fire extinguisher nearby.' }, { number: 12, symbol: 'Mg', name: 'Magnesium', position: { row: 3, col: 2 }, hazardLevel: 'dangerous', hazards: ['Flammable solid, especially as powder', 'Burns with intense light', 'Water reactive'], hazardIcons: ['flame'], safety: 'Keep away from water and acids. Store in dry area. Have class D fire extinguisher available. Avoid creating dust.' }, { number: 13, symbol: 'Al', name: 'Aluminum', position: { row: 3, col: 13 }, hazardLevel: 'caution', hazards: ['Combustible dust hazard', 'Reacts with strong acids and bases'], hazardIcons: ['dust'], safety: 'Avoid dust formation. Keep away from strong acids and oxidizers. Use appropriate dust collection systems when machining.' }, { number: 14, symbol: 'Si', name: 'Silicon', position: { row: 3, col: 14 }, hazardLevel: 'caution', hazards: ['Dust may cause respiratory irritation', 'Can form explosive dust-air mixtures'], hazardIcons: ['dust'], safety: 'Use dust mask and local exhaust ventilation. Avoid dust accumulation. Practice good housekeeping.' }, { number: 15, symbol: 'P', name: 'Phosphorus', position: { row: 3, col: 15 }, hazardLevel: 'extremely-dangerous', hazards: ['White form ignites spontaneously in air', 'Toxic', 'Causes severe burns'], hazardIcons: ['flame', 'toxic', 'corrosive'], safety: 'Store under water in sealed containers. Handle in inert atmosphere. Use face shield and chemical-resistant gloves. Have burn treatment supplies ready.' }, { number: 16, symbol: 'S', name: 'Sulfur', position: { row: 3, col: 16 }, hazardLevel: 'caution', hazards: ['Combustible dust', 'Irritant to eyes and respiratory system', 'Burns, producing toxic SO₂'], hazardIcons: ['irritant', 'flame'], safety: 'Avoid dust formation. Keep away from oxidizers and heat sources. Use dust mask and safety glasses.' }, { number: 17, symbol: 'Cl', name: 'Chlorine', position: { row: 3, col: 17 }, hazardLevel: 'extremely-dangerous', hazards: ['Highly toxic gas', 'Strong oxidizer', 'Severe respiratory and eye irritant'], hazardIcons: ['toxic', 'oxidizer', 'corrosive'], safety: 'Use in fume hood or with gas handling system. Have emergency response plan. Use respiratory protection. Keep away from reducers and flammables.' }, { number: 18, symbol: 'Ar', name: 'Argon', position: { row: 3, col: 18 }, hazardLevel: 'safe', hazards: ['Simple asphyxiant at high concentrations'], hazardIcons: [], safety: 'Ensure adequate ventilation. Monitor oxygen levels in confined spaces. Use standard compressed gas handling procedures.' }, { number: 19, symbol: 'K', name: 'Potassium', position: { row: 4, col: 1 }, hazardLevel: 'extremely-dangerous', hazards: ['Violently reacts with water', 'Highly flammable', 'Causes severe burns'], hazardIcons: ['flame', 'corrosive'], safety: 'Store under mineral oil. Never use water to extinguish fires. Use face shield, fire-resistant clothing, and dry gloves. Have class D fire extinguisher nearby.' }, { number: 20, symbol: 'Ca', name: 'Calcium', position: { row: 4, col: 2 }, hazardLevel: 'dangerous', hazards: ['Reacts with water', 'Flammable solid', 'Causes skin burns'], hazardIcons: ['flame', 'corrosive'], safety: 'Store in airtight container. Keep away from water, acids, and oxidizers. Handle with dry gloves and face protection.' }, { number: 21, symbol: 'Sc', name: 'Scandium', position: { row: 4, col: 3 }, hazardLevel: 'caution', hazards: ['Fine powders may ignite', 'May cause skin and eye irritation'], hazardIcons: ['irritant'], safety: 'Avoid dust formation. Use protective gloves and eye protection. Keep away from open flames and oxidizers.' }, { number: 22, symbol: 'Ti', name: 'Titanium', position: { row: 4, col: 4 }, hazardLevel: 'dangerous', hazards: ['Fine powder is pyrophoric', 'Dust explosion hazard', 'Reacts with oxidizers'], hazardIcons: ['flame'], safety: 'Avoid dust accumulation. Handle powder under inert gas. Keep away from heat and oxidizers. Use non-sparking tools.' }, { number: 23, symbol: 'V', name: 'Vanadium', position: { row: 4, col: 5 }, hazardLevel: 'dangerous', hazards: ['Toxic by inhalation and ingestion', 'Compounds can cause respiratory issues', 'May cause skin and eye irritation'], hazardIcons: ['toxic', 'irritant'], safety: 'Use respiratory protection and gloves. Handle vanadium compounds in fume hood. Avoid dust generation.' }, { number: 24, symbol: 'Cr', name: 'Chromium', position: { row: 4, col: 6 }, hazardLevel: 'dangerous', hazards: ['Hexavalent compounds are carcinogenic', 'Dust can cause lung damage', 'Powder may be pyrophoric'], hazardIcons: ['health', 'flame'], safety: 'Minimize dust creation. Use local exhaust ventilation. Test for hexavalent forms when working with chromium compounds.' }, { number: 25, symbol: 'Mn', name: 'Manganese', position: { row: 4, col: 7 }, hazardLevel: 'dangerous', hazards: ['Chronic exposure affects nervous system', 'Dust is harmful if inhaled', 'Fine powder may ignite'], hazardIcons: ['health', 'dust'], safety: 'Use proper ventilation and dust collection. Limit exposure duration. Regular medical monitoring for chronic exposure.' }, { number: 26, symbol: 'Fe', name: 'Iron', position: { row: 4, col: 8 }, hazardLevel: 'caution', hazards: ['Fine powder may be pyrophoric', 'Dust may cause respiratory irritation'], hazardIcons: ['dust'], safety: 'Avoid dust formation. Keep fine powders away from ignition sources. Use appropriate dust collection when grinding.' }, { number: 27, symbol: 'Co', name: 'Cobalt', position: { row: 4, col: 9 }, hazardLevel: 'dangerous', hazards: ['Potentially carcinogenic', 'May cause sensitization by skin contact', 'Harmful if inhaled'], hazardIcons: ['health', 'toxic'], safety: 'Use respiratory protection and gloves. Avoid dust creation. Regular medical monitoring for occupational exposure.' }, { number: 28, symbol: 'Ni', name: 'Nickel', position: { row: 4, col: 10 }, hazardLevel: 'dangerous', hazards: ['Known carcinogen', 'May cause skin sensitization', 'Toxic to aquatic life'], hazardIcons: ['health', 'irritant'], safety: 'Minimize skin contact and dust inhalation. Use local exhaust ventilation. Regular medical monitoring for occupational exposure.' }, { number: 29, symbol: 'Cu', name: 'Copper', position: { row: 4, col: 11 }, hazardLevel: 'caution', hazards: ['Dust may cause respiratory irritation', 'Fumes from heating can cause metal fume fever', 'Toxic to aquatic organisms'], hazardIcons: ['irritant'], safety: 'Use exhaust ventilation when heating or welding. Avoid dust generation. Practice good hygiene.' }, { number: 30, symbol: 'Zn', name: 'Zinc', position: { row: 4, col: 12 }, hazardLevel: 'caution', hazards: ['Fine powder may be flammable', 'Fumes may cause metal fume fever', 'Reacts with acids and alkalis'], hazardIcons: ['flame', 'irritant'], safety: 'Avoid creating dust or fumes. Use respiratory protection when welding galvanized materials. Keep away from acids.' }, { number: 31, symbol: 'Ga', name: 'Gallium', position: { row: 4, col: 13 }, hazardLevel: 'caution', hazards: ['Can cause skin irritation', 'May be harmful if ingested', 'Liquid gallium expands when freezes'], hazardIcons: ['irritant'], safety: 'Use gloves when handling. Avoid ingestion. Be aware of volume expansion when freezing.' }, { number: 32, symbol: 'Ge', name: 'Germanium', position: { row: 4, col: 14 }, hazardLevel: 'caution', hazards: ['May cause skin and eye irritation', 'Some compounds are irritating to the respiratory system'], hazardIcons: ['irritant'], safety: 'Use gloves and eye protection. Handle germanium compounds in fume hood.' }, { number: 33, symbol: 'As', name: 'Arsenic', position: { row: 4, col: 15 }, hazardLevel: 'extremely-dangerous', hazards: ['Highly toxic', 'Known carcinogen', 'Bioaccumulates in organisms'], hazardIcons: ['toxic', 'health'], safety: 'Handle in closed systems or fume hoods. Full PPE required. Medical monitoring for exposed workers. Decontaminate work surfaces.' }, { number: 34, symbol: 'Se', name: 'Selenium', position: { row: 4, col: 16 }, hazardLevel: 'dangerous', hazards: ['Toxic if inhaled or ingested', 'May cause sensitization', 'Combustible'], hazardIcons: ['toxic', 'health'], safety: 'Use respiratory protection and gloves. Ensure adequate ventilation. Avoid dust formation.' }, { number: 35, symbol: 'Br', name: 'Bromine', position: { row: 4, col: 17 }, hazardLevel: 'extremely-dangerous', hazards: ['Highly corrosive', 'Toxic by inhalation', 'Severe skin and eye damage on contact'], hazardIcons: ['corrosive', 'toxic'], safety: 'Use in fume hood. Wear chemical-resistant clothing, gloves, face shield. Have emergency eyewash and shower nearby.' }, { number: 36, symbol: 'Kr', name: 'Krypton', position: { row: 4, col: 18 }, hazardLevel: 'safe', hazards: ['Simple asphyxiant at high concentrations'], hazardIcons: [], safety: 'Ensure adequate ventilation. Follow standard compressed gas handling procedures.' }, { number: 37, symbol: 'Rb', name: 'Rubidium', position: { row: 5, col: 1 }, hazardLevel: 'extremely-dangerous', hazards: ['Violently reacts with water', 'Spontaneously ignites in air', 'Causes severe burns'], hazardIcons: ['flame', 'corrosive'], safety: 'Store under inert liquid. Never use water for fire fighting. Full face shield and protective clothing required. Have class D fire extinguisher nearby.' }, { number: 38, symbol: 'Sr', name: 'Strontium', position: { row: 5, col: 2 }, hazardLevel: 'dangerous', hazards: ['Reacts with water', 'Flammable solid', 'Can cause skin burns'], hazardIcons: ['flame', 'corrosive'], safety: 'Store in airtight container. Keep away from water and acids. Use dry gloves and eye protection when handling.' }, { number: 39, symbol: 'Y', name: 'Yttrium', position: { row: 5, col: 3 }, hazardLevel: 'caution', hazards: ['Fine powder may ignite', 'Compounds may cause skin and lung irritation'], hazardIcons: ['irritant'], safety: 'Avoid dust formation. Use respiratory protection when handling powder. Keep away from oxidizers.' }, { number: 40, symbol: 'Zr', name: 'Zirconium', position: { row: 5, col: 4 }, hazardLevel: 'dangerous', hazards: ['Fine powder is pyrophoric', 'Dust explosion hazard', 'Reacts with oxidizers'], hazardIcons: ['flame'], safety: 'Keep dust and powder away from ignition sources. Store in tightly closed container. Have class D fire extinguisher available.' }, { number: 41, symbol: 'Nb', name: 'Niobium', position: { row: 5, col: 5 }, hazardLevel: 'caution', hazards: ['Powder is flammable', 'May react with oxidizers'], hazardIcons: ['flame'], safety: 'Avoid dust formation. Keep away from oxidizers and heat sources. Use appropriate dust collection systems.' }, { number: 42, symbol: 'Mo', name: 'Molybdenum', position: { row: 5, col: 6 }, hazardLevel: 'caution', hazards: ['Fine powder may be flammable', 'Dust may cause respiratory irritation'], hazardIcons: ['dust'], safety: 'Use dust mask and local ventilation. Avoid dust accumulation. Keep powder away from ignition sources.' }, { number: 43, symbol: 'Tc', name: 'Technetium', position: { row: 5, col: 7 }, hazardLevel: 'extremely-dangerous', hazards: ['Radioactive', 'Internal radiation hazard if ingested or inhaled', 'External radiation hazard'], hazardIcons: ['radioactive'], safety: 'Specialized radiation protection protocols required. Radiation monitoring. Use gloves, lab coat, radiation shield. Limit exposure time.' }, { number: 44, symbol: 'Ru', name: 'Ruthenium', position: { row: 5, col: 8 }, hazardLevel: 'dangerous', hazards: ['Some compounds are toxic', 'RuO₄ is highly volatile and toxic', 'May cause eye and skin irritation'], hazardIcons: ['toxic'], safety: 'Handle volatile compounds in fume hood. Avoid dust formation. Use appropriate PPE.' }, { number: 45, symbol: 'Rh', name: 'Rhodium', position: { row: 5, col: 9 }, hazardLevel: 'caution', hazards: ['Some compounds may be irritating', 'Fine powder may be flammable'], hazardIcons: ['irritant'], safety: 'Use gloves and eye protection. Handle powder carefully. Avoid dust formation.' }, { number: 46, symbol: 'Pd', name: 'Palladium', position: { row: 5, col: 10 }, hazardLevel: 'caution', hazards: ['Powder may be flammable', 'Can cause allergic skin reactions'], hazardIcons: ['irritant'], safety: 'Use dust mask and gloves. Keep powder away from ignition sources. Avoid skin contact if sensitized.' }, { number: 47, symbol: 'Ag', name: 'Silver', position: { row: 5, col: 11 }, hazardLevel: 'caution', hazards: ['Compounds can cause argyria (blue-gray discoloration of skin)', 'Toxic to aquatic organisms'], hazardIcons: ['irritant'], safety: 'Use gloves when handling solutions. Avoid ingestion and skin contact with soluble compounds. Proper waste disposal.' }, { number: 48, symbol: 'Cd', name: 'Cadmium', position: { row: 5, col: 12 }, hazardLevel: 'extremely-dangerous', hazards: ['Highly toxic', 'Known carcinogen', 'Bioaccumulates in body'], hazardIcons: ['toxic', 'health'], safety: 'Handle in closed systems or fume hoods. Full respiratory protection required. Medical monitoring for exposed workers.' }, { number: 49, symbol: 'In', name: 'Indium', position: { row: 5, col: 13 }, hazardLevel: 'dangerous', hazards
<html> <head> <style> * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } :root { --bg-color: #0f172a; --primary-color: #60a5fa; --secondary-color: #3b82f6; --text-color: #f8fafc; --grid-gap: 4px; --element-size: 58px; --hover-scale: 1.2; --transition-speed: 0.5s; } body { background-color: var(--bg-color); color: var(--text-color); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100vh; overflow-x: hidden; padding: 16px; width: 100%; max-width: 700px; margin: 0 auto; } .container { width: 100%; max-width: 700px; display: flex; flex-direction: column; gap: 16px; } header { text-align: center; margin-bottom: 12px; } h1 { font-size: 24px; font-weight: 700; margin-bottom: 8px; background: linear-gradient(90deg, #60a5fa, #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent; } .controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 8px; } .property-select { background-color: rgba(30, 41, 59, 0.8); border: 1px solid #334155; border-radius: 8px; color: var(--text-color); padding: 8px 16px; font-size: 14px; cursor: pointer; transition: all 0.3s ease; } .property-select:hover, .property-select:focus { border-color: var(--primary-color); outline: none; box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2); } .legend { display: flex; justify-content: center; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; } .legend-gradient { height: 12px; width: 200px; border-radius: 6px; background: linear-gradient(90deg, #06b6d4, #8b5cf6, #f43f5e); margin: 0 8px; } .legend-labels { display: flex; justify-content: space-between; width: 200px; font-size: 12px; color: #94a3b8; } .tooltip { position: absolute; background-color: rgba(15, 23, 42, 0.95); border: 1px solid #334155; border-radius: 8px; padding: 12px; font-size: 14px; pointer-events: none; opacity: 0; transform: translateY(10px); transition: opacity 0.2s, transform 0.2s; z-index: 100; max-width: 220px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); } .tooltip h3 { font-size: 16px; margin-bottom: 6px; border-bottom: 1px solid #334155; padding-bottom: 4px; } .tooltip-property { color: var(--primary-color); font-weight: 600; } .periodic-table { display: grid; grid-template-columns: repeat(18, var(--element-size)); grid-template-rows: repeat(10, var(--element-size)); gap: var(--grid-gap); margin: 0 auto; transform-origin: top left; transition: transform 0.5s ease; } .element { width: var(--element-size); height: var(--element-size); display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: rgba(30, 41, 59, 0.7); border-radius: 6px; padding: 4px; cursor: pointer; position: relative; overflow: hidden; transition: transform var(--transition-speed) cubic-bezier(0.34, 1.56, 0.64, 1), background-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease; } .element:hover { transform: scale(var(--hover-scale)); z-index: 10; box-shadow: 0 0 15px rgba(96, 165, 250, 0.5); } .element-symbol { font-weight: 700; font-size: 16px; margin-bottom: 2px; } .element-number { position: absolute; top: 2px; left: 5px; font-size: 8px; opacity: 0.8; } .element-name { font-size: 7px; text-align: center; margin-top: -2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .element-value { font-size: 9px; margin-top: 2px; opacity: 0.9; } .element:hover .element-name { overflow: visible; white-space: normal; } .category-labels { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 15px; font-size: 12px; } .category-label { display: flex; align-items: center; gap: 6px; } .category-color { width: 12px; height: 12px; border-radius: 50%; } .reset-zoom { padding: 6px 12px; border-radius: 6px; background-color: rgba(30, 41, 59, 0.8); border: 1px solid #334155; color: var(--text-color); cursor: pointer; font-size: 12px; transition: all 0.3s ease; margin-top: 10px; display: none; } .reset-zoom:hover { background-color: rgba(30, 41, 59, 1); border-color: var(--primary-color); } .loading { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--bg-color); display: flex; justify-content: center; align-items: center; z-index: 1000; } .loader { width: 50px; height: 50px; border: 3px solid rgba(150, 150, 150, 0.2); border-radius: 50%; border-top-color: var(--primary-color); animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 700px) { :root { --element-size: 38px; --grid-gap: 3px; } .element-symbol { font-size: 12px; } .element-number { font-size: 7px; } .element-name { font-size: 6px; } .element-value { font-size: 7px; } h1 { font-size: 20px; } .legend-gradient { width: 150px; } .legend-labels { width: 150px; } } @media (max-width: 500px) { :root { --element-size: 25px; --grid-gap: 2px; --hover-scale: 1.6; } .element-symbol { font-size: 9px; } .element-number { font-size: 5px; } .element-name, .element-value { font-size: 0px; } .element:hover .element-name, .element:hover .element-value { font-size: 6px; } } </style> </head> <body> <div class="loading"> <div class="loader"></div> </div> <div class="container"> <header> <h1>Interactive Periodic Table</h1> <p>Explore elemental properties through dynamic visualizations</p> </header> <div class="controls"> <select id="property-select" class="property-select"> <option value="electronegativity">Electronegativity (Pauling)</option> <option value="atomicRadius">Atomic Radius (pm)</option> <option value="ionizationEnergy">Ionization Energy (eV)</option> <option value="density">Density (g/cm³)</option> <option value="meltingPoint">Melting Point (K)</option> <option value="electronAffinity">Electron Affinity (eV)</option> </select> <select id="category-select" class="property-select"> <option value="none">No Category Highlights</option> <option value="group">Group (Column)</option> <option value="category">Element Category</option> <option value="state">Physical State (293K)</option> <option value="period">Period (Row)</option> </select> </div> <div class="legend"> <span id="min-value">Min</span> <div class="legend-gradient" id="gradient"></div> <span id="max-value">Max</span> </div> <div class="legend-labels"> <span id="low-label">Lower</span> <span id="high-label">Higher</span> </div> <div id="periodic-table" class="periodic-table"></div> <button id="reset-zoom" class="reset-zoom">Reset Zoom</button> <div id="category-labels" class="category-labels"></div> </div> <div id="tooltip" class="tooltip"></div> <script> // Element data const elementsData = [ { atomicNumber: 1, symbol: 'H', name: 'Hydrogen', category: 'nonmetal', group: 1, period: 1, electronegativity: 2.20, atomicRadius: 38, ionizationEnergy: 13.598, density: 0.00008988, meltingPoint: 14.01, electronAffinity: 0.754, state: 'gas', x: 0, y: 0 }, { atomicNumber: 2, symbol: 'He', name: 'Helium', category: 'noble gas', group: 18, period: 1, electronegativity: null, atomicRadius: 32, ionizationEnergy: 24.587, density: 0.0001785, meltingPoint: 0.95, electronAffinity: -0.5, state: 'gas', x: 17, y: 0 }, { atomicNumber: 3, symbol: 'Li', name: 'Lithium', category: 'alkali metal', group: 1, period: 2, electronegativity: 0.98, atomicRadius: 152, ionizationEnergy: 5.392, density: 0.534, meltingPoint: 453.69, electronAffinity: 0.618, state: 'solid', x: 0, y: 1 }, { atomicNumber: 4, symbol: 'Be', name: 'Beryllium', category: 'alkaline earth metal', group: 2, period: 2, electronegativity: 1.57, atomicRadius: 112, ionizationEnergy: 9.323, density: 1.85, meltingPoint: 1560, electronAffinity: -0.5, state: 'solid', x: 1, y: 1 }, { atomicNumber: 5, symbol: 'B', name: 'Boron', category: 'metalloid', group: 13, period: 2, electronegativity: 2.04, atomicRadius: 85, ionizationEnergy: 8.298, density: 2.34, meltingPoint: 2349, electronAffinity: 0.277, state: 'solid', x: 12, y: 1 }, { atomicNumber: 6, symbol: 'C', name: 'Carbon', category: 'nonmetal', group: 14, period: 2, electronegativity: 2.55, atomicRadius: 77, ionizationEnergy: 11.260, density: 2.267, meltingPoint: 3800, electronAffinity: 1.263, state: 'solid', x: 13, y: 1 }, { atomicNumber: 7, symbol: 'N', name: 'Nitrogen', category: 'nonmetal', group: 15, period: 2, electronegativity: 3.04, atomicRadius: 75, ionizationEnergy: 14.534, density: 0.0012506, meltingPoint: 63.15, electronAffinity: -0.07, state: 'gas', x: 14, y: 1 }, { atomicNumber: 8, symbol: 'O', name: 'Oxygen', category: 'nonmetal', group: 16, period: 2, electronegativity: 3.44, atomicRadius: 73, ionizationEnergy: 13.618, density: 0.001429, meltingPoint: 54.36, electronAffinity: 1.461, state: 'gas', x: 15, y: 1 }, { atomicNumber: 9, symbol: 'F', name: 'Fluorine', category: 'halogen', group: 17, period: 2, electronegativity: 3.98, atomicRadius: 71, ionizationEnergy: 17.423, density: 0.001696, meltingPoint: 53.53, electronAffinity: 3.339, state: 'gas', x: 16, y: 1 }, { atomicNumber: 10, symbol: 'Ne', name: 'Neon', category: 'noble gas', group: 18, period: 2, electronegativity: null, atomicRadius: 69, ionizationEnergy: 21.565, density: 0.0008999, meltingPoint: 24.56, electronAffinity: -0.3, state: 'gas', x: 17, y: 1 }, { atomicNumber: 11, symbol: 'Na', name: 'Sodium', category: 'alkali metal', group: 1, period: 3, electronegativity: 0.93, atomicRadius: 186, ionizationEnergy: 5.139, density: 0.971, meltingPoint: 370.87, electronAffinity: 0.548, state: 'solid', x: 0, y: 2 }, { atomicNumber: 12, symbol: 'Mg', name: 'Magnesium', category: 'alkaline earth metal', group: 2, period: 3, electronegativity: 1.31, atomicRadius: 160, ionizationEnergy: 7.646, density: 1.738, meltingPoint: 923, electronAffinity: -0.4, state: 'solid', x: 1, y: 2 }, { atomicNumber: 13, symbol: 'Al', name: 'Aluminum', category: 'post-transition metal', group: 13, period: 3, electronegativity: 1.61, atomicRadius: 143, ionizationEnergy: 5.986, density: 2.698, meltingPoint: 933.47, electronAffinity: 0.441, state: 'solid', x: 12, y: 2 }, { atomicNumber: 14, symbol: 'Si', name: 'Silicon', category: 'metalloid', group: 14, period: 3, electronegativity: 1.90, atomicRadius: 111, ionizationEnergy: 8.152, density: 2.3296, meltingPoint: 1687, electronAffinity: 1.385, state: 'solid', x: 13, y: 2 }, { atomicNumber: 15, symbol: 'P', name: 'Phosphorus', category: 'nonmetal', group: 15, period: 3, electronegativity: 2.19, atomicRadius: 106, ionizationEnergy: 10.487, density: 1.82, meltingPoint: 317.3, electronAffinity: 0.746, state: 'solid', x: 14, y: 2 }, { atomicNumber: 16, symbol: 'S', name: 'Sulfur', category: 'nonmetal', group: 16, period: 3, electronegativity: 2.58, atomicRadius: 102, ionizationEnergy: 10.360, density: 2.067, meltingPoint: 388.36, electronAffinity: 2.077, state: 'solid', x: 15, y: 2 }, { atomicNumber: 17, symbol: 'Cl', name: 'Chlorine', category: 'halogen', group: 17, period: 3, electronegativity: 3.16, atomicRadius: 99, ionizationEnergy: 12.968, density: 0.003214, meltingPoint: 171.6, electronAffinity: 3.617, state: 'gas', x: 16, y: 2 }, { atomicNumber: 18, symbol: 'Ar', name: 'Argon', category: 'noble gas', group: 18, period: 3, electronegativity: null, atomicRadius: 97, ionizationEnergy: 15.760, density: 0.0017837, meltingPoint: 83.8, electronAffinity: -0.4, state: 'gas', x: 17, y: 2 }, { atomicNumber: 19, symbol: 'K', name: 'Potassium', category: 'alkali metal', group: 1, period: 4, electronegativity: 0.82, atomicRadius: 227, ionizationEnergy: 4.341, density: 0.862, meltingPoint: 336.53, electronAffinity: 0.501, state: 'solid', x: 0, y: 3 }, { atomicNumber: 20, symbol: 'Ca', name: 'Calcium', category: 'alkaline earth metal', group: 2, period: 4, electronegativity: 1.00, atomicRadius: 197, ionizationEnergy: 6.113, density: 1.54, meltingPoint: 1115, electronAffinity: 0.018, state: 'solid', x: 1, y: 3 }, { atomicNumber: 21, symbol: 'Sc', name: 'Scandium', category: 'transition metal', group: 3, period: 4, electronegativity: 1.36, atomicRadius: 162, ionizationEnergy: 6.561, density: 2.989, meltingPoint: 1814, electronAffinity: 0.188, state: 'solid', x: 2, y: 3 }, { atomicNumber: 22, symbol: 'Ti', name: 'Titanium', category: 'transition metal', group: 4, period: 4, electronegativity: 1.54, atomicRadius: 147, ionizationEnergy: 6.828, density: 4.54, meltingPoint: 1941, electronAffinity: 0.079, state: 'solid', x: 3, y: 3 }, { atomicNumber: 23, symbol: 'V', name: 'Vanadium', category: 'transition metal', group: 5, period: 4, electronegativity: 1.63, atomicRadius: 134, ionizationEnergy: 6.746, density: 6.11, meltingPoint: 2183, electronAffinity: 0.525, state: 'solid', x: 4, y: 3 }, { atomicNumber: 24, symbol: 'Cr', name: 'Chromium', category: 'transition metal', group: 6, period: 4, electronegativity: 1.66, atomicRadius: 128, ionizationEnergy: 6.767, density: 7.15, meltingPoint: 2180, electronAffinity: 0.666, state: 'solid', x: 5, y: 3 }, { atomicNumber: 25, symbol: 'Mn', name: 'Manganese', category: 'transition metal', group: 7, period: 4, electronegativity: 1.55, atomicRadius: 127, ionizationEnergy: 7.434, density: 7.44, meltingPoint: 1519, electronAffinity: -0.5, state: 'solid', x: 6, y: 3 }, { atomicNumber: 26, symbol: 'Fe', name: 'Iron', category: 'transition metal', group: 8, period: 4, electronegativity: 1.83, atomicRadius: 126, ionizationEnergy: 7.902, density: 7.874, meltingPoint: 1811, electronAffinity: 0.163, state: 'solid', x: 7, y: 3 }, { atomicNumber: 27, symbol: 'Co', name: 'Cobalt', category: 'transition metal', group: 9, period: 4, electronegativity: 1.88, atomicRadius: 125, ionizationEnergy: 7.881, density: 8.86, meltingPoint: 1768, electronAffinity: 0.661, state: 'solid', x: 8, y: 3 }, { atomicNumber: 28, symbol: 'Ni', name: 'Nickel', category: 'transition metal', group: 10, period: 4, electronegativity: 1.91, atomicRadius: 124, ionizationEnergy: 7.640, density: 8.912, meltingPoint: 1728, electronAffinity: 1.156, state: 'solid', x: 9, y: 3 }, { atomicNumber: 29, symbol: 'Cu', name: 'Copper', category: 'transition metal', group: 11, period: 4, electronegativity: 1.90, atomicRadius: 128, ionizationEnergy: 7.726, density: 8.96, meltingPoint: 1357.77, electronAffinity: 1.228, state: 'solid', x: 10, y: 3 }, { atomicNumber: 30, symbol: 'Zn', name: 'Zinc', category: 'transition metal', group: 12, period: 4, electronegativity: 1.65, atomicRadius: 134, ionizationEnergy: 9.394, density: 7.134, meltingPoint: 692.68, electronAffinity: -0.6, state: 'solid', x: 11, y: 3 }, { atomicNumber: 31, symbol: 'Ga', name: 'Gallium', category: 'post-transition metal', group: 13, period: 4, electronegativity: 1.81, atomicRadius: 135, ionizationEnergy: 5.999, density: 5.907, meltingPoint: 302.9146, electronAffinity: 0.3, state: 'solid', x: 12, y: 3 }, { atomicNumber: 32, symbol: 'Ge', name: 'Germanium', category: 'metalloid', group: 14, period: 4, electronegativity: 2.01, atomicRadius: 122, ionizationEnergy: 7.900, density: 5.323, meltingPoint: 1211.4, electronAffinity: 1.35, state: 'solid', x: 13, y: 3 }, { atomicNumber: 33, symbol: 'As', name: 'Arsenic', category: 'metalloid', group: 15, period: 4, electronegativity: 2.18, atomicRadius: 120, ionizationEnergy: 9.815, density: 5.776, meltingPoint: 1090, electronAffinity: 0.81, state: 'solid', x: 14, y: 3 }, { atomicNumber: 34, symbol: 'Se', name: 'Selenium', category: 'nonmetal', group: 16, period: 4, electronegativity: 2.55, atomicRadius: 116, ionizationEnergy: 9.752, density: 4.809, meltingPoint: 494, electronAffinity: 2.021, state: 'solid', x: 15, y: 3 }, { atomicNumber: 35, symbol: 'Br', name: 'Bromine', category: 'halogen', group: 17, period: 4, electronegativity: 2.96, atomicRadius: 114, ionizationEnergy: 11.814, density: 3.122, meltingPoint: 265.8, electronAffinity: 3.365, state: 'liquid', x: 16, y: 3 }, { atomicNumber: 36, symbol: 'Kr', name: 'Krypton', category: 'noble gas', group: 18, period: 4, electronegativity: 3.00, atomicRadius: 110, ionizationEnergy: 14.000, density: 0.003733, meltingPoint: 115.79, electronAffinity: -0.4, state: 'gas', x: 17, y: 3 }, { atomicNumber: 37, symbol: 'Rb', name: 'Rubidium', category: 'alkali metal', group: 1, period: 5, electronegativity: 0.82, atomicRadius: 248, ionizationEnergy: 4.177, density: 1.532, meltingPoint: 312.46, electronAffinity: 0.468, state: 'solid', x: 0, y: 4 }, { atomicNumber: 38, symbol: 'Sr', name: 'Strontium', category: 'alkaline earth metal', group: 2, period: 5, electronegativity: 0.95, atomicRadius: 215, ionizationEnergy: 5.695, density: 2.64, meltingPoint: 1050, electronAffinity: 0.05, state: 'solid', x: 1, y: 4 }, { atomicNumber: 39, symbol: 'Y', name: 'Yttrium', category: 'transition metal', group: 3, period: 5, electronegativity: 1.22, atomicRadius: 180, ionizationEnergy: 6.217, density: 4.469, meltingPoint: 1799, electronAffinity: 0.307, state: 'solid', x: 2, y: 4 }, { atomicNumber: 40, symbol: 'Zr', name: 'Zirconium', category: 'transition metal', group: 4, period: 5, electronegativity: 1.33, atomicRadius: 160, ionizationEnergy: 6.634, density: 6.506, meltingPoint: 2128, electronAffinity: 0.426, state: 'solid', x: 3, y: 4 }, { atomicNumber: 41, symbol: 'Nb', name: 'Niobium', category: 'transition metal', group: 5, period: 5, electronegativity: 1.6, atomicRadius: 146, ionizationEnergy: 6.759, density: 8.57, meltingPoint: 2750, electronAffinity: 0.893, state: 'solid', x: 4, y: 4 }, { atomicNumber: 42, symbol: 'Mo', name: 'Molybdenum', category: 'transition metal', group: 6, period: 5, electronegativity: 2.16, atomicRadius: 139, ionizationEnergy: 7.092, density: 10.22, meltingPoint: 2896, electronAffinity: 0.746, state: 'solid', x: 5, y: 4 }, { atomicNumber: 43, symbol: 'Tc', name: 'Technetium', category: 'transition metal', group: 7, period: 5, electronegativity: 1.9, atomicRadius: 136, ionizationEnergy: 7.28, density: 11.5, meltingPoint: 2430, electronAffinity: 0.55, state: 'solid', x: 6, y: 4 }, { atomicNumber: 44, symbol: 'Ru', name: 'Ruthenium', category: 'transition metal', group: 8, period: 5, electronegativity: 2.2, atomicRadius: 134, ionizationEnergy: 7.361, density: 12.37, meltingPoint: 2607, electronAffinity: 1.05, state: 'solid', x: 7, y: 4 }, { atomicNumber: 45, symbol: 'Rh', name: 'Rhodium', category: 'transition metal', group: 9, period: 5, electronegativity: 2.28, atomicRadius: 134, ionizationEnergy: 7.459, density: 12.41, meltingPoint: 2237, electronAffinity: 1.137, state: 'solid', x: 8, y: 4 }, { atomicNumber: 46, symbol: 'Pd', name: 'Palladium', category: 'transition metal', group: 10, period: 5, electronegativity: 2.20, atomicRadius: 137, ionizationEnergy: 8.337, density: 12.02, meltingPoint: 1828.05, electronAffinity: 0.562, state: 'solid', x: 9, y: 4 }, { atomicNumber: 47, symbol: 'Ag', name: 'Silver', category: 'transition metal', group: 11, period: 5, electronegativity: 1.93, atomicRadius: 144, ionizationEnergy: 7.576, density: 10.501, meltingPoint: 1234.93, electronAffinity: 1.302, state: 'solid', x: 10, y: 4 }, { atomicNumber: 48, symbol: 'Cd', name: 'Cadmium', category: 'transition metal', group: 12, period: 5, electronegativity: 1.69, atomicRadius: 151, ionizationEnergy: 8.994, density: 8.69, meltingPoint: 594.22, electronAffinity: -0.7, state: 'solid', x: 11, y: 4 }, { atomicNumber: 49, symbol: 'In', name: 'Indium', category: 'post-transition metal', group: 13, period: 5, electronegativity: 1.78, atomicRadius: 167, ionizationEnergy: 5.786, density: 7.31, meltingPoint: 429.75, electronAffinity: 0.3, state: 'solid', x: 12, y: 4 }, { atomicNumber: 50, symbol: 'Sn', name: 'Tin', category: 'post-transition metal', group: 14, period: 5, electronegativity: 1.96, atomicRadius: 140, ionizationEnergy: 7.344, density: 7.287, meltingPoint: 505.08, electronAffinity: 1.2, state: 'solid', x: 13, y: 4 }, { atomicNumber: 51, symbol: 'Sb', name: 'Antimony', category: 'metalloid', group: 15, period: 5, electronegativity: 2.05, atomicRadius: 140, ionizationEnergy: 8.64, density: 6.685, meltingPoint: 903.78, electronAffinity: 1.07, state: 'solid', x: 14, y: 4 }, { atomicNumber: 52, symbol: 'Te', name: 'Tellurium', category: 'metalloid', group: 16, period: 5, electronegativity: 2.1, atomicRadius: 142, ionizationEnergy: 9.010, density: 6.232, meltingPoint: 722.66, electronAffinity: 1.971, state: 'solid', x: 15, y: 4 }, { atomicNumber: 53, symbol: 'I', name: 'Iodine', category: 'halogen', group: 17, period: 5, electronegativity: 2.66, atomicRadius: 133, ionizationEnergy: 10.451, density: 4.93, meltingPoint: 386.85, electronAffinity: 3.059, state: 'solid', x: 16, y: 4 }, { atomicNumber: 54, symbol: 'Xe', name: 'Xenon', category: 'noble gas', group: 18, period: 5, electronegativity: 2.6, atomicRadius: 130, ionizationEnergy: 12.130, density: 0.005887, meltingPoint: 161.4, electronAffinity: -0.4, state: 'gas', x: 17, y: 4 }, { atomicNumber: 55, symbol: 'Cs', name: 'Cesium', category: 'alkali metal', group: 1, period: 6, electronegativity: 0.79, atomicRadius: 265, ionizationEnergy: 3.894, density: 1.873, meltingPoint: 301.59, electronAffinity: 0.472, state: 'solid', x: 0, y: 5 }, { atomicNumber: 56, symbol: 'Ba', name: 'Barium', category: 'alkaline earth metal', group: 2, period: 6, electronegativity: 0.89, atomicRadius: 222, ionizationEnergy: 5.212, density: 3.594, meltingPoint: 1000, electronAffinity: 0.14, state: 'solid', x: 1, y: 5 }, { atomicNumber: 57, symbol: 'La', name: 'Lanthanum', category: 'lanthanide', group: 3, period: 6, electronegativity: 1.1, atomicRadius: 187, ionizationEnergy: 5.577, density: 6.145, meltingPoint: 1193, electronAffinity: 0.5, state: 'solid', x: 2, y: 5 }, { atomicNumber: 58, symbol: 'Ce', name: 'Cerium', category: 'lanthanide', group: 0, period: 6, electronegativity: 1.12, atomicRadius: 182, ionizationEnergy: 5.539, density: 6.77, meltingPoint: 1068, electronAffinity: 0.5, state: 'solid', x: 2, y: 8 }, { atomicNumber: 59, symbol: 'Pr', name: 'Praseodymium', category: 'lanthanide', group: 0, period: 6, electronegativity: 1.13, atomicRadius: 182, ionizationEnergy: 5.473, density: 6.773, meltingPoint: 1208, electronAffinity: 0.5, state: 'solid', x: 3, y: 8 }, { atomicNumber: 60, symbol: 'Nd', name: 'Neodymium', category: 'lanthanide', group: 0, period: 6, electronegativity: 1.14, atomicRadius: 181, ionizationEnergy: 5.525, density: 7.007, meltingPoint: 1297, electronAffinity: 0.5, state: 'solid', x: 4, y: 8 }, { atomicNumber: 61, symbol: 'Pm', name: 'Promethium', category: 'lanthanide', group: 0, period: 6, electronegativity: 1.13, atomicRadius: 183, ionizationEnergy: 5.582, density: 7.26, meltingPoint: 1315, electronAffinity: 0.5, state: 'solid', x: 5, y: 8 }, { atomicNumber:
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Gamer's Science Hub - Periodic Table</title> <style> :root { --primary-color: #0eff7e; --secondary-color: #ff00ff; --tertiary-color: #00e5ff; --background-color: #05071b; --grid-hover: rgba(14, 255, 126, 0.3); --grid-lines: rgba(0, 229, 255, 0.2); --element-bg: rgba(5, 7, 27, 0.9); --metal-color: #ff6c11; --nonmetal-color: #ff00ff; --metalloid-color: #ffcc00; --noble-gas-color: #00e5ff; --alkali-metal-color: #ff3860; --alkaline-earth-color: #ff8c42; --transition-metal-color: #3d7aff; --lanthanide-color: #da70d6; --actinide-color: #ff6ec7; --halogen-color: #01c698; --post-transition-color: #8a5ce2; --unknown-color: #777777; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Rajdhani', 'Orbitron', sans-serif; } body { background-color: var(--background-color); color: #ffffff; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100vh; overflow: hidden; position: relative; background-image: radial-gradient(circle at 10% 20%, rgba(14, 255, 126, 0.05) 0%, transparent 20%), radial-gradient(circle at 90% 80%, rgba(0, 229, 255, 0.05) 0%, transparent 20%), radial-gradient(circle at 50% 50%, rgba(255, 0, 255, 0.05) 0%, transparent 30%); } .grid-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to right, var(--grid-lines) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-lines) 1px, transparent 1px); background-size: 50px 50px; z-index: -1; opacity: 0.3; pointer-events: none; } .container { width: 700px; height: 700px; padding: 10px; display: flex; flex-direction: column; overflow: hidden; position: relative; } .title-section { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 0 10px; } .hub-title { font-size: 1.8rem; font-weight: bold; color: var(--primary-color); text-shadow: 0 0 10px rgba(14, 255, 126, 0.7); letter-spacing: 2px; display: flex; align-items: center; } .hub-title::before { content: "[ "; color: var(--secondary-color); margin-right: 5px; } .hub-title::after { content: " ]"; color: var(--secondary-color); margin-left: 5px; } .hub-subtitle { font-size: 0.8rem; color: var(--tertiary-color); opacity: 0.8; margin-top: -5px; padding-left: 5px; } .legend { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 5px; padding: 5px; border: 1px solid var(--grid-lines); border-radius: 5px; background: rgba(5, 7, 27, 0.7); } .legend-item { display: flex; align-items: center; font-size: 0.6rem; margin-right: 5px; } .legend-color { width: 10px; height: 10px; margin-right: 3px; border-radius: 2px; } .periodic-table { display: grid; grid-template-columns: repeat(18, 1fr); grid-template-rows: repeat(10, 1fr); gap: 3px; flex: 1; transform-origin: center; overflow: auto; } .element { background-color: var(--element-bg); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 3px; display: flex; flex-direction: column; justify-content: space-between; padding: 3px; position: relative; cursor: pointer; transition: all 0.3s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); overflow: hidden; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } .element::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%); z-index: 1; opacity: 0.3; } .element:hover { transform: scale(1.1) translateZ(0); box-shadow: 0 0 15px var(--primary-color); z-index: 10; } .element:hover::after { content: ''; position: absolute; top: -20px; left: -20px; width: calc(100% + 40px); height: calc(100% + 40px); background: radial-gradient(circle, rgba(14, 255, 126, 0.3) 0%, transparent 70%); z-index: -1; pointer-events: none; } .element-number { font-size: 0.5rem; text-align: left; color: rgba(255, 255, 255, 0.7); } .element-symbol { font-size: 0.9rem; font-weight: bold; text-align: center; margin: 1px 0; } .element-name { font-size: 0.45rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .element-weight { font-size: 0.45rem; text-align: center; color: rgba(255, 255, 255, 0.7); } .element.selected { transform: scale(1.2); z-index: 100; box-shadow: 0 0 20px var(--primary-color), 0 0 40px var(--secondary-color); } .element.locked { filter: brightness(0.3); cursor: not-allowed; } .element.locked::before { content: '🔒'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1rem; z-index: 5; } .achievement-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); background: rgba(14, 255, 126, 0.1); backdrop-filter: blur(10px); border: 1px solid var(--primary-color); box-shadow: 0 0 20px var(--primary-color); border-radius: 10px; padding: 15px; z-index: 1000; text-align: center; width: 300px; opacity: 0; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .achievement-popup.show { transform: translate(-50%, -50%) scale(1); opacity: 1; } .achievement-title { font-size: 1.2rem; color: var(--primary-color); margin-bottom: 5px; text-transform: uppercase; } .achievement-desc { font-size: 0.8rem; color: white; margin-bottom: 10px; } .achievement-xp { font-size: 1rem; color: var(--secondary-color); font-weight: bold; } .detail-panel { position: absolute; top: 0; right: -350px; width: 300px; height: 100%; background: rgba(5, 7, 27, 0.9); border-left: 1px solid var(--primary-color); padding: 20px; z-index: 100; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; flex-direction: column; overflow: hidden; } .detail-panel.show { right: 0; } .close-panel { position: absolute; top: 10px; right: 10px; background: none; border: none; color: var(--tertiary-color); cursor: pointer; font-size: 1.2rem; } .element-detail-header { display: flex; align-items: center; margin-bottom: 20px; } .element-detail-symbol { font-size: 2.5rem; font-weight: bold; margin-right: 15px; width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; border-radius: 5px; } .element-detail-info { flex: 1; } .element-detail-name { font-size: 1.5rem; font-weight: bold; color: white; } .element-detail-number { font-size: 0.9rem; color: var(--tertiary-color); } .element-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 20px; } .stat-item { background: rgba(14, 255, 126, 0.1); border-radius: 5px; padding: 8px; } .stat-name { font-size: 0.7rem; color: var(--tertiary-color); margin-bottom: 3px; } .stat-value { font-size: 0.9rem; color: white; font-weight: bold; } .element-description { margin-bottom: 20px; font-size: 0.8rem; line-height: 1.4; color: rgba(255, 255, 255, 0.8); } .game-bonus { background: rgba(255, 0, 255, 0.1); border: 1px solid var(--secondary-color); border-radius: 5px; padding: 10px; } .game-bonus-title { font-size: 0.9rem; color: var(--secondary-color); margin-bottom: 5px; font-weight: bold; } .game-bonus-desc { font-size: 0.8rem; color: white; } /* Canvas for particle effects */ canvas { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 5; } /* Media queries for responsive design */ @media (max-width: 700px) { .container { width: 100%; height: 100%; padding: 5px; } .hub-title { font-size: 1.4rem; } .hub-subtitle { font-size: 0.7rem; } .periodic-table { gap: 2px; } .element { padding: 2px; } .element-symbol { font-size: 0.7rem; } .element-number, .element-name, .element-weight { font-size: 0.4rem; } .legend { display: none; } } @media (max-width: 500px) { .element-symbol { font-size: 0.6rem; } .element-number, .element-name, .element-weight { font-size: 0.35rem; } } /* Animation keyframes */ @keyframes pulse { 0% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); opacity: 0.7; } } @keyframes glitch { 0% { transform: translate(0); } 20% { transform: translate(-2px, 2px); } 40% { transform: translate(-2px, -2px); } 60% { transform: translate(2px, 2px); } 80% { transform: translate(2px, -2px); } 100% { transform: translate(0); } } /* Progress bar styles */ .progress-container { position: fixed; bottom: 10px; left: 10px; width: calc(100% - 20px); height: 15px; background: rgba(5, 7, 27, 0.7); border: 1px solid var(--grid-lines); border-radius: 7px; overflow: hidden; z-index: 100; } .progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); transition: width 0.5s ease; position: relative; overflow: hidden; } .progress-bar::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transform: translateX(-100%); animation: shimmer 2s infinite; } .progress-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.6rem; color: white; text-shadow: 0 0 5px rgba(0, 0, 0, 0.8); white-space: nowrap; } @keyframes shimmer { 100% { transform: translateX(100%); } } /* Loading screen styles */ .loading-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--background-color); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 9999; transition: opacity 0.5s ease, visibility 0.5s ease; } .loader { width: 100px; height: 100px; position: relative; margin-bottom: 20px; } .loader::before, .loader::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; border: 5px solid transparent; border-top-color: var(--primary-color); } .loader::before { z-index: 10; animation: spin 1s infinite linear; } .loader::after { border: 5px solid transparent; border-top-color: var(--secondary-color); border-bottom-color: var(--tertiary-color); animation: spin2 2s infinite linear; } .loading-text { font-size: 1.2rem; color: var(--tertiary-color); text-transform: uppercase; letter-spacing: 3px; margin-bottom: 10px; } .loading-subtext { font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); text-align: center; max-width: 80%; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes spin2 { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } .hidden { opacity: 0; visibility: hidden; } </style> </head> <body> <div class="grid-background"></div> <canvas id="particleCanvas"></canvas> <div class="loading-screen" id="loadingScreen"> <div class="loader"></div> <div class="loading-text">INITIALIZING</div> <div class="loading-subtext">Calibrating quantum particle visualizer...</div> </div> <div class="container"> <div class="title-section"> <div> <div class="hub-title">GAMER'S SCIENCE HUB</div> <div class="hub-subtitle">ELEMENTAL DISCOVERY SYSTEM v2.48</div> </div> </div> <div class="legend"> <div class="legend-item"> <div class="legend-color" style="background-color: var(--alkali-metal-color);"></div> <span>Alkali Metals</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--alkaline-earth-color);"></div> <span>Alkaline Earth</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--transition-metal-color);"></div> <span>Transition Metals</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--post-transition-color);"></div> <span>Post-Transition</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--metalloid-color);"></div> <span>Metalloids</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--nonmetal-color);"></div> <span>Nonmetals</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--halogen-color);"></div> <span>Halogens</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--noble-gas-color);"></div> <span>Noble Gases</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--lanthanide-color);"></div> <span>Lanthanides</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--actinide-color);"></div> <span>Actinides</span> </div> </div> <div class="periodic-table" id="periodicTable"> <!-- Elements will be dynamically generated here --> </div> </div> <div class="achievement-popup" id="achievementPopup"> <div class="achievement-title">Element Unlocked!</div> <div class="achievement-desc">You've discovered a new element for your arsenal!</div> <div class="achievement-xp">+25 XP</div> </div> <div class="detail-panel" id="detailPanel"> <button class="close-panel" id="closePanel">×</button> <div class="element-detail-header"> <div class="element-detail-symbol" id="detailSymbol">H</div> <div class="element-detail-info"> <div class="element-detail-name" id="detailName">Hydrogen</div> <div class="element-detail-number" id="detailNumber">1</div> </div> </div> <div class="element-stats" id="elementStats"> <!-- Stats will be dynamically generated here --> </div> <div class="element-description" id="elementDescription"> Hydrogen is the simplest and most abundant element in the universe. </div> <div class="game-bonus"> <div class="game-bonus-title">GAME BONUSES</div> <div class="game-bonus-desc" id="gameBonus"> +15% efficiency to fusion reactors<br> Unlocks Hydrogen Fuel Cells crafting </div> </div> </div> <div class="progress-container"> <div class="progress-bar" id="progressBar"></div> <div class="progress-text" id="progressText">ELEMENTS DISCOVERED: 0/118</div> </div> <script> // Wait for DOM to load document.addEventListener('DOMContentLoaded', function() { // Loading screen animation setTimeout(() => { document.getElementById('loadingScreen').classList.add('hidden'); }, 2500); // Canvas setup for particle effects const canvas = document.getElementById('particleCanvas'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Particles array let particles = []; // Handle window resize window.addEventListener('resize', function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); // Particle class class Particle { constructor(x, y, color, speedFactor = 1) { this.x = x; this.y = y; this.size = Math.random() * 3 + 1; this.color = color; this.speedX = (Math.random() - 0.5) * speedFactor; this.speedY = (Math.random() - 0.5) * speedFactor; this.life = 100; } update() { this.x += this.speedX; this.y += this.speedY; this.life -= 1; if (this.size > 0.2) this.size -= 0.05; } draw() { ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); // Glow effect ctx.shadowBlur = 10; ctx.shadowColor = this.color; } } // Create particles when element is clicked function createParticles(x, y, color, count = 20) { for (let i = 0; i < count; i++) { particles.push(new Particle(x, y, color, 3)); } } // Animation loop for particles function animateParticles() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < particles.length; i++) { particles[i].update(); particles[i].draw(); // Remove particles when they're too small or have lived too long if (particles[i].size <= 0.2 || particles[i].life <= 0) { particles.splice(i, 1); i--; } } requestAnimationFrame(animateParticles); } animateParticles(); // Element data const elementData = [ { number: 1, symbol: 'H', name: 'Hydrogen', weight: 1.008, category: 'nonmetal', state: 'gas', unlocked: true, description: "The lightest and most abundant element in the universe. Its unique properties make it ideal for energy storage and generation.", gameBonus: "+15% efficiency to fusion reactors<br>Unlocks Hydrogen Fuel Cells crafting", stats: { power: 3, stability: 2, reactivity: 4, rarity: 1 } }, { number: 2, symbol: 'He', name: 'Helium', weight: 4.0026, category: 'noble-gas', state: 'gas', unlocked: true, description: "Extremely stable noble gas with the lowest boiling point of any element. Essential for cooling quantum computers.", gameBonus: "+20% cooling efficiency<br>Unlocks Quantum Stabilization tech", stats: { power: 1, stability: 5, reactivity: 0, rarity: 2 } }, { number: 3, symbol: 'Li', name: 'Lithium', weight: 6.94, category: 'alkali-metal', state: 'solid', unlocked: false, description: "Lightest metal and crucial for energy storage technologies. Highly reactive but with excellent energy density.", gameBonus: "+25% battery capacity<br>Unlocks Advanced Energy Storage", stats: { power: 3, stability: 2, reactivity: 4, rarity: 3 } }, { number: 4, symbol: 'Be', name: 'Beryllium', weight: 9.0122, category: 'alkaline-earth', state: 'solid', unlocked: false, description: "Toxic but extremely lightweight, strong metal. Transparent to X-rays and highly heat resistant.", gameBonus: "+30% armor durability<br>Radiation shielding capabilities", stats: { power: 2, stability: 4, reactivity: 2, rarity: 4 } }, { number: 5, symbol: 'B', name: 'Boron', weight: 10.81, category: 'metalloid', state: 'solid', unlocked: false, description: "Semiconductor with extraordinary neutron-capturing abilities. Used in reinforcement of advanced materials.", gameBonus: "+20% neutron absorption<br>Unlocks Neural Interface tech", stats: { power: 3, stability: 4, reactivity: 2, rarity: 3 } }, { number: 6, symbol: 'C', name: 'Carbon', weight: 12.011, category: 'nonmetal', state: 'solid', unlocked: false, description: "The foundation of all known life, with unique bonding capabilities that enable millions of compounds.", gameBonus: "+40% structural integrity<br>Unlocks Nanomaterials crafting", stats: { power: 4, stability: 5, reactivity: 3, rarity: 1 } }, { number: 7, symbol: 'N', name: 'Nitrogen', weight: 14.007, category: 'nonmetal', state: 'gas', unlocked: false, description: "Essential for amino acids and proteins. In liquid form, it's a powerful cryogenic cooling agent.", gameBonus: "+25% biotic research speed<br>Enables Cryogenic Suspension", stats: { power: 3, stability: 3, reactivity: 2, rarity: 1 } }, { number: 8, symbol: 'O', name: 'Oxygen', weight: 15.999, category: 'nonmetal', state: 'gas', unlocked: false, description: "Vital for respiration and combustion processes. Forms oxides with nearly all elements.", gameBonus: "+30% life support efficiency<br>Enables Oxidizer Ammunition", stats: { power: 4, stability: 3, reactivity: 5, rarity: 1 } }, { number: 9, symbol: 'F', name: 'Fluorine', weight: 18.998, category: 'halogen', state: 'gas', unlocked: false, description: "Most electronegative and reactive element. Creates the strongest chemical bonds known.", gameBonus: "+45% chemical weapon damage<br>Enables Superacid Synthesis", stats: { power: 5, stability: 1, reactivity: 5, rarity: 3 } }, { number: 10, symbol: 'Ne', name: 'Neon', weight: 20.180, category: 'noble-gas', state: 'gas', unlocked: false, description: "Inert gas known for its bright red-orange glow when electrified. Used in plasma technologies.", gameBonus: "+25% energy weapon visibility<br>Enables Stealth Detection Systems", stats: { power: 2, stability: 5, reactivity: 0, rarity: 3 } }, // More elements would be added here but I'll keep it concise for this example ]; // Extended element positions (defines the location in the grid) const elementPositions = { 1: {row: 0, col: 0}, // H 2: {row: 0, col: 17}, // He 3: {row: 1, col: 0}, // Li 4: {row: 1, col: 1}, // Be 5: {row: 1, col: 12}, // B 6: {row: 1, col: 13}, // C 7: {row: 1, col: 14}, // N 8: {row: 1, col: 15}, // O 9: {row: 1, col: 16}, // F 10: {row: 1, col: 17} // Ne // More positions would be defined here }; // Element category colors const categoryColors = { 'nonmetal': 'var(--nonmetal-color)', 'noble-gas': 'var(--noble-gas-color)', 'alkali-metal': 'var(--alkali-metal-color)', 'alkaline-earth': 'var(--alkaline-earth-color)', 'metalloid': 'var(--metalloid-color)', 'halogen': 'var(--halogen-color)', 'post-transition': 'var(--post-transition-color)', 'transition-metal': 'var(--transition-metal-color)', 'lanthanide': 'var(--lanthanide-color)', 'actinide': 'var(--actinide-color)' }; // Progress tracking let discoveredElements = 0; const totalElements = elementData.length; // Generate the periodic table const periodicTable = document.getElementById('periodicTable'); function generatePeriodicTable() { periodicTable.innerHTML = ''; // Create blank grid first for (let row = 0; row < 10; row++) { for (let col = 0; col < 18; col++) { const emptyCell = document.createElement('div'); emptyCell.style.gridRow = row + 1; emptyCell.style.gridColumn = col + 1; emptyCell.style.opacity = 0; periodicTable.appendChild(emptyCell); } } // Add elements elementData.forEach(element => { const position = elementPositions[element.number]; if (!position) return; const elementCell = document.createElement('div'); elementCell.className = `element ${element.unlocked ? '' : 'locked'}`; elementCell.style.gridRow = position.row + 1; elementCell.style.gridColumn = position.col + 1; elementCell.style.borderColor = categoryColors[element.category] || 'rgba(255, 255, 255, 0.1)'; // Add subtle background glow based on category elementCell.style.boxShadow = `inset 0 0 10px ${categoryColors[element.category] || 'rgba(255, 255, 255, 0.1)'}`; elementCell.innerHTML = ` <div class="element-number">${element.number}</div> <div class="element-symbol">${element.symbol}</div> <div class="element-name">${element.name}</div> <div class="element-weight">${element.weight}</div> `; // Click handler for each element elementCell.addEventListener('click', function() { if (!element.unlocked) { const randomUnlock = Math.random() < 0.3; // 30% chance to unlock on click if (randomUnlock) { unlockElement(element, elementCell); } else { showMessage("Element locked. Complete more research to unlock."); } return; } // Get element position for particle effect const rect = elementCell.getBoundingClientRect(); const x = rect.left + rect.width / 2; const y = rect.top + rect.height / 2; // Create particles createParticles(x, y, categoryColors[element.category], 30); // Show element details showElementDetails(element); }); periodicTable.appendChild(elementCell); // If element is unlocked, increment the counter if (element.unlocked) { discoveredElements++; } }); // Update progress bar updateProgress(); } function unlockElement(element, elementCell) { element.unlocked = true; elementCell.classList.remove('locked'); discoveredElements++; // Show achievement popup const popup = document.getElementById('achievementPopup'); popup.querySelector('.achievement-title').textContent = `${element.name} Unlocked!`; popup.querySelector('.achievement-desc').textContent = `You've discovered ${element.name} (${element.symbol}) for your arsenal!`; popup.classList.add('show'); // Hide popup after 3 seconds setTimeout(() => { popup.classList.remove('show'); }, 3000); // Update progress updateProgress(); // Get element position for particle effect const rect = elementCell.getBoundingClientRect(); const x = rect.left + rect.width / 2; const y = rect.top + rect.height / 2; // Create more particles
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Research Publication Companion - Periodic Table</title> <style> :root { --primary: #3c4e7a; --secondary: #5b83db; --highlight: #748fcc; --background: #f9f9f9; --text: #333; --text-light: #666; --alkali: #ff7b7b; --alkaline: #ffb27b; --transition: #ffd68a; --post-transition: #c5da8a; --metalloid: #8adaab; --nonmetal: #8aeada; --noble: #8ab4da; --lanthanide: #c68ada; --actinide: #da8ac6; --unknown: #dadada; --active-research: #00c176; --active-pulse: rgba(0, 193, 118, 0.4); } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--background); color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 1rem; width: 100%; height: 100vh; overflow: hidden; } .container { width: 100%; max-width: 700px; height: 700px; display: flex; flex-direction: column; gap: 0.5rem; } header { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; background-color: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } h1 { font-size: 1.2rem; color: var(--primary); font-weight: 600; } .controls { display: flex; gap: 0.5rem; } .controls button { background-color: var(--primary); color: white; border: none; border-radius: 4px; padding: 0.3rem 0.6rem; font-size: 0.7rem; cursor: pointer; transition: all 0.2s ease; } .controls button:hover { background-color: var(--secondary); } .legend { display: flex; gap: 0.5rem; flex-wrap: wrap; padding: 0.5rem; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); font-size: 0.6rem; } .legend-item { display: flex; align-items: center; gap: 0.25rem; } .legend-color { width: 12px; height: 12px; border-radius: 2px; } .periodic-table { display: grid; grid-template-columns: repeat(18, 1fr); grid-template-rows: repeat(10, 1fr); gap: 2px; background-color: var(--background); flex-grow: 1; overflow: auto; position: relative; border-radius: 8px; } .element { background-color: white; border-radius: 3px; padding: 0.15rem; display: flex; flex-direction: column; justify-content: space-between; font-size: 0.55rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; overflow: hidden; } .element:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); z-index: 10; } .element.active-research { box-shadow: 0 0 0 2px var(--active-research); } .element.active-research::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle, var(--active-pulse) 0%, transparent 70%); opacity: 0.8; animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(0.95); opacity: 0.8; } 70% { transform: scale(1.1); opacity: 0; } 100% { transform: scale(0.95); opacity: 0; } } .atomic-number { align-self: flex-start; font-size: 0.5rem; color: var(--text-light); } .symbol { font-size: 0.85rem; font-weight: 600; text-align: center; } .name { font-size: 0.45rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .weight { font-size: 0.45rem; text-align: center; color: var(--text-light); } .element[data-category="alkali-metal"] { background-color: var(--alkali); } .element[data-category="alkaline-earth-metal"] { background-color: var(--alkaline); } .element[data-category="transition-metal"] { background-color: var(--transition); } .element[data-category="post-transition-metal"] { background-color: var(--post-transition); } .element[data-category="metalloid"] { background-color: var(--metalloid); } .element[data-category="nonmetal"] { background-color: var(--nonmetal); } .element[data-category="noble-gas"] { background-color: var(--noble); } .element[data-category="lanthanide"] { background-color: var(--lanthanide); } .element[data-category="actinide"] { background-color: var(--actinide); } .element[data-category="unknown"] { background-color: var(--unknown); } .placeholder { grid-column: span 1; grid-row: span 1; } .element-details { position: absolute; background: white; border-radius: 8px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); padding: 1rem; max-width: 240px; z-index: 100; transform: translate(-50%, -100%); transition: opacity 0.3s ease, transform 0.3s ease; opacity: 0; pointer-events: none; } .element-details.visible { opacity: 1; transform: translate(-50%, calc(-100% - 10px)); pointer-events: all; } .element-details h3 { margin-bottom: 0.5rem; color: var(--primary); display: flex; justify-content: space-between; align-items: center; } .element-details p { margin-bottom: 0.5rem; font-size: 0.8rem; } .element-details .citations { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid #eee; } .element-details .citation { font-size: 0.7rem; color: var(--text-light); margin-bottom: 0.25rem; } .close-button { background: none; border: none; cursor: pointer; font-size: 0.8rem; color: var(--text-light); } .search-container { position: relative; margin-bottom: 0.5rem; } .search-input { width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.8rem; } .search-results { position: absolute; top: 100%; left: 0; right: 0; background: white; border-radius: 4px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); max-height: 200px; overflow-y: auto; z-index: 20; display: none; } .search-result { padding: 0.5rem; cursor: pointer; border-bottom: 1px solid #eee; } .search-result:hover { background-color: #f5f5f5; } .lanthanide-actinide-container { display: grid; grid-template-columns: repeat(15, 1fr); gap: 2px; margin-top: 0.5rem; } .lanthanide-label, .actinide-label { font-size: 0.5rem; display: flex; align-items: center; justify-content: center; padding: 0.25rem; background-color: rgba(255,255,255,0.7); border-radius: 3px; } @media (max-width: 600px) { .periodic-table { font-size: 0.5rem; } .element { padding: 0.1rem; } .symbol { font-size: 0.65rem; } .name, .weight, .atomic-number { font-size: 0.4rem; } } </style> </head> <body> <div class="container"> <header> <h1>Research Publication Companion</h1> <div class="controls"> <button id="toggle-active">Highlight Research</button> <button id="reset-view">Reset View</button> </div> </header> <div class="legend"> <div class="legend-item"> <div class="legend-color" style="background-color: var(--alkali);"></div> <span>Alkali Metals</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--alkaline);"></div> <span>Alkaline Earth Metals</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--transition);"></div> <span>Transition Metals</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--post-transition);"></div> <span>Post-Transition Metals</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--metalloid);"></div> <span>Metalloids</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--nonmetal);"></div> <span>Nonmetals</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--noble);"></div> <span>Noble Gases</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--lanthanide);"></div> <span>Lanthanides</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--actinide);"></div> <span>Actinides</span> </div> <div class="legend-item"> <div class="legend-color" style="background-color: var(--active-research); position: relative; overflow: hidden;"></div> <span>Active Research</span> </div> </div> <div class="periodic-table" id="periodic-table"></div> <div class="element-details" id="element-details"> <h3> <span id="detail-title"></span> <button class="close-button" id="close-details">×</button> </h3> <p id="detail-description"></p> <div class="citations" id="citations"></div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const periodicTable = document.getElementById('periodic-table'); const elementDetails = document.getElementById('element-details'); const closeDetails = document.getElementById('close-details'); const detailTitle = document.getElementById('detail-title'); const detailDescription = document.getElementById('detail-description'); const citations = document.getElementById('citations'); const toggleActive = document.getElementById('toggle-active'); const resetView = document.getElementById('reset-view'); let showingActiveResearch = false; // Element data const elements = [ { atomicNumber: 1, symbol: 'H', name: 'Hydrogen', weight: '1.008', category: 'nonmetal', column: 1, row: 1, activeResearch: true, description: 'The lightest and most abundant chemical element in the universe. Crucial in alternative energy solutions as a potential clean fuel.', citations: [ 'Zhang, et al. (2023) "Hydrogen Storage Materials for Fuel Cell Applications", Nature Energy, 8(3), 220-235', 'Johnson, M. (2022) "Hydrogen Economy: Progress and Challenges", Science, 375(6582), 691-694' ] }, { atomicNumber: 2, symbol: 'He', name: 'Helium', weight: '4.0026', category: 'noble-gas', column: 18, row: 1, activeResearch: false, description: 'The second lightest element. Critical for cooling superconducting magnets in MRI machines and NMR spectrometers.', citations: [ 'Reynolds, T. (2021) "The Helium Crisis in Scientific Research", Journal of Applied Physics, 129(5), 055101' ] }, { atomicNumber: 3, symbol: 'Li', name: 'Lithium', weight: '6.94', category: 'alkali-metal', column: 1, row: 2, activeResearch: true, description: 'Widely used in rechargeable batteries. Current research focuses on improving energy density and reducing critical material dependencies.', citations: [ 'Liu, et al. (2023) "Next-Generation Lithium Battery Electrolytes", Nature Materials, 22(1), 43-53', 'Park, J. (2022) "Solid-State Lithium Batteries: A Review", Chemical Reviews, 122(5), 6684-6734' ] }, { atomicNumber: 4, symbol: 'Be', name: 'Beryllium', weight: '9.0122', category: 'alkaline-earth-metal', column: 2, row: 2, activeResearch: false, description: 'Used in aerospace applications due to its high stiffness-to-weight ratio and resistance to oxidation.', citations: [ 'Miller, R. (2020) "Beryllium Applications in Aerospace Engineering", Materials Science and Engineering: A, 774, 138923' ] }, { atomicNumber: 5, symbol: 'B', name: 'Boron', weight: '10.81', category: 'metalloid', column: 13, row: 2, activeResearch: true, description: 'Important in boron neutron capture therapy (BNCT) for cancer treatment and in advanced materials like borophene.', citations: [ 'Wang, et al. (2023) "Borophene: Synthesis, Properties, and Applications", Advanced Materials, 35(3), 2205619', 'Chen, Y. (2022) "Recent Advances in Boron Neutron Capture Therapy", Chemical Reviews, 122(8), 7438-7558' ] }, { atomicNumber: 6, symbol: 'C', name: 'Carbon', weight: '12.011', category: 'nonmetal', column: 14, row: 2, activeResearch: true, description: 'Forms diverse allotropes including graphene, nanotubes, and fullerenes with revolutionary applications in electronics and materials science.', citations: [ 'Novoselov, K. (2023) "Graphene in Quantum Computing Architectures", Science, 380(6642), 284-290', 'Wu, et al. (2022) "Carbon Nanomaterials for CO₂ Capture", Energy & Environmental Science, 15(4), 1296-1354' ] }, { atomicNumber: 7, symbol: 'N', name: 'Nitrogen', weight: '14.007', category: 'nonmetal', column: 15, row: 2, activeResearch: false, description: 'Essential component in fertilizers and critical for protein synthesis in all living organisms.', citations: [ 'Zhang, L. (2021) "Nitrogen Fixation: Biological and Industrial Perspectives", Chemical Reviews, 121(13), 7777-7832' ] }, { atomicNumber: 8, symbol: 'O', name: 'Oxygen', weight: '15.999', category: 'nonmetal', column: 16, row: 2, activeResearch: false, description: 'Crucial for cellular respiration and combustion processes. The most abundant element in Earth\'s crust.', citations: [ 'Anderson, et al. (2020) "Oxygen Reduction Reaction Catalysts for Fuel Cells", ACS Catalysis, 10(14), 7502-7528' ] }, { atomicNumber: 9, symbol: 'F', name: 'Fluorine', weight: '18.998', category: 'nonmetal', column: 17, row: 2, activeResearch: false, description: 'The most electronegative element. Widely used in pharmaceuticals, where ~20% of drugs contain at least one fluorine atom.', citations: [ 'Gillis, E. (2021) "Fluorine in Medicinal Chemistry", Journal of Medicinal Chemistry, 64(5), 2339-2357' ] }, { atomicNumber: 10, symbol: 'Ne', name: 'Neon', weight: '20.180', category: 'noble-gas', column: 18, row: 2, activeResearch: false, description: 'Used in advertising signs, high-voltage indicators, lightning arrestors, and vacuum tubes.', citations: [ 'Tian, Y. (2020) "Noble Gases in Plasma Applications", Physics of Plasmas, 27(9), 090501' ] }, { atomicNumber: 11, symbol: 'Na', name: 'Sodium', weight: '22.990', category: 'alkali-metal', column: 1, row: 3, activeResearch: true, description: 'Being investigated as a lower-cost alternative to lithium in battery technologies, particularly for grid storage applications.', citations: [ 'Kim, et al. (2023) "Sodium-Ion Batteries: Present and Future", Nature Reviews Materials, 8(2), 120-141', 'Huang, J. (2022) "Low-Cost Sodium-Based Energy Storage Systems", Energy Storage Materials, 45, 380-405' ] }, { atomicNumber: 12, symbol: 'Mg', name: 'Magnesium', weight: '24.305', category: 'alkaline-earth-metal', column: 2, row: 3, activeResearch: false, description: 'An essential element for human metabolism and a lightweight structural metal with applications in automotive and aerospace industries.', citations: [ 'Thompson, K. (2021) "Magnesium Alloys in Lightweight Structural Applications", Materials & Design, 197, 109215' ] }, { atomicNumber: 13, symbol: 'Al', name: 'Aluminum', weight: '26.982', category: 'post-transition-metal', column: 13, row: 3, activeResearch: false, description: 'The most abundant metal in Earth\'s crust, widely used in transportation, packaging, and construction due to its light weight and corrosion resistance.', citations: [ 'Patel, S. (2020) "Aluminum in Sustainable Construction", Construction and Building Materials, 258, 119642' ] }, { atomicNumber: 14, symbol: 'Si', name: 'Silicon', weight: '28.085', category: 'metalloid', column: 14, row: 3, activeResearch: true, description: 'The foundational element of semiconductor technology and solar cells. Advanced research focuses on silicon quantum computing.', citations: [ 'Lee, et al. (2023) "Silicon Quantum Dots for Quantum Computing", Nature Nanotechnology, 18(5), 519-528', 'Chan, W. (2022) "Advances in Silicon Photonics", Nature Photonics, 16(4), 273-287' ] }, { atomicNumber: 15, symbol: 'P', name: 'Phosphorus', weight: '30.974', category: 'nonmetal', column: 15, row: 3, activeResearch: false, description: 'Essential for all living organisms as part of DNA, RNA, ATP, and phospholipids in cell membranes.', citations: [ 'Williams, J. (2021) "Phosphorus Recovery and Recycling Technologies", Environmental Science & Technology, 55(8), 4324-4334' ] }, { atomicNumber: 16, symbol: 'S', name: 'Sulfur', weight: '32.06', category: 'nonmetal', column: 16, row: 3, activeResearch: true, description: 'Critical component in next-generation lithium-sulfur batteries, offering potentially higher energy density than Li-ion batteries.', citations: [ 'Zhou, et al. (2023) "Lithium-Sulfur Batteries: Breaking the Energy Density Ceiling", Nature Energy, 8(1), 15-30', 'Liu, D. (2022) "Sulfur Cathode Materials: Challenges and Solutions", Advanced Energy Materials, 12(12), 2103854' ] }, { atomicNumber: 17, symbol: 'Cl', name: 'Chlorine', weight: '35.45', category: 'nonmetal', column: 17, row: 3, activeResearch: false, description: 'Widely used in water purification and as a disinfectant. Also essential for producing many industrial chemicals and polymers.', citations: [ 'Garcia, R. (2020) "Environmental Impacts of Chlorine Chemistry", Environmental Science & Technology, 54(11), 6514-6525' ] }, { atomicNumber: 18, symbol: 'Ar', name: 'Argon', weight: '39.948', category: 'noble-gas', column: 18, row: 3, activeResearch: false, description: 'Used in welding, providing an inert atmosphere for reactions, and in incandescent and fluorescent lighting.', citations: [ 'Mitchell, T. (2020) "Noble Gases in Scientific Applications", Review of Scientific Instruments, 91(8), 081301' ] }, { atomicNumber: 19, symbol: 'K', name: 'Potassium', weight: '39.098', category: 'alkali-metal', column: 1, row: 4, activeResearch: false, description: 'An essential element for plant growth and human cellular function. Critical in nerve signal transmission.', citations: [ 'Rodriguez, M. (2021) "Potassium Channels in Health and Disease", Physiological Reviews, 101(3), 1271-1358' ] }, { atomicNumber: 20, symbol: 'Ca', name: 'Calcium', weight: '40.078', category: 'alkaline-earth-metal', column: 2, row: 4, activeResearch: false, description: 'The most abundant metal in the human body, essential for bone structure, muscle contraction, and nerve impulse transmission.', citations: [ 'Chen, et al. (2020) "Calcium Signaling in Cellular Function", Cell Calcium, 87, 102170' ] }, // First row of transition metals { atomicNumber: 21, symbol: 'Sc', name: 'Scandium', weight: '44.956', category: 'transition-metal', column: 3, row: 4, activeResearch: false, description: 'Used in aerospace components and sports equipment when alloyed with aluminum, providing strength without significant weight increase.', citations: [ 'Kumar, A. (2020) "Scandium Alloys in Aerospace Applications", Materials Science and Engineering: A, 772, 138775' ] }, { atomicNumber: 22, symbol: 'Ti', name: 'Titanium', weight: '47.867', category: 'transition-metal', column: 4, row: 4, activeResearch: false, description: 'Known for its high strength-to-weight ratio and excellent corrosion resistance. Widely used in aerospace, medical implants, and sporting goods.', citations: [ 'Wang, L. (2021) "Titanium Alloys in Biomedical Applications", Acta Biomaterialia, 126, 1-20' ] }, { atomicNumber: 23, symbol: 'V', name: 'Vanadium', weight: '50.942', category: 'transition-metal', column: 5, row: 4, activeResearch: true, description: 'Key component in vanadium redox flow batteries, which offer promising grid-scale energy storage solutions.', citations: [ 'Liu, et al. (2023) "Vanadium Redox Flow Batteries for Grid Energy Storage", Nature Energy, 8(3), 235-249', 'Zhang, H. (2022) "Advances in Vanadium-Based Energy Storage", Chemical Reviews, 122(9), 8826-8878' ] }, { atomicNumber: 24, symbol: 'Cr', name: 'Chromium', weight: '51.996', category: 'transition-metal', column: 6, row: 4, activeResearch: false, description: 'Used in stainless steel production and decorative plating. Essential trace nutrient involved in glucose metabolism.', citations: [ 'Torres, J. (2020) "Environmental Impact of Chromium Mining and Processing", Environmental Science & Technology, 54(4), 2032-2041' ] }, { atomicNumber: 25, symbol: 'Mn', name: 'Manganese', weight: '54.938', category: 'transition-metal', column: 7, row: 4, activeResearch: false, description: 'Essential in steel production and an important component in lithium-manganese oxide batteries.', citations: [ 'Chen, Y. (2021) "Manganese-Based Cathode Materials for Lithium-Ion Batteries", Materials Today, 46, 116-135' ] }, { atomicNumber: 26, symbol: 'Fe', name: 'Iron', weight: '55.845', category: 'transition-metal', column: 8, row: 4, activeResearch: false, description: 'The most used metal worldwide, primarily in steel production. Essential for oxygen transport in hemoglobin.', citations: [ 'Johnson, et al. (2020) "Iron Catalysis in Sustainable Chemical Synthesis", Chemical Reviews, 120(4), 1947-2019' ] }, { atomicNumber: 27, symbol: 'Co', name: 'Cobalt', weight: '58.933', category: 'transition-metal', column: 9, row: 4, activeResearch: true, description: 'Critical component in lithium-ion batteries. Research focuses on reducing dependency due to supply chain concerns.', citations: [ 'Kim, et al. (2023) "Cobalt-Free Cathode Materials for Sustainable Batteries", Nature Materials, 22(2), 173-185', 'Wong, L. (2022) "Cobalt Supply Chain Risks and Mitigation Strategies", Energy Policy, 163, 112822' ] }, { atomicNumber: 28, symbol: 'Ni', name: 'Nickel', weight: '58.693', category: 'transition-metal', column: 10, row: 4, activeResearch: true, description: 'Important in stainless steel production and battery cathodes. Single-atom nickel catalysts show promise for hydrogen evolution.', citations: [ 'Zhang, et al. (2023) "Single-Atom Nickel Catalysts for Hydrogen Production", Nature Catalysis, 6(1), 56-67', 'Lee, K. (2022) "Nickel-Rich Cathode Materials for High-Energy Batteries", ACS Energy Letters, 7(4), 1413-1422' ] }, { atomicNumber: 29, symbol: 'Cu', name: 'Copper', weight: '63.546', category: 'transition-metal', column: 11, row: 4, activeResearch: false, description: 'Excellent conductor of heat and electricity, widely used in electrical wiring, plumbing, and electronics.', citations: [ 'Martinez, S. (2021) "Copper in Antimicrobial Applications", ACS Applied Materials & Interfaces, 13(25), 28715-28735' ] }, { atomicNumber: 30, symbol: 'Zn', name: 'Zinc', weight: '65.38', category: 'transition-metal', column: 12, row: 4, activeResearch: false, description: 'Used in galvanization to prevent iron and steel from rusting. Essential for growth, development, and immune function.', citations: [ 'Thompson, R. (2020) "Zinc Bioavailability and Supplementation", Advances in Nutrition, 11(2), 307-321' ] }, // Continue with rest of elements { atomicNumber: 31, symbol: 'Ga', name: 'Gallium', weight: '69.723', category: 'post-transition-metal', column: 13, row: 4, activeResearch: true, description: 'Critical in semiconductor technology, particularly GaN for high-power, high-frequency electronics and LED lighting.', citations: [ 'Park, et al. (2023) "Gallium Nitride for Next-Generation Power Electronics", Nature Electronics, 6(4), 222-234', 'Chen, J. (2022) "Advances in Gallium-Based Semiconductors", IEEE Transactions on Electron Devices, 69(3), 1187-1198' ] }, { atomicNumber: 32, symbol: 'Ge', name: 'Germanium', weight: '72.630', category: 'metalloid', column: 14, row: 4, activeResearch: true, description: 'Used in fiber optic systems, infrared optics, and as a semiconductor in electronics. Research on germanene (2D form) is advancing.', citations: [ 'Wang, et al. (2023) "Germanene: Synthesis and Electronic Properties", Nature Nanotechnology, 18(2), 152-164', 'Liu, Z. (2022) "Germanium in Silicon Photonics", Light: Science & Applications, 11, 63' ] }, { atomicNumber: 33, symbol: 'As', name: 'Arsenic', weight: '74.922', category: 'metalloid', column: 15, row: 4, activeResearch: false, description: 'Used in semiconductor manufacturing for gallium arsenide. Historically used in wood preservatives and pesticides.', citations: [ 'Garcia, M. (2021) "Arsenic Contamination in Groundwater: Global Challenges", Environmental Science & Technology, 55(9), 5677-5687' ] }, { atomicNumber: 34, symbol: 'Se', name: 'Selenium', weight: '78.971', category: 'nonmetal', column: 16, row: 4, activeResearch: false, description: 'Essential trace element important for antioxidant function. Used in photovoltaic cells and as a semiconductor.', citations: [ 'Johnson, T. (2020) "Selenium in Human Health and Disease", Molecular Aspects of Medicine, 76, 100865' ] }, { atomicNumber: 35, symbol: 'Br', name: 'Bromine', weight: '79.904', category: 'nonmetal', column: 17, row: 4, activeResearch: false, description: 'Used in flame retardants, water purification, and as an agricultural fumigant.', citations: [ 'Smith, K. (2021) "Environmental Fate of Brominated Flame Retardants", Environmental Science & Technology, 55(14), 9567-9579' ] }, { atomicNumber: 36, symbol: 'Kr', name: 'Krypton', weight: '83.798', category: 'noble-gas', column: 18, row: 4, activeResearch: false, description: 'Used in lighting products and in combination with other gases in fluorescent lamps. Also used in some lasers.', citations: [ 'Wilson, P. (2020) "Noble Gas Applications in Advanced Lighting Technologies", Journal of Applied Physics, 127(16), 160901' ] }, { atomicNumber: 37, symbol: 'Rb', name: 'Rubidium', weight: '85.468', category: 'alkali-metal', column: 1, row: 5, activeResearch: false, description: 'Used in atomic clocks and specialized glasses. Has potential applications in ion engines for space propulsion.', citations: [ 'Lee, S. (2021) "Rubidium in Quantum Sensing Applications", Review of Scientific Instruments, 92(4), 041101' ] }, { atomicNumber: 38, symbol: 'Sr', name: 'Strontium', weight: '87.62', category: 'alkaline-earth-metal', column: 2, row: 5, activeResearch: false, description: 'Gives fireworks and flares their bright red color. Strontium-90, a radioactive isotope, is used in cancer therapy.', citations: [ 'Martinez, R. (2020) "Strontium in Bone Health and Osteoporosis Treatment", Journal of Bone and Mineral Research, 35(6), 1063-1073' ] }, { atomicNumber: 39, symbol: 'Y', name: 'Yttrium', weight: '88.906', category: 'transition-metal', column: 3, row: 5, activeResearch: false, description: 'Used in LED and OLED lighting, lasers, and as a catalyst in ethylene polymerization.', citations: [ 'Chen, W. (2021) "Yttrium-Based Materials in Photonics", Light: Science & Applications, 10, 38' ] }, { atomicNumber: 40, symbol: 'Zr', name: 'Zirconium', weight: '91.224', category: 'transition-metal', column: 4, row: 5, activeResearch: false, description: 'Used in nuclear reactors due to low neutron absorption and excellent corrosion resistance. Also used in ceramics and refractory materials.', citations: [ 'Wang, J. (2020) "Zirconium Alloys in Nuclear Energy", Journal of Nuclear Materials, 542, 152422' ] }, { atomicNumber: 41, symbol: 'Nb', name: 'Niobium', weight: '92.906', category: 'transition-metal', column: 5, row: 5, activeResearch: false, description: 'Used in steel alloys for pipeline construction and in superconducting magnets. Also important in electronic components.', citations: [ 'Lee, H. (2021) "Niobium-Based Superconductors", Superconductor Science and Technology, 34(5), 053002' ] }, { atomicNumber: 42, symbol: 'Mo', name: 'Molybdenum', weight: '95.95', category: 'transition-metal', column: 6, row:
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AR Periodic Table</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100vh; background: #121212; color: #fff; overflow: hidden; padding: 10px; perspective: 1000px; } .container { width: 100%; max-width: 680px; height: 680px; position: relative; } header { text-align: center; margin-bottom: 10px; position: relative; z-index: 100; width: 100%; } h1 { font-size: 1.5rem; margin-bottom: 5px; background: linear-gradient(135deg, #00bcd4, #7c4dff); -webkit-background-clip: text; background-clip: text; color: transparent; text-transform: uppercase; letter-spacing: 2px; } .subtitle { font-size: 0.9rem; color: #aaa; margin-bottom: 5px; } .periodic-table { display: grid; grid-template-columns: repeat(18, 1fr); grid-gap: 3px; padding: 10px; max-width: 100%; margin: 0 auto; transform-style: preserve-3d; transition: transform 0.5s ease-out; } .element { position: relative; aspect-ratio: 1/1; border-radius: 4px; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; transform-style: preserve-3d; transform: translateZ(0); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(145deg, rgba(30, 30, 30, 0.8), rgba(20, 20, 20, 0.9)); backdrop-filter: blur(5px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.05); } .element:hover { transform: translateZ(15px) scale(1.1); z-index: 10; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3), 0 3px 6px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.1); } .element.active { transform: translateZ(40px) scale(1.5); z-index: 100; } .symbol { font-size: 1.1em; font-weight: bold; margin-bottom: 2px; } .number { font-size: 0.7em; position: absolute; top: 3px; left: 3px; opacity: 0.8; } .name { font-size: 0.55em; opacity: 0.9; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .weight { font-size: 0.6em; opacity: 0.7; } .detail-view { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) translateZ(80px) scale(0); width: 300px; background: rgba(25, 25, 35, 0.95); border-radius: 12px; padding: 20px; z-index: 1000; opacity: 0; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 5px 15px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); transform-style: preserve-3d; border: 1px solid rgba(255, 255, 255, 0.1); } .detail-view.active { opacity: 1; transform: translate(-50%, -50%) translateZ(80px) scale(1); } .detail-header { display: flex; align-items: center; margin-bottom: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 10px; } .detail-symbol { font-size: 3em; font-weight: bold; margin-right: 15px; } .detail-info { flex: 1; } .detail-name { font-size: 1.2em; font-weight: bold; margin-bottom: 3px; } .detail-number, .detail-weight { font-size: 0.9em; color: #ccc; } .detail-properties { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; margin-bottom: 15px; } .property { background: rgba(255, 255, 255, 0.05); padding: 8px; border-radius: 6px; font-size: 0.8em; } .property-label { color: #aaa; margin-bottom: 3px; font-size: 0.9em; } .close-btn { position: absolute; top: 10px; right: 10px; background: none; border: none; color: #fff; font-size: 1.2em; cursor: pointer; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.2s; } .close-btn:hover { background: rgba(255, 255, 255, 0.1); } .ar-hint { position: absolute; bottom: 10px; right: 10px; background: linear-gradient(135deg, rgba(124, 77, 255, 0.8), rgba(0, 188, 212, 0.8)); padding: 8px 12px; border-radius: 20px; font-size: 0.8em; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); z-index: 100; transform: translateZ(20px); } .ar-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .ar-hint svg { width: 100%; height: 100%; } .legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; margin-bottom: 8px; max-width: 100%; font-size: 0.7em; } .legend-item { display: flex; align-items: center; gap: 4px; } .legend-color { width: 12px; height: 12px; border-radius: 2px; } .controls { display: flex; justify-content: center; gap: 10px; margin-top: 10px; margin-bottom: 5px; } .control-btn { background: rgba(255, 255, 255, 0.1); border: none; color: #fff; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 0.8em; transition: all 0.2s; } .control-btn:hover { background: rgba(255, 255, 255, 0.2); } .orbit-container { position: absolute; width: 100%; height: 100%; transform-style: preserve-3d; pointer-events: none; } .orbit { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 1px dashed rgba(124, 77, 255, 0.3); transform-style: preserve-3d; animation: rotate 30s linear infinite; } .orbit:nth-child(1) { width: 30%; height: 30%; top: 35%; left: 35%; } .orbit:nth-child(2) { width: 50%; height: 50%; top: 25%; left: 25%; animation-duration: 40s; animation-direction: reverse; } .orbit:nth-child(3) { width: 70%; height: 70%; top: 15%; left: 15%; animation-duration: 50s; } .particle { position: absolute; width: 4px; height: 4px; background: #7c4dff; border-radius: 50%; box-shadow: 0 0 8px 2px rgba(124, 77, 255, 0.6); } @keyframes rotate { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } } /* Element categories */ .alkali-metal { background: linear-gradient(145deg, rgba(193, 46, 46, 0.7), rgba(153, 36, 36, 0.8)); } .alkaline-earth { background: linear-gradient(145deg, rgba(224, 100, 45, 0.7), rgba(184, 80, 35, 0.8)); } .transition-metal { background: linear-gradient(145deg, rgba(251, 175, 65, 0.7), rgba(211, 145, 45, 0.8)); } .post-transition { background: linear-gradient(145deg, rgba(58, 158, 167, 0.7), rgba(48, 128, 137, 0.8)); } .metalloid { background: linear-gradient(145deg, rgba(77, 175, 125, 0.7), rgba(57, 145, 95, 0.8)); } .nonmetal { background: linear-gradient(145deg, rgba(28, 163, 236, 0.7), rgba(18, 133, 196, 0.8)); } .halogen { background: linear-gradient(145deg, rgba(113, 92, 232, 0.7), rgba(93, 72, 212, 0.8)); } .noble-gas { background: linear-gradient(145deg, rgba(170, 92, 219, 0.7), rgba(140, 72, 189, 0.8)); } .lanthanide { background: linear-gradient(145deg, rgba(158, 58, 166, 0.7), rgba(128, 48, 136, 0.8)); } .actinide { background: linear-gradient(145deg, rgba(196, 58, 105, 0.7), rgba(166, 48, 85, 0.8)); } .unknown { background: linear-gradient(145deg, rgba(90, 90, 90, 0.7), rgba(60, 60, 60, 0.8)); } /* Responsive adjustments */ @media (max-width: 600px) { .periodic-table { grid-gap: 2px; } .symbol { font-size: 0.9em; } .number { font-size: 0.6em; } .name, .weight { font-size: 0.5em; } .detail-view { width: 280px; } } @media (max-width: 400px) { .periodic-table { grid-gap: 1px; } .symbol { font-size: 0.8em; } .element:hover { transform: translateZ(10px) scale(1.05); } .element.active { transform: translateZ(30px) scale(1.3); } } .ar-mode-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in-out; } .ar-mode-overlay.active { opacity: 1; pointer-events: all; } .ar-mode-header { font-size: 1.5rem; margin-bottom: 20px; text-align: center; color: #fff; } .ar-mode-content { max-width: 80%; text-align: center; } .ar-mode-instruction { color: #ccc; margin-bottom: 30px; } .ar-mode-action { background: linear-gradient(135deg, #7c4dff, #00bcd4); color: white; padding: 12px 24px; border-radius: 30px; font-weight: bold; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; border: none; font-size: 1rem; } .ar-mode-action:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 188, 212, 0.3); } .grid-cell { grid-column: span 1; grid-row: span 1; } .empty { visibility: hidden; } .lanthanide-actinide-spacer { grid-column: span 18; height: 8px; } .lanthanide-actinide-label { grid-column: span 3; font-size: 0.7em; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); } /* AR depth effects */ .depth-effect { position: absolute; bottom: 0; left: 0; right: 0; height: 20%; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.2)); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; pointer-events: none; } .shine-effect { position: absolute; top: 0; left: 0; right: 0; height: 30%; background: linear-gradient(to top, transparent, rgba(255, 255, 255, 0.1)); border-top-left-radius: 4px; border-top-right-radius: 4px; pointer-events: none; } /* Animation for selected element */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(124, 77, 255, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(124, 77, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(124, 77, 255, 0); } } </style> </head> <body> <div class="container"> <header> <h1>AR Periodic Table</h1> <p class="subtitle">Lift elements for detailed 3D exploration</p> <div class="controls"> <button class="control-btn" id="reset-view">Reset View</button> <button class="control-btn" id="toggle-ar-mode">AR Preview</button> </div> <div class="legend"> <div class="legend-item"> <div class="legend-color alkali-metal"></div> <span>Alkali Metals</span> </div> <div class="legend-item"> <div class="legend-color alkaline-earth"></div> <span>Alkaline Earth</span> </div> <div class="legend-item"> <div class="legend-color transition-metal"></div> <span>Transition Metals</span> </div> <div class="legend-item"> <div class="legend-color post-transition"></div> <span>Post-Transition</span> </div> <div class="legend-item"> <div class="legend-color metalloid"></div> <span>Metalloids</span> </div> <div class="legend-item"> <div class="legend-color nonmetal"></div> <span>Nonmetals</span> </div> <div class="legend-item"> <div class="legend-color halogen"></div> <span>Halogens</span> </div> <div class="legend-item"> <div class="legend-color noble-gas"></div> <span>Noble Gases</span> </div> </div> </header> <div class="orbit-container"> <div class="orbit"> <div class="particle" style="top: 0; left: 50%;"></div> <div class="particle" style="bottom: 0; left: 50%;"></div> <div class="particle" style="left: 0; top: 50%;"></div> <div class="particle" style="right: 0; top: 50%;"></div> </div> <div class="orbit"> <div class="particle" style="top: 0; left: 50%;"></div> <div class="particle" style="bottom: 0; left: 50%;"></div> <div class="particle" style="left: 0; top: 50%;"></div> <div class="particle" style="right: 0; top: 50%;"></div> </div> <div class="orbit"> <div class="particle" style="top: 0; left: 50%;"></div> <div class="particle" style="bottom: 0; left: 50%;"></div> <div class="particle" style="left: 0; top: 50%;"></div> <div class="particle" style="right: 0; top: 50%;"></div> </div> </div> <div class="periodic-table" id="periodic-table"> <!-- Table will be populated by JavaScript --> </div> <div class="detail-view" id="detail-view"> <button class="close-btn" id="close-detail">×</button> <div class="detail-header"> <div class="detail-symbol" id="detail-symbol">H</div> <div class="detail-info"> <div class="detail-name" id="detail-name">Hydrogen</div> <div class="detail-number" id="detail-number">Atomic number: 1</div> <div class="detail-weight" id="detail-weight">Atomic weight: 1.008</div> </div> </div> <div class="detail-properties" id="detail-properties"> <!-- Properties will be populated by JavaScript --> </div> </div> <div class="ar-hint"> <div class="ar-icon"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M2 9.5C2 8.11929 3.11929 7 4.5 7H6.5C7.88071 7 9 8.11929 9 9.5V11.5C9 12.8807 7.88071 14 6.5 14H4.5C3.11929 14 2 12.8807 2 11.5V9.5Z" stroke="white" stroke-width="1.5"/> <path d="M15 9.5C15 8.11929 16.1193 7 17.5 7H19.5C20.8807 7 22 8.11929 22 9.5V11.5C22 12.8807 20.8807 14 19.5 14H17.5C16.1193 14 15 12.8807 15 11.5V9.5Z" stroke="white" stroke-width="1.5"/> <path d="M9 9L15 12" stroke="white" stroke-width="1.5" stroke-linecap="round"/> <path d="M8.5 21L15.5 14" stroke="white" stroke-width="1.5" stroke-linecap="round"/> <path d="M17 18.5C17 19.8807 15.8807 21 14.5 21H9.5C8.11929 21 7 19.8807 7 18.5V16.5C7 15.1193 8.11929 14 9.5 14H12" stroke="white" stroke-width="1.5"/> <path d="M17 14V18.5" stroke="white" stroke-width="1.5" stroke-linecap="round"/> <path d="M15 4.5C15 3.11929 16.1193 2 17.5 2H19.5C20.8807 2 22 3.11929 22 4.5V5" stroke="white" stroke-width="1.5"/> </svg> </div> <span>Tap elements to examine in 3D space</span> </div> <div class="ar-mode-overlay" id="ar-mode-overlay"> <h2 class="ar-mode-header">AR Preview Mode</h2> <div class="ar-mode-content"> <p class="ar-mode-instruction">In a real AR environment, you would now see the elements floating in your physical space. Move your device to navigate around the periodic table and tap elements to expand them.</p> <button class="ar-mode-action" id="exit-ar-mode">Return to Table View</button> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Element data const elements = [ {number: 1, symbol: 'H', name: 'Hydrogen', weight: 1.008, category: 'nonmetal', column: 1, row: 1, properties: { 'State': 'Gas', 'Electrons': '1', 'Melting Point': '-259.1°C', 'Discovery': '1766', 'Density': '0.00009 g/cm³', '3D Structure': 'Diatomic' }}, {number: 2, symbol: 'He', name: 'Helium', weight: 4.0026, category: 'noble-gas', column: 18, row: 1, properties: { 'State': 'Gas', 'Electrons': '2', 'Melting Point': '-272.2°C', 'Discovery': '1868', 'Density': '0.00018 g/cm³', '3D Structure': 'Monatomic' }}, {number: 3, symbol: 'Li', name: 'Lithium', weight: 6.94, category: 'alkali-metal', column: 1, row: 2, properties: { 'State': 'Solid', 'Electrons': '3', 'Melting Point': '180.5°C', 'Discovery': '1817', 'Density': '0.53 g/cm³', '3D Structure': 'Body-centered cubic' }}, {number: 4, symbol: 'Be', name: 'Beryllium', weight: 9.0122, category: 'alkaline-earth', column: 2, row: 2, properties: { 'State': 'Solid', 'Electrons': '4', 'Melting Point': '1287°C', 'Discovery': '1798', 'Density': '1.85 g/cm³', '3D Structure': 'Hexagonal close-packed' }}, {number: 5, symbol: 'B', name: 'Boron', weight: 10.81, category: 'metalloid', column: 13, row: 2, properties: { 'State': 'Solid', 'Electrons': '5', 'Melting Point': '2075°C', 'Discovery': '1808', 'Density': '2.34 g/cm³', '3D Structure': 'Rhombohedral' }}, {number: 6, symbol: 'C', name: 'Carbon', weight: 12.011, category: 'nonmetal', column: 14, row: 2, properties: { 'State': 'Solid', 'Electrons': '6', 'Melting Point': '3550°C', 'Discovery': 'Prehistoric', 'Density': '2.27 g/cm³', '3D Structure': 'Hexagonal/Diamond cubic' }}, {number: 7, symbol: 'N', name: 'Nitrogen', weight: 14.007, category: 'nonmetal', column: 15, row: 2, properties: { 'State': 'Gas', 'Electrons': '7', 'Melting Point': '-210°C', 'Discovery': '1772', 'Density': '0.00125 g/cm³', '3D Structure': 'Diatomic' }}, {number: 8, symbol: 'O', name: 'Oxygen', weight: 15.999, category: 'nonmetal', column: 16, row: 2, properties: { 'State': 'Gas', 'Electrons': '8', 'Melting Point': '-218.8°C', 'Discovery': '1774', 'Density': '0.00143 g/cm³', '3D Structure': 'Diatomic' }}, {number: 9, symbol: 'F', name: 'Fluorine', weight: 18.998, category: 'halogen', column: 17, row: 2, properties: { 'State': 'Gas', 'Electrons': '9', 'Melting Point': '-219.6°C', 'Discovery': '1886', 'Density': '0.00170 g/cm³', '3D Structure': 'Diatomic' }}, {number: 10, symbol: 'Ne', name: 'Neon', weight: 20.180, category: 'noble-gas', column: 18, row: 2, properties: { 'State': 'Gas', 'Electrons': '10', 'Melting Point': '-248.6°C', 'Discovery': '1898', 'Density': '0.0009 g/cm³', '3D Structure': 'Face-centered cubic' }}, {number: 11, symbol: 'Na', name: 'Sodium', weight: 22.990, category: 'alkali-metal', column: 1, row: 3, properties: { 'State': 'Solid', 'Electrons': '11', 'Melting Point': '97.8°C', 'Discovery': '1807', 'Density': '0.97 g/cm³', '3D Structure': 'Body-centered cubic' }}, {number: 12, symbol: 'Mg', name: 'Magnesium', weight: 24.305, category: 'alkaline-earth', column: 2, row: 3, properties: { 'State': 'Solid', 'Electrons': '12', 'Melting Point': '650°C', 'Discovery': '1808', 'Density': '1.74 g/cm³', '3D Structure': 'Hexagonal close-packed' }}, {number: 13, symbol: 'Al', name: 'Aluminum', weight: 26.982, category: 'post-transition', column: 13, row: 3, properties: { 'State': 'Solid', 'Electrons': '13', 'Melting Point': '660.3°C', 'Discovery': '1827', 'Density': '2.70 g/cm³', '3D Structure': 'Face-centered cubic' }}, {number: 14, symbol: 'Si', name: 'Silicon', weight: 28.085, category: 'metalloid', column: 14, row: 3, properties: { 'State': 'Solid', 'Electrons': '14', 'Melting Point': '1414°C', 'Discovery': '1824', 'Density': '2.33 g/cm³', '3D Structure': 'Diamond cubic' }}, {number: 15, symbol: 'P', name: 'Phosphorus', weight: 30.974, category: 'nonmetal', column: 15, row: 3, properties: { 'State': 'Solid', 'Electrons': '15', 'Melting Point': '44.2°C', 'Discovery': '1669', 'Density': '1.82 g/cm³', '3D Structure': 'Various allotropes' }}, {number: 16, symbol: 'S', name: 'Sulfur', weight: 32.06, category: 'nonmetal', column: 16, row: 3, properties: { 'State': 'Solid', 'Electrons': '16', 'Melting Point': '115.2°C', 'Discovery': 'Prehistoric', 'Density': '2.07 g/cm³', '3D Structure': 'Orthorhombic' }}, {number: 17, symbol: 'Cl', name: 'Chlorine', weight: 35.45, category: 'halogen', column: 17, row: 3, properties: { 'State': 'Gas', 'Electrons': '17', 'Melting Point': '-101.5°C', 'Discovery': '1774', 'Density': '0.0032 g/cm³', '3D Structure': 'Diatomic' }}, {number: 18, symbol: 'Ar', name: 'Argon', weight: 39.948, category: 'noble-gas', column: 18, row: 3, properties: { 'State': 'Gas', 'Electrons': '18', 'Melting Point': '-189.3°C', 'Discovery': '1894', 'Density': '0.0018 g/cm³', '3D Structure': 'Face-centered cubic' }}, {number: 19, symbol: 'K', name: 'Potassium', weight: 39.098, category: 'alkali-metal', column: 1, row: 4, properties: { 'State': 'Solid', 'Electrons': '19', 'Melting Point': '63.5°C', 'Discovery': '1807', 'Density': '0.86 g/cm³', '3D Structure': 'Body-centered cubic' }}, {number: 20, symbol: 'Ca', name: 'Calcium', weight: 40.078, category: 'alkaline-earth', column: 2, row: 4, properties: { 'State': 'Solid', 'Electrons': '20', 'Melting Point': '842°C', 'Discovery': '1808', 'Density': '1.55 g/cm³', '3D Structure': 'Face-centered cubic' }}, // Adding some common elements from different groups {number: 26, symbol: 'Fe', name: 'Iron', weight: 55.845, category: 'transition-metal', column: 8, row: 4, properties: { 'State': 'Solid', 'Electrons': '26', 'Melting Point': '1538°C', 'Discovery': 'Prehistoric', 'Density': '7.87 g/cm³', '3D Structure': 'Body-centered cubic' }}, {number: 29, symbol: 'Cu', name: 'Copper', weight: 63.546, category: 'transition-metal', column: 11, row: 4, properties: { 'State': 'Solid', 'Electrons': '29', 'Melting Point': '1085°C', 'Discovery': 'Prehistoric', 'Density': '8.96 g/cm³', '3D Structure': 'Face-centered cubic' }}, {number: 47, symbol: 'Ag', name: 'Silver', weight: 107.87, category: 'transition-metal', column: 11, row: 5, properties: { 'State': 'Solid', 'Electrons': '47', 'Melting Point': '961.8°C', 'Discovery': 'Prehistoric', 'Density': '10.49 g/cm³', '3D Structure': 'Face-centered cubic' }}, {number: 79, symbol: 'Au', name: 'Gold', weight: 196.97, category: 'transition-metal', column: 11, row: 6, properties: { 'State': 'Solid', 'Electrons': '79', 'Melting Point': '1064°C', 'Discovery': 'Prehistoric', 'Density': '19.30 g/cm³', '3D Structure': 'Face-centered cubic' }}, {number: 35, symbol: 'Br', name: 'Bromine', weight: 79.904, category: 'halogen', column: 17, row: 4, properties: { 'State': 'Liquid', 'Electrons': '35', 'Melting Point': '-7.2°C', 'Discovery': '1826', 'Density': '3.12 g/cm³', '3D Structure': 'Diatomic' }}, {number: 53, symbol: 'I', name: 'Iodine', weight: 126.90, category: 'halogen', column: 17, row: 5, properties: { 'State': 'Solid', 'Electrons': '53', 'Melting Point': '113.7°C', 'Discovery': '1
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Interactive Periodic Table Exhibition</title> <style> :root { --alkali-metal: #ff6663; --alkaline-earth: #feb144; --transition-metal: #fdfd97; --post-transition: #9ee09e; --metalloid: #9ec1cf; --nonmetal: #cc99c9; --noble-gas: #c7ceea; --lanthanide: #87bfff; --actinide: #caa6fe; --unknown: #e0e0e0; --background: #1a1a2e; --text: #e6e6e6; --highlight: #4facfe; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--background); color: var(--text); display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; } .container { display: flex; flex-direction: column; width: 100%; height: 100vh; max-width: 700px; max-height: 700px; margin: 0 auto; padding: 10px; overflow: hidden; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 5px; } .title { font-size: 1.5rem; font-weight: bold; background: linear-gradient(45deg, #4facfe 0%, #00f2fe 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 10px rgba(79, 172, 254, 0.3); } .controls { display: flex; gap: 10px; } .control-btn { padding: 5px 10px; background-color: rgba(255, 255, 255, 0.1); border: none; border-radius: 15px; color: var(--text); cursor: pointer; transition: all 0.2s ease; font-size: 0.8rem; } .control-btn:hover, .control-btn.active { background-color: var(--highlight); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(79, 172, 254, 0.5); } .content { display: flex; flex-direction: column; flex: 1; overflow: hidden; } .periodic-table { display: grid; grid-template-columns: repeat(18, 1fr); grid-template-rows: repeat(10, 1fr); gap: 2px; flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--highlight) transparent; padding-right: 5px; transition: all 0.3s ease; } .periodic-table::-webkit-scrollbar { width: 5px; } .periodic-table::-webkit-scrollbar-track { background: transparent; } .periodic-table::-webkit-scrollbar-thumb { background-color: var(--highlight); border-radius: 20px; } .element { border-radius: 4px; padding: 4px; font-size: 0.7rem; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; transition: all 0.2s ease; position: relative; overflow: hidden; aspect-ratio: 1/1; user-select: none; } .element:hover { transform: scale(1.1); z-index: 2; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } .atomic-number { font-size: 0.5rem; opacity: 0.8; align-self: flex-start; } .symbol { font-size: 1rem; font-weight: bold; align-self: center; margin: auto; } .name { font-size: 0.45rem; align-self: center; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .empty { background-color: transparent; pointer-events: none; } .divider { grid-column: 1 / -1; height: 10px; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; color: rgba(255, 255, 255, 0.5); } .detail-view { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--background); z-index: 10; display: none; flex-direction: column; padding: 20px; animation: slideIn 0.3s ease; overflow-y: auto; } @keyframes slideIn { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .detail-close { background: none; border: none; color: var(--text); font-size: 1.5rem; cursor: pointer; transition: transform 0.2s ease; } .detail-close:hover { transform: rotate(90deg); color: var(--highlight); } .element-info { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; margin-bottom: 20px; } .element-symbol { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; border-radius: 10px; transition: all 0.3s ease; } .element-symbol .number { font-size: 1rem; margin-bottom: 5px; } .element-symbol .symbol { font-size: 3rem; font-weight: bold; margin-bottom: 5px; } .element-symbol .name { font-size: 1rem; } .element-symbol .mass { font-size: 0.8rem; opacity: 0.8; margin-top: 5px; } .element-properties { display: flex; flex-direction: column; gap: 10px; } .property { display: flex; justify-content: space-between; padding: 8px; background-color: rgba(255, 255, 255, 0.05); border-radius: 5px; } .property-name { font-weight: bold; } .element-description { margin-top: 20px; line-height: 1.6; } .element-history { margin-top: 20px; } .history-title { font-size: 1.2rem; margin-bottom: 10px; color: var(--highlight); } .category-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 10px; padding: 5px; background-color: rgba(255, 255, 255, 0.05); border-radius: 5px; } .legend-item { display: flex; align-items: center; font-size: 0.6rem; margin-right: 5px; } .legend-color { width: 12px; height: 12px; margin-right: 4px; border-radius: 3px; } .atom-visualization { margin-top: 20px; height: 200px; position: relative; display: flex; justify-content: center; align-items: center; } .nucleus { width: 50px; height: 50px; background: radial-gradient(circle, #ff6663 0%, #ff4040 100%); border-radius: 50%; position: relative; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 20px rgba(255, 102, 99, 0.5); z-index: 2; } .electron-shell { position: absolute; border: 1px dashed rgba(255, 255, 255, 0.3); border-radius: 50%; animation: rotate 15s linear infinite; } .electron { width: 10px; height: 10px; background-color: var(--highlight); border-radius: 50%; position: absolute; box-shadow: 0 0 10px var(--highlight); } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } } .interactive-tabs { display: flex; justify-content: space-around; margin-top: 20px; } .tab { padding: 8px 15px; background-color: rgba(255, 255, 255, 0.1); border: none; border-radius: 20px; color: var(--text); cursor: pointer; transition: all 0.2s ease; } .tab.active { background-color: var(--highlight); box-shadow: 0 2px 10px rgba(79, 172, 254, 0.5); } .tab-content { margin-top: 15px; display: none; } .tab-content.active { display: block; animation: fadeIn 0.5s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Time slider */ .time-slider-container { position: relative; margin-top: 15px; display: none; } .time-slider { width: 100%; height: 6px; appearance: none; background: linear-gradient(to right, #000000, #4facfe); border-radius: 5px; outline: none; } .time-slider::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--highlight); cursor: pointer; transition: all 0.2s; } .time-slider::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: 0 0 10px var(--highlight); } .time-marker { position: absolute; top: 15px; transform: translateX(-50%); font-size: 0.6rem; color: rgba(255, 255, 255, 0.7); } .time-info { text-align: center; margin-top: 35px; font-size: 0.9rem; } .discovery-animation { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; pointer-events: none; } .discovery-particle { position: absolute; background-color: var(--highlight); border-radius: 50%; opacity: 0; } /* Media Queries */ @media (max-width: 500px) { .periodic-table { grid-template-columns: repeat(9, 1fr); grid-auto-rows: 1fr; } .element { font-size: 0.6rem; } .symbol { font-size: 0.8rem; } .element-info { grid-template-columns: 1fr; } .controls { flex-wrap: wrap; } } /* Modal */ .info-modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--background); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 20px; max-width: 80%; max-height: 80%; overflow-y: auto; z-index: 20; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); display: none; } .modal-close { position: absolute; top: 10px; right: 10px; background: none; border: none; color: var(--text); font-size: 1.2rem; cursor: pointer; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 15; display: none; } .tooltip { position: absolute; background-color: rgba(0, 0, 0, 0.8); color: white; padding: 5px 10px; border-radius: 5px; font-size: 0.7rem; z-index: 5; pointer-events: none; white-space: nowrap; transform: translateY(10px); opacity: 0; transition: opacity 0.3s, transform 0.3s; } .tooltip.show { opacity: 1; transform: translateY(0); } .loading-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--background); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 30; } .loading-title { font-size: 2rem; margin-bottom: 20px; background: linear-gradient(45deg, #4facfe 0%, #00f2fe 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .loading-bar-container { width: 60%; height: 10px; background-color: rgba(255, 255, 255, 0.1); border-radius: 5px; overflow: hidden; } .loading-bar { height: 100%; width: 0; background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); border-radius: 5px; transition: width 0.5s ease; } .loading-text { margin-top: 10px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); } .tour-point { position: absolute; background-color: var(--highlight); border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 0.8rem; cursor: pointer; box-shadow: 0 0 10px var(--highlight); z-index: 5; animation: pulse 1.5s infinite; } .help-btn { position: absolute; bottom: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); color: var(--text); display: flex; align-items: center; justify-content: center; font-size: 1rem; cursor: pointer; transition: all 0.2s ease; z-index: 5; } .help-btn:hover { background-color: var(--highlight); transform: scale(1.1); } /* Accessibility button */ .accessibility-btn { position: absolute; bottom: 10px; left: 10px; padding: 5px 10px; background-color: rgba(255, 255, 255, 0.1); border: none; border-radius: 15px; color: var(--text); cursor: pointer; transition: all 0.2s ease; font-size: 0.8rem; z-index: 5; } .accessibility-btn:hover { background-color: var(--highlight); } .high-contrast-mode { --alkali-metal: #ff0000; --alkaline-earth: #ff8000; --transition-metal: #ffff00; --post-transition: #00ff00; --metalloid: #00ffff; --nonmetal: #8000ff; --noble-gas: #0000ff; --lanthanide: #0080ff; --actinide: #ff00ff; --background: #000000; --text: #ffffff; --highlight: #00ffff; } .high-contrast-mode .element { border: 2px solid white; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } </style> </head> <body> <div class="container"> <div class="header"> <h1 class="title">Interactive Periodic Table</h1> <div class="controls"> <button class="control-btn active" data-view="table">Table</button> <button class="control-btn" data-view="category">Categories</button> <button class="control-btn" data-view="timeline">Discovery</button> </div> </div> <div class="content"> <div class="periodic-table"> <!-- Elements will be dynamically added --> </div> <div class="category-legend"> <!-- Legend will be dynamically added --> </div> </div> <div class="time-slider-container"> <input type="range" class="time-slider" min="-3000" max="2023" value="2023" step="100"> <div class="time-info">Modern Era (2023 CE)</div> </div> <div class="detail-view"> <div class="detail-header"> <h2 class="detail-title">Element Details</h2> <button class="detail-close">×</button> </div> <div class="element-info"> <div class="element-symbol"> <div class="number"></div> <div class="symbol"></div> <div class="name"></div> <div class="mass"></div> </div> <div class="element-properties"> <!-- Properties will be dynamically added --> </div> </div> <div class="element-description"> <!-- Description will be dynamically added --> </div> <div class="interactive-tabs"> <button class="tab active" data-tab="structure">Atomic Structure</button> <button class="tab" data-tab="history">History</button> <button class="tab" data-tab="uses">Uses</button> </div> <div class="tab-content active" data-tab="structure"> <div class="atom-visualization"> <div class="nucleus"></div> <!-- Electron shells will be dynamically added --> </div> </div> <div class="tab-content" data-tab="history"> <div class="element-history"> <!-- History will be dynamically added --> </div> </div> <div class="tab-content" data-tab="uses"> <!-- Uses will be dynamically added --> </div> </div> <div class="info-modal"> <button class="modal-close">×</button> <div class="modal-content"></div> </div> <div class="overlay"></div> <div class="tooltip"></div> <button class="help-btn">?</button> <button class="accessibility-btn">A</button> <div class="loading-screen"> <h1 class="loading-title">Element Explorer</h1> <div class="loading-bar-container"> <div class="loading-bar"></div> </div> <p class="loading-text">Loading the periodic table...</p> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Show loading animation const loadingBar = document.querySelector('.loading-bar'); const loadingScreen = document.querySelector('.loading-screen'); const loadingText = document.querySelector('.loading-text'); // Simulate loading progress let progress = 0; const loadingInterval = setInterval(() => { progress += 5; loadingBar.style.width = `${progress}%`; if (progress === 30) { loadingText.textContent = "Arranging elements..."; } else if (progress === 60) { loadingText.textContent = "Calculating atomic properties..."; } else if (progress === 90) { loadingText.textContent = "Preparing interactive features..."; } if (progress >= 100) { clearInterval(loadingInterval); setTimeout(() => { loadingScreen.style.animation = "fadeOut 0.5s forwards"; setTimeout(() => { loadingScreen.style.display = "none"; }, 500); }, 500); } }, 50); // Element data const elements = [ { number: 1, symbol: 'H', name: 'Hydrogen', category: 'nonmetal', mass: 1.008, row: 1, col: 1, state: 'gas', group: 1, period: 1, electronConfig: '1s¹', electronegativity: 2.2, density: 0.0000899, meltingPoint: -259.16, boilingPoint: -252.879, discoveryYear: 1766, discoveredBy: 'Henry Cavendish', electrons: [1], description: "Hydrogen is the lightest and most abundant chemical element in the universe. It's often found as a colorless, odorless, tasteless, and highly flammable gas.", history: "In 1766, Henry Cavendish recognized hydrogen as a distinct element after studying the gas produced when metals react with acid. Antoine Lavoisier later gave it the name 'hydrogen', meaning 'water-former', due to its property of producing water when burned.", uses: "Hydrogen is used in many industrial processes including fossil fuel processing, ammonia production, and as a clean fuel source. Liquid hydrogen is used as a rocket fuel, and hydrogen fuel cells are increasingly important in clean energy applications." }, { number: 2, symbol: 'He', name: 'Helium', category: 'noble-gas', mass: 4.0026, row: 1, col: 18, state: 'gas', group: 18, period: 1, electronConfig: '1s²', electronegativity: null, density: 0.0001785, meltingPoint: -272.2, boilingPoint: -268.93, discoveryYear: 1868, discoveredBy: 'Pierre Janssen, Norman Lockyer', electrons: [2], description: "Helium is a colorless, odorless, tasteless, non-toxic, inert, monatomic gas that heads the noble gas group in the periodic table. Its boiling point is the lowest among all the elements.", history: "Helium was first detected as an unknown yellow spectral line during a solar eclipse in 1868 by French astronomer Jules Janssen. Norman Lockyer and Edward Frankland suggested the name 'helium' after the Greek word for the Sun, 'helios'. It wasn't actually isolated on Earth until 1895 by William Ramsay.", uses: "Due to its low density and inertness, helium is used to fill balloons and airships. Its extremely low boiling point makes it essential for superconducting magnets in MRI machines and particle accelerators. It's also used in welding, leak detection, and as a protective gas for growing silicon and germanium crystals." }, // Lithium to Neon (Row 2) { number: 3, symbol: 'Li', name: 'Lithium', category: 'alkali-metal', mass: 6.94, row: 2, col: 1, state: 'solid', group: 1, period: 2, electronConfig: '[He] 2s¹', electronegativity: 0.98, density: 0.534, meltingPoint: 180.54, boilingPoint: 1342, discoveryYear: 1817, discoveredBy: 'Johan August Arfwedson', electrons: [2, 1], description: "Lithium is a soft, silvery-white alkali metal that's highly reactive and flammable. It's the lightest metal and the least dense solid element at room temperature.", history: "Johan August Arfwedson discovered lithium in 1817 during an analysis of petalite ore. The name comes from 'lithos' (Greek for stone), reflecting its discovery in a mineral, unlike other alkali metals first found in plant material.", uses: "Lithium is crucial for rechargeable batteries in electronics and electric vehicles. Lithium compounds are used in psychiatry to treat bipolar disorder. It's also used in aerospace alloys, ceramics, and lubricating greases." }, { number: 4, symbol: 'Be', name: 'Beryllium', category: 'alkaline-earth', mass: 9.0122, row: 2, col: 2, state: 'solid', group: 2, period: 2, electronConfig: '[He] 2s²', electronegativity: 1.57, density: 1.85, meltingPoint: 1287, boilingPoint: 2469, discoveryYear: 1798, discoveredBy: 'Louis Nicolas Vauquelin', electrons: [2, 2], description: "Beryllium is a relatively rare element in the universe. It's a steel-gray, strong, lightweight and brittle alkaline earth metal that's toxic to humans.", history: "Beryllium was discovered by Louis Nicolas Vauquelin in 1798 as the oxide in beryl and emeralds. Friedrich Wöhler and Antoine Bussy independently isolated the metal in 1828 through the reduction of beryllium chloride with potassium.", uses: "Despite its toxicity, beryllium is used in structural materials for high-speed aircraft, missiles, spacecraft, and communication satellites. It's also used in X-ray equipment, nuclear reactors, and in alloys with copper and nickel." }, { number: 5, symbol: 'B', name: 'Boron', category: 'metalloid', mass: 10.81, row: 2, col: 13, state: 'solid', group: 13, period: 2, electronConfig: '[He] 2s² 2p¹', electronegativity: 2.04, density: 2.34, meltingPoint: 2076, boilingPoint: 3927, discoveryYear: 1808, discoveredBy: 'Joseph Louis Gay-Lussac, Louis Jacques Thénard', electrons: [2, 3], description: "Boron is a semiconductor with properties between metals and non-metals. It never occurs in nature as a free element but is found in compounds such as borax and boric acid.", history: "Boron compounds have been known for thousands of years, but the element wasn't identified until 1808 when Sir Humphry Davy, and independently, Joseph Louis Gay-Lussac and Louis Jacques Thénard, isolated it by reacting boric acid with potassium.", uses: "Boron is essential for plant growth and is used in fertilizers. Its compounds are used in cleaning products, fiberglass, ceramics, glass, and semiconductors. Boron filaments are used in aerospace structures, while boron neutron capture therapy is used in cancer treatment." }, { number: 6, symbol: 'C', name: 'Carbon', category: 'nonmetal', mass: 12.011, row: 2, col: 14, state: 'solid', group: 14, period: 2, electronConfig: '[He] 2s² 2p²', electronegativity: 2.55, density: 2.267, meltingPoint: 3550, boilingPoint: 4027, discoveryYear: -3000, discoveredBy: 'Ancient civilizations', electrons: [2, 4], description: "Carbon is the 15th most abundant element in Earth's crust and the 4th most abundant in the universe. It forms the basis of all known life on Earth with its ability to form complex chains and networks.", history: "Carbon has been known since ancient times in the form of charcoal, soot, and diamond. Antoine Lavoisier showed in 1772 that diamonds are a form of carbon, and carbon was recognized as an element during the 1789 chemical revolution.", uses: "Carbon's allotropes (diamond, graphite, fullerenes, etc.) have varied applications. Diamond is used in jewelry and cutting tools; graphite in pencils and lubricants; carbon fibers in high-strength materials; and activated carbon in filtration systems. Carbon forms the basis of fossil fuels, plastics, and countless organic compounds." }, { number: 7, symbol: 'N', name: 'Nitrogen', category: 'nonmetal', mass: 14.007, row: 2, col: 15, state: 'gas', group: 15, period: 2, electronConfig: '[He] 2s² 2p³', electronegativity: 3.04, density: 0.001251, meltingPoint: -210.1, boilingPoint: -195.79, discoveryYear: 1772, discoveredBy: 'Daniel Rutherford', electrons: [2, 5], description: "Nitrogen is a colorless, odorless, tasteless gas that makes up about 78% of Earth's atmosphere. It's relatively inert due to the strong triple bond between nitrogen atoms in its diatomic form (N₂).", history: "Daniel Rutherford discovered nitrogen in 1772 when he removed oxygen and carbon dioxide from air and found a residual gas that wouldn't support combustion or life. Antoine Lavoisier called it 'azote' (Greek for 'no life'), but the name nitrogen (from the Greek 'nitron genes', meaning 'nitre forming') prevailed.", uses: "Nitrogen is essential for plant growth and is used extensively in fertilizers. Liquid nitrogen is used as a refrigerant. Nitrogen gas is used to create inert atmospheres for food packaging, electronics manufacturing, and metal production. It's also essential for making ammonia, nitric acid, and explosives." }, { number: 8, symbol: 'O', name: 'Oxygen', category: 'nonmetal', mass: 15.999, row: 2, col: 16, state: 'gas', group: 16, period: 2, electronConfig: '[He] 2s² 2p⁴', electronegativity: 3.44, density: 0.001429, meltingPoint: -218.79, boilingPoint: -182.962, discoveryYear: 1774, discoveredBy: 'Joseph Priestley, Carl Wilhelm Scheele', electrons: [2, 6], description: "Oxygen is a highly reactive, colorless gas that forms about 21% of Earth's atmosphere. It's essential for most forms of life through respiration and is the most abundant element in the Earth's crust.", history: "Oxygen was independently discovered by Carl Wilhelm Scheele in 1772 and Joseph Priestley in 1774, with Priestley publishing first. Antoine Lavoisier later identified it as an element and named it 'oxygen' from Greek words meaning 'acid-former' because he mistakenly believed all acids contained oxygen.", uses: "Beyond its critical role in respiration, oxygen is used in steelmaking, welding, water treatment, rocket propulsion, and medicine. Liquid oxygen is used as an oxidizer in rocket fuels, while medical-grade oxygen helps patients with breathing difficulties." }, { number: 9, symbol: 'F', name: 'Fluorine', category: 'nonmetal', mass: 18.998, row: 2, col: 17, state: 'gas', group: 17, period: 2, electronConfig: '[He] 2s² 2p⁵', electronegativity: 3.98, density: 0.001696, meltingPoint: -219.67, boilingPoint: -188.11, discoveryYear: 1886, discoveredBy: 'Henri Moissan', electrons: [2, 7], description: "Fluorine is the lightest halogen and the most electronegative of all elements. It's a pale yellow, highly reactive and toxic gas that readily forms compounds with most other elements.", history: "Although compounds containing fluorine had been used for centuries, isolating the element proved extremely challenging due to its reactivity. After many failed attempts (some fatal), Henri Moissan finally isolated fluorine in 1886 through electrolysis of potassium fluoride in liquid hydrogen fluoride, earning him the 1906 Nobel Prize in Chemistry.", uses: "Fluorine is used to produce uranium hexafluoride for nuclear fuel. Fluoride compounds are added to drinking water and toothpaste to prevent tooth decay. Chlorofluorocarbons (CFCs) were once widely used as refrigerants before being phased out due to ozone depletion. Polytetrafluoroethylene (PTFE/Teflon) is used in non-stick cookware and industrial applications." }, { number: 10, symbol: 'Ne', name: 'Neon', category: 'noble-gas', mass: 20.180, row: 2, col: 18, state: 'gas', group: 18, period: 2, electronConfig: '[He] 2s² 2p⁶', electronegativity: null, density: 0.0008999, meltingPoint: -248.59, boilingPoint: -246.046, discoveryYear: 1898, discoveredBy: 'William Ramsay, Morris Travers', electrons: [2, 8], description: "Neon is a colorless, odorless, inert monatomic gas under standard conditions, with about two-thirds the density of air. It gives a distinctive reddish-orange glow when used in discharge tubes and neon lamps.", history: "William Ramsay and Morris Travers discovered neon in 1898 by studying liquefied air. Its name comes from the Greek 'neos' meaning 'new'. Neon was a commercial success within a decade of its discovery when French engineer Georges Claude developed the neon discharge tube, leading to the creation of neon signs.", uses: "Neon's most famous application is in neon signs, where it produces the red-orange glow. It's also used in voltage indicators, lightning arrestors, high-voltage indicators, television tubes, and as a cryogenic refrigerant. Liquid neon is an important cryogenic refrigerant, offering over 40 times more refrigerating capacity per unit volume than liquid helium." }, // Sodium to Argon (Row 3) { number: 11, symbol: 'Na', name: 'Sodium', category: 'alkali-metal', mass: 22.990, row: 3, col: 1, state:
