scc24php/.hta_slug/_home.php

<?php
    require('.hta_config/env.php');
    require('./.hta_header.php');
    try {
        $conn = new PDO("mysql:host=$mariaServer;dbname=$mariaDb", $mariaUser, $mariaPass);
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        // $stmt = $conn->prepare("SELECT * FROM `scc22` WHERE `type` = 'notice'");
        $stmt = $conn->prepare("SELECT * FROM `scc24` WHERE `type` = 'notice' ORDER BY `date_created` DESC LIMIT 20");
        $stmt->execute();
        $notices = $stmt->fetchAll(PDO::FETCH_ASSOC);

        $stmt = $conn->prepare("SELECT * FROM `scc24` WHERE `position` = 'important' ORDER BY `date_created` DESC");
        $stmt->execute();
        $importants = $stmt->fetchAll(PDO::FETCH_ASSOC);

        $stmt = $conn->prepare("SELECT * FROM `scc24` WHERE `type` = 'events' ORDER BY `date_created` DESC");
        
        $stmt->execute();
        $events = $stmt->fetchAll(PDO::FETCH_ASSOC);
    } catch (PDOException $e) {
        $in_page_message = "<p class='text-danger'>Error: " . $e->getMessage() . "</p>";
    }
?> 
<div style="width: 100%;height: 100%;">
    <img style="width: 100%;height: 100%;" src="/assets/adminstration/clg.jpg" alt="clg">

</div>

<main class="container my-5 ">
    <div class="container row ">
        <div class=" fw-normal col-lg-9 col-12">
            <!-- Main Heading -->
            <h3 class="mb-2 text-center" style="color: #6b6245;">Vision of The College <hr></h3>
            <p class="text-center mb-2">Character Formation through Knowledge and Value-based Education for
                Transformation
                of the Society and the Nation</p>

            <!-- Mission Section -->
            <h3 class="my-4 text-center" style="color: #6b6245;">Our Mission <hr></h5>
                <div class="mt-3">
                    <p style="text-align: justify;">
                        <b>a)</b> To suit the above 'Vision', the 'Mission' of the College is to provide balanced,
                        value-based and knowledge-based education informed by latest technology, with a view to
                        instilling
                        self-confidence among the students, in order to turn them into sensitive, dedicated and
                        disciplined
                        citizens who will display a high intellectual calibre, together with emotional balance and
                        social
                        commitment and particularly at helping the students with backward social and economic
                        backgrounds
                        living around the institution.
                    </p>
                    <p style="text-align: justify;">
                        <b>b)</b> The college aims at moulding and shaping the students as good citizens with qualities
                        of
                        mind and heart showing commitment towards the nation as well as the community in which they
                        live,
                        extending the role of governance and leadership in discharging the different activities to its
                        stakeholders and inculcating innovative practices. With such orientation, students are expected
                        to
                        get involved in societal transformation.
                    </p>
                    <p style="text-align: justify;">
                        <b>c)</b> Needless to say that since our College was established to serve the higher education
                        needs
                        of the hapless youth, who had to bear the toll of Partition, we have always strived to spread
                        education among this section of the society. Besides, we have to cater to a huge number of
                        students
                        coming from the First Generation Literate families. Thus, our Vision and Mission do not come
                        from
                        any ivory tower but from the 'real' situation around us.
                    </p>
                </div>
        </div>
        <div class="col-lg-3  col-12 gap-3">
            <div class="card" style="width: 250px; border: 1px solid #ccc; margin-bottom: 10px;">
                <div class="card-header fw-bold" style="color: #402517; background-color: #ffddcc">Notice</div>
                <div id="scrollable" class="content list-group list-group-flush" style="height: 200px; overflow-y: auto;">
                    <?php
                        foreach ($notices as $notice) {
                            echo '<a id="" href="/notice/'.$notice['slug'].'.html" class="list-group-item list-group-item-action" style="color: #6b6245;">'.$notice['title'].'</a>';
                        }
                    ?>
                </div>
                <div class="text-center" style="background-color: #ffddcc; padding: 5px;">
                    <a href="/notice?type=notice" class="w-100" style="color: #402517; text-decoration: none;">View All</a>
                </div>
            </div>
            <div class="card" style="width: 250px; border: 1px solid #ccc; margin-bottom: 10px;">
                <div class="card-header fw-bold" style="color: #402517; background-color: #ffddcc">Important Links</div>
                <div class="list-group list-group-flush" style="height: 200px; overflow-y: auto;">
                    <?php
                        foreach ($importants as $important) {
                            echo '<a href="/notice/'.$important['slug'].'.html" class="list-group-item list-group-item-action" style="color: #6b6245;">'.$important['title'].'</a>';
                        }
                    ?>
                </div>
            </div>
            <div class="card" style="width: 250px; border: 1px solid #ccc;">
                <div class="card-header fw-bold" style="color: #402517; background-color: #ffddcc">Events</div>
                <div class="list-group list-group-flush" style="height: 200px; overflow-y: auto;">
                    <?php
                        foreach ($events as $event) {
                            echo '<a href="/notice/'.$event['slug'].'.html" class="list-group-item list-group-item-action" style="color: #6b6245;">'.$event['title'].'</a>';
                        }
                    ?>
                </div>
            </div>
        </div>
    </div>
</main>
<script>
    const scrollableContent = document.querySelector("#scrollable .content");
    let scrollInterval;

    function startAutoScroll() {
      scrollInterval = setInterval(() => {
        scrollable.scrollTop += 1; // Adjust the increment as needed
        if (scrollable.scrollTop + scrollable.clientHeight >= scrollable.scrollHeight) {
          scrollable.scrollTop = 0; // Reset to the top if reached the end
        }
      }, 20); // Adjust the speed in milliseconds
    }

    function stopAutoScroll() {
      clearInterval(scrollInterval);
    }

    // Start scrolling when the page loads
    startAutoScroll();

    // Optionally, stop scrolling on mouse hover
    scrollableContent.addEventListener("mouseover", stopAutoScroll);
    scrollableContent.addEventListener("mouseout", startAutoScroll);
  </script>
   <style>
    #scrollable {

      overflow: scroll; /* Enable scrolling */
      border: 1px solid #ccc;
    }

    /* Hide scrollbar for modern browsers */
    #scrollable::-webkit-scrollbar {
      display: none; /* For Chrome, Safari, and Edge */
    }

    #scrollable {
      scrollbar-width: none; /* For Firefox */
      -ms-overflow-style: none; /* For Internet Explorer and Edge */
    }
  </style>