diff options
Diffstat (limited to 'web/html/login.html')
| -rw-r--r-- | web/html/login.html | 203 |
1 files changed, 107 insertions, 96 deletions
diff --git a/web/html/login.html b/web/html/login.html index fc38166b..7655c66f 100644 --- a/web/html/login.html +++ b/web/html/login.html @@ -49,6 +49,9 @@ border-radius: 2rem; padding: 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); @@ -68,10 +71,10 @@ z-index: 0; } .dark .under { - background-color: #0f2d32; + background-color: var(--dark-color-login-wave); } .dark #login { - background-color: #101113; + background-color: var(--dark-color-surface-100); } .dark h1 { color: rgba(255, 255, 255); @@ -199,7 +202,7 @@ z-index: -1; } .dark .waves-header { - background-color: #0a2227; + background-color: var(--dark-color-login-background); } .waves-inner-header { height: 50vh; @@ -219,7 +222,7 @@ animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; } .dark .parallax > use { - fill: #0f2d32; + fill: var(--dark-color-login-wave); } .parallax > use:nth-child(1) { animation-delay: -2s; @@ -373,98 +376,106 @@ } </style> <body> -<a-layout id="app" v-cloak :class="themeSwitcher.currentTheme"> - <transition name="list" appear> - <a-layout-content class="under" style="min-height: 0;"> - <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" - viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"> - <defs> - <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" /> - </defs> - <g class="parallax"> - <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(0, 135, 113, 0.08)" /> - <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(0, 135, 113, 0.08)" /> - <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(0, 135, 113, 0.08)" /> - <use xlink:href="#gentle-wave" x="48" y="7" fill="#c7ebe2" /> - </g> - </svg> - </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 style="width: 100%;"> - <h1 class="title headline zoom"> - <span class="words-wrapper"> - <b class="is-visible">{{ i18n "pages.login.title" }}</b> - <b>Hello!</b> - </span> - </h1> - </a-col> - </a-row> - <a-row type="flex" justify="center"> - <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;" /> - </a-input> - </a-form-item> - <a-form-item> - <password-input icon="lock" v-model.trim="user.password" placeholder='{{ i18n "password" }}' - @keydown.enter.native="login"> - </password-input> - </a-form-item> - <a-form-item v-if="secretEnable"> - <password-input icon="key" v-model.trim="user.loginSecret" placeholder='{{ i18n "secretToken" }}' - @keydown.enter.native="login"> - </password-input> - </a-input> - </a-form-item> - <a-form-item> - <a-row justify="center" class="centered"> - <div class="wave-btn-bg wave-btn-bg-cl" - :style="loading ? { width: '52px' } : { display: 'inline-block' }"> - <a-button class="ant-btn-primary-login" type="primary" :loading="loading" @click="login" - :icon="loading ? 'poweroff' : undefined"> - [[ loading ? '' : '{{ i18n "login" }}' ]] - </a-button> - </div> - </a-row> - </a-form-item> - <a-form-item> - <a-row justify="center" class="centered"> - <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> - <span v-text="l.name"></span> - </a-select-option> - </a-select> - </a-col> - </a-row> - </a-form-item> - <a-form-item> - <a-row justify="center" class="centered"> - <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> + <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme"> + <transition name="list" appear> + <a-layout-content class="under" style="min-height: 0;"> + <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" + viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"> + <defs> + <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" /> + </defs> + <g class="parallax"> + <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(0, 135, 113, 0.08)" /> + <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(0, 135, 113, 0.08)" /> + <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(0, 135, 113, 0.08)" /> + <use xlink:href="#gentle-wave" x="48" y="7" fill="#c7ebe2" /> + </g> + </svg> + </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 style="width: 100%;"> + <h1 class="title headline zoom"> + <span class="words-wrapper"> + <b class="is-visible">{{ i18n "pages.login.hello" }}</b> + <b>{{ i18n "pages.login.title" }}</b> + </span> + </h1> + </a-col> + </a-row> + <a-row type="flex" justify="center"> + <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;"></a-icon> + </a-input> + </a-form-item> + <a-form-item> + <password-input icon="lock" v-model.trim="user.password" + placeholder='{{ i18n "password" }}' + @keydown.enter.native="login"> + </password-input> + </a-form-item> + <a-form-item v-if="secretEnable"> + <password-input icon="key" v-model.trim="user.loginSecret" + placeholder='{{ i18n "secretToken" }}' + @keydown.enter.native="login"> + </password-input> + </a-form-item> + <a-form-item> + <a-row justify="center" class="centered"> + <div style="height: 50px;" class="wave-btn-bg wave-btn-bg-cl" + :style="loading ? { width: '52px' } : { display: 'inline-block' }"> + <a-button class="ant-btn-primary-login" type="primary" + :loading="loading" @click="login" + :icon="loading ? 'poweroff' : undefined"> + [[ loading ? '' : '{{ i18n "login" }}' ]] + </a-button> + </div> + </a-row> + </a-form-item> + <a-form-item> + <a-row justify="center" class="centered"> + <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> + <span v-text="l.name"></span> + </a-select-option> + </a-select> + </a-col> + </a-row> + </a-form-item> + <a-form-item> + <a-row justify="center" class="centered"> + <a-col> + <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon> + </a-col> + <a-col> + <theme-switch></theme-switch> + <a-checkbox v-if="themeSwitcher.isDarkTheme" style="padding-left: 1rem; vertical-align: middle;" + :checked="themeSwitcher.isUltra" + @click="themeSwitcher.toggleUltra()"> + Ultra + </a-checkbox> + </a-col> + </a-row> + </a-form-item> + </a-form> + </a-col> + </a-row> + </a-col> + </a-row> + </a-layout-content> + </transition> + </a-layout> {{template "js" .}} {{template "component/themeSwitcher" .}} {{template "component/password" .}} |