<!DOCTYPE html>

<html lang="nl">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>APPDROP - Developer Hub</title>

    <link rel="stylesheet" href="https://googleapis.com">

    <style>

        * { box-sizing: border-box; margin: 0; padding: 0; }

        body { background-color: #0b0c10; color: #ffffff; font-family: 'Inter', -apple-system, sans-serif; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 40px 20px; overflow-x: hidden; }

        .app-header { text-align: center; margin-bottom: 50px; }

        .app-titel { font-size: 36px; font-weight: 300; letter-spacing: 8px; text-transform: uppercase; color: #ffffff; margin-bottom: 6px; text-shadow: 0 0 10px rgba(255, 255, 255, 0.1); }

        .app-subtitel { font-family: monospace; font-size: 11px; color: #4a5568; letter-spacing: 2px; }

        .app-grid { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 28px; }

        .glass-dock { display: flex; justify-content: space-around; align-items: center; background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.03); border-radius: 20px; padding: 24px 16px; position: relative; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: box-shadow 0.4s ease; }

        .glass-dock:has(.app-item:hover) { box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6), 0 0 30px var(--dock-glow, rgba(255, 255, 255, 0.05)); }

        .app-item { display: flex; flex-direction: column; align-items: center; width: 30%; cursor: pointer; text-decoration: none; transition: transform 0.2s ease; }

        .app-item:active { transform: scale(0.95); }

        .neon-icon { font-size: 32px; width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; border-radius: 14px; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.05); color: var(--app-color, #fff); text-shadow: 0 0 15px var(--app-glow, rgba(255, 255, 255, 0.3)); transition: transform 0.3s ease, box-shadow 0.3s ease; }

        .app-item:hover .neon-icon { transform: translateY(-4px); box-shadow: 0 0 20px var(--app-glow, rgba(255, 255, 255, 0.2)); }

        .app-label { font-size: 12px; color: #a0aec0; margin-top: 12px; font-weight: 500; letter-spacing: 0.5px; text-align: center; }

        .class-placeholder { cursor: default; opacity: 0.2; }

        .class-placeholder .neon-icon { color: #4a5568; text-shadow: none; border: 1px dashed rgba(255, 255, 255, 0.2); }

        .app-footer { margin-top: 50px; width: 100%; text-align: center; }

        .tech-button { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.12); color: #a0aec0; padding: 12px 36px; border-radius: 30px; font-size: 13px; letter-spacing: 1px; cursor: pointer; transition: all 0.3s ease; font-family: inherit; }

        .tech-button:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 0 20px rgba(255, 255, 255, 0.1); }

        .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 1000; }

        .modal-overlay.active { opacity: 1; pointer-events: auto; }

        .modal-content { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 24px; padding: 32px; width: 90%; max-width: 360px; text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); transform: scale(0.9); transition: transform 0.3s ease; display: flex; flex-direction: column; align-items: center; }

        .modal-overlay.active .modal-content { transform: scale(1); }

        .modal-title { font-size: 22px; font-weight: 500; letter-spacing: 1px; margin-bottom: 6px; }

        .modal-subtitle { font-size: 13px; color: #718096; margin-bottom: 24px; }

        .qr-container { background: #ffffff; padding: 16px; border-radius: 18px; display: inline-block; margin-bottom: 24px; box-shadow: 0 0 25px rgba(255, 255, 255, 0.15); }

        .close-button { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #ffffff; width: 100%; padding: 12px; border-radius: 14px; font-size: 14px; cursor: pointer; transition: background 0.2s; margin-top: 10px; }

        .close-button:hover { background: rgba(255, 255, 255, 0.15); }

    </style>

</head>

<body>

    <header class="app-header">

        <h1 class="app-titel">APPDROP</h1>

        <p class="app-subtitel">// DEVELOPER HUB v1.0.4</p>

    </header>

    <main class="app-grid">

        <!-- Plank 1 -->

        <div class="glass-dock" style="--dock-glow: rgba(247,147,26, 0.15);">

            <div class="app-item" onclick="openAppModal('Crypto', 'https://pages.dev')" style="--app-color: #FFB347; --app-glow: rgba(247,147,26, 0.5);">

                <div class="neon-icon">₿</div>

                <span class="app-label">Crypto</span>

            </div>

            <div class="app-item" onclick="openAppModal('Nearby 24/7', 'https://pages.dev')" style="--app-color: #5CF2B8; --app-glow: rgba(61,245,160, 0.5);">

                <div class="neon-icon">📍</div>

                <span class="app-label">Nearby 24/7</span>

            </div>

            <div class="app-item" onclick="openAppModal('Garantiekluis', 'https://pages.dev')" style="--app-color: #38D6FF; --app-glow: rgba(56,214,255, 0.5);">

                <div class="neon-icon">🔒</div>

                <span class="app-label">Garantiekluis</span>

            </div>

        </div>

        <!-- Plank 2 -->

        <div class="glass-dock" style="--dock-glow: rgba(199,125,255, 0.15);">

            <div class="app-item" onclick="openAppModal('Foodscan', 'https://pages.dev')" style="--app-color: #C77DFF; --app-glow: rgba(199,125,255, 0.5);">

                <div class="neon-icon">║▌</div>

                <span class="app-label">Foodscan</span>

            </div>

            <div class="app-item" onclick="openAppModal('Papierke', 'https://pages.dev')" style="--app-color: #FF5C6C; --app-glow: rgba(255,92,108, 0.5);">

                <div class="neon-icon">📝</div>

                <span class="app-label">Papierke</span>

            </div>

            <div class="app-item class-placeholder">

                <div class="neon-icon">+</div>

                <span class="app-label">Binnenkort</span>

            </div>

        </div>

        <!-- Plank 3 -->

        <div class="glass-dock">

            <div class="app-item class-placeholder">

                <div class="neon-icon">+</div>

                <span class="app-label">Binnenkort</span>

            </div>

            <div class="app-item class-placeholder">

                <div class="neon-icon">+</div>

                <span class="app-label">Binnenkort</span>

            </div>

            <div class="app-item class-placeholder">

                <div class="neon-icon">+</div>

                <span class="app-label">Binnenkort</span>

            </div>

        </div>

    </main>

    <footer class="app-footer">

        <button class="tech-button" onclick="alert('APPDROP Hub v1.0.4 - Premium Developer Repository')">Over AppDrop</button>

    </footer>

    <div class="modal-overlay" id="appModal" onclick="closeModal()">

        <div class="modal-content" onclick="event.stopPropagation()">

            <h3 class="modal-title" id="modalTitle">App Naam</h3>

            <p class="modal-subtitle">Scan om direct te installeren</p>

            <div class="qr-container" id="qrTarget"></div>

            <button class="close-button" onclick="closeModal()">Sluiten</button>

        </div>

    </div>

    <script>

        function openAppModal(name, url) {

            document.getElementById('modalTitle').innerText = name;

            const qrTarget = document.getElementById('qrTarget');

            qrTarget.innerHTML = `<img src="https://qrserver.com{encodeURIComponent(url)}&color=0b0c10" alt="QR Code" style="width:180px;height:180px;display:block;">`;

            document.getElementById('appModal').classList.add('active');

        }

        function closeModal() {

            document.getElementById('appModal').classList.remove('active');

        }

    </script>

</body>

</html>