Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
An0n-00 committed Oct 22, 2024
2 parents 15cff49 + 14e15bf commit 52831ff
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 40 deletions.
72 changes: 34 additions & 38 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,9 @@

<!-- Consolidated in one Css file with versioning -->
<link rel="stylesheet" href="themes/themes.css?v=1.4.57">

<!-- jQuery with versioning -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js?v=1.8"
integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js?v=1.8"></script>
</head>

<body class="font-poppins bg-gradient-to-br from-gray-900 to-black text-gray-100">
Expand All @@ -50,87 +48,85 @@
</p>
</div>

<!-- Social Links -->
<div class="flex flex-wrap gap-2 mb-6 justify-center">
<a href="https://github.com/An0n-00/novafork2" target="_blank"
class="glassmorphism text-white py-2 px-4 rounded-full flex items-center space-x-2 hover:bg-gray-700 transition duration-300 ease-in-out">
<i class="fab fa-github"></i>
<span class="text-sm sm:text-base">Star on GitHub</span>
</a>
</div>

<!-- Search Section -->
<div class="relative flex-1 mb-8">
<div class="relative flex-1 mb-6 sm:mb-8">
<input type="text" id="searchInput" placeholder="The Simpsons is nice!"
class="w-full p-4 pl-12 glassmorphism text-white placeholder-gray-400 rounded-full focus:ring-2 focus:ring-purple-500 focus:outline-none transition duration-300 ease-in-out">
<i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
class="w-full p-2 sm:p-4 pl-10 sm:pl-12 glassmorphism text-white placeholder-gray-400 rounded-full focus:ring-1 sm:focus:ring-2 focus:ring-purple-500 focus:outline-none transition duration-300 ease-in-out text-xs sm:text-base">
<i class="fas fa-search absolute left-3 sm:left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs sm:text-base"></i>
<button id="searchButton"
class="absolute inset-y-0 right-0 text-white font-bold py-2 px-4 sm:px-6 rounded-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 focus:outline-none transition duration-300 ease-in-out">Search</button>
class="absolute inset-y-0 right-0 text-white font-bold py-1 px-3 sm:py-2 sm:px-6 rounded-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 focus:outline-none transition duration-300 ease-in-out text-xs sm:text-base">Search</button>
<div id="searchSuggestions"
class="absolute w-full glassmorphism text-white rounded-lg mt-1 hidden z-10 max-h-96 overflow-y-auto hover:cursor-pointer transition duration-300 ease-in-out"></div>
</div>


<!-- Filter Settings -->
<div class="mb-12">
<h2 class="text-sm sm:text-base font-semibold text-white mb-4">Filter Settings</h2>
<div class="flex flex-wrap items-center gap-4 mb-4">
<h2 class="text-xs sm:text-sm font-semibold text-white mb-3 sm:mb-4">Filter Settings</h2>
<div class="flex flex-wrap items-center gap-2 sm:gap-4 mb-3 sm:mb-4">
<!-- Category Select -->
<select id="categorySelect"
class="p-3 glassmorphism rounded-full text-white text-sm sm:text-base focus:ring-2 focus:ring-purple-500 focus:outline-none transition duration-300 ease-in-out custom-select">
<!-- Options dynamically go here -->
class="p-2 sm:p-3 glassmorphism rounded-full text-white text-xs sm:text-sm focus:ring-1 sm:focus:ring-2 focus:ring-purple-500 focus:outline-none transition duration-300 ease-in-out custom-select">
</select>
<!-- Type Select -->
<select id="typeSelect"
class="p-3 glassmorphism rounded-full text-white text-sm sm:text-base focus:ring-2 focus:ring-purple-500 focus:outline-none transition duration-300 ease-in-out custom-select">
class="p-2 sm:p-3 glassmorphism rounded-full text-white text-xs sm:text-sm focus:ring-1 sm:focus:ring-2 focus:ring-purple-500 focus:outline-none transition duration-300 ease-in-out custom-select">
</select>
<!-- Toggle Button for Additional Filters -->
<button id="toggleFiltersButton" class="p-3 glassmorphism rounded-full text-white text-sm sm:text-base flex items-center focus:ring-2 focus:ring-purple-500 focus:outline-none transition duration-300 ease-in-out">
<span id="toggleIcon" class="transform transition-transform duration-300 ease-in-out mr-2">
<button id="toggleFiltersButton"
class="p-2 sm:p-3 glassmorphism rounded-full text-white text-xs sm:text-sm flex items-center focus:ring-1 sm:focus:ring-2 focus:ring-purple-500 focus:outline-none transition duration-300 ease-in-out">
<span id="toggleIcon" class="transform transition-transform duration-300 ease-in-out mr-1 sm:mr-2">
<!-- Down Arrow Icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path id="toggleIconPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path id="toggleIconPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7"/>
</svg>
</span>
Advanced Filters
</button>
</div>

<!-- Collapsible Section for Additional Filters -->
<div id="additionalFilters" class="mt-4 hidden">
<div class="flex flex-wrap items-center gap-4">
<div id="additionalFilters" class="mt-3 sm:mt-4 hidden">
<div class="flex flex-wrap items-center gap-2 sm:gap-4">
<!-- Actor Search Input -->
<input id="actorSearchInput" type="text" placeholder="Search by Actor"
class="p-3 glassmorphism rounded-full text-white text-sm sm:text-base w-full sm:w-64 focus:ring-2 focus:ring-purple-500 focus:outline-none transition duration-300 ease-in-out" />
class="p-2 sm:p-3 glassmorphism rounded-full text-white text-xs sm:text-sm w-full sm:w-64 focus:ring-1 sm:focus:ring-2 focus:ring-purple-500 focus:outline-none transition duration-300 ease-in-out"/>

<!-- Company Search Input and Suggestions -->
<div class="relative w-full sm:w-auto">
<!-- Company Search Input -->
<input id="companySearchInput" type="text" placeholder="Search by Company"
class="p-3 glassmorphism rounded-full text-white text-sm sm:text-base w-full sm:w-64 focus:ring-2 focus:ring-purple-500 focus:outline-none transition duration-300 ease-in-out" />
<div id="companySuggestions" class="absolute z-10 w-full sm:w-64 bg-gray-800 text-white rounded-md shadow-lg overflow-hidden hidden">
class="p-2 sm:p-3 glassmorphism rounded-full text-white text-xs sm:text-sm w-full sm:w-64 focus:ring-1 sm:focus:ring-2 focus:ring-purple-500 focus:outline-none transition duration-300 ease-in-out"/>
<div id="companySuggestions"
class="absolute z-10 w-full sm:w-64 bg-gray-800 text-white rounded-md shadow-lg overflow-hidden hidden">
</div>
</div>

<div class="relative w-full sm:w-auto">
<input id="collectionSearchInput" type="text" placeholder="Search by Collection"
class="p-3 glassmorphism rounded-full text-white text-sm sm:text-base w-full sm:w-64 focus:ring-2 focus:ring-purple-500 focus:outline-none transition duration-300 ease-in-out" />
<div id="collectionSuggestions" class="absolute z-10 w-full sm:w-64 bg-gray-800 text-white rounded-md shadow-lg overflow-hidden hidden">
class="p-2 sm:p-3 glassmorphism rounded-full text-white text-xs sm:text-sm w-full sm:w-64 focus:ring-1 sm:focus:ring-2 focus:ring-purple-500 focus:outline-none transition duration-300 ease-in-out"/>
<div id="collectionSuggestions"
class="absolute z-10 w-full sm:w-64 bg-gray-800 text-white rounded-md shadow-lg overflow-hidden hidden">
</div>
</div>

<div class="relative w-full sm:w-auto">
<input id="franchiseSearchInput" type="text" placeholder="Search by Franchise"
class="p-3 glassmorphism rounded-full text-white text-sm sm:text-base w-full sm:w-64 focus:ring-2 focus:ring-purple-500 focus:outline-none transition duration-300 ease-in-out" />
<div id="franchiseSuggestions" class="absolute z-10 w-full sm:w-64 bg-gray-800 text-white rounded-md shadow-lg overflow-hidden hidden">
class="p-2 sm:p-3 glassmorphism rounded-full text-white text-xs sm:text-sm w-full sm:w-64 focus:ring-1 sm:focus:ring-2 focus:ring-purple-500 focus:outline-none transition duration-300 ease-in-out"/>
<div id="franchiseSuggestions"
class="absolute z-10 w-full sm:w-64 bg-gray-800 text-white rounded-md shadow-lg overflow-hidden hidden">
</div>
</div>
</div>
</div>




<!-- Selected Media Section -->
<section id="selectedMediaSection" class="mb-12 mt-12 hidden">
<section id="selectedMediaSection" class="mb-12 mt-16 hidden">
<h2 class="text-xl sm:text-2xl font-bold mb-4 text-white">Selected Media</h2>
<div id="selectedMovie" class="p-4 sm:p-6 rounded-lg flex glassmorphism glow">
<div id="videoPlayer" class="w-full max-w-xs sm:max-w-sm h-40 sm:h-60 overflow-hidden bg-gray-900 rounded-lg">
Expand All @@ -139,7 +135,7 @@ <h2 class="text-xl sm:text-2xl font-bold mb-4 text-white">Selected Media</h2>
</div>
</section>

<section class="mb-12">
<section class="mb-12 mt-16">
<div class="flex flex-col sm:flex-row justify-between items-center mb-4">
<h2 class="text-lg sm:text-2xl font-bold text-white">Trending Media</h2>
<button id="togglePopularMedia"
Expand Down Expand Up @@ -202,7 +198,7 @@ <h3 class="text-md sm:text-lg font-semibold">Media Title</h3>

<!-- Scripts with versioning added -->
<script src="media/mediaplayer/mediaplayer.js?v=1.2.4.61"></script>
<script src="search/searchResults.js?v=1.2.1"></script>
<script src="search/searchResults.js?v=1.2.2"></script>
<script type="module" src="index.js?v=1.2.3"></script>
<script src="media/mediahider/mediahider.js?v=1.1.0"></script>
<script src="media/mediaTemplate.html?v=1.32"></script>
Expand Down
3 changes: 1 addition & 2 deletions search/searchResults.js
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,6 @@ $(document).ready(async function() {
$mediaContainer.html('<div class="p-4 text-gray-400 text-center">No results found</div>');
return;
}

const resultsHTML = results.map(media => {
const posterPath = media.poster_path ? `https://image.tmdb.org/t/p/w500${media.poster_path}` : 'path-to-placeholder-image.jpg';
const genreNames = (media.genre_ids || []).map(id => genreMap[id] || 'Unknown').join(', ');
Expand Down Expand Up @@ -163,7 +162,7 @@ $(document).ready(async function() {

$mediaContainer.html(resultsHTML);

$mediaContainer.find('.media-card').on('click', function() {
$mediaContainer.find('.media-card').on('click', function () {
const mediaId = $(this).data('id');
const mediaType = $(this).data('type');
fetchSelectedMedia(mediaId, mediaType);
Expand Down

0 comments on commit 52831ff

Please sign in to comment.