<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <title>FeinShop x 2025</title>
    <script>
        function switchLanguage(language) {
            const translations = {
                "en": {
                    "header_about": "About",
                    "header_features": "Features",
                    "header_login": "Login",
                    "main_title": "Hello, This Is FeinShop",
                    "main_subtitle": "The Best Anticheat",
                    "main_description": "The Anticheat Worth",
                    "main_button": "View The Features",
                    "footer_title": "Copyrights FeinShop - 2025"
                },
                "de": {
                    "header_about": "Über uns",
                    "header_features": "Eigenschaften",
                    "header_login": "Anmelden",
                    "main_title": "Hallo, Das ist FeinShop",
                    "main_subtitle": "Der Beste Anticheat",
                    "main_description": "Der Anticheat, der es wert ist",
                    "main_button": "Die Funktionen anzeigen",
                    "footer_title": "Urheberrecht FeinShop - 2025"
                }
            };

            document.querySelector('.navigation a[href="#main"]').textContent = translations[language].header_about;
            document.querySelector('.navigation a[href="#features"]').textContent = translations[language].header_features;
            document.querySelector('.navigation a[href="https://127.0.0.1/src/process-oauth.php"]').textContent = translations[language].header_login;
            document.querySelector('.main h2').innerHTML = `${translations[language].main_title}<br><span>${translations[language].main_subtitle}</span>`;
            document.querySelector('.main h3').textContent = translations[language].main_description;
            document.querySelector('.main-btn').textContent = translations[language].main_button;
            document.querySelector('.footer-title').innerHTML = translations[language].footer_title;
        }
    </script>
</head>
<body>
    <header>
        <a href="#" class="logo">FeinShop</a>
        <nav class="navigation">
            <a href="#main">About</a>
            <a href="#features">Team</a>
            <a href="https://127.0.0.1/src/process-oauth.php">Login</a>
        </nav>
        <div>
            <button onclick="switchLanguage('en')">English</button>
            <button onclick="switchLanguage('de')">Deutsch</button>
        </div>
    </header>

    <section class="main" id="main">
        <div>
            <h2>Hello, This Is FeinShop<br><span>The Best Anticheat</span></h2>
            <h3>The Anticheat Worth</h3>
            <a href="#features" class="main-btn">View The Features</a>
            <div class="accounts">
                <a href="https://discord.gg/feinshop"><i class="fa-brands fa-discord"></i></a>
            </div>
        </div>
    </section>

    <section class="cards" id="features">
        <h2 class="title">Team</h2>
        <div class="content">
            <div class="card">
                <div class="info">
                    <h3>Owner</h3>
                    <h3>@slevash.wtf</h3>
                </div>
            </div>
            <div class="card">
                <div class="info">
                <h3>OWNER</h3>
                <h3>@dizzyeywa</h3>
                </div>
            </div>
            <div class="card">
                <div class="info">
                <h3>MANAGER</h3>
                <h3>@iliaslafre</h3>
                </div>
            </div>
            <div class="card">
                <div class="info">
                <h3>MANAGER</h3>
                <h3>@schoko._.</h3>
                </div>
            </div>
        </div>
    </section>

    <footer class="footer">
         <p class="footer-title">Copyrights <span>FeinShop - 2025</span></p>
         <div class="accounts">
            <a href="https://discord.gg/feinshop"><i class="fa-brands fa-discord"></i></a>
        </div>
    </footer>
</body>
</html>
