Update page_files/Home.py
Browse files- page_files/Home.py +5 -39
page_files/Home.py
CHANGED
|
@@ -400,39 +400,7 @@ observer.observe(document.querySelector('.anim-section'));
|
|
| 400 |
</body></html>
|
| 401 |
""", height=700, scrolling=False)
|
| 402 |
|
| 403 |
-
# ══════════════════════════════════════════════════════════════════════════════
|
| 404 |
-
# 2. HERO , heading + description (static HTML)
|
| 405 |
-
# ══════════════════════════════════════════════════════════════════════════════
|
| 406 |
-
st.markdown("""
|
| 407 |
-
<style>
|
| 408 |
-
.aim-hero-text {
|
| 409 |
-
background: #fff;
|
| 410 |
-
text-align: center;
|
| 411 |
-
padding: 64px 40px 24px;
|
| 412 |
-
border-bottom: none;
|
| 413 |
-
}
|
| 414 |
-
.aim-hero-text h1 {
|
| 415 |
-
font-family: 'DM Sans', sans-serif;
|
| 416 |
-
font-size: clamp(2rem, 4.5vw, 3.2rem);
|
| 417 |
-
font-weight: 800; color: #0f1f1a;
|
| 418 |
-
line-height: 1.1; letter-spacing: -1.5px;
|
| 419 |
-
margin-bottom: 18px;
|
| 420 |
-
}
|
| 421 |
-
.aim-hero-text p {
|
| 422 |
-
color: #5a6b65; font-size: 1rem; line-height: 1.65;
|
| 423 |
-
max-width: 500px; margin: 0 auto 28px;
|
| 424 |
-
}
|
| 425 |
-
</style>
|
| 426 |
-
<div class="aim-hero-text">
|
| 427 |
-
<h1>Accelerate Your Composites Research</h1>
|
| 428 |
-
<p>Access a centralized, open-source database for experimental composite material properties.
|
| 429 |
-
Polymer, fiber, and composite datasets , all in one place.</p>
|
| 430 |
-
</div>
|
| 431 |
-
""", unsafe_allow_html=True)
|
| 432 |
-
|
| 433 |
|
| 434 |
-
|
| 435 |
-
# ══════════════════════════════════════════════════════════════════════════════
|
| 436 |
# 4. STATS (static HTML)
|
| 437 |
# ══════════════════════════════════════════════════════════════════════════════
|
| 438 |
st.markdown(f"""
|
|
@@ -536,8 +504,6 @@ st.markdown("""
|
|
| 536 |
# Cards rendered in components.html so image+text+click all live inside one card
|
| 537 |
_extract_img = extract_card_img
|
| 538 |
_search_img = search_card_img
|
| 539 |
-
extract_page_link = st.page_link("page_files/Upload_Data.py")
|
| 540 |
-
search_page_link = st.page_link("page_files/Categorized_Search.py")
|
| 541 |
|
| 542 |
components.html(f"""
|
| 543 |
<!DOCTYPE html><html lang="en"><head>
|
|
@@ -608,7 +574,7 @@ body {{ font-family: 'DM Sans', sans-serif; background: #fff; }}
|
|
| 608 |
}}
|
| 609 |
.s-card-img {{
|
| 610 |
width: 100%;
|
| 611 |
-
height:
|
| 612 |
object-fit: cover;
|
| 613 |
object-position: top left;
|
| 614 |
display: block;
|
|
@@ -658,7 +624,7 @@ body {{ font-family: 'DM Sans', sans-serif; background: #fff; }}
|
|
| 658 |
</div>
|
| 659 |
|
| 660 |
<div class="showcase-cards">
|
| 661 |
-
<
|
| 662 |
<img class="s-card-img" src="{_extract_img}" alt="Extract Data"/>
|
| 663 |
<div class="s-card-body">
|
| 664 |
<div class="s-card-title">Extract Data</div>
|
|
@@ -667,19 +633,19 @@ body {{ font-family: 'DM Sans', sans-serif; background: #fff; }}
|
|
| 667 |
</div>
|
| 668 |
</a>
|
| 669 |
|
| 670 |
-
<
|
| 671 |
<img class="s-card-img" src="{_search_img}" alt="Search"/>
|
| 672 |
<div class="s-card-body">
|
| 673 |
<div class="s-card-title">Search</div>
|
| 674 |
<p class="s-card-desc">Browse and filter polymer, fiber, and composite material properties across the full database.</p>
|
| 675 |
<span class="s-card-link">Open search</span>
|
| 676 |
</div>
|
| 677 |
-
</
|
| 678 |
</div>
|
| 679 |
</div>
|
| 680 |
|
| 681 |
</body></html>
|
| 682 |
-
""", height=
|
| 683 |
|
| 684 |
|
| 685 |
|
|
|
|
| 400 |
</body></html>
|
| 401 |
""", height=700, scrolling=False)
|
| 402 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 403 |
|
|
|
|
|
|
|
| 404 |
# 4. STATS (static HTML)
|
| 405 |
# ══════════════════════════════════════════════════════════════════════════════
|
| 406 |
st.markdown(f"""
|
|
|
|
| 504 |
# Cards rendered in components.html so image+text+click all live inside one card
|
| 505 |
_extract_img = extract_card_img
|
| 506 |
_search_img = search_card_img
|
|
|
|
|
|
|
| 507 |
|
| 508 |
components.html(f"""
|
| 509 |
<!DOCTYPE html><html lang="en"><head>
|
|
|
|
| 574 |
}}
|
| 575 |
.s-card-img {{
|
| 576 |
width: 100%;
|
| 577 |
+
height: 260px;
|
| 578 |
object-fit: cover;
|
| 579 |
object-position: top left;
|
| 580 |
display: block;
|
|
|
|
| 624 |
</div>
|
| 625 |
|
| 626 |
<div class="showcase-cards">
|
| 627 |
+
<div class="s-card" onclick="window.parent.location.href='Upload_Data'">
|
| 628 |
<img class="s-card-img" src="{_extract_img}" alt="Extract Data"/>
|
| 629 |
<div class="s-card-body">
|
| 630 |
<div class="s-card-title">Extract Data</div>
|
|
|
|
| 633 |
</div>
|
| 634 |
</a>
|
| 635 |
|
| 636 |
+
<div class="s-card" onclick="window.parent.location.href='Categorized_Search'">
|
| 637 |
<img class="s-card-img" src="{_search_img}" alt="Search"/>
|
| 638 |
<div class="s-card-body">
|
| 639 |
<div class="s-card-title">Search</div>
|
| 640 |
<p class="s-card-desc">Browse and filter polymer, fiber, and composite material properties across the full database.</p>
|
| 641 |
<span class="s-card-link">Open search</span>
|
| 642 |
</div>
|
| 643 |
+
</div>
|
| 644 |
</div>
|
| 645 |
</div>
|
| 646 |
|
| 647 |
</body></html>
|
| 648 |
+
""", height=500, scrolling=False)
|
| 649 |
|
| 650 |
|
| 651 |
|