Update page_files/Home.py

page_files/Home.py

@@ -79,24 +79,17 @@ st.markdown("""
 st.markdown("""
 <style>
 @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');
-
 /* Hide default Streamlit chrome */
 .block-container { padding: 0 !important; max-width: 100% !important; background: #fff !important;}
 [data-testid="stToolbar"],
 [data-testid="stDecoration"],
 [data-testid="stHeader"] { display: none !important; }
-
-
-
-
-
 /* ── Search row ── */
 /* Only target the search bar's horizontal block, not all columns */
 .st-emotion-cache-y1l7l5 .st-emotion-cache-1permvm {
     gap: 0 !important;
     align-items: stretch !important;
 }
-
 .st-emotion-cache-16s2yzk button {
     background: #f2f6f4 !important;
     border: 1.5px solid #d0d8d4 !important;
@@ -111,7 +104,6 @@ st.markdown("""
     white-space: nowrap !important;
     box-shadow: none !important;
 }
-
 .st-emotion-cache-4dubyl [data-baseweb="input"] {
     background: #000 !important;
     height: 46px !important;
@@ -133,9 +125,7 @@ st.markdown("""
     box-shadow: none !important;
     padding-left: 18px !important;
 }
-
 .st-emotion-cache-4dubyl > div {
-
     height: 46px !important;
 }
 .st-emotion-cache-4dubyl input::placeholder {
@@ -155,7 +145,6 @@ st.markdown("""
     padding: 0 28px !important;
     box-shadow: none !important;
 }
-
 .st-key-view_all_btn button {
     background: transparent !important;
     border: none !important;
@@ -183,7 +172,6 @@ st.markdown("""
     margin-bottom: 14px;
     font-family: 'DM Sans', sans-serif;
 }
-
 </style>
 """, unsafe_allow_html=True)
 
@@ -198,7 +186,32 @@ elif _nav == "search":
     st.query_params.clear()
     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):
@@ -235,7 +248,6 @@ components.html(f"""
 <style>
 *, *::before, *::after {{ box-sizing: border-box; margin: 0; padding: 0; }}
 body {{ font-family: 'DM Sans', sans-serif; background: #f7f7f5; color: #1a2e26; overflow-x: hidden; }}
-
 /*  ANIMATION SECTION  */
 .anim-section {{
     background: #000;
@@ -251,7 +263,6 @@ body {{ font-family: 'DM Sans', sans-serif; background: #f7f7f5; color: #1a2e26;
     display: flex; align-items: center;
     justify-content: space-between; padding: 0 40px;
 }}
-
 /* MAG GLASS */
 .mag-wrap {{ position: relative; width: 100px; display: flex; flex-direction: column; align-items: center; }}
 .mag-label {{ font-size: 0.65rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #4a7a6a; margin-bottom: 10px; }}
@@ -262,7 +273,6 @@ body {{ font-family: 'DM Sans', sans-serif; background: #f7f7f5; color: #1a2e26;
 .mag-scan {{ opacity: 0; transition: opacity 0.3s ease 0.8s; }}
 .mag-wrap.active .mag-scan {{ opacity: 1; animation: scanMove 1.2s ease-in-out infinite 0.8s; }}
 @keyframes scanMove {{ 0% {{ transform:translateY(-14px);opacity:.8; }} 50% {{ transform:translateY(0);opacity:1; }} 100% {{ transform:translateY(14px);opacity:.8; }} }}
-
 /* BUBBLES */
 .bubble {{ position:absolute; border-radius:50%; background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.6),rgba(80,160,255,.25)); border:1px solid rgba(100,180,255,.4); opacity:0; pointer-events:none; backdrop-filter:blur(2px); }}
 .b1 {{ width:18px;height:18px;left:108px;bottom:155px; }}
@@ -283,7 +293,6 @@ body {{ font-family: 'DM Sans', sans-serif; background: #f7f7f5; color: #1a2e26;
 @keyframes floatBubble4 {{ 0% {{ opacity:0;transform:translate(0,0) scale(.3); }} 20% {{ opacity:1;transform:translate(-8px,-35px) scale(1); }} 65% {{ opacity:.8;transform:translate(105px,-80px) scale(.8); }} 88% {{ opacity:.3;transform:translate(255px,-50px) scale(.4); }} 100% {{ opacity:0;transform:translate(320px,-20px) scale(.1); }} }}
 @keyframes floatBubble5 {{ 0% {{ opacity:0;transform:translate(0,0) scale(.4); }} 15% {{ opacity:1;transform:translate(3px,-22px) scale(1); }} 58% {{ opacity:.9;transform:translate(115px,-60px) scale(.88); }} 83% {{ opacity:.45;transform:translate(270px,-35px) scale(.55); }} 100% {{ opacity:0;transform:translate(335px,-12px) scale(.2); }} }}
 @keyframes floatBubble6 {{ 0% {{ opacity:0;transform:translate(0,0) scale(.25); }} 20% {{ opacity:1;transform:translate(-3px,-40px) scale(1); }} 62% {{ opacity:.7;transform:translate(100px,-85px) scale(.75); }} 85% {{ opacity:.25;transform:translate(250px,-55px) scale(.35); }} 100% {{ opacity:0;transform:translate(318px,-22px) scale(.1); }} }}
-
 /* DATABASE */
 .db-wrap {{ position:relative;width:130px;display:flex;flex-direction:column;align-items:center; }}
 .db-label {{ font-size:.65rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#4a7a6a;margin-bottom:10px; }}
@@ -292,7 +301,6 @@ body {{ font-family: 'DM Sans', sans-serif; background: #f7f7f5; color: #1a2e26;
 .anim-stage.active .cyl-right {{ opacity:1;transition-delay:2.2s; }}
 .anim-stage.active .cyl-front {{ opacity:1;transition-delay:2.4s;animation:frontPulse 2.4s ease-in-out infinite 2.8s; }}
 @keyframes frontPulse {{ 0%,100% {{ filter:brightness(1); }} 50% {{ filter:brightness(1.2); }} }}
-
 /* CAPTION */
 .anim-caption {{ margin-top:48px;display:flex;gap:40px;align-items:center; }}
 .anim-step {{ display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease; }}
@@ -302,7 +310,6 @@ body {{ font-family: 'DM Sans', sans-serif; background: #f7f7f5; color: #1a2e26;
 .step-text {{ font-size:.78rem;color:#5a8a7a;font-weight:500; }}
 </style>
 </head><body>
-
 <section class="anim-section">
     <h2 class="anim-title">From Experiment to Database</h2>
     <div class="anim-stage" id="animStage">
@@ -394,7 +401,6 @@ body {{ font-family: 'DM Sans', sans-serif; background: #f7f7f5; color: #1a2e26;
         <div class="anim-step"><span class="step-text">Stored in AIM</span></div>
     </div>
 </section>
-
 <script>
 const stage = document.getElementById('animStage');
 const magWrap = document.getElementById('magWrap');
@@ -523,7 +529,7 @@ def _build_showcase_html(extract_b64, search_b64):
         "</div>"
     )
     extract_card = (
-        "<div class=\"s-card\" onclick=\"window.parent.postMessage({queryString:'?nav=upload'},'https://huggingface.co')\">"
+        "<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>"
@@ -532,7 +538,7 @@ def _build_showcase_html(extract_b64, search_b64):
         "</div></div>"
     )
     search_card = (
-        "<div class=\"s-card\" onclick=\"window.parent.postMessage({queryString:'?nav=search'},'https://huggingface.co')\">"
+        "<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>"
@@ -576,7 +582,27 @@ def _build_showcase_html(extract_b64, search_b64):
     )
 
 
+# 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)
 
 
 
@@ -594,7 +620,6 @@ components.html(f"""
 <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; }}
@@ -607,13 +632,11 @@ body {{ font-family: 'DM Sans', sans-serif; color: #1a2e26; }}
     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>
@@ -633,9 +656,6 @@ body {{ font-family: 'DM Sans', sans-serif; color: #1a2e26; }}
         <div>{about_img_html}</div>
     </div>
 </section>
-
-
-
 </body></html>
 """, height=550, scrolling=False)
 
@@ -701,7 +721,6 @@ div[data-testid="stHorizontalBlock"]:has(.footer-nav-head) {
 .st-emotion-cache-1qeq59m:hover p {
     color: #8ACAFF !important;
 }
-
 /* copyright bar */
 .aim-footer-bottom {
     background: #fff;
@@ -711,7 +730,6 @@ div[data-testid="stHorizontalBlock"]:has(.footer-nav-head) {
     color: #a0b0aa;
     font-family: 'DM Sans', sans-serif;
 }
-
 </style>
 """, unsafe_allow_html=True)
 
@@ -744,4 +762,4 @@ with _:
     st.page_link(
         "page_files/Contact_Team.py",
         label="Contact Team",
-    )
+    )