Update app.py

app.py

@@ -9,12 +9,16 @@ ASSETS   = BASE_DIR / "assets"            # -> Landing_Page/assets/
 
 # ========= CONTROLS (tweak these) =========
 HERO_LOGO_SIZE     = 180   # px (top company logo size)
-TOP_SPACER         = 120   # 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)
+TOP_SPACER         = 120   # px
+CARD_WIDTH         = 300   # px
+CARD_THUMB_HEIGHT  = 180   # px
+GRID_GAP           = 100   # px
 BUTTON_TEXT        = "Click to Run APP"
-OPEN_IN_NEW_TAB    = False # True = open links in a new tab
+OPEN_IN_NEW_TAB    = False
+
+# NEW: Background image controls
+BACKGROUND_IMAGE   = ASSETS / "bg.jpg"    # <-- put your background image here
+BACKGROUND_OPACITY = 0.12                 # 0.0 (invisible) ... 1.0 (fully opaque)
 
 # ========= BRAND / APPS =========
 COMPANY_NAME = "Smart Thinking - Logging"
@@ -25,23 +29,23 @@ APP1 = {
     "url":   "https://smart-thinking-gr.hf.space/",
     "thumb": ASSETS / "app1.png",
     "blurb": "Real-Time GR Logging Prediction",
-    "bg":    "#F7FBFF",   # very light blue
-    "border":"#713F12",   # accent border
+    "bg":    "#F7FBFF",
+    "border":"#713F12",
 }
 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",   # very light green
+    "bg":    "#F6FFF7",
     "border":"#713F12",
 }
 APP3 = {
     "title": "ST_Log_Sonic (Tc)",
-    "url":   "https://smart-thinking-sonic-tc.hf.space",        # <-- replace with your Space URL
-    "thumb": ASSETS / "app3.png",           # <-- upload this image
+    "url":   "https://smart-thinking-sonic-tc.hf.space",
+    "thumb": ASSETS / "app3.png",
     "blurb": "Real-Time Compression Slowness Logging Prediction",
-    "bg":    "#F9F6FF",   # very light purple
+    "bg":    "#F9F6FF",
     "border":"#713F12",
 }
 
@@ -51,7 +55,60 @@ 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")
 
-# ========= CSS (fits one screen on desktop; centered titles & buttons) =========
+# ========= IMAGE HELPERS =========
+def data_uri(path: Path) -> str | None:
+    if not path.exists(): return None
+    mime, _ = mimetypes.guess_type(path.name)
+    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:
+    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>'
+
+# ========= NEW: BACKGROUND INJECTION =========
+def inject_background(image_path: Path, opacity: float = 0.12) -> None:
+    """
+    Paint a page-wide background image with adjustable opacity.
+    Uses a ::before layer attached to the Streamlit app container.
+    """
+    uri = data_uri(image_path)
+    if not uri:
+        return
+    # Tip: tweak filter() to taste (e.g., blur or desaturate for readability)
+    st.markdown(f"""
+    <style>
+      :root {{
+        --bg-opacity: {max(0.0, min(opacity, 1.0))};
+      }}
+      /* Full-page fixed background behind all content */
+      [data-testid="stAppViewContainer"]::before {{
+        content: "";
+        position: fixed;
+        inset: 0;
+        z-index: -1;
+        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 you want */
+      }}
+
+      /* Keep main container transparent to let the bg show through the gaps */
+      [data-testid="stAppViewContainer"] > .main {{
+        background: transparent !important;
+      }}
+    </style>
+    """, unsafe_allow_html=True)
+
+# Apply background (safe no-op if image is missing)
+inject_background(BACKGROUND_IMAGE, BACKGROUND_OPACITY)
+
+# ========= CSS (layout & components) =========
 st.markdown(
     f"""
     <style>
@@ -59,8 +116,8 @@ st.markdown(
         --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 */
+        --tagline-gap: 0px;
+        --grid-top-space: 20px;
       }}
 
       html, body, [data-testid="stAppViewContainer"] {{ height: 100%; }}
@@ -83,10 +140,11 @@ st.markdown(
       }}
       .hero h1 {{ font-size: 2.3rem; margin: .2rem 0 0; }}
       .hero p  {{
-        color: #5a5f6a;
+        color: #2b2f36;
         margin: var(--tagline-gap) auto 0;
         max-width: 720px;
         font-style: italic;
+        text-shadow: 0 1px 2px rgba(255,255,255,0.35); /* slight lift over bg */
       }}
 
       /* GRID */
@@ -95,7 +153,7 @@ st.markdown(
         gap: var(--grid-gap);
         justify-content: center;
         align-items: stretch;
-        flex-wrap: nowrap;             /* keep three across on desktop */
+        flex-wrap: nowrap;
         margin-top: var(--grid-top-space);
       }}
       @media (max-width: calc(3 * var(--card-width) + 2 * var(--grid-gap) + 64px)) {{
@@ -107,59 +165,42 @@ st.markdown(
         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);
+        box-shadow:0 4px 18px rgba(0,0,0,.08);
         transition:transform .12s ease, box-shadow .12s ease;
         text-align:center; display:flex; flex-direction:column; gap:10px;
-        align-items: center;                  /* center children horizontally */
+        align-items: center;
+        backdrop-filter: none; /* set to blur(2px) if you want frosted cards */
       }}
-      .card:hover {{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.08); }}
+      .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);
-        object-fit: contain;           /* show full image */
+        object-fit: contain;
         background:#fff;
       }}
 
-      .card h3, .card p {{
-        text-align: center;            /* center text */
-        width: 100%;
-      }}
+      .card h3, .card p {{ text-align: center; width: 100%; }}
       .card p {{ color:#5a5f6a; min-height:30px; margin:0 8px 2px; }}
 
-      /* Light button with dark text — centered */
       .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;            /* center via auto margins */
-        align-self: center;            /* and ensure flex centering */
+        margin: 2px auto 0;
+        align-self: center;
       }}
       .btn:hover {{ background:#e5e7eb; }}
 
-      .footer {{ text-align:center; color:#6b7280; font-size:1.0em; margin-top: 6px; }}
+      .footer {{ text-align:center; color:#374151; font-size:1.0em; margin-top: 6px; }}
       .footer hr {{ margin: 6px 0; }}
     </style>
     """,
     unsafe_allow_html=True,
 )
 
-# ========= IMAGE HELPERS =========
-def data_uri(path: Path) -> str | None:
-    if not path.exists(): return None
-    mime, _ = mimetypes.guess_type(path.name)
-    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:
-    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>'
-
 # ========= HERO =========
 st.markdown(
     '<div class="hero">'
@@ -195,4 +236,4 @@ st.markdown(
     </div>
     """,
     unsafe_allow_html=True,
-)
+)