structura foldere

mutat kq- folders in un singur folder [kq]

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/.idea/.gitignore

@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/phone.iml" filepath="$PROJECT_DIR$/.idea/phone.iml" />
+    </modules>
+  </component>
+</project>

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/.idea/phone.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/.." vcs="Git" />
+  </component>
+</project>

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/client/apps/crypto.lua

@@ -0,0 +1,142 @@
+RegisterNUICallback('GetCryptoData', function(data, cb)
+    TriggerServerCallback('qb-crypto:server:GetCryptoData', function(CryptoData)
+        cb(CryptoData)
+    end, data.crypto)
+end)
+
+RegisterNUICallback('BuyCrypto', function(data, cb)
+    TriggerServerCallback('qb-crypto:server:BuyCrypto', function(CryptoData)
+        cb(CryptoData)
+    end, data)
+end)
+
+RegisterNUICallback('SellCrypto', function(data, cb)
+    TriggerServerCallback('qb-crypto:server:SellCrypto', function(CryptoData)
+        cb(CryptoData)
+    end, data)
+end)
+
+RegisterNUICallback('TransferCrypto', function(data, cb)
+    TriggerServerCallback('qb-crypto:server:TransferCrypto', function(CryptoData)
+        cb(CryptoData)
+    end, data)
+end)
+
+RegisterNUICallback('GetCryptoTransactions', function(data, cb)
+    local Data = {
+        CryptoTransactions = PhoneData.CryptoTransactions
+    }
+    cb(Data)
+end)
+
+RegisterNetEvent('phone:client:AddTransaction', function(_, _, Message, Title)
+    local Data = {
+        TransactionTitle = Title,
+        TransactionMessage = Message,
+    }
+    PhoneData.CryptoTransactions[#PhoneData.CryptoTransactions + 1] = Data
+    SendNUIMessage({
+        action = 'UpdateTransactions',
+        CryptoTransactions = PhoneData.CryptoTransactions
+    })
+    SendTempNotificationOld({
+        title = Lang('PHONE_NOTIFICATION_STOCK_TITLE'),
+        app = 'stock',
+        text = Message,
+        timeout = 3500,
+    })
+    TriggerServerEvent('phone:server:AddTransaction', Data)
+end)
+
+local function ExchangeSuccess()
+    TriggerServerEvent('qb-crypto:server:ExchangeSuccess', math.random(1, 10))
+end
+
+local function ExchangeFail()
+    local Odd = 5
+    local RemoveChance = math.random(1, Odd)
+    local LosingNumber = math.random(1, Odd)
+    if RemoveChance == LosingNumber then
+        TriggerServerEvent('qb-crypto:server:ExchangeFail')
+        TriggerServerEvent('qb-crypto:server:SyncReboot')
+    end
+end
+
+local function SystemCrashCooldown()
+    Citizen.CreateThread(function()
+        while Crypto.Exchange.RebootInfo.state do
+            if (Crypto.Exchange.RebootInfo.percentage + 1) <= 100 then
+                Crypto.Exchange.RebootInfo.percentage = Crypto.Exchange.RebootInfo.percentage + 1
+                TriggerServerEvent('qb-crypto:server:Rebooting', true, Crypto.Exchange.RebootInfo.percentage)
+            else
+                Crypto.Exchange.RebootInfo.percentage = 0
+                Crypto.Exchange.RebootInfo.state = false
+                TriggerServerEvent('qb-crypto:server:Rebooting', false, 0)
+            end
+            Citizen.Wait(1200)
+        end
+    end)
+end
+
+function HackingSuccess(success)
+    if success then
+        TriggerEvent('mhacking:hide')
+        ExchangeSuccess()
+    else
+        TriggerEvent('mhacking:hide')
+        ExchangeFail()
+    end
+end
+
+Citizen.CreateThread(function()
+    while true do
+        local sleep = 5000
+        local ped = PlayerPedId()
+        local pos = GetEntityCoords(ped)
+        local dist = #(pos - Crypto.Exchange.coords)
+
+        if Config.UseTarget then return end
+        if dist < 15 then
+            sleep = 1
+            if dist < 1.5 then
+                if not Crypto.Exchange.RebootInfo.state then
+                    DrawText3D(Crypto.Exchange.coords.x, Crypto.Exchange.coords.y, Crypto.Exchange.coords.z, Lang('PHONE_DRAWTEXT_STOCK_ENTER_USB'), 'stock_enter_usb', 'E')
+
+                    if IsControlJustPressed(0, 38) then
+                        TriggerServerCallback('qb-crypto:server:HasSticky', function(HasItem)
+                            if HasItem then
+                                TriggerEvent('mhacking:show')
+                                TriggerEvent('mhacking:start', math.random(4, 6), 45, HackingSuccess)
+                            else
+                                SendTextMessage(Lang('PHONE_NOTIFICATION_STOCK_MISSING_CRYPTOSTICK'), 'error')
+                            end
+                        end)
+                    end
+                else
+                    DrawText3Ds(Crypto.Exchange.coords.x, Crypto.Exchange.coords.y, Crypto.Exchange.coords.z, Lang('PHONE_DRAWTEXT_STOCK_REBOOTING') .. ' ' .. Crypto.Exchange.RebootInfo.percentage .. '%')
+                end
+            end
+        end
+        Citizen.Wait(sleep)
+    end
+end)
+
+RegisterNetEvent('qb-crypto:client:SyncReboot', function()
+    Crypto.Exchange.RebootInfo.state = true
+    SystemCrashCooldown()
+end)
+
+RegisterNetEvent('qb-crypto:client:UpdateCryptoWorth', function(crypto, amount, history)
+    Crypto.Worth[crypto] = amount
+    if history ~= nil then
+        Crypto.History[crypto] = history
+    end
+end)
+
+RegisterNetEvent('qb-crypto:client:GetRebootState', function(RebootInfo)
+    if RebootInfo.state then
+        Crypto.Exchange.RebootInfo.state = RebootInfo.state
+        Crypto.Exchange.RebootInfo.percentage = RebootInfo.percentage
+        SystemCrashCooldown()
+    end
+end)

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/client/custom/billing/RxBilling.lua

@@ -0,0 +1,8 @@
+if Config.Billing ~= 'RxBilling' then return end
+
+---@param id number
+---@return boolean
+function PayInvoice(id)
+    local invoice, msg = exports.RxBilling:PayInvoice(id)
+    if invoice then return true end
+end

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/client/custom/billing/codemv2.lua

@@ -0,0 +1,9 @@
+if Config.Billing ~= 'codemv2' then return end
+
+---@param id number
+---@return boolean
+function PayInvoice(id)
+    TriggerServerEvent('codemBilling:PayInvoice', id)
+    Wait(250) -- Wait until the server has processed the request (this is a bad way to do it. Use callbacks instead)
+    return true
+end

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/client/custom/billing/esx_billing.lua

@@ -0,0 +1,21 @@
+if Config.Billing ~= 'esx_billing' then return end
+
+---@param id number
+---@return boolean
+function PayInvoice(id)
+    local co = coroutine.running()
+    if not co then
+        return false
+    end
+
+    local result = false
+    ESX.TriggerServerCallback('esx_billing:payBill', function(resp)
+        if resp then
+            TriggerEvent('esx_billing:paidBill', id)
+            result = true
+        end
+        coroutine.resume(co, result)
+    end, id)
+
+    return coroutine.yield()
+end

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/client/custom/billing/okok.lua

@@ -0,0 +1,9 @@
+if Config.Billing ~= 'okok' then return end
+
+---@param id number
+---@return boolean
+function PayInvoice(id)
+    TriggerServerEvent('okokBilling:PayInvoice', id)
+    Wait(250) -- Wait until the server has processed the request (this is a bad way to do it. Use callbacks instead)
+    return true
+end

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/client/custom/billing/qs.lua

@@ -0,0 +1,8 @@
+if Config.Billing ~= 'qs' then return end
+
+---@param id number
+---@return boolean
+function PayInvoice(id)
+        TriggerEvent('qs-billing:client:Notify', 'You must go to pay it presentialy or in your invoice tablet', 'info')
+    return true
+end

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/client/custom/billing/standalone.lua

@@ -0,0 +1,7 @@
+if Config.Billing ~= 'standalone' then return end
+
+---@param id number
+---@return boolean
+function PayInvoice(id)
+    return TriggerServerCallbackSync('phone:payInvoice', id)
+end

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/client/custom/examples.lua

@@ -0,0 +1,55 @@
+-- These are examples of how to use the custom functions in the client.
+
+-- Example of how to use the notification function.
+RegisterCommand('notifi', function(source)
+    exports['qs-smartphone-pro']:SendTempNotification({
+        title = 'Test',
+        text = 'This is a test notification.',
+        app = 'settings',
+        timeout = 5000,
+        disableBadge = true, -- Disables the badge on the app icon.
+    })
+end, false)
+
+-- Its same as the old one
+RegisterCommand('notifiOld', function(source)
+    exports['qs-smartphone-pro']:SendTempNotificationOld({
+        title = 'Test',
+        text = 'This is a test notification.',
+        app = 'settings',
+        timeout = 5000,
+        disableBadge = true, -- Disables the badge on the app icon.
+    })
+end, false)
+
+-- Example of how to use the sendNewMail event.
+RegisterCommand('mailTest', function(source)
+    TriggerServerEvent('phone:sendNewMail', {
+        sender = 'Movistar Plus',
+        subject = 'Family telephone balance promotion',
+        message = 'Enjoy the family balance at only $8.50 per month, what are you waiting for?'
+    })
+end, false)
+
+-- Example of how to use the sendNewMail event for the old smartphone.
+RegisterCommand('mailTestOld', function(source)
+    TriggerServerEvent('qs-smartphone:server:sendNewMail', {
+        sender = 'Movistar Plus',
+        subject = 'Family telephone balance promotion',
+        message = 'Enjoy the family balance at only $8.50 per month, what are you waiting for?'
+    })
+end, false)
+
+-- You can check if user is using phone.
+RegisterCommand('phoneCheck', function(source)
+    local isUsingPhone = exports['qs-smartphone-pro']:InPhone()
+    if isUsingPhone then
+        print('User is using phone.')
+    else
+        print('User is not using phone.')
+    end
+end, false)
+
+-- RegisterCommand('toggleCanOpenPhone', function()
+--     exports['qs-smartphone-pro']:SetCanOpenPhone(false)
+-- end, false)

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/client/custom/framework/esx.lua

@@ -0,0 +1,409 @@
+--[[
+    Hi dear customer or developer, here you can fully configure your server's
+    framework or you could even duplicate this file to create your own framework.
+
+    If you do not have much experience, we recommend you download the base version
+    of the framework that you use in its latest version and it will work perfectly.
+]]
+
+if Config.Framework ~= 'esx' then
+    return
+end
+
+ESX = nil
+
+Citizen.CreateThread(function()
+    local legacyEsx = pcall(function()
+        ESX = exports['es_extended']:getSharedObject()
+    end)
+    Citizen.Wait(0)
+    if legacyEsx then return end
+    while ESX == nil do
+        TriggerEvent('esx:getSharedObject', function(obj) ESX = obj end)
+        Citizen.Wait(0)
+    end
+end)
+
+function TriggerServerCallback(name, cb, ...)
+    local startTime = GetGameTimer()
+    ESX.TriggerServerCallback(name, function(...)
+        local endTime = GetGameTimer()
+        local duration = endTime - startTime
+        Debug('TriggerServerCallback ::: ' .. name .. ' took ' .. duration .. 'ms')
+        cb(...)
+    end, ...)
+end
+
+exports('TriggerServerCallback', TriggerServerCallback)
+
+RegisterNetEvent('esx:playerLoaded', function()
+    TriggerServerEvent('qb-crypto:server:FetchWorth')
+    TriggerServerEvent('qb-crypto:server:GetRebootState')
+end)
+
+RegisterNetEvent('esx:onPlayerLogout', function()
+    Logout()
+end)
+
+RegisterNetEvent('esx:setJob')
+AddEventHandler('esx:setJob', function(JobInfo)
+    SendNUIMessage({
+        action = 'UpdateApplications',
+        jobName = JobInfo.name,
+        applications = PhoneApplications
+    })
+end)
+
+local brutalDead = GetResourceState('brutal_ambulancejob') == 'started'
+function isDead()
+    if brutalDead then
+        return exports.brutal_ambulancejob:IsDead()
+    end
+    return IsPedDeadOrDying(PlayerPedId(), false) or IsEntityDead(PlayerPedId()) or IsPauseMenuActive() or LocalPlayer.state.dead
+end
+
+function GetHungry()
+    local promise = promise.new()
+    TriggerEvent('esx_status:getStatus', 'hunger', function(status)
+        promise:resolve(status.getPercent())
+    end)
+    return Citizen.Await(promise)
+end
+
+function GetThirsty()
+    local promise = promise:new()
+    TriggerEvent('esx_status:getStatus', 'thirst', function(status)
+        promise:resolve(status.getPercent())
+    end)
+    return Citizen.Await(promise)
+end
+
+function GetPlayerData()
+    return ESX.GetPlayerData()
+end
+
+function GetInventory()
+    return GetPlayerData().inventory
+end
+
+function GetJobName()
+    return GetPlayerData().job.name
+end
+
+function GetMoney()
+    for k, v in pairs(GetPlayerData().accounts) do
+        if v.name == 'bank' then return v.money end
+    end
+    return 0
+end
+
+function FrameworkGetClosestVehicle()
+    return ESX.Game.GetClosestVehicle()
+end
+
+function FrameworkSpawnVehicle(model, coords, heading, cb)
+    ESX.Game.SpawnVehicle(model, coords, heading, cb)
+end
+
+function FrameworkSetVehicleProperties(vehicle, props)
+    ESX.Game.SetVehicleProperties(vehicle, props)
+end
+
+function FrameworkGetVehicles(cb)
+    return ESX.Game.GetVehicles()
+end
+
+function GetIdentifier()
+    return GetPlayerData().identifier
+end
+
+function GetPlayerMoney()
+    local playerData = GetPlayerData()
+    for i = 1, #playerData.accounts, 1 do
+        if playerData.accounts[i].name == 'money' then
+            return playerData.accounts[i].money
+        end
+    end
+end
+
+function SendTextMessage(msg, type)
+    if GetResourceState('qs-interface') == 'started' then
+        if type == 'inform' then
+            exports['qs-interface']:AddNotify(msg, 'Inform', 2500, 'fas fa-file')
+        elseif type == 'error' then
+            exports['qs-interface']:AddNotify(msg, 'Error', 2500, 'fas fa-bug')
+        elseif type == 'success' then
+            exports['qs-interface']:AddNotify(msg, 'Success', 2500, 'fas fa-thumbs-up')
+        end
+        return
+    end
+
+    if type == 'inform' then
+        lib.notify({
+            title = 'Smartphone',
+            description = msg,
+            type = 'inform'
+        })
+    elseif type == 'error' then
+        lib.notify({
+            title = 'Smartphone',
+            description = msg,
+            type = 'error'
+        })
+    elseif type == 'success' then
+        lib.notify({
+            title = 'Smartphone',
+            description = msg,
+            type = 'success'
+        })
+    end
+end
+
+local texts = {}
+if GetResourceState('qs-textui') == 'started' then
+    function DrawText3D(x, y, z, text, id, key)
+        local _id = id
+        if not texts[_id] then
+            CreateThread(function()
+                texts[_id] = 5
+                while texts[_id] > 0 do
+                    texts[_id] = texts[_id] - 1
+                    Wait(0)
+                end
+                texts[_id] = nil
+                exports['qs-textui']:DeleteDrawText3D(id)
+                Debug('Deleted text', id)
+            end)
+            TriggerEvent('textui:DrawText3D', x, y, z, text, id, key)
+        end
+        texts[_id] = 5
+    end
+else
+    function DrawText3D(x, y, z, text)
+        SetTextScale(0.35, 0.35)
+        SetTextFont(4)
+        SetTextProportional(1)
+        SetTextColour(255, 255, 255, 215)
+        SetTextEntry('STRING')
+        SetTextCentre(true)
+        AddTextComponentString(text)
+        SetDrawOrigin(x, y, z, 0)
+        DrawText(0.0, 0.0)
+        local factor = text:len() / 370
+        DrawRect(0.0, 0.0 + 0.0125, 0.017 + factor, 0.03, 0, 0, 0, 75)
+        ClearDrawOrigin()
+    end
+end
+
+function DrawText3Ds(x, y, z, text)
+    SetTextScale(0.35, 0.35)
+    SetTextFont(4)
+    SetTextProportional(1)
+    SetTextColour(255, 255, 255, 215)
+    SetTextEntry('STRING')
+    SetTextCentre(true)
+    AddTextComponentString(text)
+    SetDrawOrigin(x, y, z, 0)
+    DrawText(0.0, 0.0)
+    local factor = text:len() / 370
+    DrawRect(0.0, 0.0 + 0.0125, 0.017 + factor, 0.03, 0, 0, 0, 75)
+    ClearDrawOrigin()
+end
+
+function DrawGenericText(text)
+    SetTextFont(4)
+    SetTextProportional(0)
+    SetTextScale(0.65, 0.65)
+    SetTextDropShadow(0, 0, 0, 0, 255)
+    SetTextEdge(1, 0, 0, 0, 255)
+    SetTextEntry('STRING')
+    AddTextComponentString(text)
+    DrawText(0.825, 0.90)
+end
+
+function ProgressBar(name, label, duration, useWhileDead, canCancel, disableControls, animation, prop, propTwo, onFinish, onCancel)
+    if GetResourceState('qs-interface') == 'started' then
+        local success = exports['qs-interface']:ProgressBar({
+            duration = duration,
+            label = label,
+            position = 'bottom',
+            useWhileDead = useWhileDead,
+            canCancel = canCancel,
+            disable = disableControls,
+            anim = {
+                dict = animation.animDict,
+                clip = animation.anim,
+                flag = animation?.flags
+            },
+            prop = prop
+        })
+        if success then
+            onFinish()
+        else
+            onCancel()
+        end
+        return
+    end
+    if lib.progressCircle({
+            duration = duration,
+            label = label,
+            position = 'bottom',
+            useWhileDead = useWhileDead,
+            canCancel = canCancel,
+            disable = disableControls,
+            anim = {
+                dict = animation.animDict,
+                clip = animation.anim,
+                flag = animation?.flags
+            },
+            prop = prop
+        }) then
+        onFinish()
+    else
+        onCancel()
+    end
+end
+
+function DepositMoney(amount, cb)
+    Debug('Society Deposit', amount)
+    TriggerServerEvent('esx_society:depositMoney', GetJobName(), amount)
+    SetTimeout(500, function()
+        TriggerServerCallback('esx_society:getSocietyMoney', cb, GetJobName())
+    end)
+end
+
+function WithdrawMoney(amount, cb)
+    Debug('society withdraw money', amount)
+    TriggerServerEvent('esx_society:withdrawMoney', GetJobName(), amount)
+    SetTimeout(500, function()
+        TriggerServerCallback('esx_society:getSocietyMoney', cb, GetJobName())
+    end)
+end
+
+function HireEmployee(source, cb)
+    TriggerServerCallback('esx_society:getOnlinePlayers', function(players)
+        for i = 1, #players do
+            local player = players[i]
+            if player.source == source then
+                TriggerServerCallback('esx_society:setJob', function()
+                    cb({
+                        name = player.name,
+                        id = player.identifier
+                    })
+                end, player.identifier, GetJobName(), 0, 'hire')
+                return
+            end
+        end
+    end)
+end
+
+function FireEmployee(identifier, cb)
+    Debug('Fire Employee', identifier)
+    TriggerServerCallback('esx_society:setJob', function()
+        cb(true)
+    end, identifier, 'unemployed', 0, 'fire')
+end
+
+function SetGrade(identifier, newGrade, cb)
+    TriggerServerCallback('esx_society:getJob', function(job)
+        if newGrade > #job.grades - 1 then
+            return cb(false)
+        end
+
+        TriggerServerCallback('esx_society:setJob', function()
+            cb(true)
+        end, identifier, GetJobName(), newGrade, 'promote')
+    end, GetJobName())
+end
+
+RegisterNUICallback('getMarketData', function(data, cb)
+    local playerData = GetPlayerData()
+    local jobData = {
+        job = playerData.job.name,
+        jobLabel = playerData.job.label,
+        isBoss = playerData.job.grade_name == 'boss'
+    }
+
+    if not jobData.isBoss then
+        for cId = 1, #Config.Markets do
+            local market = Config.Markets[cId]
+            if table.includes(market.job, jobData.job) then
+                if not market.bossRanks then
+                    break
+                end
+
+                jobData.bossRanks = market.bossRanks
+                for i = 1, #market.bossRanks do
+                    if market.bossRanks[i] == playerData.job.grade_name then
+                        jobData.isBoss = true
+                        break
+                    end
+                end
+                break
+            end
+        end
+    end
+
+    if jobData.isBoss then
+        local moneyPromise = promise.new()
+        TriggerServerCallback('esx_society:getSocietyMoney', function(money)
+            jobData.balance = money
+            moneyPromise:resolve()
+        end, jobData.job)
+        Citizen.Await(moneyPromise)
+
+        local employeesPromise = promise.new()
+        TriggerServerCallback('esx_society:getEmployees', function(employees)
+            jobData.employees = employees
+            for i = 1, #employees do
+                local employee = employees[i]
+                employees[i] = {
+                    name = employee.name,
+                    id = employee.identifier,
+
+                    gradeLabel = employee.job.grade_label,
+                    grade = employee.job.grade,
+
+                    canInteract = employee.job.grade_name ~= 'boss'
+                }
+            end
+            employeesPromise:resolve()
+        end, jobData.job)
+        Citizen.Await(employeesPromise)
+
+        local gradesPromise = promise.new()
+        TriggerServerCallback('esx_society:getJob', function(job)
+            local grades = {}
+            for i = 1, #job.grades do
+                local grade = job.grades[i]
+                grades[i] = {
+                    key = grade.grade,
+                    value = grade.label
+                }
+            end
+            jobData.grades = grades
+            gradesPromise:resolve()
+        end, jobData.job)
+        Citizen.Await(gradesPromise)
+    end
+
+    Debug('Market Data', jobData)
+
+    cb(jobData)
+end)
+
+function ToggleHud(bool)
+    if bool then
+        Debug('Event to show the hud [client/custom/framework/esx.lua line 389]')
+        DisplayRadar(false) -- You can enable or disable mini-map here
+        if GetResourceState('qs-interface') == 'started' then
+            exports['qs-interface']:ToggleHud(false)
+        end
+    else
+        Debug('Event to hide the hud [client/custom/framework/esx.lua line 389]')
+        DisplayRadar(true) -- You can enable or disable mini-map here
+        if GetResourceState('qs-interface') == 'started' then
+            exports['qs-interface']:ToggleHud(true)
+        end
+    end
+end

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/client/custom/framework/qb.lua

@@ -0,0 +1,363 @@
+--[[
+    Hi dear customer or developer, here you can fully configure your server's
+    framework or you could even duplicate this file to create your own framework.
+
+    If you do not have much experience, we recommend you download the base version
+    of the framework that you use in its latest version and it will work perfectly.
+]]
+
+if Config.Framework ~= 'qb' then
+    return
+end
+
+ESX = nil
+
+Citizen.CreateThread(function()
+    ESX = exports['qb-core']:GetCoreObject()
+end)
+
+function TriggerServerCallback(name, cb, ...)
+    local startTime = GetGameTimer()
+    ESX.Functions.TriggerCallback(name, function(...)
+        local endTime = GetGameTimer()
+        local duration = endTime - startTime
+        Debug('TriggerServerCallback ::: ' .. name .. ' took ' .. duration .. 'ms')
+        cb(...)
+    end, ...)
+end
+
+exports('TriggerServerCallback', TriggerServerCallback)
+
+RegisterNetEvent('QBCore:Client:OnPlayerLoaded', function()
+    TriggerServerEvent('qb-crypto:server:FetchWorth')
+    TriggerServerEvent('qb-crypto:server:GetRebootState')
+end)
+
+RegisterNetEvent('QBCore:Client:OnJobUpdate', function(JobInfo)
+    SendNUIMessage({
+        action = 'UpdateApplications',
+        jobName = JobInfo.name,
+        applications = PhoneApplications
+    })
+end)
+
+RegisterNetEvent('QBCore:Client:OnPlayerUnload', function()
+    Logout()
+end)
+
+function GetPlayerData()
+    return ESX.Functions.GetPlayerData()
+end
+
+local brutalDead = GetResourceState('brutal_ambulancejob') == 'started'
+function isDead()
+    if brutalDead then
+        return exports.brutal_ambulancejob:IsDead()
+    end
+    return GetPlayerData().metadata['ishandcuffed'] or GetPlayerData().metadata['inlaststand'] or GetPlayerData().metadata['isdead'] or IsPauseMenuActive() or LocalPlayer.state.dead
+end
+
+function GetIdentifier()
+    return GetPlayerData().citizenid
+end
+
+function GetHungry()
+    return GetPlayerData().metadata.hunger
+end
+
+function GetThirsty()
+    return GetPlayerData().metadata.thirst
+end
+
+function GetInventory()
+    return GetPlayerData().items
+end
+
+function GetJobName()
+    return GetPlayerData().job.name
+end
+
+function GetMoney()
+    return GetPlayerData().money.bank or 0
+end
+
+function FrameworkGetClosestVehicle()
+    return ESX.Functions.GetClosestVehicle()
+end
+
+function FrameworkSpawnVehicle(model, coords, heading, cb)
+    ESX.Functions.SpawnVehicle(model, cb, coords, true)
+end
+
+function FrameworkSetVehicleProperties(vehicle, props)
+    ESX.Functions.SetVehicleProperties(vehicle, props)
+end
+
+function FrameworkGetVehicles(cb)
+    return ESX.Functions.GetVehicles(cb)
+end
+
+function GetPlayerMoney()
+    return GetPlayerData().money['cash']
+end
+
+function SendTextMessage(msg, type)
+    if GetResourceState('qs-interface') == 'started' then
+        if type == 'inform' then
+            exports['qs-interface']:AddNotify(msg, 'Inform', 2500, 'fas fa-file')
+        elseif type == 'error' then
+            exports['qs-interface']:AddNotify(msg, 'Error', 2500, 'fas fa-bug')
+        elseif type == 'success' then
+            exports['qs-interface']:AddNotify(msg, 'Success', 2500, 'fas fa-thumbs-up')
+        end
+        return
+    end
+
+    if type == 'inform' then
+        lib.notify({
+            title = 'Smartphone',
+            description = msg,
+            type = 'inform'
+        })
+    elseif type == 'error' then
+        lib.notify({
+            title = 'Smartphone',
+            description = msg,
+            type = 'error'
+        })
+    elseif type == 'success' then
+        lib.notify({
+            title = 'Smartphone',
+            description = msg,
+            type = 'success'
+        })
+    end
+end
+
+local texts = {}
+if GetResourceState('qs-textui') == 'started' then
+    function DrawText3D(x, y, z, text, id, key)
+        local _id = id
+        if not texts[_id] then
+            CreateThread(function()
+                texts[_id] = 5
+                while texts[_id] > 0 do
+                    texts[_id] = texts[_id] - 1
+                    Wait(0)
+                end
+                texts[_id] = nil
+                exports['qs-textui']:DeleteDrawText3D(id)
+                Debug('Deleted text', id)
+            end)
+            TriggerEvent('textui:DrawText3D', x, y, z, text, id, key)
+        end
+        texts[_id] = 5
+    end
+else
+    function DrawText3D(x, y, z, text)
+        SetTextScale(0.35, 0.35)
+        SetTextFont(4)
+        SetTextProportional(1)
+        SetTextColour(255, 255, 255, 215)
+        SetTextEntry('STRING')
+        SetTextCentre(true)
+        AddTextComponentString(text)
+        SetDrawOrigin(x, y, z, 0)
+        DrawText(0.0, 0.0)
+        local factor = text:len() / 370
+        DrawRect(0.0, 0.0 + 0.0125, 0.017 + factor, 0.03, 0, 0, 0, 75)
+        ClearDrawOrigin()
+    end
+end
+
+function DrawText3Ds(x, y, z, text)
+    SetTextScale(0.35, 0.35)
+    SetTextFont(4)
+    SetTextProportional(1)
+    SetTextColour(255, 255, 255, 215)
+    SetTextEntry('STRING')
+    SetTextCentre(true)
+    AddTextComponentString(text)
+    SetDrawOrigin(x, y, z, 0)
+    DrawText(0.0, 0.0)
+    local factor = text:len() / 370
+    DrawRect(0.0, 0.0 + 0.0125, 0.017 + factor, 0.03, 0, 0, 0, 75)
+    ClearDrawOrigin()
+end
+
+function DrawGenericText(text)
+    SetTextFont(4)
+    SetTextProportional(0)
+    SetTextScale(0.65, 0.65)
+    SetTextDropShadow(0, 0, 0, 0, 255)
+    SetTextEdge(1, 0, 0, 0, 255)
+    SetTextEntry('STRING')
+    AddTextComponentString(text)
+    DrawText(0.825, 0.90)
+end
+
+function ProgressBar(name, label, duration, useWhileDead, canCancel, disableControls, animation, prop, propTwo, onFinish, onCancel)
+    if GetResourceState('qs-interface') == 'started' then
+        local success = exports['qs-interface']:ProgressBar({
+            duration = duration,
+            label = label,
+            position = 'bottom',
+            useWhileDead = useWhileDead,
+            canCancel = canCancel,
+            disable = disableControls,
+            anim = {
+                dict = animation.animDict,
+                clip = animation.anim,
+                flag = animation?.flags
+            },
+            prop = prop
+        })
+        if success then
+            onFinish()
+        else
+            onCancel()
+        end
+        return
+    end
+    if lib.progressCircle({
+            duration = duration,
+            label = label,
+            position = 'bottom',
+            useWhileDead = useWhileDead,
+            canCancel = canCancel,
+            disable = disableControls,
+            anim = {
+                dict = animation.animDict,
+                clip = animation.anim,
+                flag = animation?.flags
+            },
+            prop = prop
+        }) then
+        onFinish()
+    else
+        onCancel()
+    end
+end
+
+function GetCompanyData(cb)
+    local playerJob = GetPlayerData().job
+    local jobData = {
+        job = playerJob.name,
+        jobLabel = playerJob.label,
+        isBoss = playerJob.isboss,
+    }
+
+    if jobData.isBoss then
+        local moneyPromise = promise.new()
+        TriggerServerCallback('phone:market:getAccountBalance', function(money)
+            moneyPromise:resolve(money)
+        end, jobData.job)
+        jobData.balance = Citizen.Await(moneyPromise)
+
+        local employeesPromise = promise.new()
+        TriggerServerCallback('qb-bossmenu:server:GetEmployees', function(employees)
+            for i = 1, #employees do
+                local employee = employees[i]
+                employees[i] = {
+                    name = employee.name,
+                    id = employee.empSource,
+
+                    gradeLabel = employee.grade.name,
+                    grade = employee.grade.level,
+
+                    canInteract = not employee.isboss
+                }
+            end
+            employeesPromise:resolve(employees)
+        end, jobData.job)
+        jobData.employees = Citizen.Await(employeesPromise)
+
+        jobData.grades = {}
+        for k, v in pairs(ESX.Shared.Jobs[jobData.job].grades) do
+            jobData.grades[#jobData.grades + 1] = {
+                key = tonumber(k),
+                value = v.name,
+            }
+        end
+
+        table.sort(jobData.grades, function(a, b)
+            return a.key < b.key
+        end)
+    end
+
+    cb(jobData)
+end
+
+RegisterNUICallback('getMarketData', function(data, cb)
+    return GetCompanyData(function(companyData)
+        cb(companyData)
+    end)
+end)
+
+function DepositMoney(amount, cb)
+    TriggerServerCallbackSync('qb-banking:server:deposit', {
+        amount = amount,
+        accountName = GetJobName()
+    })
+    TriggerServerCallback('phone:market:getAccountBalance', cb, GetPlayerData().job.name)
+end
+
+function WithdrawMoney(amount, cb)
+    TriggerServerCallbackSync('qb-banking:server:withdraw', {
+        amount = amount,
+        accountName = GetJobName()
+    })
+    TriggerServerCallback('phone:market:getAccountBalance', cb, GetJobName())
+end
+
+function HireEmployee(source, cb)
+    TriggerServerEvent('qb-bossmenu:server:HireEmployee', source)
+    TriggerServerCallback('phone:market:getPlayerData', function(playerData)
+        cb({
+            name = playerData.name,
+            id = playerData.id
+        })
+    end, source)
+end
+
+function FireEmployee(source, cb)
+    TriggerServerEvent('qb-bossmenu:server:FireEmployee', source)
+    cb(GetPlayerData().job.isboss)
+end
+
+function SetGrade(identifier, newGrade, cb)
+    local maxGrade = 0
+    for grade, _ in pairs(ESX.Shared.Jobs[GetPlayerData().job.name].grades) do
+        grade = tonumber(grade)
+        if grade and grade > maxGrade then
+            maxGrade = grade
+        end
+    end
+
+    if newGrade > maxGrade then
+        return cb(false)
+    end
+
+    TriggerServerEvent('qb-bossmenu:server:GradeUpdate', {
+        cid = identifier,
+        grade = newGrade,
+        gradename = ESX.Shared.Jobs[GetPlayerData().job.name].grades[tostring(newGrade)].name
+    })
+    cb(true)
+end
+
+function ToggleHud(bool)
+    if bool then
+        Debug('Event to show the hud [client/custom/framework/esx.lua line 335]')
+        DisplayRadar(false) -- You can enable or disable mini-map here
+        if GetResourceState('qs-interface') == 'started' then
+            exports['qs-interface']:ToggleHud(false)
+        end
+    else
+        Debug('Event to hide the hud [client/custom/framework/esx.lua line 335]')
+        DisplayRadar(true) -- You can enable or disable mini-map here
+        if GetResourceState('qs-interface') == 'started' then
+            exports['qs-interface']:ToggleHud(true)
+        end
+    end
+end

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/client/custom/framework/qbx.lua

@@ -0,0 +1,331 @@
+--[[
+    Hi dear customer or developer, here you can fully configure your server's
+    framework or you could even duplicate this file to create your own framework.
+
+    If you do not have much experience, we recommend you download the base version
+    of the framework that you use in its latest version and it will work perfectly.
+]]
+
+if Config.Framework ~= 'qbx' then
+    return
+end
+
+ESX = nil
+
+Citizen.CreateThread(function()
+    ESX = exports['qb-core']:GetCoreObject()
+end)
+
+function TriggerServerCallback(name, cb, ...)
+    ESX.Functions.TriggerCallback(name, cb, ...)
+end
+
+exports('TriggerServerCallback', TriggerServerCallback)
+
+RegisterNetEvent('QBCore:Client:OnPlayerLoaded', function()
+    TriggerServerEvent('qb-crypto:server:FetchWorth')
+    TriggerServerEvent('qb-crypto:server:GetRebootState')
+end)
+
+RegisterNetEvent('QBCore:Client:OnJobUpdate', function(JobInfo)
+    SendNUIMessage({
+        action = 'UpdateApplications',
+        jobName = JobInfo.name,
+        applications = PhoneApplications
+    })
+end)
+
+RegisterNetEvent('QBCore:Client:OnPlayerUnload', function()
+    Logout()
+end)
+
+function GetPlayerData()
+    return exports.qbx_core:GetPlayerData()
+end
+
+local brutalDead = GetResourceState('brutal_ambulancejob') == 'started'
+function isDead()
+    if brutalDead then
+        return exports.brutal_ambulancejob:IsDead()
+    end
+    return GetPlayerData().metadata['ishandcuffed'] or GetPlayerData().metadata['inlaststand'] or GetPlayerData().metadata['isdead'] or IsPauseMenuActive() or LocalPlayer.state.dead
+end
+
+function GetIdentifier()
+    return GetPlayerData().citizenid
+end
+
+function GetHungry()
+    return GetPlayerData().metadata.hunger
+end
+
+function GetThirsty()
+    return GetPlayerData().metadata.thirst
+end
+
+function GetInventory()
+    return GetPlayerData().items
+end
+
+function GetJobName()
+    return GetPlayerData().job.name
+end
+
+function GetMoney()
+    return GetPlayerData().money.bank or 0
+end
+
+function FrameworkGetClosestVehicle()
+    return lib.getClosestVehicle(GetEntityCoords(cache.ped), 2.0, true)
+end
+
+function FrameworkSpawnVehicle(model, coords, heading, cb)
+    ESX.Functions.SpawnVehicle(model, cb, coords, true)
+end
+
+function FrameworkSetVehicleProperties(vehicle, props)
+    lib.setVehicleProperties(vehicle, props)
+end
+
+function FrameworkGetVehicles(cb)
+    return GetGamePool('CVehicle', cb)
+end
+
+function GetPlayerMoney()
+    return GetPlayerData().money['cash']
+end
+
+function SendTextMessage(msg, type)
+    if GetResourceState('qs-interface') == 'started' then
+        if type == 'inform' then
+            exports['qs-interface']:AddNotify(msg, 'Inform', 2500, 'fas fa-file')
+        elseif type == 'error' then
+            exports['qs-interface']:AddNotify(msg, 'Error', 2500, 'fas fa-bug')
+        elseif type == 'success' then
+            exports['qs-interface']:AddNotify(msg, 'Success', 2500, 'fas fa-thumbs-up')
+        end
+        return
+    end
+
+    exports.qbx_core:Notify(message, type, 5000)
+end
+
+local texts = {}
+if GetResourceState('qs-textui') == 'started' then
+    function DrawText3D(x, y, z, text, id, key)
+        local _id = id
+        if not texts[_id] then
+            CreateThread(function()
+                texts[_id] = 5
+                while texts[_id] > 0 do
+                    texts[_id] = texts[_id] - 1
+                    Wait(0)
+                end
+                texts[_id] = nil
+                exports['qs-textui']:DeleteDrawText3D(id)
+                Debug('Deleted text', id)
+            end)
+            TriggerEvent('textui:DrawText3D', x, y, z, text, id, key)
+        end
+        texts[_id] = 5
+    end
+else
+    function DrawText3D(x, y, z, text)
+        SetTextScale(0.35, 0.35)
+        SetTextFont(4)
+        SetTextProportional(1)
+        SetTextColour(255, 255, 255, 215)
+        SetTextEntry('STRING')
+        SetTextCentre(true)
+        AddTextComponentString(text)
+        SetDrawOrigin(x, y, z, 0)
+        DrawText(0.0, 0.0)
+        local factor = text:len() / 370
+        DrawRect(0.0, 0.0 + 0.0125, 0.017 + factor, 0.03, 0, 0, 0, 75)
+        ClearDrawOrigin()
+    end
+end
+
+function DrawText3Ds(x, y, z, text)
+    SetTextScale(0.35, 0.35)
+    SetTextFont(4)
+    SetTextProportional(1)
+    SetTextColour(255, 255, 255, 215)
+    SetTextEntry('STRING')
+    SetTextCentre(true)
+    AddTextComponentString(text)
+    SetDrawOrigin(x, y, z, 0)
+    DrawText(0.0, 0.0)
+    local factor = text:len() / 370
+    DrawRect(0.0, 0.0 + 0.0125, 0.017 + factor, 0.03, 0, 0, 0, 75)
+    ClearDrawOrigin()
+end
+
+function DrawGenericText(text)
+    SetTextFont(4)
+    SetTextProportional(0)
+    SetTextScale(0.65, 0.65)
+    SetTextDropShadow(0, 0, 0, 0, 255)
+    SetTextEdge(1, 0, 0, 0, 255)
+    SetTextEntry('STRING')
+    AddTextComponentString(text)
+    DrawText(0.825, 0.90)
+end
+
+function ProgressBar(name, label, duration, useWhileDead, canCancel, disableControls, animation, prop, propTwo, onFinish, onCancel)
+    if GetResourceState('qs-interface') == 'started' then
+        local success = exports['qs-interface']:ProgressBar({
+            duration = duration,
+            label = label,
+            position = 'bottom',
+            useWhileDead = useWhileDead,
+            canCancel = canCancel,
+            disable = disableControls,
+            anim = {
+                dict = animation.animDict,
+                clip = animation.anim,
+                flag = animation?.flags
+            },
+            prop = prop
+        })
+        if success then
+            onFinish()
+        else
+            onCancel()
+        end
+        return
+    end
+    if lib.progressCircle({
+            duration = duration,
+            label = label,
+            position = 'bottom',
+            useWhileDead = useWhileDead,
+            canCancel = canCancel,
+            disable = disableControls,
+            anim = {
+                dict = animation.animDict,
+                clip = animation.anim,
+                flag = animation?.flags
+            },
+            prop = prop
+        }) then
+        onFinish()
+    else
+        onCancel()
+    end
+end
+
+function GetCompanyData(cb)
+    local playerJob = GetPlayerData().job
+    local jobData = {
+        job = playerJob.name,
+        jobLabel = playerJob.label,
+        isBoss = playerJob.isboss,
+    }
+
+    if jobData.isBoss then
+        local moneyPromise = promise.new()
+        TriggerServerCallback('qb-bossmenu:server:GetAccount', function(money)
+            moneyPromise:resolve(money)
+        end, jobData.job)
+        jobData.balance = Citizen.Await(moneyPromise)
+
+        local employeesPromise = promise.new()
+        TriggerServerCallback('qb-bossmenu:server:GetEmployees', function(employees)
+            for i = 1, #employees do
+                local employee = employees[i]
+                employees[i] = {
+                    name = employee.name,
+                    id = employee.empSource,
+
+                    gradeLabel = employee.grade.name,
+                    grade = employee.grade.level,
+
+                    canInteract = not employee.isboss
+                }
+            end
+            employeesPromise:resolve(employees)
+        end, jobData.job)
+        jobData.employees = Citizen.Await(employeesPromise)
+
+        jobData.grades = {}
+        for k, v in pairs(exports.qbx_core:GetJobs()[jobData.job].grades) do
+            jobData.grades[#jobData.grades + 1] = {
+                key = tonumber(k),
+                value = v.name,
+            }
+        end
+
+        table.sort(jobData.grades, function(a, b)
+            return a.grade < b.grade
+        end)
+    end
+
+    cb(jobData)
+end
+
+function DepositMoney(amount, cb)
+    TriggerServerEvent('qb-bossmenu:server:depositMoney', amount)
+    SetTimeout(1500, function()
+        TriggerServerCallback('qb-bossmenu:server:GetAccount', cb, GetPlayerData().job.name)
+    end)
+end
+
+function WithdrawMoney(amount, cb)
+    TriggerServerEvent('qb-bossmenu:server:withdrawMoney', amount)
+    SetTimeout(1500, function()
+        TriggerServerCallback('qb-bossmenu:server:GetAccount', cb, GetPlayerData().job.name)
+    end)
+end
+
+function HireEmployee(source, cb)
+    TriggerServerEvent('qb-bossmenu:server:HireEmployee', source)
+    TriggerServerCallback('phone:market:getPlayerData', function(playerData)
+        cb({
+            name = playerData.name,
+            id = playerData.id
+        })
+    end, source)
+end
+
+function FireEmployee(source, cb)
+    TriggerServerEvent('qb-bossmenu:server:FireEmployee', source)
+    cb(GetPlayerData().job.isboss)
+end
+
+function SetGrade(identifier, newGrade, cb)
+    local maxGrade = 0
+    for grade, _ in pairs(exports.qbx_core:GetJobs()[GetPlayerData().job.name].grades) do
+        grade = tonumber(grade)
+        if grade and grade > maxGrade then
+            maxGrade = grade
+        end
+    end
+
+    if newGrade > maxGrade then
+        return cb(false)
+    end
+
+    TriggerServerEvent('qb-bossmenu:server:GradeUpdate', {
+        cid = identifier,
+        grade = newGrade,
+        gradename = exports.qbx_core:GetJobs()[GetPlayerData().job.name].grades[tostring(newGrade)].name
+    })
+    cb(true)
+end
+
+function ToggleHud(bool)
+    if bool then
+        Debug('Event to show the hud [client/custom/framework/esx.lua line 317]')
+        DisplayRadar(false) -- You can enable or disable mini-map here
+        if GetResourceState('qs-interface') == 'started' then
+            exports['qs-interface']:ToggleHud(false)
+        end
+    else
+        Debug('Event to hide the hud [client/custom/framework/esx.lua line 317]')
+        DisplayRadar(true) -- You can enable or disable mini-map here
+        if GetResourceState('qs-interface') == 'started' then
+            exports['qs-interface']:ToggleHud(true)
+        end
+    end
+end

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/client/custom/framework/standalone.lua

@@ -0,0 +1,334 @@
+--[[
+    Hi dear customer or developer, here you can fully configure your server's
+    framework or you could even duplicate this file to create your own framework.
+
+    If you do not have much experience, we recommend you download the base version
+    of the framework that you use in its latest version and it will work perfectly.
+]]
+
+if Config.Framework ~= 'standalone' then
+    return
+end
+local RequestId = 0
+local serverRequests = {}
+
+local clientCallbacks = {}
+
+---@param eventName string
+---@param callback function
+---@param ... any
+TriggerServerCallback = function(eventName, callback, ...)
+    serverRequests[RequestId] = callback
+
+    TriggerServerEvent('qs-smartphone-pro:triggerServerCallback', eventName, RequestId, GetInvokingResource() or 'unknown', ...)
+
+    RequestId = RequestId + 1
+end
+
+exports('TriggerServerCallback', TriggerServerCallback)
+
+RegisterNetEvent('qs-smartphone-pro:serverCallback', function(requestId, invoker, ...)
+    if not serverRequests[requestId] then
+        return print(('[^1ERROR^7] Server Callback with requestId ^5%s^7 Was Called by ^5%s^7 but does not exist.'):format(requestId, invoker))
+    end
+
+    serverRequests[requestId](...)
+    serverRequests[requestId] = nil
+end)
+
+---@param eventName string
+---@param callback function
+_RegisterClientCallback = function(eventName, callback)
+    clientCallbacks[eventName] = callback
+end
+
+RegisterNetEvent('qs-smartphone-pro:triggerClientCallback', function(eventName, requestId, invoker, ...)
+    if not clientCallbacks[eventName] then
+        return print(('[^1ERROR^7] Client Callback not registered, name: ^5%s^7, invoker resource: ^5%s^7'):format(eventName, invoker))
+    end
+
+    clientCallbacks[eventName](function(...)
+        TriggerServerEvent('qs-smartphone-pro:clientCallback', requestId, invoker, ...)
+    end, ...)
+end)
+
+function isDead()
+    return IsPedDeadOrDying(PlayerPedId(), false) or IsEntityDead(PlayerPedId()) or IsPauseMenuActive() or LocalPlayer.state.dead
+end
+
+function GetHungry()
+    Debug('GetHungry is used with standalone')
+    return 100
+end
+
+function GetThirsty()
+    Debug('GetThirsty is used with standalone')
+    return 100
+end
+
+function GetPlayerData()
+    return {}
+end
+
+function GetJobName()
+    Debug('GetJobName is used with standalone')
+    return 'unemployed'
+end
+
+function GetMoney()
+    Debug('GetMoney is used with standalone')
+    return 0
+end
+
+function GetVehicles() -- Leave the function for compatibility
+    return GetGamePool('CVehicle')
+end
+
+function GetClosestEntity(entities, isPlayerEntities, coords, modelFilter)
+    local closestEntity, closestEntityDistance, filteredEntities = -1, -1, nil
+
+    if coords then
+        coords = vector3(coords.x, coords.y, coords.z)
+    else
+        local playerPed = PlayerPedId()
+        coords = GetEntityCoords(playerPed)
+    end
+
+    if modelFilter then
+        filteredEntities = {}
+
+        for k, entity in pairs(entities) do
+            if modelFilter[GetEntityModel(entity)] then
+                filteredEntities[#filteredEntities + 1] = entity
+            end
+        end
+    end
+
+    for k, entity in pairs(filteredEntities or entities) do
+        local distance = #(coords - GetEntityCoords(entity))
+
+        if closestEntityDistance == -1 or distance < closestEntityDistance then
+            closestEntity, closestEntityDistance = isPlayerEntities and k or entity, distance
+        end
+    end
+
+    return closestEntity, closestEntityDistance
+end
+
+function FrameworkGetClosestVehicle()
+    return GetClosestEntity(GetVehicles(), false, coords, modelFilter)
+end
+
+function _RequestModel(modelHash, cb)
+    modelHash = (type(modelHash) == 'number' and modelHash or joaat(modelHash))
+
+    if not HasModelLoaded(modelHash) and IsModelInCdimage(modelHash) then
+        RequestModel(modelHash)
+
+        while not HasModelLoaded(modelHash) do
+            Wait(0)
+        end
+    end
+
+    if cb ~= nil then
+        cb()
+    end
+end
+
+function FrameworkSpawnVehicle(vehicle, coords, heading, cb)
+    local model = type(vehicle) == 'number' and vehicle or joaat(vehicle)
+    local vector = type(coords) == 'vector3' and coords or vec(coords.x, coords.y, coords.z)
+    networked = networked == nil and true or networked
+
+    local playerCoords = GetEntityCoords(PlayerPedId())
+    if not vector or not playerCoords then
+        return
+    end
+    local dist = #(playerCoords - vector)
+    if dist > 424 then -- Onesync infinity Range (https://docs.fivem.net/docs/scripting-reference/onesync/)
+        local executingResource = GetInvokingResource() or 'Unknown'
+        return print(('[^1ERROR^7] Resource ^5%s^7 Tried to spawn vehicle on the client but the position is too far away (Out of onesync range).'):format(executing_resource))
+    end
+
+    CreateThread(function()
+        _RequestModel(model)
+
+        local vehicle = CreateVehicle(model, vector.xyz, heading, networked, true)
+
+        if networked and NetworkGetEntityIsNetworked(vehicle) then
+            local id = NetworkGetNetworkIdFromEntity(vehicle)
+            SetNetworkIdCanMigrate(id, true)
+            SetEntityAsMissionEntity(vehicle, true, true)
+        end
+        SetVehicleHasBeenOwnedByPlayer(vehicle, true)
+        SetVehicleNeedsToBeHotwired(vehicle, false)
+        SetModelAsNoLongerNeeded(model)
+        SetVehRadioStation(vehicle, 'OFF')
+
+        RequestCollisionAtCoord(vector.xyz)
+        while not HasCollisionLoadedAroundEntity(vehicle) do
+            Wait(0)
+        end
+
+        if cb then
+            cb(vehicle)
+        end
+    end)
+end
+
+function FrameworkSetVehicleProperties(vehicle, props)
+    Debug('FrameworkSetVehicleProperties is used with standalone')
+    return true
+end
+
+function FrameworkGetVehicles(cb)
+    return GetVehicles()
+end
+
+function GetIdentifier()
+    return TriggerServerCallbackSync('qs-smartphone-pro:GetIdentifier')
+end
+
+function GetPlayerMoney()
+    Debug('GetPlayerMoney is used with standalone')
+    return 100
+end
+
+function SendTextMessage(msg, type)
+    if GetResourceState('qs-interface') == 'started' then
+        if type == 'inform' then
+            exports['qs-interface']:AddNotify(msg, 'Inform', 2500, 'fas fa-file')
+        elseif type == 'error' then
+            exports['qs-interface']:AddNotify(msg, 'Error', 2500, 'fas fa-bug')
+        elseif type == 'success' then
+            exports['qs-interface']:AddNotify(msg, 'Success', 2500, 'fas fa-thumbs-up')
+        end
+        return
+    end
+
+    if type == 'inform' then
+        lib.notify({
+            title = 'Smartphone',
+            description = msg,
+            type = 'inform'
+        })
+    elseif type == 'error' then
+        lib.notify({
+            title = 'Smartphone',
+            description = msg,
+            type = 'error'
+        })
+    elseif type == 'success' then
+        lib.notify({
+            title = 'Smartphone',
+            description = msg,
+            type = 'success'
+        })
+    end
+end
+
+local texts = {}
+if GetResourceState('qs-textui') == 'started' then
+    function DrawText3D(x, y, z, text, id, key)
+        local _id = id
+        if not texts[_id] then
+            CreateThread(function()
+                texts[_id] = 5
+                while texts[_id] > 0 do
+                    texts[_id] = texts[_id] - 1
+                    Wait(0)
+                end
+                texts[_id] = nil
+                exports['qs-textui']:DeleteDrawText3D(id)
+                Debug('Deleted text', id)
+            end)
+            TriggerEvent('textui:DrawText3D', x, y, z, text, id, key)
+        end
+        texts[_id] = 5
+    end
+else
+    function DrawText3D(x, y, z, text)
+        SetTextScale(0.35, 0.35)
+        SetTextFont(4)
+        SetTextProportional(1)
+        SetTextColour(255, 255, 255, 215)
+        SetTextEntry('STRING')
+        SetTextCentre(true)
+        AddTextComponentString(text)
+        SetDrawOrigin(x, y, z, 0)
+        DrawText(0.0, 0.0)
+        local factor = text:len() / 370
+        DrawRect(0.0, 0.0 + 0.0125, 0.017 + factor, 0.03, 0, 0, 0, 75)
+        ClearDrawOrigin()
+    end
+end
+
+function DrawGenericText(text)
+    SetTextFont(4)
+    SetTextProportional(0)
+    SetTextScale(0.65, 0.65)
+    SetTextDropShadow(0, 0, 0, 0, 255)
+    SetTextEdge(1, 0, 0, 0, 255)
+    SetTextEntry('STRING')
+    AddTextComponentString(text)
+    DrawText(0.825, 0.90)
+end
+
+function ProgressBar(name, label, duration, useWhileDead, canCancel, disableControls, animation, prop, propTwo, onFinish, onCancel)
+    if GetResourceState('qs-interface') == 'started' then
+        local success = exports['qs-interface']:ProgressBar({
+            duration = duration,
+            label = label,
+            position = 'bottom',
+            useWhileDead = useWhileDead,
+            canCancel = canCancel,
+            disable = disableControls,
+            anim = {
+                dict = animation.animDict,
+                clip = animation.anim,
+                flag = animation?.flags
+            },
+            prop = prop
+        })
+        if success then
+            onFinish()
+        else
+            onCancel()
+        end
+        return
+    end
+    if lib.progressCircle({
+            duration = duration,
+            label = label,
+            position = 'bottom',
+            useWhileDead = useWhileDead,
+            canCancel = canCancel,
+            disable = disableControls,
+            anim = {
+                dict = animation.animDict,
+                clip = animation.anim,
+                flag = animation?.flags
+            },
+            prop = prop
+        }) then
+        onFinish()
+    else
+        onCancel()
+    end
+end
+
+function ToggleHud(bool)
+    if bool then
+        Debug('Event to show the hud [client/custom/framework/esx.lua line 320]')
+        DisplayRadar(false) -- You can enable or disable mini-map here
+        if GetResourceState('qs-interface') == 'started' then
+            exports['qs-interface']:ToggleHud(false)
+        end
+    else
+        Debug('Event to hide the hud [client/custom/framework/esx.lua line 320]')
+        DisplayRadar(true) -- You can enable or disable mini-map here
+        if GetResourceState('qs-interface') == 'started' then
+            exports['qs-interface']:ToggleHud(true)
+        end
+    end
+end

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/client/custom/menu/nh-context.lua

@@ -0,0 +1,235 @@
+if Config.Menu ~= 'nh-context' then
+    return
+end
+
+function openRecipeMenu()
+    TriggerServerCallback('phone:CheckExistRecipe', function(exist)
+        local method = exist?.method or ''
+        local moment_header = ([[
+            Moment %s
+        ]]):format(method == 'moment' and '<span style="color:green; margin-left: 4px"> - ' .. Lang('PHONE_MENU_RECIPES_OPTION_CURRENTLY') .. exist?.amount .. '</span>' or '')
+        local daily_header = ([[
+            Daily %s
+        ]]):format(method == 'daily' and ' - ' .. Lang('PHONE_MENU_RECIPES_OPTION_CURRENTLY') or '')
+        local data = {
+            {
+                header = Lang('PHONE_MENU_RECIPES_TITLE'),
+            },
+            {
+                header = daily_header,
+                context = Lang('PHONE_MENU_RECIPES_UPDATED'),
+                event = 'phone:recipeSelectMethod',
+                args = { 'daily' }
+            },
+            {
+                header = moment_header,
+                context = Lang('PHONE_MENU_RECIPES_CONTOUR'),
+                event = 'phone:recipeSelectMethod',
+                args = { 'moment' }
+            },
+        }
+        if exist then
+            table.insert(data, {
+                header = "<span style='color: gray'>" .. Lang('PHONE_MENU_RECIPES_OPTION_CANCEL') .. '</span>',
+                context = Lang('PHONE_MENU_RECIPES_CANCEL'),
+                event = 'phone:CancelRecipe',
+                server = true,
+                args = {}
+            })
+        end
+        TriggerEvent('nh-context:createMenu', data)
+    end)
+end
+
+function openPhoneBoothMenu(isNearPB)
+    local data = {
+        {
+            header = Lang('PHONE_MENU_BOOTH_CALL_TITLE'),
+        },
+        {
+            header = Lang('PHONE_MENU_BOOTH_CALL_POLICE'),
+            context = 'police',
+            event = 'phone:boothCall',
+            args = { 'police' }
+        },
+        {
+            header = Lang('PHONE_MENU_BOOTH_CALL_AMBULANCE'),
+            context = 'ambulance',
+            event = 'phone:boothCall',
+            args = { 'ambulance' }
+        },
+        {
+            header = Lang('PHONE_MENU_BOOTH_CALL_MECHANIC'),
+            context = 'mechanic',
+            event = 'phone:boothCall',
+            args = { 'mechanic' }
+        },
+        {
+            header = Lang('PHONE_MENU_BOOTH_CALL_NUMBER'),
+            context = 'othercall',
+            event = 'phone:boothCall',
+            args = { 'othercall' }
+        }
+    }
+
+    TriggerEvent('nh-context:createMenu', data)
+end
+
+function openRentalMenu(key)
+    local data = {
+        {
+            header = Lang('PHONE_MENU_RENTEL_TITLE')
+        }
+    }
+    local coords = { x = Config.RentelLocations[key]['coords'].x, y = Config.RentelLocations[key]['coords'].y, z = Config.RentelLocations[key]['coords'].z, h = Config.RentelLocations[key]['coords'].w }
+    for model, v in pairs(Config.RentelVehicles) do
+        if v.stored then
+            table.insert(data, {
+                header = v.label .. ' - ' .. Lang('PHONE_MENU_RENTEL_STORED'),
+                context = 'Rentel',
+                event = 'phone:server:spawnVehicle',
+                server = true,
+                args = { {
+                    model = model, price = 0, coords = coords
+                } }
+            })
+        else
+            table.insert(data, {
+                header = v.label .. ' - ' .. Lang('PHONE_MENU_RENTEL_MONEY') .. v.price,
+                context = 'Rentel',
+                event = 'phone:server:spawnVehicle',
+                server = true,
+                args = { {
+                    model = model, price = v.price, coords = coords
+                } }
+            })
+        end
+    end
+    TriggerEvent('nh-context:createMenu', data)
+end
+
+function resetPasswordMenu()
+    local data = {
+        {
+            header = Lang('PHONE_MENU_PHONE_TITLE')
+        },
+        {
+            header = Lang('PHONE_MENU_PHONE_RESET_PASSWORD') .. Config.ResetPassword.money,
+            context = 'Reset Password',
+            event = 'phone:ResetPassword'
+        }
+    }
+    TriggerEvent('nh-context:createMenu', data)
+end
+
+RegisterNetEvent('phone:openPhoneMenu', function(event, ...)
+    local items = GetInventory()
+    local data = {
+        {
+            header = Lang('PHONE_MENU_BATTERY_TITLE')
+        }
+    }
+    if not Config.UniquePhone then
+        local userData = TriggerServerCallbackSync('phone:getUserData')
+        if not userData then
+            Debug('phone', 'userData is nil')
+            return
+        end
+        table.insert(data, {
+            header = Lang('PHONE_MENU_BATTERY_PHONE_NUMBER') .. ' ' .. userData.phoneNumber,
+            context = 'Phone',
+            event = 'phone:selectPhone',
+            args = { { name = 'phone', info = { phoneNumber = userData.phoneNumber } }, event, ... }
+        })
+    end
+    if Config.UniquePhone then
+        for phoneName in pairs(Config.Phones) do
+            for k, v in pairs(items) do
+                local meta = v.info or v.metadata
+                if v.name == phoneName and meta?.phoneNumber then
+                    table.insert(data, {
+                        header = Lang('PHONE_MENU_BATTERY_PHONE_NUMBER') .. ' ' .. meta.phoneNumber,
+                        context = 'Phone',
+                        event = 'phone:selectPhone',
+                        args = { v, event, ... }
+                    })
+                end
+            end
+        end
+    end
+
+    if #data < 2 then return SendTextMessage(Lang('PHONE_NOTIFICATION_PHONE_NO_PHONE'), 'error') end
+    TriggerEvent('nh-context:createMenu', data)
+end)
+
+RegisterNetEvent('phone:client:openChannelMenu', function()
+    if not MetaData then return SendTextMessage(Lang('PHONE_NOTIFICATION_RECIPES_USE_PHONE_FIRST'), 'inform') end
+    local input = lib.inputDialog(Lang('PHONE_MENU_DISCORD_CHANNEL_TITLE'), {
+        Lang('PHONE_MENU_DISCORD_SELECT_NAME'),
+        Lang('PHONE_MENU_DISCORD_SELECT_PASSWORD')
+    })
+    if not input then return end
+    local channelName = input[1]
+    local passcode = input[2]
+
+    Debug('phone', 'channelName', channelName, 'passcode', passcode)
+
+    local roomData = {
+        room_owner_name = MetaData.charinfo.firstname .. ' ' .. MetaData.charinfo.lastname
+    }
+
+    local allGood = false
+
+    if channelName then
+        roomData.room_name = channelName
+        allGood = true
+    end
+
+    if passcode then
+        roomData.room_pin = passcode
+    end
+
+    if allGood then
+        TriggerServerCallback('phone:server:PurchaseRoom', function(status)
+            if status then
+                local source = GetPlayerServerId(PlayerId())
+                TriggerServerEvent('phone:server:CreateRoom', source, roomData)
+            end
+        end, 250)
+    end
+end)
+
+RegisterNetEvent('phone:client:openChannelHackedMenu', function()
+    if not MetaData then return SendTextMessage(Lang('PHONE_NOTIFICATION_RECIPES_USE_PHONE_FIRST'), 'inform') end
+
+    local keyboard, channelName, passcode = exports['nh-keyboard']:Keyboard({
+        header = Lang('PHONE_MENU_DISCORD_SECURE_TITLE'),
+        rows = { Lang('PHONE_MENU_DISCORD_SELECT_NAME'), Lang('PHONE_MENU_DISCORD_SELECT_PASSWORD') }
+    })
+
+    if keyboard then
+        local roomData = {
+            room_owner_name = MetaData.charinfo.firstname .. ' ' .. MetaData.charinfo.lastname
+        }
+
+        local allGood = false
+
+        if channelName then
+            roomData.room_name = channelName
+            allGood = true
+        end
+
+        if passcode then
+            roomData.room_pin = passcode
+        end
+
+        if allGood then
+            TriggerServerCallback('phone:server:PurchaseRoom', function(status)
+                if status then
+                    local source = GetPlayerServerId(PlayerId())
+                    TriggerServerEvent('phone:server:CreateRoom', source, roomData, true)
+                end
+            end, 5000)
+        end
+    end
+end)

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/client/custom/menu/ox_lib.lua

@@ -0,0 +1,239 @@
+if Config.Menu ~= 'ox_lib' then
+    return
+end
+
+function openRecipeMenu()
+    TriggerServerCallback('phone:CheckExistRecipe', function(recipe)
+        print(json.encode(recipe))
+        local method = recipe and recipe.method or ''
+        local isMoment = method == 'moment'
+        local isDaily = method == 'daily'
+
+        local momentHeader = isMoment and (' - ' .. Lang('PHONE_MENU_RECIPES_OPTION_CURRENTLY') .. " " .. recipe.amount) or ''
+        local dailyHeader = isDaily and (' - ' .. Lang('PHONE_MENU_RECIPES_OPTION_CURRENTLY') .. " " .. recipe.amount) or ''
+
+        local options = {
+            {
+                title = ("%s $%s"):format(Lang('PHONE_MENU_RECIPES_UPDATED'), Config.BuyRecipe.prices["daily"]),
+                description = dailyHeader,
+                onSelect = function()
+                    TriggerEvent('phone:recipeSelectMethod', 'daily')
+                end
+            },
+            {
+                title = ("%s $%s"):format(Lang('PHONE_MENU_RECIPES_CONTOUR'), Config.BuyRecipe.prices["moment"]),
+                description = momentHeader,
+                onSelect = function()
+                    TriggerEvent('phone:recipeSelectMethod', 'moment')
+                end
+            }
+        }
+
+        if recipe then
+            table.insert(options, {
+                title = Lang('PHONE_MENU_RECIPES_CANCEL'),
+                onSelect = function()
+                    TriggerServerEvent('phone:CancelRecipe')
+                end
+            })
+        end
+
+        lib.registerContext({
+            id = 'recipe_spot',
+            title = Lang('PHONE_MENU_RECIPES_TITLE'),
+            options = options
+        })
+
+        lib.showContext('recipe_spot')
+    end)
+end
+
+function openPhoneBoothMenu(isNearPB)
+    local data = {
+        {
+            title = Lang('PHONE_MENU_BOOTH_CALL_POLICE'),
+            onSelect = function(args)
+                TriggerEvent('phone:boothCall', 'police')
+            end
+        },
+        {
+            title = Lang('PHONE_MENU_BOOTH_CALL_AMBULANCE'),
+            onSelect = function(args)
+                TriggerEvent('phone:boothCall', 'police')
+            end
+        },
+        {
+            title = Lang('PHONE_MENU_BOOTH_CALL_MECHANIC'),
+            onSelect = function(args)
+                TriggerEvent('phone:boothCall', 'police')
+            end
+        },
+        {
+            title = Lang('PHONE_MENU_BOOTH_CALL_NUMBER'),
+            onSelect = function(args)
+                TriggerEvent('phone:boothCall', 'othercall')
+            end
+        },
+    }
+    lib.registerContext({
+        id = 'phone_booth',
+        title = Lang('PHONE_MENU_BOOTH_CALL_TITLE'),
+        options = data
+    })
+    lib.showContext('phone_booth')
+end
+
+function openRentalMenu(key)
+    local coords = { x = Config.RentelLocations[key]['coords'].x, y = Config.RentelLocations[key]['coords'].y, z = Config.RentelLocations[key]['coords'].z, h = Config.RentelLocations[key]['coords'].w }
+    local data = {}
+    for model, v in pairs(Config.RentelVehicles) do
+        if v.stored then
+            table.insert(data, {
+                title = v.label .. ' - ' .. Lang('PHONE_MENU_RENTEL_STORED'),
+                onSelect = function(args)
+                    TriggerServerEvent('phone:server:spawnVehicle', { model = model, price = 0, coords = coords })
+                end
+            })
+        else
+            table.insert(data, {
+                title = v.label .. ' - ' .. Lang('PHONE_MENU_RENTEL_MONEY') .. v.price,
+                onSelect = function(args)
+                    TriggerServerEvent('phone:server:spawnVehicle', { model = model, price = v.price, coords = coords })
+                end
+            })
+        end
+    end
+    lib.registerContext({
+        id = 'rentel_spot',
+        title = Lang('PHONE_MENU_RENTEL_TITLE'),
+        options = data
+    })
+    lib.showContext('rentel_spot')
+end
+
+function resetPasswordMenu()
+    local data = {
+        {
+            title = Lang('PHONE_MENU_PHONE_RESET_PASSWORD') .. Config.ResetPassword.money,
+            onSelect = function(args)
+                TriggerEvent('phone:ResetPassword')
+            end
+        }
+    }
+    lib.registerContext({
+        id = 'reset_password',
+        title = Lang('PHONE_MENU_PHONE_TITLE'),
+        options = data
+    })
+    lib.showContext('reset_password')
+end
+
+RegisterNetEvent('phone:openPhoneMenu', function(event, ...)
+    local items = GetInventory()
+    local data = {}
+    local varargs = { ... }
+    if not Config.UniquePhone then
+        local userData = TriggerServerCallbackSync('phone:getUserData')
+        if userData then
+            table.insert(data, {
+                title = Lang('PHONE_MENU_BATTERY_PHONE_NUMBER') .. ' ' .. userData.phoneNumber,
+                onSelect = function(args)
+                    TriggerServerEvent(event, {
+                        name = 'phone',
+                        info = { phoneNumber = userData.phoneNumber }
+                    }, table.unpack(varargs))
+                end,
+            })
+        end
+    else
+        for phoneName in pairs(Config.Phones) do
+            for k, v in pairs(items) do
+                local meta = v.info or v.metadata
+                if v.name == phoneName and meta?.phoneNumber then
+                    table.insert(data, {
+                        title = Lang('PHONE_MENU_BATTERY_PHONE_NUMBER') .. ' ' .. meta.phoneNumber,
+                        onSelect = function(args)
+                            TriggerServerEvent(event, v, table.unpack(varargs))
+                        end,
+                    })
+                end
+            end
+        end
+    end
+
+    if #data < 1 then return SendTextMessage(Lang('PHONE_NOTIFICATION_PHONE_NO_PHONE'), 'error') end
+    lib.registerContext({
+        id = 'charger_spot',
+        title = Lang('PHONE_MENU_BATTERY_TITLE'),
+        options = data
+    })
+    lib.showContext('charger_spot')
+end)
+
+RegisterNetEvent('phone:client:openChannelMenu', function()
+    if not MetaData then return SendTextMessage(Lang('PHONE_NOTIFICATION_RECIPES_USE_PHONE_FIRST'), 'inform') end
+    local input = lib.inputDialog(Lang('PHONE_MENU_DISCORD_CHANNEL_TITLE'), {
+        { type = 'input',  label = Lang('PHONE_MENU_DISCORD_SELECT_NAME'),     description = Lang('PHONE_MENU_DISCORD_SELECT_NAME_INFO'),     required = true },
+        { type = 'number', label = Lang('PHONE_MENU_DISCORD_SELECT_PASSWORD'), description = Lang('PHONE_MENU_DISCORD_SELECT_PASSWORD_INFO'), required = false },
+    })
+
+    if input and input[1] then
+        local roomData = {
+            room_owner_name = MetaData.charinfo.firstname .. ' ' .. MetaData.charinfo.lastname
+        }
+
+        local allGood = false
+
+        if input[1] then
+            roomData.room_name = input[1]
+            allGood = true
+        end
+
+        if input[2] then
+            roomData.room_pin = input[2]
+        end
+
+        if allGood then
+            TriggerServerCallback('phone:server:PurchaseRoom', function(status)
+                if status then
+                    local source = GetPlayerServerId(PlayerId())
+                    TriggerServerEvent('phone:server:CreateRoom', source, roomData)
+                end
+            end, 250)
+        end
+    end
+end)
+
+RegisterNetEvent('phone:client:openChannelHackedMenu', function()
+    if not MetaData then return SendTextMessage(Lang('PHONE_NOTIFICATION_RECIPES_USE_PHONE_FIRST'), 'inform') end
+    local input = lib.inputDialog(Lang('PHONE_MENU_DISCORD_SECURE_TITLE'), {
+        { type = 'input',  label = Lang('PHONE_MENU_DISCORD_SELECT_NAME'),     description = Lang('PHONE_MENU_DISCORD_SELECT_NAME_INFO'),     required = true },
+        { type = 'number', label = Lang('PHONE_MENU_DISCORD_SELECT_PASSWORD'), description = Lang('PHONE_MENU_DISCORD_SELECT_PASSWORD_INFO'), required = false },
+    })
+
+    if input and input[1] then
+        local roomData = {
+            room_owner_name = MetaData.charinfo.firstname .. ' ' .. MetaData.charinfo.lastname
+        }
+
+        local allGood = false
+
+        if input[1] then
+            roomData.room_name = input[1]
+            allGood = true
+        end
+
+        if input[2] then
+            roomData.room_pin = input[2]
+        end
+
+        if allGood then
+            TriggerServerCallback('phone:server:PurchaseRoom', function(status)
+                if status then
+                    local source = GetPlayerServerId(PlayerId())
+                    TriggerServerEvent('phone:server:CreateRoom', source, roomData, true)
+                end
+            end, 250)
+        end
+    end
+end)

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/client/custom/misc/DisableControlActions.lua

@@ -0,0 +1,76 @@
+function DisableControlActions()
+    -- Disables mouse actions
+    DisableControlAction(0, 18, true)  -- Disable mouse
+    DisableControlAction(0, 69, true)  -- Disable mouse
+    DisableControlAction(0, 92, true)  -- Disable mouse
+    DisableControlAction(0, 106, true) -- Disable mouse
+    DisableControlAction(0, 122, true) -- Disable mouse
+
+    -- Disables mouse look actions
+    if not KeepInput then
+        DisableControlAction(0, 12, true) -- Disable mouse look
+        DisableControlAction(0, 13, true) -- Disable mouse look
+        DisableControlAction(0, 1, true)  -- Disable mouse look
+        DisableControlAction(0, 2, true)  -- Disable mouse look
+        DisableControlAction(0, 3, true)  -- Disable mouse look
+        DisableControlAction(0, 4, true)  -- Disable mouse look
+        DisableControlAction(0, 5, true)  -- Disable mouse look
+        DisableControlAction(0, 6, true)  -- Disable mouse look
+    end
+
+    -- Disables melee combat actions
+    DisableControlAction(0, 263, true) -- Disable melee
+    DisableControlAction(0, 264, true) -- Disable melee
+    DisableControlAction(0, 257, true) -- Disable melee
+    DisableControlAction(0, 140, true) -- Disable melee
+    DisableControlAction(0, 141, true) -- Disable melee
+    DisableControlAction(0, 142, true) -- Disable melee
+    DisableControlAction(0, 143, true) -- Disable melee
+
+    -- Disables escape and chat actions
+    DisableControlAction(0, 177, true) -- Disable escape
+    DisableControlAction(0, 200, true) -- Disable escape
+    DisableControlAction(0, 202, true) -- Disable escape
+    DisableControlAction(0, 322, true) -- Disable escape
+    DisableControlAction(0, 245, true) -- Disable chat
+    DisableControlAction(0, 199, true) -- Disable chat
+
+    -- Disables aiming and shooting actions
+    DisableControlAction(0, 25, true) -- Disable aim
+    DisableControlAction(0, 24, true) -- Disable shoot
+
+    -- Disables other specific actions
+    DisableControlAction(0, 45, true)  -- Disable Reload (R)
+    DisableControlAction(0, 44, true)  -- Disable Cover (Q)
+    DisableControlAction(0, 0, true)   -- Disable Camera (V)
+    DisableControlAction(0, 26, true)  -- Disable Camera Back (C)
+    DisableControlAction(0, 20, true)  -- Disable Z
+    DisableControlAction(0, 236, true) -- Disable V
+
+    -- Disables numerical actions
+    DisableControlAction(0, 157, true) -- Disable 1
+    DisableControlAction(0, 158, true) -- Disable 2
+    DisableControlAction(0, 160, true) -- Disable 3
+    DisableControlAction(0, 164, true) -- Disable 4
+    DisableControlAction(0, 165, true) -- Disable 5
+    DisableControlAction(0, 159, true) -- Disable 6
+    DisableControlAction(0, 161, true) -- Disable 7
+    DisableControlAction(0, 162, true) -- Disable 8
+    DisableControlAction(0, 163, true) -- Disable 9
+
+    -- Other specific disablements
+    DisableControlAction(0, 73, true) -- Disable X
+    DisableControlAction(0, 47, true) -- Disable G
+    DisableControlAction(0, 58, true) -- Disable G
+    DisableControlAction(0, 74, true) -- Disable H
+
+    -- Disables control action for second player
+    DisableControlAction(1, 18, true)  -- Enter / Exit vehicle
+    DisableControlAction(1, 24, true)  -- Change weapon
+    DisableControlAction(1, 69, true)  -- Fire
+    DisableControlAction(1, 92, true)  -- Aim
+    DisableControlAction(1, 106, true) -- Jump
+    DisableControlAction(1, 122, true) -- Sprint
+    DisableControlAction(1, 135, true) --  Duck / Cover
+    -- ... (continues the list for the second player)
+end

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/client/custom/misc/OpenPhone.lua

@@ -0,0 +1,39 @@
+---@param emergency? boolean
+---@return boolean
+function TogglePhone(emergency)
+    if not emergency and (isDead() or not canOpenPhone) then return false end
+    if not Config.UniquePhone then
+        local hasData = lib.callback.await('phone:server:HasPhone', 0)
+        if not hasData.phone then
+            SendTextMessage(Lang('PHONE_NOTIFICATION_PHONE_NO_PHONE'), 'error')
+            return false
+        end
+        local meta = TriggerServerCallbackSync('phone:GetPhoneDataForWithoutMeta')
+        OpenPhone(hasData.phone, Config.PhonesProps[hasData.name], meta)
+        return true
+    end
+    if not MetaData then
+        TriggerServerEvent('phone:server:openRandomItemPhone')
+        return true
+    end
+    local phoneData, name = TriggerServerCallbackSync('phone:server:checkHasPhoneWithUniqueId', MetaData.uniqueId)
+    if not phoneData then
+        if MetaData then
+            MetaData = nil
+            TriggerServerEvent('phone:server:openRandomItemPhone')
+            -- SendTextMessage('Your phone is fucked up', 'inform')
+            return true
+        end
+        SendTextMessage(Lang('PHONE_NOTIFICATION_PHONE_NO_PHONE'), 'error')
+        return false
+    end
+    OpenPhone(CurrentPhoneData.type, CurrentPhoneData.phoneColor, MetaData)
+    return true
+end
+
+if not Config.OpenPhoneByPress and Config.UniquePhone then return end
+RegisterKeyMapping('TooglePhone', 'Open phone', 'keyboard', Config.OpenPhone)
+
+RegisterCommand('TooglePhone', function()
+    TogglePhone()
+end, false)

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/client/custom/target/qb-target.lua

@@ -0,0 +1,256 @@
+if not Config.UseTarget then
+    return
+end
+
+TargetName = GetResourceState('ox_target'):find('started') and 'qtarget' or 'qb-target'
+
+local hasHackedPhone = false
+
+function UberEatsDoors(uberChoosenAdress)
+    exports[TargetName]:AddBoxZone('uber_eats_zone', vec3(Config.UberDelivery[uberChoosenAdress]['x'], Config.UberDelivery[uberChoosenAdress]['y'], Config.UberDelivery[uberChoosenAdress]['z'] - 1), 2.5, 2.5, {
+        name = 'uber_eats_zone',
+        heading = 90.0,
+        debugPoly = Config.ZoneDebug,
+        minZ = Config.UberDelivery[uberChoosenAdress]['z'] - 1,
+        maxZ = Config.UberDelivery[uberChoosenAdress]['z'] + 1,
+    }, {
+        options = {
+            {
+                icon = 'fa-solid fa-door-open',
+                label = Lang('PHONE_TARGET_UBEREATS_DELIVER_DELIVERY'),
+                action = function()
+                    TriggerServerCallback('phone:checkItem', function(qtty)
+                        if qtty > 0 then
+                            TriggerServerEvent('phone:removeItem', Config.UberItems[uberChoosenItem]['item'])
+                            doorKnocked = true
+                            npcHome = math.random(1, 2)
+                            PlayAnimation(PlayerPedId(), 'timetable@jimmy@doorknock@', 'knockdoor_idle')
+                            Citizen.Wait(3000)
+
+                            if npcHome == 1 then
+                                Citizen.Wait(2000)
+                                packagePoint = false
+                                UberReward()
+                            else
+                                Citizen.Wait(2000)
+                                UberReward()
+                            end
+                            -- Después de la acción, eliminar el target
+                            RemoveUberTarget()
+                            uberTargeted = false
+                        else
+                            SendTextMessage(Lang('PHONE_NOTIFICATION_UBEREATS_NO_ITEM') .. ' ' .. Config.UberItems[uberChoosenItem]['name'], 'error')
+                        end
+                    end, Config.UberItems[uberChoosenItem]['item'])
+                end,
+            },
+        },
+        distance = 2.5
+    })
+end
+
+function RemoveUberTarget()
+    exports[TargetName]:RemoveZone('uber_eats_zone')
+end
+
+CreateThread(function()
+    exports[TargetName]:AddTargetModel(Config.ChatSeller, {
+        options = {
+            {
+                type = 'client',
+                event = 'phone:client:openChannelMenu',
+                icon = 'fas fa-comment-dots',
+                label = Lang('PHONE_TARGET_DISCORD_PURCHASE_CHAT_CHANNEL'),
+                targeticon = 'fas fa-comments',
+            },
+            {
+                type = 'client',
+                event = 'phone:client:openChannelHackedMenu',
+                icon = 'fas fa-user-secret',
+                label = Lang('PHONE_TARGET_DISCORD_PURCHASE_SECURE_CHANNEL'),
+                targeticon = 'fas fa-comments',
+                canInteract = function()
+                    TriggerServerCallback('phone:server:hasHackedPhone', function(result)
+                        hasHackedPhone = result
+                    end)
+                    Citizen.Wait(500)
+
+                    return hasHackedPhone
+                end
+            }
+        },
+        distance = 5.0
+    })
+
+    exports[TargetName]:AddBoxZone('crypto_spot', vec3(Crypto.Exchange.coords.x, Crypto.Exchange.coords.y, Crypto.Exchange.coords.z), 1.5, 1.5, {
+        name = 'crypto_spot',
+        heading = 90.0,
+        debugPoly = Config.ZoneDebug,
+        minZ = Crypto.Exchange.coords.z - 1,
+        maxZ = Crypto.Exchange.coords.z + 1,
+    }, {
+        options = {
+            {
+                icon = 'fa-solid fa-coins',
+                label = Lang('PHONE_TARGET_STOCK_ENTER_USB'),
+                canInteract = function()
+                    HasItem = TriggerServerCallbackSync('qb-crypto:server:HasSticky')
+                    return HasItem
+                end,
+                action = function()
+                    TriggerEvent('mhacking:show')
+                    TriggerEvent('mhacking:start', math.random(4, 6), 45, HackingSuccess)
+                end,
+            },
+        },
+        distance = 2.5
+    })
+
+    exports[TargetName]:AddTargetModel('a_m_m_afriamer_01', {
+        options = {
+            {
+                icon = 'fa-solid fa-gun',
+                label = Lang('PHONE_TARGET_DARKWEB_TAKE_ORDER'),
+                canInteract = function()
+                    return waitingDarkWebData
+                end,
+                action = function()
+                    TriggerServerCallbackSync('phone:darkweb:buyItem', waitingDarkWebData.item, waitingDarkWebData.amount)
+                    SendTempNotificationOld({
+                        app = 'darkweb',
+                        title = Lang('PHONE_NOTIFICATION_DARKWEB_TITLE'),
+                        text = Lang('PHONE_NOTIFICATION_DARKWEB_SUCCESS'),
+                        timeout = 2500,
+                    })
+                    darkWebSuccess = true
+                    waitingDarkWebData = nil
+                end,
+            },
+        },
+        distance = 5.0
+    })
+
+    for k, v in pairs(Config.RentelLocations) do
+        exports[TargetName]:AddBoxZone('rentel', vec3(v['coords'][1], v['coords'][2], v['coords'][3] - 1), 2.5, 2.5, {
+            name = 'rentel',
+            heading = 90.0,
+            debugPoly = Config.ZoneDebug,
+            minZ = v['coords'][3] - 1,
+            maxZ = v['coords'][3] + 1,
+        }, {
+            options = {
+                {
+                    icon = 'fa-solid fa-bicycle',
+                    label = Lang('PHONE_DRAWTEXT_RENTEL_TARGET_RENTAL'),
+                    action = function()
+                        if not IsPedInAnyVehicle(PlayerPedId(), false) then
+                            openRentalMenu(k)
+                        else
+                            local veh = GetVehiclePedIsIn(PlayerPedId(), false)
+                            local model = GetDisplayNameFromVehicleModel(GetEntityModel(veh))
+                            model = string.lower(model)
+                            if Config.RentelVehicles[model] then
+                                local keysQs = GetResourceState('qs-vehiclekeys') == 'started'
+                                if keysQs then
+                                    local plate = GetVehicleNumberPlateText(veh)
+                                    exports['qs-vehiclekeys']:RemoveKeys(plate, model)
+                                end
+                                TaskLeaveVehicle(PlayerPedId(), veh, 256)
+                                DeleteVehicle(veh)
+                                SendTempNotificationOld({
+                                    app = 'rentel',
+                                    title = Lang('PHONE_NOTIFICATION_RENTEL_TITLE'),
+                                    text = Lang('PHONE_NOTIFICATION_RENTEL_RETURN_VEHICLE_POST'),
+                                    timeout = 2500,
+                                    disableBadge = true,
+                                })
+                            else
+                                SendTextMessage(Lang('PHONE_NOTIFICATION_RENTEL_VEHICLE_INVALID'), 'error')
+                            end
+                        end
+                    end,
+                },
+            },
+            distance = 2.5
+        })
+    end
+
+    InitChargeTarget()
+
+    exports[TargetName]:AddTargetModel(Config.ResetPassword.ped.model, {
+        options = {
+            {
+                type = 'client',
+                event = 'phone:client:openChannelMenu',
+                icon = 'fas fa-comment-dots',
+                label = Lang('PHONE_TARGET_PHONE_RESET_PASSWORD'),
+                action = function()
+                    resetPasswordMenu()
+                end,
+            },
+        },
+        distance = 5.0
+    })
+
+    InitBoothTarget()
+
+    if Config.EnableRecipe then
+        for _, recipeShop in ipairs(Config.BuyRecipe.coords) do
+            exports[TargetName]:AddBoxZone('booth_zone', vec3(recipeShop.x, recipeShop.y, recipeShop.z - 1), 1.5, 1.5, {
+                name = 'booth_zone',
+                heading = recipeShop.w or 0.0,
+                debugPoly = Config.ZoneDebug,
+                minZ = recipeShop.z - 1,
+                maxZ = recipeShop.z + 1,
+            }, {
+                options = {
+                    {
+                        icon = 'fa-solid fa-phone',
+                        label = Lang('PHONE_TARGET_RECIPES_BUY'),
+                        action = function()
+                            if MetaData then
+                                openRecipeMenu()
+                            else
+                                SendTextMessage(Lang('PHONE_NOTIFICATION_RECIPES_USE_PHONE_FIRST'), 'inform')
+                            end
+                        end,
+                    },
+                },
+                distance = 2.5
+            })
+        end
+    end
+end)
+
+function InitChargeTarget()
+    exports[TargetName]:RemoveZone('charger_spots')
+    for k, v in pairs(Config.ChargeCoords) do
+        local coords = v.coords
+        exports[TargetName]:AddBoxZone('charger_spots', vec3(coords.x, coords.y, coords.z - 1), 2.5, 2.5, {
+            name = 'charger_spots',
+            heading = 90.0,
+            debugPoly = Config.ZoneDebug,
+            minZ = v['coords'][3] - 1,
+            maxZ = v['coords'][3] + 1,
+        }, {
+            options = {
+                {
+                    icon = 'fa-solid fa-battery-full',
+                    label = Lang('PHONE_TARGET_BATTERY_CHARGE_PHONE'),
+                    action = function()
+                        if Config.ChargeCoords[k].isAvailable then
+                            TriggerEvent('phone:openPhoneMenu', 'phone:ChargePhone', k)
+                        else
+                            if Config.ChargeCoords[k].takeable ~= GetIdentifier() then
+                                SendTextMessage(Lang('PHONE_NOTIFICATION_BATTERY_NOT_OWNER'), 'error')
+                            else
+                                TriggerServerEvent('phone:TakeBackPhoneFromCharging', k)
+                            end
+                        end
+                    end,
+                },
+            },
+            distance = 2.5
+        })
+    end
+end

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/client/custom/vehiclekeys/mk_vehiclekeys.lua

@@ -0,0 +1,7 @@
+if Config.Vehiclekeys ~= 'mk_vehiclekeys' then
+    return
+end
+
+function AddVehiclekeys(vehicle)
+    exports['mk_vehiclekeys']:AddKey(vehicle)
+end

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/client/custom/vehiclekeys/mono_carkeys.lua

@@ -0,0 +1,8 @@
+if Config.Vehiclekeys ~= 'mono_carkeys' then
+    return
+end
+
+function AddVehiclekeys(vehicle)
+    local plate = GetVehicleNumberPlateText(vehicle)
+    TriggerServerEvent('mono_carkeys:CreateKey', plate)
+end

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/client/custom/vehiclekeys/none.lua

@@ -0,0 +1,7 @@
+if Config.Vehiclekeys ~= 'none' then
+    return
+end
+
+function AddVehiclekeys(vehicle)
+    return Debug('Vehiclekeys', 'AddVehiclekeys', 'Vehiclekeys is set to none')
+end

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/client/custom/vehiclekeys/okokGarage.lua

@@ -0,0 +1,8 @@
+if Config.Vehiclekeys ~= 'okokGarage' then
+    return
+end
+
+function AddVehiclekeys(vehicle)
+    local plate = GetVehicleNumberPlateText(vehicle)
+    TriggerServerEvent('okokGarage:GiveKeys', plate)
+end

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/client/custom/vehiclekeys/qb-vehiclekeys.lua

@@ -0,0 +1,7 @@
+if Config.Vehiclekeys ~= 'qb-vehiclekeys' then
+    return
+end
+
+function AddVehiclekeys(vehicle)
+    TriggerEvent('vehiclekeys:client:SetOwner', ESX.Functions.GetPlate(vehicle))
+end

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/client/custom/vehiclekeys/qs-vehiclekeys.lua

@@ -0,0 +1,9 @@
+if Config.Vehiclekeys ~= 'qs-vehiclekeys' then
+    return
+end
+
+function AddVehiclekeys(vehicle)
+    local plate = GetVehicleNumberPlateText(vehicle)
+    local model = GetDisplayNameFromVehicleModel(GetEntityModel(vehicle))
+    exports['qs-vehiclekeys']:GiveKeys(plate, model)
+end

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/client/custom/vehiclekeys/vehicle_keys.lua

@@ -0,0 +1,8 @@
+if Config.Vehiclekeys ~= 'vehicles_keys' then
+    return
+end
+
+function AddVehiclekeys(vehicle)
+    local plate = GetVehicleNumberPlateText(vehicle)
+    TriggerServerEvent('vehicles_keys:selfGiveVehicleKeys', plate)
+end

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/client/custom/vehiclekeys/wasabi_carlock.lua

@@ -0,0 +1,8 @@
+if Config.Vehiclekeys ~= 'wasabi_carlock' then
+    return
+end
+
+function AddVehiclekeys(vehicle)
+    local plate = GetVehicleNumberPlateText(vehicle)
+    exports.wasabi_carlock:GiveKey(plate)
+end

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/client/custom/voice/voice.lua

@@ -0,0 +1,28 @@
+local pma = exports['pma-voice']
+local mumble = exports['mumble-voip']
+local toko = exports['tokovoip_script']
+
+function AddToCall(callId)
+    if Config.Voice == 'pma' then
+        Debug('callId', callId)
+        pma:addPlayerToCall(callId)
+    elseif Config.Voice == 'mumble' then
+        mumble:addPlayerToCall(callId)
+    elseif Config.Voice == 'salty' then
+        TriggerServerEvent('phone:addToCall', callId)
+    elseif Config.Voice == 'toko' then
+        toko:addPlayerToRadio(callId)
+    end
+end
+
+function RemoveFromCall(callId)
+    if Config.Voice == 'pma' then
+        pma:removePlayerFromCall()
+    elseif Config.Voice == 'mumble' then
+        mumble:removePlayerFromCall()
+    elseif Config.Voice == 'salty' then
+        TriggerServerEvent('phone:removeFromCall', callId)
+    elseif Config.Voice == 'toko' then
+        toko:removePlayerFromRadio(callId)
+    end
+end

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/fxmanifest.lua

@@ -0,0 +1,64 @@
+fx_version 'cerulean'
+
+game 'gta5'
+
+ui_page 'html/index.html'
+
+lua54 'yes'
+
+version '1.8.2'
+
+name 'qs-smartphone-pro'
+author 'Quasar Store'
+
+shared_scripts {
+    '@ox_lib/init.lua',
+    'config/*.lua',
+    'locales/*.lua'
+}
+
+ox_libs {
+    'table',
+    'math'
+}
+
+client_scripts {
+    'client/custom/**/*.lua',
+    'client/main.lua',
+    'client/modules/*.lua',
+    'client/apps/*.lua'
+}
+
+server_scripts {
+    '@oxmysql/lib/MySQL.lua',
+    'server/custom/**/*.lua',
+    'server/main.lua',
+    'server/modules/*.lua',
+    'server/apps/*.lua',
+    'server/tests/main.lua'
+}
+
+files {
+    'html/index.html',
+    'config/*.js',
+    'html/**/**'
+}
+
+escrow_ignore {
+    'config/config.lua',
+    'locales/*.lua',
+    'client/custom/**/*.lua',
+    'server/custom/**/*.lua',
+    'client/apps/crypto.lua',
+    'server/custom/missions'
+}
+
+dependencies {
+    '/gameBuild:2545',
+    'ox_lib',
+    'xsound',
+    'mhacking',
+    'phone-render'
+}
+
+dependency '/assetpacks'

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/html/css/apps/bank.css

@@ -0,0 +1,251 @@
+.bank-app {
+  background: linear-gradient(rgba(190, 0, 255, 0.4), rgba(190, 0, 255, 0.4)),
+    url("https://i.redd.it/b2r25i2yvjj01.jpg");
+  background-size: cover;
+  box-shadow: 0px 10px 20px #888;
+}
+
+#bank-home-page .top-text {
+    position: relative;
+    top: 40px;
+    width: 90%;
+    margin: 0 auto;
+}
+
+#bank-home-page .transactions {
+    font-size: 21px;
+}
+
+#bank-home-page .main .main-text {
+    width: 85%;
+    margin: 0 auto;
+}
+
+.bank-app .top {
+  height: 35%;
+  padding-top: 40px;
+}
+
+.bank-app .top-text {
+  margin: 20px 40px;
+  padding-top: 20px;
+}
+
+.bank-app .welcome {
+  color: #d5b8ff;
+  font-size: 22px;
+  line-height: 0.7;
+}
+
+.bank-app .bank-name {
+  font-size: 32px;
+  color: #fff;
+}
+
+.bank-app .balance {
+  color: #d5b8ff;
+  line-height: 0.7;
+}
+
+.bank-app .amount {
+  font-size: 32px;
+  color: #fff;
+}
+
+.bank-app .amount .fa-dollar-sign {
+  color: #d5b8ff;
+  font-size: 28px;
+}
+
+.bank-app .amount .noughts {
+  font-size: 26px;
+}
+
+.bank-app .fa-caret-right {
+  color: #d5b8ff;
+  font-size: 18px;
+  vertical-align: middle;
+}
+
+.bank-app .main {
+  background: var(--container-dark-background-color);
+  height: 65%;
+  color: #555;
+  border-radius: 30px;
+  position: relative;
+}
+
+.bank-app .plus {
+  background: #3cec97;
+  width: 55px;
+  height: 55px;
+  position: absolute;
+  border-radius: 10px;
+  top: -25px;
+  right: 35px;
+  font-size: 50px;
+  text-align: center;
+  line-height: 50px;
+  box-shadow: 0px 5px 20px #3cec97;
+  cursor: pointer;
+}
+
+.bank-app .plus p {
+  color: #fff;
+}
+
+.bank-app .main-text {
+  margin: 20px 40px;
+  padding-top: 50px;
+}
+
+.bank-app .transactions {
+  color: #663399;
+  font-size: 26px;
+}
+
+.bank-app .date {
+  color: #999;
+  font-size: 18px;
+}
+
+.bank-app .fa-caret-down {
+  color: #e1e1e1;
+}
+
+.bank-app .transaction-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  overflow-y: auto;
+  margin: 20px 25px;
+  max-height: 78%;
+}
+
+.bank-app .symbol {
+  width: 45px;
+  height: 45px;
+  border-radius: 5px;
+  color: #fff;
+  font-size: 18px;
+  line-height: 40px;
+  text-align: center;
+  background: #b589d6;
+}
+
+.transaction-item:hover {
+  background-color: var(--dark-background-color)
+}
+
+.bank-app .company {
+  font-size: 16px;
+  color: #666;
+    max-width: 250px;
+}
+
+.bank-app .type {
+  font-size: 16px;
+  color: #999;
+}
+
+.bank-app .transaction-grid .fa-dollar-sign {
+  color: #e1e1e1;
+  font-size: 14px; 
+}
+
+.invoice-information {
+  position: relative;
+  top: 4px;
+}
+
+.bank-app .transaction-grid .amount {
+  font-size: 20px;
+  color: #666;
+}
+
+.bank-app .transaction-grid .noughts {
+  font-size: 16px;
+}
+
+.bank-app .icon-bar {
+  bottom: 60px;
+  background: #f7f7f7;
+  height: 70px;
+  width: 100%;
+  border-radius: 30px;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+}
+
+.bank-app .icon-bar i {
+  padding: 30px;
+  color: #c1c1c1;
+  font-size: 16px;
+}
+
+.bank-app .icon-bar i.active {
+  color: #b589d6;
+}
+
+#bank-transfer-page {
+  top: 10%;
+  transform: translateY(100%);
+  transition: 0.5s;
+  opacity: 0.5;
+}
+
+#bank-transfer-page heade{
+  height: 50px;
+}
+
+#bank-transfer-page header a {
+  font-size: 18px;
+  font-weight: 100;
+}
+
+#bank-transfer-page.active {
+  transform: translateY(0%);
+  opacity: 1;
+}
+
+#bank-transfer-page i {
+  right: 20px;
+  top: 23px;
+}
+
+#bank-transfer-page .justify-center a {
+  position: relative;
+  bottom: 4px;
+}
+
+#bank-transfer-contacts .swiper-slide.selected div img {
+  box-shadow: 0px 0px 0px 2px #663399;
+  transition: 0.5s;
+  scale: 1.05;
+}
+
+#bank-transfer-contacts .swiper-slide.selected span {
+  color: #663399;
+  transition: 0.5s;
+}
+
+#bank-transfer-form {
+  width: 95%;
+  margin: 0 auto;
+}
+
+.bank-transfer-transaction,
+.bank-transfer-amount {
+  font-size: 16px !important;
+}
+
+.bank-no-contacts {
+  margin-top: 15px;
+  font-size: 15px;
+  color: gray;
+}
+
+.bank-color-text i {
+  color: var(--text-color) !important
+}

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/html/css/apps/calculator.css

@@ -0,0 +1,68 @@
+.calculator-app {
+  padding: 20px;
+  background: #0a0a0a;
+}
+
+.calculator_value {
+  position: absolute;
+  font-size: 60px;
+  width: 85%;
+  left: 35px;
+  margin-top: 55%;
+  text-align: right;
+  word-wrap: break-word;
+  color: white;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.buttons-container {
+  position: absolute;
+  display: grid;
+  top: 40%;
+  left: 35px;
+  width: 85%;
+  height: 50%;
+  grid-gap: 10px;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(5, 1fr);
+}
+
+.calculator_button {
+  align-items: center;
+  background: #e0e0e0;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  font-size: 29px;
+  height: 100%;
+  justify-content: center;
+  transition: filter 0.3s;
+  width: 100%;
+  color: white;
+  background: #313131;
+}
+
+.calculator_button.function {
+  background: #a5a5a5;
+  color: black;
+}
+
+.calculator_button.operator {
+  background: #f69906;
+  color: white;
+}
+
+.calculator_button.number-0 {
+  border-radius: 55px;
+  grid-column: 1 / span 2;
+  padding-right: 90px;
+  width: 175px;
+  color: white;
+}
+
+.calculator_button:active,
+.calculator_button:focus {
+  filter: brightness(120%);
+}

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/html/css/apps/calendar.css

@@ -0,0 +1,83 @@
+.calendar-widget {
+  background: var(--calendar-widget) !important;
+}
+
+.contenido .calendar-widget .calendarioWrapper {
+scale: 1.25;
+position: relative;
+top: 10px;
+}
+
+.calendar-widget .eventos {
+width: calc(100% - 112px);
+font-size: 12px;
+}
+.calendar-widget .calendarioWrapper {
+width: 120px;
+scale: 1.1
+}
+.calendar-widget .calendarioWrapper .mes {
+display: flex;
+flex-direction: column;
+align-items: center;
+}
+.calendar-widget .calendarioWrapper .mes .mesName {
+position: relative;
+color: #d24f54;
+font-size: 12px;
+font-weight: 600;
+letter-spacing: 1px;
+top: 5px;
+text-transform: uppercase;
+}
+.calendar-widget .calendarioWrapper .mes .calendarioTabla .tablaHeader,
+.calendar-widget .calendarioWrapper .mes .calendarioTabla .tablaContent {
+display: flex;
+flex-direction: row;
+flex-wrap: wrap;
+align-items: center;
+justify-content: flex-start;
+align-content: center;
+}
+.calendar-widget .calendarioWrapper .mes .calendarioTabla .tablaHeader > *,
+.calendar-widget .calendarioWrapper .mes .calendarioTabla .tablaContent > * {
+position: relative;
+left: 4px;
+bottom: 3px;
+width: 16px;
+text-align: center;
+font-size: 9px;
+font-weight: 600;
+}
+.calendar-widget .calendarioWrapper .mes .calendarioTabla .tablaHeader {
+margin: 5px auto;
+}
+.calendar-widget
+.calendarioWrapper
+.mes
+.calendarioTabla
+.tablaContent
+.diaNum {
+display: flex;
+flex-direction: row;
+flex-wrap: wrap;
+align-items: center;
+justify-content: center;
+align-content: center;
+height: 16px;
+color: var(--text-color);
+}
+.calendar-widget
+.calendarioWrapper
+.mes
+.calendarioTabla
+.tablaContent
+.diaNum.activo {
+color: #fff;
+background-color: #d24f54;
+border-radius: 50%;
+}
+
+.diaName {
+  color: var(--text-color) !important;
+}

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/html/css/apps/camera.css

@@ -0,0 +1,411 @@
+#camera-take-photo {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    align-content: center;
+    width: 72px;
+    height: 72px;
+    border-radius: 50%;
+    border: 2px solid #fff;
+    background-color: transparent;
+    padding: 4px;
+    cursor: pointer;
+    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
+    box-sizing: content-box;
+}
+
+#camera-take-photo-circle {
+    position: absolute;
+    width: 92%;
+    height: 92%;
+    border-radius: 50%;
+    border: 1px solid #000;
+    background-color: #fff;
+    transition: all 0.6s cubic-bezier(0.3, 1, 0.5, 1);
+}
+
+#camera-take-photo.takingVideo > #camera-take-photo-circle {
+    background-color: red;
+}
+
+#camera-take-photo.recordingVideo > #camera-take-photo-circle {
+    border-radius: 4px;
+    width: 43%;
+    height: 43%;
+}
+
+#camera-rotate-camera {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background-color: gray; /* Fondo gris oscuro */
+    cursor: pointer;
+    position: relative;
+    right: 20px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Agrega un sombreado suave */
+    transition: all 0.3s ease-in-out; /* Animación al pasar el cursor */
+}
+
+#camera-rotate-camera svg {
+    width: 28px; /* Ajusta el tamaño del ícono */
+    height: 28px;
+}
+
+#camera-rotate-camera svg path {
+    fill: none;
+    stroke: #fff; /* Color blanco para el ícono */
+    stroke-width: 7;
+    stroke-miterlimit: 10;
+}
+
+#camera-render-container {
+    position: relative;
+    width: 100%;
+    height: 90%;
+    top: 20px;
+    cursor: crosshair;
+}
+
+#camera-canvas {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    background-color: red;
+    object-fit: cover;
+    object-position: center;
+    transition: all 0.5s ease-in-out;
+}
+
+.canvas-render,
+.video-render {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    object-fit: fill;
+    width: 100%;
+    height: 100%;
+    z-index: 20;
+    display: none;
+}
+
+#camera-loader-container {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: #000;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    animation: blink 3s infinite;
+}
+
+#camera-loader {
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+}
+
+#camera-loader-container a {
+    font-size: 18px;
+    color: gray;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    text-align: center;
+    transform: translate(-50%, -50%);
+}
+
+@keyframes blink {
+    0%,
+    100% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.5;
+    }
+}
+
+.camera-mode {
+    display: block;
+    width: 100%;
+    height: 50px;
+    margin: 0px 0px 10px 0px;
+    padding: 0px;
+    overflow: hidden;
+    cursor: ew-resize;
+    opacity: 1;
+    -webkit-mask-image: -webkit-gradient(
+        linear,
+        left top,
+        right top,
+        color-stop(0, rgba(0, 0, 0, 0)),
+        color-stop(0.2, black),
+        color-stop(0.8, black),
+        color-stop(1, rgba(0, 0, 0, 0))
+    );
+    mask-image: linear-gradient(
+        linear,
+        left top,
+        right top,
+        color-stop(0, rgba(0, 0, 0, 0)),
+        color-stop(0.2, black),
+        color-stop(0.8, black),
+        color-stop(1, rgba(0, 0, 0, 0))
+    );
+}
+
+.camera-mode ul {
+    display: block;
+}
+
+.camera-mode ul li {
+    display: block !important;
+    margin: 20px 0px 0px 0px;
+    padding: 0px 13px 0px 13px;
+    font-size: 13px;
+    line-height: 14px;
+    color: #fff;
+    text-align: center;
+    text-transform: uppercase;
+}
+
+.camera-mode ul .slick-current li {
+    color: #ffcc00;
+}
+
+.camera-mode li {
+    transition: 0.25s ease-in-out all;
+    -moz-transition: 0.25s ease-in-out all;
+    -webkit-transition: 0.25s ease-in-out all;
+}
+
+.camera-focus {
+    display: block;
+    position: absolute;
+    top: calc(50% - 110px);
+    left: calc(50% - 55px);
+    width: 110px;
+    height: 110px;
+    z-index: 1;
+    border: 1px solid #ffcc00;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.camera-focus div {
+    display: block;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+}
+
+.screen .display .camera-focus div.h:before,
+.screen .display .camera-focus div.h:after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 5px;
+    height: 1px;
+    background: #ffcc00;
+}
+
+.screen .display .camera-focus div.h:before {
+    top: 50%;
+    left: 0px;
+}
+
+.screen .display .camera-focus div.h:after {
+    top: 50%;
+    right: 0px;
+}
+
+.screen .display .camera-focus div.v:before,
+.screen .display .camera-focus div.v:after {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 1px;
+    height: 5px;
+    background: #ffcc00;
+}
+
+.screen .display .camera-focus div.v:before {
+    top: 0px;
+    left: 50%;
+}
+
+.screen .display .camera-focus div.v:after {
+    bottom: 0px;
+    right: 50%;
+}
+
+.screen .display .camera-focus {
+    z-index: 1;
+    width: 70px;
+    height: 70px;
+}
+
+.camera-focus.fix {
+    animation-name: focusSet;
+    animation-duration: 0.8s;
+    animation-iteration-count: 1;
+    animation-delay: 0s;
+}
+
+@keyframes focusSet {
+    0% {
+        opacity: 0;
+        transform: scale(2);
+    }
+
+    30% {
+        opacity: 1;
+        transform: scale(1);
+    }
+
+    90% {
+        opacity: 1;
+        transform: scale(1);
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+#camera-flash {
+    left: -1.5vh;
+    line-height: 25px;
+}
+
+#camera-flash svg {
+    position: relative;
+    border: 1.3px solid #fff;
+    border-radius: 50%;
+    color: #fff;
+    cursor: pointer;
+    font-size: 2.3rem;
+    left: 10px;
+    transition: all 0.2s ease-in-out;
+}
+
+.camera-app .slick-track li {
+    font-size: 15px !important;
+}
+
+#camera-last-content {
+    position: relative;
+    cursor: pointer;
+    left: 20px;
+}
+
+#camera-last-content img {
+    border-radius: 6px;
+}
+
+#camera-helper-text {
+    background: rgba(0, 0, 0, 0.7);
+    margin: 20px;
+    padding: 8px;
+    border-radius: 3px;
+    user-select: none;
+}
+
+#camera-helper-text div {
+    margin: 2px;
+    color: white !important;
+}
+
+#camera-helper-text div .letter {
+    position: relative;
+    bottom: 1px;
+    display: inline-block;
+    width: 23px;
+    height: 23px;
+    background: white;
+    color: black !important;
+    text-align: center;
+    font-size: 13px;
+    border-radius: 2px;
+    font-weight: 400;
+    line-height: 24px;
+    margin-right: 1px;
+}
+
+#camera-helper-text div .text {
+    display: inline-block;
+    vertical-align: top;
+}
+
+#camera-helper-text div .enter-key {
+    font-size: 25px;
+}
+
+.camera-footer {
+    position: relative;
+    background: linear-gradient(
+        to top,
+        /* De abajo hacia arriba */ rgba(0, 0, 0, 1) 0%,
+        /* Negro más opaco en la parte inferior */ rgba(0, 0, 0, 0.9) 50%,
+        /* Transición en el medio */ rgba(0, 0, 0, 0.8) 100%
+            /* Negro más transparente en la parte superior */
+    );
+    height: 210px;
+    bottom: 210px;
+}
+
+#camera-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 71%;
+    display: flex;
+    flex-wrap: wrap;
+    pointer-events: none; /* No interfiere con los clics */
+    z-index: 10; /* Asegura que esté sobre el renderizado */
+}
+
+#camera-grid .line {
+    position: absolute;
+    background-color: rgba(255, 255, 255, 0.7); /* Líneas semitransparentes */
+}
+
+#camera-grid .line.horizontal {
+    width: 100%;
+    height: 1px;
+}
+
+#camera-grid .line.vertical {
+    width: 1px;
+    height: 100%;
+}
+
+/* Posicionamiento de las líneas */
+#camera-grid .line:nth-child(1) {
+    top: 33%;
+}
+#camera-grid .line:nth-child(2) {
+    top: 66%;
+}
+#camera-grid .line:nth-child(3) {
+    left: 33%;
+}
+#camera-grid .line:nth-child(4) {
+    left: 66%;
+}

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/html/css/apps/clock.css

@@ -0,0 +1,957 @@
+.clock-app *::selection {
+  background-color: transparent;
+}
+ 
+.clock-app {
+    background-color: #0a0a0a;
+}
+
+.clock-app-header {
+  position: absolute;
+  width: 100%;
+  height: 65px;
+  top: 460px;
+  z-index: 99;
+}
+
+.clock-app-container {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  color: var(--text-color);
+  padding-top: 2rem;
+}
+
+#clock-alarm-add,
+#clock-alarm-edit, 
+#clock-alarm-add-label-save,
+#clock-alarm-add-label-cancel,
+#clock-alarm-save,
+#clock-alarm-cancel,
+#clock-timer-cancel,
+#clock-timer-edit,
+#clock-timer-save {
+  cursor: pointer;
+}
+
+.clock-app-tab {
+  position: relative;
+  display: none;
+  flex-direction: column;
+  width: 100%;
+  flex: 1;
+}
+
+.clock-app-timer-setup .global-app-header {
+  width: 94%;
+  position: relative;
+  left: 11px;
+}
+ 
+.clock-app .global-app-header {
+  width: 94%;
+  margin: 0 auto;
+}
+
+#clock-timer-title {
+  color: white;
+}
+
+#phone-image-container-header {
+  width: 92%;
+}
+
+.clock-tab-title {
+  position: absolute;
+  left: 60px;
+  top: 11px;
+  font-size: 12px;
+}
+
+.clock-tab-description {
+  position: absolute;
+  left: 60px;
+  top: 30px;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.clock-add-alarm-settings {
+  background: rgba(255, 255, 255, 0.08);
+  position: relative;
+  top: 50px;
+  height: 12%;
+  width: 93%;
+  margin: 0 auto;
+  border-radius: 13px;
+}
+
+.clock-add-alarm-settings p {
+  margin: 0 !important;
+}
+
+#clock-tab-title-repeat,
+#clock-tab-title-alarm {
+  color: white;
+}
+
+.clock-tab-description p,
+.clock-tab-description i {
+  color: gray;
+}
+
+.clock-add-alarm-settings .settings-tab-description {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+#clock-alarm-label-option {
+  height: 45px;
+}
+
+#clock-alarm-repeat-option {
+  height: 46px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.clock-add-alarm-settings .clock-tab-title {
+  position: relative;
+  left: 20px;
+  top: 0px;
+  font-size: 17px;
+  flex: 1;
+}
+
+.clock-add-alarm-settings .clock-tab-description {
+  position: absolute;
+  left: 180px;
+  top: 35%;
+  display: flex;
+  width: 50%;
+  font-size: 17px;
+  gap: 8px;
+  text-align: right;
+  line-height: 15px;
+  justify-content: flex-end; /* Alinea el texto a la derecha */
+}
+
+.clock-app-alarm-page {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.clock-app-alarm-page::-webkit-scrollbar {
+  display: none;
+}
+
+.clock-app-alarm-add,
+.clock-app-alarm-add-label {
+  left: 100%;
+}
+ 
+#clock-alarm-label-option-input {
+  width: 100%;
+  font-size: 22px;
+  text-indent: 12px;
+  border: 1px solid var(--border-gray);
+}
+
+#clock-alarm-add-menu {
+  color: white;
+}
+
+.clock-app-alarm-add-info {
+  position: relative;
+  top: 25px;
+  width: 90%;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.clock-app-alarm-add-info a {
+  font-size: 16px;
+  color: lightgray;
+}
+
+.clock-app-alarm-add-label-container {
+  position: relative;
+  top: 40px;
+  width: 100%;
+  height: 6%;
+  background: rgba(255, 255, 255, 0.04);
+  display: flex;
+  color: lightgray;
+  align-items: center;
+  justify-content: center;
+}
+
+.clock-app-tab .global-app-header {
+  height: unset;
+  top: unset;
+  margin-bottom: unset;
+  padding-top: 40px;
+  font-size: 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+}
+
+.clock-app-tab .global-app-header .blue-text:last-child {
+  place-self: flex-end;
+  position: unset;
+}
+
+.clock-app-tab-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 16px;
+  padding-top: 40px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+
+}
+
+.clock-app-active {
+  display: flex !important;
+}
+
+.clock-app-footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  gap: 16px;
+  text-align: center;
+  padding: 8px 12px;
+}
+
+.clock-app-footer i {
+  font-size: 29px;
+    color: gray;
+    margin-bottom: 5px;
+}
+
+.clock-app-footer p {
+  font-size: 13px;
+  color: gray;
+}
+
+.clock-app-header-button {
+  position: relative;
+  float: left;
+  width: 50%;
+  height: 80%;
+  text-align: center;
+  line-height: 56px;
+  background: #0f0f0f;
+  border-bottom: 2px solid rgba(0, 0, 0, 0);
+  color: white;
+  transition: 0.08s;
+}
+
+.clock-app-header-button:hover {
+  background: #252525;
+}
+
+.clock-app-footer-selected p {
+  color: #ff7c14;
+}
+
+.clock-app-footer-selected i {
+  color: #ff7c14;
+}
+
+.clock-app-loaded {
+  display: none;
+  padding-left: 276px;
+  height: 99%;
+}
+
+.clock-app-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.stopwatch-timer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 64px;
+  font-size: 70px;
+  position: relative;
+  height: 300px;
+}
+
+.stopwatch-timer p {
+  color: white;
+}
+
+.clock-start-button::before {
+  content: '';
+  display: block;
+  width: 80px; /* Ajusta el tamaño del círculo interno */
+  height: 80px; /* Ajusta el tamaño del círculo interno */
+  border-radius: 50%;
+  margin-bottom: 0.5px;
+  border: 3px solid #246727c2; /* Borde del círculo interno */
+  position: absolute;
+}
+
+.clock-clear-button::before {
+  content: '';
+  display: block;
+  width: 80px; /* Ajusta el tamaño del círculo interno */
+  height: 80px; /* Ajusta el tamaño del círculo interno */
+  border-radius: 50%;
+  margin-bottom: 0.5px;
+  border: 3px solid #79797991; /* Borde del círculo interno */
+  position: absolute;
+}
+
+.clock-button[data-type='stop']::before {
+  content: '';
+  display: block;
+  width: 80px; /* Ajusta el tamaño del círculo interno */
+  height: 80px; /* Ajusta el tamaño del círculo interno */
+  border-radius: 50%;
+  margin-bottom: 0.5px;
+  border: 3px solid #fd392f4f; /* Borde del círculo interno */
+  position: absolute;
+}
+
+.timer-button-flow::before {
+  content: '';
+  display: block;
+  width: 80px; /* Ajusta el tamaño del círculo interno */
+  height: 80px; /* Ajusta el tamaño del círculo interno */
+  border-radius: 50%;
+  margin-bottom: 0.5px;
+  border: 3px solid #246727c2; /* Borde del círculo interno */
+  position: absolute;
+}
+
+#timer-button.timer-button-clear::before {
+  content: '';
+  display: block;
+  width: 80px; /* Ajusta el tamaño del círculo interno */
+  height: 80px; /* Ajusta el tamaño del círculo interno */
+  border-radius: 50%;
+  margin-bottom: 0.5px;
+  border: 3px solid #79797991; /* Borde del círculo interno */
+  position: absolute;
+}
+
+#timer-button.timer-button-clear p {
+  color: lightgray
+}
+
+.timer-button-flow p {
+   color: #8ae143;
+}
+
+.clock-button[data-type='stop'] p {
+  color: #f88c8c;
+}
+
+.clock-buttons {
+  display: flex;
+  align-items: center;
+  padding: 0 35px 16px 35px;
+  justify-content: space-between;
+  font-size: 14px;
+}
+
+.clock-button {
+  display: flex;
+  width: 70px;
+  height: 70px;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  border-radius: 50%;
+}
+
+.timer-button-flow {
+  font-size: 17px;
+  color: lightgray;
+}
+
+.timer-button-clear {
+   font-size: 17px;
+}
+
+.timer-button-start {
+  color: #8ae143;
+}
+
+.timer-button-clear {
+  color: lightgray;
+}
+
+.clock-button p {
+  font-size: 17px;
+  margin: 0 !important;
+}
+
+.clock-button[data-type='lap'] {
+  background: #79797991;
+}
+
+.clock-button[data-type='clear'] {
+  background: #79797991;
+}
+
+.clock-button[data-type='start'] {
+  background: #246727c2;
+}
+
+.clock-button[data-type='stop'] {
+  background: #fd392f4f;
+}
+
+.stopwatch-lap-list {
+  overflow: auto;
+  position: relative;
+  top: 15px;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  max-height: 380px;
+}
+
+.stopwatch-lap {
+  display: flex;
+  justify-content: space-between;
+  font-size: 16px;
+  padding: 5px 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08)
+}
+
+.stopwatch-lap p {
+  color: white;
+}
+
+.stopwatch-lap:last-child {
+  border-bottom: none;
+}
+
+.stopwatch-lap p {
+  margin: 8px;
+}
+
+.stopwatch-lap-list::-webkit-scrollbar {
+  position: absolute;
+  width: 6px;
+}
+
+.stopwatch-lap-list::-webkit-scrollbar-track {
+  background-color: rgba(0, 0, 0, 0);
+}
+
+.stopwatch-lap-list::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.6);
+  border-radius: 10px 0 0 10px;
+}
+
+.world-time {
+  position: relative;
+  top: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  height: 100px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+  color: lightgray;
+}
+
+.world-time:last-child::after {
+  display: none;
+}
+
+.world-time p {
+  margin: 0;
+}
+
+.world-time-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.world-time-info p:first-child {
+  font-size: 26px;
+  color: white;
+  font-weight: bold;
+}
+
+.world-time-info p:last-child {
+  color: gray;
+  font-size: 15px;
+}
+
+.world-time-clock {
+  display: flex;
+  align-items: flex-end;
+}
+
+.world-time-clock p {
+  color: white;
+}
+
+.world-time-clock p:first-child {
+  font-size: 48px;
+}
+
+.world-time-clock p:last-child {
+  font-size: 22px;
+  padding-bottom: 10px;
+}
+
+.clock-timer-setup-container {
+  display: flex;
+  position: relative;
+  top: 40px;
+}
+
+.clock-app-timer-setup {
+  position: absolute;
+  width: 95%;
+  left: 10px;
+}
+
+.clock-timer-container #clock-timer-minute-picker {
+  text-align: right;
+  direction: rtl;
+  text-indent: 8px;
+}
+
+.clock-timer-container #clock-timer-second-picker {
+  text-align: left;
+  text-indent: 8px;
+}
+
+.clone-scroller::-webkit-scrollbar {
+  display: none;
+}
+
+.clock-app-timer-show {
+  position: absolute;
+  width: 100%;
+  left: 100%;
+  display: none;
+}
+
+.clock-app-timer-show-container {
+  position: relative;
+  top: 30px;
+}
+
+.clock-app-timer-show-container-texts {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 auto;
+  width: 300px; /* Tamaño del círculo */
+  height: 300px; /* Tamaño del círculo */
+  border-radius: 50%; /* Para hacerlo un círculo */
+  border: 3px solid orange; /* Borde naranja */
+  font-size: 54px; /* Tamaño del texto reducido */
+  color: orange; /* Color del texto */
+}
+
+.clock-app-timer-show-container-texts p {
+  color: white;
+}
+
+.clock-app-alarm-list-item {
+  display: flex;
+  flex-direction: column;
+  padding: 0 22px 5px 22px;
+  height: 100px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+  color: lightgray;
+}
+
+.clock-app-alarm-list-item-description {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+}
+
+.clock-app-alarm-list-item-description span {
+  font-size: 52px;
+  margin-left: -6px;
+  margin-top: 4px;
+}
+
+.clock-app-alarm-cycle-text {
+  font-size: 16px;
+
+}
+
+.switch__container {
+  width: 60px;
+}
+
+.switch__container .switch {
+  position: absolute;
+  left: -9999px;
+}
+
+.switch__container .switch+label {
+  display: block;
+  position: relative;
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+}
+
+.switch--shadow+label {
+  padding: 2px;
+  width: 60px;
+  height: 30px;
+  background-color: #dddddd;
+  border-radius: 60px;
+}
+
+.switch--shadow+label:before,
+.switch--shadow+label:after {
+  display: block;
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  bottom: 1px;
+  content: '';
+}
+
+.switch--shadow+label:before {
+  right: 1px;
+  background-color: #f1f1f1;
+  border-radius: 60px;
+  transition: background 0.4s;
+}
+
+.switch--shadow+label:after {
+  width: 26px;
+  height: 26px;
+  background-color: #fff;
+  border-radius: 100%;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+  transition: all 0.4s;
+}
+
+.switch--shadow:checked+label:before {
+  background-color: #8ce196;
+}
+
+.switch--shadow:checked+label:after {
+  transform: translateX(32px);
+}
+
+/* Estilo Flat */
+.switch--flat+label {
+  padding: 2px;
+  width: 60px;
+  height: 30px;
+  background-color: #dddddd;
+  border-radius: 60px;
+  transition: background 0.4s;
+}
+
+.switch--flat+label:before,
+.switch--flat+label:after {
+  display: block;
+  position: absolute;
+  content: '';
+}
+
+.switch--flat+label:before {
+  top: 2px;
+  left: 2px;
+  bottom: 2px;
+  right: 2px;
+  background-color: #fff;
+  border-radius: 60px;
+  transition: background 0.4s;
+}
+
+.switch--flat+label:after {
+  top: 4px;
+  left: 4px;
+  bottom: 4px;
+  width: 56px;
+  background-color: #dddddd;
+  border-radius: 52px;
+  transition: margin 0.4s, background 0.4s;
+}
+
+.switch--flat:checked+label {
+  background-color: #8ce196;
+}
+
+.switch--flat:checked+label:after {
+  margin-left: 60px;
+  background-color: #8ce196;
+}
+
+.clock-app .global-app-header {
+  top: 5px;
+}
+
+.global-app-header {
+  display: grid;
+  grid-template-columns: 10% 80% 10%;
+  white-space: nowrap;
+  top: 6rem;
+  position: relative;
+  width: 100%;
+  font-size: 14px;
+  text-align: center;
+  margin-bottom: 7rem;
+}
+
+.global-app-header p:nth-child(2) {
+  font-weight: bold;
+}
+
+.global-app-header .blue-text {
+  color: #087fff;
+}
+
+.global-app-header .blue-text:last-child {
+  position: absolute;
+  right: 22px;
+}
+
+.global-app-header .red-text {
+  color: #fd3b2f;
+  position: absolute;
+  right: 24px;
+}
+
+/* Icon */
+
+.icon-clock {
+  overflow: hidden;
+  background: #000;
+  position: relative;
+  padding: 33px;
+  border-radius: 15px;
+}
+
+.clock {
+  width: 192px;
+  height: 192px;
+  border-radius: 50%;
+  background: #f1f1f1;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0.28);
+} 
+
+.phone-application-group-item .clock {
+  transform: translate(-50%, -50%) scale(0.080);
+}
+
+.phone-application-group-item .icon-clock {
+  padding: 9px !important;
+}
+
+.clock ol {
+  list-style-type: none;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  margin: 0;
+  padding: 0;
+}
+
+.clock ol li {
+  counter-increment: labelCounter;
+  position: absolute;
+  font-size: 1.25em;
+}
+
+.clock ol li:before {
+  content: counter(labelCounter) '';
+}
+
+.clock ol li:nth-child(1) {
+  right: 55px;
+  top: 20px;
+}
+
+.clock ol li:nth-child(2) {
+  right: 25px;
+  top: 50px;
+}
+
+.clock ol li:nth-child(3) {
+  right: 12px;
+  top: 85px;
+}
+
+.clock ol li:nth-child(4) {
+  right: 25px;
+  top: 125px;
+}
+
+.clock ol li:nth-child(5) {
+  right: 55px;
+  top: 150px;
+}
+
+.clock ol li:nth-child(6) {
+  right: 90px;
+  top: 160px;
+}
+
+.clock ol li:nth-child(7) {
+  right: 125px;
+  top: 150px;
+}
+
+.clock ol li:nth-child(8) {
+  right: 155px;
+  top: 125px;
+}
+
+.clock ol li:nth-child(9) {
+  right: 165px;
+  top: 85px;
+}
+
+.clock ol li:nth-child(10) {
+  right: 150px;
+  top: 50px;
+}
+
+.clock ol li:nth-child(11) {
+  right: 120px;
+  top: 20px;
+}
+
+.clock ol li:nth-child(12) {
+  right: 85px;
+  top: 10px;
+}
+
+@-webkit-keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+#hour {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #303030;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -7px;
+  margin-left: -7px;
+}
+
+#hour:before,
+#hour:after {
+  content: '';
+  display: block;
+  position: absolute;
+}
+
+#hour:before {
+  width: 8px;
+  height: 65px;
+  border-radius: 4px;
+  background: #303030;
+  position: absolute;
+  bottom: 2px;
+  left: 50%;
+  transform: translate(-50%, 0);
+}
+
+#min {
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background: #303030;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+
+#min:before,
+#min:after {
+  content: '';
+  display: block;
+  position: absolute;
+}
+
+#min:before {
+  width: 6px;
+  height: 90px;
+  border-radius: 4px;
+  background: #303030;
+  position: absolute;
+  bottom: 2px;
+  left: 50%;
+  transform: translate(-50%, 0);
+}
+
+#sec {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: #dd3e1c;
+  border: 2px solid #e13e1b;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -4px;
+  margin-left: -4px;
+}
+
+#sec:before,
+#sec:after {
+  content: '';
+  display: block;
+  position: absolute;
+}
+
+#sec:before {
+  width: 2px;
+  height: 105px;
+  border-radius: 4px;
+  background: #e13e1b;
+  position: absolute;
+  bottom: -12px;
+  left: 50%;
+  transform: translate(-50%, 0);
+}
+
+.worldtime-title,
+#alarm-title,
+#clock-alarm-tag-title {
+  color: white;
+  font-weight: bold;
+}
+
+.worldtime-title {
+  padding-bottom: 14px;
+}

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/html/css/apps/crypto.css

@@ -0,0 +1,739 @@
+.crypto-app {
+    background: #0a0a0a;
+}
+
+.crypto-action-page {
+    position: absolute;
+    top: 100%;
+    height: 100%;
+    width: 100%;
+    z-index: 1;
+    border-radius: 20px;
+    background: rgba(25,25,25);
+} 
+
+.crypto-action-page-buy-crypto {
+    display: none;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+}
+
+.crypto-header-buy {
+    font-weight: bold;
+}
+
+.crypto-dark-background {
+    position: absolute;
+    background: rgba(0,0,0,0.6);
+    display: none;
+    z-index: 1;
+    height: 100%;
+    width: 100%;
+}
+
+.crypto-action-page-buy-crypto article {
+    position: relative;
+    top: 60px;
+}
+
+.crypto-action-page-sell-crypto {
+    display: none;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+}
+
+.crypto-action-page-sell-crypto article {
+    position: relative;
+    top: 60px;
+}
+
+.crypto-header-sell {
+    font-weight: bold;
+}
+
+.crypto-action-page-transfer-crypto {
+    display: none;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+}
+
+.crypto-action-page-transfer-crypto article {
+    position: relative;
+    top: 60px;
+}
+
+.crypto-header-transfer {
+    font-weight: bold;
+}
+
+.crypto-action-page-buy-crypto-footer {
+    position: absolute;
+    top: 15px;
+    width: 90%;
+    height: 30px;
+    left: 20px;
+    display: flex;
+    justify-content: space-between; /* Coloca los elementos al principio y al final */
+    align-items: center; /* Centra verticalmente los elementos */
+}
+
+.crypto-action-page-buy-crypto-footer-button {
+    text-align: center;
+    line-height: 30px;
+    cursor: pointer;
+}
+
+.crypto-cancel,
+.crypto-cancel i,
+.crypto-cancel a,
+.crypto-cancel p,
+.crypto-action-page-buy-crypto-footer-button a {
+    color: white;
+}
+
+#buy-crypto a {
+    color: white;
+}
+
+@keyframes Shake {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    25% {
+        transform: rotate(-5deg);
+    }
+
+    50% {
+        transform: rotate(5deg);
+    }
+
+    75% {
+        transform: rotate(-5deg);
+    }
+
+    100% {
+        transform: rotate(5deg);
+    }
+}
+
+.crypto-header {
+    position: absolute;
+    width: 100%;
+    top: 65px;
+}
+
+.crypto-header h1 {
+    color: white;
+    width: 90%;
+    position: relative;
+    top: 5px;
+    margin: 0 auto;
+    font-size: 28px;
+    font-weight: bold;
+} 
+
+.crypto-header h2 {
+    color: white;
+    width: 90%;
+    position: relative;
+    top: 0;
+    margin: 0 auto;
+    padding-bottom: 20px;
+    font-size: 16px;
+    color: gray;
+    margin-top: 10px;
+    border-bottom: 1px solid #212124;
+} 
+
+.crypto-header-footer {
+    position: absolute;
+    bottom: 0;
+    height: 8%;
+    width: 100%;
+    background: rgba(255, 255, 255, 0.08);
+    border-top: 1px solid #212124;
+    cursor: pointer;
+}
+
+.crypto-header-footer-item {
+    position: relative;
+    width: 33.33%;
+    height: 100%;
+    float: left;
+    text-align: center;
+    line-height: 50px;
+    font-size: 15px;
+    transition: .05s ease-in-out;
+}
+
+
+.crypto-header-footer-item p {
+    color: gray !important;
+}
+
+#crypto-menu-transactions,
+#crypto-menu-value,
+#crypto-menu-general {
+    color: white;
+}
+
+.crypto-header-footer-item-selected p {
+     color: white !important
+} 
+
+.crypto-page {
+    position: absolute;
+    top: 50rem;
+    height: 21em;
+    width: 100%;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+}
+
+.crypto-header-values {
+    position: absolute;
+    width: 90%;
+    height: 80px;
+    top: 64.33px;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    border-bottom: 1px solid #212124;
+}
+
+.crypto-header-value {
+    position: relative;
+    float: left;
+    width: 33.33%;
+    text-align: center;
+    top: 22.975px;
+    font-size: 14px;
+}
+
+.crypto-header-value p {
+    font-size: 17px;
+    line-height: 30px;
+    color: white;
+}
+
+.crypto-header-value span {
+    color: gray;
+    font-size: 15px;
+    font-weight: bold;
+}
+
+.crypto-header-picture {
+    position: absolute;
+    width: 128.66px;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    top: 18.38px;
+}
+
+.cryptotab-general {
+    display: none;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.cryptotab-general h1 {
+    font-size: 25px;
+    position: relative;
+    bottom: 19px;
+    left: 20px;
+    color: white;
+    font-weight: bold
+}
+
+.cryptotab-transactions {
+    display: none;
+    position: absolute;
+    width: 100%;
+    height: 93% !important;
+}
+
+.cryptotab-transactions h1 {
+    font-size: 25px;
+    position: relative;
+    bottom: 19px;
+    left: 20px;
+    color: white;
+    font-weight: bold
+}
+
+.cryptotab-course {
+    display: none;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.cryptotab-course h1 {
+    font-size: 25px;
+    position: relative;
+    bottom: 19px;
+    left: 20px;
+    color: white;
+    font-weight: bold
+}
+
+.cryptotab-transactions-list {
+    position: absolute;
+    width: 90%;
+    height: 86%;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    top: 40px;
+    padding-bottom: 20px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
+
+.cryptotab-transactions-list::-webkit-scrollbar {
+    display: none;
+}
+
+.cryptotab-transactions-block {
+    position: relative;
+    color: white;
+    width: 100%;
+    height: 60px;
+    margin: 15px auto 0px;
+    transition: all 0.05s linear 0s;
+    border-bottom: 1px solid #212124;
+    cursor: pointer;
+} 
+
+.cryptotab-transactions-block i {
+    position: absolute;
+    left: 20px;
+    line-height: 50px;
+    font-size: 20px;
+    color: gray;
+}
+
+.cryptotab-transactions-block-title {
+    position: absolute;
+    left: 60px;
+    top: 2px;
+    font-size: 16px;
+    color: var(--text-color);
+}
+
+.cryptotab-transactions-block-happening {
+    position: absolute;
+    left: 60px;
+    top: 28px;
+    font-size: 13px;
+    color: gray;
+}
+
+.cryptotab-course-list {
+    position: absolute;
+    width: 93%;
+    height: 80%;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    top: 43px;
+    overflow-x: hidden;
+    overflow-y: scroll;
+}
+
+.cryptotab-course-list::-webkit-scrollbar {
+    display: none;
+}
+
+.cryptotab-course-block {
+    position: relative;
+    color: white;
+    width: 100%;
+    height: 60px;
+    margin: 15px auto 0px;
+    transition: all 0.05s linear 0s;
+    border-bottom: 1px solid #212124;
+    cursor: pointer;
+}
+
+.cryptotab-course-block i {
+    position: absolute;
+    left: 20px;
+    line-height: 50px;
+    font-size: 20px;
+    color: gray;
+}
+
+.cryptotab-course-block-title {
+    position: absolute;
+    left: 60px;
+    top: 2px;
+    font-size: 16px;
+    color: white;
+}
+
+.cryptotab-course-block-happening {
+    position: absolute;
+    left: 60px;
+    top: 28px;
+    font-size: 13px;
+    color: gray;
+}
+
+.crypto-percentage-change {
+    position: absolute;
+    width: 91.9px;
+    top: -24px;
+    left: 270px;
+}
+
+.crypto-percentage-change i {
+    font-size: 17px;
+}
+
+.cryptotab-general-actions {
+    position: absolute;
+    width: 90%;
+    height: auto;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    top: 30px;
+    overflow-y: scroll;
+    overflow-x: hidden;
+}
+
+.cryptotab-general-actions::-webkit-scrollbar {
+    display: none;
+}
+
+.cryptotab-general-action {
+    position: relative;
+    color: white;
+    width: 100%;
+    height: 60px;
+    margin: 15px auto 0px;
+    border-radius: 7px;
+    transition: all 0.05s linear 0s;
+    background: #212124;
+    cursor: pointer;
+}
+
+.cryptotab-general-action:hover {
+    opacity: 0.9
+}
+
+.cryptotab-general-action>i {
+    position: absolute;
+    left: 15px;
+    line-height: 60px;
+    color: lightgray !important;
+    font-size: 25px;
+}
+
+.cryptotab-general-action-title {
+    position: absolute;
+    left: 60px;
+    top: 7px;
+    font-size: 19px;
+    color: white;
+}
+
+.cryptotab-general-action-description {
+    position: absolute;
+    left: 60px;
+    top: 34px;
+    font-size: 15px;
+    color: gray;
+}
+
+.crypto-action-page-buy-crypto-input-money {
+    position: absolute;
+    top: 150px;
+    left: 50px;
+    background: none;
+    border: none;
+    outline: none;
+    height: 30px;
+    width: 80%;
+    text-indent: 0.4px;
+    transition: .1s;
+    font-size: 15px;
+    color: gray;
+}
+
+.crypto-action-page-buy-crypto-input-money::-webkit-inner-spin-button {
+    display: none;
+}
+
+.crypto-action-page-buy-crypto-input-money-icon {
+    position: absolute;
+    top: 150px;
+    left: 30px;
+    font-size: 18px;
+    color: gray;
+}
+
+.crypto-action-page-buy-crypto-input-coins {
+    position: absolute;
+    top: 87px;
+    left: 20px;
+    background: rgb(40, 40, 40);
+    border: none;
+    outline: none;
+    height: 50px;
+    width: 90%;
+    text-indent: 2px;
+    transition: .1s;
+    font-size: 16px;
+    color: white;
+    border-radius: 10px;
+    padding-left: 50px;
+}
+
+.crypto-action-page-buy-crypto-input-coins::-webkit-inner-spin-button {
+    display: none;
+}
+
+.crypto-action-page-buy-crypto-input-coins-icon {
+    position: absolute;
+    top: 100px;
+    left: 35px;
+    font-size: 24px;
+    color: gray;
+    z-index: 1
+}
+
+/* Sell */
+
+
+.crypto-action-page-sell-crypto-input-money {
+    position: absolute;
+    top: 150px;
+    left: 50px;
+    background: none;
+    border: none;
+    outline: none;
+    height: 30px;
+    width: 80%;
+    text-indent: 0.4px;
+    transition: .1s;
+    font-size: 15px;
+    color: gray;
+}
+
+.crypto-action-page-sell-crypto-input-money::-webkit-inner-spin-button {
+    display: none;
+}
+
+.crypto-action-page-sell-crypto-input-money-icon {
+    position: absolute;
+    top: 150px;
+    left: 30px;
+    font-size: 18px;
+    color: gray;
+}
+
+.crypto-action-page-sell-crypto-input-coins {
+    position: absolute;
+    top: 87px;
+    left: 20px;
+    background: rgb(40, 40, 40);
+    border: none;
+    outline: none;
+    height: 50px;
+    width: 90%;
+    text-indent: 2px;
+    transition: .1s;
+    font-size: 16px;
+    color: white;
+    border-radius: 10px;
+    padding-left: 50px;
+}
+
+.crypto-action-page-sell-crypto-input-coins::-webkit-inner-spin-button {
+    display: none;
+}
+
+.crypto-action-page-sell-crypto-input-coins-icon {
+    position: absolute;
+    top: 100px;
+    left: 35px;
+    font-size: 24px;
+    color: gray;
+    z-index: 1
+}
+
+.crypto-action-page-header {
+    position: absolute;
+    text-align: center;
+    width: 100%;
+    font-size: 19px;
+    font-weight: 100;
+    color: white;
+}
+
+.crypto-action-page-wallet {
+    position: absolute;
+    text-align: center;
+    top: 30px;
+    width: 100%;
+    font-size: 16px;
+    font-weight: 100;
+    color: gray;
+}
+
+.crypto-walletid {
+    position: absolute;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    width: 100%;
+    text-align: center;
+    bottom: 40px;
+    color: gray;
+    cursor: pointer;
+}
+
+.crypto-action-page-transfer-crypto-input-walletid {
+    position: absolute;
+    top: 160px;
+    left: 20px;
+    background: rgb(40, 40, 40);
+    border: none;
+    outline: none;
+    height: 50px;
+    width: 90%;
+    text-indent: 2px;
+    transition: .1s;
+    font-size: 16px;
+    color: white;
+    border-radius: 10px;
+    padding-left: 50px;
+}
+
+.crypto-action-page-transfer-crypto-input-money-icon {
+    position: absolute;
+    top: 175px;
+    left: 35px;
+    font-size: 24px;
+    color: gray;
+    z-index: 1
+}
+
+/* Transfer */
+
+.crypto-action-page-transfer-crypto-input-coins {
+    position: absolute;
+    top: 87px;
+    left: 20px;
+    background: rgb(40, 40, 40);
+    border: none;
+    outline: none;
+    height: 50px;
+    width: 90%;
+    text-indent: 2px;
+    transition: .1s;
+    font-size: 16px;
+    color: white;
+    border-radius: 10px;
+    padding-left: 50px;
+}
+
+.crypto-action-page-transfer-crypto-input-coins::-webkit-inner-spin-button {
+    display: none;
+}
+
+.crypto-action-page-transfer-crypto-input-coins-icon {
+    position: absolute;
+    top: 100px;
+    left: 35px;
+    font-size: 24px;
+    color: gray;
+    z-index: 1
+}
+
+.crypto-widget {
+    position: relative;
+    height: 151px;
+    color: #fff;
+    background: rgb(30, 30, 30) !important;
+}
+
+.crypto-graph {
+    display: flex;
+    position: relative;
+    top: 16px;
+    height: 100%;
+}
+
+.graph-info {
+    font-weight: bold;
+    margin-top: 18px;
+    align-self: flex-end;
+}
+
+.graph-arrow {
+    width: 0;
+    height: 0;
+    margin-top: 18px;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-bottom: 4px solid white;
+}
+
+
+.graph-info-big {
+    color: white;
+    font-size: 24px;
+}
+
+.crypto-graphic .graph-info-small {
+    position: relative;
+    bottom: 20px;
+    font-size: 12px;
+    font-weight: normal;
+}
+
+.graph-info-small {
+    font-size: 12px;
+    font-weight: normal;
+}
+
+.crypto-graphic h1 {
+    font-size: 25px;
+    position: relative;
+    bottom: 35px;
+    right: 20px;
+    color: white;
+    font-weight: bold
+}
+
+.crypto-graphic {
+    position: absolute;
+    top: 14em;
+    padding: 12px;
+    height: 25rem;
+    display: flex;
+    width: 90%;
+    flex-direction: column;
+    overflow: hidden;
+    padding: 20px;
+    border-bottom: 1px solid #212124;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+}
+
+.crypto-graphic .crypto-header-name {
+    position: relative;
+    bottom: 20px;
+    color: GRAY;
+}

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/html/css/apps/darkchat.css

@@ -0,0 +1,587 @@
+.darkchat-app {
+    background: black;
+}
+
+.darkchat-app header {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    /* Ajusta el relleno según sea necesario */
+}
+
+.circle-container {
+    display: flex;
+    align-items: center;
+    position: relative;
+    top: 20px;
+    font-size: 10px;
+}
+
+.circle-container h3 {
+    font-size: 16px;
+    text-transform: uppercase;
+    color: white;
+}
+
+.online-players-circle {
+    width: 12px;
+    /* Ajusta el tamaño del círculo según sea necesario */
+    height: 12px;
+    /* Ajusta el tamaño del círculo según sea necesario */
+    background-color: lightseagreen;
+    border-radius: 50%;
+    /* Esto crea un círculo al establecer el radio al 50% */
+    margin-right: 8px;
+    /* Espacio entre el círculo y el texto */
+    margin-top: 8px;
+}
+
+.darkchat-app footer {
+    background: #6443d4;
+    height: 60px;
+    width: 60px !important;
+    right: 20px;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    border-bottom-right-radius: 20px;
+}
+
+.darkchat-app footer i {
+    font-size: 27px;
+    color: white;
+}
+
+#darkchat-messages {
+    position: absolute;
+    top: 0;
+    padding-top: 110px !important;
+    width: 100%;
+    height: 87%;
+    padding: 18px;
+    font-size: 11px;
+    color: white;
+    overflow-y: auto;
+}
+
+#darkchat-sendMessageContainer {
+    position: absolute;
+    bottom: 5%;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+#darkchat-sendMessageContainer img {
+    position: relative;
+    right: 20px;
+    height: 35px !important;
+    cursor: pointer;
+}
+
+#darkchat-message-input {
+    background-color: #2a292b;
+    border: none;
+    margin-right: 10px;
+    color: white;
+    height: 55px;
+    width: 85%;
+    left: 18px;
+    position: relative;
+    border-radius: 25px;
+    padding-left: 20px;
+    padding-right: 70px;
+}
+
+#darkchat-message-send {
+    background-color: #6443d4;
+    border: none;
+    height: 40px;
+    width: 40px;
+    color: white;
+    position: relative;
+    right: 40px;
+    border-radius: 50%;
+}
+
+.darkchat-date {
+    font-size: 13px;
+    color: #808080;
+    margin-left: 208px;
+}
+
+.darkchat-message {
+    color: white;
+    font-size: 16px;
+}
+
+.darkchat-message-content {
+    margin-bottom: 15px;
+}
+
+#darkchat-message-container {
+    position: absolute;
+    display: none;
+    z-index: 999999999;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    background-color: #131214;
+}
+
+#darkchat-message-container #back-container {
+    position: relative;
+    margin-top: -10px;
+}
+
+#darkchat-message-container #back-container a {
+    font-size: 17px;
+    margin-top: 5px;
+}
+
+#darkchat-message-container #back-container img {
+    height: 25px;
+    margin-right: 5px;
+}
+
+.darkchat-app footer {
+    position: absolute;
+    color: white;
+    width: 100%;
+    bottom: 5%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#darkchat-container {
+    position: absolute;
+    width: 100%;
+    height: 90%;
+    top: 10%;
+    padding: 10px;
+    overflow: auto
+}
+
+.darkchat-content {
+    background: #414041;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding: 15px;
+    cursor: pointer;
+    margin-bottom: 15px;
+    border-radius: 20px;
+    transition: 0.3s;
+}
+
+.darkchat-content:hover {
+    background: #6443d4;
+}
+
+.circle-dark {
+    background-color: white;
+    color: black;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    font-weight: bold;
+    margin-right: 15px;
+    margin-left: 10px;
+    flex-shrink: 0;
+    /* Evita que se reduzca */
+}
+
+.darkchat-content h3 {
+    position: relative;
+    font-weight: bold;
+    font-size: 17px;
+    bottom: 5px;
+    color: lightgray;
+    /* Color del v.name */
+}
+
+.darkchat-content a {
+    position: relative;
+    font-size: 17px;
+    color: white;
+    /* Color del v.message */
+    opacity: 0.5;
+    bottom: 10px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.dark-complete-message {
+    width: 59%;
+    overflow: hidden;
+}
+
+.darkchat-content p {
+    position: relative;
+    bottom: 20px;
+    right: 5px;
+    color: white;
+    /* Color del v.message */
+    opacity: 0.5;
+    margin-left: auto;
+    /* Esto coloca el elemento a la derecha */
+    font-size: 13px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+#darkchat-container::-webkit-scrollbar,
+#darkchat-messages::-webkit-scrollbar {
+    display: none
+}
+
+#darkchat-plus {
+    cursor: pointer;
+}
+
+#darkchat-creategroup {
+    position: absolute;
+    top: 0;
+    display: none;
+    height: 100%;
+    width: 100%;
+}
+
+#darkchat-creategroup-bg {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1;
+}
+
+#darkchat-creategroup-contents a {
+    position: relative;
+    bottom: 20px;
+    font-size: 22px !important;
+}
+
+#darkchat-creategroup-contents {
+    z-index: 99999;
+    top: 30%;
+    padding: 10px;
+    position: absolute;
+    width: 89%;
+    height: 300px;
+    background-color: none;
+    border-radius: 20px;
+    margin-left: 22px;
+    text-align: center;
+}
+
+#darkchat-menu-pass-check-title {
+    background: white;
+    font-size: 16px;
+    color: black;
+    padding: 5px;
+    padding-top: 0;
+    padding-bottom: 22px;
+    border-radius: 10px;
+}
+
+#darkchat-menu-pass-check {
+    font-size: 16px;
+    color: gray;
+    margin-top: 10px;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+}
+
+#darkchat-groupassword2 {
+    font-size: 19px;
+    color: gray;
+}
+
+#darkchat-creategroup-contents li {
+    border-radius: 10px;
+    border: none;
+    background: rgba(0, 0, 0, 0.2);
+    margin-bottom: 60px;
+    height: 70px;
+}
+
+#darkchat-creategroup-contents li:last-child {
+    margin-bottom: 30px;
+}
+
+#darkchat-creategroup a {
+    font-size: 18px;
+    font-weight: bold;
+    color: white;
+}
+
+#darkchat-creategroup form {
+    position: relative;
+    bottom: 35px;
+    background: none;
+}
+
+.darkchat-app footer {
+    cursor: pointer
+}
+
+#darkchat-menu-name {
+    background: white;
+    font-size: 16px;
+    color: black;
+    padding: 5px;
+    padding-top: 0;
+    padding-bottom: 22px;
+    border-radius: 10px;
+}
+
+#darkchat-menu-pass {
+    background: white;
+    font-size: 16px;
+    color: black;
+    padding: 5px;
+    padding-top: 0;
+    padding-bottom: 22px;
+    border-radius: 10px;
+}
+
+#darkchat-menu-name-desc {
+    font-size: 16px;
+    color: gray;
+    margin-top: 10px;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+}
+
+#darkchat-menu-pass-desc {
+    font-size: 16px;
+    color: gray;
+    margin-top: 10px;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+}
+
+.form__group {
+    position: relative;
+    padding: 15px 0 0;
+    margin-top: 10px;
+    width: 100%;
+}
+
+.form__field {
+    width: 100%;
+    border: 0;
+    border-bottom: 2px solid #9b9b9b;
+    outline: 0;
+    font-size: 1.3rem;
+    color: black;
+    padding: 7px 0;
+    background: transparent;
+    transition: border-color 0.2s;
+}
+
+.form__field::placeholder {
+    color: transparent;
+}
+
+.form__field:placeholder-shown~.form__label {
+    font-size: 1.3rem;
+    cursor: text;
+    top: -24px;
+}
+
+.form__label {
+    position: relative;
+    top: 0;
+    display: block;
+    transition: 0.2s;
+    font-size: 1rem;
+    color: #9b9b9b;
+}
+
+.form__field:focus~.form__label {
+    position: absolute;
+    top: 0;
+    display: block;
+    transition: 0.2s;
+    font-size: 1rem;
+    color: #11998e;
+    font-weight: 700;
+}
+
+/* reset input */
+.form__field:required,
+.form__field:invalid {
+    box-shadow: none;
+}
+
+#darkchat-creategroup #options {
+    position: absolute;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    botom: 0;
+    height: 49px;
+    cursor: pointer;
+    width: 376px;
+    padding-top: 10px;
+    padding-left: 50px;
+    padding-right: 50px;
+    color: lightgray;
+    font-size: 18px;
+}
+
+#darkchat-groupname,
+#darkchat-groupassword {
+    font-size: 19px;
+    color: gray;
+}
+
+.form-style-7 ul {
+    background: #414041;
+    padding: 20px;
+    border-radius: 20px;
+    margin-top: -20px;
+}
+
+.form-style-7 {
+    position: relative;
+    right: 9px;
+    width: 105%;
+    margin: 50px auto;
+    background: var(--dark-background-color);
+    border-radius: 2px;
+}
+
+
+.form-style-7 li {
+    display: block;
+    padding: 9px;
+    border: 1px solid #dddddd;
+    border-radius: 3px;
+}
+
+.form-style-7 li:last-child {
+    border: none;
+    text-align: center;
+}
+
+.form-style-7 li>label {
+    display: block;
+    float: left;
+    background: #ffffff;
+    height: 19px;
+    color: #b9b9b9;
+    font-size: 14px;
+    overflow: hidden;
+}
+
+.form-style-7 input[type='text'],
+.form-style-7 input[type='date'],
+.form-style-7 input[type='datetime'],
+.form-style-7 input[type='email'],
+.form-style-7 input[type='number'],
+.form-style-7 input[type='search'],
+.form-style-7 input[type='time'],
+.form-style-7 input[type='url'],
+.form-style-7 input[type='password'],
+.form-style-7 textarea,
+.form-style-7 select {
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    width: 100%;
+    display: block;
+    outline: none;
+    border: none;
+    height: 25px;
+    line-height: 25px;
+    font-size: 12px;
+    padding: 0;
+
+}
+
+.form-style-7 li>span {
+    background: #f3f3f3;
+    display: block;
+    padding: 3px;
+    margin: 0 -9px -9px -9px;
+    text-align: center;
+    color: #c0c0c0;
+    font-size: 11px;
+}
+
+.form-style-7 textarea {
+    resize: none;
+}
+
+.form-style-7 input[type='submit'],
+.form-style-7 input[type='button'] {
+    background: #2471ff;
+    border: none;
+    padding: 10px 20px 10px 20px;
+    border-bottom: 3px solid #5994ff;
+    border-radius: 3px;
+    color: #d2e2ff;
+}
+
+.form-style-7 input[type='submit']:hover,
+.form-style-7 input[type='button']:hover {
+    background: #6b9fff;
+    color: #fff;
+}
+
+.darkchat-message-content {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 10px;
+}
+
+.user-info {
+    display: flex;
+    align-items: center;
+    margin-bottom: 5px;
+}
+
+.user-image {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    margin-right: 10px;
+}
+
+.user-details {
+    display: flex;
+    flex-direction: column;
+}
+
+.user-name {
+    font-weight: bold;
+    font-size: 14px;
+}
+
+.message-box {
+    background-color: #d3473b;
+    padding: 10px;
+    max-width: 85%;
+    border-bottom-left-radius: 15px;
+    border-bottom-right-radius: 15px;
+    border-top-right-radius: 15px;
+    margin-left: 50px;
+    margin-top: -8px;
+    word-wrap: break-word;
+}
+
+.darkchat-message-content+.darkchat-message-content {
+    margin-top: 10px;
+}

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/html/css/apps/darkweb.css

@@ -0,0 +1,169 @@
+.darkweb-header {
+    position: absolute;
+    width: 100%;
+    height: 118px;
+    top: 0;
+    left: 0;
+    color: rgb(243, 243, 243);
+}
+
+.darkweb-app {
+    background-image: url('https://i.ibb.co/2KQxNHw/Sin-titulo-1.webp');
+    background-size: cover;
+}
+
+.darkweb-app article {
+    position: relative;
+    top: 16.5%;
+    width: 50%;
+    margin: 0 auto;
+    text-align: center;
+    opacity: 0.6
+}
+
+.darkweb-app article h1 {
+    font-size: 40px;
+    color: white;
+}
+
+.darkweb-header-logo {
+    position: absolute;
+    top: 89%;
+    transform: translateY(-50%);
+    width: 60px;
+    height: 60px;
+    left: 20px;
+    border-radius: 50%;
+    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
+}
+
+.darkweb-header>p {
+    font-size: 21px;
+    line-height: 180px;
+    text-indent: 95px;
+    color: white;
+    font-weight: bold;
+}
+
+.darkweb-header>span {
+    position: absolute;
+    top: 105px;
+    left: 95px;
+    font-size: 18px;
+    color: white;
+}
+
+.darkweb2-list {
+    position: absolute;
+    background-color: #2a1b51;
+    width: 93%;
+    height: 68%;
+    right: 13px;
+    top: 35%;
+    border-top-left-radius: 18px;
+    border-top-right-radius: 18px;
+    overflow-y: scroll;
+    border: 2px solid rgba(255,255,255,0.5);
+    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+    padding-bottom: 50px;
+}
+
+.darkweb2-list::-webkit-scrollbar {
+    display: none;
+}
+
+.darkweb-list {
+    position: relative;
+    width: 90%;
+    height: 90px;
+    border-bottom: 1px solid #473575;
+    margin: 2.5%;
+}
+
+.darkweb-list:last-child {
+    border-bottom: none;
+}
+
+.darkweb-list-firstletter img {
+    position: absolute;
+    border-radius: 0 !important;
+    height: 65px;
+    width: 65px;
+    top: 20px;
+    left: 5px;
+    object-fit: cover;
+}
+
+.darkweb-list-fullname {
+    position: absolute;
+    top: 40%;
+    transform: translateY(-50%);
+    left: 90px;
+    font-size: 17px;
+    max-width: 190px;
+    white-space: nowrap;
+    overflow: hidden !important;
+    text-overflow: ellipsis;
+    color: rgb(255, 255, 255);
+}
+
+.darkweb-list-price {
+    position: absolute;
+    top: 70%;
+    transform: translateY(-50%);
+    left: 90px;
+    font-size: 16px;
+    text-align: center;
+    max-width: 70px;
+    min-width: 60px;
+    background-color: #27ae60;
+    border-radius: 3px;
+    white-space: nowrap;
+    overflow: hidden !important;
+    text-overflow: ellipsis;
+    color: rgb(255, 255, 255);
+}
+
+.darkweb-list-count {
+    position: absolute;
+    top: 70.5%;
+    transform: translateY(-50%);
+    left: 170px;
+    font-size: 17px;
+    text-align: center;
+    width: 40px;
+    height: 22px;
+    background-color: #00000033;
+    border-radius: 5px;
+    white-space: nowrap;
+    overflow: hidden !important;
+    text-overflow: ellipsis;
+    color: #fff;
+}
+
+.no-darkweb {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 15px;
+    margin: 0 auto;
+    left: 20px;
+    right: 0;
+    text-align: center;
+    max-width: 100%;
+    color: rgb(255, 255, 255);
+}
+
+.darkweb-list-call {
+    color: white;
+    position: absolute;
+    top: 35%;
+    right: 0;
+    font-size: 25px;
+    transition: .2s ease-in-out;
+}
+
+.darkweb-list-call:hover {
+    color: #8334b7;
+    cursor: pointer;
+}

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/html/css/apps/facetime.css

@@ -0,0 +1,161 @@
+.facetime-screen {
+    position: absolute;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--main-background-color);
+}
+
+#facetime-contact-list {
+    position: absolute;
+    margin-left: 10px;
+    flex-direction: column;
+    align-items: center;
+    align-content: center;
+    top: 30px;
+    width: 90%;
+    /* margin: 0 auto; */
+    height: auto;
+    overflow-y: auto;
+    display: flex;
+}
+
+.facetime-contact {
+    width: 100%;
+    margin-left: 18px;
+    height: 50px;
+    display: none;
+    align-items: center;
+    background-color: var(--container-dark-background-color);
+    color: #48bb78;
+    cursor: pointer;
+    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
+        rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
+    transition: all 0.4s;
+}
+
+.facetime-contact:hover {
+    background-color: #48bb78;
+    color: #ccc;
+    border-radius: 5px;
+}
+
+.facetime-contact img {
+    margin-left: 5px;
+    width: 40px;
+    height: 40px;
+    border-radius: 100%;
+}
+
+.facetime-contact a {
+    margin-left: 5px;
+}
+
+.facetime-fast-call-button {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 9999px;
+    width: 44px;
+    height: 44px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.facetime-fast-call-button.ongoing {
+    width: 54px;
+    height: 54px;
+}
+
+.facetime-fast-call-button i {
+    font-size: 20px;
+    color: #fff;
+}
+
+.facetime-fast-call-button.ongoing i {
+    font-size: 20px;
+    color: #fff;
+}
+
+.facetime-fast-call-button[data-type="microphone"].active {
+    background: #ff2a1b;
+}
+
+.facetime-fast-call-button[data-type="speaker"].active {
+    background: #3cb7e7;
+}
+
+.facetime-fast-call-button[data-type="video"].active {
+    background-color: #fff;
+}
+
+.facetime-fast-call-button[data-type="video"].active i {
+    color: #000;
+}
+
+.facetime-fast-call-button[data-type="video"].waiting {
+    animation: pulse 2s infinite;
+}
+
+.facetime-fast-call-button.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+#facetime-current-call-page {
+    transform: translateY(-100%);
+}
+
+#facetime-current-call-page.active {
+    transform: translateY(0%);
+}
+
+#face-time-icon {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    align-content: center;
+    align-self: end;
+    height: 3rem;
+    border-radius: 20px;
+    background-color: #48bb78;
+    transform: scale(0);
+    font-size: 16px;
+    font-weight: 600;
+    padding: 0 1.8em;
+    cursor: pointer;
+    transition: ease all 0.2s;
+    position: absolute;
+    top: 2rem;
+    left: 3rem;
+    z-index: 99999999999999999;
+}
+
+#face-time-icon i {
+    font-size: 1.7rem;
+    color: #fff;
+}
+
+#face-time-icon.active {
+    transform: scale(1);
+    transition: ease all 0.2s;
+}
+
+#phone-device-screen:has(#face-time-icon.active) #phone-time {
+    scale: 0;
+    opacity: 0;
+}
+
+#facetime-current-call-name {
+    max-width: 120px;
+    white-space: normal;
+    overflow-wrap: break-word;
+    word-break: break-word;
+}

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/html/css/apps/gallery.css

@@ -0,0 +1,777 @@
+.photos-app {
+	padding-top: 4rem;
+}
+
+.photos-container {
+	position: relative;
+	height: 100%;
+}
+
+.photo-footer {
+	position: relative;
+	top: 10px;
+	font-size: 17px;
+	cursor: pointer
+}
+
+.photo-footer .fa-arrow-up-from-square {
+	font-size: 23px;
+}
+
+.photo-footer .fa-floppy-disk {
+	font-size: 24px;
+}
+
+.photos-footer {
+	position: absolute;
+	bottom: 0;
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+	width: 100%;
+	height: 85px;
+	padding: 8px 16px 24px 16px;
+	background: var(--main-background-color);
+}
+
+.photo-opt-back {
+	background-color: var(--border-color) !important;
+}
+
+.photos-footer-button {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: space-between;
+	font-size: 26px;
+	z-index: 60;
+	color: gray;
+	cursor: pointer
+}
+
+.gallery-other-images-swiper {
+	position: relative;
+	top: 10px;
+	height: 7rem;
+}
+
+.gallery-other-images-swiper :is(img, video) {
+	height: inherit;
+	object-fit: cover;
+}
+
+.photos-footer-button-selected {
+	color: var(--blue-text);
+}
+
+.photos-footer-button-selected p {
+	color: var(--blue-text) !important;
+}
+
+.photos-footer-button p {
+	white-space: nowrap;
+	font-size: 14px;
+	padding: 3px;
+	margin: 0 !important;
+	color: gray;
+}
+
+.photos-content {
+	flex: 1;
+	display: flex;
+	position: relative;
+	top: 15px;
+}
+
+.photos-image-item {
+	position: relative;
+}
+
+.photos-image-item :is(video, img) {
+	max-width: 100%;
+}
+
+.photos-content[data-showing="year"] {
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+}
+
+.photos-content[data-showing="year"] .photos-image-item {
+	position: relative;
+	margin: 16px;
+}
+
+.photos-content[data-showing="year"] .photos-image-item span {
+	position: absolute;
+	padding: 16px;
+	width: 100%;
+	color: white;
+	border-radius: 16px 16px 0 0;
+	background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
+	font-weight: bold;
+	letter-spacing: 2px;
+	color: white;
+	font-weight: bold;
+	text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
+	font-size: 35px;
+	pointer-events: none;
+}
+
+.photos-content[data-showing="year"] .photos-image-item :is(video, img) {
+	border-radius: 16px;
+}
+
+.photos-content[data-showing="month"] {
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+}
+
+.photos-content[data-showing="month"] .photos-image-item {
+	position: relative;
+	margin: 16px;
+}
+
+.photos-content[data-showing="month"] .photos-image-item :is(video, img) {
+	border-radius: 16px;
+}
+
+.photos-content[data-showing="month"] .photo-img-title {
+	color: var(--text-color);
+	font-weight: bold;
+	font-size: 32px;
+	position: relative;
+	bottom: 20px;
+}
+
+.photos-content[data-showing="month"] .photo-img-details-date-included {
+	position: absolute;
+	top: 0;
+	display: flex;
+	flex-direction: column;
+	padding: 40px 0px;
+	color: white;
+	font-weight: bold;
+	text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
+	margin: 16px;
+	font-size: 25px;
+	pointer-events: none;
+}
+
+.photos-content[data-showing="month"] .photo-img-details {
+	position: absolute;
+	top: 0;
+	display: flex;
+	flex-direction: column;
+	color: white;
+	font-weight: bold;
+	text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
+	margin: 16px;
+	font-size: 25px;
+	pointer-events: none;
+}
+
+.photos-content[data-showing="month"] .photo-img-details-date {
+	font-size: 18px;
+	font-weight: 100;
+	margin-top: 3px;
+	pointer-events: none;
+}
+
+.photos-content[data-showing="day"] {
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.photos-content[data-showing="day"] .photos-image-item {
+	position: relative;
+}
+
+.photos-content[data-showing="day"] .photos-image-item span {
+	position: absolute;
+	top: 0;
+	color: white;
+	font-weight: bold;
+	text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
+	margin: 16px;
+	font-size: 25px;
+}
+
+.photos-content[data-showing="all"] {
+	display: grid;
+	gap: 3px;
+	grid-template-columns: repeat(3, max-content);
+	justify-content: stretch;
+	padding-bottom: 16px;
+}
+
+.photos-content[data-showing="all"] .photos-image-item {
+	flex: 1 0 24%;
+}
+
+.photos-content[data-showing="all"] :is(img, video) {
+	width: 137px;
+	height: 137px;
+}
+
+.photos-app-page {
+	display: none;
+	width: 99%;
+	margin: 0 auto;
+	height: 730px;
+	padding-bottom: 75px;
+	overflow: auto;
+}
+
+.photos-app-page header {
+	position: relative;
+	top: 10px;
+}
+
+.photos-app-page-active {
+	display: block;
+}
+
+.photos-app-page::-webkit-scrollbar-thumb,
+.photos-content::-webkit-scrollbar-thumb,
+.photos-app-page::-webkit-scrollbar,
+.photos-content::-webkit-scrollbar {
+	width: 0px;
+}
+
+#photo-interaction-container button {
+	position: relative;
+	font-size: 15px;
+	width: auto;
+	border-radius: 10px;
+	right: 5px;
+}
+
+#photo-interaction-container {
+	position: relative;
+	top: 3px;
+	width: 99%;
+	height: auto;
+	margin: 0 auto
+}
+
+.photos-range-wrapper {
+	position: absolute;
+	width: 94%;
+	left: 50%;
+	transform: translateX(-50%);
+	bottom: 108px;
+	padding: 0.7rem 1rem;
+	background-color: var(--container-gallery-background-color);
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	place-items: center;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	font-weight: bold;
+	border-radius: 20px;
+}
+
+.photos-range {
+	background: var(--dark-background-color);
+	color: var(--text-color);
+	padding: 8px;
+	z-index: 80;
+}
+
+.photos-range .filter-background {
+	left: 0;
+}
+
+.photos-range p {
+	z-index: 60;
+}
+
+.photos-range-selected {
+	color: white;
+	background: gray;
+	padding: 4px 16px;
+	border-radius: 16px;
+}
+
+
+.photos-app-page[data-page="albums"] {
+	position: relative;
+	overflow: hidden;
+}
+
+.photos-album-content {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	left: 5px;
+	padding: 0 22px 0px 10px;
+	overflow: auto;
+}
+
+.photos-album-content::-webkit-scrollbar,
+.photos-album-content::-webkit-scrollbar-thumb {
+	width: 0px;
+}
+
+.zoomable-image {
+	object-fit: cover;
+}
+
+.photos-content .zoomable-image {
+	object-fit: cover;
+}
+
+.photos-foryou-container .zoomable-image {
+	height: 400px !important;
+	border-radius: 15px;
+}
+
+.photos-album-content .photos-image-item :is(video, img) {
+	border-radius: 8px;
+	margin-bottom: 20px;
+}
+
+.photos-album-content .photos-image-item span {
+	position: relative;
+	bottom: 15px;
+	left: 4px;
+	text-transform: capitalize;
+	color: var(--text-color);
+	font-size: 15px;
+}
+
+.photos-album-content-container {
+	position: absolute;
+	padding: 32px 6px 108px;
+	top: 0px;
+	overflow: auto;
+	background: var(--main-background-color);
+	width: 100%;
+	height: 100%;
+	transform: translateX(-100%);
+	z-index: 70;
+}
+
+#photos-album-content-header {
+	position: relative;
+	top: 40px;
+	font-size: 17px;
+	width: 98%;
+	margin: 0 auto;
+	height: 80px;
+}
+
+#cancel-image-container,
+#cancel-album-container {
+	cursor: pointer
+}
+
+#cancel-image-container {
+	position: relative;
+	font-size: 16px;
+	left: 10px;
+}
+
+.photos-app #phone-image-container-header {
+	position: relative;
+	top: 50px;
+	font-size: 17px;
+	width: 94%;
+	margin: 0 auto;
+	height: 80px;
+}
+
+.phone-image-container #phone-image-container-header-text {
+	position: relative;
+	font-size: 18px;
+	width: 200px;
+	left: 70px;
+}
+
+.photos-app #phone-image-container-header-text {
+	font-size: 17px;
+}
+
+.photos-app #phone-image-container-header-text .block {
+	position: relative;
+	top: 0px;
+	font-size: 16px;
+	font-weight: bold;
+}
+
+.photos-app #phone-image-container-header-text a {
+	position: relative;
+	top: 5px;
+	font-weight: 100;
+}
+
+#photos-search-bar-input {
+	color: rgb(0,0,0, 0.7);
+}
+
+.photos-search-bar {
+	position: relative;
+	width: 100%;
+	display: flex;
+	align-items: center;
+	position: relative;
+	padding: 8px;
+	height: 50px;
+}
+
+.photos-search-bar textarea {
+	background: var(--second-border-color);
+	height: 40px;
+	border: none;
+	border-radius: 10px;
+	width: 100%;
+	padding: 9px 20px 4px 38px;
+	font-size: 17px;
+	outline: none;
+	resize: none;
+	color: lightgray;
+	overflow: hidden;
+}
+
+.photos-search-bar .fa-search {
+	position: absolute;
+	margin: 10px;
+	top: 7px;
+	font-size: 18px;
+	color: gray;
+}
+
+.photos-search-bar .fa-times-circle {
+	position: absolute;
+	text-align: right;
+	right: 16px;
+}
+
+.photos-foryou-container {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	bottom: 30px;
+}
+
+span.photos-foryou-header {
+	position: relative;
+	font-size: 18px;
+	height: 75px;
+	line-height: 90px;
+	text-align: center;
+	font-weight: bold;
+	border-bottom: 1px solid var(--border-light-color);
+}
+
+span.photos-foryou-title {
+	font-size: 19px;
+	margin: 20px 12px;
+	font-weight: bold;
+}
+
+.photos-foryou-title,
+.photos-foryou-title {
+	position: relative;
+	top: 10px;
+}
+
+.slick-list img {
+	background: red;
+	height: 370px;
+	border-radius: 15px;
+}
+
+:root {
+	--img-width: 276px;
+}
+
+.photos-foryou-container .photos-image-item :is(video, img) {
+	width: var(--img-width) !important;
+}
+
+.photos-foryou-container .photos-image-item {
+	width: var(--img-width) !important;
+	padding: 0 6px;
+}
+
+/* Phone Image Zoom */
+
+.image-rotate-cover {
+	display: none;
+	transform: rotate(90deg);
+	width: 653px;
+	height: 30px;
+	position: absolute;
+	top: 276px;
+	left: -80px;
+	z-index: 60;
+}
+
+.phone-image-container {
+	position: absolute;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 100%;
+	top: 0;
+	transform: translateX(-100%);
+	border-radius: 10px;
+	overflow: hidden;
+	z-index: 150;
+	background-color: var(--main-background-color);
+}
+
+.phone-select-photo-container,
+.phone-select-gallery-container {
+	position: absolute;
+	display: none;
+	flex-direction: column;
+	height: 100%;
+	width: 100%;
+	top: 0;
+	right: -100%;
+	border-radius: 10px;
+	overflow: hidden;
+	z-index: 140;
+	background-color: var(--main-background-color);
+}
+
+.phone-video-container {
+	position: absolute;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 100%;
+	top: 0;
+	right: -100%;
+	border-radius: 10px;
+	overflow: hidden;
+	z-index: 140;
+	background-color: var(--main-background-color);
+}
+
+.app-header-rotated {
+	transform: rotate(90deg);
+	width: 496.26px;
+	top: 271.105px;
+	z-index: 60;
+	background: var(--main-background-color);
+	height: 18.38px;
+	position: absolute;
+	display: grid;
+}
+
+.image-rotated {
+	width: 100%;
+	height: 100%;
+	transform: rotate(90deg);
+	object-fit: contain;
+	position: absolute;
+	z-index: 50;
+}
+
+.phone-image-source-container {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	transform-origin: 0 0 0;
+	transition: transform 0.3s ease-in-out;
+	transform: translate(0, 0) scale(1);
+}
+
+.phone-image-source-container-child {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+}
+
+.phone-image-source-container-child figure {
+	height: 100%;
+	width: 100%;
+}
+
+.phone-image-source-rotated {
+	transform: rotate(90deg);
+}
+
+.phone-image-source {
+	position: absolute;
+	width: 450px;
+	height: 685px;
+	transition: transform 0.5s ease-in-out;
+}
+
+#phone-video-source {
+	position: absolute;
+	width: 100%;
+	height: 58%;
+	top: 15%;
+	object-fit: fill;
+}
+
+.gallery-item {
+	cursor: pointer;
+	height: 70px;
+	width: 70px;
+}
+
+.gallery-widget {
+	background-position: center center;
+	background-size: cover;
+	background-repeat: no-repeat;
+}
+
+#phone-media-share {
+	display: flex;
+	opacity: 0;
+	transform: translateY(100%);
+	transition: all 0.3s ease-in-out;
+	background: var(--main-background-color-reminders);
+}
+
+#phone-media-share.up {
+	opacity: 1;
+	transform: translateY(0);
+}
+
+#photos-range-divider {
+	position: absolute;
+	background-color: rgba(0, 0, 0, 0.3);
+	bottom: 0px;
+	transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
+	border-radius: 12px;
+	border-radius: 20px;
+	z-index: -1;
+}
+
+.photo-range-item {
+	font-size: 14px;
+	transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
+	padding: 7px 12px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	max-width: 100px;
+}
+
+.photo-range-item.current {
+	color: white;
+}
+
+.photo-interaction {
+	background-color: var(--second-border-color);
+	pointer-events: all;
+	padding: 0.5rem 1rem;
+	z-index: 99999999;
+	font-size: 14px;
+	border-radius: 9999px;
+	cursor: pointer;
+	color: var(--text-color);
+}
+
+#photo-select-footer {
+	padding: 2.6rem 16px 4rem 16px;
+}
+
+.my-albums {
+	position: relative;
+	left: 8px;
+}
+
+#photos-my-albums {
+	position: relative;
+	width: 100%;
+	top: 10px;
+	margin: 0 auto;
+	left: 8px;
+}
+
+.photo-tick {
+	position: absolute;
+	right: 10px;
+	bottom: 13px;
+	color: white;
+	z-index: 999;
+	background-color: #1e7ee5;
+	border-radius: 50%;
+	width: 24px;
+	height: 24px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.photo-tick i {
+	color: #fff;
+	position: relative;
+	top: 3px;
+	font-size: 14px;
+}
+
+#new-album {
+	width: 45%;
+	height: 190px;
+	border-radius: 6px;
+}
+
+.phone-gallery-media {
+	height: 580px !important;
+	position: relative;
+	margin-bottom: 35px;
+	margin-right: 150px;
+}
+
+#photos-add-to-album {
+	position: absolute;
+	height: 93%;
+	transform: translateY(100%);
+	transition: transform 0.3s ease-in-out;
+	box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
+}
+
+#photos-add-to-album header {
+	height: 6%;
+}
+
+#photos-add-to-album.up {
+	transform: translateY(0);
+}
+
+#gallery-photo-list {
+	display: flex;
+	align-items: center;
+}
+
+#gallery-photo-list :where(img, video) {
+	width: 100%;
+	height: 100%;
+	transition: all .4s;
+}
+
+.box-gallery-option {
+	background: var(--main-superficial-color);
+	box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
+	height: 50px;
+}
+
+.box-gallery-option a,
+.box-gallery-option i {
+	padding: 5px;
+}
+
+.box-gallery-option-group {
+	background: var(--main-superficial-color);
+	box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
+	height: 100px;
+}
+
+.box-gallery-option-group div { 
+	height: 50px;
+	margin: 5px;
+}

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/html/css/apps/garage.css

@@ -0,0 +1,173 @@
+.garage-app-header {
+    height: 90px;
+    width: 100%;
+    text-align: left;
+    width: 90%;
+    margin: 0 auto;
+    line-height: 159px;
+    font-size: 18px;
+    font-weight: bold;
+}
+
+#garage-cars-page {
+    background: #0e0f11;
+}
+
+#garage-garages-page {
+    background: #0e0f11;
+}
+
+#garage-vehicles {
+    position: relative;
+    width: 96%;
+    top: 28px;
+    max-height: 567px;
+    padding-bottom: 10px;
+    margin: 0 auto;
+}
+
+.garage-vehicle .disabled,
+.garage-vehicle .disabled button {
+    cursor: not-allowed;
+}
+
+#garage-list {
+    width: 96%;
+    margin: 0 auto;
+    position: relative;
+    top: 10px;
+    max-height: 88.5%;
+    padding-bottom: 10px;
+}
+
+.garage-search-button {
+    width: 96% !important;
+    margin: 0 auto !important;
+    height: 40px;
+    background: #1d1e20 !important;
+    color: gray;
+}
+
+.garage-second-button {
+    display: flex; /* Usamos flexbox para el contenedor */
+    align-items: center; /* Alinea verticalmente el contenido */
+    justify-content: space-between; /* Coloca los elementos a los extremos */
+    position: relative;
+    top: 17px;
+    width: 96% !important;
+    margin: 0 auto !important;
+    background: linear-gradient(to right, #15304d, #102541) !important;
+    height: 50px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.garage-second-button a {
+    color: #3473c9;
+}
+
+.garage-second-button i {
+    color: #3473c9;
+}
+
+/* Ajusta el espaciado entre el texto y el emoticono según sea necesario */
+.garage-second-button a {
+    margin-right: 10px;
+}
+
+#garage-name {
+    color: white;
+}
+
+.garage-vehicle {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 24px;
+    border-radius: 16px;
+    background-color: #1d1e20;
+    transition: all 0.08s linear 0s;
+    cursor: pointer;
+    margin-bottom: 5px;
+}
+
+.garage-vehicle button {
+    border-radius: 10px;
+}
+
+.garage-vehicle .font-semibold {
+    color: white;
+    font-size: 18px
+}
+
+.garage-vehicle .justify-between {
+    position: relative;
+    bottom: 5px;
+}
+
+.garage-vehicle footer {
+    display: flex;
+    justify-content: center;
+    position: relative;
+    top: 5px;
+    color: white;
+}
+
+.garage-vehicle footer span {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    padding: 10px;
+    background-color: #2c3e50;
+    border-radius: 10px;
+}
+
+.garage-vehicle footer span i {
+    flex-shrink: 0;
+}
+
+.garage-vehicle footer span a {
+    color: inherit;
+    text-decoration: none;
+}
+
+.garage-vehicle-first-letter {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 3rem;
+    font-weight: 700;
+    background-color: lightgray;
+    width: 46px;
+    height: 46px;
+    color: black;
+    margin-right: 8px;
+    border-radius: 9999px;
+    transition: all 0.05s linear 0s;
+}
+
+#garage-footer {
+    border-top: 1px solid #1d1e20;
+    background: #0e0f11;
+    padding-bottom: 15px;
+}
+
+#garage-footer a {
+    font-size: 14px;
+    padding-top: 2px;
+}
+
+.garage-footer-icon {
+    color: #777;
+    cursor: pointer;
+}
+  
+.garage-footer-icon.current {
+    color: var(--blue-text);
+}
+
+.garage-footer-icon + a {
+    color: gray;
+}

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/html/css/apps/health.css

@@ -0,0 +1,85 @@
+#health-settings {
+    top: 8%;
+    transform: translateY(100%);
+    transition: 0.5s;
+    opacity: 0.5;
+    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
+}
+
+#health-settings.active {
+    transform: translateY(0%);
+    opacity: 1;
+}
+
+#health-settings header a {
+    position: relative;
+    bottom: 5px;
+    font-weight: 100;
+}
+
+#health-settings header i {
+    top: 20px;
+    right: 20px;  
+}
+
+.health-app-header {
+    position: relative;
+    top: 6px;
+}
+
+.health-app-header i {
+    position: relative;
+    right: 12px;
+}
+
+
+.health-app-header a {
+    position: relative;
+    width: 90%;
+    font-size: 19px;
+    height: 25px;
+    font-weight: bold;
+    left: 12px;
+}
+
+.health-app-content {
+    position: relative;
+    top: 5px;
+    width: 97%;
+    margin: 0 auto;
+}
+
+.health-app-content header {
+    position: relative;
+    font-size: 18px;
+    padding: 5px;
+}
+
+.health-app-content header a {
+    position: relative;
+    left: 5px;
+}
+
+.health-app-content section {
+    position: relative;
+    height: 100px;
+    margin-bottom: 15px;
+}
+
+.health-app-content section footer a {
+    position: relative;
+    margin-left: 5px;
+    top: 15px;
+}
+
+#health-form {
+    width: 95%;
+    margin: 0 auto;
+    height: 84%;
+}
+
+#health-thirsty-notice-value-container a,
+#health-hungry-notice-value-container a,
+#health-health-notice-value-container a {
+    font-size: 16px;
+} 

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/html/css/apps/houses.css

@@ -0,0 +1,59 @@
+.houses-app section {
+  position: absolute;
+  z-index: 1;
+}
+
+.houses-app * {
+  color: #fff;
+}
+
+
+#houses-app-bg {
+  background-image: url(../../img/houses/bg.jpg);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  opacity: 1;
+  filter: brightness(0.2) blur(0.5px);
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+}
+
+.house-item-bg {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+#house-list {
+  height: 83%;
+}
+
+.house-action {
+  background-color: rgba(255, 255, 255, 0.1);
+  height: 19rem;
+  transition: all 0.3s;
+}
+
+.house-action:hover {
+  background-color: rgba(255, 255, 255, 0.3);
+  cursor: pointer;
+}
+
+.house-action-icon {
+  width: 6rem;
+  height: 6rem;
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.house-key-action {
+  height: 9rem;
+}
+
+#house-key-action-list {
+  max-height: 68%;
+  overflow: auto;
+}

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/html/css/apps/jobcenter.css

@@ -0,0 +1,96 @@
+.jobcenter-app {
+    display: none;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 95) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(240, 240, 240, 0.85) 100%)
+}
+
+.jobcenter-header {
+    background: #ef2c3c;
+    height: 12%;
+}
+
+.jobcenter-header a {
+    position: relative;
+    top: 65%;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    font-size: 19px;
+    color: white;
+    font-weight: bold;
+}
+
+#jobcenter-header-img {
+    position: absolute;
+    width: 85%;
+    max-width: 600px; /* Puedes ajustar el tamaño máximo según tus preferencias */
+    top: 29%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    overflow: hidden; /* Para asegurar que la imagen no se desborde del contenedor */
+}
+
+#jobcenter-header-img img {
+    width: 100%;
+    height: auto; /* Mantener la proporción de aspecto */
+    display: block; /* Asegurar que la imagen esté centrada verticalmente */
+    margin: 0 auto; /* Centrar la imagen horizontalmente */
+}
+
+.jobcenter-list {
+    position: absolute;
+    width: 90%;
+    height: 80%;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    top: 44.5%;
+    height: 470px;
+    padding-top: 19px;
+    overflow-y: scroll;
+}
+
+.jobcenter-list::-webkit-scrollbar {
+    display: none;
+}
+
+.jobcenter-class-body-job {
+    color: black;
+    background: white;
+    transition: 0.3s;
+    width: 95%;
+    text-align: left;
+    padding-left: 25px;
+    line-height: 60px;
+    margin-left: 2%;
+    margin-bottom: 4%;
+    border-radius: 30px;
+    height: 60px;
+    font-size: 18px;
+    font-weight: bold;
+    cursor: pointer;
+    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+}
+.jobcenter-class-body-job:hover{
+    background: #ef2c3c;
+    color: white;
+}
+
+.jobcenter-showitems-other {
+    margin-top: 2px;
+    margin-left: 60%;
+    position: absolute;
+    display: initial;
+    visibility: hidden;
+}
+
+#jobcenter-icon-class {
+    padding-left: 15px;
+    font-size: 25px;
+    color: white;
+}
+.jobcenter-class-body-job:hover .jobcenter-showitems-other {
+    visibility: visible;
+}

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/html/css/apps/mail.css

@@ -0,0 +1,722 @@
+.mail-home {
+    position: relative;
+    left: 0;
+}
+
+.mail-screen {
+    position: absolute;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--main-background-color);
+}
+
+#mail-login-screen img {
+    position: absolute;
+    top: 105px;
+    height: 120px;
+}
+
+#mail-login-screen h1 {
+    position: relative;
+    bottom: 35px;
+    font-weight: bold;
+    text-align: center;
+}
+
+#mail-login-screen h2 {
+    position: relative;
+    bottom: 50px;
+    font-size: 15px;
+    font-weight: 100;
+    padding-left: 30px;
+    padding-right: 30px;
+    text-align: center;
+}
+
+#mail-login-screen footer {
+    position: relative;
+    bottom: 7px;
+}
+
+#mail-register-firstscreen img {
+    position: relative;
+    bottom: 150px;
+    height: 120px;
+}
+
+#mail-register-firstscreen h1 {
+    position: relative;
+    bottom: 175px;
+    font-weight: bold;
+    text-align: center;
+}
+
+#mail-register-firstscreen a {
+    position: relative;
+    bottom: 165px;
+    font-size: 16px;
+    padding-left: 30px;
+    padding-right: 30px;
+    text-align: center;
+}
+
+.mail-app .instagram-blue-button {
+    height: 45px !important;
+    border-radius: 10px;
+}
+
+#mail-register-firstscreen .instagram-blue-button {
+    position: relative;
+    top: 260px;
+    height: 50px !important;
+}
+
+#mail-register-screen-third input,
+#mail-register-screen-second input {
+    width: 90% !important;
+}
+
+.mail-add-your-pass,
+.mail-add-your-name {
+    position: relative;
+    bottom: 10px;
+}
+
+#mail-forgot-password-accounts {
+    position: relative;
+    top: 25px;
+    width: 95%;
+    margin: 0 auto;
+}
+
+.mail-login-acc {
+    position: relative;
+    top: 160px;
+    font-size: 18px;
+    font-weight: bold;
+}
+
+.mail-image-media h3 {
+    font-size: 18px;
+    margin-bottom: 15px;
+}
+
+#mail-forgot-password-accounts article {
+    height: 65px;
+    border-bottom: 1px solid var(--border-light-color);
+}
+
+#mail-forgot-password-accounts article:last-child {
+    border-bottom: none;
+}
+
+.mail-login-form input {
+    width: 86% !important;
+}
+
+.mail-login-form a {
+    position: relative;
+    right: 30px;
+}
+
+.mail-login-form button {
+    position: relative;
+    width: 86%;
+    height: 48px;
+    color: var(--invert-text-color);
+}
+
+.mail-login-form-text p {
+    font-size: 16px;
+    color: gray;
+}
+
+.mail-header {
+    display: block;
+    position: relative;
+    width: 95%;
+    margin: 0 auto;
+    padding-bottom: 1rem;
+}
+
+.mail-header i {
+    position: relative;
+    bottom: 20px;
+    font-size: 22px;
+    color: var(--blue-text);
+}
+
+#mail-header-text {
+    font-size: 30px;
+    font-weight: 600;
+}
+
+#mail-header-mail {
+    position: relative;
+    top: 4px;
+    font-size: 15px;
+    max-width: 340px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+#mail-header-lastsync {
+    position: absolute;
+    right: 14px;
+    font-size: 10px;
+    color: #6666;
+}
+
+.mail-list {
+    flex: 1;
+    position: relative;
+    height: 68%;
+    width: 100%;
+    top: 20px;
+    overflow-x: hidden !important;
+    overflow-y: scroll;
+}
+
+.mail-list::-webkit-scrollbar {
+    display: none;
+}
+
+.mail {
+    position: relative;
+    height: 90px;
+    width: 100%;
+    transition: 0.05s ease-in-out;
+    border-bottom: 1px solid var(--border-color);
+    cursor: pointer;
+}
+
+.mail.unreaded .mail-sender {
+    color: var(--blue-text);
+}
+
+.mail-sender {
+    position: absolute;
+    font-size: 16px;
+    left: 30px;
+    top: 10px;
+    width: 180px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.mail-text {
+    position: absolute;
+    top: 38px;
+    left: 30px;
+    font-size: 15px;
+    max-width: 375px;
+    width: 375px;
+    height: 45px;
+}
+
+.mail-text > p {
+    white-space: nowrap;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    white-space: normal;
+    color: gray;
+}
+
+.mail-time {
+    position: absolute;
+    font-size: 16px;
+    right: 20px;
+    top: 10px;
+    color: gray;
+}
+
+.opened-mail {
+    display: none;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background: var(--container-dark-background-color);
+    overflow: hidden;
+    top: 0;
+    left: -100%;
+    z-index: 30;
+    padding-bottom: 10px;
+}
+
+.opened-mail-header {
+    display: block;
+    height: 85%;
+    width: 100%;
+    position: relative;
+    overflow: auto;
+    top: 6%;
+    background: var(--container-dark-background-color);
+}
+
+.mail-back {
+    position: absolute;
+    top: 17px;
+    left: 17px;
+}
+
+.mail-back > i {
+    font-size: 20px;
+    transition: 0.05s ease-in-out;
+}
+
+.mail-title {
+    position: absolute;
+    top: 40px;
+    left: 19px;
+    width: 70%;
+}
+
+.mail-title h1 {
+    font-size: 33px;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.mail-subject {
+    position: absolute;
+    top: 120px;
+    left: 19px;
+    height: 28px;
+    font-size: 17px;
+    width: 90%;
+    border-bottom: 1px solid var(--second-border-color);
+}
+
+.opened-mail-header .mail-sender {
+    position: absolute;
+    top: 160px;
+    left: 19px;
+    height: 28px;
+    font-size: 17px;
+    width: 90%;
+    border-bottom: 1px solid var(--second-border-color);
+}
+
+.mail-date span,
+.mail-subject span,
+.mail-sender span {
+    color: gray;
+}
+
+.mail-sender p {
+    color: var(--blue-text);
+}
+
+.mail-subject > p {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.mail-date {
+    position: absolute;
+    top: 200px;
+    left: 19px;
+    height: 28px;
+    font-size: 17px;
+    width: 90%;
+}
+
+.mail-spacing {
+    position: absolute;
+    width: 90%;
+    background-color: var(--second-border-color);
+    height: 1.3px;
+    top: 230px;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    border-radius: 184px;
+}
+
+.mail-content {
+    position: absolute;
+    top: 256px;
+    left: 20px;
+    height: 260px;
+    width: 90%;
+    font-size: 16px;
+    overflow-y: scroll;
+    border-bottom: 1px solid var(--dark-background-color);
+    white-space: pre-line;
+}
+
+#send-mail-container footer {
+    position: relative;
+    width: 400px;
+    margin: 0 auto;
+    right: 6px;
+}
+
+#send-mail-container .mail-media {
+    border-radius: 4px !important;
+}
+
+.empty-media {
+    cursor: pointer;
+}
+
+#send-mail-container .relative i {
+    margin-top: 5px;
+    margin-right: 7px;
+}
+
+.mail-content p {
+    color: var(--text-color);
+}
+
+.mail-content::-webkit-scrollbar {
+    display: none;
+}
+
+#mail-settings .twitter-footer-icon.current,
+#mail-settings .twitter-footer-icon.current + p,
+#mail-home .twitter-footer-icon.current,
+#mail-home .twitter-footer-icon.current + p {
+    color: var(--blue-text);
+    display: block;
+}
+
+#mail-home,
+#mail-settings {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#mail-home p,
+#mail-settings p {
+    position: relative;
+    top: 10px;
+    font-size: 14px;
+    width: 80px;
+    text-align: center;
+}
+
+#mail-footer {
+    background: var(--container-dark-background-color);
+}
+
+.mail-content > p {
+    white-space: nowrap;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 100;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    white-space: normal;
+}
+
+.opened-mail-footer {
+    position: absolute;
+    width: 100%;
+    height: 87px;
+    border-top: 1px solid var(--second-border-color);
+    background-color: var(--main-background-color);
+    bottom: 0;
+}
+
+.opened-mail-footer-item {
+    position: relative;
+    width: 50%;
+    height: 80px;
+    text-align: center;
+    top: 11px;
+    font-size: 20px;
+    transition: 0.1s ease-in-out;
+    float: left;
+    text-align: center;
+}
+
+.opened-mail-footer-item span {
+    display: block;
+    margin-top: 5px;
+    font-size: 14px;
+    cursor: pointer;
+}
+
+.opened-mail-footer-item:hover .mail-icon {
+    transition: 0.1s ease-in-out;
+    animation: Shake 1s infinite;
+}
+
+@keyframes Shake {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    25% {
+        transform: rotate(-5deg);
+    }
+
+    50% {
+        transform: rotate(5deg);
+    }
+
+    75% {
+        transform: rotate(-5deg);
+    }
+
+    100% {
+        transform: rotate(5deg);
+    }
+}
+
+.nomails {
+    text-align: center;
+    font-size: 25px;
+    font-weight: 600;
+    color: grey;
+    position: relative;
+    top: 30%;
+}
+
+.mail-image {
+    position: absolute;
+    top: 251px;
+    left: 19px;
+    font-size: 15px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    padding: 5px;
+}
+
+.foto_ilanlar {
+    display: none;
+    position: absolute;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    top: 276px;
+    height: 138px;
+    width: -webkit-fill-available;
+    outline: none;
+    border: none;
+    resize: none;
+
+    transition: 0.1s linear;
+    margin-left: 20px;
+    margin-right: 20px;
+    margin-top: 10px;
+}
+
+.silgorsel {
+    display: none;
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    top: 423px;
+    height: 138px;
+    width: -webkit-fill-available;
+    resize: none;
+
+    margin: 10px 20px 0px;
+    outline: none;
+    border-width: initial;
+    border-style: none;
+    border-color: initial;
+    border-image: initial;
+    transition: all 0.1s linear 0s;
+}
+
+#mail-send {
+    cursor: pointer;
+}
+
+#mail-settings-page header a {
+    font-size: 17px;
+}
+
+#mail-content {
+    position: relative;
+    top: 20px;
+    width: 96%;
+    margin: 0 auto;
+}
+
+#mail-content input {
+    border: none;
+    outline: none;
+    width: 80%;
+}
+
+#mail-content span {
+    color: gray;
+    font-size: 18px;
+    font-weight: 600;
+}
+
+#mail-content #mail-to {
+    font-size: 18px;
+    width: 300px;
+    color: var(--blue-text);
+}
+
+#mail-content .border-b {
+    height: 35px;
+    border-bottom: 1px solid var(--dark-background-color);
+}
+
+#mail-message {
+    height: 400px;
+    font-size: 17px;
+    border-bottom: 1px solid var(--dark-background-color);
+    margin-bottom: 20px;
+}
+
+.mail-input {
+    width: 100%;
+    height: 31px;
+    border-radius: 4px;
+    background: var(--dark-background-color);
+    padding: 0.5em;
+    border: 1px solid var(--border-color);
+}
+
+#send-mail-container header {
+    position: relative;
+    top: 5px;
+    width: 96%;
+    margin: 0 auto;
+}
+
+.mail-input input {
+    background: none;
+    border: none;
+    outline: none;
+}
+
+.mail-input::placeholder {
+    color: var(--text-color);
+}
+
+.empty-media {
+    width: 12.5rem;
+    height: 7.5rem;
+    border-radius: 6px;
+}
+
+.mail-media {
+    width: 12.5rem;
+    height: 7.5rem;
+    border-radius: 4px;
+    object-fit: cover;
+}
+
+.mail-image-media {
+    position: absolute;
+    left: 13px;
+    top: 520px;
+    height: auto;
+}
+
+.email-input-container {
+    display: flex;
+    align-items: center;
+}
+
+.email-input {
+    flex: 1;
+    padding: 10px;
+    border: 1px solid var(--dark-background-color);
+    border-radius: 5px 0 0 5px;
+}
+
+.email-suffix {
+    padding: 10px;
+    border: 1px solid var(--dark-background-color);
+    font-weight: 600;
+    border-radius: 0 5px 5px 0;
+    background-color: var(--dark-background-color);
+}
+
+.instagram-register {
+    height: 46px !important;
+}
+
+.mail-genera-info-text p {
+    font-size: 15px;
+}
+
+.mail-genera-info-text a {
+    cursor: pointer;
+}
+
+.instagram-input {
+    height: 46px !important;
+    width: 22.5vw !important;
+    background: var(--dark-background-color) !important;
+    border: 1px solid var(--dark-background-color) !important;
+    color: var(--text-color) !important;
+}
+
+.mail-setting-items {
+    position: relative;
+    top: 7px;
+    width: 92%;
+    margin: 0 auto;
+}
+
+.mail-setting-items button {
+    height: 46px;
+    color: var(--text-color);
+    background: var(--dark-background-color);
+}
+
+#mail-search-all {
+    position: relative;
+    top: 7px;
+    text-align: center;
+    width: 92%;
+    margin: 0 auto;
+}
+
+#mail-settings-form {
+    width: 95%;
+    margin: 0 auto;
+}
+
+#mail-settings-form div {
+    width: 100%;
+    height: 45px;
+    margin-bottom: 10px;
+    border-bottom: 1px solid var(--border-light-color);
+}
+
+#mail-settings-form a {
+    width: 130px;
+    height: 40px;
+    padding: 10px;
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.mail-forgot-acc {
+    font-size: 16px;
+}
+
+.mail-app .twitter-register-screen-header {
+    width: 97%;
+    margin: 0 auto;
+}
+
+.mail-app .twitter-register-screen-header a {
+    color: var(--blue-text) !important;
+}

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/html/css/apps/map.css

@@ -0,0 +1,37 @@
+.map-app {
+    background-color: #143c6a;
+}
+
+#phone-map {
+    height: 100%;
+    width: 100%;
+    background-color: #143c6a;
+}
+
+.leaflet-top {
+    top: 7% !important;
+}
+
+.map-widget {
+    padding: 0 !important;
+}
+
+.map-widget-map {
+    pointer-events: none;
+}
+
+.leaflet-control-attribution {
+    display: none;
+}
+
+#phone-input-title {
+    text-align: center;
+    width: 90%;
+    line-height: 25px;
+}
+
+#phone-input-subtitle {
+    text-align: center;
+    width: 90%;
+    margin-bottom: 5px;
+}

resources/[framework]/[addons]/[quasar]/qs-smartphone-pro/html/css/apps/market.css

@@ -0,0 +1,393 @@
+#market-register-firstscreen header i {
+    position: relative;
+    top: 20px;
+}
+
+#market-forgot-password-accounts {
+    padding-left: 10px;
+    padding-right: 10px;
+    padding: 15px;
+    border-bottom: 1px solid var(--dark-border-color);
+}
+
+#market-forgot-password-accounts img {
+    margin-right: 8px;
+}
+
+#market-register-screen-fourth,
+#market-register-screen-third,
+#market-register-screen-second,
+#market-register-firstscreen {
+    padding-left: 15px;
+    padding-right: 15px;
+    top: 0;
+}
+
+#market-forgot-password-screen,
+#market-login-screen,
+#market-self-profile,
+#market-register-screen-fourth,
+#market-register-screen-third,
+#market-register-screen-second,
+#market-register-screen-first,
+#market-register-firstscreen {
+    background: var(--main-background-color);
+}
+
+#market-register-firstscreen h2 {
+    font-size: 26px;
+    text-align: center;
+}
+
+#market-login-screen h3,
+#market-register-screen-first h3 {
+    position: relative;
+    width: 95%;
+    left: 10px;
+}
+
+#market-register-screen-first {
+    top: 0;
+}
+
+#market-register-screen-first p {
+    width: 95%;
+    margin: 0 auto;
+    text-align: center;
+}
+
+#market-login-screen button,
+#market-register-screen-fourth button,
+#market-register-screen-third button,
+#market-register-screen-second button,
+#market-register-screen-first button {
+    width: 94%;
+    margin: 0 auto;
+}
+
+#market-login-form,
+#market-create-account-form {
+    width: 95%;
+    margin: 0 auto;
+}
+
+#market-login-form input,
+#market-create-username-form input,
+#market-create-password-form input,
+#market-verify-phone-form input,
+#market-create-account-form input {
+    color: var(--text-color);
+}
+
+.market-footer-icon {
+    color: gray;
+    cursor: pointer;
+}
+
+.market-footer-icon.current {
+    color: var(--text-color);
+}
+
+.market-register-screen-header {
+    position: relative;
+    width: 98%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 7rem;
+    margin: 0 auto;
+    margin-bottom: 30px;
+}
+
+.market-screen {
+    position: absolute;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: #000;
+}
+
+.market-form {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+}
+
+.market-form input {
+    background-color: none;
+    border: none;
+    outline: none;
+    border-bottom: 1px solid #4c4b4b;
+    padding-bottom: 10px;
+    color: #fff;
+}
+
+.market-header {
+    position: relative;
+    top: 0px;
+    width: 100%;
+    height: 13%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 12px;
+    padding-top: 45px;
+    background: var(--dark-background-color);
+}
+
+#market-opened-market {
+    background: var(--container-dark-background-color);
+}
+
+#market-self-profile div {
+    padding-left: 10px;
+    padding-right: 10px;
+    margin-top: 2%;
+}
+
+#market-opened-market img {
+    object-fit: cover;
+}
+
+#market-opened-name {
+    font-size: 19px;
+}
+
+#market-opened-market section {
+    cursor: pointer;
+    font-size: 15px;
+}
+
+#market-opened-market article section div a,
+#market-opened-market article section div i {
+    color: white;
+}
+
+#market-opened-description {
+    font-size: 17px;
+}
+
+#market-opened-market article {
+    margin-top: 2%;
+    font-size: 19px;
+}
+
+#market-opened-market article div {
+    margin-top: 2%;
+}
+
+#market-opened-market footer {
+    margin-top: 5%;
+}
+
+#market-opened-market .market-header i {
+    font-size: 18px;
+}
+
+#market-opened-market .market-header {
+    background: none;
+    width: 98%;
+    margin: 0 auto;
+}
+
+.market-header .blue_text {
+    font-size: 17px;
+}
+
+#market-self-profile button {
+    height: 45px;
+    border-radius: 20px;
+    background: var(--border-light-color);
+    color: var(--text-color);
+}
+
+#market-self-profile-form a {
+    font-weight: bold;
+}
+
+.market-chat-message {
+    max-width: 85%;
+    gap: 4px;
+    background-color: var(--dark-border-color);
+    border-radius: 20px;
+    padding: 12px;
+    align-self: flex-start;
+    color: white;
+}
+
+.market-chat-message.self {
+    align-self: flex-end;
+    background-color: var(--market-bubble-chat);
+}
+
+.market-chat-message img {
+    border-radius: 10px;
+}
+
+#market-chat header {
+    background: var(--container-dark-background-color) !important;
+}
+
+#market-chat-input::placeholder {
+    color: #ccc;
+}
+
+#market-chat .market-header {
+    background: var(--dark-background-color);
+    height: 16%;
+}
+
+#market-chat .market-header img {
+    height: 40px;
+    width: 40px;
+    margin-top: 5px;
+}
+
+#market-chat-messages {
+    position: relative;
+    bottom: 12px;
+    height: 76.5%;
+    padding-bottom: 15px;
+    background: var(--main-background-color);
+}
+
+#market-chat-input-container {
+    background: var(--main-background-color);
+}
+
+#market-chat-input-container .emojionearea {
+    height: 40px;
+    background: var(--messages-bubble-background) !important;
+}
+
+#market-chat-input-container .emojionearea-editor {
+    font-size: 15px !important;
+}
+
+.market-app .emojionearea {
+    margin: 0 auto;
+    background: transparent !important;
+    color: #fff !important;
+    width: 90% !important;
+    background: #141414 !important;
+    border: none !important;
+}
+
+.market-app .emojionearea-editor {
+    color: var(--text-color) !important;
+    width: 80% !important;
+}
+
+.market-app img.current {
+    border: 1.5px solid #fff;
+}
+
+#market-messages-list .unread p {
+    color: #fff;
+}
+
+#market-messages-page,
+#market-home-page {
+    position: relative;
+    background: var(--main-background-color);
+}
+
+#market-messages-list article,
+#market-markets section {
+    padding: 13px;
+    margin-bottom: -5px;
+    border-bottom: 1px solid var(--dark-border-color);
+}
+
+#market-markets section img {
+    object-fit: cover;
+}
+
+#market-markets section div a {
+    font-size: 17px;
+}
+
+#market-messages-list {
+    height: 85%;
+}
+
+#market-messages-list img {
+    object-fit: cover;
+}
+
+#market-messages-list article p {
+    position: relative;
+    top: 5px;
+    font-size: 17px;
+    color: gray !important;
+    margin-left: 5px;
+    max-width: 320px;
+    overflow: hidden;
+}
+
+#market-messages-list article a {
+    font-size: 16px;
+    color: var(--text-color);
+    margin-left: 5px;
+}
+
+#market-messages-list article span {
+    font-size: 14px;
+}
+
+#market-messages-list article .nowrap {
+    max-width: 120px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+#market-messages-list article img {
+    height: 55px;
+    width: 55px;
+}
+
+#market-forgot-password-accounts:last-child,
+#market-messages-list article:last-child,
+#market-markets section:last-child {
+    border-bottom: none;
+}
+
+#market-opened-image {
+    height: 300px !important;
+}
+
+#market-back {
+    position: relative;
+    left: 10px;
+    cursor: pointer;
+    font-size: 17px;
+}
+
+#market-interactions-container {
+    background: var(--main-background-color);
+}
+
+#market-interactions-container .rounded-lg {
+    background: var(--border-light-color);
+}
+
+.edit-avatar-market {
+    height: 130px;
+}
+
+.edit-avatar-market img {
+    position: relative;
+    bottom: 10px;
+    height: 80px;
+    width: 80px;
+}
+
+.edit-avatar-market a {
+    position: relative;
+    bottom: 5px;
+}