From 81644e58baf0728f013e7f86e3db58ef78df2543 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Fri, 22 Aug 2025 19:43:34 +0000
Subject: [PATCH] Create dynamic periodic table with interactive atom viewer
 and controls

Co-authored-by: sammie.frank.patterson <sammie.frank.patterson@gmail.com>
---
 dynamic-periodic-table.html | 564 ++++++++++++++++++++++++++++++++++++
 1 file changed, 564 insertions(+)
 create mode 100644 dynamic-periodic-table.html
diff --git a/dynamic-periodic-table.html b/dynamic-periodic-table.html
new file mode 100644
index 0000000..5e5f2cc
--- /dev/null
+++ b/dynamic-periodic-table.html
@@ -0,0 +1,564 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Dynamic Mini Periodic Table + Atom Viewer</title>
+  <style>
+    :root {
+      --bg: #0e0f1a;
+      --panel: #121326;
+      --card: #171836;
+      --text: #e8ecf8;
+      --muted: #a9b1d6;
+      --accent: #7aa2f7;
+      --glow: 0 0 0.5rem rgba(122,162,247,0.45), 0 0 1.2rem rgba(122,162,247,0.25);
+      --ring: rgba(122,162,247,0.35);
+      --electron: #9ece6a;
+      --nucleus-outer: #bb9af7;
+      --nucleus-inner: #f7768e;
+      --orbital-speed: 12s; /* default animation duration */
+
+      --cat-alkali: #ff7a90;
+      --cat-alkaline: #ffb86b;
+      --cat-nonmetal: #7ee787;
+      --cat-noble: #7aa2f7;
+      --cat-metalloid: #c2e59c;
+    }
+
+    * { box-sizing: border-box; }
+    html, body {
+      height: 100%;
+      margin: 0;
+      color: var(--text);
+      background: radial-gradient(1200px 700px at 15% 10%, #1a1c3c 0%, #0f1030 40%, #0b0c25 70%, var(--bg) 100%),
+                  linear-gradient(180deg, #0b0d1f 0%, #0e0f1a 100%);
+      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
+    }
+
+    .app {
+      display: grid;
+      grid-template-columns: 1.4fr 1fr;
+      gap: 18px;
+      padding: 20px;
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+
+    .panel {
+      background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 18%) no-repeat, var(--panel);
+      border: 1px solid rgba(255,255,255,0.08);
+      border-radius: 14px;
+      box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
+      overflow: hidden;
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      padding: 16px 18px;
+      background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent), rgba(255,255,255,0.02);
+      border-bottom: 1px solid rgba(255,255,255,0.08);
+    }
+
+    .title {
+      font-weight: 700;
+      letter-spacing: 0.3px;
+    }
+
+    .controls {
+      display: flex;
+      align-items: center;
+      gap: 14px;
+      color: var(--muted);
+      font-size: 14px;
+    }
+
+    .controls label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      user-select: none;
+    }
+
+    input[type="range"] {
+      appearance: none;
+      height: 6px;
+      width: 180px;
+      border-radius: 999px;
+      background: linear-gradient(90deg, var(--accent), rgba(122,162,247,0.2));
+      outline: none;
+    }
+    input[type="range"]::-webkit-slider-thumb {
+      appearance: none;
+      width: 16px; height: 16px;
+      border-radius: 50%;
+      background: #fff;
+      border: 2px solid var(--accent);
+      box-shadow: var(--glow);
+    }
+
+    /* Periodic grid */
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(18, 1fr);
+      grid-auto-rows: 80px;
+      gap: 10px;
+      padding: 16px;
+    }
+
+    .cell {
+      position: relative;
+      background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 20%), var(--card);
+      border: 1px solid rgba(255,255,255,0.08);
+      border-radius: 12px;
+      padding: 8px;
+      cursor: pointer;
+      transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
+      outline: none;
+    }
+    .cell:hover, .cell:focus-visible {
+      transform: translateY(-2px);
+      box-shadow: 0 10px 22px rgba(0,0,0,0.35), 0 0 0 1px rgba(122,162,247,0.35);
+      border-color: rgba(122,162,247,0.5);
+    }
+
+    .cell .number { font-size: 11px; color: var(--muted); }
+    .cell .symbol { font-size: 24px; font-weight: 800; letter-spacing: 0.5px; margin-top: 4px; }
+    .cell .name { font-size: 12px; color: var(--muted); margin-top: 2px; }
+
+    .badge {
+      position: absolute;
+      top: 8px; right: 8px;
+      padding: 2px 8px;
+      border-radius: 999px;
+      font-size: 10px;
+      font-weight: 700;
+      color: #0e0f1a;
+    }
+
+    .cat-alkali { background: var(--cat-alkali); }
+    .cat-alkaline { background: var(--cat-alkaline); }
+    .cat-nonmetal { background: var(--cat-nonmetal); }
+    .cat-noble { background: var(--cat-noble); color: #081326; }
+    .cat-metalloid { background: var(--cat-metalloid); color: #112; }
+
+    /* Details + Atom viewer */
+    .details {
+      display: grid;
+      grid-template-rows: auto auto 1fr;
+      gap: 10px;
+      padding: 16px;
+    }
+
+    .selected-summary {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 14px;
+      border: 1px solid rgba(255,255,255,0.08);
+      border-radius: 12px;
+      background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 18%), rgba(0,0,0,0.08);
+    }
+
+    .selected-symbol {
+      width: 56px; height: 56px;
+      border-radius: 12px;
+      display: grid; place-items: center;
+      font-size: 24px; font-weight: 800;
+      background: linear-gradient(135deg, rgba(122,162,247,0.25), rgba(122,162,247,0.05));
+      border: 1px solid rgba(255,255,255,0.08);
+      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
+    }
+
+    .props {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 10px;
+    }
+
+    .prop {
+      background: rgba(255,255,255,0.04);
+      border: 1px solid rgba(255,255,255,0.08);
+      border-radius: 10px;
+      padding: 10px 12px;
+      font-size: 13px;
+      color: var(--muted);
+    }
+    .prop b { color: var(--text); }
+
+    .atom {
+      position: relative;
+      height: 360px;
+      background: radial-gradient(850px 520px at 60% 35%, rgba(122,162,247,0.08), transparent 60%),
+                  linear-gradient(180deg, rgba(255,255,255,0.04), transparent 20%);
+      border: 1px solid rgba(255,255,255,0.08);
+      border-radius: 14px;
+      overflow: hidden;
+      display: grid;
+      place-items: center;
+    }
+
+    .atom-stage {
+      position: relative;
+      width: 80%;
+      max-width: 420px;
+      aspect-ratio: 1/1;
+      filter: drop-shadow(0 10px 30px rgba(0,0,0,0.5));
+    }
+
+    .nucleus {
+      position: absolute;
+      inset: 50% auto auto 50%;
+      width: 18%; aspect-ratio: 1/1;
+      transform: translate(-50%, -50%);
+      border-radius: 50%;
+      background: radial-gradient(circle at 35% 35%, var(--nucleus-inner), var(--nucleus-outer) 55%, rgba(255,255,255,0.15));
+      box-shadow: 0 0 35px rgba(187,154,247,0.65), inset 0 0 20px rgba(255,255,255,0.2);
+      animation: pulse 3s ease-in-out infinite;
+    }
+
+    @keyframes pulse {
+      0%, 100% { transform: translate(-50%, -50%) scale(0.96); }
+      50% { transform: translate(-50%, -50%) scale(1.04); }
+    }
+
+    .ring {
+      position: absolute;
+      inset: 0;
+      border-radius: 50%;
+      border: 1.5px dashed var(--ring);
+      animation: spin var(--orbital-speed) linear infinite;
+      will-change: transform;
+    }
+
+    @keyframes spin {
+      from { transform: rotate(0turn); }
+      to { transform: rotate(1turn); }
+    }
+
+    .electron {
+      position: absolute;
+      top: -6px; left: 50%;
+      width: 10px; height: 10px;
+      transform: translateX(-50%);
+      border-radius: 50%;
+      background: radial-gradient(circle at 30% 30%, #fff, var(--electron) 65%);
+      box-shadow: 0 0 10px rgba(158,206,106,0.9), 0 0 20px rgba(158,206,106,0.45);
+    }
+
+    .legend {
+      display: flex; flex-wrap: wrap; gap: 10px;
+      padding: 10px 16px 16px 16px;
+      color: var(--muted);
+      font-size: 12px;
+    }
+    .legend .chip {
+      display: inline-flex; align-items: center; gap: 6px;
+      padding: 4px 8px;
+      border-radius: 999px;
+      border: 1px solid rgba(255,255,255,0.08);
+      background: rgba(255,255,255,0.04);
+    }
+    .chip .swatch {
+      width: 10px; height: 10px; border-radius: 50%;
+    }
+
+    @media (max-width: 980px) {
+      .app { grid-template-columns: 1fr; }
+      .atom { height: 320px; }
+    }
+  </style>
+</head>
+<body>
+  <main class="app" role="application" aria-label="Dynamic periodic table and atom viewer">
+    <section class="panel" aria-label="Periodic table">
+      <div class="header">
+        <div class="title">Mini Periodic Table (6 elements)</div>
+        <div class="controls">
+          <label title="Adjust electron orbital speed">
+            <span>Orbital speed</span>
+            <input id="speed" type="range" min="4" max="40" value="12" step="1" aria-label="Orbital speed (seconds per rotation)" />
+            <span id="speedVal" aria-hidden="true">12s</span>
+          </label>
+          <label title="Prevent hover from changing the selected element">
+            <input id="lock" type="checkbox" aria-label="Lock current selection" />
+            <span>Lock selection</span>
+          </label>
+        </div>
+      </div>
+      <div class="grid" id="grid" role="grid" aria-label="Periodic table grid of elements"></div>
+      <div class="legend" aria-hidden="false">
+        <span class="chip"><span class="swatch" style="background: var(--cat-alkali)"></span> Alkali metal</span>
+        <span class="chip"><span class="swatch" style="background: var(--cat-alkaline)"></span> Alkaline earth metal</span>
+        <span class="chip"><span class="swatch" style="background: var(--cat-nonmetal)"></span> Nonmetal</span>
+        <span class="chip"><span class="swatch" style="background: var(--cat-noble)"></span> Noble gas</span>
+      </div>
+    </section>
+
+    <aside class="panel" aria-live="polite" aria-label="Element details and atom visualization">
+      <div class="header">
+        <div class="title">Element Details</div>
+      </div>
+      <div class="details">
+        <div class="selected-summary" id="summary">
+          <div class="selected-symbol" id="summarySymbol">H</div>
+          <div>
+            <div style="font-weight:800; font-size:18px" id="summaryName">Hydrogen</div>
+            <div style="color:var(--muted); font-size:13px" id="summaryMeta">Atomic No. 1 · Nonmetal</div>
+          </div>
+        </div>
+
+        <div class="props" id="props">
+          <div class="prop"><b>Atomic mass:</b> <span id="pMass">1.008</span></div>
+          <div class="prop"><b>Symbol:</b> <span id="pSymbol">H</span></div>
+          <div class="prop"><b>Electron shells:</b> <span id="pShells">1</span></div>
+          <div class="prop"><b>Configuration:</b> <span id="pConfig">1s1</span></div>
+        </div>
+
+        <div class="atom">
+          <div class="atom-stage" id="atomStage" aria-label="Animated Bohr model"></div>
+        </div>
+      </div>
+    </aside>
+  </main>
+
+  <script>
+    const elements = [
+      {
+        number: 1,
+        symbol: 'H',
+        name: 'Hydrogen',
+        category: 'Nonmetal',
+        catKey: 'nonmetal',
+        mass: '1.008',
+        shells: [1],
+        config: '1s1',
+        period: 1,
+        group: 1,
+      },
+      {
+        number: 2,
+        symbol: 'He',
+        name: 'Helium',
+        category: 'Noble gas',
+        catKey: 'noble',
+        mass: '4.0026',
+        shells: [2],
+        config: '1s2',
+        period: 1,
+        group: 18,
+      },
+      {
+        number: 3,
+        symbol: 'Li',
+        name: 'Lithium',
+        category: 'Alkali metal',
+        catKey: 'alkali',
+        mass: '6.94',
+        shells: [2,1],
+        config: '1s2 2s1',
+        period: 2,
+        group: 1,
+      },
+      {
+        number: 6,
+        symbol: 'C',
+        name: 'Carbon',
+        category: 'Nonmetal',
+        catKey: 'nonmetal',
+        mass: '12.011',
+        shells: [2,4],
+        config: '[He] 2s2 2p2',
+        period: 2,
+        group: 14,
+      },
+      {
+        number: 8,
+        symbol: 'O',
+        name: 'Oxygen',
+        category: 'Nonmetal',
+        catKey: 'nonmetal',
+        mass: '15.999',
+        shells: [2,6],
+        config: '[He] 2s2 2p4',
+        period: 2,
+        group: 16,
+      },
+      {
+        number: 10,
+        symbol: 'Ne',
+        name: 'Neon',
+        category: 'Noble gas',
+        catKey: 'noble',
+        mass: '20.180',
+        shells: [2,8],
+        config: '1s2 2s2 2p6',
+        period: 2,
+        group: 18,
+      },
+    ];
+
+    const categoryClass = (catKey) => ({
+      alkali: 'cat-alkali',
+      alkaline: 'cat-alkaline',
+      nonmetal: 'cat-nonmetal',
+      noble: 'cat-noble',
+      metalloid: 'cat-metalloid',
+    })[catKey] || 'cat-nonmetal';
+
+    const grid = document.getElementById('grid');
+    const atomStage = document.getElementById('atomStage');
+    const summarySymbol = document.getElementById('summarySymbol');
+    const summaryName = document.getElementById('summaryName');
+    const summaryMeta = document.getElementById('summaryMeta');
+    const pMass = document.getElementById('pMass');
+    const pSymbol = document.getElementById('pSymbol');
+    const pShells = document.getElementById('pShells');
+    const pConfig = document.getElementById('pConfig');
+    const speedInput = document.getElementById('speed');
+    const speedVal = document.getElementById('speedVal');
+    const lockInput = document.getElementById('lock');
+
+    let isLocked = false;
+    let selected = elements[0];
+
+    function createCell(el) {
+      const cell = document.createElement('button');
+      cell.className = 'cell';
+      cell.setAttribute('role', 'gridcell');
+      cell.setAttribute('tabindex', '0');
+      cell.setAttribute('aria-label', `${el.name}, ${el.category}, atomic number ${el.number}`);
+      cell.style.gridColumn = String(el.group);
+      cell.style.gridRow = String(el.period);
+
+      const badge = document.createElement('span');
+      badge.className = `badge ${categoryClass(el.catKey)}`;
+      badge.textContent = el.category;
+
+      const num = document.createElement('div');
+      num.className = 'number';
+      num.textContent = el.number;
+
+      const sym = document.createElement('div');
+      sym.className = 'symbol';
+      sym.textContent = el.symbol;
+
+      const nm = document.createElement('div');
+      nm.className = 'name';
+      nm.textContent = el.name;
+
+      cell.appendChild(badge);
+      cell.appendChild(num);
+      cell.appendChild(sym);
+      cell.appendChild(nm);
+
+      cell.addEventListener('mouseenter', () => {
+        if (!isLocked) updateSelected(el);
+      });
+      cell.addEventListener('focus', () => {
+        if (!isLocked) updateSelected(el);
+      });
+      cell.addEventListener('click', () => {
+        updateSelected(el);
+        if (lockInput) {
+          isLocked = true;
+          lockInput.checked = true;
+        }
+      });
+
+      return cell;
+    }
+
+    function updateSelected(el) {
+      selected = el;
+      summarySymbol.textContent = el.symbol;
+      summaryName.textContent = el.name;
+      summaryMeta.textContent = `Atomic No. ${el.number} · ${el.category}`;
+      pMass.textContent = el.mass;
+      pSymbol.textContent = el.symbol;
+      pShells.textContent = el.shells.join(' · ');
+      pConfig.textContent = el.config;
+      drawAtom(el.shells);
+
+      // Accent nucleus color subtly by category
+      document.documentElement.style.setProperty('--nucleus-outer', el.catKey === 'noble' ? '#7aa2f7' : (el.catKey === 'alkali' ? '#ff7a90' : (el.catKey === 'nonmetal' ? '#9ece6a' : '#bb9af7')));
+    }
+
+    function drawAtom(shells) {
+      atomStage.innerHTML = '';
+
+      const nucleus = document.createElement('div');
+      nucleus.className = 'nucleus';
+      atomStage.appendChild(nucleus);
+
+      const maxShells = Math.max(3, shells.length);
+      const baseSize = 86; // percentage size of outer ring
+
+      shells.forEach((electronCount, index) => {
+        const ring = document.createElement('div');
+        ring.className = 'ring';
+        const size = baseSize - (maxShells - 1 - index) * (baseSize / maxShells);
+        ring.style.width = `${size}%`;
+        ring.style.height = `${size}%`;
+        ring.style.left = `${(100 - size) / 2}%`;
+        ring.style.top = `${(100 - size) / 2}%`;
+
+        // Alternate spin direction for visual interest
+        if (index % 2 === 1) {
+          ring.style.animationDirection = 'reverse';
+        }
+
+        // Place electrons evenly spaced on the ring
+        const angleStep = 360 / electronCount;
+        for (let i = 0; i < electronCount; i++) {
+          const electron = document.createElement('div');
+          electron.className = 'electron';
+          // Phase offset via CSS variable and transform origin by rotating ring first
+          electron.style.transform = `translateX(-50%) rotate(${i * angleStep}deg)`;
+          electron.style.transformOrigin = '50% calc(50% + 0px)';
+          ring.appendChild(electron);
+        }
+
+        atomStage.appendChild(ring);
+      });
+    }
+
+    function init() {
+      // Build grid cells
+      elements.forEach(el => grid.appendChild(createCell(el)));
+
+      // Init selection
+      updateSelected(selected);
+
+      // Controls
+      const updateSpeed = () => {
+        const seconds = Number(speedInput.value);
+        speedVal.textContent = `${seconds}s`;
+        document.documentElement.style.setProperty('--orbital-speed', `${seconds}s`);
+      };
+      speedInput.addEventListener('input', updateSpeed);
+      updateSpeed();
+
+      lockInput.addEventListener('change', (e) => {
+        isLocked = lockInput.checked;
+      });
+
+      // Keyboard selection shortcut: Enter locks selection
+      grid.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+          isLocked = true;
+          lockInput.checked = true;
+        } else if (e.key === 'Escape') {
+          isLocked = false;
+          lockInput.checked = false;
+        }
+      });
+    }
+
+    init();
+  </script>
+</body>
+</html>
\ No newline at end of file
