diff options
| -rw-r--r-- | web/html/login.html | 107 |
1 files changed, 81 insertions, 26 deletions
diff --git a/web/html/login.html b/web/html/login.html index 61381a61..40ce2a80 100644 --- 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 @@ </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> <span v-text="l.name"></span> @@ -96,12 +157,19 @@ </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> + </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 @@ lang: "" }, async created() { - this.updateBackground(); this.lang = getLang(); this.secretEnable = await this.getSecretStatus(); }, @@ -143,18 +210,6 @@ 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(); - }, }, }); |