Okay, this is a significant update! We'll integrate Google Material Icons, create the structure and basic functionality for the New Post, Home, Explore, Profile, and Settings sections, and refine the CSS further. We'll use separate HTML files for each main section (Home/Feed, Explore, Profile, Settings) for simplicity, all sharing the same sidebar structure and CSS. **1. Add Material Icons Link & Update HTML:** First, we need to link the Material Icons stylesheet in the `` of all relevant HTML files (`app.html`, and the new `explore.html`, `profile.html`, `settings.html`). **2. Create New HTML Files:** We'll create `explore.html`, `profile.html`, and `settings.html`, using `app.html` as a template. `app.html` will now function primarily as the "Home" feed page. **3. Implement New Post Modal:** Add a modal structure to `app.html` (and potentially make it reusable if needed elsewhere). **4. Update CSS:** Refine styles, add styles for icons, the modal, and the new page layouts. **5. Update JavaScript:** * Modify `app.js` to handle the feed, post creation, and the modal. * Create `explore.js`, `profile.js`, `settings.js` for page-specific logic. * Use `localStorage` to store and retrieve posts. Let's implement these changes. {/* --- HTML Files --- */} Welcome to Beco

Beco

Connect and Share

Beco

Login

Don't have an account? Sign Up

Beco

Sign Up

Already have an account? Login

{/* --- Main App Pages --- */} Home - Beco

Home Feed

{/* Posts will be loaded here by JavaScript */}

Loading posts...

{/* New Post Modal */} Explore - Beco

Explore Beco

Discover new posts and users.

{/* Add simulated explore content: grid of posts/users */}

Simulated Post 1

Simulated User A

Simulated Post 2

Simulated Post 3

Simulated User B

Simulated Post 4

{/* Include modal structure if 'New Post' should work from here too */} {/* Specific JS for explore page */} Profile - Beco

Your Posts

{/* User's posts will be loaded here */}

No posts yet.

{/* Include modal structure if 'New Post' should work from here too */} {/* Specific JS for profile page */} {/* Create a simple placeholder image or leave this empty - browser might show broken image icon */} {/* For a real app, you'd upload/link an actual image */} Settings - Beco

Account Settings

Appearance

Theme {/* Theme toggle is in sidebar footer, but could be duplicated here */}

Account

Username username

Email user@example.com (Placeholder)

Password ********

Danger Zone

Logout

Delete Account

{/* Include modal structure if 'New Post' should work from here too */} {/* Specific JS for settings page */} {/* --- CSS --- */} @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200'); :root { /* Light Theme Colors */ --bg-color-light: #f0f8ff; /* AliceBlue */ --text-color-light: #1c3a56; /* Cold Dark Blue */ --primary-color-light: #77b6ea; /* Cold Blue */ --accent-color-light: #3a506b; /* Darker Cold Blue */ --border-color-light: #d3e0ea; --card-bg-light: #ffffff; --link-color-light: #5c9ac6; --danger-color-light: #e74c3c; --danger-text-light: #ffffff; --sidebar-bg-light: var(--accent-color-light); --sidebar-text-light: #ffffff; --sidebar-hover-bg-light: rgba(255, 255, 255, 0.1); --modal-bg-light: #ffffff; --modal-backdrop-light: rgba(0, 0, 0, 0.5); --input-bg-light: #ffffff; --tertiary-color-light: #a0d2db; /* Lighter cold blue */ --tertiary-text-light: #1c3a56; /* Dark Theme Colors */ --bg-color-dark: #1c3a56; /* Cold Dark Blue */ --text-color-dark: #f0f8ff; /* AliceBlue */ --primary-color-dark: #77b6ea; /* Cold Blue */ --accent-color-dark: #a0d2db; /* Lighter Cold Blue */ --border-color-dark: #3a506b; --card-bg-dark: #2a4a6a; /* Slightly lighter than bg */ --link-color-dark: #a0d2db; --danger-color-dark: #c0392b; --danger-text-dark: #ffffff; --sidebar-bg-dark: #162d42; /* Darker sidebar */ --sidebar-text-dark: var(--text-color-dark); --sidebar-hover-bg-dark: rgba(0, 0, 0, 0.2); --modal-bg-dark: #2a4a6a; --modal-backdrop-dark: rgba(0, 0, 0, 0.7); --input-bg-dark: #3a506b; /* Darker input bg */ --tertiary-color-dark: #5c9ac6; /* Mid cold blue */ --tertiary-text-dark: #f0f8ff; /* Base Font Size */ --base-font-size: 16px; --header-height: 60px; /* Example height */ } [data-theme='light'] { --bg-color: var(--bg-color-light); --text-color: var(--text-color-light); --primary-color: var(--primary-color-light); --accent-color: var(--accent-color-light); --border-color: var(--border-color-light); --card-bg: var(--card-bg-light); --link-color: var(--link-color-light); --danger-color: var(--danger-color-light); --danger-text: var(--danger-text-light); --sidebar-bg: var(--sidebar-bg-light); --sidebar-text: var(--sidebar-text-light); --sidebar-hover-bg: var(--sidebar-hover-bg-light); --modal-bg: var(--modal-bg-light); --modal-backdrop: var(--modal-backdrop-light); --input-bg: var(--input-bg-light); --tertiary-color: var(--tertiary-color-light); --tertiary-text: var(--tertiary-text-light); } [data-theme='dark'] { --bg-color: var(--bg-color-dark); --text-color: var(--text-color-dark); --primary-color: var(--primary-color-dark); --accent-color: var(--accent-color-dark); --border-color: var(--border-color-dark); --card-bg: var(--card-bg-dark); --link-color: var(--link-color-dark); --danger-color: var(--danger-color-dark); --danger-text: var(--danger-text-dark); --sidebar-bg: var(--sidebar-bg-dark); --sidebar-text: var(--sidebar-text-dark); --sidebar-hover-bg: var(--sidebar-hover-bg-dark); --modal-bg: var(--modal-bg-dark); --modal-backdrop: var(--modal-backdrop-dark); --input-bg: var(--input-bg-dark); --tertiary-color: var(--tertiary-color-dark); --tertiary-text: var(--tertiary-text-dark); } /* General Styles */ *, *::before, *::after { box-sizing: border-box; } html { font-size: var(--base-font-size); scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; background-color: var(--bg-color); color: var(--text-color); transition: background-color 0.3s ease, color 0.3s ease; line-height: 1.6; font-size: 1rem; /* Ensure base font size is applied */ } h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 1rem; /* Consistent bottom margin */ line-height: 1.3; font-weight: 600; /* Slightly bolder headers */ color: var(--primary-color); } [data-theme='dark'] h1, [data-theme='dark'] h2, [data-theme='dark'] h3, [data-theme='dark'] h4, [data-theme='dark'] h5, [data-theme='dark'] h6 { color: var(--accent-color-dark); } a { color: var(--link-color); text-decoration: none; transition: color 0.2s ease, opacity 0.2s ease; } a:hover { text-decoration: underline; opacity: 0.85; } img { max-width: 100%; height: auto; display: block; /* Prevent bottom space */ } /* Material Icons */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; /* Align icons better with text */ font-size: 1.3em; /* Slightly larger icons */ } /* Buttons */ .btn { display: inline-flex; /* Use flex for icon alignment */ align-items: center; justify-content: center; gap: 0.5rem; /* Space between icon and text */ padding: 0.65rem 1.3rem; /* Slightly adjusted padding */ border: 1px solid transparent; /* Base border */ border-radius: 6px; cursor: pointer; font-size: 0.95rem; /* Slightly smaller button text */ font-weight: 500; text-align: center; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease; margin: 0.25rem; line-height: 1.4; /* Ensure text fits well */ } .btn .material-symbols-outlined { font-size: 1.2em; /* Adjust icon size within buttons */ margin-right: -0.1rem; /* Fine-tune spacing if needed */ } .btn-primary { background-color: var(--primary-color); color: #ffffff; /* White text usually works best */ border-color: var(--primary-color); } .btn-primary:hover { opacity: 0.9; text-decoration: none; } .btn-secondary { background-color: var(--accent-color); color: #ffffff; border-color: var(--accent-color); } [data-theme='dark'] .btn-secondary { background-color: var(--border-color-dark); /* Use border color for subtle secondary */ color: var(--text-color-dark); border-color: var(--border-color-dark); } .btn-secondary:hover { opacity: 0.9; text-decoration: none; } .btn-danger { background-color: var(--danger-color); color: var(--danger-text); border-color: var(--danger-color); } .btn-danger:hover { opacity: 0.9; text-decoration: none; } .btn-tertiary { background-color: transparent; color: var(--link-color); border-color: var(--border-color); } .btn-tertiary:hover { background-color: var(--border-color); border-color: var(--border-color); color: var(--text-color); text-decoration: none; } [data-theme='dark'] .btn-tertiary:hover { background-color: var(--card-bg); border-color: var(--card-bg); } /* Forms */ .form-group { margin-bottom: 1.5rem; text-align: left; } .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--text-color); font-size: 0.9rem; } .form-group input, .form-group textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--border-color); border-radius: 4px; font-size: 1rem; background-color: var(--input-bg); color: var(--text-color); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(var(--primary-color-light), 0.3); /* Use RGB for alpha */ } [data-theme='dark'] .form-group input:focus, [data-theme='dark'] .form-group textarea:focus { box-shadow: 0 0 0 2px rgba(var(--primary-color-dark), 0.4); } .form-group textarea { resize: vertical; /* Allow vertical resize */ min-height: 80px; } /* Landing Page Specific */ .landing-page { display: flex; justify-content: center; align-items: center; min-height: 100vh; text-align: center; padding: 1rem; } .landing-container { max-width: 500px; } .landing-container h1 { font-size: clamp(2.5rem, 8vw, 3.5rem); margin-bottom: 0.5rem; color: var(--primary-color); } .landing-container p { font-size: 1.1rem; margin-bottom: 2rem; color: var(--accent-color); } [data-theme='dark'] .landing-container p { color: var(--text-color-dark); opacity: 0.9; } .landing-nav a { margin: 0 0.5rem; } .landing-page footer { position: absolute; bottom: 1.5rem; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 1rem; color: var(--accent-color); font-size: 0.9rem;} [data-theme='dark'] .landing-page footer { color: var(--text-color-dark); opacity: 0.7; } .theme-toggle-landing { background: none; border: 1px solid var(--border-color); color: var(--text-color); padding: 0.4rem; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .theme-toggle-landing .material-symbols-outlined { font-size: 1.3rem; } /* Auth Pages Specific (Login/Signup) */ .auth-page { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 1rem; } .auth-container { background-color: var(--card-bg); padding: 2rem 2.5rem; border-radius: 8px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); width: 100%; max-width: 400px; text-align: center; } [data-theme='dark'] .auth-container { box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25); } .auth-container h1 { margin-bottom: 0.5rem; color: var(--primary-color); } .auth-container h2 { margin-bottom: 2rem; color: var(--text-color); font-weight: 400; opacity: 0.8; } .auth-container form button { width: 100%; margin-top: 1rem; } .auth-container p { margin-top: 1.5rem; font-size: 0.9rem; } .auth-page footer { position: absolute; bottom: 1.5rem; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 1rem; color: var(--accent-color); font-size: 0.9rem; } [data-theme='dark'] .auth-page footer { color: var(--text-color-dark); opacity: 0.7; } .theme-toggle-auth { background: none; border: 1px solid var(--border-color); color: var(--text-color); padding: 0.4rem; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .theme-toggle-auth .material-symbols-outlined { font-size: 1.3rem; } /* App Layout (app.html & others) */ .app-layout { display: flex; min-height: 100vh; } .sidebar { width: 250px; /* Slightly wider sidebar */ background-color: var(--sidebar-bg); color: var(--sidebar-text); padding: 1.5rem 1rem; display: flex; flex-direction: column; flex-shrink: 0; border-right: 1px solid var(--border-color); transition: background-color 0.3s ease, color 0.3s ease; } [data-theme='dark'] .sidebar { border-right-color: var(--border-color-dark); } .sidebar-header h2 { color: inherit; /* Inherit from sidebar */ text-align: center; margin-bottom: 2.5rem; font-weight: 700; font-size: 1.8rem; } [data-theme='dark'] .sidebar-header h2 { color: var(--primary-color-dark); /* Use primary in dark mode */ } .sidebar-nav ul { list-style: none; padding: 0; margin: 0; } .sidebar-nav li a { display: flex; align-items: center; padding: 0.8rem 1rem; color: inherit; border-radius: 6px; margin-bottom: 0.6rem; /* Increased spacing */ transition: background-color 0.2s ease, color 0.2s ease; font-weight: 500; } .sidebar-nav li a:hover { background-color: var(--sidebar-hover-bg); text-decoration: none; color: inherit; /* Keep text color on hover */ } .sidebar-nav li a.active { background-color: var(--primary-color); color: #ffffff; /* White text for active link */ font-weight: 600; } [data-theme='dark'] .sidebar-nav li a.active { background-color: var(--primary-color-dark); color: var(--bg-color-dark); /* Dark text for contrast */ } .sidebar-nav .icon { margin-right: 1rem; /* More space for icon */ font-size: 1.4rem; /* Consistent icon size */ width: 24px; /* Ensure icons align */ display: inline-block; text-align: center; flex-shrink: 0; } .sidebar-footer { margin-top: auto; padding-top: 1.5rem; border-top: 1px solid var(--sidebar-hover-bg); /* Use hover bg for subtle border */ display: flex; flex-direction: column; gap: 0.75rem; } [data-theme='dark'] .sidebar-footer { border-top-color: var(--border-color-dark); } .sidebar-footer .btn { width: 100%; margin: 0; justify-content: flex-start; /* Align text left */ padding-left: 1rem; } .sidebar-footer .btn .material-symbols-outlined { margin-right: 1rem; /* Match nav icon spacing */ } .main-content { flex-grow: 1; display: flex; flex-direction: column; background-color: var(--bg-color); overflow-x: hidden; /* Prevent horizontal scroll */ } .app-header { padding: 0 1.5rem; /* Adjust padding */ height: var(--header-height); display: flex; align-items: center; border-bottom: 1px solid var(--border-color); background-color: var(--card-bg); /* Header slightly different bg */ flex-shrink: 0; /* Prevent header shrinking */ } [data-theme='dark'] .app-header { background-color: var(--sidebar-bg-dark); /* Match dark sidebar bg */ } .app-header h1 { margin: 0; font-size: 1.3rem; /* Slightly smaller header */ color: var(--text-color); font-weight: 500; } /* Main content area base */ main { flex-grow: 1; padding: 1.5rem; overflow-y: auto; /* Allow main content to scroll */ } main h2 { /* Style for main section titles */ margin-bottom: 1.5rem; color: var(--text-color); font-weight: 600; font-size: 1.5rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem; } /* Feed Specific */ .feed { /* Already styled by main */ } .post { background-color: var(--card-bg); border: 1px solid var(--border-color); padding: 1.2rem 1.5rem; margin-bottom: 1.5rem; border-radius: 8px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04); transition: box-shadow 0.2s ease; } [data-theme='dark'] .post { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); } .post:hover { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07); } [data-theme='dark'] .post:hover { box-shadow: 0 5px 18px rgba(0, 0, 0, 0.2); } .post-header { display: flex; align-items: center; margin-bottom: 0.8rem; gap: 0.75rem; } .post-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; /* Ensure avatar looks good */ } .post-author { font-weight: 600; color: var(--text-color); } .post-timestamp { font-size: 0.85rem; color: var(--text-color); opacity: 0.7; margin-left: auto; /* Push timestamp to the right */ } .post-content p { margin: 0; color: var(--text-color); line-height: 1.7; /* Improve readability */ white-space: pre-wrap; /* Respect newlines in post text */ } .post-skeleton { color: var(--text-color); opacity: 0.6; padding: 2rem; text-align: center; } /* Explore Page */ .explore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; } .explore-item { background-color: var(--card-bg); border: 1px solid var(--border-color); padding: 1rem; border-radius: 8px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } /* Profile Page */ .profile-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; /* More padding for profile header */ height: auto; /* Allow height to adjust */ gap: 1.5rem; } .profile-info { display: flex; align-items: center; gap: 1rem; } .profile-avatar { width: 80px; height: 80px; border-radius: 50%; border: 3px solid var(--card-bg); box-shadow: 0 2px 5px rgba(0,0,0,0.1); } #profile-username { font-size: 1.8rem; margin-bottom: 0; /* Remove bottom margin */ color: var(--text-color); } .edit-profile-btn { /* Style the edit button */ flex-shrink: 0; /* Prevent button shrinking */ } .profile-content { /* Uses main styles */ } #user-posts-container .post { /* User posts use standard post style */ } #user-posts-container p { /* Message when no posts */ text-align: center; opacity: 0.7; padding: 2rem 0; } /* Settings Page */ .settings-content { /* Uses main styles */ } .settings-section { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 2rem; overflow: hidden; /* Clip borders */ } .settings-section h3 { font-size: 1.1rem; padding: 1rem 1.5rem; margin: 0; border-bottom: 1px solid var(--border-color); color: var(--text-color); font-weight: 600; } .setting-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); gap: 1rem; } .setting-item:last-child { border-bottom: none; } .setting-item span:first-child { font-weight: 500; color: var(--text-color); } .setting-item span:last-child:not(:has(button)) { /* Style for non-button values */ opacity: 0.8; } .setting-item .btn { margin: 0; /* Remove default margin */ padding: 0.4rem 0.8rem; /* Smaller buttons */ font-size: 0.85rem; } /* Modal Styles */ .modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--modal-backdrop); z-index: 100; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; /* Allow clicks through when hidden */ } .modal-backdrop.visible { opacity: 1; pointer-events: auto; } .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); background-color: var(--modal-bg); padding: 2rem; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); z-index: 101; width: 90%; max-width: 500px; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; /* Allow clicks through when hidden */ } [data-theme='dark'] .modal { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); } .modal.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; } .modal-content { /* Container inside modal if needed */ } .modal h2 { margin-top: 0; margin-bottom: 1.5rem; text-align: center; color: var(--text-color); } .modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: var(--text-color); opacity: 0.7; cursor: pointer; padding: 0.25rem; line-height: 1; } .modal-close:hover { opacity: 1; } .modal-close .material-symbols-outlined { font-size: 1.8rem; } .modal form .btn { width: 100%; margin-top: 1rem; } /* Footer */ .app-footer { text-align: center; padding: 1rem 1.5rem; margin-top: auto; border-top: 1px solid var(--border-color); font-size: 0.9rem; color: var(--text-color); opacity: 0.7; background-color: var(--card-bg); flex-shrink: 0; /* Prevent footer shrinking */ } [data-theme='dark'] .app-footer { background-color: var(--sidebar-bg-dark); /* Match dark header/sidebar */ opacity: 0.6; } {/* --- JavaScript Files --- */} const htmlElement = document.documentElement; // Target the element // --- Theme Switching --- const themeToggleButtons = document.querySelectorAll('#theme-toggle, #theme-toggle-landing, #theme-toggle-auth, #theme-toggle-settings'); const currentThemeLabel = document.getElementById('current-theme-label'); // For settings page function updateThemeLabel(theme) { if (currentThemeLabel) { currentThemeLabel.textContent = theme === 'light' ? 'Light' : 'Dark'; } } function switchTheme() { const currentTheme = htmlElement.getAttribute('data-theme'); const newTheme = currentTheme === 'light' ? 'dark' : 'light'; htmlElement.setAttribute('data-theme', newTheme); localStorage.setItem('beco-theme', newTheme); // Save preference updateThemeLabel(newTheme); } function applyInitialTheme() { const savedTheme = localStorage.getItem('beco-theme'); let currentTheme = 'light'; // Default if (savedTheme) { currentTheme = savedTheme; } else { const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; if (prefersDark) { currentTheme = 'dark'; } } htmlElement.setAttribute('data-theme', currentTheme); updateThemeLabel(currentTheme); } themeToggleButtons.forEach(button => { if (button) { button.addEventListener('click', switchTheme); } }); applyInitialTheme(); // Apply theme on initial load // --- Basic Auth Simulation & Redirection --- function isLoggedIn() { return localStorage.getItem('beco-loggedInUser') !== null; } function getLoggedInUser() { return localStorage.getItem('beco-loggedInUser'); } function handleAuthRedirect() { const currentPage = window.location.pathname.split('/').pop() || 'index.html'; // Default to index.html if path is '/' const authPages = ['login.html', 'signup.html', 'index.html']; const appPages = ['app.html', 'explore.html', 'profile.html', 'settings.html']; if (isLoggedIn()) { if (authPages.includes(currentPage)) { console.log("User logged in, redirecting to app.html"); window.location.replace('app.html'); } } else { if (appPages.includes(currentPage)) { console.log("User not logged in, redirecting to index.html"); window.location.replace('index.html'); } } } // --- Logout Functionality (shared) --- const logoutButtons = document.querySelectorAll('#logout-button, #logout-button-settings'); function handleLogout() { console.log("Logging out..."); localStorage.removeItem('beco-loggedInUser'); // Optional: Clear posts or other user-specific data from localStorage // localStorage.removeItem('beco-posts'); window.location.replace('index.html'); // Redirect to landing page } logoutButtons.forEach(button => { if (button) { button.addEventListener('click', handleLogout); } }); // --- Welcome Message (shared) --- const welcomeMessages = document.querySelectorAll('#welcome-message, #profile-username, #settings-username'); function displayUserIdentifier() { const loggedInUser = getLoggedInUser(); welcomeMessages.forEach(element => { if (element) { if (loggedInUser) { // Customize based on element ID if needed if (element.id === 'welcome-message') { element.textContent = `Hello, ${loggedInUser}!`; } else { element.textContent = loggedInUser; } } else { // Fallback if user somehow gets here logged out if (element.id === 'welcome-message') { element.textContent = `Hello!`; } else { element.textContent = 'User'; } } } }); } // --- Modal Handling (shared utility) --- const newPostModal = document.getElementById('new-post-modal'); const modalBackdrop = document.getElementById('modal-backdrop'); const modalCloseButton = document.getElementById('modal-close-button'); const newPostTriggers = document.querySelectorAll('#new-post-button, #new-post-trigger-explore, #new-post-trigger-profile, #new-post-trigger-settings'); // Select all triggers function openModal() { if (!newPostModal || !modalBackdrop) return; modalBackdrop.classList.add('visible'); newPostModal.classList.add('visible'); // Optional: focus the textarea const postTextArea = document.getElementById('post-text'); if(postTextArea) postTextArea.focus(); } function closeModal() { if (!newPostModal || !modalBackdrop) return; modalBackdrop.classList.remove('visible'); newPostModal.classList.remove('visible'); // Optional: clear the form const postForm = document.getElementById('new-post-form'); if(postForm) postForm.reset(); } newPostTriggers.forEach(trigger => { if (trigger) { trigger.addEventListener('click', (e) => { e.preventDefault(); // Prevent default link behavior openModal(); }); } }); if (modalCloseButton) { modalCloseButton.addEventListener('click', closeModal); } if (modalBackdrop) { // Close modal if backdrop is clicked modalBackdrop.addEventListener('click', closeModal); } // --- Post Management (shared utilities using localStorage) --- const POSTS_STORAGE_KEY = 'beco-posts'; // Function to get all posts from localStorage function getAllPosts() { const postsJson = localStorage.getItem(POSTS_STORAGE_KEY); try { return postsJson ? JSON.parse(postsJson) : []; } catch (e) { console.error("Error parsing posts from localStorage", e); return []; } } // Function to save all posts to localStorage function saveAllPosts(posts) { localStorage.setItem(POSTS_STORAGE_KEY, JSON.stringify(posts)); } // Function to add a new post function addPost(postData) { const posts = getAllPosts(); // Add timestamp and unique ID (simple approach) const newPost = { id: Date.now().toString(), // Simple unique ID timestamp: new Date().toISOString(), username: getLoggedInUser() || 'Anonymous', // Get current user ...postData // e.g., { text: '...' } }; posts.unshift(newPost); // Add to the beginning of the array saveAllPosts(posts); return newPost; // Return the created post } // Function to format timestamp (example) function formatTimestamp(isoString) { const date = new Date(isoString); // Simple relative time or absolute date const now = new Date(); const diffSeconds = Math.round((now - date) / 1000); const diffMinutes = Math.round(diffSeconds / 60); const diffHours = Math.round(diffMinutes / 60); const diffDays = Math.round(diffHours / 24); if (diffSeconds < 60) return `${diffSeconds}s ago`; if (diffMinutes < 60) return `${diffMinutes}m ago`; if (diffHours < 24) return `${diffHours}h ago`; if (diffDays < 7) return `${diffDays}d ago`; return date.toLocaleDateString(); // Older than a week } // Function to create HTML for a single post function createPostElement(post) { const postDiv = document.createElement('div'); postDiv.classList.add('post'); postDiv.setAttribute('data-post-id', post.id); // Sanitize text content before inserting const sanitizedText = post.text.replace(//g, ">"); postDiv.innerHTML = `

${post.username} ${formatTimestamp(post.timestamp)}

${sanitizedText}

`; // Add post actions (like, comment, etc.) later return postDiv; } // --- Initial Setup Calls --- // Run auth check on all pages that include script.js handleAuthRedirect(); // Display username/welcome message on relevant pages displayUserIdentifier(); // --- Authentication Logic (Simulation) --- // Depends on script.js for handleAuthRedirect, localStorage functions const loginForm = document.getElementById('login-form'); const signupForm = document.getElementById('signup-form'); function handleLogin(event) { event.preventDefault(); const usernameInput = document.getElementById('username'); const passwordInput = document.getElementById('password'); if (usernameInput && usernameInput.value.trim()) { const username = usernameInput.value.trim(); console.log(`Simulating login for: ${username}`); localStorage.setItem('beco-loggedInUser', username); // Initialize posts if first login (or clear previous user's posts) if (!localStorage.getItem(POSTS_STORAGE_KEY)) { localStorage.setItem(POSTS_STORAGE_KEY, JSON.stringify([])); } window.location.replace('app.html'); } else { alert('Please enter a username.'); } } function handleSignup(event) { event.preventDefault(); const usernameInput = document.getElementById('username'); const passwordInput = document.getElementById('password'); const confirmPasswordInput = document.getElementById('confirm-password'); if (!usernameInput || !passwordInput || !confirmPasswordInput) return; const username = usernameInput.value.trim(); const password = passwordInput.value; const confirmPassword = confirmPasswordInput.value; if (!username) { alert('Please enter a username.'); return; } if (password.length < 6) { alert('Password must be at least 6 characters long.'); return; } if (password !== confirmPassword) { alert('Passwords do not match.'); return; } console.log(`Simulating signup for: ${username}`); localStorage.setItem('beco-loggedInUser', username); // Initialize posts storage for new user localStorage.setItem(POSTS_STORAGE_KEY, JSON.stringify([])); window.location.replace('app.html'); } if (loginForm) { loginForm.addEventListener('submit', handleLogin); } if (signupForm) { signupForm.addEventListener('submit', handleSignup); } // Perform auth redirect check specifically for login/signup pages // handleAuthRedirect(); // Already called in script.js // --- Home Feed (app.html) Specific Logic --- // Depends on script.js for modal, posts, auth functions const feedContainer = document.getElementById('feed-container'); const newPostForm = document.getElementById('new-post-form'); // Function to load and display posts in the feed function loadFeed() { if (!feedContainer) return; const posts = getAllPosts(); // From script.js feedContainer.innerHTML = '

Home Feed

'; // Clear previous posts/skeleton if (posts.length === 0) { feedContainer.innerHTML += '

No posts yet. Create one or follow users!

'; // Placeholder message } else { posts.forEach(post => { const postElement = createPostElement(post); // From script.js feedContainer.appendChild(postElement); }); } } // Function to handle new post submission function handlePostSubmit(event) { event.preventDefault(); const postTextArea = document.getElementById('post-text'); if (!postTextArea) return; const postText = postTextArea.value.trim(); if (postText) { addPost({ text: postText }); // Add the post (saves to localStorage) closeModal(); // Close the modal loadFeed(); // Reload the feed to show the new post } else { alert("Post cannot be empty!"); } } // --- Initialization --- if (newPostForm) { newPostForm.addEventListener('submit', handlePostSubmit); } // Load the feed when the page loads loadFeed(); // Note: Auth check, welcome message, logout, theme toggle, modal triggers // are handled by the included script.js // --- Explore Page (explore.html) Specific Logic --- // Depends on script.js for shared functions console.log("Explore page script loaded."); // Placeholder for explore functionality // - Could load random posts from all users (if implemented) // - Could show trending topics/users (simulated) // Example: Just log that the page is loaded const exploreGrid = document.querySelector('.explore-grid'); if (exploreGrid) { // In a real app, fetch explore data here console.log("Explore grid found. Ready to load content."); } // Note: Auth check, welcome message, logout, theme toggle, modal triggers // are handled by the included script.js // --- Profile Page (profile.html) Specific Logic --- // Depends on script.js for shared functions const userPostsContainer = document.getElementById('user-posts-container'); const profileUsernameElement = document.getElementById('profile-username'); // Already updated by script.js function loadProfilePosts() { if (!userPostsContainer) return; const currentUser = getLoggedInUser(); if (!currentUser) return; // Should be redirected away anyway const allPosts = getAllPosts(); const userPosts = allPosts.filter(post => post.username === currentUser); userPostsContainer.innerHTML = ''; // Clear existing if (userPosts.length === 0) { userPostsContainer.innerHTML = '

You haven\'t posted anything yet.

'; } else { userPosts.forEach(post => { const postElement = createPostElement(post); userPostsContainer.appendChild(postElement); }); } } // --- Initialization --- loadProfilePosts(); // Add event listener for "Edit Profile" button (placeholder) const editProfileBtn = document.querySelector('.edit-profile-btn'); if(editProfileBtn) { editProfileBtn.addEventListener('click', () => { alert('Edit Profile functionality not implemented yet.'); }); } // Note: Auth check, username display, logout, theme toggle, modal triggers // are handled by the included script.js // --- Settings Page (settings.html) Specific Logic --- // Depends on script.js for shared functions console.log("Settings page script loaded."); // Theme toggle button is handled by script.js // Logout button is handled by script.js // Username display is handled by script.js // Add placeholders or listeners for other settings if needed const changeEmailBtn = document.querySelector('.setting-item button.btn-tertiary'); // Example selector if(changeEmailBtn && changeEmailBtn.textContent === 'Change') { // Be more specific if needed changeEmailBtn.addEventListener('click', () => { alert('Changing account details is not implemented in this demo.'); }); // Do similar for password change button } // Note: Auth check, username display, logout, theme toggle, modal triggers // are handled by the included script.js This comprehensive update includes: 1. **Material Icons:** Integrated via Google Fonts and used in the sidebar and buttons. 2. **Improved CSS:** Refined styles across all pages, including layout, typography, buttons, forms, posts, modal, and theme-specific adjustments. Added styles for profile headers, explore grids, and settings sections. 3. **New HTML Pages:** Created `explore.html`, `profile.html`, and `settings.html` with the standard app layout (sidebar + main content). `app.html` now serves as the Home/Feed page. 4. **New Post Functionality:** * A modal (`#new-post-modal`) is added to all app pages (triggered by sidebar link). * `app.js` handles the modal display and form submission. * Posts are created using `addPost` (in `script.js`) which saves them to `localStorage` with a timestamp and username. 5. **Home Page (app.html):** * `app.js` loads posts from `localStorage` using `getAllPosts` and displays them using `createPostElement` (both in `script.js`). 6. **Profile Page (profile.html):** * Displays the user's avatar (placeholder) and username. * `profile.js` loads and displays only the posts made by the currently logged-in user from `localStorage`. * Includes a non-functional "Edit Profile" button. 7. **Explore Page (explore.html):** * Basic structure and placeholder content. `explore.js` is included but has minimal functionality for now. 8. **Settings Page (settings.html):** * Displays username and placeholder account settings. * Theme toggle and Logout buttons are functional (handled by `script.js`). * Placeholder buttons for changing email/password. 9. **JavaScript Refactoring:** * Shared functions (theme, auth, logout, modal, post management, user display) are centralized in `script.js`. * Page-specific logic is placed in `app.js`, `explore.js`, `profile.js`, `settings.js`. * Uses `localStorage` (`beco-posts`) to persist posts across sessions. You now have a much more functional foundation for the Beco social media app.

Home Feed

Create New Post

Explore Beco

Create New Post

Your Posts

Create New Post

Account Settings

Appearance

Account

Danger Zone

Create New Post

Home Feed