ChandimaPrabath
commited on
Commit
•
dcad1b4
1
Parent(s):
da393a7
patch #css
Browse files
frontend/src/app/movie/[title]/movie.css
CHANGED
@@ -1,227 +1,227 @@
|
|
1 |
-
@import url(
|
2 |
.movie-details-page {
|
3 |
-
|
4 |
-
|
5 |
-
|
6 |
-
|
7 |
-
|
8 |
}
|
9 |
|
10 |
/* Backdrop Styling */
|
11 |
.movie-details-backdrop {
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
|
20 |
-
|
21 |
-
|
22 |
}
|
23 |
|
24 |
@keyframes backdrop-anim-portrait {
|
25 |
-
|
26 |
-
|
27 |
-
|
28 |
-
|
29 |
-
|
30 |
-
|
31 |
-
|
32 |
-
|
33 |
-
|
34 |
-
|
35 |
-
|
36 |
-
|
37 |
-
|
38 |
-
|
39 |
-
|
40 |
-
|
41 |
-
|
42 |
-
|
43 |
-
|
44 |
-
|
45 |
-
}
|
46 |
-
|
47 |
-
@media (orientation:landscape){
|
48 |
-
|
49 |
-
|
50 |
-
|
51 |
-
|
52 |
}
|
53 |
|
54 |
@keyframes backdrop-anim-landscape {
|
55 |
-
|
56 |
-
|
57 |
-
|
58 |
-
|
59 |
-
|
60 |
-
|
61 |
-
|
62 |
-
|
63 |
-
|
64 |
-
|
65 |
-
|
66 |
-
|
67 |
-
|
68 |
-
|
69 |
-
|
70 |
-
|
71 |
-
|
72 |
-
|
73 |
-
|
74 |
-
|
75 |
}
|
76 |
/* Container Styling */
|
77 |
.movie-details-page-container {
|
78 |
-
|
79 |
-
|
80 |
-
|
81 |
-
|
82 |
}
|
83 |
|
84 |
/* Header Styling */
|
85 |
.movie-details-header {
|
86 |
-
|
87 |
-
|
88 |
-
|
89 |
-
|
90 |
}
|
91 |
|
92 |
.movie-details-header h1 {
|
93 |
-
|
94 |
-
|
95 |
-
|
96 |
-
|
97 |
-
|
98 |
}
|
99 |
|
100 |
/* Action Buttons */
|
101 |
.movie-details-actions {
|
102 |
-
|
103 |
-
|
104 |
}
|
105 |
|
106 |
-
.play-button{
|
107 |
-
|
108 |
-
|
109 |
}
|
110 |
|
111 |
-
.add-list-button{
|
112 |
-
|
113 |
}
|
114 |
|
115 |
.play-button,
|
116 |
.add-list-button {
|
117 |
-
|
118 |
-
|
119 |
-
|
120 |
-
|
121 |
-
|
122 |
-
|
123 |
}
|
124 |
|
125 |
-
.play-button:hover{
|
126 |
-
|
127 |
}
|
128 |
|
129 |
.add-list-button:hover {
|
130 |
-
|
131 |
}
|
132 |
|
133 |
.play-button:hover,
|
134 |
.add-list-button:hover {
|
135 |
-
|
136 |
}
|
137 |
|
138 |
/* Poster Styling */
|
139 |
.movie-details-poster img {
|
140 |
-
|
141 |
-
|
142 |
-
|
143 |
-
|
144 |
-
|
145 |
}
|
146 |
|
147 |
/* Info Section Styling */
|
148 |
.movie-details-info {
|
149 |
-
|
150 |
-
|
151 |
-
|
152 |
}
|
153 |
|
154 |
.movie-details-metadata,
|
155 |
.movie-details-overview {
|
156 |
-
|
157 |
-
|
158 |
-
|
159 |
}
|
160 |
|
161 |
.movie-details-metadata p,
|
162 |
.movie-details-overview p {
|
163 |
-
|
164 |
-
|
165 |
}
|
166 |
|
167 |
.movie-details-overview h2 {
|
168 |
-
|
169 |
-
|
170 |
-
|
171 |
-
|
172 |
}
|
173 |
|
174 |
/* Responsive Design */
|
175 |
@media (max-width: 768px) {
|
176 |
-
|
177 |
-
|
178 |
-
|
179 |
|
180 |
-
|
181 |
-
|
182 |
-
|
183 |
-
|
184 |
|
185 |
-
|
186 |
-
|
187 |
-
|
188 |
}
|
189 |
|
190 |
-
.geners-section{
|
191 |
-
|
192 |
-
|
193 |
-
|
194 |
}
|
195 |
|
196 |
.genre-list {
|
197 |
-
|
198 |
-
|
199 |
-
|
200 |
-
|
201 |
-
|
202 |
-
|
203 |
-
|
204 |
-
|
205 |
-
|
206 |
-
|
207 |
-
|
208 |
-
|
209 |
-
.genre-link {
|
210 |
-
text-decoration: none;
|
211 |
-
color: #0082f3; /* Next.js blue color */
|
212 |
-
font-weight: bold;
|
213 |
-
}
|
214 |
-
|
215 |
-
.genre-link:hover {
|
216 |
-
text-decoration: underline;
|
217 |
-
}
|
218 |
|
219 |
-
|
220 |
-
|
221 |
-
|
222 |
-
|
223 |
-
|
224 |
-
|
225 |
-
|
226 |
-
|
227 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");
|
2 |
.movie-details-page {
|
3 |
+
position: relative;
|
4 |
+
overflow: hidden;
|
5 |
+
scroll-behavior: smooth;
|
6 |
+
color: #fff;
|
7 |
+
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
8 |
}
|
9 |
|
10 |
/* Backdrop Styling */
|
11 |
.movie-details-backdrop {
|
12 |
+
position: fixed;
|
13 |
+
top: 0;
|
14 |
+
left: 0;
|
15 |
+
width: 100%;
|
16 |
+
height: 100%;
|
17 |
+
background-size: 250% 150%; /* Adjusted size to create a zooming effect */
|
18 |
+
background-position: center;
|
19 |
+
z-index: -1;
|
20 |
+
animation: backdrop-anim-portrait 20s ease-in-out infinite;
|
21 |
+
filter: blur(10px);
|
22 |
}
|
23 |
|
24 |
@keyframes backdrop-anim-portrait {
|
25 |
+
0% {
|
26 |
+
background-position: center;
|
27 |
+
background-size: 350% 150%;
|
28 |
+
}
|
29 |
+
25% {
|
30 |
+
background-position: top left;
|
31 |
+
background-size: 320% 120%;
|
32 |
+
}
|
33 |
+
50% {
|
34 |
+
background-position: bottom right;
|
35 |
+
background-size: 350% 150%;
|
36 |
+
}
|
37 |
+
75% {
|
38 |
+
background-position: top right;
|
39 |
+
background-size: 320% 120%;
|
40 |
+
}
|
41 |
+
100% {
|
42 |
+
background-position: center;
|
43 |
+
background-size: 350% 150%;
|
44 |
+
}
|
45 |
+
}
|
46 |
+
|
47 |
+
@media (orientation: landscape) {
|
48 |
+
.movie-details-backdrop {
|
49 |
+
background-size: 250% 150%; /* Adjusted size to create a zooming effect */
|
50 |
+
animation: backdrop-anim-landscape 20s ease-in-out infinite;
|
51 |
+
}
|
52 |
}
|
53 |
|
54 |
@keyframes backdrop-anim-landscape {
|
55 |
+
0% {
|
56 |
+
background-position: center;
|
57 |
+
background-size: 150% 150%;
|
58 |
+
}
|
59 |
+
25% {
|
60 |
+
background-position: top left;
|
61 |
+
background-size: 120% 120%;
|
62 |
+
}
|
63 |
+
50% {
|
64 |
+
background-position: bottom right;
|
65 |
+
background-size: 150% 150%;
|
66 |
+
}
|
67 |
+
75% {
|
68 |
+
background-position: top right;
|
69 |
+
background-size: 120% 120%;
|
70 |
+
}
|
71 |
+
100% {
|
72 |
+
background-position: center;
|
73 |
+
background-size: 150% 150%;
|
74 |
+
}
|
75 |
}
|
76 |
/* Container Styling */
|
77 |
.movie-details-page-container {
|
78 |
+
position: relative;
|
79 |
+
max-width: 1200px;
|
80 |
+
margin: 0 auto;
|
81 |
+
padding: 20px;
|
82 |
}
|
83 |
|
84 |
/* Header Styling */
|
85 |
.movie-details-header {
|
86 |
+
display: flex;
|
87 |
+
justify-content: space-between;
|
88 |
+
align-items: center;
|
89 |
+
margin-bottom: 20px;
|
90 |
}
|
91 |
|
92 |
.movie-details-header h1 {
|
93 |
+
font-size: 4rem;
|
94 |
+
font-family: "Anton", sans-serif;
|
95 |
+
font-weight: 400;
|
96 |
+
font-style: normal;
|
97 |
+
margin: 0;
|
98 |
}
|
99 |
|
100 |
/* Action Buttons */
|
101 |
.movie-details-actions {
|
102 |
+
display: flex;
|
103 |
+
gap: 15px;
|
104 |
}
|
105 |
|
106 |
+
.play-button {
|
107 |
+
border: 1px solid #4339ff;
|
108 |
+
background-color: #17174a; /* Red button color */
|
109 |
}
|
110 |
|
111 |
+
.add-list-button {
|
112 |
+
background-color: #333;
|
113 |
}
|
114 |
|
115 |
.play-button,
|
116 |
.add-list-button {
|
117 |
+
color: #fff;
|
118 |
+
padding: 12px 24px;
|
119 |
+
border-radius: 5px;
|
120 |
+
cursor: pointer;
|
121 |
+
font-size: 1rem;
|
122 |
+
transition: background-color 0.3s ease, transform 0.3s ease;
|
123 |
}
|
124 |
|
125 |
+
.play-button:hover {
|
126 |
+
background-color: #27277c;
|
127 |
}
|
128 |
|
129 |
.add-list-button:hover {
|
130 |
+
background-color: #444;
|
131 |
}
|
132 |
|
133 |
.play-button:hover,
|
134 |
.add-list-button:hover {
|
135 |
+
transform: scale(1.05);
|
136 |
}
|
137 |
|
138 |
/* Poster Styling */
|
139 |
.movie-details-poster img {
|
140 |
+
width: 250px;
|
141 |
+
height: auto;
|
142 |
+
border-radius: 8px;
|
143 |
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
|
144 |
+
margin-bottom: 20px;
|
145 |
}
|
146 |
|
147 |
/* Info Section Styling */
|
148 |
.movie-details-info {
|
149 |
+
display: flex;
|
150 |
+
flex-direction: column;
|
151 |
+
gap: 20px;
|
152 |
}
|
153 |
|
154 |
.movie-details-metadata,
|
155 |
.movie-details-overview {
|
156 |
+
padding: 20px;
|
157 |
+
border-radius: 8px;
|
158 |
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
|
159 |
}
|
160 |
|
161 |
.movie-details-metadata p,
|
162 |
.movie-details-overview p {
|
163 |
+
margin: 8px 0;
|
164 |
+
line-height: 1.6;
|
165 |
}
|
166 |
|
167 |
.movie-details-overview h2 {
|
168 |
+
margin-bottom: 15px;
|
169 |
+
font-size: 1.5rem;
|
170 |
+
border-bottom: 2px solid #4339ff;
|
171 |
+
padding-bottom: 5px;
|
172 |
}
|
173 |
|
174 |
/* Responsive Design */
|
175 |
@media (max-width: 768px) {
|
176 |
+
.movie-details-header h1 {
|
177 |
+
font-size: 3rem;
|
178 |
+
}
|
179 |
|
180 |
+
.movie-details-poster img {
|
181 |
+
width: 100%;
|
182 |
+
max-width: 200px;
|
183 |
+
}
|
184 |
|
185 |
+
.movie-details-info {
|
186 |
+
flex-direction: column;
|
187 |
+
}
|
188 |
}
|
189 |
|
190 |
+
.geners-section {
|
191 |
+
display: flex;
|
192 |
+
text-align: center;
|
193 |
+
align-items: center;
|
194 |
}
|
195 |
|
196 |
.genre-list {
|
197 |
+
list-style-type: none;
|
198 |
+
padding: 0;
|
199 |
+
display: flex;
|
200 |
+
text-align: center;
|
201 |
+
justify-content: center;
|
202 |
+
align-items: center;
|
203 |
+
}
|
204 |
+
|
205 |
+
.genre-item {
|
206 |
+
margin: 5px;
|
207 |
+
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
208 |
|
209 |
+
.genre-link {
|
210 |
+
text-decoration: none;
|
211 |
+
color: #0082f3; /* Next.js blue color */
|
212 |
+
font-weight: bold;
|
213 |
+
}
|
214 |
+
|
215 |
+
.genre-link:hover {
|
216 |
+
text-decoration: underline;
|
217 |
+
}
|
218 |
+
|
219 |
+
.loading {
|
220 |
+
position: fixed;
|
221 |
+
top: 50%;
|
222 |
+
left: 50%;
|
223 |
+
transform: translate(-50%, -50%);
|
224 |
+
justify-content: center;
|
225 |
+
align-items: center;
|
226 |
+
z-index: 100;
|
227 |
+
}
|
frontend/src/components/CastSection.css
CHANGED
@@ -16,7 +16,7 @@
|
|
16 |
width: 100px;
|
17 |
}
|
18 |
|
19 |
-
.image-container {
|
20 |
position: relative;
|
21 |
width: 100px;
|
22 |
height: 100px;
|
|
|
16 |
width: 100px;
|
17 |
}
|
18 |
|
19 |
+
.cast-image-container {
|
20 |
position: relative;
|
21 |
width: 100px;
|
22 |
height: 100px;
|
frontend/src/components/CastSection.js
CHANGED
@@ -9,7 +9,7 @@ const CastSection = ({ cast }) => {
|
|
9 |
<ul className="cast-list">
|
10 |
{cast.map((profile) => (
|
11 |
<li key={profile.id} className="cast-item">
|
12 |
-
<div className="image-container">
|
13 |
<Image
|
14 |
src={profile.image || `https://eu.ui-avatars.com/api/?name=${profile.personName}&size=250`}
|
15 |
layout="fill"
|
|
|
9 |
<ul className="cast-list">
|
10 |
{cast.map((profile) => (
|
11 |
<li key={profile.id} className="cast-item">
|
12 |
+
<div className="cast-image-container">
|
13 |
<Image
|
14 |
src={profile.image || `https://eu.ui-avatars.com/api/?name=${profile.personName}&size=250`}
|
15 |
layout="fill"
|
frontend/src/components/MovieCard.css
CHANGED
@@ -17,13 +17,13 @@
|
|
17 |
animation: fadeIn 0.5s forwards;
|
18 |
}
|
19 |
|
20 |
-
.image-container {
|
21 |
position: relative;
|
22 |
width: 100%;
|
23 |
height: 80%;
|
24 |
}
|
25 |
|
26 |
-
.poster {
|
27 |
object-fit: cover;
|
28 |
object-position: top;
|
29 |
border-radius: 8px 8px 0 0;
|
@@ -36,7 +36,7 @@
|
|
36 |
100%{opacity: 1;}
|
37 |
}
|
38 |
|
39 |
-
.movie-info {
|
40 |
position: relative;
|
41 |
width: 100%;
|
42 |
height: 28%;
|
@@ -51,7 +51,7 @@
|
|
51 |
text-decoration: none !important;
|
52 |
}
|
53 |
|
54 |
-
.movie-title {
|
55 |
margin: 0;
|
56 |
font-size: 16px;
|
57 |
font-weight: bold;
|
@@ -60,7 +60,7 @@
|
|
60 |
white-space: nowrap;
|
61 |
}
|
62 |
|
63 |
-
.movie-year {
|
64 |
margin: 5px 0 0;
|
65 |
font-size: 14px;
|
66 |
overflow: hidden;
|
|
|
17 |
animation: fadeIn 0.5s forwards;
|
18 |
}
|
19 |
|
20 |
+
.movie-card-image-container {
|
21 |
position: relative;
|
22 |
width: 100%;
|
23 |
height: 80%;
|
24 |
}
|
25 |
|
26 |
+
.movie-card-poster {
|
27 |
object-fit: cover;
|
28 |
object-position: top;
|
29 |
border-radius: 8px 8px 0 0;
|
|
|
36 |
100%{opacity: 1;}
|
37 |
}
|
38 |
|
39 |
+
.movie-card-info {
|
40 |
position: relative;
|
41 |
width: 100%;
|
42 |
height: 28%;
|
|
|
51 |
text-decoration: none !important;
|
52 |
}
|
53 |
|
54 |
+
.movie-card-title {
|
55 |
margin: 0;
|
56 |
font-size: 16px;
|
57 |
font-weight: bold;
|
|
|
60 |
white-space: nowrap;
|
61 |
}
|
62 |
|
63 |
+
.movie-card-year {
|
64 |
margin: 5px 0 0;
|
65 |
font-size: 14px;
|
66 |
overflow: hidden;
|
frontend/src/components/MovieCard.js
CHANGED
@@ -34,19 +34,19 @@ const MovieCard = ({ title }) => {
|
|
34 |
|
35 |
return (
|
36 |
<div className="movie-card">
|
37 |
-
<div className="image-container">
|
38 |
<Image
|
39 |
src={movieData.image}
|
40 |
alt={`${movieData.title} poster`}
|
41 |
fill
|
42 |
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
43 |
priority
|
44 |
-
className="poster"
|
45 |
/>
|
46 |
</div>
|
47 |
-
<div className="movie-info">
|
48 |
-
<h3 className="movie-title">{movieData.title}</h3>
|
49 |
-
<p className="movie-year">{movieData.year}</p>
|
50 |
</div>
|
51 |
</div>
|
52 |
);
|
|
|
34 |
|
35 |
return (
|
36 |
<div className="movie-card">
|
37 |
+
<div className="movie-card-image-container">
|
38 |
<Image
|
39 |
src={movieData.image}
|
40 |
alt={`${movieData.title} poster`}
|
41 |
fill
|
42 |
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
43 |
priority
|
44 |
+
className="movie-card-poster"
|
45 |
/>
|
46 |
</div>
|
47 |
+
<div className="movie-card-info">
|
48 |
+
<h3 className="movie-card-title">{movieData.title}</h3>
|
49 |
+
<p className="movie-card-year">{movieData.year}</p>
|
50 |
</div>
|
51 |
</div>
|
52 |
);
|