From 092cf4995ad41448b5401e18b9ed3d5de5b18243 Mon Sep 17 00:00:00 2001
From: pika <alex@team-pieck.de>
Date: Mon, 10 Mar 2025 19:35:37 +0100
Subject: [PATCH] responsive web design

---
 templates/index.html | 58 +++++++++++++++++++++++---------------------
 1 file changed, 30 insertions(+), 28 deletions(-)
diff --git a/templates/index.html b/templates/index.html
index d0659d7..eba4e24 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -59,42 +59,44 @@
 <body class="bg-gray-900 text-gray-100">
 
     <header class="bg-indigo-700 text-white p-6 text-center">
-        <h1 class="text-3xl font-bold">Caddy Dashboard</h1>
-        <p class="text-cyan-300">Übersicht über alle aktiven Proxy-Server</p>
+        <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>
     </header>
 
-    <div class="container mx-auto p-6">
+    <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()">
 
         {% for server, entries in proxies.items() %}
         <div id="server-box-{{ server }}" class="bg-gray-800 p-4 rounded-md shadow-md mb-6">
-            <div class="flex justify-between items-center">
-                <h2 class="text-xl font-semibold text-indigo-400">{{ server }}</h2>
-                <button onclick="deleteServer('{{ server }}')" class="bg-red-500 text-white px-3 py-1 rounded-md">🗑️ Löschen</button>
+            <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>
+            </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>
-            <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-3">Domain</th>
-                        <th class="text-left p-3">Ziel</th>
-                        <th class="text-left p-3">Status</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {% for domain, target in entries.items() %}
-                    <tr data-domain="{{ domain }}">
-                        <td class="p-3 border border-gray-700">
-                            <a href="https://{{ domain }}" target="_blank" class="text-indigo-400 hover:text-indigo-300">{{ domain }}</a>
-                        </td>
-                        <td class="p-3 border border-gray-700">{{ target }}</td>
-                        <td class="p-3 border border-gray-700">
-                            <button onclick="checkStatus('{{ domain }}', this)" class="bg-cyan-500 text-white px-3 py-1 rounded-md">🔄 Prüfen</button>
-                        </td>
-                    </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
         </div>
         {% endfor %}
     </div>
