Terminal — Developer Login

<main class="tm-wrap"><div class="tm-card">
  <div class="tm-bar"><span class="tm-dot tm-r"></span><span class="tm-dot tm-y"></span><span class="tm-dot tm-g"></span><span class="tm-title">auth — devforge login</span></div>
  <div class="tm-body">
    <p class="tm-line"><span class="tm-prompt">$</span> devforge auth login</p>
    <h1 class="tm-h1">Authenticate to DevForge</h1>
    <button type="button" class="tm-gh"><i aria-hidden="true">⌥</i> Continue with GitHub</button>
    <div class="tm-div"><span># or with email</span></div>
    <form data-auth novalidate>
      <div class="tm-field"><label for="tm-email">email</label><input id="tm-email" type="email" autocomplete="email" placeholder="dev@forge.io" required></div>
      <div class="tm-field"><label for="tm-pw">password</label><div class="tm-pw"><input id="tm-pw" type="password" autocomplete="current-password" placeholder="••••••••" required><button type="button" class="tm-toggle" data-pw-toggle="tm-pw" aria-pressed="false" aria-label="Toggle password">Show</button></div></div>
      <div class="tm-row"><label class="tm-check"><input type="checkbox"> keep session</label><a href="#" class="tm-link">reset token</a></div>
      <button type="submit" class="tm-btn">$ authenticate</button>
    </form>
    <p class="tm-hint"># tip: use a personal access token for CI environments</p>
    <p class="tm-foot-t">No account? <a href="#" class="tm-link">devforge signup</a></p>
    <footer class="tm-foot"><span class="x-by">Built with <a href="https://convertatlas.org" rel="noopener">convertatlas.org</a></span></footer>
  </div>
</div></main>

*{box-sizing:border-box}
.tm-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px 20px;background:#0a0e0a;color:#d3f9d8;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;background-image:radial-gradient(60% 50% at 50% 0%,rgba(34,197,94,.08),transparent)}
.tm-card{width:100%;max-width:440px;background:#0e140e;border:1px solid #1d2b1d;border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.tm-bar{display:flex;align-items:center;gap:8px;padding:12px 14px;background:#111a11;border-bottom:1px solid #1d2b1d}
.tm-dot{width:11px;height:11px;border-radius:50%}.tm-r{background:#ff5f56}.tm-y{background:#ffbd2e}.tm-g{background:#27c93f}
.tm-title{margin-left:8px;font-size:.78rem;color:#5f8f5f}
.tm-body{padding:28px 26px}
.tm-line{font-size:.86rem;color:#7fb87f;margin:0 0 18px}.tm-prompt{color:#22c55e;font-weight:700}
.tm-h1{font-family:'Sora',sans-serif;font-weight:800;font-size:1.4rem;color:#eafdec;margin:0 0 22px}
.tm-gh{width:100%;padding:12px;border:1px solid #2a3f2a;border-radius:9px;background:#14201400;background:#142014;color:#d3f9d8;font:inherit;font-weight:700;cursor:pointer;transition:.15s}
.tm-gh:hover{border-color:#22c55e;background:#16261600;background:#162616}.tm-gh:focus-visible{outline:3px solid #22c55e;outline-offset:2px}
.tm-div{display:flex;align-items:center;gap:12px;margin:18px 0;color:#4f7a4f;font-size:.78rem}
.tm-div::before,.tm-div::after{content:'';flex:1;height:1px;background:#1d2b1d}
.tm-field{margin-bottom:14px}
.tm-field label{display:block;font-size:.8rem;color:#6fa86f;margin-bottom:6px}
.tm-field label::before{content:'> ';color:#22c55e}
.tm-field input{width:100%;padding:11px 13px;border:1px solid #243524;border-radius:8px;font:inherit;font-size:.92rem;color:#eafdec;background:#0b110b}
.tm-field input::placeholder{color:#4f7a4f}
.tm-field input:focus{outline:none;border-color:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.25)}
.tm-field input[aria-invalid=true]{border-color:#f87171;box-shadow:0 0 0 3px rgba(248,113,113,.22)}
.tm-pw{position:relative}
.tm-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#6fa86f;font:inherit;font-size:.8rem;cursor:pointer;padding:6px 8px}
.tm-toggle:hover{color:#eafdec}.tm-toggle:focus-visible{outline:2px solid #22c55e;outline-offset:1px;border-radius:6px}
.tm-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:4px 0 18px;font-size:.82rem}
.tm-check{display:flex;align-items:center;gap:7px;color:#9fd6a4;cursor:pointer}.tm-check input{width:14px;height:14px;accent-color:#22c55e}
.tm-link{color:#4ade80;text-decoration:none}.tm-link:hover{text-decoration:underline}
.tm-btn{width:100%;padding:12px;border:0;border-radius:9px;background:#22c55e;color:#04140a;font:inherit;font-weight:700;cursor:pointer;transition:.15s}
.tm-btn:hover{background:#16a34a}.tm-btn:focus-visible{outline:3px solid #86efac;outline-offset:2px}
.tm-hint{font-size:.76rem;color:#4f7a4f;margin:16px 0 0}
.tm-foot-t{font-size:.84rem;color:#7fb87f;margin:16px 0 0;text-align:center}
.tm-foot{text-align:center;margin-top:18px;padding-top:16px;border-top:1px solid #1d2b1d}
.x-by{font-size:.78rem;color:#4f7a4f}.x-by a{color:#4ade80;text-decoration:none;font-weight:600}.x-by a:hover{text-decoration:underline}
@media(prefers-reduced-motion:reduce){.tm-btn,.tm-gh{transition:none}}

(function(){document.querySelectorAll('[data-pw-toggle]').forEach(function(b){b.addEventListener('click',function(){var inp=document.getElementById(b.getAttribute('data-pw-toggle'));if(!inp)return;var show=inp.type==='password';inp.type=show?'text':'password';b.setAttribute('aria-pressed',show?'true':'false');b.textContent=show?'Hide':'Show';});});var f=document.querySelector('form[data-auth]');if(f){f.addEventListener('submit',function(e){e.preventDefault();var ok=true;f.querySelectorAll('input[required]').forEach(function(i){if(!i.value||!i.checkValidity()){ok=false;i.setAttribute('aria-invalid','true');}else{i.removeAttribute('aria-invalid');}});if(!ok)return;var btn=f.querySelector('[type=submit]');if(btn){btn.textContent='Signing in…';setTimeout(function(){btn.textContent='✓ Signed in';},700);}});}})();