Home.py

import streamlit as st

# 🎨 Custom CSS
st.markdown("""
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap');
    body {
        background: #111827;
        color: white;
        font-family: 'Poppins', sans-serif;
    }
    h1, h2 {
        text-align: center;
        color: #00FFFF;
        text-shadow: 0 0 8px rgba(0,255,255,0.6);
    }
    .section {
        background: rgba(255, 255, 255, 0.05);
        padding: 20px;
        border-radius: 12px;
        margin-bottom: 25px;
        box-shadow: 0 4px 10px rgba(0,255,255,0.15);
    }
    .button-container {
        text-align: center;
        margin-top: 20px;
    }
    .glow-button {
        background: linear-gradient(90deg, #00FFFF, #00BFFF);
        border: none;
        padding: 10px 24px;
        color: black;
        font-weight: bold;
        border-radius: 20px;
        margin: 6px;
        font-size: 14px;
        box-shadow: 0px 0px 8px rgba(0,255,255,0.5);
        text-decoration: none;
        display: inline-block;
    }
    .glow-button:hover {
        transform: scale(1.05);
        box-shadow: 0px 0px 15px rgba(0,255,255,1);
    }
    </style>
""", unsafe_allow_html=True)

# 🚀 Header
st.markdown("<h1>🔬 Neural Network Playground</h1>", unsafe_allow_html=True)

# 🔍 About Section
st.markdown('<div class="section">', unsafe_allow_html=True)
st.markdown("## 🤖 What is this App?")
st.write("This interactive app lets you explore neural networks in 2D using synthetic datasets. Visualize decision boundaries, test different architectures, and train models right in your browser using Keras")
st.markdown('</div>', unsafe_allow_html=True)

# 🛠 Features
st.markdown('<div class="section">', unsafe_allow_html=True)
st.markdown("## 🧠 Key Features")
st.markdown("""
- 🌀 Multiple synthetic datasets (`moons`, `circles`, `user_defined data`, etc.)
- 🧱 Choose number of hidden layers (including zero!)
- ⚙️ Adjustable neurons per layer & activation functions
- 🧮 Live decision boundary visualization
- 📉 Training loss and validation curves
""")
st.markdown('</div>', unsafe_allow_html=True)

# 👤 Creator Section
st.markdown('<div class="section">', unsafe_allow_html=True)
st.markdown("## 👨‍💻 About the Creator")
st.write("Built by a passionate developer blending Machine Learning with interactive visualization tools to make learning intuitive and engaging.")
st.markdown('</div>', unsafe_allow_html=True)

# 📬 Contact / Footer
st.markdown('<div class="section">', unsafe_allow_html=True)
st.markdown("## 📬 Contact Me")
st.markdown('<div class="button-container">', unsafe_allow_html=True)
st.markdown("""
[<a class="glow-button" href="https://www.linkedin.com/in/dommeti-thoran-raj-692769191/" target="_blank">LinkedIn</a>]  
[<a class="glow-button" href="https://github.com/raj2216" target="_blank">GitHub</a>]  
[<a class="glow-button" href="mailto:rajbunny2216@gmail.com">Email</a>]  
""", unsafe_allow_html=True)
st.markdown('</div>', unsafe_allow_html=True)
st.markdown('</div>', unsafe_allow_html=True)