Update app.py

app.py

@@ -25,7 +25,6 @@ def run_code(code, lang):
     else:
         return run_web(code)
 
-# Starter templates
 starter_python = """# Python example
 print("Hello World!")
 for i in range(5):
@@ -44,50 +43,37 @@ h1 { color:#F714C5; text-align:center; }
 </body>
 </html>"""
 
-with gr.Blocks(css=f"""
-/* Dark night sky background with subtle particles */
-body {{
-    margin:0;
-    padding:0;
+with gr.Blocks(css="""
+/* Dark navy background with Canvas particles */
+body {
+    margin:0; padding:0;
     font-family:'Poppins', sans-serif;
-    background: linear-gradient(to bottom, #0a0a23, #00001a);
     overflow-x:hidden;
     color:#e0e0e0;
+    background: linear-gradient(to bottom, #0a0a23, #00001a);
     position: relative;
-}}
-/* subtle particle animation */
-body::before {{
-    content:'';
-    position:absolute;
-    top:0; left:0;
-    width:100%; height:100%;
-    background-image: radial-gradient(white 0.5px, transparent 0.5px);
-    background-size: 20px 20px;
-    opacity: 0.15;
-    pointer-events:none;
-    animation: moveStars 180s linear infinite;
-    z-index:0;
-}}
-@keyframes moveStars {{
-    from {{ background-position: 0 0; }}
-    to {{ background-position: 1000px 1000px; }}
-}}
-
-.gradio-container {{
+}
+
+.gradio-container {
     max-width:1900px;
-    margin:auto; 
+    margin:auto;
     padding:20px;
-    position:relative;
-    z-index:1; /* above particle layer */
-}}
+    position: relative;
+    z-index:1;
+}
 
-.gr-row {{ display:flex; gap:20px; margin-top:20px; }}
+.gr-row {
+    display:flex;
+    gap:20px;
+    margin-top:20px;
+}
 
-/* Editor 80% width, output 20% */
-#editor-container {{ flex:0.8; }}
-#output-panel {{ flex:0.2; }}
+/* Equal width editor/output */
+#editor-container, #output-panel {
+    flex:0.5;
+}
 
-.output-panel {{
+.output-panel {
     background:#1e1e1e; 
     border-radius:8px; 
     box-shadow:0 4px 8px rgba(0,0,0,0.5); 
@@ -97,24 +83,67 @@ body::before {{
     color: #00ff00; 
     white-space: pre-wrap; 
     overflow:auto;
-}}
+}
 
-#editor-container .CodeMirror {{
+#editor-container .CodeMirror {
     height:600px;
     border-radius:8px;
     font-family: monospace;
     font-size:14px;
     white-space: pre-wrap;
     overflow-wrap: break-word;
-}}
-
-.gr-radio {{ color:#e0e0e0; margin-bottom:16px; }}
-button, .gr-button {{ background-color:#F714C5 !important; color:#fff !important; border-radius:6px !important; padding:10px 20px !important; }}
-footer {{ display:none !important; }}
-header {{ background:#000000; padding:16px; color:#F714C5; font-size:1.6em; text-align:center; margin-top:20px; }}
-header img {{ vertical-align:middle; height:20px; margin-right:8px; }}
+}
+
+.gr-radio { color:#e0e0e0; margin-bottom:16px; }
+button, .gr-button { background-color:#F714C5 !important; color:#fff !important; border-radius:6px !important; padding:10px 20px !important; }
+footer { display:none !important; }
+header { background:#000000; padding:16px; color:#F714C5; font-size:1.6em; text-align:center; margin-top:20px; }
+header img { vertical-align:middle; height:20px; margin-right:8px; }
+canvas#particles { position:fixed; top:0; left:0; width:100%; height:100%; z-index:0; pointer-events:none; }
 """) as demo:
 
+    # Canvas for particles
+    gr.HTML("""
+    <canvas id="particles"></canvas>
+    <script>
+    const canvas = document.getElementById('particles');
+    const ctx = canvas.getContext('2d');
+    let stars = [];
+    function resize() {
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+    }
+    window.addEventListener('resize', resize);
+    resize();
+    for(let i=0;i<150;i++){
+        stars.push({
+            x: Math.random()*canvas.width,
+            y: Math.random()*canvas.height,
+            r: Math.random()*1.5,
+            dx: (Math.random()-0.5)*0.3,
+            dy: (Math.random()-0.5)*0.3
+        });
+    }
+    function animate(){
+        ctx.clearRect(0,0,canvas.width,canvas.height);
+        for(let s of stars){
+            ctx.beginPath();
+            ctx.arc(s.x,s.y,s.r,0,Math.PI*2);
+            ctx.fillStyle='white';
+            ctx.fill();
+            s.x += s.dx;
+            s.y += s.dy;
+            if(s.x<0) s.x=canvas.width;
+            if(s.x>canvas.width) s.x=0;
+            if(s.y<0) s.y=canvas.height;
+            if(s.y>canvas.height) s.y=0;
+        }
+        requestAnimationFrame(animate);
+    }
+    animate();
+    </script>
+    """)
+
     # Intro header
     gr.Markdown("""
     <h2 style="color:#F714C5; text-align:center; margin-bottom:10px;">
@@ -122,7 +151,7 @@ header img {{ vertical-align:middle; height:20px; margin-right:8px; }}
     </h2>
     """)
 
-    # Language selector at the top
+    # Language selector
     lang_selector = gr.Radio(
         choices=["Python", "Web (HTML/CSS/JS)"],
         value="Web (HTML/CSS/JS)",
@@ -160,4 +189,3 @@ header img {{ vertical-align:middle; height:20px; margin-right:8px; }}
     render_button.click(run_code, inputs=[code_input, lang_selector], outputs=output_frame)
 
 demo.launch()
-