DNA-CASINO

Running

App Files Files Community

openfree commited on Jul 2, 2025

Commit

35f212d

verified ·

1 Parent(s): aa7324d

Update dna-slot-machine.html

Browse files

Files changed (1) hide show

dna-slot-machine.html +597 -307

dna-slot-machine.html CHANGED Viewed

@@ -3,8 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DNA Slot Machine</title>
     <style>
         * {
             margin: 0;
             padding: 0;
@@ -12,9 +14,9 @@
         }
         body {
-            background: #0a0a0a;
             color: #fff;
-            font-family: 'Courier New', monospace;
             overflow-x: hidden;
             display: flex;
             flex-direction: column;
@@ -25,7 +27,32 @@
             padding-top: 10px;
         }
         body::before {
             content: '';
             position: fixed;
             top: 0;
@@ -46,164 +73,253 @@
                     rgba(0,0,0,0.05) 1px,
                     transparent 1px,
                     transparent 2px
-                ),
-                repeating-linear-gradient(
-                    45deg,
-                    transparent 0px,
-                    rgba(255,255,255,0.03) 1px,
-                    transparent 2px,
-                    transparent 3px
-                ),
-                repeating-linear-gradient(
-                    -45deg,
-                    transparent 0px,
-                    rgba(0,0,0,0.03) 1px,
-                    transparent 2px,
-                    transparent 3px
                 );
-            background-size: 2px 2px, 2px 2px, 3px 3px, 3px 3px;
             pointer-events: none;
             z-index: 1;
             opacity: 0.8;
             animation: staticNoise 0.1s steps(8) infinite;
         }
-        body::after {
-            content: '';
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background:
-                radial-gradient(circle at 17% 23%, rgba(255,255,255,0.1) 0px, transparent 1px),
-                radial-gradient(circle at 67% 71%, rgba(0,0,0,0.08) 0px, transparent 1px),
-                radial-gradient(circle at 41% 57%, rgba(255,255,255,0.06) 0px, transparent 1px),
-                radial-gradient(circle at 89% 13%, rgba(0,0,0,0.07) 0px, transparent 1px),
-                radial-gradient(circle at 23% 89%, rgba(255,255,255,0.05) 0px, transparent 1px);
-            background-size: 3px 3px, 2px 2px, 4px 4px, 2px 2px, 3px 3px;
-            pointer-events: none;
-            z-index: 1;
-            animation: staticNoise 0.15s steps(10) infinite reverse;
-        }
         @keyframes staticNoise {
             0%, 100% { transform: translate(0, 0); }
-            10% { transform: translate(-1px, -1px); }
-            20% { transform: translate(1px, 0px); }
-            30% { transform: translate(0px, 1px); }
-            40% { transform: translate(-1px, 1px); }
-            50% { transform: translate(1px, -1px); }
-            60% { transform: translate(-1px, 0px); }
-            70% { transform: translate(0px, -1px); }
-            80% { transform: translate(1px, 1px); }
-            90% { transform: translate(-1px, -1px); }
         }
         .machine-container {
-            background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
-            border-radius: 20px;
-            padding: 15px;
-            padding-right: 100px;
-            box-shadow: 0 20px 40px rgba(0,0,0,0.5),
-                        inset 0 2px 10px rgba(255,255,255,0.1);
             width: 95vw;
             max-width: 1400px;
             position: relative;
             z-index: 2;
         }
         .title {
             text-align: center;
-            font-size: 2rem;
-            margin-bottom: 15px;
-            font-weight: bold;
-            letter-spacing: 0.1em;
         }
         .title a {
             text-decoration: none;
-            background: linear-gradient(45deg, #00ff88, #00ffff, #ff00ff);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            text-shadow: 0 0 30px rgba(0,255,136,0.5);
-            transition: all 0.3s ease;
         }
-        .title a:hover {
-            text-shadow: 0 0 40px rgba(0,255,136,0.7), 0 0 60px rgba(0,255,255,0.5);
         }
         .cell-type-selector {
             display: flex;
             align-items: center;
             justify-content: center;
             gap: 20px;
-            margin-bottom: 15px;
-        }
-        .cell-type-label {
-            font-size: 1.2rem;
-            color: #ccc;
         }
         .radio-group {
             display: flex;
-            gap: 20px;
         }
-        .radio-label {
             display: flex;
             align-items: center;
-            gap: 8px;
             cursor: pointer;
             font-size: 1.1rem;
             color: #fff;
-            transition: color 0.3s ease;
         }
-        .radio-label:hover {
-            color: #00ff88;
         }
-        .radio-label input[type="radio"] {
-            width: 18px;
-            height: 18px;
-            accent-color: #00ff88;
-            cursor: pointer;
         }
         .reels-container {
             background: #000;
-            border: 3px solid #333;
-            border-radius: 10px;
-            padding: 15px;
             max-width: 100%;
             position: relative;
-            box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
             overflow: visible;
         }
         .reels-wrapper {
             display: flex;
-            gap: 1px;
             min-width: fit-content;
-            padding: 3px 0;
             justify-content: center;
             flex-wrap: wrap;
             max-width: 1200px;
             margin: 0 auto;
         }
         .reel {
-            width: 18px;
-            height: 40px;
             background: #ffffff;
-            border: 1px solid #ddd;
-            border-radius: 2px;
             overflow: hidden;
             position: relative;
-            box-shadow: inset 0 0 3px rgba(0,0,0,0.1);
         }
         .reel-strip {
@@ -213,305 +329,385 @@
         }
         .nucleotide {
-            height: 40px;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 0.9rem;
             font-weight: bold;
             background: #ffffff;
         }
-        .nucleotide.A { color: #00ff00; }
-        .nucleotide.T { color: #ff0000; }
-        .nucleotide.C { color: #0000ff; }
-        .nucleotide.G { color: #ffa500; }
-        .controls {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 15px;
-            margin-top: 20px;
         }
-        .spin-button {
-            background: #4a4a4a;
-            border: none;
-            padding: 20px 60px;
             font-size: 1.5rem;
             font-weight: bold;
             border-radius: 50px;
             cursor: pointer;
             text-transform: uppercase;
-            letter-spacing: 2px;
-            box-shadow: 0 10px 20px rgba(0,0,0,0.5);
             transition: all 0.3s ease;
             color: #fff;
-            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
             position: relative;
             overflow: hidden;
         }
         .spin-button::before {
             content: '';
             position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-image:
-                radial-gradient(circle at 20% 30%, #00ff00 0px, transparent 2px),
-                radial-gradient(circle at 80% 70%, #ff0000 0px, transparent 2px),
-                radial-gradient(circle at 50% 50%, #0000ff 0px, transparent 2px),
-                radial-gradient(circle at 30% 80%, #ffa500 0px, transparent 2px),
-                radial-gradient(circle at 70% 20%, #00ff00 0px, transparent 2px),
-                radial-gradient(circle at 10% 60%, #ff0000 0px, transparent 2px),
-                radial-gradient(circle at 90% 40%, #0000ff 0px, transparent 2px),
-                radial-gradient(circle at 40% 10%, #ffa500 0px, transparent 2px);
-            background-size: 20px 20px, 25px 25px, 30px 30px, 15px 15px,
-                            18px 18px, 22px 22px, 28px 28px, 24px 24px;
-            opacity: 0.25;
-            animation: nucleotideNoise 0.8s steps(6) infinite;
-        }
-        .spin-button::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-image:
-                radial-gradient(circle at 60% 40%, #00ff00 0px, transparent 1px),
-                radial-gradient(circle at 25% 75%, #ff0000 0px, transparent 1px),
-                radial-gradient(circle at 85% 15%, #0000ff 0px, transparent 1px),
-                radial-gradient(circle at 15% 25%, #ffa500 0px, transparent 1px);
-            background-size: 10px 10px, 12px 12px, 14px 14px, 16px 16px;
-            opacity: 0.2;
-            animation: nucleotideNoise 1.2s steps(8) infinite reverse;
-        }
-        @keyframes nucleotideNoise {
-            0% { transform: translate(0, 0) scale(1); }
-            16% { transform: translate(-2px, 1px) scale(1.02); }
-            33% { transform: translate(1px, -2px) scale(0.98); }
-            50% { transform: translate(-1px, 2px) scale(1.01); }
-            66% { transform: translate(2px, -1px) scale(0.99); }
-            83% { transform: translate(-2px, -2px) scale(1.02); }
-            100% { transform: translate(1px, 1px) scale(1); }
-        }
-        .spin-button span {
-            position: relative;
-            z-index: 2;
         }
-        .spin-button:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 15px 30px rgba(0,0,0,0.6);
-            background: #5a5a5a;
         }
-        .spin-button:hover::before {
-            opacity: 0.35;
-            animation-duration: 0.4s;
         }
         .spin-button:active {
-            transform: translateY(0);
         }
         .spin-button:disabled {
-            background: #444;
             cursor: not-allowed;
             box-shadow: none;
         }
         .sequence-display {
-            background: #0a0a0a;
-            border: 2px solid #333;
-            border-radius: 10px;
-            padding: 20px 25px 12px 25px;
-            font-family: 'Courier New', monospace;
             font-size: 0.9rem;
-            letter-spacing: 1px;
             width: 100%;
             max-width: 1200px;
-            text-align: left;
-            word-wrap: break-word;
-            line-height: 1.4;
             position: relative;
-            margin: 0 auto;
         }
         .sequence-display::before {
-            content: 'SYNTHETIC REGULATORY ELEMENT';
             position: absolute;
-            top: -10px;
             left: 50%;
             transform: translateX(-50%);
-            background: #0a0a0a;
-            padding: 0 15px;
-            font-size: 0.7rem;
-            color: #00ff88;
-            letter-spacing: 2px;
-            white-space: nowrap;
         }
-        .info {
-            text-align: center;
-            margin-top: 15px;
-            color: #888;
-            font-size: 0.9rem;
         }
-        .lab-credit {
             text-align: center;
-            margin-top: 10px;
-            font-size: 1.1rem;
         }
-        .lab-credit a {
-            color: #00ff88;
-            text-decoration: none;
-            font-weight: bold;
-            letter-spacing: 1px;
-            transition: all 0.3s ease;
-            padding: 5px 15px;
-            border: 1px solid transparent;
-            border-radius: 20px;
         }
-        .lab-credit a:hover {
             color: #fff;
-            border-color: #00ff88;
-            box-shadow: 0 0 10px rgba(0,255,136,0.5);
-            text-shadow: 0 0 5px rgba(0,255,136,0.5);
         }
-        @keyframes pulse {
-            0% { opacity: 0.5; }
-            50% { opacity: 1; }
-            100% { opacity: 0.5; }
         }
-        .spinning {
-            animation: pulse 0.5s infinite;
         }
-        .winning-flash {
-            animation: winFlash 1s ease-out;
         }
-        @keyframes winFlash {
-            0%, 100% { background-color: transparent; }
-            50% { background-color: rgba(0,255,136,0.2); }
         }
-        .lever-container {
-            position: absolute;
-            right: -70px;
-            top: 50%;
-            transform: translateY(-50%);
-            z-index: 3;
-            width: 60px;
-            height: 200px;
         }
-        .lever {
-            width: 100%;
-            height: 100%;
-            position: relative;
-            cursor: pointer;
         }
-        .lever-mount {
-            position: absolute;
-            top: 90px;
-            left: -10px;
-            width: 40px;
-            height: 60px;
-            background: linear-gradient(180deg, #555, #333);
-            border-radius: 5px 0 0 5px;
-            box-shadow:
-                0 3px 10px rgba(0,0,0,0.3),
-                inset 0 1px 2px rgba(255,255,255,0.1);
         }
-        .lever-pivot {
-            position: absolute;
-            bottom: 30px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 30px;
-            height: 8px;
-            background: #888;
-            border-radius: 4px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.3);
         }
-        .lever-arm {
-            position: absolute;
-            top: 40px;
-            left: 5px;
-            width: 10px;
-            height: 80px;
-            background: linear-gradient(180deg, #d0d0d0, #a0a0a0);
-            border-radius: 5px;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
-            transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
         }
-        .lever-ball {
-            position: absolute;
-            top: -30px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 60px;
-            height: 60px;
-            background: radial-gradient(circle at 35% 35%, #ff8888, #ff4444, #cc0000);
-            border-radius: 50%;
-            box-shadow:
-                0 5px 15px rgba(0,0,0,0.4),
-                inset -5px -5px 10px rgba(0,0,0,0.3),
-                inset 3px 3px 5px rgba(255,255,255,0.5);
         }
-        .lever.pulled .lever-arm {
-            transform: translateY(80px);
-            height: 10px;
         }
-        /* Continuous spinning animation for loading */
         @keyframes continuousSpin {
             from { transform: translateY(0); }
-            to { transform: translateY(-160px); }
         }
         .reel-strip.loading {
             animation: continuousSpin 1s linear infinite;
         }
     </style>
 </head>
 <body>
     <div class="machine-container">
-        <h1 class="title"><a href="https://github.com/pinellolab/DNA-Diffusion" target="_blank" rel="noopener noreferrer">DNA-DIFFUSION</a></h1>
         <div class="cell-type-selector">
-            <label class="cell-type-label">Cell Type-Specific Generation:</label>
             <div class="radio-group">
-                <label class="radio-label">
                     <input type="radio" name="cellType" value="K562" checked>
-                    <span>K562</span>
                 </label>
-                <label class="radio-label">
                     <input type="radio" name="cellType" value="GM12878">
-                    <span>GM12878</span>
                 </label>
-                <label class="radio-label">
                     <input type="radio" name="cellType" value="HepG2">
-                    <span>HepG2</span>
                 </label>
             </div>
         </div>
@@ -520,9 +716,7 @@
             <div class="reels-wrapper" id="reelsWrapper"></div>
             <div class="lever-container">
                 <div class="lever" id="lever">
-                    <div class="lever-mount">
-                        <div class="lever-pivot"></div>
-                    </div>
                     <div class="lever-arm">
                         <div class="lever-ball"></div>
                     </div>
@@ -531,19 +725,32 @@
         </div>
         <div class="controls">
-            <button class="spin-button" id="spinButton"><span>GENERATE</span></button>
             <div class="sequence-display" id="sequenceDisplay">
-                Press GENERATE to create sequence
             </div>
         </div>
         <div class="info">
-            200bp Regulatory Elements · Cell Type-Specific · Synthetic Biology
         </div>
         <div class="lab-credit">
             <a href="https://pinellolab.org" target="_blank" rel="noopener noreferrer">
-                Pinello Lab
             </a>
         </div>
     </div>
@@ -597,12 +804,18 @@
                 // Set initial position to show a random nucleotide
                 const randomIndex = Math.floor(Math.random() * 4);
-                const initialOffset = -randomIndex * 40;
                 reel.strip.style.transform = `translateY(${initialOffset}px)`;
-                reel.currentPosition = randomIndex * 40;
             }
         }
         function startContinuousSpinning() {
             reels.forEach((reel, index) => {
                 // Add continuous spinning animation
@@ -613,10 +826,64 @@
                 const delay = (index % 10) * 0.1;
                 reel.strip.style.animationDelay = `${delay}s`;
             });
         }
-        function stopAndShowSequence(sequence) {
             TARGET_SEQUENCE = sequence;
             reels.forEach((reel, index) => {
                 // Remove continuous spinning
@@ -625,7 +892,7 @@
                 // Calculate target position
                 const targetNucleotide = TARGET_SEQUENCE[index];
                 const targetIndex = NUCLEOTIDES.indexOf(targetNucleotide);
-                const finalPosition = targetIndex * 40;
                 // Set up the final positioning animation
                 setTimeout(() => {
@@ -643,9 +910,15 @@
                 const lever = document.getElementById('lever');
                 container.classList.remove('spinning');
-                container.classList.add('winning-flash');
-                display.innerHTML = `<strong>Generated Sequence:</strong><br>${TARGET_SEQUENCE}`;
                 button.disabled = false;
                 isSpinning = false;
@@ -653,8 +926,8 @@
                 lever.classList.remove('pulled');
                 setTimeout(() => {
-                    container.classList.remove('winning-flash');
-                }, 1000);
             }, 1500);
         }
@@ -666,12 +939,16 @@
             const display = document.getElementById('sequenceDisplay');
             const container = document.getElementById('reelsContainer');
             const lever = document.getElementById('lever');
             // Pull the lever
             lever.classList.add('pulled');
             button.disabled = true;
-            display.textContent = 'Generating cell type-specific regulatory element...';
             container.classList.add('spinning');
             // Start continuous spinning immediately
@@ -703,8 +980,8 @@
         // Listen for messages from parent window
         window.addEventListener('message', (event) => {
             if (event.data.type === 'sequence_generated') {
-                // Stop spinning and show the actual sequence
-                stopAndShowSequence(event.data.sequence);
             } else if (event.data.type === 'generation_error') {
                 // Stop spinning and show error
                 reels.forEach(reel => {
@@ -717,10 +994,11 @@
                 const lever = document.getElementById('lever');
                 container.classList.remove('spinning');
-                display.innerHTML = '<strong style="color: #F44336;">Error:</strong> ' + event.data.error;
                 button.disabled = false;
                 isSpinning = false;
                 lever.classList.remove('pulled');
             }
         });
@@ -731,6 +1009,18 @@
                 startGeneration();
             }
         });
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>🧬 DNA CASINO - Protein Synthesis Slot Machine</title>
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Bebas+Neue&display=swap');
         * {
             margin: 0;
             padding: 0;
         }
         body {
+            background: #000;
             color: #fff;
+            font-family: 'Orbitron', monospace;
             overflow-x: hidden;
             display: flex;
             flex-direction: column;
             padding-top: 10px;
         }
+        /* Casino carpet pattern background */
         body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background:
+                radial-gradient(circle at 20% 30%, #ff0066 0px, transparent 100px),
+                radial-gradient(circle at 80% 70%, #00ffff 0px, transparent 100px),
+                radial-gradient(circle at 50% 50%, #ffff00 0px, transparent 150px),
+                radial-gradient(circle at 30% 80%, #ff00ff 0px, transparent 80px),
+                radial-gradient(circle at 70% 20%, #00ff00 0px, transparent 90px);
+            opacity: 0.1;
+            z-index: 0;
+            animation: casinoLights 10s ease-in-out infinite;
+        }
+        @keyframes casinoLights {
+            0%, 100% { filter: hue-rotate(0deg) brightness(1); }
+            50% { filter: hue-rotate(180deg) brightness(1.5); }
+        }
+        /* Static TV noise overlay */
+        body::after {
             content: '';
             position: fixed;
             top: 0;
                     rgba(0,0,0,0.05) 1px,
                     transparent 1px,
                     transparent 2px
                 );
+            background-size: 2px 2px, 2px 2px;
             pointer-events: none;
             z-index: 1;
             opacity: 0.8;
             animation: staticNoise 0.1s steps(8) infinite;
         }
         @keyframes staticNoise {
             0%, 100% { transform: translate(0, 0); }
+            50% { transform: translate(-1px, -1px); }
         }
+        /* Main casino cabinet */
         .machine-container {
+            background: linear-gradient(145deg, #1a0000, #330000);
+            border: 5px solid #ffd700;
+            border-radius: 30px;
+            padding: 20px;
+            padding-right: 120px;
+            box-shadow:
+                0 0 50px rgba(255, 215, 0, 0.5),
+                0 20px 40px rgba(0,0,0,0.8),
+                inset 0 0 30px rgba(255, 215, 0, 0.2);
             width: 95vw;
             max-width: 1400px;
             position: relative;
             z-index: 2;
         }
+        /* Blinking lights around the machine */
+        .machine-container::before {
+            content: '';
+            position: absolute;
+            top: -10px;
+            left: -10px;
+            right: -10px;
+            bottom: -10px;
+            border-radius: 35px;
+            background: conic-gradient(
+                from 0deg,
+                #ff0000, #ff7700, #ffff00, #00ff00,
+                #0000ff, #ff00ff, #ff0000
+            );
+            z-index: -1;
+            animation: rotateGradient 3s linear infinite;
+            filter: blur(10px);
+            opacity: 0.7;
+        }
+        @keyframes rotateGradient {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        /* Neon title */
         .title {
             text-align: center;
+            font-family: 'Bebas Neue', cursive;
+            font-size: 4rem;
+            margin-bottom: 10px;
+            position: relative;
+            text-transform: uppercase;
+            letter-spacing: 0.2em;
         }
         .title a {
             text-decoration: none;
+            color: #fff;
+            text-shadow:
+                0 0 10px #ff00ff,
+                0 0 20px #ff00ff,
+                0 0 30px #ff00ff,
+                0 0 40px #ff00ff,
+                0 0 70px #ff00ff,
+                0 0 80px #ff00ff,
+                0 0 100px #ff00ff,
+                0 0 150px #ff00ff;
+            animation: neonFlicker 1.5s infinite alternate;
         }
+        @keyframes neonFlicker {
+            0%, 100% { opacity: 1; }
+            33% { opacity: 0.8; }
+            66% { opacity: 0.9; }
         }
+        .subtitle {
+            text-align: center;
+            font-size: 1.5rem;
+            color: #ffd700;
+            margin-bottom: 20px;
+            text-shadow: 0 0 10px #ffd700;
+            animation: pulse 2s ease-in-out infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+        }
+        /* Jackpot counter */
+        .jackpot-display {
+            background: #000;
+            border: 3px solid #ffd700;
+            border-radius: 10px;
+            padding: 10px 20px;
+            margin: 10px auto;
+            text-align: center;
+            max-width: 400px;
+            box-shadow:
+                inset 0 0 20px rgba(255, 215, 0, 0.3),
+                0 0 20px rgba(255, 215, 0, 0.5);
+        }
+        .jackpot-label {
+            font-size: 0.9rem;
+            color: #ffd700;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+        }
+        .jackpot-value {
+            font-size: 2rem;
+            color: #00ff00;
+            font-weight: bold;
+            text-shadow: 0 0 10px #00ff00;
+            font-family: 'Orbitron', monospace;
+        }
+        /* Cell type selector with casino chips style */
         .cell-type-selector {
             display: flex;
             align-items: center;
             justify-content: center;
             gap: 20px;
+            margin-bottom: 20px;
         }
         .radio-group {
             display: flex;
+            gap: 30px;
         }
+        .chip-label {
+            position: relative;
             display: flex;
             align-items: center;
+            justify-content: center;
+            width: 100px;
+            height: 100px;
             cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .chip-label input[type="radio"] {
+            position: absolute;
+            opacity: 0;
+        }
+        .chip {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            background: radial-gradient(circle at 30% 30%, #ff4444, #cc0000);
+            box-shadow:
+                0 5px 15px rgba(0,0,0,0.5),
+                inset 0 0 20px rgba(0,0,0,0.3),
+                inset -3px -3px 10px rgba(255,255,255,0.2);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
             font-size: 1.1rem;
             color: #fff;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+            border: 8px dashed #fff;
+            animation: chipRotate 20s linear infinite;
         }
+        @keyframes chipRotate {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
         }
+        .chip-label:hover .chip {
+            transform: scale(1.1);
+            box-shadow:
+                0 10px 30px rgba(255,0,0,0.5),
+                inset 0 0 30px rgba(255,255,255,0.3);
+        }
+        .chip-label input[type="radio"]:checked + .chip {
+            background: radial-gradient(circle at 30% 30%, #44ff44, #00cc00);
+            box-shadow:
+                0 0 30px rgba(0,255,0,0.7),
+                inset 0 0 20px rgba(0,0,0,0.3);
+            animation: chipRotate 5s linear infinite, winPulse 1s ease-in-out infinite;
         }
+        @keyframes winPulse {
+            0%, 100% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+        }
+        /* Slot machine reels */
         .reels-container {
             background: #000;
+            border: 5px solid #ffd700;
+            border-radius: 15px;
+            padding: 20px;
             max-width: 100%;
             position: relative;
+            box-shadow:
+                inset 0 0 50px rgba(0,0,0,0.8),
+                0 0 30px rgba(255, 215, 0, 0.5);
             overflow: visible;
+            margin: 20px 0;
         }
         .reels-wrapper {
             display: flex;
+            gap: 2px;
             min-width: fit-content;
+            padding: 5px 0;
             justify-content: center;
             flex-wrap: wrap;
             max-width: 1200px;
             margin: 0 auto;
+            background: linear-gradient(90deg,
+                transparent 0%,
+                rgba(255, 215, 0, 0.1) 50%,
+                transparent 100%);
         }
         .reel {
+            width: 20px;
+            height: 50px;
             background: #ffffff;
+            border: 2px solid #ffd700;
+            border-radius: 3px;
             overflow: hidden;
             position: relative;
+            box-shadow:
+                inset 0 0 10px rgba(0,0,0,0.3),
+                0 0 5px rgba(255, 215, 0, 0.5);
         }
         .reel-strip {
         }
         .nucleotide {
+            height: 50px;
             display: flex;
             align-items: center;
             justify-content: center;
+            font-size: 1.2rem;
             font-weight: bold;
             background: #ffffff;
+            text-shadow: 0 0 5px currentColor;
         }
+        .nucleotide.A { color: #00ff00; background: #001100; }
+        .nucleotide.T { color: #ff0000; background: #110000; }
+        .nucleotide.C { color: #00ffff; background: #001111; }
+        .nucleotide.G { color: #ffff00; background: #111100; }
+        /* Casino style lever */
+        .lever-container {
+            position: absolute;
+            right: -90px;
+            top: 50%;
+            transform: translateY(-50%);
+            z-index: 3;
+            width: 80px;
+            height: 250px;
         }
+        .lever {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            cursor: pointer;
+        }
+        .lever-mount {
+            position: absolute;
+            top: 100px;
+            left: -15px;
+            width: 60px;
+            height: 80px;
+            background: linear-gradient(180deg, #ffd700, #b8860b);
+            border-radius: 10px 0 0 10px;
+            box-shadow:
+                0 5px 20px rgba(0,0,0,0.5),
+                inset 0 2px 5px rgba(255,255,255,0.5);
+        }
+        .lever-arm {
+            position: absolute;
+            top: 30px;
+            left: 10px;
+            width: 15px;
+            height: 100px;
+            background: linear-gradient(180deg, #c0c0c0, #808080);
+            border-radius: 8px;
+            box-shadow: 0 3px 10px rgba(0,0,0,0.5);
+            transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+        }
+        .lever-ball {
+            position: absolute;
+            top: -40px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 80px;
+            height: 80px;
+            background: radial-gradient(circle at 35% 35%, #ff4444, #cc0000, #800000);
+            border-radius: 50%;
+            box-shadow:
+                0 10px 30px rgba(0,0,0,0.6),
+                inset -10px -10px 20px rgba(0,0,0,0.5),
+                inset 5px 5px 10px rgba(255,255,255,0.6);
+            position: relative;
+            overflow: hidden;
+        }
+        .lever-ball::before {
+            content: '777';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
             font-size: 1.5rem;
             font-weight: bold;
+            color: #ffd700;
+            text-shadow: 0 2px 4px rgba(0,0,0,0.8);
+        }
+        .lever.pulled .lever-arm {
+            transform: translateY(100px);
+            height: 20px;
+        }
+        /* Generate button */
+        .spin-button {
+            background: linear-gradient(145deg, #ff0000, #cc0000);
+            border: 3px solid #ffd700;
+            padding: 25px 80px;
+            font-size: 2rem;
+            font-weight: bold;
             border-radius: 50px;
             cursor: pointer;
             text-transform: uppercase;
+            letter-spacing: 3px;
+            box-shadow:
+                0 10px 30px rgba(0,0,0,0.7),
+                0 0 30px rgba(255, 0, 0, 0.5),
+                inset 0 2px 10px rgba(255,255,255,0.3);
             transition: all 0.3s ease;
             color: #fff;
+            text-shadow: 0 3px 6px rgba(0,0,0,0.5);
             position: relative;
             overflow: hidden;
+            font-family: 'Bebas Neue', cursive;
         }
         .spin-button::before {
             content: '';
             position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: linear-gradient(45deg,
+                transparent 30%,
+                rgba(255,255,255,0.3) 50%,
+                transparent 70%);
+            animation: buttonShine 3s infinite;
         }
+        @keyframes buttonShine {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
         }
+        .spin-button:hover {
+            transform: translateY(-3px) scale(1.05);
+            box-shadow:
+                0 15px 40px rgba(0,0,0,0.8),
+                0 0 50px rgba(255, 0, 0, 0.7);
         }
         .spin-button:active {
+            transform: translateY(0) scale(0.98);
         }
         .spin-button:disabled {
+            background: linear-gradient(145deg, #444, #222);
             cursor: not-allowed;
             box-shadow: none;
+            animation: none;
         }
+        /* Sequence display */
         .sequence-display {
+            background: #000;
+            border: 3px solid #00ff00;
+            border-radius: 15px;
+            padding: 25px;
+            font-family: 'Orbitron', monospace;
             font-size: 0.9rem;
+            letter-spacing: 2px;
             width: 100%;
             max-width: 1200px;
+            margin: 20px auto;
+            box-shadow:
+                0 0 30px rgba(0, 255, 0, 0.5),
+                inset 0 0 20px rgba(0, 255, 0, 0.1);
             position: relative;
+            min-height: 100px;
         }
         .sequence-display::before {
+            content: '🧬 SYNTHETIC REGULATORY ELEMENT';
             position: absolute;
+            top: -15px;
             left: 50%;
             transform: translateX(-50%);
+            background: #000;
+            padding: 0 20px;
+            font-size: 0.8rem;
+            color: #00ff00;
+            letter-spacing: 3px;
+            text-shadow: 0 0 10px #00ff00;
         }
+        /* Protein analysis panel */
+        .protein-panel {
+            background: linear-gradient(145deg, #1a0033, #000033);
+            border: 3px solid #00ffff;
+            border-radius: 15px;
+            padding: 25px;
+            margin: 20px auto;
+            max-width: 1200px;
+            box-shadow:
+                0 0 30px rgba(0, 255, 255, 0.5),
+                inset 0 0 20px rgba(0, 255, 255, 0.1);
+            display: none;
+            animation: fadeIn 0.5s ease-in;
         }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .protein-panel.active {
+            display: block;
+        }
+        .protein-header {
+            font-size: 1.5rem;
+            color: #00ffff;
+            margin-bottom: 15px;
             text-align: center;
+            text-transform: uppercase;
+            letter-spacing: 3px;
+            text-shadow: 0 0 15px #00ffff;
         }
+        .protein-sequence {
+            background: #000;
+            border: 1px solid #00ffff;
+            border-radius: 10px;
+            padding: 15px;
+            margin-bottom: 20px;
+            font-family: 'Courier New', monospace;
+            font-size: 0.85rem;
+            word-break: break-all;
+            color: #00ff00;
+            max-height: 150px;
+            overflow-y: auto;
         }
+        .protein-analysis {
+            background: rgba(0, 255, 255, 0.05);
+            border: 1px solid rgba(0, 255, 255, 0.3);
+            border-radius: 10px;
+            padding: 20px;
             color: #fff;
+            line-height: 1.8;
+            font-size: 0.95rem;
         }
+        .protein-analysis h3 {
+            color: #00ffff;
+            margin-bottom: 10px;
+            text-shadow: 0 0 10px #00ffff;
         }
+        .protein-stats {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 15px;
+            margin-bottom: 20px;
         }
+        .stat-card {
+            background: rgba(255, 215, 0, 0.1);
+            border: 1px solid #ffd700;
+            border-radius: 10px;
+            padding: 15px;
+            text-align: center;
         }
+        .stat-label {
+            font-size: 0.8rem;
+            color: #ffd700;
+            text-transform: uppercase;
+            letter-spacing: 1px;
         }
+        .stat-value {
+            font-size: 1.5rem;
+            color: #fff;
+            font-weight: bold;
+            margin-top: 5px;
         }
+        /* Info footer */
+        .info {
+            text-align: center;
+            margin-top: 20px;
+            color: #ffd700;
+            font-size: 1rem;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            text-shadow: 0 0 10px #ffd700;
         }
+        .lab-credit {
+            text-align: center;
+            margin-top: 15px;
+            font-size: 1.3rem;
         }
+        .lab-credit a {
+            color: #00ff00;
+            text-decoration: none;
+            font-weight: bold;
+            letter-spacing: 2px;
+            padding: 10px 30px;
+            border: 2px solid #00ff00;
+            border-radius: 30px;
+            display: inline-block;
+            transition: all 0.3s ease;
+            text-shadow: 0 0 10px #00ff00;
         }
+        .lab-credit a:hover {
+            background: #00ff00;
+            color: #000;
+            box-shadow: 0 0 30px #00ff00;
+            transform: scale(1.1);
         }
+        /* Winning animation */
+        .jackpot-win {
+            animation: jackpotFlash 2s ease-out;
         }
+        @keyframes jackpotFlash {
+            0%, 100% { background-color: transparent; }
+            10%, 30%, 50%, 70%, 90% { background-color: rgba(255, 215, 0, 0.3); }
+            20%, 40%, 60%, 80% { background-color: transparent; }
         }
+        /* Loading animation */
         @keyframes continuousSpin {
             from { transform: translateY(0); }
+            to { transform: translateY(-200px); }
         }
         .reel-strip.loading {
             animation: continuousSpin 1s linear infinite;
         }
+        /* Scrollbar styling */
+        ::-webkit-scrollbar {
+            width: 10px;
+        }
+        ::-webkit-scrollbar-track {
+            background: rgba(0, 0, 0, 0.5);
+            border-radius: 5px;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #00ffff;
+            border-radius: 5px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #00cccc;
+        }
     </style>
 </head>
 <body>
     <div class="machine-container">
+        <h1 class="title"><a href="https://github.com/pinellolab/DNA-Diffusion" target="_blank" rel="noopener noreferrer">🎰 DNA CASINO 🧬</a></h1>
+        <div class="subtitle">★ PROTEIN SYNTHESIS JACKPOT ★</div>
+        <div class="jackpot-display">
+            <div class="jackpot-label">Current Sequence Length</div>
+            <div class="jackpot-value" id="sequenceCounter">0 BP</div>
+        </div>
         <div class="cell-type-selector">
             <div class="radio-group">
+                <label class="chip-label">
                     <input type="radio" name="cellType" value="K562" checked>
+                    <div class="chip">K562</div>
                 </label>
+                <label class="chip-label">
                     <input type="radio" name="cellType" value="GM12878">
+                    <div class="chip">GM12878</div>
                 </label>
+                <label class="chip-label">
                     <input type="radio" name="cellType" value="HepG2">
+                    <div class="chip">HepG2</div>
                 </label>
             </div>
         </div>
             <div class="reels-wrapper" id="reelsWrapper"></div>
             <div class="lever-container">
                 <div class="lever" id="lever">
+                    <div class="lever-mount"></div>
                     <div class="lever-arm">
                         <div class="lever-ball"></div>
                     </div>
         </div>
         <div class="controls">
+            <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! 🎯
+            </div>
+            <div class="protein-panel" id="proteinPanel">
+                <div class="protein-header">🔬 Protein Analysis Report 🔬</div>
+                <div class="protein-stats" id="proteinStats"></div>
+                <div class="protein-sequence" id="proteinSequence"></div>
+                <div class="protein-analysis" id="proteinAnalysis">
+                    <h3>Analyzing protein structure...</h3>
+                </div>
             </div>
         </div>
         <div class="info">
+            🎰 200BP REGULATORY ELEMENTS • CELL-TYPE SPECIFIC • SYNTHETIC BIOLOGY JACKPOT 🎰
         </div>
         <div class="lab-credit">
             <a href="https://pinellolab.org" target="_blank" rel="noopener noreferrer">
+                💎 PINELLO LAB 💎
             </a>
         </div>
     </div>
                 // Set initial position to show a random nucleotide
                 const randomIndex = Math.floor(Math.random() * 4);
+                const initialOffset = -randomIndex * 50;
                 reel.strip.style.transform = `translateY(${initialOffset}px)`;
+                reel.currentPosition = randomIndex * 50;
             }
         }
+        function updateSequenceCounter(length) {
+            const counter = document.getElementById('sequenceCounter');
+            counter.textContent = `${length} BP`;
+            counter.style.animation = 'pulse 0.5s ease-out';
+        }
         function startContinuousSpinning() {
             reels.forEach((reel, index) => {
                 // Add continuous spinning animation
                 const delay = (index % 10) * 0.1;
                 reel.strip.style.animationDelay = `${delay}s`;
             });
+            // Update counter animation
+            let count = 0;
+            const counterInterval = setInterval(() => {
+                if (!isSpinning) {
+                    clearInterval(counterInterval);
+                    return;
+                }
+                count = (count + 7) % 201;
+                updateSequenceCounter(count);
+            }, 100);
         }
+        function displayProteinAnalysis(metadata) {
+            const panel = document.getElementById('proteinPanel');
+            const statsDiv = document.getElementById('proteinStats');
+            const sequenceDiv = document.getElementById('proteinSequence');
+            const analysisDiv = document.getElementById('proteinAnalysis');
+            // Show panel
+            panel.classList.add('active');
+            // Display stats
+            statsDiv.innerHTML = `
+                <div class="stat-card">
+                    <div class="stat-label">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-value">${TARGET_SEQUENCE.length} bp</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-label">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-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}`;
+            }
+            // Display analysis
+            if (metadata.protein_analysis) {
+                analysisDiv.innerHTML = `<h3>🧬 Structural & Functional Analysis</h3>${metadata.protein_analysis}`;
+            } else {
+                analysisDiv.innerHTML = '<h3>⏳ Protein analysis pending...</h3>';
+            }
+        }
+        function stopAndShowSequence(sequence, metadata = {}) {
             TARGET_SEQUENCE = sequence;
+            updateSequenceCounter(sequence.length);
             reels.forEach((reel, index) => {
                 // Remove continuous spinning
                 // Calculate target position
                 const targetNucleotide = TARGET_SEQUENCE[index];
                 const targetIndex = NUCLEOTIDES.indexOf(targetNucleotide);
+                const finalPosition = targetIndex * 50;
                 // Set up the final positioning animation
                 setTimeout(() => {
                 const lever = document.getElementById('lever');
                 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>`;
+                // Display protein analysis if available
+                if (metadata) {
+                    displayProteinAnalysis(metadata);
+                }
                 button.disabled = false;
                 isSpinning = false;
                 lever.classList.remove('pulled');
                 setTimeout(() => {
+                    container.classList.remove('jackpot-win');
+                }, 2000);
             }, 1500);
         }
             const display = document.getElementById('sequenceDisplay');
             const container = document.getElementById('reelsContainer');
             const lever = document.getElementById('lever');
+            const proteinPanel = document.getElementById('proteinPanel');
+            // Hide protein panel from previous spin
+            proteinPanel.classList.remove('active');
             // Pull the lever
             lever.classList.add('pulled');
             button.disabled = true;
+            display.innerHTML = '🎲 <strong>SPINNING THE GENETIC WHEEL OF FORTUNE...</strong> 🎲';
             container.classList.add('spinning');
             // Start continuous spinning immediately
         // Listen for messages from parent window
         window.addEventListener('message', (event) => {
             if (event.data.type === 'sequence_generated') {
+                // Stop spinning and show the actual sequence with metadata
+                stopAndShowSequence(event.data.sequence, event.data.metadata);
             } else if (event.data.type === 'generation_error') {
                 // Stop spinning and show error
                 reels.forEach(reel => {
                 const lever = document.getElementById('lever');
                 container.classList.remove('spinning');
+                display.innerHTML = '<strong style="color: #ff0000;">❌ BUST! ❌</strong><br>' + event.data.error;
                 button.disabled = false;
                 isSpinning = false;
                 lever.classList.remove('pulled');
+                updateSequenceCounter(0);
             }
         });
                 startGeneration();
             }
         });
+        // Add some casino ambiance
+        setInterval(() => {
+            if (!isSpinning && Math.random() > 0.7) {
+                const chips = document.querySelectorAll('.chip');
+                const randomChip = chips[Math.floor(Math.random() * chips.length)];
+                randomChip.style.animation = 'none';
+                setTimeout(() => {
+                    randomChip.style.animation = 'chipRotate 20s linear infinite';
+                }, 10);
+            }
+        }, 5000);
     </script>
 </body>
 </html>