VoidLink-FSWD-241941

VoidLink • Vacuum in the Void — ConnecFriend with a interactive enviro

Comment

VOIDLINK • VACUUM IN THE VOID

ConnecFriend Social Network

Still developing it...

1. System Overview

VoidLink • Vacuum in the Void is a social networking user interface engineered for VOID_FAI under the project title “ConnecFriend”. Instead of standard social media templates, this platform is set within a sleek, modern, dark cosmic matrix. It pairs a Dual Binary Black Hole simulation (a gargantuan singularity plus a continuously orbiting micro black hole) with modern typography (Outfit & Plus Jakarta Sans), AI Assistant Pets (Cat, Parrot, Eagle, Hoot), an Avatar Customizer, Snappy Web Audio Page Transitions, and a 10-Theme Switcher.

Strict Compliances:

  1. Zero UI Resemblance (Instruction 3): Completely custom aerospace HUD & glass aesthetic—zero resemblance to Facebook, Twitter, Instagram, or Orkut.
  2. Client-Side Simulation (Instruction 5): No backend server calls; requests and state changes are simulated with reactive state management, asynchronous responses, and LocalStorage persistence.
  3. Framework Mandate (Instruction 6): Built using the Tailwind CSS framework via official CDN across all markup, complemented by custom CSS modules for canvas astrophysics, accretion disk optics, and gravitational warp transitions. r.

2. Directory Tree Structure

VOID_FAI/
├── index.html                   # Social Feed (Friends radar by login time, like/dislike counts, post composer)
├── login.html                   # Social Gateway (Dual Black Hole canvas, aside console, aesthetic title)
├── profile.html                 # Profile Hub (AI Assistant Pets, Avatar customizer, 1-3 friend ratings)
├── messages.html                # Sub-space Private Messaging (Watery caustics & fluid ripple dynamics)
├── explore.html                 # Member Directory (Friend invitations & ignore-list barrier)
├── README.md                    # Comprehensive documentation, CLO mapping & grading matrix
├── 241941.zip                   # Assignment submission archive
├── css/
│   ├── void-theme.css           # 10 themes, Outfit/Plus Jakarta Sans typography, watery chat dynamics
│   ├── blackhole.css            # Accretion disk, photon ring, Doppler optics & gravitational lensing
│   └── transitions.css          # Snappy quantum page transitions (240ms) & portal animations
├── js/
│   ├── state.js                 # Central state store (Void_Fai, Hamza, Munawar, Hafiz_Obaidullah, AI Pets)
│   ├── theme.js                 # 10 Cosmic Themes engine, navbar dropdown & live color synchronization
│   ├── blackhole-stage.js       # Persistent Black Hole & Orbiting Satellite (Picture 1 inside app all the time)
│   ├── blackhole.js             # Dual Binary Black Hole engine (Primary singularity + Orbiting micro hole)
│   ├── auth.js                  # Gateway credentials verification, quick member presets, session setup
│   ├── feed.js                  # Social feed, friends sorted by login time, like/dislike counts, share modal
│   ├── profile.js               # Profile manager, AI Pets (Cat, Parrot, Eagle, Hoot), Avatar customizer, ratings
│   ├── messaging.js             # Private chat engine with watery ripples and instant bot replies
│   ├── invite.js                # Member directory search, friend invitations & ignore list barrier
│   └── transitions.js           # Snappy page transitions with Web Audio API sound synthesis
└── assets/
    ├── avatars/
    │   ├── 1.jpg        # Void_Fai (Active User)
    │   ├─2s.jpg           # Hamza (Friend, Developer)
    │   ├── 3s.jpg            # Munawar (Friend, Designer)
    │   └── 4.jpg           # Hafiz_Obaidullah the great (Outlaw, Ignores Void_Fai)
    └── images/
        ├── black_hole.jpg       # Accretion capture for post attachments
        └── void_station.jpg     # Station capture for post attachments

3. Character Personas & AI Assistant Pets

Character Handle Role AI Assistant Pet Initial Status
Void_Fai @void_fai Creator & Social Architect Shadow Nova 🐱 (Cyber Feline AI) Active Logged-in User
Hamza @hamza Full-Stack Developer Aero Talon 🦅 (Vanguard Eagle AI) Friend (Rated Trustworthy: 3, Latest Login)
Munawar @munawar UI/UX Visual Designer Chronos Hoot 🦉 (Singularity Owl AI) Friend (Rated Cool: 2, Logged in earlier)
Hafiz_Obaidullah the great @obaidullah_great Gaming Champion & Critic Prism Echo 🦜 (Chromatic Parrot AI) Non-Friend (Has Void_Fai in ignoreList!)
Ayesha @ayesha_cloud Cloud Architect Shadow Nova 🐱 (Cyber Feline AI) Non-Friend Member (Can invite / chat)

4. Key Upgrades Implemented

4.1. Dual Binary Black Hole Simulation

  • In js/blackhole.js, the canvas now renders a Binary Black Hole System:
    • Primary Singularity: Large Gargantua event horizon with relativistic Keplerian accretion disk and Doppler beaming.
    • Orbiting Micro Black Hole: A smaller, secondary black hole that continuously orbits inside the accretion field at high speed, complete with its own miniature event horizon, photon ring, and particle wake!

4.2. Modern Social Typography

  • Migrated to Outfit (headings, bold titles) and Plus Jakarta Sans (clean, crisp, readable body text) via Google Fonts in css/void-theme.css.

4.3. AI Assistant Pets

  • In profile.html & js/profile.js, every user has an AI Assistant Pet (Cat 🐱, Parrot 🦜, Eagle 🦅, Hoot Owl 🦉). Users can open the Pet Switcher modal to customize their AI companion.

4.4. Avatar Customizer

  • In profile.html, users can click Change Avatar to pick from preset avatars, paste an image URL, or select a local photo, which updates their profile picture across the entire application instantly.

4.5. Fast Snappy Page Transitions with Web Audio Sound

  • In js/transitions.js, moving between pages triggers a synthesized cosmic warp swoosh via the Web Audio API (playWarpSound()), executing in 240ms for a fast, responsive feel.

4.6. Watery Chat Dynamics

  • In messages.html and js/messaging.js, typing or clicking triggers fluid liquid ripples (.water-ripple-drop), and chat bubbles have an aquatic refraction shimmer.

4.7. 10 Cosmic Themes Switcher

  • Accessible from the top navbar across all pages (Grey Black Hole, Red Crimson, Lavender Black Hole, White, Orange, Green, Aqua, Relativistic Gold, Midnight Sapphire, Cyber Neon).

Built With

Share this project:

Updates