php search bar for file system doesnt work for subfolder.php but it does work for the main folder

so i made this file system for my website. in the folder.php file theres a working search bar while the one inside my subfolder.php file for some reason doesnt work and idk how to fix it. if i put a folders name into the subfolder.php files search bar it just makes it so all folders get removes and the one i searched for doesnt show up either.

Folder.php (working)

<?php
$mainFolderPath = 'hmm';
$subfolders = scandir($mainFolderPath);
$filteredSubfolders = [];

// Check if a search query is provided
if (isset($_GET['search']) && !empty($_GET['search'])) {
    $searchQuery = strtolower($_GET['search']);

    // Filter subfolders based on the search query
    $filteredSubfolders = array_filter($subfolders, function ($subfolder) use ($searchQuery, $mainFolderPath) {
        return ($subfolder !== '.' && $subfolder !== '..' && is_dir($mainFolderPath . '/' . $subfolder) && strpos(strtolower($subfolder), $searchQuery) !== false);
    });
} else {
    // If no search query provided, show all subfolders
    $filteredSubfolders = array_filter($subfolders, function ($subfolder) use ($mainFolderPath) {
        return ($subfolder !== '.' && $subfolder !== '..' && is_dir($mainFolderPath . '/' . $subfolder));
    });
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hentai</title>
    <style>
        .nav-container {
            display: flex;
            justify-content: left;
            align-items: left;
            background-color: rgb(255, 255, 255);
            padding: 10px;
        }

        .nav-link {
            text-decoration: none;
            color: black;
            padding: 10px 20px;
            margin: 0 1px;
            border: 1px solid black;
            border-radius: 1px;
        }

        .nav-link:hover {
            background-color: #444;
        }

        .subfolder-link {
            display: inline-block;
            padding: 8px 16px;
            background-color: #236;
            color: white;
            text-align: center;
            text-decoration: none;
            border-radius: 1px;
            margin: 1px;
            cursor: pointer;
        }

        /* Add this style for the search bar */
        .search-container {
            margin-bottom: 10px;
        }

        .search-container input[type="text"] {
            padding: 5px;
            width: 200px;
        }

        .search-container input[type="submit"] {
            padding: 5px 10px;
            background-color: #236;
            color: white;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <header>
        <a href="home.html">
            <img src="img/logo.jpg" alt="Savekillqqp's Shares" width="35%" height="35%">
        </a>

        <head>
            <link rel="shortcut icon" type="image/x-icon" href="faviconH.ico" />
          </head>
        
    </header>
    <hr>
    <nav>
        <div class="nav-container">
            <a class="nav-link" href="home.html">Home</a>
            <a class="nav-link" href="citra.html">Citra</a>
            <a class="nav-link" href="music.html">Music</a>
            <a class="nav-link" href="movies.html">Movies</a>
            <a class="nav-link" href="https://discord.gg/Ta9aamS7">Discord</a>
            <a class="nav-link" href="test.html">Hentai</a>
        </div>
    </nav>
    </hr>
    <hr>
    <header>
        <h1>Hmm Folder:</h1>

        <!-- Add this HTML code for the search bar -->
        <div class="search-container">
            <form method="GET" action="">
                <input type="text" name="search" placeholder="Search for a subfolder...">
                <input type="submit" value="Search">
            </form>
        </div>

        <?php
        if (empty($filteredSubfolders)) {
            echo '<p>No matching subfolders found.</p>';
        } else {
            echo '<p>Matching subfolders:</p>';
            echo '<ul>';
            foreach ($filteredSubfolders as $subfolder) {
                echo '<li><a class="subfolder-link" href="subfolder.php?subfolder=' . urlencode($subfolder) . '">' . $subfolder . '</a></li>';
            }
            echo '</ul>';
        }
        ?>
    </header>
</body>
</html>

Subfolder.php (not working)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hentai</title>
</head>
<body>
    <header>
        <a href="home.html">
            <img src="img/logo.jpg" alt="Savekillqqp's Shares" width="35%" height="35%">
        </a>
        
        <head>
            <link rel="shortcut icon" type="image/x-icon" href="faviconH.ico" />
          </head>
        
    </header>
    <hr>
    <nav>
        <div class="nav-container">
            <a class="nav-link" href="home.html">Home</a>
            <a class="nav-link" href="citra.html">Citra</a>
            <a class="nav-link" href="music.html">Music</a>
            <a class="nav-link" href="movies.html">Movies</a>
            <a class="nav-link" href="https://discord.gg/Ta9aamS7">Discord</a>
            <a class="nav-link" href="test.html">Hentai</a>
        </div>
    </nav>
    </hr>


<hr>
<head>
    <title>Hmm Subfolders</title>
    <link rel="stylesheet" href="/node_modules/lightbox2/src/css/lightbox.css">
    <style>

.nav-container {
            display: flex;
            justify-content: left;
            align-items: left;
            background-color: rgb(255, 255, 255);
            padding: 10px;
        }

        .nav-link {
            text-decoration: none;
            color: black;
            padding: 10px 20px;
            margin: 0 1px;
            border: 1px solid black;
            border-radius: 1px;
        }
        .nav-link:hover {
            background-color: #444;
        }

        .subfolder-link {
            display: inline-block;
            padding: 8px 16px;
            background-color: #236;
            color: white;
            text-align: center;
            text-decoration: none;
            border-radius: 1px;
            margin: 1px;
            cursor: pointer;
        }

        #lightboxContainer {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: fixed;
            top: 210px; /* Adjust this value as needed */
            left: 120px; /* Adjust this value as needed */
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 255);
            z-index: 9999; /* Ensure it's on top */
        }
        #lightboxImage {
            max-width: 60%;
            max-height: 60%;
        }
        #lightboxClose {
            position: absolute;
            top: 10px;
            right: 10px;
        }
        #lightboxButtons {
            display: flex;
            margin-top: 10px; /* Add some spacing above the buttons */
        }
        #lightboxButtons button {
            margin: 0 5px; /* Add some spacing between buttons */
        }

        #lightboxPrev,
        #lightboxNext {
            margin: 0 5px; /* Add some spacing between buttons */
            padding: 10px 20px; /* Adjust padding for button size */
            font-size: 13px; /* Adjust font size for button text */
            background-color: #236; /* Change background color */
            color: white; /* Change text color */
            border: none; /* Remove border */
            cursor: pointer;
        }

        .subfolder-link {
    display: inline-block;
    padding: 8px 16px;
    background-color: #236;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 1px;
    margin: 4px;
    cursor: pointer;
}

        /* Adjust image size on mobile */
        @media (max-width: 300px) {
            #lightboxImage {
                max-width: 100%; /* Adjust the value as needed for mobile */
                max-height: 100%; /* Adjust the value as needed for mobile */
            }
        }
    </style>
</head>

<form method="get">
    <input type="text" name="search" placeholder="Search subfolders...">
    <input type="submit" value="Search">
</form>

    </hr>

<?php

$mainFolderPath = 'hmm';
$subfolders = scandir($mainFolderPath);
$filteredSubfolders = [];

if (isset($_GET['subfolder'])) {
    // ... (rest of your code for displaying subfolders, images, videos, etc.) ...
}


if (isset($_GET['subfolder'])) {
    $subfolderPath = 'hmm/' . $_GET['subfolder'];
    $contents = scandir($subfolderPath);
    $processedSubSubfolders = array();

    foreach ($contents as $content) {
        if ($content !== '.' && $content !== '..') {
            $fullPath = $subfolderPath . '/' . $content;
            $fileExtension = strtolower(pathinfo($content, PATHINFO_EXTENSION));
        
            if (is_dir($fullPath) && !in_array($content, $processedSubSubfolders)) {
                $processedSubSubfolders[] = $content;
                echo '<p><a class="subfolder-link" href="subfolder.php?subfolder=' . urlencode($_GET['subfolder'] . '/' . $content) . '">' . $content . '</a></p>';
            } elseif (in_array($fileExtension, array('mp4', 'webm', 'ogg'))) {
                echo '<video controls><source src="' . $subfolderPath . '/' . $content . '" type="video/' . $fileExtension . '">Your browser does not support the video tag.</video><br>';
            } elseif (in_array($fileExtension, array('jpg', 'jpeg', 'TIFF', 'PDF', 'png', 'gif', 'img_webp'))) {
                echo '<img src="' . $subfolderPath . '/' . $content . '" data-lightbox="images" alt="' . basename($content) . '" width="100"><br>';
            } elseif ($fileExtension === 'mp3') {
                echo '<audio controls><source src="' . $subfolderPath . '/' . $content . '" type="audio/mpeg">Your browser does not support the audio tag.</audio><br>';
            }
        }
    }    
}

if (isset($_GET['subfolder'])) {
    $subfolderPath = 'hmm/' . $_GET['subfolder'];
    $files = scandir($subfolderPath);
    $imageFiles = array();

    foreach ($files as $file) {
        if ($file !== '.' && $file !== '..') {
            $fileExtension = strtolower(pathinfo($file, PATHINFO_EXTENSION));
            if (in_array($fileExtension, array('jpg', 'jpeg', 'PDF', 'TIFF', 'png', 'gif', 'mp4', 'IMG_WEBP'))) {
                if (in_array($fileExtension, array('jpg', 'jpeg', 'PDF', 'TIFF', 'png', 'gif', 'mp4', 'IMG_WEBP'))) {
                $imageFiles[] = $subfolderPath . '/' . $file;
            } elseif (in_array($fileExtension, array('mp4', 'webm', 'ogg'))) {
                echo '<video controls><source src="' . $subfolderPath . '/' . $file . '" type="video/' . $fileExtension . '">Your browser does not support the video tag.</video><br>';
            } elseif ($fileExtension === 'mp3') {
                echo '<audio controls><source src="' . $subfolderPath . '/' . $file . '" type="audio/mpeg">Your browser does not support the audio tag.</audio><br>';
            }
        }
    }
}

    foreach ($imageFiles as $imageFile) {
        echo '<img src="' . $imageFile . '" data-lightbox="images" alt="' . basename($imageFile) . '" width="100"><br>';
    }
}
?>

<div id="lightboxContainer" style="display: none;">
    <img id="lightboxImage" src="" alt="">
    <span id="lightboxClose">&#10006;</span>
    <div id="lightboxButtons">
        <button id="lightboxPrev">Previous</button>
        <button id="lightboxNext">Next</button>
    </div>
</div>

<script src="/node_modules/lightbox2/src/js/lightbox.js"></script>
<script>
    const images = document.querySelectorAll('[data-lightbox="images"]');
    const lightboxContainer = document.getElementById('lightboxContainer');
    const lightboxImage = document.getElementById('lightboxImage');
    const lightboxClose = document.getElementById('lightboxClose');
    const lightboxPrev = document.getElementById('lightboxPrev');
    const lightboxNext = document.getElementById('lightboxNext');
    let currentImageIndex = 0;
    let touchStartX = 0;
    let touchEndX = 0;


    lightboxPrev.addEventListener('click', () => {
        currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;
        showLightbox(images[currentImageIndex].getAttribute('src'));
    });

    lightboxNext.addEventListener('click', () => {
        currentImageIndex = (currentImageIndex + 1) % images.length;
        showLightbox(images[currentImageIndex].getAttribute('src'));
    });

    images.forEach((image, index) => {
        image.addEventListener('click', () => {
            currentImageIndex = index;
            showLightbox(image.getAttribute('src'));
        });

        image.addEventListener('touchstart', (e) => {
            touchStartX = e.touches[0].clientX;
        });

        image.addEventListener('touchend', (e) => {
            touchEndX = e.changedTouches[0].clientX;
            handleSwipe();
        });
    });

    lightboxClose.addEventListener('click', () => {
        lightboxContainer.style.display = 'none';
    });

    document.addEventListener('keydown', (event) => {
        if (lightboxContainer.style.display === 'block') {
            if (event.key === 'ArrowRight') {
                currentImageIndex = (currentImageIndex + 1) % images.length;
                showLightbox(images[currentImageIndex].getAttribute('src'));
            } else if (event.key === 'ArrowLeft') {
                currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;
                showLightbox(images[currentImageIndex].getAttribute('src'));
            }
        }
    });

    function showLightbox(src) {
        lightboxImage.setAttribute('src', src);
        lightboxContainer.style.display = 'block';
    }

    function handleSwipe() {
        if (Math.abs(touchEndX - touchStartX) > 50) {
            if (touchEndX > touchStartX) {
                currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;
                showLightbox(images[currentImageIndex].getAttribute('src'));
            } else {
                currentImageIndex = (currentImageIndex + 1) % images.length;
                showLightbox(images[currentImageIndex].getAttribute('src'));
            }
        }
    }




</script>
</body>
</html>

i apologize if the code is hard to read throu im not the best with tidying up and im also quite new to coding so i apreciate all help i can get :D

Upvotes: 1

Views: 30

Answers (0)

Related Questions