Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@dev1abhi
dev1abhi committed Mar 8, 2024
0 parents commit 88463e3
Show file tree
Hide file tree
Showing 9 changed files with 982 additions and 0 deletions.
264 changes: 264 additions & 0 deletions abc.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,264 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet">

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>


<title>Bingflix</title>

<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="#">
<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="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'>
<li class='item' style="background-image: url('https://cdn.mos.cms.futurecdn.net/dP3N4qnEZ4tCTCLq59iysd.jpg')">
<div class='content'>
<h2 class='title'>"Lossless Youths"</h2>
<p class='description'> Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Tempore fuga voluptatum, iure corporis inventore
praesentium nisi. Id laboriosam ipsam enim. </p>
<button>Read More</button>
</div>
</li>
<li class='item' style="background-image: url('https://i.redd.it/tc0aqpv92pn21.jpg')">
<div class='content'>
<h2 class='title'>"Estrange Bond"</h2>
<p class='description'> Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Tempore fuga voluptatum, iure corporis inventore
praesentium nisi. Id laboriosam ipsam enim. </p>
<button>Read More</button>
</div>
</li>
<li class='item' style="background-image: url('https://wharferj.files.wordpress.com/2015/11/bio_north.jpg')">
<div class='content'>
<h2 class='title'>"The Gate Keeper"</h2>
<p class='description'> Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Tempore fuga voluptatum, iure corporis inventore
praesentium nisi. Id laboriosam ipsam enim. </p>
<button>Read More</button>
</div>
</li>
<li class='item' style="background-image: url('https://images7.alphacoders.com/878/878663.jpg')">
<div class='content'>
<h2 class='title'>"Last Trace Of Us"</h2>
<p class='description'>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesentium nisi. Id laboriosam ipsam enim.
</p>
<button>Read More</button>
</div>
</li>
<li class='item' style="background-image: url('https://theawesomer.com/photos/2017/07/simon_stalenhag_the_electric_state_6.jpg')">
<div class='content'>
<h2 class='title'>"Urban Decay"</h2>
<p class='description'>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesentium nisi. Id laboriosam ipsam enim.
</p>
<button>Read More</button>
</div>
</li>
<li class='item' style="background-image: url('https://da.se/app/uploads/2015/09/simon-december1994.jpg')">
<div class='content'>
<h2 class='title'>"The Migration"</h2>
<p class='description'> Lorem ipsum, dolor sit amet consectetur
adipisicing elit. Tempore fuga voluptatum, iure corporis inventore
praesentium nisi. Id laboriosam ipsam enim. </p>
<button>Read More</button>
</div>
</li>
</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>
</nav>
</main>







<div id="main1">
<!-- <header>
<center>
<div style="margin: 0px;padding: 0px; z-index: 200px; ">
<img src="bficon.png" width="25%" style="border-radius: 100%;">
</div>
</center>
</header> -->

<nav >
<a href="#Movies"> Movies</a>
<a href="#Series"> Series</a>
<a href="#Upcoming"> Upcoming Movies</a>
<a href="#hello"> Upcoming Series</a>
<a href="#Movie"> Bollywood</a>
</nav>


<div id="Movies">
<p style="color: #fff;font-family: Consolas;font-weight: bolder;font-size: larger;">
Movies:
</p>
</div>

<div id="movies" class="scroll-container" >

</div>

<div id="Series">
<p style="color: #fff;font-family: Consolas;font-weight: bolder;font-size: larger;">
Series:
</p>
</div>

<div id="series" class="scroll-container" >

</div>


<div id="Upmovies">
<p style="color: #fff;font-family: Consolas;font-weight: bolder;font-size: larger;">
Upcoming Series
</p>
</div>

<div id="UpcomingMovies" class="scroll-container">
<!-- Images here -->
<img src="alien.jpg" alt="Cinque Terre">
<img src="bladerunner.jpg" alt="Forest">
<img src="ae.jpg" alt="Northern Lights">
<img src="prometheus.jpg" alt="Mountains">
<img src="alien.jpg" alt="Cinque Terre">
<img src="bladerunner.jpg" alt="Forest">
<img src="ae.jpg" alt="Northern Lights">
<img src="prometheus.jpg" alt="Mountains">
<img src="alien.jpg" alt="Cinque Terre">
<img src="bladerunner.jpg" alt="Forest">
<img src="ae.jpg" alt="Northern Lights">
<img src="prometheus.jpg" alt="Mountains">
</div>


<div id="Series">
<p style="color: #fff;font-family: Consolas;font-weight: bolder;font-size: larger;">
Bollywood
</p>
</div>

<div id="UpcomingSeries" class="scroll-container">
<!-- Images here -->
<img src="alien.jpg" alt="Cinque Terre">
<img src="bladerunner.jpg" alt="Forest">
<img src="ae.jpg" alt="Northern Lights">
<img src="prometheus.jpg" alt="Mountains">
</div>


</div>





<script src="index.js" type="text/javascript"></script>

</body>

</html>
Binary file added assets/bficon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/cursor.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/virat.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
102 changes: 102 additions & 0 deletions index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@

// document.addEventListener("DOMContentLoaded", function() {
// function cloneItem() {

// var series = document.getElementById("series");
// var seriesImages = Array.from(series.getElementsByTagName("img"));
// var initialCount1 = seriesImages.length;




// var movies = document.getElementById("movies");
// var movieImages = Array.from(movies.getElementsByTagName("img"));
// var initialCount = movieImages.length;

// for(var i = 0; i < initialCount; i++) {
// var clonedItem = movieImages[i].cloneNode(true);
// movies.appendChild(clonedItem);

// }


// for(var i = 0; i < initialCount1; i++) {
// var clonedItem = seriesImages[i].cloneNode(true);
// series.appendChild(clonedItem);
// }


// }

// for(var i = 0; i < 3; i++) {
// cloneItem();
// }


// for(var i = 0; i < 3; i++) {
// cloneItem();
// }

// });



const apiKey = '68e094699525b18a70bab2f86b1fa706';
const now_playing = `https://api.themoviedb.org/3/movie/now_playing?api_key=${apiKey}`;
const now_airing =`https://api.themoviedb.org/3/tv/on_the_air?api_key=${apiKey}`;


function fetchAndDisplayMovies(url, containerId) {
fetch(url)
.then(response => response.json())
.then(data => {
const movieList = document.getElementById(containerId);

data.results.forEach(movie => {
const image = document.createElement('img');
image.src = `https://image.tmdb.org/t/p/w200${movie.poster_path}`;
image.alt = movie.title;
image.style.width = "350px"; // Adjust the width as needed
image.style.height = "180px"; // Adjust the height as needed
movieList.appendChild(image);
});
})
.catch(error => console.error('Error fetching data:', error));
}

// Fetch and display upcoming movies
fetchAndDisplayMovies(now_playing, 'movies');

// Fetch and display unrated movies
fetchAndDisplayMovies(now_airing, 'series');

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
}
}


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);
Empty file added md.js
Empty file.
Empty file added mdstyle.css
Empty file.
Loading

0 comments on commit 88463e3

Please sign in to comment.