forked from Simnation/Main
513 lines
29 KiB
HTML
513 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
|
|
<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://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
|
|
<script src="https://jsuites.net/v4/jsuites.js"></script>
|
|
<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
|
|
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
|
|
<title>Brutal Housing</title>
|
|
</head>
|
|
|
|
<body style="background: none;">
|
|
<div class="properties_menu" id="properties_menu" >
|
|
<object id="plugin_1" type="application/x-cfx-game-view" style="position: absolute; top: 0%; left: 0%; height: 100%; width: 100%;"></object>
|
|
<div class="panel" id="properties_panel">
|
|
<div class="control_section d-flex flex-column align-items-center justify-content-center" id="property_control">
|
|
<div class="selector" id="property"></div>
|
|
<div class="control_btn" id="properties" onclick="SwitchPage(id)" style="background-image: url('assets/properties.png');"></div>
|
|
<div class="control_btn" id="controls" onclick="SwitchPage(id)" style="background-image: url('assets/layout.png');"></div>
|
|
<div class="control_btn" id="cameras" onclick="SwitchPage(id)" style="background-image: url('assets/camera.png');"></div>
|
|
<div class="control_btn" id="furnitures" onclick="SwitchPage(id)" style="background-image: url('assets/3d.png');"></div>
|
|
</div>
|
|
<div class="hidden_logo"></div>
|
|
|
|
<div class="header_title">BRUTAL <span class="highlight">HOUSING</span></div>
|
|
<div class="header">
|
|
<div class="small_icon green" id="header_door"><img src="assets/door.png"></div>
|
|
<div class="title" data-i18n="door_state"></div>
|
|
<div class="state" id="property_menu"></div>
|
|
|
|
<input type="text" class="property_name" id="property_name_in">
|
|
<div class="street"></div>
|
|
<button class="tutorial_btn" onclick="OpenTutorialPanel('properties_menu')"><i class="fa-solid fa-info"></i></button>
|
|
</div>
|
|
<div class="row" style="position: absolute; top: 90px; left: 123px; width: 770px;">
|
|
<div class="col px-0">
|
|
<div class="notifications" id="notifications">
|
|
|
|
</div>
|
|
</div>
|
|
<div class="col px-0 right_container">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bottom_container">
|
|
<div class="page_chooser float-end me-3" id="property_chooser">
|
|
<div class="page_element choosed"></div>
|
|
<div class="page_element"></div>
|
|
</div>
|
|
<div class="list_container">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="property_creation_menu" id="property_creation_menu">
|
|
<object id="plugin_2" type="application/x-cfx-game-view" style="position: absolute; top: 0%; left: 0%; height: 100%; width: 100%;"></object>
|
|
<div class="panel" id="panel_creation">
|
|
<div class="big_icon gray"><img src="assets/house.png"></div>
|
|
<div class="title"></div>
|
|
<div class="option_container">
|
|
<div class="row mb-3">
|
|
<div class="col d-flex flex-column align-items-center justify-content-center">
|
|
<div class="check_option">SHELL</div>
|
|
<div class="form-check custom-checkbox">
|
|
<input class="form-check-input" type="radio" name="hTypeRadio" id="SHELL" checked onclick="ChangeProperyInType(id)">
|
|
</div>
|
|
</div>
|
|
<div class="col d-flex flex-column align-items-center justify-content-center">
|
|
<div class="check_option">IPL</div>
|
|
<div class="form-check custom-checkbox">
|
|
<input class="form-check-input" type="radio" name="hTypeRadio" id="IPL" onclick="ChangeProperyInType(id)">
|
|
</div>
|
|
</div>
|
|
<div class="col d-flex flex-column align-items-center justify-content-center">
|
|
<div class="check_option">MLO</div>
|
|
<div class="form-check custom-checkbox">
|
|
<input class="form-check-input" type="radio" name="hTypeRadio" id="MLO" onclick="ChangeProperyInType(id)">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dropdown_container">
|
|
<div class="dropdown mt-3" style="width: 100%;">
|
|
<button class="option_dropdown_btn" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-i18n="choose"></button>
|
|
<ul class="dropdown-menu">
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-3" style="width: 420px; margin-left: 15px;">
|
|
<div class="col-8">
|
|
<div class="big_option_label" data-i18n="rentable_ability"></div>
|
|
</div>
|
|
<div class="col">
|
|
<label class="custom-control ios-switch float-end">
|
|
<input type="checkbox" id="rentable_input" class="ios-switch-control-input">
|
|
<span class="ios-switch-control-indicator"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="option_label" data-i18n="name_of_the_property"></div>
|
|
<div class="input-group input-group-lg" style="width: 420px; margin-left: 15px;">
|
|
<input type="text" id="property_name" class="form-control" data-i18n="name" placeholder="" style="height: 45px;" oninput="CheckIfCanCreateProperty()">
|
|
</div>
|
|
<div class="option_label" data-i18n="price"></div>
|
|
<div class="input-group input-group-lg" style="width: 420px; margin-left: 15px;">
|
|
<input type="text" id="property_price" class="form-control" data-i18n="amount" placeholder="" style="height: 45px;" onkeypress="return isNumber(event)" oninput="formatMoney(this), CheckIfCanCreateProperty()">
|
|
</div>
|
|
<div class="option_label" data-i18n="image_of_the_property"></div>
|
|
<div class="input-group input-group-lg" style="width: 420px; margin-left: 15px;">
|
|
<input type="text" id="property_img" class="form-control" data-i18n="url" placeholder="" style="height: 45px;" oninput="CheckIfCanCreateProperty()">
|
|
</div>
|
|
<div class="option_label" data-i18n="door_coords"></div>
|
|
<div class="doors_container">
|
|
<div class="row" style="width: 420px; margin-left: 15px;">
|
|
<div class="col p-0">
|
|
<div class="input-group input-group-lg" style="width: 200px;">
|
|
<input type="text" id="entry_door" class="form-control" data-i18n="entry_door" placeholder="" style="height: 45px;" disabled>
|
|
<button class="set_coord_btn" type="button" onclick="GetPlayerCurrentCoord()"><i class="fa-solid fa-location-dot"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="col p-0">
|
|
<div class="input-group input-group-lg float-end" style="width: 200px;">
|
|
<input type="text" id="exit_door" class="form-control" data-i18n="exit_door" placeholder="" style="height: 45px;" disabled>
|
|
<button class="set_coord_btn" id="set_exit_door" type="button" onclick="GetExitCoord()" disabled><i class="fa-solid fa-location-dot"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="garage_con">
|
|
<div class="option_label" data-i18n="vehicle_spawn_coords"></div>
|
|
<div class="input-group input-group-lg" style="width: 420px; margin-left: 15px;">
|
|
<input type="text" id="vehicle_exit" class="form-control" data-i18n="vehicle_spawn" placeholder="" style="height: 45px;" disabled>
|
|
<button class="set_coord_btn" type="button" onclick="GetVehicleExitCoord()"><i class="fa-solid fa-location-dot"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="option_label" data-i18n="address"></div>
|
|
<div class="row" style="width: 420px; margin-left: 15px;">
|
|
<div class="col p-0">
|
|
<div class="input-group input-group-lg" style="width: 300px;">
|
|
<input type="text" id="street_input" class="form-control" data-i18n="street" placeholder="Street" style="height: 45px;" disabled>
|
|
</div>
|
|
</div>
|
|
<div class="col p-0">
|
|
<div class="input-group input-group-lg float-end" style="width: 100px;">
|
|
<input type="text" id="street_number" class="form-control" placeholder="0" style="height: 45px;" onkeypress="return isNumber(event)" oninput="CheckIfCanCreateProperty()">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="house_con garage_id">
|
|
<div class="option_label" data-i18n="connect_with_garage"></div>
|
|
<div class="input-group input-group-lg" style="width: 420px; margin-left: 15px;">
|
|
<input type="text" id="garage_id_input" class="form-control" data-i18n="garage_id" placeholder="" style="height: 45px;" oninput="CheckGarageID(this.value)" onchange="CheckGarageID(this.value)">
|
|
</div>
|
|
</div>
|
|
<button class="create_property_btn" id="create_property_btn" disabled onclick="CreateProperty()" data-i18n="create"></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="clothe_menu" id="clothe_menu">
|
|
<object id="plugin3" type="application/x-cfx-game-view" style="position: absolute; top: 0%; left: 0%; height: 100vh; width: 100vw;"></object>
|
|
<div class="panel" id="panel_clothe">
|
|
<div class="title">CLOTHES</div>
|
|
<div class="clothe_conatiner">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="admin_menu" id="admin_menu">
|
|
<object id="plugin_admin" type="application/x-cfx-game-view" style="position: absolute; top: 0%; left: 0%; height: 100%; width: 100%;"></object>
|
|
<div class="panel" id="panel_admin">
|
|
<div class="header">
|
|
<div class="slider_container" id="admin">
|
|
<button class="property_type_btn" id="house_admin" onclick="ChangeAdminPropertyType(id)"></button>
|
|
<button class="property_type_btn" id="garage_admin" onclick="ChangeAdminPropertyType(id)"></button>
|
|
<div class="slider" id="admin"></div>
|
|
</div>
|
|
<button class="sold_btn" id="sold_btn" onclick="ChangeSoldProperties(document.getElementById('admin_search_input').value)"></button>
|
|
<button class="sold_btn" id="balance_btn" style="margin-left: 60px; background-image: url('assets/money.png');" onclick="OpenBalanceMenu()"></button>
|
|
<div class="header_title">BRUTAL <span class="highlight">HOUSING</span></div>
|
|
<div class="input-group input-group-lg rounded" style="position: absolute; top: 50%; right: 7.5px; transform: translate(0%, -50%); width: 250px;">
|
|
<input type="text" id="admin_search_input" class="form-control" data-i18n="search_by_name" placeholder="" onkeyup="CreateAdminMenu(this.value)">
|
|
<button class="search_btn" type="button" onclick="CreateAdminMenu(document.getElementById('admin_search_input').value)"><i class="fa-solid fa-magnifying-glass"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="properties_container">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property_sell_menu" id="property_sell_menu">
|
|
<div class="title" data-i18n="sell_property"></div>
|
|
<div class="slider_container" id="sell">
|
|
<div class="row">
|
|
<div class="col d-flex flex-column align-items-center justify-content-center p-0">
|
|
<button class="sell_type_btn" id="instant" onclick="ChangeSellType(id)" data-i18n="instant"></button>
|
|
</div>
|
|
<div class="col d-flex flex-column align-items-center justify-content-center p-0">
|
|
<button class="sell_type_btn" id="delayed" onclick="ChangeSellType(id)" data-i18n="delayed"></button>
|
|
</div>
|
|
</div>
|
|
<div class="slider" id="sell"></div>
|
|
</div>
|
|
<div class="container p-0" id="sell_container">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property_purchase_menu_from_rent" id="property_purchase_menu_from_rent">
|
|
<div class="title" data-i18n="purchase_property"></div>
|
|
<div class="row mt-3 mb-1" style="width: 420px; margin-left: 15px;">
|
|
<div class="col">
|
|
<div class="big_option_label" data-i18n="price_of_property"></div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="number_container float-end"></div>
|
|
</div>
|
|
</div>
|
|
<button class="purchase_property_btn" onclick="SendPurchaseRentedProperty()" data-i18n="purchase"></button>
|
|
</div>
|
|
|
|
<div class="balance_panel" id="balance_panel">
|
|
<div class="title" data-i18n="balance"></div>
|
|
<div class="balance"></div>
|
|
<div class="option_label" data-i18n="amount"></div>
|
|
<div class="input-group input-group-lg" style="width: 420px; margin-left: 15px;">
|
|
<input type="text" id="balance_in" class="form-control" placeholder="0" style="height: 45px;">
|
|
</div>
|
|
<button class="balance_btn mt-3" id="deposit" onclick="SendChangeBalance(id)" data-i18n="deposit"></button>
|
|
<button class="balance_btn red mt-3" id="withdraw" onclick="SendChangeBalance(id)" data-i18n="withdraw"></button>
|
|
<button class="balance_btn gray mb-3 mt-4" onclick="CloseBalanceMenu()" data-i18n="cancel"></button>
|
|
</div>
|
|
|
|
<div class="data_entry_panel" id="data_entry_panel">
|
|
<div class="title"></div>
|
|
<div class="input-group input-group-lg" style="width: 80%; margin-left: 10%; margin-bottom: -10px;">
|
|
<input type="text" id="data_in_1" class="form-control" data-i18n="write_here" placeholder="" style="height: 45px;" oninput="CheckIfCanCreateProperty()">
|
|
</div>
|
|
<div class="row p-0 mb-2" style="width: 90%; margin-left: 5%;">
|
|
<div class="col p-2">
|
|
<button class="data_entry_btn mt-3" onclick="SendDataEntryBack()" data-i18n="cancel"></button>
|
|
</div>
|
|
<div class="col p-2 ">
|
|
<button class="data_entry_btn blue float-end mt-3" onclick="SendDataEntryBack(true)" data-i18n="apply"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="question_panel" id="question_panel">
|
|
<div class="title mb-1"></div>
|
|
<div class="row p-0 m-0">
|
|
<div class="col p-2 d-flex flex-column align-items-center justify-content-center">
|
|
<button class="question_btn" id="no" onclick="CloseQuestionPanel(id)" data-i18n="no">NO</button>
|
|
</div>
|
|
<div class="col p-2 d-flex flex-column align-items-center justify-content-center">
|
|
<button class="question_btn blue" id="yes" onclick="CloseQuestionPanel(id)" data-i18n="yes">YES</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property_purchase_menu" id="property_purchase_menu">
|
|
<object id="plugin_5" type="application/x-cfx-game-view" style="position: absolute; top: 0%; left: 0%; height: 100%; width: 100%;"></object>
|
|
<div class="panel" id="panel_purchase">
|
|
<div class="big_icon gray"><img src="assets/house.png"></div>
|
|
<div class="title"></div>
|
|
<div class="property_image_con">
|
|
<button class="view_btn" onclick="SendViewProperty()"><i class="fa-solid fa-eye"></i></button>
|
|
<div class="property_name"></div>
|
|
<div class="property_street"></div>
|
|
</div>
|
|
<div class="slider_container" id="purchase">
|
|
<div class="row">
|
|
<div class="col d-flex flex-column align-items-center justify-content-center p-0">
|
|
<button class="purchase_type_btn" id="purchase" onclick="ChangePurchaseType(id)" data-i18n="purchase">PURCHASE</button>
|
|
</div>
|
|
<div class="col d-flex flex-column align-items-center justify-content-center p-0">
|
|
<button class="purchase_type_btn" id="rent" onclick="ChangePurchaseType(id)" data-i18n="rent">RENT</button>
|
|
</div>
|
|
</div>
|
|
<div class="slider" id="purchase"></div>
|
|
</div>
|
|
<div class="row mt-3 mb-1" style="width: 420px; margin-left: 15px;" id="garage_section_con">
|
|
<div class="col-8">
|
|
<div class="big_option_label" data-i18n="contain_garage"></div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="number_container gray float-end ps-2 pe-2" id="property_garage"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-3 mb-1 property_purchase_part" style="width: 420px; margin-left: 15px;">
|
|
<div class="col ">
|
|
<div class="big_option_label" data-i18n="has_debt"></div>
|
|
</div>
|
|
<div class="col ">
|
|
<div class="number_container red float-end" id="property_debt"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-3 mb-3" style="width: 420px; margin-left: 15px;">
|
|
<div class="col-4">
|
|
<div class="big_option_label" data-i18n="price_of_property"></div>
|
|
</div>
|
|
<div class="col" id="property_price_container">
|
|
</div>
|
|
</div>
|
|
<div class="row mt-3 mb-3 property_rent_part" style="display: none; width: 420px; margin-left: 15px;">
|
|
<div class="col">
|
|
<div class="big_option_label" data-i18n="rent_of_property"></div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="number_container float-end" id="property_rent"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-3 mb-1" style="width: 420px; margin-left: 15px;">
|
|
<div class="col ">
|
|
<div class="big_option_label" data-i18n="utilities"></div>
|
|
</div>
|
|
<div class="col ">
|
|
<div class="number_container float-end" id="cost_of_utilities"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-3 mb-1 property_purchase_part property_phone" style="width: 420px; margin-left: 15px;">
|
|
<div class="col ">
|
|
<div class="big_option_label" data-i18n="phone_contact"></div>
|
|
</div>
|
|
<div class="col ">
|
|
<div class="number_container small gray float-end" style="white-space: initial; height: auto; width: 110%; line-height: 28px;" id="property_phone"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-4 property_purchase_part offer_part" style="width: 420px; margin-left: 15px;">
|
|
<div class="col ">
|
|
<div class="big_option_label" data-i18n="patience"></div>
|
|
</div>
|
|
<div class="col d-flex flex-column align-items-center justify-content-center">
|
|
<div class="patience_line_con">
|
|
<div class="patience_line"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="input-group input-group-lg mt-3 property_purchase_part offer_part" style="width: 420px; margin-left: 15px;">
|
|
<input type="text" id="bid_input" class="form-control" data-i18n="your_offer" placeholder="" style="height: 45px;" onchange="CheckIfCanCreateProperty()" oninput="formatMoney(this)" onkeypress="return isNumber(event)">
|
|
<button class="set_coord_btn" type="button" onclick="GiveBid()"><i class="fa-solid fa-paper-plane"></i></button>
|
|
</div>
|
|
<button class="create_property_btn" id="purchase_property_btn" onclick="PurchaseProperty()" data-i18n="purchase"></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hint_menu" id="hint_menu">
|
|
<div class="left_side"></div>
|
|
<div class="right_side">
|
|
<div class="hint_element">
|
|
<img src="assets/axis.png">
|
|
<div class="text">Q</div>
|
|
</div>
|
|
<div class="hint_element">
|
|
<img src="assets/rotate.png">
|
|
<div class="text">R</div>
|
|
</div>
|
|
<div class="hint_element">
|
|
<img src="assets/move.png">
|
|
<div class="text">W</div>
|
|
</div>
|
|
<div class="hint_element">
|
|
<img src="assets/magnet.png">
|
|
<div class="text">G</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="screen_title" id="screen_title">
|
|
<div class="screen_border">
|
|
<div class="text"><hr>Valami</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="furniture_menu" id="furniture_menu">
|
|
<object id="plugin_3" type="application/x-cfx-game-view" style="position: absolute; top: 0%; left: 0%; height: 100%; width: 100%;"></object>
|
|
<div class="panel" id="panel_furniture">
|
|
<div class="control_section" id="furniture_control">
|
|
<div class="selector" id="furniture"></div>
|
|
<div class="control_btn" id="all" onclick="SwitchFurnitureType(id)" style="background-image: url('assets/store.png');"></div>
|
|
<div class="control_btn" id="owned" onclick="SwitchFurnitureType(id)" style="background-image: url('assets/box.png');"></div>
|
|
</div>
|
|
<div class="furniture_type_contanier" id="furniture_type_contanier">
|
|
<div class="moving_element d-flex flex-column align-items-center justify-content-center" id="moving_element">
|
|
</div>
|
|
</div>
|
|
<div class="furniture_container">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chosed_furniture">
|
|
<object id="plugin_4" type="application/x-cfx-game-view" style="position: absolute; top: 0%; left: 0%; height: 100%; width: 100%;"></object>
|
|
<div class="panel" id="panel_chosed_furniture">
|
|
<div class="title mt-2"></div>
|
|
<div class="description"></div>
|
|
<div class="color_container"></div>
|
|
<div class="row m-2 mt-3">
|
|
<div class="col"><div class="label" data-i18n="price"></div></div>
|
|
<div class="col"><div class="price float-end"></div></div>
|
|
</div>
|
|
<button class="buy_furniture_btn blue mb-1" data-i18n="reposition" onclick="SendChangePosition()"></button>
|
|
<button class="buy_furniture_btn" data-i18n="buy" id="buy_furniture" onclick="SendBuyFurniture()"></button>
|
|
<button class="buy_furniture_btn red" data-i18n="sell" id="sell_furniture" onclick="SendSellFurniture()"></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="preferences_con">
|
|
<button class="preference_btn" onclick="OpenTutorialPanel('furniture')"><i class="fa-solid fa-info"></i></button>
|
|
<button class="preference_btn red" onclick="hide('furniture_menu'), show('properties_menu'), ResetFurniturePanel(), SwitchPage('properties'), SendClosedFurniture()"><i class="fa-solid fa-right-from-bracket"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tutorial_menu" id="tutorial_menu">
|
|
<object id="plugin_tutorial" type="application/x-cfx-game-view" style="position: absolute; top: 0%; left: 0%; height: 100%; width: 100%;"></object>
|
|
<div class="arrow_conatiner">
|
|
<button class="arrow_btn" id="left_arrow" onclick="SwitchTutorialPage(id)"><i class="fa-solid fa-caret-left"></i></button>
|
|
<button class="arrow_btn" id="right_arrow" onclick="SwitchTutorialPage(id)"><i class="fa-solid fa-caret-right"></i></button>
|
|
</div>
|
|
<div class="image_container" id="image_container">
|
|
<div class="image_previewer">
|
|
<button class="exit_btn" id="right_arrow" onclick="show(OpenedTutoralFrom), hide('tutorial_menu')"><i class="fa-solid fa-right-from-bracket"></i></button>
|
|
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</div>
|
|
</div>
|
|
</div>
|
|
<div class="page_chooser" id="tutorial_chooser">
|
|
<div class="page_element choosed"></div>
|
|
<div class="page_element"></div>
|
|
<div class="page_element"></div>
|
|
<div class="page_element"></div>
|
|
<div class="page_element"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="loading_screen">
|
|
<div class="top_box"></div>
|
|
<div class="bottom_box"></div>
|
|
<div class="appear_con">
|
|
<div class="logo_container"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dui_section">
|
|
|
|
<div class="button_option_panel">
|
|
<div class="top_section popup_anim">
|
|
<div class="property_type"><img src="assets/house.png"></div>
|
|
<div class="small_icon" id="header_door"><img src="assets/door.png"></div>
|
|
<div class="title" data-i18n="door_state"></div>
|
|
<div class="state"></div>
|
|
</div>
|
|
<div class="action_container">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dot_signal" id="dot_signal">
|
|
<svg width="13" height="13" viewBox="0 0 13 13">
|
|
<circle cx="6.5" cy="6.5" r="6" stroke="white" stroke-width="1" fill="none" stroke-dasharray="3,2" stroke-linecap="round" />
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="vehicle_info">
|
|
<div class="lock second_layer"><i class="fa-solid fa-lock"></i></div>
|
|
<div class="background first_layer"></div>
|
|
<div class="background second_layer" style="background-color: rgba(157, 180, 207, 0.103);"></div>
|
|
<div class="background second_layer" style="background-color: transparent; background-image: url('assets/vehicle_panel_border.svg'); opacity: 0.6; height: 120%; width: 120%;"></div>
|
|
<div class="small_icon first_layer gray"></div>
|
|
<img class="second_layer" src="assets/car.png">
|
|
<div class="vehicle_name first_layer">Rapid GT</div>
|
|
<div class="vehicle_plate first_layer">ZHX 106</div>
|
|
<div class="remained_text lockable second_layer">Remained:</div>
|
|
<div class="time lockable second_layer">1h 10m</div>
|
|
<div class="progress_line_con lockable second_layer">
|
|
<div class="progress_line">
|
|
<div class="anim_element"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="apartment_selector" id="apartment_selector">
|
|
<div class="header">
|
|
<div class="header_title">BRUTAL <span class="highlight">HOUSING</span></div>
|
|
</div>
|
|
<div class="apartments_container upper_layer">
|
|
|
|
</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>
|
|
|