<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Registry | At-Protocol</title>

    <style>

        :root { --blue: #007AFF; --gray: #8E8E93; --light: #F2F2F7; }

        body { font-family: -apple-system, sans-serif; margin: 0; background: #fff; color: #1c1c1e; }

        .nav { padding: 20px; border-bottom: 1px solid var(--light); display: flex; justify-content: space-between; align-items: center; }

        .logo { font-weight: 800; font-size: 20px; letter-spacing: -1px; }

        

        .main { max-width: 600px; margin: 0 auto; padding: 40px 20px; text-align: center; }

        h1 { font-size: 40px; font-weight: 800; letter-spacing: -2px; margin-bottom: 10px; }

        p { color: var(--gray); font-size: 18px; margin-bottom: 30px; }


        .search-box { width: 100%; padding: 18px; border-radius: 14px; border: 1px solid #d1d1d6; font-size: 17px; outline: none; transition: 0.2s; background: var(--light); box-sizing: border-box; }

        .search-box:focus { background: #fff; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0,122,255,0.1); }


        .results { margin-top: 40px; text-align: left; }

        .row { display: flex; align-items: center; padding: 15px; border-bottom: 1px solid var(--light); transition: 0.2s; }

        .row:hover { background: #fafafa; }

        .emoji { font-size: 30px; margin-right: 15px; width: 45px; text-align: center; }

        .dest { flex-grow: 1; font-weight: 600; font-size: 15px; }

        .badge { font-size: 11px; font-weight: 700; background: #E5F1FF; color: var(--blue); padding: 4px 8px; border-radius: 6px; text-transform: uppercase; }

    </style>

</head>

<body>


<div class="nav">

    <div class="logo">PROJECT WHALE</div>

    <div class="badge">BETA</div>

</div>


<div class="main">

    <h1>At-Protocol Registry</h1>

    <p>Search and verify handles in real-time.</p>

    

    <input type="text" id="search" class="search-box" placeholder="Search 👟, 🍎, or name..." onkeyup="searchRegistry()">


    <div id="results" class="results">

        <div style="text-align:center; color:gray;">Connecting to registry...</div>

    </div>

</div>


<script>

    const supabaseUrl = 'https://tsuqcaagkyaaswjzuafc.supabase.co';

    const supabaseKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InRzdXFjYWFna3lhYXN3anp1YWZjIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzA0MjE1MjMsImV4cCI6MjA4NTk5NzUyM30.S-X1edZMPTyE0GHcTrZV40YWBl6P3Efn2pT7K6Al9kQ';


    let allData = [];


    async function load() {

        const res = await fetch(`${supabaseUrl}/rest/v1/handles?select=*`, {

            headers: { 'apikey': supabaseKey, 'Authorization': `Bearer ${supabaseKey}` }

        });

        allData = await res.json();

        render(allData);

    }


    function render(data) {

        const container = document.getElementById('results');

        container.innerHTML = data.map(item => `

            <div class="row">

                <div class="emoji">${item.handle}</div>

                <div class="dest">${item.destination}</div>

                <div class="badge">Verified</div>

            </div>

        `).join('');

    }


    function searchRegistry() {

        const term = document.getElementById('search').value.toLowerCase();

        const filtered = allData.filter(item => 

            item.handle.toLowerCase().includes(term) || 

            item.destination.toLowerCase().includes(term)

        );

        render(filtered);

    }


    load();

</script>

</body>

</html>