bindmanager/templates/zones.html

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <title>Zones - DNS Manager</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-900 text-white font-sans">
    <div class="flex h-screen">
        <aside class="w-64 bg-gray-800 border-r border-gray-700 p-6">
            <h2 class="text-2xl font-bold text-blue-400 mb-8">DNS Manager</h2>
            <nav class="space-y-2">
                <a href="/" class="block px-4 py-2 text-gray-400 hover:bg-gray-700 rounded">Dashboard</a>
                <a href="/zones" class="block px-4 py-2 bg-blue-600 rounded">Zone Management</a>
            </nav>
        </aside>

        <main class="flex-1 p-8">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <div class="bg-gray-800 p-6 rounded-xl border border-gray-700 shadow-xl">
                    <h2 class="text-xl font-bold mb-4">New Zone</h2>
                    <form action="/zones/add" method="POST" class="space-y-4">
                        <input type="text" name="domain" placeholder="example.com" required class="w-full bg-gray-700 border border-gray-600 rounded px-4 py-2">
                        <select name="type" id="ztype" onchange="document.getElementById('m_ip').style.display = (this.value=='master'?'block':'none'); document.getElementById('s_ip').style.display = (this.value=='slave'?'block':'none');" class="w-full bg-gray-700 border border-gray-600 rounded px-4 py-2">
                            <option value="master">Master</option>
                            <option value="slave">Slave</option>
                        </select>
                        <div id="m_ip"><input type="text" name="ip" placeholder="Server IP" class="w-full bg-gray-700 border border-gray-600 rounded px-4 py-2"></div>
                        <div id="s_ip" style="display:none"><input type="text" name="master_ip" placeholder="Master DNS IP" class="w-full bg-gray-700 border border-gray-600 rounded px-4 py-2"></div>
                        <button class="w-full bg-blue-600 hover:bg-blue-500 py-2 rounded font-bold">Create</button>
                    </form>
                </div>

                <div class="lg:col-span-2 bg-gray-800 rounded-xl border border-gray-700 overflow-hidden shadow-xl">
                    <table class="w-full text-left">
                        <thead class="bg-gray-700 text-gray-400 uppercase text-xs">
                            <tr><th class="px-6 py-4">Domain</th><th class="px-6 py-4">Type</th><th class="px-6 py-4 text-right">Actions</th></tr>
                        </thead>
                        <tbody class="divide-y divide-gray-700">
                            {% for domain, type in zones %}
                            <tr class="hover:bg-gray-750 transition">
                                <td class="px-6 py-4 font-bold">{{ domain }}</td>
                                <td class="px-6 py-4"><span class="px-2 py-1 rounded text-xs {% if type=='master' %}bg-blue-900 text-blue-200{% else %}bg-purple-900 text-purple-200{% endif %}">{{ type }}</span></td>
                                <td class="px-6 py-4 text-right">
                                    <a href="/zones/manage/{{ domain }}" class="text-blue-400 hover:underline mr-4">Manage</a>
                                    <a href="/zones/delete/{{ domain }}" class="text-red-500 hover:underline">Delete</a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>
</body>
</html>