# 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