> For the complete documentation index, see [llms.txt](https://guardiandevlabs.gitbook.io/guardiandevlabs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guardiandevlabs.gitbook.io/guardiandevlabs/paid-scripts/guardian-loading-screen.md).

# Guardian Loading Screen

## ✨ Core Features

The Guardian Labs Loading Screen is engineered to provide a seamless transition from the server list to the game world, combining high-end aesthetics with functional community tools.

### 🪟 Advanced Glassmorphism UI

Our interface uses modern CSS backdrop filters and saturation layers to create a "frosted glass" effect.

* Dynamic Blurring: The UI adapts to your background, providing high legibility regardless of the video or image behind it.
* Responsive Design: Optimized for various aspect ratios to ensure a consistent look for all players.
* Primary Color Sync: Every accent—from the progress bar to the "Connect" button—updates instantly via a single configuration variable.

### 🎵 Interactive Media Suite

Don't let your players wait in silence. Our built-in music player gives them full control.

* Multi-Track Playlist: Support for unlimited tracks via the `config.json`.
* User Controls: Players can play, pause, skip, and adjust volume independently.
* Live Metadata: Displays track titles and artist names in real-time.
* Visual Progress: A custom-styled seeker bar shows the current position in the song.

### 📢 Community Engagement Tools

Bridge the gap between your server and your social platforms before the player even spawns.

#### 🔔 Update System

Keep your community informed with high-fidelity update cards.

* Visual Banners: Support for custom image headers for each update.
* Author Attribution: Show which staff member posted the update with their avatar.
* Social Quick-Links: Integrated YouTube, Twitter, Instagram, and Website icons.

#### 🌟 Staff Directory

Build trust by introducing your leadership team.

* Custom Ranks: Highlight different roles with unique badges.
* Visual Consistency: Clean, circular avatars with glowing rank indicators.

### 🔌 Live Discord Integration

Stay connected with real-time data fetched directly from the Discord API.

* Live Member Count: Shows how many members are currently online in your Discord.
* Guild Identity: Automatically pulls your server's name and branding.
* One-Click Join: A prominent "Connect" button that copies your invite link to the user's clipboard.

### ⚡ Technical Excellence

* Lightweight Footprint: Zero-dependency vanilla JavaScript ensures maximum compatibility and performance.
* Video & Image Support: Toggle between high-definition MP4 backgrounds or optimized static imagery.