Upload 13 files

app.py

@@ -10,9 +10,9 @@ app.secret_key = "abc"
 
 # movies = pickle.load(open('movie_l.pkl','rb'))
 #movies = joblib.load('ML_part/movie_list.pkl')
-movies = pickle.load(open('movie_list.pkl','rb'))
-similarity = pickle.load(open('similarity.pkl','rb'))
-mv = pickle.load(open('castcrew.pkl','rb'))
+movies = pickle.load(open('ML_part/movie_list.pkl','rb'))
+similarity = pickle.load(open('ML_part/similarity.pkl','rb'))
+mv = pickle.load(open('ML_part/castcrew.pkl','rb'))
 
 def getcast(movie_id):
     movie_row = mv[mv['movie_id'] == movie_id]
@@ -71,7 +71,7 @@ def recommend(movie):
     distances = sorted(list(enumerate(similarity[index])), reverse=True, key=lambda x: x[1])
     recommended_movie_names = []
     recommended_movie_posters = []
-    for i in distances[1:6]:
+    for i in distances[1:8]:
         # fetch the movie poster
         movie_id = movies.iloc[i[0]].movie_id
         recommended_movie_posters.append(fetch_poster(movie_id))

static/script.js

@@ -1,3 +1,12 @@
+//! --------------preloader -s ---------------
+
+var loader = document.getElementById("preloader");
+
+function loading() {
+    loader.style.display = "none";
+};
+
+//! --------------preloader -e ---------------
 
 //! ----------- Current Navbar Menu -------------
 
@@ -8,7 +17,7 @@ window.addEventListener('scroll', () => {
     let current = '';
     sections.forEach(section => {
         let sectionTop = section.offsetTop;
-        if (scrollY >= sectionTop - 200) {
+        if (scrollY >= sectionTop - 20) {
             current = section.getAttribute('id');
         }
     });
@@ -20,6 +29,19 @@ window.addEventListener('scroll', () => {
 
 //!---------------------------------------------------
 
+//! ----------Auto Complete -s -------
+
+var searchTerms =
+    ["Avatar", "Pirates of the Caribbean: At World's End", "Spectre", "The Dark Knight Rises", "John Carter", "Spider-Man 3", "Tangled", "Avengers: Age of Ultron", "Harry Potter and the Half-Blood Prince", "Batman v Superman: Dawn of Justice", "Superman Returns", "Quantum of Solace", "Pirates of the Caribbean: Dead Man's Chest", "The Lone Ranger", "Man of Steel", "The Chronicles of Narnia: Prince Caspian", "The Avengers", "Pirates of the Caribbean: On Stranger Tides", "Men in Black 3", "The Hobbit: The Battle of the Five Armies", "The Amazing Spider-Man", "Robin Hood", "The Hobbit: The Desolation of Smaug", "The Golden Compass", "King Kong", "Titanic", "Captain America: Civil War", "Battleship", "Jurassic World", "Skyfall", "Spider-Man 2", "Iron Man 3", "Alice in Wonderland", "X-Men: The Last Stand", "Monsters University", "Transformers: Revenge of the Fallen", "Transformers: Age of Extinction", "Oz: The Great and Powerful", "The Amazing Spider-Man 2", "TRON: Legacy", "Cars 2", "Green Lantern", "Toy Story 3", "Terminator Salvation", "Furious 7", "World War Z", "X-Men: Days of Future Past", "Star Trek Into Darkness", "Jack the Giant Slayer", "The Great Gatsby", "Prince of Persia: The Sands of Time", "Pacific Rim", "Transformers: Dark of the Moon", "Indiana Jones and the Kingdom of the Crystal Skull", "The Good Dinosaur", "Brave", "Star Trek Beyond", "WALL·E", "Rush Hour 3", "2012", "A Christmas Carol", "Jupiter Ascending", "The Legend of Tarzan", "The Chronicles of Narnia: The Lion, the Witch and the Wardrobe", "X-Men: Apocalypse", "The Dark Knight", "Up", "Monsters vs Aliens", "Iron Man", "Hugo", "Wild Wild West", "The Mummy: Tomb of the Dragon Emperor", "Suicide Squad", "Evan Almighty", "Edge of Tomorrow", "Waterworld", "G.I. Joe: The Rise of Cobra", "Inside Out", "The Jungle Book", "Iron Man 2", "Snow White and the Huntsman", "Maleficent", "Dawn of the Planet of the Apes", "The Lovers", "47 Ronin", "Captain America: The Winter Soldier", "Shrek Forever After", "Tomorrowland", "Big Hero 6", "Wreck-It Ralph", "The Polar Express", "Independence Day: Resurgence", "How to Train Your Dragon", "Terminator 3: Rise of the Machines", "Guardians of the Galaxy", "Interstellar", "Inception", "Shin Godzilla", "The Hobbit: An Unexpected Journey", "The Fast and the Furious", "The Curious Case of Benjamin Button", "X-Men: First Class", "The Hunger Games: Mockingjay - Part 2", "The Sorcerer's Apprentice", "Poseidon", "Alice Through the Looking Glass", "Shrek the Third", "Warcraft", "Terminator Genisys", "The Chronicles of Narnia: The Voyage of the Dawn Treader", "Pearl Harbor", "Transformers", "Alexander", "Harry Potter and the Order of the Phoenix", "Harry Potter and the Goblet of Fire", "Hancock", "I Am Legend", "Charlie and the Chocolate Factory", "Ratatouille", "Batman Begins", "Madagascar: Escape 2 Africa", "Night at the Museum: Battle of the Smithsonian", "X-Men Origins: Wolverine", "The Matrix Revolutions", "Frozen", "The Matrix Reloaded"]
+
+$(function () {
+    $("#search-input").autocomplete({
+        source: searchTerms
+    });
+});
+
+//! ---------- Auto Complete -e ------------------
+
 
 //!--------------- Animate -s ------------------
 
@@ -66,15 +88,7 @@ document.querySelector(".greetings").innerHTML = greet;
 
 
 
-//! --------------preloader -s ---------------
-
-var loader = document.getElementById("preloader");
-
-window.addEventListener("load", function () {
-    loader.style.display = "none";
-});
 
-//! --------------preloader -e ---------------
 
 
 
@@ -92,17 +106,5 @@ var typeEffect = new Typed(".moving_txt", {
 
 
 
-//! ----------Auto Complete -s -------
-
-var searchTerms =
-    ["Avatar", "Pirates of the Caribbean: At World's End", "Spectre", "The Dark Knight Rises", "John Carter", "Spider-Man 3", "Tangled", "Avengers: Age of Ultron", "Harry Potter and the Half-Blood Prince", "Batman v Superman: Dawn of Justice", "Superman Returns", "Quantum of Solace", "Pirates of the Caribbean: Dead Man's Chest", "The Lone Ranger", "Man of Steel", "The Chronicles of Narnia: Prince Caspian", "The Avengers", "Pirates of the Caribbean: On Stranger Tides", "Men in Black 3", "The Hobbit: The Battle of the Five Armies", "The Amazing Spider-Man", "Robin Hood", "The Hobbit: The Desolation of Smaug", "The Golden Compass", "King Kong", "Titanic", "Captain America: Civil War", "Battleship", "Jurassic World", "Skyfall", "Spider-Man 2", "Iron Man 3", "Alice in Wonderland", "X-Men: The Last Stand", "Monsters University", "Transformers: Revenge of the Fallen", "Transformers: Age of Extinction", "Oz: The Great and Powerful", "The Amazing Spider-Man 2", "TRON: Legacy", "Cars 2", "Green Lantern", "Toy Story 3", "Terminator Salvation", "Furious 7", "World War Z", "X-Men: Days of Future Past", "Star Trek Into Darkness", "Jack the Giant Slayer", "The Great Gatsby", "Prince of Persia: The Sands of Time", "Pacific Rim", "Transformers: Dark of the Moon", "Indiana Jones and the Kingdom of the Crystal Skull", "The Good Dinosaur", "Brave", "Star Trek Beyond", "WALL·E", "Rush Hour 3", "2012", "A Christmas Carol", "Jupiter Ascending", "The Legend of Tarzan", "The Chronicles of Narnia: The Lion, the Witch and the Wardrobe", "X-Men: Apocalypse", "The Dark Knight", "Up", "Monsters vs Aliens", "Iron Man", "Hugo", "Wild Wild West", "The Mummy: Tomb of the Dragon Emperor", "Suicide Squad", "Evan Almighty", "Edge of Tomorrow", "Waterworld", "G.I. Joe: The Rise of Cobra", "Inside Out", "The Jungle Book", "Iron Man 2", "Snow White and the Huntsman", "Maleficent", "Dawn of the Planet of the Apes", "The Lovers", "47 Ronin", "Captain America: The Winter Soldier", "Shrek Forever After", "Tomorrowland", "Big Hero 6", "Wreck-It Ralph", "The Polar Express", "Independence Day: Resurgence", "How to Train Your Dragon", "Terminator 3: Rise of the Machines", "Guardians of the Galaxy", "Interstellar", "Inception", "Shin Godzilla", "The Hobbit: An Unexpected Journey", "The Fast and the Furious", "The Curious Case of Benjamin Button", "X-Men: First Class", "The Hunger Games: Mockingjay - Part 2", "The Sorcerer's Apprentice", "Poseidon", "Alice Through the Looking Glass", "Shrek the Third", "Warcraft", "Terminator Genisys", "The Chronicles of Narnia: The Voyage of the Dawn Treader", "Pearl Harbor", "Transformers", "Alexander", "Harry Potter and the Order of the Phoenix", "Harry Potter and the Goblet of Fire", "Hancock", "I Am Legend", "Charlie and the Chocolate Factory", "Ratatouille", "Batman Begins", "Madagascar: Escape 2 Africa", "Night at the Museum: Battle of the Smithsonian", "X-Men Origins: Wolverine", "The Matrix Revolutions", "Frozen", "The Matrix Reloaded"]
-
-$(function () {
-    $("#search-input").autocomplete({
-        source: searchTerms
-    });
-});
-
-//! ---------- Auto Complete -e ------------------
 
 

static/style.css

@@ -1,11 +1,9 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
-@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,700,800");
-@import url('https://fonts.googleapis.com/css2?family=Baloo+Chettan+2&family=Calligraffitti&display=swap');
 
 
 /* ----------------#### Global Declarations ####-----------------------  */
 
-/* -------------------Body layout -s ---------------- */
+/* ?-------------------Body layout -s ---------------- */
 html {
   scroll-behavior: smooth;
 }
@@ -17,7 +15,7 @@ html {
   --box-grad: linear-gradient(109.6deg, rgba(156, 252, 248, 1) 11.2%, rgba(110, 123, 251, 1) 91.1%);
 
   --act-icon: rgb(193, 246, 3);
-  --act-click: rgba(193, 246, 3, 0.753) ;
+  --act-click: rgba(193, 246, 3, 0.753);
 
   --shadow-black-100: 0 5px 15px rgba(0, 0, 0, 0.2);
   --black-900: #000000;
@@ -34,26 +32,30 @@ html {
   padding: 0;
   box-sizing: border-box;
   text-decoration: none;
-  font-family: 'Poppins', sans-serif;
-
-
 }
 
 body {
-
-
-  background: var(--main-grad);
-  background-size: 400% 400%;
-  animation: gradient 8s ease infinite;
-  /* height: 100vh; */
-
-  color: auto;
-
+  background-color: var(--black-900);
   overflow-x: hidden;
-
-
+  font-family: 'Poppins', sans-serif;
+  color: var(--white);
+  z-index: 11;
 }
 
+.backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('media/bg1.webp');
+  background-size: 130% 130%;
+  animation: gradient 18s ease infinite;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  opacity: 0.5;
+  filter: blur(5px);
+}
 
 
 
@@ -61,9 +63,9 @@ body {
 
 
 
-/* -------------------Body -e----------------------- */
+/*? -------------------Body -e----------------------- */
 
-/* ------------------- Adjustments -s-------------------- */
+/*? ------------------- Adjustments -s-------------------- */
 
 ul {
   list-style: none;
@@ -136,8 +138,6 @@ ul {
   /* color: ; */
 }
 
-
-
 /*? ------------------- Section Title -e -------------------- */
 
 
@@ -156,11 +156,7 @@ ul {
   display: flex;
   flex-direction: column;
   row-gap: 2rem;
-  z-index: 100;
-
-
-  /* background-color: #95a7af; */
-  /* border: 2px solid black; */
+  z-index: 20;
 }
 
 
@@ -169,10 +165,8 @@ ul {
   flex-direction: column;
   align-items: center;
   color: var(--white);
-  /* margin-left: 10px; */
-  /* padding: 0 10px; */
-  transition: all 0.3s ease;
 
+  transition: all 0.3s ease;
 
 }
 
@@ -182,15 +176,15 @@ ul {
   transform: scale(1.1);
 
 }
-.nav_link:active
-{
+
+.nav_link:active {
   color: var(--act-click);
   transform: scale(0.9);
 }
 
 
-.nav_link .bx {
-  font-size: 1.7rem;
+.nav_link i {
+  font-size: 1.5rem;
 }
 
 .nav_link_title {
@@ -224,25 +218,14 @@ ul {
 }
 
 
-.home .container {
-  /* background-color: #c6b625; */
-  /* padding: 10px; */
-  /* min-height: 80vh; */
-}
-
 .home .row {
-  /* margin-top: 10px; */
-  /* background-color: rgb(254, 253, 254); */
+ 
   justify-content: center;
   text-align: center;
 }
 
 
-
-
-
 .home_txt {
-  /* background-color: red; */
   line-height: 45px;
 
 }
@@ -254,40 +237,23 @@ ul {
 }
 
 
-
-
 .home_txt .greetings {
-  /* position: absolute; */
-
-
-
 
-  font-family: 'Calligraffitti', cursive;
   font-weight: 700;
   font-size: 2rem;
-  /* position: absolute; */
   text-shadow: -1px 5px 20px #ced0d3;
 
-  /* transform: translate(-50%,-50%); */
   letter-spacing: 0.02em;
   text-align: center;
 
-  color: #F9f1cc;
-  text-shadow: 1px 1px 0px #FFB650,
-    2px 2px 0px #FFD662,
-    4px 4px 0px #FF80BF,
-    5px 5px 0px #EF5097,
-    8px 8px 0px #6868AC,
-    10px 10px 0px #90B1E0;
-
-
+  color: #ffffff;
+ 
 }
 
 .home_txt .moving_txt {
 
 
   padding: 10px;
-  /* display: inline-block; */
   font-weight: 600;
   margin: 10px;
   transition: all 0.5s ease-in-out;
@@ -307,16 +273,13 @@ ul {
 
 
 
-
-.title {}
-
 .title h1 {
   color: #fff;
   font-size: 3rem;
   text-transform: uppercase;
   font-weight: 900;
   font-family: "Josefin Sans", sans-serif;
-  background: linear-gradient(to right, #ffffff 10%, #25e2e8 50%, #10141f 60%);
+  background: linear-gradient(to right, #ffffff 40%, #dad608 60%);
 
   background-size: auto auto;
   background-clip: border-box;
@@ -327,7 +290,6 @@ ul {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   animation: textclip 5s linear infinite;
-  /* display: inline-block; */
 }
 
 @keyframes textclip {
@@ -342,7 +304,6 @@ ul {
 
 /* -------------------------- */
 #text {
-  /* position: absolute; */
 
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
 
@@ -352,7 +313,6 @@ ul {
 
   font-size: 16px;
   font-weight: 500;
-  /* position: absolute; */
 
 }
 
@@ -393,6 +353,11 @@ ul {
   transition: all 0.3s ease-in-out;
 }
 
+#search-form:active {
+
+  transform: scale(1.1);
+
+}
 
 #search-input {
   flex: 1;
@@ -428,6 +393,30 @@ ul {
   background-color: #0554a9;
 }
 
+#search-button i {
+  transition: all 0.3s ease-in-out;
+  padding: 2px;
+
+}
+
+#search-button:hover i {
+  transform: scale(1.3);
+}
+
+#search-button:active {
+  background-color: #04376dd7;
+  transform: scale(0.8);
+
+}
+
+#search-button:active i {
+
+  transform: rotate(90deg);
+
+}
+
+
+
 
 
 
@@ -480,29 +469,17 @@ ul {
 
 
 .movie {
-  /* position: relative; */
-  /* background-color: #25c638; */
   z-index: 1;
-  /* min-height: 100vh; */
-
 }
 
 
-.movie .container1 {
-  /* background-color: rgb(0, 234, 255); */
-}
+
 
 .movie .row:nth-child(1) {
-  /* background-color: red; */
-  /* margin-bottom: 20px; */
-  /* padding: 10px; */
+ 
   justify-content: end;
 }
 
-.movie .row:nth-child(2) {
-  /* background-color: rgb(220, 200, 45); */
-}
-
 
 
 .movie .sec_title {
@@ -544,25 +521,25 @@ ul {
 
 .movie_card .info_section .movie_header {
   position: relative;
-  /* background-color: #435760; */
   padding: 15px;
   height: auto;
   margin-bottom: 10px;
 }
 
 .movie_card .info_section .movie_header h1 {
-  color:var(--white);
+  color: var(--white);
   font-weight: 400;
 }
 
-  .movie_card .info_section .movie_header h4 {
-    color: #9ac7fa;
-    font-weight: 400;
-  }
-  .movie_card .info_section .movie_header h5{
-    color: #9ac7fa;
-    font-weight: 400;
-  }
+.movie_card .info_section .movie_header h4 {
+  color: #9ac7fa;
+  font-weight: 400;
+}
+
+.movie_card .info_section .movie_header h5 {
+  color: #9ac7fa;
+  font-weight: 400;
+}
 
 .movie_card .info_section .movie_header .minutes {
   display: inline-block;
@@ -576,15 +553,14 @@ ul {
   border: 1px solid rgba(205, 205, 205, 0.567);
 }
 
-.movie_card .info_section .movie_header .rating i{
+.movie_card .info_section .movie_header .rating i {
   font-size: 13px;
   color: yellow;
 }
 
-.movie_card .info_section .movie_header .genre
-{
-   color: var(--white);
-   font-size: 14px;
+.movie_card .info_section .movie_header .genre {
+  color: var(--white);
+  font-size: 14px;
 }
 
 
@@ -601,7 +577,6 @@ ul {
 .movie_card .info_section .movie_desc {
   padding: 15px;
   height: auto;
-  /* background-color: #f0f004; */
 }
 
 .movie_card .info_section .movie_desc .text {
@@ -610,7 +585,6 @@ ul {
 }
 
 .movie_card .info_section .know_more {
-  /* background-color: #03a9f4; */
   padding: 10px;
   font-size: 14px;
   font-weight: 600;
@@ -695,8 +669,8 @@ ul {
 }
 
 .poster_back {
-    background: url("https://occ-0-2433-448.1.nflxso.net/art/cd5c9/3e192edf2027c536e25bb5d3b6ac93ced77cd5c9.jpg");
-    background-repeat: no-repeat;
+  background: url("https://occ-0-2433-448.1.nflxso.net/art/cd5c9/3e192edf2027c536e25bb5d3b6ac93ced77cd5c9.jpg");
+  background-repeat: no-repeat;
 
 
 }
@@ -720,14 +694,12 @@ ul {
 
 .recmndr {
   position: relative;
-  /* background-color: #c6c325; */
   z-index: 1;
   min-height: 100vh;
 
 }
 
-.recmndr .sub_title span
-{
+.recmndr .sub_title span {
   color: var(--white);
   font-size: 18px;
 }
@@ -737,8 +709,7 @@ ul {
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
-  /* min-height: 100vh; */
-  /* background-color: blue; */
+
   z-index: 11;
   gap: 15px;
 }
@@ -747,12 +718,12 @@ ul {
 
 .rec_card {
   position: relative;
-  width: 250px;
+  width: 230px;
   height: 280px;
   overflow: hidden;
 
   background-color: white;
-  border-radius: 20px;
+  border-radius: 10px;
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
 
 
@@ -760,8 +731,6 @@ ul {
   transition: all .5s ease;
 }
 
-
-
 .rec_card .poster {
   position: relative;
   overflow: hidden;
@@ -773,7 +742,7 @@ ul {
   bottom: -130px;
   width: 100%;
   height: 100%;
-  background: linear-gradient(0deg, #000000c1 50%, transparent);
+  background: linear-gradient(0deg, #000000 20%, transparent);
   transition: 0.5s;
   z-index: 1;
 }
@@ -787,9 +756,7 @@ ul {
   width: 100%;
   height: 280px;
 
-  /* height: 100%; */
-  /* border-radius: 20px 20px 0 0; */
-  /* object-fit: cover; */
+
   transition: 0.5s;
 }
 
@@ -806,13 +773,13 @@ ul {
   padding: 20px;
   box-sizing: border-box;
   text-align: center;
-  color: #fff;
+  color: var(--white);
   z-index: 2;
   transition: 0.5s;
 }
 
 .rec_card:hover .details {
-  bottom: 40px;
+  bottom: 10px;
 }
 
 .details .rec_mv_name {
@@ -823,7 +790,7 @@ ul {
 
 .details .mv_year {
   font-size: 14px;
-  color: white;
+  color: var(--white);
 
 }
 
@@ -847,13 +814,13 @@ ul {
 
 .details .tags span {
   padding: 2px 5px;
-  color: white;
-  background-color: rgb(0, 225, 255);
+  color: var(--white);
+  background-color: rgba(0, 225, 255, 0.856);
   border-radius: 5px;
 }
 
 .details .tags span:not(:last-child) {
-  background-color: red;
+  background-color: rgba(255, 0, 0, 0.713);
 }
 
 .details .extra_info {
@@ -864,12 +831,12 @@ ul {
 }
 
 
-.details button{
+.details button {
   font-size: 10px;
   cursor: pointer;
   background-color: var(--act-icon);
   box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
-  
+
   border: 1px solid rgb(255, 255, 255);
   padding: 2px 5px;
   border-radius: 10px;
@@ -877,13 +844,12 @@ ul {
 
   border-style: outset;
 }
-.details .btn:hover
-{
+
+.details .btn:hover {
   transform: scale(1.04);
 }
 
-.details .btn:active
-{
+.details .btn:active {
   background-color: var(--act-click);
   transform: scale(0.9);
 }
@@ -898,23 +864,20 @@ ul {
 
 .about {
   position: relative;
-  background-color: #686f7c;
+  background-image: linear-gradient(rgba(255, 0, 0, 0), hsla(0, 0%, 0%, 0.767), rgb(0, 0, 0));
 
   z-index: 1;
-  /* min-height: 100vh; */
-  /* background-color: rgb(186, 75, 75); */
+ 
 }
 
 
 .about .row {
-  /* background-color: #03a9f4; */
   margin-bottom: 40px;
 
 }
 
 
 .about_box {
-  /* background-color: grey; */
   padding: 10px;
   margin: 10px;
   margin-bottom: 30px;
@@ -926,44 +889,55 @@ ul {
   color: white;
 }
 
+.about_box p a
+{
+  color: rgb(255, 0, 0);
+  margin-right: 100px;
+}
+.about_box p a:hover
+{
+  color: rgb(199, 15, 15);
+  margin-right: 100px;
+}
+.about_box p a:active
+{
+  color: rgba(0, 94, 255, 0.559);
+  margin-right: 100px;
+}
+
 .about_box span {
   font-weight: 900;
-  color: #000000;
+  color: var(--act-icon);
 }
 
 .gradient_design {
-  /* background-color: blueviolet; */
   margin: 20px;
   border-radius: 10px;
 
   background: var(--box-grad);
-
-
-
+  box-shadow: var(--shadow-black-100);
 
 }
 
-.about_us {
+.about_box {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   justify-content: center;
-  /* background-color: #921313; */
 
 
 }
 
 
-.about_us_title {
-  /* background-color: green; */
+.about_box_title {
   justify-content: center;
   text-align: center;
+  color: black;
+  font-weight: 900;
 
-  /* display: flex; */
-  /* margin-bottom: 10px; */
 }
 
-.about_us_title h3 {
+.about_box_title h3 {
   display: block;
   font-size: 1.17em;
   margin-block-start: 1em;
@@ -986,15 +960,14 @@ ul {
 
   display: flex;
   flex-wrap: wrap;
-  flex: 0 0 40%;
-  max-width: 40%;
+  flex: 0 0 80%;
+  max-width: 80%;
 
 
 
   margin: 10px;
   height: 220px;
-  width: 300px;
-  /* background: #808080; */
+  width: 350px;
   border-radius: 10px;
   transition: background 0.8s;
   overflow: hidden;
@@ -1026,7 +999,7 @@ ul {
 
 .cardx h4 {
   margin: 5px;
-  font-size: 14px;
+  font-size: 13px;
   color: var(--white);
 
 }
@@ -1067,8 +1040,7 @@ ul {
   transform: scale(1.1);
 }
 
-.cardx .icons a i:active
-{
+.cardx .icons a i:active {
   color: var(--act-click);
   transform: scale(0.9);
 }
@@ -1077,6 +1049,7 @@ ul {
   position: absolute;
   height: 30px;
   top: 110px;
+  gap:5px;
   width: 50px;
   display: flex;
   flex-direction: column;
@@ -1088,42 +1061,20 @@ ul {
 
 .card0 {
 
-  background: url("imgs/raj1.jpg") left center no-repeat;
+  background: url("media/hem2.jpg") left center no-repeat;
   background-size: 350px;
-  /* width: 100%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover; */
-}
 
-.card0:hover {
-  background: url("imgs/raj1.jpg") left center no-repeat;
-  background-size: 600px;
 }
 
-
-
-
-
-.card1 {
-  background: url("imgs/hem2.jpg") left center no-repeat;
-  background-size: 350px;
-
-}
-
-.card1:hover {
-  background: url("imgs/hem2.jpg") left center no-repeat;
+.card0:hover {
+  background: url("media/hem2.jpg") left center no-repeat;
   background-size: 600px;
 }
 
 
+/* -----------------About  Cards ------------------------ */
 
-
-
-
-/* -----------------AboutUS  Cards ------------------------ */
-
-.about .git_link a i{
+.about .git_link a i {
   color: var(--white);
   font-size: 20px;
   margin-left: 5px;
@@ -1138,14 +1089,8 @@ ul {
 .about .git_link a i:active {
   color: var(--act-click);
   transform: scale(0.9);
-  
-}
-
-
-
-
-
 
+}
 
 
 
@@ -1160,6 +1105,7 @@ ul {
 /*! ----------------------- An1:Animations ------------------------------------------ */
 
 @keyframes gradient {
+
   0% {
     background-position: 0% 50%;
   }
@@ -1173,156 +1119,10 @@ ul {
   }
 }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-
-@keyframes jiggle {
-  0% {
-    border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
-  }
-
-  50% {
-    border-radius: 30% 60% 70% 40%/50% 60% 30% 60%;
-  }
-
-  100% {
-    border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
-  }
-}
-
-@keyframes btn_bouncy {
-  0% {
-    top: 0em;
-  }
-
-  40% {
-    top: 0em;
-  }
-
-  43% {
-    top: -0.7em;
-  }
-
-  46% {
-    top: 0em;
-  }
-
-  48% {
-    top: -0.4em;
-  }
-
-  50% {
-    top: 0em;
-  }
-
-  100% {
-    top: 0em;
-  }
-}
-
-
-@keyframes glowing {
-  0% {
-
-    box-shadow:
-      0 0 18px #03e9f4,
-      0 0 18px #03e9f4,
-      0 0 18px #03e9f4;
-
-  }
-
-  50% {
-
-    box-shadow:
-      0 0 18px #54c4ca,
-      0 0 18px #09747a,
-      0 0 18px #07383a;
-  }
-
-  100% {
-
-    box-shadow:
-      0 0 18px #03e9f4,
-      0 0 18px #03e9f4,
-      0 0 18px #03e9f4;
-  }
-}
-
-@keyframes hover_anim {
-  0% {
-    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
-    transform: translatey(0px);
-  }
-
-  50% {
-    box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
-    transform: translatey(-20px);
-  }
-
-  100% {
-    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
-    transform: translatey(0px);
-  }
-}
-
-
-
-
-@keyframes wave_hand {
-  0% {
-    transform: rotate(0.0deg)
-  }
-
-  10% {
-    transform: rotate(14.0deg)
-  }
-
-  20% {
-    transform: rotate(-8.0deg)
-  }
-
-  30% {
-    transform: rotate(14.0deg)
-  }
-
-  40% {
-    transform: rotate(-4.0deg)
-  }
-
-  50% {
-    transform: rotate(10.0deg)
-  }
-
-  60% {
-    transform: rotate(0.0deg)
-  }
-
-  100% {
-    transform: rotate(0.0deg)
-  }
-}
-
-
-@keyframes hover_anim {
-  0% {
-    transform: translatey(0px);
-  }
-
-  50% {
-    transform: translatey(-20px);
-  }
-
-  100% {
-    transform: translatey(0px);
-  }
+.ani1 {
+  opacity: 0;
+  transform: translateY(100px);
+  transition: all 1s ease-in-out;
 }
 
 
@@ -1332,29 +1132,13 @@ ul {
 }
 
 
-.ani1 {
-  opacity: 0;
-  transform: translateY(100px);
-  transition: all 1s ease-in-out;
-}
-
-.ani2 {
-  opacity: 0;
-  transform: translateX(100px);
-  transition: all 1s ease-in-out;
-}
 
-.ani3 {
-  opacity: 0;
-  transform: translateY(-100px);
-  transition: all 1s ease-in-out;
-}
 
 
 /*! ----------------------- An1:Animations ------------------------------------------ */
 
 
-/* TODO------------------------- Scroll down  arrow ani---------------------------------- */
+/* TODO------------------------- Scroll down  arrow ani ---------------------------------- */
 
 .container2 {
   display: flex;
@@ -1392,7 +1176,7 @@ ul {
   top: 0;
   height: 100%;
   width: 50%;
-  background: #2c3e50;
+  background: #415b75;
 }
 
 .arrow:before {
@@ -1478,16 +1262,16 @@ ul {
 
 }
 
-
-
-@media (max-width: 425px) {
-
-
+@media (max-width: 460px) {
   .cardx {
     flex: 0 0 80%;
     max-width: 80%;
     width: 300px;
   }
+}
+
+@media (max-width: 425px) {
+
 
   #search-form {
 
@@ -1505,27 +1289,17 @@ ul {
 
 
   .section_padding {
-    padding: 120px 10px;
+    padding: 80px 10px;
   }
 
 
   .title h1 {
     color: #fff;
     font-size: 2.5rem;
-    /* text-transform: uppercase; */
     font-weight: 900;
-    background: linear-gradient(to right, #ffffff 10%, #256ce8 50%, #10141f 60%);
-    background-size: auto auto;
-    background-clip: border-box;
-    background-size: 200% auto;
-
-
-    background-clip: text;
-    text-fill-color: fill;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    animation: textclip 5s linear infinite;
-    /* display: inline-block; */
+
+
+
   }
 
 
@@ -1535,22 +1309,25 @@ ul {
 /*!-----------------preloader------------------ */
 
 #preloader {
-  background: #000 url("imgs/pre2.gif") no-repeat center;
-  /* border-radius: 10px; */
+  background: #151515;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   background-size: 100%;
-  padding: 30px;
   height: 100vh;
   width: 100%;
   position: fixed;
-  z-index: 1000;
+  z-index: 90;
 }
 
 /* -------------------------- */
 
+#preloader img {
+  width: 200px;
+  height: 200px;
+  z-index: 99;
+}
 
 
 /* ?---------------  Scroll Bar -s    ------------------- */
@@ -1560,12 +1337,13 @@ ul {
 }
 
 ::-webkit-scrollbar-track {
-  background: rgba(0, 212, 255, 1);
+  background: rgba(82, 82, 82, 0);
 
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: rgb(26, 17, 1);
+
+  background-color: var(--act-click);
   border-radius: 0.6rem;
   border: 0.2rem solid transparent;
   background-clip: content-box;

templates/home.html

@@ -5,16 +5,19 @@
     <meta charset="utf-8">
 
     <title>Movie Recommender</title>
+    <link rel="icon" type="image/x-icon" href="../static/media/favicon.png">
+
+
 
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    
-    <!-- Add font boxicons -->
-    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
+
+
 
     <!-- Add font awasome -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+
 
     <!-- Add external css -->
     <link rel="stylesheet" href='/static/style.css' />
@@ -28,22 +31,25 @@
 
 </head>
 
-<body>
-    <div id="preloader"></div>
+<body onload="loading()">
 
+    <div id="preloader">
+        <img src="/static/media/pre3.gif" alt="Loading...">
+    </div>
+    <div class="backdrop"></div>
 
     <navbar>
 
-        <div class="nav" style="margin-left: 10px;">
+        <div class="nav">
 
             <a href="#Home" class="nav_link nav_active">
-                <i class="bx bx-home"></i>
-                <span class="nav_link_title">Home</span>
+                <i class="fa fa-home"></i>
+                <span class="nav_link_title" style="font-size: 13px;">Home</span>
             </a>
 
             <a href="#About" class="nav_link">
-                <i class="bx bx-bulb"></i>
-                <span class="nav_link_title">About</span>
+                <i class="fa-sharp fa-solid fa-circle-info"></i>
+                <span class="nav_link_title" style="font-size: 13px;">About</span>
             </a>
 
 
@@ -58,7 +64,7 @@
 
 
     <section class="home section_padding" id="Home">
-     
+
         <div class="container">
 
 
@@ -70,7 +76,7 @@
                     <h4 class="greetings">Hii</h4>
 
                     <span class="moving_txt"></span>
-                     <h3>Welcome to the</h3>
+                    <h3>Welcome to the</h3>
 
                     <div class="title" id="text">
                         <h1>MOVIE<br>RECOMMENDER</h1>
@@ -78,9 +84,11 @@
 
 
 
+                    <!-- ----------------  search bar ---------------------- -->
+
 
                     <form id="search-form" action="/" method="POST">
-                        <input id="search-input" type="text" name="search" placeholder="Search a Movie...">
+                        <input id="search-input" type="text" name="search" placeholder="Select or Type a Movie...">
 
                         <button id="search-button" type="submit"><i class="fa fa-search"></i></button>
                     </form>
@@ -88,6 +96,7 @@
 
                 </div>
 
+                <!-- ----------------  search bar ---------------------- -->
 
 
 
@@ -101,13 +110,12 @@
 
     </section>
 
-    <!-- ----------------  search bar ---------------------- -->
 
 
 
-    <!-- ----------------  search bar ---------------------- -->
+    <!--! ----------------  About ---------------------- -->
+
 
-    
 
 
 
@@ -128,6 +136,11 @@
 
                 <div class="about_box">
                     <p>
+                        This is the Movie Recommendation Website in which you can search for a movie(under data of 4800
+                        approx. movies) and get the top 7 recommendations
+                        based on your search.<span>See Available Movies for Search by </span>
+                        <a href="/static/media/movies_title.txt" target="_blank"> Clicking Here.</a><br>*Enter the
+                        Movie Name as it is in the list.<br><br>
                         Movie recommendation using <span>CountVectorizer</span> is a natural language processing (NLP)
                         approach for recommending movies to users based on their textual reviews or descriptions.
                         CountVectorizer is a method that converts text data into a numerical format that can be used by
@@ -151,14 +164,15 @@
                     </p>
                     <div class="git_link">
                         <h4>View the Source code of this Project :
-                            <a href="https://github.com/Raj-Gurjar/Movie-Recommender.git" target="_blank"><i
-                                    class="fa fa-github-square"></i></a>
+                            <a href="https://github.com/Raj-Gurjar/Movie-Recommender.git" target="_blank">
+                                <i class="fa-brands fa-github"></i>
+                            </a>
                         </h4>
                     </div>
                 </div>
 
 
-                <div class="gradient_design">
+              <div class="gradient_design">
 
                     <div class="about_us_title">
                         <h3>
@@ -222,19 +236,7 @@
 
     </section>
 
-
-
-
-
-
-
-
-
-
-
-
-
-
+    <!--! ----------------  About ---------------------- -->
 
 
 
@@ -242,10 +244,10 @@
 
 
     <!--!------ Add Js ------>
-     
+
     <!-- external js -->
     <script src="/static/script.js" async defer></script>
-    
+
     <!-- Shifting Text -->
     <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
 

templates/movie.html

@@ -5,16 +5,18 @@
     <meta charset="utf-8">
 
     <title>Movie Recommender</title>
+    <link rel="icon" type="image/x-icon" href="../static/media/favicon.png">
+
 
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 
-    <!-- font boxicons -->
-    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
+
 
     <!-- Add font awasome -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+
 
     <!-- external css -->
     <link rel="stylesheet" href='/static/style.css' />
@@ -33,33 +35,34 @@
     }
 </style>
 
-<body>
-
-
+<body onload="loading()">
+    <div id="preloader">
+        <img src="/static/media/pre3.gif" alt="Loading....">
+    </div>
+    <div class="backdrop"></div>
 
     <navbar>
 
         <div class="nav">
 
             <a href="{{ url_for('test')}}" class="nav_link">
-                <i class="bx bx-search"></i>
-                <span class="nav_link_title">Search</span>
+                <i class="fa fa-home"></i>
+                <!-- <i class="fa-sharp fa-solid fa-house-person-return "></i> -->
+                <span class="nav_link_title">Home</span>
             </a>
 
             <a href="#Movie" class="nav_link nav_active">
-                <i class="bx bx-movie"></i>
+                <i class="fa fa-clapperboard"></i>
                 <span class="nav_link_title">About Movie</span>
             </a>
 
             <a href="#Recmndr" class="nav_link">
-                <i class="bx bx-photo-album"></i>
+                <!-- <i class="fa fa-magic"></i> -->
+                <i class="fa-solid fa-wand-magic-sparkles"></i>
                 <span class="nav_link_title">Recommender</span>
             </a>
 
-            <a href="#About" class="nav_link">
-                <i class="bx bx-bulb"></i>
-                <span class="nav_link_title">About</span>
-            </a>
+
 
 
         </div>
@@ -69,7 +72,7 @@
     </navbar>
 
 
-    <!--! ------------------------------------------------------------------- -->
+    <!--! --------------------------- Movie Desc. ---------------------------------------- -->
 
     <section class="movie section_padding" id="Movie">
 
@@ -102,14 +105,14 @@
                             <img class="poster_img" alt="movie poster" src="{{mp}}" />
                             <h1>{{cur_m}}</h1>
                             <h4>Director : {{crew}}</h4>
-                            <h5>Cast :{{cast}}</h5>
+                            <h5>Cast : {{cast}}</h5>
 
                             <span class="year minutes"><i class="fa fa-calendar"></i> {{raj[0]}}</span>
-                            <span class="minutes"><i class="fa fa-clock-o"></i> {{rev}}</span>
+                            <span class="minutes"><i class="fa fa-clock"></i> {{rev}} min</span>
 
                             <span class="rating minutes"> <i class="fa fa-star"></i> {{vote}}/10</span>
 
-                            <p class="genre"><i class="fa fa-address-book"></i> {{gen}}</p>
+                            <p class="genre"><i class="fa fa-masks-theater"></i> {{gen}}</p>
 
 
 
@@ -151,9 +154,11 @@
 
     </section>
 
-    <!--! ------------------------------------------------------------------- -->
+    <!--! --------------------------- Movie Desc.---------------------------------------- -->
+
+
 
-    <!--! ------------------------------------------------------------------- -->
+    <!--! ----------------------------- Recommender ------------------------------------- -->
 
 
 
@@ -210,7 +215,7 @@
                             </div>
 
                             <form action="{{ url_for('nest', movie=item) }}" method="POST" class="">
-                                <button type="submit" class="btn"> Submit</a></button>
+                                <button type="submit" class="btn">Know More</a></button>
                             </form>
 
 
@@ -240,118 +245,17 @@
 
     <!--! ----------------------------------------------------- -->
 
-    <section class="about section_padding" id="About">
-
-        <div class="container">
-
-            <div class="section_title">
-                <h3 class="main_title">About</h3>
-                <h5 class="sub_title">Learn about this Project</h5>
-
-            </div>
-
-
-
-            <div class="row justify_content_cntr">
-
-                <div class="about_box">
-                    <p>
-                        Movie recommendation using <span>CountVectorizer</span> is a natural language processing (NLP)
-                        approach for recommending movies to users based on their textual reviews or descriptions.
-                        CountVectorizer is a method that converts text data into a numerical format that can be used by
-                        machine learning algorithms.
-                        In this approach, textual data from movie reviews are preprocessed and converted into a matrix
-                        of
-                        word counts using CountVectorizer.
-                        Then, a similarity matrix is created to compare each movie's word count matrix with all other
-                        movies. Finally,
-                        the recommendation system recommends movies to the user based on the highest similarity score
-                        with
-                        their input text.
-                        This approach is popular in movie recommendation systems due to its simplicity
-                        and effectiveness.<br>
-                    </p>
-                    <p>
-                        <br> The system is deployed using <span>Flask</span> framework, which enables users to interact
-                        with the system
-                        through a web interface.
-                        The user can input their preferences and receive recommendations based on their input.
-                    </p>
-                    <div class="git_link">
-                        <h4>View the Source code of this Project :
-                            <a href="https://github.com/Raj-Gurjar/Movie-Recommender.git" target="_blank"><i
-                                    class="fa fa-github-square"></i></a>
-                        </h4>
-                    </div>
-                </div>
-
 
 
-                <div class="gradient_design">
 
-                    <div class="about_us_title">
-                        <h3>
-                            Meet The Creators
-                        </h3>
-                    </div>
-                    <!-- ----------------------------- -->
-                    <div class="about_us">
-
-                        <!--? Item1 -s -->
-
-                        <!-- <div class="p1 port_item"> -->
-                        <div class="cardx card0">
-                            <div class="border">
-                                <h3>Raj Chhalotre</h3>
-                                <h4>Frontend</h4>
-                                <p>
-                                    Front End | AI | ML | C++
-                                </p>
-                                <div class="icons">
-                                    <a href="www.google.com"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
-                                    <a href=""><i class="fa fa-github" aria-hidden="true"></i></a>
-                                    <a href=""><i class="fa fa-instagram" aria-hidden="true"></i></a>
-                                </div>
-                            </div>
-                        </div>
-
-
-                        <!-- </div> -->
-
-                        <!-- <div class="p1 port_item"> -->
-                        <div class="cardx card1">
-                            <div class="border">
-                                <h3>Hemant Rajput</h3>
-                                <h4>Data Science</h4>
-                                <p>
-                                    Front End | AI | ML | C++
-                                </p>
-                                <div class="icons">
-                                    <a href=""><i class="fa fa-linkedin" aria-hidden="true"></i></a>
-                                    <a href=""><i class="fa fa-github" aria-hidden="true"></i></a>
-                                    <a href=""><i class="fa fa-instagram" aria-hidden="true"></i></a>
-                                </div>
-                            </div>
-                        </div>
-                        <!-- </div> -->
 
 
+    <!--!------ Add Js ------>
 
+    <!-- external js -->
+    <script src="/static/script.js" async defer></script>
 
 
-
-                    </div>
-
-                </div>
-
-            </div>
-
-            <!-- Add Js  Bootstrap-->
-
-            <script src="/static/script.js" async defer></script>
-
-            <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
-
 </body>
 
 </html>

vercel.json

@@ -0,0 +1,18 @@
+{
+  "builds": [
+    {
+      "src": "app.py",
+      "use": "@vercel/python"
+    }
+  ],
+  "routes": [
+    {
+      "src": "/(.*)",
+      "dest": "/app.py"
+    }
+  ],
+  "env": {
+    "FLASK_ENV": "production"
+  },
+  "framework": "@vercel/python"
+}