Update dna-slot-machine.html

dna-slot-machine.html

@@ -13,8 +13,8 @@
 
         body {
             font-family: Arial, sans-serif;
-            background: #0a0a0a;
-            color: #fff;
+            background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 25%, #a29bfe 50%, #74b9ff 75%, #81ecec 100%);
+            color: #2d3436;
             overflow: hidden;
         }
 
@@ -26,7 +26,7 @@
         .viewer {
             flex: 1;
             position: relative;
-            background: #000;
+            background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(240, 240, 240, 0.8));
         }
 
         #canvas3d {
@@ -36,22 +36,26 @@
 
         .controls {
             width: 350px;
-            background: #1a1a1a;
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
             padding: 20px;
             overflow-y: auto;
+            box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
         }
 
         .control-section {
             margin-bottom: 25px;
             padding: 15px;
-            background: #2a2a2a;
-            border-radius: 8px;
+            background: linear-gradient(135deg, rgba(162, 155, 254, 0.1), rgba(116, 185, 255, 0.1));
+            border-radius: 12px;
+            border: 1px solid rgba(162, 155, 254, 0.2);
         }
 
         .control-section h3 {
             margin-bottom: 15px;
-            color: #00ff88;
+            color: #5f3dc4;
             font-size: 1.2em;
+            font-weight: 600;
         }
 
         .input-group {
@@ -61,41 +65,48 @@
         .input-group label {
             display: block;
             margin-bottom: 5px;
-            color: #aaa;
+            color: #5f3dc4;
             font-size: 0.9em;
+            font-weight: 500;
         }
 
         .input-group input,
         .input-group select,
         .input-group textarea {
             width: 100%;
-            padding: 8px;
-            background: #333;
-            border: 1px solid #555;
-            border-radius: 4px;
-            color: #fff;
+            padding: 10px;
+            background: rgba(255, 255, 255, 0.8);
+            border: 2px solid #dfe6e9;
+            border-radius: 8px;
+            color: #2d3436;
+            font-size: 14px;
+            transition: all 0.3s ease;
         }
 
-        .input-group textarea {
-            min-height: 100px;
-            font-family: monospace;
+        .input-group input:focus,
+        .input-group select:focus,
+        .input-group textarea:focus {
+            outline: none;
+            border-color: #74b9ff;
+            box-shadow: 0 0 0 3px rgba(116, 185, 255, 0.2);
         }
 
         button {
             width: 100%;
-            padding: 10px;
-            background: linear-gradient(135deg, #00ff88, #0088ff);
+            padding: 12px;
+            background: linear-gradient(135deg, #74b9ff, #a29bfe);
             border: none;
-            border-radius: 4px;
-            color: #000;
-            font-weight: bold;
+            border-radius: 8px;
+            color: #fff;
+            font-weight: 600;
             cursor: pointer;
             transition: all 0.3s;
+            box-shadow: 0 4px 6px rgba(162, 155, 254, 0.3);
         }
 
         button:hover {
             transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(0, 255, 136, 0.3);
+            box-shadow: 0 6px 12px rgba(162, 155, 254, 0.4);
         }
 
         .view-buttons {
@@ -114,37 +125,53 @@
             position: absolute;
             top: 20px;
             left: 20px;
-            background: rgba(0, 0, 0, 0.8);
-            padding: 15px;
-            border-radius: 8px;
-            border: 1px solid #00ff88;
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(10px);
+            padding: 20px;
+            border-radius: 12px;
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
             max-width: 300px;
         }
 
         .info-panel h4 {
-            color: #00ff88;
-            margin-bottom: 10px;
+            color: #5f3dc4;
+            margin-bottom: 15px;
+            font-weight: 600;
         }
 
         .info-item {
-            margin: 5px 0;
-            font-size: 0.9em;
+            margin: 8px 0;
+            font-size: 0.95em;
+            color: #2d3436;
+        }
+
+        .info-item span {
+            color: #74b9ff;
+            font-weight: 500;
         }
 
         .legend {
             position: absolute;
             bottom: 20px;
             right: 20px;
-            background: rgba(0, 0, 0, 0.8);
-            padding: 15px;
-            border-radius: 8px;
-            border: 1px solid #0088ff;
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(10px);
+            padding: 20px;
+            border-radius: 12px;
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+        }
+
+        .legend h4 {
+            color: #5f3dc4;
+            margin-bottom: 10px;
+            font-weight: 600;
         }
 
         .legend-item {
             display: flex;
             align-items: center;
-            margin: 5px 0;
+            margin: 8px 0;
+            color: #2d3436;
         }
 
         .legend-color {
@@ -184,11 +211,49 @@
 
         .slider {
             flex: 1;
+            -webkit-appearance: none;
+            height: 6px;
+            border-radius: 3px;
+            background: linear-gradient(to right, #dfe6e9 0%, #74b9ff 50%, #a29bfe 100%);
+            outline: none;
+        }
+
+        .slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            background: #5f3dc4;
+            cursor: pointer;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+        }
+
+        .slider::-moz-range-thumb {
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            background: #5f3dc4;
+            cursor: pointer;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
         }
 
         .slider-value {
             min-width: 40px;
             text-align: right;
+            color: #5f3dc4;
+            font-weight: 500;
+        }
+
+        #analysisResults {
+            background: rgba(255, 255, 255, 0.6);
+            padding: 15px;
+            border-radius: 8px;
+            color: #2d3436;
+        }
+
+        #analysisResults strong {
+            color: #5f3dc4;
         }
 
         /* Molecule info tooltip */
@@ -230,7 +295,15 @@
         </div>
         
         <div class="controls">
-            <h2 style="margin-bottom: 20px; text-align: center; color: #00ff88;">3D Structure Controls</h2>
+            <h2 style="
+                margin-bottom: 20px; 
+                text-align: center; 
+                background: linear-gradient(135deg, #5f3dc4, #74b9ff, #fd79a8);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+                background-clip: text;
+                font-size: 1.8em;
+            ">🧬 3D Structure Controls</h2>
             
             <div class="control-section">
                 <h3>🧬 Input Sequence</h3>
@@ -338,32 +411,35 @@
         let atoms = [];
         let bonds = [];
 
-        // Color schemes
+        // Color schemes - Pastel colors
         const elementColors = {
-            'C': 0x909090,
-            'H': 0xFFFFFF,
-            'N': 0x3050F8,
-            'O': 0xFF0D0D,
-            'P': 0xFF8000,
-            'S': 0xFFFF30
+            'C': 0x9b9b9b,    // Soft gray
+            'H': 0xf8f8f8,    // Almost white
+            'N': 0x74b9ff,    // Soft blue
+            'O': 0xfd79a8,    // Soft pink
+            'P': 0xfdcb6e,    // Soft orange
+            'S': 0xf9ca24     // Soft yellow
         };
 
         const residueColors = {
-            'A': 0xFF0000, 'T': 0x00FF00, 'G': 0x0000FF, 'C': 0xFFFF00,
-            'U': 0xFF00FF,
-            // Amino acids
-            'ALA': 0x8CFF8C, 'ARG': 0x00007C, 'ASN': 0xFF7C70, 'ASP': 0xA00042,
-            'CYS': 0xFFFF70, 'GLN': 0xFF4C4C, 'GLU': 0x660000, 'GLY': 0xFFFFFF,
-            'HIS': 0x7070FF, 'ILE': 0x004C00, 'LEU': 0x455E45, 'LYS': 0x4747B8,
-            'MET': 0xB8A042, 'PHE': 0x534C52, 'PRO': 0x525252, 'SER': 0xFF7042,
-            'THR': 0xB84C00, 'TRP': 0x4F4600, 'TYR': 0x8C704C, 'VAL': 0xFF8CFF
+            'A': 0xfd79a8,    // Soft pink
+            'T': 0x81ecec,    // Soft turquoise
+            'G': 0xfdcb6e,    // Soft yellow
+            'C': 0xa29bfe,    // Soft purple
+            'U': 0xf8b5ff,    // Soft magenta
+            // Amino acids - all in pastel shades
+            'ALA': 0xc7ecee, 'ARG': 0xdfe6e9, 'ASN': 0xfab1a0, 'ASP': 0xfd79a8,
+            'CYS': 0xffeaa7, 'GLN': 0xff7675, 'GLU': 0xe17055, 'GLY': 0xffffff,
+            'HIS': 0xa29bfe, 'ILE': 0x81ecec, 'LEU': 0x74b9ff, 'LYS': 0x686de0,
+            'MET': 0xfdcb6e, 'PHE': 0x6c5ce7, 'PRO': 0xb2bec3, 'SER': 0xff7675,
+            'THR': 0xf0932b, 'TRP': 0x5f3dc4, 'TYR': 0xeb4d4b, 'VAL': 0xbadc58
         };
 
         function init() {
             // Scene setup
             scene = new THREE.Scene();
-            scene.background = new THREE.Color(0x000000);
-            scene.fog = new THREE.Fog(0x000000, 100, 200);
+            scene.background = new THREE.Color(0xffffff);
+            scene.fog = new THREE.Fog(0xffffff, 100, 200);
 
             // Camera
             camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
@@ -372,22 +448,24 @@
             // Renderer
             renderer = new THREE.WebGLRenderer({ 
                 canvas: document.getElementById('canvas3d'),
-                antialias: true 
+                antialias: true,
+                alpha: true 
             });
             renderer.setSize(window.innerWidth - 350, window.innerHeight);
             renderer.shadowMap.enabled = true;
             renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+            renderer.setClearColor(0xffffff, 0.9);
 
             // Lights
-            const ambientLight = new THREE.AmbientLight(0x404040, 1.5);
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
             scene.add(ambientLight);
 
-            const directionalLight1 = new THREE.DirectionalLight(0xffffff, 1);
+            const directionalLight1 = new THREE.DirectionalLight(0xffffff, 0.6);
             directionalLight1.position.set(50, 50, 50);
             directionalLight1.castShadow = true;
             scene.add(directionalLight1);
 
-            const directionalLight2 = new THREE.DirectionalLight(0x8888ff, 0.5);
+            const directionalLight2 = new THREE.DirectionalLight(0xa29bfe, 0.3);
             directionalLight2.position.set(-50, 50, -50);
             scene.add(directionalLight2);
 
@@ -639,9 +717,11 @@
                 
                 const tubeGeometry = new THREE.TubeGeometry(curve, 100, 1, 8, false);
                 const tubeMaterial = new THREE.MeshPhongMaterial({ 
-                    color: 0x0088ff,
+                    color: 0x74b9ff,
                     shininess: 100,
-                    specular: 0x222222
+                    specular: 0xffffff,
+                    emissive: 0x74b9ff,
+                    emissiveIntensity: 0.1
                 });
                 const tube = new THREE.Mesh(tubeGeometry, tubeMaterial);
                 moleculeGroup.add(tube);
@@ -650,7 +730,9 @@
                 atoms.filter(a => a.type.includes('base')).forEach(atom => {
                     const geometry = new THREE.BoxGeometry(3, 0.5, 1);
                     const material = new THREE.MeshPhongMaterial({ 
-                        color: residueColors[atom.element] || 0xffffff 
+                        color: residueColors[atom.element] || 0xa29bfe,
+                        shininess: 100,
+                        specular: 0xffffff
                     });
                     const base = new THREE.Mesh(geometry, material);
                     base.position.copy(atom.position);
@@ -676,9 +758,11 @@
             
             // Color by secondary structure prediction (simplified)
             const tubeMaterial = new THREE.MeshPhongMaterial({ 
-                color: 0xff4444,
+                color: 0xfd79a8,
                 shininess: 100,
-                specular: 0x222222
+                specular: 0xffffff,
+                emissive: 0xfd79a8,
+                emissiveIntensity: 0.1
             });
             
             const tube = new THREE.Mesh(tubeGeometry, tubeMaterial);
@@ -690,7 +774,9 @@
             atoms.forEach((atom, index) => {
                 const geometry = new THREE.SphereGeometry(0.5, 16, 16);
                 const material = new THREE.MeshPhongMaterial({ 
-                    color: getAtomColor(atom)
+                    color: getAtomColor(atom),
+                    shininess: 100,
+                    specular: 0xffffff
                 });
                 const sphere = new THREE.Mesh(geometry, material);
                 sphere.position.copy(atom.position);
@@ -709,7 +795,8 @@
                 
                 const geometry = new THREE.CylinderGeometry(0.2, 0.2, distance, 8);
                 const material = new THREE.MeshPhongMaterial({ 
-                    color: bond.type === 'hydrogen' ? 0x888888 : 0xcccccc
+                    color: bond.type === 'hydrogen' ? 0xdfe6e9 : 0xb2bec3,
+                    shininess: 50
                 });
                 
                 const cylinder = new THREE.Mesh(geometry, material);
@@ -741,10 +828,12 @@
             const points = atoms.map(a => a.position);
             const geometry = new THREE.ConvexGeometry(points);
             const material = new THREE.MeshPhongMaterial({
-                color: 0x0088ff,
+                color: 0xa29bfe,
                 transparent: true,
-                opacity: 0.7,
-                side: THREE.DoubleSide
+                opacity: 0.6,
+                side: THREE.DoubleSide,
+                shininess: 100,
+                specular: 0xffffff
             });
             const mesh = new THREE.Mesh(geometry, material);
             moleculeGroup.add(mesh);
@@ -754,24 +843,24 @@
             const scheme = document.getElementById('colorScheme').value;
             
             if (scheme === 'element') {
-                return elementColors[atom.element] || 0xffffff;
+                return elementColors[atom.element] || 0xb2bec3;
             } else if (scheme === 'residue') {
-                return residueColors[atom.element] || residueColors[atom.type] || 0xffffff;
+                return residueColors[atom.element] || residueColors[atom.type] || 0xb2bec3;
             } else if (scheme === 'chain') {
-                return atom.type.includes('strand1') || atom.type === 'backbone' ? 0xff0000 : 0x0000ff;
+                return atom.type.includes('strand1') || atom.type === 'backbone' ? 0xfd79a8 : 0x74b9ff;
             } else if (scheme === 'hydrophobicity') {
-                // Simplified hydrophobicity scale
+                // Simplified hydrophobicity scale with pastel colors
                 const hydrophobic = ['A', 'V', 'I', 'L', 'M', 'F', 'W'];
-                return hydrophobic.includes(atom.element) ? 0xff8800 : 0x0088ff;
+                return hydrophobic.includes(atom.element) ? 0xfdcb6e : 0x81ecec;
             } else if (scheme === 'charge') {
                 const positive = ['R', 'K', 'H'];
                 const negative = ['D', 'E'];
-                if (positive.includes(atom.element)) return 0x0000ff;
-                if (negative.includes(atom.element)) return 0xff0000;
-                return 0x888888;
+                if (positive.includes(atom.element)) return 0x74b9ff;
+                if (negative.includes(atom.element)) return 0xfd79a8;
+                return 0xdfe6e9;
             }
             
-            return 0xffffff;
+            return 0xb2bec3;
         }
 
         function getAtomRadius(element) {