OSINT-Framework icon indicating copy to clipboard operation
OSINT-Framework copied to clipboard

Comprehensive UI/UX Overhaul and Feature Enhancement

Open 1999AZZAR opened this issue 5 months ago • 2 comments

This pull request introduces a complete redesign of the OSINT Framework's user interface and adds several new features to modernize the application, improve usability, and enhance the overall user experience.

Summary of Changes

The goal of this update was to bring a modern, professional, and intuitive design to the framework while preserving its core functionality. The entire front end has been rebuilt from the ground up to be more responsive, visually appealing, and feature-rich.

✨ Key Improvements

🎨 UI & Design Overhaul

  • Modern Glassmorphism Design: The entire layout now uses a "glass" effect, with a floating sidebar and main content area that have a blurred, semi-transparent background.
  • Refined Color Palette: A new, more sophisticated color scheme has been implemented for both light and dark modes, improving aesthetics and readability.
  • Dynamic Background: Replaced the static background with a subtle, elegant gradient that changes between light and dark modes.
  • Improved Typography & Spacing: The entire application now uses a modern system font stack with improved spacing and a cleaner layout for better readability.

🚀 Feature & UX Enhancements

  • Fully Responsive Graph: The D3.js graph is no longer fixed-size. It now dynamically resizes to fill the entire viewport, making optimal use of available screen space on any device.
  • Powerful Search with Autocompletion: The search functionality has been completely rewritten. It now features:
    • Autocompletion to help users find tools and resources quickly.
    • Dynamic Highlighting that expands the tree to reveal matches and highlights all relevant nodes and their parent branches for easy identification.
  • Smoother Animations: All D3.js transitions and CSS animations have been refined to be faster and smoother, creating a more responsive user experience.

🛠️ Code & Project Structure

  • JavaScript Refactoring: The core arf.js file has been modernized to handle dynamic resizing, pre-process the graph data for a more robust search, and improve overall code structure.
  • Modern CSS: The arf.css stylesheet has been rewritten using CSS variables for easier theming and maintenance.
  • Project Cleanup: Removed the unused bower.json file to keep the project tidy.
  • Comprehensive README.md: The documentation has been completely rewritten to be more detailed, including sections on the tech stack, project structure, and clearer instructions for setup and contribution.
  • New AI tools list: adding some of the most common ai chat boot like gemini, perplexity, etx

This update aims to breathe new life into the OSINT Framework's front end, making it an even more powerful and enjoyable tool for the community. Thank you for your consideration.

1999AZZAR avatar Jun 30 '25 10:06 1999AZZAR