> For the complete documentation index, see [llms.txt](https://zynoxdev.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zynoxdev.gitbook.io/docs/zynox-resources/zx_loading_screen/configuration.md).

# Configuration

Complete option-by-option guide for `html/config.js`

***

## 📑 Table of Contents

1. [Full Configuration File (`config.js`)](#1-full-configuration-file-configjs)
2. [Localization & Keybind Labels](#2-localization--keybind-labels)
3. [Seasonal Themes & Dynamic Calendar](#3-seasonal-themes--dynamic-calendar)
4. [Header HUD Widgets (Clock & Calendar)](#4-header-hud-widgets-clock--calendar)
5. [Server Identity & Branding](#5-server-identity--branding)
6. [Gameplay Tips Carousel](#6-gameplay-tips-carousel)
7. [Background Media Engine](#7-background-media-engine)
8. [Color Palette & Glow Accents](#8-color-palette--glow-accents)
9. [Audio Playlist Configuration](#9-audio-playlist-configuration)

***

## 1. Full Configuration File (`config.js`)

All customization for ZX Loading Screen happens inside `html/config.js`. No coding knowledge is required.

```javascript
const Config = {
    // Localization & Custom Text
    locale: {
        welcomePrefix: "WELCOME TO",
        loadingText: "LOADING SERVER. . .",
        loadingComplete: "LOADING COMPLETE. ENTERING SERVER . . .",
        liveTimeTag: "LIVE TIME",
        todayTag: "TODAY",
        tipTag: "TIP:",
        keybinds: {
            playPause: "[SPACE] PLAY / PAUSE",
            mute: "[M] MUTE",
            volume: "[↑ / ↓] VOLUME"
        }
    },

    // Seasonal Theme: "auto", "christmas", "halloween", "valentine", "summer", "newyear", "spring", "default"
    season: "auto",

    // Header Widgets (Round Clock Dial & Calendar)
    showDateTime: true,
    clockStyle: "dual_gauge", // "dual_gauge" or "minimal_digital"
    clock12Hour: true,
    showSeconds: true,
    timeZone: "auto",         // "auto" or IANA zone (e.g., "America/New_York", "Europe/London")

    // Server Branding
    serverNameFirst: "ZYNOX",
    serverNameSecond: "DEV",
    serverTagline: "THE ULTIMATE FIVE M ROLEPLAY EXPERIENCE.",
    serverLogo: "assets/images/logo.png",
    showLogo: true,

    // Rotating Gameplay Tips
    tipIntervalSeconds: 5,
    tips: [
        "Always value your character's life (NVL) when faced with weapons or danger.",
        "Press [K] while inside any vehicle to buckle your seatbelt and avoid crash injuries.",
        "Join our Discord community to participate in weekly events, updates, and giveaways."
    ],

    // 3-in-1 Background Engine
    background: {
        type: "video", // Options: "images" | "video" | "youtube"
        slideIntervalSeconds: 7,
        videoFile: "assets/video/vidoe1.mp4",
        videoMuted: true,
        youtubeId: "https://youtu.be/VLkOQJoeGPE"
    },

    // Dynamic Theme Color Palette
    colors: {
        primaryColor: "#00a2ff", // Main glowing accent
        accentColor: "#00d2ff",  // Electric cyan highlight
        textWhite: "#ffffff"
    },

    // Background Audio Playlist
    music: {
        autoPlay: true,
        defaultVolume: 40,
        playlist: [
            {
                name: "Cipher - Neon Electronic (Synthwave Mix)",
                artist: "Zynox Dev Audio",
                file: "assets/music/cipher.mp3"
            }
        ]
    }
};
```

***

## 2. Localization & Keybind Labels

The `locale` object allows full multi-language translation of all on-screen strings:

| Field             | Type     | Description                                             |
| ----------------- | -------- | ------------------------------------------------------- |
| `welcomePrefix`   | `string` | Top welcome header text before server name              |
| `loadingText`     | `string` | Text displayed above the progress bar while assets load |
| `loadingComplete` | `string` | Message shown when loading reaches 100%                 |
| `liveTimeTag`     | `string` | Small tag label above analog clock widget               |
| `todayTag`        | `string` | Small tag label above calendar date widget              |
| `tipTag`          | `string` | Badge tag prepended to rotating tips                    |
| `keybinds`        | `object` | Bottom-left shortcut helper labels                      |

***

## 3. Seasonal Themes & Dynamic Calendar

Set `season` to either `"auto"` or force a specific aesthetic:

```javascript
season: "auto",
```

* `"auto"`: Evaluates player's local month and applies relevant particles, lighting, and badge.
* `"default"`: Classic Cyberpunk Electric Cyan particle field.
* `"christmas"`: Floating crystalline snow & winter frost.
* `"halloween"`: Spooky orange atmospheric embers.
* `"valentine"`: Floating glowing hearts & romantic ruby glow.
* `"summer"`: Golden fireflies & warm bokeh particles.
* `"newyear"`: Celebration confetti & glitter sparkles.
* `"spring"`: Drifting cherry blossom petals.

***

## 4. Header HUD Widgets (Clock & Calendar)

Customize or toggle the round ticking analog clock and calendar widget:

```javascript
showDateTime: true,
clockStyle: "dual_gauge", // "dual_gauge" | "minimal_digital"
clock12Hour: true,        // 12-hour format with AM/PM (set false for 24-hour military time)
showSeconds: true,        // Show ticking second hand and digital seconds
timeZone: "auto",         // Use client time or set specific timezone (e.g. "America/New_York")
```

***

## 5. Server Identity & Branding

```javascript
serverNameFirst: "ZYNOX",
serverNameSecond: "DEV",
serverTagline: "THE ULTIMATE FIVE M ROLEPLAY EXPERIENCE.",
serverLogo: "assets/images/logo.png",
showLogo: true,
```

* `serverNameFirst`: The primary colored portion of your title.
* `serverNameSecond`: The accent highlighted second half of your title.
* `serverTagline`: Slogan displayed under the server title.
* `serverLogo`: Path to your server's transparent `.png` logo.

***

## 6. Gameplay Tips Carousel

```javascript
tipIntervalSeconds: 5,
tips: [
    "Always value your character's life (NVL) when faced with weapons or danger.",
    "Press [K] while inside any vehicle to buckle your seatbelt and avoid crash injuries.",
    "Join our Discord community to participate in weekly events, updates, and giveaways."
]
```

Add as many tips as you like inside the `tips` array. The HUD will crossfade smoothly between them at the specified `tipIntervalSeconds` interval.

***

## 7. Background Media Engine

```javascript
background: {
    type: "video", // "images" | "video" | "youtube"
    slideIntervalSeconds: 7,
    videoFile: "assets/video/vidoe1.mp4",
    videoMuted: true,
    youtubeId: "https://youtu.be/VLkOQJoeGPE"
}
```

* **`type: "images"`**: Rotates through pictures in `html/assets/images/` with cinematic Ken Burns animation.
* **`type: "video"`**: Looping local `.mp4` file placed inside `html/assets/video/`.
* **`type: "youtube"`**: Embeds fullscreen YouTube video playback.

***

## 8. Color Palette & Glow Accents

```javascript
colors: {
    primaryColor: "#00a2ff", // Main glowing accent
    accentColor: "#00d2ff",  // Electric cyan highlight
    textWhite: "#ffffff"
}
```

All UI elements (progress bar, VU visualizer, clock border dial, key badges) dynamically recolor based on these hex codes.

***

## 9. Audio Playlist Configuration

```javascript
music: {
    autoPlay: true,
    defaultVolume: 40, // Range 0 to 100
    playlist: [
        {
            name: "Cipher - Neon Electronic",
            artist: "Zynox Dev Audio",
            file: "assets/music/cipher.mp3"
        }
    ]
}
```

Support for multiple songs. Players can skip tracks using the on-screen buttons or arrow keys `[← / →]`.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://zynoxdev.gitbook.io/docs/zynox-resources/zx_loading_screen/configuration.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.