<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tux gallery !</title>
    <link rel="stylesheet" href="static/css/stylesheet.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <div class="nav-bar">
        <ol>
            <a href="/index.php"><li><img alt="logo" class="logo" src="static/img/logo.jpg">Tux Gallery </li></a>
            <a href="/login.php"><li>Login</li></a>
        </ol>
    </div>
    <div class="wrapper">
        <section class="info-part">
            <h1>Tux gallery</h1>
            <p>Tux is awesome ! So I made this extremely secure gallery.</p>
            <p>You can also add tux pictures to the gallery, first <a href="login.php">login</a> and then you should be able to upload a new image of tux.</p>
        </section>
        <section class="gallery-part">
            <div class="gallery">
            <?php
                foreach (new DirectoryIterator('static/img/gallery') as $file) {
                    if($file->isDot()) continue;
                        print '<img src="static/img/gallery/'. $file->getFilename() . '">';
                    }
            ?>
            </div>
        </section>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>