Update page_files/Home.py

page_files/Home.py

@@ -25,14 +25,6 @@ if "visible_cards" not in st.session_state:
 
 VISIBLE_CARDS = st.session_state.visible_cards 
 prop_count = len([c for c in ALL_CARDS if c[2] == "section"])
-# Navigation via session state — fires before any rendering
-if st.session_state.get("_go_extract"):
-    st.session_state["_go_extract"] = False
-    st.switch_page("page_files/Upload_Data.py")
-if st.session_state.get("_go_search"):
-    st.session_state["_go_search"] = False
-    st.switch_page("page_files/Categorized_Search.py")
-
 
 def get_card_icon(title: str, card_type: str) -> str:
     if card_type == "material":
@@ -206,15 +198,32 @@ elif _nav == "search":
     st.query_params.clear()
     st.switch_page("page_files/Categorized_Search.py")
 
-
-
-# Navigation handler - must be before any rendering
-if st.session_state.get("_go_extract"):
-    st.session_state["_go_extract"] = False
-    st.switch_page("page_files/Upload_Data.py")
-if st.session_state.get("_go_search"):
-    st.session_state["_go_search"] = False
-    st.switch_page("page_files/Categorized_Search.py")
+# PostMessage listener for iframe card clicks
+components.html("""
+<script>
+window.addEventListener('message', function(e) {
+    if (e.data && e.data.type === 'streamlit:setComponentValue') {
+        // Write to a hidden input Streamlit can read via query params
+        const val = e.data.value;
+        window.parent.location.href = window.parent.location.href.split('?')[0] + '?card=' + val;
+    }
+});
+</script>
+""", height=0)
+
+# Check query param for card navigation
+import urllib.parse
+try:
+    _qp = st.query_params
+    if "card" in _qp:
+        _card_val = _qp["card"]
+        st.query_params.clear()
+        if _card_val == "upload":
+            st.switch_page("page_files/Upload_Data.py")
+        elif _card_val == "search":
+            st.switch_page("page_files/Categorized_Search.py")
+except Exception:
+    pass
 
 #  Helper 
 def go_categorized(material=None, search=None):
@@ -529,61 +538,258 @@ 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\" onclick=\"window.parent.location.href='?nav=upload'\">"
+        "<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=\"window.parent.location.href='?nav=search'\">"
+        "<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>"
+    )
+
+
+# Hidden Streamlit buttons wired to the card clicks via JS
+_btn_col1, _btn_col2 = st.columns(2)
+with _btn_col1:
+    if st.button("Go to Extract Data", key="_nav_upload", help="", use_container_width=True):
+        st.switch_page("page_files/Upload_Data.py")
+with _btn_col2:
+    if st.button("Go to Search", key="_nav_search", help="", use_container_width=True):
+        st.switch_page("page_files/Categorized_Search.py")
+
+# Hide the nav buttons visually — they are only triggered by JS
+st.markdown("""
+<style>
+.st-key-_nav_upload, .st-key-_nav_search {
+    position: absolute !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
+    height: 0 !important;
+    overflow: hidden !important;
+}
+</style>
+""", unsafe_allow_html=True)
+
+
+
+
+        
+
+
+# ══════════════════════════════════════════════════════════════════════════════
+# 6.  ABOUT + FOOTER (static HTML)
+# ══════════════════════════════════════════════════════════════════════════════
+components.html(f"""
+<!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; color: #1a2e26; }}
+
+.aim-about {{ background: #fff; padding: 60px; border-bottom: 1px solid #e8e8e4; }}
+.aim-about h2 {{ font-size: 1.65rem; font-weight: 700; color: #0f1f1a; letter-spacing: -0.5px; margin-bottom: 8px; }}
+.aim-about-sub {{ color: #6a7e77; font-size: 0.9rem; margin-bottom: 30px; }}
+.aim-about-grid {{ display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }}
+.aim-about-text p {{ color: #3a4e47; font-size: 0.91rem; line-height: 1.75; margin-bottom: 14px; }}
+.aim-about-img {{ border-radius: 10px; overflow: hidden; border: 1px solid #e4e8e5; }}
+.aim-about-img img {{ width: 100%; display: block; }}
+.aim-about-img-placeholder {{
+    background: #f0f5f3; border-radius: 10px; height: 280px;
+    display: flex; align-items: center; justify-content: center;
+    color: #7a9e8f; font-size: 0.85rem; border: 1.5px dashed #c8d6d0;
+}}
+
+.aim-footer {{ background: #fff; border-top: 1px solid #e8e8e4; padding: 50px 60px 28px; }}
+.aim-footer-brand {{ display: flex; align-items: center; gap: 8px; font-weight: 700; color: #0f1f1a; font-size: 0.95rem; margin-bottom: 10px; }}
+.aim-footer-desc {{ font-size: 0.82rem; color: #7a8e87; line-height: 1.6; }}
+</style>
+</head><body>
+
+<section class="aim-about">
+    <h2>About the Platform</h2>
+    <p class="aim-about-sub">Artificially Intelligent Manufacturing Paradigm (AIM) for Composites</p>
+    <div class="aim-about-grid">
+        <div class="aim-about-text">
+            <p>The AIM Database tool serves as a powerful, centralized hub designed to streamline
+            collaboration and information exchange within the composite materials research community.
+            The platform enables researchers to contribute to a shared knowledge base by uploading
+            experimental datasets through secure terminals.</p>
+            <p>Users can submit specific measurements regarding mechanical properties, thermal behavior,
+            and rheology, alongside their published journal papers , ensuring that both raw data and
+            peer-reviewed findings are integrated into one cohesive system.</p>
+            <p>All contributed information is securely aggregated within a central cloud architecture,
+            allowing for efficient storage, organization, and retrieval across polymer, fiber, and
+            composite categories.</p>
+        </div>
+        <div>{about_img_html}</div>
+    </div>
+</section>
+
+
+
+</body></html>
+""", height=550, scrolling=False)
 
 st.markdown("""
 <style>
-.st-key-btn_extract button, .st-key-btn_search button {
-    background: #0f1f1a !important;
-    color: #8ACAFF !important;
-    border: 1.5px solid #1e3a30 !important;
-    border-radius: 0 0 10px 10px !important;
+            
+/* Footer nav wrapper */
+div[data-testid="stHorizontalBlock"]:has(.footer-nav-head) {
+    background: #fff !important;
+    border-bottom: 1px solid #e8e8e4 !important;
+    padding: 0 60px 28px !important;
+    margin-top: -16px !important;
+    
+}
+.aim-footer-brand {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 700;
+    color: #0f1f1a;
+    font-size: 0.95rem;
+    margin-bottom: 10px;
+    font-family: 'DM Sans', sans-serif;
+}
+.aim-footer-desc {
+    font-size: 0.82rem;
+    color: #7a8e87;
+    line-height: 1.6;
+    font-family: 'DM Sans', sans-serif;
+}
+.footer-nav-head {
+    font-size: 0.68rem;
+    font-weight: 700;
+    letter-spacing: 1.4px;
+    text-transform: uppercase;
+    color: #0f1f1a;
+    margin-bottom: 14px;
+    font-family: 'DM Sans', sans-serif;
+}
+.st-emotion-cache-1ofqig9 {
+    background: transparent !important;
+    border: none !important;
+    padding: 0 !important;
+}
+.st-emotion-cache-1qeq59m {
+    background: transparent !important;
+    border: none !important;
+    text-decoration: none !important;
+    padding: 0 0 9px 0 !important;
+    display: block !important;
+}
+.st-emotion-cache-1qeq59m:hover {
+    background: transparent !important;
+    border: none !important;
+}
+.st-emotion-cache-1qeq59m p {
+    color: #6a7e77 !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;
+    font-size: 0.83rem !important;
+    font-weight: 400 !important;
+    margin: 0 !important;
 }
-.st-key-btn_extract button:hover, .st-key-btn_search button:hover {
-    background: #1e3a30 !important;
-    border-color: #8ACAFF !important;
+.st-emotion-cache-1qeq59m:hover p {
     color: #8ACAFF !important;
 }
+
+/* copyright bar */
+.aim-footer-bottom {
+    background: #fff;
+    border-top: 1px solid #e8e8e4;
+    padding: 22px 60px;
+    font-size: 0.76rem;
+    color: #a0b0aa;
+    font-family: 'DM Sans', sans-serif;
+}
+
 </style>
 """, unsafe_allow_html=True)
 
-_left, _card1, _card2 = st.columns([0.85, 1, 1])
+brand_col, db_col, sup_col, _ = st.columns([4, 2, 2, 2], vertical_alignment="top", width="stretch")
 
-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>
+with brand_col:
+    st.markdown(f"""
+    <div class="aim-footer-brand">{logo_html} AIM Composites</div>
+    <p class="aim-footer-desc">Advancing composites research through open data and collaborative tools.
+    A joint initiative of Clemson University and University of Delaware.</p>
     """, 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="btn_extract", use_container_width=True):
-        st.session_state["_go_extract"] = True
-        st.rerun()
-
-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="btn_search", use_container_width=True):
-        st.session_state["_go_search"] = True
-        st.rerun()
+with sup_col:
+    st.markdown('<p class="footer-nav-head">DATABASE</p>', unsafe_allow_html=True)
+    st.page_link(
+        "page_files/Categorized_Search.py",
+        label="Browse Materials",
+    )
+    st.page_link(
+        "page_files/Categorized_Search.py",
+        label="Categorized Search",
+    )
+    st.page_link(
+        "page_files/Upload_Data.py",
+        label="Upload Data",
+    )
+
+with _:
+    st.markdown('<p class="footer-nav-head">SUPPORT</p>', unsafe_allow_html=True)
+    st.page_link(
+        "page_files/Contact_Team.py",
+        label="Contact Team",
+    )
+
+
+