353 lines
12 KiB
HTML
353 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Log in — Abigail</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="styles.css">
|
|
<style>
|
|
body { background: var(--paper); }
|
|
|
|
/* Minimal nav for login */
|
|
nav .container { justify-content: space-between; }
|
|
nav .nav-links a { color: var(--mute); font-size: 13px; }
|
|
nav .nav-links a:hover { color: var(--ink); }
|
|
|
|
.login-shell {
|
|
min-height: calc(100vh - 64px);
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
/* Left panel */
|
|
.login-left {
|
|
padding: 80px 64px;
|
|
display: flex; flex-direction: column;
|
|
justify-content: center;
|
|
max-width: 560px;
|
|
margin-left: auto;
|
|
width: 100%;
|
|
}
|
|
.login-left h1 {
|
|
font-size: 36px; font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.1;
|
|
margin: 0 0 12px;
|
|
}
|
|
.login-left h1 em { font-style: normal; color: var(--signal); }
|
|
.login-left .sub {
|
|
font-size: 15px;
|
|
color: var(--mute);
|
|
margin: 0 0 32px;
|
|
}
|
|
|
|
.auth-form { display: flex; flex-direction: column; gap: 14px; }
|
|
.auth-form .field { margin-bottom: 0; }
|
|
.auth-form .field input {
|
|
padding: 12px 14px;
|
|
background: #FFFFFF;
|
|
}
|
|
.password-row {
|
|
display: flex; justify-content: space-between;
|
|
align-items: baseline;
|
|
}
|
|
.password-row a {
|
|
font-size: 12px;
|
|
color: var(--signal);
|
|
font-weight: 500;
|
|
}
|
|
.password-row a:hover { text-decoration: underline; }
|
|
.submit-btn {
|
|
width: 100%;
|
|
background: var(--ink);
|
|
color: var(--paper);
|
|
border: 0;
|
|
padding: 14px;
|
|
border-radius: 10px;
|
|
font: inherit;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background 0.15s;
|
|
margin-top: 6px;
|
|
}
|
|
.submit-btn:hover { background: var(--signal); }
|
|
|
|
.divider {
|
|
display: flex; align-items: center;
|
|
gap: 16px;
|
|
margin: 24px 0;
|
|
font-size: 12px;
|
|
color: var(--mute);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
.divider::before, .divider::after {
|
|
content: ""; flex: 1; height: 1px; background: var(--rule);
|
|
}
|
|
|
|
.oauth-row { display: flex; flex-direction: column; gap: 8px; }
|
|
.oauth-btn {
|
|
display: flex; align-items: center; justify-content: center;
|
|
gap: 10px;
|
|
background: #FFFFFF;
|
|
border: 1px solid var(--rule);
|
|
border-radius: 10px;
|
|
padding: 11px 14px;
|
|
font: inherit;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--ink);
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
.oauth-btn:hover {
|
|
border-color: var(--ink);
|
|
background: var(--paper-2);
|
|
}
|
|
.oauth-btn svg { flex-shrink: 0; }
|
|
|
|
.signup-link {
|
|
margin-top: 28px;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
color: var(--mute);
|
|
}
|
|
.signup-link a {
|
|
color: var(--ink);
|
|
font-weight: 600;
|
|
}
|
|
.signup-link a:hover { color: var(--signal); }
|
|
|
|
.legal-fine {
|
|
margin-top: 36px;
|
|
font-size: 11px;
|
|
color: var(--mute);
|
|
line-height: 1.6;
|
|
max-width: 360px;
|
|
}
|
|
.legal-fine a {
|
|
color: var(--mute);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Right panel */
|
|
.login-right {
|
|
background: var(--ink);
|
|
color: var(--paper);
|
|
padding: 80px 64px;
|
|
display: flex; flex-direction: column;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.login-right::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 600px; height: 600px;
|
|
background: radial-gradient(circle, var(--signal) 0%, transparent 60%);
|
|
top: -100px; right: -200px;
|
|
opacity: 0.18;
|
|
border-radius: 50%;
|
|
}
|
|
.login-right-inner {
|
|
position: relative;
|
|
max-width: 480px;
|
|
}
|
|
.right-eyebrow {
|
|
font-family: "JetBrains Mono", monospace;
|
|
font-size: 12px;
|
|
color: var(--signal);
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
margin-bottom: 20px;
|
|
}
|
|
.login-right h2 {
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.02em;
|
|
line-height: 1.15;
|
|
margin: 0 0 24px;
|
|
}
|
|
.login-right h2 em { font-style: normal; color: var(--signal); }
|
|
.login-right .right-lead {
|
|
font-size: 16px;
|
|
color: var(--mute-2);
|
|
line-height: 1.6;
|
|
margin: 0 0 32px;
|
|
}
|
|
.features {
|
|
display: flex; flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
.feat-row {
|
|
display: flex; align-items: flex-start; gap: 12px;
|
|
font-size: 14px;
|
|
color: var(--paper);
|
|
}
|
|
.feat-check {
|
|
width: 20px; height: 20px;
|
|
background: var(--signal);
|
|
border-radius: 50%;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
flex-shrink: 0;
|
|
color: white;
|
|
}
|
|
.feat-row span { color: var(--mute-2); }
|
|
|
|
@media (max-width: 880px) {
|
|
.login-shell { grid-template-columns: 1fr; }
|
|
.login-right { display: none; }
|
|
.login-left { padding: 48px 24px; max-width: 100%; margin: 0; }
|
|
nav .nav-links { display: none; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<nav>
|
|
<div class="container">
|
|
<a class="brand" href="index.html">Abigail<span class="brand-dot">.</span></a>
|
|
<div class="nav-links">
|
|
<a href="press.html">Press</a>
|
|
<a href="judging.html">Judging</a>
|
|
<a href="services.html">Services</a>
|
|
<a href="attorneys.html">Attorneys</a>
|
|
<div class="nav-dropdown" id="resourcesDropdown">
|
|
<button class="nav-trigger" aria-haspopup="true">
|
|
Resources
|
|
<svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 3.5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</button>
|
|
<div class="dropdown-menu" role="menu">
|
|
<a href="petitions.html">Petitions</a>
|
|
<a href="#">Articles</a>
|
|
<a href="#">Events</a>
|
|
<a href="#">Careers</a>
|
|
</div>
|
|
</div>
|
|
<a href="login.html" class="nav-login active">Log in</a>
|
|
<button class="theme-toggle" id="themeToggle" aria-label="Toggle theme">
|
|
<svg class="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
|
|
<svg class="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
|
|
</button>
|
|
<a href="#signup" class="nav-cta">Sign up</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="login-shell">
|
|
|
|
<!-- LEFT: Login form -->
|
|
<div class="login-left">
|
|
<h1>Welcome back to <em>Abigail.</em></h1>
|
|
<p class="sub">Sign in to continue your case.</p>
|
|
|
|
<form class="auth-form" onsubmit="event.preventDefault(); alert('Beta sign-in not yet active — please request access.');">
|
|
<div class="field">
|
|
<label>Email</label>
|
|
<input type="email" name="email" required placeholder="you@company.com" autocomplete="email">
|
|
</div>
|
|
<div class="field">
|
|
<div class="password-row">
|
|
<label>Password</label>
|
|
<a href="#reset">Forgot password?</a>
|
|
</div>
|
|
<input type="password" name="password" required placeholder="••••••••" autocomplete="current-password">
|
|
</div>
|
|
<button type="submit" class="submit-btn">Sign in</button>
|
|
</form>
|
|
|
|
<div class="divider">or continue with</div>
|
|
|
|
<div class="oauth-row">
|
|
<button class="oauth-btn" type="button" onclick="alert('SSO not yet active in beta.')">
|
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
<path d="M17.64 9.205c0-.639-.057-1.252-.164-1.841H9v3.481h4.844a4.14 4.14 0 01-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615z" fill="#4285F4"/>
|
|
<path d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 009 18z" fill="#34A853"/>
|
|
<path d="M3.964 10.71A5.41 5.41 0 013.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 000 9c0 1.452.348 2.827.957 4.042l3.007-2.332z" fill="#FBBC05"/>
|
|
<path d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 00.957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58z" fill="#EA4335"/>
|
|
</svg>
|
|
Continue with Google
|
|
</button>
|
|
<button class="oauth-btn" type="button" onclick="alert('SSO not yet active in beta.')">
|
|
<svg width="16" height="18" viewBox="0 0 16 18" fill="none">
|
|
<path d="M13.55 9.563c-.024-2.428 1.985-3.595 2.077-3.654-1.13-1.653-2.892-1.879-3.521-1.906-1.501-.153-2.929.882-3.692.882-.764 0-1.937-.86-3.184-.837-1.638.023-3.145.953-3.987 2.422-1.7 2.949-.434 7.314 1.221 9.708.806 1.165 1.768 2.476 3.03 2.43 1.214-.047 1.673-.79 3.139-.79 1.466 0 1.881.79 3.169.766 1.31-.022 2.139-1.187 2.94-2.355.926-1.348 1.308-2.658 1.331-2.726-.029-.013-2.55-.98-2.575-3.879zM11.106 2.43c.673-.815 1.127-1.949.997-3.083-.965.04-2.135.643-2.832 1.456-.624.72-1.17 1.875-1.024 2.984 1.077.083 2.18-.547 2.86-1.357z" fill="currentColor"/>
|
|
</svg>
|
|
Continue with Apple
|
|
</button>
|
|
<button class="oauth-btn" type="button" onclick="alert('SSO not yet active in beta.')">
|
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none">
|
|
<path d="M16.338 0H1.662C.744 0 0 .744 0 1.662v14.676C0 17.256.744 18 1.662 18h14.676C17.256 18 18 17.256 18 16.338V1.662C18 .744 17.256 0 16.338 0zM5.339 15.339H2.668V6.997h2.671v8.342zm-1.336-9.494a1.55 1.55 0 110-3.099 1.55 1.55 0 010 3.1zm11.336 9.494h-2.671v-4.058c0-.967-.018-2.213-1.348-2.213-1.35 0-1.557 1.054-1.557 2.143v4.128H7.092V6.997h2.564v1.14h.036c.357-.677 1.23-1.39 2.532-1.39 2.71 0 3.215 1.783 3.215 4.103v4.489z" fill="#0A66C2"/>
|
|
</svg>
|
|
Continue with LinkedIn
|
|
</button>
|
|
</div>
|
|
|
|
<div class="signup-link">
|
|
Don't have an account? <a href="#signup">Request beta access</a>
|
|
</div>
|
|
|
|
<div class="legal-fine">
|
|
By signing in you agree to Abigail's <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>. Use of the platform does not constitute legal advice or create an attorney-client relationship; legal services where elected are provided by Abigail Legal Services, P.C. under separate engagement.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RIGHT: Marketing panel -->
|
|
<div class="login-right">
|
|
<div class="login-right-inner">
|
|
<div class="right-eyebrow">Beta · Limited access</div>
|
|
<h2>AI does the work.<br>Attorneys ensure the quality.<br><em>You</em> pay for the result.</h2>
|
|
<p class="right-lead">Abigail is in private beta. If you don't have an account yet, request access — we onboard new users weekly.</p>
|
|
|
|
<div class="features">
|
|
<div class="feat-row">
|
|
<div class="feat-check">✓</div>
|
|
<span>Free AI Visa Screener · multi-visa pathways in 5 minutes</span>
|
|
</div>
|
|
<div class="feat-row">
|
|
<div class="feat-check">✓</div>
|
|
<span>5-business-day target prep, intake to filing-ready</span>
|
|
</div>
|
|
<div class="feat-row">
|
|
<div class="feat-check">✓</div>
|
|
<span>Ivy / BigLaw-trained attorneys when you elect review</span>
|
|
</div>
|
|
<div class="feat-row">
|
|
<div class="feat-check">✓</div>
|
|
<span>Flat fees, no retainers, full visibility into your filing</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
const dd = document.getElementById("resourcesDropdown");
|
|
if (dd) {
|
|
const trigger = dd.querySelector(".nav-trigger");
|
|
trigger.addEventListener("click", (e) => {
|
|
e.stopPropagation();
|
|
dd.classList.toggle("open");
|
|
});
|
|
document.addEventListener("click", () => dd.classList.remove("open"));
|
|
dd.querySelector(".dropdown-menu").addEventListener("click", (e) => e.stopPropagation());
|
|
}
|
|
const THEME_KEY = "abigail-theme";
|
|
const root = document.documentElement;
|
|
if (localStorage.getItem(THEME_KEY) === "dark") root.classList.add("dark");
|
|
const toggle = document.getElementById("themeToggle");
|
|
if (toggle) toggle.addEventListener("click", () => {
|
|
root.classList.toggle("dark");
|
|
localStorage.setItem(THEME_KEY, root.classList.contains("dark") ? "dark" : "light");
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|