Upload about.py

about.py

@@ -0,0 +1,136 @@
+import streamlit as st
+
+# Define the show() function to display the About page
+def show():
+    # Page title and content
+    st.markdown("<h2 style='text-align:center; color:#4B8BBE;'>🌐 About TransPolymer</h2>", unsafe_allow_html=True)
+    st.markdown("---")
+
+    # Why TransPolymer Section
+    st.markdown("""
+    <div style='background-color: #E0F7FA; padding: 15px; border-radius: 15px; text-align: center;'>
+        <h3 style='color: #00796B; margin-bottom: 10px;'>Why TransPolymer</h3>
+        <p style='font-size: 18px; color: #333333;'>
+            In TransPolymer, we use models like <b>ChemBERTa</b> to learn from SMILES strings — a special way to represent molecules.
+            This enables understanding of complex molecular structures and provides accurate predictions, even for new polymers.
+        </p>
+    </div>
+    """, unsafe_allow_html=True)
+
+    st.markdown("---")
+
+    # 🔬 Properties Predicted Section with Animated Cards
+    st.markdown("### 🔬 Properties Predicted by TransPolymer", unsafe_allow_html=True)
+    st.markdown("""
+    <style>
+    .card-container {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+        gap: 20px;
+        margin-top: 20px;
+    }
+    .card {
+        background: #f1f8ff;
+        border: 1px solid #d9e7f5;
+        border-radius: 20px;
+        padding: 20px;
+        text-align: center;
+        box-shadow: 0 4px 12px rgba(75, 139, 190, 0.15);
+        color: #4B8BBE;
+        font-weight: bold;
+        opacity: 0;
+        transform: scale(0.5) rotate(0deg);
+        animation: burst 6s ease-out forwards;
+    }
+    .card:nth-child(1) { animation-delay: 0.4s; }
+    .card:nth-child(2) { animation-delay: 1.2s; }
+    .card:nth-child(3) { animation-delay: 2.0s; }
+    .card:nth-child(4) { animation-delay: 2.8s; }
+    .card:nth-child(5) { animation-delay: 3.6s; }
+    .card:nth-child(6) { animation-delay: 4.4s; }
+
+    .card:hover {
+        transform: scale(1.05);
+        background-color: #e6f3ff;
+        box-shadow: 0 6px 18px rgba(75, 139, 190, 0.25);
+        text-shadow: 0px 0px 8px rgba(75, 139, 190, 0.5);
+    }
+
+    @keyframes burst {
+        0% {
+            opacity: 0;
+            transform: scale(0.5) rotate(-15deg);
+        }
+        40% {
+            opacity: 1;
+            transform: scale(1.1) rotate(5deg);
+        }
+        100% {
+            opacity: 1;
+            transform: scale(1) rotate(0deg);
+        }
+    }
+    </style>
+
+    <div class="card-container">
+        <div class="card">Tensile Strength</div>
+        <div class="card">Ionization Energy</div>
+        <div class="card">Electron Affinity</div>
+        <div class="card">LogP</div>
+        <div class="card">Refractive Index</div>
+        <div class="card">Molecular Weight</div>
+    </div>
+    """, unsafe_allow_html=True)
+
+    st.markdown("---")
+
+    # 👨‍🏫 Mentor Section
+    st.markdown("### 👨‍🏫 Our Mentor", unsafe_allow_html=True)
+    st.markdown(""" 
+    <div style='text-align: justify; font-size: 17px; color: #FFFFFF;;'>
+    We are deeply grateful to our mentor, Mrs. Navatha Kolisetti, for her constant guidance and support throughout the TransPolymer project.
+    </div>
+    """, unsafe_allow_html=True)
+
+    st.markdown("---")
+
+    # 📚 SMILES Info and 🔍 Use Case with Pulse Animation
+    with st.container():
+        col1, col2 = st.columns(2)
+        with col1:
+            if st.button("📚 Learn More About SMILES"):
+                st.markdown("""
+                <div style='animation: pulse 1.5s infinite; background-color:#eef7fd; padding: 20px; border-radius: 15px; font-size: 16px; color: #333;'>
+                <b>SMILES</b> stands for <i>Simplified Molecular Input Line Entry System</i>.<br><br>
+                It encodes molecules as text strings like C1=CC=CC=C1 (for Benzene).  
+                SMILES is simple yet powerful, making it perfect for AI training on chemical data.
+                </div>
+                """, unsafe_allow_html=True)
+        with col2:
+            if st.button("🔍 Example Use Case"):
+                st.markdown("""
+                <div style='animation: pulse 1.5s infinite; background-color:#eef7fd; padding: 20px; border-radius: 15px; font-size: 16px; color: #333;'>
+                Imagine you're working on a biodegradable polymer for packaging.<br><br>
+                You need one with low density and high flexibility.  
+                Just enter the SMILES string and TransPolymer will predict its physical properties — instantly.
+                </div>
+                """, unsafe_allow_html=True)
+
+    st.markdown("""
+    <style>
+    @keyframes pulse {
+        0% {transform: scale(1); opacity: 1;}
+        50% {transform: scale(1.05); opacity: 0.8;}
+        100% {transform: scale(1); opacity: 1;}
+    }
+    </style>
+    """, unsafe_allow_html=True)
+
+    st.markdown("---")
+
+    # 💡 Modern Footer
+    st.markdown(""" 
+    <div style="text-align: center; padding-top: 20px; font-size: 14px; color: #4B8BBE;">
+        © 2025 TransPolymer • Powered by AI & Polymer Science
+    </div>
+    """, unsafe_allow_html=True)