Merge pull request #75 from qfdk/remove-web

fix: 修改登录背景
qfdk · Oct 4, 2024 · 831b2a1 · 831b2a1
2 parents a8f5f16 + b36b214
commit 831b2a1
Showing 1 changed file with 45 additions and 21 deletions.
diff --git a/views/login.html b/views/login.html
@@ -4,29 +4,53 @@
     <title>EasyDockerWeb</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <style>
+        body {
+            background-image: url('/img/hero-bg.jpg');
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-attachment: fixed;
+        }
+        .bg-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(0, 0, 0, 0.5);
+        }
+        @media (max-width: 640px) {
+            .bg-overlay {
+                background-color: rgba(0, 0, 0, 0.7);
+            }
+        }
+    </style>
 </head>
-<body class="bg-gray-50 dark:bg-gray-800">
-<div class="h-full sm:min-h-screen w-full flex flex-col items-center justify-center p-4 mt-20 sm:mt-0">
-    <div class="bg-white p-8 rounded-lg shadow-md w-full sm:w-96 mt-10 sm:mt-0">
-        <h1 class="sm:block text-2xl font-bold mb-8">EasyDockerWeb</h1>
-        <form action="" method="post">
-            <div class="mb-4">
-                <label for="username" class="sm:block text-sm font-medium text-gray-700 mb-2">Username:</label>
-                <input type="text" name="username" id="username" placeholder="" required
-                       class="block w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-base p-2 bg-gray-100">
-            </div>
-            <div class="mb-6">
-                <label for="password" class="sm:block text-sm font-medium text-gray-700 mb-2">Password:</label>
-                <input type="password" name="password" id="password" placeholder="" required
-                       class="block w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-base p-2 bg-gray-100">
-            </div>
-            <button type="submit"
-                    class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-                Login
-            </button>
-        </form>
+<body class="min-h-screen">
+<div class="bg-overlay"></div>
+<div class="relative z-10 min-h-screen flex flex-col justify-center items-center">
+    <div class="w-full max-w-md px-4 py-8 sm:px-0">
+        <div class="bg-white p-8 rounded-lg shadow-md w-full">
+            <h1 class="text-2xl font-bold mb-8 text-center">EasyDockerWeb</h1>
+            <form action="" method="post">
+                <div class="mb-4">
+                    <label for="username" class="block text-sm font-medium text-gray-700 mb-2">Username:</label>
+                    <input type="text" name="username" id="username" required
+                           class="block w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-base p-2 bg-gray-100">
+                </div>
+                <div class="mb-6">
+                    <label for="password" class="block text-sm font-medium text-gray-700 mb-2">Password:</label>
+                    <input type="password" name="password" id="password" required
+                           class="block w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-base p-2 bg-gray-100">
+                </div>
+                <button type="submit"
+                        class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                    Login
+                </button>
+            </form>
+        </div>
     </div>
 </div>
 </body>
 </html>
-