diff --git a/index.html b/index.html index 427357d..bcb8efa 100644 --- a/index.html +++ b/index.html @@ -52,6 +52,164 @@

Don't have an account? Create One

+ + + diff --git a/script.js b/script.js index fb5c0ee..dab3753 100644 --- a/script.js +++ b/script.js @@ -1,5 +1,7 @@ document.addEventListener('DOMContentLoaded', () => { const loginForm = document.querySelector('.login-form'); + const loginContainer = document.querySelector('.login-container'); + const feedView = document.getElementById('feed-view'); const emailInput = document.getElementById('email'); const passwordInput = document.getElementById('password'); const confirmPasswordInput = document.getElementById('confirm-password'); @@ -73,10 +75,30 @@ document.addEventListener('DOMContentLoaded', () => { } setTimeout(() => { - resetButton(); + if (!message.includes('Success')) { + resetButton(); + } }, 2000); } + function navigateToFeed() { + if (loginContainer && feedView) { + // Fade out login + loginContainer.style.opacity = '0'; + + setTimeout(() => { + loginContainer.classList.add('hidden'); + loginContainer.style.display = 'none'; // Ensure it's gone + + // Show Feed + feedView.classList.remove('hidden'); + // Trigger reflow + void feedView.offsetWidth; + feedView.classList.add('fade-in'); + }, 600); // Wait for transition + } + } + if (loginForm) { loginForm.addEventListener('submit', (e) => { e.preventDefault(); @@ -96,7 +118,7 @@ document.addEventListener('DOMContentLoaded', () => { if (user) { console.log('Login Successful:', user); showFeedback(true, 'Success!'); - // Here you would redirect to the app + setTimeout(navigateToFeed, 1000); } else { console.warn('Login Failed: Invalid credentials'); showFeedback(false, 'Incorrect details'); @@ -127,6 +149,7 @@ document.addEventListener('DOMContentLoaded', () => { setTimeout(() => { isLoginMode = true; updateUI(); + setTimeout(navigateToFeed, 1000); }, 1500); } }); diff --git a/styles/main.css b/styles/main.css index 8de0b5b..62d0c8b 100644 --- a/styles/main.css +++ b/styles/main.css @@ -320,8 +320,248 @@ p { color: var(--text-muted); } -.signup-link a { - color: white; - text-decoration: none; +/* --- FEED VIEW STYLES --- */ +#feed-view { + width: 100%; + max-width: 480px; + /* Mobile width constraint */ + min-height: 100vh; + background: var(--bg-dark); + position: relative; + padding-bottom: 80px; + /* Space for bottom nav */ +} + +/* Header */ +.feed-header { + position: sticky; + top: 0; + z-index: 50; + background: rgba(10, 10, 11, 0.8); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px 20px; + border-bottom: 1px solid var(--glass-border); +} + +.header-logo { + font-size: 24px; + font-weight: 700; + font-family: 'Outfit', sans-serif; + background: var(--primary-gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + letter-spacing: -0.5px; +} + +/* Stories */ +.stories-container { + display: flex; + gap: 15px; + padding: 15px 20px; + overflow-x: auto; + scrollbar-width: none; + /* Hide scrollbar Firefox */ + -ms-overflow-style: none; + /* Hide scrollbar IE/Edge */ +} + +.stories-container::-webkit-scrollbar { + display: none; + /* Hide scrollbar Chrome/Safari */ +} + +.story-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; + min-width: 70px; + cursor: pointer; +} + +.story-ring { + width: 68px; + height: 68px; + border-radius: 50%; + background: linear-gradient(45deg, #FFB800, #FF3D00, #D500F9); + padding: 2px; + display: flex; + justify-content: center; + align-items: center; +} + +.story-ring.add-story { + background: var(--glass-border); +} + +.story-avatar { + width: 100%; + height: 100%; + border-radius: 50%; + border: 3px solid var(--bg-dark); + object-fit: cover; +} + +.story-item span { + font-size: 11px; + color: var(--text-main); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 100%; + text-align: center; +} + +/* Feed & Posts */ +.feed-container { + display: flex; + flex-direction: column; + gap: 20px; +} + +.post-card { + background: transparent; + border-top: 1px solid var(--glass-border); + padding-bottom: 15px; +} + +.post-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 12px 15px; +} + +.post-user { + display: flex; + align-items: center; + gap: 10px; +} + +.avatar-sm { + width: 32px; + height: 32px; + border-radius: 50%; + object-fit: cover; +} + +.username { font-weight: 600; + font-size: 14px; +} + +.icon-btn-sm { + background: none; + border: none; + color: var(--text-main); + cursor: pointer; + font-size: 20px; + padding: 5px; +} + +.post-image { + width: 100%; + aspect-ratio: 4/5; + background: #111; + overflow: hidden; +} + +.post-image img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.post-actions { + display: flex; + justify-content: space-between; + padding: 12px 15px; +} + +.action-left { + display: flex; + gap: 16px; +} + +.icon-btn { + background: none; + border: none; + padding: 0; + cursor: pointer; + display: flex; + align-items: center; + transition: transform 0.1s; +} + +.icon-btn:active { + transform: scale(0.9); +} + +.post-content { + padding: 0 15px; +} + +.likes { + font-weight: 700; + font-size: 14px; + display: block; + margin-bottom: 6px; +} + +.post-content p { + font-size: 14px; + line-height: 1.4; + color: var(--text-main); +} + +/* Bottom Navigation */ +.bottom-nav { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + background: rgba(10, 10, 11, 0.95); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border-top: 1px solid var(--glass-border); + display: flex; + justify-content: space-around; + padding: 12px 0 25px; + /* Extra padding for iOS home bar */ + z-index: 100; +} + +.nav-btn { + background: none; + border: none; + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + color: var(--text-muted); + cursor: pointer; + width: 60px; +} + +.nav-btn svg { + stroke: var(--text-muted); + transition: 0.2s; +} + +.nav-btn span { + font-size: 10px; + font-weight: 500; +} + +.nav-btn.active { + color: var(--text-main); +} + +.nav-btn.active svg { + stroke: var(--text-main); + stroke-width: 2.5px; } \ No newline at end of file