218 lines
4.9 KiB
Vue
218 lines
4.9 KiB
Vue
<template>
|
|
<div class="login-page dot-bg">
|
|
<!-- Background Glow -->
|
|
<div class="glow-orb login-glow"></div>
|
|
|
|
<div class="login-container animate-fade-up">
|
|
<div class="login-card glass-card">
|
|
<!-- Logo -->
|
|
<div class="login-logo">
|
|
<div class="logo-icon-lg">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
<path d="M12 2L2 7l10 5 10-5-10-5z" fill="currentColor"/>
|
|
<path d="M2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
<span class="logo-text-lg">Hire<span class="logo-accent">AI</span></span>
|
|
</div>
|
|
|
|
<h1 class="login-title">Welcome!</h1>
|
|
<p class="login-sub">Sign in to access your AI-powered hiring dashboard</p>
|
|
|
|
<!-- Google Button -->
|
|
<button @click="loginWithGoogle" class="btn-google">
|
|
<img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg" alt="Google" class="google-icon">
|
|
<span>Continue with Google</span>
|
|
</button>
|
|
|
|
<!-- Feature List -->
|
|
<div class="feature-list">
|
|
<div class="feature-item">
|
|
<span class="check">✓</span>
|
|
<span class="feature-text">AI-generated interview questions from resumes</span>
|
|
</div>
|
|
<div class="feature-item">
|
|
<span class="check">✓</span>
|
|
<span class="feature-text">Pronunciation guide for 50+ tech terms</span>
|
|
</div>
|
|
<div class="feature-item">
|
|
<span class="check">✓</span>
|
|
<span class="feature-text">Smart interview scheduling with email alerts</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<p class="login-footer">
|
|
By signing in, you agree to our
|
|
<a href="#" class="link">Terms of Service</a> and
|
|
<a href="#" class="link">Privacy Policy</a>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useAuth } from '../composables/useAuth.js'
|
|
|
|
const { loginWithGoogle } = useAuth()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.login-page {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--space-6);
|
|
position: relative;
|
|
overflow: hidden;
|
|
background-color: #050505; /* Deepest black */
|
|
}
|
|
|
|
.login-glow {
|
|
width: 600px;
|
|
height: 600px;
|
|
background: radial-gradient(circle, rgba(34, 197, 94, 0.08) 0%, transparent 70%);
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.login-container {
|
|
width: 100%;
|
|
max-width: 440px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.login-card {
|
|
padding: var(--space-10) var(--space-8);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-6);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
background: rgba(15, 15, 15, 0.7);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
|
|
.login-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.logo-icon-lg {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: var(--clr-accent);
|
|
border-radius: var(--radius-md);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #000;
|
|
box-shadow: 0 0 20px var(--clr-accent-glow);
|
|
}
|
|
|
|
.logo-text-lg {
|
|
font-size: 2.25rem;
|
|
font-weight: 800;
|
|
letter-spacing: -0.04em;
|
|
color: white;
|
|
}
|
|
|
|
.logo-accent {
|
|
color: var(--clr-accent);
|
|
}
|
|
|
|
.login-title {
|
|
font-size: 2.25rem;
|
|
font-weight: 800;
|
|
letter-spacing: -0.04em;
|
|
color: white;
|
|
margin-bottom: -10px;
|
|
}
|
|
|
|
.login-sub {
|
|
font-size: var(--text-sm);
|
|
color: var(--clr-text-secondary);
|
|
text-align: center;
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
|
|
.btn-google {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-3);
|
|
background: #1a1a1e;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
color: white;
|
|
font-size: var(--text-md);
|
|
font-weight: 600;
|
|
padding: 14px 20px;
|
|
border-radius: var(--radius-md);
|
|
transition: all var(--transition-fast);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-google:hover {
|
|
background: #242429;
|
|
border-color: rgba(255, 255, 255, 0.2);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.google-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.feature-list {
|
|
width: 100%;
|
|
background: rgba(34, 197, 94, 0.03);
|
|
border: 1px solid rgba(34, 197, 94, 0.1);
|
|
border-radius: var(--radius-lg);
|
|
padding: var(--space-5);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.feature-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.check {
|
|
color: #22c55e;
|
|
font-weight: 800;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.feature-text {
|
|
font-size: var(--text-sm);
|
|
color: #a1a1aa; /* text-zinc-400 */
|
|
}
|
|
|
|
.login-footer {
|
|
font-size: 0.75rem;
|
|
color: #71717a; /* text-zinc-500 */
|
|
text-align: center;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.link {
|
|
color: #a1a1aa;
|
|
text-decoration: underline;
|
|
text-underline-offset: 3px;
|
|
transition: color var(--transition-fast);
|
|
}
|
|
|
|
.link:hover {
|
|
color: white;
|
|
}
|
|
</style>
|