David/SocialMediaApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

LoginPagev1

Browse Source
This commit is contained in:
David
2026-01-28 20:11:07 +11:00
commit c46119db25
3 changed files with 529 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
index.html Normal file
View File

@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Social App</title>
<meta name="description" content="Connect with friends in style.">
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<!-- App Container -->
<main class="login-container fade-in">
<!-- Background Orbs for Vibe -->
<div class="orb orb-1"></div>
<div class="orb orb-2"></div>
<div class="login-card">
<div class="brand-section">
<div class="logo-icon">S</div>
<h1>Welcome Back</h1>
<p>Enter your details below</p>
</div>
<form class="login-form" onsubmit="event.preventDefault()">
<div class="input-group">
<input type="email" id="email" required placeholder=" " autocomplete="email">
<label for="email">Email Address</label>
</div>
<div class="input-group">
<input type="password" id="password" required placeholder=" " autocomplete="current-password">
<label for="password">Password</label>
</div>
<a href="#" class="forgot-pass">Forgot Password?</a>
<button type="submit" class="btn-primary">
<span>Sign In</span>
<div class="btn-glow"></div>
</button>
</form>
<div class="divider">
<span>Or continue with</span>
</div>
<div class="social-login">
<button class="btn-social" aria-label="Login with Google">
<svg viewBox="0 0 24 24" class="social-icon">
<path
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
fill="#4285F4" />
<path
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
fill="#34A853" />
<path
d="M5.84 14.11c-.22-.66-.35-1.36-.35-2.11s.13-1.45.35-2.11V7.05H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.95l3.66-2.84z"
fill="#FBBC05" />
<path
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.05l3.66 2.84c.87-2.6 3.3-4.51 6.16-4.51z"
fill="#EA4335" />
</svg>
</button>
<button class="btn-social" aria-label="Login with Apple">
<svg viewBox="0 0 24 24" class="social-icon">
<path
d="M17.05 20.28c-.98 1.5-2.53 3.51-4.22 3.48-1.63-.04-2.16-1.1-4.04-1.1-1.9 0-2.48 1.07-4.06 1.1-2.91.16-6.49-5.46-5.23-10.74 1.12-4.5 5.5-5.27 6.42-5.18 1.6.15 2.86 1.1 3.75 1.1.9 0 2.25-1.07 4.1-1.03 2.53.11 4.19 1.55 4.97 2.76-4.26 2.15-3.4 8.74 1.41 10.39-.42.94-.8 1.76-1.45 2.72-.65.98-1.28 1.7-1.65 2.5zm-5-17.76c1.23-1.48 2.06-3.52 1.83-5.52-1.78.07-3.92 1.19-5.18 2.65-1.12 1.25-2.09 3.29-1.83 5.32 1.95.15 3.95-1 5.18-2.45z"
fill="currentColor" />
</svg>
</button>
</div>
<p class="signup-link">Don't have an account? <a href="#">Create One</a></p>
</div>
</main>
<script src="script.js"></script>
</body>
</html>

121
script.js Normal file
View File

@@ -0,0 +1,121 @@
document.addEventListener('DOMContentLoaded', () => {
const loginForm = document.querySelector('.login-form');
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
const submitBtn = document.querySelector('.btn-primary');
const btnText = submitBtn.querySelector('span');
const helperText = document.querySelector('.signup-link');
const toggleLink = document.querySelector('.signup-link a');
const title = document.querySelector('.brand-section h1');
const subtitle = document.querySelector('.brand-section p');
let isLoginMode = true;
// Toggle between Login and Signup
if (toggleLink) {
toggleLink.addEventListener('click', (e) => {
e.preventDefault();
isLoginMode = !isLoginMode;
updateUI();
});
}
function updateUI() {
if (isLoginMode) {
title.innerText = 'Welcome Back';
subtitle.innerText = 'Enter your details below';
btnText.innerText = 'Sign In';
helperText.innerHTML = 'Don\'t have an account? <a href="#">Create One</a>';
} else {
title.innerText = 'Create Account';
subtitle.innerText = 'Start your journey with us';
btnText.innerText = 'Sign Up';
helperText.innerHTML = 'Already have an account? <a href="#">Sign In</a>';
}
// Re-attach listener to the new link element
const newLink = document.querySelector('.signup-link a');
newLink.addEventListener('click', (e) => {
e.preventDefault();
isLoginMode = !isLoginMode;
updateUI();
});
// Reset form and styles
loginForm.reset();
resetButton();
}
function resetButton() {
submitBtn.style.background = '';
submitBtn.style.transform = '';
btnText.innerText = isLoginMode ? 'Sign In' : 'Sign Up';
}
function showFeedback(isSuccess, message) {
btnText.innerText = message;
if (isSuccess) {
submitBtn.style.background = 'linear-gradient(135deg, #10B981 0%, #059669 100%)'; // Success Green
} else {
submitBtn.style.background = 'linear-gradient(135deg, #EF4444 0%, #B91C1C 100%)'; // Error Red
submitBtn.animate([
{ transform: 'translateX(0)' },
{ transform: 'translateX(-5px)' },
{ transform: 'translateX(5px)' },
{ transform: 'translateX(0)' }
], { duration: 300 });
}
setTimeout(() => {
resetButton();
}, 2000);
}
if (loginForm) {
loginForm.addEventListener('submit', (e) => {
e.preventDefault();
const email = emailInput.value.trim();
const password = passwordInput.value.trim();
const timestamp = new Date().toISOString();
// Get existing users
const existingUsers = JSON.parse(localStorage.getItem('socialAppUsers') || '[]');
if (isLoginMode) {
// --- LOGIN LOGIC ---
const user = existingUsers.find(u => u.email === email && u.password === password);
if (user) {
console.log('Login Successful:', user);
showFeedback(true, 'Success!');
// Here you would redirect to the app
} else {
console.warn('Login Failed: Invalid credentials');
showFeedback(false, 'Incorrect details');
}
} else {
// --- SIGNUP LOGIC ---
// Check if user already exists
if (existingUsers.some(u => u.email === email)) {
showFeedback(false, 'User exists');
return;
}
const newUser = { email, password, joinedAt: timestamp };
existingUsers.push(newUser);
localStorage.setItem('socialAppUsers', JSON.stringify(existingUsers));
console.log('New User Registered:', newUser);
showFeedback(true, 'Account Created!');
// Switch to login mode after success
setTimeout(() => {
isLoginMode = true;
updateUI();
}, 1500);
}
});
}
});

327
styles/main.css Normal file
View File

@@ -0,0 +1,327 @@
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');
:root {
/* Premium Ultra Dark Palette */
--bg-dark: #0A0A0B;
/* Near Black */
--bg-card: rgba(255, 255, 255, 0.03);
--bg-card-hover: rgba(255, 255, 255, 0.07);
/* Brand Gradients - Monochrome */
--primary-gradient: linear-gradient(135deg, #404040 0%, #171717 100%);
--accent-glow: #525252;
/* Text Colors */
--text-main: #EDEDED;
--text-muted: rgba(255, 255, 255, 0.5);
--text-placeholder: rgba(255, 255, 255, 0.2);
/* Borders & Glassmorphism */
--glass-border: rgba(255, 255, 255, 0.08);
--glass-highlight: rgba(255, 255, 255, 0.1);
/* Spacing & Layout */
--radius-lg: 24px;
--radius-md: 16px;
--radius-sm: 12px;
--radius-full: 9999px;
/* Animation */
--transition-fast: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
--transition-bounce: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
body {
font-family: 'Outfit', sans-serif;
background-color: var(--bg-dark);
color: var(--text-main);
min-height: 100vh;
overflow-x: hidden;
/* Clean grainy texture for premium feel */
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
display: flex;
justify-content: center;
align-items: center;
}
/* Utilities */
.hidden {
display: none;
}
.fade-in {
animation: fadeIn 0.6s ease-out forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Login Page Styles */
/* Background Orbs & Animation */
.login-container {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
z-index: 0;
opacity: 0.6;
animation: float 10s infinite ease-in-out;
}
.orb-1 {
width: 300px;
height: 300px;
background: #262626;
/* Dark Neutral Grey */
top: -50px;
left: -50px;
}
.orb-2 {
width: 400px;
height: 400px;
background: #171717;
/* Very Dark Grey */
bottom: -100px;
right: -100px;
animation-delay: -5s;
}
@keyframes float {
0%,
100% {
transform: translate(0, 0);
}
50% {
transform: translate(30px, 50px);
}
}
/* Glass Card */
.login-card {
position: relative;
z-index: 10;
width: 90%;
max-width: 400px;
background: var(--bg-card);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-top: 1px solid var(--glass-highlight);
border-radius: var(--radius-lg);
padding: 40px 30px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
gap: 32px;
}
/* Brand Section */
.brand-section {
text-align: center;
}
.logo-icon {
width: 60px;
height: 60px;
background: var(--primary-gradient);
border-radius: var(--radius-md);
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 32px;
font-weight: 700;
color: white;
margin-bottom: 20px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
h1 {
font-size: 28px;
font-weight: 700;
margin-bottom: 8px;
color: var(--text-main);
}
p {
color: var(--text-muted);
font-size: 15px;
}
/* Input Fields */
.input-group {
position: relative;
margin-bottom: 20px;
}
.input-group input {
width: 100%;
background: rgba(0, 0, 0, 0.2);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
padding: 16px 16px 6px;
/* pt pb */
height: 56px;
color: var(--text-main);
font-size: 16px;
font-family: inherit;
outline: none;
transition: var(--transition-fast);
}
.input-group input:focus {
border-color: var(--accent-glow);
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0 0 4px rgba(82, 82, 82, 0.2);
}
.input-group label {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
font-size: 16px;
pointer-events: none;
transition: var(--transition-fast);
}
/* Label Float Animation */
.input-group input:focus+label,
.input-group input:not(:placeholder-shown)+label {
top: 14px;
font-size: 11px;
color: rgba(255, 255, 255, 0.8);
font-weight: 600;
letter-spacing: 0.5px;
}
/* Buttons */
.btn-primary {
width: 100%;
height: 54px;
border: none;
border-radius: var(--radius-full);
background: var(--primary-gradient);
color: white;
font-size: 16px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
position: relative;
overflow: hidden;
margin-top: 10px;
transition: transform var(--transition-fast);
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.3);
}
.btn-primary:active {
transform: scale(0.98);
}
.forgot-pass {
display: block;
text-align: right;
color: var(--text-muted);
text-decoration: none;
font-size: 13px;
margin-top: -10px;
margin-bottom: 20px;
transition: color 0.2s;
}
.forgot-pass:hover {
color: white;
}
/* Divider */
.divider {
display: flex;
align-items: center;
color: var(--text-placeholder);
font-size: 13px;
margin: 10px 0;
}
.divider::before,
.divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--glass-border);
}
.divider span {
padding: 0 10px;
}
/* Social Login */
.social-login {
display: flex;
gap: 16px;
justify-content: center;
}
.btn-social {
width: 50px;
height: 50px;
border-radius: var(--radius-full);
border: 1px solid var(--glass-border);
background: var(--bg-card);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition-fast);
color: white;
}
.btn-social:hover {
background: var(--bg-card-hover);
transform: translateY(-2px);
}
.social-icon {
width: 24px;
height: 24px;
}
.signup-link {
text-align: center;
margin-top: 10px;
color: var(--text-muted);
}
.signup-link a {
color: white;
text-decoration: none;
font-weight: 600;
}