Spaces:

aim4composites
/

Production_Updated_Mat_Database

Running

App Files Files Community

gvlktejaswi commited on May 7

Commit

2fecef7

verified ·

1 Parent(s): 2c3edd9

Update page_files/Home.py

Browse files

Files changed (1) hide show

page_files/Home.py +30 -77

page_files/Home.py CHANGED Viewed

@@ -189,14 +189,6 @@ st.markdown("""
-# Card click navigation handler
-_nav = st.query_params.get("nav", None)
-if _nav == "upload":
-    st.query_params.clear()
-    st.switch_page("page_files/Upload_Data.py")
-elif _nav == "search":
-    st.query_params.clear()
-    st.switch_page("page_files/Categorized_Search.py")
@@ -513,76 +505,36 @@ st.markdown("""
 # Showcase section - Databricks style
-def _build_showcase_html(extract_b64, search_b64):
-    left = (
-        "<div class=\"showcase-left\">"
-        "<div class=\"showcase-label\">Platform Features</div>"
-        "<div class=\"showcase-heading\">Accelerate Your Composites Research</div>"
-        "<p class=\"showcase-sub\">Access a centralized, open-source database for experimental "
-        "composite material properties. Polymer, fiber, and composite datasets, all in one place.</p>"
-        "</div>"
-    )
-    extract_card = (
-    "<div class=\"s-card\">"
-    "<img class=\"s-card-img\" src=\"" + extract_b64 + "\" alt=\"Extract Data\"/>"
-    "<div class=\"s-card-body\">"
-    "<div class=\"s-card-title\">Extract Data</div>"
-    "<p class=\"s-card-desc\">Upload experimental datasets and extract structured material property data into the AIM database.</p>"
-    "<span class=\"s-card-link\">Open platform &#x2192;</span>"
-    "</div></div>"
-    )
-    search_card = (
-        "<div class=\"s-card\">"
-        "<img class=\"s-card-img\" src=\"" + search_b64 + "\" alt=\"Search\"/>"
-        "<div class=\"s-card-body\">"
-        "<div class=\"s-card-title\">Search</div>"
-        "<p class=\"s-card-desc\">Browse and filter polymer, fiber, and composite material properties across the full database.</p>"
-        "<span class=\"s-card-link\">Open search &#x2192;</span>"
-        "</div></div>"
-    )
-    css = (
-        "<style>"
-        "*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}"
-        "body{font-family:'DM Sans',sans-serif;background:#fff;}"
-        ".showcase-wrap{display:flex;align-items:flex-start;gap:48px;padding:64px 60px;background:#fff;}"
-        ".showcase-left{flex:0 0 280px;padding-top:16px;}"
-        ".showcase-label{font-size:.68rem;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:#8ACAFF;margin-bottom:14px;}"
-        ".showcase-heading{font-size:2rem;font-weight:800;color:#0f1f1a;letter-spacing:-1px;line-height:1.15;margin-bottom:16px;}"
-        ".showcase-sub{color:#5a6b65;font-size:.93rem;line-height:1.7;}"
-        ".showcase-cards{flex:1;display:flex;gap:20px;}"
-        ".s-card{flex:1;border-radius:16px;overflow:hidden;background:#0f1f1a;border:1.5px solid #1e3a30;"
-        "box-shadow:0 4px 20px rgba(0,0,0,.10);display:flex;flex-direction:column;"
-        "cursor:pointer;transition:box-shadow .2s,border-color .2s,transform .2s;}"
-        ".s-card:hover{box-shadow:0 8px 32px rgba(138,202,255,.18);border-color:#8ACAFF;transform:translateY(-3px);}"
-        ".s-card-img{width:100%;height:220px;object-fit:contain;object-position:top center;"
-        "display:block;background:#fff;border-bottom:1px solid #1e3a30;}"
-        ".s-card-body{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column;}"
-        ".s-card-title{font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:8px;}"
-        ".s-card-desc{font-size:.83rem;color:#7a9e8f;line-height:1.6;flex:1;margin-bottom:16px;}"
-        ".s-card-link{font-size:.83rem;font-weight:600;color:#8ACAFF;}"
-        "</style>"
-    )
-    return (
-        "<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"/>"
-        "<link href=\"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">"
-        + css +
-        "</head><body>"
-        "<div class=\"showcase-wrap\">"
-        + left +
-        "<div class=\"showcase-cards\">"
-        + extract_card + search_card +
-        "</div></div>"
-        "</body></html>"
-    )
-components.html(_build_showcase_html(extract_card_img, search_card_img), height=480, scrolling=False)
-_left_gap, _col1, _col2 = st.columns([0.85, 1, 1])
-with _col1:
     if st.button("Open Extract Data →", key="_nav_upload", use_container_width=True):
         st.switch_page("page_files/Upload_Data.py")
-with _col2:
     if st.button("Open Search →", key="_nav_search", use_container_width=True):
         st.switch_page("page_files/Categorized_Search.py")
@@ -592,13 +544,13 @@ st.markdown("""
     background: #0f1f1a !important;
     color: #8ACAFF !important;
     border: 1.5px solid #1e3a30 !important;
-    border-radius: 10px !important;
     font-family: 'DM Sans', sans-serif !important;
     font-weight: 600 !important;
     font-size: 0.88rem !important;
     height: 44px !important;
     box-shadow: none !important;
-    margin-top: -24px !important;
     margin-bottom: 40px !important;
 }
 .st-key-_nav_upload button:hover, .st-key-_nav_search button:hover {
@@ -610,6 +562,7 @@ st.markdown("""
 """, unsafe_allow_html=True)
 # ══════════════════════════════════════════════════════════════════════════════
 # 6.  ABOUT + FOOTER (static HTML)
 # ══════════════════════════════════════════════════════════════════════════════

 # Showcase section - Databricks style
+_left, _card1, _card2 = st.columns([0.85, 1, 1])
+with _left:
+    st.markdown("""
+    <div style="padding-top:32px;">
+        <div style="font-size:.68rem;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:#8ACAFF;margin-bottom:14px;font-family:'DM Sans',sans-serif;">Platform Features</div>
+        <div style="font-size:2rem;font-weight:800;color:#0f1f1a;letter-spacing:-1px;line-height:1.15;margin-bottom:16px;font-family:'DM Sans',sans-serif;">Accelerate Your Composites Research</div>
+        <p style="color:#5a6b65;font-size:.93rem;line-height:1.7;font-family:'DM Sans',sans-serif;">Access a centralized, open-source database for experimental composite material properties. Polymer, fiber, and composite datasets, all in one place.</p>
+    </div>
+    """, unsafe_allow_html=True)
+with _card1:
+    st.image(str(_ROOT / "extract_card_img.png"), use_container_width=True)
+    st.markdown("""
+    <div style="background:#0f1f1a;padding:16px 20px 8px;border:1.5px solid #1e3a30;border-top:none;border-bottom:none;">
+        <div style="font-size:1.05rem;font-weight:700;color:#fff;font-family:'DM Sans',sans-serif;">Extract Data</div>
+        <p style="font-size:.82rem;color:#7a9e8f;margin:6px 0 0;font-family:'DM Sans',sans-serif;">Upload experimental datasets and extract structured material property data into the AIM database.</p>
+    </div>
+    """, unsafe_allow_html=True)
     if st.button("Open Extract Data →", key="_nav_upload", use_container_width=True):
         st.switch_page("page_files/Upload_Data.py")
+with _card2:
+    st.image(str(_ROOT / "search_card_img.png"), use_container_width=True)
+    st.markdown("""
+    <div style="background:#0f1f1a;padding:16px 20px 8px;border:1.5px solid #1e3a30;border-top:none;border-bottom:none;">
+        <div style="font-size:1.05rem;font-weight:700;color:#fff;font-family:'DM Sans',sans-serif;">Search</div>
+        <p style="font-size:.82rem;color:#7a9e8f;margin:6px 0 0;font-family:'DM Sans',sans-serif;">Browse and filter polymer, fiber, and composite material properties across the full database.</p>
+    </div>
+    """, unsafe_allow_html=True)
     if st.button("Open Search →", key="_nav_search", use_container_width=True):
         st.switch_page("page_files/Categorized_Search.py")
     background: #0f1f1a !important;
     color: #8ACAFF !important;
     border: 1.5px solid #1e3a30 !important;
+    border-radius: 0 0 10px 10px !important;
     font-family: 'DM Sans', sans-serif !important;
     font-weight: 600 !important;
     font-size: 0.88rem !important;
     height: 44px !important;
     box-shadow: none !important;
+    margin-top: -8px !important;
     margin-bottom: 40px !important;
 }
 .st-key-_nav_upload button:hover, .st-key-_nav_search button:hover {
 """, unsafe_allow_html=True)
 # ══════════════════════════════════════════════════════════════════════════════
 # 6.  ABOUT + FOOTER (static HTML)
 # ══════════════════════════════════════════════════════════════════════════════