🚀 CMS with text, pictures and lines

A headless, browser-based Content Management System that lets you visually and precisely construct a static instruction HTML page with ease.

🔗 Try the live demo: https://pajozim.github.io/CMSwTPaL/

---

✨ Key Features

• Visual Drag-and-Drop Builder: Create and organize content using a simple interface.
• Rich Text Editing: Integrated with Quill.js for powerful, WYSIWYG text editing.
• Interactive Annotations: Draw and manage interactive lines and hotspots on images using LeaderLine and InteractJS.
• Dynamic Media Management: Upload, organize and embed images directly into your content.
• Static Export: Generate an index.html inside the ready-for-upload/ folder, bundled with all assets for instant deployment.
• Zero Server Setup: Everything runs in your browser, making it perfect for local, offline-first authoring.
• Theme Switcher: Choose between four color themes to match your style.

---

🛠️ Built With

• Frontend: Vanilla JavaScript, HTML5, CSS3
• Libraries:
  • Quill.js - For rich text editing .
  • SortableJS - For drag-and-drop functionality.
  • InteractJS - For advanced interactions like resizing and dragging.
  • LeaderLine - For creating dynamic lines and connections.
  • JSZip - For creating downloadable project archives.

---

🚀 Getting Started

Prerequisites

• A modern web browser (e.g., Chrome, Firefox, Opera, Edge).

Installation & Usage

1. Clone the repository:

   git clone https://github.com/Pajozim/CMSwTPaL

   Or download the ZIP via the "<> Code" button on GitHub.

2. Navigate to the project folder:

   cd CMSwTPaL

   Or double-click the CMSwTPaL/ folder in your file explorer.

3. Open admin.html in your browser — no server required. (Ignore index.html — it's only for the GitHub Pages demo.)

4. Build your content visually: edit text, upload images, arrange elements, and draw connections by clicking on the green stripes inside textbubbles.

   ⚠️ Image path requirement: Place your images to ready-for-upload/assets/images/ — the CMS references this folder for all image paths to keep exports clean and CORS-free.

5. Auto-save: Your progress is automatically saved to localStorage — close the tab anytime, and pick up where you left off. You can also manually save and load your progress.

6. Click Export — this downloads an index.html file for public use.

   ⚠️ Important: Save this file inside your ready-for-upload/ folder, replacing the existing one. The folder already contains the required structure — keeping index.html there ensures all paths work correctly.

7. Preview index.html from the ready-for-upload/ folder in your browser to verify everything looks correct.

8. Upload the entire ready-for-upload/ folder to your web server.

---

🤝 Contributing

This project is a work in progress, and contributions are welcome! Please feel free to submit a Pull Request.

---

📜 License

Distributed under the MIT License. See LICENSE for more information.