MHSanaei/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2025-03-01 01:20:49 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

new login face #1286

Browse Source
This commit is contained in:
Alireza Ahmadi 2023-12-04 19:03:41 +01:00
parent 52614dc25c
commit 45a6ced462
1 changed files with 81 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
web/html/login.html
View File

@ -3,10 +3,6 @@
{{template "head" .}} {{template "head" .}}
<style> <style>
#app {
padding-top: 100px;
}
h1 { h1 {
text-align: center; text-align: center;
color: #fff; color: #fff;
@ -44,23 +40,88 @@
font-weight: bold; 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> </style>
<body> <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> <transition name="list" appear>
<a-layout-content> <a-layout-content class="under">
<a-row type="flex" justify="center"> <div class='wave'></div>
<a-col :xs="22" :sm="20" :md="16" :lg="12" :xl="8"> <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> <h1 class="title">{{ i18n "pages.login.title" }}</h1>
</a-col> </a-col>
</a-row> </a-row>
<a-row type="flex" justify="center"> <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>
<a-form-item> <a-form-item>
<a-input v-model.trim="user.username" placeholder='{{ i18n "username" }}' <a-input v-model.trim="user.username" placeholder='{{ i18n "username" }}'
@keydown.enter.native="login" autofocus> @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-input>
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
@ -84,8 +145,8 @@
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
<a-row justify="center" class="centered"> <a-row justify="center" class="centered">
<a-col :span="12"> <a-col :span="24">
<a-select ref="selectLang" v-model="lang" @change="setLang(lang)" :dropdown-class-name="themeSwitcher.darkCardClass"> <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"> <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 role="img" :aria-label="l.name" v-text="l.icon"></span>
&nbsp;&nbsp;<span v-text="l.name"></span> &nbsp;&nbsp;<span v-text="l.name"></span>
@ -96,12 +157,19 @@
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
<a-row justify="center" class="centered"> <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-row>
</a-form-item> </a-form-item>
</a-form> </a-form>
</a-col> </a-col>
</a-row> </a-row>
</a-col>
</a-row>
</a-layout-content> </a-layout-content>
</transition> </transition>
</a-layout> </a-layout>
@ -121,7 +189,6 @@
lang: "" lang: ""
}, },
async created() { async created() {
this.updateBackground();
this.lang = getLang(); this.lang = getLang();
this.secretEnable = await this.getSecretStatus(); this.secretEnable = await this.getSecretStatus();
}, },
@ -143,18 +210,6 @@
return msg.obj; 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();
},
}, },
}); });