<!DOCTYPE html>
<?php include "db_conn.php"; ?>
<html lang="lv">
<style>
    body{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        min-height: 100vh;
    }
    .alb {
        width: 250px;
        height: 250px;
        padding: 55px;
    }
    .alb img {
        width: 140%;
        height: 140%;
    }
    a {
        text-decoration: none;
        color: black;
    }
</style>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="with=device-width, initial-scale=1.0">
    <title>Galerija</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=M+PLUS+2:wght@100;400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<section class="header">
    <!--Navigation bar-->
    <div id="navigation"></div>
    <script>
        $(function(){
            $("#navigation").load("nav.html");
        });
    </script>
    <!--end of Navigation bar-->
    <?php
    $sql = "SELECT * FROM images ORDER BY id DESC";
    $res = mysqli_query($conn,  $sql);

    if (mysqli_num_rows($res) > 0) {
        while ($images = mysqli_fetch_assoc($res)) {  ?>

            <div class="alb">
                <img src="uploads/<?=$images['image_url']?>">
            </div>

        <?php } }?>
</section>
<section class="footer">
    <!--footer-->
    <div id="footer"></div>

    <script>
        $(function(){
            $("#footer").load("footer.html");
        });
    </script>
    <!--end of footer-->
</section>


<!---Javscript lai atvērtu/aizvērtu menu uz telefona--->
<script>

    var navLinks = document.getElementById("navLinks");

    function  showMenu(){
        navLinks.style.right = "0";
    }
    function  hideMenu(){
        navLinks.style.right = "-200px";
    }

</script>

</body>
</html>