# NEON LOADING SCREEN

{% embed url="<https://youtu.be/CMJdfYitZHc?si=FDPcwiEZEXuXOf-v>" %}

**INSTALLATION GUIDE**

1. Download from [KEYMASTER ](https://keymaster.fivem.net/login?return_url=/asset-grants)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**

{% hint style="success" %}
**Here you can translate, change the links and even the colours.**
{% endhint %}

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

&#x20; <mark style="color:orange;background-color:orange;">**neon-loading/html/js/config.js**</mark> &#x20;

{% tabs %}
{% tab title="CONFIG" %}

```json
{

    "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"
        ]
    }

}
```

{% endtab %}
{% endtabs %}

**COMMON QUESTIONS**

<details>

<summary>How to change the images?</summary>

In the  <mark style="color:orange;background-color:orange;">**assets\images**</mark>  you can replace the images that appear.&#x20;

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.

</details>

<details>

<summary>How do I change the colours to symbols?</summary>

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  <mark style="color:orange;background-color:orange;">**neon-loading\html\assets\svgs\corner.svg**</mark>&#x20;
2. **Identify the Path Element**: Find the `<path>` element within the SVG file. It will look something like this:

{% code overflow="wrap" %}

```html
<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"/>
```

{% endcode %}

3. **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:

{% code overflow="wrap" %}

```html
<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"/>
```

{% endcode %}

4. **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:

{% code overflow="wrap" %}

```html
<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"/>
```

{% endcode %}

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

</details>

<details>

<summary>How do I change the song or video?</summary>

&#x20;<mark style="color:orange;background-color:orange;">neon-loading\html\assets</mark>&#x20;

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**.

</details>

{% hint style="danger" %} <mark style="color:red;">**Do not rename this script, this may cause it to fail when opening the interface.**</mark>&#x20;
{% endhint %}

{% hint style="success" %}
**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.
{% endhint %}


---

# 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://codeforge.gitbook.io/codeforge/neon-series/neon-loading-screen.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.