Update app.py

app.py

@@ -8,45 +8,50 @@ 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         = 160   # px
-CARD_WIDTH         = 300   # px
-CARD_THUMB_HEIGHT  = 180   # px
-GRID_GAP           = 100   # px
-BUTTON_TEXT        = "Click to Run APP"
+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)
+BUTTON_TEXT        = "Open App"
 OPEN_IN_NEW_TAB    = False
 
-# NEW: Background image controls
-BACKGROUND_IMAGE   = ASSETS / "bg.png"    # <-- put your background image here
-BACKGROUND_OPACITY = 0.3                 # 0.0 (invisible) ... 1.0 (fully opaque)
+# 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 =========
 COMPANY_NAME = "Smart Thinking - Logging"
 TAGLINE      = "We Deliver Smart AI-Based Solutions For O&G Industry"
 
+# Accent color (brand)
+ACCENT       = "#0E7490"    # teal-ish
+ACCENT_SOFT  = "rgba(14,116,144,0.12)"
+
 APP1 = {
     "title": "ST_Log_GR",
     "url":   "https://smart-thinking-gr.hf.space/",
     "thumb": ASSETS / "app1.png",
-    "blurb": "Real-Time GR Logging Prediction",
-    "bg":    "#F7FBFF",
-    "border":"#713F12",
+    "blurb": "Real-time gamma ray log prediction.",
+    "bg":    "#FBFDFE",
+    "border":"#D6EAF0",
 }
 APP2 = {
     "title": "ST_Log_Sonic (Ts)",
     "url":   "https://smart-thinking-sonic-ts.hf.space",
     "thumb": ASSETS / "app2.png",
-    "blurb": "Real-Time Shear Slowness Logging Prediction",
-    "bg":    "#F6FFF7",
-    "border":"#713F12",
+    "blurb": "Predict shear slowness (ΔtS) in real time.",
+    "bg":    "#FAFFFB",
+    "border":"#DAF0D9",
 }
 APP3 = {
     "title": "ST_Log_Sonic (Tc)",
     "url":   "https://smart-thinking-sonic-tc.hf.space",
     "thumb": ASSETS / "app3.png",
-    "blurb": "Real-Time Compression Slowness Logging Prediction",
-    "bg":    "#F9F6FF",
-    "border":"#713F12",
+    "blurb": "Predict compressional slowness (ΔtC) in real time.",
+    "bg":    "#FCFBFF",
+    "border":"#E4DAF0",
 }
 
 LOGO_PATH = ASSETS / "logo.png"
@@ -67,157 +72,184 @@ 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)}" />'
+    # 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>'
 
-# ========= NEW: BACKGROUND INJECTION =========
-def inject_background(image_path: Path, opacity: float = 0.12) -> None:
-    """
-    Paint a page-wide background image with adjustable opacity.
-    Works across Streamlit versions by targeting .stApp and the view container.
-    """
+# ========= 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:
-        # Optional: small on-screen hint to confirm path issues
         st.caption(f"Background image not found: {image_path}")
         return
-
     st.markdown(f"""
     <style>
       :root {{
         --bg-opacity: {max(0.0, min(opacity, 1.0))};
       }}
 
-      /* Make sure the app root can host a positioned overlay */
       .stApp {{
         position: relative !important;
         background: transparent !important;
       }}
-
-      /* Some Streamlit builds still use this container; keep it transparent */
-      [data-testid="stAppViewContainer"] {{
-        background: transparent !important;
-      }}
-
-      /* Main content area should not paint over the background */
-      [data-testid="stAppViewContainer"] > .main {{
-        background: transparent !important;
-      }}
-
+      [data-testid="stAppViewContainer"],
+      [data-testid="stAppViewContainer"] > .main,
       html, body {{
         background: transparent !important;
       }}
 
-      /* Background overlay inside .stApp so it always sits behind content */
+      /* background layer */
       .stApp::before {{
         content: "";
-        position: fixed;   /* fixed to viewport */
+        position: fixed;
         inset: 0;
-        z-index: 0;        /* below all content we'll raise to 1 */
+        z-index: 0;
         background-image: url('{uri}');
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
         opacity: var(--bg-opacity);
-        filter: saturate(0.9) brightness(1.05);  /* add blur(2px) if desired */
-        pointer-events: none; /* never intercept clicks */
+        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%);
+        pointer-events: none;
       }}
 
-      /* Ensure all Streamlit content stacks above the bg */
+      /* Ensure all content is above the bg */
       .stApp > * {{ position: relative; z-index: 1; }}
     </style>
     """, unsafe_allow_html=True)
 
-# Apply background (safe no-op if image is missing)
-inject_background(BACKGROUND_IMAGE, BACKGROUND_OPACITY)
+inject_background(BACKGROUND_IMAGE, BACKGROUND_OPACITY, BACKGROUND_BLUR_PX)
 
-# ========= CSS (layout & components) =========
+# ========= CORE CSS =========
 st.markdown(
     f"""
     <style>
       :root {{
         --top-spacer: {TOP_SPACER}px;
-        --card-width: {CARD_WIDTH}px;
+        --card-width: {CARD_WIDTH}px;  /* we'll override to fixed 260 below */
         --grid-gap: {GRID_GAP}px;
-        --tagline-gap: 0px;
-        --grid-top-space: 20px;
+        --grid-top-space: 28px;
+        --brand: {ACCENT};
       }}
 
       html, body, [data-testid="stAppViewContainer"] {{ height: 100%; }}
       [data-testid="stAppViewContainer"] > .main {{ padding-top: 0 !important; padding-bottom: 0 !important; }}
+
       .block-container {{
-        max-width: 1120px;
+        max-width: 1080px;
         min-height: 100vh;
         display: flex; flex-direction: column;
-        justify-content: center;
-        gap: 10px;
-        padding: var(--top-spacer) 0 8px !important;
+        justify-content: flex-start;
+        gap: 14px;
+        padding: var(--top-spacer) 0 16px !important;
       }}
 
       /* HERO */
-      .hero {{ text-align:center; margin: 0 0 8px; }}
+      .hero {{ text-align:center; margin: 0 0 18px; }}
       .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));
+        filter: drop-shadow(0 4px 14px rgba(0,0,0,.10));
+      }}
+      .hero h1 {{
+        font-size: 2.6rem; line-height: 1.15; margin: .25rem 0 .25rem;
+        letter-spacing: .3px;
+        color: #0F172A;
+        text-shadow: 0 1px 0 rgba(255,255,255,.65);
       }}
-      .hero h1 {{ font-size: 2.3rem; margin: .2rem 0 0; }}
       .hero p  {{
-        color: #2b2f36;
-        margin: var(--tagline-gap) auto 0;
+        color: #364152;
+        margin: 6px auto 0;
         max-width: 720px;
         font-style: italic;
-        text-shadow: 0 1px 2px rgba(255,255,255,0.35); /* slight lift over bg */
       }}
 
       /* GRID */
       .grid {{
-        display: flex;
-        gap: var(--grid-gap);
+        display: grid;
+        grid-template-columns: repeat(3, 260px);
+        gap: 48px;
         justify-content: center;
         align-items: stretch;
-        flex-wrap: nowrap;
         margin-top: var(--grid-top-space);
       }}
-      @media (max-width: calc(3 * var(--card-width) + 2 * var(--grid-gap) + 64px)) {{
-        .grid {{ flex-wrap: wrap; }}
+      @media (max-width: 1024px) {{
+        .grid {{ grid-template-columns: repeat(2, 260px); gap: 36px; }}
+      }}
+      @media (max-width: 620px) {{
+        .grid {{ grid-template-columns: 1fr; }}
       }}
 
       .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,.08);
-        transition:transform .12s ease, box-shadow .12s ease;
+        width: 260px;
+        background: color-mix(in oklab, white 88%, #f6fafe 12%);
+        border: 1px solid rgba(0,0,0,.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: none; /* set to blur(2px) if you want frosted cards */
+        backdrop-filter: saturate(1.1) blur(2px);
+      }}
+      .card:hover {{
+        transform: translateY(-4px);
+        box-shadow: 0 14px 40px rgba(2,20,35,.12);
+        border-color: {ACCENT_SOFT};
       }}
-      .card:hover {{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.12); }}
 
       .thumb {{
         width: 100%;
         height: {CARD_THUMB_HEIGHT}px;
         border-radius:14px;
-        border:1px solid rgba(0,0,0,.06);
+        border:1px solid rgba(0,0,0,.04);
         object-fit: contain;
         background:#fff;
       }}
 
-      .card h3, .card p {{ text-align: center; width: 100%; }}
-      .card p {{ color:#5a5f6a; min-height:30px; margin:0 8px 2px; }}
+      .card h3 {{
+        margin: 6px 0 0;
+        font-size: 1.05rem;
+        font-weight: 700;
+        letter-spacing: .2px;
+        color: #0b1220;
+      }}
+      .card p {{
+        color:#495464;
+        min-height: 34px;
+        margin: 4px 8px 0;
+        font-size: .95rem;
+      }}
 
+      /* Brand gradient button */
       .btn {{
-        display:inline-block; padding:10px 14px; border-radius:12px;
-        border:1px solid #e5e7eb; text-decoration:none;
-        background:#f3f4f6; color:#111827; font-weight:500;
-        margin: 2px auto 0;
-        align-self: center;
+        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%);
+        color: white; font-weight: 600; letter-spacing:.2px;
+        margin: 8px auto 0;
+        box-shadow: 0 6px 18px rgba(20,184,166,.28);
+      }}
+      .btn:hover {{
+        filter: brightness(0.98) saturate(1.05);
+        transform: translateY(-1px);
+        box-shadow: 0 10px 26px rgba(20,184,166,.35);
       }}
-      .btn:hover {{ background:#e5e7eb; }}
 
-      .footer {{ text-align:center; color:#374151; font-size:1.0em; margin-top: 6px; }}
-      .footer hr {{ margin: 6px 0; }}
+      .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); }}
     </style>
     """,
     unsafe_allow_html=True,
@@ -237,12 +269,13 @@ st.markdown(
 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
     return (
         f"<div class='card' style='{style}'>"
-        + img_tag(app["thumb"], app["title"], "thumb")
+        + 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"<a class='btn' href='{escape(app['url'])}' target='{target}' rel='noopener'>{escape(BUTTON_TEXT)}</a>"
         + "</div>"
     )
 
@@ -258,4 +291,4 @@ st.markdown(
     </div>
     """,
     unsafe_allow_html=True,
-)
+)