Adding more binds

1. Lua changes - @vms_anims/config/keybinds.lua

keybinds = {
    [1] = {},
    [2] = {},
    [3] = {},
    [4] = {},
    [5] = {},
    --[6] = {},
    -- If you want to add more keys to bind you can do it here but keep in mind that it will also require changes to the HTML and JS
}

CreateThread(function()
    while true do
        local sleep = 4
        if keybinds[1].key and Keys[keybinds[1].key] then 
            if IsControlJustPressed(0, Keys[keybinds[1].key]) then
                PlayAnimation(false, Animations[tonumber(keybinds[1].animId)])
            end
        end
        --[[
        if keybinds[2].key and Keys[keybinds[2].key] then
            if IsControlJustPressed(0, Keys[keybinds[2].key]) then
                PlayAnimation(false, Animations[tonumber(keybinds[2].animId)])
            end
        end
        ]]
        if 
            not keybinds[1].key
            -- and not keybinds[2].key
        then
            sleep = 5000
        end
        Wait(sleep)
    end
end)

2. CSS changes - @vms_anims/html/style.css

.keybindsMenu {
    [...]
    margin-block: 20%; /* The more the give a lower value to even out the panel */
    height: 375px;/*If you want to add more key binds you need to extend the height*/
}

3. JS changes - @vms_anims/html/app.js

function saveAndLoadAllBinds() {
	const keyBind1 = localStorage.getItem('keybind1')
	const emoteBind1 = localStorage.getItem('emotebind1')
	
	//const keyBind2 = localStorage.getItem('keybind2')
	//const emoteBind2 = localStorage.getItem('emotebind2')
	
	if (keyBind1 && emoteBind1) {
		document.getElementById("kb_animkey-1").value = keyBind1
		document.getElementById("kb_animid-1").value = emoteBind1
		$.post('https://vms_anims/action', JSON.stringify({action: 'keybinds', bindId: 1, key: keyBind1, animId: emoteBind1}));
	} else {
		document.getElementById("kb_animkey-1").value = ""
		document.getElementById("kb_animid-1").value = ""
		$.post('https://vms_anims/action', JSON.stringify({action: 'keybinds', bindId: 1}));
	}
	/*
	
	if (keyBind2 && emoteBind2) {
		document.getElementById("kb_animkey-2").value = keyBind2
		document.getElementById("kb_animid-2").value = emoteBind2
		$.post('https://vms_anims/action', JSON.stringify({action: 'keybinds', bindId: 2, key: keyBind2, animId: emoteBind2}));
	} else {
		document.getElementById("kb_animkey-2").value = ""
		document.getElementById("kb_animid-2").value = ""
		$.post('https://vms_anims/action', JSON.stringify({action: 'keybinds', bindId: 2}));
	}
	
	*/
}

4. HTML changes - @vms_anims/html/index.html

:21 - :34 line to duplicate

<div style="display: inline-flex;margin-block: 5px;">
    <div class="bindKeyBtn">
        <input class="inputKeyAnim" id="kb_animkey-1" maxlength="1" placeholder="KEY"> 
    </div>
    <div class="bindAnimBtn">
        <input class="inputIdAnim" type="number" id="kb_animid-1" placeholder="ID OF ANIMATION">
    </div>
    <div class="saveKeybind" onclick="saveKeybind(1)">
        <span class="material-icons">save</span>
    </div>
    <div class="removeKeybind" onclick="removeKeybind(1)">
        <span class="material-icons">delete</span>
    </div>
</div>
<!--

<div style="display: inline-flex;margin-block: 5px;">
    <div class="bindKeyBtn">
        <input class="inputKeyAnim" id="kb_animkey-2" maxlength="1" placeholder="KEY"> 
    </div>
    <div class="bindAnimBtn">
        <input class="inputIdAnim" type="number" id="kb_animid-2" placeholder="ID OF ANIMATION">
    </div>
    <div class="saveKeybind" onclick="saveKeybind(2)">
        <span class="material-icons">save</span>
    </div>
    <div class="removeKeybind" onclick="removeKeybind(2)">
        <span class="material-icons">delete</span>
    </div>
</div>

-->