← back to Patterndesignlab
public/designer-login.html
55 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Designer sign in · Pattern Design Lab</title>
<link rel="stylesheet" href="/styles.css">
<style>
.authwrap{max-width:380px;margin:64px auto;padding:0 20px}
.card2{border:1px solid #e7e7e7;border-radius:16px;padding:28px;box-shadow:0 4px 18px rgba(0,0,0,.05)}
.card2 h1{font-size:22px;margin:0 0 4px}
.card2 p.sub{color:#6b6b6b;font-size:13px;margin:0 0 20px}
label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#555;margin:14px 0 5px}
input{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid #ddd;border-radius:10px;font-size:15px}
input:focus{outline:none;border-color:var(--accent-ink,#1c1c1c)}
.go{width:100%;margin-top:20px;padding:12px;border:0;border-radius:999px;background:var(--accent-ink,#1c1c1c);color:#fff;font-size:15px;cursor:pointer}
.go:disabled{opacity:.6;cursor:default}
.err{color:#c0392b;font-size:13px;margin-top:12px;min-height:16px}
</style>
</head>
<body>
<header class="top"><div class="wrap">
<a class="brand" href="/">Pattern Design<span class="dot">.</span>Lab</a>
<nav class="navlinks"><a href="/">Explore</a></nav>
</div></header>
<div class="authwrap">
<div class="card2">
<h1>Designer sign in</h1>
<p class="sub">Manage your studio profile and portfolio.</p>
<form id="f" onsubmit="return false">
<label for="email">Email</label>
<input id="email" type="email" autocomplete="username" placeholder="you@studio.com">
<label for="password">Password</label>
<input id="password" type="password" autocomplete="current-password" placeholder="••••••••">
<button class="go" id="go" type="submit">Sign in</button>
<div class="err" id="err"></div>
</form>
</div>
</div>
<script>
const $=id=>document.getElementById(id);
$('f').addEventListener('submit',async()=>{
$('err').textContent=''; $('go').disabled=true;
try{
const r=await fetch('/api/designer/login',{method:'POST',headers:{'Content-Type':'application/json'},
body:JSON.stringify({email:$('email').value,password:$('password').value})});
const j=await r.json();
if(!r.ok){ $('err').textContent=j.error||'Sign in failed'; $('go').disabled=false; return; }
location.href='/designer-dashboard';
}catch(e){ $('err').textContent='Network error'; $('go').disabled=false; }
});
</script>
</body>
</html>