version 2 updates

Author: munafio

.github/assets/banner.png

@@ -2,25 +2,32 @@
 
 <img src="./.github/assets/banner.png" alt="bln notify script - redm" width="100%" />
 <div style="display: flex; justify-content: space-between;">
-    <img src="./.github/assets/demo1.gif" alt="Image 1" width="45%" />
-    <img src="./.github/assets/demo2.gif" alt="Image 2" width="45%" />
+    <img src="./.github/assets/demo/status.gif" alt="Image 1" width="33%" />
+    <img src="./.github/assets/demo/keybind.gif" alt="Image 2" width="33%" />
+    <img src="./.github/assets/demo/progress.gif" alt="Image 3" width="33%" />
+</div>
+<div style="display: flex; justify-content: space-between;">
+    <img src="./.github/assets/demo/tip.gif" alt="Image 1" width="45%" />
+    <img src="./.github/assets/demo/rtl.gif" alt="Image 2" width="45%" />
 </div>
 
 A standalone, flexible, and customizable notification system for RedM servers.
 
-[Video Preview](https://youtu.be/zwK8LLuFDVE)
+[Video Preview](https://youtu.be/qHOM49tz3QE)
 
 ## ✨ Features
 
 - 🌐 RTL (Right-to-Left) support for multilingual notifications
 - 📚 Predefined templates for easily reusable notifications
 - 🧭 Support for all directions (9 placement options)
 - 📱 Responsive design for various screen sizes
-- 🎵 Customizable notification sounds.
+- 🎵 Customizable notification sounds
 - 🎛️ Support for both advanced and simple notifications
-- 🌈 Customizable colors for title and description
-- 🖼️ Option to use background or transparent notifications
-- 🎭 Flexible icon support (URL or game texture hashnames)
+- 🌈 Dynamic text coloring with inline color codes
+- 🖼️ Inline images in text using `~img:name~` syntax
+- ⌨️ Interactive key bindings with visual indicators
+- 📊 Progress indicators (bar and circle types)
+- 🎭 Flexible icon support (URL or local img name)
 - ⏱️ Customizable duration for each notification
 - 🔀 Adjustable content alignment (start, center, end)
 - 🎬 Animated entrance and exit effects
@@ -36,156 +43,143 @@ To send a notification from the client-side:
 
 ```lua
 TriggerEvent("bln_notify:send", options)
-
-OR
-
+-- OR
 TriggerEvent("bln_notify:send", options, template)
 ```
 
-#### Example
+#### Basic Example
 ```lua
 TriggerEvent("bln_notify:send", {
-    title = "Hello!",
-    description = "This is a basic notification.",
+    title = "~#ffcc00~Hello!~e~",
+    description = "This is a ~red~basic~e~ notification with ~img:info~ icon.",
     icon = "generic_list",
     placement = "middle-right"
 })
 
-OR
-
 -- With Template
 TriggerEvent("bln_notify:send", {
     description = "This is a success template notification.",
     placement = "middle-right"
 }, "SUCCESS")
 ```
 
-### Server-Side Usage
-
-To send a notification from the server-side:
-
+#### Advanced Example with Progress and Key Actions
 ```lua
-TriggerEvent("bln_notify:send", source, options)
-
-OR
-
-TriggerEvent("bln_notify:send", source, options, template)
-```
-
-#### Example
-```lua
-TriggerEvent("bln_notify:send", source, {
-    title = "Hello!",
-    description = "This is a basic notification.",
-    icon = "generic_list",
-    placement = "middle-right"
+TriggerEvent("bln_notify:send", {
+    title = "~#ffcc00~Advanced Example~e~",
+    description = "Press ~key:E~ to accept or ~key:F6~ to decline",
+    icon = "warning",
+    placement = "middle-left",
+    duration = 10000,
+    progress = {
+        enabled = true,
+        type = 'circle', -- or 'bar'
+        color = '#ffcc00'
+    },
+    keyActions = {
+        ['E'] = "accept", -- action name used when listen
+        ['F6'] = "decline"
+    }
 })
-
-OR
-
--- With Template
-TriggerEvent("bln_notify:send", source, {
-    description = "This is a success template notification.",
-    placement = "middle-right"
-}, "SUCCESS")
 ```
 
 ### Notification Options
 
-The `options` table can include the following properties:
-
 | Option | Description | Default | Required/Optional |
 |--------|-------------|---------|-------------------|
 | placement | Position of the notification | "top-right" | Optional |
 | title | Title of the notification | "Notification" | Required |
 | description | Description text for the notification | null | Optional |
-| duration | Time in milliseconds before the notification is automatically removed | 5000 | Optional |
-| icon | Icon name (only icon name from `ui/imgs/icons/`) or full URL (external url or resource url) | null | Optional |
-| useBackground | Whether to use the background image | true | Optional |
-| contentAlignment | Alignment of the content | "start" | Optional |
+| duration | Time in milliseconds before auto-removal | 5000 | Optional |
+| icon | [Icon name]('./ui/assets/imgs/icons') or URL | null | Optional |
+| useBackground | Whether to use background image | true | Optional |
+| contentAlignment | Content alignment | "start" | Optional |
 | isRTL | Right-to-left text direction | false | Optional |
-| titleColor | Custom color for the title | undefined | Optional |
-| descriptionColor | Custom color for the description | undefined | Optional |
-| customSound | Custom notification sound, object takes two props `sound` and `soundSet` | sound=`INFO_HIDE`, soundSet=`Ledger_Sounds` | Optional |
-
-NOTE: a list of sounds can be found [here](https://github.com/femga/rdr3_discoveries/blob/master/audio/frontend_soundsets/frontend_soundsets.lua) 
-
-### Templates
+| progress | Progress indicator options | null | Optional |
+| keyActions | Key binding actions | null | Optional |
+| customSound | Custom notification sound | Default sounds | Optional |
 
-Predefined templates are available in the `Config.Templates` by default:
+### Key Actions & Event Handling
 
-- `INFO`
-- `SUCCESS`
-- `ERROR`
-- `REWARD_MONEY`
-- `TIP`
-- `TIP_XP`
-- `TIP_GOLD`
-- `TIP_CASH`
+Key actions allow you to add interactive key bindings to your notifications. When a specified key is pressed, it triggers an event that you can listen to in your scripts.
 
-You can use these templates by passing the template name as the second argument in the TriggerEvent call. You can create as many templates as you want in `config.lua` to easily reuse them later.
-
-### Placement Options
-
-Available placement options are:
+#### Basic Usage Example
+```lua
+-- Send notification with key actions
+TriggerEvent("bln_notify:send", {
+    title = "Interaction Available",
+    description = "Press ~key:E~ to interact or ~key:F6~ to cancel",
+    duration = 10000,
+    keyActions = {
+     -- ['key_name'] = 'action_name'
+        ['E'] = "accept",      -- 'accept' is the action name that will be triggered
+        ['F6'] = "decline"      -- 'decline' is the action name
+    }
+})
 
-- "top-right"
-- "top-center"
-- "top-left"
-- "middle-right"
-- "middle-center"
-- "middle-left"
-- "bottom-right"
-- "bottom-center"
-- "bottom-left"
+-- Listen for key press events in your script
+RegisterNetEvent("bln_notify:keyPressed")
+AddEventHandler("bln_notify:keyPressed", function(action)
+    if action == "accept" then
+        print("accept key was pressed!")
+        -- Do your accept logic here
+    elseif action == "decline" then
+        print("decline key was pressed!")
+        -- Do your decline logic here
+    end
+end)
+```
+- `key_name`: The key names are specific to RedM's key mapping system. Make sure to use the correct key names in your `keyActions` configuration, list of allowed keys can be found at `client/keys.lua`.
+- `action_name`
+- Key icons: to show key icon in a notification description, use as `~key:name~`. The `name` can be anything like `E`, `ENTER`, `<-` ..etc. Its only a text in view, so it does not affect the key actions above if we put anything.
 
-### Content Alignment Options
 
-Available content alignment options are:
+### Progress Options
+```lua
+progress = {
+    enabled = true, -- Enable/disable progress indicator
+    type = 'bar', -- 'bar' or 'circle with countdown'
+    color = '#ffcc00' -- Custom color for progress
+}
+```
 
-- "start"
-- "center"
-- "end"
+### Text Formatting
+Can add color anywhere in your text (title or description).
+#### Color Formatting
+- Named colors: `~red~colored text~e~`
+- Hex colors: `~#ffcc00~colored text~e~`
 
-### Advanced Example
+#### Image Formatting
+You can add inline images/icons to notification's description as follows:
+- [Icon name]('./ui/assets/imgs/icons') or URL, e.g. `~img:icon_name~` or `~img:full_url~`,
 
-```lua
--- Advanced Customizations
-TriggerEvent("bln_notify:send", {
-    title = "Custom Notification",
-    description = "This notification has custom styling.",
-    icon = "generic_bundle_crafting",
-    placement = "middle-center",
-    duration = 10000,
-    useBackground = false,
-    contentAlignment = "center",
-    isRTL = true,
-    titleColor = "#FF5733",
-    descriptionColor = "rgba(255, 255, 255, 0.8)"
-})
-```
-These examples demonstrate different ways to use the BLN Notify system, including various placement options, custom colors, different icon specifications, and other available options.
 
-### Demo Commands (examples)
+### Templates
 
-The following commands are available for testing the notification system:
+Predefined templates available in `Config.Templates`:
+- `INFO`: Information notifications with blue styling
+- `SUCCESS`: Success messages with green styling
+- `ERROR`: Error messages with red styling
+- `REWARD_MONEY`: Reward notifications with gold styling
+- `TIP`: Simple tip notifications
+- `TIP_XP`, `TIP_GOLD`, `TIP_CASH`: Specialized tip notifications
 
-- `/bln_notify_allAdvanced [RTL]`: Show notifications in all placements
-- `/bln_notify_allTips [RTL] [icon]`: Show tip notifications in all placements
-- `/bln_notify_info [placement]`: Show an INFO notification
-- `/bln_notify_success [placement]`: Show a SUCCESS notification
-- `/bln_notify_error [placement]`: Show an ERROR notification
-- `/bln_notify [placement]`: Show a custom notification
-- `/bln_notify_tip [placement] [icon]`: Show a TIP notification
-- `/bln_notify_template [templateName] [title] [description]`: Show notification from template.
+### Demo Commands
 
-These commands are defined in the `client/_Examples.lua` file and include chat suggestions for ease of use.
+Test commands available in game:
+- `/bln_notify_allAdvanced [RTL]`: Show all placement demos
+- `/bln_notify_allTips [RTL] [icon]`: Show all tip types
+- `/bln_notify_progress [type]`: Show progress notification
+- `/bln_notify_key`: Show key binding notification
+- `/bln_notify_template [template] [title] [desc]`: Test templates
+- `/bln_notify [RTL] [title] [desc] [icon] [placement]`: Custom notification
 
+[Previous sections about placement options, content alignment, etc. remain the same...]
 
 ## Support
 
-If you encounter any issues or have questions, go to [Discord for help](discord.com/invite/MEZRYQVpnt) or open an issue on the GitHub repository.
+For help and support, join our [Discord](discord.com/invite/MEZRYQVpnt) or create an issue on GitHub.
 
 ## Contributing
 
-Contributions to improve the resource are welcome. Please feel free to submit pull requests or create issues for bugs and feature requests.
+Contributions are welcome! Feel free to submit pull requests or create issues for bugs and features.