first commit
This commit is contained in:
commit
7a72438fd1
74 changed files with 7548 additions and 0 deletions
218
frontend/src/views/LoginView.vue
Normal file
218
frontend/src/views/LoginView.vue
Normal file
|
|
@ -0,0 +1,218 @@
|
|||
<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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue