new login face #1286

MHSanaei · Dec 4, 2023 · 45a6ced · 45a6ced
1 parent 52614dc
commit 45a6ced
Showing 1 changed file with 81 additions and 26 deletions.
diff --git a/web/html/login.html b/web/html/login.html
@@ -3,10 +3,6 @@
 {{template "head" .}}
 <style>
 
-    #app {
-        padding-top: 100px;
-    }
-
     h1 {
         text-align: center;
         color: #fff;
@@ -44,23 +40,88 @@
         font-weight: bold;
     }
 
+    #app {
+        overflow: hidden;
+    }
+    #login {
+        animation: charge .5s both;
+        background-color: #fff;
+        border-radius: 2rem;
+        padding: 3rem;
+    }
+    #login:hover {
+        box-shadow: 0 2px 8px rgba(0,0,0,.09);
+    }
+    @keyframes charge {
+        from {transform: translateY(5rem);opacity: 0}
+        to {transform: translateY(0);opacity: 1}
+    }
+    @keyframes wave {
+        from {transform: rotate(0deg);}
+        to {transform: rotate(360deg);}
+    }
+    .wave {
+        opacity: .6;
+        position: absolute;
+        bottom: 40%;
+        left: 50%;
+        width: 6000px;
+        height: 6000px;
+        background: #000;
+        margin-left: -3000px;
+        transform-origin: 50% 48%;
+        border-radius: 46%;
+        animation: wave 72s infinite linear;
+        pointer-events: none;
+    }
+    .wave2 {
+        animation: wave 88s infinite linear;
+        opacity: .3;
+    }
+    .wave3 {
+        animation: wave 80s infinite linear;
+        opacity: .1;
+    }
+    .wave {
+        background: #0a755715;
+    }
+    .under {
+        background-color: #dbf5ed;
+    }
+    .dark .wave {
+        background: rgb(10 117 87 / 20%);
+    }
+    .dark .under {
+        background-color: #051510;
+    }
+    .dark #login {
+        background-color: rgb(8, 22, 20);
+    }
+    .dark h1 {
+        color: rgb(255 255 255 / 85%);
+    }
 </style>
 <body>
-<a-layout id="app" v-cloak class="login" :class="themeSwitcher.darkCardClass">
+<a-layout id="app" v-cloak class="login" :class="themeSwitcher.currentTheme">
     <transition name="list" appear>
-        <a-layout-content>
-            <a-row type="flex" justify="center">
-                <a-col :xs="22" :sm="20" :md="16" :lg="12" :xl="8">
+        <a-layout-content class="under">
+            <div class='wave'></div>
+            <div class='wave wave2'></div>
+            <div class='wave wave3'></div>
+            <a-row type="flex" justify="center" align="middle" style="height: 100%;">
+            <a-col :xs="22" :sm="20" :md="14" :lg="10" :xl="6" id="login">
+                <a-row type="flex" justify="center">
+                <a-col>
                     <h1 class="title">{{ i18n "pages.login.title" }}</h1>
                 </a-col>
             </a-row>
             <a-row type="flex" justify="center">
-                <a-col :xs="22" :sm="20" :md="16" :lg="12" :xl="8">
+                <a-col span="24">
                     <a-form>
                         <a-form-item>
                             <a-input v-model.trim="user.username" placeholder='{{ i18n "username" }}'
                                      @keydown.enter.native="login" autofocus>
-                                <a-icon slot="prefix" type="user" :style="'font-size: 16px;' + themeSwitcher.textStyle" />
+                                <a-icon slot="prefix" type="user" style="font-size: 16px;" />
                             </a-input>
                         </a-form-item>
                         <a-form-item>
@@ -84,8 +145,8 @@ <h1 class="title">{{ i18n "pages.login.title" }}</h1>
                         </a-form-item>
                         <a-form-item>
                             <a-row justify="center" class="centered">
-                                <a-col :span="12">
-                                    <a-select ref="selectLang" v-model="lang" @change="setLang(lang)" :dropdown-class-name="themeSwitcher.darkCardClass">
+                                <a-col :span="24">
+                                    <a-select ref="selectLang" v-model="lang" @change="setLang(lang)" :dropdown-class-name="themeSwitcher.currentTheme">
                                         <a-select-option :value="l.value" :label="l.value" v-for="l in supportLangs">
                                             <span role="img" :aria-label="l.name" v-text="l.icon"></span>
                                             &nbsp;&nbsp;<span v-text="l.name"></span>
@@ -96,12 +157,19 @@ <h1 class="title">{{ i18n "pages.login.title" }}</h1>
                         </a-form-item>
                         <a-form-item>
                             <a-row justify="center" class="centered">
-                                <theme-switch />
+                                <a-col>
+                                    <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>&nbsp;
+                                </a-col>
+                                <a-col>
+                                    <theme-switch />
+                                </a-col>
                             </a-row>
                         </a-form-item>
                     </a-form>
                 </a-col>
             </a-row>
+            </a-col>
+            </a-row>
         </a-layout-content>
     </transition>
 </a-layout>
@@ -121,7 +189,6 @@ <h1 class="title">{{ i18n "pages.login.title" }}</h1>
             lang: ""
         },
         async created() {
-            this.updateBackground();
             this.lang = getLang();
             this.secretEnable = await this.getSecretStatus();
         },
@@ -143,18 +210,6 @@ <h1 class="title">{{ i18n "pages.login.title" }}</h1>
                     return msg.obj;
                 }
             },
-            updateBackground() {
-                const leftColor = RandomUtil.randomIntRange(0x222222, 0xFFFFFF / 2).toString(16);
-                const rightColor = RandomUtil.randomIntRange(0xFFFFFF / 2, 0xDDDDDD).toString(16);
-                const deg = RandomUtil.randomIntRange(0, 360);
-                const background = `linear-gradient(${deg}deg, #${leftColor} 10%, #${rightColor} 100%)`;
-                document.querySelector('#app').style.background = this.themeSwitcher.isDarkTheme ? colors.dark.bg : background;
-            },
-        },
-        watch: {
-            'themeSwitcher.isDarkTheme'(newVal, oldVal) {
-                this.updateBackground();
-            },
         },
     });