Update app.py

app.py

@@ -1,33 +1,33 @@
+# -*- coding: utf-8 -*-
 import base64, mimetypes
 from html import escape
 from pathlib import Path
 import streamlit as st
 
-# ========= PATHS (subfolder-safe) =========
-BASE_DIR = Path(__file__).parent          # -> Landing_Page/
-ASSETS   = BASE_DIR / "assets"            # -> Landing_Page/assets/
+# ========= PATHS =========
+BASE_DIR = Path(__file__).parent
+ASSETS   = BASE_DIR / "assets"
 
 # ========= CONTROLS =========
-HERO_LOGO_SIZE     = 172    # px
-TOP_SPACER         = 140    # px
-GRID_GAP           = 48     # px
+HERO_LOGO_SIZE     = 172
+TOP_SPACER         = 140
+GRID_GAP           = 48
 BUTTON_TEXT        = "Open App"
 OPEN_IN_NEW_TAB    = False
 
-# BRAND (use a distinct color per suite to differentiate pages)
+# BRAND (Logging suite)
 COMPANY_NAME = "Smart Thinking - Logging"
 TAGLINE      = "We Deliver Smart AI-Based Solutions For O&G Industry"
 SUITE_NAME   = "ST_LOG SUITE"
-ACCENT       = "#0E7490"      # teal for Logging
-ACCENT_END   = "#14B8A6"      # gradient end
-ACCENT_SOFT  = "rgba(14,116,144,0.15)"
+ACCENT       = "#0E7490"     # start
+ACCENT_END   = "#14B8A6"     # end
 
 # ========= APPS =========
 APP1 = {
     "title": "ST_Log_GR",
     "url":   "https://smart-thinking-gr.hf.space/",
     "blurb": "Real-time gamma-ray log prediction.",
-    "icon":  ASSETS / "app1_icon.png",    # tiny glyph (optional)
+    "icon":  ASSETS / "app1_icon.png",    # optional tiny glyph (24–32px)
 }
 APP2 = {
     "title": "ST_Log_Sonic (Ts)",
@@ -44,10 +44,13 @@ APP3 = {
 
 LOGO_PATH = ASSETS / "logo.png"
 
-# ========= PAGE META =========
+# ========= PAGE META (set first) =========
 page_icon = str(LOGO_PATH) if LOGO_PATH.exists() else "🧭"
 st.set_page_config(page_title=f"{COMPANY_NAME} — Apps", page_icon=page_icon, layout="wide")
 
+# Quick debug line so you can confirm the script rendered
+st.caption("✅ Page loaded. If you ever see a blank page, this line helps diagnose execution.")
+
 # ========= HELPERS =========
 def data_uri(path: Path) -> str | None:
     if not path or not path.exists():
@@ -63,12 +66,12 @@ def img_tag(path: Path, alt: str, cls: str = "") -> str:
     if uri:
         cls_attr = f' class="{cls}"' if cls else ""
         return f'<img{cls_attr} src="{uri}" alt="{escape(alt)}" />'
-    # graceful fallback box if missing
-    return f'<div class="{cls}" style="display:flex;align-items:center;justify-content:center;color:#50545c;background:linear-gradient(180deg,#f6f7fb,#eceff4);">{escape(alt)}</div>'
+    # simple fallback if missing
+    return f'<div class="{cls}" style="display:flex;align-items:center;justify-content:center;color:#50545c;background:#eef2f7;border-radius:8px;">{escape(alt)}</div>'
 
 def card_header_badge(icon_path: Path | None, suite_label: str) -> str:
     icon_uri = data_uri(icon_path) if icon_path else None
-    icon_html = f"<img src='{icon_uri}' alt='icon' style='width:22px;height:22px;'>" if icon_uri else ""
+    icon_html = f"<img src='{icon_uri}' alt='icon' style='width:22px;height:22px;display:block;'>" if icon_uri else ""
     return f"""
     <div class="badge">
       <div class="badge-left">{icon_html}</div>
@@ -76,65 +79,67 @@ def card_header_badge(icon_path: Path | None, suite_label: str) -> str:
     </div>
     """
 
+# ========= BACKGROUND (simple & safe) =========
+# No images, no complex CSS: just a soft gradient + very faint SVG grid pattern
 def inject_subtle_bg() -> None:
-    """
-    Soft brand gradient + faint SVG grid pattern.
-    Comfortable, fast, and doesn't fight content.
-    """
-    pattern_svg = """
-    data:image/svg+xml;utf8,
-    <svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'>
-      <defs>
-        <pattern id='p' width='32' height='32' patternUnits='userSpaceOnUse'>
-          <path d='M0 16 H32 M16 0 V32' stroke='rgba(15,23,42,0.06)' stroke-width='1'/>
-        </pattern>
-      </defs>
-      <rect width='100%' height='100%' fill='url(#p)'/>
-    </svg>
-    """.strip()
+    pattern_svg = (
+        "data:image/svg+xml;utf8,"
+        "<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'>"
+        "<defs><pattern id='p' width='32' height='32' patternUnits='userSpaceOnUse'>"
+        "<path d='M0 16 H32 M16 0 V32' stroke='rgba(15,23,42,0.06)' stroke-width='1'/>"
+        "</pattern></defs>"
+        "<rect width='100%' height='100%' fill='url(#p)'/>"
+        "</svg>"
+    )
 
     st.markdown(f"""
     <style>
+      /* Base gradient */
       .stApp {{
-        position: relative;
+        position: relative !important;
         background:
-          radial-gradient(1200px 600px at 50% 0%,
-            rgba(20,184,166,0.14) 0%,
-            rgba(14,116,144,0.10) 35%,
-            rgba(255,255,255,0.92) 70%,
+          radial-gradient(900px 420px at 50% 0%,
+            rgba(20,184,166,0.12) 0%,
+            rgba(14,116,144,0.08) 32%,
+            rgba(255,255,255,0.94) 70%,
             rgba(255,255,255,1) 100%) !important;
       }}
+      /* Faint pattern on top of the gradient */
       .stApp::before {{
         content: "";
         position: fixed; inset: 0; z-index: 0;
         background-image: url("{pattern_svg}");
-        opacity: .6;
+        opacity: .45;
         pointer-events: none;
       }}
+      /* Ensure all content sits above */
       .stApp > * {{ position: relative; z-index: 1; }}
-      [data-testid="stAppViewContainer"], [data-testid="stAppViewContainer"] > .main,
-      html, body {{ background: transparent !important; }}
+
+      [data-testid="stAppViewContainer"],
+      [data-testid="stAppViewContainer"] > .main,
+      html, body {{
+        background: transparent !important;
+      }}
     </style>
     """, unsafe_allow_html=True)
 
-# Apply subtle background
 inject_subtle_bg()
 
-# ========= CORE CSS =========
+# ========= CORE CSS (lean & reliable) =========
 st.markdown(
     f"""
     <style>
       :root {{
         --top-spacer: {TOP_SPACER}px;
         --grid-gap: {GRID_GAP}px;
-        --grid-top-space: 28px;
         --brand: {ACCENT};
         --brand2: {ACCENT_END};
-        --brandSoft: {ACCENT_SOFT};
       }}
 
       html, body, [data-testid="stAppViewContainer"] {{ height: 100%; }}
-      [data-testid="stAppViewContainer"] > .main {{ padding-top: 0 !important; padding-bottom: 0 !important; }}
+      [data-testid="stAppViewContainer"] > .main {{
+        padding-top: 0 !important; padding-bottom: 0 !important;
+      }}
 
       .block-container {{
         max-width: 1080px;
@@ -153,10 +158,9 @@ st.markdown(
         filter: drop-shadow(0 4px 14px rgba(0,0,0,.10));
       }}
       .hero h1 {{
-        font-size: 2.6rem; line-height: 1.15; margin: .25rem 0 .25rem;
+        font-size: 2.4rem; line-height: 1.15; margin: .25rem 0 .25rem;
         letter-spacing: .3px;
         color: #0F172A;
-        text-shadow: 0 1px 0 rgba(255,255,255,.65);
       }}
       .hero p  {{
         color: #364152;
@@ -187,7 +191,7 @@ st.markdown(
         gap: 48px;
         justify-content: center;
         align-items: stretch;
-        margin-top: var(--grid-top-space);
+        margin-top: 24px;
       }}
       @media (max-width: 1024px) {{
         .grid {{ grid-template-columns: repeat(2, 260px); gap: 36px; }}
@@ -199,9 +203,9 @@ st.markdown(
       /* CARD */
       .card {{
         width: 260px;
-        background: rgba(255,255,255,0.9);
+        background: rgba(255,255,255,0.94);
         border: 1px solid rgba(2,20,35,.06);
-        border-radius:18px; padding:16px 14px;
+        border-radius:16px; padding:16px 14px;
         box-shadow: 0 6px 28px rgba(2,20,35,.06);
         transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
         text-align:center; display:flex; flex-direction:column; gap:10px;
@@ -211,10 +215,10 @@ st.markdown(
       .card:hover {{
         transform: translateY(-4px);
         box-shadow: 0 14px 40px rgba(2,20,35,.12);
-        border-color: var(--brandSoft);
+        border-color: rgba(14,116,144,0.22);
       }}
 
-      /* BADGE (replaces bulky logos) */
+      /* BADGE (replaces large logos) */
       .badge {{
         width:100%;
         display:flex; align-items:center; justify-content:flex-start;
@@ -241,7 +245,7 @@ st.markdown(
         color:#495464; min-height: 32px; margin: 6px 6px 0; font-size: .95rem;
       }}
 
-      /* BUTTON (brand gradient) */
+      /* BUTTON */
       .btn {{
         display:inline-block; padding:10px 16px; border-radius:12px;
         border:1px solid rgba(14,116,144,0.25); text-decoration:none;
@@ -264,16 +268,19 @@ st.markdown(
 )
 
 # ========= HERO =========
+def img_or_blank(path: Path) -> str:
+    return img_tag(path, "logo", "") if path.exists() else ""
+
 st.markdown(
     '<div class="hero">'
-    + (img_tag(LOGO_PATH, "logo", "") if LOGO_PATH.exists() else "")
+    + img_or_blank(LOGO_PATH)
     + f"<h1>{escape(COMPANY_NAME)}</h1>"
     + f"<p>{escape(TAGLINE)}</p>"
     + "</div>",
     unsafe_allow_html=True,
 )
 
-# ========= SUITE BANNER (differentiates this page) =========
+# ========= SUITE BANNER =========
 st.markdown(
     f"""
     <div class="suite-banner">