commit c46119db25c09c9de66e45c58da698b109ad9d8e Author: David Date: Wed Jan 28 20:11:07 2026 +1100 LoginPagev1 diff --git a/index.html b/index.html new file mode 100644 index 0000000..a909f5e --- /dev/null +++ b/index.html @@ -0,0 +1,81 @@ + + + + + + + Social App + + + + + + +

+ +

Welcome Back

Enter your details below

+ + + +

+ Or continue with +

+ + + + +

+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..5259c60 --- /dev/null +++ b/script.js @@ -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? Create One'; + } else { + title.innerText = 'Create Account'; + subtitle.innerText = 'Start your journey with us'; + btnText.innerText = 'Sign Up'; + helperText.innerHTML = 'Already have an account? Sign In'; + } + + // 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); + } + }); + } +}); diff --git a/styles/main.css b/styles/main.css new file mode 100644 index 0000000..8de0b5b --- /dev/null +++ b/styles/main.css @@ -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; +} \ No newline at end of file