<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>MK Rabota</title>
    <style>
        :root {
            --bg-color: #ffffff;
            --text-color: #000000;
            --header-bg: #420095;
            --header-text: #ffffff;
            --refresh-bg: #e0e0e0;
            --refresh-color: #333333;
        }
        [data-theme="dark"] {
            --bg-color: #121212;
            --text-color: #ffffff;
            --header-bg: #2c0063;
            --header-text: #ffffff;
            --refresh-bg: #333333;
            --refresh-color: #e0e0e0;
        }
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: Arial, sans-serif;
            overflow: hidden;
            background-color: var(--bg-color);
            color: var(--text-color);
        }
        .container {
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        header {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            transition: background-color 0.5s;
            background-color: var(--header-bg);
        }
        h1 {
            color: var(--header-text);
            font-weight: bold;
            text-transform: uppercase;
            margin: 0;
            font-size: 18px;
            transition: color 0.5s;
        }
        #dark-mode-btn {
            background: none;
            border: none;
            color: var(--header-text);
            cursor: pointer;
            font-size: 24px;
            transition: transform 0.3s;
        }
        #dark-mode-btn:hover {
            transform: scale(1.1);
        }
        .content {
            flex: 1;
            position: relative;
            overflow: hidden;
        }
        iframe {
            width: 100%;
            height: 100%;
            border: none;
            transition: opacity 0.5s, filter 0.5s;
            /* Apply filter for dark mode */
            filter: var(--iframe-filter);
        }
        .bottom-menu {
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 10px 0;
            background-color: var(--header-bg);
            transition: background-color 0.5s;
        }
        .menu-item {
            cursor: pointer;
            transition: transform 0.3s, background-color 0.5s;
            padding: 5px 10px;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .menu-item:hover {
            transform: scale(1.1);
        }
        .menu-item img {
            width: 30px;
            height: 30px;
            border-radius: 5px;
            object-fit: cover;
            margin-bottom: 5px;
        }
        .loading-indicator {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            display: none;
            z-index: 1001;
        }
        .loading-indicator svg {
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .menu-kariera { background-color: #420095; color: white; }
        .menu-vrabotuvanje { background-color: #C11718; color: white; }
        .menu-apliciraj { background-color: #0B58F4; color: white; }
        .menu-najdirabota { background-color: #F9FAFC; color: #000; }
        .refresh-indicator {
            position: fixed;
            top: -50px;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--refresh-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: top 0.3s;
            z-index: 1000;
        }
        .refresh-indicator svg {
            width: 24px;
            height: 24px;
            transition: transform 0.3s;
            fill: var(--refresh-color);
        }
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="container">
        <header id="main-header">
            <h1 id="header-title">MK Rabota</h1>
            <button id="dark-mode-btn" aria-label="Toggle Dark Mode">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                </svg>
            </button>
        </header>
        <div class="content">
            <iframe id="main-frame" src=""></iframe>
            <div class="loading-indicator" id="loading-indicator">
                <svg viewBox="0 0 100 100" width="50" height="50">
                    <circle cx="50" cy="50" r="45" stroke="#999" stroke-width="10" fill="none" />
                    <circle cx="50" cy="50" r="45" stroke="#420095" stroke-width="5" fill="none" stroke-dasharray="70 283" stroke-linecap="round" />
                </svg>
            </div>
            <div class="refresh-indicator" id="refresh-indicator">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                    <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
                </svg>
            </div>
        </div>
        <div class="bottom-menu" id="bottom-menu">
            <div class="menu-item menu-kariera" onclick="changeWebsite(event, 'https://kariera.mk', '#420095', '#ffffff')" data-title="Kariera.mk">
                <img src="https://pbs.twimg.com/profile_images/796622171338657792/kwbROANk.jpg" alt="Kariera.mk">
                <span>Kariera.mk</span>
            </div>
            <div class="menu-item menu-vrabotuvanje" onclick="changeWebsite(event, 'https://www.vrabotuvanje.com.mk', '#C11718', '#ffffff')" data-title="Vrabotuvanje.com.mk">
                <img src="https://rabotnik.com.mk/wp-content/uploads/2024/02/Vrabotuvanje-800x429.jpg" alt="Vrabotuvanje.com.mk" style="object-position: center;">
                <span>Vrabotuvanje</span>
            </div>
            <div class="menu-item menu-apliciraj" onclick="changeWebsite(event, 'https://apliciraj.mk', '#0B58F4', '#ffffff')" data-title="Apliciraj.mk">
                <img src="https://pbs.twimg.com/profile_images/1240419619996938243/TP43OuIp.jpg" alt="Apliciraj.mk">
                <span>Apliciraj.mk</span>
            </div>
            <div class="menu-item menu-najdirabota" onclick="changeWebsite(event, 'https://www.najdirabota.com.mk', '#F9FAFC', '#000000')" data-title="Najdirabota.com.mk">
                <img src="https://www.najdirabota.com.mk/images/logo.png" alt="Najdirabota.com.mk">
                <span>Najdi Rabota</span>
            </div>
        </div>
    </div>

    <script>
        let currentUrl = 'https://kariera.mk';
        let isDarkMode = false;
        let currentColor = '#420095';
        let currentTextColor = '#ffffff';

        function changeWebsite(event, url, color, textColor) {
            event.preventDefault();
            const iframe = document.getElementById('main-frame');
            const headerTitle = document.getElementById('header-title');
            const loadingIndicator = document.getElementById('loading-indicator');
            const refreshIndicator = document.getElementById('refresh-indicator');

            // Show loading indicator
            loadingIndicator.style.display = 'block';
            loadingIndicator.querySelector('circle:last-child').setAttribute('stroke', color);

            // Fade out the iframe
            iframe.style.opacity = 0;

            // Change the iframe source
            setTimeout(() => {
                iframe.src = url;
                currentUrl = url;
                currentColor = color;
                currentTextColor = textColor;

                // Update header title
                headerTitle.innerText = event.currentTarget.getAttribute('data-title');

                // Update header and bottom menu colors
                updateThemeColors();

                // Hide refresh indicator if visible
                refreshIndicator.style.top = '-50px';
                refreshIndicator.querySelector('svg').style.animation = 'none';
            }, 100);

            // After iframe loads, hide loading indicator and fade in
            iframe.onload = () => {
                loadingIndicator.style.display = 'none';
                iframe.style.opacity = 1;
            };
        }

        function toggleDarkMode() {
            isDarkMode = !isDarkMode;
            document.documentElement.setAttribute('data-theme', isDarkMode ? 'dark' : 'light');
            const darkModeBtn = document.getElementById('dark-mode-btn');

            // Change dark mode button icon
            darkModeBtn.innerHTML = isDarkMode ? 
                '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>' : 
                '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>';

            // Apply filter to iframe for dark mode simulation
            const iframe = document.getElementById('main-frame');
            iframe.style.filter = isDarkMode ? 'invert(1) hue-rotate(180deg)' : 'none';

            // Update theme colors
            updateThemeColors();
        }

        function updateThemeColors() {
            const header = document.getElementById('main-header');
            const bottomMenu = document.getElementById('bottom-menu');
            const headerTitle = document.getElementById('header-title');
            const darkModeBtn = document.getElementById('dark-mode-btn');
            const refreshIndicator = document.getElementById('refresh-indicator');

            header.style.backgroundColor = isDarkMode ? '#2c0063' : currentColor;
            bottomMenu.style.backgroundColor = isDarkMode ? '#2c0063' : currentColor;
            headerTitle.style.color = isDarkMode ? '#ffffff' : currentTextColor;
            darkModeBtn.style.color = isDarkMode ? '#ffffff' : currentTextColor;

            refreshIndicator.style.backgroundColor = isDarkMode ? '#333333' : '#e0e0e0';
            refreshIndicator.querySelector('svg').style.fill = isDarkMode ? '#e0e0e0' : '#333333';
        }

        function refreshPage() {
            const iframe = document.getElementById('main-frame');
            const refreshIndicator = document.getElementById('refresh-indicator');

            refreshIndicator.style.top = '10px';
            refreshIndicator.querySelector('svg').style.animation = 'rotate 1s linear infinite';

            // Reload the iframe
            iframe.src = iframe.src;

            iframe.onload = () => {
                refreshIndicator.style.top = '-50px';
                refreshIndicator.querySelector('svg').style.animation = 'none';
            };
        }

        // Pull-to-refresh functionality is removed due to cross-origin issues

        document.getElementById('dark-mode-btn').addEventListener('click', toggleDarkMode);

        window.addEventListener('load', () => {
            const iframe = document.getElementById('main-frame');
            const loadingIndicator = document.getElementById('loading-indicator');

            // Show loading indicator
            loadingIndicator.style.display = 'block';

            // Set initial iframe source
            iframe.src = currentUrl;

            // Hide loading indicator once iframe loads
            iframe.onload = () => {
                loadingIndicator.style.display = 'none';
            };

            // Apply dark mode filter if enabled
            iframe.style.filter = isDarkMode ? 'invert(1) hue-rotate(180deg)' : 'none';
        });
    </script>
</body>
</html>. in this code make the header text change colors and website title names based on which buttons I click make the buttons revert as before way smaller than you made them and in the last button make the header text dark grey Constantly and also make the dark mode more stylish and better not affecting images and colors negative making them just make the white and black dark colors change detect them in the iframes and write full code