Update dna-slot-machine.html

dna-slot-machine.html

@@ -203,7 +203,92 @@
             font-family: 'Orbitron', monospace;
         }
 
-        /* Cell type selector with casino chips style */
+        /* Language selector */
+        .language-selector {
+            display: flex;
+            justify-content: center;
+            margin: 20px 0;
+        }
+
+        .language-toggle {
+            position: relative;
+            display: inline-block;
+            width: 120px;
+            height: 40px;
+            cursor: pointer;
+        }
+
+        .language-toggle input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        .toggle-slider {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(145deg, #444, #222);
+            border: 2px solid #ffd700;
+            border-radius: 40px;
+            transition: all 0.4s;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 10px;
+            box-shadow: 
+                0 5px 15px rgba(0,0,0,0.5),
+                inset 0 2px 5px rgba(255,255,255,0.1);
+        }
+
+        .lang-label {
+            font-size: 0.9rem;
+            font-weight: bold;
+            color: #888;
+            transition: all 0.3s;
+            z-index: 2;
+        }
+
+        .lang-label[data-lang="en"] {
+            margin-left: 5px;
+        }
+
+        .lang-label[data-lang="ko"] {
+            margin-right: 5px;
+        }
+
+        .toggle-slider::after {
+            content: '';
+            position: absolute;
+            height: 32px;
+            width: 50px;
+            left: 4px;
+            bottom: 4px;
+            background: linear-gradient(145deg, #00ff00, #00cc00);
+            border-radius: 32px;
+            transition: all 0.4s;
+            box-shadow: 
+                0 2px 10px rgba(0,255,0,0.5),
+                inset 0 -2px 5px rgba(0,0,0,0.3);
+        }
+
+        .language-toggle input:checked + .toggle-slider::after {
+            transform: translateX(62px);
+            background: linear-gradient(145deg, #ff4444, #cc0000);
+            box-shadow: 
+                0 2px 10px rgba(255,0,0,0.5),
+                inset 0 -2px 5px rgba(0,0,0,0.3);
+        }
+
+        .language-toggle input:checked + .toggle-slider .lang-label[data-lang="ko"] {
+            color: #fff;
+        }
+
+        .language-toggle input:not(:checked) + .toggle-slider .lang-label[data-lang="en"] {
+            color: #fff;
+        }
         .cell-type-selector {
             display: flex;
             align-items: center;
@@ -498,6 +583,10 @@
                 inset 0 0 20px rgba(0, 255, 0, 0.1);
             position: relative;
             min-height: 100px;
+            word-wrap: break-word;
+            word-break: break-all;
+            white-space: pre-wrap;
+            overflow-wrap: break-word;
         }
 
         .sequence-display::before {
@@ -556,10 +645,13 @@
             margin-bottom: 20px;
             font-family: 'Courier New', monospace;
             font-size: 0.85rem;
+            word-wrap: break-word;
             word-break: break-all;
             color: #00ff00;
             max-height: 150px;
             overflow-y: auto;
+            white-space: pre-wrap;
+            line-height: 1.4;
         }
 
         .protein-analysis {
@@ -727,6 +819,16 @@
             </div>
         </div>
         
+        <div class="language-selector">
+            <label class="language-toggle">
+                <input type="checkbox" id="languageToggle">
+                <span class="toggle-slider">
+                    <span class="lang-label" data-lang="en">EN</span>
+                    <span class="lang-label" data-lang="ko">한글</span>
+                </span>
+            </label>
+        </div>
+        
         <div class="reels-container" id="reelsContainer">
             <div class="reels-wrapper" id="reelsWrapper"></div>
             <div class="lever-container">
@@ -743,11 +845,11 @@
             <button class="spin-button" id="spinButton"><span>🎲 SPIN TO WIN 🎲</span></button>
             
             <div class="sequence-display" id="sequenceDisplay">
-                🎯 Pull the lever or press SPIN to generate your winning sequence! 🎯
+                🎯 <span id="initialMessage">Pull the lever or press SPIN to generate your winning sequence!</span> 🎯
             </div>
             
             <div class="protein-panel" id="proteinPanel">
-                <div class="protein-header">🔬 Protein Analysis Report 🔬</div>
+                <div class="protein-header" id="proteinHeader">🔬 Protein Analysis Report 🔬</div>
                 
                 <div class="protein-stats" id="proteinStats"></div>
                 
@@ -767,7 +869,7 @@
             <a href="https://pinellolab.org" target="_blank" rel="noopener noreferrer">
                 🧬 Based by PINELLO LAB 🧬
             </a>
-            <a href="#" target="_blank" rel="noopener noreferrer">
+            <a href="https://discord.gg/openfreeai" target="_blank" rel="noopener noreferrer">
                 ⚡ Powered by VIDraft ⚡
             </a>
         </div>
@@ -859,6 +961,7 @@
 
         function displayProteinAnalysis(metadata) {
             const panel = document.getElementById('proteinPanel');
+            const header = document.getElementById('proteinHeader');
             const statsDiv = document.getElementById('proteinStats');
             const sequenceDiv = document.getElementById('proteinSequence');
             const analysisDiv = document.getElementById('proteinAnalysis');
@@ -866,36 +969,42 @@
             // Show panel
             panel.classList.add('active');
             
+            // Check language
+            const isKorean = document.getElementById('languageToggle').checked;
+            
+            // Update header
+            header.textContent = isKorean ? '🔬 단백질 분석 보고서 🔬' : '🔬 Protein Analysis Report 🔬';
+            
             // Display stats
             statsDiv.innerHTML = `
                 <div class="stat-card">
-                    <div class="stat-label">Cell Type</div>
+                    <div class="stat-label">${isKorean ? '세포 타입' : 'Cell Type'}</div>
                     <div class="stat-value">${metadata.cell_type || 'Unknown'}</div>
                 </div>
                 <div class="stat-card">
-                    <div class="stat-label">DNA Length</div>
+                    <div class="stat-label">${isKorean ? 'DNA 길이' : 'DNA Length'}</div>
                     <div class="stat-value">${TARGET_SEQUENCE.length} bp</div>
                 </div>
                 <div class="stat-card">
-                    <div class="stat-label">Protein Length</div>
+                    <div class="stat-label">${isKorean ? '단백질 길이' : 'Protein Length'}</div>
                     <div class="stat-value">${metadata.protein_length || 0} aa</div>
                 </div>
                 <div class="stat-card">
-                    <div class="stat-label">Generation Time</div>
+                    <div class="stat-label">${isKorean ? '생성 시간' : 'Generation Time'}</div>
                     <div class="stat-value">${(metadata.generation_time || 0).toFixed(1)}s</div>
                 </div>
             `;
             
             // Display protein sequence
             if (metadata.protein_sequence) {
-                sequenceDiv.innerHTML = `<strong>Protein Sequence:</strong><br>${metadata.protein_sequence}`;
+                sequenceDiv.innerHTML = `<strong>${isKorean ? '단백질 시퀀스:' : 'Protein Sequence:'}</strong><br>${metadata.protein_sequence}`;
             }
             
             // Display analysis
             if (metadata.protein_analysis) {
-                analysisDiv.innerHTML = `<h3>🧬 Structural & Functional Analysis</h3>${metadata.protein_analysis}`;
+                analysisDiv.innerHTML = `<h3>🧬 ${isKorean ? '구조 및 기능 분석' : 'Structural & Functional Analysis'}</h3>${metadata.protein_analysis}`;
             } else {
-                analysisDiv.innerHTML = '<h3>⏳ Protein analysis pending...</h3>';
+                analysisDiv.innerHTML = `<h3>⏳ ${isKorean ? '단백질 분석 대기 중...' : 'Protein analysis pending...'}</h3>`;
             }
         }
 
@@ -930,7 +1039,9 @@
                 container.classList.remove('spinning');
                 container.classList.add('jackpot-win');
                 
-                display.innerHTML = `<strong>🎊 JACKPOT SEQUENCE 🎊</strong><br><span style="color: #00ff00; font-family: 'Courier New', monospace;">${TARGET_SEQUENCE}</span>`;
+                const isKorean = document.getElementById('languageToggle').checked;
+                
+                display.innerHTML = `<strong>🎊 ${isKorean ? '잭팟 시퀀스' : 'JACKPOT SEQUENCE'} 🎊</strong><br><span style="color: #00ff00; font-family: 'Courier New', monospace; word-wrap: break-word; word-break: break-all; display: block; margin-top: 10px;">${TARGET_SEQUENCE}</span>`;
                 
                 // Display protein analysis if available
                 if (metadata) {
@@ -965,26 +1076,44 @@
             // Pull the lever
             lever.classList.add('pulled');
             
+            // Check language
+            const isKorean = document.getElementById('languageToggle').checked;
+            
             button.disabled = true;
-            display.innerHTML = '🎲 <strong>SPINNING THE GENETIC WHEEL OF FORTUNE...</strong> 🎲';
+            display.innerHTML = isKorean ? 
+                '🎲 <strong>유전자 룰렛을 돌리는 중...</strong> 🎲' : 
+                '🎲 <strong>SPINNING THE GENETIC WHEEL OF FORTUNE...</strong> 🎲';
             container.classList.add('spinning');
             
             // Start continuous spinning immediately
             startContinuousSpinning();
             
-            // Get selected cell type
+            // Get selected cell type and language
             const cellType = document.querySelector('input[name="cellType"]:checked').value;
+            const language = document.getElementById('languageToggle').checked ? 'ko' : 'en';
             
             // Send request to parent window
             window.parent.postMessage({
                 type: 'generate_request',
-                cellType: cellType
+                cellType: cellType,
+                language: language
             }, '*');
         }
 
         // Initialize
         initializeReels();
         
+        // Language toggle event listener
+        document.getElementById('languageToggle').addEventListener('change', function() {
+            const isKorean = this.checked;
+            const initialMessage = document.getElementById('initialMessage');
+            if (initialMessage && !isSpinning) {
+                initialMessage.textContent = isKorean ? 
+                    '레버를 당기거나 SPIN을 눌러 당첨 시퀀스를 생성하세요!' : 
+                    'Pull the lever or press SPIN to generate your winning sequence!';
+            }
+        });
+        
         // Event listeners
         document.getElementById('spinButton').addEventListener('click', startGeneration);
         
@@ -1010,9 +1139,10 @@
                 const display = document.getElementById('sequenceDisplay');
                 const button = document.getElementById('spinButton');
                 const lever = document.getElementById('lever');
+                const isKorean = document.getElementById('languageToggle').checked;
                 
                 container.classList.remove('spinning');
-                display.innerHTML = '<strong style="color: #ff0000;">❌ BUST! ❌</strong><br>' + event.data.error;
+                display.innerHTML = `<strong style="color: #ff0000;">❌ ${isKorean ? '실패!' : 'BUST!'} ❌</strong><br>` + event.data.error;
                 button.disabled = false;
                 isSpinning = false;
                 lever.classList.remove('pulled');