Spaces:

aim4composites
/

Production_Updated_Mat_Database

Running

App Files Files Community

gvlktejaswi commited on May 7

Commit

c683584

verified ·

1 Parent(s): 577b1fd

Update page_files/Home.py

Browse files

Files changed (1) hide show

page_files/Home.py +125 -143

page_files/Home.py CHANGED Viewed

@@ -532,171 +532,153 @@ st.markdown("""
-st.markdown("<div style='padding: 64px 0 0 0;'></div>", unsafe_allow_html=True)
-# ── Databricks-style: left text + right stacked cards ──────────────────────
-st.markdown("""
 <style>
-/* wrapper for the showcase section */
-.showcase-section {
     background: #fff;
-    padding: 0 40px 48px;
-}
-/* Left heading text */
-.showcase-heading {
-    font-family: 'DM Sans', sans-serif;
-    font-size: clamp(1.6rem, 3vw, 2.3rem);
     font-weight: 800;
     color: #0f1f1a;
     letter-spacing: -1px;
-    line-height: 1.2;
-    margin-bottom: 14px;
-}
-.showcase-sub {
-    font-family: 'DM Sans', sans-serif;
     color: #5a6b65;
-    font-size: 0.95rem;
-    line-height: 1.65;
-}
-/* Image cards on the right */
-.aim-showcase-card {
-    border-radius: 14px;
     overflow: hidden;
-    border: 1.5px solid #e4e8e5;
-    margin-bottom: 18px;
-    background: #f7f8f9;
-    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
     cursor: pointer;
-    transition: box-shadow 0.2s, border-color 0.2s;
-}
-.aim-showcase-card:hover {
-    box-shadow: 0 6px 24px rgba(0,0,0,0.11);
     border-color: #8ACAFF;
-}
-.aim-showcase-card img {
     width: 100%;
-    display: block;
     object-fit: cover;
-    max-height: 200px;
-}
-.aim-showcase-card-body {
-    padding: 16px 20px;
-}
-.aim-showcase-card-title {
-    font-family: 'DM Sans', sans-serif;
-    font-size: 1rem;
-    font-weight: 700;
-    color: #0f1f1a;
-    margin-bottom: 4px;
-}
-.aim-showcase-card-tag {
-    font-family: 'DM Sans', sans-serif;
-    font-size: 0.7rem;
     font-weight: 700;
-    letter-spacing: 1.2px;
     color: #8ACAFF;
-    text-transform: uppercase;
-}
 </style>
-""", unsafe_allow_html=True)
-left_col, right_col = st.columns([1, 1.2], gap="large")
-with left_col:
-    st.markdown("""
-    <div class="showcase-section" style="padding-top: 32px;">
-        <div class="showcase-heading">Accelerate Your<br>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>
-    """, unsafe_allow_html=True)
-with right_col:
-    # ── Extract Data card ──
-    st.markdown("""
-    <style>
-    /* card wrapper used by both showcase cards */
-    .aim-showcase-card-wrap {
-        border-radius: 14px;
-        overflow: hidden;
-        border: 1.5px solid #e4e8e5;
-        margin-bottom: 4px;
-        background: #f7f8f9;
-        box-shadow: 0 2px 12px rgba(0,0,0,0.06);
-    }
-    .aim-showcase-card-wrap:hover {
-        box-shadow: 0 6px 24px rgba(0,0,0,0.11);
-        border-color: #8ACAFF;
-    }
-    /* Make st.image inside card flush */
-    .aim-showcase-card-wrap [data-testid="stImage"] img {
-        border-radius: 0 !important;
-        width: 100% !important;
-        object-fit: cover !important;
-        max-height: 190px !important;
-        display: block !important;
-    }
-    .aim-showcase-card-wrap [data-testid="stImage"] {
-        margin: 0 !important;
-        padding: 0 !important;
-        line-height: 0 !important;
-    }
-    .aim-card-footer {
-        padding: 14px 18px 16px;
-        background: #f7f8f9;
-    }
-    .aim-card-footer-title {
-        font-family: 'DM Sans', sans-serif;
-        font-size: 1rem;
-        font-weight: 700;
-        color: #0f1f1a;
-        margin-bottom: 3px;
-    }
-    .aim-card-footer-tag {
-        font-family: 'DM Sans', sans-serif;
-        font-size: 0.7rem;
-        font-weight: 700;
-        letter-spacing: 1.2px;
-        color: #8ACAFF;
-        text-transform: uppercase;
-    }
-    /* Nav buttons */
-    .st-key-showcase_extract_btn button,
-    .st-key-showcase_search_btn button {
-        background: transparent !important;
-        border: none !important;
-        color: #8ACAFF !important;
-        font-family: 'DM Sans', sans-serif !important;
-        font-size: 0.82rem !important;
-        font-weight: 600 !important;
-        padding: 0 0 18px 0 !important;
-        height: auto !important;
-        box-shadow: none !important;
-        text-align: left !important;
-    }
-    </style>
-    """, unsafe_allow_html=True)
-    if st.button("Go to Extract Data →", key="showcase_extract_btn"):
-        st.markdown(
-            '<div class="aim-showcase-card-wrap"><img src="' + extract_card_img + '" style="width:100%;max-height:190px;object-fit:cover;display:block;"/>'
-            '<div class="aim-card-footer"><div class="aim-card-footer-title">Extract Data</div>'
-            '<div class="aim-card-footer-tag">Platform</div></div></div>',
-            unsafe_allow_html=True
-        )
-        st.switch_page("page_files/Upload_Data.py")
-    # ── Search card ──
-    if st.button("Go to Search →", key="showcase_search_btn"):
-        st.markdown(
-            '<div class="aim-showcase-card-wrap"><img src="' + search_card_img + '" style="width:100%;max-height:190px;object-fit:cover;display:block;"/>'
-            '<div class="aim-card-footer"><div class="aim-card-footer-title">Search</div>'
-            '<div class="aim-card-footer-tag">Data Page</div></div></div>',
-            unsafe_allow_html=True
-        )
-        st.switch_page("page_files/Categorized_Search.py")
-st.markdown("<div style='background:#fff; padding: 12px 0; border-bottom: 1px solid #e8e8e4;'></div>", unsafe_allow_html=True)

+# Showcase section - Databricks style
+# Cards rendered in components.html so image+text+click all live inside one card
+_extract_img = extract_card_img
+_search_img  = search_card_img
+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; background: #fff; }}
+.showcase-wrap {{
+    display: flex;
+    align-items: flex-start;
+    gap: 48px;
+    padding: 64px 60px 64px;
     background: #fff;
+}}
+/* LEFT TEXT */
+.showcase-left {{
+    flex: 0 0 320px;
+    padding-top: 16px;
+}}
+.showcase-label {{
+    font-size: 0.68rem;
+    font-weight: 700;
+    letter-spacing: 1.8px;
+    text-transform: uppercase;
+    color: #8ACAFF;
+    margin-bottom: 14px;
+}}
+.showcase-heading {{
+    font-size: clamp(1.8rem, 3vw, 2.4rem);
     font-weight: 800;
     color: #0f1f1a;
     letter-spacing: -1px;
+    line-height: 1.15;
+    margin-bottom: 16px;
+}}
+.showcase-sub {{
     color: #5a6b65;
+    font-size: 0.93rem;
+    line-height: 1.7;
+}}
+/* RIGHT CARDS */
+.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,0.10);
+    text-decoration: none;
+    display: flex;
+    flex-direction: column;
+    transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
     cursor: pointer;
+}}
+.s-card:hover {{
+    box-shadow: 0 8px 32px rgba(138,202,255,0.18);
     border-color: #8ACAFF;
+    transform: translateY(-3px);
+}}
+.s-card-img {{
     width: 100%;
+    height: 200px;
     object-fit: cover;
+    object-position: top left;
+    display: block;
+    border-bottom: 1px solid #1e3a30;
+}}
+.s-card-body {{
+    padding: 22px 22px 26px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}}
+.s-card-title {{
+    font-size: 1.15rem;
     font-weight: 700;
+    color: #fff;
+    margin-bottom: 8px;
+    letter-spacing: -0.3px;
+}}
+.s-card-desc {{
+    font-size: 0.85rem;
+    color: #7a9e8f;
+    line-height: 1.6;
+    flex: 1;
+    margin-bottom: 18px;
+}}
+.s-card-link {{
+    font-size: 0.85rem;
+    font-weight: 600;
     color: #8ACAFF;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+}}
+.s-card-link::after {{
+    content: "\2192";
+}}
 </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">
+        <a class="s-card" href="/Upload_Data" target="_self">
+            <img class="s-card-img" src="{_extract_img}" 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>
+        </a>
+        <a class="s-card" href="/Categorized_Search" target="_self">
+            <img class="s-card-img" src="{_search_img}" 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>
+        </a>
+    </div>
+</div>
+</body></html>
+""", height=420, scrolling=False)