Update app.py

app.py

@@ -1,189 +1,373 @@
+# -*- coding: utf-8 -*-
+from typing import Optional, Dict, Any
 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/
-
-# ========= CONTROLS (tweak these) =========
-HERO_LOGO_SIZE     = 180   # px (top company logo size)
-TOP_SPACER         = 100   # px (breathing room above hero; raise if the logo looks "trimmed")
-CARD_WIDTH         = 300   # px (fixed width per card on desktop)
-CARD_THUMB_HEIGHT  = 180   # px (image area inside each card)
-GRID_GAP           = 100    # px (space between the cards)
-BUTTON_TEXT        = "Click to Run APP"
-OPEN_IN_NEW_TAB    = False # True = open links in a new tab
-
-# ========= BRAND / APPS =========
-COMPANY_NAME = "Smart Thinking - Geomechanics"
-TAGLINE      = "We Deliver Smart AI-Based Solutions For O&G Industry"
-
-APP1 = {
-    "title": "ST_GeoMech_UCS",
-    "url":   "https://smart-thinking-ucs.hf.space/",
-    "thumb": ASSETS / "app1.png",
-    "blurb": "Real-Time UCS Prediction",
-    "bg":    "#F7FBFF",   # very light blue
-    "border":"#000000",   # light blue border
-}
-APP2 = {
-    "title": "ST_GeoMech_Ym",
-    "url":   "https://smart-thinking-ym.hf.space/",
-    "thumb": ASSETS / "app2.png",
-    "blurb": "Real-Time Static Young's Modulus Prediction",
-    "bg":    "#F6FFF7",   # very light green
-    "border":"#000000",   # light green border
-}
-# NEW third card (edit title/url/blurb/thumb/colors as needed)
-APP3 = {
-    "title": "ST_GeoMech_SMW",
-    "url":   "https://example.com/",        # <-- replace with your Space URL
-    "thumb": ASSETS / "app3.png",           # <-- upload this image
-    "blurb": "Real-Time Safe Mud Window Prediction",
-    "bg":    "#F9F6FF",   # very light purple
-    "border":"#000000",   # light purple border
-}
+# ========= PATHS =========
+BASE_DIR = Path(__file__).parent
+ASSETS   = BASE_DIR / "assets"
 
-LOGO_PATH = ASSETS / "logo.png"
+# ========= META =========
+st.set_page_config(page_title="ST_GeoMech SUITE", layout="wide")
 
-# ========= 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")
+# ========= GLOBAL THEME (one place) =========
+THEME: Dict[str, Any] = {
+    "strip": {
+        "gap": 10,               # px between pill and tagline
+        "below_gap": 30,         # px between strip row and hero
+        "pill_pad_v": 8,         # px
+        "pill_pad_h": 14,        # px
+        "pill_font": 16,         # px
+        "tagline_font": 15,      # px
+        # Premium header palette
+        "bg1": "#0B1220",        # charcoal
+        "bg2": "#142136",        # deep navy
+        "text": "#E4B83A",       # gold text inside pill
+        "tagline_color": "#475569",
+    },
+    "page": {
+        "top_padding": 50,       # px top padding for page
+        "container_width": 1120, # max content width
+        "bg_radial": True,       # premium faint radial bg
+    },
+    "hero": {
+        "width": 400,            # px
+        "margin_bottom": 30,     # px space under hero
+        "logo": ASSETS / "AI_Suite_Log_logo.png",
+    },
+    "grid": {
+        "gap": 50,               # px between cards
+        "card_width": 340,       # default card width (px)
+    },
+    "card": {
+        "radius": 22,            # px
+        "border_width": 2,       # px
+        "pad_v": 24,             # px
+        "pad_h": 20,             # px
+        "border": "#0B1220",     # dark outline
+        "border_hover": "#243447",
+        # defaults (overridden per card below)
+        "bg_top":  "#FFFFFF",
+        "bg_bot":  "#FBFCFE",
+        "title_color": "#0B1220",
+        "blurb_color": "#566275",
+    },
+    "icon": {
+        "diam": 118,             # px outer circle
+        "img":  106,             # px image
+        "circle_bg": "#F1F5F9",
+        "circle_border": "rgba(12,18,32,0.10)",
+    },
+    "button": {
+        "pad_v": 12,             # px
+        "pad_h": 20,             # px
+        "radius": 14,            # px
+        # premium navy CTA
+        "bg1": "#0B1220",
+        "bg2": "#162338",
+        "text": "#FFFFFF",
+        "border": "rgba(11,18,32,.55)",
+    },
+}
 
-# ========= CSS (fits one screen on desktop; no blank area under cards) =========
-st.markdown(
-    f"""
-    <style>
-      :root {{
-        --top-spacer: {TOP_SPACER}px;
-        --card-width: {CARD_WIDTH}px;
-        --grid-gap: {GRID_GAP}px;
-        --tagline-gap: 0px;           /* distance between H1 and tagline */
-        --grid-top-space: 20px;       /* space above the cards */
-      }}
-
-      html, body, [data-testid="stAppViewContainer"] {{ height: 100%; }}
-      [data-testid="stAppViewContainer"] > .main {{ padding-top: 0 !important; padding-bottom: 0 !important; }}
-      .block-container {{
-        max-width: 1120px;
-        min-height: 100vh;
-        display: flex; flex-direction: column;
-        justify-content: center;
-        gap: 10px;
-        padding: var(--top-spacer) 0 8px !important;
-      }}
-
-      /* HERO */
-      .hero {{ text-align:center; margin: 0 0 8px; }}
-      .hero img {{
-        width: {HERO_LOGO_SIZE}px; max-width: 95vw; height: auto;
-        display:block; margin: 0 auto 8px;
-        filter: drop-shadow(0 2px 8px rgba(0,0,0,.12));
-      }}
-      /* Make tagline closer to the company name */
-      .hero h1 {{ font-size: 2.3rem; margin: .2rem 0 0; }}
-      .hero p  {{
-        color: #5a5f6a;
-        margin: var(--tagline-gap) auto 0;
-        max-width: 720px;
-        font-style: italic;
-      }}
-
-      /* GRID: precise card width + extra space above cards */
-      .grid {{
-        display: flex;
-        gap: var(--grid-gap);
-        justify-content: center;
-        align-items: stretch;
-        flex-wrap: nowrap;             /* keep three across on desktop */
-        margin-top: var(--grid-top-space);
-      }}
-      /* When viewport too narrow for 3-up, allow wrapping */
-      @media (max-width: calc(3 * var(--card-width) + 2 * var(--grid-gap) + 64px)) {{
-        .grid {{ flex-wrap: wrap; }}
-      }}
-
-      .card {{
-        width: var(--card-width);
-        background: var(--card-bg, #fff);
-        border: 1px solid var(--card-border, rgba(0,0,0,.06));
-        border-radius:16px; padding:14px;
-        box-shadow:0 4px 18px rgba(0,0,0,.05);
-        transition:transform .12s ease, box-shadow .12s ease;
-        text-align:center; display:flex; flex-direction:column; gap:10px;
-      }}
-      .card:hover {{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.08); }}
-
-      .thumb {{
-        width: 100%;
-        height: {CARD_THUMB_HEIGHT}px;
-        border-radius:14px;
-        border:1px solid rgba(0,0,0,.06);
-        object-fit: contain;           /* show full image */
-        background:#fff;
-      }}
-
-      .card h3 {{ margin:6px 0 2px; }}
-      .card p  {{ color:#5a5f6a; min-height:30px; margin:0 8px 2px; }}
-
-      /* Light button with dark text */
-      .btn {{
-        display:inline-block; padding:10px 14px; border-radius:12px;
-        border:1px solid #e5e7eb; text-decoration:none;
-        background:#f3f4f6; color:#111827; font-weight:500;
-      }}
-      .btn:hover {{ background:#e5e7eb; }}
-
-      .footer {{ text-align:center; color:#6b7280; font-size:1.0em; margin-top: 6px; }}
-      .footer hr {{ margin: 6px 0; }}
-    </style>
-    """,
-    unsafe_allow_html=True,
-)
+# ========= CARDS (content + per-card overrides) =========
+# Solid, very-light tints for a premium feel (no washed-out rgba)
+CARDS = [
+    {
+        "title": " ST_GeoMEch_UCE",
+        "blurb": "Real-time Uniconfined Compressive Strength Prediction.",
+        "url":   "https://smart-thinking-ucs.hf.space/",
+        "icon":  ASSETS / "UCS_logo.png",
+        "style": {
+            "bg_top":  "#EAF7F1",   # minty light
+            "bg_bot":  "#F6FBF8",
+            "border":  "#0F3D3E",
+        },
+    },
+    {
+        "title": " ST_GeoMech_Ym",
+        "blurb": "Real-time Static Young's Modulus Prediction.",
+        "url":   "https://smart-thinking-ym.hf.space",
+        "icon":  ASSETS / "Ym_logo.png",
+        "style": {
+            "bg_top":  "#EAF7FD",   # airy cyan
+            "bg_bot":  "#F5FBFF",
+            "border":  "#0E4A6E",
+        },
+    },
+    {
+        "title": " ST_GeoMech_SMW",
+        "blurb": "Real-Time Safe Mud Window Prediction",
+        "url":   "https://smart-thinking-smw.hf.space",
+        "icon":  ASSETS / "Tc_logo.png",
+        "style": {
+            "bg_top":  "#EEF0FF",   # soft indigo
+            "bg_bot":  "#F7F8FF",
+            "border":  "#3E4EB8",
+        },
+    },
+]
 
-# ========= IMAGE HELPERS =========
-def data_uri(path: Path) -> str | None:
-    if not path.exists(): return None
+# ========= Helpers =========
+def data_uri(path: Path) -> Optional[str]:
+    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"
     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:
-        return f'<img class="{cls}" src="{uri}" alt="{escape(alt)}" />'
-    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>'
+    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)}" />'
+
+# ========= CSS (driven from THEME) =========
+strip = THEME["strip"]; page = THEME["page"]; hero = THEME["hero"]
+grid  = THEME["grid"];  card = THEME["card"];  icon = THEME["icon"]; button = THEME["button"]
+
+bg_radial_css = """
+background:
+  radial-gradient(980px 460px at 50% -140px,
+    rgba(2,12,30,0.06) 0%,
+    rgba(2,12,30,0.04) 28%,
+    rgba(255,255,255,0.98) 60%,
+    rgba(255,255,255,1) 100%);
+""" if page["bg_radial"] else "background: #fff;"
+
+st.markdown(f"""
+<style>
+  :root {{
+    --top-pad: {page["top_padding"]}px;
+
+    --strip-gap: {strip["gap"]}px;
+    --strip-row-mb: {strip["below_gap"]}px;
+    --strip-pill-pv: {strip["pill_pad_v"]}px;
+    --strip-pill-ph: {strip["pill_pad_h"]}px;
+    --strip-pill-fs: {strip["pill_font"]}px;
+    --tagline-fs: {strip["tagline_font"]}px;
+
+    --hero-w: {hero["width"]}px;
+    --hero-mb: {hero["margin_bottom"]}px;
+
+    --grid-gap: {grid["gap"]}px;
+    --card-w: {grid["card_width"]}px;
+    --card-r: {card["radius"]}px;
+    --card-bw: {card["border_width"]}px;
+    --card-pv: {card["pad_v"]}px;
+    --card-ph: {card["pad_h"]}px;
+
+    --icon-d: {icon["diam"]}px;
+    --icon-img: {icon["img"]}px;
+
+    --stripBg1: {strip["bg1"]};
+    --stripBg2: {strip["bg2"]};
+    --stripText: {strip["text"]};
+    --taglineColor: {strip["tagline_color"]};
 
-# ========= HERO =========
+    --cardStroke: {card["border"]};
+    --cardStrokeHover: {card["border_hover"]};
+
+    --btn1: {button["bg1"]};
+    --btn2: {button["bg2"]};
+    --btnText: {button["text"]};
+    --btnBorder: {button["border"]};
+  }}
+
+  html, body, [data-testid="stAppViewContainer"] {{ height: 100%; }}
+  [data-testid="stAppViewContainer"] > .main {{ padding-top: 0 !important; padding-bottom: 0 !important; }}
+
+  .block-container {{
+    max-width: {page["container_width"]}px;
+    min-height: 100vh;
+    display: flex; flex-direction: column;
+    gap: 14px;
+    padding: var(--top-pad) 0 28px !important;
+    {bg_radial_css}
+  }}
+
+  /* ===== TOP-LEFT STRIP ===== */
+  .suite-row {{
+    display:flex; align-items:center; gap: var(--strip-gap);
+    justify-content:flex-start; flex-wrap: wrap;
+    margin: 0 0 var(--strip-row-mb) 0;
+  }}
+  .suite-pill {{
+    background: linear-gradient(90deg, var(--stripBg1) 0%, var(--stripBg2) 100%);
+    color: var(--stripText);
+    padding: var(--strip-pill-pv) var(--strip-pill-ph);
+    border-radius: 999px;
+    font-weight: 800; letter-spacing: .25px;
+    font-size: var(--strip-pill-fs);
+    box-shadow: 0 6px 14px rgba(2,12,30,.18);
+    white-space: nowrap;
+  }}
+  .suite-tagline {{
+    color: var(--taglineColor); font-weight: 600; opacity: .95;
+    font-size: var(--tagline-fs);
+    white-space: nowrap;
+  }}
+
+  /* ===== HERO ===== */
+  .hero {{ text-align:center; margin: 0 0 var(--hero-mb); }}
+  .hero img {{
+    width: var(--hero-w); max-width: 92vw; height: auto;
+    display:block; margin: 0 auto var(--hero-mb);
+    filter: drop-shadow(0 6px 16px rgba(0,0,0,.10));
+  }}
+
+  /* ===== GRID ===== */
+  .grid {{
+    display: grid;
+    grid-template-columns: repeat(3, var(--card-w));
+    gap: var(--grid-gap);
+    justify-content: center; align-items: stretch;
+    margin-top: 10px;
+  }}
+  @media (max-width: 1120px) {{
+    .grid {{ grid-template-columns: repeat(2, var(--card-w)); gap: calc(var(--grid-gap) - 12px); }}
+  }}
+  @media (max-width: 720px) {{
+    .grid {{ grid-template-columns: 1fr; }}
+  }}
+
+  /* ===== CARD ===== */
+  .card {{
+    position: relative;
+    width: var(--c-w, var(--card-w));
+    border-radius: var(--c-radius, var(--card-r));
+    padding: var(--c-pv, var(--card-pv)) var(--c-ph, var(--card-ph));
+    background: linear-gradient(180deg, var(--c-bg-top, {card["bg_top"]}) 0%, var(--c-bg-bot, {card["bg_bot"]}) 100%);
+    border: var(--c-bw, var(--card-bw)) solid var(--c-border, var(--cardStroke));
+    /* Softer inner highlights → color shows more, keeps 3D */
+    box-shadow:
+      0 14px 32px rgba(2,20,35,.12),
+      0 1px 0 rgba(255,255,255,0.70) inset,
+      0 -1px 6px rgba(255,255,255,0.18) inset;
+    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
+    text-align:center; display:flex; flex-direction:column; gap:16px; align-items: center;
+  }}
+  .card:hover {{
+    transform: translateY(-6px) scale(1.01);
+    border-color: var(--cardStrokeHover);
+    box-shadow:
+      0 22px 56px rgba(2,20,35,.18),
+      0 1px 0 rgba(255,255,255,0.82) inset,
+      0 -1px 10px rgba(255,255,255,0.28) inset;
+    filter: saturate(1.03);
+  }}
+
+  .icon-wrap {{
+    width: var(--c-icon-d, {icon["diam"]}px); height: var(--c-icon-d, {icon["diam"]}px);
+    border-radius: 9999px; display:grid; place-items:center;
+    background: var(--c-icon-bg, {icon["circle_bg"]});
+    border: 1px solid var(--c-icon-border, {icon["circle_border"]});
+    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 22px rgba(2,20,35,.07);
+  }}
+  .icon-wrap img {{
+    width: var(--c-icon-img, {icon["img"]}px); height: var(--c-icon-img, {icon["img"]}px);
+    border-radius:9999px; display:block;
+  }}
+
+  .card h3 {{
+    margin: 0; font-size: 25px; font-weight: 900;
+    color: {card["title_color"]}; letter-spacing: .15px;
+  }}
+  .card p {{
+    color: {card["blurb_color"]}; min-height: 40px; margin: 0 10px; font-size: 16px;
+  }}
+
+  .btn {{
+    display:inline-block; padding: {button["pad_v"]}px {button["pad_h"]}px;
+    border-radius: {button["radius"]}px;
+    border: 1px solid {button["border"]};
+    background: linear-gradient(180deg, {button["bg1"]} 0%, {button["bg2"]} 100%);
+    font-weight: 800; letter-spacing:.3px; font-size: 16px;
+    margin: 6px auto 0;
+    box-shadow: 0 12px 28px rgba(11,18,32,.28), inset 0 1px 0 rgba(255,255,255,.10);
+    color: {button["text"]};
+    text-decoration: none;
+  }}
+  a.btn, a.btn:link, a.btn:visited, a.btn:hover, a.btn:active, a.btn:focus {{
+    color: {button["text"]} !important; text-decoration: none !important;
+  }}
+  .btn:hover {{
+    filter: brightness(1.03) saturate(1.04);
+    transform: translateY(-1px);
+    box-shadow: 0 16px 38px rgba(11,18,32,.36);
+  }}
+
+  .footer {{ text-align:center; color:#3f4a5a; font-size:0.96em; margin-top: 26px; }}
+  .footer hr {{ margin: 12px 0; border-color: rgba(0,0,0,.08); }}
+</style>
+""", unsafe_allow_html=True)
+
+# ========= Strip (top-left) =========
 st.markdown(
-    '<div class="hero">'
-    + (img_tag(LOGO_PATH, "logo", "") if LOGO_PATH.exists() else "")
-    + f"<h1>{escape(COMPANY_NAME)}</h1>"
-    + f"<p>{escape(TAGLINE)}</p>"
-    + "</div>",
+    f"""
+    <div class="suite-row">
+      <span class="suite-pill">{"ST_LOG SUITE"}</span>
+      <span class="suite-tagline">{"Generating AI-Based Well Logging Profiles While Drilling"}</span>
+    </div>
+    """,
     unsafe_allow_html=True,
 )
 
-# ========= CARDS =========
-def app_card(app: dict) -> str:
-    target = "_blank" if OPEN_IN_NEW_TAB else "_self"
-    style  = f"--card-bg:{app.get('bg','#fff')}; --card-border:{app.get('border','rgba(0,0,0,.06)')};"
+# ========= Hero =========
+hero_html = img_tag(THEME["hero"]["logo"], "ST_LOG SUITE")
+st.markdown(f"<div class='hero'>{hero_html}</div>", unsafe_allow_html=True)
+
+# ========= Cards =========
+def build_card_vars(style: Dict[str, Any]) -> str:
+    s = []
+    if "width"        in style: s.append(f"--c-w:{int(style['width'])}px")
+    if "radius"       in style: s.append(f"--c-radius:{int(style['radius'])}px")
+    if "pad_v"        in style: s.append(f"--c-pv:{int(style['pad_v'])}px")
+    if "pad_h"        in style: s.append(f"--c-ph:{int(style['pad_h'])}px")
+    if "bg_top"       in style: s.append(f"--c-bg-top:{style['bg_top']}")
+    if "bg_bot"       in style: s.append(f"--c-bg-bot:{style['bg_bot']}")
+    if "border"       in style: s.append(f"--c-border:{style['border']}")
+    if "border_width" in style: s.append(f"--c-bw:{int(style['border_width'])}px")
+    if "title_color"  in style: s.append(f"--c-title-color:{style['title_color']}")
+    if "title_fs"     in style: s.append(f"--c-title-fs:{int(style['title_fs'])}px")
+    if "blurb_color"  in style: s.append(f"--c-blurb-color:{style['blurb_color']}")
+    if "blurb_fs"     in style: s.append(f"--c-blurb-fs:{int(style['blurb_fs'])}px")
+    if "btn_bg1"      in style: s.append(f"--c-btn-bg1:{style['btn_bg1']}")
+    if "btn_bg2"      in style: s.append(f"--c-btn-bg2:{style['btn_bg2']}")
+    if "btn_text"     in style: s.append(f"--c-btn-text:{style['btn_text']}")
+    if "btn_border"   in style: s.append(f"--c-btn-border:{style['btn_border']}")
+    if "btn_fs"       in style: s.append(f"--c-btn-fs:{int(style['btn_fs'])}px")
+    if "btn_pad_v"    in style: s.append(f"--c-btn-pv:{int(style['btn_pad_v'])}px")
+    if "btn_pad_h"    in style: s.append(f"--c-btn-ph:{int(style['btn_pad_h'])}px")
+    if "icon_diam"    in style: s.append(f"--c-icon-d:{int(style['icon_diam'])}px")
+    if "icon_img"     in style: s.append(f"--c-icon-img:{int(style['icon_img'])}px")
+    if "icon_bg"      in style: s.append(f"--c-icon-bg:{style['icon_bg']}")
+    if "icon_border"  in style: s.append(f"--c-icon-border:{style['icon_border']}")
+    return "; ".join(s)
+
+def app_card(card_cfg: Dict[str, Any]) -> str:
+    style = card_cfg.get("style", {})
+    vars_inline = build_card_vars(style)
+    icon_html = img_tag(card_cfg.get("icon"), "icon") if card_cfg.get("icon") and card_cfg["icon"].exists() else ""
+    target = "_self"
     return (
-        f"<div class='card' style='{style}'>"
-        + img_tag(app["thumb"], app["title"], "thumb")
-        + f"<h3>{escape(app['title'])}</h3>"
-        + f"<p>{escape(app['blurb'])}</p>"
-        + f"<a class='btn' href='{escape(app['url'])}' target='{target}'>{escape(BUTTON_TEXT)}</a>"
+        f"<div class='card' style='{vars_inline}'>"
+        + f"<div class='icon-wrap'>{icon_html}</div>"
+        + f"<h3>{escape(card_cfg['title'])}</h3>"
+        + f"<p>{escape(card_cfg['blurb'])}</p>"
+        + f"<a class='btn' href='{escape(card_cfg['url'])}' target='{target}' rel='noopener'>Run App</a>"
         + "</div>"
     )
 
-# Render 3 cards side-by-side
-st.markdown("<div class='grid'>" + app_card(APP1) + app_card(APP2) + app_card(APP3) + "</div>", unsafe_allow_html=True)
+st.markdown("<div class='grid'>" + "".join(app_card(c) for c in CARDS) + "</div>", unsafe_allow_html=True)
 
-# ========= FOOTER (compact; no extra spacing) =========
+# ========= Footer =========
 st.markdown(
     """
     <hr>