From 9f4033a0f80c52ca98d74ff83f006b146a4b8b79 Mon Sep 17 00:00:00 2001
From: weixin_54226053 <weixin_54226053@devide>
Date: Mon, 18 Sep 2023 20:29:16 +0800
Subject: [PATCH] Auto Commit

---
 .inscode   |   4 +
 index.html | 248 ++++++++++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 241 insertions(+), 11 deletions(-)
diff --git a/.inscode b/.inscode
index 70c7853..9fec957 100644
--- a/.inscode
+++ b/.inscode
@@ -1,4 +1,5 @@
 run = "npm i && npm run dev"
+language = "node"
 
 [deployment]
 build = "npm i && npm run build"
@@ -8,3 +9,6 @@ run = "npm run preview"
 PATH = "/root/${PROJECT_DIR}/.config/npm/node_global/bin:/root/${PROJECT_DIR}/node_modules/.bin:${PATH}"
 XDG_CONFIG_HOME = "/root/.config"
 npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global"
+
+[debugger]
+program = "main.js"
diff --git a/index.html b/index.html
index 030a6ff..e8e1c56 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,239 @@
 <!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
+<html>
+<head>
+    <title>动态酷炫登录页面</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <style type="text/css">
+        body {
+            background-color: #222;
+            font-family: "Helvetica Neue", Helvetica, sans-serif;
+            font-size: 16px;
+            line-height: 1.5;
+            color: #fafafa;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+        }
+
+        .container {
+            padding: 50px 0;
+            max-width: 500px;
+        }
+
+        .form {
+            position: relative;
+            z-index: 1;
+            background: #282828;
+            max-width: 360px;
+            margin: 0 auto 100px;
+            padding: 45px;
+            text-align: center;
+            border-radius: 10px;
+            display: block;
+        }
+
+        h2 {
+            font-weight: bold;
+            font-size: 28px;
+            margin-bottom: 25px;
+            color: #fafafa;
+        }
+
+        input[type="text"],
+        input[type="password"] {
+            font-family: "Helvetica Neue", Helvetica, sans-serif;
+            font-size: 16px;
+            outline: none;
+            padding: 15px;
+            display: block;
+            width: 87%;
+            border: none;
+            border-radius: 5px;
+            margin: 10px 0;
+            background-color: #404040;
+            color: #fafafa;
+        }
+
+        input[type="submit"] {
+            font-family: "Helvetica Neue", Helvetica, sans-serif;
+            font-size: 16px;
+            text-transform: uppercase;
+            outline: none;
+            background: #6d4c41;
+            color: #fafafa;
+            padding: 15px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            width: 50%;
+            margin: 10px 0;
+            transition: background-color 0.2s ease-out;
+        }
+
+        input[type="submit"]:hover {
+            background-color: #5c3d31;
+        }
+
+        .form:before {
+            content: "";
+            display: block;
+            position: absolute;
+            z-index: -1;
+            top: -20px;
+            left: -20px;
+            right: -20px;
+            bottom: -20px;
+            background: -webkit-linear-gradient(top left, #d9d9d9 0%, #f5f5f5 100%);
+            background: linear-gradient(to bottom right, #d9d9d9 0%, #f5f5f5 100%);
+            border-radius: 10px;
+        }
+
+        .form:after {
+            content: "";
+            display: block;
+            position: absolute;
+            z-index: -1;
+            top: -15px;
+            left: -15px;
+            right: -15px;
+            bottom: -15px;
+            background-color: #282828;
+            border-radius: 10px;
+            box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.1);
+            filter: blur(0px);
+            opacity: 0.5;
+            animation: animateBlur 20s linear infinite;
+        }
+
+        @keyframes animateBlur {
+            0% {
+                filter: blur(0px);
+            }
+            25% {
+                filter: blur(5px);
+            }
+            50% {
+                filter: blur(10px);
+            }
+            75% {
+                filter: blur(5px);
+            }
+            100% {
+                filter: blur(0px);
+            }
+        }
+
+        .social-login {
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-top: 30px;
+        }
+
+        .social-login a {
+            position: relative;
+            display: block;
+            width: 40px;
+            height: 40px;
+            background-color: #fafafa;
+            border-radius: 50%;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+            transition: all 0.2s ease-out;
+        }
+
+        .social-login a:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
+        }
+
+        .social-login a i {
+            font-size: 20px;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: #6d4c41;
+        }
+
+        .social-login .facebook {
+            background-color: #3b5998;
+        }
+
+        .social-login .twitter {
+            background-color: #1da1f2;
+        }
+
+        .social-login .google {
+            background-color: #db4a39;
+        }
+
+        #login-form {
+            display: none;
+        }
+
+        #login-form:checked ~ .form {
+            display: block;
+            animation-duration: 0.5s;
+            animation-name: slideInDown;
+            animation-fill-mode: both;
+        }
+
+        #login-form:not(:checked) ~ .form {
+            display: block;
+        }
+
+        @keyframes slideInDown {
+            from {
+                transform: translateY(-100%);
+                opacity: 0;
+            }
+            to {
+                transform: translateY(0);
+                opacity: 1;
+            }
+        }
+
+    </style>
+</head>
+
+<body>
+    <div class="container">
+
+
+        <input type="checkbox" id="login-form">
+        <label for="login-form" class="logo"></label>
+
+        <div class="form">
+            <h2>动态酷炫登录页面</h2>
+            <form action="#" method="post">
+                <input type="text" name="username" placeholder="用户名">
+                <input type="password" name="password" placeholder="密码">
+                <input type="submit" name="submit" value="登录">
+            </form>
+        </div>
+    </div>
+
+    <script type="text/javascript">
+        function animateBlur() {
+            var blur = 0;
+            var blurStep = 1;
+            var blurMax = 10;
+            var blurMin = 0;
+            var blurDir = 1;
+            var formAfter = document.querySelector('.form:after');
+            setInterval(function () {
+                if (blur == blurMax) blurDir = -1;
+                if (blur == blurMin) blurDir = 1;
+                blur += blurStep * blurDir;
+                formAfter.style.filter = 'blur(' + blur + 'px)';
+            }, 100);
+        }
+        animateBlur();
+    </script>
+</body>
 </html>
-- 
GitLab

