diff options
Diffstat (limited to 'web/html')
| -rw-r--r-- | web/html/common/qrcode_modal.html | 8 | ||||
| -rw-r--r-- | web/html/common/text_modal.html | 4 | ||||
| -rw-r--r-- | web/html/login.html | 179 | ||||
| -rw-r--r-- | web/html/xui/fakedns_modal.html | 2 | ||||
| -rw-r--r-- | web/html/xui/index.html | 36 | ||||
| -rw-r--r-- | web/html/xui/settings.html | 8 |
6 files changed, 202 insertions, 35 deletions
diff --git a/web/html/common/qrcode_modal.html b/web/html/common/qrcode_modal.html index 7cc317ef..3fcfdfc1 100644 --- a/web/html/common/qrcode_modal.html +++ b/web/html/common/qrcode_modal.html @@ -11,7 +11,7 @@ <a-divider>{{ i18n "pages.settings.subSettings"}}</a-divider> <canvas @click="copyToClipboard('qrCode-sub',genSubLink(qrModal.client.subId))" id="qrCode-sub" - style="width: 100%; height: 100%; display: flex; border-radius: 1rem;"> + class="qr-bg"> </canvas> <a-divider>{{ i18n "pages.settings.subSettings"}} Json</a-divider> <canvas @click="copyToClipboard('qrCode-subJson',genSubJsonLink(qrModal.client.subId))" @@ -21,10 +21,10 @@ </template> <a-divider>{{ i18n "pages.inbounds.client" }}</a-divider> <template v-for="(row, index) in qrModal.qrcodes"> - <a-tag color="blue" style="margin: 10px 0; display: block; text-align: center;">[[ row.remark ]]</a-tag> + <a-tag color="green" style="margin: 10px 0; display: block; text-align: center;">[[ row.remark ]]</a-tag> <canvas @click="copyToClipboard('qrCode-'+index, row.link)" :id="'qrCode-'+index" - style="width: 100%; height: 100%; display: flex; border-radius: 1rem;"></canvas> + class="qr-bg"></canvas> </template> </a-modal> @@ -110,4 +110,4 @@ }); </script> -{{end}}
\ No newline at end of file +{{end}} diff --git a/web/html/common/text_modal.html b/web/html/common/text_modal.html index 68387be2..d668c792 100644 --- a/web/html/common/text_modal.html +++ b/web/html/common/text_modal.html @@ -9,7 +9,7 @@ </a-button> <a-button type="primary" id="copy-btn">{{ i18n "copy" }}</a-button> </template> - <a-input type="textarea" v-model="txtModal.content" + <a-input style="overflow-y: auto;" type="textarea" v-model="txtModal.content" :autosize="{ minRows: 10, maxRows: 20}"></a-input> </a-modal> @@ -53,4 +53,4 @@ }); </script> -{{end}}
\ No newline at end of file +{{end}} diff --git a/web/html/login.html b/web/html/login.html index b622a080..4605a4fd 100644 --- a/web/html/login.html +++ b/web/html/login.html @@ -2,9 +2,14 @@ <html lang="en"> {{template "head" .}} <style> + html * { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } h1 { text-align: center; - margin: 20px 0 50px 0; +/* margin: 20px 0 50px 0;*/ + height: 110px; } .ant-btn, .ant-input { @@ -31,7 +36,9 @@ } .title { font-size: 32px; - font-weight: 600; + } + .title b { + font-weight: bold !important; } #app { overflow: hidden; @@ -64,10 +71,10 @@ background-color: #0f2d32; } .dark #login { - background-color: #151f31; + background-color: #101113; } .dark h1 { - color: rgba(255, 255, 255, 0.85); + color: rgba(255, 255, 255); } .ant-form-item { margin-bottom: 16px; @@ -192,7 +199,7 @@ z-index: -1; } .dark .waves-header { - background-color: #101828; + background-color: #0a2227; } .waves-inner-header { height: 50vh; @@ -247,6 +254,123 @@ 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); + } + } </style> <body> <a-layout id="app" v-cloak :class="themeSwitcher.currentTheme"> @@ -269,8 +393,13 @@ <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> - <h1 class="title">{{ i18n "pages.login.title" }}</h1> + <a-col style="width: 100%;"> + <h1 class="title headline zoom"> + <span class="words-wrapper"> + <b class="is-visible">{{ i18n "pages.login.title" }}</b> + <b>3X-UI</b> + </span> + </h1> </a-col> </a-row> <a-row type="flex" justify="center"> @@ -377,6 +506,42 @@ }, }, }); + document.addEventListener("DOMContentLoaded", function() { + var animationDelay = 2000; + initHeadline(); + + function initHeadline() { + animateHeadline(document.querySelectorAll('.headline')); + } + + function animateHeadline(headlines) { + var duration = animationDelay; + headlines.forEach(function(headline) { + setTimeout(function() { + hideWord(headline.querySelector('.is-visible')); + }, duration); + }); + } + + function hideWord(word) { + var nextWord = takeNext(word); + switchWord(word, nextWord); + setTimeout(function() { + hideWord(nextWord); + }, animationDelay); + } + + function takeNext(word) { + return (word.nextElementSibling) ? word.nextElementSibling : word.parentElement.firstElementChild; + } + + function switchWord(oldWord, newWord) { + oldWord.classList.remove('is-visible'); + oldWord.classList.add('is-hidden'); + newWord.classList.remove('is-hidden'); + newWord.classList.add('is-visible'); + } + }); </script> </body> </html> diff --git a/web/html/xui/fakedns_modal.html b/web/html/xui/fakedns_modal.html index c830f44d..c3abe5d5 100644 --- a/web/html/xui/fakedns_modal.html +++ b/web/html/xui/fakedns_modal.html @@ -7,7 +7,7 @@ <a-input v-model.trim="fakednsModal.fakeDns.ipPool"></a-input> </a-form-item> <a-form-item label='{{ i18n "pages.xray.fakedns.poolSize" }}'> - <a-input type="number" min="1" v-model.trim="fakednsModal.fakeDns.poolSize"></a-input> + <a-input-number style="width: 100%;" type="number" min="1" v-model.trim="fakednsModal.fakeDns.poolSize"></a-input-number> </a-form-item> </a-form> </a-modal> diff --git a/web/html/xui/index.html b/web/html/xui/index.html index 86dbf6b8..1c3132d6 100644 --- a/web/html/xui/index.html +++ b/web/html/xui/index.html @@ -19,12 +19,14 @@ color: hsla(0, 0%, 100%, .65); } - .ant-tag-df { - color: rgb(0 0 0 / 80%); + .dark .ant-card-hoverable:hover, + .dark .ant-space-item > .ant-tabs:hover { + transform: scale(0.987); + outline-color: #40434d; } - .dark .ant-tag-df { - color: rgb(255 255 255 / 80%); + .dark .ant-card-bordered { + outline: 2px solid var(--dark-color-background); } </style> @@ -102,8 +104,8 @@ <a-col :sm="24" :lg="12"> <a-card hoverable> <b>{{ i18n "pages.index.operationHours" }}:</b> - <a-tag class="ant-tag-df">Xray [[ formatSecond(status.appStats.uptime) ]]</a-tag> - <a-tag class="ant-tag-df">OS [[ formatSecond(status.uptime) ]]</a-tag> + <a-tag color="green">Xray [[ formatSecond(status.appStats.uptime) ]]</a-tag> + <a-tag color="green">OS [[ formatSecond(status.uptime) ]]</a-tag> </a-card> </a-col> <a-col :sm="24" :lg="12"> @@ -137,7 +139,7 @@ <a-col :sm="24" :lg="12"> <a-card hoverable> <b>{{ i18n "pages.index.systemLoad" }}:</b> - <a-tag class="ant-tag-df"> + <a-tag color="green"> <a-tooltip> [[ status.loads[0] ]] | [[ status.loads[1] ]] | [[ status.loads[2] ]] <template slot="title"> @@ -150,10 +152,10 @@ <a-col :sm="24" :lg="12"> <a-card hoverable> <b>{{ i18n "usage"}}:</b> - <a-tag class="ant-tag-df"> + <a-tag color="green"> RAM [[ sizeFormat(status.appStats.mem) ]] </a-tag> - <a-tag class="ant-tag-df"> + <a-tag color="green"> Threads [[ status.appStats.threads ]] </a-tag> </a-card> @@ -162,7 +164,7 @@ <a-card hoverable> <a-row> <a-col :span="12"> - <a-tag class="ant-tag-df"> + <a-tag> <a-tooltip> <a-icon type="global"></a-icon> IPv4 <template slot="title"> @@ -172,7 +174,7 @@ </a-tag> </a-col> <a-col :span="12"> - <a-tag class="ant-tag-df"> + <a-tag> <a-tooltip> <a-icon type="global"></a-icon> IPv6 <template slot="title"> @@ -188,7 +190,7 @@ <a-card hoverable> <a-row> <a-col :span="12"> - <a-tag class="ant-tag-df"> + <a-tag> <a-tooltip> <a-icon type="swap"></a-icon> TCP: [[ status.tcpCount ]] <template slot="title"> @@ -198,7 +200,7 @@ </a-tag> </a-col> <a-col :span="12"> - <a-tag class="ant-tag-df"> + <a-tag> <a-tooltip> <a-icon type="swap"></a-icon> UDP: [[ status.udpCount ]] <template slot="title"> @@ -214,7 +216,7 @@ <a-card hoverable> <a-row> <a-col :span="12"> - <a-tag class="ant-tag-df"> + <a-tag> <a-tooltip> <a-icon type="arrow-up"></a-icon> Up: [[ sizeFormat(status.netIO.up) ]]/s @@ -225,7 +227,7 @@ </a-tag> </a-col> <a-col :span="12"> - <a-tag class="ant-tag-df"> + <a-tag> <a-tooltip> <a-icon type="arrow-down"></a-icon> Down: [[ sizeFormat(status.netIO.down) ]]/s @@ -242,7 +244,7 @@ <a-card hoverable> <a-row> <a-col :span="12"> - <a-tag class="ant-tag-df"> + <a-tag> <a-tooltip> <a-icon type="cloud-upload"></a-icon> <template slot="title"> @@ -252,7 +254,7 @@ </a-tag> </a-col> <a-col :span="12"> - <a-tag class="ant-tag-df"> + <a-tag> <a-tooltip> <a-icon type="cloud-download"></a-icon> <template slot="title"> diff --git a/web/html/xui/settings.html b/web/html/xui/settings.html index 62c53379..adc199a9 100644 --- a/web/html/xui/settings.html +++ b/web/html/xui/settings.html @@ -95,15 +95,15 @@ </a-alert> </transition> <a-space direction="vertical"> - <a-card hoverable style="margin-bottom: .5rem;"> - <a-row> - <a-col :xs="24" :sm="8" style="padding: 4px;"> + <a-card hoverable style="margin-bottom: .5rem; overflow-x: hidden;"> + <a-row style="display: flex; flex-wrap: wrap; align-items: center;"> + <a-col :xs="24" :sm="10" style="padding: 4px;"> <a-space direction="horizontal"> <a-button type="primary" :disabled="saveBtnDisable" @click="updateAllSetting">{{ i18n "pages.settings.save" }}</a-button> <a-button type="danger" :disabled="!saveBtnDisable" @click="restartPanel">{{ i18n "pages.settings.restartPanel" }}</a-button> </a-space> </a-col> - <a-col :xs="24" :sm="16"> + <a-col :xs="24" :sm="14"> <template> <div> <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200"> |