From 6e9cea9ba425c16b748433bde7f04797843eb18c Mon Sep 17 00:00:00 2001
From: pika <alex@team-pieck.de>
Date: Mon, 24 Mar 2025 19:30:00 +0100
Subject: [PATCH] wip

---
 Dockerfile           |  24 ++++-
 templates/index.html | 234 ++++++++++++++++---------------------------
 2 files changed, 106 insertions(+), 152 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 16d9671..175afeb 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,16 +1,30 @@
 FROM python:3.12-alpine
 
+# Create app directory
 WORKDIR /app
 
-COPY requirements.txt /app/
+# Set environment variables
+ENV PYTHONDONTWRITEBYTECODE=1 \
+  PYTHONUNBUFFERED=1 \
+  PIP_NO_CACHE_DIR=1 \
+  PIP_DISABLE_PIP_VERSION_CHECK=1
+
+# Install dependencies first (for better caching)
+COPY requirements.txt .
 RUN pip install --no-cache-dir -r requirements.txt
 
-COPY . /app/
+# Copy the rest of the application
+COPY . .
 
-# Make entrypoint script executable
-RUN chmod +x /app/entrypoint.sh
+# Make the entrypoint script executable
+RUN chmod +x entrypoint.sh
 
-EXPOSE 5000
+# Set correct permissions
+RUN chown -R nobody:nobody /app
 
+# Switch to non-root user
+USER nobody
+
+# Set proper signal handling for faster shutdown
 ENTRYPOINT ["/app/entrypoint.sh"]
 CMD ["server"]
diff --git a/templates/index.html b/templates/index.html
index ba86374..db5a850 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -7,116 +7,48 @@
     <title>Caddy Dashboard</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        midnight: '#121212',
-                        obsidian: '#0a0a0a',
-                        charcoal: '#1e1e1e',
-                        slate: {
-                            850: '#172032',
-                        },
-                        neon: {
-                            blue: '#4dadff',
-                            purple: '#a259ff',
-                            pink: '#ff59f8',
-                            cyan: '#38ffdd',
-                            green: '#3cf7a2',
-                        },
-                    },
-                    backgroundImage: {
-                        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-                    },
-                    animation: {
-                        'gradient-shift': 'gradient-shift 10s ease infinite',
-                    },
-                    keyframes: {
-                        'gradient-shift': {
-                            '0%, 100%': { backgroundPosition: '0% 50%' },
-                            '50%': { backgroundPosition: '100% 50%' },
-                        }
-                    }
-                }
-            }
-        }
-    </script>
     <style>
-        .bg-mesh {
-            background-color: #121212;
+        body {
+            background-color: #0f0f0f;
             background-image:
-                radial-gradient(at 40% 20%, rgba(61, 65, 154, 0.1) 0px, transparent 50%),
-                radial-gradient(at 80% 0%, rgba(105, 29, 209, 0.1) 0px, transparent 50%),
-                radial-gradient(at 0% 50%, rgba(46, 49, 146, 0.1) 0px, transparent 50%),
-                radial-gradient(at 80% 50%, rgba(11, 103, 159, 0.1) 0px, transparent 50%),
-                radial-gradient(at 0% 100%, rgba(23, 86, 118, 0.1) 0px, transparent 50%),
-                radial-gradient(at 80% 100%, rgba(61, 111, 154, 0.1) 0px, transparent 50%),
-                radial-gradient(at 0% 0%, rgba(42, 9, 68, 0.1) 0px, transparent 50%);
-        }
-
-        .gradient-text {
-            background: linear-gradient(90deg, #4dadff, #a259ff, #38ffdd);
-            -webkit-background-clip: text;
-            background-clip: text;
-            color: transparent;
-            background-size: 300% 100%;
-            animation: gradient-shift 8s ease infinite;
-        }
-
-        .card-gradient {
-            position: relative;
-            border-radius: 16px;
-            overflow: hidden;
-            z-index: 1;
-        }
-
-        .card-gradient::before {
-            content: "";
-            position: absolute;
-            top: -2px;
-            left: -2px;
-            right: -2px;
-            bottom: -2px;
-            background: linear-gradient(45deg, #4dadff, #a259ff, #38ffdd);
-            z-index: -1;
-            border-radius: 18px;
-            opacity: 0;
-            transition: opacity 0.3s ease;
-        }
-
-        .card-gradient:hover::before {
-            opacity: 0.5;
-        }
-
-        @keyframes gradient-shift {
-            0% {
-                background-position: 0% 50%;
-            }
-
-            50% {
-                background-position: 100% 50%;
-            }
-
-            100% {
-                background-position: 0% 50%;
-            }
+                radial-gradient(circle at 25% 25%, rgba(40, 40, 40, 0.05) 0%, transparent 50%),
+                radial-gradient(circle at 75% 75%, rgba(40, 40, 40, 0.05) 0%, transparent 50%);
         }
 
         /* Subtle grid pattern */
         .bg-grid {
-            background-size: 40px 40px;
+            background-size: 50px 50px;
             background-image:
-                linear-gradient(to right, rgba(55, 65, 81, 0.05) 1px, transparent 1px),
-                linear-gradient(to bottom, rgba(55, 65, 81, 0.05) 1px, transparent 1px);
+                linear-gradient(to right, rgba(40, 40, 40, 0.05) 1px, transparent 1px),
+                linear-gradient(to bottom, rgba(40, 40, 40, 0.05) 1px, transparent 1px);
+        }
+
+        .card {
+            transition: all 0.2s ease;
+        }
+
+        .card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+        }
+
+        .search-popup {
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.15s ease, visibility 0.15s;
+        }
+
+        .search-popup.active {
+            opacity: 1;
+            visibility: visible;
         }
     </style>
     <script>
         function toggleSearch() {
-            let searchBar = document.getElementById("search-box");
-            searchBar.classList.toggle("hidden");
-            if (!searchBar.classList.contains("hidden")) {
-                searchBar.focus();
+            let searchContainer = document.getElementById("search-container");
+            searchContainer.classList.toggle("active");
+            if (searchContainer.classList.contains("active")) {
+                document.getElementById("search-box").focus();
             }
         }
 
@@ -138,7 +70,7 @@
                 }).then(response => {
                     if (response.ok) {
                         const serverBox = document.getElementById("server-box-" + serverName);
-                        serverBox.classList.add('opacity-0', 'scale-95');
+                        serverBox.classList.add('opacity-0');
                         setTimeout(() => {
                             serverBox.remove();
                         }, 300);
@@ -152,71 +84,79 @@
                 event.preventDefault();
                 toggleSearch();
             }
+            if (event.key === "Escape") {
+                let searchContainer = document.getElementById("search-container");
+                if (searchContainer.classList.contains("active")) {
+                    toggleSearch();
+                }
+            }
         });
     </script>
 </head>
 
-<body class="bg-mesh text-gray-100 min-h-screen">
-    <div
-        class="bg-gradient-to-r from-slate-850/60 to-charcoal/60 backdrop-blur-md border-b border-gray-700/30 sticky top-0 z-10">
-        <header class="container mx-auto px-4 py-6 text-center">
-            <h1 class="text-4xl font-bold tracking-tight gradient-text">Caddy Dashboard</h1>
-            <p class="text-cyan-300 text-lg mt-2 opacity-80">Übersicht über alle aktiven Proxy-Server</p>
-            <div class="mt-6 flex justify-center">
-                <button onclick="toggleSearch()" class="bg-gradient-to-r from-neon-blue to-neon-purple text-white px-8 py-3 rounded-full 
-                    shadow-lg shadow-indigo-500/20 hover:shadow-indigo-500/40 transition-all duration-300
-                    flex items-center space-x-2">
-                    <i class="fas fa-search"></i>
-                    <span>Suche</span>
+<body class="text-gray-200 min-h-screen bg-grid">
+    <!-- Minimal header -->
+    <header class="py-4 px-6 bg-black/50 backdrop-blur-sm border-b border-gray-800/50">
+        <div class="container mx-auto flex justify-between items-center">
+            <h1 class="text-xl font-medium tracking-tight text-white">Caddy Dashboard</h1>
+            <button onclick="toggleSearch()" class="text-sm px-3 py-1.5 bg-zinc-800 hover:bg-zinc-700 border border-zinc-700 rounded-md
+                transition-colors flex items-center gap-2">
+                <i class="fas fa-search text-xs"></i>
+                <span class="hidden sm:inline">/</span>
+            </button>
+        </div>
+    </header>
+
+    <!-- Search popup -->
+    <div id="search-container"
+        class="search-popup fixed inset-0 z-50 flex items-start justify-center pt-20 px-4 bg-black/50 backdrop-blur-sm">
+        <div class="w-full max-w-xl bg-zinc-900 border border-zinc-800 rounded-lg overflow-hidden shadow-2xl">
+            <div class="flex items-center px-4 border-b border-zinc-800">
+                <i class="fas fa-search text-gray-500 mr-3"></i>
+                <input type="text" id="search-box"
+                    class="w-full py-3 bg-transparent text-white border-none focus:outline-none"
+                    placeholder="Domain suchen..." onkeyup="filterEntries()">
+                <button onclick="toggleSearch()" class="text-gray-500 hover:text-white">
+                    <i class="fas fa-times"></i>
                 </button>
             </div>
-        </header>
+            <div class="p-2 text-xs text-gray-500">
+                Drücke <kbd class="px-1.5 py-0.5 bg-zinc-800 rounded border border-zinc-700">/</kbd> zum Öffnen, <kbd
+                    class="px-1.5 py-0.5 bg-zinc-800 rounded border border-zinc-700">ESC</kbd> zum Schließen
+            </div>
+        </div>
     </div>
 
-    <div class="container mx-auto p-4 md:p-6 bg-grid">
-        <div class="transition-all duration-300 transform">
-            <input type="text" id="search-box" class="hidden w-full p-4 mb-6 text-gray-100 text-lg rounded-xl bg-charcoal/80 backdrop-blur-md
-                border border-gray-700/50 focus:border-neon-blue focus:outline-none focus:ring-2 
-                focus:ring-neon-blue/30 shadow-xl transition-all duration-300 transform"
-                placeholder="Nach Subdomains suchen... (Drücke '/' für schnellen Zugriff)" onkeyup="filterEntries()">
-        </div>
-
+    <div class="container mx-auto p-4 md:p-6">
         {% for server, entries in proxies.items() %}
-        <div id="server-box-{{ server }}" class="bg-gradient-to-br from-charcoal/80 to-slate-850/80 backdrop-blur-md p-7 rounded-2xl shadow-xl mb-8 
-            border border-gray-700/30 transition-all duration-300 transform">
-            <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
+        <div id="server-box-{{ server }}" class="mb-8 opacity-100 transition-opacity duration-300">
+            <div class="flex justify-between items-center mb-4 px-1">
                 <div>
-                    <h2 class="text-2xl font-bold gradient-text">{{ server }}</h2>
-                    <p class="text-sm text-gray-400 flex items-center mt-1">
-                        <i class="far fa-clock mr-2"></i> Zuletzt aktualisiert: {{ timestamps[server] }}
-                    </p>
+                    <h2 class="text-lg font-medium text-white">{{ server }}</h2>
+                    <p class="text-xs text-gray-500 mt-0.5">Zuletzt aktualisiert: {{ timestamps[server] }}</p>
                 </div>
-                <button onclick="deleteServer('{{ server }}')" class="mt-4 md:mt-0 bg-gradient-to-r from-red-500 to-rose-600 hover:from-red-600 hover:to-rose-700 
-                    text-white px-6 py-2.5 rounded-full text-sm font-medium transition-all duration-300 transform 
-                    hover:scale-105 flex items-center">
-                    <i class="fas fa-trash-alt mr-2"></i> Löschen
+                <button onclick="deleteServer('{{ server }}')" class="text-xs px-3 py-1.5 bg-zinc-900 hover:bg-red-900/70 border border-zinc-800 hover:border-red-800/50 text-gray-400 hover:text-white rounded
+                    transition-colors">
+                    <i class="fas fa-trash-alt mr-1.5"></i>Löschen
                 </button>
             </div>
 
-            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 mt-6">
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                 {% for domain, target in entries.items() %}
-                <div class="domain-card card-gradient bg-obsidian p-5 rounded-xl backdrop-blur-sm shadow-lg 
-                border border-gray-800/50 flex flex-col space-y-4 transition-all duration-300 transform hover:translate-y-[-2px]"
+                <div class="domain-card card bg-zinc-900 border border-zinc-800 rounded-lg overflow-hidden"
                     data-domain="{{ domain }}">
-                    <div class="flex justify-between items-start">
+                    <div class="px-4 py-3 flex justify-between items-center border-b border-zinc-800">
                         <a href="https://{{ domain }}" target="_blank"
-                            class="text-neon-blue hover:text-neon-cyan font-medium text-lg break-words transition-colors duration-300 flex items-center">
-                            <i class="fas fa-globe mr-2 opacity-80"></i>
-                            <span>{{ domain }}</span>
+                            class="text-white hover:text-blue-400 text-sm font-medium truncate transition-colors flex items-center gap-2 max-w-[calc(100%-24px)]">
+                            <i class="fas fa-globe text-xs text-gray-500"></i>
+                            <span class="truncate">{{ domain }}</span>
                         </a>
                         <div class="ml-2 flex-shrink-0">
-                            <div class="w-2 h-2 bg-green-500 rounded-full shadow-sm shadow-green-400/50"></div>
+                            <div class="w-2 h-2 bg-green-500 rounded-full"></div>
                         </div>
                     </div>
-                    <div class="pt-2 border-t border-gray-800/50">
-                        <p class="text-gray-300 break-words text-sm font-mono bg-midnight/50 p-2 rounded-lg">
-                            <i class="fas fa-network-wired mr-2 text-gray-500"></i>{{ target }}
-                        </p>
+                    <div class="px-4 py-2.5">
+                        <p class="text-gray-400 text-xs font-mono truncate">{{ target }}</p>
                     </div>
                 </div>
                 {% endfor %}
@@ -225,9 +165,9 @@
         {% endfor %}
     </div>
 
-    <footer class="bg-obsidian/60 backdrop-blur-md border-t border-gray-700/30 py-4 mt-12">
-        <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
-            Caddy Dashboard • Powered by Flask & Tailwind CSS
+    <footer class="py-4 mt-12 border-t border-zinc-900">
+        <div class="container mx-auto px-4 text-center text-xs text-gray-600">
+            Caddy Dashboard
         </div>
     </footer>
 </body>