Mock Social Media

Description of the Mock Social Media Platform (as of April 17, 2025)

Core Features

1. User Authentication:
   • Sign Up: Users can create an account with a username and password. Accounts are stored in localStorage ('users' key) as { username: { password } }, persisting across sessions.
   • Login: Users log in with their credentials, with validation to prevent unauthorized access. Invalid credentials trigger an alert.
   • Logout: Clears the session, returning to the login screen.
   • Persistence: User accounts remain available after browser refresh, limited only by localStorage capacity (~5-10MB).
2. Post Creation, Editing, and Deletion:
   • Create Posts: Logged-in users can create posts with text (via a textarea) and/or an image (via file input, accepting image/*). Posts include the username, timestamp, and optional image (stored as base64 data URL).
   • Edit Posts: Users can edit their own posts' text content via an inline form (textarea with Save/Cancel buttons). Editing updates the content and timestamp, with changes saved to localStorage.
   • >span class="css-1jxf684 r-bcqeeo r-1ttztb7 r-qvutc0 r-poiln3 r-a8ghvy">: Users can delete their own posts after a confirmation prompt. Deletions are saved to localStorage.
   • Persistence: Posts are stored in localStorage ('posts' key) as [{ username, content, timestamp, image }, ...], persisting across sessions.
   • Security: Edit/Delete buttons are only visible to the post's creator, mimicking social media permissions.
   • TTS Feedback: Post creation ("Post created successfully"), editing ("Post updated successfully"), and deletion ("Post deleted") trigger TTS announcements, with post content read aloud if present.
3. Customizable Visual Effects:
   • Rainy Particle Background: A canvas-based particle system renders cyan raindrops with wind-like horizontal drift, creating a cyberpunk ambiance. Users can toggle particles on/off and adjust:
     • Particle Count: 10–200 (default: 100).
     • Vertical Speed: 1–10 (default: 3).
     • Horizontal Speed: 0–5 (default: 1).
     • Settings are saved in localStorage and persist across sessions.
   • Neon Color Customization:
     • Four color pickers in the settings panel allow users to customize neon glows for:
       • Buttons (--neon-color-buttons, default: #00f7ff).
       • Containers (--neon-color-containers, default: #ff00ff).
       • Posts (--neon-color-posts, default: #00ff00).
       • Inputs (--neon-color-inputs, default: #ff007f).
     • Colors are saved in localStorage and applied as CSS custom properties.
4. >span class="css-1jxf684 r-bcqeeo r-1ttztb7 r-qvutc0 r-poiln3 r-a8ghvy">:
   • A <select> dropdown in the settings panel offers four neon-inspired themes, each with a gradient background and matching color scheme:
     • Dark (default): Black/grey gradient (#1a1a1a to #2c2c2c), light text, dark containers/inputs.
     • Light: White/light-grey gradient (#f0f0f0 to #ffffff), dark text, white containers/inputs.
     • Cyberpunk: Dark purple gradient (#0d0221 to #2a1b3d), neon cyan text, purple containers/inputs.
     • Retro: Pink/cyan gradient (#ff007f to #00f7ff), white text, dark pink containers/inputs.
   • >span class="css-1jxf684 r-bcqeeo r-1ttztb7 r-qvutc0 r-1sw30gj r-z2wwpe r-mtzec0 r-1471scf r-1aiqnjv r-1hq4qhi r-16dba41 r-ilng1c r-trst2h r-1noe1sz r-njp1lv">localStorage ('theme' key) and persist across sessions.
   • Switching themes triggers a smooth 0.3s transition for background and text colors.
   • TTS announces theme changes (e.g., "Switched to cyberpunk theme").
   • The Reset button reverts to the Dark theme.
5. Settings Panel:
   • Location: Positioned in the top-left corner (left: 10px, top: 90px), slides in from the left when opened.
   • Controls:
     • Particle settings (sliders for count, vertical speed, horizontal speed).
     • Neon color pickers (four, as described above).
     • >span class="css-1jxf684 r-bcqeeo r-1ttztb7 r-qvutc0 r-1sw30gj r-z2wwpe r-mtzec0 r-1471scf r-1aiqnjv r-1hq4qhi r-16dba41 r-ilng1c r-trst2h r-1noe1sz r-njp1lv"><select> with Dark, Light, Cyberpunk, Retro).
     • Reset button: Full-width, below all controls, resets all settings to defaults (particles, colors, theme, particles enabled).
   • UI: Neon glows, responsive width (200px, max-width: 90vw), hidden by default, toggled via "Show Settings"/"Hide Settings" button.
   • Persistence: All settings are saved in localStorage and restored on page load.
   • TTS: Announces panel open/close ("Settings panel opened/closed") and reset ("Settings reset").
6. Animations:
   • Posts: Fade in with a slight upward slide (0.5s) when rendered, using CSS @keyframes fadeIn.
   • Buttons: Scale up (1.1x) on hover (0.2s transition) for a bounce effect, applied to all buttons (Toggle Particles, Show Settings, Reset, Login, Post, Edit, Delete, etc.).
   • Animations are lightweight and enhance the cyberpunk feel without impacting performance.
7. Audio Feedback:
   • Rain Sound: A looping rain.mp3 plays when particles are enabled, with volume at 0.3. Pauses when particles are disabled.
   • Click Sound: A click.mp3 plays on button clicks (Login, Signup, Logout, Post, Reset, Edit, Delete, Toggle Particles, Show Settings).
   • Error Handling: Audio playback errors are logged to the console, ensuring the app functions without audio if files are missing.
   • TTS: Web Speech API provides voice feedback for:
     • Button actions (e.g., "Logging in", "Creating post").
     • Post interactions (reads post content on click/Enter).
     • Settings changes (e.g., "Particle effect enabled", "Switched to retro theme").
     • Post actions (e.g., "Post updated successfully", "Post deleted").
8. Accessibility:
   • Keyboard Navigation: Posts and buttons are focusable via Tab, with Enter triggering actions (e.g., reading posts, clicking buttons).
   • TTS: Enhances accessibility by reading content and actions aloud.
   • High Contrast: Neon glows and theme colors ensure readability, especially in Dark/Cyberpunk themes.
   • Note: Adding aria-label attributes would further improve screen reader support.
9. Responsive Design:
   • Layout: Content is centered (max-width: 800px), with a fixed canvas background and fixed-position buttons/panel.
   • Settings Panel: Adjusts to width: 180px, left: 5px, top: 80px on screens ≤600px (media query).
   • Buttons: "Toggle Particles" (top: 5px, left: 5px) and "Show Settings" (top: 40px, left: 5px) adjust for small screens.
   • Images: Post images scale to max-width: 100% for mobile compatibility.

User Interface

• Login/Signup Screen:
  • Centered container with neon-glow inputs for username/password.
  • Buttons for Login/Signup, with links to toggle between forms.
  • Neon glows and theme-specific colors (e.g., dark purple in Cyberpunk theme).
• Main Screen:
  • Header: Displays "Welcome, [username]" and a Logout button.
  • Post Form: Textarea for content, file input for images, and Post button, all with neon glows.
  • Posts: List of posts with username, timestamp, content, and optional image. Each post fades in on render.
  • Post Actions: Edit/Delete buttons (visible only to the post's creator) with bounce animation. Edit opens an inline textarea with Save/Cancel buttons.
• Controls:
  • Toggle Particles: Top-left button (top: 10px, left: 10px) to enable/disable particles, with TTS and click sound.
  • Show Settings: Top-left button (top: 50px, left: 10px) to open/close the settings panel, with TTS and click sound.
  • Settings Panel: Top-left (top: 90px, left: 10px), slides in from the left, contains sliders, color pickers, theme toggle, and Reset button.
• Visuals:
  • Cyan rain particles with wind-like drift (toggleable).
  • Customizable neon glows for buttons, containers, posts, and inputs.
  • Gradient backgrounds per theme (135-degree angle, subtle transitions).
  • Smooth animations (post fade-in, button bounce, theme transitions).

Technical Details

• Tech Stack:
  • HTML: Single index.html with semantic structure, canvas for particles, and audio elements.
  • CSS: styles.css with custom properties (--neon-color-*), animations (@keyframes), and media queries for responsiveness.
  • JavaScript: game.js handles logic, DOM manipulation, canvas rendering, localStorage, Web Speech API, and audio playback.
• Storage:
  • localStorage stores:
    • Users ('users'): { username: { password } }.
    • Posts ('posts'): [{ username, content, timestamp, image }].
    • Settings: Particle count, speeds, neon colors, theme, particles enabled.
  • Limited by ~5-10MB (browser-dependent); image-heavy posts may hit this limit.
• Canvas: Used for particle system, rendering cyan raindrops with randomized size, speed, and opacity.
• Audio: rain.mp3 (looping) and click.mp3 (on button clicks), with error handling for missing files.
• TTS: Web Speech API (SpeechSynthesisUtterance) for voice feedback, with lang: 'en-US'.
• Animations:
  • CSS-based: Post fade-in (0.5s), button bounce (0.2s), theme transition (0.3s).
  • Lightweight, no JavaScript animation loops (except canvas particles).
• Error Handling:
  • Console logs for missing DOM elements (e.g., canvas, settings panel).
  • Audio playback errors logged without breaking functionality.
  • Validation for empty posts, duplicate usernames, and invalid logins.

Limitations

• Storage: localStorage limits may restrict image-heavy posts. A backend (e.g., Node.js with MongoDB) would scale better.
• Image Editing: Post editing is text-only; image changes require a new post.
• Audio: Requires rain.mp3 and click.mp3 files; missing files are logged but don't break the app.
• Accessibility: Lacks aria-label for screen readers, though keyboard navigation and TTS provide partial support.
• Performance: High particle counts or many image posts may lag on low-end devices (mitigated by toggleable particles).

Deployment

• Runs locally via a server (e.g., VS Code Live Server, python -m http.server) to avoid CORS issues with audio/images.
• Files: index.html, styles.css, game.js, rain.mp3, click.mp3 (audio optional if commented out).
• Tested in Chrome, Firefox, and Edge, with full support for Canvas, Web Speech API, Audio, and localStorage.

User Experience

The platform offers a visually striking, neon-cyberpunk experience with:

• Immersion: Rain particles, gradient themes, and neon glows create a futuristic vibe.
• Interactivity: Customizable settings, animations, and audio/TTS feedback engage users.
• Ease of Use: Intuitive login/posting, with clear controls and responsive design.
• Accessibility: Keyboard navigation and TTS support diverse users, with room for further ARIA enhancements.