---

### 📄 Prompt: Build an "Instant Moving Quote" Web Tool

**Project Overview:**  
Create a single-page web tool for a moving company that allows users to input basic moving details and instantly see an on-screen quote. The tool should be lightweight, responsive, and easy to print/save. It should not rely on any frameworks (no React, no Tailwind, etc.) — **pure HTML, CSS, and JavaScript.**

---

### 🎯 Functional Requirements

- The page must include **two main sections side-by-side** on desktop (stacked vertically on mobile):
  - **Form Section**: Where the user enters their details.
  - **Quote Preview Section**: Where a live preview of the generated quote appears.
- **Form Fields**:
  - Full Name (Text Input)
  - Email (Email Input)
  - Phone Number (Telephone Input)
  - Preferred Move Date (Date Picker)
  - Size of Move (Dropdown Select: Studio / 1 Bedroom / 2 Bedroom / 3+ Bedroom)
  - Origin Address (Textarea)
  - Destination Address (Textarea)
  - Optional Services (Checkboxes):
    - Packing Service
    - Storage Required
    - Transit Insurance
- **Quote Preview Section** must dynamically update as the user fills in the form, showing:
  - A quote number (based on current timestamp)
  - Client's name, contact, move date, origin, and destination
  - A table summarizing selected services and their prices
  - Subtotal, VAT (15%), and Grand Total
- Include **"Send Quote via Email"** and **"Print/Save PDF"** buttons:
  - Email button should generate a `mailto:` link prefilled with the quote details.
  - Print button should trigger `window.print()` to print the quote cleanly.
- The quote preview must include company details (static), such as address, email, and phone number.

---

### 🎨 Design Requirements

- Use **CSS custom properties** (variables) for consistent theming (brand color, borders, spacing, shadows).
- The design must look **professional** but **simple**.
- Form elements must have:
  - Rounded corners
  - Soft focus states (highlight fields on focus)
  - Proper invalid/validation states (e.g., red border if invalid input)
- Quote preview should be styled to look like a **simple invoice** with clean table borders.
- The entire layout must be **responsive**:
  - Two columns on desktop.
  - Stacked vertically on mobile screens (below 920px).
- **Print Styles**:
  - Hide form and buttons when printing.
  - Expand the quote section to full width.
  - Light background, black text.
  - Maintain simple table borders and font adjustments for printing.

---

### 🛠 Technical Requirements

- Use **plain JavaScript** (no jQuery or frameworks).
- Use `addEventListener` to listen for input changes and update the quote live.
- Validation:
  - Require all mandatory fields before enabling the submit/email/print buttons.
  - Use built-in HTML5 validation (`required` attributes) plus custom checks where necessary.
- Generate the **quote number** based on current date and time (`YYMMDD-HHMM` format).
- For date fields:
  - Default "Move Date" should not allow dates before today.
- Format prices correctly (example: `R 2,500.00`).
- Use `locales` properly for number formatting (`en-ZA`).
- Create helper functions for things like currency formatting, date formatting, and form validation.
- Ensure **accessibility** where possible (e.g., use `aria-live` for updates).

---

### 🚀 Bonus Features (optional but nice to include)

- Smooth scroll to quote preview on mobile after form is filled in.
- Subtle button animations on hover/click (e.g., scale down a bit on active click).
- Include some screen reader improvements (e.g., announce total when updated).
- Show a "Preview" badge on the quote if form is incomplete, change to "Quote" when ready.

---

### 📋 Deliverable

A single HTML file with embedded CSS and JS (no separate files), ready to open in a browser.  
No external dependencies.  
Keep the structure clean with comments dividing sections (e.g., `/* Layout Styles */`, `/* Form Handling */`, etc.).

---

# 📢 Important:
> Do **not** copy any pre-existing solution directly.  
> Implement your **own version** following the **above structure and logic**.

We are testing for **how well you can recreate functionality independently**, not how well you can replicate a design exactly.

---