<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>St Thomas Boys' High School</title>
    <link rel="icon" type="image/x-icon" href="../img/logo.png">

    <!--! css file link -->
    <link rel="stylesheet" href="../style.css">
    <link rel="stylesheet" href="../css/photo-gallery.css">
    <link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <script	type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
</head>
<body>
    <div class="loader"></div> <!--! Loading animation-->
    <a class="to-top scale" href="#"><i class="fas fa-chevron-up"></i></a> <!--! Scroll to top button-->
    <header>
        <nav class="nav">
            <div class="container-1">
                <div class="nav-logo">
                    <figure>
                        <img src="../img/stbhs emblem colour-01.png" alt="" height="170px" width="" class="emblem scale">
                    </figure>
                </div>
                <div class="nav-content-container">
                    <h3 data-aos="fade-left" 
                        data-aos-anchor-placement="center-center" 
                        data-aos-once="true">Society of the missionaries of St Francis De Sales (M.S.F.S)</h3>
                    <h1>ST THOMAS BOYS' HIGH SCHOOL</h1>
                    <h3 data-aos="fade-right" data-aos-anchor-placement="center-center" data-aos-once="true">Aldona -
                        Goa 403-508</h3>
                </div>
                <div class="nav-badge">
                    <figure>
                        <img src="../img/logo.png" alt="" height=200px width=200px class="logo scale">
                    </figure>
                </div>
            </div>
            <div class="container-2">
                <div class="topnav" id="myTopnav">
                    <a href="../index.html" class="active a-button">HOME</a>
                    <div class="dropdown">
                        <button class="dropbtn">
                            ABOUT US&nbsp;
                            <i class="fa fa-caret-down"></i>
                        </button>
                        <div class="dropdown-content">
                            <a href="principals-message.html">Principal's Message</a>
                            <a href="directors-message.html">Director's Message</a>
                            <a href="patron.html">Patron Saint</a>
                            <a href="history.html">History</a>
                        </div>
                    </div>
                    <div class="dropdown">
                        <button class="dropbtn">
                            ACADEMICS&nbsp;
                            <i class="fa fa-caret-down"></i>
                        </button>
                        <div class="dropdown-content">
                            <a href="staff.html">Our Staff</a>
                            <a href="achievers.html">Our Achievers</a>
                            <!-- <a href="/html/leaders.html">Our House Leaders</a> -->
                        </div>
                    </div>
                    <div class="dropdown">
                        <button class="dropbtn">
                            EVENTS GALLERY&nbsp;
                            <i class="fa fa-caret-down"></i>
                        </button>
                        <div class="dropdown-content">
                            <a href="competitions-album-gallery.php">Competitions & Events</a>
                            <!-- <a href="sports-gallery-primary.html">Sports Activities</a> -->
                            <a href="celebrations-album-gallery.php">Celebrations</a>
                        </div>
                    </div>
                    <!-- <a href="html/campus.html" class="a-button">CAMPUS</a> -->
                    <a href="contact-us.html" class="a-button">CONTACT US</a>
                    <a href="javascript:void(0);" style="font-size: 20px" class="icon"
                        onclick="myFunction()">&#9776;</a>
                </div>
            </div>
        </nav>
    </header>
    <main class="main-content">
        <section class="gallery-section">
            <div class="gallery-section-container">
                <h2>SCHOOL ALBUMS GALLERY</h2>
                <article class="article"> <!--! FIRST ALBUM - CELEBRATIONS Album-->
                    <div class="gallery-title">
                        <h3 class="title">CELEBRATION ALBUM'S</h3>
                        <h3 class="date">2023 - 2024</h3>
                    </div>
                    <hr>
                    <div class="event-gallery">
                        <div class='column'>
                        <?php
                            include 'connect.php';
                            if(isset($_GET["page"])) { $page = $_GET["page"]; } else { $page=1; };
                            $start_from = ($page-1) * 12;
                            $sql = "SELECT * FROM stbhs_album WHERE status='process' AND category='competition' AND col_id='1' ORDER BY albumid DESC LIMIT $start_from, 12";
                            $rs_result = mysqli_query($con, $sql);
                        ?>
                        <?php
                            while ($row = mysqli_fetch_assoc($rs_result)) {
                                $aimage=$row['image'];
                                $aid=$row['albumid'];
                                $aname=$row['name'];
                                $astatus=$row['status'];
                                $category=$row['category'];
                        ?> 
                            <div class='image-container'>
                                <?php echo" <a href='photo-gallery.php?id=$aid'>"; ?>
                                <?php echo" <img src='../admin/acatch/$aimage' width='100%' height='100%' alt='Album cover' alt='$aname' data-aos='zoom-in-up' data-aos-once='true'>
                                    <div class='overlay'>
                                        <div class='overlay-text'><h3>$aname</h3></div>
                                    </div>
                                </a>";?>
                            </div>
                        <?php } ?>
                        </div>
                        <div class='column'>
                        <?php
                            include 'connect.php';
                            if(isset($_GET["page"])) { $page = $_GET["page"]; } else { $page=1; };
                            $start_from = ($page-1) * 12;
                            $sql = "SELECT * FROM stbhs_album WHERE status='process' AND category='competition' AND col_id='2' ORDER BY albumid DESC LIMIT $start_from, 12";
                            $rs_result = mysqli_query($con, $sql);
                            while ($row = mysqli_fetch_assoc($rs_result)) {
                                $aimage=$row['image'];
                                $aid=$row['albumid'];
                                $aname=$row['name'];
                                $astatus=$row['status'];
                                $category=$row['category'];
                        ?> 
                            <div class='image-container'>
                                <?php echo" <a href='photo-gallery.php?id=$aid'>"; ?>
                                <?php echo" <img src='../admin/acatch/$aimage' width='100%' height='100%' alt='Album cover' alt='$aname' data-aos='zoom-in-up' data-aos-once='true'>
                                    <div class='overlay'>
                                        <div class='overlay-text'><h3>$aname</h3></div>
                                    </div>
                                </a>";?>
                            </div>
                        <?php } ?>
                        </div>
                    </div>
                </article>
                <br>
                <br>
                <div align="center">
                <?php
                    $sql = "SELECT COUNT(name) FROM stbhs_album";
                    $rs_result = mysqli_query($con, $sql);
                    $row = mysqli_fetch_row($rs_result);
                    $total_records = $row[0];
                    $total_pages = ceil($total_records / 12);
                    for ($i=1; $i<=$total_pages; $i++) {
                        echo "<span class='navigations_items_span'>";
                        echo "<b>PAGE </b>";
                        echo "<a href='competitions-album-gallery.php?page=".$i."' class='navigation_item selected_navigation_item'>".$i."</a>";							
                        echo "</span>";
                    };
                ?>
            </div>
        </section>
    </main>
    <footer class="footer">
        <div class="footer-container">
            <div class="row">
                <div class="footer-col">
                    <h2>ST THOMAS BOYS' HIGH SCHOOL</h2>
                    <figure>
                        <img src="../img/stbhs emblem colour-01.png" class="scale" alt="" width=100px height=100px>
                    </figure>
                </div>
                <div class="footer-col">
                    <h4>Quick Links</h4>
                    <ul>
                        <li><a href="../index.html">Home</a></li>
                        <li><a href="https://www.gbshse.in" target="_blank">Goa Board</a></li>
                        <li><a href="https://www.goa.gov.in" target="_blank">Directorate of Education</a></li>
                        <!-- <li><a href="#">Fee Online Payment</a></li> -->
                        <li><a href="achievers.html">Achievements & Achievers</a></li>
                        <!-- <li><a href="#">STBHS Committees & Cells</a></li> -->
                    </ul>
                </div>
                <div class="footer-col">
                    <h4>Other Links</h4>
                    <ul>
                        <li><a href="patron.html">About Us</a></li>
                        <li><a href="co-curricular-gallery-primary.html">Events Gallery</a></li>
                        <li><a href="rules-regulations.html">Rules & Regulations</a></li>
                        <li><a href="contact-us.html">Contact us</a></li>
                    </ul>
                </div>
                
                <div class="footer-col">
                    <h4>Follow us on</h4>
                    <div class="social-links scale">
                        <a href="https://www.facebook.com/groups/1063578354592364/?ref=share&mibextid=NSMWBT"><i
                                class="fab fa-facebook-f scal"></i></a>
                        <a href="#"><i class="fab fa-whatsapp scal"></i></a>
                        <a href="#"><i class="fab fa-instagram scal"></i></a>
                    </div>
                </div>
                <div class="footer-col">
                    <p>
                        Developer : <a href="developer.html" class="unstyled-link">Haysten D'costa</a>
                        <br>haystend@gmail.com
                    </p>
                    <br>
                    <div class="social-links scale">
                        <a href="https://github.com/Haysten-D-costa/" target="_blank"><i class="fab fa-github scal"></i></a>
                        <a href="https://www.instagram.com/haysten_d_costa/" target="_blank"><i class="fab fa-instagram scal"></i></a>
                        <a href="https://www.linkedin.com/in/haysten-d-costa-625515252/" target="_blank"><i class="fab fa-linkedin-in scal"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <section class="copyright-section">
        <h4>COPYRIGHT &copy; &nbsp;&nbsp;&nbsp;&nbsp; 2024 St Thomas Boys' High School | <i>Haysten D'costa<i></h4>
    </section>
    
    <!-- java script file link -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script src="../script.js"></script>   
    <script>
        AOS.init();
    </script>
</body>
</html>