Hugging Face's logo

Spaces:
robiul487
/
NCAkit
Sleeping

App Files Community
ismdrobiul489 commited on
Commit
e665557
·
1 Parent(s): 1ccab01

feat: Add client-side login system with username/password authentication

Browse files
Files changed (3) hide show
  1. static/css/styles.css +113 -0
  2. static/index.html +26 -1
  3. static/js/main.js +65 -0
static/css/styles.css CHANGED
@@ -189,6 +189,7 @@ textarea {
189
  .form-row {
190
  grid-template-columns: 1fr;
191
  }
 
192
  .tabs {
193
  flex-direction: column;
194
  }
@@ -357,3 +358,115 @@ textarea {
357
  color: white;
358
  cursor: pointer;
359
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
189
  .form-row {
190
  grid-template-columns: 1fr;
191
  }
192
+
193
  .tabs {
194
  flex-direction: column;
195
  }
 
358
  color: white;
359
  cursor: pointer;
360
  }
361
+
362
+ /* ============================================
363
+ LOGIN SCREEN STYLES
364
+ ============================================ */
365
+ .login-overlay {
366
+ position: fixed;
367
+ top: 0;
368
+ left: 0;
369
+ width: 100%;
370
+ height: 100%;
371
+ background: var(--bg-primary);
372
+ display: flex;
373
+ align-items: center;
374
+ justify-content: center;
375
+ z-index: 10000;
376
+ }
377
+
378
+ .login-box {
379
+ background: var(--bg-card);
380
+ border-radius: 20px;
381
+ padding: 2.5rem;
382
+ width: 100%;
383
+ max-width: 400px;
384
+ border: 1px solid var(--border);
385
+ box-shadow: 0 20px 60px rgba(99, 102, 241, 0.15);
386
+ }
387
+
388
+ .login-header {
389
+ text-align: center;
390
+ margin-bottom: 2rem;
391
+ }
392
+
393
+ .login-header h1 {
394
+ font-size: 2rem;
395
+ background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
396
+ -webkit-background-clip: text;
397
+ background-clip: text;
398
+ -webkit-text-fill-color: transparent;
399
+ margin-bottom: 0.5rem;
400
+ }
401
+
402
+ .login-header p {
403
+ color: var(--text-secondary);
404
+ }
405
+
406
+ .login-field {
407
+ margin-bottom: 1.25rem;
408
+ }
409
+
410
+ .login-field label {
411
+ display: block;
412
+ margin-bottom: 0.5rem;
413
+ color: var(--text-secondary);
414
+ font-size: 0.9rem;
415
+ }
416
+
417
+ .login-field input {
418
+ width: 100%;
419
+ padding: 0.9rem 1rem;
420
+ background: var(--bg-secondary);
421
+ border: 1px solid var(--border);
422
+ border-radius: 10px;
423
+ color: var(--text-primary);
424
+ font-size: 1rem;
425
+ transition: all 0.3s;
426
+ }
427
+
428
+ .login-field input:focus {
429
+ outline: none;
430
+ border-color: var(--accent);
431
+ box-shadow: 0 0 15px var(--accent-glow);
432
+ }
433
+
434
+ .login-btn {
435
+ width: 100%;
436
+ padding: 1rem;
437
+ margin-top: 1rem;
438
+ font-size: 1.1rem;
439
+ }
440
+
441
+ .login-error {
442
+ margin-top: 1rem;
443
+ padding: 0.75rem;
444
+ background: rgba(239, 68, 68, 0.1);
445
+ border: 1px solid var(--error);
446
+ border-radius: 8px;
447
+ color: var(--error);
448
+ text-align: center;
449
+ }
450
+
451
+ .logout-btn {
452
+ position: absolute;
453
+ top: 1rem;
454
+ right: 1rem;
455
+ padding: 0.5rem 1rem;
456
+ background: rgba(239, 68, 68, 0.2);
457
+ border: 1px solid var(--error);
458
+ border-radius: 8px;
459
+ color: var(--error);
460
+ cursor: pointer;
461
+ font-size: 0.9rem;
462
+ transition: all 0.2s;
463
+ }
464
+
465
+ .logout-btn:hover {
466
+ background: var(--error);
467
+ color: white;
468
+ }
469
+
470
+ header {
471
+ position: relative;
472
+ }
static/index.html CHANGED
@@ -10,10 +10,34 @@
10
  </head>
11
 
12
  <body>
13
- <div class="container">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14
  <header>
15
  <h1>🤖 NCAkit</h1>
16
  <p>Neural Content Automation Toolkit</p>
 
17
  </header>
18
 
19
  <!-- Tabs -->
@@ -478,6 +502,7 @@
478
  <div id="textStoryStatus" class="status hidden"></div>
479
  </div>
480
  </div>
 
481
 
482
  <!-- Chat Widget Button -->
483
  <button id="chatBtn"
 
10
  </head>
11
 
12
  <body>
13
+ <!-- Login Overlay -->
14
+ <div id="loginOverlay" class="login-overlay">
15
+ <div class="login-box">
16
+ <div class="login-header">
17
+ <h1>🔐 NCAkit</h1>
18
+ <p>Login to continue</p>
19
+ </div>
20
+ <form id="loginForm">
21
+ <div class="login-field">
22
+ <label>Username</label>
23
+ <input type="text" id="loginUsername" placeholder="Enter username" required>
24
+ </div>
25
+ <div class="login-field">
26
+ <label>Password</label>
27
+ <input type="password" id="loginPassword" placeholder="Enter password" required>
28
+ </div>
29
+ <button type="submit" class="btn btn-primary login-btn">🚀 Login</button>
30
+ <div id="loginError" class="login-error hidden"></div>
31
+ </form>
32
+ </div>
33
+ </div>
34
+
35
+ <!-- Main App Container (hidden until login) -->
36
+ <div id="mainApp" class="container hidden">
37
  <header>
38
  <h1>🤖 NCAkit</h1>
39
  <p>Neural Content Automation Toolkit</p>
40
+ <button id="logoutBtn" class="logout-btn">🚪 Logout</button>
41
  </header>
42
 
43
  <!-- Tabs -->
 
502
  <div id="textStoryStatus" class="status hidden"></div>
503
  </div>
504
  </div>
505
+ </div> <!-- End mainApp container -->
506
 
507
  <!-- Chat Widget Button -->
508
  <button id="chatBtn"
static/js/main.js CHANGED
@@ -1,8 +1,73 @@
1
  /* NCAkit - Main JavaScript */
2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3
  // Wait for DOM to be ready
4
  document.addEventListener('DOMContentLoaded', function () {
5
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6
  // ============================================
7
  // TAB SWITCHING
8
  // ============================================
 
1
  /* NCAkit - Main JavaScript */
2
 
3
+ // ============================================
4
+ // 🔐 LOGIN CREDENTIALS (Easy to find if forgotten!)
5
+ // ============================================
6
+ const AUTH_CONFIG = {
7
+ username: "robiul",
8
+ password: "Robi1234",
9
+ storageKey: "ncakit_logged_in"
10
+ };
11
+
12
+ // ============================================
13
+ // AUTHENTICATION FUNCTIONS
14
+ // ============================================
15
+ function checkAuth() {
16
+ return localStorage.getItem(AUTH_CONFIG.storageKey) === "true";
17
+ }
18
+
19
+ function showApp() {
20
+ document.getElementById('loginOverlay').classList.add('hidden');
21
+ document.getElementById('mainApp').classList.remove('hidden');
22
+ }
23
+
24
+ function showLogin() {
25
+ document.getElementById('loginOverlay').classList.remove('hidden');
26
+ document.getElementById('mainApp').classList.add('hidden');
27
+ }
28
+
29
+ function handleLogin(e) {
30
+ e.preventDefault();
31
+ const username = document.getElementById('loginUsername').value;
32
+ const password = document.getElementById('loginPassword').value;
33
+ const errorEl = document.getElementById('loginError');
34
+
35
+ if (username === AUTH_CONFIG.username && password === AUTH_CONFIG.password) {
36
+ localStorage.setItem(AUTH_CONFIG.storageKey, "true");
37
+ errorEl.classList.add('hidden');
38
+ showApp();
39
+ } else {
40
+ errorEl.textContent = "❌ Incorrect username or password";
41
+ errorEl.classList.remove('hidden');
42
+ }
43
+ }
44
+
45
+ function handleLogout() {
46
+ localStorage.removeItem(AUTH_CONFIG.storageKey);
47
+ showLogin();
48
+ // Clear form
49
+ document.getElementById('loginUsername').value = '';
50
+ document.getElementById('loginPassword').value = '';
51
+ }
52
+
53
  // Wait for DOM to be ready
54
  document.addEventListener('DOMContentLoaded', function () {
55
 
56
+ // ============================================
57
+ // AUTHENTICATION CHECK ON PAGE LOAD
58
+ // ============================================
59
+ if (checkAuth()) {
60
+ showApp();
61
+ } else {
62
+ showLogin();
63
+ }
64
+
65
+ // Login form handler
66
+ document.getElementById('loginForm').addEventListener('submit', handleLogin);
67
+
68
+ // Logout button handler
69
+ document.getElementById('logoutBtn').addEventListener('click', handleLogout);
70
+
71
  // ============================================
72
  // TAB SWITCHING
73
  // ============================================