Project Changelogs

Track the evolution of PROJECT 101 through every update

3.1.0

Version 3.1.0

February 16, 2026

Customization Panel Beautification & Z-Index Fixes
Customization Panel Material Design 3 Facelift: Completely redesigned the customization panel in the Custom Builder with premium MD3 aesthetics:
  • Visual Refinements: Softer layered shadows (24px/4px), reduced border-radius (16px), subtle header background (#fafbfc), and improved visual hierarchy.
  • Font Awesome Integration: Added descriptive icons to all section headers (e.g., Identity, Links, Main Content, Call-to-Action) for better visual scanning.
  • Enhanced Form Controls: Refined input styling with better focus states, improved list editor visuals with rounded corners and hover effects.
  • Done Button: Added prominent "Done Editing" button in panel footer with blue gradient and lift animation.
  • Robust Event Handling: Updated all click event listeners to use e.currentTarget for reliable icon handling within buttons.
Z-Index Hierarchy Optimization: Fixed critical stacking context issues across the builder:
  • Customization Panel: Set to z-index: 10000 to appear above all builder elements.
  • Section Controls: Maintained at z-index: 9999 for edit/move/duplicate buttons.
  • Main Navbar Dropdown: Raised to z-index: 2000 to stay above canvas elements.
  • Section Wrappers: Set to z-index: 1 to prevent overlaying main navigation.
  • Removed Darkening Overlay: Eliminated the ::before pseudo-element that was causing unwanted screen darkening and blur issues.
Bug Fixes:
  • Fixed customization panel content appearing blurred due to backdrop-filter on overlay.
  • Fixed section-wrapper borders appearing above main navbar dropdowns.
  • Fixed component controls appearing behind customization panel.
  • Added missing CSS styles for .btn-done and .panel-section-title.
3.0.0

Version 3.0.0

February 15, 2026

Material Design 3 Evolution
Site-Wide Material Design 3 Overhaul: Replaced the previous Neumorphic design with a modern, professional, and accessible MD3 system across the entire project.
Global Theme Synchronization: Unified the site's look through a reconstructed style.css:
  • Primary Color Palette: Adopted the elegant Purple shell (#6750A4) for all headers and primary actions.
  • MD3 Surface System: Implemented proper surface tones (#FFFBFE) and light-gray backgrounds for better readability.
  • Roboto Typography: Integrated Google Fonts' Roboto stack site-wide for a premium, modern feel.
  • Elevation & Shadows: Added 4-level elevation system with MD3 shadows for depth and interaction feedback.
Layout Lab (v2.0):
  • MD3 UI Redesign: Completely restyled the lab controls, sidebar, and interface to match the MD3 aesthetic.
  • Structure First: Normalized block styles to neutral gray (#E7E0EC) to help users focus on layout architecture rather than color theory.
  • Smart Controls: Added automatic "Gap" disabling when using Block display mode and improved interaction feedback.
  • Tool Upgrades: Implemented "Copy to Clipboard" for both HTML/CSS and streamlined the block deletion process.
Preview v2 Optimization:
  • Layout Restoration: Fixed critical structural bugs in preview-tailwind.html that caused layout "scattering" by restoring missing tags and balancing the DOM.
  • Slim Shell Integration: Tailored the MD3 header and nav to be slimmer for high-density app environments, maximizing usable workspace.
Bug Fixes & Polish:
  • Fixed non-functional dropdown menus in the global stylesheet.
  • Corrected nav link hover states and border-radius inconsistencies.
  • Normalized tag balance across dynamic includes.

Older Versions

Version 2.3.0

February 15, 2026 (Component Customization System)

  • Component Customization System: Revolutionary new feature allowing users to edit components directly in the Custom Builder with real-time preview. Click the edit button (⚙️) on any component to open the customization panel.
  • 11 Components Fully Customizable: All components now support inline editing:
    • Navbar - Logo text + navigation links with full CRUD (add/remove/edit)
    • Hero Sections (Centered & Split) - Heading, description, and button text
    • CTA Banner - Heading, description, and button text
    • Features Grid - Section heading and description
    • Testimonial Grid - Section heading
    • Pricing Cards - Section heading
    • Contact Form - Heading and description
    • Footer - Company name and description
    • Content Center - Heading and content text
    • Stats Counter - Placeholder (advanced editing coming in future update)
  • Real-Time Preview: All changes apply instantly to the canvas as you type - no "Apply" button needed. See your edits reflected immediately.
  • Button Text Editing: Hero (Centered & Split) and CTA Banner components now support editing button text for all buttons in the component.
  • Slide-In Customization Panel: Beautiful right-sliding panel (400px) with smooth animations, form controls, and context-specific options for each component type.
  • Code Architecture Improvement: Separated all customization logic into dedicated customization.js file (530+ lines) for better maintainability and future extensibility.
  • Bug Fixes:
    • Fixed timing issue where initCustomization() was called before components.json finished loading, causing undefined errors
    • Fixed input box overflow in customization panel by adding box-sizing: border-box to form controls
    • Added unique component IDs (data-component-id) for proper tracking of duplicated components
    • Fixed edit button not working on duplicated components by adding event listeners to clones
  • Enhanced User Experience: Click-outside-to-close panel, close button (×), component-specific form generation, and list editors for managing multiple items (nav links, buttons, etc.).

Version 2.2.0

February 15, 2026 (Template Gallery & Builder Upgrade)

  • Template Gallery Expansion: Added 7 new professional full-page templates organized into categories:
    • Authentication Pages (4): Login, Sign Up, Forgot Password, Email Verification - all with modern gradient backgrounds and social auth options
    • Starter Pages (3): 404 Error, Coming Soon, Maintenance Mode - essential utility pages for any project
  • Gallery Organization: Reorganized template gallery with 4 categories (Authentication, Starter Pages, Marketing, Application) for easier browsing. Total templates increased from 3 to 10.
  • Critical Builder Bug Fix: Fixed control buttons (delete, move up/down) not working due to innerHTML overwriting event listeners. All components can now be properly managed.
  • Duplicate Component Feature: Added duplicate button (⧉) to component controls, allowing users to clone any component with one click. Event listeners are properly re-attached to cloned elements.
  • Export Modal Upgrade: Completely redesigned export modal with tabbed interface:
    • HTML Tab: Complete document structure with proper meta tags and external CSS link
    • CSS Tab: Production-ready stylesheet with base reset, component styles, and responsive media queries
    • Individual Copy Buttons: Separate copy buttons for HTML and CSS with visual feedback
  • Control Visibility Enhancement: Improved section-controls visibility with increased z-index (9999), larger buttons (32px), enhanced styling with borders and backdrop-filter, and color-coded hover effects (red for delete, blue for duplicate).
  • Better UX: Added subtle background highlight on component hover, improved button styling with scale animation, and better visual feedback throughout the builder interface.

Version 2.1.0

February 15, 2026 (Code Quality & Accessibility Update)

  • Security Enhancements: Implemented XSS prevention in Template Builder with HTML sanitization and input validation to protect against malicious code injection.
  • Accessibility Improvements: Added comprehensive ARIA labels, keyboard navigation (Enter/Space key support), and aria-live regions across Layout Lab and Template Builder for better screen reader support.
  • Error Handling: Added try-catch blocks, null checks, and proper error logging throughout Layout Lab and Template Builder for improved stability.
  • Code Organization: Extracted magic numbers to constants (BLOCK_COLORS, DEFAULT_GAP, etc.), added JSDoc documentation to all major functions, and improved code structure.
  • Bug Fixes: Fixed grid columns not applying immediately by adding default value "repeat(3, 1fr)" and improved validation logic.
  • Layout Lab Enhancement: Revamped code export feature with a VS Code-style modal displaying separate HTML and CSS tabs, replacing the previous direct-copy approach.
  • Performance: Optimized DOM queries by caching frequently accessed elements and improved the rgbToHex() function with better validation.

Version 2.0.0

February 14, 2026 (Basic Templates Edition)

  • Layout Templates (Basic): Created a standalone templates page (`preview-templates.html`) using fundamental HTML/CSS/JS.
  • Standalone Components: Predefined Hero, Navbar, and Feature sections with dedicated styles in `css/templates-basic.css`.
  • Integrated Editor: Templates are fully compatible with existing property controls (Typography, Spacing, Style, Effects).

Version 1.9.1

February 14, 2026 (Hotfix)

  • Layout Fixes: Restored Padding, Margin, Gap, and Opacity controls. Fixed footer visibility.
  • Interactivity: Resolved non-functional sliders in Layout, Typography, Style, and Effects sections by fixing direct property tagging.
  • Typography: Added missing Line Height and Letter Spacing controls.
  • Stability: Cleaned up script logic and resolved JavaScript errors during property updates.
  • Architecture: Decoupled JavaScript logic into `script-tailwind.js` for independent maintenance.

Version 1.9.0

February 14, 2026 (Tailwind Edition)

  • New Tailwind Preview: Added a "Live Preview v2" page built entirely with Tailwind CSS utility classes.
  • Hybrid Architecture: The new page continues to use the core `script.js` engine, proving the logic is framework-agnostic!

Version 1.8.3

February 14, 2026 (Effect Merging)

  • Smart Merging: You can now combine compatible effects! Want to Grow AND Rotate at the same time? Go for it.
  • Composite Logic: The engine now intelligently merges Transforms (`scale`, `rotate`) and Animations so they work together seamlessly.

Version 1.8.2

February 14, 2026 (Smart Conflicts)

  • Conflict Detection: The builder now prevents illogical combinations (like multiple Transforms on the same trigger) to keep your code clean.
  • Smart Feedback: Helpful error messages explain why certain interactions can't be added together.

Version 1.8.1

February 14, 2026 (Theme Toggle)

  • Dark Mode: Added a toggle button to switch the preview area between Dark and Light themes.
  • Visual Testing: Easily test how your designs look on different backgrounds.

Version 1.8.0

February 14, 2026 (Interaction Builder)

  • No-Code Interaction Builder: Define complex interactions without writing code!
  • Trigger System: Choose when an effect happens (Hover, Click, Always Loop).
  • Effect Presets: instant access to cool animations like Rainbow, Shake, Pulse, and Glow.
  • Mix & Match: Stack multiple interactions (e.g., Pulse always + Grow on Hover).

Version 1.7.1

February 14, 2026 (Effects Polish)

  • Renovated Effects Tab: Moved all interaction and effect controls (Opacity, Shadow) to the dedicated Effects tab.
  • Interaction Playground: The State Selector is now located within the Effects tab for a more focused workflow.

Version 1.7.0

February 14, 2026 (Interactive FX)

  • Interactive States: Added full support for :hover and :active states. You can now design interactive buttons and cards directly in the previewer!
  • State Selector: Easily switch between Default, Hover, and Active editing modes.
  • Dynamic CSS Engine: Rewrote the core engine to generate real CSS classes instead of inline styles, ensuring accurate rendering of pseudo-states.

Version 1.6.0

February 14, 2026 (UI Refinement)

  • Tabbed Interface.
  • Granular Effects (Manual Mode).
  • Smart Controls.

Version 1.5.0

February 14, 2026 (Control Enhancements)

  • Slider & Number Inputs.
  • Display Options.

Version 1.4.0

February 14, 2026

  • VS Code Style Modal.

Version 1.3.0

February 14, 2026

  • Dynamic Component Loading.

Version 1.2.0

February 13, 2026

  • Core CSS Engine: Implemented variable-based styling system.
  • Layout Basics: Added Flexbox and Grid toggles.

Version 1.1.0

February 13, 2026

  • Basic Controls: Text Input, Width/Height sliders.
  • Preview Panel: Initial live preview implementation.

Version 1.0.0

February 13, 2026

  • Initial Release: Project setup with HTML structure.
  • File System: Organized css/js folders.