Update page_files/Home.py

page_files/Home.py

@@ -79,17 +79,24 @@ 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;
@@ -104,6 +111,7 @@ st.markdown("""
     white-space: nowrap !important;
     box-shadow: none !important;
 }
+
 .st-emotion-cache-4dubyl [data-baseweb="input"] {
     background: #000 !important;
     height: 46px !important;
@@ -125,7 +133,9 @@ st.markdown("""
     box-shadow: none !important;
     padding-left: 18px !important;
 }
+
 .st-emotion-cache-4dubyl > div {
+
     height: 46px !important;
 }
 .st-emotion-cache-4dubyl input::placeholder {
@@ -145,6 +155,7 @@ st.markdown("""
     padding: 0 28px !important;
     box-shadow: none !important;
 }
+
 .st-key-view_all_btn button {
     background: transparent !important;
     border: none !important;
@@ -172,6 +183,7 @@ st.markdown("""
     margin-bottom: 14px;
     font-family: 'DM Sans', sans-serif;
 }
+
 </style>
 """, unsafe_allow_html=True)
 
@@ -248,6 +260,7 @@ 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;
@@ -263,6 +276,7 @@ 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; }}
@@ -273,6 +287,7 @@ 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; }}
@@ -293,6 +308,7 @@ 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; }}
@@ -301,6 +317,7 @@ 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; }}
@@ -310,6 +327,7 @@ 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">
@@ -401,6 +419,7 @@ 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');
@@ -620,6 +639,7 @@ 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; }}
@@ -632,11 +652,13 @@ 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>
@@ -656,6 +678,9 @@ body {{ font-family: 'DM Sans', sans-serif; color: #1a2e26; }}
         <div>{about_img_html}</div>
     </div>
 </section>
+
+
+
 </body></html>
 """, height=550, scrolling=False)
 
@@ -721,6 +746,7 @@ div[data-testid="stHorizontalBlock"]:has(.footer-nav-head) {
 .st-emotion-cache-1qeq59m:hover p {
     color: #8ACAFF !important;
 }
+
 /* copyright bar */
 .aim-footer-bottom {
     background: #fff;
@@ -730,6 +756,7 @@ div[data-testid="stHorizontalBlock"]:has(.footer-nav-head) {
     color: #a0b0aa;
     font-family: 'DM Sans', sans-serif;
 }
+
 </style>
 """, unsafe_allow_html=True)
 
@@ -763,3 +790,6 @@ with _:
         "page_files/Contact_Team.py",
         label="Contact Team",
     )
+
+
+