Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,40 +1,543 @@
-import altair as alt
+import streamlit as st
 import numpy as np
+import matplotlib.pyplot as plt
 import pandas as pd
-import streamlit as st
+from math import pi, radians, degrees
+import time
+
+# Set page configuration
+st.set_page_config(
+    page_title="Trigonometry Basics Explorer",
+    page_icon="📐",
+    layout="wide"
+)
+
+def safe_division(numerator, denominator, undefined_value=float('inf')):
+    """Safely handle division by zero for trigonometric functions."""
+    return numerator / denominator if abs(denominator) > 1e-10 else undefined_value
+
+def calculate_trig_functions(angle_rad):
+    """Calculate all six trigonometric functions for a given angle in radians."""
+    sin_val = np.sin(angle_rad)
+    cos_val = np.cos(angle_rad)
+    
+    # Primary functions
+    sine = sin_val
+    cosine = cos_val
+    tangent = safe_division(sin_val, cos_val)
+    
+    # Reciprocal functions
+    cosecant = safe_division(1, sin_val)
+    secant = safe_division(1, cos_val)
+    cotangent = safe_division(cos_val, sin_val)
+    
+    return {
+        'sin': sine,
+        'cos': cosine,
+        'tan': tangent,
+        'csc': cosecant,
+        'sec': secant,
+        'cot': cotangent
+    }
+
+
+def create_animated_unit_circle(angle_degrees, show_animation=False, show_special_angles=True):
+
+    """Create unit circle with animation trail and enhanced features."""
+    fig, ax = plt.subplots(figsize=(9, 9))
+    
+    # Draw unit circle
+    theta = np.linspace(0, 2*pi, 100)
+    x_circle = np.cos(theta)
+    y_circle = np.sin(theta)
+    ax.plot(x_circle, y_circle, 'b-', linewidth=3, label='Unit Circle', alpha=0.8)
+    
+    # Convert angle to radians
+    angle_rad = radians(angle_degrees)
+    
+    # Calculate point on circle
+    x_point = np.cos(angle_rad)
+    y_point = np.sin(angle_rad)
+    
+    # Add quadrant shading
+    quadrant_colors = ['lightblue', 'lightgreen', 'lightyellow', 'lightcoral']
+    angles_quad = [np.linspace(i*pi/2, (i+1)*pi/2, 50) for i in range(4)]
+    
+    for i, angles in enumerate(angles_quad):
+        x_quad = np.cos(angles)
+        y_quad = np.sin(angles)
+        ax.fill_between([0]*len(x_quad), [0]*len(y_quad), 
+                       x_quad, alpha=0.1, color=quadrant_colors[i])
+    
+    # Add special angle markers if enabled
+    if show_special_angles:
+        special_angles = [0, 30, 45, 60, 90, 120, 135, 150, 180, 210, 225, 240, 270, 300, 315, 330]
+        special_colors = ['red', 'orange', 'gold', 'green', 'blue', 'purple', 'brown', 'pink',
+                         'gray', 'olive', 'cyan', 'magenta', 'lime', 'indigo', 'coral', 'navy']
+        
+        for i, special_angle in enumerate(special_angles):
+            special_rad = radians(special_angle)
+            x_special = np.cos(special_rad)
+            y_special = np.sin(special_rad)
+            
+            # Plot special angle point
+            ax.plot(x_special, y_special, 'o', color=special_colors[i % len(special_colors)], 
+                   markersize=6, markeredgecolor='black', markeredgewidth=1, alpha=0.8)
+            
+            # Add angle labels (only for major angles to avoid clutter)
+            if special_angle % 30 == 0 or special_angle in [45, 135, 225, 315]:
+                # Position label slightly outside the circle
+                label_x = 1.15 * x_special
+                label_y = 1.15 * y_special
+                ax.text(label_x, label_y, f'{special_angle}°', 
+                       fontsize=9, fontweight='bold', ha='center', va='center',
+                       bbox=dict(boxstyle="round,pad=0.2", facecolor='white', alpha=0.7, edgecolor='gray'))
+    
+
+    # Draw radius line with arrow
+    ax.annotate('', xy=(x_point, y_point), xytext=(0, 0),
+                arrowprops=dict(arrowstyle='->', color='red', lw=3))
+    
+    # Mark the point with enhanced styling
+    ax.plot(x_point, y_point, 'ro', markersize=12, 
+            markeredgecolor='darkred', markeredgewidth=2)
+    
+    # Draw coordinate lines with labels
+    ax.plot([x_point, x_point], [0, y_point], 'g--', linewidth=3, 
+            alpha=0.8, label=f'sin({angle_degrees}°) = {y_point:.3f}')
+    ax.plot([0, x_point], [0, 0], 'm--', linewidth=3, 
+            alpha=0.8, label=f'cos({angle_degrees}°) = {x_point:.3f}')
+    
+    # Add angle arc
+    if angle_degrees > 0:
+        arc_angles = np.linspace(0, angle_rad, max(int(angle_degrees/10), 5))
+        arc_x = 0.3 * np.cos(arc_angles)
+        arc_y = 0.3 * np.sin(arc_angles)
+        ax.plot(arc_x, arc_y, 'orange', linewidth=3, alpha=0.7)
+        
+        # Add angle label
+        mid_angle = angle_rad / 2
+        ax.text(0.4 * np.cos(mid_angle), 0.4 * np.sin(mid_angle), 
+                f'{angle_degrees}°', fontsize=12, fontweight='bold',
+                ha='center', va='center', 
+                bbox=dict(boxstyle="round,pad=0.3", facecolor='white', alpha=0.8))
+    
+    # Add coordinate labels
+    ax.text(x_point + 0.05, y_point + 0.05, 
+            f'({x_point:.3f}, {y_point:.3f})', 
+            fontsize=11, fontweight='bold',
+            bbox=dict(boxstyle="round,pad=0.3", facecolor='yellow', alpha=0.7))
+    
+    # Draw axes with labels
+    ax.axhline(y=0, color='k', linewidth=1)
+    ax.axvline(x=0, color='k', linewidth=1)
+    
+    # Add quadrant labels
+    ax.text(0.7, 0.7, 'Q1', fontsize=14, fontweight='bold', ha='center', va='center')
+    ax.text(-0.7, 0.7, 'Q2', fontsize=14, fontweight='bold', ha='center', va='center')
+    ax.text(-0.7, -0.7, 'Q3', fontsize=14, fontweight='bold', ha='center', va='center')
+    ax.text(0.7, -0.7, 'Q4', fontsize=14, fontweight='bold', ha='center', va='center')
+    
+    # Set equal aspect ratio and limits
+    ax.set_xlim(-1.3, 1.3)
+    ax.set_ylim(-1.3, 1.3)
+    ax.set_aspect('equal')
+    ax.grid(True, alpha=0.3)
+    ax.legend(bbox_to_anchor=(1.05, 1), loc='upper left')
+    ax.set_title(f'Unit Circle at {angle_degrees}°', fontsize=16, fontweight='bold')
+    
+    # Add axis labels
+    ax.set_xlabel('Cosine values', fontsize=12, fontweight='bold')
+    ax.set_ylabel('Sine values', fontsize=12, fontweight='bold')
+    
+    plt.tight_layout()
+    return fig
+
+def create_enhanced_function_plots(angle_range, selected_functions, current_angle=None, show_special_angles=True):
+    """Enhanced function plots with current angle highlighted."""
+    num_functions = len(selected_functions)
+    if num_functions == 0:
+        return None
+    
+    # Dynamic subplot arrangement
+    if num_functions <= 2:
+        fig, axes = plt.subplots(1, num_functions, figsize=(7*num_functions, 6))
+    elif num_functions <= 4:
+        fig, axes = plt.subplots(2, 2, figsize=(14, 10))
+    else:
+        fig, axes = plt.subplots(2, 3, figsize=(15, 10))
+    
+    if num_functions == 1:
+        axes = [axes]
+    else:
+        axes = axes.flatten()
+    
+    angle_rad = np.radians(angle_range)
+    
+    functions = {
+        'sin': {'func': np.sin, 'color': 'blue', 'title': 'Sine Function', 'ylim': (-1.1, 1.1)},
+        'cos': {'func': np.cos, 'color': 'red', 'title': 'Cosine Function', 'ylim': (-1.1, 1.1)},
+        'tan': {'func': lambda x: np.where(np.abs(np.cos(x)) > 1e-10, np.tan(x), np.nan), 'color': 'green', 'title': 'Tangent Function', 'ylim': (-5, 5)},
+        'csc': {'func': lambda x: np.where(np.abs(np.sin(x)) > 1e-10, 1/np.sin(x), np.nan), 'color': 'purple', 'title': 'Cosecant Function', 'ylim': (-5, 5)},
+        'sec': {'func': lambda x: np.where(np.abs(np.cos(x)) > 1e-10, 1/np.cos(x), np.nan), 'color': 'orange', 'title': 'Secant Function', 'ylim': (-5, 5)},
+        'cot': {'func': lambda x: np.where(np.abs(np.sin(x)) > 1e-10, np.cos(x)/np.sin(x), np.nan), 'color': 'brown', 'title': 'Cotangent Function', 'ylim': (-5, 5)}
+    }
+    plot_idx = 0
+    for func_name in selected_functions:
+        if func_name in functions:
+            ax = axes[plot_idx]
+            func_info = functions[func_name]
+            
+            try:
+                y_values = func_info['func'](angle_rad)
+                y_values = np.clip(y_values, func_info['ylim'][0], func_info['ylim'][1])
+                ax.plot(angle_range, y_values, color=func_info['color'], linewidth=2.5, alpha=0.8)
+                
+                # Highlight current angle
+                if current_angle is not None:
+                    current_y = func_info['func'](radians(current_angle))
+                    if abs(current_y) <= abs(func_info['ylim'][1]):
+                        ax.plot(current_angle, current_y, 'o', color='red', markersize=10, 
+                               markeredgecolor='darkred', markeredgewidth=2)
+                        ax.axvline(x=current_angle, color='red', linestyle='--', alpha=0.5)
+                
+                ax.set_title(func_info['title'], fontsize=14, fontweight='bold')
+                ax.set_xlabel('Angle (degrees)', fontsize=12)
+                ax.set_ylabel(f'{func_name}(θ)', fontsize=12)
+                ax.grid(True, alpha=0.3)
+                ax.axhline(y=0, color='k', linewidth=0.5)
+                ax.axvline(x=0, color='k', linewidth=0.5)
+                ax.set_ylim(func_info['ylim'])
+                
+                # Add special angle markers only if enabled
+                if show_special_angles:
+                    special_angles = [0, 30, 45, 60, 90, 120, 135, 150, 180, 210, 225, 240, 270, 300, 315, 330, 360]
+                    for special_angle in special_angles:
+                        if angle_range[0] <= special_angle <= angle_range[-1]:
+                            ax.axvline(x=special_angle, color='gray', linestyle=':', alpha=0.3)
+                            # Add small text labels for key angles
+                            if special_angle % 90 == 0 or special_angle in [30, 45, 60, 135, 225, 315]:
+                                ax.text(special_angle, func_info['ylim'][1] * 0.9, f'{special_angle}°', 
+                                       rotation=90, fontsize=8, ha='center', va='top', alpha=0.7)
+        
+            except:
+                ax.text(0.5, 0.5, 'Function has\ndiscontinuities', 
+                       transform=ax.transAxes, ha='center', va='center',
+                       fontsize=12, bbox=dict(boxstyle="round,pad=0.3", facecolor='lightgray'))
+                ax.set_title(func_info['title'])
+            
+            plot_idx += 1
+    
+    # Hide unused subplots
+    for i in range(plot_idx, len(axes)):
+        axes[i].set_visible(False)
+    
+    plt.tight_layout()
+    return fig
+
+def create_comparison_table(angle_degrees):
+    """Create an enhanced comparison table with more information."""
+    trig_values = calculate_trig_functions(radians(angle_degrees))
+    
+    # Determine quadrant
+    quadrant = ""
+    if 0 <= angle_degrees < 90:
+        quadrant = "I"
+    elif 90 <= angle_degrees < 180:
+        quadrant = "II"
+    elif 180 <= angle_degrees < 270:
+        quadrant = "III"
+    else:
+        quadrant = "IV"
+    
+    # Create enhanced dataframe
+    values_df = pd.DataFrame({
+        'Function': ['sin(θ)', 'cos(θ)', 'tan(θ)', 'csc(θ)', 'sec(θ)', 'cot(θ)'],
+        'Value': [
+            f"{trig_values['sin']:.4f}",
+            f"{trig_values['cos']:.4f}",
+            f"{trig_values['tan']:.4f}" if abs(trig_values['tan']) < 1000 else "undefined",
+            f"{trig_values['csc']:.4f}" if abs(trig_values['csc']) < 1000 else "undefined",
+            f"{trig_values['sec']:.4f}" if abs(trig_values['sec']) < 1000 else "undefined",
+            f"{trig_values['cot']:.4f}" if abs(trig_values['cot']) < 1000 else "undefined"
+        ],
+        'Sign': [
+            "+" if trig_values['sin'] >= 0 else "-",
+            "+" if trig_values['cos'] >= 0 else "-",
+            "+" if abs(trig_values['tan']) < 1000 and trig_values['tan'] >= 0 else "-" if abs(trig_values['tan']) < 1000 else "N/A",
+            "+" if abs(trig_values['csc']) < 1000 and trig_values['csc'] >= 0 else "-" if abs(trig_values['csc']) < 1000 else "N/A",
+            "+" if abs(trig_values['sec']) < 1000 and trig_values['sec'] >= 0 else "-" if abs(trig_values['sec']) < 1000 else "N/A",
+            "+" if abs(trig_values['cot']) < 1000 and trig_values['cot'] >= 0 else "-" if abs(trig_values['cot']) < 1000 else "N/A"
+        ],
+        'Definition': [
+            'y-coordinate / opposite',
+            'x-coordinate / adjacent',
+            'sin(θ)/cos(θ) = opp/adj',
+            '1/sin(θ) = hyp/opp',
+            '1/cos(θ) = hyp/adj',
+            'cos(θ)/sin(θ) = adj/opp'
+        ]
+    })
+    
+    return values_df, quadrant
+
+def main():
+    st.title("📐 Trigonometry Basics Explorer")
+    st.markdown("### Learn the Six Basic Trigonometric Functions Interactively!")
+    
+    # Add a fun fact or tip of the day
+    tips = [
+        "💡 **Tip**: Remember SOHCAHTOA - Sine=Opposite/Hypotenuse, Cosine=Adjacent/Hypotenuse, Tangent=Opposite/Adjacent",
+        "🎯 **Did you know?**: The word 'sine' comes from the Latin word 'sinus' meaning 'bay' or 'fold'",
+        "🔄 **Pattern**: Notice how sine and cosine are just shifted versions of each other!",
+        "📊 **Memory trick**: In Quadrant I, all functions are positive. Use 'All Students Take Calculus' for Q1,Q2,Q3,Q4",
+        "🌊 **Cool fact**: Trigonometric functions model waves, from sound waves to ocean tides!"
+    ]
+    
+    st.info(np.random.choice(tips))
+    
+    # Sidebar controls
+    st.sidebar.header("🎛️ Controls")
+    
+    # Enhanced function selection - MOVED TO TOP TO FIX SCOPE ISSUE
+    st.sidebar.subheader("📊 Function Plots")
+    col1, col2 = st.sidebar.columns(2)
+    with col1:
+        show_primary = st.checkbox("Primary Functions", value=True)
+    with col2:
+        show_reciprocal = st.checkbox("Reciprocal Functions", value=False)
+    
+    selected_functions = []
+    if show_primary:
+        selected_functions.extend(['sin', 'cos', 'tan'])
+    if show_reciprocal:
+        selected_functions.extend(['csc', 'sec', 'cot'])
+    
+    # Plot options
+    plot_range = st.sidebar.slider("Plot range (degrees)", 180, 720, 360, 90)
+    show_special_angles = st.sidebar.checkbox("Show special angle markers", value=True)
+
+    # Enhanced angle input - MOVED AFTER FUNCTION SELECTION
+    angle_input_method = st.sidebar.radio(
+        "Choose angle input method:",
+        ["Slider", "Text Input", "Common Angles", "Auto Animation"]
+    )
+
+    # Enhanced angle input method
+    st.sidebar.subheader("🔧 Settings")
+    angle_unit = st.sidebar.radio("Angle Units:", ["Degrees", "Radians"])
+    
+    # Modify angle input methods to support both units
+    if angle_input_method == "Slider":
+        if angle_unit == "Degrees":
+            angle = st.sidebar.slider("Angle (degrees)", 0, 360, 45, 5)
+        else:
+            angle_rad = st.sidebar.slider("Angle (radians)", 0.0, 2*pi, pi/4, 0.1)
+            angle = degrees(angle_rad)
+    
+    elif angle_input_method == "Text Input":
+        if angle_unit == "Degrees":
+            angle = st.sidebar.number_input("Angle (degrees)", value=45.0, step=1.0, min_value=0.0, max_value=360.0, key="degrees_input")
+        else:
+            angle_rad = st.sidebar.number_input("Angle (radians)", value=pi/4, step=0.1, min_value=0.0, max_value=2*pi, key="radians_input")
+            angle = degrees(angle_rad)
+
+    elif angle_input_method == "Auto Animation":
+        speed = st.sidebar.slider("Animation Speed", 1, 10, 5, key="animation_speed")
+        angle_step = st.sidebar.slider("Angle Step", 5, 30, 15, key="animation_step")
+        
+        
+        # Add animation controls
+        col_anim1, col_anim2 = st.sidebar.columns(2)
+        with col_anim1:
+            start_animation = st.sidebar.button("▶️ Start", key="start_anim")  # Fixed: moved to sidebar
+        with col_anim2:
+            stop_animation = st.sidebar.button("⏹️ Stop", key="stop_anim")   # Fixed: moved to sidebar
+
+        # Add session state for animation control
+        if 'animation_running' not in st.session_state:
+            st.session_state.animation_running = False
+        
+        if start_animation:
+            st.session_state.animation_running = True
+        if stop_animation:
+            st.session_state.animation_running = False
+        
+        # Fixed: Simplified animation logic
+        if st.session_state.animation_running:
+            # Create placeholders for the animated content
+            col1_placeholder = st.empty()
+            
+            for i in range(0, 361, angle_step):
+                # Check if animation should stop
+                if not st.session_state.animation_running:
+                    break
+                    
+                angle = i
+                
+                # Create two columns for layout
+                with col1_placeholder.container():
+                    col1, col2 = st.columns([1, 1])
+                    
+                    with col1:
+                        st.subheader("🔄 Enhanced Unit Circle")
+                        st.write(f"**Current angle: {angle}°**")
+                        
+                        # Generate and display unit circle
+                        fig_circle = create_animated_unit_circle(angle, show_special_angles=show_special_angles)
+                        st.pyplot(fig_circle)
+                        plt.close()  # Important: close figure to prevent memory issues
+                        
+                        # Show current values
+                        trig_values = calculate_trig_functions(radians(angle))
+                        st.write(f"sin({angle}°) = {trig_values['sin']:.3f}")
+                        st.write(f"cos({angle}°) = {trig_values['cos']:.3f}")
+                    
+                    with col2:
+                        if selected_functions:
+                            st.subheader("📈 Enhanced Function Graphs")
+                            # Generate and display function plots
+                            angle_range = np.linspace(-plot_range//2, plot_range//2, 1000)
+                            fig_functions = create_enhanced_function_plots(angle_range, selected_functions, angle, show_special_angles)
+                            if fig_functions:
+                                st.pyplot(fig_functions)
+                                plt.close()  # Important: close figure to prevent memory issues
+                        else:
+                            st.info("Select function types from the sidebar to see animated graphs.")
+                
+                # Control animation speed
+                time.sleep(0.5 / speed)  # Adjust timing based on speed slider
+            
+            # Reset animation state when complete
+            st.session_state.animation_running = False
+            st.success("Animation complete!")
+            angle = 360  # Set final angle
+        else:
+            angle = 0  # Default angle when not animating
+    else:  # Common Angles
+        common_angles = {
+            "0°": 0, "30°": 30, "45°": 45, "60°": 60, "90°": 90,
+            "120°": 120, "135°": 135, "150°": 150, "180°": 180,
+            "210°": 210, "225°": 225, "240°": 240, "270°": 270,
+            "300°": 300, "315°": 315, "330°": 330, "360°": 360
+        }
+        selected_angle = st.sidebar.selectbox("Select common angle:", list(common_angles.keys()))
+        angle = common_angles[selected_angle]
+    
+    # Main content area
+    col1, col2 = st.columns([1, 1])
+    
+    with col1:
+        st.subheader("🔄 Enhanced Unit Circle")
+        fig_circle = create_animated_unit_circle(angle)
+        st.pyplot(fig_circle)
+        
+        # Enhanced values table
+        values_df, quadrant = create_comparison_table(angle)
+        
+        st.subheader(f"📊 Function Values (Quadrant {quadrant})")
+        st.dataframe(values_df, use_container_width=True)
+        
+        # Add quadrant information
+        st.info(f"**Angle {angle}° is in Quadrant {quadrant}**")
+    
+    with col2:
+        if selected_functions:
+            st.subheader("📈 Enhanced Function Graphs")
+            angle_range = np.linspace(-plot_range//2, plot_range//2, 1000)
+            fig_functions = create_enhanced_function_plots(angle_range, selected_functions, angle, show_special_angles)
+            st.pyplot(fig_functions)
+        else:
+            st.info("Select function types from the sidebar to see their graphs.")
+            
+        # Add a mini calculator
+        st.subheader("🧮 Quick Calculator")
+        calc_angle = st.number_input("Calculate for angle:", value=float(angle), step=1.0)
+        calc_values = calculate_trig_functions(radians(calc_angle))
+        
+        col_calc1, col_calc2 = st.columns(2)
+        with col_calc1:
+            st.metric("sin", f"{calc_values['sin']:.4f}")
+            st.metric("cos", f"{calc_values['cos']:.4f}")
+            st.metric("tan", f"{calc_values['tan']:.4f}" if abs(calc_values['tan']) < 1000 else "undefined")
+        with col_calc2:
+            st.metric("csc", f"{calc_values['csc']:.4f}" if abs(calc_values['csc']) < 1000 else "undefined")
+            st.metric("sec", f"{calc_values['sec']:.4f}" if abs(calc_values['sec']) < 1000 else "undefined")
+            st.metric("cot", f"{calc_values['cot']:.4f}" if abs(calc_values['cot']) < 1000 else "undefined")
+    
+    # Educational content
+    st.markdown("---")
+    st.subheader("📚 Understanding Trigonometric Functions")
+    
+    tab1, tab2, tab3, tab4, tab5 = st.tabs(["Definitions", "Relationships", "Key Angles", "Patterns", "Applications"])
+    
+    with tab1:
+        st.markdown("""
+        **Primary Functions:**
+        - **Sine (sin)**: The y-coordinate of a point on the unit circle
+        - **Cosine (cos)**: The x-coordinate of a point on the unit circle  
+        - **Tangent (tan)**: The ratio sin/cos, representing the slope of the radius line
+        
+        **Reciprocal Functions:**
+        - **Cosecant (csc)**: 1/sin, reciprocal of sine
+        - **Secant (sec)**: 1/cos, reciprocal of cosine
+        - **Cotangent (cot)**: 1/tan or cos/sin, reciprocal of tangent
+        """)
+    
+    with tab2:
+        st.markdown("""
+        **Fundamental Identity:**
+        - sin²(θ) + cos²(θ) = 1
+        
+        **Quotient Identities:**
+        - tan(θ) = sin(θ)/cos(θ)
+        - cot(θ) = cos(θ)/sin(θ)
+        
+        **Reciprocal Identities:**
+        - csc(θ) = 1/sin(θ)
+        - sec(θ) = 1/cos(θ)
+        - cot(θ) = 1/tan(θ)
+        """)
+    
+    with tab3:
+        key_angles_df = pd.DataFrame({
+            'Angle': ['0°', '30°', '45°', '60°', '90°', '120°', '135°', '150°', '180°', '270°', '360°'],
+            'sin': ['0', '1/2', '√2/2', '√3/2', '1', '√3/2', '√2/2', '1/2', '0', '-1', '0'],
+            'cos': ['1', '√3/2', '√2/2', '1/2', '0', '-1/2', '-√2/2', '-√3/2', '-1', '0', '1'],
+            'tan': ['0', '√3/3', '1', '√3', 'undefined', '-√3', '-1', '-√3/3', '0', 'undefined', '0']
+        })
+        st.dataframe(key_angles_df, use_container_width=True)
+        
+        # Add radians conversion table
+        st.subheader("Radian Equivalents")
+        radian_df = pd.DataFrame({
+            'Degrees': ['0°', '30°', '45°', '60°', '90°', '180°', '270°', '360°'],
+            'Radians': ['0', 'π/6', 'π/4', 'π/3', 'π/2', 'π', '3π/2', '2π'],
+            'Decimal': ['0', '0.524', '0.785', '1.047', '1.571', '3.142', '4.712', '6.283']
+        })
+        st.dataframe(radian_df, use_container_width=True)
+    
+    with tab4:
+        st.markdown("""
+        **Sign Patterns by Quadrant:**
+        - **Quadrant I (0° to 90°)**: All functions positive
+        - **Quadrant II (90° to 180°)**: Only sine positive
+        - **Quadrant III (180° to 270°)**: Only tangent positive  
+        - **Quadrant IV (270° to 360°)**: Only cosine positive
+        
+        **Remember**: "All Students Take Calculus" (All, Sin, Tan, Cos)
+        """)
+    
+    with tab5:
+        st.markdown("""
+        **Real-world Applications:**
+        - **Physics**: Wave motion, oscillations, circular motion
+        - **Engineering**: Signal processing, electrical circuits
+        - **Navigation**: GPS systems, celestial navigation
+        - **Computer Graphics**: Rotations, animations
+        - **Music**: Sound waves, harmonics
+        - **Architecture**: Designing arches and domes
+        """)
 
-"""
-# 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])),
-    ))
+if __name__ == "__main__":
+    main()