1#@!#!123s

: / home3 / encodto1 / www /
Filename : creativedesignp.php
back
<?php include('database.php'); ?>
<!DOCTYPE html>
<html lang="en" class="rts-light-mood">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-style-mode" content="1">
    <title>Encoders Creative Portfolio</title>
    <link rel="stylesheet" href="assets2/css/plugins/fontawesome-6.css">
    <link rel="stylesheet" href="assets2/css/plugins/swiper.min.css">
    <link rel="stylesheet" href="assets2/css/vendor/metismenu.css">
    <link rel="stylesheet" href="assets2/css/plugins/animate.min.css">
    <link rel="stylesheet" href="assets2/css/vendor/bootstrap.min.css">
    <link rel="stylesheet" href="assets2/css/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=DM+Sans&family=Syne:wght@400;500;600&family=Yantramanav:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../../../cdn.jsdelivr.net/gh/iconoir-icons/iconoir%40main/css/iconoir.css" />
    <link rel="stylesheet" href="../../../maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css" />
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="assets/css/swiper-bundle.min.css" />
    <link rel="stylesheet" href="assets/css/style.css" />
    <link rel="stylesheet" href="assets/css/responsive.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />

    <style>
        .filter-buttons {
            flex-wrap: wrap;
            margin: 20px 0;
            width: 40%;
            position: relative;
            right: 19px;
        }

        .filter-btn {
            background-color: black;
            color: white;
            padding: 10px 20px;
            border: 1px solid white;
            border-radius: 5px;
            cursor: pointer;
            text-align: center;
            font-size: 13px;
            transition: all 0.3s ease;
            flex: 1 1 auto;
            max-width: 200px;
        }

        .filter-btn:hover {
            background-color: white;
            color: black;
            border: 1px solid black;
        }

        .filter-btn.active {
            background-color: white;
            color: black;
            font-weight: bold;
            border: 1px solid black;
        }

        @media (max-width: 768px) {
            .filter-btn {
                font-size: 14px;
                padding: 8px 15px;
            }
        }

        @media (max-width: 480px) {
            .filter-buttons {
                width: 100%;
                display: flex;
                justify-content: center;
                gap: 5px;
                margin: 0 10px;
                padding: 0 10px;
            }

            .filter-btn {
                font-size: 10px;
                padding: 6px 10px;
            }
        }
    </style>
</head>

<body class="inner-page portfolio-nine vertical-split">
    <?php include 'header.php'; ?>
    <div class="portfolio-nine-wrapper-main">
        <div class="container-full">
            <div class="row">
                <div class="col-lg-5">
                    <div class="banner-portfolio-nine">
                        <h1 class="title">OUR CREATIVE<br>PORTFOLIO</h1>
                        <p class="disc">
                            Showcasing Our Creative <br> Designs
                        </p>

                        <!-- Gallery Filter Buttons -->
                        <div class="filter-buttons">
                            <div class="row">
                                <div class="col-3">
                                    <div class="filter-btn" data-filter="all">All</div>
                                </div>
                                <?php
                                $category_query = "SELECT DISTINCT category FROM creative_portfolio";
                                $category_result = mysqli_query($conn, $category_query);
                                if (mysqli_num_rows($category_result) > 0) {
                                    while ($category_row = mysqli_fetch_assoc($category_result)) {
                                        $category = strtolower($category_row['category']);
                                        echo '<div class="col-3"><div class="filter-btn" data-filter="' . $category . '">' . ucfirst($category) . '</div></div>';
                                    }
                                }
                                ?>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-7">
                    <div class="page-title-area-portfolio-7">
                        <h1 class="title-work rts-portfolio-text">
                            Our Latest <br> Work
                        </h1>
                    </div>
                    <div class="product-wrapper-9 rts-team__area rts-portfolio-area">
                        <div class="product-row pt--200 pt_md--50 pt_sm--30">
                            <div class="row">
                                <?php
                                $filter = isset($_GET['filter']) ? $_GET['filter'] : 'all';
                                $query = ($filter == 'all') ? "SELECT image, category FROM creative_portfolio" : "SELECT image, category FROM creative_portfolio WHERE category = '$filter'";
                                $result = mysqli_query($conn, $query);
                                if (mysqli_num_rows($result) > 0) {
                                    while ($row = mysqli_fetch_assoc($result)) {
                                        $image = $row['image'];
                                        $category = strtolower($row['category']);
                                ?>
                                        <div class="col-md-6 <?php echo $category; ?>">
                                            <div class="single-product-9 m-3">
                                                <a href="#">
                                                    <img src="encoadminders/uploads/creative/<?php echo $image; ?>" alt="product">
                                                </a>
                                                <div class="inner-content">
                                                    <span><?php echo ucfirst($category); ?></span>
                                                    <a href="#">Creative Design</a>
                                                </div>
                                            </div>
                                        </div>
                                <?php
                                    }
                                } else {
                                    echo 'No portfolio items found.';
                                }
                                ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.querySelectorAll('.filter-btn').forEach(function(button) {
            button.addEventListener('click', function() {
                var filterValue = this.getAttribute('data-filter');
                var currentUrl = window.location.href.split('?')[0];
                var newUrl = filterValue === 'all' ? currentUrl : currentUrl + '?filter=' + filterValue;
                window.location.href = newUrl;
            });
        });
    </script>

    <div class="bg-noise"></div>
    <?php include 'footer2.php'; ?>

    <script defer src="assets2/js/vendor/jquery.min.js"></script>
    <script defer src="assets2/js/plugins/bootstrap.min.js"></script>
    <script defer src="assets2/js/plugins/contact.form.js"></script>
    <script defer src="assets2/js/vendor/waypoint.js"></script>
    <script defer src="assets2/js/plugins/swiper.js"></script>
    <script defer src="assets2/js/plugins/resizer-sensor.js"></script>
    <script defer src="assets2/js/plugins/sticky-sidebar.js"></script>
    <script defer src="assets2/js/plugins/isotop.js"></script>
    <script defer src="assets2/js/plugins/imagesloaded.pkgd.min.js"></script>
</body>
</html>