<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta property="og:title" content="">
    <meta property="og:description" content="">
    <meta property="og:image" content="">
    <title>ScarletOS</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
    <link rel="stylesheet" href="/ipa/app/scarlet284719/style836.css">
    <link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>
body {
    overflow: hidden; 
}
.tab-content {
    overflow-y: auto; 
    max-height: 50vh; 
}
    </style>
</head>
<body>
    <div class="header">
        <div class="header-title">ScarletOS | android</div>
    </div>
    <div class="search-bar">
        <img src="https://icons.iconarchive.com/icons/icons8/windows-8/512/Very-Basic-Search-icon.png" alt="Search Icon" width="25" aria-label="Search">
        <input type="text" id="searchInput" placeholder="Search..." onkeyup="searchApps()">
    </div>
    <div class="tabs">
        <div class="tab active" onclick="showTab('home')">Home</div>
        <div class="tab" onclick="showTab('ipa')">apks</div>
        <div class="tab" onclick="showTab('settings')">Settings</div>
    </div>
    <div class="tab-content home active" id="appContainer"></div>
    </div>
    <div class="tab-content settings">
        <div class="dark-mode-toggle">
            <label for="darkModeSwitch">Dark Mode:</label>
            <label class="ios-switch">
                <input type="checkbox" id="darkModeSwitch" onclick="toggleDarkMode()">
                <span class="slider"></span>
            </label>
        </div>
        <div class="version-text">Version 2.0.0</div>
        <div class="version-text">update date : 28/10/2024</div>
        <div class="settings-links">
            <div class="link-button" onclick="window.location.href='https://discord.gg/pTmc8uEqJr'">Join Discord Server</div>
            <div class="link-button" onclick="window.location.href='https://youtube.com/@thereal_gameroblox0?si=mDg9GEsuNj3_eWqp'">YouTube Channel</div>
        </div>
    </div>
    <div class="tab-content ipa">
        <div id="ipaContainer"></div>
    </div>
    <div class="overlay" id="alertOverlay" style="display: none;">
        <div class="alert-box">
            <div class="alert-message">When you click get/install, paste the link on Safari</div>
            <button class="ok-button" onclick="closeAlert()">OK</button>
        </div>
    </div>

    <script>
let apps = [];
let ipaApps = [];

document.addEventListener('DOMContentLoaded', () => {
    const darkModeSwitch = document.getElementById('darkModeSwitch');
    if (localStorage.getItem('darkMode') === 'enabled') {
        document.body.classList.add('dark-mode');
        if (darkModeSwitch) darkModeSwitch.checked = true;
    }
    fetchApps();
    fetchIpaApps();
});

function fetchApps() {
    fetch('https://raw.githubusercontent.com/scarlet1837/scarletOS1/refs/heads/main/androidapps.json')
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            apps = data.apps || [];
            loadApps();
        })
        .catch(error => {
            console.error('There was a problem with the fetch operation:', error);
        });
}

function fetchIpaApps() {
    fetch('https://raw.githubusercontent.com/scarlet1837/scarletOS1/refs/heads/main/androidapk.json')
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            ipaApps = data.ipa_apps || [];
            loadIpaApps();
        })
        .catch(error => {
            console.error('There was a problem with the fetch operation:', error);
        });
}

function loadApps() {
    const appContainer = document.getElementById('appContainer');
    if (!appContainer) return;

    apps.forEach(app => {
        const appElement = document.createElement('div');
        appElement.classList.add('app');
        appElement.setAttribute('data-name', app.name.toLowerCase());
        appElement.innerHTML = `
            <img src="${app.image}" alt="${app.name} Icon">
            <div class="app-details">${app.name} <span class="version">${app.version}</span></div>
            <button class="get-button" onclick="copyLink('${app.get_url}')">INSTALL</button>
        `;
        appContainer.appendChild(appElement);
    });
}

function loadIpaApps() {
    const ipaContainer = document.getElementById('ipaContainer');
    if (!ipaContainer) return;

    ipaApps.forEach(app => {
        const ipaElement = document.createElement('div');
        ipaElement.classList.add('app');
        ipaElement.setAttribute('data-name', app.name.toLowerCase());
        ipaElement.innerHTML = `
            <img src="${app.image}" alt="${app.name} Icon">
            <div class="app-details">${app.name} <span class="version">${app.version}</span></div>
            <button class="get-button" onclick="copyLink('${app.get_url}')">GET</button>
        `;
        ipaContainer.appendChild(ipaElement);
    });
}

function showTab(tabName) {
    document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
    document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
    const activeTab = document.querySelector(`.${tabName}`);
    const activeTabButton = document.querySelector(`.tab[onclick="showTab('${tabName}')"]`);
    if (activeTab) activeTab.classList.add('active');
    if (activeTabButton) activeTabButton.classList.add('active');
}

function searchApps() {
    const input = document.getElementById('searchInput')?.value.toLowerCase() || '';
    const activeTab = document.querySelector('.tab-content.active');
    if (!activeTab) return;

    if (activeTab.classList.contains('home')) {
        document.querySelectorAll('.home .app').forEach(app => {
            app.style.display = app.getAttribute('data-name').includes(input) ? '' : 'none';
        });
    } else if (activeTab.classList.contains('ipa')) {
        document.querySelectorAll('.ipa .app').forEach(app => {
            app.style.display = app.getAttribute('data-name').includes(input) ? '' : 'none';
        });
    }
}

function toggleDarkMode() {
    const darkModeEnabled = document.getElementById('darkModeSwitch')?.checked;
    if (darkModeEnabled) {
        document.body.classList.add('dark-mode');
        localStorage.setItem('darkMode', 'enabled');
    } else {
        document.body.classList.remove('dark-mode');
        localStorage.setItem('darkMode', 'disabled');
    }
}

function copyLink(link) {
    navigator.clipboard.writeText(link)
        .then(() => alert('Link copied to clipboard!'))
        .catch(err => alert('Failed to copy link: ' + err));
}

function closeAlert() {
    const alertOverlay = document.getElementById('alertOverlay');
    if (alertOverlay) {
        alertOverlay.style.display = 'none';
        document.body.classList.remove('no-scroll');
        localStorage.setItem('alertShown', 'true');
    }
}

window.onload = function() {
    const alertOverlay = document.getElementById('alertOverlay');
    if (alertOverlay && !localStorage.getItem('alertShown')) {
        alertOverlay.style.display = 'flex';
        document.body.classList.add('no-scroll');
    }
};
    </script>
</body>
</html>