WiSearch/ui/templates/index.html

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <title>WiSearch</title>
    <style>
        body { background: #202124; color: #bdc1c6; font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; }
        
        /* Το μενού επάνω δεξιά */
        .top-nav { position: absolute; top: 20px; right: 30px; font-size: 14px; }
        .top-nav a { color: #e8eaed; text-decoration: none; margin-left: 15px; font-weight: bold; }
        .top-nav a:hover { color: #8ab4f8; text-decoration: underline; }
        .btn-register { background: #8ab4f8; color: #202124 !important; padding: 8px 16px; border-radius: 4px; text-decoration: none !important; }
        .btn-register:hover { background: #aecbfa; }

        .logo { font-size: 80px; font-weight: bold; color: #8ab4f8; margin-bottom: 30px; letter-spacing: -2px; }
        .search-container { position: relative; width: 600px; }
        input[type="text"] { width: 100%; padding: 15px 20px; font-size: 16px; border: 1px solid #5f6368; border-radius: 24px; background: #202124; color: white; outline: none; box-sizing: border-box; }
        input[type="text"]:hover, input[type="text"]:focus { background: #303134; box-shadow: 0 1px 6px rgba(32,33,36,.28); border-color: rgba(223,225,229,0); }
        .buttons { margin-top: 30px; text-align: center; }
        input[type="submit"] { background: #303134; border: 1px solid #303134; color: #e8eaed; padding: 10px 20px; border-radius: 4px; font-size: 14px; cursor: pointer; }
        input[type="submit"]:hover { border: 1px solid #5f6368; }
    </style>
</head>
<body>
    <div class="top-nav">
        {% if session.get('logged_in') %}
            <span style="color: #9aa0a6; margin-right: 10px;">Γεια σου, {{ session['username'] }}!</span>
            <a href="/admin">Dashboard</a>
            <a href="/logout" style="color: #f28b82;">Έξοδος</a>
        {% else %}
            <a href="/login">Σύνδεση</a>
            <a href="/register" class="btn-register">Εγγραφή</a>
        {% endif %}
    </div>

    <div class="logo">WiSearch</div>
    
    <div class="search-container">
        <form action="/search" method="get">
            <input type="text" name="q" placeholder="Αναζήτηση στο AWMN..." autofocus autocomplete="off">
            <div class="buttons"><input type="submit" value="Αναζήτηση"></div>
        </form>
    </div>
    
    <div style="margin-top: 25px; font-size: 12px; color: #9aa0a6;">
        Τελεστές: <b>"φράση"</b> για ακριβές κείμενο &nbsp;|&nbsp; <b>-λέξη</b> για εξαίρεση
    </div>
	<div style="position: absolute; bottom: 20px; width: 100%; text-align: center; font-size: 12px; color: #5f6368;">
        <a href="/admin" style="color:#5f6368; text-decoration: none; margin-right: 15px;">Admin Panel</a> 
        | 
        <span style="margin-left: 15px;">⚡ Powered by <b style="color: #9aa0a6;">#6610 Maiden</b></span>
    </div>
	<script>
document.querySelector('input[name="q"]').addEventListener('input', function(e) {
    let val = e.target.value;
    if(val.length > 1) {
        fetch('/api/autocomplete?q=' + val)
        .then(r => r.json())
        .then(data => {
            // Εδώ μπορείς να εμφανίσεις τα δεδομένα κάτω από το search box σου (π.χ. σε ένα div)
            console.log(data); 
        });
    }
});
</script>
</body>
</html>