# Nui

The HTML/CSS/JS UI — messages, callbacks, and customization.

## Design

The NUI is a dark purple tablet-style overlay using the **Orbitron** font. It features animated glowing borders (`pulse-border`), a shimmer overlay, a floating logo, and a 4-column item card grid. The accent color is `#9C27B0` with a `#23FF00` hover color.

## NUI Messages (Lua → HTML)

| action | Payload                | Effect                                          |
| ------ | ---------------------- | ----------------------------------------------- |
| `open` | `{ sellItems: [...] }` | Shows the container and populates the item grid |
| `hide` | —                      | Hides the container and closes any open modal   |

### sellItems array format

```javascript
// Each item in the sellItems array:
{
  name: 'Gold Chain', // Display label from shared items
  icon: '🪙', // Emoji fallback
  image: 'goldchain', // Used to build the image path
  price: 500, // Price per unit
  amount: 3, // Player's current quantity
  item: 'goldchain' // Internal item name sent back on confirm
}
```

## NUI Callbacks (HTML → Lua)

| Callback   | Data sent                 | Triggered when                            |
| ---------- | ------------------------- | ----------------------------------------- |
| `closeUI`  | `{}`                      | Player presses Escape or the UI closes    |
| `sellItem` | `{ item, amount, price }` | Player clicks Confirm in the amount modal |

## Item Images

Images are loaded from the inventory resource's image folder. The default path targets qs-inventory:

```html
![](nui://qs-inventory/html/images/goldchain.png)
```

The `onerror` handler falls back to the emoji icon automatically if the image path doesn't resolve — no config needed.

## Customization

| What to change        | Where                                                    |
| --------------------- | -------------------------------------------------------- |
| Shop title / subtitle | `html/index.html` — `.pawn-title` and `.pawn-subtitle`   |
| Logo                  | Replace `html/logo.png` with your own 80×80px image      |
| Accent color          | `html/style.css` — search for `#9333ea` / `147, 51, 234` |
| Emoji icons           | `client/client.lua` — `getItemIcon()` function           |
| Image source path     | `html/script.js` — `nui://qs-inventory/html/images/`     |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://mohssins.gitbook.io/mohscriptsdocs/moh-pawnshop/nui.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.