Add modern NUI inventory UI with red/blue glassmorphism theme

[Copilot]

Adds a new HTML/CSS/JS NUI inventory interface with semi-transparent glassmorphism styling and red/blue accents. Includes client integration glue for ox_inventory while keeping existing backend logic intact.

New Files

• web/ui.html - NUI entrypoint with 8x3 inventory grid, equipment slots (backpack/parachute/armor/weapons), body silhouette with limb health bars, hotkey slots 3-5
• web/style.css - Glassmorphism effects, red/blue gradients, health bar coloring, drag/drop feedback
• web/script.js - Message handling, drag/drop, tooltips, context menus, health display updates
• client/ox_nui_integration.lua - Client glue: intercepts inventory events, builds NUI payloads, registers KeyMappings for hotkeys 1-5, forwards callbacks to server
• server/README.update_item_meta.md - Documentation for required server events (moveItem, useHotkey, updateItemMeta)
• web/preview_inventory_red_blue_fixed.svg - UI mockup preview

fxmanifest.lua Changes

client_scripts {
    'init.lua',
    'client/ox_nui_integration.lua',  -- Added
}

files {
    -- ... existing files ...
    'web/ui.html',
    'web/style.css', 
    'web/script.js',
    'web/preview_inventory_red_blue_fixed.svg',
}

Enabling the Custom NUI

-- In client/ox_nui_integration.lua
local Config = {
    UseCustomNUI = true,  -- Enable custom UI
    SlotMappings = {
        weapon1 = 1,
        weapon2 = 2,
        hotkey3 = 3,
        hotkey4 = 4,
        hotkey5 = 5,
    },
}

TODO

• Server event implementations for ox_inventory:moveItem, ox_inventory:useHotkey, ox_inventory:updateItemMeta (documented in README)
• Backpack detection/storage integration
• Limb health system integration

Original prompt

Summary

Add a modern NUI (HTML/CSS/JS) inventory UI to the repository and minimal client integration glue so the resource can optionally use the new UI while keeping existing ox_inventory backend logic intact.

Design references (user-provided images):

• 
• 
• 

Goals / Acceptance criteria

• Add a new web/ UI (NUI) that implements the modern, semi-transparent red & blue themed inventory UI with:

  • A main pockets grid (8x3 default) for the main inventory
  • A separate backpack panel that appears when an equipped backpack provides extra slots
  • A center body silhouette with limb health bars (head/leftArm/rightArm/body/leftLeg/rightLeg) driven by incoming payload
  • Equipment slots (backpack, parachute, armor, weapon1, weapon2) and hotkey slots (3,4,5) with labels and visual state
  • Top-mode toggle Inventory/Utility, weight display, and Close button
  • Drag & drop support within the UI which posts a dragDrop payload to the client (client will forward to server)
  • Tooltips and item hover details
  • Hotkey bindings: 1 & 2 mapped to weapon slots, 3/4/5 to extra hotkeys (instant use). The client integration registers these key mappings.

• Add a client integration file (client/ox_nui_integration.lua) that:

  • Intercepts an inventory open event (example: 'ox_inventory:openInventory') and, when configured, builds a normalized payload and opens the new NUI (SendNUIMessage + SetNuiFocus)
  • Listens for NUI callbacks (nuiClose, dragDrop, useItem) and forwards actions to the server via existing or new server events (ox_inventory:moveItem, ox_inventory:updateItemMeta, ox_inventory:useHotkey). The server-side implementation should validate moves.
  • Registers KeyMappings for keys 1..5 to trigger hotkey events to the server (TriggerServerEvent('ox_inventory:useHotkey', slotName))
  • Exposes an event to update the NUI when inventory changes

• Update fxmanifest.lua file entries so the UI files are included and ui_page is set to web/ui.html. Do not remove existing fxmanifest content; append the web files and ui_page entries.

• Add a small server-side README (server/README.update_item_meta.md) that documents the expected server event ox_inventory:updateItemMeta and ox_inventory:moveItem for persisting backpack metadata and handling drag/drop moves.

Files to create

1. web/ui.html — the NUI HTML entrypoint (modern red & blue UI)
2. web/style.css — CSS implementing glassmorphism and red/blue accents
3. web/script.js — NUI logic: message receiver, render, drag/drop, tooltips, preview helper
4. client/ox_nui_integration.lua — client glue that integrates with ox_inventory and registers hotkeys
5. server/README.update_item_meta.md — instructions/example server event to store backpack meta
6. web/preview_inventory_red_blue_fixed.svg — preview image (fixed XML escaping) to show the mockup

Implementation details

• Add the files above with the contents provided in the conversation (HTML/CSS/JS/Lua/Markdown/SVG). Use the modern NUI prototype code and the client integration code discussed in chat.
• Modify fxmanifest.lua in the repo root to ensure the files are listed in the files block and ui_page 'web/ui.html' is set. If there is already a files list and ui_page present, append missing file names and ensure duplicates are avoided.
• Do not modify existing server.lua/client.lua logic; append the new client file to client_scripts in fxmanifest.lua but do not rewrite existing client.lua.
• Leave TODO placeholders in code where exact server event names may need swapping; document them in the PR description.

Testing guidance (for the PR description)

• After merging, the developer should:
  1. Ensure fxmanifest.lua includes ui_page 'web/ui.html' and the files list contains the web files.
  2. Place client/ox_nui_integration.lua in the resource and ensure it's included in the fxmanifest client_scripts.
  3. Configure Config.UseCustomNUI = true to enable the new UI (example) and ensure the existing ox_inventory open event is intercepted.
  4. Implement the server events documented in server/README.update_item_meta.md to persist backpack metadata and validate drag/drop moves, or adapt to existing server exports.
  5. Start the server and open the NUI (either via the in-NUI preview helper or by triggering the same open event used by the resource). Verify drag/drop emits move requests and hotkeys trigger the server useHotkey event.

Notes

• Do not include DB logic in this PR; only add documentation and client-side glue. Server-side validation and DB updates must be implemented server-side by the developer.
• The PR will create a new branch named 'feature/ui-redblue-nui' and open a pull request against the default branch.

References

• Use the UI code and client glue previously provided in the chat message as the file contents for the new files.

This pull request was created as a result of the following prompt from Copilot chat.

Summary

Add a modern NUI (HTML/CSS/JS) inventory UI to the repository and minimal client integration glue so the resource can optionally use the new UI while keeping existing ox_inventory backend logic intact.

Design references (user-provided images):

• 
• 
• 

Goals / Acceptance criteria

• Add a new web/ UI (NUI) that implements the modern, semi-transparent red & blue themed inventory UI with:

  • A main pockets grid (8x3 default) for the main inventory
  • A separate backpack panel that appears when an equipped backpack provides extra slots
  • A center body silhouette with limb health bars (head/leftArm/rightArm/body/leftLeg/rightLeg) driven by incoming payload
  • Equipment slots (backpack, parachute, armor, weapon1, weapon2) and hotkey slots (3,4,5) with labels and visual state
  • Top-mode toggle Inventory/Utility, weight display, and Close button
  • Drag & drop support within the UI which posts a dragDrop payload to the client (client will forward to server)
  • Tooltips and item hover details
  • Hotkey bindings: 1 & 2 mapped to weapon slots, 3/4/5 to extra hotkeys (instant use). The client integration registers these key mappings.

• Add a client integration file (client/ox_nui_integration.lua) that:

  • Intercepts an inventory open event (example: 'ox_inventory:openInventory') and, when configured, builds a normalized payload and opens the new NUI (SendNUIMessage + SetNuiFocus)
  • Listens for NUI callbacks (nuiClose, dragDrop, useItem) and forwards actions to the server via existing or new server events (ox_inventory:moveItem, ox_inventory:updateItemMeta, ox_inventory:useHotkey). The server-side implementation should validate moves.
  • Registers KeyMappings for keys 1..5 to trigger hotkey events to the server (TriggerServerEvent('ox_inventory:useHotkey', slotName))
  • Exposes an event to update the NUI when inventory changes

• Update fxmanifest.lua file entries so the UI files are included and ui_page is set to web/ui.html. Do not remove existing fxmanifest content; append the web files and ui_page entries.

• Add a small server-side README (server/README.update_item_meta.md) that documents the expected server event ox_inventory:updateItemMeta and ox_inventory:moveItem for persisting backpack metadata and handling drag/drop moves.

Files to create

1. web/ui.html — the NUI HTML entrypoint (modern red & blue UI)
2. web/style.css — CSS implementing glassmorphism and red/blue accents
3. web/script.js — NUI logic: message receiver, render, drag/drop, tooltips, preview helper
4. client/ox_nui_integration.lua — client glue that integrates with ox_inventory and registers hotkeys
5. server/README.update_item_meta.md — instructions/example server event to store backpack meta
6. web/preview_inventory_red_blue_fixed.svg — preview image (fixed XML escaping) to show the mockup

Implementation details

• Add the files above with the contents provided in the conversation (HTML/CSS/JS/Lua/Markdown/SVG). Use the modern NUI prototype code and the client integration code discussed in chat.
• Modify fxmanifest.lua in the repo root to ensure the files are listed in the files block and ui_page 'web/ui.html' is set. If there is already a files list and ui_page present, append missing file names and ensure duplicates are avoided.
• Do not modify existing server.lua/client.lua logic; append the new client file to client_scripts in fxmanifest.lua but do not rewrite existing client.lua.
• Leave TODO placeholders in code where exact server event names may need swapping; document them in the PR description.

Testing guidance (for the PR description)

• After merging, the developer should:
  1. Ensure fxmanifest.lua includes ui_page 'web/ui.html' and the files list contains the web files.
  2. Place client/ox_nui_integration.lua in the resource and ensure it's included in the fxmanifest client_scripts.
  3. Configure Config.UseCustomNUI = true to enable the new UI (example) and ensure the existing ox_inventory open event is intercepted.
  4. Implement the server events documented in server/README.update_item_meta.md to persist backpack metadata and validate drag/drop moves, or adapt to existing server exports.
  5. Start the server and open the NUI (either via the in-NUI preview helper or by triggering the same open event used by the resource). Verify drag/drop emits move requests and hotkeys trigger the server useHotkey event.

Notes

• Do not include DB logic in this PR; only add documentation and client-side glue. Server-side validation and DB updates must be implemented server-side by the developer.
• The PR will create a new branch named 'feature/ui-redblue-nui' and open a pull request against the default branch.

References

• Use the UI code and client glue previously provided in the chat message as the file contents for the new files.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.