Update app.py

app.py

@@ -1,18 +1,7 @@
 import gradio as gr
 
 css = """
-/* Modern theme with cool effects */
-:root {
-    --primary-black: #000000;
-    --primary-white: #ffffff;
-    --gray-100: #f7f7f7;
-    --gray-200: #e5e5e5;
-    --gray-300: #d4d4d4;
-    --gray-400: #a3a3a3;
-    --gray-800: #262626;
-    --gray-900: #171717;
-}
-
+/* Base styles */
 * {
     margin: 0;
     padding: 0;
@@ -20,75 +9,60 @@ css = """
 }
 
 body {
+    background-color: #ffffff;
+    color: #000000;
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-    background-color: var(--primary-black);
-    color: var(--primary-white);
 }
 
-/* Glassmorphism Header */
+/* Header styles */
 .header {
-    background: rgba(23, 23, 23, 0.8);
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    padding: 1.5rem 2rem;
-    position: sticky;
-    top: 0;
-    z-index: 1000;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.logo-container {
+    background: #ffffff;
+    border-bottom: 1px solid #e5e5e5;
+    padding: 1rem 2rem;
     display: flex;
     align-items: center;
-    gap: 1rem;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 
 .logo {
     width: 45px;
     height: 45px;
-    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
+    margin-right: 15px;
     transition: transform 0.3s ease;
 }
 
 .logo:hover {
-    transform: scale(1.1);
+    transform: scale(1.05);
 }
 
 .header-title {
-    color: var(--primary-white);
-    font-size: 28px;
+    color: #000000;
+    font-size: 24px;
     font-weight: 600;
-    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
 }
 
-/* Main container with cool gradient */
+/* Main container */
 .container {
     max-width: 1400px;
     margin: 0 auto;
     padding: 2rem;
-    background: linear-gradient(
-        135deg,
-        rgba(38, 38, 38, 0.9) 0%,
-        rgba(23, 23, 23, 0.9) 100%
-    );
+    background: #ffffff;
 }
 
-/* Modern Iframe container */
+/* Iframe container */
 .main-content {
-    background: var(--gray-900);
-    border-radius: 20px;
-    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
+    background: #ffffff;
+    border-radius: 12px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     margin: 2rem 0;
     overflow: hidden;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    transition: transform 0.3s ease;
+    border: 1px solid #e5e5e5;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
 .main-content:hover {
-    transform: translateY(-5px);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
 }
 
 .iframe-container {
@@ -96,7 +70,7 @@ body {
     width: 100%;
     height: 0;
     padding-bottom: 65%;
-    background: var(--gray-900);
+    background: #ffffff;
 }
 
 .iframe-container iframe {
@@ -106,10 +80,9 @@ body {
     width: 100%;
     height: 100%;
     border: none;
-    border-radius: 20px;
 }
 
-/* Modern Navigation Grid */
+/* Navigation grid */
 .nav-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
@@ -117,120 +90,85 @@ body {
     margin-top: 2rem;
 }
 
-/* Sleek Navigation Cards */
+/* Navigation cards */
 .nav-card {
-    background: rgba(38, 38, 38, 0.5);
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    border-radius: 15px;
+    background: #ffffff;
+    border: 1px solid #e5e5e5;
+    border-radius: 10px;
     padding: 1.5rem;
-    border: 1px solid rgba(255, 255, 255, 0.1);
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
 }
 
-.nav-card::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(
-        45deg,
-        transparent 0%,
-        rgba(255, 255, 255, 0.05) 50%,
-        transparent 100%
-    );
-    transform: translateX(-100%);
-    transition: transform 0.6s ease;
-}
-
 .nav-card:hover {
-    transform: translateY(-5px) scale(1.02);
-    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
-    background: rgba(38, 38, 38, 0.8);
-}
-
-.nav-card:hover::before {
-    transform: translateX(100%);
+    transform: translateY(-5px);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+    border-color: #000000;
 }
 
 .nav-card a {
-    color: var(--primary-white);
+    color: #000000;
     text-decoration: none;
     font-weight: 500;
     font-size: 1.1rem;
     display: flex;
     align-items: center;
     gap: 0.8rem;
-    position: relative;
 }
 
 .nav-card a::after {
     content: '→';
-    position: absolute;
-    right: 0;
     opacity: 0;
-    transform: translateX(-10px);
-    transition: all 0.3s ease;
+    margin-left: auto;
+    transition: opacity 0.3s ease;
 }
 
 .nav-card:hover a::after {
     opacity: 1;
-    transform: translateX(0);
 }
 
 /* Hide Gradio elements */
-footer, .gradio-container {
+footer {
     display: none !important;
 }
 
-/* Cool loading animation */
-@keyframes pulse {
-    0% { opacity: 0.5; }
-    50% { opacity: 1; }
-    100% { opacity: 0.5; }
-}
-
-.loading {
-    animation: pulse 1.5s infinite;
+.gradio-container {
+    margin: 0 !important;
+    padding: 0 !important;
 }
 
-/* Modern scrollbar */
+/* Custom scrollbar */
 ::-webkit-scrollbar {
     width: 8px;
-    height: 8px;
 }
 
 ::-webkit-scrollbar-track {
-    background: var(--gray-900);
+    background: #f1f1f1;
 }
 
 ::-webkit-scrollbar-thumb {
-    background: var(--gray-400);
+    background: #888;
     border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background: var(--gray-300);
+    background: #555;
 }
 """
 
 with gr.Blocks(css=css, title="Centurion Analysis Platform") as demo:
-    # Modern Header
+    # Header
     with gr.Row(elem_classes=["header"]):
-        with gr.Column(elem_classes=["logo-container"]):
-            gr.Image(
-                "https://raw.githubusercontent.com/noumanjavaid96/ai-as-an-api/refs/heads/master/image%20(39).png",
-                elem_classes=["logo"],
-                show_label=False,
-                container=False
-            )
-            gr.Markdown("Centurion Analysis", elem_classes=["header-title"])
+        gr.Image(
+            "https://raw.githubusercontent.com/noumanjavaid96/ai-as-an-api/refs/heads/master/image%20(39).png",
+            elem_classes=["logo"],
+            show_label=False,
+            container=False
+        )
+        gr.Markdown("Centurion Analysis", elem_classes=["header-title"])
     
-    # Main Content
+    # Main content
     with gr.Row(elem_classes=["container"]):
         with gr.Column(elem_classes=["main-content"]):
             gr.HTML('''
@@ -239,7 +177,7 @@ with gr.Blocks(css=css, title="Centurion Analysis Platform") as demo:
                 </div>
             ''')
         
-        # Navigation Cards
+        # Navigation cards
         with gr.Row(elem_classes=["nav-grid"]):
             gr.HTML('''
                 <div class="nav-card">
@@ -271,5 +209,7 @@ if __name__ == "__main__":
     demo.launch(
         show_error=True,
         show_api=False,
+        show_tips=False,
         height=800,
-    )
+        enable_queues=False
+    )