Stylish Pagination - MeggiTools

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylish Pagination</title>
<style>
    body {
        font-family: 'Arial', sans-serif;
        background-color: #f0f0f0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }
    .pagination {
        display: flex;
        list-style-type: none;
        padding: 0;
        margin: 0;
        background: #fff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        overflow: hidden;
    }
    .pagination li {
        margin: 0;
    }
    .pagination a {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 20px;
        color: #333;
        text-decoration: none;
        transition: background-color 0.3s ease, color 0.3s ease;
        position: relative;
        font-size: 1.2em;
    }
    .pagination a:hover {
        background-color: #007bff;
        color: #fff;
    }
    .pagination a:before {
        content: attr(data-emoji);
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 1.5em;
        opacity: 0;
        transition: opacity 0.3s ease, top 0.3s ease;
    }
    .pagination a:hover:before {
        top: -40px;
        opacity: 1;
    }
    .pagination a.active {
        background-color: #007bff;
        color: #fff;
        pointer-events: none;
    }
    .pagination a.active:before {
        top: -40px;
        opacity: 1;
    }
    .pagination a:focus {
        outline: none;
    }
    .pagination a:focus:after {
        content: "";
        position: absolute;
        top: -5px;
        bottom: -5px;
        left: -5px;
        right: -5px;
        border: 2px solid #007bff;
        border-radius: 5px;
    }
</style>
</head>
<body>
<ul class="pagination">
    <li><a href="#" data-emoji="⬅️" class="prev-page">Prev</a></li>
    <li><a href="#" data-emoji="1️⃣" class="page-number">1</a></li>
    <li><a href="#" data-emoji="2️⃣" class="page-number">2</a></li>
    <li><a href="#" data-emoji="3️⃣" class="page-number">3</a></li>
    <li><a href="#" data-emoji="4️⃣" class="page-number">4</a></li>
    <li><a href="#" data-emoji="5️⃣" class="page-number">5</a></li>
    <li><a href="#" data-emoji="➡️" class="next-page">Next</a></li>
</ul>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const pages = document.querySelectorAll('.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('.pagination a.prev-page');
        const nextPage = document.querySelector('.pagination a.next-page');
        const updatePagination = (direction) => {
            let activePage = document.querySelector('.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>