Update app.py

app.py

@@ -3,7 +3,7 @@ import html
 import io
 from contextlib import redirect_stdout
 
-# Python runner with terminal output
+# --- Python runner ---
 def run_python(code):
     f = io.StringIO()
     try:
@@ -14,17 +14,18 @@ def run_python(code):
     output = f.getvalue()
     return f'<pre style="color:#00ff00; font-family: monospace;">{html.escape(output)}</pre>'
 
-# Web runner (HTML/CSS/JS)
+# --- Web runner ---
 def run_web(code):
     return f'<iframe style="width:100%; height:100%; border:none; border-radius:8px; background:#1e1e1e;" srcdoc="{code}"></iframe>'
 
-# Main runner
+# --- Main runner ---
 def run_code(code, lang):
     if lang == "Python":
         return run_python(code)
     else:
         return run_web(code)
 
+# --- Starter templates ---
 starter_python = """# Python example
 print("Hello World!")
 for i in range(5):
@@ -43,123 +44,90 @@ h1 { color:#F714C5; text-align:center; }
 </body>
 </html>"""
 
+# --- Gradio app ---
 with gr.Blocks(css="""
-/* Dark navy background with Canvas particles */
 body {
     margin:0; padding:0;
     font-family:'Poppins', sans-serif;
     overflow-x:hidden;
     color:#e0e0e0;
     background: linear-gradient(to bottom, #0a0a23, #00001a);
-    position: relative;
 }
-.gradio-container {
-    max-width:1900px;
-    margin:auto;
-    padding:20px;
-    position: relative;
-    z-index:1;
-}
-.gr-column {
-    display:flex;
-    flex-direction: column;
-    gap:5px;
-}
-/* Full width editor/output */
+.gradio-container { max-width:1200px; margin:auto; padding:20px; }
+.gr-column { display:flex; flex-direction: column; gap:0px !important; }
 #editor-container, #output-panel {
     width:100% !important;
-    max-width:100% !important;
-    min-width:100% !important;
-    height:600px;
+    margin:0 !important;
+    padding:8px !important;
+    border-radius:8px;
+    box-sizing:border-box;
 }
-.output-panel {
-    background:#1e1e1e; 
-    border-radius:8px; 
-    box-shadow:0 4px 8px rgba(0,0,0,0.5); 
-    height:600px; 
-    padding:16px; 
-    font-family: monospace; 
-    color: #00ff00; 
-    white-space: pre-wrap; 
+#output-panel {
+    height:250px !important;
+    background:#1e1e1e;
+    color:#00ff00;
     overflow:auto;
+    box-shadow:0 4px 8px rgba(0,0,0,0.5);
+    font-family: monospace;
 }
 #editor-container .CodeMirror {
-    height:600px !important;
-    min-height:600px !important;
-    max-height:600px !important;
-    padding:12px !important;
-    box-sizing:border-box;
-    border-radius:8px;
+    height:300px !important;
+    min-height:300px !important;
     font-family: monospace;
     font-size:14px;
     white-space: pre-wrap;
     overflow-wrap: break-word;
+    border-radius:8px;
+    padding:8px !important;
 }
-.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; }
+.gr-radio { color:#e0e0e0; margin-bottom:12px; }
+button, .gr-button { background-color:#F714C5 !important; color:#fff !important; border-radius:6px !important; padding:8px 16px !important; }
 footer { display:none !important; }
-header { background:#000000; padding:16px; color:#F714C5; font-size:1.6em; text-align:center; margin-top:20px; }
+header { background:#000000; padding:16px; color:#F714C5; font-size:1.4em; 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>
+    # --- Particle background ---
+    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();
+    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
-        });
+        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;
+            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>
-    """)
+    </script>""")
 
-    # Intro header
+    # --- Header ---
     gr.Markdown("""
     <h2 style="color:#F714C5; text-align:center; margin-bottom:10px;">
     𝙸'𝚖 𝚃𝚒𝚊𝚑 & 𝚝𝚑𝚒𝚜 𝚒𝚜 𝚖𝚢 𝚌𝚘𝚖𝚙𝚒𝚕𝚎𝚛, 𝚑𝚊𝚙𝚙𝚢 𝚌𝚘𝚍𝚒𝚗𝚐!
     </h2>
     """)
 
-    # Language selector
+    # --- Language selector ---
     lang_selector = gr.Radio(
         choices=["Python", "Web (HTML/CSS/JS)"],
         value="Web (HTML/CSS/JS)",
         label="Select Language"
     )
 
-    # Vertical layout: Output on top, input below
+    # --- Vertical layout: output on top ---
     with gr.Column():
         output_frame = gr.HTML(label="Output", elem_id="output-panel")
         code_input = gr.Code(
@@ -167,13 +135,13 @@ canvas#particles { position:fixed; top:0; left:0; width:100%; height:100%; z-ind
             language="html",
             label="Type your code here",
             interactive=True,
-            lines=25,
+            lines=15
         )
 
-    # Render button
+    # --- Render button ---
     render_button = gr.Button("Render")
 
-    # Footer with logo + text
+    # --- Footer ---
     gr.Markdown("""
     <header>
         <img src="https://simpleandstatic.com/favicon.ico" alt="Logo" />
@@ -181,12 +149,12 @@ canvas#particles { position:fixed; top:0; left:0; width:100%; height:100%; z-ind
     </header>
     """)
 
-    # Update starter template on language change
+    # --- Update starter template on language change ---
     def update_template(lang):
         return starter_python if lang == "Python" else starter_web
     lang_selector.change(update_template, inputs=lang_selector, outputs=code_input)
 
-    # Run code when Render is clicked
+    # --- Run code ---
     render_button.click(run_code, inputs=[code_input, lang_selector], outputs=output_frame)
 
 demo.launch()