data page added

pages/04_data.py

@@ -0,0 +1,181 @@
+import streamlit as st
+
+def main():
+    st.set_page_config(page_title="Data Demystified", page_icon="📊", layout="wide")
+    
+    # Custom CSS for better engagement
+    st.markdown("""
+    <style>
+    .highlight-box {
+        padding: 1rem;
+        border-radius: 10px;
+        background: #f0f2f6;
+        margin: 1rem 0;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+    .fun-fact {
+        color: #2e7d32;
+        font-weight: 500;
+    }
+    .emoji-header {
+        font-size: 2.5rem !important;
+        margin-bottom: 1rem;
+    }
+    </style>
+    """, unsafe_allow_html=True)
+
+    pages = {
+        "🏠 Introduction": intro_page,
+        "📚 Data Types Overview": types_page,
+        "🗂️ Structured Data": structured_page,
+        "🧩 Semi-Structured Data": semi_structured_page,
+        "🎨 Unstructured Data": unstructured_page
+    }
+
+    with st.sidebar:
+        st.title("Navigation")
+        page = st.radio("Go to", list(pages.keys()))
+    
+    pages[page]()
+
+def intro_page():
+    st.markdown('<div class="emoji-header">📊 Welcome to Data Science Fundamentals</div>', unsafe_allow_html=True)
+    
+    col1, col2 = st.columns([3, 2])
+    with col1:
+        st.write("""
+        ### What is Data Science?
+        Data Science is the art of extracting meaningful insights from raw data - 
+        like being a digital detective uncovering hidden patterns in the numbers!
+        
+        **Did you know?** 🤔  
+        <span class="fun-fact">Every day, we create 2.5 quintillion bytes of data - 
+        that's equivalent to 250,000 Libraries of Congress!</span>
+        """, unsafe_allow_html=True)
+        
+        st.markdown("""
+        ### Why It Matters:
+        - Predict future trends 🌟
+        - Solve complex problems 🧩
+        - Power AI innovations 🤖
+        - Drive business decisions 💼
+        """)
+    
+    with col2:
+        st.image("https://cdn-uploads.huggingface.co/production/uploads/64c972774515835c4dadd754/qpmLGi47ucDCWYEi8eZhE.png", 
+                caption="Data is Everywhere!", width=300)
+
+def types_page():
+    st.header("📦 The Three Data Superheroes")
+    
+    with st.expander("🔍 Quick Comparison"):
+        st.table({
+            "Type": ["Structured", "Semi-Structured", "Unstructured"],
+            "Organization": ["Perfectly Organized", "Partially Organized", "Chaotic Creativity"],
+            "Examples": ["SQL Databases, Excel", "JSON, XML, CSV", "Images, Videos, Text"]
+        })
+    
+    cols = st.columns(3)
+    data_types = [
+        ("🗂️ Structured", "Neat rows & columns", "#e3f2fd"),
+        ("🧩 Semi-Structured", "Flexible tags & markers", "#f0f4c3"),
+        ("🎨 Unstructured", "Creative free-form", "#ffcdd2")
+    ]
+    
+    for col, (icon, desc, color) in zip(cols, data_types):
+        with col:
+            st.markdown(f"""
+            <div style="background: {color}; padding: 1rem; border-radius: 10px;">
+                <h3>{icon} {desc.split()[0]}</h3>
+                <p>{' '.join(desc.split()[1:])}</p>
+            </div>
+            """, unsafe_allow_html=True)
+
+def structured_page():
+    st.header("🗂️ Structured Data: The Organized Perfectionist")
+    
+    with st.container():
+        st.markdown("""
+        ### Characteristics:
+        - Strict schema 🔒
+        - Tabular format 📊
+        - Easy to query 🔍
+        
+        **Did you know?** 🤔  
+        <span class="fun-fact">The first computerized database appeared in 1963 - 
+        it weighed more than a car! 🚗💾</span>
+        """, unsafe_allow_html=True)
+        
+        st.image("https://cdn-uploads.huggingface.co/production/uploads/64c972774515835c4dadd754/dSbyOXaQ6N_Kg2TLxgEyt.png", 
+                width=400, caption="Structured Data Example")
+        
+        with st.expander("💡 Real-World Examples"):
+            st.markdown("""
+            - Financial records 💰
+            - Inventory systems 📦
+            - Student databases 🎓
+            - Railway timetables 🚄
+            """)
+
+def semi_structured_page():
+    st.header("🧩 Semi-Structured Data: The Flexible Friend")
+    
+    with st.container():
+        st.markdown("""
+        ### Why It's Special:
+        - Partial organization 🎭
+        - Self-describing formats 📝
+        - Web-friendly 🌐
+        
+        **Did you know?** 🤔  
+        <span class="fun-fact">JSON was created in 2001 - 
+        the same year Wikipedia launched! 🎂📚</span>
+        """, unsafe_allow_html=True)
+        
+        cols = st.columns(2)
+        with cols[0]:
+            st.code("""
+            {
+              "name": "Data Hero",
+              "skills": ["JSON", "XML", "CSV"],
+              "mission": "Bring order to chaos!"
+            }
+            """, language="json")
+        
+        with cols[1]:
+            st.markdown("""
+            ### Common Formats:
+            - JSON (Web APIs) 🌍
+            - XML (Document markup) 📄
+            - CSV (Spreadsheet data) 📋
+            - Email headers 📧
+            """)
+
+def unstructured_page():
+    st.header("🎨 Unstructured Data: The Creative Chaos")
+    
+    with st.container():
+        st.markdown("""
+        ### The Wild West of Data:
+        - No predefined format 🎨
+        - Human-friendly formats 😊
+        - Requires AI processing 🤖
+        
+        **Did you know?** 🤔  
+        <span class="fun-fact">90% of all digital data is unstructured - 
+        that's like having 1000 Netflix movies for every person on Earth! 🍿🌍</span>
+        """, unsafe_allow_html=True)
+        
+        st.image("https://cdn-uploads.huggingface.co/production/uploads/64c972774515835c4dadd754/xhaNBRanDaj8esumqo9hl.png", 
+                width=400, caption="Unstructured Data in Action")
+        
+        with st.expander("🌐 Modern Applications"):
+            st.markdown("""
+            - Facial recognition systems 👩💻
+            - Voice assistants 🗣️
+            - Medical image analysis 🏥
+            - Social media monitoring 📱
+            """)
+
+if __name__ == "__main__":
+    main()