<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>m1xmou7e</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        background: '#0f1017',
                        card: '#151621',
                        border: '#2a2b36',
                        accent: '#FFFF00',
                    }
                }
            }
        }
    </script>
    <style>
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .fade-in {
            animation: fadeIn 0.3s ease-out;
        }
    </style>
</head>
<body class="min-h-screen bg-background text-gray-200 flex items-center justify-center">
<div class="max-w-6xl w-full p-4">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="space-y-6">
            <header class="space-y-4">
                <div class="flex items-center gap-4">
                    <img src="/img/m1xmou7e.jpg" alt="m1xmou7e" class="w-10 h-10 rounded-[12px] bg-gray-800">
                    <div class="flex-grow">
                        <h1 class="text-lg text-white font-medium">m1xmou7e</h1>
                        <p class="text-accent text-xs" data-translate="job">java developer</p>
                    </div>
                    <div class="relative">
                        <button id="langToggle" class="text-white hover:text-accent transition-colors" aria-haspopup="true" aria-expanded="false">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </button>
                        <div id="langMenu" class="hidden absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-card ring-1 ring-black ring-opacity-5 fade-in" style="border-radius: 8px;">
                            <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
                                <!-- Language options will be dynamically inserted here -->
                            </div>
                        </div>
                    </div>
                </div>

                <p class="text-white/90 text-sm leading-relaxed" data-translate="bio">
                    высокоуровневый разработчик на Java, также владею JavaScript и C++. Постоянно развиваюсь, изучаю новые технологии и участвую в разнообразных проектах.
                </p>

                <a href="https://t.me/m1xmou7e" class="inline-block text-white hover:text-accent transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send"><line x1="22" x2="11" y1="2" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
                </a>
                <a href="https://discord.com/users/1275506738962894972" class="inline-block text-white hover:text-accent transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-discord"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" /><path d="M14 12a1 1 0 1 0 2 0a1 1 0 0 0 -2 0" /><path d="M15.5 17c0 1 1.5 3 2 3c1.5 0 2.833 -1.667 3.5 -3c.667 -1.667 .5 -5.833 -1.5 -11.5c-1.457 -1.015 -3 -1.34 -4.5 -1.5l-.972 1.923a11.913 11.913 0 0 0 -4.053 0l-.975 -1.923c-1.5 .16 -3.043 .485 -4.5 1.5c-2 5.667 -2.167 9.833 -1.5 11.5c.667 1.333 2 3 3.5 3c.5 0 2 -2 2 -3" /><path d="M7 16.5c3.5 1 6.5 1 10 0" /></svg>
                </a>
            </header>

            <section class="space-y-4">
                <h2 class="text-base mb-3 text-white" data-translate="skills">my skills</h2>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="bg-card border border-border hover:border-accent/50 transition-all duration-300 rounded-xl p-3 space-y-2">
                        <div class="flex items-center gap-2 text-white">
                            <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/java/java-original.svg" width="24" height="24" alt="Java logo" />
                            <span class="font-medium text-sm">Java</span>
                        </div>
                        <p class="text-xs text-white/80" data-translate="javaDesc">Мой основной язык программирования, пишу на нём почти всё</p>
                    </div>
                    <div class="bg-card border border-border hover:border-accent/50 transition-all duration-300 rounded-xl p-3 space-y-2">
                        <div class="flex items-center gap-2 text-white">
                            <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/javascript/javascript-original.svg" width="24" height="24" alt="JavaScript logo" />
                            <span class="font-medium text-sm">JavaScript</span>
                        </div>
                        <p class="text-xs text-white/80" data-translate="jsDesc">Использую для бекенда</p>
                    </div>
                    <div class="bg-card border border-border hover:border-accent/50 transition-all duration-300 rounded-xl p-3 space-y-2">
                        <div class="flex items-center gap-2 text-white">
                            <img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/cplusplus/cplusplus-original.svg" width="24" height="24" alt="C++ logo" />
                            <span class="font-medium text-sm">C++</span>
                        </div>
                        <p class="text-xs text-white/80" data-translate="cppDesc">я просто умный</p>
                    </div>
                </div>
            </section>
        </div>

        <div class="lg:col-span-2">
            <h2 class="text-base mb-3 text-white" data-translate="projects">my projects</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div class="bg-card border border-border hover:border-accent/50 transition-all duration-300 rounded-xl overflow-hidden group w-[calc(100%-12px)] m-[6px]">
                    <div class="p-3 space-y-2">
                        <div class="flex items-center gap-3">
                            <img src="/img/l7srv.jpg" alt="l7srv.cc" class="w-10 h-10 rounded-[6px] object-cover">
                            <h3 class="font-medium text-sm text-white">L7Srv.cc</h3>
                        </div>
                        <p class="text-xs text-white/80" data-translate="l7srvDesc">Я администратор l7srv. Мы предоставляем услуги по тестированию устойчивости к DDoS-атакам исключительно в благих целях — для проверки и улучшения защиты.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const langToggle = document.getElementById('langToggle');
    const langMenu = document.getElementById('langMenu');

    const languages = [
        { code: 'ru', name: 'Русский', svgPath: '/img/flags/ru.svg' },
        { code: 'en', name: 'English', svgPath: '/img/flags/us.svg' },
    ];

    const translations = {
        ru: {
            job: "java developer",
            bio: "высокоуровневый разработчик на Java, также владею JavaScript и C++. Постоянно развиваюсь, изучаю новые технологии и участвую в разнообразных проектах.",
            skills: "my skills",
            javaDesc: "Мой основной язык программирования, пишу на нём почти всё",
            jsDesc: "Использую для бекенда",
            cppDesc: "я просто умный",
            projects: "my projects",
            l7srvDesc: "Я администратор l7srv. Мы предоставляем услуги по тестированию устойчивости к DDoS-атакам исключительно в благих целях — для проверки и улучшения защиты."
        },
        en: {
            job: "java developer",
            bio: "High-level Java developer, also proficient in JavaScript and C++. Constantly developing, learning new technologies, and participating in various projects.",
            skills: "my skills",
            javaDesc: "My main programming language, I use it for almost everything",
            jsDesc: "I use it for backend development",
            cppDesc: "I'm just smart",
            projects: "my projects",
            l7srvDesc: "I'm an administrator at l7srv. We provide DDoS stress testing services exclusively for benevolent purposes — to check and improve protection."
        }
    };

    function createLanguageMenu() {
        const menuContent = languages.map(lang => `
            <a href="#" class="block px-4 py-2 text-sm text-white hover:bg-gray-700 flex items-center" role="menuitem" data-lang="${lang.code}">
                <img src="${lang.svgPath}" alt="${lang.name}" class="w-5 h-5 mr-2">
                ${lang.name}
            </a>
        `).join('');

        langMenu.querySelector('div').innerHTML = menuContent;
    }

    function changeLanguage(lang) {
        document.querySelectorAll('[data-translate]').forEach(element => {
            const key = element.getAttribute('data-translate');
            if (translations[lang] && translations[lang][key]) {
                element.textContent = translations[lang][key];
            }
        });
        document.documentElement.lang = lang;
    }

    langToggle.addEventListener('click', () => {
        langMenu.classList.toggle('hidden');
        langToggle.setAttribute('aria-expanded', langMenu.classList.contains('hidden') ? 'false' : 'true');
    });

    document.addEventListener('click', (event) => {
        if (!langToggle.contains(event.target) && !langMenu.contains(event.target)) {
            langMenu.classList.add('hidden');
            langToggle.setAttribute('aria-expanded', 'false');
        }
    });

    langMenu.addEventListener('click', (e) => {
        if (e.target.closest('[data-lang]')) {
            e.preventDefault();
            const lang = e.target.closest('[data-lang]').getAttribute('data-lang');
            changeLanguage(lang);
            langMenu.classList.add('hidden');
            langToggle.setAttribute('aria-expanded', 'false');
        }
    });
    
    createLanguageMenu();
</script>
</body>
</html>