Skip to content

Added authentication: Register and Login. #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
parth-pawarr wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added authentication: Register and Login. #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
The diff you're trying to view is too large. We only load the first 3000 changed files.
397 changes: 397 additions & 0 deletions app/auth/auth.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,397 @@
/* Modern Auth Pages Styling */
.auth-container {
min-height: 100vh;
display: flex;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
position: relative;
overflow: hidden;
}

/* Animated Background */
.auth-container::before {
content: '';
position: absolute;
width: 500px;
height: 500px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
top: -250px;
right: -250px;
animation: float 6s ease-in-out infinite;
}

.auth-container::after {
content: '';
position: absolute;
width: 400px;
height: 400px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
bottom: -200px;
left: -200px;
animation: float 8s ease-in-out infinite reverse;
}

@keyframes float {
0%, 100% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(-20px) scale(1.05);
}
}

/* Left Side - Branding */
.auth-left {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 3rem;
position: relative;
z-index: 1;
}

.auth-branding {
text-align: center;
color: white;
}

.auth-logo {
font-size: 4rem;
margin-bottom: 1rem;
animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}

.auth-brand-title {
font-size: 3rem;
font-weight: 800;
margin: 0 0 1rem 0;
background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.auth-brand-subtitle {
font-size: 1.2rem;
opacity: 0.9;
font-weight: 300;
margin: 0;
}

.auth-features {
margin-top: 3rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}

.auth-feature {
display: flex;
align-items: center;
gap: 1rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 1rem 1.5rem;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}

.auth-feature:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateX(10px);
}

.auth-feature-icon {
font-size: 2rem;
}

.auth-feature-text {
font-size: 1rem;
color: white;
margin: 0;
}

/* Right Side - Form */
.auth-right {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 2rem;
position: relative;
z-index: 1;
}

.auth-form-container {
width: 100%;
max-width: 450px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 24px;
padding: 3rem;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.auth-form-header {
text-align: center;
margin-bottom: 2rem;
}

.auth-form-title {
font-size: 2rem;
font-weight: 700;
color: #333;
margin: 0 0 0.5rem 0;
}

.auth-form-subtitle {
font-size: 0.95rem;
color: #666;
margin: 0;
}

.auth-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}

.auth-input-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

.auth-label {
font-size: 0.9rem;
font-weight: 600;
color: #444;
margin-left: 0.25rem;
}

.auth-input-wrapper {
position: relative;
}

.auth-input {
width: 100%;
padding: 0.875rem 1rem;
font-size: 1rem;
border: 2px solid #e0e0e0;
border-radius: 12px;
outline: none;
transition: all 0.3s ease;
background: white;
box-sizing: border-box;
}

.auth-input:focus {
border-color: #667eea;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.auth-input::placeholder {
color: #999;
}

.auth-error {
background: #fee;
color: #c33;
padding: 0.875rem 1rem;
border-radius: 12px;
font-size: 0.9rem;
border-left: 4px solid #c33;
animation: shake 0.3s ease;
}

@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-10px); }
75% { transform: translateX(10px); }
}

.auth-submit-btn {
width: 100%;
padding: 1rem;
font-size: 1.05rem;
font-weight: 600;
color: white;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
position: relative;
overflow: hidden;
}

.auth-submit-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}

.auth-submit-btn:hover::before {
left: 100%;
}

.auth-submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.auth-submit-btn:active {
transform: translateY(0);
}

.auth-submit-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}

.auth-divider {
display: flex;
align-items: center;
gap: 1rem;
margin: 1.5rem 0;
}

.auth-divider-line {
flex: 1;
height: 1px;
background: #e0e0e0;
}

.auth-divider-text {
color: #999;
font-size: 0.85rem;
font-weight: 500;
}

.auth-footer {
text-align: center;
margin-top: 1.5rem;
font-size: 0.95rem;
color: #666;
}

.auth-link {
color: #667eea;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}

.auth-link:hover {
color: #764ba2;
text-decoration: underline;
}

/* Password Strength Indicator */
.password-strength {
display: flex;
gap: 0.25rem;
margin-top: 0.5rem;
}

.strength-bar {
flex: 1;
height: 4px;
background: #e0e0e0;
border-radius: 2px;
transition: all 0.3s ease;
}

.strength-bar.active {
background: #667eea;
}

.strength-bar.weak {
background: #f44336;
}

.strength-bar.medium {
background: #ff9800;
}

.strength-bar.strong {
background: #4caf50;
}

/* Responsive Design */
@media (max-width: 968px) {
.auth-container {
flex-direction: column;
}

.auth-left {
padding: 2rem;
min-height: 40vh;
}

.auth-brand-title {
font-size: 2rem;
}

.auth-features {
display: none;
}

.auth-right {
padding: 1rem;
}

.auth-form-container {
padding: 2rem 1.5rem;
}
}

@media (max-width: 480px) {
.auth-form-container {
padding: 1.5rem 1rem;
}

.auth-form-title {
font-size: 1.5rem;
}

.auth-brand-title {
font-size: 1.75rem;
}

.auth-logo {
font-size: 3rem;
}
}
Loading