wartana/btlabel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement login functionality with captcha verification and associated UI.

Browse Source
This commit is contained in:
Wartana
2026-03-10 15:54:17 +08:00
parent 03269c9430
commit 5714ef4877
3 changed files with 259 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
index.html
View File

@@ -12,9 +12,51 @@
</head>
<body>
<div id="loginOverlay" class="login-overlay">
<div class="login-card">
<header class="login-header">
<div class="icon-container">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
</svg>
</div>
<h1>Login Access</h1>
<p>Please enter your credentials to continue</p>
</header>
<form id="loginForm">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Type admin" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Type admin" required>
</div>
<div class="form-group">
<label>Security Verification</label>
<div class="captcha-container">
<canvas id="captchaCanvas" width="150" height="50"></canvas>
<button type="button" id="refreshCaptcha" class="icon-btn" title="Refresh Captcha">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path>
<path d="M21 3v5h-5"></path>
</svg>
</button>
</div>
<input type="text" id="captchaInput" placeholder="Enter characters above" required>
</div>
<div id="loginError" class="error-message" style="display: none;"></div>
<button type="submit" class="primary-btn full-width">Sign In</button>
</form>
</div>
</div>
<div class="app-background"></div>
<div class="container">
<div class="container" id="appContainer" style="display: none;">
<header class="app-header">
<div class="icon-container">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
@@ -99,6 +141,7 @@
</footer>
</div>
<script src="login.js"></script>
<script src="app.js"></script>
</body>