1#@!#!123s

: / home / markniuj / bazmeasar.com / quran /
Filename : index.php
back
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="Quran in 15 line colored,16 line quran,13 line Quran, online Quran classes" name="keywords">
    <meta content="online books islamic posts for your page" name="description">

    <title>Index Page - Specific Image from Each Folder</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        .thumbnail {
            margin-bottom: 15px;
            cursor: pointer;
        }
        .thumbnail img {
            width: 100%;
            height: auto;
        }
        .thumbnail .caption {
            margin-top: 5px;
            font-size: 14px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
                                <img src="https://bazmeasar.com/img/logo/bazm-e-asar2.png" width=" 60px" height="60px" alt="Quran class online logo">
                          
<a class="nav-link" href="https://bazmeasar.com/">Main-menu</a>

        <div class="row">
            <?php
            // Directory where folders containing images are located
            $folders = glob('uploads/*', GLOB_ONLYDIR);

            foreach ($folders as $folder) {
                $specificImage = $folder . '/title.webp';

                if (file_exists($specificImage)) {
                    $title = basename($specificImage);

                    echo '<div class="col-md-4">';
                    echo '<div class="thumbnail" onclick="showFolderImages(\'' . $folder . '\')">';
                    echo '<img src="' . $specificImage . '"width="150" height="300" alt="Quran and online Qida for kids and many books to read and learn Quran">';
                    echo '<div class="caption">' . $title . '</div>';
                    echo '</div>';
                    echo '</div>';
                }
            }
            ?>
        </div>
    </div>

    <script>
        function showFolderImages(folder) {
            window.location.href = 'folder_images.php?folder=' + folder;
        }
    </script>
</body>
</html>