app - » Open Competition Ladder System

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Open Competition Ladder System</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
        
        :root {
            --glass: rgba(6, 10, 28, 0.92);
            --neon-cyan: #00f8ff;
            --neon-pink: #ff00cc;
        }
        
        * { margin:0; padding:0; box-sizing:border-box; }
        
        body {
            background: #03050f;
            color: #c0f0ff;
            font-family: 'Press Start 2P', system-ui;
            height: 100vh;
            height: 100dvh;
            width: 100%;
            overflow: hidden;
            position: relative;
        }
        
        body::before {
            content: '';
            position: fixed;
            top: 0; 
            left: 0; 
            right: 0; 
            bottom: 0;
            background: 
                radial-gradient(circle at 25% 25%, rgba(0,248,255,0.15) 0%, transparent 50%),
                radial-gradient(circle at 75% 75%, rgba(255,0,204,0.15) 0%, transparent 50%),
                linear-gradient(transparent 50%, rgba(255,255,255,0.03) 50%);
            background-size: 200% 200%, 200% 200%, 80px 80px;
            animation: bgShift 40s linear infinite;
            z-index: 0;
        }
        
        @keyframes bgShift {
            0% { background-position: 0 0, 100% 100%, 0 0; }
            100% { background-position: 200% 200%, -100% -100%, 80px 80px; }
        }
        
        .app-frame {
            position: fixed;
            top: 0; 
            left: 0; 
            right: 0; 
            bottom: 0;
            display: flex;
            flex-direction: column;
            z-index: 1;
        }
        
        .header {
            background: var(--glass);
            backdrop-filter: blur(30px);
            border-bottom: 4px solid var(--neon-cyan);
            padding: 14px 20px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            flex-shrink: 0;
            box-shadow: 0 4px 30px rgba(0,248,255,0.4);
            gap: 16px;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 19px;
            letter-spacing: 2px;
            white-space: nowrap;
        }
        
        .logo-dot {
            width: 12px;
            height: 12px;
            background: var(--neon-pink);
            border-radius: 50%;
            box-shadow: 0 0 18px var(--neon-pink);
            animation: pulse 2s infinite;
        }
        
        .nav-container {
            width: 100%;
            overflow-x: auto;
            white-space: nowrap;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
        }
        
        .nav-container::-webkit-scrollbar {
            display: none;
        }
        
        .nav {
            display: flex;
            gap: 8px;
            padding: 4px 0;
        }
        
        .nav-item {
            background: rgba(0,0,0,0.7);
            padding: 9px 18px;
            font-size: 12px;
            cursor: pointer;
            border-radius: 6px;
            transition: all 0.3s;
            white-space: nowrap;
            border: 1px solid transparent;
        }
        
        .nav-item.active {
            background: var(--neon-cyan);
            color: #000;
            border-color: var(--neon-cyan);
        }
        
        .nav-item:hover {
            border-color: var(--neon-pink);
        }
        
        .content {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            background: rgba(0,0,0,0.3);
        }
        
        .section {
            margin-bottom: 50px;
        }
        
        .section-title {
            color: var(--neon-pink);
            font-size: 13px;
            margin-bottom: 16px;
            padding-left: 6px;
            border-left: 4px solid var(--neon-pink);
        }
        
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
            gap: 16px;
        }
        
        .glass-card {
            background: var(--glass);
            border: 2px solid rgba(0,248,255,0.6);
            border-radius: 14px;
            padding: 20px 22px;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            overflow: hidden;
        }
        
        .glass-card:hover {
            transform: scale(1.06) translateY(-12px);
            border-color: var(--neon-pink);
            box-shadow: 0 0 60px rgba(255,0,204,0.65);
        }
        
        .card-name {
            font-size: 13.2px;
            line-height: 1.45;
            margin-bottom: 12px;
            color: var(--neon-cyan);
        }
        
        .modal {
            position: fixed;
            top: 0; 
            left: 0; 
            right: 0; 
            bottom: 0;
            background: rgba(1,3,12,0.98);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 999;
            padding: 12px;
        }
        
        .modal-window {
            width: 90vw;
            height: 90vh;
            background: var(--glass);
            border: 5px solid var(--neon-cyan);
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 0 160px rgba(0,248,255,0.9);
        }
        
        .modal-header {
            padding: 16px 28px;
            background: rgba(0,0,0,0.8);
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 4px solid var(--neon-pink);
            flex-shrink: 0;
            gap: 16px;
        }
        
        .modal-body {
            flex: 1;
            position: relative;
        }
        
        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        
        .window-btn {
            width: 38px;
            height: 38px;
            border: 3px solid var(--neon-cyan);
            color: var(--neon-cyan);
            background: transparent;
            font-size: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            flex-shrink: 0;
        }
        
        .toast {
            position: fixed;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(to right, var(--neon-cyan), var(--neon-pink));
            color: #000;
            padding: 18px 36px;
            border-radius: 8px;
            font-size: 14px;
            box-shadow: 0 20px 60px rgba(0,248,255,0.7);
            z-index: 10000;
            display: none;
            width: max-content;
            max-width: 90vw;
            text-align: center;
            line-height: 1.5;
            word-wrap: break-word;
            border: 4px solid #000;
        }
        
        .scan {
            position: absolute;
            top: 0; 
            left: 0; 
            right: 0; 
            bottom: 0;
            background: repeating-linear-gradient(transparent, transparent 5px, rgba(0,248,255,0.2) 5px, rgba(0,248,255,0.2) 10px);
            pointer-events: none;
            animation: scanline 8s linear infinite;
            z-index: 2;
        }
        
        @keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:0.3 } }
        @keyframes scanline { from { transform:translateY(-150%) } to { transform:translateY(400%) } }
    </style>
</head>
<body data-rsssl=1>
    <div class="app-frame">
        <div class="header">
            <div class="logo">
                <span class="logo-dot"></span>
                AFBN OCLS
            </div>
            <div class="nav-container">
                <div class="nav">
                    <div onclick="switchTab(0)" class="nav-item active" id="tab0">HEMISPHERE</div>
                    <div onclick="switchTab(1)" class="nav-item" id="tab1">GAME</div>
                    <div onclick="switchTab(2)" class="nav-item" id="tab2">PLATFORM</div>
                    <div onclick="openInModal('https://compete.afbn.me/players/dashboard')" class="nav-item">DASHBOARD</div>
                    <div onclick="openInModal('https://compete.afbn.me/registration')" class="nav-item">REGISTER</div>
                    <div onclick="openInModal('https://compete.afbn.me/login-signup/')" class="nav-item">LOGIN / SIGNUP</div>
                    <div onclick="openInModal('https://compete.afbn.me/my-profile/')" class="nav-item">MY PROFILE</div>
                    <div onclick="openInModal('https://compete.afbn.me/forgot-password/')" class="nav-item">FORGOT PASSWORD</div>
                    <div onclick="openInModal('https://compete.afbn.me/players/')" class="nav-item">ALL PLAYERS</div>
                    <div onclick="openInModal('https://compete.afbn.me/privacy-policy-2/')" class="nav-item">PRIVACY POLICY</div>
                    <div onclick="openInModal('https://compete.afbn.me/teams/')" class="nav-item">ALL TEAMS</div>
                    <div onclick="openInModal('https://compete.afbn.me/support-ticket/')" class="nav-item">SUPPORT SYSTEM</div>
                    <div onclick="openInModal('https://compete.afbn.me/tournaments')" class="nav-item">TOURNAMENTS</div>
                    <div onclick="openExternal('https://afbn.me/')" class="nav-item">AFBN HUB</div>
                </div>
            </div>
        </div>
        
        <div class="content" id="content">
            </div>
    </div>

<div id="modal" class="modal">
        <div class="modal-window">
            <div class="modal-header">
                <div id="modal-title" style="font-size:16px;letter-spacing:2px;line-height:1.4;word-wrap:break-word;">TERMINAL</div>
                <div style="display:flex;gap:14px;flex-shrink:0;">
                    <div onclick="refreshIframe()" class="window-btn">⟳</div>
                    <div onclick="closeModal()" class="window-btn" style="font-size:32px;line-height:30px;">×</div>
                </div>
            </div>
            <div class="modal-body">
                <iframe id="ladder-frame"></iframe>
                <div class="scan"></div>
            </div>
        </div>
    </div>

<div id="toast" class="toast">READY</div>

let currentTabIndex = 0;

function createCard(l) {
            const div = document.createElement('div');
            div.className = 'glass-card';
            div.innerHTML = `<div class="card-name">${l.name}</div>`;
            div.onclick = () => openLadder(l);
            return div;
        }

function switchTab(n) {
            currentTabIndex = n;
            document.querySelectorAll('.nav-item').forEach((t,i) => {
                if (i < 3) t.classList.toggle('active', i===n);
            });
            renderView();
        }

let activeUrl = '';

function openInModal(url) {
            activeUrl = url;
            document.getElementById('modal-title').textContent = url.split('/').pop().replace(/-/g, ' ').toUpperCase() || 'TERMINAL';
            document.getElementById('ladder-frame').src = url;
            document.getElementById('modal').style.display = 'flex';
            showToast('TERMINAL CONNECTED');
        }

function openLadder(ladder) {
            activeUrl = ladder.url;
            document.getElementById('modal-title').textContent = ladder.name;
            document.getElementById('ladder-frame').src = ladder.url;
            document.getElementById('modal').style.display = 'flex';
            showToast('TERMINAL CONNECTED');
        }

function openExternal(url) {
            window.open(url, '_blank');
        }

function closeModal() {
            document.getElementById('modal').style.display = 'none';
            setTimeout(() => {
                document.getElementById('ladder-frame').src = '';
            }, 600);
        }

function refreshIframe() {
            const frame = document.getElementById('ladder-frame');
            frame.src = activeUrl;
            showToast('TERMINAL REFRESHED');
        }

function showToast(text) {
            const t = document.getElementById('toast');
            t.textContent = text;
            t.style.display = 'block';
            setTimeout(() => t.style.display = 'none', 2200);
        }

document.getElementById('modal').addEventListener('click', function(e) {
            if (e.target.id === 'modal') closeModal();
        });

document.addEventListener('keydown', e => {
            if (e.key === "Escape") {
                const m = document.getElementById('modal');
                if (m.style.display === 'flex') closeModal();
            }
        });