<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StreamUp | Home</title>
<script id="aclib" type="text/javascript" src="//acscdn.com/script/aclib.js"></script>
<link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="Icon" href="./assets/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./tmdb.css">
<link rel="stylesheet" href="./navbar.css">
<link rel="stylesheet" href="./carousel.css">
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2THZ88YGHZ"></script>
</head>
<body>
<div class="hamburger-toggle-div">
<i class='bx bx-menu' id="hamburger-toggle"></i>
</div>
<div class="sidebar" id="sidebar">
<div class="logo-details">
<div class="logo_name">STREAMUP.io</div>
<i class='bx bx-menu' id="btn"></i>
</div>
<ul class="nav-list" id="navList">
<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="./movies.html">
<i class='bx bx-camera-movie'></i>
<span class="links_name">Movie</span>
</a>
<span class="tooltip">Movie</span>
</li>
<li>
<a href="./TVShow.html">
<i class='bx bx-movie'></i>
<span class="links_name">TV Show</span>
</a>
<span class="tooltip">TV Show</span>
</li>
<li>
<a href="./sport/index.html">
<i class='bx bx-basketball'></i>
<span class="links_name">Sports</span>
</a>
<span class="tooltip">Sports</span>
</li>
<li>
<a href="./sport/all_matches.html">
<i class='bx bx-trophy'></i>
<span class="links_name">All Sports</span>
</a>
<span class="tooltip">All Sports</span>
</li>
<li>
<a href="./anime.html">
<i class='bx bx-mask'></i>
<span class="links_name">Anime</span>
</a>
<span class="tooltip">Anime</span>
</li>
<li class="profile">
<div class="profile-details"></div>
</li>
</ul>
</div>
<section class="home-section">
<div class="carousel-container">
<div class="carousel">
<!-- Slide 1: Your original video -->
<div class="carousel-item active">
<video src="./assets/IMG_2833.mp4" autoplay muted playsinline style="opacity: 0.7;"></video>
<a class="goTo" href="./sport/index.html">GO TO SPORTS</a>
</div>
</div>
<button class="carousel-control prev" aria-label="Previous slide">❮</button>
<button class="carousel-control next" aria-label="Next slide">❯</button>
<div class="carousel-indicators"></div>
</div>
<!-- Latest Movies -->
<div class="matches-wrapper">
<h1 class="catName" style="margin-left: 25px;">Latest Movies</h1>
<div class="btnWrapper">
<img class="leftBtn" src="./sport/img/arrowLeft.png" alt="Scroll Left">
<p>Swipe</p>
<img class="rightBtn" src="./sport/img/arrowRight.png" alt="Scroll Right" style="margin-right: 20px;">
</div>
<div class="scrollContainer" id="latestMoviesSection"></div>
</div>
<!-- Trending Movies -->
<div class="matches-wrapper">
<h1 class="catName" style="margin-left: 25px;">Trending Movies</h1>
<div class="btnWrapper">
<img class="leftBtn" src="./sport/img/arrowLeft.png" alt="Scroll Left">
<p>Swipe</p>
<img class="rightBtn" src="./sport/img/arrowRight.png" alt="Scroll Right" style="margin-right: 20px;">
</div>
<div class="scrollContainer" id="trendingMoviesSection"></div>
</div>
<!-- Latest TV Shows -->
<div class="matches-wrapper">
<h1 class="catName" style="margin-left: 25px;">Latest TV Shows</h1>
<div class="btnWrapper">
<img class="leftBtn" src="./sport/img/arrowLeft.png" alt="Scroll Left">
<p>Swipe</p>
<img class="rightBtn" src="./sport/img/arrowRight.png" alt="Scroll Right" style="margin-right: 20px;">
</div>
<div class="scrollContainer" id="latestTvSection"></div>
</div>
<!-- Trending TV Shows -->
<div class="matches-wrapper">
<h1 class="catName" style="margin-left: 25px;">Trending TV Shows</h1>
<div class="btnWrapper">
<img class="leftBtn" src="./sport/img/arrowLeft.png" alt="Scroll Left">
<p>Swipe</p>
<img class="rightBtn" src="./sport/img/arrowRight.png" alt="Scroll Right" style="margin-right: 20px;">
</div>
<div class="scrollContainer" id="trendingTvSection"></div>
</div>
<!-- Latest Anime -->
<div class="matches-wrapper">
<h1 class="catName" style="margin-left: 25px;">Latest Anime</h1>
<div class="btnWrapper">
<img class="leftBtn" src="./sport/img/arrowLeft.png" alt="Scroll Left">
<p>Swipe</p>
<img class="rightBtn" src="./sport/img/arrowRight.png" alt="Scroll Right" style="margin-right: 20px;">
</div>
<div class="scrollContainer" id="latestAnimeSection"></div>
</div>
<!-- Trending Anime -->
<div class="matches-wrapper">
<h1 class="catName" style="margin-left: 25px;">Trending Anime</h1>
<div class="btnWrapper">
<img class="leftBtn" src="./sport/img/arrowLeft.png" alt="Scroll Left">
<p>Swipe</p>
<img class="rightBtn" src="./sport/img/arrowRight.png" alt="Scroll Right" style="margin-right: 20px;">
</div>
<div class="scrollContainer" id="trendingAnimeSection"></div>
</div>
<!-- Floating detail overlay -->
<div id="detailOverlay" class="detail-overlay hidden">
<iframe id="detailFrame" class="detail-frame" allowfullscreen></iframe>
<button class="close-overlay">×</button>
</div>
</section>
<script src="./pop-ad.js"></script>
<script src="./tmdb.js"></script>
<script src="./nav.js"></script>
<script src="./carousel.js"></script>
<script src="./GA.js"></script>
</body>
</html>