Customize

Changing hotkeys and command name

You can change the hotkeys, command name and description in the config.lua

config.lua

Config.SpawnStoreCMD = 'store' -- Command name
Config.SpawnStoreInfo = 'Open store' -- Command description
Config.SpawnStoreHotkey = 'F2' -- Hotkey

Changing icons

You can change the icons in html/ui.html lines 18-40.

You can use an SVG or icons from Material Icons

ui.html

<div class="container-menu">
        <div class="box">
            <span class="icon">F1</span>
            <!-- Icon for Selector -->
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-geo-alt-fill" viewBox="0 0 16 16">
                <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10m0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6"/>
            </svg>
            <!-- Icon for Selector -->
        </div>
        <div class="box">
            <span class="icon">F2</span>
            <!-- Icon for Store -->
            <span class="material-icons">store</span>
            <!-- Icon for Store -->
        </div>
        <div class="box">
            <span class="icon">F3</span> 
            <!-- Icon for Discord -->
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-discord" viewBox="0 0 16 16">
                <path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612"/>
            </svg>
            <!-- Icon for Discord -->
        </div>
    </div>

Changing logo

Same as the icons, it's located in html/ui.html

ui.html

<div class="logo">
        <!-- Logo URL -->
        <img src="https://i.imgur.com/jSZo1EG.png" alt="Logo">
        <!-- Logo URL -->
</div>

Changing URLs

You can change the URLs in html/app.js From lines 4 and 7.

app.js

window.addEventListener('message', function (event) {
  switch (event.data.message) {
    case 'togglestore':
      invokeNative('openUrl', 'https://srpeter.tebex.io/'); // Store URL
      break;
    case 'togglediscord':
      invokeNative('openUrl', 'https://discord.gg/6XN5C9J6BT'); // Discord URL
      break;
    default:
      console.log('Error');
      break;
  }
});

Customize colors

You can also change the colors of the text, background, icons...etc in html/style.css

For example, here line 7 will change the border of the box, line 14 and 15 the background and color of the text and icons

style.css

.container-menu {
    position: fixed;
    bottom: 0.7rem;
    left: 1.8rem;
    display: flex;
    min-width: 17rem;
    border: #a00f31 2px solid; /* Border color */
    border-radius: 5%;
}

.box {
    height: 25px;
    width: calc(100% / 3);
    background-color: #242424; /* Background color */
    color: #ef476f; /* Text color */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    padding: 0 18px;
}