From 707cd28cb78f8750b61fe78ad5d158145d47549b Mon Sep 17 00:00:00 2001 From: shadowcz007 Date: Wed, 13 Mar 2024 17:42:28 +0800 Subject: [PATCH] add login ui --- web/index.html | 10 +- web/lib/login.css | 277 ++++++++++++++++++++++++++++++++++++++++++++++ web/lib/login.js | 62 +++++++++++ web/main.css | 24 ---- 4 files changed, 346 insertions(+), 27 deletions(-) create mode 100644 web/lib/login.css create mode 100644 web/lib/login.js delete mode 100644 web/main.css diff --git a/web/index.html b/web/index.html index ee1f011..e0155df 100644 --- a/web/index.html +++ b/web/index.html @@ -385,9 +385,11 @@ + +
ComfyUI中文爱好者社区推荐
- Community + Community + -
@@ -2431,6 +2433,8 @@ + + \ No newline at end of file diff --git a/web/lib/login.css b/web/lib/login.css new file mode 100644 index 0000000..d915780 --- /dev/null +++ b/web/lib/login.css @@ -0,0 +1,277 @@ +* { + transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1); +} + +#app-login { + width: 480px; + height: 90vh; + padding: 6vh; + background: white; + box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1); + z-index: 999; + position: fixed; + top: 5vh; + left: calc(50vw - 240px); +} + +.login-app-view { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 999; +} + +.login-background { + background-color: #202020e6; + position: fixed; + width: 100%; + height: 100vh; + left: 0; + top: 0; + z-index: 998; +} + +.app-header { + padding: 6vh; +} + +.app-header, +.app-header>* { + font-size: 1.2em; + margin: 0; + font-weight: 300; +} + +.app-header>h1 { + font-size: 4.8vh; + font-weight: 400; + margin-bottom: 4.8vh; +} + +.app-header>h2 { + font-size: 3vh; +} + +.app-subheading { + color: rgba(0, 0, 0, 0.45); +} + +.app-register { + position: absolute; + bottom: 0; + height: 10vh; + line-height: 10vh; + padding: 0 6vh; + color: rgba(0, 0, 0, 0.45); +} + +.app-register>a { + font-weight: 400; +} + + +#app-login input { + font-size: 2.5vh; + width: calc(100% - 13vh); + height: 7.5vh; + margin-bottom: 2vh; + background: transparent; + position: absolute; + top: 0; + left: 6.5vh; + z-index: 2; + border: none; + box-shadow: inset 0 -0.5vh rgba(0, 0, 0, 0.1); +} + +#app-login input:focus { + outline: none; + box-shadow: inset 0 -0.5vh transparent; +} + +#app-login input[type=email] { + top: 58%; +} + +#app-login input[type=password] { + top: calc(58% + 7.5vh); +} + +#app-login input[type=email]:valid~* .st1 { + transition-timing-function: ease-in-out; + stroke-dasharray: 50, 153; + stroke-dashoffset: 25; +} + +#app-login input[type=password]:focus~* .st0, +#app-login input[type=password]:valid~* .st0, +#login_run:focus~* .st0 { + stroke-dasharray: 210, 900; + stroke-dashoffset: -305; +} + +#app-login input[type=email]:focus~* .st0 { + stroke-dasharray: 210, 900; + stroke-dashoffset: 0; +} + +#app-login input:not(:valid)~#login_run { + /* pointer-events: none; */ + opacity: 0.6; +} + +#login_run { + text-decoration: none; + color: #0f9ede; + font-size: 1.5em; + padding: 0 6vh; + position: absolute; + bottom: 10vh; + font-weight: 400; + z-index: 998; + cursor: pointer; +} + +#login_run:focus { + outline: none; +} + +.login-app-view:nth-child(2) { + display: flex; + flex-direction: column; + pointer-events: none; +} + +.login-app-view:nth-child(2)>.app-header { + font-size: 1rem; + flex-basis: 25%; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 4vh; + padding-bottom: 1rem; +} + +.login-app-view:nth-child(2)>.app-header>h2 { + transform: translateY(1rem); +} + +.login-app-view:nth-child(2)>.app-header>h2>em { + color: #0f9ede; + font-style: normal; +} + +.login-app-view:nth-child(2)>.app-header>h2, +.login-app-view:nth-child(2) .app-item>*:not(.app-graphic) { + transition-duration: 0.9s; + opacity: 0; +} + + +.st0, +.st1, +.svg-loader-segment { + fill: none; + stroke: #0f9ede; + stroke-width: 0.5vh; + stroke-alignment: inside; + opacity: 1; + transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1); +} + +.svg-loader { + opacity: 0; +} + +.st0 { + stroke-dasharray: 0, 900; + stroke-dashoffset: 0; +} + +.st1 { + transition-delay: 0.3s; + stroke-dasharray: 50, 153; + stroke-dashoffset: -153; +} + +.svg-loader-segment { + transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.85s cubic-bezier(0.77, 0, 0.175, 1), stroke 0.85s cubic-bezier(0.77, 0, 0.175, 1); +} + +#svg-lines { + position: absolute; + top: 45%; + left: 0; + width: 100%; + z-index: 0; + overflow: visible; + transform-origin: center 4vh; +} + +.svg-data { + fill: none; + stroke-width: 0.5vh; +} + +.svg-data.-temp { + stroke: #f4814b; + stroke-dasharray: 20, 118; +} + +.svg-data.-cal { + stroke: #08b5cf; + stroke-dasharray: 20, 113; +} + +.svg-data.-steps-bg { + stroke: #e0e1e0; + stroke-dasharray: 40, 100; + stroke-dashoffset: -60; +} + +.svg-data.-steps { + stroke: #0f9ede; + stroke-dasharray: 20, 73; + stroke-dashoffset: -53; +} + +.svg-data.-heart { + stroke: #9965aa; + stroke-dasharray: 50, 200; + stroke-dashoffset: -150; +} + +.svg-activity-fill { + fill: #c4e4f8; +} + +.svg-activity-line { + fill: none; + stroke: #65bcea; + stroke-miterlimit: 10; + stroke-width: 0.25vh; +} + +.svg-activity-avg, +.svg-activity-indicator { + fill: none; + stroke: #d0dff0; + stroke-width: 0.25vh; + mix-blend-mode: multiply; +} + +.svg-activity-fill, +.svg-activity-line { + transform: translateY(10vh); + opacity: 0; +} + + +*, +*:before, +*:after { + box-sizing: border-box; + position: relative; +} \ No newline at end of file diff --git a/web/lib/login.js b/web/lib/login.js new file mode 100644 index 0000000..be9ef11 --- /dev/null +++ b/web/lib/login.js @@ -0,0 +1,62 @@ +;(() => { + let div = document.createElement('div') + + div.innerHTML = ` +
+ +
+
+ ` + + document.body.appendChild(div) + let bg = div.querySelector('.login-background') + bg.addEventListener('click', e => { + div.style.display = 'none' + }) + let login_btn = document.body.querySelector('#login_btn') + // login_btn.href=""; + login_btn.innerHTML = + 'LOGIN' + login_btn.addEventListener('click', e => { + e.preventDefault() + div.style.display = 'block' + }) + let login_run = div.querySelector('#login_run') + login_run.addEventListener('click', e => { + e.preventDefault() + let ps = div.querySelector('.password') + let email = div.querySelector('.email') + div.style.display = 'none' + console.log(ps.value, email.value) + }) +})() diff --git a/web/main.css b/web/main.css deleted file mode 100644 index 638266b..0000000 --- a/web/main.css +++ /dev/null @@ -1,24 +0,0 @@ -::-webkit-scrollbar { - width: 2px; -} - -@keyframes loading_mixlab { - 0% { - background-color: green; - } - - 50% { - background-color: lightgreen; - } - - 100% { - background-color: green; - } -} - -.loading_mixlab { - background-color: green; - animation-name: loading_mixlab; - animation-duration: 2s; - animation-iteration-count: infinite; -} \ No newline at end of file