Update app.py

app.py

@@ -291,15 +291,87 @@ css = """
     font-weight: bold;
     color: #000;
 }
-"""
+:root {
+  --panel-size: 300px;
+  --border-width: 4px;
+  --glow-blur: 15px;
+}
 
+body {
+  background-color: #000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  margin: 0;
+}
 
-with gr.Blocks(theme='Nymbo/Nymbo_Theme', css=css) as app:
+.neon-panel {
+  width: var(--panel-size);
+  height: var(--panel-size);
+  background-color: #000;
+  position: relative;
+  border-radius: 20px;
+  overflow: hidden;
+}
 
+.neon-panel::before,
+.neon-panel::after {
+  content: '';
+  position: absolute;
+  left: -2px;
+  top: -2px;
+  background: linear-gradient(
+    124deg,
+    #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840,
+    #1ddde8, #2b1de8, #dd00f3, #dd00f3
+  );
+  background-size: 300% 300%;
+  width: calc(100% + 4px);
+  height: calc(100% + 4px);
+  z-index: -1;
+  animation: moveGradient 10s ease infinite;
+}
 
-    
+.neon-panel::after {
+  filter: blur(var(--glow-blur));
+}
+
+.neon-panel-content {
+  position: absolute;
+  top: var(--border-width);
+  left: var(--border-width);
+  right: var(--border-width);
+  bottom: var(--border-width);
+  background-color: #000;
+  border-radius: 16px;
+  z-index: 1;
+}
+
+@keyframes moveGradient {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+@media (max-width: 768px) {
+  :root {
+    --panel-size: 250px;
+    --glow-blur: 10px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .neon-panel::before,
+  .neon-panel::after {
+    animation: none;
+  }
+}
+"""
+
+
+with gr.Blocks(theme='Nymbo/Nymbo_Theme', css=css) as app:
     gr.HTML(title_html) # title html 
-    
     with gr.Column(elem_id="app-container"):
         with gr.Row():
             with gr.Column(elem_id="prompt-container"):