<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>th30games</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(to right, #0a1a3d, #162a52);
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
        }
        .content {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            max-width: 1200px;
        }
        .categories,
        .footer {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 20px;
            white-space: nowrap;
        }
        .category,
        .footer-item {
            font-size: 1.5em;
            cursor: pointer;
            transition: transform 0.3s;
        }
        .separator-btn {
            background: none;
            border: none;
            color: #ffffff;
            cursor: default;
            font-size: 1.5em;
            padding: 0 5px;
        }
        .category:hover,
        .footer-item:hover {
            transform: scale(1.1);
        }
        .category.selected,
        .footer-item.selected {
            font-weight: bold;
        }
        .images-container {
            overflow-x: auto;
            white-space: nowrap;
            width: 100%;
            padding: 10px 0 20px;
            transition: opacity 0.5s ease;
        }
        .images {
            display: grid;
            grid-template-columns: repeat(8, 180px);
            grid-template-rows: repeat(2, 180px);
            gap: 20px;
            width: max-content;
            justify-content: center;
            margin: 0 auto;
        }
        .image-box {
            width: 180px;
            height: 180px;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2);
            transition: transform 0.3s;
        }
        .image-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .image-box:hover {
            transform: scale(1.05);
        }
        .hidden {
            opacity: 0;
        }
    </style>
</head>
<body>

    <div class="content">
        <div class="categories" id="game-categories">
            <div class="category" onclick="showCategory(this, 'popular')">popular</div>
            <div class="category" onclick="showCategory(this, 'new')">new</div>
            <button class="separator-btn" disabled>|</button>
            <div class="category" onclick="showCategory(this, 'sports')">sports</div>
            <div class="category" onclick="showCategory(this, 'skill')">skill</div>
            <div class="category" onclick="showCategory(this, 'logic')">logic</div>
            <div class="category" onclick="showCategory(this, 'moto')">moto</div>
            <div class="category" onclick="showCategory(this, 'running')">running</div>
            <div class="category" onclick="showCategory(this, 'adventure')">adventure</div>
            <div class="category" onclick="showCategory(this, 'stickman')">stickman</div>
        </div>

        <div class="categories hidden" id="app-categories">
            <div class="category" onclick="showCategory(this, 'social')">social</div>
            <div class="category" onclick="showCategory(this, 'productivity')">productivity</div>
            <button class="separator-btn" disabled>|</button>
            <div class="category" onclick="showCategory(this, 'entertainment')">entertainment</div>
            <div class="category" onclick="showCategory(this, 'tools')">tools</div>
            <div class="category" onclick="showCategory(this, 'lifestyle')">lifestyle</div>
        </div>

        <div class="images-container" id="images-container">
            <div class="images" id="images">
                <!-- Images will be dynamically inserted here -->
            </div>
        </div>

        <div class="footer">
            <div class="footer-item" onclick="toggleMode(this, 'games')">games</div>
            <div class="footer-item" onclick="toggleMode(this, 'apps')">apps</div>
        </div>
    </div>

    <script>
        const imagesData = {
            popular: [
                'https://placehold.co/180x180?text=Popular+1',
                'https://placehold.co/180x180?text=Popular+2',
                'https://placehold.co/180x180?text=Popular+3',
                'https://placehold.co/180x180?text=Popular+4',
                'https://placehold.co/180x180?text=Popular+5',
                'https://placehold.co/180x180?text=Popular+6',
                'https://placehold.co/180x180?text=Popular+7',
                'https://placehold.co/180x180?text=Popular+8',
                'https://placehold.co/180x180?text=Popular+9',
                'https://placehold.co/180x180?text=Popular+10',
                'https://placehold.co/180x180?text=Popular+11',
                'https://placehold.co/180x180?text=Popular+12',
                'https://placehold.co/180x180?text=Popular+13',
                'https://placehold.co/180x180?text=Popular+14',
                'https://placehold.co/180x180?text=Popular+15',
                'https://placehold.co/180x180?text=Popular+16'
            ],
            new: [
                'https://placehold.co/180x180?text=New+1',
                'https://placehold.co/180x180?text=New+2',
                'https://placehold.co/180x180?text=New+3',
                'https://placehold.co/180x180?text=New+4',
                'https://placehold.co/180x180?text=New+5',
                'https://placehold.co/180x180?text=New+6',
                'https://placehold.co/180x180?text=New+7',
                'https://placehold.co/180x180?text=New+8',
                'https://placehold.co/180x180?text=New+9',
                'https://placehold.co/180x180?text=New+10',
                'https://placehold.co/180x180?text=New+11',
                'https://placehold.co/180x180?text=New+12',
                'https://placehold.co/180x180?text=New+13',
                'https://placehold.co/180x180?text=New+14',
                'https://placehold.co/180x180?text=New+15',
                'https://placehold.co/180x180?text=New+16'
            ],
            sports: [
                'https://placehold.co/180x180?text=Sports+1',
                'https://placehold.co/180x180?text=Sports+2',
                'https://placehold.co/180x180?text=Sports+3',
                'https://placehold.co/180x180?text=Sports+4',
                'https://placehold.co/180x180?text=Sports+5',
                'https://placehold.co/180x180?text=Sports+6',
                'https://placehold.co/180x180?text=Sports+7',
                'https://placehold.co/180x180?text=Sports+8',
                'https://placehold.co/180x180?text=Sports+9',
                'https://placehold.co/180x180?text=Sports+10',
                'https://placehold.co/180x180?text=Sports+11',
                'https://placehold.co/180x180?text=Sports+12',
                'https://placehold.co/180x180?text=Sports+13',
                'https://placehold.co/180x180?text=Sports+14',
                'https://placehold.co/180x180?text=Sports+15',
                'https://placehold.co/180x180?text=Sports+16'
            ],
            skill: [
                'https://placehold.co/180x180?text=Skill+1',
                'https://placehold.co/180x180?text=Skill+2',
                'https://placehold.co/180x180?text=Skill+3',
                'https://placehold.co/180x180?text=Skill+4',
                'https://placehold.co/180x180?text=Skill+5',
                'https://placehold.co/180x180?text=Skill+6',
                'https://placehold.co/180x180?text=Skill+7',
                'https://placehold.co/180x180?text=Skill+8',
                'https://placehold.co/180x180?text=Skill+9',
                'https://placehold.co/180x180?text=Skill+10',
                'https://placehold.co/180x180?text=Skill+11',
                'https://placehold.co/180x180?text=Skill+12',
                'https://placehold.co/180x180?text=Skill+13',
                'https://placehold.co/180x180?text=Skill+14',
                'https://placehold.co/180x180?text=Skill+15',
                'https://placehold.co/180x180?text=Skill+16'
            ],
            logic: [
                'https://placehold.co/180x180?text=Logic+1',
                'https://placehold.co/180x180?text=Logic+2',
                'https://placehold.co/180x180?text=Logic+3',
                'https://placehold.co/180x180?text=Logic+4',
                'https://placehold.co/180x180?text=Logic+5',
                'https://placehold.co/180x180?text=Logic+6',
                'https://placehold.co/180x180?text=Logic+7',
                'https://placehold.co/180x180?text=Logic+8',
                'https://placehold.co/180x180?text=Logic+9',
                'https://placehold.co/180x180?text=Logic+10',
                'https://placehold.co/180x180?text=Logic+11',
                'https://placehold.co/180x180?text=Logic+12',
                'https://placehold.co/180x180?text=Logic+13',
                'https://placehold.co/180x180?text=Logic+14',
                'https://placehold.co/180x180?text=Logic+15',
                'https://placehold.co/180x180?text=Logic+16'
            ],
            moto: [
                'https://placehold.co/180x180?text=Moto+1',
                'https://placehold.co/180x180?text=Moto+2',
                'https://placehold.co/180x180?text=Moto+3',
                'https://placehold.co/180x180?text=Moto+4',
                'https://placehold.co/180x180?text=Moto+5',
                'https://placehold.co/180x180?text=Moto+6',
                'https://placehold.co/180x180?text=Moto+7',
                'https://placehold.co/180x180?text=Moto+8',
                'https://placehold.co/180x180?text=Moto+9',
                'https://placehold.co/180x180?text=Moto+10',
                'https://placehold.co/180x180?text=Moto+11',
                'https://placehold.co/180x180?text=Moto+12',
                'https://placehold.co/180x180?text=Moto+13',
                'https://placehold.co/180x180?text=Moto+14',
                'https://placehold.co/180x180?text=Moto+15',
                'https://placehold.co/180x180?text=Moto+16'
            ],
            running: [
                'https://placehold.co/180x180?text=Running+1',
                'https://placehold.co/180x180?text=Running+2',
                'https://placehold.co/180x180?text=Running+3',
                'https://placehold.co/180x180?text=Running+4',
                'https://placehold.co/180x180?text=Running+5',
                'https://placehold.co/180x180?text=Running+6',
                'https://placehold.co/180x180?text=Running+7',
                'https://placehold.co/180x180?text=Running+8',
                'https://placehold.co/180x180?text=Running+9',
                'https://placehold.co/180x180?text=Running+10',
                'https://placehold.co/180x180?text=Running+11',
                'https://placehold.co/180x180?text=Running+12',
                'https://placehold.co/180x180?text=Running+13',
                'https://placehold.co/180x180?text=Running+14',
                'https://placehold.co/180x180?text=Running+15',
                'https://placehold.co/180x180?text=Running+16'
            ],
            adventure: [
                'https://placehold.co/180x180?text=Adventure+1',
                'https://placehold.co/180x180?text=Adventure+2',
                'https://placehold.co/180x180?text=Adventure+3',
                'https://placehold.co/180x180?text=Adventure+4',
                'https://placehold.co/180x180?text=Adventure+5',
                'https://placehold.co/180x180?text=Adventure+6',
                'https://placehold.co/180x180?text=Adventure+7',
                'https://placehold.co/180x180?text=Adventure+8',
                'https://placehold.co/180x180?text=Adventure+9',
                'https://placehold.co/180x180?text=Adventure+10',
                'https://placehold.co/180x180?text=Adventure+11',
                'https://placehold.co/180x180?text=Adventure+12',
                'https://placehold.co/180x180?text=Adventure+13',
                'https://placehold.co/180x180?text=Adventure+14',
                'https://placehold.co/180x180?text=Adventure+15',
                'https://placehold.co/180x180?text=Adventure+16'
            ],
            stickman: [
                'https://placehold.co/180x180?text=Stickman+1',
                'https://placehold.co/180x180?text=Stickman+2',
                'https://placehold.co/180x180?text=Stickman+3',
                'https://placehold.co/180x180?text=Stickman+4',
                'https://placehold.co/180x180?text=Stickman+5',
                'https://placehold.co/180x180?text=Stickman+6',
                'https://placehold.co/180x180?text=Stickman+7',
                'https://placehold.co/180x180?text=Stickman+8',
                'https://placehold.co/180x180?text=Stickman+9',
                'https://placehold.co/180x180?text=Stickman+10',
                'https://placehold.co/180x180?text=Stickman+11',
                'https://placehold.co/180x180?text=Stickman+12',
                'https://placehold.co/180x180?text=Stickman+13',
                'https://placehold.co/180x180?text=Stickman+14',
                'https://placehold.co/180x180?text=Stickman+15',
                'https://placehold.co/180x180?text=Stickman+16'
            ],
            social: [
                'https://placehold.co/180x180?text=Social+1',
                'https://placehold.co/180x180?text=Social+2',
                'https://placehold.co/180x180?text=Social+3',
                'https://placehold.co/180x180?text=Social+4',
                'https://placehold.co/180x180?text=Social+5',
                'https://placehold.co/180x180?text=Social+6',
                'https://placehold.co/180x180?text=Social+7',
                'https://placehold.co/180x180?text=Social+8',
                'https://placehold.co/180x180?text=Social+9',
                'https://placehold.co/180x180?text=Social+10',
                'https://placehold.co/180x180?text=Social+11',
                'https://placehold.co/180x180?text=Social+12',
                'https://placehold.co/180x180?text=Social+13',
                'https://placehold.co/180x180?text=Social+14',
                'https://placehold.co/180x180?text=Social+15',
                'https://placehold.co/180x180?text=Social+16'
            ],
            productivity: [
                'https://placehold.co/180x180?text=Productivity+1',
                'https://placehold.co/180x180?text=Productivity+2',
                'https://placehold.co/180x180?text=Productivity+3',
                'https://placehold.co/180x180?text=Productivity+4',
                'https://placehold.co/180x180?text=Productivity+5',
                'https://placehold.co/180x180?text=Productivity+6',
                'https://placehold.co/180x180?text=Productivity+7',
                'https://placehold.co/180x180?text=Productivity+8',
                'https://placehold.co/180x180?text=Productivity+9',
                'https://placehold.co/180x180?text=Productivity+10',
                'https://placehold.co/180x180?text=Productivity+11',
                'https://placehold.co/180x180?text=Productivity+12',
                'https://placehold.co/180x180?text=Productivity+13',
                'https://placehold.co/180x180?text=Productivity+14',
                'https://placehold.co/180x180?text=Productivity+15',
                'https://placehold.co/180x180?text=Productivity+16'
            ],
            entertainment: [
                'https://placehold.co/180x180?text=Entertainment+1',
                'https://placehold.co/180x180?text=Entertainment+2',
                'https://placehold.co/180x180?text=Entertainment+3',
                'https://placehold.co/180x180?text=Entertainment+4',
                'https://placehold.co/180x180?text=Entertainment+5',
                'https://placehold.co/180x180?text=Entertainment+6',
                'https://placehold.co/180x180?text=Entertainment+7',
                'https://placehold.co/180x180?text=Entertainment+8',
                'https://placehold.co/180x180?text=Entertainment+9',
                'https://placehold.co/180x180?text=Entertainment+10',
                'https://placehold.co/180x180?text=Entertainment+11',
                'https://placehold.co/180x180?text=Entertainment+12',
                'https://placehold.co/180x180?text=Entertainment+13',
                'https://placehold.co/180x180?text=Entertainment+14',
                'https://placehold.co/180x180?text=Entertainment+15',
                'https://placehold.co/180x180?text=Entertainment+16'
            ],
            tools: [
                'https://placehold.co/180x180?text=Tools+1',
                'https://placehold.co/180x180?text=Tools+2',
                'https://placehold.co/180x180?text=Tools+3',
                'https://placehold.co/180x180?text=Tools+4',
                'https://placehold.co/180x180?text=Tools+5',
                'https://placehold.co/180x180?text=Tools+6',
                'https://placehold.co/180x180?text=Tools+7',
                'https://placehold.co/180x180?text=Tools+8',
                'https://placehold.co/180x180?text=Tools+9',
                'https://placehold.co/180x180?text=Tools+10',
                'https://placehold.co/180x180?text=Tools+11',
                'https://placehold.co/180x180?text=Tools+12',
                'https://placehold.co/180x180?text=Tools+13',
                'https://placehold.co/180x180?text=Tools+14',
                'https://placehold.co/180x180?text=Tools+15',
                'https://placehold.co/180x180?text=Tools+16'
            ],
            lifestyle: [
                'https://placehold.co/180x180?text=Lifestyle+1',
                'https://placehold.co/180x180?text=Lifestyle+2',
                'https://placehold.co/180x180?text=Lifestyle+3',
                'https://placehold.co/180x180?text=Lifestyle+4',
                'https://placehold.co/180x180?text=Lifestyle+5',
                'https://placehold.co/180x180?text=Lifestyle+6',
                'https://placehold.co/180x180?text=Lifestyle+7',
                'https://placehold.co/180x180?text=Lifestyle+8',
                'https://placehold.co/180x180?text=Lifestyle+9',
                'https://placehold.co/180x180?text=Lifestyle+10',
                'https://placehold.co/180x180?text=Lifestyle+11',
                'https://placehold.co/180x180?text=Lifestyle+12',
                'https://placehold.co/180x180?text=Lifestyle+13',
                'https://placehold.co/180x180?text=Lifestyle+14',
                'https://placehold.co/180x180?text=Lifestyle+15',
                'https://placehold.co/180x180?text=Lifestyle+16'
            ]
        };

        function showCategory(element, category) {
            const container = document.getElementById('images-container');
            const imagesDiv = document.getElementById('images');
            const categories = element.parentNode.querySelectorAll('.category');
            categories.forEach(cat => cat.classList.remove('selected'));
            element.classList.add('selected');
            
            container.classList.add('hidden');
            setTimeout(() => {
                imagesDiv.innerHTML = imagesData[category].map(src => 
                    `<div class="image-box"><img src="${src}" alt="${category}"></div>`
                ).join('');
                container.classList.remove('hidden');
            }, 500);
        }

        function toggleMode(element, mode) {
            const footerItems = document.querySelectorAll('.footer-item');
            footerItems.forEach(item => item.classList.remove('selected'));

            element.classList.add('selected');

            const gameCategories = document.getElementById('game-categories');
            const appCategories = document.getElementById('app-categories');

            if (mode === 'games') {
                gameCategories.classList.remove('hidden');
                appCategories.classList.add('hidden');
                showCategory(document.querySelector('#game-categories .category'), 'popular');
            } else {
                appCategories.classList.remove('hidden');
                gameCategories.classList.add('hidden');
                showCategory(document.querySelector('#app-categories .category'), 'social');
            }
        }

        // Initialize with the first mode and category
        document.addEventListener('DOMContentLoaded', () => {
            toggleMode(document.querySelector('.footer-item'), 'games');
        });
    </script>

</body>
</html>