From 4dfe32372d2454dddf2a2bb03beaaae9e195b627 Mon Sep 17 00:00:00 2001 From: Shaina Silawan Date: Sun, 15 Dec 2024 20:21:20 -0500 Subject: [PATCH 1/6] added more complex styling --- public/about.css | 58 +++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 48 insertions(+), 10 deletions(-) diff --git a/public/about.css b/public/about.css index cc3fbe9..41e5cac 100644 --- a/public/about.css +++ b/public/about.css @@ -1,17 +1,29 @@ - +* { + font-weight: 200; +} #main-nav { - background-color: lightblue; + background-color: rgb(0,0,0); text-align: center; + font-family: 'Roboto', sans-serif; + color: white; + position:absolute; + top:0; + left:0; + right:0; + width:100%; } #main-nav li:hover { - background-color: lavender; - color: black; + color: white; + transform: scale(1.2); + text-shadow: none; + background-color: rgb(101,8,8); } #main-nav li { display: inline-block; position: relative; + transition: color 0.3s ease, transform 0.3s ease, background-color 0.3s ease; } #main-nav ul li { @@ -21,24 +33,39 @@ text-align: center; } +#pageTitle { + margin-top: 75px; + text-align: center +} + a { text-decoration: none; color: inherit; } body { - + background-color: rgb(18,18,18); + font-family: 'Roboto'; + color: white; padding: 20px; + margin: 0; + animation: fadeIn 1s ease-in-out; + opacity: 0; + animation-fill-mode: forwards; } -#pageTitle { - background-color: white; - text-align: center; +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } } .students { - background-color: lightblue; + background-color: black; display: inline-block; border: 2px black solid; padding-left: 200px; @@ -62,9 +89,20 @@ body { .project { display:inline-block; border: 2px black solid; - background-color: antiquewhite; + background-color: black; } li { font-weight: bold; } + +h2 { + text-decoration: underline; + text-decoration-color: rgb(101,8,8); + text-underline-offset: 8px; +} + +img { + max-width: 40px; + max-height: 40px; +} \ No newline at end of file From b6c60b94f85ec1ab25f6d02c9bd17e7e21fdf199 Mon Sep 17 00:00:00 2001 From: Shaina Silawan Date: Sun, 15 Dec 2024 20:21:47 -0500 Subject: [PATCH 2/6] added font and small adjustments --- public/about.html | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/public/about.html b/public/about.html index c9ca68f..02994e8 100644 --- a/public/about.html +++ b/public/about.html @@ -3,6 +3,7 @@ About + @@ -10,9 +11,9 @@ @@ -38,14 +39,10 @@

node.js and Express

Admins

-

Michelle Starcher

- GitHub -

Amanuel Kebede Tsehay

- GitHub -

Shaina Silawan

- GitHub -

Justin Guzman

- GitHub +

Michelle Starcher

github icon +

Amanuel Kebede Tsehay

github icon +

Shaina Silawan

github icon +

Justin Guzman

github icon
From a9a31e12b5209149fd7ded344f12e90d7a723d70 Mon Sep 17 00:00:00 2001 From: Shaina Silawan Date: Sun, 15 Dec 2024 20:22:06 -0500 Subject: [PATCH 3/6] added more complex styling --- public/home.css | 146 +++++++++++++++++++++++++----------------------- 1 file changed, 75 insertions(+), 71 deletions(-) diff --git a/public/home.css b/public/home.css index 09600dd..5183b47 100644 --- a/public/home.css +++ b/public/home.css @@ -1,123 +1,127 @@ - #main-nav { - font-weight: bold; - background-color: lightblue; - text-align: center; + background-color: rgb(0,0,0); + text-align: center; + font-family: 'Roboto', sans-serif; + color: white; + position:absolute; + top:0; + left:0; + right:0; + width:100%; } - + #main-nav li:hover { - background-color: lavender; - color: black; +color: white; +transform: scale(1.2); +text-shadow: none; +background-color: rgb(101,8,8); } - + #main-nav li { - display: inline-block; - position: relative; + display: inline-block; + position: relative; + transition: color 0.3s ease, transform 0.3s ease, background-color 0.3s ease; } - + #main-nav ul li { - list-style-type: none; - display: inline-block; - padding: 10px; - text-align: center; + list-style-type: none; + display: inline-block; + padding: 10px; + text-align: center; +} + +#pageTitle { +margin-top: 75px; +text-align: center } a { - text-decoration: none; - color: inherit; + text-decoration: none; + color: inherit; } - + body { - background-color: lightcyan; + background-color: rgb(18,18,18); + font-family: 'Roboto'; + color: white; + padding: 20px; + margin: 0; + animation: fadeIn 1s ease-in-out; + opacity: 0; + animation-fill-mode: forwards; } -#pageTitle { - text-align: center; +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } } + /* Swiper container Styling (Some elements below do not appear on HTML file since they are being created in JS */ /* Entire swiper container */ .swiper-container { - padding: 10px; +width: 100%; +height: 600px; +padding: 20px; } /* Area where the slides of the movie pictures go */ .swiper-wrapper { - display: flex; - gap: 1px; +display: flex; +gap: 10px; } /* Movie Object box (created dynamically in JS) */ .movieObjectBox { - width: 300px; - height: 450px; - border-radius: 10px; - overflow: hidden; - background-color: #333; - position: relative; +width: 300px; +height: 450px; +border-radius: 10px; +overflow: hidden; +background-color: #333; +position: relative; } /* Movie Poster Image */ .movieObjectBox img { - width: 100%; - height: 100%; - object-fit: cover; +width: 100%; +height: 100%; +object-fit: cover; } /* Title on Movie Poster */ .movieTitleBox { - position: absolute; - bottom: 10px; - left: 10px; - color: white; - background-color: rgba(0, 0, 0, 0.6); - font-size: 18px; - font-weight: bold; - padding: 5px 10px; - border-radius: 5px; +position: absolute; +bottom: 10px; +left: 10px; +color: white; +background-color: rgb(126,12,12); +font-size: 18px; +font-weight: bold; +padding: 5px 10px; +border-radius: 5px; } /* Swiper Nav Buttons */ .swiper-button-next, .swiper-button-prev { - color: #fff; -} - -body { - padding: 20px; - margin: 0; +color: #fff; } /* Row at Bottom where you can click on whatever number in the sequence and be redirected to it */ /* this might be removed later though, but whomever is working on the frontend JS will take care of it */ .swiper-pagination { - margin-top: 100px; -} - -#movieTable th, tr { - font-weight: bold; - gap: 10px; - background-color: bisque; - border : 2px black solid; -} - -tbody tr, td{ - text-align:center; - gap: 20px; - background-color: lightskyblue; - border: 2px black solid; +position: top; } #movieTable { - width: 100%; - margin-top:20px; - margin-left: auto; - margin-right: auto; -} +text-align: center; +margin: 25px 0; +width: 100%; -#t20tm { - text-align: center; } - From f7de874f45aebca423e47108dd3244d4c0d2c772 Mon Sep 17 00:00:00 2001 From: Shaina Silawan Date: Sun, 15 Dec 2024 20:22:23 -0500 Subject: [PATCH 4/6] added font and adjusted --- public/home.html | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/public/home.html b/public/home.html index de01f32..ca3b4b4 100644 --- a/public/home.html +++ b/public/home.html @@ -4,6 +4,7 @@ Home + @@ -13,13 +14,15 @@

Trending Movies

+ +

Top 20 Trending Movies

@@ -37,7 +40,6 @@

Trending Movies


-

Top 20 Trending Movies

@@ -54,4 +56,4 @@

Top 20 Trending Movies

- + \ No newline at end of file From e63c9dc24d1c93bb4b8b4578057dcaad4e7a503a Mon Sep 17 00:00:00 2001 From: Shaina Silawan Date: Sun, 15 Dec 2024 20:23:14 -0500 Subject: [PATCH 5/6] added styling --- public/search.css | 128 ++++++++++++++++++++++++++++++++++------------ 1 file changed, 94 insertions(+), 34 deletions(-) diff --git a/public/search.css b/public/search.css index 245f63d..8e87fbf 100644 --- a/public/search.css +++ b/public/search.css @@ -1,19 +1,26 @@ - #main-nav { - - font-weight: bold; - background-color: lightblue; + background-color: rgb(0,0,0); text-align: center; + font-family: 'Roboto', sans-serif; + color: white; + position:absolute; + top:0; + left:0; + right:0; + width:100%; } #main-nav li:hover { - background-color: lavender; - color: black; + color: white; + transform: scale(1.2); + text-shadow: none; + background-color: rgb(101,8,8); } - + #main-nav li { display: inline-block; position: relative; + transition: color 0.3s ease, transform 0.3s ease, background-color 0.3s ease; } #main-nav ul li { @@ -23,68 +30,121 @@ text-align: center; } +#pageTitle { + margin-top: 75px; + text-align: center +} + a { text-decoration: none; color: inherit; } body { - background-color: aliceblue; + background-color: rgb(18,18,18); + font-family: 'Roboto'; + color: white; padding: 20px; + margin: 0; + animation: fadeIn 1s ease-in-out; + opacity: 0; + animation-fill-mode: forwards; } -#pageTitle { - text-align: center; +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } } .movieSearch { width: 70%; + height: 75%; position: relative; right: 20px; top: 20px; margin-right: 20px; - - + background-color: rgb(0, 0, 0); + border: 1px solid black; border-radius: 5px; padding: 20px; } +#searchBar { + background-color: rgb(18,18,18); + border: none; + padding: 15px; + color: white; + width: 65%; +} + +#searchSubmit { + background-color: rgb(101,8,8); + color: white; + border: none; + padding: 15px; + font-size: 18px; + margin-left: 15Px; + transition: color 0.3s ease, transform 0.3s ease, background-color 0.3s ease; +} + +#searchSubmit:hover { + color: white; + transform: scale(1.2); + text-shadow: none; + background-color: rgb(101,8,8); +} + #userAside { width: 20%; position: relative; right: 20px; top: 20px; float: right; - + background-color: black; + border: 1px solid black; border-radius: 5px; padding: 20px; } -.question { - background-color: #F2C6DE; - border: 2px black solid; - padding: 10px; +#userForm input{ + background-color: rgb(18,18,18); + border: none; + padding: 5px; + margin: 2px; } -.list { - padding: 10px; - margin: 10px; +#userForm button { + background-color: rgb(101,8,8); + color: white; + border: none; + padding: 10px; + font-size: 18px; + transition: color 0.3s ease, transform 0.3s ease, background-color 0.3s ease; } - -#movieList li { - margin: 10px; -} - -.iup { - border: 2px black solid; - padding: 10px; - margin-bottom: 10px; - background-color: #C9E4DE; +#userForm button:hover { + color: white; + transform: scale(1.2); + text-shadow: none; + background-color: rgb(101,8,8); } -.upl { - border: 2px black solid; - padding: 10px; - background-color: #C6DEF1; +#showUsersPreferences{ + background-color: rgb(101,8,8); + color: white; + border: none; + padding: 8px; + font-size: 18px; + transition: color 0.3s ease, transform 0.3s ease, background-color 0.3s ease; } + +#showUsersPreferences:hover { + color: white; + transform: scale(1.1); + text-shadow: none; + background-color: rgb(101,8,8); +} \ No newline at end of file From c0a543417ca3c148d514e48cd3e5cbcb36f7718b Mon Sep 17 00:00:00 2001 From: Shaina Silawan Date: Sun, 15 Dec 2024 20:23:25 -0500 Subject: [PATCH 6/6] added adjustments --- public/search.html | 65 +++++++++++++++++++--------------------------- 1 file changed, 27 insertions(+), 38 deletions(-) diff --git a/public/search.html b/public/search.html index 4b8fb25..4a326c5 100644 --- a/public/search.html +++ b/public/search.html @@ -3,6 +3,7 @@ Search + @@ -12,9 +13,9 @@ @@ -22,56 +23,44 @@

Movie Search

-
-

You can search for a movie name and see their title, release date, overview, and popularity number. +

You can search for a movie name and see their title, release date, overview, and popularity number. Or if you can't remember the name of the movie, you can find it by searching for things like a character's name or the release year of the movie as well. With a search index implemented, search combinations are endless!

- -
- - -
-
-
    - -
    + + + +