From 1a2235c62dd390db2ac359c8ff7ac7eabf4612a8 Mon Sep 17 00:00:00 2001
From: BlckDragonXabhi <abhilashsarangi222@gmail.com>
Date: Sat, 9 Mar 2024 02:21:01 +0530
Subject: [PATCH] fixed hero section

---
 index.html         | 174 ++++++++++++++---------------
 index.js           |  81 ++++++++++++--
 md.js              |  30 ++++-
 mdstyle.css        | 265 +++++++++++++++++++++++++++++++++++++++++++++
 movie_details.html | 114 +++++++++++++++++--
 style.css          |   3 +-
 6 files changed, 554 insertions(+), 113 deletions(-)
diff --git a/index.html b/index.html
index a351f1f..3b5fc8e 100644
--- a/index.html
+++ b/index.html
@@ -13,105 +13,97 @@
  
     <title>Bingflix</title>
 
-    <style>
-       
-    </style>
+</head>
 
 
-</head>
 
 <body>
 
-    <div  class="sidebar">
-        <div class="logo-details">
-          <i class='bx bxl-c-plus-plus icon'></i>
-            <div class="logo_name">BingeFlix</div>
-            <i class='bx bx-menu' id="btn" ></i>
-        </div>
-        <ul class="nav-list">
-          <li>
-              <i class='bx bx-search' ></i>
-             <input type="text" placeholder="Search...">
-             <span class="tooltip">Search</span>
-          </li>
-          <li>
-            <a href="#">
-              <i class='bx bx-grid-alt'></i>
-              <span class="links_name">Dashboard</span>
-            </a>
-             <span class="tooltip">Dashboard</span>
-          </li>
-          <li>
-           <a href="#">
-             <i class='bx bx-user' ></i>
-             <span class="links_name">User</span>
-           </a>
-           <span class="tooltip">User</span>
-         </li>
-         <li>
-           <a href="#">
-             <i class='bx bx-chat' ></i>
-             <span class="links_name">Messages</span>
-           </a>
-           <span class="tooltip">Messages</span>
-         </li>
-         <li>
-           <a href="#">
-             <i class='bx bx-pie-chart-alt-2' ></i>
-             <span class="links_name">Analytics</span>
-           </a>
-           <span class="tooltip">Analytics</span>
-         </li>
-         <li>
-           <a href="#">
-             <i class='bx bx-folder' ></i>
-             <span class="links_name">File Manager</span>
-           </a>
-           <span class="tooltip">Files</span>
-         </li>
-         <li>
-           <a href="#">
-             <i class='bx bx-cart-alt' ></i>
-             <span class="links_name">Order</span>
-           </a>
-           <span class="tooltip">Order</span>
-         </li>
-         <li>
-           <a href="#">
-             <i class='bx bx-heart' ></i>
-             <span class="links_name">Saved</span>
-           </a>
-           <span class="tooltip">Saved</span>
-         </li>
-         <li>
-           <a href="#">
-             <i class='bx bx-cog' ></i>
-             <span class="links_name">Setting</span>
-           </a>
-           <span class="tooltip">Setting</span>
-         </li>
-         <li class="profile">
-             <div class="profile-details">
-               <img src="assets/virat.png" alt="profileImg">
-               <div class="name_job">
-                 <div class="name">Abhilash </div>
-                 <div class="job">Web designer</div>
-               </div>
-             </div>
-             <i class='bx bx-log-out' id="log_out" ></i>
-         </li>
-        </ul>
-      </div>
-
-     
+  <div  class="sidebar">
+    <div class="logo-details">
+      <i class='bx bxl-c-plus-plus icon'></i>
+        <div class="logo_name">BingeFlix</div>
+        <i class='bx bx-menu' id="btn" ></i>
+    </div>
+    <ul class="nav-list">
+      <li>
+          <i class='bx bx-search' ></i>
+         <input type="text" placeholder="Search...">
+         <span class="tooltip">Search</span>
+      </li>
+      <li>
+        <a href="#">
+          <i class='bx bx-grid-alt'></i>
+          <span class="links_name">Dashboard</span>
+        </a>
+         <span class="tooltip">Dashboard</span>
+      </li>
+      <li>
+       <a href="#">
+         <i class='bx bx-user' ></i>
+         <span class="links_name">User</span>
+       </a>
+       <span class="tooltip">User</span>
+     </li>
+     <li>
+       <a href="#">
+         <i class='bx bx-chat' ></i>
+         <span class="links_name">Messages</span>
+       </a>
+       <span class="tooltip">Messages</span>
+     </li>
+     <li>
+       <a href="#">
+         <i class='bx bx-pie-chart-alt-2' ></i>
+         <span class="links_name">Analytics</span>
+       </a>
+       <span class="tooltip">Analytics</span>
+     </li>
+     <li>
+       <a href="#">
+         <i class='bx bx-folder' ></i>
+         <span class="links_name">File Manager</span>
+       </a>
+       <span class="tooltip">Files</span>
+     </li>
+     <li>
+       <a href="#">
+         <i class='bx bx-cart-alt' ></i>
+         <span class="links_name">Order</span>
+       </a>
+       <span class="tooltip">Order</span>
+     </li>
+     <li>
+       <a href="#">
+         <i class='bx bx-heart' ></i>
+         <span class="links_name">Saved</span>
+       </a>
+       <span class="tooltip">Saved</span>
+     </li>
+     <li>
+       <a href="#">
+         <i class='bx bx-cog' ></i>
+         <span class="links_name">Setting</span>
+       </a>
+       <span class="tooltip">Setting</span>
+     </li>
+     <li class="profile">
+         <div class="profile-details">
+           <img src="assets/virat.png" alt="profileImg">
+           <div class="name_job">
+             <div class="name">Abhilash </div>
+             <div class="job">Web designer</div>
+           </div>
+         </div>
+         <i class='bx bx-log-out' id="log_out" ></i>
+     </li>
+    </ul>
+  </div>
 
+  
     <main>
-      <ul class='slider'>
-        
-      </ul>
+      <ul class='slider'> </ul>
 
-
-      
       <nav class='nav'>
         <ion-icon class='btn prev' name="arrow-back-outline"></ion-icon>
         <ion-icon class='btn next' name="arrow-forward-outline"></ion-icon>
diff --git a/index.js b/index.js
index 3a9b323..2d55dfa 100644
--- a/index.js
+++ b/index.js
@@ -120,7 +120,8 @@ const bollywood_series = `https://api.themoviedb.org/3/discover/tv?api_key=${api
                   const item = document.createElement('li');
                   item.classList.add('item');
                   item.style.backgroundImage = `url('https://image.tmdb.org/t/p/w1280${movie.backdrop_path}')`;
-
+                 
+                        
                   const content = document.createElement('div');
                   content.classList.add('content');
                   content.innerHTML = `
@@ -128,16 +129,83 @@ const bollywood_series = `https://api.themoviedb.org/3/discover/tv?api_key=${api
                       <p class='description'>${movie.overview}</p>
                       <button>Read More</button>
                   `;
+               
+
+//Select the nav element
+const nav = document.querySelector('.nav');
+// Select all movie items
+const movieItems = document.querySelectorAll('.item');
+
+// Add event listeners to the nav element for hover effect
+// nav.addEventListener('mouseenter', () => {
+//     // Make all movie items visible
+//     movieItems.forEach(item => {
+//         item.style.opacity = 1;
+//     });
+// });
+
+// nav.addEventListener('mouseleave', () => {
+//     // Make only movies 2 to 6 invisible
+//     movieItems.forEach((item, index) => {
+//         if (index > 1 && index < 6) {
+//             item.style.opacity = 0;
+//         }
+//     });
+// });
+
 
                   item.appendChild(content);
                   slider.appendChild(item);
               });
+
+
           })
           .catch(error => console.error('Error fetching top movies:', error));
   });
     
+  const slider = document.querySelector('.slider');
+  function activate(e) {
+    let inx=0;
+    const items = document.querySelectorAll('.item');
+    const nav = document.querySelector('.nav');
+
+    e.target.matches('.next') && slider.append(items[0])
+    e.target.matches('.prev') && slider.prepend(items[items.length-1]);
+
 
+    if (e.target.matches('.next'))
+    {
+         inx=2;
+    }
+
+    nav.addEventListener('mouseenter', () => {
+    // Make all movie items visible
+    items.forEach(item => {
+        item.style.opacity = 1;
+    });
+});
 
+nav.addEventListener('mouseleave', () => {
+    // Make only movies 2 to 6 invisible
+    items.forEach((item, index) => {
+        if (  index==inx ) {
+            item.style.opacity = 1;
+           
+        }
+        else
+        item.style.opacity = 0;
+    });
+});
+
+  
+  }
+
+
+  document.addEventListener('click',activate,false);
+
+
+
+//sidebar logic
 let sidebar = document.querySelector(".sidebar");
 let closeBtn = document.querySelector("#btn");
 let searchBtn = document.querySelector(".bx-search");
@@ -159,12 +227,9 @@ function menuBtnChange() {
 }
 
 
-const slider = document.querySelector('.slider');
 
-function activate(e) {
-  const items = document.querySelectorAll('.item');
-  e.target.matches('.next') && slider.append(items[0])
-  e.target.matches('.prev') && slider.prepend(items[items.length-1]);
-}
 
-document.addEventListener('click',activate,false);
\ No newline at end of file
+
+
+
+  
\ No newline at end of file
diff --git a/md.js b/md.js
index a222914..891b73c 100644
--- a/md.js
+++ b/md.js
@@ -1,4 +1,3 @@
-
 function switchEmbed(embedUrl) {
     console.log(embedUrl);
     const iframe = document.getElementById('movieIframe');
@@ -96,6 +95,29 @@ document.addEventListener("DOMContentLoaded", function() {
                 .catch(error => console.error('Error fetching trailer:', error));
         }
 
-        const poster = document.getElementById('poster');
-        poster.addEventListener('click', fetchAndEmbedTrailer);
-});
\ No newline at end of file
+        const trailer = document.getElementById('Trailerbtn');
+        trailer.addEventListener('click', fetchAndEmbedTrailer);
+});
+
+
+
+//sidebar logic
+let sidebar = document.querySelector(".sidebar");
+let closeBtn = document.querySelector("#btn");
+let searchBtn = document.querySelector(".bx-search");
+closeBtn.addEventListener("click", ()=>{
+  sidebar.classList.toggle("open");
+  menuBtnChange();//calling the function(optional)
+});
+searchBtn.addEventListener("click", ()=>{ // Sidebar open when you click on the search iocn
+  sidebar.classList.toggle("open");
+  menuBtnChange(); //calling the function(optional)
+});
+// following are the code to change sidebar button(optional)
+function menuBtnChange() {
+ if(sidebar.classList.contains("open")){
+   closeBtn.classList.replace("bx-menu", "bx-menu-alt-right");//replacing the iocns class
+ }else {
+   closeBtn.classList.replace("bx-menu-alt-right","bx-menu");//replacing the iocns class
+ }
+}
\ No newline at end of file
diff --git a/mdstyle.css b/mdstyle.css
index 00f744b..b9829c6 100644
--- a/mdstyle.css
+++ b/mdstyle.css
@@ -1,7 +1,24 @@
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    cursor: url('assets/cursor.png'), auto;
+    
+  }
+
 body 
 {
     background-color: black;
     color: wheat;
+    
+}
+
+main 
+{
+    position: relative;
+    z-index: -99;
+    margin-left: 80px;
 }
 
 #buttons
@@ -52,4 +69,252 @@ p {
     padding: 2%;
     width: fit-content;
     overflow: hidden;
+}
+
+        /* CSS for sidebar div*/
+
+.sidebar{
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 78px;
+  background: #11101D;
+  padding: 6px 14px;
+  z-index: 999;
+  transition: all 0.5s ease;
+ 
+}
+.sidebar.open{
+  width: 250px;
+}
+.sidebar .logo-details{
+  height: 60px;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.sidebar .logo-details .icon{
+  opacity: 0;
+  transition: all 0.5s ease;
+}
+.sidebar .logo-details .logo_name{
+  color: #fff;
+  font-size: 20px;
+  font-weight: 600;
+  opacity: 0;
+  transition: all 0.5s ease;
+}
+.sidebar.open .logo-details .icon,
+.sidebar.open .logo-details .logo_name{
+  opacity: 1;
+}
+.sidebar .logo-details #btn{
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  font-size: 22px;
+  transition: all 0.4s ease;
+  font-size: 23px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.5s ease;
+}
+.sidebar.open .logo-details #btn{
+  text-align: right;
+}
+.sidebar i{
+  color: #fff;
+  height: 60px;
+  min-width: 50px;
+  font-size: 28px;
+  text-align: center;
+  line-height: 60px;
+}
+.sidebar .nav-list{
+  margin-top: 20px;
+  height: 100%;
+}
+.sidebar li{
+  position: relative;
+  margin: 8px 0;
+  list-style: none;
+}
+.sidebar li .tooltip{
+  position: absolute;
+  top: -20px;
+  left: calc(100% + 15px);
+  z-index: 3;
+  background: #fff;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-size: 15px;
+  font-weight: 400;
+  opacity: 0;
+  white-space: nowrap;
+  pointer-events: none;
+  transition: 0s;
+}
+.sidebar li:hover .tooltip{
+  opacity: 1;
+  pointer-events: auto;
+  transition: all 0.4s ease;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.sidebar.open li .tooltip{
+  display: none;
+}
+.sidebar input{
+  font-size: 15px;
+  color: #FFF;
+  font-weight: 400;
+  outline: none;
+  height: 50px;
+  width: 100%;
+  width: 50px;
+  border: none;
+  border-radius: 12px;
+  transition: all 0.5s ease;
+  background: #1d1b31;
+}
+.sidebar.open input{
+  padding: 0 20px 0 50px;
+  width: 100%;
+}
+.sidebar .bx-search{
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  font-size: 22px;
+  background: #1d1b31;
+  color: #FFF;
+}
+.sidebar.open .bx-search:hover{
+  background: #1d1b31;
+  color: #FFF;
+}
+.sidebar .bx-search:hover{
+  background: #FFF;
+  color: #11101d;
+}
+.sidebar li a{
+  display: flex;
+  height: 100%;
+  width: 100%;
+  border-radius: 12px;
+  align-items: center;
+  text-decoration: none;
+  transition: all 0.4s ease;
+  background: #11101D;
+}
+.sidebar li a:hover{
+  background: #FFF;
+}
+.sidebar li a .links_name{
+  color: #fff;
+  font-size: 15px;
+  font-weight: 400;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: 0.4s;
+}
+.sidebar.open li a .links_name{
+  opacity: 1;
+  pointer-events: auto;
+}
+.sidebar li a:hover .links_name,
+.sidebar li a:hover i{
+  transition: all 0.5s ease;
+  color: #11101D;
+}
+.sidebar li i{
+  height: 50px;
+  line-height: 50px;
+  font-size: 18px;
+  border-radius: 12px;
+}
+.sidebar li.profile{
+  position: fixed;
+  height: 60px;
+  width: 78px;
+  left: 0;
+  bottom: -8px;
+  padding: 10px 14px;
+  background: #1d1b31;
+  transition: all 0.5s ease;
+  overflow: hidden;
+}
+.sidebar.open li.profile{
+  width: 250px;
+}
+.sidebar li .profile-details{
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.sidebar li img{
+  height: 45px;
+  width: 45px;
+  object-fit: cover;
+  border-radius: 6px;
+  margin-right: 10px;
+}
+.sidebar li.profile .name,
+.sidebar li.profile .job{
+  font-size: 15px;
+  font-weight: 400;
+  color: #fff;
+  white-space: nowrap;
+}
+.sidebar li.profile .job{
+  font-size: 12px;
+}
+.sidebar .profile #log_out{
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  background: #1d1b31;
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  border-radius: 0px;
+  transition: all 0.5s ease;
+}
+.sidebar.open .profile #log_out{
+  width: 50px;
+  background: none;
+}
+.home-section{
+  position: relative;
+  background: #E4E9F7;
+  min-height: 100vh;
+  top: 0;
+  left: 78px;
+  width: calc(100% - 78px);
+  transition: all 0.5s ease;
+  
+}
+.sidebar.open ~ .home-section{
+  left: 250px;
+  width: calc(100% - 250px);
+}
+
+
+.home-section .text{
+  display: inline-block;
+  color: #11101d;
+  font-size: 25px;
+  font-weight: 500;
+  margin: 18px
+}
+@media (max-width: 420px) {
+  .sidebar li .tooltip{
+    display: none;
+  }
 }
\ No newline at end of file
diff --git a/movie_details.html b/movie_details.html
index edc2f89..2f35929 100644
--- a/movie_details.html
+++ b/movie_details.html
@@ -8,29 +8,126 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Press+Start+2P&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+    <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
 
     <link href="mdstyle.css" rel="stylesheet">  
-    <script src="md.js" type="text/javascript"></script>
+    
+    <style>
+
+
+    </style>
 </head>
+
+
+
 <body>
 
+    
+  <div  class="sidebar">
+    <div class="logo-details">
+      <i class='bx bxl-c-plus-plus icon'></i>
+        <div class="logo_name">BingeFlix</div>
+        <i class='bx bx-menu' id="btn" ></i>
+    </div>
+    <ul class="nav-list">
+      <li>
+          <i class='bx bx-search' ></i>
+         <input type="text" placeholder="Search...">
+         <span class="tooltip">Search</span>
+      </li>
+      <li>
+        <a href="index.html">
+          <i class='bx bx-home'></i>
+          <span class="links_name">Home</span>
+        </a>
+         <span class="tooltip">Home</span>
+      </li>
+      <li>
+       <a href="#">
+         <i class='bx bx-user' ></i>
+         <span class="links_name">User</span>
+       </a>
+       <span class="tooltip">User</span>
+     </li>
+     <li>
+       <a href="#">
+         <i class='bx bx-chat' ></i>
+         <span class="links_name">Messages</span>
+       </a>
+       <span class="tooltip">Messages</span>
+     </li>
+     <li>
+       <a href="#">
+         <i class='bx bx-pie-chart-alt-2' ></i>
+         <span class="links_name">Analytics</span>
+       </a>
+       <span class="tooltip">Analytics</span>
+     </li>
+     <li>
+       <a href="#">
+         <i class='bx bx-folder' ></i>
+         <span class="links_name">File Manager</span>
+       </a>
+       <span class="tooltip">Files</span>
+     </li>
+     <li>
+       <a href="#">
+         <i class='bx bx-cart-alt' ></i>
+         <span class="links_name">Order</span>
+       </a>
+       <span class="tooltip">Order</span>
+     </li>
+     <li>
+       <a href="#">
+         <i class='bx bx-heart' ></i>
+         <span class="links_name">Saved</span>
+       </a>
+       <span class="tooltip">Saved</span>
+     </li>
+     <li>
+       <a href="#">
+         <i class='bx bx-cog' ></i>
+         <span class="links_name">Setting</span>
+       </a>
+       <span class="tooltip">Setting</span>
+     </li>
+     <li class="profile">
+         <div class="profile-details">
+           <img src="assets/virat.png" alt="profileImg">
+           <div class="name_job">
+             <div class="name">Abhilash </div>
+             <div class="job">Web designer</div>
+           </div>
+         </div>
+         <i class='bx bx-log-out' id="log_out" ></i>
+     </li>
+    </ul>
+  </div>
+
+<main>
     <center>
     <div id="videoPlayer" style="background-color: rgb(3, 16, 27);color: black; ">
         <iframe id="movieIframe" src="" width="80%" height="500" style="margin-bottom: -5px;" frameborder="0" allowfullscreen></iframe>
     </div>
 
     <div id="buttons">
+        <button id="Trailerbtn">Watch Trailer</button>
+
         <button onclick="switchEmbed1('https://embed.smashystream.com/playere.php?tmdb=')">Smashy</button>
 
         <button onclick="switchEmbed('https://multiembed.mov/directstream.php?video_id=' + getParameterByName('id') + '&tmdb=1')">SuperEmbed</button>
 
         <button onclick="switchEmbed('https://vidsrc.xyz/embed/' + getParameterByName('id'))">VidSrc</button>
+        
+        
         <!-- Add more buttons for additional embeds -->
-    </div>
-
+    
 </center>
 
-    
+&nbsp;
+
+   
+
     <center>
     <h1 >Movie Details</h1>
     <div id="movieDetails" class="container">
@@ -48,14 +145,13 @@ <h3>Cast:</h3>
     </div>
 
 </div>
-        
-  
-
+</center>
+</main>
 
 
-</center>
 
     
-    
+<script src="md.js" type="text/javascript"></script>
+
 </body>
 </html>
diff --git a/style.css b/style.css
index 062d106..7283373 100644
--- a/style.css
+++ b/style.css
@@ -53,7 +53,7 @@ main {
       
     }
   
-    &:nth-child(3) { left: 40%; opacity: 80%; }
+    &:nth-child(3) { left: 40%;  }
     &:nth-child(4) { left: calc(40% + 220px); }
     &:nth-child(5) { left: calc(40% + 440px); }
     &:nth-child(6) { left: calc(40% + 660px); opacity: 0; }
@@ -349,6 +349,7 @@ div.scroll-container img {
   width: 78px;
   background: #11101D;
   padding: 6px 14px;
+  z-index: 999;
   transition: all 0.5s ease;
  
 }
