2024 Dec 30: version improved alignment

Signed-off-by: Milind Kamat <36366961+milindkamat0507@users.noreply.github.com>

app.py

@@ -2,110 +2,158 @@ import streamlit as st
 
 st.set_page_config(page_title="Learn Streamlit", layout="wide")
 
+# Custom CSS for better styling
+st.markdown("""
+<style>
+.playground-input { background-color: #f8f9fa; border-radius: 8px; padding: 1rem; }
+.output-section { border: 1px solid #ddd; border-radius: 8px; padding: 1rem; margin-top: 1rem; }
+.snippet-section { background-color: #f0f2f6; border-radius: 8px; padding: 1rem; margin: 1rem 0; }
+.code-example { font-family: monospace; background-color: #f6f6f6; padding: 0.5rem; border-radius: 4px; }
+</style>
+""", unsafe_allow_html=True)
+
 # Main navigation sidebar
 with st.sidebar:
     st.title("Streamlit Tutorial")
     selected_topic = st.radio(
         "Choose a Topic:",
-        [
-            "Basic Text Elements",
-            "Input Widgets",
-            "Layouts & Containers", 
-            "Data Display",
-            "Charts & Plots",
-            "Interactive Components"
-        ]
+        ["Basic Text Elements", "Input Widgets", "Layouts & Containers", 
+         "Data Display", "Charts & Plots", "Interactive Components"]
     )
 
 if selected_topic == "Basic Text Elements":
-    st.title("Basic Text Elements in Streamlit")
-
-    # Create two main sections: Learning and Practice
-    learning_col, practice_col = st.columns([1.2, 0.8])
-
-    # Learning Section (Code Examples + Live Output)
-    with learning_col:
-        st.markdown("### 📚 Learning Section")
-        
-        # Create two sub-columns for code and output
-        code_col, output_col = st.columns(2)
+    # Create three columns
+    learn_col1, learn_col2, practice_col = st.columns([1, 1, 1])
+    
+    # Code Examples Column
+    with learn_col1:
+        st.markdown("### 📝 Code Examples")
+        elements = [
+            ("Title", "st.title('Main Title')"),
+            ("Header", "st.header('Header')"),
+            ("Subheader", "st.subheader('Subheader')"),
+            ("Normal text", "st.write('Normal text')"),
+            ("Markdown text", "st.markdown('**Bold** and *italic*')"),
+            ("Colored text", "st.markdown(':blue[Blue text]')")
+        ]
         
-        with code_col:
-            st.markdown("#### 📝 Code Examples")
-            
-            st.markdown("**Title**")
-            st.code("st.title('Main Title')")
-            
-            st.markdown("**Header**")
-            st.code("st.header('Header')")
-            
-            st.markdown("**Subheader**")
-            st.code("st.subheader('Subheader')")
-            
-            st.markdown("**Normal text**")
-            st.code("st.write('Normal text')")
-            
-            st.markdown("**Markdown text**")
-            st.code("st.markdown('**Bold** and *italic*')")
-            
-            st.markdown("**Colored text**")
-            st.code("st.markdown(':blue[Blue text]')")
-
-        with output_col:
-            st.markdown("#### 🎯 Live Output")
+        for title, code in elements:
             with st.container(border=True):
-                st.title('Main Title')
-                st.header('Header')
-                st.subheader('Subheader')
-                st.write('Normal text')
-                st.markdown('**Bold** and *italic*')
-                st.markdown(':blue[Blue text]')
+                st.markdown(f"**{title}**")
+                st.code(code)
+    
+    # Live Output Column
+    with learn_col2:
+        st.markdown("### 🎯 Live Output")
+        with st.container(border=True):
+            st.title('Main Title')
+            st.header('Header')
+            st.subheader('Subheader')
+            st.write('Normal text')
+            st.markdown('**Bold** and *italic*')
+            st.markdown(':blue[Blue text]')
 
-    # Practice Section (Playground)
+    # Enhanced Playground Column
     with practice_col:
         st.markdown("### 💻 Practice Playground")
         
-        with st.container(border=True):
-            code = st.text_area(
-                "Try Streamlit commands:",
-                height=200,
-                placeholder="Example:\nst.title('My Title')"
-            )
-            
-            st.markdown("#### Quick Snippets")
+        # Template Selection
+        templates = {
+            "Basic Text": """st.title('My App')
+st.write('Welcome to my app!')""",
+            "Formatted Text": """st.markdown('# Big Title')
+st.markdown('**Bold** and *italic* text')
+st.markdown(':blue[Colored] :red[text]')""",
+            "Multiple Elements": """st.title('My Dashboard')
+st.header('Section 1')
+st.write('Some content')
+st.subheader('Subsection')
+st.markdown('- Bullet point 1\\n- Bullet point 2')""",
+            "Empty": ""
+        }
+        
+        template_choice = st.selectbox("Start with a template:", list(templates.keys()))
+        
+        # Code input area with template
+        if 'code_input' not in st.session_state or template_choice == "Empty":
+            st.session_state.code_input = templates[template_choice]
+        
+        code_input = st.text_area(
+            "Try Streamlit commands:",
+            value=st.session_state.code_input,
+            height=200,
+            key="playground_code"
+        )
+
+        # Quick Snippets Section
+        st.markdown("#### 📚 Quick Snippets")
+        
+        # Two columns for snippets
+        snip_col1, snip_col2 = st.columns([3, 1])
+        
+        with snip_col1:
             snippets = {
                 "Title": "st.title('My Title')",
                 "Header": "st.header('My Header')",
+                "Subheader": "st.subheader('My Subheader')",
+                "Text": "st.write('Normal text')",
+                "Bold Markdown": "st.markdown('**Bold text**')",
+                "Italic Markdown": "st.markdown('*Italic text*')",
                 "Colored Text": "st.markdown(':blue[Blue text]')",
-                "Bold & Italic": "st.markdown('**Bold** and *italic*')",
+                "Bullet Points": "st.markdown('- Point 1\\n- Point 2')",
+                "Numbered List": "st.markdown('1. First\\n2. Second')",
+                "Divider": "st.markdown('---')"
             }
-            
-            col1, col2 = st.columns([2, 1])
-            with col1:
-                selected_snippet = st.selectbox("Insert:", list(snippets.keys()))
-            with col2:
-                if st.button("Add Snippet"):
-                    if code:
-                        code += "\n" + snippets[selected_snippet]
-                    else:
-                        code = snippets[selected_snippet]
-            
-            st.markdown("#### Output")
-            with st.container(border=True):
-                if code:
-                    try:
-                        exec(code)
-                    except Exception as e:
-                        st.error(f"Error: {str(e)}")
+            snippet = st.selectbox("Choose snippet:", list(snippets.keys()))
+        
+        with snip_col2:
+            if st.button("Add", key="add_snippet"):
+                if code_input:
+                    code_input += f"\n{snippets[snippet]}"
+                else:
+                    code_input = snippets[snippet]
+                st.session_state.code_input = code_input
+
+        # Control buttons
+        col1, col2, col3 = st.columns([1, 1, 1])
+        with col1:
+            if st.button("▶️ Run"):
+                st.session_state.code_input = code_input
+        with col2:
+            if st.button("🔄 Reset"):
+                st.session_state.code_input = ""
+                code_input = ""
+        with col3:
+            if st.button("💾 Copy"):
+                st.code(code_input)
+
+        # Output section
+        st.markdown("#### 🎨 Live Output")
+        with st.container(border=True):
+            if code_input:
+                try:
+                    exec(code_input)
+                except Exception as e:
+                    st.error(f"Error: {str(e)}")
+
+        # Interactive Help
+        with st.expander("💡 Tips & Help"):
+            st.markdown("""
+            #### Quick Tips:
+            1. Start with a template or add snippets
+            2. Mix different text elements
+            3. Use markdown for formatting:
+                - `**bold**` for **bold**
+                - `*italic*` for *italic*
+                - `:blue[text]` for colored text
+            4. Press 'Run' to see changes
+            5. 'Reset' clears the playground
+            """)
 
-# Tips Section
-with st.expander("💡 Tips & Tricks"):
-    st.markdown("""
-    - Use `st.write()` for simple text output
-    - Use markdown for formatted text
-    - Try different header levels (title, header, subheader)
-    - Experiment with colored text using `:blue[text]`, `:red[text]`, etc.
-    """)
+        # Code Preview
+        with st.expander("👀 Preview Your Code"):
+            st.code(code_input)
 
+# Footer
 st.markdown("---")
-st.caption("📚 Learn more at streamlit.io/docs")
+st.caption("Learn more at streamlit.io/docs")