Upload 18 files

.gitignore

@@ -0,0 +1,21 @@
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Kiro
+.kiro/
+
+# Logs
+*.log
+npm-debug.log*
+
+# Temporary files
+*.tmp
+*.temp

DEPLOYMENT.md

@@ -0,0 +1,111 @@
+# Deploying to Hugging Face Spaces
+
+## Quick Start
+
+1. **Create a Hugging Face Account**
+   - Go to https://huggingface.co/join
+   - Sign up for a free account
+
+2. **Create a New Space**
+   - Go to https://huggingface.co/spaces
+   - Click "Create new Space"
+   - Choose a name for your space (e.g., "periodic-table-viewer")
+   - Select SDK: **Static**
+   - Choose visibility: Public or Private
+   - Click "Create Space"
+
+3. **Upload Files**
+   
+   **Option A: Using Git (Recommended)**
+   ```bash
+   # Clone your space repository
+   git clone https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME
+   cd YOUR_SPACE_NAME
+   
+   # Copy all files from this project
+   cp /path/to/this/project/index.html .
+   cp /path/to/this/project/README.md .
+   
+   # Commit and push
+   git add .
+   git commit -m "Initial commit: Periodic Table Spectrum Viewer"
+   git push
+   ```
+   
+   **Option B: Using Web Interface**
+   - In your Space, click "Files" tab
+   - Click "Add file" → "Upload files"
+   - Upload `index.html` and `README.md`
+   - Click "Commit changes to main"
+
+4. **Wait for Build**
+   - Hugging Face will automatically build and deploy your space
+   - This usually takes 10-30 seconds
+   - Your space will be available at: `https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME`
+
+## Files Needed for Deployment
+
+Only these files are required:
+- ✅ `index.html` - Main application (self-contained)
+- ✅ `README.md` - Space description and metadata
+
+**NOT needed** (already embedded in index.html):
+- ❌ JavaScript files (all code is in index.html)
+- ❌ CSS files (all styles are in index.html)
+- ❌ Data files (all data is in index.html)
+
+## Customization
+
+### Update Space Metadata
+Edit the frontmatter in `README.md`:
+```yaml
+---
+title: Your Custom Title
+emoji: 🔬  # Choose any emoji
+colorFrom: blue  # Start color for gradient
+colorTo: purple  # End color for gradient
+sdk: static  # Keep as "static"
+pinned: false  # Pin to your profile
+license: mit  # Choose your license
+---
+```
+
+### Update Credits
+In `index.html`, find the footer section and update:
+```html
+<footer>
+    <p>Created by Your Name | Data from <a href="..." target="_blank">Source</a></p>
+</footer>
+```
+
+## Troubleshooting
+
+### Space not loading?
+- Check the "Logs" tab in your Space for errors
+- Ensure `index.html` is in the root directory
+- Verify the README.md has correct frontmatter
+
+### Three.js not loading?
+- The app uses CDN links for Three.js
+- Ensure you have internet connection
+- Check browser console for errors
+
+### Need to update?
+```bash
+# Make changes to index.html locally
+# Then push updates
+git add index.html
+git commit -m "Update: description of changes"
+git push
+```
+
+## Support
+
+For issues with:
+- **Hugging Face Spaces**: https://huggingface.co/docs/hub/spaces
+- **This Project**: Open an issue in the repository
+
+## Example Spaces
+
+See other static spaces for inspiration:
+- https://huggingface.co/spaces (search for "static" SDK)

DataManager.js

@@ -0,0 +1,58 @@
+export class DataManager {
+    constructor() {
+        this.elementsData = new Map();
+    }
+
+    async loadSpectralData(dataUrl) {
+        try {
+            const response = await fetch(dataUrl);
+            if (!response.ok) {
+                throw new Error(`Failed to load spectral data: ${response.statusText}`);
+            }
+            const data = await response.json();
+            
+            if (!this.validateData(data)) {
+                throw new Error('Invalid spectral data format');
+            }
+
+            // Store elements in a Map for quick lookup
+            data.elements.forEach(element => {
+                this.elementsData.set(element.symbol, element);
+            });
+
+            return true;
+        } catch (error) {
+            console.error('Error loading spectral data:', error);
+            throw error;
+        }
+    }
+
+    getElementData(symbol) {
+        return this.elementsData.get(symbol) || null;
+    }
+
+    getAllElements() {
+        return Array.from(this.elementsData.keys());
+    }
+
+    validateData(data) {
+        if (!data || !Array.isArray(data.elements)) {
+            return false;
+        }
+
+        for (const element of data.elements) {
+            if (!element.symbol || !element.name || !element.atomicNumber) {
+                return false;
+            }
+            if (!Array.isArray(element.spectralLines)) {
+                return false;
+            }
+        }
+
+        return true;
+    }
+
+    validateWavelength(wavelength) {
+        return wavelength >= 10 && wavelength <= 10000;
+    }
+}

HUGGINGFACE_SETUP.md

@@ -0,0 +1,117 @@
+# Hugging Face Spaces Setup - Quick Guide
+
+## ✅ Your Project is Ready!
+
+Your Periodic Table Spectrum Viewer is now configured for Hugging Face Spaces deployment.
+
+## 📦 What's Been Prepared
+
+1. **README.md** - Contains Hugging Face Space metadata and project description
+2. **.gitignore** - Excludes unnecessary files from version control
+3. **DEPLOYMENT.md** - Detailed deployment instructions
+4. **index.html** - Self-contained application (no external dependencies needed)
+
+## 🚀 Deploy in 3 Steps
+
+### Step 1: Create Space
+1. Go to https://huggingface.co/spaces
+2. Click "Create new Space"
+3. Name: `periodic-table-viewer` (or your choice)
+4. SDK: Select **"Static"**
+5. Click "Create Space"
+
+### Step 2: Upload Files
+Upload only these 2 files:
+- `index.html`
+- `README.md`
+
+### Step 3: Done!
+Your space will be live at:
+`https://huggingface.co/spaces/YOUR_USERNAME/periodic-table-viewer`
+
+## 📝 Important Notes
+
+### ✅ What's Included
+- All JavaScript code (embedded in index.html)
+- All CSS styles (embedded in index.html)
+- All element data (embedded in index.html)
+- Three.js library (loaded from CDN)
+
+### ❌ What's NOT Needed
+- No separate .js files
+- No separate .css files
+- No data files
+- No build process
+- No dependencies to install
+
+### 🌐 External Dependencies
+The app loads Three.js from CDN:
+- `https://cdn.jsdelivr.net/npm/three@0.160.0/`
+
+This is standard and works perfectly on Hugging Face Spaces.
+
+## 🎨 Customization
+
+### Change Space Appearance
+Edit `README.md` frontmatter:
+```yaml
+---
+title: Your Title Here
+emoji: 🔬
+colorFrom: blue
+colorTo: purple
+---
+```
+
+### Change Credits
+Edit the footer in `index.html`:
+```html
+<footer>
+    <p>Created by Your Name</p>
+</footer>
+```
+
+## 🔧 Testing Locally
+
+Before deploying, test locally:
+1. Open `index.html` in a web browser
+2. Check that all features work:
+   - 3D periodic table loads
+   - Elements are clickable
+   - Spectrum popup works
+   - All 118 elements have data
+
+## 📚 Resources
+
+- **Hugging Face Spaces Docs**: https://huggingface.co/docs/hub/spaces
+- **Static Spaces Guide**: https://huggingface.co/docs/hub/spaces-sdks-static
+- **Example Spaces**: Search "static" on https://huggingface.co/spaces
+
+## 🆘 Troubleshooting
+
+**Space shows blank page?**
+- Check browser console for errors
+- Verify index.html is in root directory
+- Ensure README.md has correct frontmatter
+
+**Three.js not loading?**
+- CDN might be temporarily down
+- Check internet connection
+- Try refreshing the page
+
+**Need help?**
+- Check DEPLOYMENT.md for detailed instructions
+- Visit Hugging Face Discord: https://hf.co/join/discord
+
+## 🎉 Next Steps
+
+1. Deploy to Hugging Face Spaces
+2. Share your space URL
+3. Get feedback from users
+4. Consider adding more features:
+   - Search functionality
+   - Favorite elements
+   - Compare elements side-by-side
+   - Export spectrum images
+
+Good luck with your deployment! 🚀

InteractionController.js

@@ -0,0 +1,90 @@
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
+export class InteractionController {
+    constructor(sceneManager, periodicTable, spectrumDisplay) {
+        this.sceneManager = sceneManager;
+        this.periodicTable = periodicTable;
+        this.spectrumDisplay = spectrumDisplay;
+        this.controls = null;
+        this.renderer = sceneManager.getRenderer();
+        this.camera = sceneManager.getCamera();
+    }
+
+    initialize() {
+        // Set up OrbitControls
+        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+        this.controls.enableDamping = true;
+        this.controls.dampingFactor = 0.05;
+        this.controls.minDistance = 10;
+        this.controls.maxDistance = 50;
+        this.controls.enablePan = true;
+
+        // Mouse move for hover
+        this.renderer.domElement.addEventListener('mousemove', (e) => this.onMouseMove(e));
+
+        // Click for selection
+        this.renderer.domElement.addEventListener('click', (e) => this.onClick(e));
+
+        // ESC key for deselection
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                this.deselectElement();
+            }
+        });
+
+        // Update controls in animation loop
+        this.updateControls();
+    }
+
+    onMouseMove(event) {
+        const rect = this.renderer.domElement.getBoundingClientRect();
+        const x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+        const y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+
+        const element = this.periodicTable.getElementAtPosition(x, y, this.camera);
+        
+        if (element) {
+            this.renderer.domElement.style.cursor = 'pointer';
+            this.periodicTable.highlightElement(element);
+        } else {
+            this.renderer.domElement.style.cursor = 'default';
+            this.periodicTable.highlightElement(null);
+        }
+    }
+
+    onClick(event) {
+        const rect = this.renderer.domElement.getBoundingClientRect();
+        const x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+        const y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+
+        const element = this.periodicTable.getElementAtPosition(x, y, this.camera);
+        
+        if (element) {
+            this.periodicTable.selectElement(element);
+            this.spectrumDisplay.showSpectrum(element);
+        } else {
+            this.deselectElement();
+        }
+    }
+
+    deselectElement() {
+        this.periodicTable.selectElement(null);
+        this.spectrumDisplay.hideSpectrum();
+    }
+
+    updateControls() {
+        const animate = () => {
+            requestAnimationFrame(animate);
+            if (this.controls) {
+                this.controls.update();
+            }
+        };
+        animate();
+    }
+
+    dispose() {
+        if (this.controls) {
+            this.controls.dispose();
+        }
+    }
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Andy Kong
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

PeriodicTableComponent.js

@@ -0,0 +1,124 @@
+import * as THREE from 'three';
+import { getElementPosition, ELEMENT_COLORS } from './elementLayout.js';
+
+export class PeriodicTableComponent {
+    constructor(scene, dataManager) {
+        this.scene = scene;
+        this.dataManager = dataManager;
+        this.elementMeshes = new Map();
+        this.highlightedElement = null;
+        this.selectedElement = null;
+    }
+
+    createPeriodicTable() {
+        const elements = this.dataManager.getAllElements();
+        
+        elements.forEach(symbol => {
+            const elementData = this.dataManager.getElementData(symbol);
+            const position = getElementPosition(symbol);
+            
+            if (!position) return;
+            
+            // Create element tile
+            const geometry = new THREE.BoxGeometry(0.9, 0.9, 0.1);
+            const color = ELEMENT_COLORS[elementData.category] || ELEMENT_COLORS.unknown;
+            const material = new THREE.MeshStandardMaterial({
+                color: color,
+                emissive: 0x000000,
+                metalness: 0.3,
+                roughness: 0.7
+            });
+            
+            const mesh = new THREE.Mesh(geometry, material);
+            mesh.position.set(position.x, position.y, position.z);
+            mesh.userData = { symbol, elementData };
+            
+            this.scene.add(mesh);
+            this.elementMeshes.set(symbol, mesh);
+            
+            // Add text label
+            this.addTextLabel(symbol, position);
+        });
+    }
+
+    addTextLabel(symbol, position) {
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        canvas.width = 128;
+        canvas.height = 128;
+        
+        context.fillStyle = 'white';
+        context.font = 'bold 60px Arial';
+        context.textAlign = 'center';
+        context.textBaseline = 'middle';
+        context.fillText(symbol, 64, 64);
+        
+        const texture = new THREE.CanvasTexture(canvas);
+        const spriteMaterial = new THREE.SpriteMaterial({ map: texture });
+        const sprite = new THREE.Sprite(spriteMaterial);
+        sprite.scale.set(0.6, 0.6, 1);
+        sprite.position.set(position.x, position.y, position.z + 0.1);
+        
+        this.scene.add(sprite);
+    }
+
+    highlightElement(symbol) {
+        // Reset previous highlight
+        if (this.highlightedElement && this.highlightedElement !== this.selectedElement) {
+            const prevMesh = this.elementMeshes.get(this.highlightedElement);
+            if (prevMesh) {
+                prevMesh.material.emissive.setHex(0x000000);
+            }
+        }
+        
+        // Apply new highlight
+        if (symbol && symbol !== this.selectedElement) {
+            const mesh = this.elementMeshes.get(symbol);
+            if (mesh) {
+                mesh.material.emissive.setHex(0x444444);
+            }
+        }
+        
+        this.highlightedElement = symbol;
+    }
+
+    selectElement(symbol) {
+        // Reset previous selection
+        if (this.selectedElement) {
+            const prevMesh = this.elementMeshes.get(this.selectedElement);
+            if (prevMesh) {
+                prevMesh.material.emissive.setHex(0x000000);
+            }
+        }
+        
+        // Apply new selection
+        if (symbol) {
+            const mesh = this.elementMeshes.get(symbol);
+            if (mesh) {
+                mesh.material.emissive.setHex(0x00ff00);
+            }
+        }
+        
+        this.selectedElement = symbol;
+    }
+
+    getElementAtPosition(x, y, camera) {
+        const raycaster = new THREE.Raycaster();
+        const mouse = new THREE.Vector2(x, y);
+        
+        raycaster.setFromCamera(mouse, camera);
+        
+        const meshes = Array.from(this.elementMeshes.values());
+        const intersects = raycaster.intersectObjects(meshes);
+        
+        if (intersects.length > 0) {
+            return intersects[0].object.userData.symbol;
+        }
+        
+        return null;
+    }
+
+    getSelectedElement() {
+        return this.selectedElement;
+    }
+}

README.md

@@ -1,11 +1,59 @@
----
-title: Periodic Table
-emoji: 👀
-colorFrom: purple
-colorTo: gray
-sdk: static
-pinned: false
-short_description: 3D Periodic Table with Emission lines for astronomy
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+title: Periodic Table Spectrum Viewer
+emoji: 🔬
+colorFrom: blue
+colorTo: purple
+sdk: static
+pinned: false
+license: mit
+---
+
+# Periodic Table Spectrum Viewer
+
+An interactive 3D periodic table with detailed emission spectrum visualization for all 118 elements.
+
+## Features
+
+- **3D Interactive Periodic Table**: Explore all 118 elements in a beautiful 3D layout using Three.js
+- **Emission Spectra**: View accurate emission spectra for each element
+- **Detailed Spectrum Viewer**: Click on any spectrum to see an expanded view with:
+  - Visible spectrum (380-750nm) with continuous color gradient
+  - UV and IR regions for elements with lines outside visible range
+  - Electron transition information
+  - Wavelength labels and intensity data
+- **Element Information**: 
+  - Cosmic origin (how the element was created in the universe)
+  - Chemistry properties and uses
+  - Physics data (electron configuration, isotopes)
+- **Color-Coded Categories**: Elements colored by type (metals, nonmetals, noble gases, etc.)
+- **Hover Effects**: Elements pop forward when you hover over them
+- **Collapsible Info Panel**: Full-height panel with collapsible sections
+
+## How to Use
+
+1. **Rotate**: Click and drag to rotate the periodic table
+2. **Zoom**: Scroll to zoom in/out
+3. **Select Element**: Click on any element to view its details
+4. **View Detailed Spectrum**: Click on the emission spectrum graph to open a full-width detailed view
+5. **Deselect**: Press ESC or click away to deselect
+
+## Data Sources
+
+- Spectral data from [NIST Atomic Spectra Database](https://www.nist.gov/pml/atomic-spectra-database)
+- Cosmic origin information based on astrophysics research
+- Chemistry and physics data from scientific databases
+
+## Technology
+
+- **Three.js**: 3D visualization
+- **Vanilla JavaScript**: No framework dependencies
+- **Canvas API**: Spectrum rendering
+- **CSS3**: Modern styling and animations
+
+## Credits
+
+Created by Andy Kong
+
+## License
+
+MIT License - Feel free to use and modify for your own projects!

SceneManager.js

@@ -0,0 +1,116 @@
+import * as THREE from 'three';
+
+export class SceneManager {
+    constructor(container) {
+        this.container = container;
+        this.scene = null;
+        this.camera = null;
+        this.renderer = null;
+        this.animationId = null;
+    }
+
+    initialize() {
+        // Check WebGL support
+        if (!this.checkWebGLSupport()) {
+            this.showWebGLError();
+            return false;
+        }
+
+        // Create scene
+        this.scene = new THREE.Scene();
+        this.scene.background = new THREE.Color(0x1a1a2e);
+
+        // Create camera
+        const aspect = this.container.clientWidth / this.container.clientHeight;
+        this.camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 1000);
+        this.camera.position.set(0, 0, 30);
+
+        // Create renderer
+        this.renderer = new THREE.WebGLRenderer({ antialias: true });
+        this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
+        this.renderer.setPixelRatio(window.devicePixelRatio);
+        this.container.appendChild(this.renderer.domElement);
+
+        // Add lights
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+        this.scene.add(ambientLight);
+
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+        directionalLight.position.set(10, 10, 10);
+        this.scene.add(directionalLight);
+
+        // Handle window resize
+        window.addEventListener('resize', () => this.onWindowResize());
+
+        return true;
+    }
+
+    checkWebGLSupport() {
+        try {
+            const canvas = document.createElement('canvas');
+            return !!(window.WebGLRenderingContext && 
+                (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));
+        } catch (e) {
+            return false;
+        }
+    }
+
+    showWebGLError() {
+        const errorDiv = document.createElement('div');
+        errorDiv.style.cssText = `
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(0, 0, 0, 0.9);
+            color: white;
+            padding: 30px;
+            border-radius: 10px;
+            text-align: center;
+            z-index: 10000;
+        `;
+        errorDiv.innerHTML = `
+            <h2>WebGL Not Available</h2>
+            <p>WebGL is required but not available. Please use a modern browser with WebGL support.</p>
+            <p><a href="https://get.webgl.org/" target="_blank" style="color: #4fc3f7;">Learn more</a></p>
+        `;
+        document.body.appendChild(errorDiv);
+    }
+
+    start() {
+        if (!this.renderer) return;
+        
+        const animate = () => {
+            this.animationId = requestAnimationFrame(animate);
+            this.renderer.render(this.scene, this.camera);
+        };
+        animate();
+    }
+
+    stop() {
+        if (this.animationId) {
+            cancelAnimationFrame(this.animationId);
+            this.animationId = null;
+        }
+    }
+
+    onWindowResize() {
+        if (!this.camera || !this.renderer) return;
+
+        this.camera.aspect = this.container.clientWidth / this.container.clientHeight;
+        this.camera.updateProjectionMatrix();
+        this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
+    }
+
+    getScene() {
+        return this.scene;
+    }
+
+    getCamera() {
+        return this.camera;
+    }
+
+    getRenderer() {
+        return this.renderer;
+    }
+}

SpectrumDisplayComponent.js

@@ -0,0 +1,133 @@
+import { getSpectrumColor } from './wavelengthUtils.js';
+
+export class SpectrumDisplayComponent {
+    constructor(dataManager) {
+        this.dataManager = dataManager;
+        this.infoPanel = document.getElementById('info-panel');
+        this.elementName = document.getElementById('element-name');
+        this.elementDetails = document.getElementById('element-details');
+        this.spectrumContainer = document.getElementById('spectrum-container');
+    }
+
+    showSpectrum(symbol) {
+        const elementData = this.dataManager.getElementData(symbol);
+        
+        if (!elementData) {
+            this.showNoData(symbol);
+            return;
+        }
+
+        // Update element info
+        this.elementName.textContent = elementData.name;
+        this.elementDetails.textContent = `Symbol: ${elementData.symbol} | Atomic Number: ${elementData.atomicNumber}`;
+
+        // Create spectrum visualization
+        this.createSpectralLines(elementData.spectralLines);
+
+        // Show panel
+        this.infoPanel.classList.remove('hidden');
+    }
+
+    hideSpectrum() {
+        this.infoPanel.classList.add('hidden');
+        this.spectrumContainer.innerHTML = '';
+    }
+
+    createSpectralLines(lines) {
+        this.spectrumContainer.innerHTML = '';
+
+        if (!lines || lines.length === 0) {
+            this.spectrumContainer.innerHTML = '<p>No spectral data available</p>';
+            return;
+        }
+
+        // Sort by intensity and limit to top 20
+        const sortedLines = [...lines].sort((a, b) => (b.intensity || 0) - (a.intensity || 0));
+        const displayLines = sortedLines.slice(0, 20);
+
+        // Create canvas for spectrum
+        const canvas = document.createElement('canvas');
+        canvas.width = 360;
+        canvas.height = 200;
+        canvas.style.width = '100%';
+        canvas.style.border = '1px solid rgba(255, 255, 255, 0.2)';
+        canvas.style.borderRadius = '5px';
+        
+        const ctx = canvas.getContext('2d');
+        
+        // Draw background
+        ctx.fillStyle = '#000';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+        // Find wavelength range
+        const wavelengths = displayLines.map(l => l.wavelength);
+        const minWave = Math.min(...wavelengths, 380);
+        const maxWave = Math.max(...wavelengths, 750);
+        const range = maxWave - minWave;
+
+        // Draw wavelength scale
+        ctx.fillStyle = '#666';
+        ctx.font = '10px Arial';
+        ctx.textAlign = 'center';
+        for (let w = Math.ceil(minWave / 50) * 50; w <= maxWave; w += 50) {
+            const x = ((w - minWave) / range) * (canvas.width - 40) + 20;
+            ctx.fillRect(x, canvas.height - 20, 1, 10);
+            ctx.fillText(w + 'nm', x, canvas.height - 5);
+        }
+
+        // Draw spectral lines
+        displayLines.forEach(line => {
+            const { color, opacity } = getSpectrumColor(line.wavelength);
+            const x = ((line.wavelength - minWave) / range) * (canvas.width - 40) + 20;
+            const height = (line.intensity || 0.5) * 140;
+
+            ctx.fillStyle = `rgba(${Math.floor(color.r * 255)}, ${Math.floor(color.g * 255)}, ${Math.floor(color.b * 255)}, ${opacity})`;
+            ctx.fillRect(x - 2, canvas.height - 30 - height, 4, height);
+
+            // Draw wavelength label for prominent lines
+            if (line.intensity > 0.5) {
+                ctx.fillStyle = '#fff';
+                ctx.font = '9px Arial';
+                ctx.save();
+                ctx.translate(x, canvas.height - 35 - height);
+                ctx.rotate(-Math.PI / 2);
+                ctx.fillText(line.wavelength.toFixed(1), 0, 0);
+                ctx.restore();
+            }
+        });
+
+        this.spectrumContainer.appendChild(canvas);
+
+        // Add line details
+        const detailsDiv = document.createElement('div');
+        detailsDiv.style.marginTop = '10px';
+        detailsDiv.style.fontSize = '12px';
+        detailsDiv.style.maxHeight = '200px';
+        detailsDiv.style.overflowY = 'auto';
+        
+        detailsDiv.innerHTML = '<h3 style="margin-bottom: 10px;">Spectral Lines:</h3>';
+        
+        displayLines.forEach(line => {
+            const lineDiv = document.createElement('div');
+            lineDiv.style.marginBottom = '5px';
+            lineDiv.style.padding = '5px';
+            lineDiv.style.background = 'rgba(255, 255, 255, 0.05)';
+            lineDiv.style.borderRadius = '3px';
+            
+            const { color } = getSpectrumColor(line.wavelength);
+            const colorBox = `<span style="display: inline-block; width: 12px; height: 12px; background: rgb(${Math.floor(color.r * 255)}, ${Math.floor(color.g * 255)}, ${Math.floor(color.b * 255)}); border: 1px solid #fff; margin-right: 5px;"></span>`;
+            
+            lineDiv.innerHTML = `${colorBox}${line.wavelength.toFixed(1)} nm (Intensity: ${(line.intensity || 0).toFixed(2)})${line.transition ? ' - ' + line.transition : ''}`;
+            detailsDiv.appendChild(lineDiv);
+        });
+
+        this.spectrumContainer.appendChild(detailsDiv);
+    }
+
+    showNoData(symbol) {
+        this.elementName.textContent = symbol;
+        this.elementDetails.textContent = 'Element information';
+        this.spectrumContainer.innerHTML = '<p>Spectral data not available for this element</p>';
+        this.infoPanel.classList.remove('hidden');
+    }
+}

all-elements-data.js

@@ -0,0 +1,25 @@
+// Complete periodic table data with cosmic origins and spectral lines
+// This will be integrated into index.html
+
+const ALL_ELEMENTS = [
+    // Period 1
+    { symbol: "H", name: "Hydrogen", atomicNumber: 1, category: "nonmetal", row: 1, col: 1,
+      cosmicOrigin: "Big Bang", originColor: "#FFD700",
+      astronomyInfo: "The most abundant element in the universe, created during the Big Bang 13.8 billion years ago. Hydrogen makes up about 75% of all normal matter and is the fuel that powers stars through nuclear fusion.",
+      spectralLines: [{ wavelength: 656.3, intensity: 1.0 }, { wavelength: 486.1, intensity: 0.5 }, { wavelength: 434.0, intensity: 0.3 }, { wavelength: 410.2, intensity: 0.2 }]},
+    
+    { symbol: "He", name: "Helium", atomicNumber: 2, category: "noble-gas", row: 1, col: 18,
+      cosmicOrigin: "Big Bang", originColor: "#FFD700",
+      astronomyInfo: "The second most abundant element in the universe, primarily created during the Big Bang. Also produced by nuclear fusion in stars.",
+      spectralLines: [{ wavelength: 587.6, intensity: 1.0 }, { wavelength: 667.8, intensity: 0.3 }, { wavelength: 501.6, intensity: 0.4 }]},
+    
+    // Period 2
+    { symbol: "Li", name: "Lithium", atomicNumber: 3, category: "alkali-metal", row: 2, col: 1,
+      cosmicOrigin: "Cosmic Ray & Dying Stars", originColor: "#9370DB",
+      astronomyInfo: "Created through multiple processes: some from the Big Bang, most from dying low-mass stars, and some isotopes from cosmic ray collisions.",
+      spectralLines: [{ wavelength: 670.8, intensity: 1.0 }, { wavelength: 610.4, intensity: 0.3 }]},
+    
+    { symbol: "Be", name: "Beryllium", atomicNumber: 4, category: "alkaline-earth", row: 2, col: 2,
+      cosmicOrigin: "Cosmic Ray Fission", originColor: "#9370DB",
+      astronomyInfo: "Created by cosmic ray spallation - when high-energy cosmic rays collide with heavier elements in space, breaking them apart.",
+      spectralLines: [{ wavelength: 234.9, intensity: 1.0 }, { wavelength: 313.0, intensity: 0.4 }]},

element-science-data.txt

@@ -0,0 +1,31 @@
+Chemistry and Physics data for all elements to be added:
+
+H: chemistryInfo: "The simplest element with one proton and one electron. Forms covalent bonds in H₂ molecules. Essential for water (H₂O), acids, and all organic compounds. Has three isotopes: protium, deuterium, and tritium."
+   physicsInfo: "Atomic mass: 1.008 u. Ionization energy: 13.6 eV. The only atom with exact analytical solution to Schrödinger equation. Melting point: -259°C, Boiling point: -253°C."
+
+He: chemistryInfo: "Noble gas with complete electron shell, chemically inert. Does not form compounds under normal conditions. Lowest boiling point (-269°C). Used in balloons, diving, and cryogenics."
+    physicsInfo: "Atomic mass: 4.003 u. Ionization energy: 24.6 eV (highest). Exhibits superfluidity below 2.17 K. Two stable isotopes: ³He and ⁴He."
+
+Li: chemistryInfo: "Highly reactive alkali metal, stored in oil. Forms ionic compounds with halogens. Lightest metal and least dense solid. Used in rechargeable batteries and psychiatric medication."
+    physicsInfo: "Atomic mass: 6.94 u. Melting point: 180.5°C. Highest specific heat of any solid. Two stable isotopes: ⁶Li and ⁷Li. Excellent conductor."
+
+Be: chemistryInfo: "Alkaline earth metal, forms strong covalent bonds. Toxic and carcinogenic. Used in aerospace alloys and X-ray windows. Forms Be²⁺ ions."
+    physicsInfo: "Atomic mass: 9.012 u. Melting point: 1287°C. High stiffness-to-weight ratio. Transparent to X-rays. One stable isotope: ⁹Be."
+
+C: chemistryInfo: "Basis of organic chemistry, forms 4 covalent bonds. Exists as diamond, graphite, and fullerenes. Essential for all known life. Forms millions of compounds."
+   physicsInfo: "Atomic mass: 12.011 u. Sublimes at 3642°C. Diamond is hardest natural material. Graphene has highest strength. Isotopes: ¹²C, ¹³C, ¹⁴C (radioactive)."
+
+N: chemistryInfo: "Diatomic gas (N₂) with triple bond, very stable. Essential for proteins and DNA. Forms nitrates and ammonia. Makes up 78% of Earth's atmosphere."
+   physicsInfo: "Atomic mass: 14.007 u. Boiling point: -196°C. Triple bond energy: 945 kJ/mol. Two stable isotopes: ¹⁴N, ¹⁵N."
+
+O: chemistryInfo: "Highly reactive, forms oxides with most elements. Essential for respiration. Exists as O₂ and O₃ (ozone). Second most electronegative element."
+   physicsInfo: "Atomic mass: 15.999 u. Boiling point: -183°C. Paramagnetic in liquid form. Three stable isotopes: ¹⁶O, ¹⁷O, ¹⁸O."
+
+F: chemistryInfo: "Most electronegative and reactive element. Forms fluorides with all elements except He, Ne, Ar. Used in toothpaste and Teflon. Highly toxic."
+   physicsInfo: "Atomic mass: 18.998 u. Boiling point: -188°C. Electronegativity: 4.0 (highest). One stable isotope: ¹⁹F."
+
+Ne: chemistryInfo: "Noble gas, chemically inert. No known compounds. Used in neon signs (red-orange glow), lasers, and cryogenic refrigeration."
+    physicsInfo: "Atomic mass: 20.180 u. Boiling point: -246°C. Three stable isotopes: ²⁰Ne, ²¹Ne, ²²Ne. Ionization energy: 21.6 eV."
+
+Na: chemistryInfo: "Highly reactive alkali metal, reacts violently with water. Forms Na⁺ ions. Essential for nerve function. Found in table salt (NaCl)."
+    physicsInfo: "Atomic mass: 22.990 u. Melting point: 98°C. Soft enough to cut with knife. One stable isotope: ²³Na. Excellent conductor."

elementLayout.js

@@ -0,0 +1,48 @@
+export const ELEMENT_LAYOUT = {
+    tileSize: 1.0,
+    spacing: 0.1,
+    
+    // Simplified layout for the 10 elements we have data for
+    positions: {
+        "H": { row: 1, column: 1 },
+        "He": { row: 1, column: 18 },
+        "Li": { row: 2, column: 1 },
+        "C": { row: 2, column: 14 },
+        "N": { row: 2, column: 15 },
+        "O": { row: 2, column: 16 },
+        "Na": { row: 3, column: 1 },
+        "Fe": { row: 4, column: 8 },
+        "Cu": { row: 4, column: 11 },
+        "Au": { row: 6, column: 11 }
+    }
+};
+
+export const ELEMENT_COLORS = {
+    "metal": 0x4A90E2,
+    "nonmetal": 0x7ED321,
+    "metalloid": 0xF5A623,
+    "noble-gas": 0xBD10E0,
+    "alkali-metal": 0xFF6B6B,
+    "alkaline-earth": 0xFFA07A,
+    "transition-metal": 0x87CEEB,
+    "lanthanide": 0xFFD700,
+    "actinide": 0xFF69B4,
+    "halogen": 0x50E3C2,
+    "unknown": 0xCCCCCC
+};
+
+export function getElementPosition(symbol) {
+    const pos = ELEMENT_LAYOUT.positions[symbol];
+    if (!pos) return null;
+    
+    const tileSize = ELEMENT_LAYOUT.tileSize;
+    const spacing = ELEMENT_LAYOUT.spacing;
+    const unit = tileSize + spacing;
+    
+    // Center the periodic table
+    const x = (pos.column - 9.5) * unit;
+    const y = -(pos.row - 3.5) * unit;
+    const z = 0;
+    
+    return { x, y, z, row: pos.row, column: pos.column };
+}

main.js

@@ -0,0 +1,66 @@
+import { SceneManager } from './SceneManager.js';
+import { DataManager } from './DataManager.js';
+import { PeriodicTableComponent } from './PeriodicTableComponent.js';
+import { SpectrumDisplayComponent } from './SpectrumDisplayComponent.js';
+import { InteractionController } from './InteractionController.js';
+
+async function init() {
+    const loadingDiv = document.getElementById('loading');
+    const appContainer = document.getElementById('app-container');
+
+    try {
+        // Initialize DataManager and load spectral data
+        const dataManager = new DataManager();
+        await dataManager.loadSpectralData('spectral-data.json');
+
+        // Initialize SceneManager
+        const container = document.getElementById('canvas-container');
+        const sceneManager = new SceneManager(container);
+        
+        if (!sceneManager.initialize()) {
+            throw new Error('Failed to initialize WebGL');
+        }
+
+        // Create PeriodicTableComponent
+        const periodicTable = new PeriodicTableComponent(
+            sceneManager.getScene(),
+            dataManager
+        );
+        periodicTable.createPeriodicTable();
+
+        // Create SpectrumDisplayComponent
+        const spectrumDisplay = new SpectrumDisplayComponent(dataManager);
+
+        // Create InteractionController
+        const interactionController = new InteractionController(
+            sceneManager,
+            periodicTable,
+            spectrumDisplay
+        );
+        interactionController.initialize();
+
+        // Start animation loop
+        sceneManager.start();
+
+        // Hide loading indicator
+        loadingDiv.style.display = 'none';
+        appContainer.style.display = 'block';
+
+    } catch (error) {
+        console.error('Initialization error:', error);
+        loadingDiv.innerHTML = `
+            <div style="color: #ff6b6b;">
+                <h2>Failed to Load Application</h2>
+                <p>${error.message}</p>
+                <p>Please refresh the page to try again.</p>
+            </div>
+        `;
+    }
+}
+
+// Start the application when DOM is ready
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+} else {
+    init();
+}

spectral-data.json

@@ -0,0 +1,118 @@
+{
+  "elements": [
+    {
+      "symbol": "H",
+      "name": "Hydrogen",
+      "atomicNumber": 1,
+      "category": "nonmetal",
+      "spectralLines": [
+        { "wavelength": 656.3, "intensity": 1.0, "transition": "3→2 (Hα)" },
+        { "wavelength": 486.1, "intensity": 0.5, "transition": "4→2 (Hβ)" },
+        { "wavelength": 434.0, "intensity": 0.3, "transition": "5→2 (Hγ)" },
+        { "wavelength": 410.2, "intensity": 0.2, "transition": "6→2 (Hδ)" }
+      ]
+    },
+    {
+      "symbol": "He",
+      "name": "Helium",
+      "atomicNumber": 2,
+      "category": "noble-gas",
+      "spectralLines": [
+        { "wavelength": 587.6, "intensity": 1.0 },
+        { "wavelength": 667.8, "intensity": 0.3 },
+        { "wavelength": 501.6, "intensity": 0.4 },
+        { "wavelength": 447.1, "intensity": 0.2 }
+      ]
+    },
+    {
+      "symbol": "Li",
+      "name": "Lithium",
+      "atomicNumber": 3,
+      "category": "alkali-metal",
+      "spectralLines": [
+        { "wavelength": 670.8, "intensity": 1.0 },
+        { "wavelength": 610.4, "intensity": 0.3 }
+      ]
+    },
+    {
+      "symbol": "C",
+      "name": "Carbon",
+      "atomicNumber": 6,
+      "category": "nonmetal",
+      "spectralLines": [
+        { "wavelength": 247.9, "intensity": 1.0 },
+        { "wavelength": 426.7, "intensity": 0.4 },
+        { "wavelength": 538.0, "intensity": 0.3 }
+      ]
+    },
+    {
+      "symbol": "N",
+      "name": "Nitrogen",
+      "atomicNumber": 7,
+      "category": "nonmetal",
+      "spectralLines": [
+        { "wavelength": 399.5, "intensity": 0.8 },
+        { "wavelength": 500.5, "intensity": 0.5 },
+        { "wavelength": 567.6, "intensity": 0.3 }
+      ]
+    },
+    {
+      "symbol": "O",
+      "name": "Oxygen",
+      "atomicNumber": 8,
+      "category": "nonmetal",
+      "spectralLines": [
+        { "wavelength": 777.4, "intensity": 1.0 },
+        { "wavelength": 844.6, "intensity": 0.7 },
+        { "wavelength": 615.8, "intensity": 0.4 }
+      ]
+    },
+    {
+      "symbol": "Na",
+      "name": "Sodium",
+      "atomicNumber": 11,
+      "category": "alkali-metal",
+      "spectralLines": [
+        { "wavelength": 589.0, "intensity": 1.0 },
+        { "wavelength": 589.6, "intensity": 0.9 },
+        { "wavelength": 568.3, "intensity": 0.2 }
+      ]
+    },
+    {
+      "symbol": "Fe",
+      "name": "Iron",
+      "atomicNumber": 26,
+      "category": "transition-metal",
+      "spectralLines": [
+        { "wavelength": 438.4, "intensity": 0.9 },
+        { "wavelength": 440.5, "intensity": 0.8 },
+        { "wavelength": 495.8, "intensity": 0.6 },
+        { "wavelength": 526.9, "intensity": 0.7 },
+        { "wavelength": 532.8, "intensity": 0.5 }
+      ]
+    },
+    {
+      "symbol": "Cu",
+      "name": "Copper",
+      "atomicNumber": 29,
+      "category": "transition-metal",
+      "spectralLines": [
+        { "wavelength": 324.8, "intensity": 1.0 },
+        { "wavelength": 327.4, "intensity": 0.9 },
+        { "wavelength": 510.6, "intensity": 0.4 },
+        { "wavelength": 521.8, "intensity": 0.5 }
+      ]
+    },
+    {
+      "symbol": "Au",
+      "name": "Gold",
+      "atomicNumber": 79,
+      "category": "transition-metal",
+      "spectralLines": [
+        { "wavelength": 267.6, "intensity": 1.0 },
+        { "wavelength": 312.3, "intensity": 0.7 },
+        { "wavelength": 479.3, "intensity": 0.3 }
+      ]
+    }
+  ]
+}

styles.css

@@ -0,0 +1,122 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+    color: #fff;
+    overflow: hidden;
+}
+
+#loading {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.9);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.spinner {
+    width: 50px;
+    height: 50px;
+    border: 5px solid rgba(255, 255, 255, 0.3);
+    border-top-color: #fff;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+#loading p {
+    margin-top: 20px;
+    font-size: 18px;
+}
+
+#app-container {
+    width: 100vw;
+    height: 100vh;
+    position: relative;
+}
+
+#canvas-container {
+    width: 100%;
+    height: 100%;
+}
+
+#info-panel {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background: rgba(0, 0, 0, 0.8);
+    padding: 20px;
+    border-radius: 10px;
+    max-width: 400px;
+    max-height: 80vh;
+    overflow-y: auto;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+#info-panel.hidden {
+    display: none;
+}
+
+#info-panel h2 {
+    margin-bottom: 10px;
+    color: #4fc3f7;
+}
+
+#element-details {
+    margin-bottom: 20px;
+    font-size: 14px;
+    color: #ccc;
+}
+
+#spectrum-container {
+    margin-top: 20px;
+}
+
+#controls-info {
+    position: absolute;
+    bottom: 60px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(0, 0, 0, 0.7);
+    padding: 10px 20px;
+    border-radius: 5px;
+    font-size: 14px;
+    text-align: center;
+}
+
+footer {
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 12px;
+    text-align: center;
+}
+
+footer a {
+    color: #4fc3f7;
+    text-decoration: none;
+}
+
+footer a:hover {
+    text-decoration: underline;
+}
+
+.hidden {
+    display: none;
+}

wavelengthUtils.js

@@ -0,0 +1,68 @@
+import * as THREE from 'three';
+
+export function wavelengthToRGB(wavelength) {
+    let r, g, b;
+    
+    if (wavelength >= 380 && wavelength < 440) {
+        r = -(wavelength - 440) / (440 - 380);
+        g = 0.0;
+        b = 1.0;
+    } else if (wavelength >= 440 && wavelength < 490) {
+        r = 0.0;
+        g = (wavelength - 440) / (490 - 440);
+        b = 1.0;
+    } else if (wavelength >= 490 && wavelength < 510) {
+        r = 0.0;
+        g = 1.0;
+        b = -(wavelength - 510) / (510 - 490);
+    } else if (wavelength >= 510 && wavelength < 580) {
+        r = (wavelength - 510) / (580 - 510);
+        g = 1.0;
+        b = 0.0;
+    } else if (wavelength >= 580 && wavelength < 645) {
+        r = 1.0;
+        g = -(wavelength - 645) / (645 - 580);
+        b = 0.0;
+    } else if (wavelength >= 645 && wavelength <= 750) {
+        r = 1.0;
+        g = 0.0;
+        b = 0.0;
+    } else {
+        r = 0.0;
+        g = 0.0;
+        b = 0.0;
+    }
+    
+    // Apply intensity correction for edge wavelengths
+    let factor;
+    if (wavelength >= 380 && wavelength < 420) {
+        factor = 0.3 + 0.7 * (wavelength - 380) / (420 - 380);
+    } else if (wavelength >= 420 && wavelength <= 700) {
+        factor = 1.0;
+    } else if (wavelength > 700 && wavelength <= 750) {
+        factor = 0.3 + 0.7 * (750 - wavelength) / (750 - 700);
+    } else {
+        factor = 0.0;
+    }
+    
+    // Apply gamma correction
+    const gamma = 0.80;
+    r = Math.pow(r * factor, gamma);
+    g = Math.pow(g * factor, gamma);
+    b = Math.pow(b * factor, gamma);
+    
+    return new THREE.Color(r, g, b);
+}
+
+export function getSpectrumColor(wavelength) {
+    if (wavelength < 380) {
+        // UV - use violet with reduced opacity
+        return { color: new THREE.Color(0x9400D3), opacity: 0.5 };
+    } else if (wavelength > 750) {
+        // IR - use dark red with reduced opacity
+        return { color: new THREE.Color(0x8B0000), opacity: 0.5 };
+    } else {
+        // Visible spectrum
+        return { color: wavelengthToRGB(wavelength), opacity: 1.0 };
+    }
+}