feat: Add SilverSHELL SDK documentation page with downloadable templates

Added comprehensive SDK page at /sdk with:
- Downloadable SilverSHELL starter template (6.3 KB)
- Downloadable SilverSHELL module template (14 KB)
- Quick start guide with step-by-step instructions
- Creating applications guide (configuration, UI, manual install)
- Creating modules guide with template options
- Publishing modules guide (automated CI/CD + manual)
- Available modules list from library.silverlabs.uk
- Resources and support links

Initial commit includes:
- Complete static website with Docker deployment
- SilverLabs branding and styling
- Nginx configuration for production serving

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

script.js

@@ -0,0 +1,139 @@
+// Loading screen functionality
+document.addEventListener('DOMContentLoaded', function() {
+    const loadingScreen = document.getElementById('loading-screen');
+    const mainContent = document.getElementById('main-content');
+
+    // Minimum loading time (in milliseconds) to show the loading screen
+    const minLoadingTime = 2000;
+    const startTime = Date.now();
+
+    // Function to hide loading screen and show main content
+    function hideLoadingScreen() {
+        const elapsedTime = Date.now() - startTime;
+        const remainingTime = Math.max(0, minLoadingTime - elapsedTime);
+
+        setTimeout(() => {
+            loadingScreen.classList.add('fade-out');
+            mainContent.classList.add('visible');
+
+            // Remove loading screen from DOM after transition
+            setTimeout(() => {
+                loadingScreen.style.display = 'none';
+            }, 500);
+        }, remainingTime);
+    }
+
+    // Hide loading screen when page is fully loaded
+    if (document.readyState === 'complete') {
+        hideLoadingScreen();
+    } else {
+        window.addEventListener('load', hideLoadingScreen);
+    }
+
+    // Add floating particles animation to background
+    createFloatingParticles();
+});
+
+// Create floating particles for background effect
+function createFloatingParticles() {
+    const mainContent = document.getElementById('main-content');
+    const particleCount = 20;
+
+    for (let i = 0; i < particleCount; i++) {
+        createParticle(mainContent);
+    }
+}
+
+function createParticle(container) {
+    const particle = document.createElement('div');
+    particle.className = 'particle';
+
+    // Random size between 2px and 6px
+    const size = Math.random() * 4 + 2;
+    particle.style.width = `${size}px`;
+    particle.style.height = `${size}px`;
+
+    // Random position
+    particle.style.left = `${Math.random() * 100}%`;
+    particle.style.top = `${Math.random() * 100}%`;
+
+    // Random animation duration between 10s and 30s
+    const duration = Math.random() * 20 + 10;
+    particle.style.animationDuration = `${duration}s`;
+
+    // Random delay
+    const delay = Math.random() * 5;
+    particle.style.animationDelay = `${delay}s`;
+
+    // Random opacity
+    const opacity = Math.random() * 0.3 + 0.1;
+    particle.style.opacity = opacity;
+
+    // Apply styles
+    particle.style.position = 'absolute';
+    particle.style.borderRadius = '50%';
+    particle.style.background = 'rgba(255, 255, 255, 0.5)';
+    particle.style.pointerEvents = 'none';
+    particle.style.zIndex = '0';
+    particle.style.animation = 'float ' + particle.style.animationDuration + ' ease-in-out infinite';
+
+    container.appendChild(particle);
+}
+
+// Add CSS animation for particles
+const style = document.createElement('style');
+style.textContent = `
+    @keyframes float {
+        0%, 100% {
+            transform: translate(0, 0) rotate(0deg);
+        }
+        25% {
+            transform: translate(10px, -20px) rotate(90deg);
+        }
+        50% {
+            transform: translate(-15px, -10px) rotate(180deg);
+        }
+        75% {
+            transform: translate(-10px, 20px) rotate(270deg);
+        }
+    }
+
+    .particle {
+        filter: blur(1px);
+    }
+`;
+document.head.appendChild(style);
+
+// Add smooth scroll behavior for potential internal links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+        const target = document.querySelector(this.getAttribute('href'));
+        if (target) {
+            target.scrollIntoView({
+                behavior: 'smooth'
+            });
+        }
+    });
+});
+
+// Add interactive hover effect to cards
+document.querySelectorAll('.gateway-card').forEach(card => {
+    card.addEventListener('mousemove', function(e) {
+        const rect = card.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+
+        const centerX = rect.width / 2;
+        const centerY = rect.height / 2;
+
+        const rotateX = (y - centerY) / 10;
+        const rotateY = (centerX - x) / 10;
+
+        card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-10px)`;
+    });
+
+    card.addEventListener('mouseleave', function() {
+        card.style.transform = '';
+    });
+});