Update app.py

app.py

@@ -29,334 +29,140 @@ st.markdown("""
 # Enhanced CSS for a more beautiful Google DeepMind-inspired styling with green background
 st.markdown("""
 <style>
-    /* Global font and color scheme */
-    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-    
-    html, body, [class*="css"] {
-        font-family: 'Inter', sans-serif;
-    }
-    
-    /* Background and main container styling - Changed to green gradient */
-    .main {
-        background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
-        padding: 0;
-    }
-    
-    .main .block-container {
-        padding-top: 2rem;
-        padding-bottom: 3rem;
-        max-width: 1300px;
-    }
-    
-    /* Header styling */
-    h1 {
-        color: #0b5027;
-        font-weight: 700 !important;
-        margin-bottom: 1rem !important;
-        letter-spacing: -0.5px;
-        font-size: 2.8rem !important;
+    /* Base styles */
+    html, body, .stApp, .main {
+        background-color: #000000 !important;
+        color: #ffffff !important;
     }
-    
-    h2 {
-        font-weight: 600 !important;
-        color: #1b5e20;
-        letter-spacing: -0.3px;
-        font-size: 1.8rem !important;
-        margin-top: 1.5rem !important;
+
+    /* Typography */
+    h1, h2, h3, h4, h5, h6 {
+        color: #00ff00 !important;
+        font-family: 'Courier New', monospace !important;
     }
-    
-    h3 {
-        font-weight: 600 !important;
-        color: #2e7d32;
-        letter-spacing: -0.2px;
-        font-size: 1.4rem !important;
+
+    p, div, span {
+        color: #cccccc !important;
     }
-    
-    /* Card-like sections */
+
+    /* Cards and containers */
     .card {
-        background-color: white;
-        border-radius: 16px;
-        padding: 2rem;
-        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
-        margin-bottom: 2rem;
-        border: 1px solid rgba(240, 240, 240, 0.9);
-        transition: all 0.3s ease;
-    }
-    
-    .card:hover {
-        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
-        transform: translateY(-3px);
-    }
-    
-    /* Button styling - Changed to green gradient */
-    .stButton > button {
-        background: linear-gradient(90deg, #2e7d32, #1b5e20);
-        color: white;
-        border: none;
-        border-radius: 8px;
-        padding: 0.8rem 1.5rem;
-        font-weight: 500;
-        transition: all 0.3s;
-        width: 100%;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-        font-size: 1rem;
-        box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
-    }
-    
-    .stButton > button:hover {
-        background: linear-gradient(90deg, #388e3c, #2e7d32);
-        box-shadow: 0 6px 16px rgba(46, 125, 50, 0.4);
-        transform: translateY(-2px);
-    }
-    
-    .stButton > button:active {
-        transform: translateY(1px);
-    }
-    
-    /* Input field styling */
-    .stTextInput input {
-        border-radius: 8px;
-        border: 2px solid #E0E0E0;
-        padding: 1rem;
-        font-size: 1rem;
-        transition: all 0.3s;
-    }
-    
-    .stTextInput input:focus {
-        border-color: #2e7d32;
-        box-shadow: 0 0 0 4px rgba(46, 125, 50, 0.2);
-    }
-    
-    .stSelectbox div[data-baseweb="select"] div {
-        border-radius: 8px;
-        border: 2px solid #E0E0E0;
-        padding: 0.25rem;
-    }
-    
-    .stSelectbox div[data-baseweb="select"] div:focus {
-        border-color: #2e7d32;
-        box-shadow: 0 0 0 4px rgba(46, 125, 50, 0.2);
-    }
-    
-    .stSlider div[data-baseweb="slider"] {
-        border-radius: 8px;
+        background-color: #0a0a0a !important;
+        border: 1px solid #00ff00 !important;
+        border-radius: 4px !important;
+        box-shadow: 0 0 15px rgba(0, 255, 0, 0.2) !important;
     }
-    
+
+    /* Analysis results */
     .analysis-result {
-        background-color: #F8F9FA;
-        border-radius: 12px;
-        padding: 2rem;
-        border-left: 6px solid #2e7d32;
-        line-height: 1.7;
-        color: #000000 !important;  /* Add this line */
-    }
-    /* Expand/collapse sections */
-    .streamlit-expanderHeader {
-        font-weight: 500;
-        color: #5f6368;
-        background-color: #f8f9fa;
-        border-radius: 8px;
-        padding: 0.8rem !important;
-        border: 1px solid #e8eaed;
+        background-color: #121212 !important;
+        border-left: 4px solid #00ff00 !important;
+        color: #ffffff !important;
+        font-family: 'Courier New', monospace !important;
+        padding: 1.5rem !important;
     }
-    
-    .streamlit-expanderHeader:hover {
-        background-color: #f1f3f4;
+
+    /* Input fields */
+    .stTextInput input {
+        background-color: #121212 !important;
+        color: #00ff00 !important;
+        border: 1px solid #00ff00 !important;
+        border-radius: 0 !important;
     }
-    
-    /* Spinner/progress styling */
-    .stSpinner > div {
-        border-color: #2e7d32 transparent transparent !important;
-        border-width: 3px !important;
+
+    /* Buttons */
+    .stButton > button {
+        background: linear-gradient(45deg, #00ff00, #003300) !important;
+        color: #000000 !important;
+        border: none !important;
+        border-radius: 0 !important;
+        font-family: 'Courier New', monospace !important;
+        font-weight: bold !important;
+        transition: all 0.3s ease !important;
     }
-    
-    /* Footer styling */
-    footer {
-        border-top: 1px solid #F0F0F0;
-        padding-top: 1.5rem;
-        color: #5f6368;
-        font-size: 0.9rem;
+
+    .stButton > button:hover {
+        box-shadow: 0 0 20px #00ff00 !important;
+        transform: scale(1.05) !important;
     }
-    
-    /* Logo and branding - Changed to green gradient */
-    .logo-text {
-        font-weight: 700;
-        background: linear-gradient(90deg, #2e7d32, #81c784);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        font-size: 2.8rem;
-        letter-spacing: -1px;
-        text-shadow: 0px 4px 8px rgba(46, 125, 50, 0.2);
+
+    /* Source items */
+    .source-item {
+        border-bottom: 1px solid #333333 !important;
+        padding: 1rem 0 !important;
     }
-    
-    /* Sections */
-    .section-header {
-        font-size: 1.3rem;
-        font-weight: 600;
-        margin-top: 2rem;
-        margin-bottom: 1.2rem;
-        color: #1b5e20;
-        padding-bottom: 0.5rem;
-        border-bottom: 2px solid #c8e6c9;
+
+    .source-title {
+        color: #00ff00 !important;
+        font-family: 'Courier New', monospace !important;
     }
-    
-    /* Source links */
+
+    /* Links */
     a {
-        color: #2e7d32;
-        text-decoration: none;
-        transition: all 0.2s;
-        font-weight: 500;
+        color: #00ff00 !important;
+        text-decoration: underline !important;
     }
-    
+
     a:hover {
-        color: #1b5e20;
-        text-decoration: underline;
+        color: #99ff99 !important;
     }
-    
-    /* Tabs for analysis results */
-    .stTabs [data-baseweb="tab-list"] {
-        gap: 2px;
-        border-radius: 12px;
-        background-color: #f8f9fa;
-        padding: 5px;
-    }
-    
-    .stTabs [data-baseweb="tab"] {
-        background-color: transparent;
-        border-radius: 8px;
-        color: #5f6368;
-        padding: 10px 20px;
-        font-weight: 500;
-        transition: all 0.2s;
+
+    /* Status indicators */
+    .status-badge {
+        background-color: #002200 !important;
+        color: #00ff00 !important;
+        border: 1px solid #00ff00 !important;
     }
-    
+
+    /* Tabs */
     .stTabs [aria-selected="true"] {
-        background-color: white !important;
-        color: #2e7d32 !important;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    }
-    
-    .stTabs [data-baseweb="tab"]:hover:not([aria-selected="true"]) {
-        background-color: rgba(0, 0, 0, 0.05);
-    }
-    
-    /* Info boxes */
-    .info-box {
-        background-color: #e8f5e9;
-        border-radius: 12px;
-        padding: 1.2rem;
-        border-left: 6px solid #2e7d32;
-        margin-bottom: 1.5rem;
-        box-shadow: 0 4px 12px rgba(46, 125, 50, 0.15);
-    }
-    
-    /* Progress animation */
-    @keyframes pulse {
-        0% { opacity: 0.6; }
-        50% { opacity: 1; }
-        100% { opacity: 0.6; }
-    }
-    
-    .pulsing {
-        animation: pulse 1.5s infinite ease-in-out;
-    }
-    
-    /* Source item styling */
-    .source-item {
-        margin-bottom: 1.5rem;
-        padding-bottom: 1.5rem;
-        border-bottom: 1px solid #f0f0f0;
-        transition: all 0.3s;
-    }
-    
-    .source-item:hover {
-        background-color: #f8f9fa;
-        padding: 1rem;
-        margin: 0 -1rem 1.5rem -1rem;
-        border-radius: 8px;
-    }
-    
-    .source-title {
-        margin-bottom: 0.3rem;
-        font-weight: 600;
-        color: #202124;
-        font-size: 1.1rem;
-    }
-    
-    .source-meta {
-        color: #5f6368;
-        margin-bottom: 0.8rem;
-        font-size: 0.9rem;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-    }
-    
-    .source-meta-dot {
-        display: inline-block;
-        width: 4px;
-        height: 4px;
-        background-color: #5f6368;
-        border-radius: 50%;
-    }
-    
-    .read-link {
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        font-weight: 500;
-        font-size: 0.9rem;
+        background-color: #121212 !important;
+        color: #00ff00 !important;
+        border-bottom: 2px solid #00ff00 !important;
     }
-    
-    /* Status indicators */
-    .status-badge {
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        padding: 0.4rem 0.8rem;
-        border-radius: 16px;
-        font-size: 0.85rem;
-        font-weight: 500;
+
+    /* Logo styling */
+    .logo-text {
+        background: linear-gradient(90deg, #00ff00, #99ff99) !important;
+        -webkit-background-clip: text !important;
+        -webkit-text-fill-color: transparent !important;
+        text-shadow: 0 0 10px rgba(0, 255, 0, 0.5) !important;
     }
-    
-    .status-searching {
-        background-color: #e8f5e9;
-        color: #2e7d32;
+
+    /* Icons */
+    .float-icon svg {
+        filter: drop-shadow(0 0 5px #00ff00);
     }
-    
-    .status-analyzing {
-        background-color: #e6f4ea;
-        color: #1b5e20;
+
+    /* Scrollbar styling */
+    ::-webkit-scrollbar {
+        width: 8px;
     }
-    
-    /* Header icon animation */
-    @keyframes float {
-        0% { transform: translateY(0px); }
-        50% { transform: translateY(-10px); }
-        100% { transform: translateY(0px); }
+
+    ::-webkit-scrollbar-track {
+        background: #000000;
     }
-    
-    .float-icon {
-        animation: float 3s ease-in-out infinite;
+
+    ::-webkit-scrollbar-thumb {
+        background: #00ff00;
+        border-radius: 4px;
     }
-    
-    /* Tips section */
-    .tip-item {
-        display: flex;
-        align-items: flex-start;
-        gap: 12px;
-        margin-bottom: 1rem;
+
+    /* Dropdown menus */
+    .stSelectbox div[data-baseweb="select"] div {
+        background-color: #121212 !important;
+        color: #00ff00 !important;
+        border: 1px solid #00ff00 !important;
+        border-radius: 0 !important;
     }
-    
-    .tip-icon {
-        color: #2e7d32;
-        font-size: 1.2rem;
-        margin-top: 0.2rem;
+
+    /* Sliders */
+    .stSlider .thumb {
+        background-color: #00ff00 !important;
     }
-    
-    .tip-text {
-        flex: 1;
+
+    .stSlider .track {
+        background-color: #003300 !important;
     }
 </style>
 """, unsafe_allow_html=True)