From d641e08b756506e5c50011e7e0b4a103ec614dd5 Mon Sep 17 00:00:00 2001
From: shuaiplus <2327005759@qq.com>
Date: Sun, 25 May 2025 17:41:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=99=BB=E5=BD=95=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=EF=BC=8C=E7=AE=80=E5=8C=96=E6=A0=87=E7=AD=BE=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84=E5=B9=B6=E7=A7=BB=E9=99=A4=E4=B8=8D=E5=BF=85=E8=A6=81?=
 =?UTF-8?q?=E7=9A=84=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/css/form-animation.css | 16 +++++++++-------
 client/js/ui.js               | 12 +++---------
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/client/css/form-animation.css b/client/css/form-animation.css
index b7da935..c95139a 100644
--- a/client/css/form-animation.css
+++ b/client/css/form-animation.css
@@ -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;
+}
diff --git a/client/js/ui.js b/client/js/ui.js
index 0bca29c..6c18e5e 100644
--- a/client/js/ui.js
+++ b/client/js/ui.js
@@ -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>
 	`;