Update app.py

app.py

@@ -8,18 +8,15 @@ import streamlit as st
 BASE_DIR = Path(__file__).parent
 ASSETS   = BASE_DIR / "assets"
 
-# ========= META FIRST =========
-st.set_page_config(page_title="Smart Thinking - Logging — Apps", page_icon="🧭", layout="wide")
+# ========= META =========
+st.set_page_config(page_title="ST_LOG SUITE — 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"   # shown in chip + banner
+SUITE_NAME   = "ST_LOG SUITE"
+ACCENT       = "#0E7490"       # teal start (kept subtly in chips)
+ACCENT_END   = "#14B8A6"       # teal end
 
-ACCENT       = "#0E7490"   # teal start
-ACCENT_END   = "#14B8A6"   # teal end
-
-# Logos (place in assets/)
+# Logos (put these PNGs in assets/)
 HERO_LOGO   = ASSETS / "AI_Suite_Log_logo.png"
 ICON_GR     = ASSETS / "GR_logo.png"
 ICON_TS     = ASSETS / "Ts_logo.png"
@@ -64,16 +61,14 @@ def img_tag(path: Path, alt: str, cls: str = "", style: str = "") -> str:
     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, size: int = 18) -> str:
-    uri = data_uri(path)
-    return f"<img src='{uri}' alt='icon' style='width:{size}px;height:{size}px;display:block;border-radius:4px;'>" if uri else ""
-
-# ========= BACKGROUND (simple & safe gradient) =========
+# ========= BACKGROUND (clean, calm gradient) =========
 st.markdown(f"""
 <style>
   :root {{
     --brand: {ACCENT};
     --brand2: {ACCENT_END};
+    --btnDark1: #0B1220;     /* dark slate for button */
+    --btnDark2: #334155;     /* slate */
   }}
 
   html, body, [data-testid="stAppViewContainer"] {{ height: 100%; }}
@@ -81,167 +76,143 @@ st.markdown(f"""
     padding-top: 0 !important; padding-bottom: 0 !important;
   }}
 
-  /* Page container with calm gradient */
   .block-container {{
     max-width: 1100px;
     min-height: 100vh;
     display: flex; flex-direction: column;
     gap: 16px;
-    padding: 100px 0 28px !important;
+    padding: 72px 0 28px !important;
     background:
       radial-gradient(980px 460px at 50% -140px,
-        rgba(20,184,166,0.10) 0%,
-        rgba(14,116,144,0.06) 26%,
+        rgba(20,184,166,0.08) 0%,
+        rgba(14,116,144,0.05) 26%,
         rgba(255,255,255,0.98) 60%,
         rgba(255,255,255,1) 100%);
   }}
 
-  /* HERO */
+  /* HERO (logo only — title/tagline removed) */
   .hero {{ text-align:center; margin: 0; }}
   .hero img {{
-    width: 520px; max-width: 92vw; height: auto;
-    display:block; margin: 0 auto 10px;
+    width: 560px; max-width: 92vw; height: auto;
+    display:block; margin: 0 auto 6px;
     filter: drop-shadow(0 6px 16px rgba(0,0,0,.10));
   }}
-  .hero h1 {{
-    font-size: 2.2rem; line-height: 1.15; margin: .25rem 0 .15rem;
-    letter-spacing: .2px; color: #0F172A;
-  }}
-  .hero p {{
-    color: #455268; margin: 4px auto 14px; max-width: 800px; font-style: italic;
-  }}
 
-  /* SUITE BANNER (light) */
+  /* SUITE BANNER (tiny, elegant) */
   .suite-banner {{
-    display:flex; gap:12px; justify-content:center; align-items:center;
-    margin: 2px 0 12px;
+    display:flex; gap:10px; justify-content:center; align-items:center;
+    margin: 4px 0 10px;
   }}
   .suite-pill {{
     background: linear-gradient(90deg, var(--brand) 0%, var(--brand2) 100%);
-    color:#fff; padding:7px 12px; border-radius:999px;
+    color:#fff; padding:6px 12px; border-radius:999px;
     font-weight:700; letter-spacing:.2px;
-    box-shadow: 0 6px 14px rgba(14,116,144,.22);
+    box-shadow: 0 6px 14px rgba(14,116,144,.20);
   }}
-  .suite-sub {{ color:#3b4656; font-weight:500; opacity:.92; }}
 
   /* GRID (3 → 2 → 1) */
   .grid {{
     display: grid;
-    grid-template-columns: repeat(3, 300px);
+    grid-template-columns: repeat(3, 320px);
     gap: 36px;
     justify-content: center;
     align-items: stretch;
     margin-top: 8px;
   }}
-  @media (max-width: 1080px) {{
-    .grid {{ grid-template-columns: repeat(2, 300px); gap: 28px; }}
+  @media (max-width: 1100px) {{
+    .grid {{ grid-template-columns: repeat(2, 320px); gap: 28px; }}
   }}
-  @media (max-width: 680px) {{
+  @media (max-width: 700px) {{
     .grid {{ grid-template-columns: 1fr; }}
   }}
 
-  /* CARD */
+  /* CARD — premium look */
   .card {{
     position: relative;
-    width: 300px;
-    background: #ffffff;
-    border: 1px solid rgba(2,20,35,.06);
-    border-radius:18px; padding:18px 16px 16px;
-    box-shadow: 0 8px 28px rgba(2,20,35,.06);
+    width: 320px;
+    background: linear-gradient(180deg, #ffffff 0%, #FBFCFE 100%);
+    border: 1px solid rgba(12,18,32,.08);
+    border-radius:20px; padding:22px 18px 18px;
+    box-shadow: 0 10px 34px rgba(2,20,35,.08), 0 1px 0 rgba(255,255,255,0.9) inset;
     transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
-    text-align:center; display:flex; flex-direction:column; gap:12px;
+    text-align:center; display:flex; flex-direction:column; gap:14px;
     align-items: center;
   }}
   .card:hover {{
     transform: translateY(-4px);
-    box-shadow: 0 16px 44px rgba(2,20,35,.12);
+    box-shadow: 0 18px 52px rgba(2,20,35,.16);
     border-color: rgba(14,116,144,0.18);
   }}
 
-  /* Corner suite chip (keeps branding without crowding) */
+  /* Corner suite chip */
   .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:.80rem; letter-spacing:.2px;
+    color:#fff; padding:6px 10px; border-radius:999px;
+    font-weight:700; font-size:.82rem; letter-spacing:.2px;
     box-shadow: 0 6px 14px rgba(14,116,144,.22);
   }}
 
-  /* Centered round icon */
+  /* Larger round icon */
   .icon-wrap {{
-    width: 72px; height: 72px; border-radius: 9999px;
-    background: #E6F4F7;
+    width: 104px; height: 104px; border-radius: 9999px;
+    background: #F0F5F9;
     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);
+    border: 1px solid rgba(12,18,32,0.10);
+    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 8px 20px rgba(2,20,35,.06);
   }}
   .icon-wrap img {{
-    width: 62px; height: 62px; border-radius:9999px; display:block;
+    width: 92px; height: 92px; border-radius:9999px; display:block;
   }}
 
+  /* Enlarged app title */
   .card h3 {{
-    margin: 2px 0 0; font-size: 1.08rem; font-weight: 800; color:#0b1220;
+    margin: 2px 0 0; font-size: 1.26rem; font-weight: 900; color:#0b1220;
+    letter-spacing: .1px;
   }}
   .card p {{
-    color:#536071; min-height: 38px; margin: 2px 8px 0; font-size: .96rem;
+    color:#566275; min-height: 40px; margin: 0 10px; font-size: .98rem;
   }}
 
-  /* BUTTON */
+  /* PREMIUM BUTTON (dark slate, not green) */
   .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);
+    display:inline-block; padding:12px 18px; border-radius:14px;
+    border: 1px solid rgba(15,23,42,.35); text-decoration:none;
+    background: linear-gradient(180deg, var(--btnDark1) 0%, var(--btnDark2) 100%);
+    color: white; font-weight: 700; letter-spacing:.25px;
+    margin: 6px auto 0;
+    box-shadow: 0 10px 26px rgba(15,23,42,.25), inset 0 1px 0 rgba(255,255,255,.08);
   }}
   .btn:hover {{
-    filter: brightness(0.98) saturate(1.05);
+    filter: brightness(1.02) saturate(1.02);
     transform: translateY(-1px);
-    box-shadow: 0 12px 28px rgba(20,184,166,.34);
+    box-shadow: 0 14px 34px rgba(15,23,42,.30);
   }}
 
-  .footer {{ text-align:center; color:#3f4a5a; font-size:0.98em; margin-top: 24px; }}
+  .footer {{ text-align:center; color:#3f4a5a; font-size:0.96em; margin-top: 24px; }}
   .footer hr {{ margin: 12px 0; border-color: rgba(0,0,0,.08); }}
 </style>
 """, unsafe_allow_html=True)
 
-# ========= HERO =========
-hero_img = img_tag(HERO_LOGO, "ST_LOG SUITE", "")
-st.markdown(
-    f"""
-    <div class="hero">
-      {hero_img}
-      <h1>{escape(COMPANY_NAME)}</h1>
-      <p>{escape(TAGLINE)}</p>
-    </div>
-    """,
-    unsafe_allow_html=True,
-)
+# ========= HERO (logo only) =========
+hero_html = img_tag(HERO_LOGO, "ST_LOG SUITE")
+st.markdown(f"<div class='hero'>{hero_html}</div>", unsafe_allow_html=True)
 
 # ========= SUITE BANNER =========
-st.markdown(
-    f"""
-    <div class="suite-banner">
-      <span class="suite-pill">{escape(SUITE_NAME)}</span>
-      <span class="suite-sub">Real-time well logging intelligence • 3 apps</span>
-    </div>
-    """,
-    unsafe_allow_html=True,
-)
+st.markdown(f"<div class='suite-banner'><span class='suite-pill'>{escape(SUITE_NAME)}</span></div>", unsafe_allow_html=True)
 
 # ========= CARDS =========
 def app_card(app: dict) -> str:
-    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
+    icon_html = img_tag(app.get("icon"), "icon",
+                        style="width:92px;height:92px;border-radius:9999px;") if app.get("icon") and app["icon"].exists() else ""
+    target = "_self"  # change to "_blank" if you prefer new tab
     return (
         "<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'>Open App</a>"
+        + f"<a class='btn' href='{escape(app['url'])}' target='{target}' rel='noopener'>Run App</a>"
         + "</div>"
     )