Readme

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