Gradient Pagination - MeggiTools

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient Pagination</title>
<style>
    body {
        font-family: 'Arial', sans-serif;
        background-color: #f0f0f0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }
    .gradient-pagination {
        display: flex;
        list-style-type: none;
        padding: 0;
        margin: 0;
        background: linear-gradient(45deg, #6a11cb, #2575fc);
        border-radius: 10px;
        overflow: hidden;
    }
    .gradient-pagination li {
        margin: 0;
    }
    .gradient-pagination a {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 20px;
        color: #fff;
        text-decoration: none;
        transition: background-color 0.3s ease, color 0.3s ease;
        position: relative;
        font-size: 1.2em;
    }
    .gradient-pagination a:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
    .gradient-pagination a.active {
        background-color: rgba(255, 255, 255, 0.3);
        color: #fff;
        pointer-events: none;
    }
</style>
</head>
<body>
<ul class="gradient-pagination">
    <li><a href="#" class="prev-page">Prev</a></li>
    <li><a href="#" class="page-number">1</a></li>
    <li><a href="#" class="page-number">2</a></li>
    <li><a href="#" class="page-number">3</a></li>
    <li><a href="#" class="page-number">4</a></li>
    <li><a href="#" class="page-number">5</a></li>
    <li><a href="#" class="next-page">Next</a></li>
</ul>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const pages = document.querySelectorAll('.gradient-pagination a.page-number');
        pages.forEach(page => {
            page.addEventListener('click', function(e) {
                e.preventDefault();
                pages.forEach(p => p.classList.remove('active'));
                this.classList.add('active');
            });
        });
        const prevPage = document.querySelector('.gradient-pagination a.prev-page');
        const nextPage = document.querySelector('.gradient-pagination a.next-page');
        const updatePagination = (direction) => {
            let activePage = document.querySelector('.gradient-pagination a.page-number.active');
            if (!activePage) return;
            let newPage;
            if (direction === 'prev') {
                newPage = activePage.parentElement.previousElementSibling?.querySelector('.page-number');
            } else if (direction === 'next') {
                newPage = activePage.parentElement.nextElementSibling?.querySelector('.page-number');
            }
            if (newPage) {
                activePage.classList.remove('active');
                newPage.classList.add('active');
            }
        };
        prevPage.addEventListener('click', function(e) {
            e.preventDefault();
            updatePagination('prev');
        });
        nextPage.addEventListener('click', function(e) {
            e.preventDefault();
            updatePagination('next');
        });
    });
</script>
</body>
</html>