Update app.py

app.py

@@ -5,27 +5,28 @@ import streamlit as st
 
 # ---------- PATHS (subfolder-safe) ----------
 BASE_DIR = Path(__file__).parent          # -> Landing_Page/
-ASSETS = BASE_DIR / "assets"              # -> Landing_Page/assets/
+ASSETS   = BASE_DIR / "assets"            # -> Landing_Page/assets/
 
-# ---------- CONTROLS (tweak these) ----------
-HERO_LOGO_SIZE = 100        # px (company logo size in the hero)
-CARD_THUMB_HEIGHT = 160     # px (height of each app image)
-OPEN_IN_NEW_TAB = False     # set True if you want links to open in a new tab
+# ---------- CONTROLS (easy knobs) ----------
+HERO_LOGO_SIZE     = 140   # px  (company logo in the hero)
+CARD_THUMB_HEIGHT  = 180   # px  (image area inside each card)
+BUTTON_TEXT        = "Click to Run APP"
+OPEN_IN_NEW_TAB    = False # set True to open links in a new browser tab
 
 # ---------- CONFIG ----------
 COMPANY_NAME = "Smart Thinking"
-TAGLINE = "We Deliver Smart AI-Based Solutions For O&G Industry"
+TAGLINE      = "We Deliver Smart AI-Based Solutions For O&G Industry"
 
 APP1 = {
     "title": "ST_Geo_Mech",
-    "url": "https://smart-thinking-ucs.hf.space/",
-    "thumb_path": ASSETS / "app1.png",
+    "url":   "https://smart-thinking-ucs.hf.space/",
+    "thumb": ASSETS / "app1.png",
     "blurb": "Real-Time UCS Prediction",
 }
 APP2 = {
     "title": "ST_Log_GR",
-    "url": "https://smart-thinking-gr.hf.space/",
-    "thumb_path": ASSETS / "app2.png",
+    "url":   "https://smart-thinking-gr.hf.space/",
+    "thumb": ASSETS / "app2.png",
     "blurb": "Real-Time GR Log Prediction",
 }
 LOGO_PATH = ASSETS / "logo.png"
@@ -34,123 +35,125 @@ 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 (fit to 1 screen, centered layout) ----------
+# ---------- CSS (fit to 1 screen on desktop, center content) ----------
 st.markdown(
     f"""
     <style>
-    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; }}
+      html, body, [data-testid="stAppViewContainer"] {{ height: 100%; }}
+      [data-testid="stAppViewContainer"] > .main {{
+        min-height: 100vh;
+      }}
+      .block-container {{
+        max-width: 1100px;
+        min-height: 100vh;
+        display: flex; flex-direction: column; justify-content: center;
+        padding-top: 12px !important; padding-bottom: 12px !important;
+      }}
+
+      .hero {{ text-align:center; margin: 4px 0 16px; }}
+      .hero img {{
+        width: {HERO_LOGO_SIZE}px; max-width: 95vw; height: auto;
+        display: block; margin: 0 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; }}
+
+      /* Cards layout: 2 columns on desktop, stack on small screens */
+      @media (min-width: 901px) {{
+        .two-cols {{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }}
+      }}
+      @media (max-width: 900px) {{
+        .two-cols {{ display: grid; grid-template-columns: 1fr; gap: 16px; }}
+      }}
+
+      .card {{
+        background: #fff; 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 everything */
+      }}
+      .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 full image, no crop */
+        background: #fff;
+      }}
+
+      .card h3 {{ margin: 12px 0 6px; }}
+      .card p  {{ color: #5a5f6a; min-height: 36px; margin-bottom: 10px; }}
+
+      /* Light button, dark text */
+      .btn {{
+        display:inline-block; padding: 10px 14px; border-radius: 12px;
+        border: 1px solid #e5e7eb; text-decoration:none;
+        background: #f3f4f6; color: #111827; font-weight: 500;
+      }}
+      .btn:hover {{ background:#e5e7eb; }}
+      .footer {{ text-align:center; color:#8a9099; font-size: 0.9rem; margin-top: 8px; }}
     </style>
     """,
     unsafe_allow_html=True,
 )
 
 # ---------- IMAGE HELPERS ----------
-def to_data_uri(path: Path) -> str | None:
-    if not path.exists():
-        return None
+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"
+    if not mime: mime = "image/png"
     b64 = base64.b64encode(path.read_bytes()).decode("utf-8")
     return f"data:{mime};base64,{b64}"
 
-def img_or_placeholder(path: Path, alt: str) -> str:
-    uri = to_data_uri(path)
+def img_tag(path: Path, alt: str, cls: str) -> str:
+    uri = data_uri(path)
     if uri:
-        return f'<img class="thumb" src="{uri}" alt="{escape(alt)}" />'
-    return f'<div class="thumb">{escape(alt)}</div>'
+        return f'<img class="{cls}" src="{uri}" alt="{escape(alt)}" />'
+    # graceful placeholder
+    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 ----------
-logo_html = img_or_placeholder(LOGO_PATH, "logo") if LOGO_PATH.exists() else ""
 st.markdown(
-    '<div class="hero">' + logo_html + f"<h1>{COMPANY_NAME}</h1>" + f"<p>{TAGLINE}</p>" + "</div>",
+    '<div class="hero">'
+    + (img_tag(LOGO_PATH, "logo", "") if LOGO_PATH.exists() else "")
+    + f"<h1>{escape(COMPANY_NAME)}</h1>"
+    + f"<p>{escape(TAGLINE)}</p>"
+    + "</div>",
     unsafe_allow_html=True,
 )
 
-# ---------- CARDS ----------
+# ---------- CARD HTML ----------
 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'])}
+      {img_tag(app['thumb'], app['title'], "thumb")}
       <h3>{escape(app['title'])}</h3>
       <p>{escape(app['blurb'])}</p>
-      <div class="cta">Click to Run APP:
-        <a class="btn" href="{escape(app['url'])}" target="{target}">Open {escape(app['title'])}</a>
-      </div>
+      <a class="btn" href="{escape(app['url'])}" target="{target}">{escape(BUTTON_TEXT)}</a>
     </div>
     """
-    
-html_grid = f"<div class='grid'>{app_card(APP1)}{app_card(APP2)}</div>"
-st.markdown(html_grid, unsafe_allow_html=True)
 
-# ---------- FOOTER ----------
-st.markdown(
-    f"<div style='text-align:center; color:#8a9099; font-size: 0.9rem; margin-top: 8px;'>© {escape(COMPANY_NAME)}</div>",
-    unsafe_allow_html=True,
-)
+# Render as two separate markdown blocks (prevents partial escaping issues)
+left  = app_card(APP1)
+right = app_card(APP2)
+
+st.markdown('<div class="two-cols">', unsafe_allow_html=True)
+st.markdown(left,  unsafe_allow_html=True)
+st.markdown(right, unsafe_allow_html=True)
+st.markdown('</div>', unsafe_allow_html=True)
+
+# Footer
+# =========================
+st.markdown("""
+<br><br><br>
+<hr>
+<div style='text-align:center;color:#6b7280;font-size:1.0em;'>
+    © 2025 Smart Thinking AI-Solutions Team. All rights reserved.<br>
+    Contact: <a href="mailto:smartthinking@smartthinking.com.sa">smartthinking@smartthinking.com.sa</a>
+</div>
+""", unsafe_allow_html=True)