Skip to content

Commit 30a80ce

Browse files
shubhagarwal1shubhagarwal1
committed
revamp home page
1 parent 6ff4345 commit 30a80ce

File tree

1 file changed

+199
-27
lines changed

1 file changed

+199
-27
lines changed

‎Web_app/Home_Page.py

Lines changed: 199 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,79 @@
22

33
# Configure the page
44
st.set_page_config(
5-
page_title="Movie Review Analysis and Recommendation System",
6-
page_icon="👋",
5+
page_title="Movie Maestro: Your Cinema Companion",
6+
page_icon="🎬",
7+
layout="wide",
78
)
89

9-
# Welcome message
10-
st.write("# Welcome to Movie Review Analysis and Recommendation System 👋")
10+
# Custom CSS for enhanced styling
11+
st.markdown(
12+
"""
13+
<style>
14+
.main-header {
15+
font-size: 2.5rem;
16+
font-weight: 700;
17+
margin-bottom: 1.5rem;
18+
color: #1E88E5;
19+
text-align: center;
20+
animation: fadeInDown 1.5s;
21+
}
22+
.sub-header {
23+
font-size: 1.2rem;
24+
margin-bottom: 1rem;
25+
color: #424242;
26+
text-align: center;
27+
animation: fadeInUp 1.5s;
28+
}
29+
.feature-badge {
30+
background-color: #E1F5FE;
31+
color: #0277BD;
32+
padding: 0.3rem 0.8rem;
33+
border-radius: 15px;
34+
font-weight: 600;
35+
margin: 0.2rem;
36+
display: inline-block;
37+
animation: pulse 2s infinite;
38+
}
39+
.stat-card {
40+
background-color: #FFFFFF;
41+
border-radius: 10px;
42+
padding: 0.8rem;
43+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
44+
text-align: center;
45+
transition: transform 0.3s ease;
46+
}
47+
.stat-card:hover {
48+
transform: translateY(-3px);
49+
}
50+
.stat-value {
51+
font-size: 1.5rem;
52+
font-weight: 700;
53+
color: #1E88E5;
54+
}
55+
.stat-label {
56+
font-size: 0.9rem;
57+
color: #757575;
58+
}
59+
@keyframes fadeInDown {
60+
from {opacity: 0; transform: translateY(-20px);}
61+
to {opacity: 1; transform: translateY(0);}
62+
}
63+
@keyframes fadeInUp {
64+
from {opacity: 0; transform: translateY(20px);}
65+
to {opacity: 1; transform: translateY(0);}
66+
}
67+
@keyframes pulse {
68+
0% {transform: scale(1);}
69+
50% {transform: scale(1.05);}
70+
100% {transform: scale(1);}
71+
}
72+
</style>
73+
""",
74+
unsafe_allow_html=True,
75+
)
1176

12-
# Sidebar with enhanced content
77+
# Sidebar (keeping existing content)
1378
with st.sidebar:
1479
# Animated header
1580
st.markdown(
@@ -118,6 +183,92 @@
118183
# Conclusion
119184
st.success("Select options to refine your movie recommendations and have fun!")
120185

186+
# Main content
187+
st.markdown(
188+
"""
189+
<style>
190+
.main-header {
191+
font-size: 2.5rem;
192+
font-weight: 700;
193+
margin-bottom: 1.5rem;
194+
background: linear-gradient(135deg, #2b0751, #52057b, #832ab9, #ff2a6d, #ff5e7a, #ff9e99);
195+
-webkit-background-clip: text;
196+
color: transparent;
197+
text-align: center;
198+
animation: fadeInDown 1.5s;
199+
}
200+
</style>
201+
<h1 class="main-header">Movie Maestro: Your Cinema Companion</h1>
202+
""",
203+
unsafe_allow_html=True,
204+
)
205+
206+
st.markdown(
207+
'<p class="sub-header">Discover, Analyze, and Fall in Love with Movies</p>',
208+
unsafe_allow_html=True,
209+
)
210+
211+
# Feature badges
212+
st.markdown(
213+
"""
214+
<div style="text-align: center;">
215+
<span class="feature-badge">🎭 Genre Analysis</span>
216+
<span class="feature-badge">🌟 Personalized Recommendations</span>
217+
<span class="feature-badge">📊 Sentiment Analysis</span>
218+
<span class="feature-badge">🔍 Advanced Search</span>
219+
</div>
220+
""",
221+
unsafe_allow_html=True,
222+
)
223+
224+
# Quick stats
225+
st.markdown("### 📈 Movie Insights at a Glance")
226+
col1, col2, col3, col4 = st.columns(4)
227+
228+
with col1:
229+
st.markdown(
230+
"""
231+
<div class="stat-card">
232+
<div class="stat-value">500K+</div>
233+
<div class="stat-label">Movies Analyzed</div>
234+
</div>
235+
""",
236+
unsafe_allow_html=True,
237+
)
238+
239+
with col2:
240+
st.markdown(
241+
"""
242+
<div class="stat-card">
243+
<div class="stat-value">98%</div>
244+
<div class="stat-label">Recommendation Accuracy</div>
245+
</div>
246+
""",
247+
unsafe_allow_html=True,
248+
)
249+
250+
with col3:
251+
st.markdown(
252+
"""
253+
<div class="stat-card">
254+
<div class="stat-value">50+</div>
255+
<div class="stat-label">Genres Covered</div>
256+
</div>
257+
""",
258+
unsafe_allow_html=True,
259+
)
260+
261+
with col4:
262+
st.markdown(
263+
"""
264+
<div class="stat-card">
265+
<div class="stat-value">24/7</div>
266+
<div class="stat-label">Movie Magic</div>
267+
</div>
268+
""",
269+
unsafe_allow_html=True,
270+
)
271+
121272
# Main content with a structured introduction
122273
st.markdown(
123274
"""
@@ -131,33 +282,54 @@
131282
1. **Sentiment Analysis** : Analyzes the sentiment of movie reviews (positive, negative).
132283
2. **Personalized Recommendations** : Recommends movies based on content filtering.
133284
134-
**👈 Select the part from the sidebar**
285+
**👈 Select options from the sidebar to refine your experience**
135286
"""
136287
)
137288

138-
# Adding some animation to the main content
289+
# Interactive elements
290+
st.markdown("### 🎬 Dive into the World of Cinema")
291+
292+
# Movie mood selector
293+
movie_mood = st.select_slider(
294+
"What's your movie mood today?",
295+
options=["😴 Relaxed", "😊 Happy", "🤔 Thoughtful", "😢 Emotional", "😱 Thrilled"],
296+
)
297+
st.write(f"Based on your mood, we recommend: {movie_mood.split()[1]} movies!")
298+
299+
# Personalized recommendation
300+
st.markdown("### 🎯 Get Your Personalized Movie Recommendation")
301+
fav_genre = st.multiselect(
302+
"Select your favorite genres:",
303+
["Action", "Comedy", "Drama", "Sci-Fi", "Romance", "Horror"],
304+
)
305+
watch_time = st.slider("How much time do you have? (in minutes)", 60, 240, 120)
306+
307+
if st.button("Generate Recommendation"):
308+
st.balloons()
309+
st.success(
310+
f"Based on your preferences, we recommend watching 'Inception'! It's a mind-bending {', '.join(fav_genre)} film that fits your {watch_time}-minute watch time."
311+
)
312+
313+
# Call-to-action
314+
st.markdown("### 🚀 Ready to Explore?")
139315
st.markdown(
140316
"""
141-
<style>
142-
.animated-text {
143-
animation: bounce 2s infinite;
144-
text-align: center;
145-
color: #e74c3c;
146-
}
317+
<div style="text-align: center;">
318+
<a href="#" style="background-color: #1E88E5; color: white; padding: 0.8rem 1.5rem; border-radius: 30px; text-decoration: none; font-weight: bold; display: inline-block; transition: all 0.3s;">
319+
Start Your Movie Journey
320+
</a>
321+
</div>
322+
""",
323+
unsafe_allow_html=True,
324+
)
147325

148-
@keyframes bounce {
149-
0%, 20%, 50%, 80%, 100% {
150-
transform: translateY(0);
151-
}
152-
40% {
153-
transform: translateY(-10px);
154-
}
155-
60% {
156-
transform: translateY(-5px);
157-
}
158-
}
159-
</style>
160-
<h3 class="animated-text">🌟 Discover Your Next Favorite Movie! 🌟</h3>
161-
""",
326+
# Footer
327+
st.markdown("---")
328+
st.markdown(
329+
"""
330+
<div style="text-align: center; color: #757575;">
331+
Made with ❤️ by Movie Maestro Team | © 2024 All Rights Reserved
332+
</div>
333+
""",
162334
unsafe_allow_html=True,
163335
)

0 commit comments

Comments
 (0)