Update app.py

app.py

@@ -1,68 +1,74 @@
-# STEP 2 — CLEAN BRANDED UI
+# -*- coding: utf-8 -*-
 import base64, mimetypes
 from html import escape
 from pathlib import Path
 import streamlit as st
 
-# --------- META FIRST ---------
-st.set_page_config(page_title="Smart Thinking - Logging — Apps", page_icon="🧭", layout="wide")
-
-# --------- PATHS ---------
+# ========= PATHS =========
 BASE_DIR = Path(__file__).parent
 ASSETS   = BASE_DIR / "assets"
-LOGO_PATH = ASSETS / "logo.png"     # optional; renders if present
 
-# --------- BRAND / DATA ---------
+# ========= META FIRST =========
+st.set_page_config(page_title="Smart Thinking - Logging — Apps", page_icon="🧭", layout="wide")
+
+# ========= 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"   # start
-ACCENT_END   = "#14B8A6"   # end
+SUITE_NAME   = "ST_LOG SUITE"   # shown in chip + banner
+
+ACCENT       = "#0E7490"   # teal start
+ACCENT_END   = "#14B8A6"   # teal end
+
+# Logos (place in assets/)
+HERO_LOGO   = ASSETS / "AI_Suite_Log_logo.png"
+ICON_GR     = ASSETS / "GR_logo.png"
+ICON_TS     = ASSETS / "Ts_logo.png"
+ICON_TC     = ASSETS / "Tc_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
+        "icon":  ICON_GR,
     },
     {
         "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",
+        "blurb": "Predict shear slowness (DtS) in real time.",
+        "icon":  ICON_TS,
     },
     {
         "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",
+        "icon":  ICON_TC,
     },
 ]
 
-# --------- 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"
-    import base64
     b64 = base64.b64encode(path.read_bytes()).decode("utf-8")
     return f"data:{mime};base64,{b64}"
 
-def img_tag(path: Path, alt: str, cls: str = "") -> str:
+def img_tag(path: Path, alt: str, cls: str = "", style: str = "") -> str:
     uri = data_uri(path)
-    if uri:
-        cls_attr = f' class="{cls}"' if cls else ""
-        return f'<img{cls_attr} src="{uri}" alt="{escape(alt)}" />'
-    return ""  # silently skip if missing
+    if not uri:
+        return ""
+    cls_attr = f' class="{cls}"' if cls else ""
+    style_attr = f' style="{style}"' if style else ""
+    return f'<img{cls_attr}{style_attr} src="{uri}" alt="{escape(alt)}" />'
 
-def tiny_icon_html(path: Path) -> str:
+def tiny_icon_html(path: Path, size: int = 18) -> str:
     uri = data_uri(path)
-    return f"<img src='{uri}' alt='icon' style='width:18px;height:18px;display:block;border-radius:4px;'>" if uri else ""
+    return f"<img src='{uri}' alt='icon' style='width:{size}px;height:{size}px;display:block;border-radius:4px;'>" if uri else ""
 
-# --------- SAFE CSS (ONE BLOCK) ---------
+# ========= BACKGROUND (simple & safe gradient) =========
 st.markdown(f"""
 <style>
   :root {{
@@ -75,39 +81,40 @@ st.markdown(f"""
     padding-top: 0 !important; padding-bottom: 0 !important;
   }}
 
+  /* Page container with calm gradient */
   .block-container {{
-    max-width: 1080px;
+    max-width: 1100px;
     min-height: 100vh;
     display: flex; flex-direction: column;
-    gap: 8px;
-    padding: 100px 0 24px !important; /* generous top space */
+    gap: 16px;
+    padding: 100px 0 28px !important;
     background:
-      radial-gradient(900px 420px at 50% -120px,
+      radial-gradient(980px 460px at 50% -140px,
         rgba(20,184,166,0.10) 0%,
-        rgba(14,116,144,0.06) 28%,
-        rgba(255,255,255,0.98) 64%,
+        rgba(14,116,144,0.06) 26%,
+        rgba(255,255,255,0.98) 60%,
         rgba(255,255,255,1) 100%);
   }}
 
   /* HERO */
-  .hero {{ text-align:center; margin: 0 0 6px; }}
+  .hero {{ text-align:center; margin: 0; }}
   .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));
+    width: 520px; max-width: 92vw; height: auto;
+    display:block; margin: 0 auto 10px;
+    filter: drop-shadow(0 6px 16px rgba(0,0,0,.10));
   }}
   .hero h1 {{
-    font-size: 2.3rem; line-height: 1.15; margin: .25rem 0 .15rem;
+    font-size: 2.2rem; 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;
+  .hero p {{
+    color: #455268; margin: 4px auto 14px; max-width: 800px; font-style: italic;
   }}
 
-  /* SUITE BANNER */
+  /* SUITE BANNER (light) */
   .suite-banner {{
     display:flex; gap:12px; justify-content:center; align-items:center;
-    margin: 6px 0 18px;
+    margin: 2px 0 12px;
   }}
   .suite-pill {{
     background: linear-gradient(90deg, var(--brand) 0%, var(--brand2) 100%);
@@ -117,31 +124,32 @@ st.markdown(f"""
   }}
   .suite-sub {{ color:#3b4656; font-weight:500; opacity:.92; }}
 
-  /* GRID */
+  /* GRID (3 → 2 → 1) */
   .grid {{
     display: grid;
-    grid-template-columns: repeat(3, 280px);
+    grid-template-columns: repeat(3, 300px);
     gap: 36px;
     justify-content: center;
     align-items: stretch;
-    margin-top: 4px;
+    margin-top: 8px;
   }}
-  @media (max-width: 1040px) {{
-    .grid {{ grid-template-columns: repeat(2, 280px); gap: 28px; }}
+  @media (max-width: 1080px) {{
+    .grid {{ grid-template-columns: repeat(2, 300px); gap: 28px; }}
   }}
-  @media (max-width: 640px) {{
+  @media (max-width: 680px) {{
     .grid {{ grid-template-columns: 1fr; }}
   }}
 
   /* CARD */
   .card {{
-    width: 280px;
+    position: relative;
+    width: 300px;
     background: #ffffff;
     border: 1px solid rgba(2,20,35,.06);
-    border-radius:16px; padding:16px 16px 16px;
+    border-radius:18px; 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;
+    text-align:center; display:flex; flex-direction:column; gap:12px;
     align-items: center;
   }}
   .card:hover {{
@@ -150,31 +158,32 @@ st.markdown(f"""
     border-color: rgba(14,116,144,0.18);
   }}
 
-  /* 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;
+  /* Corner suite chip (keeps branding without crowding) */
+  .suite-chip {{
+    position: absolute; top: 12px; right: 12px;
     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;
+    font-weight:700; font-size:.80rem; 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;
+
+  /* Centered round icon */
+  .icon-wrap {{
+    width: 72px; height: 72px; border-radius: 9999px;
+    background: #E6F4F7;
+    display:grid; place-items:center;
+    border: 1px solid rgba(14,116,144,0.20);
+    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 16px rgba(2,20,35,.06);
+  }}
+  .icon-wrap img {{
+    width: 62px; height: 62px; border-radius:9999px; display:block;
   }}
-  .chip .dot img {{ width:16px; height:16px; display:block; }}
 
   .card h3 {{
-    margin: 6px 0 0; font-size: 1.05rem; font-weight: 800; color:#0b1220;
+    margin: 2px 0 0; font-size: 1.08rem; font-weight: 800; color:#0b1220;
   }}
   .card p {{
-    color:#536071; min-height: 32px; margin: 4px 8px 0; font-size: .96rem;
+    color:#536071; min-height: 38px; margin: 2px 8px 0; font-size: .96rem;
   }}
 
   /* BUTTON */
@@ -197,12 +206,12 @@ st.markdown(f"""
 </style>
 """, unsafe_allow_html=True)
 
-# --------- HERO ---------
-hero_logo = img_tag(LOGO_PATH, "logo", "")
+# ========= HERO =========
+hero_img = img_tag(HERO_LOGO, "ST_LOG SUITE", "")
 st.markdown(
     f"""
     <div class="hero">
-      {hero_logo}
+      {hero_img}
       <h1>{escape(COMPANY_NAME)}</h1>
       <p>{escape(TAGLINE)}</p>
     </div>
@@ -210,7 +219,7 @@ st.markdown(
     unsafe_allow_html=True,
 )
 
-# --------- SUITE BANNER ---------
+# ========= SUITE BANNER =========
 st.markdown(
     f"""
     <div class="suite-banner">
@@ -221,33 +230,25 @@ st.markdown(
     unsafe_allow_html=True,
 )
 
-# --------- CARDS ---------
-def card_chip(icon_path: Path | None) -> str:
-    icon_html = tiny_icon_html(icon_path) if icon_path else ""
-    return f"""
-    <div class="chip">
-      <div class="pill">
-        <div class="dot">{icon_html}</div>
-        {escape(SUITE_NAME)}
-      </div>
-    </div>
-    """
-
+# ========= CARDS =========
 def app_card(app: dict) -> str:
-    target = "_blank" if False else "_self"
+    icon_html = img_tag(app.get("icon"), "icon", style="width:62px;height:62px;border-radius:9999px;") \
+                if app.get("icon") and (app["icon"]).exists() else ""
+    target = "_self"  # set to "_blank" if you want new tab
     return (
-        f"<div class='card'>"
-        + card_chip(app.get("icon"))
+        "<div class='card'>"
+        + f"<div class='suite-chip'>{escape(SUITE_NAME)}</div>"
+        + f"<div class='icon-wrap'>{icon_html}</div>"
         + 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('Open App')}</a>"
+        + f"<a class='btn' href='{escape(app['url'])}' target='{target}' rel='noopener'>Open App</a>"
         + "</div>"
     )
 
 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>