Most of us met the periodic table for the first time on a faded classroom poster — rows of tiny boxes, hard to read, harder to love. It sat on the wall like a phone directory of the universe: complete, correct, and completely uninviting. Elementra was built to change that first impression.
Elementra is a modern, fully interactive periodic table that runs right in your browser. No downloads, no sign-ups, no waiting. Open it once and every one of the 118 known chemical elements is in front of you — from Hydrogen, the very first entry, all the way to Oganesson at the far edge of the table. Each element sits exactly where chemistry says it should, arranged across 18 groups and 7 periods, with the lanthanide and actinide series laid out clearly in their own rows so nothing feels crammed or confusing.
But what makes Elementra different is not just what it shows — it is how it feels to use.
A design that makes you want to explore
The whole experience is built on a clean white canvas with a fresh indigo-and-teal color scheme. Soft pastel glows drift slowly in the background, and a fine animated grid gives the page a quiet sense of depth, like graph paper from a scientist’s notebook come to life. Tiny glowing particles float and connect behind the table — a gentle nod to atoms and bonds — without ever distracting you from the content.
Every element tile is a small card of its own, topped with a colored bar that tells you its family at a glance. Hover over any tile and it lifts toward you with a subtle glow in its category color. It is a small touch, but it makes browsing the table feel less like reading a chart and more like picking up real objects from a tray.
The typography matters too. The entire site is set in Jost, a clean geometric typeface that keeps numbers, symbols and names crisp at every size — whether you are reading “H” in a tiny tile or “Rutherfordium” in a detail card.
Find any element in seconds
At the top of the table sits a live search bar, and it works the way search should: instantly. Start typing and the table responds with every keystroke. You can search three different ways —
Type a name, like “gold” or even just “gol”, and matching elements stay bright while everything else fades quietly into the background. Type a symbol, like “Fe” or “Au”, and the exact element lights up. Or type an atomic number — “79” — and Elementra takes you straight to it. There is no search button to press and no page reload. The table itself is the results page.
Filter by family with one tap
Below the search bar you will find ten color-coded filter chips, one for each family of elements: Alkali Metals, Alkaline Earth Metals, Transition Metals, Post-transition Metals, Metalloids, Nonmetals, Halogens, Noble Gases, Lanthanides and Actinides. Tap any chip and the table instantly highlights only that family, dimming the rest. It is one of the fastest ways to actually see the structure of the periodic table — how the alkali metals hug the left edge, how the noble gases stand quietly on the right, how the transition metals fill the wide middle ground. For students, this single feature turns an abstract idea from a textbook into something you can watch happen on screen.
Every element gets its own card
Click or tap any element and a detail card slides open with a satisfying animation. Inside, you get the essentials laid out cleanly: atomic number, atomic mass, group, period, block (s, p, d or f), physical state at room temperature, category, and the year of discovery — from elements known since ancient times, like copper and gold, to Tennessine, which only joined the table in 2010. The card is color-matched to the element’s family, so even the popup teaches you something before you read a single word.
Built for every screen
Elementra is fully responsive. On a desktop or laptop, the full 18-column table spreads out in all its glory. On a tablet or phone, the table becomes smoothly swipeable — slide sideways to travel across the periods, tap to open any element. Buttons are finger-friendly, text stays readable, and the animations remain silky on mobile hardware. And for users who prefer reduced motion, Elementra respects that system setting automatically and calms itself down.
Who is Elementra for?
Students preparing for chemistry exams who need a quick, reliable reference that does not bury them in clutter. Teachers who want something beautiful to project on a classroom screen — something that makes pupils lean forward instead of switching off. Quiz lovers and science enthusiasts who simply enjoy wandering through the building blocks of everything. Parents helping with homework at the kitchen table. And honestly, anyone who has ever wondered why Mercury is a liquid, which elements are gases at room temperature, or when Neon was discovered (1898, if you are curious — the same busy year as Krypton and Xenon).
Lightweight by design
Under the hood, Elementra is a single self-contained web page — pure HTML, CSS and JavaScript with no heavy frameworks, no trackers and no bloat. It loads fast even on slow connections, works offline once opened, and can be shared as easily as sending one file. That simplicity is deliberate: a reference tool should be there the instant you need it.
Crafted by Coding Stellix
Elementra is designed and developed by Coding Stellix, where the goal is always the same — take something useful and make it genuinely enjoyable to use. From the gradient logo in the corner to the last footer link, every detail here was built by hand with care: the layout, the color system, the animations, the data, all of it. Learn. Code. Create — that is the idea behind everything we ship, and Elementra is that idea in action.
The periodic table has been around since 1869, when Dmitri Mendeleev first arranged the elements by their properties and famously left gaps for elements no one had discovered yet. More than a century and a half later, the table is complete through element 118 — and it deserves a home that looks like it belongs in this century. Elementra is that home.
Open it. Search something. Tap a tile. The building blocks of the entire universe are waiting — and for once, they are a pleasure to look at.
Elementra — The Modern Periodic Table. Designed & developed by Coding Stellix.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elementra — The Modern Periodic Table | Coding Stellix</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap" rel="stylesheet">
<style>
:root{
--bg:#f6f8fd;
--card:#ffffff;
--brand:#5b5bf0; /* indigo */
--brand2:#8b7bff; /* soft violet */
--accent:#00b8a9; /* teal */
--text:#181a2e;
--muted:#6b7086;
--line:#e5e8f4;
--shadow:0 10px 30px rgba(60,70,140,.10);
--c-alkali:#ef476f;
--c-alkearth:#f78c2a;
--c-transition:#f4b400;
--c-post:#2fb380;
--c-metalloid:#00a9b5;
--c-nonmetal:#3b82f6;
--c-halogen:#8b5cf6;
--c-noble:#ec4899;
--c-lanth:#0ea5e9;
--c-actin:#a855f7;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
font-family:'Jost',sans-serif;
background:var(--bg);
color:var(--text);
overflow-x:hidden;
min-height:100vh;
}
/* ---------- BACKGROUND ANIMATIONS ---------- */
#bgCanvas{position:fixed;inset:0;z-index:0;pointer-events:none;}
.bg-glow{position:fixed;border-radius:50%;filter:blur(120px);opacity:.35;z-index:0;pointer-events:none;animation:drift 20s ease-in-out infinite alternate;}
.glow1{width:540px;height:540px;background:#dcd9ff;top:-180px;left:-140px;}
.glow2{width:480px;height:480px;background:#c8f4ee;bottom:-170px;right:-130px;animation-delay:-7s;}
.glow3{width:400px;height:400px;background:#ffe4f0;top:38%;left:62%;animation-delay:-13s;opacity:.3;}
@keyframes drift{
0%{transform:translate(0,0) scale(1);}
50%{transform:translate(60px,-40px) scale(1.12);}
100%{transform:translate(-50px,50px) scale(.95);}
}
.grid-overlay{
position:fixed;inset:0;z-index:0;pointer-events:none;
background-image:linear-gradient(rgba(91,91,240,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(91,91,240,.05) 1px,transparent 1px);
background-size:54px 54px;
mask-image:radial-gradient(ellipse at 50% 25%,black 40%,transparent 82%);
animation:gridMove 26s linear infinite;
}
@keyframes gridMove{from{background-position:0 0,0 0;}to{background-position:54px 54px,54px 54px;}}
/* ---------- LAYOUT ---------- */
.wrap{position:relative;z-index:2;max-width:1500px;margin:0 auto;padding:0 22px;}
header{
position:sticky;top:0;z-index:50;
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
background:rgba(246,248,253,.8);
border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;max-width:1500px;margin:0 auto;}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.18rem;letter-spacing:.4px;}
.logo .atom{
width:36px;height:36px;border-radius:12px;
background:linear-gradient(135deg,var(--brand),var(--accent));
display:grid;place-items:center;font-weight:800;color:#fff;font-size:.95rem;
box-shadow:0 6px 18px rgba(91,91,240,.35);
animation:pulse 3s ease-in-out infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 6px 16px rgba(91,91,240,.3);}50%{box-shadow:0 8px 26px rgba(0,184,169,.45);}}
.logo span b{background:linear-gradient(90deg,var(--brand),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;}
.nav-right{font-size:.82rem;color:var(--muted);letter-spacing:1.6px;text-transform:uppercase;}
.nav-right em{color:var(--brand);font-style:normal;font-weight:600;}
/* ---------- HERO ---------- */
.hero{text-align:center;padding:62px 10px 28px;}
.eyebrow{
display:inline-block;font-size:.78rem;letter-spacing:3px;text-transform:uppercase;
color:var(--brand);border:1px solid rgba(91,91,240,.3);border-radius:999px;
padding:7px 18px;background:rgba(91,91,240,.07);font-weight:600;
animation:fadeUp .8s .1s both;
}
.hero h1{
font-size:clamp(2.4rem,6vw,4.5rem);font-weight:800;line-height:1.05;
margin:20px 0 14px;animation:fadeUp .8s .25s both;letter-spacing:-.5px;
}
.hero h1 .grad{
background:linear-gradient(92deg,var(--brand) 5%,var(--brand2) 45%,var(--accent) 95%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{
color:var(--muted);max-width:640px;margin:0 auto;font-size:1.06rem;font-weight:300;
animation:fadeUp .8s .4s both;
}
.hero-stats{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px;animation:fadeUp .8s .55s both;}
.stat{
background:var(--card);border:1px solid var(--line);border-radius:18px;
padding:13px 24px;min-width:112px;box-shadow:var(--shadow);transition:.3s;
}
.stat:hover{transform:translateY(-5px);border-color:rgba(91,91,240,.4);}
.stat b{display:block;font-size:1.55rem;background:linear-gradient(90deg,var(--brand),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;}
.stat span{font-size:.76rem;color:var(--muted);letter-spacing:1.2px;text-transform:uppercase;}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:translateY(0);}}
/* ---------- CONTROLS ---------- */
.controls{
display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;
margin:36px auto 8px;max-width:1220px;
}
.searchbox{position:relative;flex:1 1 300px;max-width:440px;}
.searchbox input{
width:100%;padding:14px 48px 14px 20px;border-radius:16px;
border:1.5px solid var(--line);background:var(--card);color:var(--text);
font-family:'Jost',sans-serif;font-size:1rem;outline:none;transition:.3s;
box-shadow:var(--shadow);
}
.searchbox input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(91,91,240,.14);}
.searchbox input::placeholder{color:#a4a9bd;}
.searchbox .icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--brand);font-size:1.05rem;pointer-events:none;}
.filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.chip{
font-family:'Jost',sans-serif;font-size:.82rem;font-weight:500;letter-spacing:.3px;
padding:8px 15px;border-radius:999px;cursor:pointer;
background:var(--card);border:1px solid var(--line);color:var(--muted);
display:flex;align-items:center;gap:7px;transition:.25s;box-shadow:0 3px 10px rgba(60,70,140,.06);
}
.chip .dot{width:9px;height:9px;border-radius:50%;background:var(--dc,var(--brand));}
.chip:hover{color:var(--text);transform:translateY(-2px);border-color:rgba(91,91,240,.35);}
.chip.active{color:#fff;background:linear-gradient(90deg,var(--brand),var(--accent));border-color:transparent;font-weight:600;box-shadow:0 6px 18px rgba(91,91,240,.35);}
.chip.active .dot{background:#fff;}
/* ---------- TABLE ---------- */
.table-scroll{overflow-x:auto;padding:26px 4px 10px;-webkit-overflow-scrolling:touch;}
.ptable{
display:grid;
grid-template-columns:repeat(18,minmax(58px,1fr));
grid-auto-rows:minmax(66px,auto);
gap:6px;min-width:1180px;margin:0 auto;max-width:1460px;
}
.el{
position:relative;border-radius:12px;cursor:pointer;
padding:6px 6px 5px;display:flex;flex-direction:column;justify-content:space-between;
background:var(--card);
border:1px solid var(--line);
border-top:3px solid var(--cc,#999);
box-shadow:0 3px 10px rgba(60,70,140,.07);
transition:transform .22s,box-shadow .22s,opacity .35s,filter .35s,border-color .22s;
animation:elIn .5s both;
animation-delay:calc(var(--i)*7ms);
}
@keyframes elIn{from{opacity:0;transform:scale(.6);}to{opacity:1;transform:scale(1);}}
.el .num{font-size:.62rem;color:var(--muted);font-weight:500;}
.el .sym{font-size:1.2rem;font-weight:700;line-height:1;color:var(--text);}
.el .nm{font-size:.56rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.2px;}
.el:hover{
transform:translateY(-6px) scale(1.1);z-index:5;
box-shadow:0 16px 34px rgba(60,70,140,.22),0 0 0 2px var(--cc);
border-color:var(--cc);
}
.el.dim{opacity:.14;filter:grayscale(1);pointer-events:none;transform:scale(.94);}
.series-label{
display:flex;align-items:center;justify-content:flex-end;
padding-right:10px;font-size:.68rem;color:var(--muted);letter-spacing:1px;text-transform:uppercase;font-weight:600;
}
.legend-note{text-align:center;color:var(--muted);font-size:.82rem;margin:8px 0 0;font-weight:300;}
.legend-note b{color:var(--brand);font-weight:600;}
/* ---------- MODAL ---------- */
.overlay{
position:fixed;inset:0;z-index:100;background:rgba(24,26,46,.45);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
display:flex;align-items:center;justify-content:center;padding:20px;
opacity:0;pointer-events:none;transition:.3s;
}
.overlay.open{opacity:1;pointer-events:auto;}
.modal{
width:100%;max-width:560px;border-radius:26px;overflow:hidden;
background:var(--card);
border:1px solid var(--line);
box-shadow:0 30px 80px rgba(30,35,80,.3);
transform:translateY(40px) scale(.94);transition:.35s cubic-bezier(.2,.9,.3,1.2);
max-height:90vh;overflow-y:auto;
}
.overlay.open .modal{transform:translateY(0) scale(1);}
.m-head{
display:flex;gap:20px;align-items:center;padding:26px 26px 20px;
border-bottom:1px solid var(--line);position:relative;
background:linear-gradient(120deg,color-mix(in srgb,var(--mc,#888) 12%,#fff),#fff 70%);
}
.m-tile{
width:96px;height:96px;flex-shrink:0;border-radius:20px;
border:1px solid var(--line);border-top:4px solid var(--mc,#888);
background:#fff;
display:flex;flex-direction:column;align-items:center;justify-content:center;
box-shadow:0 10px 26px color-mix(in srgb,var(--mc,#888) 32%,transparent);
animation:tileGlow 2.6s ease-in-out infinite;
}
@keyframes tileGlow{0%,100%{box-shadow:0 8px 20px color-mix(in srgb,var(--mc,#888) 25%,transparent);}50%{box-shadow:0 12px 36px color-mix(in srgb,var(--mc,#888) 50%,transparent);}}
.m-tile .s{font-size:2.1rem;font-weight:800;line-height:1;color:var(--text);}
.m-tile .n{font-size:.8rem;color:var(--muted);}
.m-title h2{font-size:1.75rem;font-weight:700;}
.m-title .cat{
display:inline-block;margin-top:6px;font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;
color:var(--mc,#666);border:1.5px solid color-mix(in srgb,var(--mc,#666) 50%,transparent);
padding:4px 12px;border-radius:999px;background:color-mix(in srgb,var(--mc,#666) 8%,#fff);
}
.m-close{
position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;
background:#fff;border:1px solid var(--line);color:var(--text);
font-size:1rem;cursor:pointer;transition:.25s;font-family:'Jost',sans-serif;
box-shadow:0 4px 12px rgba(60,70,140,.12);
}
.m-close:hover{background:var(--brand);color:#fff;transform:rotate(90deg);}
.m-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:22px 26px;}
.m-item{
background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:12px 15px;
transition:.25s;
}
.m-item:hover{border-color:color-mix(in srgb,var(--mc,#888) 55%,transparent);transform:translateY(-2px);background:#fff;}
.m-item small{display:block;font-size:.66rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:3px;font-weight:600;}
.m-item b{font-size:1.02rem;font-weight:600;}
.m-foot{padding:0 26px 24px;color:var(--muted);font-size:.82rem;text-align:center;font-weight:300;}
.m-foot b{background:linear-gradient(90deg,var(--brand),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700;}
/* ---------- FOOTER ---------- */
footer{
margin-top:70px;padding:38px 20px 32px;text-align:center;
border-top:1px solid var(--line);position:relative;z-index:2;
background:rgba(255,255,255,.7);backdrop-filter:blur(8px);
}
footer .f-name{font-size:1.35rem;font-weight:800;letter-spacing:-.3px;}
footer .f-name b{background:linear-gradient(90deg,var(--brand),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;}
footer .f-by{color:var(--muted);font-size:.9rem;margin-top:4px;}
footer .f-by b{color:var(--brand);font-weight:600;}
footer p{color:var(--muted);font-size:.84rem;margin-top:10px;font-weight:300;}
.socials{display:flex;gap:12px;justify-content:center;margin-top:16px;flex-wrap:wrap;}
.socials span{
padding:8px 18px;border-radius:999px;background:var(--card);border:1px solid var(--line);
font-size:.78rem;color:var(--muted);letter-spacing:1px;transition:.25s;cursor:default;
box-shadow:0 3px 10px rgba(60,70,140,.06);
}
.socials span:hover{color:var(--brand);border-color:rgba(91,91,240,.4);transform:translateY(-3px);}
/* scroll reveal */
.reveal{opacity:0;transform:translateY(30px);transition:.8s cubic-bezier(.2,.8,.3,1);}
.reveal.show{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important;}
}
@media (max-width:640px){
.hero{padding-top:44px;}
.nav-right{display:none;}
.m-grid{grid-template-columns:1fr 1fr;padding:18px;}
.m-head{padding:20px 18px 16px;}
.m-tile{width:78px;height:78px;}
}
</style>
</head>
<body>
<canvas id="bgCanvas"></canvas>
<div class="bg-glow glow1"></div>
<div class="bg-glow glow2"></div>
<div class="bg-glow glow3"></div>
<div class="grid-overlay"></div>
<header>
<nav class="nav">
<div class="logo"><div class="atom">El</div><span>Elemen<b>tra</b></span></div>
<div class="nav-right">by <em>Coding Stellix</em></div>
</nav>
</header>
<main class="wrap">
<section class="hero">
<span class="eyebrow">⚛ Elementra — The Modern Periodic Table</span>
<h1>Discover every <span class="grad">Element</span><br>in one beautiful place</h1>
<p>All 118 elements — searchable, filterable and fully interactive. Tap any element to open its detail card. Designed & developed by Coding Stellix.</p>
<div class="hero-stats">
<div class="stat"><b>118</b><span>Elements</span></div>
<div class="stat"><b>18</b><span>Groups</span></div>
<div class="stat"><b>7</b><span>Periods</span></div>
<div class="stat"><b>10</b><span>Categories</span></div>
</div>
</section>
<section class="controls reveal">
<div class="searchbox">
<input id="search" type="text" placeholder="Search by name, symbol or number…" autocomplete="off" aria-label="Search elements">
<span class="icon">🔍</span>
</div>
<div class="filters" id="filters"></div>
</section>
<section class="table-scroll reveal">
<div class="ptable" id="ptable"></div>
</section>
<p class="legend-note reveal">Tip: <b>type in the search bar</b> or use the filters — click any element for full details. Swipe sideways on mobile ↔</p>
</main>
<div class="overlay" id="overlay">
<div class="modal" id="modal">
<div class="m-head" id="mHead">
<button class="m-close" id="mClose" aria-label="Close">✕</button>
<div class="m-tile"><span class="s" id="mSym"></span><span class="n" id="mNum"></span></div>
<div class="m-title">
<h2 id="mName"></h2>
<span class="cat" id="mCat"></span>
</div>
</div>
<div class="m-grid" id="mGrid"></div>
<div class="m-foot">Made with ⚡ by <b>Coding Stellix</b></div>
</div>
</div>
<footer>
<div class="f-name">Elemen<b>tra</b></div>
<div class="f-by">Crafted by <b>Coding Stellix</b></div>
<p>© 2026 Coding Stellix — Learn. Code. Create. All 118 elements at your fingertips.</p>
<div class="socials">
<span>Instagram · coding_stellix</span>
<span>YouTube · coding_stellix</span>
<span>GitHub · coding_stellix</span>
</div>
</footer>
<script>
/* =========================================================
Elementra — Interactive Periodic Table
Designed & developed by Coding Stellix
========================================================= */
const CATS=[
{key:0,name:"Alkali Metal",color:"var(--c-alkali)"},
{key:1,name:"Alkaline Earth",color:"var(--c-alkearth)"},
{key:2,name:"Transition Metal",color:"var(--c-transition)"},
{key:3,name:"Post-transition",color:"var(--c-post)"},
{key:4,name:"Metalloid",color:"var(--c-metalloid)"},
{key:5,name:"Nonmetal",color:"var(--c-nonmetal)"},
{key:6,name:"Halogen",color:"var(--c-halogen)"},
{key:7,name:"Noble Gas",color:"var(--c-noble)"},
{key:8,name:"Lanthanide",color:"var(--c-lanth)"},
{key:9,name:"Actinide",color:"var(--c-actin)"}
];
/* [number, symbol, name, atomic mass, category, group-x, row-y, phase, discovery] */
const E=[
[1,"H","Hydrogen",1.008,5,1,1,"Gas","1766"],
[2,"He","Helium",4.0026,7,18,1,"Gas","1868"],
[3,"Li","Lithium",6.94,0,1,2,"Solid","1817"],
[4,"Be","Beryllium",9.0122,1,2,2,"Solid","1798"],
[5,"B","Boron",10.81,4,13,2,"Solid","1808"],
[6,"C","Carbon",12.011,5,14,2,"Solid","Ancient"],
[7,"N","Nitrogen",14.007,5,15,2,"Gas","1772"],
[8,"O","Oxygen",15.999,5,16,2,"Gas","1774"],
[9,"F","Fluorine",18.998,6,17,2,"Gas","1886"],
[10,"Ne","Neon",20.180,7,18,2,"Gas","1898"],
[11,"Na","Sodium",22.990,0,1,3,"Solid","1807"],
[12,"Mg","Magnesium",24.305,1,2,3,"Solid","1755"],
[13,"Al","Aluminium",26.982,3,13,3,"Solid","1825"],
[14,"Si","Silicon",28.085,4,14,3,"Solid","1824"],
[15,"P","Phosphorus",30.974,5,15,3,"Solid","1669"],
[16,"S","Sulfur",32.06,5,16,3,"Solid","Ancient"],
[17,"Cl","Chlorine",35.45,6,17,3,"Gas","1774"],
[18,"Ar","Argon",39.948,7,18,3,"Gas","1894"],
[19,"K","Potassium",39.098,0,1,4,"Solid","1807"],
[20,"Ca","Calcium",40.078,1,2,4,"Solid","1808"],
[21,"Sc","Scandium",44.956,2,3,4,"Solid","1879"],
[22,"Ti","Titanium",47.867,2,4,4,"Solid","1791"],
[23,"V","Vanadium",50.942,2,5,4,"Solid","1801"],
[24,"Cr","Chromium",51.996,2,6,4,"Solid","1797"],
[25,"Mn","Manganese",54.938,2,7,4,"Solid","1774"],
[26,"Fe","Iron",55.845,2,8,4,"Solid","Ancient"],
[27,"Co","Cobalt",58.933,2,9,4,"Solid","1735"],
[28,"Ni","Nickel",58.693,2,10,4,"Solid","1751"],
[29,"Cu","Copper",63.546,2,11,4,"Solid","Ancient"],
[30,"Zn","Zinc",65.38,2,12,4,"Solid","1746"],
[31,"Ga","Gallium",69.723,3,13,4,"Solid","1875"],
[32,"Ge","Germanium",72.630,4,14,4,"Solid","1886"],
[33,"As","Arsenic",74.922,4,15,4,"Solid","~1250"],
[34,"Se","Selenium",78.971,5,16,4,"Solid","1817"],
[35,"Br","Bromine",79.904,6,17,4,"Liquid","1826"],
[36,"Kr","Krypton",83.798,7,18,4,"Gas","1898"],
[37,"Rb","Rubidium",85.468,0,1,5,"Solid","1861"],
[38,"Sr","Strontium",87.62,1,2,5,"Solid","1790"],
[39,"Y","Yttrium",88.906,2,3,5,"Solid","1794"],
[40,"Zr","Zirconium",91.224,2,4,5,"Solid","1789"],
[41,"Nb","Niobium",92.906,2,5,5,"Solid","1801"],
[42,"Mo","Molybdenum",95.95,2,6,5,"Solid","1778"],
[43,"Tc","Technetium",98,2,7,5,"Solid","1937"],
[44,"Ru","Ruthenium",101.07,2,8,5,"Solid","1844"],
[45,"Rh","Rhodium",102.91,2,9,5,"Solid","1803"],
[46,"Pd","Palladium",106.42,2,10,5,"Solid","1803"],
[47,"Ag","Silver",107.87,2,11,5,"Solid","Ancient"],
[48,"Cd","Cadmium",112.41,2,12,5,"Solid","1817"],
[49,"In","Indium",114.82,3,13,5,"Solid","1863"],
[50,"Sn","Tin",118.71,3,14,5,"Solid","Ancient"],
[51,"Sb","Antimony",121.76,4,15,5,"Solid","Ancient"],
[52,"Te","Tellurium",127.60,4,16,5,"Solid","1782"],
[53,"I","Iodine",126.90,6,17,5,"Solid","1811"],
[54,"Xe","Xenon",131.29,7,18,5,"Gas","1898"],
[55,"Cs","Caesium",132.91,0,1,6,"Solid","1860"],
[56,"Ba","Barium",137.33,1,2,6,"Solid","1808"],
[57,"La","Lanthanum",138.91,8,4,9,"Solid","1839"],
[58,"Ce","Cerium",140.12,8,5,9,"Solid","1803"],
[59,"Pr","Praseodymium",140.91,8,6,9,"Solid","1885"],
[60,"Nd","Neodymium",144.24,8,7,9,"Solid","1885"],
[61,"Pm","Promethium",145,8,8,9,"Solid","1945"],
[62,"Sm","Samarium",150.36,8,9,9,"Solid","1879"],
[63,"Eu","Europium",151.96,8,10,9,"Solid","1901"],
[64,"Gd","Gadolinium",157.25,8,11,9,"Solid","1880"],
[65,"Tb","Terbium",158.93,8,12,9,"Solid","1843"],
[66,"Dy","Dysprosium",162.50,8,13,9,"Solid","1886"],
[67,"Ho","Holmium",164.93,8,14,9,"Solid","1878"],
[68,"Er","Erbium",167.26,8,15,9,"Solid","1843"],
[69,"Tm","Thulium",168.93,8,16,9,"Solid","1879"],
[70,"Yb","Ytterbium",173.05,8,17,9,"Solid","1878"],
[71,"Lu","Lutetium",174.97,8,18,9,"Solid","1907"],
[72,"Hf","Hafnium",178.49,2,4,6,"Solid","1923"],
[73,"Ta","Tantalum",180.95,2,5,6,"Solid","1802"],
[74,"W","Tungsten",183.84,2,6,6,"Solid","1783"],
[75,"Re","Rhenium",186.21,2,7,6,"Solid","1925"],
[76,"Os","Osmium",190.23,2,8,6,"Solid","1803"],
[77,"Ir","Iridium",192.22,2,9,6,"Solid","1803"],
[78,"Pt","Platinum",195.08,2,10,6,"Solid","Ancient"],
[79,"Au","Gold",196.97,2,11,6,"Solid","Ancient"],
[80,"Hg","Mercury",200.59,2,12,6,"Liquid","Ancient"],
[81,"Tl","Thallium",204.38,3,13,6,"Solid","1861"],
[82,"Pb","Lead",207.2,3,14,6,"Solid","Ancient"],
[83,"Bi","Bismuth",208.98,3,15,6,"Solid","~1500"],
[84,"Po","Polonium",209,3,16,6,"Solid","1898"],
[85,"At","Astatine",210,6,17,6,"Solid","1940"],
[86,"Rn","Radon",222,7,18,6,"Gas","1899"],
[87,"Fr","Francium",223,0,1,7,"Solid","1939"],
[88,"Ra","Radium",226,1,2,7,"Solid","1898"],
[89,"Ac","Actinium",227,9,4,10,"Solid","1899"],
[90,"Th","Thorium",232.04,9,5,10,"Solid","1829"],
[91,"Pa","Protactinium",231.04,9,6,10,"Solid","1913"],
[92,"U","Uranium",238.03,9,7,10,"Solid","1789"],
[93,"Np","Neptunium",237,9,8,10,"Solid","1940"],
[94,"Pu","Plutonium",244,9,9,10,"Solid","1940"],
[95,"Am","Americium",243,9,10,10,"Solid","1944"],
[96,"Cm","Curium",247,9,11,10,"Solid","1944"],
[97,"Bk","Berkelium",247,9,12,10,"Solid","1949"],
[98,"Cf","Californium",251,9,13,10,"Solid","1950"],
[99,"Es","Einsteinium",252,9,14,10,"Solid","1952"],
[100,"Fm","Fermium",257,9,15,10,"Solid","1952"],
[101,"Md","Mendelevium",258,9,16,10,"Solid","1955"],
[102,"No","Nobelium",259,9,17,10,"Solid","1966"],
[103,"Lr","Lawrencium",266,9,18,10,"Solid","1961"],
[104,"Rf","Rutherfordium",267,2,4,7,"Solid","1964"],
[105,"Db","Dubnium",268,2,5,7,"Solid","1967"],
[106,"Sg","Seaborgium",269,2,6,7,"Solid","1974"],
[107,"Bh","Bohrium",270,2,7,7,"Solid","1981"],
[108,"Hs","Hassium",277,2,8,7,"Solid","1984"],
[109,"Mt","Meitnerium",278,2,9,7,"Solid","1982"],
[110,"Ds","Darmstadtium",281,2,10,7,"Solid","1994"],
[111,"Rg","Roentgenium",282,2,11,7,"Solid","1994"],
[112,"Cn","Copernicium",285,2,12,7,"Solid","1996"],
[113,"Nh","Nihonium",286,3,13,7,"Solid","2003"],
[114,"Fl","Flerovium",289,3,14,7,"Solid","1998"],
[115,"Mc","Moscovium",290,3,15,7,"Solid","2003"],
[116,"Lv","Livermorium",293,3,16,7,"Solid","2000"],
[117,"Ts","Tennessine",294,6,17,7,"Solid","2010"],
[118,"Og","Oganesson",294,7,18,7,"Solid","2002"]
];
const blockOf=el=>{
const[n,,,,cat,x]=el;
if(cat===8||cat===9)return"f";
if(x<=2||n===2)return"s";
if(x>=13)return"p";
return"d";
};
const groupOf=el=>el[6]>=9?"—":el[5];
const periodOf=el=>{const y=el[6];return y===9?6:y===10?7:y;};
/* ---------- Filter chips ---------- */
const filtersEl=document.getElementById('filters');
let activeCat=null;
const allChip=document.createElement('button');
allChip.className='chip active';
allChip.innerHTML='<span class="dot" style="--dc:var(--brand)"></span>All';
allChip.onclick=()=>{activeCat=null;refreshChips();applyFilter();};
filtersEl.appendChild(allChip);
CATS.forEach(c=>{
const b=document.createElement('button');
b.className='chip';
b.innerHTML=`<span class="dot" style="--dc:${c.color}"></span>${c.name}`;
b.onclick=()=>{activeCat=(activeCat===c.key)?null:c.key;refreshChips();applyFilter();};
b.dataset.cat=c.key;
filtersEl.appendChild(b);
});
function refreshChips(){
allChip.classList.toggle('active',activeCat===null);
[...filtersEl.querySelectorAll('.chip[data-cat]')].forEach(ch=>{
ch.classList.toggle('active',Number(ch.dataset.cat)===activeCat);
});
}
/* ---------- Build table ---------- */
const table=document.getElementById('ptable');
E.forEach((el,i)=>{
const[n,sym,name,mass,cat,x,y]=el;
const d=document.createElement('div');
d.className='el';
d.style.setProperty('--cc',CATS[cat].color);
d.style.setProperty('--i',i);
d.style.gridColumn=x;
d.style.gridRow=y;
d.dataset.idx=i;
d.innerHTML=`<span class="num">${n}</span><span class="sym">${sym}</span><span class="nm">${name}</span>`;
d.onclick=()=>openModal(i);
table.appendChild(d);
});
const lanLbl=document.createElement('div');
lanLbl.className='series-label';lanLbl.style.gridRow=9;lanLbl.style.gridColumn='1 / 4';
lanLbl.textContent='Lanthanides ➜';
const actLbl=document.createElement('div');
actLbl.className='series-label';actLbl.style.gridRow=10;actLbl.style.gridColumn='1 / 4';
actLbl.textContent='Actinides ➜';
table.appendChild(lanLbl);table.appendChild(actLbl);
/* ---------- Search + Filter (live) ---------- */
const searchInput=document.getElementById('search');
searchInput.addEventListener('input',applyFilter);
searchInput.addEventListener('keyup',applyFilter);
function applyFilter(){
const q=searchInput.value.trim().toLowerCase();
document.querySelectorAll('.el').forEach(d=>{
const el=E[d.dataset.idx];
const[n,sym,name,,cat]=el;
const matchQ=!q||name.toLowerCase().includes(q)||sym.toLowerCase()===q||String(n)===q||sym.toLowerCase().startsWith(q);
const matchC=activeCat===null||cat===activeCat;
d.classList.toggle('dim',!(matchQ&&matchC));
});
}
/* ---------- Modal ---------- */
const overlay=document.getElementById('overlay');
function openModal(i){
const el=E[i];
const[n,sym,name,mass,cat,x,y,phase,disc]=el;
const color=CATS[cat].color;
document.getElementById('modal').style.setProperty('--mc',color);
document.getElementById('mHead').style.setProperty('--mc',color);
document.getElementById('mSym').textContent=sym;
document.getElementById('mNum').textContent=n;
document.getElementById('mName').textContent=name;
document.getElementById('mCat').textContent=CATS[cat].name;
const rows=[
["Atomic Number",n],
["Atomic Mass",mass+" u"],
["Group",groupOf(el)],
["Period",periodOf(el)],
["Block",blockOf(el)+"-block"],
["Phase (room temp)",phase],
["Category",CATS[cat].name],
["Discovered",disc]
];
document.getElementById('mGrid').innerHTML=rows.map(r=>`<div class="m-item"><small>${r[0]}</small><b>${r[1]}</b></div>`).join('');
overlay.classList.add('open');
document.body.style.overflow='hidden';
}
function closeModal(){overlay.classList.remove('open');document.body.style.overflow='';}
document.getElementById('mClose').onclick=closeModal;
overlay.addEventListener('click',e=>{if(e.target===overlay)closeModal();});
document.addEventListener('keydown',e=>{if(e.key==='Escape')closeModal();});
/* ---------- Scroll reveal ---------- */
const io=new IntersectionObserver(entries=>{
entries.forEach(en=>{if(en.isIntersecting){en.target.classList.add('show');io.unobserve(en.target);}});
},{threshold:.08});
document.querySelectorAll('.reveal').forEach(el=>io.observe(el));
/* ---------- Background particles ---------- */
const cv=document.getElementById('bgCanvas');
const ctx=cv.getContext('2d');
let W,H,parts=[];
const reduced=window.matchMedia('(prefers-reduced-motion: reduce)').matches;
function sizeCanvas(){W=cv.width=innerWidth;H=cv.height=innerHeight;}
sizeCanvas();addEventListener('resize',sizeCanvas);
function makeParts(){
parts=[];
const count=Math.min(70,Math.floor(W/22));
for(let i=0;i<count;i++){
parts.push({
x:Math.random()*W,y:Math.random()*H,
r:Math.random()*2.4+.8,
vx:(Math.random()-.5)*.35,vy:(Math.random()-.5)*.35,
hue:Math.random()<.55?'91,91,240':'0,184,169',
a:Math.random()*.35+.15
});
}
}
makeParts();addEventListener('resize',makeParts);
function tick(){
ctx.clearRect(0,0,W,H);
for(const p of parts){
p.x+=p.vx;p.y+=p.vy;
if(p.x<-10)p.x=W+10;if(p.x>W+10)p.x=-10;
if(p.y<-10)p.y=H+10;if(p.y>H+10)p.y=-10;
ctx.beginPath();
ctx.arc(p.x,p.y,p.r,0,Math.PI*2);
ctx.fillStyle=`rgba(${p.hue},${p.a})`;
ctx.fill();
}
for(let i=0;i<parts.length;i++){
for(let j=i+1;j<parts.length;j++){
const a=parts[i],b=parts[j];
const dx=a.x-b.x,dy=a.y-b.y,d=dx*dx+dy*dy;
if(d<9000){
ctx.beginPath();
ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);
ctx.strokeStyle=`rgba(120,110,240,${(1-d/9000)*.14})`;
ctx.lineWidth=1;
ctx.stroke();
}
}
}
if(!reduced)requestAnimationFrame(tick);
}
tick();
</script>
</body>
</html>
