okooooooo/nodecrypt
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化登录表单，简化标签结构并移除不必要的动画效果

Browse Source
This commit is contained in:
shuaiplus committed 2025-05-25 17:41:17 +08:00
1 parent 5fc5706c3a
commit d641e08b75
2 files changed
+12 -16
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/css/form-animation.css
+9 -7
View File
@@ -8,18 +8,20 @@
top: 14px;
left: 16px;
pointer-events: none;
}
.input-group .floating-label span {
display: inline-block;
font-size: 1.1rem;
color: #888;
transition: 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55);
min-width: 5px;
}
.input-group input:focus + .floating-label span,
.input-group input:not(:placeholder-shown) + .floating-label span {
.input-group input:focus + .floating-label,
.input-group input:not(:placeholder-shown) + .floating-label {
color: #30a8f7;
transform: translateY(-35px);
}
.input-group .floating-label span {
display: inline;
color: inherit;
transition: none;
min-width: 0;
}
client/js/ui.js
+3 -9
View File
@@ -301,21 +301,15 @@ export function generateLoginForm(isModal = false) {
return `
<div class="input-group">
<input id="userName${idPrefix}" type="text" autocomplete="username" required minlength="1" maxlength="15" placeholder="">
<label for="userName${idPrefix}" class="floating-label">
<span style="transition-delay:0ms">U</span><span style="transition-delay:40ms">s</span><span style="transition-delay:80ms">e</span><span style="transition-delay:120ms">r</span><span style="transition-delay:160ms">n</span><span style="transition-delay:200ms">a</span><span style="transition-delay:240ms">m</span><span style="transition-delay:280ms">e</span>
</label>
<label for="userName${idPrefix}" class="floating-label">Username</label>
</div>
<div class="input-group">
<input id="roomName${idPrefix}" type="text" required minlength="1" maxlength="15" placeholder="">
<label for="roomName${idPrefix}" class="floating-label">
<span style="transition-delay:0ms">N</span><span style="transition-delay:40ms">o</span><span style="transition-delay:80ms">d</span><span style="transition-delay:120ms">e</span><span style="transition-delay:160ms"> </span><span style="transition-delay:200ms">N</span><span style="transition-delay:240ms">a</span><span style="transition-delay:280ms">m</span><span style="transition-delay:320ms">e</span>
</label>
<label for="roomName${idPrefix}" class="floating-label">Node Name</label>
</div>
<div class="input-group">
<input id="password${idPrefix}" type="password" autocomplete="${isModal ? 'off' : 'current-password'}" minlength="1" maxlength="15" placeholder="">
<label for="password${idPrefix}" class="floating-label">
<span style="transition-delay:0ms">N</span><span style="transition-delay:40ms">o</span><span style="transition-delay:80ms">d</span><span style="transition-delay:120ms">e</span><span style="transition-delay:160ms"> </span><span style="transition-delay:200ms">P</span><span style="transition-delay:240ms">a</span><span style="transition-delay:280ms">s</span><span style="transition-delay:320ms">s</span><span style="transition-delay:360ms">w</span><span style="transition-delay:400ms">o</span><span style="transition-delay:440ms">r</span><span style="transition-delay:480ms">d</span><span style="transition-delay:520ms"> </span><span style="transition-delay:560ms" class="optional">(optional)</span>
</label>
<label for="password${idPrefix}" class="floating-label">Node Password <span class="optional">(optional)</span></label>
</div>
<button type="submit" class="login-btn">ENTER</button>
`;