eemc/lockscreen.html at main · CodeZohaib/eemc · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>EEMC Warehouse | Terminal Locked</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
    <meta name="color-scheme" content="light dark" />

    <!-- Fonts -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.3.0/index.css" crossorigin="anonymous" />
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css" crossorigin="anonymous" />
    <!-- AdminLTE CSS -->
    <link rel="stylesheet" href="dist/css/adminlte.css" />

    <style>
      body, html {
        height: 100%;
        margin: 0;
        font-family: 'Source Sans 3', sans-serif;
        background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
        color: #fff;
      }
      .lockscreen-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: 20px;
        box-sizing: border-box;
      }
      .lockscreen-card {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 30px 20px;
        border-radius: 16px;
        width: 100%;
        max-width: 400px;
        text-align: center;
        box-shadow: 0 15px 35px rgba(0,0,0,0.3);
      }
      .lockscreen-avatar {
        width: 85px;
        height: 85px;
        border-radius: 50%;
        border: 3px solid #0d6efd;
        object-fit: cover;
        margin-bottom: 15px;
        box-shadow: 0 5px 15px rgba(13, 110, 253, 0.3);
      }
      .terminal-badge {
        background: rgba(13, 110, 253, 0.2);
        color: #38bdf8;
        border: 1px solid rgba(13, 110, 253, 0.4);
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
        display: inline-block;
        margin-bottom: 15px;
      }
      @media (max-width: 576px) {
        .lockscreen-card {
          padding: 25px 15px;
        }
      }
    </style>
  </head>
  <body>

    <main class="lockscreen-wrapper">

      <div class="lockscreen-card">

        <div class="mb-2">
          <span class="terminal-badge"><i class="bi bi-shield-lock-fill me-1"></i> Session Locked</span>
        </div>

        <!-- User Avatar -->
        <div>
          <img src="dist/assets/img/user1-128x128.jpg" alt="Zohaib Khan" class="lockscreen-avatar" />
        </div>

        <!-- Name & Status -->
        <h4 class="fw-bold text-white mb-1">Zohaib Khan</h4>
        <p class="text-white-50 text-xs mb-4">EEMC Warehouse & Logistics • Receiving Terminal</p>

        <!-- Password Form -->
        <form action="index.html" method="POST">
          <div class="input-group mb-3 shadow-sm rounded overflow-hidden">
            <input
              id="lockscreenPassword"
              type="password"
              class="form-control bg-white text-dark shadow-none border-0 py-2 px-3"
              placeholder="Enter your password..."
              required
              autofocus
            />
            <button type="submit" class="btn btn-primary px-4 fw-bold" aria-label="Unlock Session">
              <i class="bi bi-arrow-right fs-5"></i>
            </button>
          </div>
        </form>

        <div class="mt-4 pt-3 border-top border-secondary">
          <a href="login.html" class="text-xs text-decoration-none text-info fw-semibold">
            <i class="bi bi-arrow-left me-1"></i> Sign in as a different user
          </a>
        </div>

      </div>

      <!-- Footer Info -->
      <div class="mt-4 text-center">
        <small class="text-white-50 text-xs">
          EEMC Warehouse & Logistics &bull; Copyright &copy; 2026
        </small>
      </div>

    </main>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
    <script src="dist/js/adminlte.js"></script>
  </body>
</html>