Configuration

Configuration

The loading screen is fully customizable through the config.json file located in the resource's main directory. Below is a detailed explanation of all configuration options.

config.json

General Settings

"general": {
  "serverName": "Your Server Name",
  "serverTitle": "YOUR-SERVER",
  "serverSubtitle": "ROLEPLAY",
  "serverDescription": "Experience a unique roleplay adventure in our meticulously crafted city. Join our community and become part of a living, breathing world with endless possibilities.",
  "welcomeTitle": "WELCOME TO",
  "joinText": "JOINING SERVER",
  "maxPlayers": 128,
  "serverLogo": "assets/images/logo.png",
  "brandingSection": {
    "title": "YOUR-SERVER",
    "subtitle": "Premium RP Experience"
  }
}

Option	Description
serverName	The name displayed in the browser tab
serverTitle	Main title displayed on the welcome screen
serverSubtitle	Subtitle displayed below the main title
serverDescription	Short description of your server
welcomeTitle	Text displayed above the server title
joinText	Text in the joining notification box
maxPlayers	Maximum number of players on your server
serverLogo	Path to your server logo image
brandingSection	Configure the branding in the top-left corner

Appearance Settings

"appearance": {
  "background": {
    "backgroundType": "videoOnly",
    "videoSource": "assets/video/background.webm",
    "imageSource": "assets/images/background.jpg"
  }
}

Option	Description
backgroundType	Choose between: videoOnly, imageOnly, imageAndVideo (togglable), or blank
videoSource	Path to the background video file
imageSource	Path to the background image file

Features Settings

The features section allows you to enable/disable and customize various componen

"features": {
  "mainPage": {
    "enabled": true,
    "featureBoxes": [
      {
        "title": "CUSTOM ECONOMY",
        "description": "Our server features a balanced and realistic economy with unique jobs and business opportunities.",
        "icon": "check",
        "highlight": true
      },
      {
        "title": "ACTIVE COMMUNITY",
        "description": "Join our growing community of friendly players and helpful staff members.",
        "icon": "users",
        "highlight": false
      }
    ]
  }
}

Option	Description
enabled	Enable/disable the main page
featureBoxes	Array of feature highlights to display
title	Feature box title
description	Feature description text
icon	Icon to display (check or users)
highlight	Whether to highlight this box with special styling

Team Section

"teamSection": {
  "enabled": true,
  "sectionTitle": "OUR TEAM",
  "sectionSubtitle": "Meet the people behind our server",
  "teamMembers": [
    {
      "name": "Username",
      "role": "Owner & Developer",
      "description": "Founded the server in 2022 and handles all technical aspects of development.",
      "avatar": "assets/images/team/user1.jpg"
    }
  ]
}

Option	Description
enabled	Enable/disable the team section
sectionTitle	Title for the team section
sectionSubtitle	Subtitle for the team section
teamMembers	Array of team members to display
name	Team member's name
role	Team member's role/position
description	Short bio for the team member
avatar	Path to team member's profile image

Gallery Section

"gallerySection": {
  "enabled": true,
  "sectionTitle": "Server Gallery",
  "sectionSubtitle": "Preview our beautiful world",
  "autoSlide": true,
  "autoSlideInterval": 5000,
  "images": [
    {
      "url": "assets/images/gallery/image1.jpg",
      "thumbnail": "assets/images/gallery/thumb1.jpg",
      "title": "Downtown at Night"
    }
  ]
}

Option	Description
enabled	Enable/disable the gallery section
sectionTitle	Title for the gallery section
sectionSubtitle	Subtitle for the gallery section
autoSlide	Whether to automatically cycle through images
autoSlideInterval	Time in milliseconds between slides
images	Array of images to display
url	Path to full-size image
thumbnail	Path to thumbnail image (optional, will use url if not provided)
title	Caption for the image

Keyboard Section

"keyboardSection": {
  "enabled": true,
  "sectionTitle": "Keyboard Controls",
  "sectionSubtitle": "Learn the essential controls for our server",
  "highlightedKeys": {
    "f1": "Toggle player HUD",
    "e": "Interact with objects and NPCs",
    "i": "Open inventory",
    "m": "Open map",
    "l": "Lock/unlock vehicle",
    "space": "Jump / Skip dialog"
  }
}

Option	Description
enabled	Enable/disable the keyboard section
sectionTitle	Title for the keyboard section
sectionSubtitle	Subtitle for the keyboard section
highlightedKeys	Object mapping key names to their descriptions

Snake Game

"snakeGame": {
  "enabled": true,
  "sectionTitle": "Snake Game",
  "sectionSubtitle": "Play while you wait!",
  "gridSize": 20,
  "speed": 150,
  "snakeColor": "#e60000",
  "foodColor": "#ff7b00"
}

Option	Description
enabled	Enable/disable the snake game
sectionTitle	Title for the game section
sectionSubtitle	Subtitle for the game section
gridSize	Size of the game grid (20x20 default)
speed	Game speed (lower = faster)
snakeColor	Color of the snake head
foodColor	Color of the food items

Social Media Integration

"socialMedia": {
  "enabled": true,
  "links": [
    {
      "platform": "discord",
      "url": "https://discord.gg/yourserver"
    },
    {
      "platform": "website",
      "url": "https://yourserver.com"
    }
  ]
}

Option	Description
enabled	Enable/disable social media buttons
links	Array of social media links
platform	Platform name (discord, twitter, facebook, instagram, youtube, tiktok, twitch, github, website)
url	URL to the social media page

Loading Bar

"loadingBar": {
  "enabled": true,
  "loadingMessages": [
    "Loading server resources...",
    "Initializing game world...",
    "Loading map data...",
    "Synchronizing with server...",
    "Preparing character data...",
    "Almost there..."
  ]
}

Option	Description
enabled	Enable/disable the loading bar
loadingMessages	Array of messages to display as loading progresses

Music Player

"musicPlayer": {
  "enabled": true,
  "autoplay": true,
  "volume": 50,
  "showInAllTabs": true,
  "playlist": [
    {
      "title": "Server Theme",
      "file": "assets/audio/theme.mp3"
    },
    {
      "title": "Ambient Music",
      "file": "assets/audio/ambient.mp3"
    }
  ]
}

Option	Description
enabled	Enable/disable the music player
autoplay	Whether to start playing music automatically
volume	Default volume level (0-100)
showInAllTabs	Show player in all tabs or only on main page
playlist	Array of audio tracks
title	Track title to display
file	Path to the audio file

Advanced Customization

CSS Variables

The loading screen uses CSS variables for easy styling customization. You can modify these in the style.css file:

:root {
  /* Brand Colors */
  --primary-color: #e60000;
  --primary-color-dark: #990000;
  --primary-color-light: rgba(230, 0, 0, 0.6);
  --primary-color-lighter: rgba(230, 0, 0, 0.2);
  --secondary-color: #ff7b00;
  
  /* Text Colors */
  --text-color: #ffffff;
  --text-color-muted: rgba(255, 255, 255, 0.7);
  --text-color-faded: rgba(255, 255, 255, 0.5);
  
  /* Background Colors */
  --bg-color-dark: #0a0000;
  --bg-color-light: #1a0505;
  --bg-overlay: rgba(10, 0, 0, 0.5);
  --bg-overlay-light: rgba(10, 0, 0, 0.3);
}

Changing these variables will update colors throughout the entire loading screen, making it easy to match your server's branding.

Help and Support

If you encounter any issues or need assistance with customization, please join our Discord server for support:

space