nodes/shadowcz007-comfyui-mixlab-nodes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add login ui

Browse Source
This commit is contained in:
shadowcz007
2024-03-13 17:42:28 +08:00
parent ecdb687c25
commit 707cd28cb7
4 changed files with 346 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/index.html
+7 -3
View File
@@ -385,9 +385,11 @@
<link href="/extensions/comfyui-mixlab-nodes/lib/classic.min.css" rel="stylesheet">
<script src="/extensions/comfyui-mixlab-nodes/lib/pickr.min.js"></script>
<script src="/extensions/comfyui-mixlab-nodes/lib/filerobot-image-editor.min.js"></script>
<link rel="stylesheet" href="/extensions/comfyui-mixlab-nodes/lib/login.css">
</head>
<body>
<div id="editor_container"></div>
<div class="header">
<div style="margin: 0 24px;
@@ -400,16 +402,16 @@
<a class="link" href="https://www.mixcomfy.com" target="_blank">ComfyUI中文爱好者社区推荐</a>
</div>
<a target="_blank" href="https://www.mixcomfy.com/blog/" style="text-decoration: none;
<a target="_blank" id="login_btn" href="https://www.mixcomfy.com/blog/" style="text-decoration: none;
color: black;font-size:12px">
<svg height="32" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32" data-view-component="true"
class="octicon octicon-mark-github v-align-middle color-fg-default">
<path
d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z">
</path>
</svg> Community
</svg> Community</a>
</a>
</div>
<a id="author"></a>
<!-- <script type="module" src="https://cdn.bootcdn.net/ajax/libs/photoswipe/5.4.0/photoswipe-lightbox.esm.min.js"></script> -->
@@ -2431,6 +2433,8 @@
</script>
<!-- <script src="/extensions/comfyui-mixlab-nodes/lib/login.js"></script> -->
</body>
</html>
web/lib/login.css
+277
View File
@@ -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;
}
web/lib/login.js
+62
View File
@@ -0,0 +1,62 @@
;(() => {
let div = document.createElement('div')
div.innerHTML = `
<div id="app-login">
<div class="login-app-view">
<header class="app-header">
<h1>Hi</h1>
Welcome back,<br />
<span class="app-subheading">
sign in to continue<br />
</span>
</header>
<input class="email" type="email" required pattern=".*\.\w{2,}" placeholder="Email Address" />
<input class="password" type="password" required placeholder="Password" />
<a class="app-button" id="login_run">登录</a>
<!-- <div class="app-register">
Don't have an account? <a>Sign Up</a>
</div> -->
<svg id="svg-lines" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 284.2 152.7"
xml:space="preserve">
<path class="st0"
d="M37.7,107.3h222.6c12,0,21.8,9.7,21.8,21.7s-9.7,21.8-21.8,21.8c0,0-203.6,0-222.6,0S2.2,138.6,2.2,103.3 c0-52,113.5-101.5,141-101.5c13.5,0,21.8,9.7,21.8,21.8s-9.7,21.7-21.8,21.7s-21.8-9.7-21.8-21.7s9.7-21.8,21.8-21.8" />
<path class="st1"
d="M260.2,76.3L250,87.8l-9-9c-6.2-6.2,2-24.7,17.2-24.7c15.2,0,23.9,17.7,23.9,29.7s-11.7,23.5-23.9,23.5h-10.2">
</path>
<g class="svg-loader" xmlns="http://www.w3.org/2000/svg">
<path class="svg-loader-segment -cal" d="M164.7,23.5c0-12-9.7-21.8-21.8-21.8" />
<path class="svg-loader-segment -heart" d="M143,45.2c12,0,21.8-9.7,21.8-21.7" />
<path class="svg-loader-segment -steps" d="M121.2,23.5c0,12,9.7,21.7,21.8,21.7" />
<path class="svg-loader-segment -temp" d="M143,1.7c-12,0-21.8,9.7-21.8,21.8" />
</g>
</svg>
</div>
</div>
<div class="login-background"></div>
`
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 =
'<svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24" height="40px" width="40px" xmlns="http://www.w3.org/2000/svg"><path d="M12 17C14.2091 17 16 15.2091 16 13H8C8 15.2091 9.79086 17 12 17Z" fill="currentColor"></path><path d="M10 10C10 10.5523 9.55228 11 9 11C8.44772 11 8 10.5523 8 10C8 9.44772 8.44772 9 9 9C9.55228 9 10 9.44772 10 10Z" fill="currentColor"></path><path d="M15 11C15.5523 11 16 10.5523 16 10C16 9.44772 15.5523 9 15 9C14.4477 9 14 9.44772 14 10C14 10.5523 14.4477 11 15 11Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12Z" fill="currentColor"></path></svg>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)
})
})()
web/main.css
-24
View File
@@ -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;
}