diff --git a/README.md b/README.md new file mode 100644 index 0000000..876cdac --- /dev/null +++ b/README.md @@ -0,0 +1,69 @@ + + +# Resizable & Snap Window (Pure HTML / CSS / JavaScript) + +This project is a standalone, dependency-free demonstration of a desktop-style floating window implemented using plain HTML, CSS, and JavaScript, featuring drag, resize, snap-to-edge behavior, and maximize/restore logic. + +## Features + +* Draggable window via a custom title bar +* Eight-direction resize handles (edges and corners) +* Live snap to screen edges and corners (halves and quarters) +* Automatic restore when dragging out of a snap zone +* Maximize and restore support +* Minimum size constraints +* Boundary clamping to the viewport +* Canvas that automatically resizes with the window +* Single-file implementation (no build step, no dependencies) + +## Behavior Overview + +* **Drag** the title bar to move the window. +* **Resize** using any edge or corner handle. +* **Snap** occurs automatically when the cursor is near screen edges or corners. +* **Unsnap** happens when the window is dragged away from the snap zone. +* **Maximize** fills the viewport and disables snapping until restored. +* **Restore on grab**: dragging a snapped window immediately restores it to its previous size and position. + +## File Structure + +``` +index.html +``` + +Everything (markup, styles, and logic) is contained in a single HTML file. + +## Usage + +1. Clone or download the repository. +2. Open `index.html` in any modern web browser. +3. No server, build tool, or framework is required. + +## Implementation Notes + +* Uses `position: fixed` for reliable viewport-relative snapping. +* Snap logic is evaluated live during drag and resize operations. +* Window state is preserved before snap and maximize operations to allow correct restoration. +* Canvas dimensions are explicitly synchronized with the window size to ensure correct rendering. +* No external libraries or browser-specific APIs are used. + +## Browser Compatibility + +Works in all modern browsers that support: + +* ES6 JavaScript +* CSS Flexbox +* Pointer and mouse events +* `backdrop-filter` (optional visual enhancement) + +## Intended Use + +This project is intended as: + +* A reference implementation for custom window managers +* A prototype for desktop-like web user interfaces +* A base for further experimentation (multiple windows, docking systems, tiling layouts) + +## License + +MIT