login.html

Rama main · réplica de lectura del repositorio original.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Meistertracker – Login</title>
<link rel="icon" href="/favicon.ico">
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;background:#f8fafc;color:#1e293b;font-size:15px;display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:36px;width:100%;max-width:380px;margin:16px;box-shadow:0 4px 6px -1px rgba(0,0,0,.07),0 2px 4px -2px rgba(0,0,0,.05)}
.login-logo{text-align:center;margin-bottom:8px;color:#16a34a}
h1{font-size:20px;font-weight:700;margin-bottom:4px;text-align:center}
.subtitle{color:#64748b;font-size:14px;text-align:center;margin-bottom:28px}
label{display:block;font-size:12px;font-weight:500;color:#64748b;margin-bottom:4px;margin-top:16px}
input[type="text"],input[type="password"]{width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:14px;font-family:inherit;background:#fff;transition:border-color .15s,box-shadow .15s}
input:focus{outline:none;border-color:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.12)}
.btn{width:100%;padding:12px;border:none;border-radius:8px;background:#16a34a;color:#fff;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;margin-top:24px;transition:background .15s}
.btn:hover{background:#15803d}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.loading{position:relative;color:transparent}
.btn.loading::after{content:'';position:absolute;width:18px;height:18px;top:50%;left:50%;margin:-9px 0 0 -9px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.error{background:#fee2e2;color:#991b1b;padding:10px 12px;border-radius:8px;font-size:13px;margin-top:16px;display:none}
.confirm-row{display:none}
</style>
</head>
<body>
<div class="login-card">
  <div class="login-logo"><svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="8" r="5"/><path d="M12 13v5M8 21h8M9 3c0 0-2-2-2-3M15 3c0 0 2-2 2-3"/></svg></div>
  <h1 id="title">Login</h1>
  <p class="subtitle" id="subtitle">Meistertracker</p>
  <form id="form" autocomplete="on">
    <label for="username">Username</label>
    <input type="text" id="username" name="username" autocomplete="username" required autofocus>
    <label for="password">Password</label>
    <input type="password" id="password" name="password" autocomplete="current-password" required>
    <div class="confirm-row" id="confirm-row">
      <label for="confirm">Confirm Password</label>
      <input type="password" id="confirm" name="confirm" autocomplete="new-password">
    </div>
    <div class="error" id="error" role="alert"></div>
    <button type="submit" class="btn" id="submit-btn">Login</button>
  </form>
</div>
<script src="/login.js"></script>
</body>
</html>