Update app.py

app.py

@@ -9,9 +9,9 @@ BASE_DIR = Path(__file__).parent
 ASSETS   = BASE_DIR / "assets"
 
 # ========= CONTROLS =========
-HERO_LOGO_SIZE     = 172
-TOP_SPACER         = 140
-GRID_GAP           = 48
+HERO_LOGO_SIZE     = 168
+TOP_SPACER         = 120
+GRID_GAP           = 40
 BUTTON_TEXT        = "Open App"
 OPEN_IN_NEW_TAB    = False
 
@@ -19,15 +19,15 @@ OPEN_IN_NEW_TAB    = False
 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
+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 tiny glyph (24–32px)
+    "icon":  ASSETS / "app1_icon.png",   # optional 24–32px glyph
 }
 APP2 = {
     "title": "ST_Log_Sonic (Ts)",
@@ -44,20 +44,16 @@ APP3 = {
 
 LOGO_PATH = ASSETS / "logo.png"
 
-# ========= PAGE META (set first) =========
+# ========= 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")
 
-# Quick debug line so you can confirm the script rendered
-st.caption("✅ Page loaded. If you ever see a blank page, this line helps diagnose execution.")
-
 # ========= 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"
     b64 = base64.b64encode(path.read_bytes()).decode("utf-8")
     return f"data:{mime};base64,{b64}"
 
@@ -66,66 +62,33 @@ 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)}" />'
-    # simple fallback if missing
-    return f'<div class="{cls}" style="display:flex;align-items:center;justify-content:center;color:#50545c;background:#eef2f7;border-radius:8px;">{escape(alt)}</div>'
-
-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;display:block;'>" 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>
-    """
+    return f'<div class="{cls}" style="display:flex;align-items:center;justify-content:center;color:#6b7280;background:#eef2f7;border-radius:8px;">{escape(alt)}</div>'
 
-# ========= BACKGROUND (simple & safe) =========
-# No images, no complex CSS: just a soft gradient + very faint SVG grid pattern
-def inject_subtle_bg() -> None:
-    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>"
-    )
-
-    st.markdown(f"""
-    <style>
-      /* Base gradient */
-      .stApp {{
-        position: relative !important;
-        background:
-          radial-gradient(900px 420px at 50% 0%,
-            rgba(20,184,166,0.12) 0%,
-            rgba(14,116,144,0.08) 32%,
-            rgba(255,255,255,0.94) 70%,
-            rgba(255,255,255,1) 100%) !important;
-      }}
-      /* Faint pattern on top of the gradient */
-      .stApp::before {{
-        content: "";
-        position: fixed; inset: 0; z-index: 0;
-        background-image: url("{pattern_svg}");
-        opacity: .45;
-        pointer-events: none;
-      }}
-      /* Ensure all content sits above */
-      .stApp > * {{ position: relative; z-index: 1; }}
-
-      [data-testid="stAppViewContainer"],
-      [data-testid="stAppViewContainer"] > .main,
-      html, body {{
-        background: transparent !important;
-      }}
-    </style>
-    """, unsafe_allow_html=True)
+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 ""
 
-inject_subtle_bg()
+# ========= BACKGROUND (calm gradient) =========
+st.markdown(f"""
+<style>
+  .stApp {{
+    position: relative !important;
+    background:
+      radial-gradient(1200px 520px at 50% -80px,
+        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;
+  }}
+</style>
+""", unsafe_allow_html=True)
 
-# ========= CORE CSS (lean & reliable) =========
+# ========= CORE CSS =========
 st.markdown(
     f"""
     <style>
@@ -147,102 +110,99 @@ st.markdown(
         display: flex; flex-direction: column;
         justify-content: flex-start;
         gap: 14px;
-        padding: var(--top-spacer) 0 16px !important;
+        padding: var(--top-spacer) 0 20px !important;
       }}
 
       /* HERO */
-      .hero {{ text-align:center; margin: 0 0 6px; }}
+      .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,.10));
+        filter: drop-shadow(0 4px 14px rgba(0,0,0,.08));
       }}
       .hero h1 {{
-        font-size: 2.4rem; line-height: 1.15; margin: .25rem 0 .25rem;
-        letter-spacing: .3px;
-        color: #0F172A;
+        font-size: 2.4rem; line-height: 1.15; margin: .25rem 0 .15rem;
+        letter-spacing: .2px; color: #0F172A;
       }}
       .hero p  {{
-        color: #364152;
-        margin: 6px auto 0;
-        max-width: 720px;
-        font-style: italic;
+        color: #445066; margin: 2px auto 10px; max-width: 720px; font-style: italic;
       }}
 
-      /* SUITE BANNER */
+      /* SUITE BANNER (lighter) */
       .suite-banner {{
         display:flex; gap:12px; justify-content:center; align-items:center;
-        margin: 10px 0 12px;
+        margin: 4px 0 16px;
       }}
       .suite-pill {{
         background: linear-gradient(90deg, var(--brand) 0%, var(--brand2) 100%);
-        color:#fff; padding:8px 12px; border-radius:999px;
+        color:#fff; padding:7px 12px; border-radius:999px;
         font-weight:700; letter-spacing:.2px;
-        box-shadow: 0 8px 18px rgba(14,116,144,.25);
+        box-shadow: 0 6px 14px rgba(14,116,144,.22);
       }}
       .suite-sub {{
-        color:#334155; font-weight:500; opacity:.95;
+        color:#3b4656; font-weight:500; opacity:.92;
       }}
 
       /* GRID (3 → 2 → 1) */
       .grid {{
         display: grid;
-        grid-template-columns: repeat(3, 260px);
-        gap: 48px;
+        grid-template-columns: repeat(3, 280px);
+        gap: var(--grid-gap);
         justify-content: center;
         align-items: stretch;
-        margin-top: 24px;
+        margin-top: 8px;
       }}
-      @media (max-width: 1024px) {{
-        .grid {{ grid-template-columns: repeat(2, 260px); gap: 36px; }}
+      @media (max-width: 1040px) {{
+        .grid {{ grid-template-columns: repeat(2, 280px); gap: 28px; }}
       }}
-      @media (max-width: 620px) {{
+      @media (max-width: 640px) {{
         .grid {{ grid-template-columns: 1fr; }}
       }}
 
-      /* CARD */
+      /* CARD (clean + roomy) */
       .card {{
-        width: 260px;
-        background: rgba(255,255,255,0.94);
+        width: 280px;
+        background: #ffffff;
         border: 1px solid rgba(2,20,35,.06);
-        border-radius:16px; padding:16px 14px;
-        box-shadow: 0 6px 28px 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;
-        backdrop-filter: saturate(1.05) blur(2px);
       }}
       .card:hover {{
         transform: translateY(-4px);
-        box-shadow: 0 14px 40px rgba(2,20,35,.12);
-        border-color: rgba(14,116,144,0.22);
+        box-shadow: 0 16px 44px rgba(2,20,35,.12);
+        border-color: rgba(14,116,144,0.18);
       }}
 
-      /* BADGE (replaces large logos) */
-      .badge {{
-        width:100%;
-        display:flex; align-items:center; justify-content:flex-start;
-        gap:10px;
+      /* 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:10px 12px;
-        border-radius:12px;
-        box-shadow: 0 8px 18px rgba(14,116,144,.25);
+        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);
       }}
-      .badge-left {{
-        width:30px; height:30px;
-        display:grid; place-items:center;
-        background: rgba(255,255,255,.14);
-        border-radius:10px; overflow:hidden;
+      .chip .dot {{
+        width: 26px; height: 26px; border-radius: 8px;
+        background: rgba(255,255,255,.18);
+        display:grid; place-items:center; overflow:hidden;
       }}
-      .badge-left img {{ width:22px; height:22px; display:block; }}
-      .badge-right {{ font-weight:700; letter-spacing:.2px; }}
+      .chip .dot img {{ width:18px; height:18px; display:block; }}
 
       .card h3 {{
-        margin: 10px 0 0; font-size: 1.06rem; font-weight: 800; color:#0b1220;
+        margin: 8px 0 0; font-size: 1.05rem; font-weight: 800; color:#0b1220;
       }}
       .card p {{
-        color:#495464; min-height: 32px; margin: 6px 6px 0; font-size: .95rem;
+        color:#536071; min-height: 32px; margin: 4px 8px 0; font-size: .96rem;
       }}
 
       /* BUTTON */
@@ -251,17 +211,17 @@ st.markdown(
         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: 8px auto 0;
-        box-shadow: 0 6px 18px rgba(20,184,166,.28);
+        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 10px 26px rgba(20,184,166,.35);
+        box-shadow: 0 12px 28px rgba(20,184,166,.34);
       }}
 
-      .footer {{ text-align:center; color:#334155; font-size:0.98em; margin-top: 18px; }}
-      .footer hr {{ margin: 10px 0; border-color: rgba(0,0,0,.08); }}
+      .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,
@@ -292,12 +252,22 @@ st.markdown(
 )
 
 # ========= CARDS =========
+def card_chip(icon_path: Path | None) -> str:
+    icon_html = f"{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>
+    """
+
 def app_card(app: dict) -> str:
     target = "_blank" if OPEN_IN_NEW_TAB else "_self"
-    header = card_header_badge(app.get("icon"), SUITE_NAME)
     return (
         f"<div class='card'>"
-        + header
+        + 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>"