From b9b57446077f7b29ef17944c801b64a07370e8b4 Mon Sep 17 00:00:00 2001
From: Whispering Wind <151555003+ReturnFI@users.noreply.github.com>
Date: Fri, 29 Aug 2025 21:48:31 +0330
Subject: [PATCH] fix: add responsive design

---
 core/scripts/webpanel/templates/login.html | 80 +++++++++++++++++++++-
 1 file changed, 77 insertions(+), 3 deletions(-)

diff --git a/core/scripts/webpanel/templates/login.html b/core/scripts/webpanel/templates/login.html
index 05c69c3..757e4fa 100644
--- a/core/scripts/webpanel/templates/login.html
+++ b/core/scripts/webpanel/templates/login.html
@@ -27,6 +27,7 @@
             justify-content: center;
             position: relative;
             overflow: hidden;
+            padding: 16px;
         }
 
         body::before {
@@ -80,6 +81,20 @@
             animation: slideUp 0.8s ease-out;
         }
 
+        @media (max-width: 480px) {
+            .login-container {
+                padding: 32px 24px;
+                border-radius: 16px;
+                margin: 0 16px;
+            }
+        }
+
+        @media (max-width: 320px) {
+            .login-container {
+                padding: 24px 20px;
+            }
+        }
+
         @keyframes slideUp {
             from {
                 opacity: 0;
@@ -109,6 +124,20 @@
             font-weight: 400;
         }
 
+        @media (max-width: 480px) {
+            .logo {
+                margin-bottom: 24px;
+            }
+            
+            .logo h1 {
+                font-size: 28px;
+            }
+            
+            .logo p {
+                font-size: 14px;
+            }
+        }
+
         .error-message {
             background: #fef2f2;
             border: 1px solid #fecaca;
@@ -123,6 +152,12 @@
             margin-bottom: 24px;
         }
 
+        @media (max-width: 480px) {
+            .form-group {
+                margin-bottom: 20px;
+            }
+        }
+
         .form-input:focus {
             outline: none;
             border-color: #1e3c72;
@@ -140,6 +175,13 @@
             background: #ffffff;
         }
 
+        @media (max-width: 480px) {
+            .form-input {
+                padding: 14px;
+                font-size: 16px;
+            }
+        }
+
         .form-input::placeholder {
             color: #9ca3af;
         }
@@ -159,6 +201,23 @@
             overflow: hidden;
         }
 
+        @media (max-width: 480px) {
+            .submit-btn {
+                padding: 14px;
+            }
+        }
+
+        @media (hover: hover) {
+            .submit-btn:hover {
+                transform: translateY(-3px);
+                box-shadow: 0 15px 30px rgba(30, 60, 114, 0.4);
+            }
+            
+            .submit-btn:hover::before {
+                left: 100%;
+            }
+        }
+
         .submit-btn::before {
             content: '';
             position: absolute;
@@ -190,6 +249,13 @@
             color: #6b7280;
         }
 
+        @media (max-width: 480px) {
+            .footer {
+                margin-top: 24px;
+                font-size: 13px;
+            }
+        }
+
         .footer a {
             color: #1e3c72;
             text-decoration: none;
@@ -200,9 +266,17 @@
             margin-top: 8px;
         }
 
-        .footer a:hover {
-            color: #2a5298;
-            transform: scale(1.1);
+        @media (hover: hover) {
+            .footer a:hover {
+                color: #2a5298;
+                transform: scale(1.1);
+            }
+        }
+
+        @media (max-width: 480px) {
+            .footer a {
+                font-size: 18px;
+            }
         }
     </style>
 </head>