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:
Diffstat (limited to 'web/html/login.html')
-rw-r--r--web/html/login.html469
1 files changed, 10 insertions, 459 deletions
diff --git a/web/html/login.html b/web/html/login.html
index 968aa0bc..b561b732 100644
--- a/web/html/login.html
+++ b/web/html/login.html
@@ -1,456 +1,10 @@
{{ template "page/head_start" .}}
-<style>
- html * {
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
-
- h1 {
- text-align: center;
- /*margin: 20px 0 50px 0;*/
- height: 110px;
- }
-
- .ant-form-item-children .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;
- width: 100%;
- }
-
- .title {
- font-size: 2rem;
- margin-block-end: 2rem;
- }
-
- .title b {
- font-weight: bold !important;
- }
-
- #app {
- overflow: hidden;
- }
-
- #login {
- animation: charge 0.5s both;
- background-color: #fff;
- border-radius: 2rem;
- padding: 4rem 3rem;
- transition: all 0.3s;
- user-select: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- }
-
- #login:hover {
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
- }
-
- @keyframes charge {
- from {
- transform: translateY(5rem);
- opacity: 0;
- }
-
- to {
- transform: translateY(0);
- opacity: 1;
- }
- }
-
- .under {
- background-color: #c7ebe2;
- z-index: 0;
- }
-
- .dark .under {
- background-color: var(--dark-color-login-wave);
- }
-
- .dark #login {
- background-color: var(--dark-color-surface-100);
- }
-
- .dark h1 {
- color: rgba(255, 255, 255);
- }
-
- .ant-btn-primary-login {
- 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;
- }
-
- 50% {
- background-position: 1000px 0;
- }
-
- 100% {
- background-position: 1000px 0;
- }
- }
-
- .wave-btn-bg {
- position: relative;
- border-radius: 25px;
- width: 100%;
- transition: all 0.3s cubic-bezier(.645, .045, .355, 1);
- }
-
- .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%;
- width: 100%;
- z-index: 1;
- }
-
- .dark .wave-btn-bg:hover {
- animation: wave-btn-tara 4s ease infinite;
- }
-
- .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;
- }
-
- .waves-header {
- position: fixed;
- width: 100%;
- text-align: center;
- background-color: #dbf5ed;
- color: white;
- z-index: -1;
- }
-
- .dark .waves-header {
- background-color: var(--dark-color-login-background);
- }
-
- .waves-inner-header {
- height: 50vh;
- width: 100%;
- margin: 0;
- padding: 0;
- }
-
- .waves {
- position: relative;
- width: 100%;
- height: 15vh;
- margin-bottom: -8px;
- /*Fix for safari gap*/
- min-height: 100px;
- max-height: 150px;
- }
-
- .parallax>use {
- animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
- }
-
- .dark .parallax>use {
- fill: var(--dark-color-login-wave);
- }
-
- .parallax>use:nth-child(1) {
- animation-delay: -2s;
- animation-duration: 4s;
- opacity: 0.2;
- }
-
- .parallax>use:nth-child(2) {
- animation-delay: -3s;
- animation-duration: 7s;
- opacity: 0.4;
- }
-
- .parallax>use:nth-child(3) {
- animation-delay: -4s;
- animation-duration: 10s;
- opacity: 0.6;
- }
-
- .parallax>use:nth-child(4) {
- animation-delay: -5s;
- animation-duration: 13s;
- }
-
- @keyframes move-forever {
- 0% {
- transform: translate3d(-90px, 0, 0);
- }
-
- 100% {
- transform: translate3d(85px, 0, 0);
- }
- }
-
- @media (max-width: 768px) {
- .waves {
- height: 40px;
- min-height: 40px;
- }
- }
-
- .words-wrapper {
- width: 100%;
- display: inline-block;
- position: relative;
- text-align: center;
- }
-
- .words-wrapper b {
- width: 100%;
- display: inline-block;
- position: absolute;
- left: 0;
- top: 0;
- }
-
- .words-wrapper b.is-visible {
- position: relative;
- }
-
- .headline.zoom .words-wrapper {
- -webkit-perspective: 300px;
- -moz-perspective: 300px;
- perspective: 300px;
- }
-
- .headline {
- display: flex;
- justify-content: center;
- align-items: center;
- }
-
- .headline.zoom b {
- opacity: 0;
- }
-
- .headline.zoom b.is-visible {
- opacity: 1;
- -webkit-animation: zoom-in 0.8s;
- -moz-animation: zoom-in 0.8s;
- animation: cubic-bezier(0.215, 0.610, 0.355, 1.000) zoom-in 0.8s;
- }
-
- .headline.zoom b.is-hidden {
- -webkit-animation: zoom-out 0.8s;
- -moz-animation: zoom-out 0.8s;
- animation: cubic-bezier(0.215, 0.610, 0.355, 1.000) zoom-out 0.4s;
- }
-
- @-webkit-keyframes zoom-in {
- 0% {
- opacity: 0;
- -webkit-transform: translateZ(100px);
- }
-
- 100% {
- opacity: 1;
- -webkit-transform: translateZ(0);
- }
- }
-
- @-moz-keyframes zoom-in {
- 0% {
- opacity: 0;
- -moz-transform: translateZ(100px);
- }
-
- 100% {
- opacity: 1;
- -moz-transform: translateZ(0);
- }
- }
-
- @keyframes zoom-in {
- 0% {
- opacity: 0;
- -webkit-transform: translateZ(100px);
- -moz-transform: translateZ(100px);
- -ms-transform: translateZ(100px);
- -o-transform: translateZ(100px);
- transform: translateZ(100px);
- }
-
- 100% {
- opacity: 1;
- -webkit-transform: translateZ(0);
- -moz-transform: translateZ(0);
- -ms-transform: translateZ(0);
- -o-transform: translateZ(0);
- transform: translateZ(0);
- }
- }
-
- @-webkit-keyframes zoom-out {
- 0% {
- opacity: 1;
- -webkit-transform: translateZ(0);
- }
-
- 100% {
- opacity: 0;
- -webkit-transform: translateZ(-100px);
- }
- }
-
- @-moz-keyframes zoom-out {
- 0% {
- opacity: 1;
- -moz-transform: translateZ(0);
- }
-
- 100% {
- opacity: 0;
- -moz-transform: translateZ(-100px);
- }
- }
-
- @keyframes zoom-out {
- 0% {
- opacity: 1;
- -webkit-transform: translateZ(0);
- -moz-transform: translateZ(0);
- -ms-transform: translateZ(0);
- -o-transform: translateZ(0);
- transform: translateZ(0);
- }
-
- 100% {
- opacity: 0;
- -webkit-transform: translateZ(-100px);
- -moz-transform: translateZ(-100px);
- -ms-transform: translateZ(-100px);
- -o-transform: translateZ(-100px);
- transform: translateZ(-100px);
- }
- }
-
- .setting-section {
- position: absolute;
- top: 0;
- right: 0;
- padding: 22px;
- }
-
- .ant-space-item .ant-switch {
- margin: 2px 0 4px;
- }
-</style>
{{ template "page/head_end" .}}
{{ template "page/body_start" .}}
-<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme">
+<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme + ' login-app'">
<transition name="list" appear>
- <a-layout-content class="under" :style="{ minHeight: '0' }">
+ <a-layout-content class="under min-h-100vh">
<div class="waves-header">
<div class="waves-inner-header"></div>
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -466,11 +20,10 @@
</g>
</svg>
</div>
- <a-row type="flex" justify="center" align="middle"
- :style="{ height: '100%', overflow: 'auto', overflowX: 'hidden' }">
- <a-col :xs="22" :sm="12" :md="10" :lg="8" :xl="6" :xxl="5" id="login" :style="{ margin: '3rem 0' }">
+ <a-row type="flex" justify="center" align="middle" class="h-100 overflow-hidden-auto">
+ <a-col :xs="22" :sm="12" :md="10" :lg="8" :xl="6" :xxl="5" id="login" class="my-3rem">
<template v-if="!loadingStates.fetched">
- <div :style="{ textAlign: 'center' }">
+ <div class="text-center">
<a-spin size="large" />
</div>
</template>
@@ -482,7 +35,7 @@
<a-space direction="vertical" :size="10">
<a-theme-switch-login></a-theme-switch-login>
<span>{{ i18n "pages.settings.language" }}</span>
- <a-select ref="selectLang" :style="{ width: '100%' }" v-model="lang"
+ <a-select ref="selectLang" class="w-100" v-model="lang"
@change="LanguageManager.setLanguage(lang)" :dropdown-class-name="themeSwitcher.currentTheme">
<a-select-option :value="l.value" label="English" v-for="l in LanguageManager.supportedLanguages">
<span role="img" aria-label="l.name" v-text="l.icon"></span>
@@ -511,26 +64,24 @@
<a-form-item>
<a-input autocomplete="username" name="username" v-model.trim="user.username"
placeholder='{{ i18n "username" }}' autofocus required>
- <a-icon slot="prefix" type="user" :style="{ fontSize: '1rem' }"></a-icon>
+ <a-icon slot="prefix" type="user" class="fs-1rem"></a-icon>
</a-input>
</a-form-item>
<a-form-item>
<a-input-password autocomplete="password" name="password" v-model.trim="user.password"
placeholder='{{ i18n "password" }}' required>
- <a-icon slot="prefix" type="lock" :style="{ fontSize: '1rem' }"></a-icon>
+ <a-icon slot="prefix" type="lock" class="fs-1rem"></a-icon>
</a-input-password>
</a-form-item>
<a-form-item v-if="twoFactorEnable">
<a-input autocomplete="one-time-code" name="twoFactorCode" v-model.trim="user.twoFactorCode"
placeholder='{{ i18n "twoFactorCode" }}' required>
- <a-icon slot="prefix" type="key" :style="{ fontSize: '1rem' }"></a-icon>
+ <a-icon slot="prefix" type="key" class="fs-1rem"></a-icon>
</a-input>
</a-form-item>
<a-form-item>
<a-row justify="center" class="centered">
- <div
- :style="{ height: '50px', marginTop: '1rem', ...loadingStates.spinning ? { width: '52px' } : { display: 'inline-block' } }"
- class="wave-btn-bg wave-btn-bg-cl">
+ <div class="wave-btn-bg wave-btn-bg-cl h-50px mt-1rem" :style="loadingStates.spinning ? 'width: 52px' : 'display: inline-block'">
<a-button class="ant-btn-primary-login" type="primary" :loading="loadingStates.spinning"
:icon="loadingStates.spinning ? 'poweroff' : undefined" html-type="submit">
[[ loadingStates.spinning ? '' : '{{ i18n "login" }}' ]]
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-25 01:30:12 +0300