🖼️ AI Wall Poster Planner

Design your perfect wall poster layout with ease. The AI Wall Poster Planner is a simple, web-based tool that helps you customize, visualize, and organize your wall posters before you ever hang them up.

---

🚀 Features

🎨 Wall Customization

• Set the dimensions of your wall (width & height).
• Choose your preferred units: centimeters (cm), inches (in), or feet (ft).

🖼️ Poster Management

• Upload your own photos to turn them into posters.
• Define custom print dimensions for each photo.
• Choose from standard print sizes (e.g., A4, 8x10, 16x20, etc.).
• Add multiple posters to your wall canvas.

🧩 Real-Time Visualization

• Preview your poster arrangement live as you work.
• View the posters to scale based on your wall settings.

🖱️ Drag and Drop Interaction

• Move and reposition posters freely on the wall using drag-and-drop.

🧠 Layout Suggestions

• Automatically arrange posters using:
  • Grid Layout
  • Horizontal Row
  • Vertical Column

🗑️ Clear All Posters

• Start fresh anytime with a single click using the Clear All button.

---

🧑‍🏫 How to Use

1. 🧱 Set Up Your Wall

   • Input your wall's width and height.
   • Select your desired unit of measurement.

2. 📸 Upload and Add Posters

   • Click "Upload Your Photo" to select images from your computer.
   • Define the print dimensions (e.g., 8x10 inches).
   • Click "Add Photo to Wall".

3. 🧩 Arrange Posters

   • Drag and drop posters to position them manually.
   • Use layout buttons (Grid, Horizontal, Vertical) for smart arrangements.

4. 🔄 Reset Your Layout

   • Click "Clear All Photos" to remove all posters and start over.

---

🖥️ Screenshots

🧱 Wall Setup Panel

Set the dimensions and units of your wall before adding any posters.

---

🖼️ Poster Upload and Add Section

Upload images, choose print sizes, and add them to your wall canvas.

---

🔀 Poster Layout Modes

Arrange posters manually or use smart auto-layout suggestions.

---

🖱️ Drag-and-Drop Wall Canvas

Move posters freely and visualize your wall layout in real-time.

---

🛠️ Tech Stack

💻 Frontend	🎨 Styling	🧠 Logic / Interaction	📦 Tooling
HTML5	TailwindCSS	JavaScript	Vite (optional)
Canvas API		Drag & Drop

Note: If you're not using Vite, replace that badge with your actual build tool or dev server (like Parcel, Webpack, or just "Vanilla").

---

📦 Future Improvements

• Save/export layout as image or PDF
• Add poster rotation and frame options
• Snap-to-grid or alignment guides
• Wall color or texture customization
• Mobile responsive version
• User accounts to save designs

---

📄 License

MIT License

---

🙌 Acknowledgements

• Built using vanilla JavaScript, HTML5 Canvas, and TailwindCSS.
• Poster layout logic inspired by common photo wall framing techniques.

---