🚀 Jericho Loadingscreen

A premium, modern, fully customizable FiveM loading screen with a powerful Drag & Drop layout editor.

---

✨ Features

• 🎨 Modern & Premium UI
• 🖱️ Drag & Drop Layout Editor
• 💾 Automatically Saves Panel Positions
• 🎵 Spotify-Style Music Player
• 📰 Patch Notes System
• 🖼️ Featured Image Carousel
• 📖 About Us Section
• 🌐 Social Media Links
• 📊 Real FiveM Loading Progress
• 🌄 Multiple Background Images
• 🎨 Fully Themeable Colors
• ⚡ Optimized for FiveM NUI
• 📱 Resolution Independent (VH Based)
• 🔧 Easy Configuration
• 🚫 No HTML/CSS/JS Editing Required

---

📦 Installation

1. Copy the jericho_loadingscreen folder into your server's:

resources/

2. Add the resource to your server.cfg

ensure jericho_loadingscreen

3. Replace the default images and music inside

html/images/
html/sounds/

4. Configure everything inside

html/config.js

✅ That's it!

---

⚙️ Configuration

Everything is controlled from one single file:

html/config.js

You never need to edit the HTML, CSS or JavaScript.

---

🖼️ Backgrounds

Choose between a static background or an automatic slideshow.

background: {
    mode: "switch",
    switchInterval: 9000,

    images: [
        "images/bg1.jpg",
        "images/bg2.jpg",
        "images/bg3.jpg"
    ]
}

Modes

• 🖼️ stable → Uses only the first image.
• 🔄 switch → Cycles through every image automatically.

---

🎵 Music Player

The loading screen includes a beautiful Spotify-inspired music player.

Features include:

• ▶️ Play
• ⏹️ Stop
• ⏮️ Previous
• ⏭️ Next
• 🔊 Volume Slider
• 📀 Album Cover
• ⏱️ Progress Bar
• 🎼 Song Information

Example:

music: {
    autoplay: true,
    startVolume: 0.5,

    tracks: [
        {
            title: "Song Name",
            artist: "Artist",
            src: "sounds/song.mp3",
            cover: "images/cover.jpg"
        }
    ]
}

---

📰 Patch Notes

Display unlimited update logs.

Each patch note is rendered inside its own modern card.

✔ Internal scrolling

✔ Accent border

✔ Automatic overflow handling

---

🖼️ Featured Images

Create a beautiful slideshow showcasing your server.

Simply add images inside

html/images/

and reference them in config.js.

---

📖 About Us

Display information about your community.

Supports:

• Logo
• Cover Image
• Description

Example:

about: {
    title: "About Us",
    image: "images/banner.jpg",
    text: "Welcome to Jericho Roleplay..."
}

---

🌐 Social Links

Show only the platforms you use.

Supported:

• Discord
• Instagram
• X (Twitter)
• YouTube
• Twitch

Leave any URL empty to automatically hide that icon.

socials: {
    discord: "",
    youtube: "",
    instagram: ""
}

---

🎨 Themes

Customize the entire UI with only a few color values.

theme: {
    accent: "#7CFF3D",
    background: "#05060a",
    panel: "rgba(8,10,12,0.72)",
    border: "rgba(124,255,61,0.35)",
    text: "#f5f7f4",
    textDim: "rgba(245,247,244,0.62)"
}

Changing the accent color instantly updates the entire interface.

---

🖱️ Drag & Drop Layout Editor

One of the biggest features of Jericho Loadingscreen.

Edit Mode

Click

EDIT LAYOUT

to unlock draggable panels.

While editing:

• 🟢 Panels become draggable
• 🟢 Drag hint appears
• 🟢 Reset Layout button appears

Click

DONE EDITING

to lock everything again.

---

💾 Automatic Layout Saving

Every panel position is automatically saved using browser Local Storage.

No setup required.

The layout remains even after:

• Server Restart
• Resource Restart
• FiveM Restart

---

🔄 Reset Layout

Made a mess?

Simply click

RESET LAYOUT

to restore the original design instantly.

---

🎵 Expandable Spotify Player

The music player starts in a compact view.

Click the arrow to expand it into a full player featuring:

• 📀 Large Cover Art
• ⏱️ Seek Bar
• ⌚ Current / Total Time
• ⏮️ Previous
• ▶️ Play
• ⏹️ Stop
• ⏭️ Next

Click again to collapse.

---

🤖 Smart Panel Collision

The Patch Notes panel automatically detects when the expanded music player overlaps it.

If no custom position has been saved:

• ✅ Patch Notes moves down automatically.
• ✅ Returns to its original position when collapsed.

If you've manually positioned the panel, your layout is always respected.

---

📊 Real FiveM Progress

The progress bar listens directly to FiveM loading events.

While previewing inside a normal browser, a demo loading animation is shown automatically.

No configuration required.

---

⚡ Optimized

Designed specifically for FiveM NUI.

✔ No backdrop-filter

✔ Lightweight

✔ Smooth Animations

✔ Responsive

✔ Resolution Independent

✔ Low Resource Usage

---

📁 Folder Structure

jericho_loadingscreen/
│
├── client.lua
├── fxmanifest.lua
│
└── html/
    ├── index.html
    ├── config.js
    ├── style.css
    ├── script.js
    ├── images/
    └── sounds/

---

❤️ Credits

Developed with passion by Jericho Script

Creating premium FiveM resources for modern communities.

---

⭐ Support

If you enjoy this project, consider giving it a ⭐ Star on GitHub.

It helps support future updates and new releases.

---

🚀 Jericho Script

Premium FiveM Development

Built for Performance. Designed for Communities.