Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/MHSanaei/3x-ui.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
path: root/web/html/login.html
diff options
context:
space:
mode:
authorHo3ein <ho3ein.sanaei@gmail.com>2023-12-10 17:42:52 +0300
committerGitHub <noreply@github.com>2023-12-10 17:42:52 +0300
commite3f1d3c892a1af48f27fdc36f273a55f38d13b40 (patch)
treeb11d0c1ed3c15c8f6f891a5e6df8e021d5db8ab6 /web/html/login.html
parent36cf7c0a8fda915b51e75958ce729fd9a61a5c90 (diff)
parent9fbe80f87f950673058f0001b3704251fa8b9243 (diff)
huge changes
Diffstat (limited to 'web/html/login.html')
-rw-r--r--web/html/login.html303
1 files changed, 240 insertions, 63 deletions
diff --git a/web/html/login.html b/web/html/login.html
index 61381a61..8f5a6f4d 100644
--- a/web/html/login.html
+++ b/web/html/login.html
@@ -2,65 +2,241 @@
<html lang="en">
{{template "head" .}}
<style>
-
- #app {
- padding-top: 100px;
+ h1 {
+ text-align: center;
+ margin: 20px 0 50px 0;
+ }
+ .ant-btn,
+ .ant-input {
+ height: 50px;
+ border-radius: 30px;
+ }
+ .ant-input-group-addon {
+ border-radius: 0 30px 30px 0;
+ width: 50px;
+ font-size: 18px;
+ }
+ .ant-input-affix-wrapper .ant-input-prefix {
+ left: 23px;
+ }
+ .ant-input-affix-wrapper .ant-input:not(:first-child) {
+ padding-left: 50px;
+ }
+ .centered {
+ display: flex;
+ text-align: center;
+ align-items: center;
+ justify-content: center;
+ }
+ .title {
+ font-size: 32px;
+ font-weight: bold;
+ }
+ #app {
+ overflow: hidden;
+ }
+ #login {
+ animation: charge 0.5s both;
+ background-color: #fff;
+ border-radius: 2rem;
+ padding: 3rem;
+ transition: all 0.3s;
+ }
+ #login:hover {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
+ }
+ @keyframes charge {
+ from {
+ transform: translateY(5rem);
+ opacity: 0;
}
-
- h1 {
- text-align: center;
- color: #fff;
- margin: 20px 0 50px 0;
+ to {
+ transform: translateY(0);
+ opacity: 1;
}
-
- .ant-btn, .ant-input {
- height: 50px;
- border-radius: 30px;
+ }
+ @keyframes wave {
+ from {
+ transform: rotate(0deg);
}
-
- .ant-input-group-addon {
- border-radius: 0 30px 30px 0;
- width: 50px;
- font-size: 18px;
+ to {
+ transform: rotate(360deg);
}
-
- .ant-input-affix-wrapper .ant-input-prefix {
- left: 23px;
+ }
+ .wave {
+ opacity: 0.6;
+ position: absolute;
+ bottom: 40%;
+ left: 50%;
+ width: 6000px;
+ height: 6000px;
+ background-color: rgba(0, 135, 113, 0.08);
+ 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: 0.3;
+ }
+ .wave3 {
+ animation: wave 80s infinite linear;
+ opacity: 0.1;
+ }
+ .under {
+ background-color: #dbf5ed;
+ }
+ .dark .wave {
+ background: rgb(10 117 87 / 20%);
+ }
+ .dark .under {
+ background-color: #101828;
+ }
+ .dark #login {
+ background-color: #151f31;
+ }
+ .dark h1 {
+ color: rgba(255, 255, 255, 0.85);
+ }
+ .ant-btn-primary-login {
+ color: #008771;
+ background-color: #eef9f7;
+ border-color: #89d9cc;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+ box-shadow: none;
+ width: 100%;
+ }
+ .ant-btn-primary-login:focus,
+ .ant-btn-primary-login:hover {
+ color: #fff;
+ background-color: #006655;
+ border-color: #006655;
+ background-image: linear-gradient(
+ 270deg,
+ rgba(123, 199, 77, 0) 30%,
+ #009980,
+ rgba(123, 199, 77, 0) 100%
+ );
+ background-repeat: no-repeat;
+ animation: ma-bg-move ease-in-out 5s infinite;
+ background-position-x: -500px;
+ width: 95%;
+ animation-delay: -0.5s;
+ box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
+ }
+ .ant-btn-primary-login.active,
+ .ant-btn-primary-login:active {
+ color: #fff;
+ background-color: #006655;
+ border-color: #006655;
+ }
+ @keyframes ma-bg-move {
+ 0% {
+ background-position: -500px 0;
}
-
- .ant-input-affix-wrapper .ant-input:not(:first-child) {
- padding-left: 50px;
+ 50% {
+ background-position: 1000px 0;
}
-
- .centered {
- display: flex;
- text-align: center;
- align-items: center;
- justify-content: center;
+ 100% {
+ background-position: 1000px 0;
}
-
- .title {
- font-size: 32px;
- font-weight: bold;
+ }
+ .wave-btn-bg {
+ position: relative;
+ border-radius: 25px;
+ width: 100%;
+ }
+ .dark .wave-btn-bg {
+ color: #fff;
+ position: relative;
+ background-color: #0a7557;
+ border: 2px double transparent;
+ background-origin: border-box;
+ background-clip: padding-box, border-box;
+ background-size: 300%;
+ animation: wave-btn-tara 4s ease infinite;
+ transition: all 0.5s ease;
+ width: 100%;
+ }
+ .dark .wave-btn-bg-cl {
+ background-image: linear-gradient(rgba(13, 14, 33, 0), rgba(13, 14, 33, 0)),
+ radial-gradient(circle at left top, #006655, #009980, #006655) !important;
+ border-radius: 3em;
+ }
+ .dark .wave-btn-bg-cl:hover {
+ width: 95%;
+ }
+ .dark .wave-btn-bg-cl:before {
+ position: absolute;
+ content: "";
+ top: -5px;
+ left: -5px;
+ bottom: -5px;
+ right: -5px;
+ z-index: -1;
+ background: inherit;
+ background-size: inherit;
+ border-radius: 4em;
+ opacity: 0;
+ transition: 0.5s;
+ }
+ .dark .wave-btn-bg-cl:hover::before {
+ opacity: 1;
+ filter: blur(20px);
+ animation: wave-btn-tara 8s linear infinite;
+ }
+ @keyframes wave-btn-tara {
+ to {
+ background-position: 300%;
}
-
+ }
+ .dark .ant-btn-primary-login {
+ font-size: 14px;
+ color: #fff;
+ text-align: center;
+ background-image: linear-gradient(
+ rgba(13, 14, 33, 0.45),
+ rgba(13, 14, 33, 0.35)
+ );
+ border-radius: 2rem;
+ border: none;
+ outline: none;
+ background-color: transparent;
+ height: 46px;
+ position: relative;
+ white-space: nowrap;
+ cursor: pointer;
+ touch-action: manipulation;
+ padding: 0 15px;
+ width: 100%;
+ animation: none;
+ background-position-x: 0;
+ box-shadow: none;
+ }
</style>
<body>
-<a-layout id="app" v-cloak class="login" :class="themeSwitcher.darkCardClass">
+<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
<transition name="list" appear>
- <a-layout-content>
+ <a-layout-content class="under" style="min-height: 0;">
+ <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%; overflow: auto;">
+ <a-col :xs="22" :sm="20" :md="14" :lg="10" :xl="8" :xxl="6" id="login" style="margin: 3rem 0;">
<a-row type="flex" justify="center">
- <a-col :xs="22" :sm="20" :md="16" :lg="12" :xl="8">
+ <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>
@@ -76,18 +252,20 @@
</a-form-item>
<a-form-item>
<a-row justify="center" class="centered">
- <a-button type="primary" :loading="loading" @click="login" :icon="loading ? 'poweroff' : undefined"
- :style="loading ? { width: '50px' } : { display: 'block', width: '100%' }">
- [[ loading ? '' : '{{ i18n "login" }}' ]]
- </a-button>
+ <div class="wave-btn-bg wave-btn-bg-cl">
+ <a-button class="ant-btn-primary-login" type="primary" :loading="loading" @click="login" :icon="loading ? 'poweroff' : undefined"
+ :style="loading ? { width: '50px' } : { display: 'inline-block' }">
+ [[ loading ? '' : '{{ i18n "login" }}' ]]
+ </a-button>
+ </div>
</a-row>
</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-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>
+ <a-col :span="24">
+ <a-select ref="selectLang" v-model="lang" @change="setLang(lang)" style="width: 150px;" :dropdown-class-name="themeSwitcher.currentTheme">
+ <a-select-option :value="l.value" label="English" 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>
</a-select-option>
</a-select>
@@ -96,12 +274,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>&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>
@@ -109,6 +294,12 @@
{{template "component/themeSwitcher" .}}
{{template "component/password" .}}
<script>
+ class User {
+ constructor() {
+ this.username = "";
+ this.password = "";
+ }
+ }
const app = new Vue({
delimiters: ['[[', ']]'],
@@ -121,7 +312,6 @@
lang: ""
},
async created() {
- this.updateBackground();
this.lang = getLang();
this.secretEnable = await this.getSecretStatus();
},
@@ -143,21 +333,8 @@
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();
- },
},
});
-
</script>
</body>
-</html> \ No newline at end of file
+</html>
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-27 02:41:34 +0300