Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,40 +1,90 @@
-import altair as alt
-import numpy as np
-import pandas as pd
 import streamlit as st
 
-"""
-# Welcome to Streamlit!
-
-Edit `/streamlit_app.py` to customize this app to your heart's desire :heart:.
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).
-
-In the meantime, below is an example of what you can do with just a few lines of code:
-"""
-
-num_points = st.slider("Number of points in spiral", 1, 10000, 1100)
-num_turns = st.slider("Number of turns in spiral", 1, 300, 31)
-
-indices = np.linspace(0, 1, num_points)
-theta = 2 * np.pi * num_turns * indices
-radius = indices
-
-x = radius * np.cos(theta)
-y = radius * np.sin(theta)
-
-df = pd.DataFrame({
-    "x": x,
-    "y": y,
-    "idx": indices,
-    "rand": np.random.randn(num_points),
-})
-
-st.altair_chart(alt.Chart(df, height=700, width=700)
-    .mark_point(filled=True)
-    .encode(
-        x=alt.X("x", axis=None),
-        y=alt.Y("y", axis=None),
-        color=alt.Color("idx", legend=None, scale=alt.Scale()),
-        size=alt.Size("rand", legend=None, scale=alt.Scale(range=[1, 150])),
-    ))
+st.set_page_config(
+    layout="wide" 
+)
+# Minimal Heading
+st.title("My Streamlit Application")
+
+# Custom CSS for styling the cards, ensuring equal height and spacing
+st.markdown(
+    """
+    <style>
+    /* Style for the card container */
+    .st-emotion-cache-1r6dm1c { /* This targets the columns container */
+        gap: 2rem; /* Adjust this value for the distance between cards */
+    }
+
+    /* General card styling */
+    .card {
+        border: 1px solid #e6e6e6; /* Light border */
+        border-radius: 10px; /* Rounded corners */
+        padding: 25px; /* Padding inside the card */
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Subtle shadow */
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between; /* Distribute content vertically */
+        height: 350px; /* Fixed height for equal cards */
+        background-color: #ffffff; /* White background */
+    }
+
+    /* Ensure text input and button fit well */
+    .stTextInput > div > div > input {
+        border-radius: 5px;
+        padding: 10px;
+    }
+
+    .stButton > button {
+        width: 100%; /* Make button full width */
+        border-radius: 5px;
+        padding: 10px 0;
+        margin-top: 15px; /* Space above the button */
+        background-color: #4CAF50; /* Green button */
+        color: white;
+        font-weight: bold;
+        border: none;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+    }
+
+    .stButton > button:hover {
+        background-color: #45a049;
+    }
+
+    /* Adjust subheader margin for better spacing */
+    h2 {
+        margin-top: 0;
+        margin-bottom: 20px;
+        color: #333333;
+    }
+    </style>
+    """,
+    unsafe_allow_html=True
+)
+
+# Create two columns for the cards
+col1, col2 = st.columns(2)
+
+# Card 1: Text Input and Button
+with col1:
+    st.markdown('<div class="card">', unsafe_allow_html=True)
+    st.subheader("Input Section")
+    
+    # Text input
+    user_input = st.text_input("Enter your text here:", key="input_text_card1")
+    
+    # Button
+    if st.button("Process Text", key="process_button_card1"):
+        st.write(f"You entered: **{user_input}**")
+        st.success("Text processed successfully!")
+    
+    st.markdown('</div>', unsafe_allow_html=True) # Close card div
+
+# Card 2: Placeholder for other content
+with col2:
+    st.markdown('<div class="card">', unsafe_allow_html=True)
+    st.subheader("Output/Display Section")
+    st.write("This card can be used to display results, information, or other widgets.")
+    st.write("For example, you could show a chart, an image, or more text here.")
+    st.info("This is a placeholder for your content.")
+    st.markdown('</div>', unsafe_allow_html=True) # Close card div