# C Loadingscreen

⚙️ C LoadingScreen Configuration Overview

C LoadingScreen by C Service is a modular, professional, and fully configurable loading screen system for FiveM servers. This documentation provides a quick overview of all available configuration options and their purpose.

***

### 🧩 General Settings

#### `Config.Debug`

Enables debug mode (prints debug info in F8 console).

```lua
Config.Debug = false
```

#### `Config.ServerInfo`

Defines the main welcome text and server name displayed in the center.

```lua
Config.ServerInfo = {
    WelcomeText = "WELCOME TO",
    ServerName = "YOUR SERVER"
}
```

***

### 🎨 Styling Configuration

#### `Config.MainColor`

Main accent color for the entire loading screen (HEX format).

```lua
Config.MainColor = "#0000ff"
```

#### `DiscordConfig.DiscordColor`

Separate color for the Discord section (HEX format).

```lua
DiscordConfig.DiscordColor = "#0400dd"
```

💡 **Tip:** You can use the same color for both or differentiate sections with unique colors for better visual separation.

***

### 🖱️ Custom Cursor System

#### `Config.CustomCursor.Enabled`

Enables or disables the custom cursor.

* `true` = Uses your custom cursor image
* `false` = Uses standard system cursor

#### `Config.CustomCursor.Image`

File name of the custom cursor image (stored in `html/images/`).

```lua
Config.CustomCursor = {
    Enabled = false,
    Image = "cursor.png"
}
```

📏 **Recommended cursor size:** 32 x 32 px (transparent PNG)

***

### 🖼️ Background Configuration

#### Video Background

```lua
Config.Background.Video = {
    Enabled = true,
    File = "background.mp4",
    Volume = 0.3,
    Brightness = 0.6,
    SoundTitle = "YOUR SONG"
}
```

* **`Enabled`**: Activates video background
* **`File`**: Video file name (stored in `html/media/`)
* **`Volume`**: Video audio volume (0.0 - 1.0) — automatically muted if music is enabled
* **`Brightness`**: Brightness filter (0.0 - 1.0, where 1.0 is full brightness)
* **`SoundTitle`**: Title displayed in music player when video audio plays

⚠️ **Important:** Keep video files under 20-30 MB and use H.264 codec for best compatibility.

#### Image Background (Slideshow)

```lua
Config.Background.Images = {
    Enabled = false,
    Files = {
        "background1.png",
        "background2.png",
        "background3.png",
        "background4.jpg",
        "background5.jpg"
    },
    Duration = 5000,
    Brightness = 0.6,
    Transition = "fade"
}
```

* **`Enabled`**: Activates image slideshow background
* **`Files`**: Array of image file names (stored in `html/images/`)
* **`Duration`**: Time per image in milliseconds
* **`Brightness`**: Brightness filter (0.0 - 1.0)
* **`Transition`**: Available transitions: `"fade"`, `"slide"`, `"zoom"`, `"blur"`, `"rotate"`

💡 **Tip:** Only one background type (Video OR Images) can be active at a time.

***

### 🎵 Music System

```lua
Config.Music = {
    Enabled = false,
    Volume = 0.3,
    Playlist = {
        {
            Title = "Bad Beat - Dyalla",
            File = "track1.mp3"
        },
        {
            Title = "Broken Glass - Dyalla",
            File = "track2.mp3"
        },
        {
            Title = "Not My First Rodeo - Dyalla",
            File = "track3.mp3"
        }
    }
}
```

* **`Enabled`**: Activates music player
* **`Volume`**: Music volume (0.0 - 1.0)
* **`Playlist`**: Array of tracks with title and file name

⚠️ **Note:** When Music is enabled, video/background audio is automatically muted to prevent audio conflicts.

**Music files location:** `html/media/`

***

### 📦 Social Boxes

Configure up to 3 social media/community boxes in the center.

```lua
Config.SocialBoxes = {
    Discord = {
        Enabled = true,
        Icon = "discord.png",
        Title = "DISCORD",
        Subtitle = "discord.gg/c-service",
        Link = "https://discord.gg/PsdYRxdK"
    },
    Website = {
        Enabled = true,
        Icon = "website.png",
        Title = "WEBSITE",
        Subtitle = "c-service.xyz",
        Link = "https://c-service.tebex.io"
    },
    Donate = {
        Enabled = true,
        Icon = "donate.png",
        Title = "TEAMSPEAK",
        Subtitle = "yourserver",
        Link = "https://www.teamspeak.com/en/downloads"
    }
}
```

* **`Enabled`**: Show/hide this box
* **`Icon`**: Icon file name (stored in `html/images/`)
* **`Title`**: Main title (large text)
* **`Subtitle`**: Subtitle (small text below title)
* **`Link`**: URL that opens when clicked

📏 **Recommended icon size:** 128 x 128 px (transparent PNG)

***

### 💡 Tips System (Left Sidebar)

```lua
Config.Tips = {
    Enabled = true,
    Header = "DID YOU KNOW?",
    HeaderIcon = "leftinfo.png",
    Duration = 10000,
    List = {
        {
            Title = "text 1",
            Description = "YOUR TIP",
            Image = "tip1.png"
        },
        {
            Title = "text 2",
            Description = "YOUR TIP",
            Image = "tip2.png"
        }
    }
}
```

* **`Enabled`**: Activates tips rotation
* **`Header`**: Header text above tips
* **`HeaderIcon`**: Small icon next to header (stored in `html/images/`)
* **`Duration`**: Time per tip in milliseconds
* **`List`**: Array of tip objects with title, description, and optional image

💡 **Tip:** Images are optional. Leave `Image` field empty or remove it to show text-only tips.

📏 **Recommended tip image size:** 400 x 250 px

***

### 📋 Rules System (Left Sidebar)

```lua
Config.Rules = {
    Enabled = true,
    Header = "📋 RULES",
    List = {
        "BE NICE !!",
        "No RDM/VDM",
        "Respect everyone",
        "Follow RP rules"
    }
}
```

* **`Enabled`**: Show/hide rules box
* **`Header`**: Header text for rules section
* **`List`**: Array of rule strings (automatically prefixed with `→` arrow)

💡 **Tip:** Keep rules short and concise for better readability.

***

### 👥 Team System (Right Sidebar)

```lua
Config.Team = {
    Enabled = true,
    Header = "TEAM MEMBER",
    HeaderIcon = "discordright.png",
    Members = {
        {
            DiscordId = "MEMBER_ID",
            Role = "👑 PROJECT"
        },
        {
            DiscordId = "MEMBER_ID",
            Role = "🛡️ MOD"
        }
    }
}
```

* **`Enabled`**: Show/hide team section
* **`Header`**: Header text for team section
* **`HeaderIcon`**: Small icon next to header
* **`Members`**: Array of team member objects

#### Team Member Configuration:

* **`DiscordId`**: Discord User ID (Bot automatically loads name + avatar)
* **`Role`**: Custom role text (supports emojis)

💡 **How to get Discord User ID:**

1. Enable Developer Mode in Discord (Settings → Advanced)
2. Right-click user → Copy User ID

***

### 📢 Discord Feed / Changelog (Right Sidebar)

#### Main Configuration (`config.lua`)

```lua
Config.DiscordFeed = {
    Enabled = true,
    Header = "DISCORD CHANGELOG",
    HeaderIcon = "changelog.png",
    Messages = {}
}
```

* **`Enabled`**: Show/hide Discord feed
* **`Header`**: Header text for Discord section
* **`HeaderIcon`**: Small icon next to header
* **`Messages`**: Leave empty — automatically filled by bot

#### Discord Bot Configuration (`discord_config.lua`)

```lua
DiscordConfig = {}

DiscordConfig.Debug = false
DiscordConfig.DiscordColor = "#0400dd"
DiscordConfig.BotToken = "DISCORD_BOT_TOKEN"
DiscordConfig.ChannelId = "DISCORD_CHANNEL_ID"
DiscordConfig.MaxMessages = 5
DiscordConfig.CacheTime = 60
```

* **`Debug`**: Enable Discord bot debug logs
* **`DiscordColor`**: Separate color for Discord section
* **`BotToken`**: Your Discord Bot Token
* **`ChannelId`**: Discord Channel ID to fetch messages from
* **`MaxMessages`**: Maximum number of messages to display (1-10)
* **`CacheTime`**: Cache duration in seconds before refetching (default: 60)

💡 **How to create a Discord Bot:**

1. Go to [Discord Developer Portal](https://discord.com/developers/applications)
2. Create New Application
3. Go to Bot → Reset Token → Copy Token
4. Enable "Message Content Intent"
5. Invite bot to your server with "Read Messages" permission
6. Copy Channel ID (Right-click channel → Copy Channel ID)

#### Changelog Formatting

```lua
DiscordConfig.Changelog = {
    Enabled = true,
    NewestFirst = true,
    UseColors = false,
    
    FontSizes = {
        Category = 1.1,
        Item = 0.9,
        Text = 0.9
    },
    
    Categories = {
        {
            Name = "Hinzugefügt",
            Symbols = {"[+]", "+", "✅"},
            Color = "#00ff00"
        },
        {
            Name = "Geändert",
            Symbols = {"[~]", "~", "🔧"},
            Color = "#ffa500"
        },
        {
            Name = "Entfernt",
            Symbols = {"[-]", "-", "❌"},
            Color = "#ff0000"
        },
        {
            Name = "Behoben",
            Symbols = {"[!]", "!", "🐛"},
            Color = "#00bfff"
        }
    }
}
```

* **`Enabled`**: Activates changelog parsing
* **`NewestFirst`**: Shows newest messages at the top
* **`UseColors`**: Applies category colors (true/false)
* **`FontSizes`**: Adjust font sizes for categories, items, and text
* **`Categories`**: Define categories with symbols and colors

**Example Discord Message:**

```
**UPDATE v1.2.0**

Hinzugefügt:
+ Neue Waffen hinzugefügt
+ Map-Erweiterung

Geändert:
~ Spawn-Punkte angepasst

Behoben:
! Bug im Fahrzeug-Shop behoben
```

💡 **Tip:** Use `**TEXT**` in Discord for bold, uppercase text highlighting.

***

### 🎛️ Toggle Menu

```lua
Config.ToggleMenu = {
    Enabled = true
}

Config.Sidebars = {
    Left = true,
    Right = true
}
```

* **`ToggleMenu.Enabled`**: Show/hide toggle menu at top of screen
* **`Sidebars.Left`**: Show left sidebar by default
* **`Sidebars.Right`**: Show right sidebar by default

The toggle menu allows players to hide/show:

* Left sidebar (tips & rules)
* Right sidebar (team & discord)
* All content (cinematic mode)

***

### 🖼️ Changing Images & Media

#### Image Files Location

All images are stored in: `html/images/`

**Required Images:**

* Social Box Icons: `discord.png`, `website.png`, `donate.png`
* Header Icons: `leftinfo.png`, `discordright.png`, `changelog.png`
* Tip Images: `tip1.png`, `tip2.png`, etc.
* Custom Cursor: `cursor.png` (if enabled)

#### Media Files Location

All video/audio files are stored in: `html/media/`

**Supported Formats:**

* **Video:** `.mp4` (H.264 codec recommended)
* **Audio:** `.mp3`, `.ogg`, `.wav`
* **Images:** `.png`, `.jpg`, `.jpeg`

📏 **Recommended Sizes:**

* Background Video: 1920x1080 (under 20-30 MB)
* Background Images: 1920x1080
* Social Icons: 128x128 px
* Header Icons: 64x64 px
* Tip Images: 400x250 px
* Cursor: 32x32 px

💡 **Tip:** Use transparent PNG files for icons and cursor for best visual results.

***

### 🧠 Final Notes

✅ Fully customizable for every server type\
✅ Designed for professional appearance and optimized performance\
✅ All messages, colors, and features can be adjusted without code editing\
✅ Discord integration automatically syncs team members and changelogs\
✅ Modular design — enable only what you need


---

# 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://c-service.gitbook.io/c-service-docs/c-loadingscreen.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.