├── html ├── img │ ├── qbit.png │ ├── default.png │ ├── politie.png │ ├── samsung-s10.png │ ├── samsung-s10og.png │ ├── apps │ │ ├── bank-logo.png │ │ ├── whatsapp-chat.png │ │ └── whatsapp-chatlight.png │ └── backgrounds │ │ ├── background-1.png │ │ └── default-qbcore.png ├── js │ ├── camera.js │ ├── config.js │ ├── trucker.js │ ├── garage.js │ ├── gallery.js │ ├── qstore.js │ ├── houses.js │ ├── mail.js │ ├── settings.js │ ├── bank.js │ ├── lawyers.js │ └── crypto.js └── css │ ├── tooltip.css │ ├── camera.css │ ├── lawyers.css │ ├── trucker.css │ ├── gallery.css │ ├── garage.css │ ├── qstore.css │ ├── twitter.css │ ├── houses.css │ ├── mail.css │ ├── settings.css │ ├── whatsapp.css │ ├── bank.css │ └── main.css ├── .github ├── ISSUE_TEMPLATE │ ├── config.yml │ ├── feature_request.yml │ └── bug_report.yml ├── pull_request_template.md ├── auto_assign.yml ├── workflows │ ├── lint.yml │ └── stale.yml └── contributing.md ├── fxmanifest.lua ├── client └── animation.lua ├── qb-phone.sql ├── README.md └── config.lua /html/img/qbit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qbcore-framework/qb-phone/HEAD/html/img/qbit.png -------------------------------------------------------------------------------- /html/js/camera.js: -------------------------------------------------------------------------------- 1 | function setUpCameraApp(url){ 2 | $('.phone-home-container').click(); 3 | } -------------------------------------------------------------------------------- /html/img/default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qbcore-framework/qb-phone/HEAD/html/img/default.png -------------------------------------------------------------------------------- /html/img/politie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qbcore-framework/qb-phone/HEAD/html/img/politie.png -------------------------------------------------------------------------------- /html/img/samsung-s10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qbcore-framework/qb-phone/HEAD/html/img/samsung-s10.png -------------------------------------------------------------------------------- /html/img/samsung-s10og.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qbcore-framework/qb-phone/HEAD/html/img/samsung-s10og.png -------------------------------------------------------------------------------- /html/img/apps/bank-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qbcore-framework/qb-phone/HEAD/html/img/apps/bank-logo.png -------------------------------------------------------------------------------- /html/img/apps/whatsapp-chat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qbcore-framework/qb-phone/HEAD/html/img/apps/whatsapp-chat.png -------------------------------------------------------------------------------- /html/img/apps/whatsapp-chatlight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qbcore-framework/qb-phone/HEAD/html/img/apps/whatsapp-chatlight.png -------------------------------------------------------------------------------- /html/img/backgrounds/background-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qbcore-framework/qb-phone/HEAD/html/img/backgrounds/background-1.png -------------------------------------------------------------------------------- /html/img/backgrounds/default-qbcore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/qbcore-framework/qb-phone/HEAD/html/img/backgrounds/default-qbcore.png -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: QBCore Discord Server 4 | url: https://discord.gg/qbcore 5 | about: Ask questions, receive support, and discuss with the community in our Discord server. 6 | -------------------------------------------------------------------------------- /html/js/config.js: -------------------------------------------------------------------------------- 1 | Config = [] 2 | 3 | Config.HeaderDisabledApps = [ 4 | "bank", 5 | "whatsapp", 6 | "meos", 7 | "garage", 8 | "crypto", 9 | "racing", 10 | "houses", 11 | "lawyers", 12 | "trucker", 13 | ] 14 | 15 | Config.DefaultCryptoPage = "general"; -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | ## Description 2 | 3 | 4 | 5 | ## Checklist 6 | 7 | 8 | 9 | - [ ] I have personally loaded this code into an updated qbcore project and checked all of its functionality. 10 | - [ ] My code fits the style guidelines. 11 | - [ ] My PR fits the contribution guidelines. 12 | -------------------------------------------------------------------------------- /html/css/tooltip.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap'); 2 | 3 | .tooltip-inner { 4 | font-family: 'Poppins', sans-serif; 5 | font-size: 11px; 6 | color: white; 7 | } 8 | 9 | .toggle.ios, .toggle-on.ios, .toggle-off.ios { 10 | border-radius: 20px; 11 | } 12 | 13 | .toggle.ios .toggle-handle { 14 | border-radius: 20px; 15 | } 16 | 17 | .custom-control, .custom-switch, .custom-control-input { 18 | color: white 19 | } 20 | -------------------------------------------------------------------------------- /.github/auto_assign.yml: -------------------------------------------------------------------------------- 1 | # Set to true to add reviewers to pull requests 2 | addReviewers: true 3 | 4 | # Set to true to add assignees to pull requests 5 | addAssignees: author 6 | 7 | # A list of reviewers to be added to pull requests (GitHub user name) 8 | reviewers: 9 | - /maintenance 10 | 11 | # A list of keywords to be skipped the process that add reviewers if pull requests include it 12 | skipKeywords: 13 | - wip 14 | 15 | # A number of reviewers added to the pull request 16 | # Set 0 to add all the reviewers (default: 0) 17 | numberOfReviewers: 0 -------------------------------------------------------------------------------- /fxmanifest.lua: -------------------------------------------------------------------------------- 1 | fx_version 'bodacious' 2 | game 'gta5' 3 | lua54 'yes' 4 | author 'Kakarot' 5 | description 'Allows players to access a phone to interact with various apps and features' 6 | version '1.3.0' 7 | 8 | ui_page 'html/index.html' 9 | 10 | shared_scripts { 11 | 'config.lua', 12 | '@qb-apartments/config.lua' 13 | } 14 | 15 | client_scripts { 16 | 'client/main.lua', 17 | 'client/animation.lua' 18 | } 19 | 20 | server_scripts { 21 | '@oxmysql/lib/MySQL.lua', 22 | 'server/main.lua' 23 | } 24 | 25 | files { 26 | 'html/*.html', 27 | 'html/js/*.js', 28 | 'html/img/*.png', 29 | 'html/css/*.css', 30 | 'html/img/backgrounds/*.png', 31 | 'html/img/apps/*.png', 32 | } 33 | -------------------------------------------------------------------------------- /.github/workflows/lint.yml: -------------------------------------------------------------------------------- 1 | name: Lint 2 | on: [push, pull_request_target] 3 | jobs: 4 | lint: 5 | name: Lint Resource 6 | runs-on: ubuntu-latest 7 | steps: 8 | - uses: actions/checkout@v2 9 | with: 10 | ref: ${{ github.event.pull_request.head.sha }} 11 | - name: Lint 12 | uses: iLLeniumStudios/fivem-lua-lint-action@v2 13 | with: 14 | capture: "junit.xml" 15 | args: "-t --formatter JUnit" 16 | extra_libs: mysql+qblocales+polyzone+qbgarages+qbapartments 17 | - name: Generate Lint Report 18 | if: always() 19 | uses: mikepenz/action-junit-report@v3 20 | with: 21 | report_paths: "**/junit.xml" 22 | check_name: Linting Report 23 | fail_on_failure: false 24 | -------------------------------------------------------------------------------- /html/css/camera.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); 2 | 3 | .camera-app { 4 | display: none; 5 | height: 100%; 6 | width: 100%; 7 | background: rgb(36, 36, 36); 8 | overflow: hidden; 9 | } 10 | 11 | 12 | .camera-homescreen { 13 | position: absolute; 14 | height: 100%; 15 | width: 100%; 16 | left: 0vh; 17 | } 18 | 19 | 20 | 21 | .loader { 22 | z-index: 1000; 23 | border: 16px solid #f3f3f3; /* Light grey */ 24 | border-top: 16px solid #3498db; 25 | border-bottom: 16px solid #3498db; 26 | border-radius: 50%; 27 | animation: spin 2s linear infinite; 28 | position: absolute; 29 | top: 50%; 30 | left: 50%; 31 | margin-top: -50px; 32 | margin-left: -50px; 33 | width: 100px; 34 | height: 100px; 35 | } 36 | 37 | @keyframes spin { 38 | 0% { transform: rotate(0deg); } 39 | 100% { transform: rotate(360deg); } 40 | } -------------------------------------------------------------------------------- /.github/workflows/stale.yml: -------------------------------------------------------------------------------- 1 | # This workflow warns and then closes issues and PRs that have had no activity for a specified amount of time. 2 | # 3 | # You can adjust the behavior by modifying this file. 4 | # For more information, see: 5 | # https://github.com/actions/stale 6 | name: Mark stale issues and pull requests 7 | 8 | on: 9 | schedule: 10 | - cron: '41 15 * * *' 11 | 12 | jobs: 13 | stale: 14 | 15 | runs-on: ubuntu-latest 16 | permissions: 17 | issues: write 18 | pull-requests: write 19 | 20 | steps: 21 | - uses: actions/stale@v5 22 | with: 23 | repo-token: ${{ secrets.GITHUB_TOKEN }} 24 | stale-issue-message: 'This issue has had 60 days of inactivity & will close within 7 days' 25 | stale-pr-message: 'This PR has had 60 days of inactivity & will close within 7 days' 26 | close-issue-label: 'Stale Closed' 27 | close-pr-label: 'Stale Closed' 28 | exempt-issue-labels: 'Suggestion' 29 | exempt-pr-labels: 'Suggestion' 30 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.yml: -------------------------------------------------------------------------------- 1 | name: Feature request 2 | description: Suggest an idea for QBCore 3 | title: "[SUGGESTION]" 4 | labels: enhancement 5 | body: 6 | - type: markdown 7 | attributes: 8 | value: | 9 | Please use our Discord Server to ask questions and receive support: https://discord.gg/qbcore 10 | - type: textarea 11 | id: problem 12 | attributes: 13 | label: The problem 14 | description: A clear and concise description of what the problem is, or what feature you want to be implemented. 15 | placeholder: | 16 | Some examples: 17 | I'm frustrated that ... 18 | It would be nice if ... 19 | validations: 20 | required: true 21 | - type: textarea 22 | id: solution 23 | attributes: 24 | label: Ideal solution 25 | description: A clear and concise description of what you want to happen, with as much detail as possible. 26 | validations: 27 | required: true 28 | - type: textarea 29 | id: alternatives 30 | attributes: 31 | label: Alternative solutions 32 | description: A clear and concise description of any alternative solutions or features you've considered. 33 | - type: textarea 34 | id: additional 35 | attributes: 36 | label: Additional context 37 | description: If you have any other context about the problem such as screenshots or videos, add them here. 38 | -------------------------------------------------------------------------------- /html/js/trucker.js: -------------------------------------------------------------------------------- 1 | SetupTruckerInfo = function(data) { 2 | var NewRep = 0; 3 | var AmountOfTiers = (data.TiersData).length; 4 | var Difference = (data.CurrentTierData.max - data.CurrentTierData.min); 5 | var DivideAmount = (100 / Difference) 6 | var ProgressPercentage = data.CurrentRep * DivideAmount; 7 | 8 | if (data.CurrentTier != 1) { 9 | NewRep = (data.CurrentRep - data.TiersData[((data.CurrentTier - 1) - 1)].max); 10 | ProgressPercentage = NewRep * DivideAmount; 11 | } 12 | 13 | $("#trucker-name").html(QB.Phone.Data.PlayerData.charinfo.firstname + " " + QB.Phone.Data.PlayerData.charinfo.lastname); 14 | 15 | if (data.CurrentTierData.min == data.CurrentTierData.max) { 16 | $("#trucker-header-progress-current").html("Current: " + data.CurrentRep + " REP"); 17 | $("#trucker-header-tier").html("Tier " + AmountOfTiers); 18 | $("#trucker-header-progress-next").html("Next: MAX"); 19 | 20 | $(".trucker-header-progress-fill").css("width", "100%"); 21 | } else { 22 | $("#trucker-header-progress-current").html("Current: " + data.CurrentRep + " REP"); 23 | $("#trucker-header-tier").html("Tier " + data.CurrentTier); 24 | $("#trucker-header-progress-next").html("Next: " + (data.CurrentTierData.max - data.CurrentRep) + " REP"); 25 | 26 | $(".trucker-header-progress-fill").css("width", ProgressPercentage + "%"); 27 | } 28 | } -------------------------------------------------------------------------------- /client/animation.lua: -------------------------------------------------------------------------------- 1 | local phoneProp = 0 2 | local phoneModel = `prop_npc_phone_02` 3 | 4 | local function LoadAnimation(dict) 5 | RequestAnimDict(dict) 6 | while not HasAnimDictLoaded(dict) do 7 | Wait(1) 8 | end 9 | end 10 | 11 | local function CheckAnimLoop() 12 | CreateThread(function() 13 | while PhoneData.AnimationData.lib ~= nil and PhoneData.AnimationData.anim ~= nil do 14 | local ped = PlayerPedId() 15 | if not IsEntityPlayingAnim(ped, PhoneData.AnimationData.lib, PhoneData.AnimationData.anim, 3) then 16 | LoadAnimation(PhoneData.AnimationData.lib) 17 | TaskPlayAnim(ped, PhoneData.AnimationData.lib, PhoneData.AnimationData.anim, 3.0, 3.0, -1, 50, 0, false, false, false) 18 | end 19 | Wait(500) 20 | end 21 | end) 22 | end 23 | 24 | function newPhoneProp() 25 | deletePhone() 26 | RequestModel(phoneModel) 27 | while not HasModelLoaded(phoneModel) do 28 | Wait(1) 29 | end 30 | phoneProp = CreateObject(phoneModel, 1.0, 1.0, 1.0, 1, 1, 0) 31 | 32 | local bone = GetPedBoneIndex(PlayerPedId(), 28422) 33 | if phoneModel == `prop_cs_phone_01` then 34 | AttachEntityToEntity(phoneProp, PlayerPedId(), bone, 0.0, 0.0, 0.0, 50.0, 320.0, 50.0, 1, 1, 0, 0, 2, 1) 35 | else 36 | AttachEntityToEntity(phoneProp, PlayerPedId(), bone, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1, 1, 0, 0, 2, 1) 37 | end 38 | end 39 | 40 | function deletePhone() 41 | if phoneProp ~= 0 then 42 | DeleteObject(phoneProp) 43 | phoneProp = 0 44 | end 45 | end 46 | 47 | function DoPhoneAnimation(anim) 48 | local ped = PlayerPedId() 49 | local AnimationLib = 'cellphone@' 50 | local AnimationStatus = anim 51 | if IsPedInAnyVehicle(ped, false) then 52 | AnimationLib = 'anim@cellphone@in_car@ps' 53 | end 54 | LoadAnimation(AnimationLib) 55 | TaskPlayAnim(ped, AnimationLib, AnimationStatus, 3.0, 3.0, -1, 50, 0, false, false, false) 56 | PhoneData.AnimationData.lib = AnimationLib 57 | PhoneData.AnimationData.anim = AnimationStatus 58 | CheckAnimLoop() 59 | end -------------------------------------------------------------------------------- /html/js/garage.js: -------------------------------------------------------------------------------- 1 | let veh 2 | 3 | $(document).on('click', '.garage-vehicle', function(e){ 4 | e.preventDefault(); 5 | 6 | $(".garage-homescreen").animate({ 7 | left: 30+"vh" 8 | }, 200); 9 | $(".garage-detailscreen").animate({ 10 | left: 0+"vh" 11 | }, 200); 12 | 13 | var Id = $(this).attr('id'); 14 | var VehData = $("#"+Id).data('VehicleData'); 15 | veh = VehData 16 | SetupDetails(VehData); 17 | }); 18 | 19 | $(document).on('click', '#track-vehicle', function(e){ 20 | e.preventDefault() 21 | $.post("https://qb-phone/track-vehicle", JSON.stringify({ 22 | veh: veh, 23 | })); 24 | }); 25 | 26 | 27 | $(document).on('click', '#return-button', function(e){ 28 | e.preventDefault(); 29 | 30 | $(".garage-homescreen").animate({ 31 | left: 00+"vh" 32 | }, 200); 33 | $(".garage-detailscreen").animate({ 34 | left: -30+"vh" 35 | }, 200); 36 | }); 37 | 38 | SetupGarageVehicles = function(Vehicles) { 39 | $(".garage-vehicles").html(""); 40 | if (Vehicles != null) { 41 | $.each(Vehicles, function(i, vehicle){ 42 | var Element = '
'+vehicle.brand.charAt(0)+' '+vehicle.fullname+'
'; 43 | 44 | $(".garage-vehicles").append(Element); 45 | $("#vehicle-"+i).data('VehicleData', vehicle); 46 | }); 47 | } 48 | } 49 | 50 | SetupDetails = function(data) { 51 | $(".vehicle-brand").find(".vehicle-answer").html(data.brand); 52 | $(".vehicle-model").find(".vehicle-answer").html(data.model); 53 | $(".vehicle-plate").find(".vehicle-answer").html(data.plate); 54 | $(".vehicle-garage").find(".vehicle-answer").html(data.garage); 55 | $(".vehicle-status").find(".vehicle-answer").html(data.state); 56 | $(".vehicle-fuel").find(".vehicle-answer").html(Math.ceil(data.fuel)+"%"); 57 | $(".vehicle-engine").find(".vehicle-answer").html(Math.ceil(data.engine / 10)+"%"); 58 | $(".vehicle-body").find(".vehicle-answer").html(Math.ceil(data.body / 10)+"%"); 59 | } -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.yml: -------------------------------------------------------------------------------- 1 | name: Bug report 2 | description: Create a report to help us improve or fix something 3 | title: "[BUG]" 4 | labels: bug 5 | body: 6 | - type: markdown 7 | attributes: 8 | value: | 9 | Thank you for taking the time to fill out a bug report! 10 | Please use our Discord Server to ask questions and receive support: https://discord.gg/qbcore 11 | - type: input 12 | id: summary 13 | attributes: 14 | label: Summary 15 | description: Write a short and concise description of your bug. 16 | validations: 17 | required: true 18 | - type: textarea 19 | id: repro 20 | attributes: 21 | label: Reproduction 22 | description: What did you do to make this happen? 23 | placeholder: | 24 | 1. Using ... 25 | 2. Do ... 26 | 3. Then use ... 27 | 4. See error 28 | validations: 29 | required: true 30 | - type: textarea 31 | id: expected 32 | attributes: 33 | label: Expected behavior 34 | description: What did you expect to happen? 35 | validations: 36 | required: true 37 | - type: textarea 38 | id: actual 39 | attributes: 40 | label: Actual behavior 41 | description: What actually happened? 42 | validations: 43 | required: true 44 | - type: textarea 45 | id: additional 46 | attributes: 47 | label: Additional context 48 | description: If you have any other context about the problem such as screenshots or videos, add them here. 49 | - type: input 50 | id: updated 51 | attributes: 52 | label: Last Updated 53 | description: When have you last updated? 54 | placeholder: e.g. last week, today 55 | validations: 56 | required: true 57 | - type: input 58 | id: custom 59 | attributes: 60 | label: Custom Resources 61 | description: Are you using custom resources? Which ones? 62 | placeholder: e.g. zdiscord, qb-target 63 | validations: 64 | required: true 65 | - type: input 66 | id: renamed 67 | attributes: 68 | label: Resource Rename 69 | description: Have you renamed this resource from `qb-` to something custom? 70 | validations: 71 | required: true 72 | -------------------------------------------------------------------------------- /html/css/lawyers.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap'); 2 | 3 | .lawyers-app { 4 | display: none; 5 | height: 100%; 6 | width: 100%; 7 | overflow: hidden; 8 | background: rgb(36, 36, 36); 9 | } 10 | 11 | .lawyers-header { 12 | position: absolute; 13 | width: 100%; 14 | height: 12vh; 15 | top: 0; 16 | color: white; 17 | font-family: 'Poppins', sans-serif; 18 | font-size: 1.8vh; 19 | } 20 | 21 | .lawyers-header > p { 22 | line-height: 12vh; 23 | text-indent: 2vh; 24 | margin: 0 0 0 9vh; 25 | } 26 | 27 | .lawyers-header > span { 28 | position: absolute; 29 | top: 8vh; 30 | left: 9vh; 31 | font-size: 1.2vh; 32 | height: 2vh; 33 | color: white; 34 | } 35 | 36 | .lawyers-list { 37 | position: absolute; 38 | width: 90%; 39 | height: 73%; 40 | margin: 0 auto; 41 | left: 0; 42 | right: 0; 43 | bottom: 3%; 44 | border-radius: .5vh; 45 | overflow-y: scroll; 46 | } 47 | 48 | .lawyers-list::-webkit-scrollbar { 49 | display: none; 50 | } 51 | 52 | .lawyer-list { 53 | position: relative; 54 | width: 95%; 55 | height: 6vh; 56 | margin: 2.5%; 57 | background: rgba(23, 23, 23, 90%); 58 | border-radius: 0.15rem; 59 | box-shadow: 0rem 0rem 0.1rem 0.05rem #000000; 60 | } 61 | 62 | .lawyer-list-firstletter { 63 | position: absolute; 64 | top: 50%; 65 | transform: translateY(-50%); 66 | width: 3.5vh; 67 | height: 3.5vh; 68 | background-color: rgb(42, 137, 214); 69 | text-align: center; 70 | left: 1vh; 71 | line-height: 3.5vh; 72 | border-radius: 50%; 73 | font-family: 'Poppins', sans-serif; 74 | font-size: 1.8vh; 75 | color: white; 76 | } 77 | 78 | .lawyer-list-fullname { 79 | position: absolute; 80 | top: 50%; 81 | transform: translateY(-50%); 82 | left: 5.5vh; 83 | font-family: 'Poppins', sans-serif; 84 | font-size: 1.5vh; 85 | max-width: 14vh; 86 | white-space: nowrap; 87 | overflow: hidden !important; 88 | text-overflow: ellipsis; 89 | color: white; 90 | } 91 | 92 | .no-lawyers { 93 | position: absolute; 94 | top: 50%; 95 | transform: translateY(-50%); 96 | font-family: 'Poppins', sans-serif; 97 | font-size: 1.3vh; 98 | margin: 0 auto; 99 | left: 0; 100 | right: 0; 101 | text-align: center; 102 | max-width: 14vh; 103 | color: white; 104 | } 105 | 106 | .lawyer-list-call { 107 | color: white; 108 | position: absolute; 109 | top: 25%; 110 | transform: translateY(-50%); 111 | right: 2vh; 112 | font-size: 2vh; 113 | transform: rotate(90deg); 114 | transition: .08s ease-in-out; 115 | } 116 | 117 | .lawyer-list-call:hover { 118 | color: rgb(49, 214, 60); 119 | opacity: .8; 120 | transform: rotate(0deg); 121 | cursor: pointer; 122 | } 123 | -------------------------------------------------------------------------------- /html/css/trucker.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap'); 2 | 3 | .trucker-app { 4 | display: none; 5 | height: 100%; 6 | width: 100%; 7 | background: #2f3640; 8 | overflow: hidden; 9 | } 10 | 11 | .trucker-header { 12 | position: absolute; 13 | width: 84%; 14 | height: 12vh; 15 | background-color: #4b5868; 16 | 17 | margin: 0 auto; 18 | left: 0; 19 | right: 0; 20 | 21 | top: 5vh; 22 | 23 | border-radius: 1vh; 24 | 25 | box-shadow: 0 0 1vh .15vh rgba(0, 0, 0, 0.2); 26 | 27 | overflow: hidden; 28 | } 29 | 30 | .trucker-header-name { 31 | position: absolute; 32 | margin: 1.5vh; 33 | font-family: 'Poppins', sans-serif; 34 | color: white; 35 | font-size: 1.4vh; 36 | } 37 | 38 | .trucker-header-progress { 39 | position: absolute; 40 | width: 90%; 41 | height: 1.2vh; 42 | background-color: #181c20; 43 | bottom: 0; 44 | 45 | margin: 0 auto; 46 | left: 0; 47 | right: 0; 48 | bottom: 2.5vh; 49 | 50 | border-radius: 1vh; 51 | } 52 | 53 | .trucker-header-progress-text { 54 | font-size: .8vh; 55 | font-family: 'Poppins', sans-serif; 56 | color: rgba(255, 255, 255, 0.6); 57 | margin: 1.8vh .75vh 0 .6vh; 58 | } 59 | 60 | .trucker-header-progress-fill { 61 | position: absolute; 62 | width: 20%; 63 | height: 100%; 64 | 65 | background-color: rgb(156, 230, 20); 66 | 67 | border-radius: 1vh; 68 | } 69 | 70 | .trucker-header-currentlevel { 71 | position: absolute; 72 | top: 0; 73 | right: 0; 74 | 75 | width: 5vh; 76 | height: 5vh; 77 | 78 | background-color: #536070; 79 | border-radius: 50%; 80 | 81 | margin: 1.5vh; 82 | box-shadow: 0 0 .5vh .1vh rgba(0, 0, 0, 0.2); 83 | 84 | text-align: center; 85 | line-height: 5vh; 86 | font-family: 'Poppins', sans-serif; 87 | color: rgb(236, 236, 236); 88 | font-size: 1.5vh; 89 | } 90 | 91 | .trucker-header-description { 92 | position: absolute; 93 | top: 0; 94 | right: 0; 95 | font-family: 'Poppins', sans-serif; 96 | color: rgba(255, 255, 255, 0.5); 97 | 98 | margin: 1vh; 99 | } 100 | 101 | #trucker-header-tier { 102 | float: right; 103 | color: rgba(255, 255, 255, 0.9); 104 | } 105 | 106 | .trucker-jobinfo { 107 | position: absolute; 108 | width: 84%; 109 | height: 37vh; 110 | background-color: #4b5868; 111 | 112 | margin: 0 auto; 113 | left: 0; 114 | right: 0; 115 | 116 | top: 18vh; 117 | 118 | border-radius: 1vh; 119 | box-shadow: 0 0 1vh .15vh rgba(0, 0, 0, 0.2); 120 | overflow: hidden; 121 | } 122 | 123 | .trucker-jobinfo-nojob { 124 | display: block; 125 | width: 100%; 126 | height: 100%; 127 | background-color: #3a3c3f; 128 | } 129 | 130 | .trucker-jobinfo-nojob > i { 131 | position: absolute; 132 | margin: 0 auto; 133 | left: 0; 134 | right: 0; 135 | 136 | text-align: center; 137 | line-height: 15vh; 138 | 139 | color: rgb(241, 63, 63); 140 | font-size: 4vh; 141 | } 142 | 143 | #trucker-jobinfo-nojob-text { 144 | position: absolute; 145 | 146 | margin: 0 auto; 147 | left: 0; 148 | right: 0; 149 | 150 | width: 20vh; 151 | text-align: center; 152 | font-family: 'Poppins', sans-serif; 153 | color: rgba(255, 255, 255, 0.8); 154 | 155 | top: 11vh; 156 | 157 | font-size: 1.7vh; 158 | } 159 | -------------------------------------------------------------------------------- /qb-phone.sql: -------------------------------------------------------------------------------- 1 | CREATE TABLE IF NOT EXISTS `player_contacts` ( 2 | `id` int(11) NOT NULL AUTO_INCREMENT, 3 | `citizenid` varchar(50) DEFAULT NULL, 4 | `name` varchar(50) DEFAULT NULL, 5 | `number` varchar(50) DEFAULT NULL, 6 | `iban` varchar(50) NOT NULL DEFAULT '0', 7 | PRIMARY KEY (`id`), 8 | KEY `citizenid` (`citizenid`) 9 | ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4; 10 | 11 | CREATE TABLE IF NOT EXISTS `phone_invoices` ( 12 | `id` int(10) NOT NULL AUTO_INCREMENT, 13 | `citizenid` varchar(50) DEFAULT NULL, 14 | `amount` int(11) NOT NULL DEFAULT 0, 15 | `society` tinytext DEFAULT NULL, 16 | `sender` varchar(50) DEFAULT NULL, 17 | `sendercitizenid` varchar(50) DEFAULT NULL, 18 | `candecline` int(1) not null default 1, 19 | `reason` varchar(256) default null, 20 | PRIMARY KEY (`id`), 21 | KEY `citizenid` (`citizenid`) 22 | ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4; 23 | 24 | CREATE TABLE IF NOT EXISTS `phone_messages` ( 25 | `id` int(11) NOT NULL AUTO_INCREMENT, 26 | `citizenid` varchar(50) DEFAULT NULL, 27 | `number` varchar(50) DEFAULT NULL, 28 | `messages` text DEFAULT NULL, 29 | PRIMARY KEY (`id`), 30 | KEY `citizenid` (`citizenid`), 31 | KEY `number` (`number`) 32 | ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4; 33 | 34 | CREATE TABLE IF NOT EXISTS `player_mails` ( 35 | `id` int(11) NOT NULL AUTO_INCREMENT, 36 | `citizenid` varchar(50) DEFAULT NULL, 37 | `sender` varchar(50) DEFAULT NULL, 38 | `subject` varchar(50) DEFAULT NULL, 39 | `message` text DEFAULT NULL, 40 | `read` tinyint(4) DEFAULT 0, 41 | `mailid` int(11) DEFAULT NULL, 42 | `date` timestamp NULL DEFAULT current_timestamp(), 43 | `button` text DEFAULT NULL, 44 | PRIMARY KEY (`id`), 45 | KEY `citizenid` (`citizenid`) 46 | ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4; 47 | 48 | CREATE TABLE IF NOT EXISTS `crypto_transactions` ( 49 | `id` int(11) NOT NULL AUTO_INCREMENT, 50 | `citizenid` varchar(50) DEFAULT NULL, 51 | `title` varchar(50) DEFAULT NULL, 52 | `message` varchar(50) DEFAULT NULL, 53 | `date` timestamp NULL DEFAULT current_timestamp(), 54 | PRIMARY KEY (`id`), 55 | KEY `citizenid` (`citizenid`) 56 | ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4; 57 | 58 | CREATE TABLE IF NOT EXISTS `player_vehicles` ( 59 | `id` int(11) NOT NULL AUTO_INCREMENT, 60 | `license` varchar(50) DEFAULT NULL, 61 | `citizenid` varchar(50) DEFAULT NULL, 62 | `vehicle` varchar(50) DEFAULT NULL, 63 | `hash` varchar(50) DEFAULT NULL, 64 | `mods` longtext CHARACTER SET utf8mb4 COLLATE utf8mb4_bin DEFAULT NULL, 65 | `plate` varchar(50) NOT NULL, 66 | `fakeplate` varchar(50) DEFAULT NULL, 67 | `garage` varchar(50) DEFAULT NULL, 68 | `fuel` int(11) DEFAULT 100, 69 | `engine` float DEFAULT 1000, 70 | `body` float DEFAULT 1000, 71 | `state` int(11) DEFAULT 1, 72 | `depotprice` int(11) NOT NULL DEFAULT 0, 73 | `drivingdistance` int(50) DEFAULT NULL, 74 | `status` text DEFAULT NULL, 75 | `balance` int(11) NOT NULL DEFAULT 0, 76 | `paymentamount` int(11) NOT NULL DEFAULT 0, 77 | `paymentsleft` int(11) NOT NULL DEFAULT 0, 78 | `financetime` int(11) NOT NULL DEFAULT 0, 79 | PRIMARY KEY (`id`), 80 | KEY `plate` (`plate`), 81 | KEY `citizenid` (`citizenid`), 82 | KEY `license` (`license`) 83 | ) ENGINE=InnoDB AUTO_INCREMENT=1; 84 | 85 | CREATE TABLE IF NOT EXISTS `phone_gallery` ( 86 | `citizenid` VARCHAR(255) NOT NULL , 87 | `image` VARCHAR(255) NOT NULL , 88 | `date` timestamp NULL DEFAULT current_timestamp() 89 | ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4; 90 | 91 | CREATE TABLE IF NOT EXISTS `phone_tweets` ( 92 | `id` int(11) NOT NULL AUTO_INCREMENT, 93 | `citizenid` varchar(50) DEFAULT NULL, 94 | `firstName` varchar(25) DEFAULT NULL, 95 | `lastName` varchar(25) DEFAULT NULL, 96 | `message` text DEFAULT NULL, 97 | `date` datetime DEFAULT current_timestamp(), 98 | `url` text DEFAULT NULL, 99 | `picture` text DEFAULT './img/default.png', 100 | `tweetId` varchar(25) NOT NULL, 101 | PRIMARY KEY (`id`), 102 | KEY `citizenid` (`citizenid`) 103 | ) ENGINE=InnoDB AUTO_INCREMENT=1; -------------------------------------------------------------------------------- /html/css/gallery.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); 2 | 3 | .gallery-app { 4 | display: none; 5 | height: 100%; 6 | width: 100%; 7 | background: rgb(36, 36, 36); 8 | overflow: hidden; 9 | } 10 | 11 | .gallery-app-header { 12 | position: absolute; 13 | height: 9vh; 14 | width: 100%; 15 | background-color: #000; 16 | text-align: center; 17 | line-height: 12.5vh; 18 | color: white; 19 | font-family: 'Poppins', sans-serif; 20 | font-size: 1.5vh; 21 | } 22 | 23 | .gallery-homescreen { 24 | position: absolute; 25 | height: 100%; 26 | width: 100%; 27 | left: 0vh; 28 | } 29 | 30 | .gallery-detailscreen { 31 | position: absolute; 32 | height: 100%; 33 | width: 100%; 34 | left: -30vh; 35 | } 36 | .gallery-postscreen { 37 | position: absolute; 38 | height: 100%; 39 | width: 100%; 40 | left: -30vh; 41 | } 42 | 43 | .gallery-images { 44 | position: absolute; 45 | width: 85%; 46 | height: 44.5vh; 47 | /* background-color: rgba(0, 0, 0, 0.1); */ 48 | top: 10.5vh; 49 | margin: 0 auto; 50 | left: 0; 51 | right: 0; 52 | overflow-y: scroll; 53 | } 54 | 55 | .gallery-images::-webkit-scrollbar { 56 | display: none; 57 | } 58 | 59 | .tumbnail{ 60 | width: 100%; 61 | border-radius: 0.3vh; 62 | } 63 | 64 | .gallery-image { 65 | display: inline-block; 66 | width: 50%; 67 | padding: 0.2vh; 68 | height: 7.1vh; 69 | 70 | } 71 | .gallery-details { 72 | position: absolute; 73 | /* background-color: rgba(255, 255, 255, 0.1); */ 74 | height: 76%; 75 | width: 84%; 76 | margin: 0 auto; 77 | left: 0vh; 78 | right: 0; 79 | top: 11vh; 80 | } 81 | 82 | 83 | 84 | .return-button { 85 | display: flex; 86 | flex-direction: row; 87 | justify-content: space-between; 88 | } 89 | 90 | .return-button > div { 91 | margin: 2px; 92 | width: 100%; 93 | height: 5vh; 94 | background-color: rgb(233, 233, 233); 95 | border-radius: .3vh; 96 | transition: .05s linear; 97 | text-align: center; 98 | line-height: 5vh; 99 | font-family: 'Poppins', sans-serif; 100 | font-size: 1.4vh; 101 | } 102 | 103 | .return-button > div:hover { 104 | background-color: rgb(212, 212, 212); 105 | } 106 | 107 | .make-post-button { 108 | display: flex; 109 | flex-direction: row; 110 | justify-content: space-between; 111 | } 112 | 113 | .make-post-button > div { 114 | margin: 2px; 115 | width: 80%; 116 | height: 5vh; 117 | background-color: #1da1f2; 118 | border-radius: .3vh; 119 | transition: .05s linear; 120 | text-align: center; 121 | line-height: 5vh; 122 | font-family: 'Poppins', sans-serif; 123 | font-size: 1.4vh; 124 | } 125 | 126 | .make-post-button > div:hover { 127 | background-color: #1da1f2; 128 | } 129 | 130 | #delete-button { 131 | margin: 2px; 132 | width: 20%; 133 | height: 5vh; 134 | background-color: #921010; 135 | color: #fff; 136 | border-radius: .3vh; 137 | transition: .05s linear; 138 | text-align: center; 139 | line-height: 5vh; 140 | font-family: 'Poppins', sans-serif; 141 | font-size: 1.4vh; 142 | } 143 | #delete-button:hover { 144 | background-color: #742323; 145 | } 146 | 147 | .posts-button { 148 | display: flex; 149 | flex-direction: row; 150 | justify-content: space-between; 151 | } 152 | 153 | #tweet-button { 154 | margin: 2px; 155 | width: 50%; 156 | height: 5vh; 157 | 158 | color: #fff; 159 | border-radius: .3vh; 160 | transition: .05s linear; 161 | text-align: center; 162 | line-height: 5vh; 163 | font-family: 'Poppins', sans-serif; 164 | font-size: 1.4vh; 165 | background-color: #08a0e9; 166 | } 167 | #tweet-button > div:hover { 168 | background-color: #0084b4; 169 | } 170 | 171 | #advert-button { 172 | margin: 2px; 173 | width: 50%; 174 | height: 5vh; 175 | color: #fff; 176 | border-radius: .3vh; 177 | transition: .05s linear; 178 | text-align: center; 179 | line-height: 5vh; 180 | font-family: 'Poppins', sans-serif; 181 | font-size: 1.4vh; 182 | background-color: #ff8f1a; 183 | } 184 | #advert-button > div:hover { 185 | background-color: #cf812d; 186 | } 187 | 188 | 189 | 190 | #new-textarea { 191 | border: none; 192 | height: 15vh; 193 | margin: 0 auto; 194 | left: 0; 195 | right: 0; 196 | background-color: rgb(233, 233, 233); 197 | outline: none; 198 | border-bottom: 2px solid #1da0f200; 199 | resize: none; 200 | transition: border-bottom 0.1s ease-in-out; 201 | font-family: 'Poppins', sans-serif; 202 | padding: 0.87vh; 203 | font-size: 1.4vh; 204 | top: 12vh; 205 | width: 100%; 206 | border-radius: 1vh 1vh 0 0; 207 | box-shadow: inset 0 0 2vh 0 rgb(0 0 0 / 9%); 208 | 209 | } -------------------------------------------------------------------------------- /html/js/gallery.js: -------------------------------------------------------------------------------- 1 | function setUpGalleryData(Images){ 2 | $(".gallery-images").html(""); 3 | if (Images != null) { 4 | $.each(Images, function(i, image){ 5 | var Element = '
'+image.citizenid+'
'; 6 | 7 | $(".gallery-images").append(Element); 8 | $("#image-"+i).data('ImageData', image); 9 | }); 10 | } 11 | } 12 | 13 | $(document).on('click', '.tumbnail', function(e){ 14 | e.preventDefault(); 15 | let source = $(this).attr('src') 16 | // QB.Screen.popUp(source) 17 | $(".gallery-homescreen").animate({ 18 | left: 30+"vh" 19 | }, 200); 20 | $(".gallery-detailscreen").animate({ 21 | left: 0+"vh" 22 | }, 200); 23 | SetupImageDetails(source); 24 | }); 25 | 26 | $(document).on('click', '.image', function(e){ 27 | e.preventDefault(); 28 | let source = $(this).attr('src') 29 | QB.Screen.popUp(source) 30 | }); 31 | 32 | 33 | $(document).on('click', '#delete-button', function(e){ 34 | e.preventDefault(); 35 | let source = $('.image').attr('src') 36 | 37 | setTimeout(() => { 38 | $.post('https://qb-phone/DeleteImage', JSON.stringify({image:source}), function(Hashtags){ 39 | setTimeout(()=>{ 40 | $('#return-button').click() 41 | $.post('https://qb-phone/GetGalleryData', JSON.stringify({}), function(data){ 42 | setTimeout(()=>{ 43 | setUpGalleryData(data); 44 | 45 | },200) 46 | }); 47 | },200) 48 | }) 49 | 50 | }, 200); 51 | }); 52 | 53 | 54 | function SetupImageDetails(Image){ 55 | $('#imagedata').attr("src", Image); 56 | } 57 | let postImageUrl=""; 58 | function SetupPostDetails(){ 59 | } 60 | 61 | 62 | $(document).on('click', '#make-post-button', function(e){ 63 | e.preventDefault(); 64 | let source = $('#imagedata').attr('src') 65 | postImageUrl=source 66 | 67 | // QB.Screen.popUp(source) 68 | $(".gallery-detailscreen").animate({ 69 | left: 30+"vh" 70 | }, 200); 71 | $(".gallery-postscreen").animate({ 72 | left: 0+"vh" 73 | }, 200); 74 | SetupPostDetails(); 75 | }); 76 | 77 | 78 | $(document).on('click', '#return-button', function(e){ 79 | e.preventDefault(); 80 | 81 | $(".gallery-homescreen").animate({ 82 | left: 00+"vh" 83 | }, 200); 84 | $(".gallery-detailscreen").animate({ 85 | left: -30+"vh" 86 | }, 200); 87 | }); 88 | 89 | $(document).on('click', '#returndetail-button', function(e){ 90 | e.preventDefault(); 91 | returnDetail(); 92 | 93 | }); 94 | 95 | function returnDetail(){ 96 | $(".gallery-detailscreen").animate({ 97 | left: 00+"vh" 98 | }, 200); 99 | $(".gallery-postscreen").animate({ 100 | left: -30+"vh" 101 | }, 200); 102 | } 103 | 104 | 105 | $(document).on('click', '#tweet-button', function(e){ 106 | e.preventDefault(); 107 | var TweetMessage = $("#new-textarea").val(); 108 | var imageURL = postImageUrl 109 | if (TweetMessage != "") { 110 | var CurrentDate = new Date(); 111 | $.post('https://qb-phone/PostNewTweet', JSON.stringify({ 112 | Message: TweetMessage, 113 | Date: CurrentDate, 114 | Picture: QB.Phone.Data.MetaData.profilepicture, 115 | url: imageURL 116 | }), function(Tweets){ 117 | QB.Phone.Notifications.LoadTweets(Tweets); 118 | }); 119 | var TweetMessage = $("#new-textarea").val(' '); 120 | $.post('https://qb-phone/GetHashtags', JSON.stringify({}), function(Hashtags){ 121 | QB.Phone.Notifications.LoadHashtags(Hashtags) 122 | }) 123 | // QB.Phone.Animations.TopSlideUp(".twitter-new-tweet-tab", 450, -120); 124 | returnDetail() 125 | } else { 126 | QB.Phone.Notifications.Add("fab fa-twitter", "Twitter", "Fill a message!", "#1DA1F2"); 127 | }; 128 | $('#tweet-new-url').val(""); 129 | $("#tweet-new-message").val(""); 130 | }); 131 | 132 | 133 | $(document).on('click', '#advert-button', function(e){ 134 | e.preventDefault(); 135 | var Advert = $("#new-textarea").val(); 136 | let picture = postImageUrl; 137 | 138 | if (Advert !== "") { 139 | $(".advert-home").animate({ 140 | left: 0+"vh" 141 | }); 142 | $(".new-advert").animate({ 143 | left: -30+"vh" 144 | }); 145 | if (!picture){ 146 | $.post('https://qb-phone/PostAdvert', JSON.stringify({ 147 | message: Advert, 148 | url: null 149 | })); 150 | returnDetail() 151 | }else { 152 | $.post('https://qb-phone/PostAdvert', JSON.stringify({ 153 | message: Advert, 154 | url: picture 155 | })); 156 | returnDetail() 157 | } 158 | $("#new-textarea").val(' '); 159 | } else { 160 | QB.Phone.Notifications.Add("fas fa-ad", "Advertisement", "You can\'t post an empty ad!", "#ff8f1a", 2000); 161 | } 162 | }); 163 | 164 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # qb-phone 2 | Advanced Phone for QB-Core Framework :iphone: 3 | 4 | # License 5 | 6 | QBCore Framework 7 | Copyright (C) 2021 Joshua Eger 8 | 9 | This program is free software: you can redistribute it and/or modify 10 | it under the terms of the GNU General Public License as published by 11 | the Free Software Foundation, either version 3 of the License, or 12 | (at your option) any later version. 13 | 14 | This program is distributed in the hope that it will be useful, 15 | but WITHOUT ANY WARRANTY; without even the implied warranty of 16 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 17 | GNU General Public License for more details. 18 | 19 | You should have received a copy of the GNU General Public License 20 | along with this program. If not, see 21 | 22 | ## Dependencies 23 | - [qb-core](https://github.com/qbcore-framework/qb-core) 24 | - [qb-policejob](https://github.com/qbcore-framework/qb-policejob) - MEOS, handcuff check etc. 25 | - [qb-crypto](https://github.com/qbcore-framework/qb-crypto) - Crypto currency trading 26 | - [qb-lapraces](https://github.com/qbcore-framework/qb-lapraces) - Creating routes and racing 27 | - [qb-houses](https://github.com/qbcore-framework/qb-houses) - House and Key Management App 28 | - [qb-garages](https://github.com/qbcore-framework/qb-garages) - For Garage App 29 | - [qb-banking](https://github.com/qbcore-framework/qb-banking) - For Banking App 30 | - [screenshot-basic](https://github.com/citizenfx/screenshot-basic) - For Taking Photos 31 | - A Webhook for hosting photos (Discord or Imgur can provide this) 32 | 33 | 34 | ## Screenshots 35 | ![Home](https://cdn.discordapp.com/attachments/921675245360922625/921675439783673897/home.jpg) 36 | ![Bank](https://cdn.discordapp.com/attachments/921675245360922625/921675441142644756/bank.jpg) 37 | ![Advert](https://cdn.discordapp.com/attachments/921675245360922625/921675440878415872/advert.jpg) 38 | ![Mail](https://cdn.discordapp.com/attachments/921675245360922625/921675440278614068/mail.jpg) 39 | ![Garage](https://cdn.discordapp.com/attachments/921675245360922625/921675439590760528/garage.jpg) 40 | ![Garage Detail](https://cdn.discordapp.com/attachments/921675245360922625/921675441591422986/garage_in.jpg) 41 | ![services](https://cdn.discordapp.com/attachments/921675245360922625/921675458670641152/services.jpg) 42 | ![Houses](https://cdn.discordapp.com/attachments/921675245360922625/921675440005988362/house.jpg) 43 | ![Racing](https://cdn.discordapp.com/attachments/921675245360922625/921675458423173140/race.jpg) 44 | ![Crypto](https://cdn.discordapp.com/attachments/921675245360922625/921675457718517820/qbit.jpg) 45 | ![Gallery](https://cdn.discordapp.com/attachments/921675245360922625/921675441381736448/gallery.jpg) 46 | ![MEOS](https://cdn.discordapp.com/attachments/921675245360922625/921675440488341534/meos.jpg) 47 | ![Twitter](https://cdn.discordapp.com/attachments/921675245360922625/921675459270438922/twitter.jpg) 48 | ![Settings](https://cdn.discordapp.com/attachments/921675245360922625/921675458905513984/setting.jpg) 49 | ![Whatsapp](https://cdn.discordapp.com/attachments/921675245360922625/921675459517906944/whatsapp.jpg) 50 | ![Phone](https://cdn.discordapp.com/attachments/921675245360922625/921675440677064745/phone.jpg) 51 | 52 | ## Features 53 | - Garages app to see your vehicle details 54 | - Mails to inform the player 55 | - Banking app to see balance and transfer money 56 | - Racing app to create races 57 | - App Store to download apps 58 | - MEOS app for polices to search 59 | - Houses app for house details and management 60 | 61 | ## Installation 62 | ### Manual 63 | - Download the script and put it in the `[qb]` directory. 64 | - Import `qb-phone.sql` in your database 65 | - Add the following code to your server.cfg/resouces.cfg 66 | ``` 67 | ensure qb-core 68 | ensure screenshot-basic 69 | ensure qb-phone 70 | ensure qb-policejob 71 | ensure qb-crypto 72 | ensure qb-lapraces 73 | ensure qb-houses 74 | ensure qb-garages 75 | ensure qb-banking 76 | ``` 77 | 78 | ## Configuration 79 | ``` 80 | 81 | Config = Config or {} 82 | 83 | Config.RepeatTimeout = 2000 -- Timeout for unanswered call notification 84 | Config.CallRepeats = 10 -- Repeats for unanswered call notification 85 | Config.OpenPhone = 244 -- Key to open phone display 86 | Config.PhoneApplications = { 87 | ["phone"] = { -- Needs to be unique 88 | app = "phone", -- App route 89 | color = "#04b543", -- App icon color 90 | icon = "fa fa-phone-alt", -- App icon 91 | tooltipText = "Phone", -- App name 92 | tooltipPos = "top", 93 | job = false, -- Job requirement 94 | blockedjobs = {}, -- Jobs cannot use this app 95 | slot = 1, -- App position 96 | Alerts = 0, -- Alert count 97 | }, 98 | } 99 | ``` 100 | ## Setup Webhook in `server/main.lua` for photos 101 | Set the following variable to your webhook (For example, a Discord channel or Imgur webhook) 102 | ### To use Discord: 103 | - Right click on a channel dedicated for photos 104 | - Click Edit Channel 105 | - Click Integrations 106 | - Click View Webhooks 107 | - Click New Webhook 108 | - Confirm channel 109 | - Click Copy Webhook URL 110 | - Paste into `WebHook` in `server/main.lua` 111 | ``` 112 | local WebHook = "" 113 | ``` 114 | -------------------------------------------------------------------------------- /config.lua: -------------------------------------------------------------------------------- 1 | Config = Config or {} 2 | Config.BillingCommissions = { -- This is a percentage (0.10) == 10% 3 | mechanic = 0.10 4 | } 5 | Config.TweetDuration = 12 -- How many hours to load tweets (12 will load the past 12 hours of tweets) 6 | Config.RepeatTimeout = 2000 7 | Config.CallRepeats = 10 8 | Config.OpenPhone = 'M' 9 | 10 | -- Set this to true if you wish to use Fivemerr (https://fivemerr.com/) for media uploads. 11 | -- Ensure to add your API key to server/main.lua 12 | Config.Fivemerr = false 13 | 14 | Config.PhoneApplications = { 15 | ['phone'] = { 16 | app = 'phone', 17 | color = '#04b543', 18 | icon = 'fa fa-phone-alt', 19 | tooltipText = 'Phone', 20 | tooltipPos = 'top', 21 | job = false, 22 | blockedjobs = {}, 23 | slot = 1, 24 | Alerts = 0, 25 | }, 26 | ['whatsapp'] = { 27 | app = 'whatsapp', 28 | color = '#25d366', 29 | icon = 'fas fa-comment', 30 | tooltipText = 'Whatsapp', 31 | tooltipPos = 'top', 32 | style = 'font-size: 2.8vh', 33 | job = false, 34 | blockedjobs = {}, 35 | slot = 2, 36 | Alerts = 0, 37 | }, 38 | ['settings'] = { 39 | app = 'settings', 40 | color = '#636e72', 41 | icon = 'fa fa-cogs', 42 | tooltipText = 'Settings', 43 | tooltipPos = 'top', 44 | style = 'padding-right: .08vh; font-size: 2.3vh', 45 | job = false, 46 | blockedjobs = {}, 47 | slot = 3, 48 | Alerts = 0, 49 | }, 50 | ['twitter'] = { 51 | app = 'twitter', 52 | color = '#1da1f2', 53 | icon = 'fab fa-twitter', 54 | tooltipText = 'Twitter', 55 | tooltipPos = 'top', 56 | job = false, 57 | blockedjobs = {}, 58 | slot = 4, 59 | Alerts = 0, 60 | }, 61 | ['garage'] = { 62 | app = 'garage', 63 | color = '#575fcf', 64 | icon = 'fas fa-car', 65 | tooltipText = 'Vehicles', 66 | job = false, 67 | blockedjobs = {}, 68 | slot = 5, 69 | Alerts = 0, 70 | }, 71 | ['mail'] = { 72 | app = 'mail', 73 | color = '#ff002f', 74 | icon = 'fas fa-envelope-open-text', 75 | tooltipText = 'Mail', 76 | job = false, 77 | blockedjobs = {}, 78 | slot = 6, 79 | Alerts = 0, 80 | }, 81 | ['advert'] = { 82 | app = 'advert', 83 | color = '#ff8f1a', 84 | icon = 'fas fa-bullhorn', 85 | tooltipText = 'Advertisements', 86 | job = false, 87 | blockedjobs = {}, 88 | slot = 7, 89 | Alerts = 0, 90 | }, 91 | ['bank'] = { 92 | app = 'bank', 93 | color = '#9c88ff', 94 | icon = 'fas fa-money-check-alt', 95 | tooltipText = 'Bank', 96 | job = false, 97 | blockedjobs = {}, 98 | slot = 8, 99 | Alerts = 0, 100 | }, 101 | ['crypto'] = { 102 | app = 'crypto', 103 | color = '#004682', 104 | icon = 'fas fa-coins', 105 | tooltipText = 'Crypto', 106 | job = false, 107 | blockedjobs = {}, 108 | slot = 9, 109 | Alerts = 0, 110 | }, 111 | ['racing'] = { 112 | app = 'racing', 113 | color = '#353b48', 114 | icon = 'fas fa-flag-checkered', 115 | tooltipText = 'Racing', 116 | job = false, 117 | blockedjobs = {}, 118 | slot = 10, 119 | Alerts = 0, 120 | }, 121 | ['houses'] = { 122 | app = 'houses', 123 | color = '#27ae60', 124 | icon = 'fas fa-home', 125 | tooltipText = 'Houses', 126 | job = false, 127 | blockedjobs = {}, 128 | slot = 11, 129 | Alerts = 0, 130 | }, 131 | ['lawyers'] = { 132 | app = 'lawyers', 133 | color = '#26d4ce', 134 | icon = 'fas fa-briefcase', 135 | tooltipText = 'Services', 136 | tooltipPos = 'bottom', 137 | job = false, 138 | blockedjobs = {}, 139 | slot = 12, 140 | Alerts = 0, 141 | }, 142 | ['gallery'] = { 143 | app = 'gallery', 144 | color = '#AC1D2C', 145 | icon = 'fas fa-images', 146 | tooltipText = 'Gallery', 147 | tooltipPos = 'bottom', 148 | job = false, 149 | blockedjobs = {}, 150 | slot = 13, 151 | Alerts = 0, 152 | }, 153 | ['camera'] = { 154 | app = 'camera', 155 | color = '#AC1D2C', 156 | icon = 'fas fa-camera', 157 | tooltipText = 'Camera', 158 | tooltipPos = 'bottom', 159 | job = false, 160 | blockedjobs = {}, 161 | slot = 14, 162 | Alerts = 0, 163 | }, 164 | ['meos'] = { 165 | app = 'meos', 166 | color = '#004682', 167 | icon = 'fas fa-ad', 168 | tooltipText = 'MDT', 169 | job = 'police', 170 | blockedjobs = {}, 171 | slot = 15, 172 | Alerts = 0, 173 | }, 174 | } 175 | Config.MaxSlots = 20 176 | 177 | Config.StoreApps = { 178 | ['territory'] = { 179 | app = 'territory', 180 | color = '#353b48', 181 | icon = 'fas fa-globe-europe', 182 | tooltipText = 'Territorium', 183 | tooltipPos = 'right', 184 | style = '', 185 | job = false, 186 | blockedjobs = {}, 187 | slot = 16, 188 | Alerts = 0, 189 | password = true, 190 | creator = 'QBCore', 191 | title = 'Territory', 192 | }, 193 | } 194 | -------------------------------------------------------------------------------- /html/css/garage.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); 2 | 3 | .garage-app { 4 | display: none; 5 | height: 100%; 6 | width: 100%; 7 | background: rgb(36, 36, 36); 8 | overflow: hidden; 9 | } 10 | 11 | .garage-app-header { 12 | position: absolute; 13 | height: 9vh; 14 | width: 100%; 15 | text-align: center; 16 | line-height: 13.5vh; 17 | color: white; 18 | font-family: 'Poppins', sans-serif; 19 | font-size: 1.5vh; 20 | } 21 | 22 | .garage-homescreen { 23 | position: absolute; 24 | height: 100%; 25 | width: 100%; 26 | left: 0vh; 27 | } 28 | 29 | .garage-detailscreen { 30 | position: absolute; 31 | height: 100%; 32 | width: 100%; 33 | left: -30vh; 34 | } 35 | 36 | .garage-vehicles { 37 | position: absolute; 38 | width: 85%; 39 | height: 44.5vh; 40 | top: 10.5vh; 41 | margin: 0 auto; 42 | left: 0; 43 | right: 0; 44 | overflow-y: scroll; 45 | } 46 | 47 | .garage-vehicles::-webkit-scrollbar { 48 | display: none; 49 | } 50 | 51 | .garage-vehicle { 52 | position: relative; 53 | height: 7vh; 54 | width: 100%; 55 | background-color: rgba(23, 23, 23, 90%); 56 | border-radius: 1vh; 57 | transition: .08s linear; 58 | margin-bottom: 1vh; 59 | box-shadow: 0rem 0rem 0.1rem 0.05rem #000000; 60 | } 61 | 62 | .garage-vehicle-firstletter { 63 | position: relative; 64 | line-height: 7vh; 65 | left: 1.2vh; 66 | background-color: #ee5253; 67 | padding-top: 1.1vh; 68 | padding-bottom: 1.1vh; 69 | padding-left: 1.6vh; 70 | padding-right: 1.6vh; 71 | border-radius: 50%; 72 | color: white; 73 | font-family: 'Poppins', sans-serif; 74 | font-size: 1.8vh; 75 | transition: .05s linear; 76 | } 77 | 78 | .garage-vehicle:hover { 79 | background-color: #dc143c; 80 | } 81 | 82 | .garage-vehicle-name { 83 | position: absolute; 84 | left: 7vh; 85 | color: white; 86 | line-height: 7vh; 87 | font-size: 1.2vh; 88 | font-family: 'Poppins', sans-serif; 89 | } 90 | 91 | .garage-cardetails { 92 | position: absolute; 93 | /* background-color: rgba(255, 255, 255, 0.1); */ 94 | height: 76%; 95 | width: 84%; 96 | margin: 0 auto; 97 | left: 0vh; 98 | right: 0; 99 | top: 11vh; 100 | } 101 | 102 | .vehicle-brand { 103 | position: relative; 104 | width: 100%; 105 | background-color: rgb(54, 54, 54); 106 | padding: .8vh; 107 | color: white; 108 | font-family: 'Poppins', sans-serif; 109 | border-bottom: .1vh solid #fff; 110 | margin-bottom: 1vh; 111 | font-size: 1.2vh; 112 | } 113 | 114 | .vehicle-model { 115 | position: relative; 116 | width: 100%; 117 | background-color: rgb(54, 54, 54); 118 | padding: .8vh; 119 | color: white; 120 | font-family: 'Poppins', sans-serif; 121 | border-bottom: .1vh solid #fff; 122 | margin-bottom: 1vh; 123 | font-size: 1.2vh; 124 | } 125 | 126 | .vehicle-plate { 127 | position: relative; 128 | width: 100%; 129 | background-color: rgb(54, 54, 54); 130 | padding: .8vh; 131 | color: white; 132 | font-family: 'Poppins', sans-serif; 133 | border-bottom: .1vh solid #fff; 134 | margin-bottom: 1vh; 135 | font-size: 1.2vh; 136 | } 137 | 138 | .vehicle-garage { 139 | position: relative; 140 | width: 100%; 141 | background-color: rgb(54, 54, 54); 142 | padding: .8vh; 143 | color: white; 144 | font-family: 'Poppins', sans-serif; 145 | border-bottom: .1vh solid #fff; 146 | margin-bottom: 1vh; 147 | font-size: 1.2vh; 148 | } 149 | 150 | .vehicle-status { 151 | position: relative; 152 | width: 100%; 153 | background-color: rgb(54, 54, 54); 154 | padding: .8vh; 155 | color: white; 156 | font-family: 'Poppins', sans-serif; 157 | border-bottom: .1vh solid #fff; 158 | margin-bottom: 1vh; 159 | font-size: 1.2vh; 160 | } 161 | 162 | .vehicle-fuel { 163 | position: relative; 164 | width: 100%; 165 | background-color: rgb(54, 54, 54); 166 | padding: .8vh; 167 | color: white; 168 | font-family: 'Poppins', sans-serif; 169 | border-bottom: .1vh solid #fff; 170 | margin-bottom: 1vh; 171 | font-size: 1.2vh; 172 | } 173 | 174 | .vehicle-engine { 175 | position: relative; 176 | width: 100%; 177 | background-color: rgb(54, 54, 54); 178 | padding: .8vh; 179 | color: white; 180 | font-family: 'Poppins', sans-serif; 181 | border-bottom: .1vh solid #fff; 182 | margin-bottom: 1vh; 183 | font-size: 1.2vh; 184 | } 185 | 186 | .vehicle-body { 187 | position: relative; 188 | width: 100%; 189 | background-color: rgb(54, 54, 54); 190 | padding: .8vh; 191 | color: white; 192 | font-family: 'Poppins', sans-serif; 193 | border-bottom: .1vh solid #fff; 194 | margin-bottom: 1vh; 195 | font-size: 1.2vh; 196 | } 197 | 198 | 199 | .vehicle-answer { 200 | float: right; 201 | font-size: 1.1vh; 202 | } 203 | 204 | 205 | .return-track { 206 | display: flex; 207 | flex-direction: row; 208 | justify-content: space-between; 209 | } 210 | 211 | .return-track > div { 212 | margin: 2px; 213 | width: 50%; 214 | height: 5vh; 215 | background-color: rgb(233, 233, 233); 216 | border-radius: .3vh; 217 | transition: .05s linear; 218 | text-align: center; 219 | line-height: 5vh; 220 | font-family: 'Poppins', sans-serif; 221 | font-size: 1.4vh; 222 | } 223 | 224 | .return-track > div:hover { 225 | background-color: rgb(212, 212, 212); 226 | } 227 | -------------------------------------------------------------------------------- /html/css/qstore.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap'); 2 | 3 | .store-app { 4 | display: none; 5 | height: 100%; 6 | width: 100%; 7 | background: rgb(252, 252, 252); 8 | overflow: hidden; 9 | } 10 | 11 | .store-header { 12 | position: absolute; 13 | top: 0; 14 | width: 100%; 15 | height: 9vh; 16 | color: black; 17 | /* background-color: gray; */ 18 | border-bottom: .3vh solid rgb(224, 224, 224); 19 | } 20 | 21 | .store-header > p { 22 | position: absolute; 23 | left: 1.9vh; 24 | top: 5vh; 25 | font-family: 'Poppins', sans-serif; 26 | font-size: 1.8vh; 27 | } 28 | 29 | .store-apps { 30 | position: absolute; 31 | width: 92%; 32 | height: 80%; 33 | 34 | bottom: 2%; 35 | left: 0; 36 | 37 | margin: 0 auto; 38 | left: 0; 39 | right: 0; 40 | 41 | background: rgb(243, 243, 243); 42 | border-radius: .5vh; 43 | 44 | -webkit-box-shadow: 0px 0px 7px px rgba(0,0,0,0.15); 45 | -moz-box-shadow: 0px 0px 7px 4px rgba(0,0,0,0.15); 46 | box-shadow: 0px 0px 7px 4px rgba(0,0,0,0.15); 47 | 48 | overflow: hidden; 49 | } 50 | 51 | .storeapp { 52 | position: relative; 53 | width: 100%; 54 | height: 7vh; 55 | background-color: rgb(245, 245, 245); 56 | 57 | margin: 0 auto; 58 | margin-bottom: .8vh; 59 | 60 | border-bottom: 0.2vh solid rgb(177, 177, 177); 61 | 62 | /* border-radius: .6vh; */ 63 | } 64 | 65 | .storeapp-icon { 66 | position: absolute; 67 | width: 5vh; 68 | height: 5vh; 69 | background-color: #575fcf; 70 | 71 | margin: 1vh; 72 | border-radius: .3vh; 73 | 74 | box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.05); 75 | } 76 | 77 | .storeapp-icon > i { 78 | position: absolute; 79 | margin: 0 auto; 80 | left: 0; 81 | right: 0; 82 | text-align: center; 83 | line-height: 5vh; 84 | font-size: 2.5vh; 85 | color: rgb(255, 255, 255); 86 | } 87 | 88 | .storeapp-title { 89 | position: absolute; 90 | top: 1vh; 91 | left: 6.9vh; 92 | font-family: 'Poppins', sans-serif; 93 | font-size: 1.4vh; 94 | } 95 | 96 | .storeapp-creator { 97 | position: absolute; 98 | bottom: 2.2vh; 99 | left: 6.9vh; 100 | font-family: 'Poppins', sans-serif; 101 | font-size: 1.2vh; 102 | } 103 | 104 | .storeapp-download { 105 | position: absolute; 106 | line-height: 7vh; 107 | right: 2vh; 108 | font-size: 2vh; 109 | color: #4488e7; 110 | 111 | transition: .05s ease-in-out; 112 | } 113 | 114 | .storeapp-download:hover { 115 | color: #3cb623; 116 | transition: .05s ease-in-out; 117 | } 118 | 119 | .storeapp-remove { 120 | position: absolute; 121 | line-height: 7vh; 122 | right: 2vh; 123 | font-size: 2vh; 124 | color: #4488e7; 125 | 126 | transition: .05s ease-in-out; 127 | } 128 | 129 | .storeapp-remove:hover { 130 | color: #b62323; 131 | transition: .05s ease-in-out; 132 | } 133 | 134 | 135 | .download-password-container { 136 | display: none; 137 | position: absolute; 138 | height: 100%; 139 | width: 100%; 140 | } 141 | 142 | .download-password { 143 | position: absolute; 144 | width: 80%; 145 | height: 17vh; 146 | background-color: rgb(248, 248, 248); 147 | margin: 0 auto; 148 | left: 0; 149 | right: 0; 150 | top: 50%; 151 | transform: translateY(-50%); 152 | box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.15); 153 | border-radius: .3vh; 154 | } 155 | 156 | #download-password-title { 157 | color: black; 158 | position: absolute; 159 | margin: 0 auto; 160 | left: 0; 161 | right: 0; 162 | text-align: center; 163 | line-height: 4vh; 164 | font-family: 'Poppins', sans-serif; 165 | font-size: 1.4vh; 166 | } 167 | 168 | #download-password-disclaimer { 169 | color: black; 170 | position: absolute; 171 | text-align: center; 172 | font-family: 'Poppins', sans-serif; 173 | font-size: 1vh; 174 | 175 | top: 3.2vh; 176 | } 177 | 178 | .download-password-input { 179 | position: absolute; 180 | width: 100%; 181 | height: 3.5vh; 182 | background-color: rgb(224, 224, 224); 183 | border: none; 184 | outline: none; 185 | top: 7vh; 186 | 187 | border-bottom: .2vh solid rgb(209, 209, 209); 188 | font-family: 'Poppins', sans-serif; 189 | text-align: center; 190 | 191 | transition: .2s ease-in-out; 192 | } 193 | 194 | .download-password-input:focus { 195 | border-bottom: .2vh solid rgb(245, 155, 37); 196 | } 197 | 198 | .download-password-input:valid { 199 | border-bottom: .2vh solid rgb(19, 179, 27); 200 | } 201 | 202 | .download-progressbar { 203 | position: absolute; 204 | width: 100%; 205 | height: 1vh; 206 | bottom: 0; 207 | } 208 | 209 | .download-progressbar-fill { 210 | position: absolute; 211 | width: 50%; 212 | background-color: green; 213 | height: 100%; 214 | } 215 | 216 | .download-password-accept { 217 | position: absolute; 218 | width: 4vh; 219 | height: 4vh; 220 | background-color: rgb(192, 192, 192); 221 | bottom: 1.75vh; 222 | margin: 0 auto; 223 | left: 0; 224 | right: 5.2vh; 225 | text-align: center; 226 | 227 | font-size: 1.9vh; 228 | transition: 0.1s linear; 229 | } 230 | .download-password-deny { 231 | position: absolute; 232 | width: 4vh; 233 | height: 4vh; 234 | background-color: rgb(192, 192, 192); 235 | bottom: 1.75vh; 236 | margin: 0 auto; 237 | left: 5.2vh; 238 | right: 0; 239 | text-align: center; 240 | 241 | font-size: 2vh; 242 | transition: 0.1s linear; 243 | } 244 | 245 | .download-password-accept > i { 246 | line-height: 4vh; 247 | } 248 | 249 | .download-password-deny > i { 250 | line-height: 4vh; 251 | } 252 | 253 | .download-password-accept:hover { 254 | color: rgb(114, 114, 114); 255 | } 256 | 257 | .download-password-deny:hover { 258 | color: rgb(114, 114, 114); 259 | } 260 | -------------------------------------------------------------------------------- /html/js/qstore.js: -------------------------------------------------------------------------------- 1 | var TemplatePassword = "4qxbZ38vpXG6jnCFmQsCdzQ5hcZ9j2dCnfTYnjYWDwgL9KYANzjpx6T6f74MWh2E"; 2 | var CurrentApp = null; 3 | var IsDownloading = false; 4 | 5 | SetupAppstore = function(data) { 6 | $(".store-apps").html(""); 7 | $.each(data.StoreApps, function(i, app){ 8 | if (data.PhoneData.InstalledApps[i] == null || data.PhoneData.InstalledApps[i] == undefined) { 9 | if(app.blockedjobs != QB.Phone.Data.PlayerJob.name){ 10 | var elem = '
'+app.title+'
'+app.creator+'
' 11 | $(".store-apps").append(elem); 12 | app.app = i; 13 | $("#app-"+i).data('AppData', app); 14 | } 15 | } else { 16 | var elem = '
'+app.title+' - Geïnstalleerd
'+app.creator+'
' 17 | $(".store-apps").append(elem); 18 | app.app = i; 19 | $("#app-"+i).data('AppData', app); 20 | } 21 | }); 22 | } 23 | 24 | $(document).on('click', '.storeapp-download', function(e){ 25 | e.preventDefault(); 26 | 27 | var AppId = $(this).parent().attr('id'); 28 | var AppData = $("#"+AppId).data('AppData'); 29 | 30 | $(".download-progressbar-fill").css("width", "0%"); 31 | 32 | CurrentApp = AppData.app; 33 | 34 | if (AppData.password) { 35 | $(".download-password-container").fadeIn(150); 36 | } 37 | }); 38 | 39 | $(document).on('click', '.storeapp-remove', function(e){ 40 | e.preventDefault(); 41 | 42 | var AppId = $(this).parent().attr('id'); 43 | var AppData = $("#"+AppId).data('AppData'); 44 | 45 | var applicationSlot = $(".phone-applications").find('[data-appslot="'+AppData.slot+'"]'); 46 | $(applicationSlot).html(""); 47 | $(applicationSlot).css({ 48 | "background-color":"transparent" 49 | }); 50 | $(applicationSlot).prop('title', ""); 51 | $(applicationSlot).removeData('app'); 52 | $(applicationSlot).removeData('placement'); 53 | 54 | $(applicationSlot).tooltip("destroy"); 55 | 56 | QB.Phone.Data.Applications[AppData.app] = null; 57 | 58 | $.post('https://qb-phone/RemoveApplication', JSON.stringify({ 59 | app: AppData.app 60 | })); 61 | setTimeout(function(){ 62 | $.post('https://qb-phone/SetupStoreApps', JSON.stringify({}), function(data){ 63 | SetupAppstore(data); 64 | }); 65 | }, 100); 66 | }); 67 | 68 | $(document).on('click', '.download-password-accept', function(e){ 69 | e.preventDefault(); 70 | 71 | var FilledInPassword = $(".download-password-input").val(); 72 | 73 | if (FilledInPassword == TemplatePassword) { 74 | $(".download-password-buttons").fadeOut(150); 75 | IsDownloading = true; 76 | $(".download-password-input").attr('readonly', true); 77 | 78 | $(".download-progressbar-fill").animate({ 79 | width: "100%", 80 | }, 5000, function(){ 81 | IsDownloading = false; 82 | $(".download-password-input").attr('readonly', false); 83 | $(".download-password-container").fadeOut(150, function(){ 84 | $(".download-progressbar-fill").css("width", "0%"); 85 | }); 86 | 87 | $.post('https://qb-phone/InstallApplication', JSON.stringify({ 88 | app: CurrentApp, 89 | }), function(Installed){ 90 | if (Installed) { 91 | var applicationSlot = $(".phone-applications").find('[data-appslot="'+Installed.data.slot+'"]'); 92 | var blockedapp = IsAppJobBlocked(Installed.data.blockedjobs, QB.Phone.Data.PlayerJob.name) 93 | if ((!Installed.data.job || Installed.data.job === QB.Phone.Data.PlayerJob.name) && !blockedapp) { 94 | $(applicationSlot).css({"background-color":Installed.data.color}); 95 | var icon = ''; 96 | if (Installed.data.app == "meos") { 97 | icon = ''; 98 | } 99 | $(applicationSlot).html(icon+'
0
'); 100 | $(applicationSlot).prop('title', Installed.data.tooltipText); 101 | $(applicationSlot).data('app', Installed.data.app); 102 | 103 | if (Installed.data.tooltipPos !== undefined) { 104 | $(applicationSlot).data('placement', Installed.data.tooltipPos) 105 | } 106 | } 107 | $(".phone-applications").find('[data-appslot="'+Installed.data.slot+'"]').tooltip(); 108 | 109 | var AppObject = $(".phone-applications").find("[data-appslot='"+Installed.data.slot+"']").find('.app-unread-alerts'); 110 | 111 | if (Installed.data.Alerts > 0) { 112 | $(AppObject).html(Installed.data.Alerts); 113 | $(AppObject).css({"display":"block"}); 114 | } else { 115 | $(AppObject).css({"display":"none"}); 116 | } 117 | QB.Phone.Data.Applications[Installed.data.app] = Installed.data; 118 | 119 | setTimeout(function(){ 120 | $.post('https://qb-phone/SetupStoreApps', JSON.stringify({}), function(data){ 121 | SetupAppstore(data); 122 | $(".download-password-input").attr('readonly', false); 123 | $(".download-progressbar-fill").css("width", "0%"); 124 | $(".download-password-buttons").show(); 125 | $(".download-password-input").val(""); 126 | }); 127 | }, 100); 128 | } 129 | }); 130 | }); 131 | } 132 | }); 133 | 134 | $(document).on('click', '.download-password-deny', function(e){ 135 | e.preventDefault(); 136 | 137 | $(".download-password-container").fadeOut(150); 138 | CurrentApp = null; 139 | IsDownloading = false; 140 | }); -------------------------------------------------------------------------------- /html/js/houses.js: -------------------------------------------------------------------------------- 1 | var SelectedHousesTab = "myhouses"; 2 | var CurrentHouseData = {}; 3 | var HousesData = {}; 4 | 5 | $(document).on('click', '.houses-app-header-tab', function(e){ 6 | e.preventDefault(); 7 | var CurrentHouseTab = $("[data-housetab='"+SelectedHousesTab+"']"); 8 | var Data = $(this).data('housetab'); 9 | 10 | if (Data !== SelectedHousesTab) { 11 | $(".house-app-" + $(CurrentHouseTab).data('housetab') + "-container").css("display", "none"); 12 | $(".house-app-" + Data + "-container").css("display", "block"); 13 | $(CurrentHouseTab).removeClass('houses-app-header-tab-selected'); 14 | $("[data-housetab='"+Data+"']").addClass('houses-app-header-tab-selected'); 15 | SelectedHousesTab = Data 16 | } 17 | }); 18 | 19 | $(document).on('click', '.myhouses-house', function(e){ 20 | e.preventDefault(); 21 | 22 | var HouseData = $(this).data('HouseData'); 23 | CurrentHouseData = HouseData; 24 | $(".myhouses-options-container").fadeIn(150); 25 | $(".myhouses-options-header").html(HouseData.label); 26 | }); 27 | 28 | $(document).on('click', '#myhouse-option-close', function(e){ 29 | e.preventDefault(); 30 | 31 | $(".myhouses-options-container").fadeOut(150); 32 | }); 33 | 34 | function SetupPlayerHouses(Houses) { 35 | $(".house-app-myhouses-container").html(""); 36 | HousesData = Houses; 37 | if (Houses.length > 0) { 38 | $.each(Houses, function(id, house){ 39 | var TotalKeyholders = 0; 40 | if (house.keyholders !== undefined && house.keyholders !== null) { 41 | TotalKeyholders = (house.keyholders).length; 42 | } 43 | var HouseDetails = '  ' + TotalKeyholders + '       '; 44 | if (house.garage.length > 0) { 45 | HouseDetails = '  ' + TotalKeyholders + '       '; 46 | } 47 | var elem = '
' + house.label + ' | Tier ' + house.tier + '
' + HouseDetails + '
'; 48 | $(".house-app-myhouses-container").append(elem); 49 | $("#house-" + id).data('HouseData', house) 50 | }); 51 | } 52 | } 53 | 54 | var AnimationDuration = 200; 55 | 56 | $(document).on('click', '#myhouse-option-transfer', function(e){ 57 | e.preventDefault(); 58 | 59 | $(".myhouses-options").animate({ 60 | left: -35+"vw" 61 | }, AnimationDuration); 62 | 63 | $(".myhouse-option-transfer-container").animate({ 64 | left: 0 65 | }, AnimationDuration); 66 | }); 67 | 68 | $(document).on('click', '#myhouse-option-keys', function(e){ 69 | $(".keys-container").html(""); 70 | if (CurrentHouseData.keyholders !== undefined && CurrentHouseData.keyholders !== null) { 71 | $.each(CurrentHouseData.keyholders, function(i, keyholder){ 72 | if (keyholder !== null && keyholder !== undefined) { 73 | var elem; 74 | if (keyholder.citizenid !== QB.Phone.Data.PlayerData.citizenid) { 75 | elem = '
' + keyholder.charinfo.firstname + ' ' + keyholder.charinfo.lastname + '
'; 76 | } else { 77 | elem = '
(Me) ' + keyholder.charinfo.firstname + ' ' + keyholder.charinfo.lastname + '
'; 78 | } 79 | $(".keys-container").append(elem); 80 | $('#holder-' + i).data('KeyholderData', keyholder); 81 | } 82 | }); 83 | } 84 | $(".myhouses-options").animate({ 85 | left: -35+"vw" 86 | }, AnimationDuration); 87 | $(".myhouse-option-keys-container").animate({ 88 | left: 0 89 | }, AnimationDuration); 90 | }); 91 | 92 | $(document).on('click', '.house-key-delete', function(e){ 93 | e.preventDefault(); 94 | var Data = $(this).parent().data('KeyholderData'); 95 | 96 | $.each(CurrentHouseData.keyholders, function(i, keyholder){ 97 | if (Data.citizenid == keyholder.citizenid) { 98 | CurrentHouseData.keyholders.splice(i); 99 | } 100 | }); 101 | 102 | $.each(HousesData, function(i, house){ 103 | if (house.name == CurrentHouseData.name) { 104 | HousesData[i].keyholders = CurrentHouseData.keyholders; 105 | } 106 | }); 107 | 108 | SetupPlayerHouses(HousesData); 109 | 110 | $(this).parent().fadeOut(250, function(){ 111 | $(this).remove(); 112 | }); 113 | 114 | $.post('https://qb-phone/RemoveKeyholder', JSON.stringify({ 115 | HolderData: Data, 116 | HouseData: CurrentHouseData, 117 | })); 118 | }); 119 | 120 | function shakeElement(element){ 121 | $(element).addClass('shake'); 122 | setTimeout(function(){ 123 | $(element).removeClass('shake'); 124 | }, 500); 125 | }; 126 | 127 | $(document).on('click', '#myhouse-option-transfer-confirm', function(e){ 128 | e.preventDefault(); 129 | 130 | var NewBSN = $(".myhouse-option-transfer-container-citizenid").val(); 131 | 132 | $.post('https://qb-phone/TransferCid', JSON.stringify({ 133 | newBsn: NewBSN, 134 | HouseData: CurrentHouseData, 135 | }), function(CanTransfer){ 136 | if (CanTransfer) { 137 | $(".myhouses-options").animate({ 138 | left: 0 139 | }, AnimationDuration); 140 | 141 | $(".myhouse-option-transfer-container").animate({ 142 | left: 35+"vw" 143 | }, AnimationDuration); 144 | 145 | setTimeout(function(){ 146 | $.post('https://qb-phone/GetPlayerHouses', JSON.stringify({}), function(Houses){ 147 | SetupPlayerHouses(Houses); 148 | $(".myhouses-options-container").fadeOut(150); 149 | }); 150 | }, 100); 151 | } else { 152 | QB.Phone.Notifications.Add("fas fa-home", "Houses", "This is an invalid CSN-number", "#27ae60", 2500); 153 | shakeElement(".myhouse-option-transfer-container"); 154 | $(".myhouse-option-transfer-container-citizenid").val(""); 155 | } 156 | }); 157 | }); 158 | 159 | $(document).on('click', '#myhouse-option-transfer-back', function(e){ 160 | e.preventDefault(); 161 | 162 | $(".myhouses-options").animate({ 163 | left: 0 164 | }, AnimationDuration); 165 | 166 | $(".myhouse-option-transfer-container").animate({ 167 | left: 35+"vw" 168 | }, AnimationDuration); 169 | }); 170 | 171 | $(document).on('click', '#myhouse-option-keys-back', function(e){ 172 | e.preventDefault(); 173 | 174 | $(".myhouses-options").animate({ 175 | left: 0 176 | }, AnimationDuration); 177 | $(".myhouse-option-keys-container").animate({ 178 | left: 35+"vw" 179 | }, AnimationDuration); 180 | }); 181 | -------------------------------------------------------------------------------- /html/js/mail.js: -------------------------------------------------------------------------------- 1 | var OpenedMail = null; 2 | 3 | $(document).on('click', '.mail', function(e){ 4 | e.preventDefault(); 5 | 6 | $(".mail-home").animate({ 7 | left: 30+"vh" 8 | }, 300); 9 | $(".opened-mail").animate({ 10 | left: 0+"vh" 11 | }, 300); 12 | 13 | var MailData = $("#"+$(this).attr('id')).data('MailData'); 14 | QB.Phone.Functions.SetupMail(MailData); 15 | 16 | OpenedMail = $(this).attr('id'); 17 | }); 18 | 19 | $(document).on('click', '.mail-back', function(e){ 20 | e.preventDefault(); 21 | 22 | $(".mail-home").animate({ 23 | left: 0+"vh" 24 | }, 300); 25 | $(".opened-mail").animate({ 26 | left: -30+"vh" 27 | }, 300); 28 | OpenedMail = null; 29 | }); 30 | 31 | $(document).on('click', '#accept-mail', function(e){ 32 | e.preventDefault(); 33 | var MailData = $("#"+OpenedMail).data('MailData'); 34 | $.post('https://qb-phone/AcceptMailButton', JSON.stringify({ 35 | buttonEvent: MailData.button.buttonEvent, 36 | buttonData: MailData.button.buttonData, 37 | mailId: MailData.mailid, 38 | })); 39 | $(".mail-home").animate({ 40 | left: 0+"vh" 41 | }, 300); 42 | $(".opened-mail").animate({ 43 | left: -30+"vh" 44 | }, 300); 45 | }); 46 | 47 | $(document).on('click', '#remove-mail', function(e){ 48 | e.preventDefault(); 49 | var MailData = $("#"+OpenedMail).data('MailData'); 50 | $.post('https://qb-phone/RemoveMail', JSON.stringify({ 51 | mailId: MailData.mailid 52 | })); 53 | $(".mail-home").animate({ 54 | left: 0+"vh" 55 | }, 300); 56 | $(".opened-mail").animate({ 57 | left: -30+"vh" 58 | }, 300); 59 | }); 60 | 61 | QB.Phone.Functions.SetupMails = function(Mails) { 62 | var NewDate = new Date(); 63 | var NewHour = NewDate.getHours(); 64 | var NewMinute = NewDate.getMinutes(); 65 | var Minutessss = NewMinute; 66 | var Hourssssss = NewHour; 67 | if (NewHour < 10) { 68 | Hourssssss = "0" + Hourssssss; 69 | } 70 | if (NewMinute < 10) { 71 | Minutessss = "0" + NewMinute; 72 | } 73 | var MessageTime = Hourssssss + ":" + Minutessss; 74 | 75 | $("#mail-header-mail").html(QB.Phone.Data.PlayerData.charinfo.firstname+"."+QB.Phone.Data.PlayerData.charinfo.lastname+"@qbcore.com"); 76 | $("#mail-header-lastsync").html("Last synchronized "+MessageTime); 77 | if (Mails !== null && Mails !== undefined) { 78 | if (Mails.length > 0) { 79 | $(".mail-list").html(""); 80 | $.each(Mails, function(i, mail){ 81 | var date = new Date(mail.date); 82 | var DateString = date.getDate()+" "+MonthFormatting[date.getMonth()]+" "+date.getFullYear()+" "+date.getHours()+":"+date.getMinutes(); 83 | var element = '
'+mail.sender+'

'+mail.message+'

'+DateString+'
'; 84 | 85 | $(".mail-list").append(element); 86 | $("#mail-"+mail.mailid).data('MailData', mail); 87 | }); 88 | } else { 89 | $(".mail-list").html('

You don\'t have any mails..

'); 90 | } 91 | 92 | } 93 | } 94 | 95 | var MonthFormatting = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; 96 | 97 | QB.Phone.Functions.SetupMail = function(MailData) { 98 | var date = new Date(MailData.date); 99 | var DateString = date.getDate()+" "+MonthFormatting[date.getMonth()]+" "+date.getFullYear()+" "+date.getHours()+":"+date.getMinutes(); 100 | $(".mail-subject").html("

"+MailData.sender+"
"+MailData.subject+"

"); 101 | $(".mail-date").html("

"+DateString+"

"); 102 | $(".mail-content").html("

"+MailData.message+"

"); 103 | 104 | var AcceptElem = ''; 105 | var RemoveElem = ''; 106 | 107 | $(".opened-mail-footer").html(""); 108 | 109 | if (MailData.button !== undefined && MailData.button !== null) { 110 | $(".opened-mail-footer").append(AcceptElem); 111 | $(".opened-mail-footer").append(RemoveElem); 112 | $(".opened-mail-footer-item").css({"width":"50%"}); 113 | } else { 114 | $(".opened-mail-footer").append(RemoveElem); 115 | $(".opened-mail-footer-item").css({"width":"100%"}); 116 | } 117 | } 118 | 119 | // Advert JS 120 | 121 | $(document).on('click', '.test-slet', function(e){ 122 | e.preventDefault(); 123 | $(".advert-home").animate({ 124 | left: 30+"vh" 125 | }); 126 | $(".new-advert").animate({ 127 | left: 0+"vh" 128 | }); 129 | }); 130 | 131 | $(document).on('click','.advimage', function (){ 132 | let source = $(this).attr('src') 133 | QB.Screen.popUp(source); 134 | }); 135 | 136 | $(document).on('click','#new-advert-photo',function(e){ 137 | e.preventDefault(); 138 | $.post('https://qb-phone/TakePhoto',function(url){ 139 | if(url){ 140 | $('#advert-new-url').val(url) 141 | } 142 | }) 143 | QB.Phone.Functions.Close(); 144 | }); 145 | 146 | $(document).on('click', '#new-advert-back', function(e){ 147 | e.preventDefault(); 148 | 149 | $(".advert-home").animate({ 150 | left: 0+"vh" 151 | }); 152 | $(".new-advert").animate({ 153 | left: -30+"vh" 154 | }); 155 | }); 156 | 157 | $(document).on('click', '#new-advert-submit', function(e){ 158 | e.preventDefault(); 159 | var Advert = $(".new-advert-textarea").val(); 160 | let picture = $('#advert-new-url').val(); 161 | 162 | if (Advert !== "") { 163 | $(".advert-home").animate({ 164 | left: 0+"vh" 165 | }); 166 | $(".new-advert").animate({ 167 | left: -30+"vh" 168 | }); 169 | if (!picture){ 170 | $.post('https://qb-phone/PostAdvert', JSON.stringify({ 171 | message: Advert, 172 | url: null 173 | })); 174 | }else { 175 | $.post('https://qb-phone/PostAdvert', JSON.stringify({ 176 | message: Advert, 177 | url: picture 178 | })); 179 | } 180 | $('#advert-new-url').val("") 181 | $(".new-advert-textarea").val(""); 182 | } else { 183 | QB.Phone.Notifications.Add("fas fa-ad", "Advertisement", "You can\'t post an empty ad!", "#ff8f1a", 2000); 184 | } 185 | }); 186 | 187 | QB.Phone.Functions.RefreshAdverts = function(Adverts) { 188 | $("#advert-header-name").html("@"+QB.Phone.Data.PlayerData.charinfo.firstname+""+QB.Phone.Data.PlayerData.charinfo.lastname+" | "+QB.Phone.Data.PlayerData.charinfo.phone); 189 | if (Adverts.length > 0 || Adverts.length == undefined) { 190 | $(".advert-list").html(""); 191 | $.each(Adverts, function(i, advert){ 192 | var clean = DOMPurify.sanitize(advert.message , { 193 | ALLOWED_TAGS: [], 194 | ALLOWED_ATTR: [] 195 | }); 196 | 197 | if (clean == '') { clean = 'I\'m a silly goose :/' } 198 | 199 | if (advert.url) { 200 | var element = ``; 201 | } else { 202 | var element = ``; 203 | } 204 | 205 | $(".advert-list").append(element); 206 | 207 | if (advert.number === QB.Phone.Data.PlayerData.charinfo.phone){ 208 | $(".advert").append('') 209 | } 210 | }); 211 | } else { 212 | $(".advert-list").html(""); 213 | var element = ''; 214 | $(".advert-list").append(element); 215 | } 216 | } 217 | 218 | $(document).on('click','#adv-delete',function(e){ 219 | e.preventDefault(); 220 | $.post('https://qb-phone/DeleteAdvert', function(){ 221 | setTimeout(function(){ 222 | QB.Phone.Notifications.Add("fas fa-ad", "Advertisement", "The ad was deleted", "#ff8f1a", 2000); 223 | },400) 224 | }); 225 | }) 226 | -------------------------------------------------------------------------------- /html/css/twitter.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap'); 2 | 3 | .twitter-app { 4 | display: none; 5 | height: 100%; 6 | width: 100%; 7 | background: rgb(36, 36, 36); 8 | overflow: hidden; 9 | } 10 | 11 | .twitter-header { 12 | position: absolute; 13 | top: 5vh; 14 | width: 100%; 15 | height: 5vh; 16 | border-bottom: .2vh solid rgba(20, 23, 26, 0.37); 17 | } 18 | 19 | .twitter-header-tab { 20 | position: relative; 21 | float: left; 22 | width: 33.33%; 23 | height: 100%; 24 | text-align: center; 25 | line-height: 5vh; 26 | font-size: 1.5vh; 27 | color: white; 28 | transition: .07s; 29 | } 30 | 31 | .twitter-header-tab:hover { 32 | background-color: #AAB8C2; 33 | } 34 | 35 | .selected-twitter-header-tab { 36 | border-bottom: .2vh solid #1DA1F2; 37 | color: #1DA1F2; 38 | } 39 | 40 | .twitter-app-header { 41 | position: relative; 42 | padding: 5vh 0 0 1.85vh; 43 | font-family: 'Poppins', sans-serif; 44 | font-size: 2vh; 45 | } 46 | 47 | .twitter-home-tab { 48 | display: block; 49 | position: absolute; 50 | height: 75%; 51 | width: 100%; 52 | top: 12vh; 53 | overflow: hidden; 54 | overflow-y: scroll !important; 55 | overflow-x: hidden !important; 56 | } 57 | 58 | .twitter-home-tab::-webkit-scrollbar { 59 | width: .7vh; 60 | } 61 | 62 | .twitter-home-tab::-webkit-scrollbar-thumb { 63 | background-color: #1DA1F2; 64 | } 65 | 66 | .twitter-home-tab::-webkit-scrollbar-track { 67 | background-color: transparent; 68 | } 69 | 70 | .twitter-mentions-tab { 71 | display: none; 72 | position: absolute; 73 | height: 75%; 74 | width: 100%; 75 | top: 12vh; 76 | overflow: hidden; 77 | overflow-y: scroll !important; 78 | overflow-x: hidden !important; 79 | } 80 | 81 | .twitter-mentions-tab::-webkit-scrollbar { 82 | width: .7vh; 83 | } 84 | 85 | .twitter-mentions-tab::-webkit-scrollbar-thumb { 86 | background-color: #1DA1F2; 87 | } 88 | 89 | .twitter-mentions-tab::-webkit-scrollbar-track { 90 | background-color: transparent; 91 | } 92 | 93 | .twitter-hashtags-tab { 94 | display: none; 95 | position: absolute; 96 | height: 75%; 97 | width: 100%; 98 | top: 12vh; 99 | overflow: hidden; 100 | overflow-y: scroll !important; 101 | overflow-x: hidden !important; 102 | } 103 | 104 | .twitter-hashtags-tab::-webkit-scrollbar { 105 | width: .7vh; 106 | } 107 | 108 | .twitter-hashtags-tab::-webkit-scrollbar-thumb { 109 | background-color: #1DA1F2; 110 | } 111 | 112 | .twitter-hashtags-tab::-webkit-scrollbar-track { 113 | background-color: transparent; 114 | } 115 | 116 | .twitter-tweet { 117 | position: relative; 118 | height: auto; 119 | width: 90%; 120 | margin-bottom: 0.5vh; 121 | background-color: #1DA1F2; 122 | border-radius: 7px; 123 | left: 15px; 124 | color: white; 125 | } 126 | 127 | .twitter-tweet-hashtag { 128 | position: relative; 129 | height: auto; 130 | width: 100%; 131 | border-top: 2px solid rgba(20, 23, 26, 0.37); 132 | margin-bottom: 2.5vh; 133 | } 134 | 135 | .twitter-mentioned-tweet { 136 | position: relative; 137 | height: auto; 138 | width: 100%; 139 | border-top: 2px solid rgba(20, 23, 26, 0.37); 140 | margin-bottom: 2.5vh; 141 | } 142 | 143 | .twt-img { 144 | position: absolute; 145 | left: 1vh; 146 | height: 100%; 147 | width: 100%; 148 | } 149 | 150 | .twt-img > img { 151 | width: 4vh; 152 | height: 4vh; 153 | border-radius: 50%; 154 | } 155 | 156 | .tweet-reply { 157 | position: absolute; 158 | right: 10px; 159 | bottom: 0; 160 | color: rgba(0, 0, 0, 0.8); 161 | transition: .05 linear; 162 | z-index: 100; 163 | pointer-events: all; 164 | } 165 | 166 | .tweet-reply:hover i { 167 | color: rgba(0, 0, 0, 1.0); 168 | } 169 | 170 | .tweet-tweeter { 171 | padding-left: 6vh; 172 | padding-top: .6vh; 173 | font-family: 'Poppins', sans-serif; 174 | font-size: 1.1vh; 175 | } 176 | 177 | .tweet-tweeter > span { 178 | position: relative; 179 | font-family: 'Poppins', sans-serif; 180 | font-size: 1.0vh; 181 | top: -.1vh; 182 | } 183 | 184 | .tweet-message { 185 | margin-top: .3vh; 186 | padding-left: 6vh; 187 | top: .5vh; 188 | font-family: 'Poppins', sans-serif; 189 | font-size: 1.3vh; 190 | padding-bottom: 1vh; 191 | overflow-wrap: break-word; 192 | word-wrap: break-word; 193 | } 194 | 195 | .twitter-new-tweet { 196 | position: absolute; 197 | bottom: 0; 198 | right: 0; 199 | width: 5.5vh; 200 | height: 5.5vh; 201 | background-color: #1DA1F2; 202 | margin: 2.2vh; 203 | z-index: 101; 204 | border-radius: 50%; 205 | text-align: center; 206 | transition: .1s; 207 | } 208 | 209 | .twitter-new-tweet:hover { 210 | background-color: rgb(62, 179, 252); 211 | } 212 | 213 | .twitter-new-tweet > i { 214 | line-height: 5.5vh; 215 | font-size: 2vh; 216 | transform: rotate(-20deg); 217 | color: white; 218 | } 219 | 220 | .twitter-new-tweet-tab { 221 | display: none; 222 | position: absolute; 223 | display: block; 224 | top: -100%; 225 | height: 100%; 226 | width: 100%; 227 | background: rgb(36, 36, 36); 228 | overflow: hidden; 229 | z-index: 105; 230 | } 231 | 232 | .twitter-new-tweet-header { 233 | position: relative; 234 | padding: 6vh 0 0 9vh; 235 | font-family: 'Poppins', sans-serif; 236 | font-size: 2vh; 237 | color: white; 238 | } 239 | 240 | #tweet-new-message { 241 | position: absolute; 242 | border: none; 243 | height: 15vh; 244 | margin: 0 auto; 245 | left: 0; 246 | right: 0; 247 | color: white; 248 | background-color: rgba(23, 23, 23, 90%); 249 | outline: none; 250 | border: 2px solid #1DA1F2; 251 | resize: none; 252 | font-family: 'Poppins', sans-serif; 253 | padding: 0.87vh; 254 | font-size: 1.4vh; 255 | top: 12vh; 256 | width: 22vh; 257 | border-radius: 7px; 258 | box-shadow: inset 0 0 2vh 0 rgba(0, 0, 0, 0.089); 259 | } 260 | 261 | #tweet-new-message::-webkit-scrollbar { 262 | display: none; 263 | } 264 | 265 | #tweet-new-message::placeholder { 266 | font-size: 1.4vh; 267 | font-family: 'Poppins', sans-serif; 268 | } 269 | 270 | #tweet-new-url{ 271 | position: absolute; 272 | border: 2px solid #1DA1F2; 273 | height: 5vh; 274 | margin: 0 auto; 275 | left: 0; 276 | right: 0; 277 | color: white; 278 | background: rgba(23, 23, 23, 90%); 279 | outline: none; 280 | resize: none; 281 | font-family: 'Poppins', sans-serif; 282 | padding: 0.87vh; 283 | font-size: 1.4vh; 284 | top: 30vh; 285 | width: 22vh; 286 | border-radius: 7px; 287 | box-shadow: 0rem 0rem 0.1rem 0.05rem #000000; 288 | } 289 | 290 | #tweet-new-url::-webkit-scrollbar { 291 | display: none; 292 | } 293 | 294 | .twitter-new-tweet-buttons { 295 | position: absolute; 296 | bottom: 40px; 297 | width: 100%; 298 | height: 5vh; 299 | color: white; 300 | } 301 | 302 | .twitter-new-tweet-button { 303 | position: relative; 304 | float: left; 305 | width: 33%; 306 | height: 100%; 307 | text-align: center; 308 | line-height: 4.5vh; 309 | font-family: 'Poppins', sans-serif; 310 | font-size: 1.5vh; 311 | border-top: .3vh solid #6ab04c00; 312 | transition: .1s; 313 | } 314 | 315 | .twitter-new-tweet-button:hover { 316 | border-top: .3vh solid #1DA1F2; 317 | } 318 | 319 | .twitter-no-tweets { 320 | position: absolute; 321 | text-align: center; 322 | top: 4vh; 323 | width: 100%; 324 | font-size: 2vh; 325 | font-family: 'Poppins', sans-serif; 326 | color: white; 327 | } 328 | 329 | .mentioned-tag { 330 | color: black; 331 | padding-bottom: .3vh; 332 | transition: .2s; 333 | } 334 | 335 | .hashtag-tag-text { 336 | color: black; 337 | padding-bottom: .3vh; 338 | transition: .2s; 339 | } 340 | 341 | .twitter-hashtag { 342 | position: relative; 343 | height: 7vh; 344 | width: 90%; 345 | top: 0px; 346 | border-radius: 7px; 347 | left: 15px; 348 | margin-bottom: 10px; 349 | background-color: rgb(27, 149, 224);; 350 | transition: all 0.2s ease 0s; 351 | } 352 | 353 | .twitter-hashtag-status{ 354 | position: absolute; 355 | top: .8vh; 356 | left: 1vh; 357 | font-family: 'Poppins', sans-serif; 358 | font-size: 1.1vh; 359 | color: white; 360 | } 361 | 362 | .twitter-hashtag-tag { 363 | position: absolute; 364 | top: 2.5vh; 365 | left: 1vh; 366 | font-family: 'Poppins', sans-serif; 367 | font-size: 1.4vh; 368 | color: white; 369 | } 370 | .twitter-hashtag-messages { 371 | position: absolute; 372 | bottom: .8vh; 373 | left: 1vh; 374 | font-family: 'Poppins', sans-serif; 375 | font-size: 1.1vh; 376 | color: white; 377 | } 378 | .twitter-hashtags { 379 | position: absolute; 380 | display: block; 381 | width: 100%; 382 | } 383 | .twitter-hashtag-tweets { 384 | display: none; 385 | position: absolute; 386 | top: 0; 387 | left: 30; 388 | width: 100%; 389 | height: 40vh; 390 | overflow: hidden; 391 | overflow-y: scroll; 392 | overflow-x: hidden; 393 | } 394 | 395 | .twitter-hashtag-tweets::-webkit-scrollbar { 396 | width: .2vh; 397 | } 398 | 399 | .twitter-hashtag-tweets::-webkit-scrollbar-thumb { 400 | background-color: #1DA1F2; 401 | } 402 | 403 | .twitter-hashtag-tweets::-webkit-scrollbar-track { 404 | background-color: transparent; 405 | } -------------------------------------------------------------------------------- /html/js/settings.js: -------------------------------------------------------------------------------- 1 | QB.Phone.Settings = {}; 2 | QB.Phone.Settings.Background = "default-qbcore"; 3 | QB.Phone.Settings.OpenedTab = null; 4 | QB.Phone.Settings.Backgrounds = { 5 | 'default-qbcore': { 6 | label: "Standard QBCore" 7 | } 8 | }; 9 | 10 | var PressedBackground = null; 11 | var PressedBackgroundObject = null; 12 | var OldBackground = null; 13 | var IsChecked = null; 14 | 15 | $(document).on('click', '.settings-app-tab', function(e){ 16 | e.preventDefault(); 17 | var PressedTab = $(this).data("settingstab"); 18 | 19 | if (PressedTab == "background") { 20 | QB.Phone.Animations.TopSlideDown(".settings-"+PressedTab+"-tab", 200, 0); 21 | QB.Phone.Settings.OpenedTab = PressedTab; 22 | } else if (PressedTab == "profilepicture") { 23 | QB.Phone.Animations.TopSlideDown(".settings-"+PressedTab+"-tab", 200, 0); 24 | QB.Phone.Settings.OpenedTab = PressedTab; 25 | } else if (PressedTab == "numberrecognition") { 26 | var checkBoxes = $(".numberrec-box"); 27 | QB.Phone.Data.AnonymousCall = !checkBoxes.prop("checked"); 28 | checkBoxes.prop("checked", QB.Phone.Data.AnonymousCall); 29 | 30 | if (!QB.Phone.Data.AnonymousCall) { 31 | $("#numberrecognition > p").html('Off'); 32 | } else { 33 | $("#numberrecognition > p").html('On'); 34 | } 35 | } 36 | }); 37 | 38 | 39 | $(document).on( 40 | "click", 41 | "#phoneNumberSelect, #serialNumberSelect", 42 | function (e) { 43 | // Get the title of the clicked element 44 | var title = ""; 45 | if ($(this).attr("id") == "phoneNumberSelect") { 46 | title = "Phone Number"; 47 | } else { 48 | title = "Serial Number"; 49 | } 50 | 51 | // get the result id of myPhoneNumber or mySerialNumber 52 | var textToCopy = 53 | $(this).attr("id") == "phoneNumberSelect" 54 | ? $("#myPhoneNumber").text() 55 | : $("#mySerialNumber").text(); 56 | 57 | // Copying the text to clipboard using Clipboard.js 58 | var clipboard = new ClipboardJS(this, { 59 | text: function () { 60 | QB.Phone.Notifications.Add( 61 | "fas fa-phone", 62 | "Copied " + title + "!", 63 | textToCopy 64 | ); 65 | return textToCopy; 66 | }, 67 | }); 68 | } 69 | ); 70 | 71 | $(document).on('click', '#accept-background', function(e){ 72 | e.preventDefault(); 73 | var hasCustomBackground = QB.Phone.Functions.IsBackgroundCustom(); 74 | 75 | if (hasCustomBackground === false) { 76 | QB.Phone.Notifications.Add("fas fa-paint-brush", "Settings", QB.Phone.Settings.Backgrounds[QB.Phone.Settings.Background].label+" is set!") 77 | QB.Phone.Animations.TopSlideUp(".settings-"+QB.Phone.Settings.OpenedTab+"-tab", 200, -100); 78 | $(".phone-background").css({"background-image":"url('/html/img/backgrounds/"+QB.Phone.Settings.Background+".png')"}) 79 | } else { 80 | QB.Phone.Notifications.Add("fas fa-paint-brush", "Settings", "Personal background set!") 81 | QB.Phone.Animations.TopSlideUp(".settings-"+QB.Phone.Settings.OpenedTab+"-tab", 200, -100); 82 | $(".phone-background").css({"background-image":"url('"+QB.Phone.Settings.Background+"')"}); 83 | } 84 | 85 | $.post('https://qb-phone/SetBackground', JSON.stringify({ 86 | background: QB.Phone.Settings.Background, 87 | })) 88 | }); 89 | 90 | QB.Phone.Functions.LoadMetaData = function(MetaData) { 91 | if (MetaData.background !== null && MetaData.background !== undefined) { 92 | QB.Phone.Settings.Background = MetaData.background; 93 | } else { 94 | QB.Phone.Settings.Background = "default-qbcore"; 95 | } 96 | 97 | var hasCustomBackground = QB.Phone.Functions.IsBackgroundCustom(); 98 | 99 | if (!hasCustomBackground) { 100 | $(".phone-background").css({"background-image":"url('/html/img/backgrounds/"+QB.Phone.Settings.Background+".png')"}) 101 | } else { 102 | $(".phone-background").css({"background-image":"url('"+QB.Phone.Settings.Background+"')"}); 103 | } 104 | 105 | if (MetaData.profilepicture == "default") { 106 | $("[data-settingstab='profilepicture']").find('.settings-tab-icon').html(''); 107 | } else { 108 | $("[data-settingstab='profilepicture']").find('.settings-tab-icon').html(''); 109 | } 110 | } 111 | 112 | $(document).on('click', '#cancel-background', function(e){ 113 | e.preventDefault(); 114 | QB.Phone.Animations.TopSlideUp(".settings-"+QB.Phone.Settings.OpenedTab+"-tab", 200, -100); 115 | }); 116 | 117 | QB.Phone.Functions.IsBackgroundCustom = function() { 118 | var retval = true; 119 | $.each(QB.Phone.Settings.Backgrounds, function(i, background){ 120 | if (QB.Phone.Settings.Background == i) { 121 | retval = false; 122 | } 123 | }); 124 | return retval 125 | } 126 | 127 | $(document).on('click', '.background-option', function(e){ 128 | e.preventDefault(); 129 | PressedBackground = $(this).data('background'); 130 | PressedBackgroundObject = this; 131 | OldBackground = $(this).parent().find('.background-option-current'); 132 | IsChecked = $(this).find('.background-option-current'); 133 | 134 | if (IsChecked.length === 0) { 135 | if (PressedBackground != "custom-background") { 136 | QB.Phone.Settings.Background = PressedBackground; 137 | $(OldBackground).fadeOut(50, function(){ 138 | $(OldBackground).remove(); 139 | }); 140 | $(PressedBackgroundObject).append('
'); 141 | } else { 142 | QB.Phone.Animations.TopSlideDown(".background-custom", 200, 13); 143 | } 144 | } 145 | }); 146 | 147 | $(document).on('click', '#accept-custom-background', function(e){ 148 | e.preventDefault(); 149 | 150 | QB.Phone.Settings.Background = $(".custom-background-input").val(); 151 | $(OldBackground).fadeOut(50, function(){ 152 | $(OldBackground).remove(); 153 | }); 154 | $(PressedBackgroundObject).append('
'); 155 | QB.Phone.Animations.TopSlideUp(".background-custom", 200, -23); 156 | }); 157 | 158 | $(document).on('click', '#cancel-custom-background', function(e){ 159 | e.preventDefault(); 160 | 161 | QB.Phone.Animations.TopSlideUp(".background-custom", 200, -23); 162 | }); 163 | 164 | // Profile Picture 165 | 166 | var PressedProfilePicture = null; 167 | var PressedProfilePictureObject = null; 168 | var OldProfilePicture = null; 169 | var ProfilePictureIsChecked = null; 170 | 171 | $(document).on('click', '#accept-profilepicture', function(e){ 172 | e.preventDefault(); 173 | var ProfilePicture = QB.Phone.Data.MetaData.profilepicture; 174 | if (ProfilePicture === "default") { 175 | QB.Phone.Notifications.Add("fas fa-paint-brush", "Settings", "Standard avatar set!") 176 | QB.Phone.Animations.TopSlideUp(".settings-"+QB.Phone.Settings.OpenedTab+"-tab", 200, -100); 177 | $("[data-settingstab='profilepicture']").find('.settings-tab-icon').html(''); 178 | } else { 179 | QB.Phone.Notifications.Add("fas fa-paint-brush", "Settings", "Personal avatar set!") 180 | QB.Phone.Animations.TopSlideUp(".settings-"+QB.Phone.Settings.OpenedTab+"-tab", 200, -100); 181 | $("[data-settingstab='profilepicture']").find('.settings-tab-icon').html(''); 182 | } 183 | $.post('https://qb-phone/UpdateProfilePicture', JSON.stringify({ 184 | profilepicture: ProfilePicture, 185 | })); 186 | }); 187 | 188 | $(document).on('click', '#accept-custom-profilepicture', function(e){ 189 | e.preventDefault(); 190 | QB.Phone.Data.MetaData.profilepicture = $(".custom-profilepicture-input").val(); 191 | $(OldProfilePicture).fadeOut(50, function(){ 192 | $(OldProfilePicture).remove(); 193 | }); 194 | $(PressedProfilePictureObject).append('
'); 195 | QB.Phone.Animations.TopSlideUp(".profilepicture-custom", 200, -23); 196 | }); 197 | 198 | $(document).on('click', '.profilepicture-option', function(e){ 199 | e.preventDefault(); 200 | PressedProfilePicture = $(this).data('profilepicture'); 201 | PressedProfilePictureObject = this; 202 | OldProfilePicture = $(this).parent().find('.profilepicture-option-current'); 203 | ProfilePictureIsChecked = $(this).find('.profilepicture-option-current'); 204 | if (ProfilePictureIsChecked.length === 0) { 205 | if (PressedProfilePicture != "custom-profilepicture") { 206 | QB.Phone.Data.MetaData.profilepicture = PressedProfilePicture 207 | $(OldProfilePicture).fadeOut(50, function(){ 208 | $(OldProfilePicture).remove(); 209 | }); 210 | $(PressedProfilePictureObject).append('
'); 211 | } else { 212 | QB.Phone.Animations.TopSlideDown(".profilepicture-custom", 200, 13); 213 | } 214 | } 215 | }); 216 | 217 | $(document).on('click', '#cancel-profilepicture', function(e){ 218 | e.preventDefault(); 219 | QB.Phone.Animations.TopSlideUp(".settings-"+QB.Phone.Settings.OpenedTab+"-tab", 200, -100); 220 | }); 221 | 222 | 223 | $(document).on('click', '#cancel-custom-profilepicture', function(e){ 224 | e.preventDefault(); 225 | QB.Phone.Animations.TopSlideUp(".profilepicture-custom", 200, -23); 226 | }); -------------------------------------------------------------------------------- /html/css/houses.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Lato&display=swap'); 2 | @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap'); 3 | 4 | .houses-app { 5 | display: none; 6 | height: 100%; 7 | width: 100%; 8 | background: rgb(36, 36, 36); 9 | overflow: hidden; 10 | } 11 | 12 | .houses-app-header { 13 | position: absolute; 14 | width: 100%; 15 | height: 5vh; 16 | top: 6vh; 17 | } 18 | 19 | .houses-app-header-tab { 20 | position: relative; 21 | float: left; 22 | width: 50%; 23 | height: 100%; 24 | text-align: center; 25 | line-height: 5vh; 26 | font-family: 'Poppins', sans-serif; 27 | transition: .075s linear; 28 | } 29 | 30 | .houses-app-header-tab > p { 31 | font-size: 1.5vh; 32 | color: rgba(255, 255, 255, 0.5); 33 | transition: .075s linear; 34 | } 35 | 36 | .houses-app-header-tab-selected { 37 | border-bottom: .3vh solid #c23616; 38 | } 39 | 40 | .houses-app-header-tab-selected > p { 41 | color: #ffffff; 42 | } 43 | 44 | .house-app-myhouses-container { 45 | position: absolute; 46 | width: 85%; 47 | height: 77%; 48 | margin: 0 auto; 49 | left: 0vw; 50 | right: 0; 51 | top: 12vh; 52 | overflow-x: hidden; 53 | overflow-y: scroll; 54 | } 55 | 56 | .house-app-myhouses-container::-webkit-scrollbar { 57 | display: none; 58 | } 59 | 60 | .house-app-mykeys-container { 61 | display: none; 62 | position: absolute; 63 | width: 85%; 64 | height: 77%; 65 | margin: 0 auto; 66 | left: 0vw; 67 | right: 0; 68 | top: 12vh; 69 | overflow-x: hidden; 70 | overflow-y: scroll; 71 | } 72 | 73 | .house-app-mykeys-container::-webkit-scrollbar { 74 | display: none; 75 | } 76 | 77 | .myhouses-house { 78 | position: relative; 79 | height: 7.5vh; 80 | width: 100%; 81 | transition: all 0.05s linear 0s; 82 | margin-bottom: 10px; 83 | background: rgba(23, 23, 23, 90%); 84 | border-radius: 0.15rem; 85 | box-shadow: 0rem 0rem 0.1rem 0.05rem #000000; 86 | } 87 | 88 | .myhouses-house:hover { 89 | background-color: #dc143c; 90 | } 91 | 92 | .myhouse-house-icon { 93 | position: absolute; 94 | height: 100%; 95 | width: 25%; 96 | text-align: center; 97 | } 98 | 99 | .myhouse-house-icon > i { 100 | text-align: center; 101 | line-height: 7.5vh; 102 | color: white; 103 | font-size: 1.7vh; 104 | } 105 | 106 | .myhouse-house-titel { 107 | position: absolute; 108 | left: 5.5vh; 109 | top: 1.7vh; 110 | color: white; 111 | font-family: 'Poppins', sans-serif; 112 | font-size: 1.2vh; 113 | } 114 | 115 | .myhouse-house-details { 116 | position: absolute; 117 | left: 5.5vh; 118 | bottom: 1.7vh; 119 | color: white; 120 | font-family: 'Poppins', sans-serif; 121 | font-size: 1.3vh; 122 | } 123 | 124 | .myhouse-house-details > i { 125 | font-size: 1vh; 126 | } 127 | 128 | .myhouses-options-container { 129 | display: none; 130 | position: absolute; 131 | top: 0; 132 | height: 100%; 133 | width: 100%; 134 | background-color: rgba(0, 0, 0, 0.5); 135 | } 136 | 137 | .myhouses-options { 138 | position: absolute; 139 | width: 80%; 140 | height: 50%; 141 | margin: 0 auto; 142 | left: 0vw; 143 | right: 0; 144 | background-color: rgb(36, 36, 36); 145 | border-radius: .5vh; 146 | box-shadow: 147 | inset 0 0 1vh .2vh rgba(0, 0, 0, 0.281), 148 | 0 0 1vh .2vh rgba(0, 0, 0, 0.253); 149 | top: 15vh; 150 | } 151 | 152 | .myhouses-options-header { 153 | position: absolute; 154 | width: 100%; 155 | height: 5vh; 156 | color: rgb(255 255 255); 157 | text-align: center; 158 | line-height: 5vh; 159 | font-family: 'Poppins', sans-serif; 160 | font-size: 1.8vh; 161 | border-bottom: .1vh solid rgba(0, 0, 0, 0.26); 162 | } 163 | 164 | .myhouses-option { 165 | position: relative; 166 | margin: 0 auto; 167 | margin-bottom: .8vh; 168 | width: 12vh; 169 | height: 5vh; 170 | color: white; 171 | font-family: 'Poppins', sans-serif; 172 | font-size: 1.5vh; 173 | border-radius: .3vh; 174 | top: 6vh; 175 | box-shadow: inset 0 0 1vh .2vh rgba(0, 0, 0, 0.05); 176 | text-align: center; 177 | line-height: 5vh; 178 | transition: .05s linear; 179 | } 180 | 181 | #myhouse-option-transfer { 182 | background-color: #0097e6; 183 | } 184 | 185 | #myhouse-option-transfer:hover { 186 | background-color: #00a8ff; 187 | } 188 | 189 | #myhouse-option-keys { 190 | background-color: #e1b12c; 191 | } 192 | 193 | #myhouse-option-keys:hover { 194 | background-color: #fbc531; 195 | } 196 | 197 | #myhouse-option-close { 198 | background-color: #c23616; 199 | } 200 | 201 | #myhouse-option-close:hover { 202 | background-color: #e84118; 203 | } 204 | 205 | #myhouse-option-transfer-confirm { 206 | background-color: #27ae60; 207 | } 208 | 209 | #myhouse-option-transfer-confirm:hover { 210 | background-color: #2ecc71; 211 | } 212 | 213 | #myhouse-option-transfer-back { 214 | background-color: #c23616; 215 | } 216 | 217 | #myhouse-option-transfer-back:hover { 218 | background-color: #e74c3c; 219 | } 220 | 221 | .myhouse-option-transfer-container { 222 | position: absolute; 223 | width: 80%; 224 | height: 50%; 225 | margin: 0 auto; 226 | left: 35vw; 227 | /* left: 0; */ 228 | right: 0; 229 | background-color: rgb(36, 36, 36); 230 | border-radius: .5vh; 231 | box-shadow: 232 | inset 0 0 1vh .2vh rgba(0, 0, 0, 0.281), 233 | 0 0 1vh .2vh rgba(0, 0, 0, 0.253); 234 | top: 15vh; 235 | } 236 | 237 | .myhouse-option-keys-container { 238 | position: absolute; 239 | width: 80%; 240 | height: 50%; 241 | margin: 0 auto; 242 | left: 35vw; 243 | right: 0; 244 | background-color: rgb(36, 36, 36); 245 | border-radius: .5vh; 246 | box-shadow: 247 | inset 0 0 1vh .2vh rgba(0, 0, 0, 0.281), 248 | 0 0 1vh .2vh rgba(0, 0, 0, 0.253); 249 | top: 15vh; 250 | } 251 | 252 | .myhouse-option-transfer-container-header { 253 | position: absolute; 254 | width: 100%; 255 | height: 5vh; 256 | color: rgb(255 255 255); 257 | text-align: center; 258 | line-height: 5vh; 259 | font-family: 'Poppins', sans-serif; 260 | font-size: 1.8vh; 261 | border-bottom: .1vh solid rgba(0, 0, 0, 0.26); 262 | } 263 | 264 | .myhouse-option-transfer-container-citizenid { 265 | position: absolute; 266 | margin: 0 auto; 267 | left: 0; 268 | right: 0; 269 | width: 80%; 270 | height: 5vh; 271 | top: 7.5vh; 272 | border: none; 273 | outline: none; 274 | font-family: 'Poppins', sans-serif; 275 | font-size: 1.8vh; 276 | text-indent: 1vh; 277 | color: black; 278 | background: rgb(255 255 255 / 63%); 279 | border-bottom: .3vh solid #c0392b; 280 | transition: .05s linear; 281 | } 282 | 283 | .myhouse-option-transfer-container-citizenid:focus { 284 | border-bottom: .3vh solid #e67e22; 285 | } 286 | 287 | .myhouse-option-transfer-container-citizenid:valid { 288 | border-bottom: .3vh solid #27ae60; 289 | } 290 | 291 | 292 | #myhouse-option-keys-back { 293 | top: 22vh; 294 | background-color: #c23616; 295 | } 296 | 297 | #myhouse-option-keys-back:hover { 298 | background-color: #e74c3c; 299 | } 300 | 301 | .keys-container { 302 | position: absolute; 303 | width: 20vh; 304 | height: 18vh; 305 | margin: 0 auto; 306 | left: 0; 307 | right: 0; 308 | top: 2vh; 309 | overflow-y: scroll; 310 | background-color: rgba(0, 0, 0, 0.1); 311 | } 312 | 313 | .keys-container::-webkit-scrollbar { 314 | display: none; 315 | } 316 | 317 | .house-key-holder { 318 | display: inline-block; 319 | max-width: 50%; 320 | white-space: nowrap; 321 | overflow: hidden !important; 322 | text-overflow: ellipsis; 323 | position: absolute; 324 | padding: 1.2vh; 325 | font-family: 'Poppins', sans-serif; 326 | font-size: 1.5vh; 327 | color: white; 328 | } 329 | 330 | .house-key { 331 | position: relative; 332 | width: 100%; 333 | height: 4.5vh; 334 | background-color: rgba(0, 0, 0, 0.7); 335 | transition: .05s ease-in-out; 336 | } 337 | 338 | .house-key-delete { 339 | position: absolute; 340 | right: 0; 341 | padding: 1.2vh; 342 | padding-right: 1.5vh; 343 | font-size: 1.5vh; 344 | color: white; 345 | transition: .05s ease-in-out; 346 | } 347 | 348 | .house-key:hover { 349 | background-color: rgba(0, 0, 0, 0.8); 350 | } 351 | 352 | .house-key-delete:hover { 353 | color: rgb(201, 53, 53); 354 | } 355 | 356 | @-webkit-keyframes spaceboots { 357 | 0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 358 | 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); } 359 | 20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); } 360 | 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } 361 | 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); } 362 | 50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); } 363 | 60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); } 364 | 70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); } 365 | 80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); } 366 | 90% { -webkit-transform: translate(2px, 2px) rotate(0deg); } 367 | 100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); } 368 | } 369 | .shake { 370 | display: inline-block; 371 | -webkit-animation-name: spaceboots; 372 | -webkit-animation-duration: 0.4s; 373 | -moz-transform-origin: 50% 50%; 374 | -ms-transform-origin: 50% 50%; 375 | -o-transform-origin: 50% 50%; 376 | -webkit-transform-origin: 50% 50%; 377 | transform-origin: 50% 50%; 378 | -webkit-animation-iteration-count: infinite; 379 | -webkit-animation-timing-function: linear 380 | } 381 | 382 | .mykeys-key { 383 | position: relative; 384 | width: 100%; 385 | height: 7vh; 386 | margin-bottom: 10px; 387 | transition: 0.1s ease; 388 | background: rgba(23, 23, 23, 90%); 389 | border-radius: 0.15rem; 390 | box-shadow: 0rem 0rem 0.1rem 0.05rem #000000; 391 | } 392 | 393 | .mykeys-key:hover { 394 | background-color: #dc143c; 395 | } 396 | 397 | .mykeys-key-label { 398 | position: absolute; 399 | top: 0; 400 | left: 0; 401 | color: white; 402 | font-family: 'Poppins', sans-serif; 403 | font-size: 1.3vh; 404 | margin: 1vh; 405 | } 406 | 407 | .mykeys-key-sub { 408 | position: absolute; 409 | bottom: 0; 410 | left: 0; 411 | color: white; 412 | font-family: 'Poppins', sans-serif; 413 | font-size: 1.2vh; 414 | margin: 1vh; 415 | } 416 | -------------------------------------------------------------------------------- /html/css/mail.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap'); 2 | 3 | .mail-app { 4 | display: none; 5 | height: 100%; 6 | width: 100%; 7 | background: rgb(36, 36, 36); 8 | overflow: hidden; 9 | } 10 | 11 | .mail-home { 12 | position: relative; 13 | left: 0; 14 | } 15 | 16 | .mail-header { 17 | display: block; 18 | height: 14vh; 19 | width: 100%; 20 | background: rgb(36, 36, 36); 21 | } 22 | 23 | #mail-header-text { 24 | position: absolute; 25 | top: 5vh; 26 | left: 12vh; 27 | font-family: 'Poppins', sans-serif; 28 | font-size: 1.5vh; 29 | color: white; 30 | } 31 | 32 | #mail-header-mail { 33 | position: absolute; 34 | top: 7vh; 35 | left: 6vh; 36 | font-family: 'Poppins', sans-serif; 37 | font-size: 1.3vh; 38 | color: white; 39 | } 40 | 41 | #mail-header-lastsync { 42 | position: absolute; 43 | top: 10vh; 44 | right: 1.5vh; 45 | font-family: 'Poppins', sans-serif; 46 | font-size: 1vh; 47 | color: white; 48 | } 49 | 50 | .mail-list { 51 | position: absolute; 52 | width: 99%; 53 | height: 44.7vh; 54 | top: 12vh; 55 | left: .1vh; 56 | overflow-x: hidden !important; 57 | overflow-y: scroll; 58 | } 59 | 60 | .mail-list::-webkit-scrollbar { 61 | display: none; 62 | } 63 | 64 | .mail { 65 | position: relative; 66 | height: 7.5vh; 67 | width: 90%; 68 | left: 15px; 69 | margin-top: 2px; 70 | margin-bottom: 10px; 71 | transition: .05s ease-in-out; 72 | background: rgba(23, 23, 23, 90%); 73 | border-radius: 0.15rem; 74 | box-shadow: 0rem 0rem 0.1rem 0.05rem #000000; 75 | } 76 | 77 | .mail:hover { 78 | background-color: #dc143c; 79 | transition: .05s ease-in-out; 80 | } 81 | 82 | .mail-sender { 83 | position: absolute; 84 | font-family: 'Poppins', sans-serif; 85 | font-size: 1.6vh; 86 | color: white; 87 | left: 0.5vh; 88 | top: 1vh; 89 | } 90 | 91 | .mail-text { 92 | position: absolute; 93 | top: 3.3vh; 94 | left: 0.5vh; 95 | font-family: 'Poppins', sans-serif; 96 | font-size: 1.15vh; 97 | color: white; 98 | max-width: 18vh; 99 | width: 16vh; 100 | } 101 | .mail-text > p { 102 | white-space: nowrap; 103 | display:inline-block; 104 | overflow: hidden; 105 | text-overflow: ellipsis; 106 | -webkit-line-clamp: 2; 107 | display: -webkit-box; 108 | -webkit-box-orient: vertical; 109 | white-space: normal; 110 | } 111 | 112 | .mail-time { 113 | position: absolute; 114 | font-family: 'Poppins', sans-serif; 115 | font-size: 1.1vh; 116 | color: white; 117 | right: 0.5vh; 118 | top: 1vh; 119 | } 120 | 121 | .opened-mail { 122 | position: absolute; 123 | height: 100%; 124 | width: 100%; 125 | background: rgb(36, 36, 36); 126 | overflow: hidden; 127 | top: 0; 128 | left: -30vh; 129 | } 130 | 131 | .opened-mail-header { 132 | display: block; 133 | height: 14vh; 134 | width: 100%; 135 | } 136 | 137 | .mail-back { 138 | position: absolute; 139 | top: 5.5vh; 140 | left: 1.9vh; 141 | } 142 | 143 | .mail-back > i { 144 | color: white; 145 | font-size: 2vh; 146 | transition: .05s ease-in-out; 147 | } 148 | 149 | .mail-back:hover #mail-back { 150 | color: #dc143c; 151 | transition: .05s ease-in-out; 152 | } 153 | 154 | .mail-subject { 155 | position: absolute; 156 | color: white; 157 | top: 8vh; 158 | left: 2vh; 159 | font-family: 'Poppins', sans-serif; 160 | font-size: 1.8vh; 161 | max-width: 22vh; 162 | } 163 | 164 | .mail-subject > p { 165 | white-space: nowrap; 166 | overflow: hidden; 167 | text-overflow: ellipsis; 168 | } 169 | 170 | .mail-date { 171 | position: absolute; 172 | top: 13vh; 173 | left: 2vh; 174 | font-family: 'Poppins', sans-serif; 175 | font-size: 1.1vh; 176 | color: white; 177 | } 178 | 179 | .mail-spacing { 180 | position: absolute; 181 | width: 93%; 182 | background-color: white; 183 | height: .2vh; 184 | top: 15.5vh; 185 | margin: 0 auto; 186 | left: 0; 187 | right: 0; 188 | border-radius: 20vh; 189 | } 190 | 191 | .mail-content { 192 | position: absolute; 193 | height: calc(100% - 250px); 194 | top: 17.3vh; 195 | left: 2vh; 196 | font-family: 'Poppins', sans-serif; 197 | font-size: 1.3vh; 198 | color: white; 199 | max-width: 23vh; 200 | overflow-y: scroll; 201 | } 202 | .mail-content::-webkit-scrollbar { 203 | display: none; 204 | } 205 | .mail-content > p { 206 | white-space: nowrap; 207 | display:inline-block; 208 | overflow: hidden; 209 | text-overflow: ellipsis; 210 | -webkit-line-clamp: 100; 211 | display: -webkit-box; 212 | -webkit-box-orient: vertical; 213 | white-space: normal; 214 | } 215 | 216 | .opened-mail-footer { 217 | position: absolute; 218 | width: 100%; 219 | height: 4vh; 220 | bottom: 40px; 221 | } 222 | 223 | .opened-mail-footer-item { 224 | position: relative; 225 | width: 50%; 226 | height: 4vh; 227 | text-align: center; 228 | line-height: 4.3vh; 229 | color: white; 230 | font-size: 1.8vh; 231 | transition: .1s ease-in-out; 232 | float: left; 233 | } 234 | 235 | .opened-mail-footer-item:hover { 236 | color: #dc143c; 237 | } 238 | 239 | .opened-mail-footer-item:hover .mail-icon { 240 | font-size: 1.9vh; 241 | transition: .1s ease-in-out; 242 | animation: Shake 1s infinite; 243 | } 244 | 245 | @keyframes Shake { 246 | 0% { 247 | transform: rotate(0deg); 248 | } 249 | 25% { 250 | transform: rotate(-5deg); 251 | } 252 | 50% { 253 | transform: rotate(5deg); 254 | } 255 | 75% { 256 | transform: rotate(-5deg); 257 | } 258 | 100% { 259 | transform: rotate(5deg); 260 | } 261 | } 262 | 263 | /* Advert App */ 264 | 265 | .advert-app { 266 | display: none; 267 | height: 100%; 268 | width: 100%; 269 | background: rgb(36, 36, 36); 270 | overflow: hidden; 271 | } 272 | 273 | .advert-header { 274 | position: absolute; 275 | width: 100%; 276 | height: 10vh; 277 | top: 0; 278 | } 279 | 280 | #advert-header-text { 281 | position: absolute; 282 | top: 6vh; 283 | left: 8vh; 284 | font-family: 'Poppins', sans-serif; 285 | font-size: 1.8vh; 286 | color: white; 287 | } 288 | 289 | #advert-header-name { 290 | position: absolute; 291 | top: 9vh; 292 | left: 6vh; 293 | font-family: 'Poppins', sans-serif; 294 | font-size: 1.4vh; 295 | color: white; 296 | } 297 | 298 | .advert-list { 299 | position: absolute; 300 | width: 99%; 301 | height: 39.5vh; 302 | top: 12vh; 303 | left: .1vh; 304 | overflow-x: hidden !important; 305 | overflow-y: scroll; 306 | } 307 | 308 | .advert-list::-webkit-scrollbar { 309 | display: none; 310 | } 311 | .advert { 312 | position: relative; 313 | background-color: #ff8f1a; 314 | height: auto; 315 | min-height: 4vh; 316 | width: 90%; 317 | transition: .05s ease-in-out; 318 | margin: 0 auto; 319 | margin-top: 2vh; 320 | margin-bottom: 2vh; 321 | border-radius: 0.15rem; 322 | text-align: center; 323 | } 324 | 325 | .advert > p { 326 | margin-top: 1.5vh; 327 | font-family: 'Poppins', sans-serif; 328 | max-width: 25vh; 329 | color: black; 330 | font-weight: bolder; 331 | } 332 | 333 | .advert:hover { 334 | background-color: rgb(255, 154, 46); 335 | transition: .05s ease-in-out; 336 | } 337 | 338 | .advert-sender { 339 | position: relative; 340 | top: .8vh; 341 | color: black; 342 | font-weight: bolder; 343 | font-family: 'Poppins', sans-serif; 344 | font-size: 1.3vh; 345 | } 346 | 347 | .test-slet { 348 | position: absolute; 349 | width: 100%; 350 | height: 4.2vh; 351 | top: 52.6vh; 352 | transition: .1s ease-in-out; 353 | text-align: center; 354 | line-height: 4.2vh; 355 | font-size: 2.3vh; 356 | color: white; 357 | background-color: rgb(36, 36, 36); 358 | } 359 | 360 | .test-slet:hover { 361 | transition: .1s ease-in-out; 362 | } 363 | 364 | .test-slet:hover .test-icon { 365 | color: #ff8f1a; 366 | transition: .1s ease-in-out; 367 | animation: Shake 1s infinite; 368 | } 369 | 370 | .new-advert { 371 | position: absolute; 372 | display: block; 373 | height: 100%; 374 | width: 100%; 375 | top: 0; 376 | background: rgb(36, 36, 36); 377 | overflow: hidden; 378 | left: -30vh; 379 | } 380 | 381 | .new-advert-footer { 382 | position: absolute; 383 | bottom: 50px; 384 | width: 100%; 385 | height: 5vh; 386 | } 387 | 388 | .new-advert-footer-item { 389 | position: relative; 390 | float: left; 391 | width: 33%; 392 | height: 100%; 393 | text-align: center; 394 | line-height: 5vh; 395 | font-size: 2.2vh; 396 | transition: .1s linear; 397 | color: white; 398 | } 399 | 400 | .new-advert-footer-item:hover { 401 | transition: .1s linear; 402 | } 403 | 404 | .new-advert-footer-item:hover .new-advert-icon { 405 | color: #ff8f1a; 406 | animation: Shake 1s infinite; 407 | } 408 | 409 | .new-advert-header { 410 | position: absolute; 411 | width: 100%; 412 | height: 10vh; 413 | top: 0; 414 | } 415 | 416 | #new-advert-header-text { 417 | position: absolute; 418 | top: 6vh; 419 | left: 6vh; 420 | font-family: 'Poppins', sans-serif; 421 | font-size: 1.8vh; 422 | color: white; 423 | } 424 | 425 | #advert-new-url{ 426 | position: absolute; 427 | height: 4vh; 428 | margin: 0 auto; 429 | left: 0; 430 | right: 0; 431 | background-color: rgba(23, 23, 23, 90%); 432 | outline: none; 433 | resize: none; 434 | font-family: 'Poppins', sans-serif; 435 | padding: 0.87vh; 436 | font-size: 1.4vh; 437 | top: 45vh; 438 | width: 22vh; 439 | border-radius: 7px; 440 | color: white; 441 | border: 2px solid rgb(255, 154, 46); 442 | } 443 | 444 | #advert-new-url::-webkit-scrollbar { 445 | display: none; 446 | } 447 | 448 | .new-advert-textarea { 449 | position: absolute; 450 | margin: 0 auto; 451 | left: 0; 452 | color: white; 453 | right: 0; 454 | top: 12vh; 455 | height: 30vh; 456 | width: 80%; 457 | outline: none; 458 | resize: none; 459 | border-radius: 7px; 460 | border: 2px solid rgb(255, 154, 46); 461 | background-color: rgba(23, 23, 23, 90%); 462 | padding: 1.5vh; 463 | font-family: 'Poppins', sans-serif; 464 | transition: .1s linear; 465 | } 466 | 467 | .advert-home { 468 | position: relative; 469 | left: 0; 470 | } 471 | 472 | .nomails { 473 | text-align: center; 474 | color: white; 475 | font-family: 'Poppins', sans-serif; 476 | font-size: 1.5vh; 477 | line-height: 20vh; 478 | } -------------------------------------------------------------------------------- /html/js/bank.js: -------------------------------------------------------------------------------- 1 | var FoccusedBank = null; 2 | 3 | $(document).on('click', '.bank-app-account', function(e){ 4 | var copyText = document.getElementById("iban-account"); 5 | copyText.select(); 6 | copyText.setSelectionRange(0, 99999); 7 | document.execCommand("copy"); 8 | 9 | QB.Phone.Notifications.Add("fas fa-university", "QBank", "Account number. copied!", "#badc58", 1750); 10 | }); 11 | 12 | var CurrentTab = "accounts"; 13 | 14 | $(document).on('click', '.bank-app-header-button', function(e){ 15 | e.preventDefault(); 16 | 17 | var PressedObject = this; 18 | var PressedTab = $(PressedObject).data('headertype'); 19 | 20 | if (CurrentTab != PressedTab) { 21 | var PreviousObject = $(".bank-app-header").find('[data-headertype="'+CurrentTab+'"]'); 22 | 23 | if (PressedTab == "invoices") { 24 | $(".bank-app-"+CurrentTab).animate({ 25 | left: -30+"vh" 26 | }, 250, function(){ 27 | $(".bank-app-"+CurrentTab).css({"display":"none"}) 28 | }); 29 | $(".bank-app-"+PressedTab).css({"display":"block"}).animate({ 30 | left: 0+"vh" 31 | }, 250); 32 | } else if (PressedTab == "accounts") { 33 | $(".bank-app-"+CurrentTab).animate({ 34 | left: 30+"vh" 35 | }, 250, function(){ 36 | $(".bank-app-"+CurrentTab).css({"display":"none"}) 37 | }); 38 | $(".bank-app-"+PressedTab).css({"display":"block"}).animate({ 39 | left: 0+"vh" 40 | }, 250); 41 | } 42 | 43 | $(PreviousObject).removeClass('bank-app-header-button-selected'); 44 | $(PressedObject).addClass('bank-app-header-button-selected'); 45 | setTimeout(function(){ CurrentTab = PressedTab; }, 300) 46 | } 47 | }) 48 | 49 | QB.Phone.Functions.DoBankOpen = function() { 50 | QB.Phone.Data.PlayerData.money.bank = (QB.Phone.Data.PlayerData.money.bank).toFixed(); 51 | $(".bank-app-account-number").val(QB.Phone.Data.PlayerData.charinfo.account); 52 | $(".bank-app-account-balance").html("$ "+QB.Phone.Data.PlayerData.money.bank); 53 | $(".bank-app-account-balance").data('balance', QB.Phone.Data.PlayerData.money.bank); 54 | 55 | $(".bank-app-loaded").css({"display":"none", "padding-left":"30vh"}); 56 | $(".bank-app-accounts").css({"left":"30vh"}); 57 | $(".qbank-logo").css({"left": "0vh"}); 58 | $("#qbank-text").css({"opacity":"0.0", "left":"9vh"}); 59 | $(".bank-app-loading").css({ 60 | "display":"block", 61 | "left":"0vh", 62 | }); 63 | setTimeout(function(){ 64 | CurrentTab = "accounts"; 65 | $(".qbank-logo").animate({ 66 | left: -12+"vh" 67 | }, 500); 68 | setTimeout(function(){ 69 | $("#qbank-text").animate({ 70 | opacity: 1.0, 71 | left: 14+"vh" 72 | }); 73 | }, 100); 74 | setTimeout(function(){ 75 | $(".bank-app-loaded").css({"display":"block"}).animate({"padding-left":"0"}, 300); 76 | $(".bank-app-accounts").animate({left:0+"vh"}, 300); 77 | $(".bank-app-loading").animate({ 78 | left: -30+"vh" 79 | },300, function(){ 80 | $(".bank-app-loading").css({"display":"none"}); 81 | }); 82 | }, 1500) 83 | }, 500) 84 | } 85 | 86 | $(document).on('click', '.bank-app-account-actions', function(e){ 87 | QB.Phone.Animations.TopSlideDown(".bank-app-transfer", 400, 0); 88 | }); 89 | 90 | $(document).on('click', '#cancel-transfer', function(e){ 91 | e.preventDefault(); 92 | 93 | QB.Phone.Animations.TopSlideUp(".bank-app-transfer", 400, -100); 94 | }); 95 | 96 | $(document).on('click', '#accept-transfer', function(e){ 97 | e.preventDefault(); 98 | 99 | var iban = $("#bank-transfer-iban").val(); 100 | var amount = $("#bank-transfer-amount").val(); 101 | var amountData = $(".bank-app-account-balance").data('balance'); 102 | 103 | if (iban != "" && amount != "") { 104 | $.post('https://qb-phone/CanTransferMoney', JSON.stringify({ 105 | sendTo: iban, 106 | amountOf: amount, 107 | }), function(data){ 108 | if (data.TransferedMoney) { 109 | $("#bank-transfer-iban").val(""); 110 | $("#bank-transfer-amount").val(""); 111 | 112 | $(".bank-app-account-balance").html("$ " + (data.NewBalance).toFixed(0)); 113 | $(".bank-app-account-balance").data('balance', (data.NewBalance).toFixed(0)); 114 | QB.Phone.Notifications.Add("fas fa-university", "QBank", "You have transfered $ "+amount+"!", "#badc58", 1500); 115 | } else { 116 | QB.Phone.Notifications.Add("fas fa-university", "QBank", "You don't have enough balance!", "#badc58", 1500); 117 | } 118 | QB.Phone.Animations.TopSlideUp(".bank-app-transfer", 400, -100); 119 | }); 120 | } else { 121 | QB.Phone.Notifications.Add("fas fa-university", "QBank", "Fill out all fields!", "#badc58", 1750); 122 | } 123 | }); 124 | 125 | GetInvoiceLabel = function(type) { 126 | retval = null; 127 | if (type == "request") { 128 | retval = "Payment Request"; 129 | } 130 | 131 | return retval 132 | } 133 | 134 | $(document).on('click', '.pay-invoice', function(event){ 135 | event.preventDefault(); 136 | 137 | var InvoiceId = $(this).parent().parent().parent().attr('id'); 138 | var InvoiceData = $("#"+InvoiceId).data('invoicedata'); 139 | var BankBalance = $(".bank-app-account-balance").data('balance'); 140 | 141 | if (BankBalance >= InvoiceData.amount) { 142 | $.post('https://qb-phone/PayInvoice', JSON.stringify({ 143 | sender: InvoiceData.sender, 144 | amount: InvoiceData.amount, 145 | society: InvoiceData.society, 146 | invoiceId: InvoiceData.id, 147 | senderCitizenId: InvoiceData.sendercitizenid 148 | }), function(CanPay){ 149 | if (CanPay) { 150 | $("#"+InvoiceId).animate({ 151 | left: 30+"vh", 152 | }, 300, function(){ 153 | setTimeout(function(){ 154 | $("#"+InvoiceId).remove(); 155 | }, 100); 156 | }); 157 | QB.Phone.Notifications.Add("fas fa-university", "QBank", "You have paid $"+InvoiceData.amount+"!", "#badc58", 1500); 158 | var amountData = $(".bank-app-account-balance").data('balance'); 159 | var NewAmount = (amountData - InvoiceData.amount).toFixed(); 160 | $("#bank-transfer-amount").val(NewAmount); 161 | $(".bank-app-account-balance").data('balance', NewAmount); 162 | } else { 163 | QB.Phone.Notifications.Add("fas fa-university", "QBank", "You don't have enough balance!", "#badc58", 1500); 164 | } 165 | }); 166 | } else { 167 | QB.Phone.Notifications.Add("fas fa-university", "QBank", "You don't have enough balance!", "#badc58", 1500); 168 | } 169 | }); 170 | 171 | $(document).on('click', '.decline-invoice', async function(event) { 172 | event.preventDefault(); 173 | var InvoiceId = $(this).parent().parent().parent().attr('id'); 174 | var InvoiceData = $("#"+InvoiceId).data('invoicedata'); 175 | 176 | const resp = await $.post('https://qb-phone/DeclineInvoice', JSON.stringify({ 177 | sender: InvoiceData.sender, 178 | amount: InvoiceData.amount, 179 | society: InvoiceData.society, 180 | invoiceId: InvoiceData.id, 181 | })); 182 | if(resp === true) { 183 | QB.Phone.Notifications.Add("fas fa-university", "QBank", "You declined the invoice", "#8c7ae6") 184 | $("#"+InvoiceId).animate({ 185 | left: 30+"vh", 186 | }, 300, function(){ 187 | setTimeout(function(){ 188 | $("#"+InvoiceId).remove(); 189 | }, 100); 190 | }); 191 | } else { 192 | QB.Phone.Notifications.Add("fas fa-university", "QBank", "Couldnt decline this invoice...", "#8c7ae6") 193 | } 194 | }); 195 | 196 | QB.Phone.Functions.LoadBankInvoices = function(invoices) { 197 | if (invoices !== null) { 198 | $(".bank-app-invoices-list").html(""); 199 | 200 | $.each(invoices, function(i, invoice){ 201 | var Elem = '
'+invoice.society+' (Sender: '+invoice.sender+')
' + (typeof invoice.reason === 'string' ? `
${invoice.reason}
` : '') + '
$ '+invoice.amount+'
'+ (invoice.candecline === 1 ? '' : '') + '
'; 202 | 203 | $(".bank-app-invoices-list").append(Elem); 204 | $("#invoiceid-"+invoice.id).data('invoicedata', invoice); 205 | }); 206 | } 207 | } 208 | 209 | QB.Phone.Functions.LoadContactsWithNumber = function(myContacts) { 210 | var ContactsObject = $(".bank-app-my-contacts-list"); 211 | $(ContactsObject).html(""); 212 | var TotalContacts = 0; 213 | 214 | $("#bank-app-my-contact-search").on("keyup", function() { 215 | var value = $(this).val().toLowerCase(); 216 | $(".bank-app-my-contacts-list .bank-app-my-contact").filter(function() { 217 | $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1); 218 | }); 219 | }); 220 | 221 | if (myContacts !== null) { 222 | $.each(myContacts, function(i, contact){ 223 | var RandomNumber = Math.floor(Math.random() * 6); 224 | var ContactColor = QB.Phone.ContactColors[RandomNumber]; 225 | var ContactElement = '
'+((contact.name).charAt(0)).toUpperCase()+'
'+contact.name+'
' 226 | TotalContacts = TotalContacts + 1 227 | $(ContactsObject).append(ContactElement); 228 | $("[data-bankcontactid='"+i+"']").data('contactData', contact); 229 | }); 230 | } 231 | }; 232 | 233 | $(document).on('click', '.bank-app-my-contacts-list-back', function(e){ 234 | e.preventDefault(); 235 | 236 | QB.Phone.Animations.TopSlideUp(".bank-app-my-contacts", 400, -100); 237 | }); 238 | 239 | $(document).on('click', '.bank-transfer-mycontacts-icon', function(e){ 240 | e.preventDefault(); 241 | 242 | QB.Phone.Animations.TopSlideDown(".bank-app-my-contacts", 400, 0); 243 | }); 244 | 245 | $(document).on('click', '.bank-app-my-contact', function(e){ 246 | e.preventDefault(); 247 | var PressedContactData = $(this).data('contactData'); 248 | 249 | if (PressedContactData.iban !== "" && PressedContactData.iban !== undefined && PressedContactData.iban !== null) { 250 | $("#bank-transfer-iban").val(PressedContactData.iban); 251 | } else { 252 | QB.Phone.Notifications.Add("fas fa-university", "QBank", "There is no bank account attached to this number!", "#badc58", 2500); 253 | } 254 | QB.Phone.Animations.TopSlideUp(".bank-app-my-contacts", 400, -100); 255 | }); -------------------------------------------------------------------------------- /html/css/settings.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap'); 2 | 3 | .settings-app { 4 | display: none; 5 | height: 100%; 6 | width: 100%; 7 | background: rgba(36, 36, 36, 90%); 8 | overflow: hidden; 9 | } 10 | 11 | .settings-app-header { 12 | position: relative; 13 | font-family: 'Poppins', sans-serif; 14 | font-size: 3vh; 15 | text-align: center; 16 | top: 70px; 17 | color: white; 18 | } 19 | 20 | .settings-app-tab-appereance { 21 | position: absolute; 22 | top: 15vh; 23 | height: 100%; 24 | width: 100%; 25 | } 26 | 27 | .settings-app-tab-information { 28 | position: absolute; 29 | top: 30vh; 30 | height: 100%; 31 | width: 100%; 32 | } 33 | 34 | .settings-app-tab { 35 | position: relative; 36 | width: 90%; 37 | border-radius: 0.15rem; 38 | height: 6vh; 39 | margin-bottom: 10px; 40 | color: white; 41 | background: rgba(23, 23, 23, 90%); 42 | left: 15px; 43 | box-shadow: 0rem 0rem 0.1rem 0.05rem #000000; 44 | } 45 | 46 | .settings-app-tab:hover { 47 | background-color: #dc143c; 48 | transition: .5s ease; 49 | } 50 | 51 | .settings-app-tab-header { 52 | position: absolute; 53 | top: -2.5vh; 54 | height: 2.6vh; 55 | font-family: 'Poppins', sans-serif; 56 | font-size: 1.5vh; 57 | border-bottom: 1px solid rgba(0, 0, 0, 0.17); 58 | width: 100%; 59 | } 60 | 61 | .settings-app-tab-header > p { 62 | padding-left: 1vh; 63 | } 64 | 65 | .settings-tab-icon { 66 | position: absolute; 67 | left: 2vh; 68 | top: 1.5vh; 69 | font-size: 2.3vh; 70 | } 71 | 72 | .settings-tab-icon > img { 73 | position: absolute; 74 | width: 3.3vh; 75 | height: 3.3vh; 76 | border-radius: 50%; 77 | box-shadow: 0 0 .5vh 0 rgba(0, 0, 0, 0.05); 78 | margin-left: -.3vh; 79 | } 80 | 81 | .settings-tab-title { 82 | position: absolute; 83 | left: 6.2vh; 84 | top: 1.2vh; 85 | font-size: 1.3vh; 86 | font-family: 'Poppins', sans-serif; 87 | } 88 | 89 | .settings-tab-description { 90 | position: absolute; 91 | left: 6.2vh; 92 | top: 3.2vh; 93 | font-size: 1.2vh; 94 | font-family: 'Poppins', sans-serif; 95 | color: white; 96 | } 97 | 98 | .settings-background-tab { 99 | display: block; 100 | position: absolute; 101 | top: -100%; 102 | height: 100%; 103 | width: 100%; 104 | left: 0; 105 | right: 0; 106 | background: rgb(36, 36, 36); 107 | } 108 | 109 | .settings-profilepicture-tab { 110 | display: block; 111 | position: absolute; 112 | top: -100%; 113 | height: 100%; 114 | width: 100%; 115 | left: 0; 116 | right: 0; 117 | background: rgb(36, 36, 36); 118 | } 119 | 120 | .background-options { 121 | position: absolute; 122 | height: 50%; 123 | width: 100%; 124 | top: 13vh; 125 | } 126 | 127 | .background-option { 128 | position: relative; 129 | width: 90%; 130 | border-radius: 0.15rem; 131 | height: 6vh; 132 | margin-bottom: 10px; 133 | color: white; 134 | background: rgba(23, 23, 23, 90%); 135 | left: 15px; 136 | box-shadow: 0rem 0rem 0.1rem 0.05rem #000000; 137 | } 138 | 139 | .background-option:hover { 140 | background-color: #dc143c; 141 | transition: .5s ease; 142 | } 143 | 144 | .background-option-icon { 145 | position: absolute; 146 | height: 100%; 147 | width: 6vh; 148 | text-align: center; 149 | line-height: 7vh; 150 | font-size: 2.3vh; 151 | color: #fbc531; 152 | } 153 | 154 | .background-option-title { 155 | position: absolute; 156 | left: 6vh; 157 | top: 1.5vh; 158 | text-align: center; 159 | font-size: 1vh; 160 | color: white; 161 | font-size: 1.3vh; 162 | font-family: 'Poppins', sans-serif; 163 | } 164 | 165 | .background-option-description { 166 | position: absolute; 167 | left: 6vh; 168 | top: 3.6vh; 169 | text-align: center; 170 | font-size: 1vh; 171 | color: white; 172 | font-size: 1.1vh; 173 | font-family: 'Poppins', sans-serif; 174 | } 175 | 176 | .background-option-current { 177 | position: absolute; 178 | right: 3vh; 179 | top: 2.5vh; 180 | text-align: center; 181 | font-size: 1.6vh; 182 | color: green; 183 | font-family: 'Poppins', sans-serif; 184 | } 185 | 186 | .background-buttons { 187 | position: absolute; 188 | bottom: 40px; 189 | height: 5vh; 190 | width: 100%; 191 | } 192 | 193 | .background-button { 194 | position: relative; 195 | float: left; 196 | height: 100%; 197 | width: 50%; 198 | text-align: center; 199 | line-height: 4.7vh; 200 | color: white; 201 | font-family: 'Poppins', sans-serif; 202 | font-size: 1.5vh; 203 | transition: .05s; 204 | } 205 | 206 | .background-button:hover { 207 | border-top: .3vh solid #dc143c; 208 | } 209 | 210 | .background-custom { 211 | display: none; 212 | position: absolute; 213 | height: 40%; 214 | width: 80%; 215 | background-color: rgb(245, 245, 245); 216 | box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.247); 217 | margin: 0 auto; 218 | left: 0; 219 | right: 0; 220 | top: -23vh; 221 | border-radius: 2vh; 222 | overflow: hidden; 223 | } 224 | 225 | .background-custom-title { 226 | font-family: 'Poppins', sans-serif; 227 | padding: 2vh; 228 | font-size: 1.5vh; 229 | text-align: center; 230 | } 231 | 232 | .custom-background-input { 233 | position: absolute; 234 | left: 1vh; 235 | background: none; 236 | border: none; 237 | outline: none; 238 | height: 3.5vh; 239 | width: 21vh; 240 | font-family: 'Poppins', sans-serif; 241 | background: rgb(235, 235, 235); 242 | border-radius: 2vh; 243 | text-align: center; 244 | } 245 | 246 | .custom-background-input::placeholder { 247 | text-align: center; 248 | } 249 | 250 | .background-custom-buttons { 251 | position: absolute; 252 | bottom: 2vh; 253 | width: 100%; 254 | height: 5vh; 255 | } 256 | 257 | .custom-background-button { 258 | position: relative; 259 | float: left; 260 | height: 100%; 261 | width: 50%; 262 | text-align: center; 263 | line-height: 4.1vh; 264 | color: black; 265 | font-family: 'Poppins', sans-serif; 266 | font-size: 1.5vh; 267 | transition: .08s; 268 | border-bottom: 2px solid #e8421800; 269 | } 270 | 271 | .custom-background-button:hover { 272 | font-weight: bolder; 273 | color: #DC143C; 274 | } 275 | 276 | 277 | .profilepicture-options { 278 | position: absolute; 279 | height: 50%; 280 | width: 100%; 281 | top: 13vh; 282 | } 283 | 284 | .profilepicture-option { 285 | position: relative; 286 | width: 90%; 287 | border-radius: 0.15rem; 288 | height: 6vh; 289 | margin-bottom: 10px; 290 | color: white; 291 | background: rgba(23, 23, 23, 90%); 292 | left: 15px; 293 | box-shadow: 0rem 0rem 0.1rem 0.05rem #000000; 294 | } 295 | 296 | .profilepicture-option-icon { 297 | position: absolute; 298 | height: 100%; 299 | width: 6vh; 300 | text-align: center; 301 | line-height: 7vh; 302 | font-size: 2.3vh; 303 | color: #fbc531; 304 | } 305 | 306 | .profilepicture-option-title { 307 | position: absolute; 308 | left: 6vh; 309 | top: 1.5vh; 310 | text-align: center; 311 | font-size: 1vh; 312 | color: white; 313 | font-size: 1.3vh; 314 | font-family: 'Poppins', sans-serif; 315 | } 316 | 317 | .profilepicture-option-description { 318 | position: absolute; 319 | left: 6vh; 320 | top: 3.6vh; 321 | text-align: center; 322 | font-size: 1vh; 323 | color: white; 324 | font-size: 1.1vh; 325 | font-family: 'Poppins', sans-serif; 326 | } 327 | 328 | .profilepicture-option-current { 329 | position: absolute; 330 | right: 3vh; 331 | top: 2.5vh; 332 | text-align: center; 333 | font-size: 1.6vh; 334 | color: green; 335 | font-family: 'Poppins', sans-serif; 336 | } 337 | 338 | .profilepicture-buttons { 339 | position: absolute; 340 | bottom: 40px; 341 | height: 5vh; 342 | width: 100%; 343 | } 344 | 345 | .profilepicture-button { 346 | position: relative; 347 | float: left; 348 | height: 100%; 349 | width: 50%; 350 | text-align: center; 351 | line-height: 4.7vh; 352 | color: white; 353 | font-family: 'Poppins', sans-serif; 354 | font-size: 1.5vh; 355 | } 356 | 357 | .profilepicture-button:hover { 358 | border-top: .3vh solid #dc143c; 359 | } 360 | 361 | .profilepicture-custom { 362 | display: none; 363 | position: absolute; 364 | height: 40%; 365 | width: 80%; 366 | background-color: rgb(245, 245, 245); 367 | box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.247); 368 | margin: 0 auto; 369 | left: 0; 370 | right: 0; 371 | top: -23vh; 372 | border-radius: 2vh; 373 | overflow: hidden; 374 | } 375 | 376 | .profilepicture-custom-title { 377 | font-family: 'Poppins', sans-serif; 378 | padding: 2vh; 379 | font-size: 1.5vh; 380 | text-align: center; 381 | } 382 | 383 | .custom-profilepicture-input { 384 | position: absolute; 385 | left: 1vh; 386 | border: none; 387 | outline: none; 388 | height: 3.5vh; 389 | width: 21vh; 390 | font-family: 'Poppins', sans-serif; 391 | border-radius: 2vh; 392 | text-align: center; 393 | } 394 | 395 | .custom-profilepicture-input::placeholder { 396 | text-align: center; 397 | } 398 | 399 | .profilepicture-custom-buttons { 400 | position: absolute; 401 | bottom: 2vh; 402 | width: 100%; 403 | height: 5vh; 404 | } 405 | 406 | .custom-profilepicture-button { 407 | position: relative; 408 | float: left; 409 | height: 100%; 410 | width: 50%; 411 | text-align: center; 412 | line-height: 4.1vh; 413 | color: black; 414 | font-family: 'Poppins', sans-serif; 415 | font-size: 1.5vh; 416 | transition: .08s; 417 | border-bottom: 2px solid #e8421800; 418 | } 419 | 420 | .custom-profilepicture-button:hover { 421 | font-weight: bolder; 422 | color: #DC143C; 423 | } 424 | 425 | /* The switch - the box around the slider */ 426 | .switch { 427 | position: absolute; 428 | /* display: inline-block; */ 429 | width: 50px; 430 | height: 24px; 431 | top: 50%; 432 | right: 2vh; 433 | transform: translateY(-50%); 434 | } 435 | 436 | /* Hide default HTML checkbox */ 437 | .switch input { 438 | opacity: 0; 439 | width: 0; 440 | height: 0; 441 | } 442 | 443 | /* The slider */ 444 | .slider { 445 | position: absolute; 446 | cursor: pointer; 447 | top: 0; 448 | left: 0; 449 | right: 0; 450 | bottom: 0; 451 | background-color: #ccc; 452 | -webkit-transition: .4s; 453 | transition: .4s; 454 | } 455 | 456 | .slider:before { 457 | position: absolute; 458 | content: ""; 459 | height: 16px; 460 | width: 16px; 461 | left: 4px; 462 | bottom: 4px; 463 | background-color: white; 464 | -webkit-transition: .4s; 465 | transition: .4s; 466 | } 467 | 468 | input:checked + .slider { 469 | background-color: #2196F3; 470 | } 471 | 472 | input:focus + .slider { 473 | box-shadow: 0 0 1px #2196F3; 474 | } 475 | 476 | input:checked + .slider:before { 477 | -webkit-transform: translateX(26px); 478 | -ms-transform: translateX(26px); 479 | transform: translateX(26px); 480 | } 481 | 482 | /* Rounded sliders */ 483 | .slider.round { 484 | border-radius: 24px; 485 | } 486 | 487 | .slider.round:before { 488 | border-radius: 50%; 489 | } 490 | -------------------------------------------------------------------------------- /html/css/whatsapp.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap'); 2 | 3 | .whatsapp-app { 4 | display: none; 5 | height: 100%; 6 | width: 100%; 7 | overflow: hidden; 8 | } 9 | 10 | .whatsapp-header { 11 | position: absolute; 12 | top: 0; 13 | width: 100%; 14 | height: 9vh; 15 | } 16 | .whatsapp-header-top { 17 | position: relative; 18 | height: 4.5vh; 19 | width: 100%; 20 | background-color: #101d25; 21 | } 22 | .whatsapp-header-footer { 23 | position: relative; 24 | height: 4.5vh; 25 | width: 100%; 26 | background-color: #1f2c34; 27 | } 28 | .whatsapp-header-footer > p { 29 | padding-top: 1.3vh; 30 | padding-left: 2vh; 31 | color: white; 32 | font-family: 'Poppins', sans-serif; 33 | font-size: 1.5vh; 34 | } 35 | #whatsapp-search-chats { 36 | position: absolute; 37 | right: 0; 38 | top: 0; 39 | padding: 1.6vh; 40 | color: white; 41 | right: 1vh; 42 | transition: .1s; 43 | font-size: 1.5vh; 44 | } 45 | #whatsapp-search-chats:hover { 46 | color: rgb(182, 182, 182); 47 | } 48 | #whatsapp-search-input { 49 | display: none; 50 | position: absolute; 51 | background: none; 52 | border: none; 53 | background: rgb(226, 226, 226); 54 | top: .7vh; 55 | width: 17vh; 56 | margin: 0 auto; 57 | height: 2.5vh; 58 | border-radius: 1vh; 59 | box-shadow: 0 0 .2vh 0 rgba(0, 0, 0, 0.281); 60 | font-family: 'Poppins', sans-serif; 61 | outline: none; 62 | text-indent: 1vh; 63 | z-index: 100; 64 | 65 | right: 5vh; 66 | top: 0.95vh; 67 | width: 12vh; 68 | } 69 | 70 | .whatsapp-chats { 71 | position: absolute; 72 | width: 100%; 73 | height: 100%; 74 | top: 9vh; 75 | background: #101d25; 76 | overflow-y: scroll; 77 | overflow-x: hidden !important; 78 | } 79 | 80 | .whatsapp-chats::-webkit-scrollbar { 81 | position: absolute; 82 | width: .6vh; 83 | } 84 | 85 | .whatsapp-chats::-webkit-scrollbar-track { 86 | background-color: rgba(0, 0, 0, 0); 87 | } 88 | 89 | .whatsapp-chats::-webkit-scrollbar-thumb { 90 | background-color: rgba(0, 0, 0, 0.664); 91 | border-radius: 1vh 0 0 1vh; 92 | } 93 | 94 | .whatsapp-chat-unreadmessages { 95 | display: none; 96 | position: absolute; 97 | right: 1vh; 98 | top: 3.1vh; 99 | width: 1.8vh; 100 | height: 1.8vh; 101 | background-color: #00b09c; 102 | border-radius: 50%; 103 | text-align: center; 104 | color: white; 105 | font-family: 'Poppins', sans-serif; 106 | font-size: 1vh; 107 | line-height: 1.9vh; 108 | } 109 | 110 | .whatsapp-chat { 111 | position: relative; 112 | width: 100%; 113 | height: 7vh; 114 | color: white; 115 | border-bottom: 0.1vh solid #1f2c34; 116 | background: #101d25; 117 | transition: all 0.15s ease 0s; 118 | } 119 | .whatsapp-chat:hover { 120 | background: #00b09c; 121 | } 122 | .whatsapp-chat-picture { 123 | position: absolute; 124 | height: 5vh; 125 | width: 5vh; 126 | border-radius: 50%; 127 | top: 1vh; 128 | left: 1vh; 129 | background-position: center center; 130 | background-repeat: no-repeat; 131 | background-size: cover; 132 | } 133 | .whatsapp-openedchat-picture { 134 | position: absolute; 135 | height: 3.5vh; 136 | width: 3.5vh; 137 | background: gray; 138 | border-radius: 50%; 139 | top: .5vh; 140 | left: 3.5vh; 141 | background-position: center center; 142 | background-repeat: no-repeat; 143 | background-size: cover; 144 | } 145 | .whatsapp-chat-name { 146 | position: absolute; 147 | top: 1.35vh; 148 | left: 7vh; 149 | color: white; 150 | font-weight: 600; 151 | font-family: 'Poppins', sans-serif; 152 | font-size: 1.5vh; 153 | letter-spacing: 1px; 154 | } 155 | .whatsapp-chat-lastmessage { 156 | position: absolute; 157 | bottom: .6vh; 158 | left: 7vh; 159 | font-family: 'Poppins', sans-serif; 160 | font-size: 1.1vh; 161 | color: white; 162 | max-width: 17vh; 163 | } 164 | .whatsapp-chat-lastmessage > p { 165 | white-space: nowrap; 166 | overflow: hidden; 167 | text-overflow: ellipsis; 168 | } 169 | .whatsapp-chat-lastmessagetime { 170 | position: absolute; 171 | top: 1.35vh; 172 | right: 1vh; 173 | font-family: 'Poppins', sans-serif; 174 | font-size: 1vh; 175 | color: white; 176 | } 177 | 178 | .whatsapp-openedchat { 179 | display: none; 180 | position: absolute; 181 | top: 0; 182 | left: -30vh; 183 | height: 100%; 184 | width: 100%; 185 | background-image: url('../img/apps/whatsapp-chat.png'); 186 | background-repeat: no-repeat; 187 | background-size: inherit; 188 | } 189 | 190 | #whatsapp-openedchat-back { 191 | position: absolute; 192 | line-height: 5.5vh; 193 | top: -.4vh; 194 | left: 1.4vh; 195 | color: white; 196 | transition: .1s; 197 | } 198 | #whatsapp-openedchat-back:hover { 199 | color: rgb(197, 197, 197); 200 | } 201 | .whatsapp-openedchat-name { 202 | position: absolute; 203 | line-height: 5.5vh; 204 | top: -.4vh; 205 | left: 8vh; 206 | color: white; 207 | font-size: 1.5vh; 208 | font-family: 'Poppins', sans-serif; 209 | font-size: 1.5vh; 210 | } 211 | .whatsapp-header-openedchat{ 212 | position: absolute; 213 | top: 0; 214 | width: 100%; 215 | height: 9vh; 216 | background-color: rgba(7, 94, 84, 0); 217 | } 218 | .whatsapp-header-top-openedchat { 219 | position: relative; 220 | height: 4.5vh; 221 | width: 100%; 222 | background-color: #101d25; 223 | } 224 | .whatsapp-header-footer-openedchat { 225 | position: relative; 226 | height: 4.5vh; 227 | width: 100%; 228 | background-color: #1f2c34; 229 | } 230 | .whatsapp-header-footer-openedchat > p { 231 | padding-top: 1.3vh; 232 | padding-left: 2vh; 233 | color: white; 234 | font-family: 'Poppins', sans-serif; 235 | font-size: 1.5vh; 236 | } 237 | 238 | .whatsapp-extra-buttons { 239 | display: none; 240 | position: absolute; 241 | left: -10vh; 242 | } 243 | .whatsapp-openedchat-input { 244 | position: absolute; 245 | bottom: 30px; 246 | width: 100%; 247 | height: 10vh; 248 | } 249 | .whatsapp-extra-button { 250 | background: none; 251 | border: none; 252 | background: #00b09c; 253 | color: white; 254 | width: 3.5vh; 255 | height: 3.5vh; 256 | border-radius: 1vh; 257 | font-family: 'Poppins', sans-serif; 258 | font-size: 1.4vh; 259 | z-index: 100; 260 | top: 1.3vh; 261 | left: .8vh; 262 | float: left; 263 | margin-right: 1vh; 264 | position: relative; 265 | text-align: center; 266 | transition: .1s linear; 267 | } 268 | .whatsapp-extra-button:hover { 269 | background: #054640; 270 | } 271 | .whatsapp-extra-button > i { 272 | line-height: 3.5vh; 273 | font-size: 1.5vh; 274 | } 275 | #whatsapp-openedchat-message { 276 | position: absolute; 277 | border: none; 278 | background: #2d383e; 279 | margin: 0px auto; 280 | height: 3.5vh; 281 | border-radius: 3vh; 282 | font-family: Poppins, sans-serif; 283 | font-size: 1.4vh; 284 | outline: none; 285 | text-indent: 3vh; 286 | z-index: 100; 287 | top: 5.75vh; 288 | left: 0.8vh; 289 | width: 23vh; 290 | color: white; 291 | } 292 | #whatsapp-openedchat-send { 293 | position: absolute; 294 | top: 5.75vh; 295 | right: 1.1vh; 296 | color: white; 297 | text-align: center; 298 | line-height: 3.5vh; 299 | background: #00b09c; 300 | font-size: 1.5vh; 301 | width: 3.5vh; 302 | height: 3.5vh; 303 | border-radius: 1vh; 304 | text-indent: -0.4vh; 305 | transition: all 0.15s ease 0s; 306 | } 307 | #whatsapp-openedchat-send:hover { 308 | background: #054640; 309 | } 310 | #whatsapp-openedchat-message-extras { 311 | position: absolute; 312 | left: 1.2vh; 313 | z-index: 100; 314 | top: 6.3vh; 315 | font-size: 1.5vh; 316 | width: 2.6vh; 317 | height: 2.6vh; 318 | text-align: center; 319 | line-height: 2.5vh; 320 | border-radius: 50% 0% 0px 50%; 321 | color: white; 322 | transition: all 0.2s ease 0s; 323 | } 324 | #whatsapp-openedchat-message-extras:hover { 325 | color: #054640; 326 | } 327 | 328 | .whatsapp-openedchat-messages { 329 | position: absolute; 330 | height: 70%; 331 | width: 99%; 332 | top: 10vh; 333 | margin: 0 auto; 334 | left: 0; 335 | right: 0; 336 | overflow-y: scroll; 337 | } 338 | 339 | .whatsapp-openedchat-messages::-webkit-scrollbar { 340 | position: absolute; 341 | width: .3vh; 342 | } 343 | .whatsapp-openedchat-messages::-webkit-scrollbar-track { 344 | background-color: rgba(0, 0, 0, 0); 345 | } 346 | .whatsapp-openedchat-messages::-webkit-scrollbar-thumb { 347 | background-color: rgba(0, 0, 0, 0.664); 348 | border-radius: 1vh 0 0 1vh; 349 | } 350 | 351 | .whatsapp-openedchat-message{ 352 | position: relative; 353 | width: fit-content; 354 | max-width: 80%; 355 | overflow-wrap: break-word; 356 | word-wrap: break-word; 357 | height: auto; 358 | margin-top: .7vh; 359 | padding: .4vh; 360 | text-indent: .3vh; 361 | transition: .1s linear; 362 | } 363 | .whatsapp-shared-location:hover { 364 | opacity: .8; 365 | transition: .1s linear; 366 | } 367 | .whatsapp-openedchat-message-me { 368 | background: #245247; 369 | color: white; 370 | border-radius: 5px 0px 0px 5px; 371 | float: right; 372 | } 373 | 374 | .whatsapp-openedchat-message-other { 375 | background: #3c3c3e; 376 | color: white; 377 | border-radius: 5px 5px 5px 5px; 378 | left: .3vh 379 | } 380 | .whatsapp-openedchat-message-time { 381 | font-size: 1.1vh; 382 | text-align: right; 383 | padding-left: 3.7vh; 384 | margin-top: -0.25vh; 385 | font-family: 'Poppins', sans-serif; 386 | color: #99999b; 387 | } 388 | .unique-chat { 389 | position: relative; 390 | width: 100%; 391 | margin-bottom: 1vh; 392 | top: 0; 393 | } 394 | .whatsapp-openedchat-date { 395 | position: sticky; 396 | top: 0.2vh; 397 | z-index: 2; 398 | margin: 0.2vh auto 0.7vh; 399 | text-align: center; 400 | background: #1f2a30; 401 | width: fit-content; 402 | padding: 0.4vh; 403 | height: 2vh; 404 | font-family: 'Poppins', sans-serif; 405 | font-size: 1vh; 406 | border-radius: 0.4vh; 407 | text-transform: uppercase; 408 | color: white; 409 | } 410 | .clearfix:after { 411 | clear: both; 412 | content: "."; 413 | display: block; 414 | height: 0; 415 | visibility: hidden; 416 | } 417 | .clearfix { 418 | display: inline-block; 419 | } 420 | .clearfix { 421 | display: block; 422 | } 423 | 424 | #popup { 425 | display: none; 426 | left: 0; 427 | position: absolute; 428 | top: 0; 429 | width: 100%; 430 | z-index: 1001; 431 | } 432 | 433 | .popupclass { 434 | margin:0px auto; 435 | margin-top:120px; 436 | position:relative; 437 | padding:10px; 438 | width:820px; 439 | min-height:250px; 440 | border-radius:4px; 441 | box-shadow: 0 2px 5px #666666; 442 | } 443 | 444 | .emojionearea.emojionearea-inline { 445 | height: 34px; 446 | width: 68%; 447 | top: 65px; 448 | left: 40px; 449 | background-color: #2d383e; 450 | } 451 | 452 | .emojionearea.emojionearea-inline>.emojionearea-editor { 453 | height: 32px; 454 | min-height: 20px; 455 | overflow: hidden; 456 | white-space: nowrap; 457 | position: absolute; 458 | top: 0; 459 | left: 12px; 460 | right: 24px; 461 | color: white; 462 | padding: 6px 0; 463 | } 464 | 465 | .emojionearea .emojionearea-button.active + .emojionearea-picker-position-top { 466 | margin-top: -269px; 467 | left: -40px; 468 | } 469 | 470 | .emojionearea.focused { 471 | border-color: #245247; 472 | } -------------------------------------------------------------------------------- /.github/contributing.md: -------------------------------------------------------------------------------- 1 | # Contributing to QBCore 2 | 3 | First of all, thank you for taking the time to contribute! 4 | 5 | These guidelines will help you help us in the best way possible regardless of your skill level. We ask that you try to read everything related to the way you'd like to contribute and try and use your best judgement for anything not covered. 6 | 7 | ### Table of Contents 8 | 9 | [Code of Conduct](#code-of-conduct) 10 | 11 | [I don't want to read this whole thing, I just have a question!!!](#i-dont-want-to-read-this-whole-thing-i-just-have-a-question) 12 | 13 | [How Can I Contribute?](#how-can-i-contribute) 14 | * [Reporting Bugs](#reporting-bugs) 15 | * [Suggesting Features / Enhancements](#suggesting-features--enhancements) 16 | * [Your First Code Contribution](#your-first-code-contribution) 17 | * [Pull Requests](#pull-requests) 18 | 19 | [Styleguides](#styleguides) 20 | * [Git Commit Messages](#git-commit-messages) 21 | * [Lua Styleguide](#lua-styleguide) 22 | * [JavaScript Styleguide](#javascript-styleguide) 23 | 24 | 25 | 26 | ## Code of Conduct 27 | 28 | - Refrain from using languages other than English. 29 | - Refrain from discussing any politically charged or inflammatory topics. 30 | - Uphold mature conversations and respect each other; excessive profanity, hate speech or any kind of harassment will not be tolerated. 31 | - No advertising of any kind. 32 | - Follow these guidelines. 33 | - Do not mention members of github unless a question is directed at them and can't be answered by anyone else. 34 | - Do not mention any of the development team for any reason. We will read things as we get to them. 35 | 36 | ## I don't want to read this whole thing I just have a question!!! 37 | 38 | > **Note:** Please don't file an issue to ask a question. You'll get faster results by using the resources below. 39 | 40 | * [QBCore Website](https://qbcore.org) 41 | * [QBCore Discord](https://discord.gg/qbcore) 42 | * [FiveM Discord - #qbcore channel](https://discord.gg/fivem) 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | ## How Can I Contribute? 54 | 55 | ### Reporting Bugs 56 | 57 | The easiest way to contribute for most people is just to report bugs you find cause if nobody reports it there's a chance we'll never know it exists and then we'll never fix it. 58 | 59 | Before creating bug reports, please check [this list](#before-submitting-a-bug-report) as you might find out that you don't need to create one. When you are creating a bug report, please [include as many details as possible](#how-do-i-submit-a-good-bug-report). Fill out the bug-report template with the information it asks for helps us resolve issues faster. 60 | 61 | > **Note:** If you find a **Closed** issue that seems like it is the same thing that you're experiencing, open a new issue and include a link to the original issue in the body of your new one. 62 | 63 | #### Before Submitting A Bug Report 64 | 65 | * **Check the docs** There's a chance what you see as a bug might just work differently than you expect and if you think it could work better consider a feature enhancement report instead. 66 | * **Search the [discord](https://discord.gg/qbcore)** to see if anyone else has run into the issue and see if it was solved through user error or code changes. (if the code change isn't pending a PR and you know what you're doing consider submitting one following [Pull Requests](#pull-requests) ) 67 | * **Determine which resource the problem should be reported in**. If the bug is related to the inventory for example report this bug under qb-inventory rather than under qb-core or some other resource. 68 | * **Perform a [cursory search](https://github.com/search?q=+is%3Aissue+user%3Aqbcore-framework)** to see if the problem has already been reported. If it has **and the issue is still open**, add a comment to the existing issue instead of opening a new one. 69 | 70 | #### How Do I Submit A (Good) Bug Report? 71 | 72 | Bugs are tracked as [GitHub issues](https://guides.github.com/features/issues/). After you've determined which resource your bug is related to, create an issue on that repository and provide the following information by filling in bug-report template. 73 | 74 | Explain the problem and include additional details to help maintainers reproduce the problem: 75 | 76 | * **Use a clear and descriptive title** for the issue to identify the problem. 77 | * **Describe the exact steps which reproduce the problem** in as many details as possible. 78 | * **Provide specific examples to demonstrate the steps**. If something happened with only a specific group or single item but not others, specify that. 79 | * **Describe the behavior you observed after following the steps** and point out what exactly is the problem with that behavior. 80 | * **Explain which behavior you expected to see instead and why.** 81 | * **Include screenshots** which show the specific bug in action or before and after. 82 | * **If the problem wasn't triggered by a specific action**, describe what you were doing before the problem happened and share more information using the guidelines below. 83 | 84 | Provide more context by answering these questions if possible: 85 | 86 | * **Did the problem start happening recently** (e.g. after updating to a new version of QBCore?) or was this always a problem? 87 | * If the problem started happening recently, **can you reproduce the problem in an older version of QBCore?** What's the most recent commit in which the problem doesn't happen? 88 | * **Can you reliably reproduce the issue?** If not, provide details about how often the problem happens and under which conditions it normally happens. 89 | 90 | Include details about your setup: 91 | 92 | * **When was your QBCore last updated?** 93 | * **What OS is the server running on**? 94 | * **Which *extra* resources do you have installed?** 95 | 96 | 97 | --- 98 | 99 | 100 | ### Suggesting Features / Enhancements 101 | 102 | This section guides you through submitting an enhancement suggestion for QBCore, including completely new features and minor improvements to existing functionality. Following these guidelines helps maintainers and the community understand your suggestion. 103 | 104 | Before creating enhancement suggestions, please check [this list](#before-submitting-an-enhancement-suggestion) as you might find out that you don't need to create one. When you are creating an enhancement suggestion, please [include as many details as possible](#how-do-i-submit-a-good-enhancement-suggestion). Fill in feature request template, including the steps that you imagine you would take if the feature you're requesting existed. 105 | 106 | #### Before Submitting An Enhancement Suggestion 107 | 108 | * **Make sure it doesn't already exist.** Sounds silly, but there's a lot of features built in to qbcore that people don't realize so take a look through the docs and stuff to make sure it's not already there. 109 | * **Check if there's already PR which provides that enhancement.** 110 | * **Determine which resource the enhancement should be suggested in.** if it fits with another resource suggest it in that resource. if it would be it's own resource suggest it in the main qb-core repository. 111 | * **Perform a [cursory search](https://github.com/search?q=+is%3Aissue+user%3Aqbcore-framework)** to see if the enhancement has already been suggested. If it has, add a comment to the existing issue instead of opening a new one. 112 | 113 | #### How Do I Submit A (Good) Enhancement Suggestion? 114 | 115 | Enhancement suggestions are tracked as [GitHub issues](https://guides.github.com/features/issues/). After you've determined which resource your enhancement suggestion is related to, create an issue on that repository and provide the following information: 116 | 117 | * **Use a clear and descriptive title** for the issue to identify the suggestion. 118 | * **Provide a step-by-step description of the suggested enhancement** in as many details as possible. 119 | * **Provide specific examples to demonstrate the steps**. Include copy/pasteable snippets which you use in those examples, as [Markdown code blocks](https://help.github.com/articles/markdown-basics/#multiple-lines). 120 | * **Describe the current behavior** and **explain which behavior you expected to see instead** and why. 121 | * **Include screenshots and animated GIFs** which help you demonstrate the steps or point out the part of QBCore which the suggestion is related to. 122 | * **Explain why this enhancement would be useful.** 123 | * **Be creative and unique.** Stealing ideas from popular servers 1:1 detail isn't going to get accepted. 124 | 125 | 126 | --- 127 | 128 | 129 | 130 | ### Your First Code Contribution 131 | 132 | Unsure where to begin contributing to QBCore? You can start by looking through these `beginner` and `help-wanted` issues. 133 | 134 | 135 | 136 | --- 137 | 138 | 139 | ### Pull Requests 140 | 141 | The process described here has several goals: 142 | 143 | - Maintain QBCore's quality. 144 | - Fix problems that are important to users. 145 | - Engage the community in working toward the best possible QBCore. 146 | - Enable a sustainable system for QBCore's maintainers to review contributions. 147 | 148 | Please follow these steps to have your contribution considered by the maintainers: 149 | 150 | 1. Follow all instructions in The Pull Request template. 151 | 2. Follow the [styleguides](#styleguides). 152 | 3. Await review by the reviewer(s). 153 | 154 | While the prerequisites above must be satisfied prior to having your pull request reviewed, the reviewer(s) may ask you to complete additional design work, tests, or other changes before your pull request can be ultimately accepted. 155 | 156 | 157 | --- 158 | 159 | ## Styleguides 160 | 161 | ### Git Commit Messages 162 | 163 | * Limit the first line to 72 characters or less. 164 | * Reference issues and pull requests liberally after the first line. 165 | * Consider starting the commit message with an applicable emoji: 166 | * :art: `:art:` when improving the format/structure of the code 167 | * :racehorse: `:racehorse:` when improving performance 168 | * :memo: `:memo:` when writing docs 169 | * :bug: `:bug:` when fixing a bug 170 | * :fire: `:fire:` when removing code or files 171 | * :white_check_mark: `:white_check_mark:` when adding tests 172 | * :lock: `:lock:` when dealing with security 173 | * :arrow_up: `:arrow_up:` when upgrading dependencies 174 | * :arrow_down: `:arrow_down:` when downgrading dependencies 175 | * :shirt: `:shirt:` when removing linter warnings 176 | 177 | ### Lua Styleguide 178 | 179 | All lua code should be done using all the best practices of proper lua using the easiest to read yet fastest/most optimized methods of execution. 180 | 181 | - Use 4 Space indentation 182 | - Aim for lua 5.4 (include `lua54 'yes'` in the fxmanifest.lua) 183 | - Use `PlayerPedId()` instead of `GetPlayerPed(-1)` 184 | - Use `#(vector3 - vector3)` instead of `GetDistanceBetweenCoords()` 185 | - Don't create unnecessary threads. always try to find a better method of triggering events 186 | - Don't repeat yourself.. if you're using the same operations in many different places convert them into a function with flexible variables 187 | - For distance checking loops set longer waits if you're outside of a range 188 | - Job specific loops should only run for players with that job, don't waste cycles 189 | - When possible don't trust the client, esspecially with transactions 190 | - Balance security and optimizations 191 | - [Consider this Lua Performance guide](https://springrts.com/wiki/Lua_Performance) 192 | - Use local varriables everywhere possible 193 | - Make use of config options where it makes sense making features optional or customizable 194 | - Instead of `table.insert(myTable, "Value")` use `myTable[#myTable + 1] = "Value"` 195 | - Instead of `table.insert(ages, "bob", 30)` use `ages["bob"] = 30` 196 | 197 | 198 | ### JavaScript Styleguide 199 | 200 | - Use 4 Space indentation 201 | - Don't repeat yourself.. if you're using the same operations in many different places convert them into a function with flexible variables. 202 | -------------------------------------------------------------------------------- /html/css/bank.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap'); 2 | 3 | .bank-app { 4 | display: none; 5 | height: 100%; 6 | width: 100%; 7 | background: rgb(36, 36, 36); 8 | overflow: hidden; 9 | } 10 | 11 | .bank-app-header { 12 | position: absolute; 13 | width: 100%; 14 | height: 6vh; 15 | top: 6vh; 16 | } 17 | 18 | .bank-app-header-button { 19 | position: relative; 20 | float: left; 21 | width: 50%; 22 | height: 100%; 23 | text-align: center; 24 | line-height: 6vh; 25 | font-family: 'Poppins', sans-serif; 26 | color: white; 27 | transition: .08s; 28 | } 29 | 30 | .bank-app-header-button-selected { 31 | border-bottom: .3vh solid #dc143c; 32 | } 33 | .bank-app-header-button > i { 34 | position: absolute; 35 | margin: 0 auto; 36 | left: 0; 37 | right: 0; 38 | top: .9vh; 39 | font-size: 2vh; 40 | } 41 | .bank-app-header-button > p { 42 | position: absolute; 43 | margin: 0 auto; 44 | left: 0; 45 | right: 0; 46 | top: 1.4vh; 47 | font-size: 1.25vh; 48 | } 49 | 50 | .bank-app-accounts { 51 | display: block; 52 | position: absolute; 53 | width: 100%; 54 | height: 70%; 55 | top: 13vh; 56 | left: 30vh; 57 | } 58 | .bank-app-invoices { 59 | display: block; 60 | position: absolute; 61 | width: 100%; 62 | height: 37vh; 63 | top: 13vh; 64 | left: 30vh; 65 | } 66 | .bank-app-invoices-list { 67 | position: absolute; 68 | top: 0; 69 | height: 100%; 70 | width: 100%; 71 | overflow-y: scroll; 72 | overflow-x: hidden; 73 | } 74 | .bank-app-invoices-list::-webkit-scrollbar { 75 | width: .5vh; 76 | background-color: #dc143c; 77 | } 78 | .bank-app-invoice { 79 | height: fit-content; 80 | display: flex; 81 | flex-direction: column; 82 | padding: 8px 16px; 83 | width: 100%; 84 | letter-spacing: .05vh; 85 | border-bottom: .2vh solid #363d4b; 86 | } 87 | .bank-app-invoice-title { 88 | text-transform : capitalize; 89 | width: 100%; 90 | color: white; 91 | font-family: 'Poppins', sans-serif; 92 | font-size: 1.3vh; 93 | } 94 | .bank-app-invoice-info { 95 | width: 100%; 96 | display: flex; 97 | flex-direction: row; 98 | } 99 | .bank-app-invoice-amount { 100 | color: rgba(255, 255, 255, 0.781); 101 | font-family: 'Poppins', sans-serif; 102 | font-size: 1.22vh; 103 | } 104 | .bank-app-invoice-buttons { 105 | margin-left: auto; 106 | } 107 | .bank-app-invoice-reason { 108 | color: rgba(255, 255, 255, 0.85); 109 | font-family: 'Poppins', sans-serif; 110 | font-size: 1.22vh; 111 | 112 | width: 100%; 113 | 114 | overflow: hidden; 115 | text-overflow: ellipsis; 116 | white-space: nowrap; 117 | } 118 | .bank-app-invoice-buttons > i { 119 | margin-left: .5vh; 120 | margin-right: .5vh; 121 | font-size: 2vh; 122 | } 123 | .pay-invoice { 124 | color: #4cd137; 125 | transition: .1s; 126 | } 127 | .pay-invoice:hover { 128 | color: #70f75b; 129 | } 130 | .decline-invoice { 131 | color: #e84118; 132 | transition: .1s; 133 | } 134 | .decline-invoice:hover { 135 | color: #ff5f38; 136 | } 137 | .bank-app-transfer { 138 | display: none; 139 | position: absolute; 140 | width: 100%; 141 | height: 100%; 142 | background-color: rgb(36, 36, 36); 143 | top: -100%; 144 | z-index: 500; 145 | } 146 | .bank-app-account { 147 | position: absolute; 148 | background-color: rgba(23, 23, 23, 90%); 149 | height: 9.5vh; 150 | width: 80%; 151 | margin: 0px auto; 152 | left: 0px; 153 | right: 0px; 154 | top: 1.5vh; 155 | transition: all 0.1s ease 0s; 156 | border-radius: 0.15rem; 157 | box-shadow: 0rem 0rem 0.1rem 0.05rem #000000; 158 | } 159 | .bank-app-account:hover{ 160 | background-color: #dc143c; 161 | transition: .5s ease; 162 | } 163 | .bank-app-account-title { 164 | position: absolute; 165 | top: 1vh; 166 | left: 1vh; 167 | font-family: 'Poppins', sans-serif; 168 | letter-spacing: .1vh; 169 | color: white; 170 | font-size: 1.1vh; 171 | } 172 | .bank-app-account-number { 173 | position: absolute; 174 | top: 3vh; 175 | left: 1vh; 176 | font-family: 'Poppins', sans-serif; 177 | letter-spacing: .1vh; 178 | width: 100%; 179 | color: white; 180 | font-size: 1.1vh; 181 | background: transparent; 182 | outline: none; 183 | border: none; 184 | } 185 | .bank-app-account-number::selection { 186 | background: transparent; 187 | outline: none; 188 | border: none; 189 | color: white; 190 | } 191 | .bank-app-account-balance { 192 | position: absolute; 193 | top: 6.5vh; 194 | left: 1vh; 195 | font-family: 'Poppins', sans-serif; 196 | letter-spacing: .1vh; 197 | color: white; 198 | font-size: 1.5vh; 199 | } 200 | .bank-app-account-actions { 201 | text-align: center; 202 | color: white; 203 | margin: 0px auto; 204 | bottom: 2.5vh; 205 | height: 5vh; 206 | width: 80%; 207 | right: 0px; 208 | left: 0px; 209 | line-height: 5vh; 210 | font-size: 2.5vh; 211 | position: absolute; 212 | transition: all 0.1s ease 0s; 213 | background: rgba(23, 23, 23, 90%); 214 | border-radius: 0.15rem; 215 | box-shadow: 0rem 0rem 0.1rem 0.05rem #000000; 216 | } 217 | 218 | .bank-app-account-actions:hover { 219 | background-color: #dc143c; 220 | transition: .5s ease; 221 | } 222 | .bank-app-loaded { 223 | display: none; 224 | padding-left: 30vh; 225 | } 226 | .bank-app-loading { 227 | position: absolute; 228 | top: 0; 229 | left: 0vh; 230 | display: block; 231 | height: 100%; 232 | width: 100%; 233 | overflow: hidden; 234 | } 235 | .qbank-logo { 236 | position: absolute; 237 | width: 10vh; 238 | margin: 0 auto; 239 | left: 0vh; 240 | right: 0; 241 | top: 22vh; 242 | z-index: 101; 243 | } 244 | #qbank-text { 245 | position: absolute; 246 | top: 24vh; 247 | left: 9vh; 248 | font-size: 4.5vh; 249 | color: white; 250 | font-family: 'Poppins', sans-serif; 251 | z-index: 100; 252 | opacity: 0; 253 | } 254 | 255 | .bank-app-transfer-header { 256 | position: absolute; 257 | top: 5.5vh; 258 | left: 6vh; 259 | color: white; 260 | font-family: 'Poppins', sans-serif; 261 | font-size: 2vh; 262 | } 263 | 264 | #bank-transfer-iban { 265 | position: absolute; 266 | top: 12vh; 267 | left: 8vh; 268 | background: none; 269 | border: none; 270 | outline: none; 271 | border-bottom: 2px solid #f5f6fa; 272 | font-family: 'Poppins', sans-serif; 273 | height: 3.5vh; 274 | width: 18vh; 275 | text-indent: .4vh; 276 | transition: .1s; 277 | font-size: 1.3vh; 278 | color: white; 279 | } 280 | #bank-transfer-iban::-webkit-inner-spin-button { 281 | display: none; 282 | } 283 | #bank-transfer-iban:focus { 284 | border-bottom: 2px solid #fbc531; 285 | } 286 | #bank-transfer-iban:valid { 287 | border-bottom: 2px solid #6ab04c; 288 | } 289 | #bank-transfer-amount { 290 | position: absolute; 291 | top: 18vh; 292 | left: 8vh; 293 | background: none; 294 | border: none; 295 | outline: none; 296 | border-bottom: 2px solid #f5f6fa; 297 | font-family: 'Poppins', sans-serif; 298 | /* background: rgb(33,36,43); */ 299 | /* background: linear-gradient(0deg, rgba(33,36,43,0.5) 0%, rgba(178,132,254,0) 100%); */ 300 | height: 3.5vh; 301 | width: 18vh; 302 | text-indent: .4vh; 303 | transition: .1s; 304 | font-size: 1.3vh; 305 | color: white; 306 | } 307 | #bank-transfer-amount::-webkit-inner-spin-button { 308 | display: none; 309 | } 310 | 311 | #bank-transfer-amount:focus { 312 | border-bottom: 2px solid #fbc531; 313 | } 314 | 315 | #bank-transfer-amount:valid { 316 | border-bottom: 2px solid #6ab04c; 317 | } 318 | .bank-transfer-iban-icon { 319 | position: absolute; 320 | top: 13.5vh; 321 | left: 3.4vh; 322 | font-size: 2.1vh; 323 | color: white 324 | } 325 | .bank-transfer-amount-icon { 326 | position: absolute; 327 | top: 19.2vh; 328 | left: 3.5vh; 329 | font-size: 2.4vh; 330 | color: white 331 | } 332 | .bank-transfer-mycontacts-icon { 333 | position: absolute; 334 | top: 25.5vh; 335 | left: 3.5vh; 336 | font-size: 2.2vh; 337 | color: white 338 | } 339 | .bank-transfer-mycontacts-icon:hover { 340 | color: #fbc531; 341 | } 342 | .bank-app-transfer-buttons { 343 | position: absolute; 344 | bottom: 40px; 345 | height: 5vh; 346 | width: 100%; 347 | } 348 | .bank-app-transfer-button { 349 | position: relative; 350 | float: left; 351 | width: 50%; 352 | height: 100%; 353 | text-align: center; 354 | line-height: 4.5vh; 355 | font-family: 'Poppins', sans-serif; 356 | color: white; 357 | font-size: 1.4vh; 358 | transition: .1s; 359 | } 360 | .bank-app-transfer-button:hover { 361 | border-top: .2vh solid #dc143c; 362 | } 363 | .bank-app-my-contacts { 364 | display: none; 365 | position: absolute; 366 | height: 100%; 367 | width: 100%; 368 | top: -100%; 369 | background: rgb(36, 36, 36); 370 | z-index: 500; 371 | } 372 | 373 | .bank-app-my-contacts::-webkit-scrollbar { 374 | display: none; 375 | } 376 | 377 | .bank-app-my-contacts-list::-webkit-scrollbar { 378 | display: none; 379 | } 380 | 381 | .bank-app-my-contacts-header { 382 | position: relative; 383 | padding: 5vh 0 0 8vh; 384 | font-family: 'Poppins', sans-serif; 385 | font-size: 2vh; 386 | color: white; 387 | } 388 | .bank-app-my-contacts-list { 389 | position: absolute; 390 | height: 65%; 391 | width: 75%; 392 | margin: 0 auto; 393 | left: 0; 394 | right: 0; 395 | top: 14vh; 396 | overflow-y: scroll; 397 | } 398 | .bank-app-my-contact { 399 | position: relative; 400 | width: 98%; 401 | left: 2px; 402 | height: 4.5vh; 403 | transition: all 0.1s ease 0s; 404 | background: rgba(23, 23, 23, 90%); 405 | border-radius: 0.15rem; 406 | margin-top: 2px; 407 | margin-bottom: 10px; 408 | box-shadow: 0rem 0rem 0.1rem 0.05rem #000000; 409 | } 410 | .bank-app-my-contact:hover { 411 | background-color: #727e94; 412 | } 413 | .bank-app-my-contact-firstletter { 414 | position: absolute; 415 | background-color: #eb4d4b; 416 | height: 3.5vh; 417 | width: 3.5vh; 418 | margin: .4vh; 419 | margin-left: .35vh; 420 | text-align: center; 421 | line-height: 3.6vh; 422 | border-radius: 50%; 423 | font-family: 'Poppins', sans-serif; 424 | color: white; 425 | } 426 | .bank-app-my-contact-name { 427 | position: absolute; 428 | left: 5vh; 429 | line-height: 4.5vh; 430 | font-family: 'Poppins', sans-serif; 431 | font-size: 1.4vh; 432 | color: white; 433 | } 434 | .bank-app-my-contacts-list-header { 435 | position: absolute; 436 | top: 8.5vh; 437 | height: 5vh; 438 | width: 100%; 439 | } 440 | #bank-app-my-contact-search { 441 | position: absolute; 442 | border: none; 443 | top: 1.2vh; 444 | width: 17vh; 445 | margin: 0px auto; 446 | left: 0px; 447 | right: 0px; 448 | color: white; 449 | opacity: 1; 450 | height: 2.5vh; 451 | border-radius: 1vh; 452 | font-family: Poppins, sans-serif; 453 | outline: none; 454 | text-indent: 1vh; 455 | z-index: 100; 456 | background: rgba(23, 23, 23, 90%); 457 | border-radius: 0.15rem; 458 | box-shadow: 0rem 0rem 0.1rem 0.05rem #000000; 459 | } 460 | #bank-app-my-contact-search::placeholder{ 461 | font-family: 'Poppins', sans-serif; 462 | } 463 | .bank-app-my-contacts-list-back { 464 | position: absolute; 465 | bottom: 40px; 466 | width: 100%; 467 | height: 5vh; 468 | text-align: center; 469 | line-height: 5vh; 470 | text-transform: uppercase; 471 | color: white; 472 | font-family: 'Poppins', sans-serif; 473 | font-size: 1.4vh; 474 | transition: .1s; 475 | } 476 | .bank-app-my-contacts-list-back:hover { 477 | border-top: 2px solid #eb4d4b; 478 | } 479 | -------------------------------------------------------------------------------- /html/js/lawyers.js: -------------------------------------------------------------------------------- 1 | SetupLawyers = function(data) { 2 | $(".lawyers-list").html(""); 3 | var lawyers = []; 4 | var realestate = []; 5 | var mechanic = []; 6 | var taxi = []; 7 | var police = []; 8 | var ambulance = []; 9 | 10 | if (data.length > 0) { 11 | 12 | $.each(data, function(i, lawyer) { 13 | if (lawyer.typejob == "lawyer") { 14 | lawyers.push(lawyer); 15 | } 16 | if (lawyer.typejob == "realestate") { 17 | realestate.push(lawyer); 18 | } 19 | if (lawyer.typejob == "mechanic") { 20 | mechanic.push(lawyer); 21 | } 22 | if (lawyer.typejob == "taxi") { 23 | taxi.push(lawyer); 24 | } 25 | if (lawyer.typejob == "police") { 26 | police.push(lawyer); 27 | } 28 | if (lawyer.typejob == "ambulance") { 29 | ambulance.push(lawyer); 30 | } 31 | }); 32 | 33 | $(".lawyers-list").append('

Lawyers (' + lawyers.length + ')

'); 34 | 35 | if (lawyers.length > 0) { 36 | $.each(lawyers, function(i, lawyer) { 37 | var element = '
' + (lawyer.name).charAt(0).toUpperCase() + '
' + lawyer.name + '
' 38 | $(".lawyers-list").append(element); 39 | $("#lawyerid-" + i).data('LawyerData', lawyer); 40 | }); 41 | } else { 42 | var element = '
There are no lawyers available.
' 43 | $(".lawyers-list").append(element); 44 | } 45 | 46 | $(".lawyers-list").append('

Real Estate (' + realestate.length + ')

'); 47 | 48 | if (realestate.length > 0) { 49 | $.each(realestate, function(i, lawyer1) { 50 | var element = '
' + (lawyer1.name).charAt(0).toUpperCase() + '
' + lawyer1.name + '
' 51 | $(".lawyers-list").append(element); 52 | $("#lawyerid1-" + i).data('LawyerData', lawyer1); 53 | }); 54 | } else { 55 | var element = '
There are no real estate agents available.
' 56 | $(".lawyers-list").append(element); 57 | } 58 | 59 | $(".lawyers-list").append('

Mechanic (' + mechanic.length + ')

'); 60 | 61 | if (mechanic.length > 0) { 62 | $.each(mechanic, function(i, lawyer2) { 63 | var element = '
' + (lawyer2.name).charAt(0).toUpperCase() + '
' + lawyer2.name + '
' 64 | $(".lawyers-list").append(element); 65 | $("#lawyerid2-" + i).data('LawyerData', lawyer2); 66 | }); 67 | } else { 68 | var element = '
There are no mechanics available.
' 69 | $(".lawyers-list").append(element); 70 | } 71 | 72 | $(".lawyers-list").append('

Taxi (' + taxi.length + ')

'); 73 | 74 | if (taxi.length > 0) { 75 | $.each(taxi, function(i, lawyer3) { 76 | var element = '
' + (lawyer3.name).charAt(0).toUpperCase() + '
' + lawyer3.name + '
' 77 | $(".lawyers-list").append(element); 78 | $("#lawyerid3-" + i).data('LawyerData', lawyer3); 79 | }); 80 | } else { 81 | var element = '
There are no taxis available.
' 82 | $(".lawyers-list").append(element); 83 | } 84 | 85 | $(".lawyers-list").append('

Police (' + police.length + ')

'); 86 | 87 | if (police.length > 0) { 88 | $.each(police, function(i, lawyer4) { 89 | var element = '
' + (lawyer4.name).charAt(0).toUpperCase() + '
' + lawyer4.name + '
' 90 | $(".lawyers-list").append(element); 91 | $("#lawyerid4-" + i).data('LawyerData', lawyer4); 92 | }); 93 | } else { 94 | var element = '
There is no police available.
' 95 | $(".lawyers-list").append(element); 96 | } 97 | 98 | $(".lawyers-list").append('

Ambulance (' + ambulance.length + ')

'); 99 | 100 | if (ambulance.length > 0) { 101 | $.each(ambulance, function(i, lawyer5) { 102 | var element = '
' + (lawyer5.name).charAt(0).toUpperCase() + '
' + lawyer5.name + '
' 103 | $(".lawyers-list").append(element); 104 | $("#lawyerid5-" + i).data('LawyerData', lawyer5); 105 | }); 106 | } else { 107 | var element = '
There is no ems available.
' 108 | $(".lawyers-list").append(element); 109 | } 110 | } else { 111 | $(".lawyers-list").append('

Lawyers (' + lawyers.length + ')

'); 112 | 113 | var element = '
There are no lawyers available.
' 114 | $(".lawyers-list").append(element); 115 | 116 | $(".lawyers-list").append('

Real Estate (' + realestate.length + ')

'); 117 | 118 | var element = '
There are no real estate agents available.
' 119 | $(".lawyers-list").append(element); 120 | 121 | $(".lawyers-list").append('

Mechanic (' + mechanic.length + ')

'); 122 | 123 | var element = '
There are no mechanics available.
' 124 | $(".lawyers-list").append(element); 125 | 126 | $(".lawyers-list").append('

Taxi (' + taxi.length + ')

'); 127 | 128 | var element = '
There are no taxis available.
' 129 | $(".lawyers-list").append(element); 130 | 131 | $(".lawyers-list").append('

Police (' + police.length + ')

'); 132 | 133 | var element = '
There are no polices a available.
' 134 | $(".lawyers-list").append(element); 135 | 136 | $(".lawyers-list").append('

Ambulance (' + ambulance.length + ')

'); 137 | 138 | var element = '
There are no ambulance personnel a available.
' 139 | $(".lawyers-list").append(element); 140 | } 141 | } 142 | 143 | $(document).on('click', '.lawyer-list-call', function(e){ 144 | e.preventDefault(); 145 | 146 | var LawyerData = $(this).parent().data('LawyerData'); 147 | 148 | var cData = { 149 | number: LawyerData.phone, 150 | name: LawyerData.name 151 | } 152 | 153 | $.post('https://qb-phone/CallContact', JSON.stringify({ 154 | ContactData: cData, 155 | Anonymous: QB.Phone.Data.AnonymousCall, 156 | }), function(status){ 157 | if (cData.number !== QB.Phone.Data.PlayerData.charinfo.phone) { 158 | if (status.IsOnline) { 159 | if (status.CanCall) { 160 | if (!status.InCall) { 161 | if (QB.Phone.Data.AnonymousCall) { 162 | QB.Phone.Notifications.Add("fas fa-phone", "Phone", "You started a anonymous call!"); 163 | } 164 | $(".phone-call-outgoing").css({"display":"block"}); 165 | $(".phone-call-incoming").css({"display":"none"}); 166 | $(".phone-call-ongoing").css({"display":"none"}); 167 | $(".phone-call-outgoing-caller").html(cData.name); 168 | QB.Phone.Functions.HeaderTextColor("white", 400); 169 | QB.Phone.Animations.TopSlideUp('.phone-application-container', 400, -160); 170 | setTimeout(function(){ 171 | $(".lawyers-app").css({"display":"none"}); 172 | QB.Phone.Animations.TopSlideDown('.phone-application-container', 400, 0); 173 | QB.Phone.Functions.ToggleApp("phone-call", "block"); 174 | }, 450); 175 | 176 | CallData.name = cData.name; 177 | CallData.number = cData.number; 178 | 179 | QB.Phone.Data.currentApplication = "phone-call"; 180 | } else { 181 | QB.Phone.Notifications.Add("fas fa-phone", "Phone", "You are already connected to a call!"); 182 | } 183 | } else { 184 | QB.Phone.Notifications.Add("fas fa-phone", "Phone", "This person is already in a call"); 185 | } 186 | } else { 187 | QB.Phone.Notifications.Add("fas fa-phone", "Phone", "This person is not available!"); 188 | } 189 | } else { 190 | QB.Phone.Notifications.Add("fas fa-phone", "Phone", "You can't call your own number!"); 191 | } 192 | }); 193 | }); 194 | -------------------------------------------------------------------------------- /html/css/main.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap'); 2 | 3 | @media all and (max-height: 812px) { 4 | :root { font-size: 13px; } 5 | } 6 | @media all and (max-height: 750px) { 7 | :root { font-size: 12px; } 8 | } 9 | @media all and (max-height: 700px) { 10 | :root { font-size: 11px; } 11 | } 12 | @media all and (max-height: 650px) { 13 | :root { font-size: 10px; } 14 | } 15 | @media all and (max-height: 600px) { 16 | :root { font-size: 9px; } 17 | } 18 | 19 | /* CSS Reset */ 20 | body { 21 | margin: 0; 22 | padding: 0; 23 | overflow: hidden; 24 | } 25 | /* CSS Reset END */ 26 | 27 | .disableSelection{ 28 | -webkit-touch-callout: none; 29 | -webkit-user-select: none; 30 | -khtml-user-select: none; 31 | -moz-user-select: none; 32 | -ms-user-select: none; 33 | user-select: none; 34 | outline: 0; 35 | } 36 | 37 | /* Complete Phone */ 38 | .container { 39 | display: none; 40 | /* display: block; */ 41 | position: absolute; 42 | bottom: -70%; 43 | /* bottom: 0%; */ 44 | right: 5vh; 45 | } 46 | /* */ 47 | 48 | .phone-currentcall-container { 49 | display: none; 50 | position: absolute; 51 | margin: 0 auto; 52 | left: 0; 53 | right: 0; 54 | height: 5vh; 55 | width: 70%; 56 | background-color: rgba(0, 0, 0, 0.65); 57 | top: 10vh; 58 | z-index: 99; 59 | transition: background-color .1s linear; 60 | border-radius: 3vh; 61 | animation: pulse 2s infinite; 62 | } 63 | .phone-currentcall-container:hover { 64 | background-color: rgba(0, 0, 0, 0.8); 65 | } 66 | 67 | .phone-currentcall-icon { 68 | position: absolute; 69 | top: 1.2vh; 70 | left: 1.3vh; 71 | font-size: 1.9vh; 72 | color: white; 73 | transform: rotate(90deg); 74 | } 75 | @-webkit-keyframes pulse { 76 | 0% { 77 | -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); 78 | } 79 | 70% { 80 | -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); 81 | } 82 | 100% { 83 | -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); 84 | } 85 | } 86 | @keyframes pulse { 87 | 0% { 88 | -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); 89 | box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2); 90 | } 91 | 70% { 92 | -moz-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); 93 | box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); 94 | } 95 | 100% { 96 | -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); 97 | box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); 98 | } 99 | } 100 | 101 | .phone-currentcall-title { 102 | position: absolute; 103 | top: 1vh; 104 | left: 4vh; 105 | font-size: 1.1vh; 106 | color: white; 107 | font-family: 'Poppins', sans-serif; 108 | } 109 | 110 | .phone-currentcall-contact { 111 | position: absolute; 112 | bottom: 1vh; 113 | left: 4vh; 114 | font-size: 1vh; 115 | color: rgba(255, 255, 255, 0.7); 116 | font-family: 'Poppins', sans-serif; 117 | } 118 | 119 | /* Phone Container */ 120 | .phone-frame { 121 | position: absolute; 122 | width: 30vh; 123 | bottom: 0; 124 | right: 0; 125 | margin: 5vh; 126 | z-index: 150; 127 | pointer-events: none; 128 | } 129 | 130 | .phone-container { 131 | height: 61.7vh; 132 | width: 29vh; 133 | bottom: 1vh; 134 | border-radius: 3vh; 135 | right: 0.5vh; 136 | margin: 5vh; 137 | overflow: hidden; 138 | position: absolute; 139 | } 140 | 141 | .phone-background { 142 | height: 61.7vh; 143 | width: 29vh; 144 | bottom: 1vh; 145 | border-radius: 3vh; 146 | right: 0.5vh; 147 | margin: 5vh; 148 | overflow: hidden; 149 | position: absolute; 150 | background-size: cover; 151 | background-position-x: center; 152 | background-repeat: no-repeat; 153 | overflow: hidden; 154 | background-image: url('../img/backgrounds/background-1.png'); 155 | } 156 | 157 | /* Phone Container END */ 158 | /* -------------------------- */ 159 | 160 | /* Phone Header */ 161 | .phone-header { 162 | width: 100%; 163 | height: 5vh; 164 | z-index: 141; 165 | position: absolute; 166 | color: white; 167 | } 168 | 169 | #phone-server { 170 | font-family: 'Poppins', sans-serif; 171 | text-transform: uppercase; 172 | font-size: 1vh; 173 | padding: 2vh 0 0 1vh; 174 | float: left; 175 | color: white !important; 176 | } 177 | 178 | #player-id { 179 | font-family: 'Poppins', sans-serif; 180 | text-transform: uppercase; 181 | font-size: 1vh; 182 | padding: 2vh 0 0 1vh; 183 | float: left; 184 | color: white !important; 185 | } 186 | 187 | #phone-time { 188 | font-family: 'Poppins', sans-serif; 189 | font-size: 1vh; 190 | padding: 2vh 0 0 5.5vh; 191 | float: left; 192 | color: white !important; 193 | } 194 | 195 | #phone-icons { 196 | font-size: 0.95vh; 197 | padding: 2vh 1.5vh 0 0vh; 198 | float: right; 199 | color: white !important; 200 | } 201 | 202 | #phone-signal { 203 | font-size: 1vh; 204 | left: -0.3vh; 205 | position: relative; 206 | } 207 | 208 | #phone-battery { 209 | transform: rotate(-90deg); 210 | top: -0.1vh; 211 | position: relative; 212 | } 213 | 214 | /* Phone Header END */ 215 | /* -------------------------- */ 216 | 217 | /* Phone Application Contanier */ 218 | .phone-application-container { 219 | display: none; 220 | position: absolute; 221 | top: 8%; 222 | height: 100%; 223 | width: 100%; 224 | background-color: rgb(65, 65, 65); 225 | z-index: 100; 226 | } 227 | /* Phone Application Container END */ 228 | /* -------------------------- */ 229 | 230 | /* Phone Footer */ 231 | .phone-footer { 232 | position: absolute; 233 | bottom: 0; 234 | height: 5vh; 235 | width: 100%; 236 | } 237 | 238 | .phone-home-container { 239 | position: relative; 240 | height: 2.3vh; 241 | width: 100%; 242 | margin: 0 auto; 243 | top: 2vh; 244 | transform: translateY(-50%); 245 | border-radius: 0.8vh; 246 | transition: .15s; 247 | z-index: 500; 248 | } 249 | 250 | .phone-home-button { 251 | position: relative; 252 | height: 0.5vh; 253 | width: 10vh; 254 | background-color: white; 255 | border-radius: 0.8vh; 256 | top: 80%; 257 | transform: translateY(-50%); 258 | margin: 0px auto; 259 | transition: all 0.1s ease 0s; 260 | } 261 | 262 | /* Phone Footer END */ 263 | 264 | /* Home Applications */ 265 | .phone-applications { 266 | position: relative; 267 | height: 100%; 268 | width: 100%; 269 | background-color: rgba(0, 0, 0, 0.05); 270 | } 271 | 272 | .phone-application { 273 | position: relative; 274 | height: 4.8vh; 275 | width: 4.8vh; 276 | left: 1vh; 277 | float: left; 278 | margin-left: 1.75vh; 279 | margin-top: 1.5vh; 280 | border-radius: 1.25vh; 281 | text-align: center; 282 | /* box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.13); */ 283 | opacity: 0.9; 284 | transition: .05s; 285 | } 286 | 287 | .phone-application:hover { 288 | opacity: 1.0; 289 | } 290 | 291 | .phone-footer-applications { 292 | position: absolute; 293 | width: 100%; 294 | bottom: 7vh; 295 | } 296 | 297 | .phone-home-applications { 298 | position: absolute; 299 | width: 100%; 300 | bottom: 17vh; 301 | } 302 | 303 | .phone-application > i { 304 | line-height: 4.6vh; 305 | font-size: 2vh; 306 | } 307 | 308 | .ApplicationIcon { 309 | color: white; 310 | } 311 | /* Home Applications END */ 312 | 313 | 314 | /* Phone Notification */ 315 | 316 | .phone-notification-container { 317 | position: absolute; 318 | height: 5.5vh; 319 | width: 22vh; 320 | background-color: rgba(39, 39, 39, 0.9); 321 | margin: 0 auto; 322 | left: 0; 323 | right: 0; 324 | top: -8%; 325 | border-radius: 3vh; 326 | overflow: hidden; 327 | box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.11); 328 | z-index: 140; 329 | } 330 | 331 | .notification-icon { 332 | position: absolute; 333 | height: 100%; 334 | width: 5vh; 335 | text-align: center; 336 | line-height: 5.7vh; 337 | color: #e74c3c; 338 | font-size: 2.5vh; 339 | } 340 | 341 | .notification-title { 342 | position: absolute; 343 | top: 1vh; 344 | left: 4.5vh; 345 | font-size: 1.1vh; 346 | font-family: 'Poppins', sans-serif; 347 | color: #ffffff; 348 | } 349 | 350 | .notification-text { 351 | position: absolute; 352 | top: 2.7vh; 353 | left: 4.5vh; 354 | font-size: 1vh; 355 | font-family: 'Poppins', sans-serif; 356 | color: rgb(255, 255, 255); 357 | width: 16vh; 358 | overflow: hidden; 359 | } 360 | 361 | /* Phone Notification END */ 362 | 363 | .call-notifications { 364 | display: none; 365 | position: absolute; 366 | background: #e67d22ea; 367 | height: 9vh; 368 | width: 34vh; 369 | bottom: 16vh; 370 | right: -35vh; 371 | border-radius: 1.7vh; 372 | z-index: -5; 373 | } 374 | .call-notifications-shake { 375 | /* Start the shake animation and make the animation last for 0.5 seconds */ 376 | animation: shake 0.5s; 377 | 378 | /* When the animation is finished, start again */ 379 | animation-iteration-count: infinite; 380 | } 381 | 382 | @keyframes shake { 383 | 0% { transform: translate(1px, 1px) rotate(0deg); } 384 | 10% { transform: translate(-1px, -2px) rotate(-1deg); } 385 | 20% { transform: translate(-3px, 0px) rotate(1deg); } 386 | 30% { transform: translate(3px, 2px) rotate(0deg); } 387 | 40% { transform: translate(1px, -1px) rotate(1deg); } 388 | 50% { transform: translate(-1px, 2px) rotate(-1deg); } 389 | 60% { transform: translate(-3px, 1px) rotate(0deg); } 390 | 70% { transform: translate(3px, 1px) rotate(-1deg); } 391 | 80% { transform: translate(-1px, -1px) rotate(1deg); } 392 | 90% { transform: translate(1px, 2px) rotate(0deg); } 393 | 100% { transform: translate(1px, -2px) rotate(-1deg); } 394 | } 395 | 396 | .screen-notifications-container { 397 | display: none; 398 | position: absolute; 399 | background: rgba(29, 160, 242, 0.9); 400 | height: 9vh; 401 | width: 34vh; 402 | bottom: 5vh; 403 | right: -35vh; 404 | border-radius: 1.7vh; 405 | z-index: -5; 406 | } 407 | 408 | .screen-notification-icon { 409 | position: absolute; 410 | line-height: 9.3vh; 411 | left: 2vh; 412 | font-size: 3.75vh; 413 | color: white; 414 | } 415 | 416 | .screen-notification-title { 417 | position: absolute; 418 | line-height: 5.5vh; 419 | left: 7.5vh; 420 | font-size: 1.5vh; 421 | color: white; 422 | font-family: 'Poppins', sans-serif; 423 | } 424 | 425 | .screen-notification-content { 426 | position: absolute; 427 | top: 4.2vh; 428 | left: 7.5vh; 429 | font-size: 1.2vh; 430 | color: white; 431 | font-family: 'Poppins', sans-serif; 432 | height: 3.5vh; 433 | width: 26vh; 434 | overflow: hidden; 435 | } 436 | 437 | .call-notifications-icon { 438 | position: absolute; 439 | line-height: 9.3vh; 440 | left: 2vh; 441 | font-size: 3.75vh; 442 | color: white; 443 | transform: rotate(90deg); 444 | } 445 | 446 | .call-notifications-title { 447 | position: absolute; 448 | line-height: 5.5vh; 449 | left: 7.5vh; 450 | font-size: 1.5vh; 451 | color: white; 452 | font-family: 'Poppins', sans-serif; 453 | } 454 | 455 | .call-notifications-content { 456 | position: absolute; 457 | top: 4.2vh; 458 | left: 7.5vh; 459 | font-size: 1.2vh; 460 | color: white; 461 | font-family: 'Poppins', sans-serif; 462 | height: 3.5vh; 463 | width: 26vh; 464 | overflow: hidden; 465 | } 466 | 467 | .app-unread-alerts { 468 | position: absolute; 469 | width: 2vh; 470 | height: 2vh; 471 | top: -.5vh; 472 | left: -.5vh; 473 | color: white; 474 | text-align: center; 475 | line-height: 2vh; 476 | background: #d63031; 477 | border-radius: 50%; 478 | font-family: 'Poppins', sans-serif; 479 | font-size: 1.1vh; 480 | } 481 | 482 | .emergency-button { 483 | position: absolute; 484 | right: 3vh; 485 | top: 10vh; 486 | width: 33vh; 487 | height: 20vh; 488 | background-color: #004682; 489 | /* border: .1vh solid #002f5831; */ 490 | border-radius: 1vh; 491 | overflow: hidden; 492 | box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.199); 493 | } 494 | 495 | .emergency-button-header { 496 | position: absolute; 497 | background-color: #ffffff; 498 | height: 3.5vh; 499 | top: 0; 500 | width: 100%; 501 | } 502 | 503 | .emergency-button-footer { 504 | position: absolute; 505 | background-color: #ffffff; 506 | height: 2.5vh; 507 | bottom: 0; 508 | width: 100%; 509 | } 510 | 511 | .police-logo-2 { 512 | position: absolute; 513 | width: 6vh; 514 | margin: 0 auto; 515 | left: 0; 516 | right: 0; 517 | top: .5vh; 518 | } 519 | 520 | .police-logo-3 { 521 | position: absolute; 522 | width: 15vh; 523 | margin: 0 auto; 524 | left: 0; 525 | right: 0; 526 | bottom: 0; 527 | } -------------------------------------------------------------------------------- /html/js/crypto.js: -------------------------------------------------------------------------------- 1 | var SelectedCryptoTab = Config.DefaultCryptoPage; 2 | var ActionTab = null; 3 | $(".cryptotab-"+SelectedCryptoTab).css({"display":"block"}); 4 | $(".crypto-header-footer").find('[data-cryptotab="'+SelectedCryptoTab+'"]').addClass('crypto-header-footer-item-selected'); 5 | 6 | var CryptoData = []; 7 | CryptoData.Portfolio = 0; 8 | CryptoData.Worth = 1000; 9 | CryptoData.WalletId = null; 10 | CryptoData.History = []; 11 | 12 | function SetupCryptoData(Crypto) { 13 | CryptoData.History = Crypto.History; 14 | CryptoData.Portfolio = (Crypto.Portfolio).toFixed(6); 15 | CryptoData.Worth = Crypto.Worth; 16 | CryptoData.WalletId = Crypto.WalletId; 17 | 18 | $(".crypto-action-page-wallet").html("Wallet: "+CryptoData.Portfolio+" Qbit('s)"); 19 | $(".crypto-walletid").html(CryptoData.WalletId); 20 | $(".cryptotab-course-list").html(""); 21 | if (CryptoData.History.length > 0) { 22 | CryptoData.History = CryptoData.History.reverse(); 23 | $.each(CryptoData.History, function(i, change){ 24 | var PercentageChange = ((change.NewWorth - change.PreviousWorth) / change.PreviousWorth) * 100; 25 | var PercentageElement = ' +('+Math.ceil(PercentageChange)+'%)'; 26 | if (PercentageChange < 0 ) { 27 | PercentageChange = (PercentageChange * -1); 28 | PercentageElement = ' -('+Math.ceil(PercentageChange)+'%)'; 29 | } 30 | var Element = '
' + 31 | '' + 32 | 'Value change' + 33 | '$'+change.PreviousWorth+' to $'+change.NewWorth+''+PercentageElement+'' + 34 | '
'; 35 | 36 | $(".cryptotab-course-list").append(Element); 37 | }); 38 | } 39 | 40 | $(".crypto-portofolio").find('p').html(CryptoData.Portfolio); 41 | $(".crypto-course").find('p').html("$"+CryptoData.Worth); 42 | $(".crypto-volume").find('p').html("$"+Math.ceil(CryptoData.Portfolio * CryptoData.Worth)); 43 | } 44 | 45 | function UpdateCryptoData(Crypto) { 46 | CryptoData.History = Crypto.History; 47 | CryptoData.Portfolio = (Crypto.Portfolio).toFixed(6); 48 | CryptoData.Worth = Crypto.Worth; 49 | CryptoData.WalletId = Crypto.WalletId; 50 | 51 | $(".crypto-action-page-wallet").html("Wallet: "+CryptoData.Portfolio+" Qbit('s)"); 52 | $(".crypto-walletid").html(CryptoData.WalletId); 53 | $(".cryptotab-course-list").html(""); 54 | if (CryptoData.History.length > 0) { 55 | CryptoData.History = CryptoData.History.reverse(); 56 | $.each(CryptoData.History, function(i, change){ 57 | var PercentageChange = ((change.NewWorth - change.PreviousWorth) / change.PreviousWorth) * 100; 58 | var PercentageElement = ' +('+Math.ceil(PercentageChange)+'%)'; 59 | if (PercentageChange < 0 ) { 60 | PercentageChange = (PercentageChange * -1); 61 | PercentageElement = ' -('+Math.ceil(PercentageChange)+'%)'; 62 | } 63 | var Element = '
' + 64 | '' + 65 | 'Value change' + 66 | '$'+change.PreviousWorth+' to $'+change.NewWorth+''+PercentageElement+'' + 67 | '
'; 68 | 69 | $(".cryptotab-course-list").append(Element); 70 | }); 71 | } 72 | 73 | $(".crypto-portofolio").find('p').html(CryptoData.Portfolio); 74 | $(".crypto-course").find('p').html("$"+CryptoData.Worth); 75 | $(".crypto-volume").find('p').html("$"+Math.ceil(CryptoData.Portfolio * CryptoData.Worth)); 76 | } 77 | 78 | function RefreshCryptoTransactions(data) { 79 | $(".cryptotab-transactions-list").html(""); 80 | if (data.CryptoTransactions.length > 0) { 81 | data.CryptoTransactions = (data.CryptoTransactions).reverse(); 82 | $.each(data.CryptoTransactions, function(i, transaction){ 83 | var Title = ""+transaction.TransactionTitle+"" 84 | if (transaction.TransactionTitle == "Sold" || transaction.TransactionTitle == "Transferred") { 85 | Title = ""+transaction.TransactionTitle+"" 86 | } 87 | var Element = '
'+Title+' '+transaction.TransactionMessage+'
'; 88 | 89 | $(".cryptotab-transactions-list").append(Element); 90 | }); 91 | } 92 | } 93 | 94 | $(document).on('click', '.crypto-header-footer-item', function(e){ 95 | e.preventDefault(); 96 | 97 | var CurrentTab = $(".crypto-header-footer").find('[data-cryptotab="'+SelectedCryptoTab+'"]'); 98 | var SelectedTab = this; 99 | var HeaderTab = $(SelectedTab).data('cryptotab'); 100 | 101 | if (HeaderTab !== SelectedCryptoTab) { 102 | $(CurrentTab).removeClass('crypto-header-footer-item-selected'); 103 | $(SelectedTab).addClass('crypto-header-footer-item-selected'); 104 | $(".cryptotab-"+SelectedCryptoTab).css({"display":"none"}); 105 | $(".cryptotab-"+HeaderTab).css({"display":"block"}); 106 | SelectedCryptoTab = $(SelectedTab).data('cryptotab'); 107 | } 108 | }); 109 | 110 | $(document).on('click', '.cryptotab-general-action', function(e){ 111 | e.preventDefault(); 112 | 113 | var Tab = $(this).data('action'); 114 | 115 | $(".crypto-action-page").css({"display":"block"}); 116 | $(".crypto-action-page").animate({ 117 | left: 0, 118 | }, 300); 119 | $(".crypto-action-page-"+Tab).css({"display":"block"}); 120 | QB.Phone.Functions.HeaderTextColor("black", 300); 121 | ActionTab = Tab; 122 | }); 123 | 124 | $(document).on('click', '#cancel-crypto', function(e){ 125 | e.preventDefault(); 126 | 127 | $(".crypto-action-page").animate({ 128 | left: -30+"vh", 129 | }, 300, function(){ 130 | $(".crypto-action-page-"+ActionTab).css({"display":"none"}); 131 | $(".crypto-action-page").css({"display":"none"}); 132 | ActionTab = null; 133 | }); 134 | QB.Phone.Functions.HeaderTextColor("white", 300); 135 | }); 136 | 137 | function CloseCryptoPage() { 138 | $(".crypto-action-page").animate({ 139 | left: -30+"vh", 140 | }, 300, function(){ 141 | $(".crypto-action-page-"+ActionTab).css({"display":"none"}); 142 | $(".crypto-action-page").css({"display":"none"}); 143 | ActionTab = null; 144 | }); 145 | QB.Phone.Functions.HeaderTextColor("white", 300); 146 | } 147 | 148 | $(document).on('click', '#buy-crypto', function(e){ 149 | e.preventDefault(); 150 | 151 | var Coins = $(".crypto-action-page-buy-crypto-input-coins").val(); 152 | var Price = Math.ceil(Coins * CryptoData.Worth); 153 | 154 | if ((Coins !== "") && (Price !== "")) { 155 | if (QB.Phone.Data.PlayerData.money.bank >= Price) { 156 | $.post('https://qb-phone/BuyCrypto', JSON.stringify({ 157 | Coins: Coins, 158 | Price: Price, 159 | }), function(CryptoData){ 160 | if (CryptoData !== false) { 161 | UpdateCryptoData(CryptoData) 162 | CloseCryptoPage() 163 | QB.Phone.Data.PlayerData.money.bank = parseInt(QB.Phone.Data.PlayerData.money.bank) - parseInt(Price); 164 | QB.Phone.Notifications.Add("fas fa-university", "QBank", "$ "+Price+",- has been withdrawn from your balance!", "#badc58", 2500); 165 | } else { 166 | QB.Phone.Notifications.Add("fas fa-chart-pie", "Crypto", "You don't have enough money..", "#badc58", 1500); 167 | } 168 | }); 169 | } else { 170 | QB.Phone.Notifications.Add("fas fa-chart-pie", "Crypto", "You don't have enough money..", "#badc58", 1500); 171 | } 172 | } else { 173 | QB.Phone.Notifications.Add("fas fa-chart-pie", "Crypto", "Fill out all fields!", "#badc58", 1500); 174 | } 175 | }); 176 | 177 | $(document).on('click', '#sell-crypto', function(e){ 178 | e.preventDefault(); 179 | if(e.handled !== true) { 180 | e.handled = true; 181 | 182 | var Coins = $(".crypto-action-page-sell-crypto-input-coins").val(); 183 | var Price = Math.ceil(Coins * CryptoData.Worth); 184 | 185 | if ((Coins !== "") && (Price !== "")) { 186 | if (CryptoData.Portfolio >= parseInt(Coins)) { 187 | $.post('https://qb-phone/SellCrypto', JSON.stringify({ 188 | Coins: Coins, 189 | Price: Price, 190 | }), function(CryptoData){ 191 | if (CryptoData !== false) { 192 | UpdateCryptoData(CryptoData) 193 | CloseCryptoPage() 194 | QB.Phone.Data.PlayerData.money.bank = parseInt(QB.Phone.Data.PlayerData.money.bank) + parseInt(Price); 195 | QB.Phone.Notifications.Add("fas fa-university", "QBank", "$ "+Price+",- has been added to your balance!", "#badc58", 2500); 196 | } else { 197 | QB.Phone.Notifications.Add("fas fa-chart-pie", "Crypto", "You don't have enough Qbits..", "#badc58", 1500); 198 | } 199 | }); 200 | } else { 201 | QB.Phone.Notifications.Add("fas fa-chart-pie", "Crypto", "You don't have enough Qbits..", "#badc58", 1500); 202 | } 203 | } else { 204 | QB.Phone.Notifications.Add("fas fa-chart-pie", "Crypto", "Fill out all fields!", "#badc58", 1500); 205 | } 206 | CloseCryptoPage(); 207 | e.handled = false; 208 | } 209 | }); 210 | 211 | $(document).on('click', '#transfer-crypto', function(e){ 212 | e.preventDefault(); 213 | 214 | var Coins = $(".crypto-action-page-transfer-crypto-input-coins").val(); 215 | var WalletId = $(".crypto-action-page-transfer-crypto-input-walletid").val(); 216 | 217 | if ((Coins !== "") && (WalletId !== "")) { 218 | if (CryptoData.Portfolio >= Coins) { 219 | if (WalletId !== CryptoData.WalletId) { 220 | $.post('https://qb-phone/TransferCrypto', JSON.stringify({ 221 | Coins: Coins, 222 | WalletId: WalletId, 223 | }), function(CryptoData){ 224 | if (CryptoData == "notenough") { 225 | QB.Phone.Notifications.Add("fas fa-chart-pie", "Crypto", "You don't have enough Qbits..", "#badc58", 1500); 226 | } else if (CryptoData == "notvalid") { 227 | QB.Phone.Notifications.Add("fas fa-university", "Crypto", "this Wallet-ID doesn't exist!", "#badc58", 2500); 228 | } else { 229 | UpdateCryptoData(CryptoData) 230 | CloseCryptoPage() 231 | QB.Phone.Notifications.Add("fas fa-university", "Crypto", "You transferred "+Coins+",- to "+WalletId+"!", "#badc58", 2500); 232 | } 233 | }); 234 | } else { 235 | QB.Phone.Notifications.Add("fas fa-university", "Crypto", "You can't transfer to yourself..", "#badc58", 2500); 236 | } 237 | } else { 238 | QB.Phone.Notifications.Add("fas fa-chart-pie", "Crypto", "You don't have enough Qbits..", "#badc58", 1500); 239 | } 240 | } else { 241 | QB.Phone.Notifications.Add("fas fa-chart-pie", "Crypto", "Fill out all fields!!", "#badc58", 1500); 242 | } 243 | }); 244 | 245 | // $(".crypto-action-page-buy-crypto-input-money").keyup(function(){ 246 | // var MoneyInput = this.value 247 | // $(".crypto-action-page-buy-crypto-input-coins").val((MoneyInput / CryptoData.Worth).toFixed(6)); 248 | // }); 249 | 250 | 251 | $(".crypto-action-page-buy-crypto-input-coins").keyup(function(){ 252 | var MoneyInput = this.value 253 | var MoneyAmount = Math.ceil(CryptoData.Worth * MoneyInput) 254 | 255 | $(".crypto-action-page-buy-crypto-input-money").html(MoneyAmount+" Dollars"); 256 | }); 257 | 258 | // $(".crypto-action-page-sell-crypto-input-money").keyup(function(){ 259 | // var MoneyInput = this.value 260 | // $(".crypto-action-page-sell-crypto-input-coins").val((MoneyInput / CryptoData.Worth).toFixed(6)); 261 | // }); 262 | 263 | 264 | $(".crypto-action-page-sell-crypto-input-coins").keyup(function(){ 265 | var MoneyInput = this.value 266 | var MoneyAmount = Math.ceil(CryptoData.Worth * MoneyInput) 267 | 268 | $(".crypto-action-page-sell-crypto-input-money").html(MoneyAmount+" Dollars"); 269 | }); 270 | --------------------------------------------------------------------------------