iNotify (iMessage Styled Notifications System)

Browns iNotify (iMessage/iPhone Styled Notifications)

Contact Info:

Personal Discord: bwobrown
Discord Server: Brown Development

Preview Video:
YouTube

Documentation:
Exports/Events - iNotify Documentation 

Key Features:

1. Realistic Looking iMessage Styled Notifications
2. The Ability to scroll Up/Down to view older notifications (This helps if you receive a notification, and it goes away before you get a chance to see it/fully read it so you can always see past notifications) 
3. Realistic iMessage Send/Receive Message Sound Effects when receiving notifications.
4. The Time that the notification was sent is included in each Notification.
5. Easy to implement into your frameworks default notifications (Setup Instructions Provided in "README.md" File.

How Does it work?:

This is an iMessage Styled Notification System so all of your Notifications will have a clean iPhone/iMessage look to it. All notifications will be in a list that you can scroll up/down to see previous notifications. This is very useful since in most if not all notification systems the functionality works where once you receive a notification and it goes away, if you didnt read it in time before it goes away then its too late however with this Notification system you can always scroll up or down by simply using your mouse wheel with no other actions to scroll through past notifications to finish reading them. 

The Functionality (When Receiving Notifications):

1. The Notification is placed in a scrollable list of notifications (lets call this "The Container")
2. The Container pops open on the right side of your screen containing all of your notifications whilst focusing on the latest notification you received and plays the iMessage send/receive message "swoop" sound effect.
3. the notification Container that contains the list of notifications will stay open for 15 Seconds before hiding out of the screen giving you enough time to read past or present notifications before it closes again, and it will only re-open if you receive another notification.

Developer Stuff </>:

Notes:

• In other Notifications Systems there is an option via export or event to add duration/time to each notification which defines how long it will show, however that has been disabled with this system, Why? because let's remember with this system one of the Key Features is to allow players to be able to scroll to see past notifications which makes this system unique and more convenient for those who may not be able to read as fast as others, meaning we can't base notification presence off of time so instead we add them to a List of all notifications so they are never gone giving you the ability to always scroll through them however that scroll time is limited to 15 seconds when the container closes but when the container opens again which will happen every time a notification is sent (unless its already open) players can scroll through all of their notifications again which are listed in the container!

• Notification types are not available in this system why? because if we want to base this off of looking like a iMessage Style then we have to keep in mind when you receive a iMessage in real life it doesnt tell you if the message is a 'error' or a 'success' its just a message. So to resemble that as much as possible and to keep the "uniqueness" of this system there are no notification types, However I did add time to each notification that shows the time it was received which does resemble real life iMessages as they do include the time that the message was sent. 

• To change the position of the Notifications you can change the styles.css code via editing the top and left values of panel (which controls the positioning of the entire notification UI) and the top and left values of helper (the UI message that says "use mouse to scroll." << this is serperate from the notifications UI) If you want me to change this for you please contact me via information in the README.md file. I might add a config options for this in the future but I know some servers have different UI Stuff on their screens (huds, etc.) that may cause the notification system to overlay something or be overlayed so I just decided to give let you guys change the position of the UI how you want based off of your server instead of it being dependent on a config option.

    Here is how the part of the styles.css Looks where you would go to change the positioning:

```

#panel {

    position: absolute;

    top: 45%; /*change top value here (this controls the vertical position of the notification UI)*/

    left: 94%; /*change left value here (this controls the horizontal position of the notification UI)*/

    transform: translate(-50%, -50%);

    width: 250px;

    height: 220px; 

    background-color: rgba(0, 0, 0, 0.288);

    border-radius: 25px;

    padding: 15px;

    text-align: left;

    overflow-y: scroll; 

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    flex-direction: column;

    gap: 10rem;

    animation: slide-out 0.35s forwards;

}

#helper {

    font-family: 'Poppins', sans-serif;

    text-align: center;

    font-size: large;

    position: absolute;

    top: 29%; /*change top value here (this controls the vertical position of the 'use mouse to scroll.' message UI)*/

    left: 89%; /*change left value here (this controls the horizontal position of the 'use mouse to scroll.' message UI)*/

    width: 200px;

    color: rgb(146, 146, 146);

    opacity: 100%;

    animation: fade-in 1s forwards;

    height: 30px;

    background-color: rgba(0, 0, 0, 0.575);

    border-radius: 15px; 

}

```

Screenshots:

config.lua screenshot:

Framework Compatibility:

qb-core

esx

Dependencies:

none