Update app.py

app.py

@@ -23,6 +23,7 @@ st.markdown(
         padding: 1rem;
         border-radius: 10px;
         color: #4CAF50;
+        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
     }
     
     /* Обертка для блока контента */
@@ -90,6 +91,31 @@ st.markdown(
         from { opacity: 0; }
         to { opacity: 1; }
     }
+
+    /* Стили для интерактивных элементов боковой панели */
+    .sidebar .element-container {
+        margin: 20px 0;
+    }
+
+    .sidebar .element-container h3 {
+        color: #ff7043;
+        margin-bottom: 10px;
+    }
+
+    .sidebar .element-container input[type="text"] {
+        padding: 10px;
+        border-radius: 5px;
+        border: 1px solid #ccc;
+        width: 100%;
+    }
+
+    .sidebar .element-container textarea {
+        padding: 10px;
+        border-radius: 5px;
+        border: 1px solid #ccc;
+        width: 100%;
+        height: 100px;
+    }
     </style>
     """,
     unsafe_allow_html=True,
@@ -135,24 +161,24 @@ st.markdown("""
 st.image("image.webp", caption="Sign Language Recognition", use_column_width=True)
 
 # Боковая панель
-st.sidebar.title("Navigation")
 st.sidebar.markdown(
     """
-    <style>
-    .sidebar .sidebar-content a {
-        color: #4CAF50;
-        font-size: 1.2rem;
-        text-decoration: none;
-    }
-    .sidebar .sidebar-content a:hover {
-        color: #f4511e;
-        text-decoration: underline;
-    }
-    </style>
-    <a href="#camera">Camera</a><br>
-    <a href="#video-upload">Video Upload</a><br>
-    <a href="#about">About</a>
+    <div class="element-container">
+        <h3>Input Text</h3>
+        <input type="text" placeholder="Enter text here">
+    </div>
+    <div class="element-container">
+        <h3>Additional Comments</h3>
+        <textarea placeholder="Enter your comments here"></textarea>
+    </div>
+    <div class="element-container">
+        <h3>Navigate</h3>
+        <a href="#camera">Camera</a><br>
+        <a href="#video-upload">Video Upload</a><br>
+        <a href="#about">About</a>
+    </div>
     """, 
     unsafe_allow_html=True
 )
 
+