Update app.py

app.py

@@ -25,12 +25,16 @@ APP1 = {
     "url":   "https://smart-thinking-ucs.hf.space/",
     "thumb": ASSETS / "app1.png",
     "blurb": "Real-Time UCS Prediction",
+    "bg":    "#F7FBFF",   # very light blue
+    "border":"#E8F2FF",   # light blue border
 }
 APP2 = {
     "title": "ST_Log_GR",
     "url":   "https://smart-thinking-gr.hf.space/",
     "thumb": ASSETS / "app2.png",
     "blurb": "Real-Time GR Log Prediction",
+    "bg":    "#F6FFF7",   # very light green
+    "border":"#E4F9E6",   # light green border
 }
 LOGO_PATH = ASSETS / "logo.png"
 
@@ -49,15 +53,14 @@ st.markdown(
       }}
 
       html, body, [data-testid="stAppViewContainer"] {{ height: 100%; }}
-      /* Remove Streamlit's default big paddings to reclaim space */
       [data-testid="stAppViewContainer"] > .main {{ padding-top: 0 !important; padding-bottom: 0 !important; }}
       .block-container {{
         max-width: 1120px;
-        min-height: 100vh;                 /* take the viewport height */
+        min-height: 100vh;
         display: flex; flex-direction: column;
-        justify-content: center;           /* vertically center hero + grid + footer */
+        justify-content: center;
         gap: 10px;
-        padding: var(--top-spacer) 0 8px !important; /* tiny bottom so footer never adds scroll */
+        padding: var(--top-spacer) 0 8px !important;
       }}
 
       /* HERO */
@@ -70,24 +73,23 @@ st.markdown(
       .hero h1 {{ font-size: 2.3rem; margin: .4rem 0 .2rem; }}
       .hero p  {{ color: #5a5f6a; margin: 0 auto; max-width: 720px; }}
 
-      /* GRID: use flex so we can control card width precisely */
+      /* GRID: precise card width */
       .grid {{
         display: flex;
         gap: var(--grid-gap);
         justify-content: center;
         align-items: stretch;
-        flex-wrap: nowrap;                 /* keep 2-up on desktop */
+        flex-wrap: nowrap;
       }}
-
-      /* If the screen is too small, allow wrapping to avoid horizontal scroll */
       @media (max-width: calc(2 * var(--card-width) + var(--grid-gap) + 64px)) {{
         .grid {{ flex-wrap: wrap; }}
       }}
 
       .card {{
         width: var(--card-width);
-        background:#fff; border-radius:16px; padding:14px;
-        border:1px solid rgba(0,0,0,.06);
+        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);
         transition:transform .12s ease, box-shadow .12s ease;
         text-align:center; display:flex; flex-direction:column; gap:10px;
@@ -99,7 +101,7 @@ st.markdown(
         height: {CARD_THUMB_HEIGHT}px;
         border-radius:14px;
         border:1px solid rgba(0,0,0,.06);
-        object-fit: contain;       /* show full logo/image, no cropping */
+        object-fit: contain;
         background:#fff;
       }}
 
@@ -149,8 +151,9 @@ st.markdown(
 # ========= CARDS =========
 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)')};"
     return (
-        "<div class='card'>"
+        f"<div class='card' style='{style}'>"
         + img_tag(app["thumb"], app["title"], "thumb")
         + f"<h3>{escape(app['title'])}</h3>"
         + f"<p>{escape(app['blurb'])}</p>"
@@ -170,4 +173,4 @@ st.markdown(
     </div>
     """,
     unsafe_allow_html=True,
-)
+)