Update app.py

app.py

@@ -7,51 +7,39 @@ import streamlit as st
 BASE_DIR = Path(__file__).parent          # -> Landing_Page/
 ASSETS   = BASE_DIR / "assets"            # -> Landing_Page/assets/
 
-# ========= CONTROLS (tweak these) =========
+# ========= CONTROLS =========
 HERO_LOGO_SIZE     = 172    # px
-TOP_SPACER         = 140    # px (more breathing room at top)
-CARD_WIDTH         = 260    # px (leaner cards)
-CARD_THUMB_HEIGHT  = 120    # px (smaller thumbs)
-GRID_GAP           = 48     # px (more but tighter than 100 when cards are smaller)
+TOP_SPACER         = 140    # px
+GRID_GAP           = 48     # px
 BUTTON_TEXT        = "Open App"
 OPEN_IN_NEW_TAB    = False
 
-# Background image
-BACKGROUND_IMAGE   = ASSETS / "bg.png"
-BACKGROUND_OPACITY = 0.18   # keep subtle; text stays readable
-BACKGROUND_BLUR_PX = 3      # add slight blur to reduce busyness
-
-# ========= BRAND / APPS =========
+# BRAND (use a distinct color per suite to differentiate pages)
 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 color (brand)
-ACCENT       = "#0E7490"    # teal-ish
-ACCENT_SOFT  = "rgba(14,116,144,0.12)"
-
+# ========= APPS =========
 APP1 = {
     "title": "ST_Log_GR",
     "url":   "https://smart-thinking-gr.hf.space/",
-    "thumb": ASSETS / "app1.png",
-    "blurb": "Real-time gamma ray log prediction.",
-    "bg":    "#FBFDFE",
-    "border":"#D6EAF0",
+    "blurb": "Real-time gamma-ray log prediction.",
+    "icon":  ASSETS / "app1_icon.png",    # tiny glyph (optional)
 }
 APP2 = {
     "title": "ST_Log_Sonic (Ts)",
     "url":   "https://smart-thinking-sonic-ts.hf.space",
-    "thumb": ASSETS / "app2.png",
     "blurb": "Predict shear slowness (ΔtS) in real time.",
-    "bg":    "#FAFFFB",
-    "border":"#DAF0D9",
+    "icon":  ASSETS / "app2_icon.png",
 }
 APP3 = {
     "title": "ST_Log_Sonic (Tc)",
     "url":   "https://smart-thinking-sonic-tc.hf.space",
-    "thumb": ASSETS / "app3.png",
     "blurb": "Predict compressional slowness (ΔtC) in real time.",
-    "bg":    "#FCFBFF",
-    "border":"#E4DAF0",
+    "icon":  ASSETS / "app3_icon.png",
 }
 
 LOGO_PATH = ASSETS / "logo.png"
@@ -60,78 +48,77 @@ LOGO_PATH = ASSETS / "logo.png"
 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")
 
-# ========= IMAGE HELPERS =========
+# ========= HELPERS =========
 def data_uri(path: Path) -> str | None:
-    if not path.exists(): return 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"
     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 = "") -> str:
     uri = data_uri(path)
     if uri:
-        return f'<img class="{cls}" src="{uri}" alt="{escape(alt)}" />'
+        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>'
 
-# ========= BACKGROUND (robust) =========
-def inject_background(image_path: Path, opacity: float = 0.15, blur_px: int = 0) -> None:
-    uri = data_uri(image_path)
-    if not uri:
-        st.caption(f"Background image not found: {image_path}")
-        return
+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 ""
+    return f"""
+    <div class="badge">
+      <div class="badge-left">{icon_html}</div>
+      <div class="badge-right">{escape(suite_label)}</div>
+    </div>
+    """
+
+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()
+
     st.markdown(f"""
     <style>
-      :root {{
-        --bg-opacity: {max(0.0, min(opacity, 1.0))};
-      }}
-
       .stApp {{
-        position: relative !important;
-        background: transparent !important;
+        position: relative;
+        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%,
+            rgba(255,255,255,1) 100%) !important;
       }}
-      [data-testid="stAppViewContainer"],
-      [data-testid="stAppViewContainer"] > .main,
-      html, body {{
-        background: transparent !important;
-      }}
-
-      /* background layer */
       .stApp::before {{
         content: "";
-        position: fixed;
-        inset: 0;
-        z-index: 0;
-        background-image: url('{uri}');
-        background-size: cover;
-        background-position: center;
-        background-repeat: no-repeat;
-        opacity: var(--bg-opacity);
-        filter: blur({int(blur_px)}px) saturate(0.9) brightness(1.02);
-        pointer-events: none;
-      }}
-
-      /* gradient veil for better readability */
-      .stApp::after {{
-        content: "";
-        position: fixed;
-        inset: 0;
-        z-index: 0;
-        background: radial-gradient(ellipse at center,
-                    rgba(255,255,255,0.75) 0%,
-                    rgba(255,255,255,0.55) 40%,
-                    rgba(255,255,255,0.35) 70%,
-                    rgba(255,255,255,0.15) 100%);
+        position: fixed; inset: 0; z-index: 0;
+        background-image: url("{pattern_svg}");
+        opacity: .6;
         pointer-events: none;
       }}
-
-      /* Ensure all content is above the bg */
       .stApp > * {{ position: relative; z-index: 1; }}
+      [data-testid="stAppViewContainer"], [data-testid="stAppViewContainer"] > .main,
+      html, body {{ background: transparent !important; }}
     </style>
     """, unsafe_allow_html=True)
 
-inject_background(BACKGROUND_IMAGE, BACKGROUND_OPACITY, BACKGROUND_BLUR_PX)
+# Apply subtle background
+inject_subtle_bg()
 
 # ========= CORE CSS =========
 st.markdown(
@@ -139,10 +126,11 @@ st.markdown(
     <style>
       :root {{
         --top-spacer: {TOP_SPACER}px;
-        --card-width: {CARD_WIDTH}px;  /* we'll override to fixed 260 below */
         --grid-gap: {GRID_GAP}px;
         --grid-top-space: 28px;
         --brand: {ACCENT};
+        --brand2: {ACCENT_END};
+        --brandSoft: {ACCENT_SOFT};
       }}
 
       html, body, [data-testid="stAppViewContainer"] {{ height: 100%; }}
@@ -158,7 +146,7 @@ st.markdown(
       }}
 
       /* HERO */
-      .hero {{ text-align:center; margin: 0 0 18px; }}
+      .hero {{ text-align:center; margin: 0 0 6px; }}
       .hero img {{
         width: {HERO_LOGO_SIZE}px; max-width: 95vw; height: auto;
         display:block; margin: 0 auto 8px;
@@ -177,7 +165,22 @@ st.markdown(
         font-style: italic;
       }}
 
-      /* GRID */
+      /* SUITE BANNER */
+      .suite-banner {{
+        display:flex; gap:12px; justify-content:center; align-items:center;
+        margin: 10px 0 12px;
+      }}
+      .suite-pill {{
+        background: linear-gradient(90deg, var(--brand) 0%, var(--brand2) 100%);
+        color:#fff; padding:8px 12px; border-radius:999px;
+        font-weight:700; letter-spacing:.2px;
+        box-shadow: 0 8px 18px rgba(14,116,144,.25);
+      }}
+      .suite-sub {{
+        color:#334155; font-weight:500; opacity:.95;
+      }}
+
+      /* GRID (3 → 2 → 1) */
       .grid {{
         display: grid;
         grid-template-columns: repeat(3, 260px);
@@ -193,51 +196,56 @@ st.markdown(
         .grid {{ grid-template-columns: 1fr; }}
       }}
 
+      /* CARD */
       .card {{
         width: 260px;
-        background: color-mix(in oklab, white 88%, #f6fafe 12%);
-        border: 1px solid rgba(0,0,0,.06);
+        background: rgba(255,255,255,0.9);
+        border: 1px solid rgba(2,20,35,.06);
         border-radius:18px; 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;
         align-items: center;
-        backdrop-filter: saturate(1.1) blur(2px);
+        backdrop-filter: saturate(1.05) blur(2px);
       }}
       .card:hover {{
         transform: translateY(-4px);
         box-shadow: 0 14px 40px rgba(2,20,35,.12);
-        border-color: {ACCENT_SOFT};
+        border-color: var(--brandSoft);
       }}
 
-      .thumb {{
-        width: 100%;
-        height: {CARD_THUMB_HEIGHT}px;
-        border-radius:14px;
-        border:1px solid rgba(0,0,0,.04);
-        object-fit: contain;
-        background:#fff;
+      /* BADGE (replaces bulky logos) */
+      .badge {{
+        width:100%;
+        display:flex; align-items:center; justify-content:flex-start;
+        gap:10px;
+        background: linear-gradient(90deg, var(--brand) 0%, var(--brand2) 100%);
+        color:#fff;
+        padding:10px 12px;
+        border-radius:12px;
+        box-shadow: 0 8px 18px rgba(14,116,144,.25);
       }}
+      .badge-left {{
+        width:30px; height:30px;
+        display:grid; place-items:center;
+        background: rgba(255,255,255,.14);
+        border-radius:10px; overflow:hidden;
+      }}
+      .badge-left img {{ width:22px; height:22px; display:block; }}
+      .badge-right {{ font-weight:700; letter-spacing:.2px; }}
 
       .card h3 {{
-        margin: 6px 0 0;
-        font-size: 1.05rem;
-        font-weight: 700;
-        letter-spacing: .2px;
-        color: #0b1220;
+        margin: 10px 0 0; font-size: 1.06rem; font-weight: 800; color:#0b1220;
       }}
       .card p {{
-        color:#495464;
-        min-height: 34px;
-        margin: 4px 8px 0;
-        font-size: .95rem;
+        color:#495464; min-height: 32px; margin: 6px 6px 0; font-size: .95rem;
       }}
 
-      /* Brand gradient button */
+      /* BUTTON (brand gradient) */
       .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, {ACCENT} 0%, #14B8A6 100%);
+        background: linear-gradient(90deg, var(--brand) 0%, var(--brand2) 100%);
         color: white; font-weight: 600; letter-spacing:.2px;
         margin: 8px auto 0;
         box-shadow: 0 6px 18px rgba(20,184,166,.28);
@@ -265,21 +273,38 @@ st.markdown(
     unsafe_allow_html=True,
 )
 
+# ========= SUITE BANNER (differentiates this page) =========
+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,
+)
+
 # ========= 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)')};"
-    # Leaner cards: keep thumb (icon) but smaller; concise description
+    header = card_header_badge(app.get("icon"), SUITE_NAME)
     return (
-        f"<div class='card' style='{style}'>"
-        + img_tag(app['thumb'], app['title'], "thumb")
+        f"<div class='card'>"
+        + header
         + 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>"
         + "</div>"
     )
 
-st.markdown("<div class='grid'>" + app_card(APP1) + app_card(APP2) + app_card(APP3) + "</div>", unsafe_allow_html=True)
+st.markdown(
+    "<div class='grid'>"
+    + app_card(APP1)
+    + app_card(APP2)
+    + app_card(APP3)
+    + "</div>",
+    unsafe_allow_html=True,
+)
 
 # ========= FOOTER =========
 st.markdown(