Update app.py

app.py

@@ -1,59 +1,53 @@
-# -*- coding: utf-8 -*-
+# STEP 2 — CLEAN BRANDED UI
 import base64, mimetypes
 from html import escape
 from pathlib import Path
 import streamlit as st
 
-# ========= PATHS =========
+# --------- META FIRST ---------
+st.set_page_config(page_title="Smart Thinking - Logging — Apps", page_icon="🧭", layout="wide")
+
+# --------- PATHS ---------
 BASE_DIR = Path(__file__).parent
 ASSETS   = BASE_DIR / "assets"
+LOGO_PATH = ASSETS / "logo.png"     # optional; renders if present
 
-# ========= CONTROLS =========
-HERO_LOGO_SIZE     = 168
-TOP_SPACER         = 120
-GRID_GAP           = 40
-BUTTON_TEXT        = "Open App"
-OPEN_IN_NEW_TAB    = False
-
-# BRAND (Logging suite)
+# --------- BRAND / DATA ---------
 COMPANY_NAME = "Smart Thinking - Logging"
 TAGLINE      = "We Deliver Smart AI-Based Solutions For O&G Industry"
 SUITE_NAME   = "ST_LOG SUITE"
-ACCENT       = "#0E7490"       # teal start
-ACCENT_END   = "#14B8A6"       # teal 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",   # optional 24–32px glyph
-}
-APP2 = {
-    "title": "ST_Log_Sonic (Ts)",
-    "url":   "https://smart-thinking-sonic-ts.hf.space",
-    "blurb": "Predict shear slowness (ΔtS) in real time.",
-    "icon":  ASSETS / "app2_icon.png",
-}
-APP3 = {
-    "title": "ST_Log_Sonic (Tc)",
-    "url":   "https://smart-thinking-sonic-tc.hf.space",
-    "blurb": "Predict compressional slowness (ΔtC) in real time.",
-    "icon":  ASSETS / "app3_icon.png",
-}
+ACCENT       = "#0E7490"   # start
+ACCENT_END   = "#14B8A6"   # end
 
-LOGO_PATH = ASSETS / "logo.png"
+APPS = [
+    {
+        "title": "ST_Log_GR",
+        "url":   "https://smart-thinking-gr.hf.space/",
+        "blurb": "Real-time gamma-ray log prediction.",
+        "icon":  ASSETS / "app1_icon.png",  # optional tiny glyph
+    },
+    {
+        "title": "ST_Log_Sonic (Ts)",
+        "url":   "https://smart-thinking-sonic-ts.hf.space",
+        "blurb": "Predict shear slowness (DtS) in real time.",   # ASCII only to avoid encoding issues
+        "icon":  ASSETS / "app2_icon.png",
+    },
+    {
+        "title": "ST_Log_Sonic (Tc)",
+        "url":   "https://smart-thinking-sonic-tc.hf.space",
+        "blurb": "Predict compressional slowness (DtC) in real time.",
+        "icon":  ASSETS / "app3_icon.png",
+    },
+]
 
-# ========= PAGE META =========
-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")
-
-# ========= HELPERS =========
+# --------- HELPERS ---------
 def data_uri(path: Path) -> str | None:
     if not path or not path.exists():
         return None
     mime, _ = mimetypes.guess_type(path.name)
-    if not mime: mime = "image/png"
+    if not mime:
+        mime = "image/png"
+    import base64
     b64 = base64.b64encode(path.read_bytes()).decode("utf-8")
     return f"data:{mime};base64,{b64}"
 
@@ -62,185 +56,161 @@ 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)}" />'
-    return f'<div class="{cls}" style="display:flex;align-items:center;justify-content:center;color:#6b7280;background:#eef2f7;border-radius:8px;">{escape(alt)}</div>'
+    return ""  # silently skip if missing
 
 def tiny_icon_html(path: Path) -> str:
     uri = data_uri(path)
-    return f"<img src='{uri}' alt='icon' style='width:22px;height:22px;display:block;'>" if uri else ""
+    return f"<img src='{uri}' alt='icon' style='width:18px;height:18px;display:block;border-radius:4px;'>" if uri else ""
 
-# ========= BACKGROUND (calm gradient) =========
+# --------- SAFE CSS (ONE BLOCK) ---------
 st.markdown(f"""
 <style>
-  .stApp {{
-    position: relative !important;
+  :root {{
+    --brand: {ACCENT};
+    --brand2: {ACCENT_END};
+  }}
+
+  html, body, [data-testid="stAppViewContainer"] {{ height: 100%; }}
+  [data-testid="stAppViewContainer"] > .main {{
+    padding-top: 0 !important; padding-bottom: 0 !important;
+  }}
+
+  .block-container {{
+    max-width: 1080px;
+    min-height: 100vh;
+    display: flex; flex-direction: column;
+    gap: 8px;
+    padding: 100px 0 24px !important; /* generous top space */
     background:
-      radial-gradient(1200px 520px at 50% -80px,
+      radial-gradient(900px 420px at 50% -120px,
         rgba(20,184,166,0.10) 0%,
         rgba(14,116,144,0.06) 28%,
-        rgba(255,255,255,0.96) 64%,
-        rgba(255,255,255,1) 100%) !important;
-  }}
-  [data-testid="stAppViewContainer"],
-  [data-testid="stAppViewContainer"] > .main,
-  html, body {{
-    background: transparent !important;
+        rgba(255,255,255,0.98) 64%,
+        rgba(255,255,255,1) 100%);
   }}
-</style>
-""", unsafe_allow_html=True)
 
-# ========= CORE CSS =========
-st.markdown(
-    f"""
-    <style>
-      :root {{
-        --top-spacer: {TOP_SPACER}px;
-        --grid-gap: {GRID_GAP}px;
-        --brand: {ACCENT};
-        --brand2: {ACCENT_END};
-      }}
-
-      html, body, [data-testid="stAppViewContainer"] {{ height: 100%; }}
-      [data-testid="stAppViewContainer"] > .main {{
-        padding-top: 0 !important; padding-bottom: 0 !important;
-      }}
-
-      .block-container {{
-        max-width: 1080px;
-        min-height: 100vh;
-        display: flex; flex-direction: column;
-        justify-content: flex-start;
-        gap: 14px;
-        padding: var(--top-spacer) 0 20px !important;
-      }}
-
-      /* HERO */
-      .hero {{ text-align:center; margin: 0 0 0; }}
-      .hero img {{
-        width: {HERO_LOGO_SIZE}px; max-width: 95vw; height: auto;
-        display:block; margin: 0 auto 8px;
-        filter: drop-shadow(0 4px 14px rgba(0,0,0,.08));
-      }}
-      .hero h1 {{
-        font-size: 2.4rem; line-height: 1.15; margin: .25rem 0 .15rem;
-        letter-spacing: .2px; color: #0F172A;
-      }}
-      .hero p  {{
-        color: #445066; margin: 2px auto 10px; max-width: 720px; font-style: italic;
-      }}
-
-      /* SUITE BANNER (lighter) */
-      .suite-banner {{
-        display:flex; gap:12px; justify-content:center; align-items:center;
-        margin: 4px 0 16px;
-      }}
-      .suite-pill {{
-        background: linear-gradient(90deg, var(--brand) 0%, var(--brand2) 100%);
-        color:#fff; padding:7px 12px; border-radius:999px;
-        font-weight:700; letter-spacing:.2px;
-        box-shadow: 0 6px 14px rgba(14,116,144,.22);
-      }}
-      .suite-sub {{
-        color:#3b4656; font-weight:500; opacity:.92;
-      }}
+  /* HERO */
+  .hero {{ text-align:center; margin: 0 0 6px; }}
+  .hero img {{
+    width: 160px; max-width: 95vw; height: auto;
+    display:block; margin: 0 auto 8px;
+    filter: drop-shadow(0 4px 12px rgba(0,0,0,.08));
+  }}
+  .hero h1 {{
+    font-size: 2.3rem; line-height: 1.15; margin: .25rem 0 .15rem;
+    letter-spacing: .2px; color: #0F172A;
+  }}
+  .hero p  {{
+    color: #445066; margin: 2px auto 10px; max-width: 720px; font-style: italic;
+  }}
 
-      /* GRID (3 → 2 → 1) */
-      .grid {{
-        display: grid;
-        grid-template-columns: repeat(3, 280px);
-        gap: var(--grid-gap);
-        justify-content: center;
-        align-items: stretch;
-        margin-top: 8px;
-      }}
-      @media (max-width: 1040px) {{
-        .grid {{ grid-template-columns: repeat(2, 280px); gap: 28px; }}
-      }}
-      @media (max-width: 640px) {{
-        .grid {{ grid-template-columns: 1fr; }}
-      }}
+  /* SUITE BANNER */
+  .suite-banner {{
+    display:flex; gap:12px; justify-content:center; align-items:center;
+    margin: 6px 0 18px;
+  }}
+  .suite-pill {{
+    background: linear-gradient(90deg, var(--brand) 0%, var(--brand2) 100%);
+    color:#fff; padding:7px 12px; border-radius:999px;
+    font-weight:700; letter-spacing:.2px;
+    box-shadow: 0 6px 14px rgba(14,116,144,.22);
+  }}
+  .suite-sub {{ color:#3b4656; font-weight:500; opacity:.92; }}
 
-      /* CARD (clean + roomy) */
-      .card {{
-        width: 280px;
-        background: #ffffff;
-        border: 1px solid rgba(2,20,35,.06);
-        border-radius:16px; padding:18px 16px 16px;
-        box-shadow: 0 8px 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;
-        align-items: center;
-      }}
-      .card:hover {{
-        transform: translateY(-4px);
-        box-shadow: 0 16px 44px rgba(2,20,35,.12);
-        border-color: rgba(14,116,144,0.18);
-      }}
+  /* GRID */
+  .grid {{
+    display: grid;
+    grid-template-columns: repeat(3, 280px);
+    gap: 36px;
+    justify-content: center;
+    align-items: stretch;
+    margin-top: 4px;
+  }}
+  @media (max-width: 1040px) {{
+    .grid {{ grid-template-columns: repeat(2, 280px); gap: 28px; }}
+  }}
+  @media (max-width: 640px) {{
+    .grid {{ grid-template-columns: 1fr; }}
+  }}
 
-      /* Top-left chip instead of big badge */
-      .chip {{
-        position: relative;
-        align-self: stretch;
-        display:flex; justify-content:flex-start; align-items:center; gap:8px;
-        height: 34px;
-        margin: 0 0 6px 0;
-      }}
-      .chip .pill {{
-        display:flex; align-items:center; gap:8px;
-        background: linear-gradient(90deg, var(--brand) 0%, var(--brand2) 100%);
-        color:#fff; padding:6px 10px; border-radius:999px;
-        font-weight:700; font-size:.85rem; letter-spacing:.2px;
-        box-shadow: 0 6px 14px rgba(14,116,144,.22);
-      }}
-      .chip .dot {{
-        width: 26px; height: 26px; border-radius: 8px;
-        background: rgba(255,255,255,.18);
-        display:grid; place-items:center; overflow:hidden;
-      }}
-      .chip .dot img {{ width:18px; height:18px; display:block; }}
+  /* CARD */
+  .card {{
+    width: 280px;
+    background: #ffffff;
+    border: 1px solid rgba(2,20,35,.06);
+    border-radius:16px; padding:16px 16px 16px;
+    box-shadow: 0 8px 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;
+    align-items: center;
+  }}
+  .card:hover {{
+    transform: translateY(-4px);
+    box-shadow: 0 16px 44px rgba(2,20,35,.12);
+    border-color: rgba(14,116,144,0.18);
+  }}
 
-      .card h3 {{
-        margin: 8px 0 0; font-size: 1.05rem; font-weight: 800; color:#0b1220;
-      }}
-      .card p {{
-        color:#536071; min-height: 32px; margin: 4px 8px 0; font-size: .96rem;
-      }}
+  /* Small corner chip (keeps branding without crowding) */
+  .chip {{
+    align-self: stretch;
+    display:flex; justify-content:flex-start; align-items:center; gap:8px;
+    height: 30px; margin: 0 0 6px 0;
+  }}
+  .chip .pill {{
+    display:flex; align-items:center; gap:8px;
+    background: linear-gradient(90deg, var(--brand) 0%, var(--brand2) 100%);
+    color:#fff; padding:5px 10px; border-radius:999px;
+    font-weight:700; font-size:.82rem; letter-spacing:.2px;
+    box-shadow: 0 6px 14px rgba(14,116,144,.22);
+  }}
+  .chip .dot {{
+    width: 22px; height: 22px; border-radius: 7px;
+    background: rgba(255,255,255,.18);
+    display:grid; place-items:center; overflow:hidden;
+  }}
+  .chip .dot img {{ width:16px; height:16px; display:block; }}
 
-      /* BUTTON */
-      .btn {{
-        display:inline-block; padding:10px 16px; border-radius:12px;
-        border:1px solid rgba(14,116,144,0.25); text-decoration:none;
-        background: linear-gradient(90deg, var(--brand) 0%, var(--brand2) 100%);
-        color: white; font-weight: 600; letter-spacing:.2px;
-        margin: 10px auto 0;
-        box-shadow: 0 6px 18px rgba(20,184,166,.26);
-      }}
-      .btn:hover {{
-        filter: brightness(0.98) saturate(1.05);
-        transform: translateY(-1px);
-        box-shadow: 0 12px 28px rgba(20,184,166,.34);
-      }}
+  .card h3 {{
+    margin: 6px 0 0; font-size: 1.05rem; font-weight: 800; color:#0b1220;
+  }}
+  .card p {{
+    color:#536071; min-height: 32px; margin: 4px 8px 0; font-size: .96rem;
+  }}
 
-      .footer {{ text-align:center; color:#3f4a5a; font-size:0.98em; margin-top: 24px; }}
-      .footer hr {{ margin: 12px 0; border-color: rgba(0,0,0,.08); }}
-    </style>
-    """,
-    unsafe_allow_html=True,
-)
+  /* BUTTON */
+  .btn {{
+    display:inline-block; padding:10px 16px; border-radius:12px;
+    border:1px solid rgba(14,116,144,0.25); text-decoration:none;
+    background: linear-gradient(90deg, var(--brand) 0%, var(--brand2) 100%);
+    color: white; font-weight: 600; letter-spacing:.2px;
+    margin: 10px auto 0;
+    box-shadow: 0 6px 18px rgba(20,184,166,.26);
+  }}
+  .btn:hover {{
+    filter: brightness(0.98) saturate(1.05);
+    transform: translateY(-1px);
+    box-shadow: 0 12px 28px rgba(20,184,166,.34);
+  }}
 
-# ========= HERO =========
-def img_or_blank(path: Path) -> str:
-    return img_tag(path, "logo", "") if path.exists() else ""
+  .footer {{ text-align:center; color:#3f4a5a; font-size:0.98em; margin-top: 24px; }}
+  .footer hr {{ margin: 12px 0; border-color: rgba(0,0,0,.08); }}
+</style>
+""", unsafe_allow_html=True)
 
+# --------- HERO ---------
+hero_logo = img_tag(LOGO_PATH, "logo", "")
 st.markdown(
-    '<div class="hero">'
-    + img_or_blank(LOGO_PATH)
-    + f"<h1>{escape(COMPANY_NAME)}</h1>"
-    + f"<p>{escape(TAGLINE)}</p>"
-    + "</div>",
+    f"""
+    <div class="hero">
+      {hero_logo}
+      <h1>{escape(COMPANY_NAME)}</h1>
+      <p>{escape(TAGLINE)}</p>
+    </div>
+    """,
     unsafe_allow_html=True,
 )
 
-# ========= SUITE BANNER =========
+# --------- SUITE BANNER ---------
 st.markdown(
     f"""
     <div class="suite-banner">
@@ -251,9 +221,9 @@ st.markdown(
     unsafe_allow_html=True,
 )
 
-# ========= CARDS =========
+# --------- CARDS ---------
 def card_chip(icon_path: Path | None) -> str:
-    icon_html = f"{tiny_icon_html(icon_path)}" if icon_path else ""
+    icon_html = tiny_icon_html(icon_path) if icon_path else ""
     return f"""
     <div class="chip">
       <div class="pill">
@@ -264,26 +234,20 @@ def card_chip(icon_path: Path | None) -> str:
     """
 
 def app_card(app: dict) -> str:
-    target = "_blank" if OPEN_IN_NEW_TAB else "_self"
+    target = "_blank" if False else "_self"
     return (
         f"<div class='card'>"
         + card_chip(app.get("icon"))
         + f"<h3>{escape(app['title'])}</h3>"
         + f"<p>{escape(app['blurb'])}</p>"
-        + f"<a class='btn' href='{escape(app['url'])}' target='{target}' rel='noopener'>{escape(BUTTON_TEXT)}</a>"
+        + f"<a class='btn' href='{escape(app['url'])}' target='{target}' rel='noopener'>{escape('Open App')}</a>"
         + "</div>"
     )
 
-st.markdown(
-    "<div class='grid'>"
-    + app_card(APP1)
-    + app_card(APP2)
-    + app_card(APP3)
-    + "</div>",
-    unsafe_allow_html=True,
-)
+cards_html = "".join(app_card(a) for a in APPS)
+st.markdown(f"<div class='grid'>{cards_html}</div>", unsafe_allow_html=True)
 
-# ========= FOOTER =========
+# --------- FOOTER ---------
 st.markdown(
     """
     <hr>