Update pages/reader.py

pages/reader.py

@@ -32,9 +32,59 @@ st.write(paramx)
 filtered_df = df[df['ID'] == paramx]
 
 if not filtered_df.empty:
-    st.write("### Article Info")
-    st.write("**Title:**", filtered_df.iloc[0]['Title'])
-    st.write("**Introduction:**", filtered_df.iloc[0]['Introduction'])
-    st.write("**Method:**", filtered_df.iloc[0]['Method'])
+    row = filtered_df.iloc[0]
+
+    title = row["Title"]
+    author = row.get("Author", "Unknown Author")
+    intro = row["Introduction"]
+    method = row["Method"]
+
+    html_content = f"""
+    <style>
+        .article-container {{
+            font-family: 'Georgia', serif;
+            font-size: 16px;
+            line-height: 1.8;
+            color: #333;
+            padding: 20px;
+            background-color: #fefefe;
+            border-radius: 10px;
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+        }}
+        .article-title {{
+            font-size: 28px;
+            font-weight: bold;
+            margin-bottom: 5px;
+        }}
+        .article-author {{
+            font-size: 16px;
+            color: #666;
+            margin-bottom: 20px;
+        }}
+        .section-title {{
+            font-size: 20px;
+            font-weight: bold;
+            margin-top: 25px;
+            margin-bottom: 10px;
+            color: #004488;
+        }}
+        .section-content {{
+            text-align: justify;
+        }}
+    </style>
+
+    <div class="article-container">
+        <div class="article-title">{title}</div>
+        <div class="article-author">By {author}</div>
+
+        <div class="section-title">Introduction</div>
+        <div class="section-content">{intro}</div>
+
+        <div class="section-title">Method</div>
+        <div class="section-content">{method}</div>
+    </div>
+    """
+
+    st.markdown(html_content, unsafe_allow_html=True)
 else:
-    st.warning("No article found with that ID.")
+    st.warning("No matching article found.")