Update app.py

app.py

@@ -5,13 +5,75 @@ from ai_utils import generate_response as _generate_response
 # Set the page configuration to wide layout
 st.set_page_config(layout="wide")
 
-# Load external CSS
-with open("styles.css") as f:
-    st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
-
-# Load HTML structure
-with open("index.html") as f:
-    html_template = f.read()
+# Custom CSS to style the page, text area, and flashcards
+st.markdown("""
+    <style>
+        .main .block-container {
+            padding: 2rem;
+        }
+        .title {
+            text-align: center;
+            margin-bottom: 1rem;
+        }
+        .section-title {
+            margin-top: 2rem;
+            font-size: 1.5rem;
+        }
+        .text-area {
+            margin-top: 1rem;
+            margin-bottom: 1rem;
+        }
+        .flashcard-container {
+            display: flex;
+            flex-direction: row; /* Aligns flashcards horizontally */
+            overflow-x: auto; /* Allows horizontal scrolling if necessary */
+            gap: 20px; /* Adds space between flashcards */
+            padding: 1rem;
+        }
+        .flashcard {
+            width: 250px;
+            height: 200px;
+            border: 2px solid #4682b4; /* Steel Blue border */
+            border-radius: 5px;
+            font-size: 16px;
+            color: black;
+            background-color: #f0f8ff; /* Alice Blue background */
+            perspective: 1000px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0; /* Prevent shrinking */
+        }
+        .flashcard-inner {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            transition: transform 0.6s;
+            transform-style: preserve-3d;
+        }
+        .flashcard:hover .flashcard-inner {
+            transform: rotateY(180deg);
+        }
+        .flashcard-front, .flashcard-back {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            backface-visibility: hidden;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 1rem;
+        }
+        .flashcard-front {
+            background-color: #f0f8ff; /* Alice Blue background */
+        }
+        .flashcard-back {
+            background-color: #ffffff; /* White background for the back */
+            transform: rotateY(180deg);
+        }
+    </style>
+""", unsafe_allow_html=True)
 
 # Initialize session state variables if not already set
 if 'input_text' not in st.session_state:
@@ -108,13 +170,13 @@ if st.session_state.main_points:
 if st.session_state.flashcards:
     st.markdown("### Flashcards")
     flashcards = st.session_state.flashcards.split("\n\n")  # Assuming flashcards are separated by double newlines
-    flashcards_html = ""
+    st.markdown('<div class="flashcard-container">', unsafe_allow_html=True)
     for card in flashcards:
         try:
             # Check if card contains both question and answer
             if '\n' in card:
                 question, answer = card.split('\n', 1)
-                flashcards_html += f"""
+                st.markdown(f"""
                     <div class="flashcard">
                         <div class="flashcard-inner">
                             <div class="flashcard-front">
@@ -125,15 +187,12 @@ if st.session_state.flashcards:
                             </div>
                         </div>
                     </div>
-                """
+                """, unsafe_allow_html=True)
             else:
                 st.error("Invalid flashcard format. Each flashcard should be in 'question\\nanswer' format.")
         except Exception as e:
             st.error(f"Error processing flashcard: {e}")
-    
-    # Inject the flashcards into the HTML template
-    st.markdown(html_template.replace("<!-- Flashcards will be injected here by Streamlit -->", flashcards_html), unsafe_allow_html=True)
-    
+    st.markdown('</div>', unsafe_allow_html=True)
     st.download_button(
         label="Download Flashcards",
         data=st.session_state.flashcards,