| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Cv3inx - Login</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&display=swap" rel="stylesheet"> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'JetBrains Mono', monospace; |
| background: linear-gradient(135deg, #0c0c0c 0%, #1a1a1a 100%); |
| color: #e4e4e7; |
| min-height: 100vh; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| overflow: hidden; |
| } |
| |
| .login-container { |
| background: rgba(24, 24, 27, 0.95); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(63, 63, 70, 0.5); |
| border-radius: 12px; |
| padding: 40px; |
| width: 100%; |
| max-width: 400px; |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .login-container::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 1px; |
| background: linear-gradient(90deg, transparent, #10b981, transparent); |
| } |
| |
| .login-header { |
| text-align: center; |
| margin-bottom: 32px; |
| } |
| |
| .logo { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 12px; |
| font-size: 24px; |
| font-weight: 600; |
| margin-bottom: 8px; |
| } |
| |
| .status-dot { |
| width: 12px; |
| height: 12px; |
| background: #10b981; |
| border-radius: 50%; |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0%, 100% { opacity: 1; transform: scale(1); } |
| 50% { opacity: 0.3; transform: scale(1.1); } |
| } |
| |
| .login-subtitle { |
| color: #a1a1aa; |
| font-size: 14px; |
| margin-top: 8px; |
| } |
| |
| .form-group { |
| margin-bottom: 24px; |
| } |
| |
| .form-label { |
| display: block; |
| color: #d4d4d8; |
| font-size: 13px; |
| font-weight: 500; |
| margin-bottom: 8px; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
| |
| .form-input { |
| width: 100%; |
| background: rgba(39, 39, 42, 0.8); |
| border: 1px solid rgba(63, 63, 70, 0.5); |
| border-radius: 8px; |
| padding: 12px 16px; |
| color: #e4e4e7; |
| font-family: inherit; |
| font-size: 14px; |
| transition: all 0.2s ease; |
| outline: none; |
| } |
| |
| .form-input:focus { |
| border-color: #10b981; |
| box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); |
| background: rgba(39, 39, 42, 0.95); |
| } |
| |
| .form-input::placeholder { |
| color: #71717a; |
| } |
| |
| .login-button { |
| width: 100%; |
| background: linear-gradient(135deg, #10b981 0%, #059669 100%); |
| border: none; |
| border-radius: 8px; |
| padding: 14px 24px; |
| color: white; |
| font-family: inherit; |
| font-size: 14px; |
| font-weight: 500; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
| |
| .login-button:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3); |
| } |
| |
| .login-button:active { |
| transform: translateY(0); |
| } |
| |
| .error-message { |
| background: rgba(239, 68, 68, 0.1); |
| border: 1px solid rgba(239, 68, 68, 0.3); |
| border-radius: 6px; |
| padding: 12px; |
| color: #fca5a5; |
| font-size: 13px; |
| margin-bottom: 20px; |
| text-align: center; |
| } |
| |
| .terminal-demo { |
| position: absolute; |
| top: 50%; |
| left: -300px; |
| transform: translateY(-50%); |
| background: rgba(12, 12, 12, 0.8); |
| border-radius: 8px; |
| padding: 20px; |
| width: 250px; |
| font-size: 11px; |
| line-height: 1.4; |
| border: 1px solid rgba(63, 63, 70, 0.3); |
| animation: float 6s ease-in-out infinite; |
| z-index: -1; |
| } |
| |
| .terminal-demo::before { |
| content: '$ '; |
| color: #10b981; |
| } |
| |
| @keyframes float { |
| 0%, 100% { transform: translateY(-50%) translateX(0); } |
| 50% { transform: translateY(-60%) translateX(10px); } |
| } |
| |
| .terminal-demo-right { |
| left: auto; |
| right: -300px; |
| animation-delay: 3s; |
| } |
| |
| @media (max-width: 768px) { |
| .login-container { |
| margin: 20px; |
| padding: 30px 24px; |
| } |
| |
| .terminal-demo, |
| .terminal-demo-right { |
| display: none; |
| } |
| } |
| |
| .footer { |
| text-align: center; |
| margin-top: 24px; |
| padding-top: 20px; |
| border-top: 1px solid rgba(63, 63, 70, 0.3); |
| color: #71717a; |
| font-size: 12px; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="terminal-demo"> |
| <div style="color: #10b981;">user@terminal:~$</div> |
| <div style="color: #e4e4e7;">ls -la</div> |
| <div style="color: #a1a1aa;">drwxr-xr-x 8 user user 4096</div> |
| <div style="color: #a1a1aa;">-rw-r--r-- 1 user user 220</div> |
| <div style="color: #10b981;">user@terminal:~$</div> |
| </div> |
|
|
| <div class="terminal-demo terminal-demo-right"> |
| <div style="color: #10b981;">root@server:/#</div> |
| <div style="color: #e4e4e7;">systemctl status</div> |
| <div style="color: #22c55e;">● Active (running)</div> |
| <div style="color: #a1a1aa;">Memory: 512.3M</div> |
| <div style="color: #10b981;">root@server:/#</div> |
| </div> |
|
|
| <div class="login-container"> |
| <div class="login-header"> |
| <div class="logo"> |
| Cv3inx |
| </div> |
| <div class="login-subtitle">Secure Shell Access</div> |
| </div> |
|
|
| <% if (error) { %> |
| <div class="error-message"> |
| ⚠️ <%= error %> |
| </div> |
| <% } %> |
|
|
| <form method="POST" action="/login"> |
| <div class="form-group"> |
| <label for="password" class="form-label">Password</label> |
| <input |
| type="password" |
| id="password" |
| name="password" |
| class="form-input" |
| placeholder="Enter your password" |
| required |
| autofocus |
| > |
| </div> |
|
|
| <button type="submit" class="login-button"> |
| Access Terminal |
| </button> |
| </form> |
|
|
| <div class="footer"> |
| <div>🔒 Secure connection established</div> |
| <div style="margin-top: 4px;">Made with ❤️ by <a href="//github.com/cv3inx" class="text-white">DitzzyAF</a></div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| document.getElementById('password').focus(); |
| |
| |
| document.querySelector('form').addEventListener('submit', function(e) { |
| const button = document.querySelector('.login-button'); |
| button.textContent = 'Connecting...'; |
| button.disabled = true; |
| }); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const container = document.querySelector('.login-container'); |
| container.style.opacity = '0'; |
| container.style.transform = 'translateY(20px)'; |
| |
| setTimeout(() => { |
| container.style.transition = 'all 0.5s ease'; |
| container.style.opacity = '1'; |
| container.style.transform = 'translateY(0)'; |
| }, 100); |
| }); |
| </script> |
| </body> |
| </html> |
