🩷NEON LOADING SCREEN

Here check the installation guide

INSTALLATION GUIDE

1. Download from KEYMASTER and Unzip the neon-loading.pack.zip and place this folder in your server's resource folder.

2. Add the resource to your server start config: ensure neon-loading, the name of the folder must not be changed or the resource will not function correctly. It must be started in the first positions

3. Delete or disable other Loading Screens you have, such as QB or ESX. Also, in some cases there may be another one in the [cfx] > [test] folder

4. Reboot the entire server with the forge script well ensured in your server.cfg.

CONFIG

Here you can translate, change the links and even the colours.

The configuration for this loading screen is not in a conventional location. It can be found at:

neon-loading/html/js/config.js

CONFIG

{

    "colors": {
        "1": "#ff0451",
        "2": "rgba(255, 4, 81, 0.39)",
        "3": "rgba(255, 4, 81, 0.17)",
        "4": "rgba(255, 4, 81, 0.51)",
        "5": "rgba(255, 4, 81, 0.6)",
        "6": "rgba(255, 4, 81, 0.66)",
        "7": "rgba(255, 4, 81, 0.65)",
        "8": "rgba(255, 4, 81, 0.67)",
        "9": "rgba(255, 4, 81, 0.5)",
        "10": "rgba(255, 4, 81, 0.4)"
    },

    "translation": {
        "servergallery": "Server <span>GALLERY</span>",
        "patchnotes": "Patch <span>NOTES</span>",
        "socialmedia": "Social<span>MEDIA</span>",
        "cityloading": "Please wait, the city is loading <span>.</span><span>.</span> <span>.</span>",
        "play": "Play",
        "pause": "Pause"
    },

    "logo": {
        "useimage": false,
        "imagelink": "./assets/images/logo.png",
        "text": "<strong> LOGO </strong><span> server </span>"
    },

    "socialmedia": {
        "youtube": "https://codeforge.tebex.io/",
        "discord": "https://codeforge.tebex.io/",
        "twitter": "https://codeforge.tebex.io/"
    },

    "patchnotes": [
        {
            "image": "./assets/svgs/speaker.svg",
            "title": "NEW EVENT: TOURNAMENT #1",
            "date": "DATE: 01.02.2024",
            "description": "Test message"
        },
        {
            "image": "./assets/svgs/speaker.svg",
            "title": "NEW EVENT: TOURNAMENT #2",
            "date": "DATE: 01.02.2024",
            "description": "Test message"
        }
    ],

    "imagegallery": [
        "./assets/images/grid/grid-1.png",
        "./assets/images/grid/grid-2.png",
        "./assets/images/grid/grid-3.png",
        "./assets/images/grid/grid-4.png"
    ],

    "importantkeys": [
        {
            "key": "esc",
            "text": "Close Everything"
        },
        {
            "key": "f1",
            "text": "Close Everything"
        },
        {
            "key": "f2",
            "text": "Close Everything"
        },
        {
            "key": "f3",
            "text": "Close Everything"
        }
    ],

    "background": {
        "usevideo": true,
        "videolink": "./assets/bgVideo.mp4",
        "imagelinks": [
            "./assets/images/bg/bg-1.png",
            "./assets/images/bg/bg-2.png",
            "./assets/images/bg/bg-3.png"
        ]
    }

}

COMMON QUESTIONS

How to change the images?

In the assets\images you can replace the images that appear.

Replace the image you want with another one, the name must always be the same. Make sure that the measurements are the same as well so that the design does not look different.

How do I change the colours to symbols?

To change the color of an SVG element, you can modify the fill and stroke attributes within the <path> tag. Here’s a step-by-step guide:

1. Locate the SVG File: Open your SVG file in a text editor. For example, the file corner.svg is located at neon-loading\html\assets\svgs\corner.svg

2. Identify the Path Element: Find the <path> element within the SVG file. It will look something like this:

<path d="M59.3 1H14.1C7.53121 1 4.24681 1 2.87753 2.09486C1.33914 3.32492 0.666263 5.34355 1.15893 7.25063C1.59745 8.94809 4.22497 10.9187 9.48 14.86L54.68 48.76C58.3818 51.5363 60.2327 52.9245 61.7719 52.9948C63.5054 53.074 65.156 52.2487 66.1327 50.8144C67 49.5408 67 47.2272 67 42.6V8.7C67 6.18235 67 4.92353 66.557 3.94243C66.056 2.83275 65.1672 1.94402 64.0576 1.44298C63.0765 1 61.8176 1 59.3 1Z" fill="#080808" stroke="#080808"/>

1. Change the Fill Color: Modify the fill attribute to the desired color. For example, to change the fill color to red, update the fill attribute:

<path d="M59.3 1H14.1C7.53121 1 4.24681 1 2.87753 2.09486C1.33914 3.32492 0.666263 5.34355 1.15893 7.25063C1.59745 8.94809 4.22497 10.9187 9.48 14.86L54.68 48.76C58.3818 51.5363 60.2327 52.9245 61.7719 52.9948C63.5054 53.074 65.156 52.2487 66.1327 50.8144C67 49.5408 67 47.2272 67 42.6V8.7C67 6.18235 67 4.92353 66.557 3.94243C66.056 2.83275 65.1672 1.94402 64.0576 1.44298C63.0765 1 61.8176 1 59.3 1Z" fill="#FF0000" stroke="#080808"/>

1. Change the Stroke Color: Similarly, modify the stroke attribute to the desired color. For example, to change the stroke color to blue, update the stroke attribute:

<path d="M59.3 1H14.1C7.53121 1 4.24681 1 2.87753 2.09486C1.33914 3.32492 0.666263 5.34355 1.15893 7.25063C1.59745 8.94809 4.22497 10.9187 9.48 14.86L54.68 48.76C58.3818 51.5363 60.2327 52.9245 61.7719 52.9948C63.5054 53.074 65.156 52.2487 66.1327 50.8144C67 49.5408 67 47.2272 67 42.6V8.7C67 6.18235 67 4.92353 66.557 3.94243C66.056 2.92353 66.557 3.94243C66.056 2.83275 65.1672 1.94402 64.0576 1.44298C63.0765 1 61.8176 1 59.3 1Z" fill="#FF0000" stroke="#0000FF"/>

1. Save the File: After making the changes, save the SVG file.

How do I change the song or video?

neon-loading\html\assets

Go to the location and replace the files bgVideo.mp4 or music.mp3 with the one you want, remembering that the name must be the same.

Do not rename this script, this may cause it to fail when opening the interface.

If you want to edit the aesthetics or design. You have the HTML open so you can modify the style and everything as you want.

The script is RESPONSIVE for all resolutions as well.