<!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 {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 20px;
            white-space: nowrap;
        }
        .category {
            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 {
            transform: scale(1.1);
        }
        .category.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 {
            display: none;
        }
        .fade-out {
            opacity: 0;
        }
        .footer {
            display: flex;
            justify-content: space-between;
            width: 100%;
            max-width: 900px;
            margin-top: 20px;
            font-size: 1.5em;
            color: #d1d5db;
        }
        .footer-left,
        .footer-right {
            display: flex;
            gap: 30px;
        }
        .footer-item {
            transition: transform 0.3s;
        }
        .footer-left div:hover,
        .footer-right div:hover {
            cursor: pointer;
        }
        .footer-item:hover {
            transform: scale(1.1);
        }
        .selected {
            font-weight: bold;
        }
        .lorem-container {
            padding: 10px 20px;
            color: #ffffff;
            opacity: 0;
            transition: opacity 0.5s ease;
            max-width: 800px;
            text-align: center;
        }
        .lorem-container.visible {
            opacity: 1;
        }
    </style>
</head>
<body>

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

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

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

        <div class="lorem-container hidden" id="lorem-container">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae velit ex.</p>
            <p>Mauris dapibus risus quis suscipit vulputate. Egestas in fermentum omg.</p>
        </div>

        <div class="footer">
            <div class="footer-left">
                <div onclick="toggleMode(this, 'games')" class="footer-item">games</div>
                <div onclick="toggleMode(this, 'apps')" class="footer-item">apps</div>
            </div>
            <div class="footer-right">
                <div>mirrors</div>
                <div>changelog</div>
                <div>source</div>
                <div onclick="toggleMode(this, 'settings')" class="footer-item">settings</div>
            </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, mode) {
            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('fade-out');
            setTimeout(() => {
                imagesDiv.innerHTML = imagesData[category].map(src => 
                    `<div class="image-box"><img src="${src}" alt="${category}"></div>`
                ).join('');
                container.classList.remove('fade-out');
            }, 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');
            const container = document.getElementById('images-container');
            const loremContainer = document.getElementById('lorem-container');

            container.classList.add('fade-out');
            loremContainer.classList.remove('visible');
            
            setTimeout(() => {
                if (mode === 'games') {
                    gameCategories.classList.remove('hidden');
                    appCategories.classList.add('hidden');
                    loremContainer.classList.add('hidden');
                    container.classList.remove('hidden');
                    showCategory(document.querySelector('#game-categories .category'), 'popular', mode);
                } else if (mode === 'apps') {
                    appCategories.classList.remove('hidden');
                    gameCategories.classList.add('hidden');
                    loremContainer.classList.add('hidden');
                    container.classList.remove('hidden');
                    showCategory(document.querySelector('#app-categories .category'), 'social', mode);
                } else if (mode === 'settings') {
                    gameCategories.classList.add('hidden');
                    appCategories.classList.add('hidden');
                    container.classList.add('hidden');
                    loremContainer.classList.remove('hidden');
                    setTimeout(() => loremContainer.classList.add('visible'), 10);
                }
                container.classList.remove('fade-out');
            }, 500);
        }

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

</body>
</html>