Update app.py

app.py

@@ -1,12 +1,16 @@
-import base64
-import mimetypes
+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/
+BASE_DIR = Path(__file__).parent          # -> Landing_Page/
+ASSETS = BASE_DIR / "assets"              # -> Landing_Page/assets/
+
+# ---------- CONTROLS (tweak these) ----------
+HERO_LOGO_SIZE = 120        # px (company logo size in the hero)
+CARD_THUMB_HEIGHT = 180     # px (height of each app image)
+OPEN_IN_NEW_TAB = False     # set True if you want links to open in a new tab
 
 # ---------- CONFIG ----------
 COMPANY_NAME = "Smart Thinking"
@@ -24,34 +28,82 @@ APP2 = {
     "thumb_path": ASSETS / "app2.png",
     "blurb": "Real-Time GR Log Prediction",
 }
-
 LOGO_PATH = ASSETS / "logo.png"
 
 # ---------- 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")
 
-# ---------- STYLES ----------
+# ---------- CSS (fit to 1 screen, centered layout) ----------
 st.markdown(
-    """
+    f"""
     <style>
-    .hero {text-align:center; margin: 2rem 0 2.75rem;}
-    .hero img {width: 92px; height: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,.12));}
-    .hero h1 {font-size: 2.2rem; margin: .75rem 0 .25rem;}
-    .hero p {color: #5a5f6a; margin: 0 auto; max-width: 720px;}
-
-    .grid {display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px;}
-    .card {background: white; border-radius: 18px; padding: 18px; border: 1px solid rgba(0,0,0,.06);
-           box-shadow: 0 4px 18px rgba(0,0,0,.05); transition: transform .12s ease, box-shadow .12s ease;}
-    .card:hover {transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.08);}
-    .thumb {border-radius: 14px; width: 100%; height: 220px; object-fit: cover; border: 1px solid rgba(0,0,0,.06);
-            display:flex; align-items:center; justify-content:center; color:#50545c; background:linear-gradient(180deg,#f6f7fb,#eceff4);}
-    .card h3 {margin: 12px 0 6px;}
-    .card p {color: #5a5f6a; min-height: 40px;}
-    .card a.btn {display:inline-block; padding: 10px 14px; border-radius: 12px; border: 1px solid #e6e7ea; text-decoration:none;}
-    .btn-primary {background:#111827; color:white; border-color:#111827;}
-    .btn-primary:hover {filter: brightness(0.92);}
-    .block-container {max-width: 1120px;}
+    html, body, [data-testid="stAppViewContainer"] {{
+      height: 100%;
+    }}
+    /* Center all content vertically and avoid scroll on desktop */
+    [data-testid="stAppViewContainer"] > .main {{
+      height: 100vh;
+    }}
+    .block-container {{
+      max-width: 1100px;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      padding-top: 0.5rem !important;
+      padding-bottom: 0.5rem !important;
+    }}
+
+    .hero {{ text-align:center; margin: 0 0 1.25rem; }}
+    .hero img {{ width: {HERO_LOGO_SIZE}px; height: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,.12)); }}
+    .hero h1 {{ font-size: 2.2rem; margin: .75rem 0 .25rem; }}
+    .hero p {{ color: #5a5f6a; margin: 0 auto; max-width: 720px; }}
+
+    .grid {{
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 20px;
+      align-items: start;
+    }}
+    @media (max-width: 1100px) {{
+      .grid {{ gap: 16px; }}
+    }}
+    @media (max-width: 900px) {{
+      /* fall back to vertical on small screens (might scroll there) */
+      .grid {{ grid-template-columns: 1fr; }}
+    }}
+
+    .card {{
+      background: white;
+      border-radius: 16px;
+      padding: 16px;
+      border: 1px solid rgba(0,0,0,.06);
+      box-shadow: 0 4px 18px rgba(0,0,0,.05);
+      transition: transform .12s ease, box-shadow .12s ease;
+      text-align: center; /* center title/desc/button */
+    }}
+    .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 whole image (no crop) */
+      background: white;                  /* clean background around contained image */
+    }}
+
+    .card h3 {{ margin: 12px 0 6px; }}
+    .card p {{ color: #5a5f6a; min-height: 36px; margin-bottom: 10px; }}
+
+    /* 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;
+    }}
+    .btn:hover {{ background:#e5e7eb; }}
     </style>
     """,
     unsafe_allow_html=True,
@@ -59,7 +111,6 @@ st.markdown(
 
 # ---------- IMAGE HELPERS ----------
 def to_data_uri(path: Path) -> str | None:
-    """Return a data: URI for an image path, or None if missing."""
     if not path.exists():
         return None
     mime, _ = mimetypes.guess_type(path.name)
@@ -81,14 +132,15 @@ st.markdown(
     unsafe_allow_html=True,
 )
 
-# ---------- CARD RENDERING ----------
+# ---------- CARDS ----------
 def app_card(app: dict) -> str:
+    target = "_blank" if OPEN_IN_NEW_TAB else "_self"
     return f"""
     <div class="card">
       {img_or_placeholder(app['thumb_path'], app['title'])}
       <h3>{escape(app['title'])}</h3>
       <p>{escape(app['blurb'])}</p>
-      <a class="btn btn-primary" href="{escape(app['url'])}" target="_self">Open {escape(app['title'])}</a>
+      <a class="btn" href="{escape(app['url'])}" target="{target}">Open {escape(app['title'])}</a>
     </div>
     """
 
@@ -97,6 +149,6 @@ st.markdown(html_grid, unsafe_allow_html=True)
 
 # ---------- FOOTER ----------
 st.markdown(
-    f"\n\n<div style='text-align:center; color:#8a9099; font-size: 0.9rem;'>© {escape(COMPANY_NAME)}</div>",
+    f"<div style='text-align:center; color:#8a9099; font-size: 0.9rem; margin-top: 8px;'>© {escape(COMPANY_NAME)}</div>",
     unsafe_allow_html=True,
 )