Spaces:

aim4composites
/

Production_Updated_Mat_Database

Running

App Files Files Community

gvlktejaswi commited on May 7

Commit

f05e334

verified ·

1 Parent(s): 6b8dff4

Update page_files/Home.py

Browse files

Files changed (1) hide show

page_files/Home.py +41 -41

page_files/Home.py CHANGED Viewed

@@ -57,7 +57,7 @@ def img_to_b64(path):
 _HERE = Path(__file__).parent        # page_files/
 _ROOT = _HERE.parent                 # project root
-home_img         = img_to_b64(str(_HERE / "images" / "Home.png"))
 logo_img         = img_to_b64(str(_ROOT / "logo.png"))
 extract_card_img = img_to_b64(str(_ROOT / "extract_card_img.png"))
 search_card_img  = img_to_b64(str(_ROOT / "search_card_img.png"))
@@ -530,10 +530,33 @@ st.markdown("""
 # Showcase section - Databricks style
 def _build_showcase_html(extract_b64, search_b64):
-    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'>"
         "<style>"
         "*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}"
         "body{font-family:'DM Sans',sans-serif;background:#fff;}"
@@ -552,45 +575,22 @@ def _build_showcase_html(extract_b64, search_b64):
         ".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;display:inline-flex;align-items:center;gap:4px;}"
-        ".s-card-link::after{content:' →';}"
-        "</style></head><body>"
-        "<div class='showcase-wrap'>"
-          "<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>"
-          "<div class='showcase-cards'>"
-            "<div class='s-card' onclick='document.getElementById("btn_upload").click()'>"
-              "<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</span>"
-              "</div>"
-            "</div>"
-            "<div class='s-card' onclick='document.getElementById("btn_search").click()'>"
-              "<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</span>"
-              "</div>"
-            "</div>"
-          "</div>"
-        "</div>"
-        "<button id='btn_upload' style='display:none' "
-          "onclick="window.parent.document.querySelectorAll('[data-testid=stBaseButton-header]')[0]?.click()">"
-        "</button>"
-        "<button id='btn_search' style='display:none' "
-          "onclick="window.parent.document.querySelectorAll('[data-testid=stBaseButton-header]')[1]?.click()">"
-        "</button>"
         "</body></html>"
     )
-components.html(_build_showcase_html(extract_card_img, search_card_img), height=480, scrolling=False)
 # Hidden Streamlit buttons wired to the card clicks via JS
 _btn_col1, _btn_col2 = st.columns(2)

 _HERE = Path(__file__).parent        # page_files/
 _ROOT = _HERE.parent                 # project root
+home_img         = img_to_b64(str(_ROOT / "Home.png"))
 logo_img         = img_to_b64(str(_ROOT / "logo.png"))
 extract_card_img = img_to_b64(str(_ROOT / "extract_card_img.png"))
 search_card_img  = img_to_b64(str(_ROOT / "search_card_img.png"))
 # 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\" onclick=\"document.getElementById('btn_upload').click()\">"
+        "<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\" onclick=\"document.getElementById('btn_search').click()\">"
+        "<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;}"
         ".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>"
     )
 # Hidden Streamlit buttons wired to the card clicks via JS
 _btn_col1, _btn_col2 = st.columns(2)