index.html

<!DOCTYPE html>
<html lang="en">
<!--Thank you to the people at Barnical for keeping Barnical open-source!-->
<head>
    <meta charset="UTF-8">
    <title>techmaster2013's page</title>
    <link rel="icon" href="../normal.png" type="image/x-icon" />

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
    <!-- CSS -->
    <style>
        :root {
            --purple: rgb(123, 31, 162);
            --violet: rgb(103, 58, 183);
            --pink: rgb(244, 143, 177);
        }

        body {
            background-color: #191919;
            margin: 0px;
            overflow: auto;
            user-select: none;
            font-family: 'Ubuntu', medium;
            color: #F9F6EF;
            display: grid;
            place-content: center;
        }

        canvas {
            width: 100%;
            height: 100%;
        }

        h1 {
            color: white;
            font-family: "Ubuntu", sans-serif;
            font-size: clamp(2em, 2vw, 4em);
            font-weight: 400;
            margin: 0px;
            padding: 150px;
            text-align: center;
        }

        h1>.magic {
            display: inline-block;
            position: relative;
        }

        h1>.magic>.magic-text {
            background: linear-gradient(to right, var(--purple), var(--violet), var(--pink), var(--purple));
            background-size: 200%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            white-space: nowrap;
            animation: background-pan 3s linear infinite;
        }

        @keyframes background-pan {
            from {
                background-position: 0% center;
            }

            to {
                background-position: -200% center;
            }
        }

        .button-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }

        .button-container button {
            flex-basis: calc(33.33% - 10px);
            margin: 5px;
            padding: 10px;
            border: none;
            border-radius: 0;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            font-size: 15px;
            box-shadow: 0px 0px 5px rgba(84, 78, 78, 0.8);
            background-color: #242424;
            font-weight: normal;
            color: #7d7d7d;
            width: max(15vh, 35vh);
            text-align: center;
            transition: transform 0.2s;
        }

        .button-container button:active {
            transform: scale(0.95);
        }

        @media (max-width: 768px) {
            .button-container button {
                flex-basis: calc(50% - 10px);
            }
        }

        @media (max-width: 480px) {
            .button-container button {
                flex-basis: calc(100% - 10px);
            }
        }

        @media (min-width: 1920px) {
            .button-container button {
                flex-basis: calc(20% - 10px);
            }
        }

        @media (min-width: 3840px) {
            .button-container button {
                flex-basis: calc(15% - 10px);
            }
        }

        #game-search {
            width: 60vh;
            padding: 10px;
            font-size: 15px;
            background-color: #242424;
            border: none;
            color: #7d7d7d;
            box-shadow: 0px 0px 5px rgba(84, 78, 78, 0.8);
            margin: 1vh auto 3vh auto;
            display: block;
        }

        #game-search::placeholder {
            color: #555;
        }
    </style>
</head>

<body>

    <h1>
        <span class="magic">
            <span class="magic-text">techmaster2013's landing page</span>
        </span>
    </h1>

    <!-- Search bar -->
    <input type="text" id="game-search" placeholder="Search my projects..." />

    <!-- Buttons -->
    <div class="button-container">
        <button data-action="action1">GamePlaza</button>
        <button data-action="action2">B-rn1c-1</button>
        <button data-action="action3">coreHZ</button>
        <button data-action="action4">nexOS-html</button>
        <button data-action="action5">mmg</button>
        <button data-action="action6">nexOS-debian</button>
        <button data-action="action7">nexSite</button>
        <button data-action="action8">GamePlaza Go</button>
        <button data-action="action9">VibeBrowse</button>
        <button data-action="action10">XOdium</button>
    </div>

    <!-- JS -->
    <script>
        const buttons = document.querySelectorAll(".button-container button");
        const searchInput = document.getElementById("game-search");
        const buttonContainer = document.querySelector(".button-container");
        const allButtons = Array.from(buttonContainer.querySelectorAll("button"));

        function sortButtons(buttons) {
            return buttons.sort((a, b) => a.textContent.trim().localeCompare(b.textContent.trim()));
        }

        searchInput.addEventListener("input", () => {
            const searchTerm = searchInput.value.toLowerCase();
            const filteredButtons = allButtons.filter(btn => btn.textContent.toLowerCase().includes(searchTerm));
            buttonContainer.innerHTML = "";
            sortButtons(filteredButtons).forEach(btn => buttonContainer.appendChild(btn));
        });

        // Initial alphabetical sorting
        buttonContainer.innerHTML = "";
        sortButtons(allButtons).forEach(btn => buttonContainer.appendChild(btn));

        function openDictionary(dictionaryURL) {
            window.location.href = dictionaryURL;
        }

        buttons.forEach((button) => {
            button.addEventListener("click", function () {
                const action = button.dataset.action;
                switch (action) {
                    case "action1": openDictionary("/GamePlaza/site/index.html"); break;
                    case "action2": openDictionary("/b-rn1c-1/GameSite/index.html"); break;
                    case "action3": openDictionary("/coreHZ/"); break;
                    case "action4": openDictionary("/nexOS/"); break;
                    case "action5": openDictionary("/mmg/"); break;
                    case "action6": openDictionary("/nexOS-debian/"); break;
                    case "action7": openDictionary("/nexSite/"); break;
                    case "action8": openDictionary("/GamePlaza-Go/"); break;
                    case "action9": openDictionary("https://github.com/techmaster2013/VibeBrowse"); break;
                    case "action10": openDictionary("https://github.com/techmaster2013/XOdium"); break;
                default: break;
                }
            });
        });
    </script>
<footer>
    <a href="https://github.com/xxpwnxxx420lord">Original by Syntaxical</a>
</footer>
</body>
</html>