From 736dde1e8fce8213148d3b97cc8b70f91277e328 Mon Sep 17 00:00:00 2001
From: pika <alex@team-pieck.de>
Date: Mon, 10 Mar 2025 19:45:47 +0100
Subject: [PATCH] fixed mobile?

---
 templates/index.html | 57 ++++++++++++++++++--------------------------
 1 file changed, 23 insertions(+), 34 deletions(-)
diff --git a/templates/index.html b/templates/index.html
index eba4e24..45e7da3 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -2,6 +2,7 @@
 <html lang="de">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Caddy Dashboard</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script>
@@ -15,10 +16,10 @@
 
         function filterEntries() {
             let query = document.getElementById("search-box").value.toLowerCase();
-            let rows = document.querySelectorAll("tbody tr");
-            rows.forEach(row => {
-                let domain = row.dataset.domain.toLowerCase();
-                row.style.display = domain.includes(query) ? "" : "none";
+            let cards = document.querySelectorAll(".domain-card");
+            cards.forEach(card => {
+                let domain = card.dataset.domain.toLowerCase();
+                card.style.display = domain.includes(query) ? "" : "none";
             });
         }
 
@@ -59,43 +60,31 @@
 <body class="bg-gray-900 text-gray-100">
 
     <header class="bg-indigo-700 text-white p-6 text-center">
-        <h1 class="text-2xl md:text-3xl font-bold">Caddy Dashboard</h1>
-        <p class="text-cyan-300 text-sm md:text-lg">Übersicht über alle aktiven Proxy-Server</p>
-        <button onclick="toggleSearch()" class="bg-cyan-500 hover:bg-cyan-400 text-white px-4 py-2 rounded mt-3">🔍 Suche</button>
+        <h1 class="text-3xl font-bold">Caddy Dashboard</h1>
+        <p class="text-cyan-300 text-lg">Übersicht über alle aktiven Proxy-Server</p>
+        <button onclick="toggleSearch()" class="bg-cyan-500 hover:bg-cyan-400 text-white px-6 py-3 rounded-lg mt-4 text-lg">🔍 Suche</button>
     </header>
 
     <div class="container mx-auto p-4 md:p-6">
-        <input type="text" id="search-box" class="hidden w-full p-2 mb-4 text-gray-900 rounded-md" placeholder="🔍 Suche nach einer Subdomain..." onkeyup="filterEntries()">
+        <input type="text" id="search-box" class="hidden w-full p-4 mb-4 text-gray-900 text-lg rounded-md" placeholder="🔍 Suche nach einer Subdomain..." onkeyup="filterEntries()">
 
         {% for server, entries in proxies.items() %}
-        <div id="server-box-{{ server }}" class="bg-gray-800 p-4 rounded-md shadow-md mb-6">
+        <div id="server-box-{{ server }}" class="bg-gray-800 p-6 rounded-lg shadow-lg mb-6">
             <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
-                <h2 class="text-lg md:text-xl font-semibold text-indigo-400">{{ server }}</h2>
-                <button onclick="deleteServer('{{ server }}')" class="mt-2 md:mt-0 bg-red-500 text-white px-3 py-1 rounded-md">🗑️ Löschen</button>
+                <h2 class="text-2xl font-semibold text-indigo-400">{{ server }}</h2>
+                <button onclick="deleteServer('{{ server }}')" class="mt-3 md:mt-0 bg-red-500 text-white px-6 py-2 rounded-lg text-lg">🗑️ Löschen</button>
             </div>
-            <div class="overflow-x-auto">
-                <table class="w-full mt-3 border-collapse border border-gray-700">
-                    <thead>
-                        <tr class="text-cyan-400 bg-gray-700">
-                            <th class="text-left p-2 md:p-3">Domain</th>
-                            <th class="text-left p-2 md:p-3">Ziel</th>
-                            <th class="text-left p-2 md:p-3">Status</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% for domain, target in entries.items() %}
-                        <tr data-domain="{{ domain }}" class="text-sm md:text-base">
-                            <td class="p-2 md:p-3 border border-gray-700 break-words">
-                                <a href="https://{{ domain }}" target="_blank" class="text-indigo-400 hover:text-indigo-300 break-all">{{ domain }}</a>
-                            </td>
-                            <td class="p-2 md:p-3 border border-gray-700 break-words">{{ target }}</td>
-                            <td class="p-2 md:p-3 border border-gray-700">
-                                <button onclick="checkStatus('{{ domain }}', this)" class="bg-cyan-500 text-white px-2 md:px-3 py-1 rounded-md">🔄 Prüfen</button>
-                            </td>
-                        </tr>
-                        {% endfor %}
-                    </tbody>
-                </table>
+
+            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
+                {% for domain, target in entries.items() %}
+                <div class="domain-card bg-gray-700 p-4 rounded-lg shadow-md flex flex-col space-y-2" data-domain="{{ domain }}">
+                    <div class="flex justify-between">
+                        <a href="https://{{ domain }}" target="_blank" class="text-indigo-400 hover:text-indigo-300 text-lg break-words">{{ domain }}</a>
+                        <button onclick="checkStatus('{{ domain }}', this)" class="bg-cyan-500 text-white px-4 py-2 rounded-lg text-sm">🔄 Prüfen</button>
+                    </div>
+                    <p class="text-gray-300 break-words text-lg">{{ target }}</p>
+                </div>
+                {% endfor %}
             </div>
         </div>
         {% endfor %}
