HPK GUIDEBOOK UI [ESX][QBCORE]

A script by HpK-Dev

No reviews yet.
HPK GUIDEBOOK UI [ESX][QBCORE] main image

Price

Unknown

Full Description





A complete guide to get started with RP on your server.

The player is no longer lost and can quickly learn and become independent.

Everything is, as usual, fully configurable :

[+] the entire translation
[+] the color of the book is fully customizable
[+] public job tables
[+] private job tables
[+] the guide book in HTML or plain text
[+] the keyboard section with QWERTY/AZERTY option
[+] the map section with blip color, blip icon, name, and description
[+] etc

TEBEX STORE : https://hpk-dev.tebex.io/category/menu
TEBEX STORE OPEN SOURCE : https://hpk-dev.tebex.io/category/open-source

Config LUA
Config              = {}

Config.Core = "ESX" -- "ESX" / "QB-Core"
Config.CoreExport = function()
    return exports['es_extended']:getSharedObject()
    --return exports['qb-core']:GetCoreObject()
end

------------------------- OPTIONS PART ---------------------------

Config.Quit         = "Thanks for playing on Redstart RP, see you soon"
Config.PingAdress   = "https://www.google.com" -- you can ping directly your server with : https://YOUR_IP/players.json or https://www.google.com

Config.BlackMoney   = "black_money" -- xPlayer.getAccount('black_money').money
Config.BankMoney    = "bank" -- xPlayer.getAccount('bank').money

------------------------- CURRENCY/DATE PART ---------------------------

Config.Currency     = "USD" -- EUR, GBP, USD...
Config.Format       = "en-US" -- fr-FR, en-GB, es-ES...

----------------------- NOTIFICATION PART -------------------------

Config.Notifications = {
    customNotificationClient = function()
        if Config.Core == "ESX" then
            ESX.ShowNotification("A new gps point has been added to your map.")
        elseif Config.Core == "QB-Core" then
            QBCore.Functions.Notify("A new gps point has been added to your map.")
        end
    end
}
Config JS

// Traduction
serverName = "SERVER NAME";
logoName = "images/logo.jpg"; // Logo Path - same height and width 

home = "Home";
guide = "Guide";
keyboard = "Keyboard";
map = "Map";

publicJob = "Public Service";
compagnyJob = "Compagny";

discord = "Discord";
discordLink = "https://discord.gg/EXhgGmaqZN";

store = "Store";
storeLink = "https://hpk-dev.tebex.io/";

age = "Age";
size = "Size";
wallet = "Wallet";
bank = "Bank";
dirtyMoney = "Black Money";
id = "ID";
gameSession = "Game Session";
ping = "Ping";
job = "Job";

shortcut = "Shortcut";
map = "Map";
keyboardSettings = "Keyboard";
settings = "Settings";
exit = "Exit Game";

characterStars = "Character Stars";
hunger = "Hunger";
thirst = "Thirst";

keyboardTouch = "Press a key to get the description";


// Job Table
var publicWork = [
    {name: "N.S.P.D", status: "green"},
    {name: "E.M.S", status: "red"},
    {name: "SHERIFF", status: "red"},
    {name: "BCSO", status: "green"},
    {name: "OTHER", status: "green"}
];

var compagnyWork = [
    {name: "Bennys", status: "green"},
    {name: "LsCustom", status: "green"},
    {name: "Postal", status: "red"},
    {name: "Weazel", status: "green"},
    {name: "Others", status: "red"}
];

// Guide Table
var guideTable = [
    {
        name: "Inventory",
        description: `
        <div>
            <img src="https://forum-cfx-re.akamaized.net/original/3X/7/2/725bdee557137b818a478c350d88597e428de384.png" alt="Sample Image" style="width:100%; height:3vw; border-radius:0.25vw;">
            <h1>Welcome to Our Guide</h1>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley</p>
            
            <h2>Text Formatting</h2>
            <p>You can <strong>bold</strong>, <em>italicize</em>, or <u>underline</u> any part of your text to emphasize important points.</p>
        
            <h2>Adding Images</h2>
            <p>Images can be a powerful way to enhance your messages. Here's an example of how you can include them:</p>

            <p style="text-align:center;">Figure 1: Sample Image</p>
            <img src="https://logo-marque.com/wp-content/uploads/2021/03/FiveM-Symbole.jpg" alt="Sample Image" style="width:30%; border-radius:0.25vw;">
            
            <h2>Lists</h2>
            <p>Organize information with bullet points or numbered lists:</p>
            <ul>
                <li>Bullet point one</li>
                <li>Bullet point two</li>
                <li>Bullet point three</li>
            </ul>
        
            <h2>Etc.....</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        </div>
    `
    },
    {
        name: "Phone",
        description: `Your HTML or Text Description`
    },
    {
        name: "Clothes",
        description: `Your HTML or Text Description`
    },
    {
        name: "Store",
        description: `Your HTML or Text Description`    
    },
    {
        name: "Properties",
        description: `Your HTML or Text Description`    
    },
    {
        name: "Gang",
        description: `Your HTML or Text Description`    
    },
    {
        name: "Job",
        description: `Your HTML or Text Description`    
    },
    {
        name: "Bill",
        description: `Your HTML or Text Description`    
    },
    {
        name: "Credit",
        description: `Your HTML or Text Description`    
    },
];

// Keyboard Table
var highlightedKeys = {
    'E':    'Description for E key',
    'W':    'Description for W key',
    'F1':   'Description for F1 key',
    'F2':   'Description for F2 key',
    'F3':   'Description for F3 key',
    'F4':   'Description for F4 key',
    'Z':    'Description for Z key',
    'W':    'Description for W key',
};

// Map Table
var mapTable = [
    {
        name: "POLICE",
        description: "Central command for police operations and public safety.",
        coord: { x: -557.92, y: -427.15 }, /* don't forget the number after the comma */
        blipcolor: "#ff9900", /* https://htmlcolorcodes.com/ */
        icon: "fa-location-dot" /* icon on https://fontawesome.com/ */
    },
    {
        name: "EMS",
        description: "Emergency medical services providing rapid care and transportation.",
        coord: { x: -1870.04, y: -357.16 },
        blipcolor: "#ff9900",
        icon: "fa-location-dot"
    },
    {
        name: "CONCESS",
        description: "Car dealership specializing in sales and service of vehicles.",
        coord: { x: -791.23, y: -357.16 },
        blipcolor: "#ff9900",
        icon: "fa-location-dot"
    },
    {
        name: "MECHANO",
        description: "Automotive repair shop offering maintenance and repair services.",
        coord: { x: -6.98, y: -654.13 },
        blipcolor: "#ff9900",
        icon: "fa-location-dot"
    },
    {
        name: "BANK",
        description: "Financial institution providing banking services.",
        coord: { x: -231.78, y: -1997.31 },
        blipcolor: "#ff9900",
        icon: "fa-location-dot"
    },
    {
        name: "EMS NORTH",
        description: "Northern branch of emergency medical services.",
        coord: { x: -448.09, y: 6002.47 },
        blipcolor: "#ff9900",
        icon: "fa-location-dot"
    },
    {
        name: "SHERIFF",
        description: "Sheriff's office responsible for law enforcement and public safety.",
        coord: { x: -75.59, y: 6499.62 },
        blipcolor: "#ff9900",
        icon: "fa-location-dot"
    },
];
Code is accessible Yes/No
Subscription-based Yes/No
Lines (approximately) 1000 lines +
Requirements ESX / QBCORE
Support Yes