├── qb-carcontrol ├── html │ ├── images │ │ ├── car.png │ │ ├── cover.png │ │ ├── bg-pic.png │ │ ├── rearHood.png │ │ ├── frontHood.png │ │ ├── logo-icon.png │ │ ├── doorFrontLeft.png │ │ ├── doorRearLeft.png │ │ ├── doorRearRight.png │ │ ├── doorFrontRight.png │ │ ├── ileri.svg │ │ ├── ok.svg │ │ ├── back.svg │ │ ├── next.svg │ │ ├── stop.svg │ │ ├── Search.svg │ │ ├── acik.svg │ │ ├── kilitli.svg │ │ ├── safe.svg │ │ ├── warn.svg │ │ ├── emergency.svg │ │ ├── play.svg │ │ ├── eva_skip-back-fill.svg │ │ ├── end.svg │ │ ├── start.svg │ │ ├── fuel-icon.svg │ │ ├── speedbar.svg │ │ ├── fuel-front.svg │ │ ├── speed-back2.svg │ │ ├── speed-bar.svg │ │ ├── fuelback.svg │ │ ├── trunk.svg │ │ ├── arka.svg │ │ ├── hood.svg │ │ ├── kaput.svg │ │ ├── onsol.svg │ │ ├── arkasag.svg │ │ ├── rightback.svg │ │ ├── önsağ.svg │ │ ├── arkasol.svg │ │ ├── frontright.svg │ │ ├── önsol.svg │ │ ├── frontleft.svg │ │ ├── speed-back.svg │ │ ├── bi_thermometer-snow.svg │ │ ├── yol.svg │ │ └── speedarka.svg │ ├── circle.css │ ├── script.js │ ├── index.html │ └── style.css ├── config.lua ├── functions.lua ├── fxmanifest.lua ├── server │ ├── functions.lua │ └── events.lua └── client │ ├── events.lua │ ├── threads.lua │ ├── functions.lua │ ├── nui.lua │ └── commands.lua └── README.md /qb-carcontrol/html/images/car.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QBCoreStore/vehicleControl/HEAD/qb-carcontrol/html/images/car.png -------------------------------------------------------------------------------- /qb-carcontrol/html/images/cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QBCoreStore/vehicleControl/HEAD/qb-carcontrol/html/images/cover.png -------------------------------------------------------------------------------- /qb-carcontrol/html/images/bg-pic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QBCoreStore/vehicleControl/HEAD/qb-carcontrol/html/images/bg-pic.png -------------------------------------------------------------------------------- /qb-carcontrol/html/images/rearHood.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QBCoreStore/vehicleControl/HEAD/qb-carcontrol/html/images/rearHood.png -------------------------------------------------------------------------------- /qb-carcontrol/html/images/frontHood.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QBCoreStore/vehicleControl/HEAD/qb-carcontrol/html/images/frontHood.png -------------------------------------------------------------------------------- /qb-carcontrol/html/images/logo-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QBCoreStore/vehicleControl/HEAD/qb-carcontrol/html/images/logo-icon.png -------------------------------------------------------------------------------- /qb-carcontrol/html/images/doorFrontLeft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QBCoreStore/vehicleControl/HEAD/qb-carcontrol/html/images/doorFrontLeft.png -------------------------------------------------------------------------------- /qb-carcontrol/html/images/doorRearLeft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QBCoreStore/vehicleControl/HEAD/qb-carcontrol/html/images/doorRearLeft.png -------------------------------------------------------------------------------- /qb-carcontrol/html/images/doorRearRight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QBCoreStore/vehicleControl/HEAD/qb-carcontrol/html/images/doorRearRight.png -------------------------------------------------------------------------------- /qb-carcontrol/html/images/doorFrontRight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QBCoreStore/vehicleControl/HEAD/qb-carcontrol/html/images/doorFrontRight.png -------------------------------------------------------------------------------- /qb-carcontrol/html/images/ileri.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /qb-carcontrol/config.lua: -------------------------------------------------------------------------------- 1 | Config = {} 2 | 3 | Config.MenuKey = 'F9' 4 | 5 | Config.EnableMileageSystem = true 6 | 7 | Config.OptimizationMode = "fast" -- fast, medium, low, ulrtalow 8 | 9 | Config.MileageUpdateInterval = 1500 10 | 11 | Config.IgnoredPlates = { 12 | "ADMIN", 13 | "ADMINCAR" 14 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Custom Made QBCore Car/Vehicle Control 2 | Drag and Drop 3 | Ensure the script on server.cfg 4 | restart the server 5 | Do not Resell. Use It for free and Join on our Discord: https://discord.gg/qbcoreframework 6 | 7 | Preview: 8 | ![Untitled](https://github.com/QBCoreStore/vehicleControl/assets/68699717/571e4b07-31e0-4ac6-bc97-d14fffdca087) 9 | -------------------------------------------------------------------------------- /qb-carcontrol/functions.lua: -------------------------------------------------------------------------------- 1 | function IsCarIgnored(vehicle) 2 | local plate = GetVehicleNumberPlateText(vehicle) 3 | local isIgnored = false 4 | 5 | for _,v in ipairs(Config.IgnoredPlates) do 6 | if v == plate then 7 | isIgnored = true 8 | break 9 | end 10 | end 11 | 12 | return isIgnored 13 | end -------------------------------------------------------------------------------- /qb-carcontrol/html/images/ok.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /qb-carcontrol/html/images/back.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /qb-carcontrol/html/images/next.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /qb-carcontrol/html/images/stop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /qb-carcontrol/html/images/Search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /qb-carcontrol/fxmanifest.lua: -------------------------------------------------------------------------------- 1 | fx_version 'adamant' 2 | 3 | game 'gta5' 4 | 5 | author 'QBCore Store Since 2020' 6 | description 'only buy from discord.gg/qbcoreframework' 7 | version '9 Special Edition' 8 | 9 | 10 | shared_scripts { 11 | 'config.lua', 12 | 'functions.lua' 13 | } 14 | 15 | client_scripts { 16 | 'client/*.lua' 17 | } 18 | 19 | server_scripts { 20 | 'server/*.lua' 21 | } 22 | 23 | ui_page 'html/index.html' 24 | 25 | files { 26 | 'html/index.html', 27 | 'html/*.js', 28 | 'html/*.css', 29 | 'html/images/*.png', 30 | 'html/images/*.svg', 31 | } 32 | 33 | dependency '2na_core' 34 | 35 | lua54 'yes' 36 | 37 | escrow_ignore { 38 | 'config.lua' 39 | } -------------------------------------------------------------------------------- /qb-carcontrol/html/circle.css: -------------------------------------------------------------------------------- 1 | .circle-container { 2 | position: relative; 3 | width: 300px; 4 | height: 300px; 5 | border-radius: 50%; 6 | background: #f0f0f0; 7 | overflow: hidden; 8 | } 9 | 10 | .circle-slider { 11 | position: absolute; 12 | top: 50%; 13 | left: 50%; 14 | transform: translate(-50%, -50%); 15 | width: 200px; 16 | height: 4px; 17 | background: #000; 18 | cursor: pointer; 19 | transition: transform 0.2s ease-in-out; 20 | } 21 | 22 | .circle-slider::before { 23 | content: ""; 24 | position: absolute; 25 | top: -8px; 26 | left: -8px; 27 | width: 20px; 28 | height: 20px; 29 | border-radius: 50%; 30 | background: #000; 31 | } -------------------------------------------------------------------------------- /qb-carcontrol/html/images/acik.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /qb-carcontrol/html/images/kilitli.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /qb-carcontrol/html/images/safe.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /qb-carcontrol/html/images/warn.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /qb-carcontrol/html/images/emergency.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /qb-carcontrol/html/images/play.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /qb-carcontrol/html/images/eva_skip-back-fill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /qb-carcontrol/html/images/end.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /qb-carcontrol/html/images/start.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /qb-carcontrol/html/images/fuel-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /qb-carcontrol/html/images/speedbar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /qb-carcontrol/html/images/fuel-front.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /qb-carcontrol/server/functions.lua: -------------------------------------------------------------------------------- 1 | function GetCarMedia(vehicle) 2 | local carMedia = nil 3 | 4 | for _,v in ipairs(CarMedias) do 5 | if v.vehicle == vehicle then 6 | carMedia = v 7 | break 8 | end 9 | end 10 | 11 | if carMedia then 12 | if carMedia.pausedAt then 13 | carMedia.startedAt = os.time() - (carMedia.pausedAt - carMedia.startedAt) 14 | carMedia.pausedAt = nil 15 | end 16 | end 17 | 18 | return carMedia 19 | end 20 | 21 | function GetPlayersInCar(vehicle) 22 | local peds = {} 23 | 24 | for i = -1, 6, 1 do 25 | local ped = GetPedInVehicleSeat(GetVehiclePedIsIn(GetPlayerPed(source), false), i) 26 | 27 | if ped ~= 0 then 28 | table.insert(peds, ped) 29 | end 30 | end 31 | 32 | local players = {} 33 | for _, playerId in ipairs(GetPlayers()) do 34 | for ped in ipairs(peds) do 35 | if tostring(ped) == tostring(playerId) then 36 | table.insert(players, playerId) 37 | break 38 | end 39 | end 40 | end 41 | 42 | return players 43 | end -------------------------------------------------------------------------------- /qb-carcontrol/html/images/speed-back2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /qb-carcontrol/client/events.lua: -------------------------------------------------------------------------------- 1 | TwoNa = exports["2na_core"]:getSharedObject() 2 | ShowingMenu = false 3 | ParkCam = nil 4 | 5 | RegisterNetEvent("2na_carcontrol:Client:ShowMenu") 6 | AddEventHandler("2na_carcontrol:Client:ShowMenu", function() 7 | local vehicle = GetPedVehicleData(PlayerPedId()) 8 | 9 | if vehicle then 10 | TwoNa.TriggerServerCallback("2na_carcontrol:Server:GetMileage", { plate = GetVehicleNumberPlateText(vehicle.vehicle) }, function(mileage) 11 | vehicle.mileage = mileage 12 | 13 | SetNuiFocus(true, true) 14 | 15 | SendNUIMessage({ 16 | action = "show", 17 | vehicle = vehicle 18 | }) 19 | 20 | ShowingMenu = true 21 | end) 22 | end 23 | end) 24 | 25 | RegisterNetEvent("2na_carcontrol:Client:HideMenu") 26 | AddEventHandler("2na_carcontrol:Client:HideMenu", function() 27 | SendNUIMessage({ 28 | action = "hide", 29 | }) 30 | 31 | SetNuiFocus(false, false) 32 | 33 | ShowingMenu = false 34 | end) 35 | 36 | RegisterNetEvent("2na_carcontrol:Client:ControlCarMedia") 37 | AddEventHandler("2na_carcontrol:Client:ControlCarMedia", function(payload) 38 | SendNUIMessage(payload) 39 | end) 40 | 41 | RegisterNetEvent("2na_carcontrol:Client:ShowParkCam") 42 | AddEventHandler("2na_carcontrol:Client:ShowParkCam", function() 43 | if ParkCam then 44 | DisableParkCam() 45 | else 46 | EnableParkCam() 47 | end 48 | 49 | TriggerEvent("2na_carcontrol:Client:HideMenu") 50 | end) 51 | 52 | -------------------------------------------------------------------------------- /qb-carcontrol/html/images/speed-bar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /qb-carcontrol/client/threads.lua: -------------------------------------------------------------------------------- 1 | local PedInCar = false 2 | Citizen.CreateThread(function() 3 | while true do 4 | if GetVehiclePedIsIn(PlayerPedId(), false) == 0 then 5 | if PedInCar then 6 | PedInCar = false 7 | 8 | TriggerEvent("2na_carcontrol:Client:HideMenu") 9 | 10 | SendNUIMessage({ 11 | action = "stopMusic" 12 | }) 13 | end 14 | else 15 | if not PedInCar then 16 | PedInCar = true 17 | 18 | TwoNa.TriggerServerCallback("2na_carcontrol:Server:GetCarMedia", {}, function(carMedia) 19 | if carMedia then 20 | carMedia.action = "playMusic" 21 | TriggerEvent("2na_carcontrol:Client:ControlCarMedia", carMedia) 22 | end 23 | end) 24 | end 25 | end 26 | 27 | Citizen.Wait(1) 28 | end 29 | end) 30 | 31 | Citizen.CreateThread(function() 32 | while true do 33 | if IsCamActive(ParkCam) and GetVehiclePedIsIn(PlayerPedId(), false) == 0 then 34 | DisableParkCam() 35 | elseif IsCamActive(ParkCam) and GetVehiclePedIsIn(PlayerPedId(), false) ~= 0 then 36 | local vehicleRotation = GetEntityRotation(GetVehiclePedIsIn(PlayerPedId(), false)) 37 | 38 | SetCamRot(ParkCam, vehicleRotation.x - 80.0, vehicleRotation.y, vehicleRotation.z, 2) 39 | 40 | SetTextFont(0) 41 | SetTextProportional(1) 42 | SetTextScale(0.0, 0.4) 43 | SetTextOutline() 44 | SetTextEntry("STRING") 45 | AddTextComponentString("~g~Park camera enabled~w~ - Watch out!") 46 | DrawText(0.41, 0.95) 47 | end 48 | 49 | Citizen.Wait(1) 50 | end 51 | end) 52 | 53 | if Config.EnableMileageSystem then 54 | Citizen.CreateThread(function() 55 | while true do 56 | local vehicle = GetVehiclePedIsIn(PlayerPedId(), false) 57 | 58 | if vehicle and GetPedInVehicleSeat(vehicle, -1) == PlayerPedId() and IsVehicleOnAllWheels(vehicle) and not IsCarIgnored(vehicle) then 59 | local plate = GetVehicleNumberPlateText(vehicle) 60 | 61 | local currentCoords = GetEntityCoords(vehicle) 62 | Citizen.Wait(1000) 63 | local updatedCoords = GetEntityCoords(vehicle) 64 | 65 | local traveled = #(updatedCoords - currentCoords) / 100 66 | 67 | if traveled > 0 then 68 | TriggerServerEvent("2na_carcontrol:Server:AddMileage", plate, traveled) 69 | end 70 | end 71 | 72 | Citizen.Wait(Config.MileageUpdateInterval) 73 | end 74 | end) 75 | end -------------------------------------------------------------------------------- /qb-carcontrol/html/images/fuelback.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /qb-carcontrol/client/functions.lua: -------------------------------------------------------------------------------- 1 | function GetPedVehicleData(ped) 2 | local vehicle = GetVehiclePedIsIn(ped, false) 3 | 4 | if vehicle ~= 0 then 5 | return { 6 | vehicle = vehicle, 7 | name = GetDisplayNameFromVehicleModel(GetEntityModel(vehicle)), 8 | vites = GetVehicleCurrentGear(vehicle), 9 | rpm = GetVehicleCurrentRpm(vehicle), 10 | fuel = GetVehicleFuelLevel(vehicle) or 100, 11 | plaka = GetVehicleNumberPlateText(vehicle), 12 | engineTemperature = GetVehicleEngineTemperature(vehicle) or 90 13 | } 14 | else 15 | return nil 16 | end 17 | end 18 | 19 | function EnableParkCam() 20 | local vehicle = GetVehiclePedIsIn(PlayerPedId(), false) 21 | 22 | if vehicle then 23 | ParkCam = CreateCam("DEFAULT_SCRIPTED_CAMERA", false) 24 | 25 | AttachCamToEntity(ParkCam, vehicle, 0.0, -0.5, 5.0, true) 26 | 27 | SetCamActive(ParkCam, true) 28 | SetCamRot(ParkCam, -90.0, 0.0, -30.0, 2) 29 | SetCamFov(ParkCam, 80.0) 30 | 31 | RenderScriptCams(true, true, 1000, 0, 0) 32 | end 33 | end 34 | 35 | function DisableParkCam() 36 | RenderScriptCams(false, true, 1000, 0, 0) 37 | 38 | DestroyCam(ParkCam, false) 39 | 40 | ParkCam = nil 41 | end 42 | 43 | local function convertToPercentage(value) 44 | return math.ceil(value * 10000 - 2001) / 80 45 | --99,9875 46 | end 47 | 48 | Citizen.CreateThread(function() 49 | isbelt = false 50 | while true do 51 | if Config.OptimizationMode == "ultralow" then 52 | Citizen.Wait(2000); 53 | elseif Config.OptimizationMode == "low" then 54 | Citizen.Wait(1000); 55 | elseif Config.OptimizationMode == "medium" then 56 | Citizen.Wait(500); 57 | elseif Config.OptimizationMode == "fast" then 58 | Citizen.Wait(100); 59 | end 60 | local person = PlayerPedId() 61 | if IsPauseMenuActive() then 62 | SendNUIMessage({ 63 | carhud = 'indi'; 64 | }) 65 | elseif IsPedInAnyVehicle(person) then 66 | local veh = GetVehiclePedIsIn(ped, false); 67 | local car = GetVehiclePedIsUsing(person) 68 | local fuel = (GetVehicleFuelLevel(car)*1.4) 69 | local vites = GetVehicleCurrentGear(car) 70 | local hasar = (GetVehicleBodyHealth(car)) 71 | local hiz = (GetEntitySpeed(car)*3.5) 72 | local rpm = GetVehicleCurrentRpm(car) 73 | local heading = GetEntityHeading(person) 74 | local rpmmath = convertToPercentage(rpm) 75 | local blip = GetFirstBlipInfoId(8) 76 | local blipCoords = nil 77 | local metre = 0 78 | if (blip ~= 0) then 79 | blipCoords = GetBlipCoords(blip) 80 | local pedCoords = GetEntityCoords(person) 81 | metre = GetDistanceBetweenCoords(blipCoords.x, blipCoords.y, blipCoords.z, pedCoords.x, pedCoords.y, pedCoords.z, false) 82 | end 83 | dooropened = false 84 | for i = 0, 3 do 85 | local doorsangle = GetVehicleDoorAngleRatio(car, i) 86 | if doorsangle ~= 0.0 then 87 | dooropened = true 88 | end 89 | end 90 | SendNUIMessage({ 91 | carhud = 'arabada'; 92 | rpm = rpmmath; 93 | fuel = fuel; 94 | far = farseviye; 95 | gear = vites; 96 | speed = hiz; 97 | kapi = dooropened; 98 | vehiclerun = vehiclerunstatus; 99 | kemer = seatbelt; 100 | motor = hasar; 101 | metre = metre; 102 | heading = heading; 103 | }) 104 | else 105 | SendNUIMessage({ 106 | carhud = 'indi'; 107 | }) 108 | end 109 | end 110 | end) -------------------------------------------------------------------------------- /qb-carcontrol/client/nui.lua: -------------------------------------------------------------------------------- 1 | QBCore = exports['qb-core']:GetCoreObject() 2 | 3 | RegisterNUICallback("exitMenu", function(data, cb) 4 | TriggerEvent("2na_carcontrol:Client:HideMenu") 5 | end) 6 | RegisterNUICallback("closeui", function(data, cb) 7 | TriggerEvent("2na_carcontrol:Client:HideMenu") 8 | end) 9 | RegisterNUICallback("toggleInteriorLight", function() 10 | local vehicle = GetVehiclePedIsIn(PlayerPedId(), false) 11 | local lightState = not IsVehicleInteriorLightOn(vehicle) 12 | 13 | SetVehicleInteriorlight(vehicle, lightState) 14 | end) 15 | 16 | RegisterNUICallback("toggleHeadLight", function() 17 | local vehicle = GetVehiclePedIsIn(PlayerPedId(), false) 18 | local _, ligthsOn, highBeamsOn = GetVehicleLightsState(vehicle) 19 | local lightState = nil 20 | 21 | if ligthsOn == 1 or highBeamsOn == 1 then 22 | SetVehicleLights(vehicle, 1) 23 | else 24 | SetVehicleLights(vehicle, 3) 25 | end 26 | end) 27 | 28 | RegisterNUICallback("toggleEngine", function() 29 | local vehicle = GetVehiclePedIsIn(PlayerPedId(), false) 30 | local engineState = not GetIsVehicleEngineRunning(vehicle) 31 | 32 | SetVehicleEngineOn(vehicle, engineState, false, true) 33 | end) 34 | 35 | RegisterNUICallback("toggleNeonLight", function() 36 | local vehicle = GetVehiclePedIsIn(PlayerPedId(), false) 37 | local neonUpgrade = GetVehicleMod(vehicle, 22) 38 | 39 | if neonUpgrade ~= -1 then 40 | for i = 0, 3, 1 do 41 | local neonState = IsVehicleNeonLightEnabled(vehicle, i) 42 | 43 | if neonState == 1 then 44 | SetVehicleNeonLightEnabled(vehicle, i, false) 45 | else 46 | SetVehicleNeonLightEnabled(vehicle, i, true) 47 | end 48 | end 49 | end 50 | end) 51 | 52 | RegisterNUICallback("toggleDoor", function(index) 53 | local vehicle = GetVehiclePedIsIn(PlayerPedId(), false) 54 | local angleRatio = GetVehicleDoorAngleRatio(vehicle, index) 55 | 56 | if GetVehicleDoorAngleRatio(vehicle, index) > 0.1 then 57 | SetVehicleDoorShut(vehicle, index, false) 58 | Wait(500) 59 | local angleRatio2 = GetVehicleDoorAngleRatio(vehicle, index) 60 | 61 | if angleRatio == angleRatio2 then 62 | if index == 5 then 63 | QBCore.Functions.Notify("The car does not have a trunk!", "error") 64 | elseif index == 4 then 65 | QBCore.Functions.Notify("The car does not have a hood!", "error") 66 | elseif index == 0 or index == 1 or index == 2 or index == 3 then 67 | QBCore.Functions.Notify("The car does not have a door!", "error") 68 | end 69 | end 70 | else 71 | SetVehicleDoorOpen(vehicle, index, false, false) 72 | Wait(500) 73 | local angleRatio2 = GetVehicleDoorAngleRatio(vehicle, index) 74 | 75 | if angleRatio == angleRatio2 then 76 | if index == 5 then 77 | QBCore.Functions.Notify("The car does not have a trunk!", "error") 78 | elseif index == 4 then 79 | QBCore.Functions.Notify("The car does not have a hood!", "error") 80 | elseif index == 0 or index == 1 or index == 2 or index == 3 then 81 | QBCore.Functions.Notify("The car does not have a door!", "error") 82 | end 83 | end 84 | end 85 | end) 86 | 87 | RegisterNUICallback("lockCar", function() 88 | local vehicle = GetVehiclePedIsIn(PlayerPedId(), false) 89 | 90 | if vehicle then 91 | if GetPedInVehicleSeat(vehicle, -1) == PlayerPedId() then 92 | TriggerServerEvent("2na_carcontrol:Server:ToggleVehicleLock") 93 | end 94 | end 95 | end) 96 | 97 | RegisterNUICallback("controlMusic", function(data) 98 | TriggerServerEvent("2na_carcontrol:Server:ControlCarMedia", data) 99 | end) 100 | 101 | RegisterNUICallback("showParkCam", function() 102 | TriggerEvent("2na_carcontrol:Client:ShowParkCam") 103 | end) 104 | -------------------------------------------------------------------------------- /qb-carcontrol/server/events.lua: -------------------------------------------------------------------------------- 1 | TwoNa = exports["2na_core"]:getSharedObject() 2 | CarMedias = {} 3 | 4 | TwoNa.RegisterServerCallback("2na_carcontrol:Server:GetMileage", function(source, payload, cb) 5 | if Config.EnableMileageSystem then 6 | local carMileageResult = TwoNa.MySQL.Sync.Fetch("SELECT * FROM carmileages WHERE plate = @plate", { ["@plate"] = payload.plate }) 7 | 8 | if #carMileageResult > 0 then 9 | cb(carMileageResult[1].mileage) 10 | else 11 | cb(nil) 12 | end 13 | else 14 | cb(nil) 15 | end 16 | end) 17 | 18 | TwoNa.RegisterServerCallback("2na_carcontrol:Server:GetCarMedia", function(source, payload, cb) 19 | local vehicle = GetVehiclePedIsIn(GetPlayerPed(source), false) 20 | local carMedia = GetCarMedia(vehicle) 21 | 22 | cb(carMedia) 23 | end) 24 | 25 | RegisterServerEvent("2na_carcontrol:Server:ControlCarMedia") 26 | AddEventHandler("2na_carcontrol:Server:ControlCarMedia", function(payload) 27 | local source = source 28 | local vehicle = GetVehiclePedIsIn(GetPlayerPed(source), false) 29 | 30 | if vehicle then 31 | local carMedia = GetCarMedia(vehicle) 32 | 33 | if not carMedia then 34 | carMedia = { 35 | vehicle = vehicle, 36 | startedAt = nil, 37 | musicLink = nil, 38 | playerState = nil 39 | } 40 | table.insert(CarMedias, carMedia) 41 | end 42 | 43 | if payload.action == "playMusic" then 44 | carMedia = { 45 | vehicle = vehicle, 46 | startedAt = os.time(), 47 | musicLink = payload.musicLink, 48 | playerState = "playing" 49 | } 50 | elseif payload.action == "pauseMusic" then 51 | carMedia.pausedAt = os.time() 52 | carMedia.playerState = "paused" 53 | elseif payload.action == "resumeMusic" then 54 | carMedia.playerState = "playing" 55 | elseif payload.action == "endMusic" then 56 | carMedia.playerState = "idle" 57 | carMedia.musicLink = nil 58 | carMedia.startedAt = nil 59 | end 60 | 61 | 62 | payload.playerState = carMedia.playerState 63 | for k,v in ipairs(CarMedias) do 64 | if v.vehicle == vehicle then 65 | CarMedias[k] = carMedia 66 | end 67 | end 68 | 69 | -- local players = GetPlayersInCar(vehicle) 70 | 71 | -- for _, player in ipairs(players) do 72 | -- print(player,payload ) 73 | -- TriggerClientEvent("2na_carcontrol:Client:ControlCarMedia", player, payload) 74 | -- end 75 | TriggerClientEvent("2na_carcontrol:Client:ControlCarMedia", source, payload) 76 | 77 | 78 | end 79 | 80 | end) 81 | 82 | RegisterServerEvent("2na_carcontrol:Server:ToggleVehicleLock") 83 | AddEventHandler("2na_carcontrol:Server:ToggleVehicleLock", function() 84 | local source = source 85 | local vehicle = GetVehiclePedIsIn(GetPlayerPed(source), false) 86 | 87 | if vehicle then 88 | if GetPedInVehicleSeat(vehicle, -1) == GetPlayerPed(source) then 89 | local lockStatus = GetVehicleDoorLockStatus(vehicle) 90 | local newLockStatus = nil 91 | 92 | if lockStatus == 4 then 93 | newLockStatus = 0 94 | else 95 | newLockStatus = 4 96 | end 97 | 98 | SetVehicleDoorsLocked(vehicle, newLockStatus) 99 | end 100 | end 101 | end) 102 | 103 | if Config.EnableMileageSystem then 104 | RegisterServerEvent("2na_carcontrol:Server:AddMileage") 105 | AddEventHandler("2na_carcontrol:Server:AddMileage", function(plate, traveled) 106 | local source = source 107 | local vehicle = GetVehiclePedIsIn(GetPlayerPed(source), false) 108 | 109 | if vehicle and GetPedInVehicleSeat(vehicle, -1) == GetPlayerPed(source) and not IsCarIgnored(vehicle) and GetVehicleNumberPlateText(vehicle) == plate then 110 | local carOldMileage = TwoNa.MySQL.Sync.Fetch("SELECT * FROM carmileages WHERE plate = @plate", { ["@plate"] = plate }) 111 | 112 | if #carOldMileage > 0 then 113 | TwoNa.MySQL.Sync.Execute("UPDATE carmileages SET mileage = @mileage WHERE plate = @plate", { ["@plate"] = plate, ["@mileage"] = carOldMileage[1].mileage + traveled }) 114 | else 115 | TwoNa.MySQL.Sync.Execute("INSERT INTO carmileages (plate, mileage) VALUES (@plate, @mileage)", { ["@plate"] = plate, ["@mileage"] = traveled }) 116 | end 117 | end 118 | end) 119 | end 120 | 121 | 122 | -------------------------------------------------------------------------------- /qb-carcontrol/html/images/trunk.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /qb-carcontrol/html/images/arka.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /qb-carcontrol/html/images/hood.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /qb-carcontrol/html/images/kaput.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /qb-carcontrol/html/images/onsol.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /qb-carcontrol/html/images/arkasag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /qb-carcontrol/html/images/rightback.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /qb-carcontrol/html/images/önsağ.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /qb-carcontrol/html/images/arkasol.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /qb-carcontrol/html/images/frontright.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /qb-carcontrol/html/images/önsol.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /qb-carcontrol/html/images/frontleft.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /qb-carcontrol/html/images/speed-back.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /qb-carcontrol/client/commands.lua: -------------------------------------------------------------------------------- 1 | RegisterKeyMapping('+carmenu', 'Shows car menu', 'KEYBOARD', Config.MenuKey) 2 | RegisterCommand("+carmenu", function(source, args, rawCommand) 3 | if ShowingMenu then 4 | TriggerEvent("2na_carcontrol:Client:HideMenu") 5 | else 6 | TriggerEvent("2na_carcontrol:Client:ShowMenu") 7 | end 8 | end) 9 | 10 | function GetClosestVehicle(c,dist) 11 | local closest = 0 12 | for k,v in pairs(GetGamePool('CVehicle')) do 13 | local dis = #(GetEntityCoords(v) - c) 14 | if dis < dist 15 | or dist == -1 then 16 | closest = v 17 | dist = dis 18 | end 19 | end 20 | return closest, dist 21 | end 22 | 23 | SetVehicleControl = function(vehicle,data) 24 | local state = GetVehicleStates(vehicle,data) 25 | if state == false then 26 | QBCore.Functions.Notify("Cannot change seat!", "error") 27 | end 28 | if data.type == 'seat' then 29 | return SetPedIntoVehicle(PlayerPedId(),vehicle,data.index) 30 | end 31 | end 32 | GetVehicleStates = function(vehicle,data) 33 | if data.type == 'seat' then 34 | return IsVehicleSeatFree(vehicle,data.index) 35 | end 36 | end 37 | 38 | RegisterNUICallback('nuicb', function(data, cb) 39 | local closestvehicle = GetClosestVehicle(GetEntityCoords(PlayerPedId()), 10.0) 40 | SetEntityControlable(closestvehicle) 41 | SetVehicleModKit(closestvehicle,0) 42 | if data.msg == 'neon' then 43 | for i = 0, 3 do 44 | SetVehicleNeonLightEnabled(closestvehicle,i,true) 45 | end 46 | SetVehicleNeonLightsColour(closestvehicle, data.val.r,data.val.g,data.val.b) 47 | end 48 | if data.msg == 'neonstyle' then 49 | NeonCustom(data.val) 50 | end 51 | if data.msg == 'toggleneon' then 52 | for i = 0, 3 do 53 | SetVehicleNeonLightEnabled(closestvehicle, i, not IsVehicleNeonLightEnabled(closestvehicle,i)) 54 | end 55 | end 56 | if data.msg == 'carcontrol' then 57 | SetVehicleControl(closestvehicle,data) 58 | end 59 | end) 60 | 61 | 62 | local currentype = {} 63 | local type = nil 64 | NeonCustom = function(type) 65 | local closestvehicle = GetClosestVehicle(GetEntityCoords(PlayerPedId()), 10.0) 66 | local plate = string.gsub(GetVehicleNumberPlateText(closestvehicle), '^%s*(.-)%s*$', '%1'):upper() 67 | currentype[plate] = type 68 | if type == 'neon1' then 69 | CreateThread(function() 70 | local r,g,b = GetVehicleNeonLightsColour(closestvehicle) 71 | while currentype[plate] == type do 72 | --SetVehicleNeonLightsColour(closestvehicle,255,255,255) 73 | for i = 0, 3 do 74 | SetVehicleNeonLightEnabled(closestvehicle, i, true) 75 | end 76 | Citizen.Wait(222) 77 | for i = 0, 3 do 78 | SetVehicleNeonLightEnabled(closestvehicle, i, false) 79 | end 80 | Citizen.Wait(222) 81 | end 82 | SetVehicleNeonLightsColour(closestvehicle,r,g,b) 83 | return 84 | end) 85 | elseif type == 'neon2' then 86 | CreateThread(function() 87 | local r,g,b = GetVehicleNeonLightsColour(closestvehicle) 88 | while currentype[plate] == type do 89 | --SetVehicleNeonLightsColour(closestvehicle,255,255,255) 90 | rand = math.random(1,4) - 1 91 | math.randomseed(GetGameTimer()) 92 | for i = 0, 3 do 93 | SetVehicleNeonLightEnabled(closestvehicle, i, math.random(1,100) < 50) 94 | end 95 | for i = rand, rand do 96 | SetVehicleNeonLightEnabled(closestvehicle, i, math.random(1,100) < 50) 97 | end 98 | Citizen.Wait(55) 99 | for i = rand, rand do 100 | SetVehicleNeonLightEnabled(closestvehicle, i, math.random(1,100) < 50) 101 | end 102 | Citizen.Wait(55) 103 | for i = rand, rand do 104 | SetVehicleNeonLightEnabled(closestvehicle, i, math.random(1,100) < 50) 105 | end 106 | Citizen.Wait(55) 107 | for i = rand, rand do 108 | SetVehicleNeonLightEnabled(closestvehicle, i, math.random(1,100) < 50) 109 | end 110 | Citizen.Wait(155) 111 | SetVehicleNeonLightsColour(closestvehicle,r,g,b) 112 | end 113 | return 114 | end) 115 | elseif type == 'random' then 116 | CreateThread(function() 117 | local r,g,b = GetVehicleNeonLightsColour(closestvehicle) 118 | while currentype[plate] == type do 119 | math.randomseed(GetGameTimer()) 120 | SetVehicleNeonLightsColour(closestvehicle,math.random(1,255),math.random(1,255),math.random(1,255)) 121 | for i = 0, 3 do 122 | SetVehicleNeonLightEnabled(closestvehicle, i, math.random(1,100) < 50) 123 | end 124 | Citizen.Wait(222) 125 | for i = 0, 3 do 126 | SetVehicleNeonLightEnabled(closestvehicle, i, math.random(1,100) < 50) 127 | end 128 | Citizen.Wait(222) 129 | end 130 | SetVehicleNeonLightsColour(closestvehicle,r,g,b) 131 | return 132 | end) 133 | else 134 | for i = 0, 3 do 135 | SetVehicleNeonLightEnabled(closestvehicle, i, true) 136 | end 137 | end 138 | end 139 | 140 | SetEntityControlable = function(entity) -- server based entities. incase you are not the owner. server entities are a little complicated 141 | local netid = NetworkGetNetworkIdFromEntity(entity) 142 | SetNetworkIdExistsOnAllMachines(netid,true) 143 | SetEntityAsMissionEntity(entity,true,true) 144 | NetworkRequestControlOfEntity(entity) 145 | local attempt = 0 146 | while not NetworkHasControlOfEntity(entity) and attempt < 2000 and DoesEntityExist(entity) do 147 | NetworkRequestControlOfEntity(entity) 148 | Citizen.Wait(0) 149 | attempt = attempt + 1 150 | end 151 | end 152 | 153 | -- havadurumu 154 | 155 | Citizen.CreateThread(function() 156 | while true do 157 | local ped = PlayerPedId(); 158 | local veh = GetVehiclePedIsIn(ped, false); 159 | local coords = GetEntityCoords(ped); 160 | local zone = GetNameOfZone(coords.x, coords.y, coords.z); 161 | local var1, var2 = GetStreetNameAtCoord(coords.x, coords.y, coords.z, Citizen.ResultAsInteger(), Citizen.ResultAsInteger()) 162 | local hash1 = GetStreetNameFromHashKey(var1); 163 | local hash2 = GetStreetNameFromHashKey(var2); 164 | local heading = GetEntityHeading(PlayerPedId()); 165 | SendNUIMessage({ 166 | type = 'open2', 167 | direction = heading, 168 | streetName = hash1, 169 | streetName2 = hash2..' '..GetLabelText(zone); 170 | }) 171 | if Config.OptimizationMode == "ultralow" then 172 | Citizen.Wait(2500); 173 | elseif Config.OptimizationMode == "low" then 174 | Citizen.Wait(2000); 175 | elseif Config.OptimizationMode == "medium" then 176 | Citizen.Wait(1500); 177 | elseif Config.OptimizationMode == "fast" then 178 | Citizen.Wait(1000); 179 | end 180 | end 181 | end) -------------------------------------------------------------------------------- /qb-carcontrol/html/images/bi_thermometer-snow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /qb-carcontrol/html/script.js: -------------------------------------------------------------------------------- 1 | async function SendData(data, cb) { 2 | var xhr = new XMLHttpRequest(); 3 | xhr.onreadystatechange = function() { 4 | if (xhr.readyState == XMLHttpRequest.DONE) { 5 | if (cb) { 6 | cb(xhr.responseText) 7 | } 8 | } 9 | } 10 | xhr.open("POST", `https://${GetParentResourceName()}/nuicb`, true) 11 | xhr.setRequestHeader('Content-Type', 'application/json'); 12 | xhr.send(JSON.stringify(data)) 13 | } 14 | let getEl = function(id) { return document.getElementById(id) } 15 | function setcontrol(type,index) { 16 | // console.log(type,index) 17 | return SendData({msg: 'carcontrol', type: type, index: index}) 18 | } 19 | 20 | 21 | let player; 22 | let playerRuning = false; 23 | let progressInterval = null; 24 | let pausedVideoDuration = null; 25 | 26 | function onYouTubeIframeAPIReady() { 27 | player = new YT.Player("player", { 28 | height: "1", 29 | width: "1", 30 | videoId: "", 31 | playerVars: { 32 | playsinline: 1, 33 | }, 34 | events: { 35 | onReady: (e) => e.target.playVideo(), 36 | onStateChange: (e) => { 37 | if (e.data == YT.PlayerState.PLAYING) { 38 | playerRuning = true; 39 | $(".play-button").attr("src", "images/stop.svg"); 40 | progressInterval = setInterval(() => { 41 | const duration = player?.getDuration() || 0; 42 | const currentTime = player?.getCurrentTime() || 0; 43 | const percentage = (currentTime / duration) * 100; 44 | $(".timeline").css("width", `${percentage}%`); 45 | }, 1000); 46 | } else if (e.data == YT.PlayerState.PAUSED) { 47 | playerRuning = false; 48 | clearInterval(progressInterval); 49 | } else if (e.data == YT.PlayerState.CUED) { 50 | e.target.playVideo(); 51 | } else if (e.data == YT.PlayerState.ENDED) { 52 | playerRuning = false; 53 | updateVideoPreview("Nothing to play", "", ""); 54 | clearInterval(progressInterval); 55 | $(".timeline").css("width", `0%`); 56 | } 57 | }, 58 | onError: (e) => { 59 | playerRuning = false; 60 | $(".play-button").attr("src", "images/play.svg"); 61 | updateVideoPreview("Nothing to play", "", ""); 62 | clearInterval(progressInterval); 63 | $(".timeline").css("width", `0%`); 64 | }, 65 | }, 66 | }); 67 | } 68 | 69 | const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); 70 | 71 | window.addEventListener("message", ({ data }) => { 72 | if (!data) return; 73 | switch (data?.action) { 74 | case "show": 75 | $(".main-wrapper").show(0); 76 | $(".surukle").show(0); 77 | // $(".mini-surukle").hide(0); 78 | // $(".mini-menu").hide(0); 79 | break; 80 | 81 | case "hide": 82 | $(".main-wrapper").hide(0); 83 | $(".mini-menu").hide(0); 84 | break; 85 | 86 | case "playMusic": 87 | const currentDate = new Date().getTime() / 1000; 88 | const seekTo = currentDate - data.startedAt; 89 | 90 | if (seekTo >= (player.getDuration() || pausedVideoDuration)) { 91 | $.post( 92 | `https://${GetParentResourceName()}/controlMusic`, 93 | JSON.stringify({ action: "endMusic" }) 94 | ); 95 | return; 96 | } 97 | 98 | playMusic(data.musicLink, seekTo.toFixed(), data.playerState); 99 | break; 100 | 101 | case "stopMusic": 102 | if (player) { 103 | (async () => { 104 | for (let i = player.getVolume(); i > 0; i--) { 105 | player.setVolume(i); 106 | await wait(10); 107 | } 108 | player.seekTo(player.getDuration()); 109 | })(); 110 | } 111 | break; 112 | 113 | case "pauseMusic": 114 | pauseVideo(); 115 | break; 116 | 117 | case "resumeMusic": 118 | resumeVideo(); 119 | break; 120 | 121 | case "endMusic": 122 | playerRuning = false; 123 | $(".play-button").attr("src", "images/play.svg"); 124 | updateVideoPreview("Nothing to play", "", ""); 125 | clearInterval(progressInterval); 126 | $(".timeline").css("width", `0%`); 127 | break; 128 | } 129 | 130 | if (data?.vehicle) { 131 | 132 | $(".plaka").text(data?.vehicle.plaka); 133 | $(".fuel").text(`${(data?.vehicle.fuel || 100)?.toFixed(0)}%`); 134 | $('.fuel-bar').css({ 'stroke-dasharray': `${(data?.vehicle.fuel || 100)?.toFixed(0) * 2}% 400` }) 135 | $(".temperature").text( 136 | `${data?.vehicle.engineTemperature?.toFixed(0) || 85}°` 137 | ); 138 | $(".interior-temperature").text( "INTERIOR: " + 139 | `${data?.vehicle.engineTemperature?.toFixed(0) || 85}°` 140 | ); 141 | 142 | $("#car-name").text(data?.vehicle?.name || ""); 143 | $(".kilometer").text( "KILOMETER: " + 144 | parseFloat(data?.vehicle?.mileage || 0)?.toFixed(1) || "0" 145 | ); 146 | $(".chart-km").text( 147 | parseFloat(data?.vehicle?.mileage || 0)?.toFixed(1) || "0" 148 | ); 149 | } 150 | }); 151 | 152 | window.addEventListener("keydown", ({ key }) => { 153 | if (key == "Escape") $.post(`https://${GetParentResourceName()}/exitMenu`); 154 | }); 155 | 156 | const updateMenuContainer = function () { 157 | const menuId = $(this).data("id"); 158 | const noPage = $(this).data("nopage"); 159 | 160 | if (noPage) 161 | return $.post( 162 | `https://${GetParentResourceName()}/${$(this).data("action")}` 163 | ); 164 | 165 | $(".menu-categories") 166 | .children() 167 | .each((i, el) => { 168 | const className = $(el).attr("class").split(" ")[1]; 169 | 170 | if (className == `menu-${menuId}`) { 171 | $(el).removeClass("menu-hidden"); 172 | } else { 173 | $(el).addClass("menu-hidden"); 174 | } 175 | }); 176 | }; 177 | 178 | const pauseVideo = () => { 179 | pausedVideoDuration = player.getDuration(); 180 | player.pauseVideo(); 181 | playerRuning = false; 182 | $(".play-button").attr("src", "images/play.svg"); 183 | }; 184 | 185 | const resumeVideo = () => { 186 | pausedVideoDuration = null; 187 | player.playVideo(); 188 | playerRuning = true; 189 | $(".play-button").attr("src", "images/stop.svg"); 190 | }; 191 | 192 | const togglePlayVideo = (forcePlay) => { 193 | if (playerRuning) { 194 | pauseVideo(); 195 | } else { 196 | resumeVideo(); 197 | } 198 | }; 199 | 200 | const getVideoId = (url) => { 201 | var regExp = 202 | /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/; 203 | var match = url.match(regExp); 204 | return match && match[7].length == 11 ? match[7] : false; 205 | }; 206 | 207 | const getVideoData = async (url) => { 208 | const data = await fetch(`https://youtube.com/oembed?url=${url}&format=json`) 209 | .then((res) => (res.ok ? res.json() : null)) 210 | .catch((err) => null); 211 | 212 | if (!data) return null; 213 | 214 | return data; 215 | }; 216 | 217 | const updateVideoPreview = (title, description, background) => { 218 | $(".song-name").text(title); 219 | $(".song-author").text(description); 220 | $(".cover-image").attr("src", background); 221 | }; 222 | 223 | const playMusic = async (link, seekTo, playerState) => { 224 | const musicId = getVideoId(link); 225 | 226 | player?.setVolume($(".volume").val()); 227 | 228 | player?.loadVideoById(musicId, seekTo); 229 | 230 | if (playerState == "paused") { 231 | player.pauseVideo(); 232 | $(".play-button").attr("src", "images/play.svg"); 233 | const percentage = (seekTo / pausedVideoDuration.toFixed()) * 100; 234 | $(".timeline").css("width", `${percentage}%`); 235 | } else { 236 | $(".play-button").attr("src", "images/stop.svg"); 237 | } 238 | 239 | const videoData = await getVideoData(link); 240 | 241 | if (videoData) 242 | updateVideoPreview( 243 | videoData.title, 244 | videoData.author_name, 245 | videoData.thumbnail_url 246 | ); 247 | 248 | $(".spotify-input").val(""); 249 | }; 250 | 251 | const musicInputChange = async () => { 252 | const link = $(".spotify-input").val(); 253 | const musicId = getVideoId(link); 254 | 255 | if (!musicId) return; 256 | 257 | $.post( 258 | `https://${GetParentResourceName()}/controlMusic`, 259 | JSON.stringify({ action: "playMusic", musicLink: link }) 260 | ); 261 | }; 262 | 263 | const actionButtonClick = (e) => { 264 | const action = $(e.currentTarget).data("action"); 265 | $.post(`https://${GetParentResourceName()}/${action}`); 266 | }; 267 | 268 | const doorActionButtionClick = (e) => { 269 | const doorIndex = $(e.currentTarget).data("index"); 270 | // $(e.currentTarget).attr("src", "images/acik.svg"); 271 | $.post( 272 | `https://${GetParentResourceName()}/toggleDoor`, 273 | JSON.stringify(doorIndex) 274 | ); 275 | }; 276 | 277 | const musicVolumeChange = () => { 278 | if (player) player?.setVolume($(".volume").val()); 279 | }; 280 | 281 | $(document).ready(() => { 282 | $(".menu-exit").on("click", () => 283 | $.post(`https://${GetParentResourceName()}/exitMenu`) 284 | ); 285 | $(".sidebar-option").on("click", updateMenuContainer); 286 | $(".play-button").on("click", () => { 287 | if (playerRuning) { 288 | pauseVideo(); 289 | } else { 290 | resumeVideo(); 291 | } 292 | 293 | $.post( 294 | `https://${GetParentResourceName()}/controlMusic`, 295 | JSON.stringify({ 296 | action: !playerRuning ? "pauseMusic" : "resumeMusic", 297 | }) 298 | ); 299 | }); 300 | $(".spotify-input").on("input", musicInputChange); 301 | $(".lights-button").on("click", actionButtonClick); 302 | $(".kapilar").on("click", doorActionButtionClick); 303 | $(".mdoor-button").on("click", doorActionButtionClick); 304 | $(".volume").on("change", musicVolumeChange); 305 | }); 306 | function SetNeonStyle(val) { 307 | SendData({ msg: 'neonstyle', val: val }) 308 | } 309 | 310 | window.addEventListener("message", function(event) { 311 | var vehicle = event.data; 312 | switch (vehicle.carhud) { 313 | case 'arabada': 314 | var gear = vehicle.gear 315 | var speedsInt = vehicle.speed.toFixed() 316 | var mesafe = vehicle.metre.toFixed() 317 | var motor = vehicle.motor 318 | var head = vehicle.heading.toFixed() 319 | $(".distance").text(mesafe + "m"); 320 | $(".distance-description").text(mesafe + " meters to destination"); 321 | $(".ok").css("rotate", `${head}deg`); 322 | $('.speed-bar').css("stroke-dasharray", `${speedsInt}% 1500`) 323 | $(".speed").text(speedsInt); 324 | $('.rpm-bar').css( "stroke-dasharray", `${gear * 150}% 400` ) 325 | if (vehicle.gear == 0 && vehicle.rpm > 1) { 326 | $('.rpm').text(`R`) 327 | } else if (vehicle.gear == 0) { 328 | $('.rpm').text(`P`) 329 | } else if (vehicle.gear > 0) { 330 | $('.rpm').text(vehicle.gear) 331 | } 332 | if (motor < 1000.0 && 500.0 < motor) { 333 | $(".status-svg").attr("src", "images/safe.svg"); 334 | $('.status').text(`Status : Safe`) 335 | } else if (motor < 500.0 && 250.0 < motor) { 336 | $(".status-svg").attr("src", "images/warn.svg"); 337 | $('.status').text(`Status : Warning`) 338 | } else if (motor < 250.0) { 339 | $(".status-svg").attr("src", "images/emergency.svg"); 340 | $('.status').text(`Status : Emergency`) 341 | } 342 | break 343 | case 'indi': 344 | //sd 345 | break 346 | } 347 | }); 348 | 349 | 350 | 351 | 352 | $("#open-mini").click(function(e) { 353 | $(".surukle").hide(0); 354 | $(".mini-surukle").hide(0); 355 | $(".mini-menu").hide(0); 356 | $(".main-wrapper").hide(0); 357 | }); 358 | $(".fa-expand").click(function (e) { 359 | $(".surukle").show(0); 360 | $(".mini-surukle").hide(0); 361 | $(".mini-menu").hide(0); 362 | $(".main-wrapper").show(0); 363 | }); 364 | 365 | $(".fawindowminimize").click(function (e) { 366 | $(".surukle").hide(0); 367 | $(".mini-surukle").show(0); 368 | $(".mini-menu").show(0); 369 | $(".main-wrapper").hide(0); 370 | }); 371 | 372 | 373 | $(".faxmark").click(function (e) { 374 | $(".surukle").hide(0); 375 | $(".mini-surukle").hide(0); 376 | $(".mini-menu").hide(0); 377 | $(".main-wrapper").hide(0); 378 | $.post( 379 | `https://${GetParentResourceName()}/closeui`, 380 | JSON.stringify({})); 381 | }); 382 | 383 | window.addEventListener('message', (event) => { 384 | let item = event.data; 385 | if (item.type === 'open2') { 386 | $('.location-1').text(`${item.streetName}`); 387 | $('.location-2').text(`${item.streetName2}`); 388 | } 389 | }) 390 | $( function() { 391 | $(".mini-surukle").draggable(); 392 | } ); 393 | $( function() { 394 | $(".surukle").draggable(); 395 | } ); -------------------------------------------------------------------------------- /qb-carcontrol/html/images/yol.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /qb-carcontrol/html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 0R-CarControl 7 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 43 |
44 | 45 |
46 | 191 |
192 | 193 | 194 | 195 | -------------------------------------------------------------------------------- /qb-carcontrol/html/images/speedarka.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /qb-carcontrol/html/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 2 | body { 3 | overflow: hidden; 4 | } 5 | 6 | .main-wrapper { 7 | position: absolute; 8 | left: 50%; 9 | top: 50%; 10 | transform: translate(-50%, -50%); 11 | width: 55.9375vw; 12 | height: 42.6563vw; 13 | background:url(../html/images/bg-pic.png) no-repeat; 14 | background-size: cover; 15 | border-radius: 2.0833vw; 16 | background-color: #000000f0; 17 | 18 | } 19 | 20 | .header { 21 | position: absolute; 22 | width: 100%; 23 | height: 4vw; 24 | color:#6709eb; 25 | } 26 | 27 | .logo-icon { 28 | position: absolute; 29 | width: 2vw; 30 | top: 2.5vw; 31 | left: 2.5vw; 32 | } 33 | 34 | .header-title { 35 | position: absolute; 36 | top: 1.5vw; 37 | left: 4.5vw; 38 | font-family: 'Poppins', sans-serif; 39 | font-style: normal; 40 | font-weight: 600; 41 | font-size: 1.1625vw; 42 | color: #FFFFFF; 43 | } 44 | 45 | .search-input-container { 46 | position: absolute; 47 | width: 16.1563vw; 48 | height: 2.125vw; 49 | top: 2.35vw; 50 | right: 9vw; 51 | } 52 | 53 | .spotify-input { 54 | position: absolute; 55 | width: 16.1563vw; 56 | height: 2.125vw; 57 | background: #b5b4b3b4; 58 | border-radius: 2.0833vw; 59 | border: none; 60 | outline: none; 61 | font-family: 'Poppins'; 62 | font-style: normal; 63 | font-weight: 500; 64 | font-size: 16px; 65 | padding-left: 2vw; 66 | padding-right: 2vw; 67 | color: #000; 68 | } 69 | 70 | .search-icon { 71 | position: absolute; 72 | top: 0.6vw; 73 | left: 0.7vw; 74 | width: .9375vw; 75 | height: .9375vw; 76 | z-index: 12312321; 77 | color: #ffffff; 78 | } 79 | 80 | .left-grid { 81 | position: absolute; 82 | width: 27.9375vw; 83 | height: 32.6563vw; 84 | z-index: -123123; 85 | } 86 | 87 | .right-grid { 88 | position: absolute; 89 | top: 2vw; 90 | left: 28vw; 91 | width: 22.9375vw; 92 | height: 32.6563vw; 93 | z-index: -12321123123; 94 | } 95 | 96 | .live-map-container { 97 | position: absolute; 98 | left: 2.5vw; 99 | top: 21vw; 100 | width: 12.6458vw; 101 | height: 17.6979vw; 102 | background: #1E1E1E; 103 | border-radius: .7813vw; 104 | } 105 | 106 | .spotify-container { 107 | position: absolute; 108 | left: 18vw; 109 | top: 6vw; 110 | width: 22.1vw; 111 | height: 5vw; 112 | background: #1E1E1E; 113 | border-radius: .7813vw; 114 | } 115 | 116 | .temperature-container { 117 | position: absolute; 118 | left: 16vw; 119 | top: 30.6vw; 120 | width: 11.646vw; 121 | height: 8vw; 122 | background: #1E1E1E; 123 | border-radius: .7813vw; 124 | } 125 | 126 | .kilometer-container { 127 | position: absolute; 128 | left: 28.5vw; 129 | top: 30.6vw; 130 | width: 9.646vw; 131 | height: 8vw; 132 | background: #1E1E1E; 133 | border-radius: .7813vw; 134 | } 135 | 136 | .car-container { 137 | position: absolute; 138 | top: 54%; 139 | transform: translate(-50%, -50%); 140 | left: 80%; 141 | width: 17vw; 142 | height: 17vw; 143 | } 144 | 145 | .car { 146 | position: absolute; 147 | width: 14vw; 148 | /* height: 17vw; */ 149 | } 150 | 151 | .status-container { 152 | position: absolute; 153 | left: 14.2vw; 154 | top: 4vw; 155 | width: 11.1vw; 156 | height: 4vw; 157 | background: #1E1E1E; 158 | border-radius: .7813vw; 159 | } 160 | 161 | .plaka-back { 162 | position: absolute; 163 | width: 3vw; 164 | bottom:-180px; 165 | transform: translate(-50%, -50%); 166 | left: 44.8%; 167 | } 168 | 169 | .status-icon { 170 | position: absolute; 171 | top: 50%; 172 | transform: translate(-50%, -50%); 173 | left: 18%; 174 | width: 2.8vw; 175 | height: 2.6vw; 176 | background: #2B2A2A; 177 | border-radius: 4px; 178 | display: flex; 179 | justify-content: center; 180 | align-items: center; 181 | } 182 | 183 | .status-svg { 184 | position: absolute; 185 | width: 1.2vw; 186 | height: 1.2vw; 187 | top: 50%; 188 | transform: translate(-50%, -50%); 189 | left: 50%; 190 | } 191 | 192 | .status { 193 | position: absolute; 194 | width: 20vw; 195 | left: 3.2vw; 196 | top: -0.7vw; 197 | font-family: 'Poppins'; 198 | font-style: normal; 199 | font-weight: 500; 200 | font-size: .7292vw; 201 | color: #FFFFFF; 202 | } 203 | 204 | .status-subtitle { 205 | position: absolute; 206 | width: 7vw; 207 | left: 3.2vw; 208 | top: 0.5vw; 209 | font-family: 'Poppins'; 210 | font-style: normal; 211 | font-weight: 400; 212 | font-size: .5208vw; 213 | color: #87888C; 214 | } 215 | 216 | .fuel-container { 217 | position: absolute; 218 | left: -10vw; 219 | top: 22vw; 220 | width: 8vw; 221 | height: 8vw; 222 | } 223 | .fuel-back { 224 | position: absolute; 225 | width: 6.6146vw; 226 | height: 5.4172vw; 227 | } 228 | 229 | .fuel-bar { 230 | position: absolute; 231 | top: 0.1vw; 232 | width: 6.6146vw; 233 | height: 3.3854vw; 234 | stroke-dasharray: 200 400; 235 | z-index: -2; 236 | } 237 | 238 | .fuel-icon { 239 | position: absolute; 240 | width: 0.9vw; 241 | left: 3vw; 242 | top: 2.5vw; 243 | z-index: 12321321; 244 | } 245 | 246 | .fuel-title { 247 | position: absolute; 248 | top: 2.8vw; 249 | width: 6.6146vw; 250 | text-align: center; 251 | z-index: 123232131; 252 | font-family: 'Poppins'; 253 | font-style: normal; 254 | font-weight: 500; 255 | font-size: .7292vw; 256 | color: #FFFFFF; 257 | } 258 | 259 | .fuel { 260 | position: absolute; 261 | top: 3.75vw; 262 | width: 6.6146vw; 263 | text-align: center; 264 | z-index: 123232131; 265 | font-family: 'Poppins'; 266 | font-style: normal; 267 | font-weight: 400; 268 | font-size: .7292vw; 269 | color: #FFFFFF; 270 | } 271 | 272 | 273 | /* */ 274 | 275 | .rpm-container { 276 | position: absolute; 277 | left: 2vw; 278 | top: 22vw; 279 | width: 8vw; 280 | height: 8vw; 281 | } 282 | 283 | .rpm-back { 284 | position: absolute; 285 | width: 6.6146vw; 286 | height: 5.4172vw; 287 | } 288 | 289 | .rpm-bar { 290 | position: absolute; 291 | top: 0.1vw; 292 | width: 6.6146vw; 293 | height: 3.3854vw; 294 | stroke-dasharray: 200 400; 295 | z-index: -2; 296 | } 297 | /* .rpm-bar { 298 | position: absolute; 299 | top: -10.9vw; 300 | width: 4.615vw; 301 | height: 21.385vw; 302 | stroke-dasharray: 1 400; 303 | z-index: -2; 304 | } */ 305 | .rpm-icon { 306 | position: absolute; 307 | width: 0.9vw; 308 | left: 3vw; 309 | top: 2.5vw; 310 | z-index: 12321321; 311 | } 312 | 313 | .rpm-title { 314 | position: absolute; 315 | top: 2.8vw; 316 | width: 6.6146vw; 317 | text-align: center; 318 | z-index: 123232131; 319 | font-family: 'Poppins'; 320 | font-style: normal; 321 | font-weight: 500; 322 | font-size: .7292vw; 323 | color: #FFFFFF; 324 | } 325 | 326 | .rpm { 327 | position: absolute; 328 | top: 3.75vw; 329 | width: 6.6146vw; 330 | text-align: center; 331 | z-index: 123232131; 332 | font-family: 'Poppins'; 333 | font-style: normal; 334 | font-weight: 400; 335 | font-size: .7292vw; 336 | color: #FFFFFF; 337 | } 338 | 339 | .speed-container { 340 | position: absolute; 341 | width: 20vw; 342 | height: 2.9vw; 343 | top: 12vw; 344 | left: -9.5vw; 345 | } 346 | 347 | .speed-center { 348 | position: absolute; 349 | left: 1.6vw; 350 | top: -1.5vw; 351 | scale: 0.8; 352 | } 353 | 354 | .speed-back { 355 | position: absolute; 356 | width: 17.9688vw; 357 | height: 16.7188vw; 358 | stroke-dasharray: 1500 1500; 359 | z-index: 12312312; 360 | } 361 | 362 | .speed-bar { 363 | position: absolute; 364 | width: 17.9688vw; 365 | height: 13.5417vw; 366 | stroke-dasharray: 1500 1500; 367 | z-index: 12312312; 368 | } 369 | 370 | .speed { 371 | position: absolute; 372 | left: 5.65vw; 373 | top: -2vw; 374 | width: 6.6146vw; 375 | text-align: center; 376 | z-index: 123232131; 377 | font-family: 'Poppins'; 378 | font-style: normal; 379 | font-weight: 600; 380 | font-size: 4.927vw; 381 | color: #FFFFFF; 382 | } 383 | 384 | .speed-type { 385 | position: absolute; 386 | left: 4.65vw; 387 | top: 4.5vw; 388 | width: 6.6146vw; 389 | text-align: center; 390 | z-index: 123232131; 391 | font-family: 'Poppins'; 392 | font-style: normal; 393 | font-weight: 500; 394 | font-size: 3.838vw; 395 | color: #87888C; 396 | } 397 | 398 | .distance-container { 399 | position: absolute; 400 | width: 10vw; 401 | height: 3vw; 402 | left: 50%; 403 | top: 13%; 404 | transform: translate(-50%, -50%); 405 | background: rgba(41, 41, 41, 0.84); 406 | border-radius: .3646vw; 407 | } 408 | 409 | .yön { 410 | position: absolute; 411 | width: 1.2vw; 412 | left: 0.7vw; 413 | top: 0.8vw; 414 | } 415 | 416 | .distance { 417 | position: absolute; 418 | width: 10vw; 419 | left: 0.3vw; 420 | text-align: center; 421 | top: -0.5vw; 422 | font-family: 'Poppins'; 423 | font-style: normal; 424 | font-weight: 600; 425 | font-size: 1vw; 426 | color: #FFFFFF; 427 | } 428 | 429 | .distance-description { 430 | position: absolute; 431 | width: 10vw; 432 | left: 0.3vw; 433 | top: 1.35vw; 434 | text-align: center; 435 | font-family: 'Poppins'; 436 | font-style: normal; 437 | font-weight: 500; 438 | font-size: .4813vw; 439 | color: #87888C; 440 | } 441 | 442 | .location-container { 443 | position: absolute; 444 | width: 100%; 445 | top: 15.2vw; 446 | height: 2.5vw; 447 | background: rgba(41, 41, 41, 0.84); 448 | border-bottom-left-radius: .7813vw; 449 | border-bottom-right-radius: .7813vw; 450 | } 451 | 452 | .location-1 { 453 | position: absolute; 454 | left: 0.5vw; 455 | top: -0.8vw; 456 | font-family: 'Poppins'; 457 | font-style: normal; 458 | font-weight: 600; 459 | font-size: 16px; 460 | color: #FFFFFF; 461 | } 462 | 463 | .location-2 { 464 | position: absolute; 465 | left: 0.5vw; 466 | top: 0.8vw; 467 | font-family: 'Poppins'; 468 | font-style: normal; 469 | font-weight: 500; 470 | font-size: .5vw; 471 | color: #87888C; 472 | } 473 | 474 | .cover-image { 475 | position: absolute; 476 | width: 6.5vw; 477 | height: 4vw; 478 | border-radius: 0.3vw; 479 | left: 17.3%; 480 | top: 50%; 481 | transform: translate(-50%, -50%); 482 | /* background-image: url("./images/cover.png"); */ 483 | background-size: cover; 484 | z-index: 123213213212132131232132121; 485 | } 486 | 487 | .cover-image[alt]:after { 488 | position: absolute; 489 | top: 0; 490 | left: 0; 491 | width: 100%; 492 | height: 100%; 493 | background-color: #111111; 494 | font-weight: 300; 495 | line-height: 2vw; 496 | text-align: center; 497 | content: attr(alt); 498 | border-radius: 0.3vw; 499 | } 500 | 501 | .song-name { 502 | position: absolute; 503 | left: 8vw; 504 | top: -1vh; 505 | width: 10vw; 506 | height: 1vw; 507 | overflow: hidden; 508 | font-family: 'Poppins'; 509 | font-style: normal; 510 | font-weight: 500; 511 | font-size: .7375vw; 512 | color: #FFFFFF; 513 | } 514 | .song-author { 515 | position: absolute; 516 | left: 8vw; 517 | top: 0.8vw; 518 | width: 200px; 519 | font-family: 'Poppins'; 520 | font-style: normal; 521 | font-weight: 400; 522 | font-size: .6292vw; 523 | color: #87888C; 524 | } 525 | .music-timeline-container { 526 | position: absolute; 527 | left: 8vw; 528 | top: 4vw; 529 | width: 13.3vw; 530 | height: 0.2vw; 531 | background-color: rgba(135, 136, 140, 0.15); 532 | border-radius: 0.4vw; 533 | } 534 | 535 | .timeline { 536 | position: absolute; 537 | width: 50%; 538 | height: 100%; 539 | background-color: #6709eb; 540 | border-radius: 0.4vw; 541 | } 542 | 543 | .spo-buttons { 544 | position: absolute; 545 | left: 13.8vw; 546 | transform: translate(-50%, -50%); 547 | top: 3vw; 548 | width: 12vw; 549 | height: 1vw; 550 | } 551 | 552 | .back-button { 553 | position: relative; 554 | margin-left: 1.6vw; 555 | width: 0.75vw; 556 | } 557 | 558 | .play-button { 559 | position: relative; 560 | margin-left: 1.6vw; 561 | top: 0.1vw; 562 | width: 0.6vw; 563 | } 564 | 565 | .forward-button { 566 | position: relative; 567 | margin-left: 1.6vw; 568 | width: 0.75vw; 569 | } 570 | 571 | .end-button { 572 | position: relative; 573 | margin-left: 1.6vw; 574 | width: 0.5vw; 575 | } 576 | 577 | .start-button { 578 | position: relative; 579 | margin-left: 1.6vw; 580 | width: 0.5vw; 581 | } 582 | 583 | .temperature-title { 584 | position: absolute; 585 | left: 0.8vw; 586 | font-family: 'Poppins'; 587 | font-style: normal; 588 | font-weight: 500; 589 | font-size: 0.8vw; 590 | color: #FFFFFF; 591 | } 592 | 593 | .interior-temperature { 594 | position: absolute; 595 | font-family: 'Poppins'; 596 | left: 0.8vw; 597 | top: 1.4vw; 598 | font-style: normal; 599 | font-weight: 500; 600 | font-size: .6333vw; 601 | color: #87888C; 602 | } 603 | 604 | .temperature { 605 | position: absolute; 606 | left: 0.8vw; 607 | top: 1vw; 608 | font-family: 'Poppins'; 609 | font-style: normal; 610 | font-weight: 600; 611 | font-size: 2.1438vw; 612 | color: #FFFFFF; 613 | } 614 | 615 | .thermo-icon { 616 | position: absolute; 617 | width: 3vw; 618 | top: 2.5vw; 619 | left: 7.5vw; 620 | } 621 | 622 | .window-status { 623 | position: absolute; 624 | left: 0.8vw; 625 | top: 5.7vw; 626 | font-family: 'Poppins'; 627 | font-style: normal; 628 | font-weight: 500; 629 | font-size: .5333vw; 630 | color: #FFFFFF; 631 | } 632 | 633 | .kilometer-chart-container { 634 | position: absolute; 635 | top: 3vw; 636 | height: 0.1vw; 637 | width: 100%; 638 | background-color: rgba(82, 11, 248, 0.36); 639 | border-radius: 0.6px; 640 | } 641 | 642 | .kilometer-title { 643 | position: absolute; 644 | left: 0.8vw; 645 | top: -0.1vw; 646 | font-family: 'Poppins'; 647 | font-style: normal; 648 | font-weight: 500; 649 | font-size: 0.8vw; 650 | color: #FFFFFF; 651 | } 652 | 653 | .kilometer { 654 | position: absolute; 655 | font-family: 'Poppins'; 656 | left: 0.8vw; 657 | top: 1.2vw; 658 | font-style: normal; 659 | font-weight: 500; 660 | font-size: .6333vw; 661 | color: #87888C; 662 | } 663 | 664 | .line { 665 | position: relative; 666 | width: 100%; 667 | height: 2vw; 668 | border-bottom: 0.5px dashed rgba(135, 136, 140, 0.35); 669 | } 670 | 671 | .chart-km-zero { 672 | position: absolute; 673 | left: 0.8vw; 674 | top: 2.2vw; 675 | font-family: 'Poppins'; 676 | font-style: normal; 677 | font-weight: 400; 678 | font-size: .5292vw; 679 | color: #87888C; 680 | } 681 | 682 | .chart-km { 683 | position: absolute; 684 | left: 0.8vw; 685 | top: 0.3vw; 686 | font-family: 'Poppins'; 687 | font-style: normal; 688 | font-weight: 400; 689 | font-size: .5292vw; 690 | color: #87888C; 691 | } 692 | 693 | .volume { 694 | position: absolute; 695 | -webkit-appearance: none; 696 | overflow: hidden; 697 | top: 2vw; 698 | left: 20.7vw; 699 | width: 4vw; 700 | height: 0.4vw; 701 | transform: rotate(-90deg); 702 | background-color: #1E1E1E; 703 | border-radius: 1vw; 704 | } 705 | 706 | ::-webkit-slider-runnable-track { 707 | background-color: #1E1E1E; 708 | border-radius: 50%; 709 | } 710 | 711 | ::-webkit-slider-thumb { 712 | -webkit-appearance: none; 713 | width: 10px; 714 | height: 40px; 715 | background: #380e7c; 716 | border-radius: 50%; 717 | box-shadow: -200px 0 0 200px #6709eb; 718 | } 719 | 720 | #sol-ön-kapi { 721 | position: absolute; 722 | top: 11vw; 723 | left: 0vw; 724 | width: 2vw; 725 | z-index: 123213; 726 | } 727 | 728 | #sol-arka-kapi { 729 | position: absolute; 730 | width: 2vw; 731 | top: 15vw; 732 | left: 0vw; 733 | z-index: 123213; 734 | } 735 | 736 | .right-kapi { 737 | position: absolute; 738 | left: 15.8vw; 739 | -webkit-transform: scaleX(-1); 740 | transform: scaleX(-1); 741 | z-index: 12312321; 742 | } 743 | 744 | #sağ-ön-kapi { 745 | position: absolute; 746 | top: 11vw; 747 | right: -3vw; 748 | width: 2vw; 749 | z-index: 123213; 750 | } 751 | 752 | #sağ-arka-kapi { 753 | position: absolute; 754 | width: 2vw; 755 | top: 15vw; 756 | right: -3vw; 757 | z-index: 123213; 758 | } 759 | 760 | #ön-kaput { 761 | position: absolute; 762 | width: 2vw; 763 | left: 44%; 764 | top: 5%; 765 | transform: translate(-50%, -50%); 766 | z-index: 123213; 767 | transition: all 0.5s; 768 | } 769 | 770 | #arka-kaput { 771 | position: absolute; 772 | width: 2vw; 773 | left: 44%; 774 | top: 157%; 775 | transform: translate(-50%, -50%); 776 | z-index: 123213; 777 | } 778 | 779 | .plaka { 780 | position: absolute; 781 | left: 6.3vw; 782 | top: 24.4vw; 783 | width: 2.5vw; 784 | height: 1.3vw; 785 | text-align: center; 786 | font-family: 'Poppins'; 787 | font-style: normal; 788 | font-weight: 700; 789 | font-size: .5167vw; 790 | text-align: center; 791 | color: #0F274C; 792 | text-shadow: 0px 0.393185px 1.96592px #FFFFFF; 793 | z-index: 12321; 794 | } 795 | 796 | .neon-settings { 797 | position: absolute; 798 | width: 25.9vw; 799 | left: 2vw; 800 | top:6vw; 801 | height: 2vw; 802 | } 803 | 804 | .seat-settings { 805 | position: absolute; 806 | width: 25.9vw; 807 | left: 6.4vw; 808 | top: 6vw; 809 | height: 3vw; 810 | } 811 | 812 | .lights-settings { 813 | position: absolute; 814 | width: 10vw; 815 | left: 12.2vw; 816 | top: 6vw; 817 | height: 7vw; 818 | } 819 | 820 | .lights-button { 821 | position: relative; 822 | width: 4vw; 823 | height: 3vw; 824 | background: #1E1E1E; 825 | border-radius: .5375vw; 826 | /* float: left; */ 827 | /* margin-left: 0.5vw; */ 828 | margin-bottom:8px; 829 | 830 | font-family: 'Poppins'; 831 | font-style: normal; 832 | font-weight: 500; 833 | font-size: .5208vw; 834 | text-align: center; 835 | line-height: 3vw; 836 | color: #FFFFFF; 837 | cursor: pointer; 838 | transition: 0.5s all; 839 | } 840 | 841 | .lights-button:hover { 842 | background: #6709eb; 843 | color: #ffffff; 844 | } 845 | 846 | .fa-camera { 847 | position: absolute; 848 | width: 4vw; 849 | left: 0vw; 850 | top: 0.7vw; 851 | text-align: center; 852 | font-size: 0.7vw; 853 | } 854 | 855 | #open-mini { 856 | line-height: 4.1vw; 857 | } 858 | 859 | .lights-title { 860 | position: absolute; 861 | font-family: 'Poppins'; 862 | left: 0.5vw; 863 | top: -1.5vw; 864 | font-style: normal; 865 | font-weight: 500; 866 | font-size: .5333vw; 867 | color: #87888C; 868 | } 869 | 870 | .neon-button { 871 | position: relative; 872 | width: 4vw; 873 | height: 3vw; 874 | background: #1E1E1E; 875 | border-radius: .5375vw; 876 | /* float: left; */ 877 | margin-left: 0.5vw; 878 | margin-bottom: 0.5vw; 879 | font-family: 'Poppins'; 880 | font-style: normal; 881 | font-weight: 500; 882 | font-size: .5208vw; 883 | text-align: center; 884 | line-height: 3vw; 885 | color: #FFFFFF; 886 | cursor: pointer; 887 | transition: 0.5s all; 888 | } 889 | 890 | .neon-button:hover { 891 | background: #6709eb; 892 | color: #ffffff; 893 | } 894 | 895 | .neon-title { 896 | position: absolute; 897 | font-family: 'Poppins'; 898 | left: 0.5vw; 899 | top: -1.5vw; 900 | font-style: normal; 901 | font-weight: 500; 902 | font-size: .5333vw; 903 | color: #87888C; 904 | } 905 | 906 | .seat-button { 907 | position: relative; 908 | width: 4vw; 909 | height: 3vw; 910 | background: #1E1E1E; 911 | border-radius: .5375vw; 912 | /* float: left; */ 913 | margin-left: 0.5vw; 914 | margin-bottom: 0.5vw; 915 | font-family: 'Poppins'; 916 | font-style: normal; 917 | font-weight: 500; 918 | font-size: .5208vw; 919 | text-align: center; 920 | line-height: 3vw; 921 | color: #FFFFFF; 922 | cursor: pointer; 923 | transition: 0.5s all; 924 | } 925 | 926 | .seat-button:hover { 927 | background: #6709eb; 928 | color: #ffffff; 929 | } 930 | 931 | .mdoor-button { 932 | position: relative; 933 | width: 4vw; 934 | height: 3vw; 935 | background: #1E1E1E; 936 | border-radius: .5375vw; 937 | float: left; 938 | margin-left: 0.5vw; 939 | margin-bottom: 0.5vw; 940 | font-family: 'Poppins'; 941 | font-style: normal; 942 | font-weight: 500; 943 | font-size: .5208vw; 944 | text-align: center; 945 | line-height: 3vw; 946 | color: #FFFFFF; 947 | cursor: pointer; 948 | transition: 0.5s all; 949 | } 950 | 951 | .mdoor-button:hover { 952 | background: #6709eb; 953 | color: #fdfdfd; 954 | } 955 | 956 | .seat-title { 957 | position: absolute; 958 | font-family: 'Poppins'; 959 | left: 0.5vw; 960 | top: -1.5vw; 961 | font-style: normal; 962 | font-weight: 500; 963 | font-size: .5333vw; 964 | color: #87888C; 965 | } 966 | 967 | .yol { 968 | position: absolute; 969 | width: 12.6458vw; 970 | height: 17.6979vw; 971 | } 972 | 973 | .ok { 974 | position: absolute; 975 | width: 1vw; 976 | left: 5.2vw; 977 | top: 9.75vw; 978 | transform-origin: center; 979 | } 980 | 981 | .seat-settings-mini { 982 | position: absolute; 983 | width: 10.9375vw; 984 | left: 0.5vw; 985 | top: 3vw; 986 | height: 3vw; 987 | } 988 | 989 | .door-settings-mini { 990 | position: absolute; 991 | width: 10.9375vw; 992 | left: 0.5vw; 993 | top: 18vw; 994 | height: 7vw; 995 | } 996 | 997 | .neon-settings-mini { 998 | position: absolute; 999 | width: 10.9375vw; 1000 | left: 5vw; 1001 | top: 3vw; 1002 | height: 7vw; 1003 | } 1004 | 1005 | .mini-menu { 1006 | position: absolute; 1007 | left: 94%; 1008 | top: 50%; 1009 | transform: translate(-50%, -50%); 1010 | width: 10.9375vw; 1011 | height: 29vw; 1012 | background: #111111; 1013 | border-radius: 1.0833vw; 1014 | } 1015 | 1016 | 1017 | /* */ 1018 | 1019 | .fa-expand { 1020 | position: absolute; 1021 | color: #FFFFFF; 1022 | left: 9vw; 1023 | top: 0.8vw; 1024 | font-size: 0.8vw; 1025 | } 1026 | /* 1027 | .fa-xmark { 1028 | position: relative; 1029 | color: #FFFFFF; 1030 | margin-left: 0.8vw; 1031 | left: 45.7vw; 1032 | top: 2.5vw; 1033 | font-size: 0.8vw; 1034 | z-index: 12321321; 1035 | } */ 1036 | 1037 | .fawindowminimize { 1038 | position: relative; 1039 | margin-left: 0.8vw; 1040 | color: #FFFFFF; 1041 | left: 42.7vw; 1042 | top: 2.3vw; 1043 | font-size: 1vw; 1044 | z-index: 12321321; 1045 | } 1046 | /* .bg-pic{ 1047 | background: url(../html/images/bg-pic.png) no-repeat; 1048 | } */ 1049 | .surukle { 1050 | position: absolute; 1051 | left: 0vw; 1052 | top: 0vw; 1053 | width: 100%; 1054 | height: 100%; 1055 | } 1056 | 1057 | .mini-surukle { 1058 | position: absolute; 1059 | left: 0vw; 1060 | top: 0vw; 1061 | width: 100%; 1062 | height: 100%; 1063 | } 1064 | 1065 | .kapilar:hover { 1066 | transition: all 1s; 1067 | filter: drop-shadow(0 0 1.5vw #0f0be6); 1068 | } 1069 | 1070 | .faxmark{ 1071 | position: absolute; 1072 | left: 32%; 1073 | bottom: 35px; 1074 | width: 20.5vw; 1075 | height: 8px; 1076 | background-color: #d0cccc; 1077 | border-radius: 20px; 1078 | /* cursor: pointer; */ 1079 | /* background: #621c76; */ 1080 | } --------------------------------------------------------------------------------