Pocket — Mobile First Login

<main class="pk-wrap"><div class="pk-phone"><div class="pk-screen">
  <div class="pk-top"><div class="pk-logo" aria-hidden="true">◐</div><h1 class="pk-h1">Log in to Pocket</h1><p class="pk-sub">Welcome back 👋</p></div>
  <form data-auth novalidate>
    <div class="pk-field"><label for="pk-email">Email or phone</label><input id="pk-email" type="email" autocomplete="email" inputmode="email" placeholder="you@email.com" required></div>
    <div class="pk-field"><label for="pk-pw">Password</label><div class="pk-pw"><input id="pk-pw" type="password" autocomplete="current-password" placeholder="Password" required><button type="button" class="pk-toggle" data-pw-toggle="pk-pw" aria-pressed="false" aria-label="Toggle password">Show</button></div></div>
    <a href="#" class="pk-link pk-forgot">Forgot password?</a>
    <button type="submit" class="pk-btn">Log in</button>
  </form>
  <div class="pk-div"><span>or</span></div>
  <button type="button" class="pk-sso">Continue with Google</button>
  <p class="pk-foot-t">New here? <a href="#" class="pk-link">Create account</a></p>
  <footer class="pk-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}
.pk-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:linear-gradient(160deg,#eef2ff,#e0e7ff);color:#1e293b;font-family:'Inter',system-ui,sans-serif}
.pk-phone{width:100%;max-width:400px}
.pk-screen{background:#fff;border-radius:28px;padding:34px 26px 26px;box-shadow:0 24px 60px rgba(37,99,235,.16)}
.pk-top{text-align:center;margin-bottom:26px}
.pk-logo{width:60px;height:60px;border-radius:18px;margin:0 auto 16px;display:grid;place-items:center;font-size:1.7rem;color:#fff;background:linear-gradient(135deg,#2563eb,#3b82f6)}
.pk-h1{font-family:'Sora',sans-serif;font-weight:800;font-size:1.6rem;margin:0 0 4px}
.pk-sub{color:#64748b;font-size:.96rem;margin:0}
.pk-field{margin-bottom:16px}
.pk-field label{display:block;font-size:.86rem;font-weight:600;margin-bottom:7px;color:#334155}
.pk-field input{width:100%;height:54px;padding:0 16px;border:2px solid #d1ddf0;border-radius:14px;font:inherit;font-size:1.02rem;color:#1e293b;background:#f8faff}
.pk-field input::placeholder{color:#9aabc7}
.pk-field input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.16);background:#fff}
.pk-field input[aria-invalid=true]{border-color:#dc2626;box-shadow:0 0 0 4px rgba(220,38,38,.14)}
.pk-pw{position:relative}
.pk-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#64748b;font:inherit;font-size:.84rem;font-weight:600;cursor:pointer;padding:8px}
.pk-toggle:hover{color:#2563eb}.pk-toggle:focus-visible{outline:2px solid #2563eb;outline-offset:1px;border-radius:6px}
.pk-forgot{display:inline-block;margin:2px 0 20px;font-size:.88rem}
.pk-link{color:#2563eb;font-weight:600;text-decoration:none}.pk-link:hover{text-decoration:underline}
.pk-btn{width:100%;height:54px;border:0;border-radius:14px;background:#2563eb;color:#fff;font:inherit;font-weight:700;font-size:1.02rem;cursor:pointer;transition:transform .15s,box-shadow .15s}
.pk-btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(37,99,235,.34)}.pk-btn:focus-visible{outline:3px solid #93c5fd;outline-offset:2px}
.pk-div{display:flex;align-items:center;gap:12px;margin:18px 0;color:#94a3b8;font-size:.82rem}
.pk-div::before,.pk-div::after{content:'';flex:1;height:1px;background:#e2e8f0}
.pk-sso{width:100%;height:52px;border:2px solid #d1ddf0;border-radius:14px;background:#fff;color:#334155;font:inherit;font-weight:600;cursor:pointer;transition:.15s}
.pk-sso:hover{border-color:#2563eb;background:#f8faff}.pk-sso:focus-visible{outline:3px solid #93c5fd;outline-offset:2px}
.pk-foot-t{text-align:center;font-size:.9rem;color:#64748b;margin:20px 0 0}
.pk-foot{text-align:center;margin-top:20px;padding-top:18px;border-top:1px solid #eef2f6}
.x-by{font-size:.8rem;color:#94a3b8}.x-by a{color:#2563eb;text-decoration:none;font-weight:600}.x-by a:hover{text-decoration:underline}
@media(prefers-reduced-motion:reduce){.pk-btn{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);}});}})();