forked from Simnation/Main
456 lines
No EOL
23 KiB
HTML
456 lines
No EOL
23 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.css"></link>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
|
|
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
|
|
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.0-rc.2/dist/quill.js"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.0-rc.2/dist/quill.snow.css" rel="stylesheet">
|
|
<title>Brutal Police Job</title>
|
|
</head>
|
|
|
|
<body style="background: none;">
|
|
|
|
<div class="police_menu" id="police_menu">
|
|
<div class="circle_container">
|
|
</div>
|
|
<div class="circles_label"></div>
|
|
</div>
|
|
|
|
<div class="interactions" id="interactions">
|
|
<div class="label mx-auto d-block mt-3">
|
|
<h2>Interactions</h2>
|
|
<div class="background_effect"></div>
|
|
</div>
|
|
<div class="int_con mt-3">
|
|
<div class="row row-cols-1">
|
|
<div class="int_con_sec">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="shop">
|
|
<button class="details_btn px-3 m-3 float-end" id="shop_back" onclick="CloseShop(), CreateArmoryMenu()">back <i class="fa-solid fa-chevron-right"></i></button>
|
|
<h2 class="mt-3">SHOP</h2>
|
|
<div class="shop_elements_container row row-cols-3">
|
|
</div>
|
|
<div class="checkout_container">
|
|
<hr>
|
|
<h3>TOTAL: 0<money>$</money></h3>
|
|
<button class="buy_btn" onclick="BuyInShop()">BUY</button>
|
|
</div>
|
|
<div class="slider_btn" id="shop_slider" onclick="ChangeSliderbtn(id)">
|
|
<div class="slider" id="slider_shop"></div>
|
|
<div class="row button_container">
|
|
<div class="col"><i class="fa-solid fa-wallet"></i></div>
|
|
<div class="col"><i class="fa-solid fa-building-columns"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="MDT" id="MDT">
|
|
<img class="LSDP_logo_img" src="assets/LSPD.png"></img>
|
|
<div class="control_btn_container">
|
|
<div class="row row-cols-1">
|
|
<div class="col">
|
|
<button class="control_btn mt-2 mx-auto d-block" id="home" onclick="SwitchPage(id)">
|
|
<i class="fa-solid fa-house"></i>
|
|
<div class="background_effect"></div>
|
|
</button>
|
|
<hr class="mt-3 mb-0">
|
|
</div>
|
|
<div class="col">
|
|
<button class="control_btn mt-3 mx-auto d-block" id="search" onclick="SwitchPage(id)">
|
|
<i class="fa-solid fa-magnifying-glass"></i>
|
|
<div class="background_effect"></div>
|
|
</button>
|
|
</div>
|
|
<div class="col">
|
|
<button class="control_btn mt-3 mx-auto d-block" id="camera" onclick="SwitchPage(id)">
|
|
<i class="fa-solid fa-video"></i>
|
|
<div class="background_effect"></div>
|
|
</button>
|
|
</div>
|
|
<div class="col">
|
|
<button class="control_btn mt-3 mx-auto d-block" id="sos_alert" onclick="SwitchPage(id)">
|
|
<i class="fa-solid fa-bell"></i>
|
|
<div class="background_effect"></div>
|
|
</button>
|
|
</div>
|
|
<div class="col">
|
|
<button class="control_btn mt-3 mx-auto d-block" id="incidents" onclick="SwitchPage(id)">
|
|
<i class="fa-solid fa-newspaper"></i>
|
|
<div class="background_effect"></div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="margin-left: 100px; padding: 10px;">
|
|
<div class="page_data_container">
|
|
<div class="home_label mt-3">
|
|
<div class="row">
|
|
<div class="col ms-3 mt-1" id="job_name"></div>
|
|
<div class="col-2 mt-1" id="home_date">date 213 23</div>
|
|
<div class="col me-3 mt-1 text-end" id="street"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-3 mx-2">
|
|
<div class="col">
|
|
<div class="home_stat_con mx-auto d-block">
|
|
<div class="label">Cops</div>
|
|
<div class="main" id="available_cops">0</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="home_stat_con mx-auto d-block">
|
|
<div class="label">Rank</div>
|
|
<div class="main small" id="player_rang"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="home_stat_con mx-auto d-block">
|
|
<div class="label">Salary</div>
|
|
<div class="main" id="salary">100$</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="welcome_text mt-3">Welcome,<br> <span class="hand_written">Name</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cam_menu">
|
|
<div class="cam_online px-3"><i class="fa-solid fa-circle fa-fade my-2"></i> online</div>
|
|
<div class="cam_label px-3">Cam name</div>
|
|
</div>
|
|
|
|
<div class="vehicle_menu">
|
|
<div class="vehicle_control" id="vehicle_control">
|
|
<div class="row mx-1">
|
|
<div class="col p-0">
|
|
<div class="vehicle_btn mx-auto d-block" id="plate">
|
|
<i class="fa-solid fa-mattress-pillow"></i>
|
|
<h4>PLT</h4>
|
|
</div>
|
|
</div>
|
|
<div class="col p-0">
|
|
<div class="vehicle_btn mx-auto d-block" id="siren">
|
|
<i class="fa-solid fa-volume-high"></i>
|
|
<h4>SRN</h4>
|
|
</div>
|
|
</div>
|
|
<div class="col p-0">
|
|
<div class="vehicle_btn mx-auto d-block" id="horn">
|
|
<i class="fa-solid fa-bullhorn"></i>
|
|
<h4>HORN</h4>
|
|
</div>
|
|
</div>
|
|
<div class="col p-0">
|
|
<div class="vehicle_btn mx-auto d-block" id="light">
|
|
<i class="fa-solid fa-lightbulb"></i>
|
|
<h4>LGHT</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="plate_reader" id="plate_reader">
|
|
<div class="indicator" id="top"></div>
|
|
<div class="indicator" id="bottom"></div>
|
|
<h4>FRONT</h4>
|
|
<div class="row mx-1 mb-2">
|
|
<div class="col">
|
|
<div class="veh_speed mx-auto d-block" id="front_speed">0</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="veh_plate mx-auto d-block" id="front_plate">None</div>
|
|
</div>
|
|
</div>
|
|
<h4>REAR</h4>
|
|
<div class="row mx-1">
|
|
<div class="col">
|
|
<div class="veh_speed mx-auto d-block" id="rear_speed">0</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="veh_plate mx-auto d-block" id="rear_plate">None</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="speeding_notify" id="speeding_notify">
|
|
<div class="title">SPEEDING</div>
|
|
<div class="main_text"><span class="your_speed"></span><span class="speed_limit"></span></div>
|
|
<div class="fine"></div>
|
|
</div>
|
|
|
|
<div class="jail_hud">
|
|
<h3>Remained time: <span class="minutes"></span></h3>
|
|
</div>
|
|
|
|
<div class="basic_container" id="create_citizen_call">
|
|
<div class="label">Citizen Call
|
|
<div class="background_effect"></div>
|
|
</div>
|
|
<div class="input-group mt-3 px-3 h-50">
|
|
<textarea class="form-control" id="in_citizen_call_reason" placeholder="Type your problem..." oninput="RefreshCreateCallBTN()"></textarea>
|
|
</div>
|
|
<button class="submenu_btn px-3 mt-3 mx-auto d-block" id="create_call_btn" disabled onclick="CreateCall()">Create</button>
|
|
</div>
|
|
|
|
<div class="basic_container" id="area_lock">
|
|
<div class="label">Lock Area
|
|
<div class="background_effect"></div>
|
|
</div>
|
|
<div class="input-group input-group-lg mt-3 px-3">
|
|
<input type="text" id="area_lock_label" class="form-control text-center" placeholder="Label..." oninput="RefreshCreateLockBTN()" style="background-color: rgb(61, 61, 61);">
|
|
</div>
|
|
|
|
<div class="item_con mt-3 mx-auto d-block">
|
|
<h4>Minutes</h4>
|
|
<input type="range" class="range mx-auto d-block" value="1" min="1" max="30" id="min_area_lock" oninput="SyncDataMin(id)">
|
|
<h6 class="range_number" id="range_min_number">1min</h6>
|
|
</div>
|
|
|
|
<div class="item_con mt-3 mx-auto d-block">
|
|
<h4>Range</h4>
|
|
<input type="range" class="range mx-auto d-block" value="20" min="20" max="150" id="range_area_lock" oninput="SyncDataRange(id)">
|
|
<h6 class="range_number" id="range_number">20m</h6>
|
|
</div>
|
|
|
|
<div class="item_con mt-3 mx-auto d-block">
|
|
<h4>Blip</h4>
|
|
<div class="row">
|
|
<div class="col"><button class="blip_btn active_btn mx-auto d-block" id="456" onclick="ChangeBlipBTN(id)"><img src="assets/blip_1.png"></button></div>
|
|
<div class="col"><button class="blip_btn mx-auto d-block" id="163" onclick="ChangeBlipBTN(id)"><img src="assets/blip_2.png"></button></div>
|
|
<div class="col"><button class="blip_btn mx-auto d-block" id="364" onclick="ChangeBlipBTN(id)"><img src="assets/blip_3.png"></button></div>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="submenu_btn px-3 mt-3 mx-auto d-block" id="create_lock_btn" disabled onclick="CreateLock()">Create</button>
|
|
</div>
|
|
|
|
<div class="vehicle_livery" id="vehicle_livery">
|
|
<div class="val_con mx-auto d-block px-3" id="livery"></div>
|
|
<h5>You can change the livery with the ⬅️ and ➡️</h5>
|
|
</div>
|
|
|
|
<div class="delete_object px-3 py-2" id="delete_object">
|
|
<h5>Deleting objects</h5>
|
|
<div class="background_effect"></div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="details_modal">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg">
|
|
<div class="modal-content pb-2" style="background: var(--secondary_color); border-radius: 13px; color: var(--text_color);">
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col"><button class="details_btn float-start px-3" data-bs-dismiss="modal"><i class="fa-solid fa-chevron-left"></i> Back</button></div>
|
|
<div class="col"><h2 class="modal-title me-3 text-end" id="title_text">Person details</h2></div>
|
|
</div>
|
|
<div class="datas_container">
|
|
|
|
</div>
|
|
<div class="mt-2">
|
|
<div class="notes_label">
|
|
<div class="row">
|
|
<div class="col">
|
|
<h3 class="mt-1"><b>Notes</b></h3>
|
|
</div>
|
|
<div class="col">
|
|
<button class="details_btn px-3 me-2 float-end" id="none" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#note_modal">New note</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="notes_container mt-3">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="jail_reason_modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-md" style="width: 400px;">
|
|
<div class="modal-content pb-2" style="background: var(--secondary_color); border-radius: 13px; color: var(--text_color);">
|
|
<div class="modal-body">
|
|
<div class="modal_header">
|
|
<button class="details_btn m-1 float-start px-3" id="jail_back_btn" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#details_modal"><i class="fa-solid fa-chevron-left"></i> Back</button>
|
|
<h2 class="modal-title float-end me-3 text-center" id="title_text">Jail</h2>
|
|
<div class="background_effect"></div>
|
|
</div>
|
|
|
|
<div class="input-group input-group-lg mt-3">
|
|
<input type="text" id="in_jail_time" class="form-control mx-3" placeholder="Time..." oninput="RefreshJailBTN()" onkeypress="return isNumber(event)" style="background-color: rgb(72, 72, 72);">
|
|
</div>
|
|
|
|
<div class="input-group mt-3">
|
|
<textarea class="form-control mx-3" id="in_jail_reason" placeholder="Reason..." oninput="RefreshJailBTN()"></textarea>
|
|
</div>
|
|
<button class="submenu_btn px-3 mt-3 mx-auto d-block" id="jail_btn" disabled data-bs-dismiss="modal" onclick="SendJail()">Jail</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="fine_modal">
|
|
<div class="modal-dialog modal-dialog-centered modal-md" style="width: 400px;">
|
|
<div class="modal-content pb-2" style="background: var(--secondary_color); border-radius: 13px; color: var(--text_color);">
|
|
<div class="modal-body">
|
|
<div class="modal_header mx-auto d-block">
|
|
<button class="details_btn m-1 float-start px-3" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#details_modal"><i class="fa-solid fa-chevron-left"></i> Back</button>
|
|
<h2 class="modal-title float-end me-3 text-center" id="title_text">Create fine</h2>
|
|
<div class="background_effect"></div>
|
|
</div>
|
|
|
|
<div class="input-group input-group-lg mt-3">
|
|
<input type="text" id="in_fine_name" placeholder="Label..." class="form-control mx-3" oninput="RefreshFineBTN()" style="background-color: rgb(72, 72, 72);">
|
|
</div>
|
|
|
|
<div class="input-group input-group-lg mt-3">
|
|
<input type="text" id="in_fine_amount" placeholder="Amount..." class="form-control mx-3" oninput="RefreshFineBTN()" onkeypress="return isNumber(event)" style="background-color: rgb(72, 72, 72);">
|
|
</div>
|
|
|
|
<button class="submenu_btn px-3 mt-3 mx-auto d-block" id="fine_btn" disabled data-bs-dismiss="modal" onclick="SendFine()">Create</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="player_fines_modal">
|
|
<div class="modal-dialog modal-dialog-centered modal-md">
|
|
<div class="modal-content pb-2" style="background: var(--secondary_color); border-radius: 13px; color: var(--text_color);">
|
|
<div class="modal-body">
|
|
<div class="modal_header mx-auto d-block">
|
|
<button class="details_btn m-1 float-start px-3" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#details_modal"><i class="fa-solid fa-chevron-left"></i> Back</button>
|
|
<h2 class="modal-title float-end me-3 text-center" id="title_text">Fines</h2>
|
|
<div class="background_effect"></div>
|
|
</div>
|
|
|
|
<div class="fine_title_container mt-3">
|
|
<div class="row">
|
|
<div class="col d-flex align-items-center justify-content-center">
|
|
<h2 class="my-1" id="fines_all">All: -</h2>
|
|
</div>
|
|
<div class="col d-flex align-items-center justify-content-center">
|
|
<h2 class="my-1" id="fines_count">Count: -</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fines_container">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="player_incidents_modal">
|
|
<div class="modal-dialog modal-dialog-centered modal-md">
|
|
<div class="modal-content pb-2" style="background: var(--secondary_color); border-radius: 13px; color: var(--text_color);">
|
|
<div class="modal-body">
|
|
<div class="modal_header mx-auto d-block">
|
|
<button class="details_btn m-1 float-start px-3" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#details_modal"><i class="fa-solid fa-chevron-left"></i> Back</button>
|
|
<h2 class="modal-title float-end me-3 text-center" id="title_text">Incidents</h2>
|
|
<div class="background_effect"></div>
|
|
</div>
|
|
|
|
<div class="incidents_container mt-3">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="call_modal">
|
|
<div class="modal-dialog modal-dialog-centered modal-md">
|
|
<div class="modal-content pb-2" style="background: var(--secondary_color); border-radius: 13px; color: var(--text_color);">
|
|
<div class="modal-body">
|
|
<div class="modal_header mx-auto d-block">
|
|
<div class="background_effect"></div>
|
|
<div class="row">
|
|
<div class="col"><button class="details_btn m-1 float-start px-3" data-bs-dismiss="modal"><i class="fa-solid fa-chevron-left"></i> Back</button></div>
|
|
<div class="col-5"><h2 class="modal-title mx-auto d-block text-center" id="title_text">Citizen call</h2></div>
|
|
<div class="col"><button class="details_btn px-3 m-1 float-end" onclick="SendPinOnMap()"><i class="fa-solid fa-location-dot"></i> Pin</button></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="call_actions_container">
|
|
<div class="item_con mt-3 mx-auto d-block">
|
|
<button class="submenu_btn px-3 my-3 mx-auto d-block" onclick="SendPinOnMap()">Pin on map</button>
|
|
</div>
|
|
|
|
<div class="input-group mt-3 call_reason_con">
|
|
<textarea class="form-control" id="in_call_reason" oninput="RefreshCloseCallBTN()" placeholder="Reason to close"></textarea>
|
|
</div>
|
|
<button class="submenu_btn px-3 my-3 mx-auto d-block" id="close_call" onclick="CloseCall()" disabled>Close</button>
|
|
</div>
|
|
|
|
<h3 class="text-white text-center mt-3" id="involved">Policemans involved</h3>
|
|
<div class="involved_container mx-auto d-block">
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="note_modal">
|
|
<div class="modal-dialog modal-dialog-centered modal-md" style="width: 400px;">
|
|
<div class="modal-content pb-2" style="background: var(--secondary_color); border-radius: 13px; color: var(--text_color);">
|
|
<div class="modal-body">
|
|
<div class="modal_header mx-auto d-block">
|
|
<button class="details_btn m-1 float-start px-3" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#details_modal"><i class="fa-solid fa-chevron-left"></i> Back</button>
|
|
<h2 class="modal-title float-end me-3 text-center" id="title_text">Create note</h2>
|
|
<div class="background_effect"></div>
|
|
</div>
|
|
|
|
<div class="input-group mt-3">
|
|
<textarea class="form-control mx-3" id="in_note" placeholder="Write something..." oninput="RefreshNoteBTN()"></textarea>
|
|
</div>
|
|
|
|
<button class="submenu_btn px-3 mt-3 mx-auto d-block" id="note_btn" disabled data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#details_modal" onclick="CreateNote()">Create</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="add_img_modal">
|
|
<div class="modal-dialog modal-dialog-centered modal-md" style="width: 400px;">
|
|
<div class="modal-content pb-2" style="background: var(--secondary_color); border-radius: 13px; color: var(--text_color);">
|
|
<div class="modal-body">
|
|
<div class="modal_header mx-auto d-block">
|
|
<button class="details_btn m-1 float-start px-3" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#details_modal"><i class="fa-solid fa-chevron-left"></i> Back</button>
|
|
<h2 class="modal-title float-end me-3 text-center" id="title_text">Edit IMG</h2>
|
|
<div class="background_effect"></div>
|
|
</div>
|
|
|
|
<div class="input-group mt-3">
|
|
<textarea class="form-control" placeholder="Add the URL.." id="in_add_img"></textarea>
|
|
</div>
|
|
|
|
<button class="submenu_btn px-3 mt-3 mx-auto d-block" id="note_btn" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#details_modal" onclick="AddIMG()">Add</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js">
|
|
</script>
|
|
<script src="script.js"></script>
|
|
</html> |