1444 lines
68 KiB
HTML
1444 lines
68 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="stylesheet" href="assets/stylesheets/fonts.css" />
|
|
<link rel="stylesheet" href="assets/stylesheets/style.css" />
|
|
<script src="assets/scripts/app.js"></script>
|
|
<script src="assets/scripts/colorPicker.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container" style="display: none; opacity: 0">
|
|
<div class="hud">
|
|
<div class="row-wrapper">
|
|
<div class="row" data-component="location">
|
|
<div class="card">
|
|
<h1 data-name="Street1">Ocean Highway</h1>
|
|
<p data-name="Street2">Palo-Alto street</p>
|
|
</div>
|
|
<div class="card icon">
|
|
<h1 data-name="Compass">SW</h1>
|
|
</div>
|
|
</div>
|
|
<div class="row" data-component="time">
|
|
<div class="card">
|
|
<h1 data-name="Time">12:00</h1>
|
|
<p data-translation="SERVER_TIME"></p>
|
|
</div>
|
|
<div class="card icon">
|
|
<img src="assets/images/Clock.svg" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="row" data-component="radio">
|
|
<div class="card">
|
|
<h1 data-name="Frequency">245 MHz</h1>
|
|
<p data-translation="RADIO_FREQUENCY"></p>
|
|
</div>
|
|
<div class="card icon">
|
|
<img src="assets/images/Radio.svg" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row-wrapper" data-component="bank">
|
|
<div class="row">
|
|
<div class="card">
|
|
<h1 data-name="Bank">1.000.000$</h1>
|
|
<p>
|
|
<span
|
|
class="transcation"
|
|
data-component="bank_transcation"
|
|
data-name="BankTranscation"
|
|
style="display: none; opacity: 0"
|
|
></span>
|
|
<span data-translation="BANK"></span>
|
|
</p>
|
|
</div>
|
|
<div class="card icon">
|
|
<img src="assets/images/Money.svg" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row-wrapper" data-component="cash">
|
|
<div class="row">
|
|
<div class="card">
|
|
<h1 data-name="Cash">1.000.000$</h1>
|
|
<p>
|
|
<span
|
|
class="transcation"
|
|
data-component="cash_transcation"
|
|
data-name="CashTranscation"
|
|
style="display: none; opacity: 0"
|
|
></span>
|
|
<span data-translation="CASH"></span>
|
|
</p>
|
|
</div>
|
|
<div class="card icon">
|
|
<img src="assets/images/Money.svg" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row-wrapper" data-component="dirt_money">
|
|
<div class="row">
|
|
<div class="card">
|
|
<h1 data-name="DirtMoney">1.000.000$</h1>
|
|
<p>
|
|
<span
|
|
class="transcation"
|
|
data-component="dirt_money_transaction"
|
|
data-name="DirtMoneyTranscation"
|
|
style="display: none; opacity: 0"
|
|
></span>
|
|
<span data-translation="DIRT_MONEY"></span>
|
|
</p>
|
|
</div>
|
|
<div class="card icon">
|
|
<img src="assets/images/Money.svg" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row-wrapper" data-component="society_money">
|
|
<div class="row">
|
|
<div class="card">
|
|
<h1 data-name="SocietyMoney">1.000.000$</h1>
|
|
<p>
|
|
<span
|
|
class="transcation"
|
|
data-component="society_money_transaction"
|
|
data-name="SocietyMoneyTranscation"
|
|
style="display: none; opacity: 0"
|
|
></span>
|
|
<span data-translation="SOCIETY_MONEY"></span>
|
|
</p>
|
|
</div>
|
|
<div class="card icon">
|
|
<img src="assets/images/Money.svg" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row-wrapper" data-component="serverId">
|
|
<div class="row">
|
|
<div class="card">
|
|
<h1 data-name="ServerId">1</h1>
|
|
<p data-translation="SERVER_ID"></p>
|
|
</div>
|
|
<div class="card icon">
|
|
<img src="assets/images/ServerId.svg" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row-wrapper" data-component="job">
|
|
<div class="row">
|
|
<div class="card">
|
|
<h1 data-name="Grade">Unemployed</h1>
|
|
<p data-name="Job"></p>
|
|
</div>
|
|
<div class="card icon">
|
|
<img src="assets/images/Job.svg" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row-wrapper" data-component="weapon">
|
|
<div class="row">
|
|
<div class="card">
|
|
<h1 data-component="ammo">
|
|
<span data-name="ClipAmmo">30</span>
|
|
<p>/<span data-name="TotalAmmo">120</span></p>
|
|
</h1>
|
|
<p data-name="Weapon">Assault Riffle</p>
|
|
</div>
|
|
<div class="card icon">
|
|
<img src="assets/images/Gun.svg" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="wrapper" data-display="status">
|
|
<div class="status-wrapper">
|
|
<div class="status" data-component="health">
|
|
<div class="icon">
|
|
<svg
|
|
width="12"
|
|
height="11"
|
|
viewBox="0 0 12 11"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M8.7931 0C7.63517 0.000101341 6.56725 0.626898 6 1.6396C5.43275 0.626898 4.36483 0.000101341 3.2069 0C1.43585 0 0 1.64791 0 3.42453C0 7.88679 6 11 6 11C6 11 12 7.88679 12 3.42453C12 1.64791 10.5642 0 8.7931 0Z"
|
|
fill="var(--color-primary)"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
data-type="full"
|
|
data-status="Health"
|
|
data-value="bottom"
|
|
></div>
|
|
</div>
|
|
<div class="status" data-component="healthAndVest">
|
|
<div class="icon">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="15"
|
|
viewBox="0 0 20 15"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M16.0142 11.3465H19.5168C19.6089 11.3465 19.6836 11.2666 19.6836 11.1681V10.7992C19.6836 10.7007 19.6089 10.6209 19.5168 10.6209H16.0142C15.813 10.6209 15.64 10.4556 15.6305 10.2409C15.6204 10.0115 15.7913 9.82225 16.0036 9.82225H19.5168C19.6089 9.82225 19.6836 9.74241 19.6836 9.64392V9.3084C19.6836 9.20991 19.6089 9.13007 19.5168 9.13007H16.0142C15.813 9.13007 15.64 8.96484 15.6305 8.75006C15.6204 8.52074 15.7913 8.33144 16.0036 8.33144H19.5168C19.6089 8.33144 19.6836 8.2516 19.6836 8.15311V6.95074L19.6436 6.86595C19.2831 6.10149 19.0883 5.24496 19.08 4.38896C19.0718 3.53297 19.2502 2.6723 19.5959 1.90023C19.6645 1.74717 19.6529 1.56942 19.5645 1.42752C19.4795 1.29122 19.3323 1.21436 19.1791 1.21436H18.5616C18.4823 1.21436 18.4139 1.27422 18.3981 1.3574C18.3311 1.71138 18.3225 1.75583 18.3209 1.76385C18.1279 2.70785 17.689 3.58789 17.0849 4.24183C16.3759 5.00943 15.4889 5.41513 14.52 5.41513C13.5449 5.41513 12.6499 5.00977 11.9318 4.24286C11.3111 3.58 10.867 2.66996 10.7134 1.74613C10.7113 1.73301 10.7082 1.71077 10.6637 1.36832C10.6522 1.28017 10.5817 1.21436 10.4984 1.21436H9.79364C9.66738 1.21436 9.54388 1.26585 9.45756 1.36434C9.33414 1.50515 9.30237 1.70537 9.37008 1.87831L9.48192 2.1639C10.0388 3.58549 10.0234 5.20909 9.43987 6.61839L9.29788 6.96128V8.16982C9.29788 8.26831 9.37256 8.34815 9.4647 8.34815H12.9602C13.1613 8.34815 13.3344 8.51338 13.3438 8.72817C13.354 8.95748 13.183 9.14679 12.9707 9.14679H9.46467C9.37254 9.14679 9.29785 9.22663 9.29785 9.32512V9.66063C9.29785 9.75912 9.37254 9.83896 9.46467 9.83896H12.9601C13.1613 9.83896 13.3344 10.0042 13.3438 10.219C13.3539 10.4483 13.183 10.6376 12.9707 10.6376H9.46467C9.37254 10.6376 9.29785 10.7174 9.29785 10.8159V11.1849C9.29785 11.2833 9.37254 11.3632 9.46467 11.3632H12.9601C13.1613 11.3632 13.3344 11.5284 13.3438 11.7432C13.3539 11.9725 13.183 12.1618 12.9707 12.1618H9.46467C9.37254 12.1618 9.29785 12.2417 9.29785 12.3402V13.0869C9.29785 13.5512 9.58363 13.9602 10.0001 14.0919L10.1781 14.1482C11.5889 14.5945 13.0395 14.8176 14.4907 14.8176C15.9415 14.8176 17.3928 14.5944 18.8032 14.1482L18.9813 14.0919C19.3978 13.9601 19.6836 13.5512 19.6836 13.0869V12.3234C19.6836 12.2249 19.6089 12.1451 19.5167 12.1451H16.0036V12.1451C15.7913 12.1451 15.6204 11.9558 15.6305 11.7264C15.64 11.5117 15.8131 11.3465 16.0142 11.3465Z"
|
|
fill="var(--color-primary)"
|
|
/>
|
|
<path
|
|
d="M8.52776 1.70829C8.51508 1.72254 8.50254 1.73686 8.49015 1.75126C7.60974 0.731332 6.26067 0.0808105 4.85511 0.0808105C2.36714 0.0808105 0.412354 2.01625 0.412354 4.49788C0.412354 7.52555 3.15881 10.0071 7.31885 13.7576L8.49015 14.8177H9.48118C8.34758 14.2509 8.49015 13.5513 8.49015 13.0869V6.96138L8.63214 6.61847C9.21575 5.20915 9.2311 3.58554 8.67426 2.16397L8.56241 1.87836C8.54086 1.82349 8.52945 1.76592 8.52776 1.70829Z"
|
|
fill="var(--color-secondary)"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
data-type="half_1"
|
|
data-status="Health2"
|
|
data-value="bottom"
|
|
></div>
|
|
<div
|
|
class="progress"
|
|
data-type="half_2"
|
|
data-status="Vest"
|
|
data-value="top"
|
|
></div>
|
|
</div>
|
|
<div class="status" data-component="food">
|
|
<div class="icon">
|
|
<svg
|
|
width="12"
|
|
height="12"
|
|
viewBox="0 0 12 12"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M8.79961 2.80002H8.80186H8.79961ZM11.5883 2.00005H9.31184L9.53483 1.10859L10.4928 0.782352C10.6965 0.713104 10.8178 0.496613 10.759 0.289621C10.7441 0.237551 10.7187 0.18906 10.6845 0.147089C10.6502 0.105119 10.6078 0.0705431 10.5598 0.0454598C10.5118 0.0203765 10.4592 0.00530835 10.4051 0.00116925C10.3511 -0.00296985 10.2968 0.00390643 10.2456 0.0213809L9.0706 0.421365C9.00733 0.442942 8.95047 0.480034 8.90523 0.529251C8.85998 0.578469 8.8278 0.638241 8.81161 0.703105L8.48738 2.00005H5.211C4.99576 2.00005 4.81102 2.16555 4.80027 2.38079C4.79766 2.43487 4.80606 2.48892 4.82496 2.53966C4.84386 2.5904 4.87287 2.63677 4.91022 2.67597C4.94757 2.71517 4.99249 2.74637 5.04226 2.7677C5.09203 2.78902 5.14561 2.80002 5.19975 2.80002H5.2685L5.2935 3.01652C5.29939 3.06707 5.32365 3.1137 5.36168 3.14754C5.39971 3.18137 5.44884 3.20004 5.49974 3.20001C6.4747 3.20001 7.34117 3.4725 8.00264 3.98798C8.37056 4.27146 8.66882 4.6353 8.87461 5.05169C8.98981 5.2859 9.07482 5.53379 9.1276 5.78941C9.13811 5.83922 9.16761 5.88298 9.20985 5.9114C9.54992 6.14215 9.80079 6.48233 9.92076 6.87539C10.0407 7.26846 10.0226 7.69075 9.86932 8.07207C9.8515 8.1162 9.85016 8.16528 9.86557 8.21032C9.95413 8.46411 9.99943 8.73098 9.99957 8.99978C9.99957 9.55826 9.80957 10.0905 9.46459 10.4985C9.269 10.7313 9.02295 10.9166 8.74512 11.0402C8.69705 11.0614 8.65924 11.1006 8.63987 11.1495C8.53604 11.4199 8.38943 11.672 8.20564 11.8959C8.19799 11.905 8.19308 11.9161 8.19151 11.9279C8.18993 11.9396 8.19173 11.9516 8.19672 11.9624C8.2017 11.9732 8.20966 11.9823 8.21965 11.9887C8.22964 11.9952 8.24126 11.9986 8.25313 11.9987H9.48334C9.78454 11.9974 10.0744 11.8835 10.2958 11.6793C10.5171 11.475 10.6541 11.1953 10.6795 10.8952L11.5345 2.80002H11.5995C11.6537 2.80009 11.7073 2.78914 11.7572 2.76784C11.807 2.74655 11.852 2.71535 11.8894 2.67615C11.9268 2.63694 11.9558 2.59055 11.9748 2.53978C11.9937 2.489 12.0021 2.43491 11.9995 2.38079C11.989 2.16555 11.8035 2.00005 11.5883 2.00005Z"
|
|
fill="var(--color-primary)"
|
|
/>
|
|
<path
|
|
d="M2.31716 7.59983C2.39605 7.59946 2.47423 7.61473 2.54718 7.64477C2.62012 7.67481 2.68639 7.71901 2.74214 7.77482L3.12988 8.16256C3.13917 8.17186 3.15019 8.17923 3.16233 8.18426C3.17447 8.1893 3.18749 8.19189 3.20063 8.19189C3.21377 8.19189 3.22678 8.1893 3.23892 8.18426C3.25106 8.17923 3.26209 8.17186 3.27137 8.16256L3.65836 7.77482C3.71411 7.71901 3.78038 7.67481 3.85333 7.64477C3.92627 7.61473 4.00445 7.59946 4.08334 7.59983H8.99765C9.02392 7.60009 9.04997 7.59518 9.07434 7.58537C9.0987 7.57557 9.1209 7.56106 9.13966 7.54267C9.15841 7.52429 9.17337 7.50239 9.18366 7.47822C9.19395 7.45406 9.19938 7.4281 9.19964 7.40184V7.39984C9.19936 7.1694 9.11964 6.94611 8.97392 6.7676C8.8282 6.58909 8.62539 6.46628 8.39968 6.41988C8.37918 5.67765 8.07469 5.05643 7.51196 4.61995C6.99148 4.21396 6.29601 3.99997 5.49979 3.99997H3.69986C1.99442 3.99997 0.839218 4.96918 0.799969 6.41988C0.574256 6.46628 0.371445 6.58909 0.225724 6.7676C0.0800023 6.94611 0.000281734 7.1694 2.01838e-07 7.39984C2.01838e-07 7.45288 0.0210707 7.50375 0.0585766 7.54125C0.0960824 7.57876 0.146951 7.59983 0.199992 7.59983H2.31716ZM4.24834 8.3998C4.22206 8.39978 4.19605 8.40493 4.17177 8.41497C4.14749 8.42501 4.12543 8.43973 4.10684 8.4583L3.55336 9.01203C3.4596 9.10576 3.33245 9.15841 3.19988 9.15841C3.0673 9.15841 2.94015 9.10576 2.84639 9.01203L2.29291 8.4583C2.27432 8.43973 2.25226 8.42501 2.22798 8.41497C2.20371 8.40493 2.17769 8.39978 2.15142 8.3998H0.416484C0.322527 8.39938 0.231447 8.4322 0.159349 8.49245C0.0872507 8.5527 0.0387774 8.6365 0.0224993 8.72904C0.00748088 8.8185 -4.49363e-05 8.90906 2.01838e-07 8.99978C2.01838e-07 9.7645 0.52823 10.3875 1.18145 10.3997C1.2422 10.7777 1.3892 11.1192 1.61044 11.3864C1.93768 11.7817 2.41341 11.9997 2.94989 11.9997H6.24976C6.78624 11.9997 7.26197 11.7817 7.58921 11.3859C7.81045 11.1187 7.95744 10.7772 8.01819 10.3992C8.67141 10.3875 9.19964 9.7645 9.19964 8.99928C9.19969 8.90856 9.19216 8.818 9.17715 8.72854C9.16076 8.63609 9.11224 8.55241 9.04016 8.49226C8.96807 8.43211 8.87705 8.39936 8.78316 8.3998H4.24834Z"
|
|
fill="var(--color-secondary)"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
data-type="half_1"
|
|
data-status="Hunger"
|
|
data-value="bottom"
|
|
></div>
|
|
<div
|
|
class="progress"
|
|
data-type="half_2"
|
|
data-status="Thirst"
|
|
data-value="top"
|
|
></div>
|
|
</div>
|
|
<div class="status" data-component="voice">
|
|
<div class="icon">
|
|
<svg
|
|
width="10"
|
|
height="12"
|
|
viewBox="0 0 10 12"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M5.00007 0C4.12864 0 3.29291 0.354616 2.67672 0.985836C2.06053 1.61706 1.71436 2.47317 1.71436 3.36585V5.12195C1.71422 5.97665 2.0315 6.79938 2.60181 7.42323C3.17213 8.04707 3.95277 8.4253 4.78533 8.48116C5.61789 8.53702 6.44001 8.26633 7.08489 7.72401C7.72977 7.1817 8.14909 6.40839 8.25778 5.56098H5.5715C5.45783 5.56098 5.34883 5.51472 5.26845 5.43239C5.18808 5.35005 5.14293 5.23839 5.14293 5.12195C5.14293 5.00551 5.18808 4.89385 5.26845 4.81151C5.34883 4.72918 5.45783 4.68293 5.5715 4.68293H8.28578V3.80488H5.5715C5.45783 3.80488 5.34883 3.75862 5.26845 3.67629C5.18808 3.59396 5.14293 3.48229 5.14293 3.36585C5.14293 3.24942 5.18808 3.13775 5.26845 3.05542C5.34883 2.97308 5.45783 2.92683 5.5715 2.92683H8.25778C8.15369 2.11721 7.76585 1.37395 7.16653 0.835495C6.5672 0.297041 5.79724 0.000107082 5.00007 0Z"
|
|
fill="var(--color-primary)"
|
|
/>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M0.428571 4.09753C0.542236 4.09753 0.651245 4.14379 0.731617 4.22612C0.81199 4.30845 0.857143 4.42012 0.857143 4.53656V5.12192C0.857143 5.67924 0.964301 6.2311 1.1725 6.746C1.3807 7.26089 1.68586 7.72873 2.07056 8.12282C2.45526 8.5169 2.91196 8.8295 3.4146 9.04278C3.91723 9.25605 4.45595 9.36583 5 9.36583C5.54405 9.36583 6.08277 9.25605 6.5854 9.04278C7.08804 8.8295 7.54474 8.5169 7.92944 8.12282C8.31414 7.72873 8.6193 7.26089 8.8275 6.746C9.0357 6.2311 9.14286 5.67924 9.14286 5.12192V4.53656C9.14286 4.42012 9.18801 4.30845 9.26838 4.22612C9.34876 4.14379 9.45776 4.09753 9.57143 4.09753C9.68509 4.09753 9.7941 4.14379 9.87448 4.22612C9.95485 4.30845 10 4.42012 10 4.53656V5.12192C10 6.40437 9.53042 7.64017 8.68398 8.58507C7.83754 9.52997 6.67588 10.1152 5.42857 10.2251V11.5609C5.42857 11.6774 5.38342 11.7891 5.30305 11.8714C5.22267 11.9537 5.11366 12 5 12C4.88634 12 4.77733 11.9537 4.69695 11.8714C4.61658 11.7891 4.57143 11.6774 4.57143 11.5609V10.2251C3.32412 10.1152 2.16246 9.52997 1.31602 8.58507C0.469583 7.64017 -2.89161e-05 6.40437 1.33541e-09 5.12192V4.53656C1.33541e-09 4.42012 0.0451529 4.30845 0.125526 4.22612C0.205898 4.14379 0.314907 4.09753 0.428571 4.09753Z"
|
|
fill="var(--color-primary)"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
data-type="full"
|
|
data-status="IsTalking"
|
|
data-value="none"
|
|
></div>
|
|
<div
|
|
class="progress"
|
|
data-type="inside"
|
|
data-status="VoiceRange"
|
|
data-value="bottom"
|
|
></div>
|
|
</div>
|
|
<div class="status" data-component="stress">
|
|
<div class="icon">
|
|
<svg
|
|
width="12"
|
|
height="9"
|
|
viewBox="0 0 12 9"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M0 5.30057H1.86L4.73333 0L5.52 5.78479L7.66667 3.14419L9.88667 5.30057H12V6.59182H9.33333L7.78 5.08752L4.61333 9L3.96 4.20947L2.66667 6.59182H0V5.30057Z"
|
|
fill="var(--color-primary)"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
data-type="full"
|
|
data-status="Stress"
|
|
data-value="bottom"
|
|
></div>
|
|
</div>
|
|
<div class="status" data-component="oxygen">
|
|
<div class="icon">
|
|
<svg
|
|
width="4"
|
|
height="11"
|
|
viewBox="0 0 4 11"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M3.2 0.55H2.66667V1.1H4V1.65H2.66667V2.22283C3.42347 2.35373 4 3.03243 4 3.85V4.4H0.800001V3.85C0.800049 3.46006 0.93397 3.08273 1.17803 2.78488C1.42208 2.48704 1.76051 2.28792 2.13333 2.22283V1.65H1.55467C1.49169 1.83347 1.36787 1.98808 1.20508 2.08652C1.04228 2.18497 0.850982 2.22092 0.664976 2.18802C0.47897 2.15512 0.310224 2.05548 0.188546 1.90671C0.066868 1.75795 8.7556e-05 1.56962 8.88618e-07 1.375C-0.000280576 1.18017 0.0663106 0.991521 0.18798 0.84247C0.30965 0.693419 0.478546 0.593584 0.664754 0.560646C0.850962 0.527708 1.04247 0.563794 1.20535 0.662512C1.36823 0.761229 1.49197 0.916209 1.55467 1.1H2.13333V0.55H1.6V0H3.2V0.55ZM0.800001 4.95V10.725C0.800001 10.7979 0.828096 10.8679 0.878106 10.9195C0.928115 10.971 0.995943 11 1.06667 11H3.73333C3.80406 11 3.87189 10.971 3.9219 10.9195C3.97191 10.8679 4 10.7979 4 10.725V4.95H0.800001ZM0.800001 1.1C0.729276 1.1 0.661449 1.12897 0.611439 1.18055C0.561429 1.23212 0.533334 1.30207 0.533334 1.375C0.533334 1.44793 0.561429 1.51788 0.611439 1.56945C0.661449 1.62103 0.729276 1.65 0.800001 1.65C0.870725 1.65 0.938553 1.62103 0.988562 1.56945C1.03857 1.51788 1.06667 1.44793 1.06667 1.375C1.06667 1.30207 1.03857 1.23212 0.988562 1.18055C0.938553 1.12897 0.870725 1.1 0.800001 1.1Z"
|
|
fill="var(--color-primary)"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
data-type="full"
|
|
data-status="Oxygen"
|
|
data-value="bottom"
|
|
></div>
|
|
</div>
|
|
<div class="status" data-component="stamina">
|
|
<div class="icon">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="12.1"
|
|
height="18.3"
|
|
viewBox="0 0 121 183"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M1.51644 97.7268L94.2294 1.36006C95.4763 0.0640767 97.5441 0.0440989 98.8158 1.31575C99.8161 2.31609 100.044 3.85309 99.3776 5.10087L64.644 70.1151C63.2205 72.7797 65.1511 76 68.172 76H116.596C120.123 76 121.924 80.2334 119.478 82.7743L24.7413 181.172C23.5104 182.451 21.4699 182.47 20.215 181.215C19.2028 180.203 18.9943 178.638 19.7064 177.396L58.066 110.49C59.5949 107.823 57.6697 104.5 54.5959 104.5H4.39899C0.872517 104.5 -0.928509 100.268 1.51644 97.7268Z"
|
|
fill="var(--color-primary)"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
data-type="full"
|
|
data-status="Stamina"
|
|
data-value="bottom"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div class="vehicle-wrapper" data-component="vehicle">
|
|
<div
|
|
class="progress"
|
|
data-type="vehicle_full"
|
|
data-status="VehicleSpeedStatus"
|
|
></div>
|
|
<div
|
|
class="progress"
|
|
data-type="vehicle_inside"
|
|
data-status="RPM"
|
|
></div>
|
|
<div
|
|
class="progress"
|
|
data-type="vehicle_half_1"
|
|
data-status="Damage"
|
|
></div>
|
|
<div
|
|
class="progress"
|
|
data-type="vehicle_half_2"
|
|
data-status="Fuel"
|
|
></div>
|
|
<div class="gears" data-name="CurrentGear"></div>
|
|
<div class="speed" data-name="VehicleSpeed"></div>
|
|
<strong class="unit" data-name="VehicleSpeedUnit"></strong>
|
|
|
|
<div class="icon-wrapper">
|
|
<div class="icon" data-type="damage" data-acitve="true">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="12"
|
|
height="10"
|
|
viewBox="0 0 12 10"
|
|
fill="none"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M5.68421 0C5.85172 0 6.01236 0.0619746 6.1308 0.17229C6.24925 0.282606 6.31579 0.432226 6.31579 0.588235C6.31579 0.744245 6.24925 0.893865 6.1308 1.00418C6.01236 1.1145 5.85172 1.17647 5.68421 1.17647H5.05263V1.76471H6.79832C6.99432 1.76472 7.18762 1.80721 7.36295 1.88882L9.40674 2.84059C9.61662 2.93827 9.79314 3.08846 9.91652 3.27434C10.0399 3.46021 10.1053 3.67442 10.1053 3.89294V5.29412H10.7368V4.70588C10.7368 4.54987 10.8034 4.40025 10.9218 4.28994C11.0403 4.17962 11.2009 4.11765 11.3684 4.11765C11.5359 4.11765 11.6966 4.17962 11.815 4.28994C11.9335 4.40025 12 4.54987 12 4.70588V7.05882C12 7.21483 11.9335 7.36445 11.815 7.47477C11.6966 7.58508 11.5359 7.64706 11.3684 7.64706C11.2009 7.64706 11.0403 7.58508 10.9218 7.47477C10.8034 7.36445 10.7368 7.21483 10.7368 7.05882V6.47059H10.1053V7.35294C10.1053 7.53558 10.0596 7.71572 9.97191 7.87907C9.88421 8.04243 9.75688 8.18453 9.6 8.29412L7.49495 9.76471C7.2763 9.91744 7.01036 10 6.73705 10H1.26316C0.928148 10 0.606858 9.87605 0.36997 9.65542C0.133082 9.43479 0 9.13555 0 8.82353V2.94118C0 2.62916 0.133082 2.32992 0.36997 2.10929C0.606858 1.88866 0.928148 1.76471 1.26316 1.76471H3.78947V1.17647H3.15789C2.99039 1.17647 2.82975 1.1145 2.7113 1.00418C2.59286 0.893865 2.52632 0.744245 2.52632 0.588235C2.52632 0.432226 2.59286 0.282606 2.7113 0.17229C2.82975 0.0619746 2.99039 0 3.15789 0H5.68421ZM5.06147 3.90765C4.92882 3.83348 4.77155 3.80725 4.61951 3.83392C4.46747 3.8606 4.33122 3.93832 4.23663 4.05235L4.19558 4.10941L3.25389 5.57059C3.19887 5.65579 3.16768 5.75249 3.16318 5.85182C3.15869 5.95116 3.18103 6.04996 3.22817 6.13917C3.27531 6.22838 3.34573 6.30514 3.43298 6.36243C3.52023 6.41972 3.62153 6.45569 3.72758 6.46706L3.80084 6.47059H4.56884L4.19558 7.05059C4.11332 7.17924 4.08685 7.33227 4.12154 7.47848C4.15624 7.62469 4.24949 7.75308 4.3823 7.83747C4.51511 7.92185 4.67747 7.95589 4.83629 7.93265C4.99511 7.9094 5.13844 7.83061 5.23705 7.71235L5.27874 7.65588L6.21979 6.19412C6.27482 6.10892 6.30601 6.01222 6.3105 5.91288C6.315 5.81354 6.29265 5.71474 6.24551 5.62554C6.19838 5.53633 6.12796 5.45956 6.0407 5.40228C5.95345 5.34499 5.85216 5.30901 5.7461 5.29765L5.67284 5.29412H4.90484L5.27811 4.71412C5.36414 4.58046 5.38972 4.42047 5.34922 4.26927C5.30873 4.11806 5.20546 3.98801 5.06211 3.90765H5.06147Z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon" data-type="BeltsState">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="10"
|
|
height="12"
|
|
viewBox="0 0 10 12"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M4.971 0C5.27867 0 5.57375 0.126428 5.79131 0.351472C6.00887 0.576515 6.13109 0.88174 6.13109 1.2C6.13109 1.866 5.61485 2.4 4.971 2.4C4.66332 2.4 4.36825 2.27357 4.15069 2.04853C3.93313 1.82348 3.8109 1.51826 3.8109 1.2C3.8109 0.88174 3.93313 0.576515 4.15069 0.351472C4.36825 0.126428 4.66332 0 4.971 0ZM5.19722 7.674C6.02117 7.67068 6.84452 7.72078 7.66241 7.824C7.69722 6.192 7.558 4.752 7.29118 4.2C7.21578 4.038 7.11137 3.9 7.00116 3.78L2.32019 7.932C3.10905 7.8 4.10093 7.674 5.19722 7.674ZM2.33759 9C2.41299 10.044 2.56381 11.1 2.80742 12H4.00812C3.83991 11.472 3.7181 10.854 3.62529 10.2C3.62529 10.2 4.971 9.936 6.31671 10.2C6.2239 10.854 6.10209 11.472 5.93387 12H7.13457C7.38979 11.07 7.5406 9.966 7.61601 8.874C6.8134 8.77362 6.00567 8.72353 5.19722 8.724C4.07773 8.724 3.10325 8.85 2.33759 9ZM4.971 3C4.971 3 3.23086 3 2.65081 4.2C2.4536 4.608 2.32599 5.49 2.28538 6.576L6.08469 3.204C5.51044 3 4.971 3 4.971 3ZM8.7819 2.202L8.12065 1.404L6.08469 3.21C6.40371 3.324 6.74014 3.504 7.00116 3.78L8.7819 2.202ZM10 8.298C9.9478 8.28 9.11253 7.998 7.66241 7.824C7.65661 8.166 7.63921 8.52 7.61601 8.874C8.92111 9.042 9.66937 9.3 9.68097 9.3L10 8.298ZM2.28538 6.576L0 8.604L0.516241 9.492C0.527842 9.486 1.2007 9.216 2.33759 9C2.27378 8.154 2.25638 7.32 2.28538 6.576Z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon" data-type="VehicleLightsState">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="12"
|
|
height="10"
|
|
viewBox="0 0 12 10"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M8.76736 0.250051C7.11913 -0.470945 5.13729 0.414209 4.93929 2.30084C4.84597 3.19763 4.79951 4.09853 4.80009 5C4.80009 6.02156 4.85829 6.93034 4.93869 7.69857C5.13669 9.5858 7.11913 10.471 8.76736 9.74996L8.90236 9.69091C9.82439 9.28756 10.6078 8.62971 11.1576 7.79706C11.7074 6.96442 12 5.99272 12 4.99971C12 4.0067 11.7074 3.035 11.1576 2.20235C10.6078 1.36971 9.82439 0.711855 8.90236 0.30851L8.76736 0.24946V0.250051ZM0.600011 1.45703C0.440878 1.45703 0.288263 1.51924 0.175739 1.62998C0.0632152 1.74072 0 1.89091 0 2.04752C0 2.20413 0.0632152 2.35433 0.175739 2.46507C0.288263 2.57581 0.440878 2.63802 0.600011 2.63802H3.60007C3.7592 2.63802 3.91181 2.57581 4.02434 2.46507C4.13686 2.35433 4.20008 2.20413 4.20008 2.04752C4.20008 1.89091 4.13686 1.74072 4.02434 1.62998C3.91181 1.51924 3.7592 1.45703 3.60007 1.45703H0.600011ZM0.600011 4.40951C0.440878 4.40951 0.288263 4.47172 0.175739 4.58246C0.0632152 4.6932 0 4.84339 0 5C0 5.15661 0.0632152 5.30681 0.175739 5.41755C0.288263 5.52829 0.440878 5.5905 0.600011 5.5905H3.60007C3.7592 5.5905 3.91181 5.52829 4.02434 5.41755C4.13686 5.30681 4.20008 5.15661 4.20008 5C4.20008 4.84339 4.13686 4.6932 4.02434 4.58246C3.91181 4.47172 3.7592 4.40951 3.60007 4.40951H0.600011ZM0 7.95249C0 7.79588 0.0632152 7.64568 0.175739 7.53494C0.288263 7.4242 0.440878 7.36199 0.600011 7.36199H3.60007C3.7592 7.36199 3.91181 7.4242 4.02434 7.53494C4.13686 7.64568 4.20008 7.79588 4.20008 7.95249C4.20008 8.1091 4.13686 8.25929 4.02434 8.37003C3.91181 8.48077 3.7592 8.54298 3.60007 8.54298H0.600011C0.440878 8.54298 0.288263 8.48077 0.175739 8.37003C0.0632152 8.25929 0 8.1091 0 7.95249Z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon" data-type="VehicleDoorsLocked">
|
|
<svg
|
|
width="12"
|
|
height="10"
|
|
viewBox="0 0 12 10"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M10.7143 1.42859H5.31108L2.16815 4.28573H10.7143V1.42859Z"
|
|
/>
|
|
<path
|
|
d="M0 9.04767V9.76195C0 9.8251 0.0225765 9.88566 0.0627629 9.93031C0.102949 9.97496 0.157454 10 0.214286 10H11.7857C11.8425 10 11.8971 9.97496 11.9372 9.93031C11.9774 9.88566 12 9.8251 12 9.76195V9.04767H0Z"
|
|
/>
|
|
<path
|
|
d="M12 8.57143V0.238095C12 0.174948 11.9774 0.114388 11.9372 0.0697365C11.8971 0.025085 11.8425 0 11.7857 0H4.92857C4.8791 2.00321e-05 4.83116 0.0190382 4.79286 0.0538333L0.0785786 4.33955C0.0540259 4.36189 0.0342417 4.39 0.0206532 4.42187C0.00706472 4.45373 1.07203e-05 4.48855 0 4.52381V8.57143H12ZM10.5 6.19048H9.21429C9.15745 6.19048 9.10295 6.16539 9.06276 6.12074C9.02258 6.07609 9 6.01553 9 5.95238C9 5.88923 9.02258 5.82867 9.06276 5.78402C9.10295 5.73937 9.15745 5.71429 9.21429 5.71429H10.5C10.5568 5.71429 10.6113 5.73937 10.6515 5.78402C10.6917 5.82867 10.7143 5.88923 10.7143 5.95238C10.7143 6.01553 10.6917 6.07609 10.6515 6.12074C10.6113 6.16539 10.5568 6.19048 10.5 6.19048ZM1.4322 4.33955L5.0988 1.00621C5.1371 0.971423 5.18504 0.952405 5.23451 0.952381H10.9286C10.9854 0.952381 11.0399 0.977466 11.0801 1.02212C11.1203 1.06677 11.1429 1.12733 11.1429 1.19048V4.52381C11.1429 4.58696 11.1203 4.64752 11.0801 4.69217C11.0399 4.73682 10.9854 4.7619 10.9286 4.7619H1.56791C1.52371 4.7619 1.48059 4.74672 1.44446 4.71842C1.40833 4.69013 1.38096 4.65012 1.3661 4.60386C1.35124 4.55761 1.34961 4.50738 1.36145 4.46006C1.37328 4.41275 1.39799 4.37065 1.4322 4.33955Z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon" data-type="VehicleEngineState">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="12"
|
|
height="10"
|
|
viewBox="0 0 12 10"
|
|
fill="none"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M5.68421 0C5.85172 0 6.01236 0.0619746 6.1308 0.17229C6.24925 0.282606 6.31579 0.432226 6.31579 0.588235C6.31579 0.744245 6.24925 0.893865 6.1308 1.00418C6.01236 1.1145 5.85172 1.17647 5.68421 1.17647H5.05263V1.76471H6.79832C6.99432 1.76472 7.18762 1.80721 7.36295 1.88882L9.40674 2.84059C9.61662 2.93827 9.79314 3.08846 9.91652 3.27434C10.0399 3.46021 10.1053 3.67442 10.1053 3.89294V5.29412H10.7368V4.70588C10.7368 4.54987 10.8034 4.40025 10.9218 4.28994C11.0403 4.17962 11.2009 4.11765 11.3684 4.11765C11.5359 4.11765 11.6966 4.17962 11.815 4.28994C11.9335 4.40025 12 4.54987 12 4.70588V7.05882C12 7.21483 11.9335 7.36445 11.815 7.47477C11.6966 7.58508 11.5359 7.64706 11.3684 7.64706C11.2009 7.64706 11.0403 7.58508 10.9218 7.47477C10.8034 7.36445 10.7368 7.21483 10.7368 7.05882V6.47059H10.1053V7.35294C10.1053 7.53558 10.0596 7.71572 9.97191 7.87907C9.88421 8.04243 9.75688 8.18453 9.6 8.29412L7.49495 9.76471C7.2763 9.91744 7.01036 10 6.73705 10H1.26316C0.928148 10 0.606858 9.87605 0.36997 9.65542C0.133082 9.43479 0 9.13555 0 8.82353V2.94118C0 2.62916 0.133082 2.32992 0.36997 2.10929C0.606858 1.88866 0.928148 1.76471 1.26316 1.76471H3.78947V1.17647H3.15789C2.99039 1.17647 2.82975 1.1145 2.7113 1.00418C2.59286 0.893865 2.52632 0.744245 2.52632 0.588235C2.52632 0.432226 2.59286 0.282606 2.7113 0.17229C2.82975 0.0619746 2.99039 0 3.15789 0H5.68421ZM5.06147 3.90765C4.92882 3.83348 4.77155 3.80725 4.61951 3.83392C4.46747 3.8606 4.33122 3.93832 4.23663 4.05235L4.19558 4.10941L3.25389 5.57059C3.19887 5.65579 3.16768 5.75249 3.16318 5.85182C3.15869 5.95116 3.18103 6.04996 3.22817 6.13917C3.27531 6.22838 3.34573 6.30514 3.43298 6.36243C3.52023 6.41972 3.62153 6.45569 3.72758 6.46706L3.80084 6.47059H4.56884L4.19558 7.05059C4.11332 7.17924 4.08685 7.33227 4.12154 7.47848C4.15624 7.62469 4.24949 7.75308 4.3823 7.83747C4.51511 7.92185 4.67747 7.95589 4.83629 7.93265C4.99511 7.9094 5.13844 7.83061 5.23705 7.71235L5.27874 7.65588L6.21979 6.19412C6.27482 6.10892 6.30601 6.01222 6.3105 5.91288C6.315 5.81354 6.29265 5.71474 6.24551 5.62554C6.19838 5.53633 6.12796 5.45956 6.0407 5.40228C5.95345 5.34499 5.85216 5.30901 5.7461 5.29765L5.67284 5.29412H4.90484L5.27811 4.71412C5.36414 4.58046 5.38972 4.42047 5.34922 4.26927C5.30873 4.11806 5.20546 3.98801 5.06211 3.90765H5.06147Z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="icon" data-type="fuel" data-acitve="true">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="6"
|
|
height="6"
|
|
viewBox="0 0 6 6"
|
|
fill="none"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M0 3.18536C0 2.52347 0 2.1922 0.1659 1.94115C0.3 1.73873 0.5154 1.62852 0.9 1.4782V1.28241C0.9 0.869988 0.9 0.664093 1.0014 0.521988C1.0275 0.485356 1.0581 0.452514 1.092 0.424724C1.224 0.315777 1.416 0.315777 1.8 0.315777H2.0454C2.1975 0.315777 2.2737 0.315777 2.3364 0.333777C2.42017 0.358416 2.49632 0.405817 2.55719 0.471223C2.61806 0.536629 2.66152 0.617737 2.6832 0.706409L2.7048 0.798936L3.6054 0.46104C4.6962 0.0511446 5.2416 -0.153803 5.6208 0.135145C6 0.423777 6 1.04367 6 2.2841V4.06831C6 4.97905 6 5.43442 5.7363 5.71705C5.4729 6 5.0484 6 4.2 6H1.8C0.9516 6 0.5271 6 0.2637 5.71705C-1.78814e-08 5.43474 0 4.97905 0 4.06863V3.18536ZM1.641 2.37789C1.61889 2.3562 1.60116 2.33006 1.58887 2.301C1.57657 2.27195 1.56996 2.24059 1.56942 2.20879C1.56889 2.17699 1.57445 2.1454 1.58576 2.11591C1.59708 2.08642 1.61392 2.05963 1.63529 2.03714C1.65665 2.01465 1.6821 1.99692 1.71012 1.985C1.73814 1.97309 1.76815 1.96724 1.79836 1.9678C1.82857 1.96836 1.85836 1.97533 1.88596 1.98827C1.91356 2.00122 1.9384 2.01988 1.959 2.04315L2.409 2.51683C2.4207 2.52883 2.4306 2.5421 2.439 2.55568C2.5692 2.52631 2.7468 2.52631 3 2.52631C3.2493 2.52631 3.4254 2.52631 3.555 2.55473L4.041 2.04315C4.0616 2.01988 4.08644 2.00122 4.11404 1.98827C4.14164 1.97533 4.17143 1.96836 4.20164 1.9678C4.23185 1.96724 4.26186 1.97309 4.28988 1.985C4.3179 1.99692 4.34335 2.01465 4.36471 2.03714C4.38608 2.05963 4.40292 2.08642 4.41424 2.11591C4.42555 2.1454 4.43111 2.17699 4.43058 2.20879C4.43004 2.24059 4.42343 2.27195 4.41113 2.301C4.39884 2.33006 4.38111 2.3562 4.359 2.37789L3.873 2.88947C3.9 3.02589 3.9 3.21126 3.9 3.47368C3.9 3.7361 3.9 3.92147 3.873 4.05789L4.359 4.56947C4.38111 4.59115 4.39884 4.6173 4.41113 4.64635C4.42343 4.67541 4.43004 4.70677 4.43058 4.73857C4.43111 4.77037 4.42555 4.80196 4.41424 4.83145C4.40292 4.86094 4.38608 4.88773 4.36471 4.91022C4.34335 4.93271 4.3179 4.95044 4.28988 4.96235C4.26186 4.97426 4.23185 4.98011 4.20164 4.97955C4.17143 4.97899 4.14164 4.97203 4.11404 4.95909C4.08644 4.94614 4.0616 4.92748 4.041 4.90421L3.555 4.39263C3.4254 4.42105 3.2493 4.42105 3 4.42105C2.7507 4.42105 2.5746 4.42105 2.445 4.39263L1.959 4.90421C1.91635 4.94604 1.85993 4.96882 1.80164 4.96774C1.74335 4.96665 1.68774 4.9418 1.64651 4.8984C1.60529 4.85501 1.58168 4.79647 1.58065 4.73511C1.57962 4.67375 1.60126 4.61437 1.641 4.56947L2.127 4.05789C2.1 3.92147 2.1 3.7361 2.1 3.47368C2.1 3.20715 2.1 3.0202 2.1279 2.88315C2.11458 2.87401 2.10221 2.86343 2.091 2.85157L1.641 2.37789Z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="help_notification"
|
|
data-component="helpNotification"
|
|
></div>
|
|
<div class="notify-wrapper" data-component="notifications"></div>
|
|
<div class="radar-placeholder" data-component="radar">
|
|
<p>Radar</p>
|
|
</div>
|
|
<div id="progress_bar">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="50"
|
|
height="50"
|
|
viewBox="0 0 50 50"
|
|
fill="none"
|
|
>
|
|
<rect
|
|
width="50"
|
|
height="50"
|
|
rx="6"
|
|
fill="var(--color-transparent)"
|
|
/>
|
|
<rect
|
|
x="3.33337"
|
|
y="3.33325"
|
|
width="43.3333"
|
|
height="43.3333"
|
|
rx="4"
|
|
fill="var(--color-primary)"
|
|
/>
|
|
<path
|
|
d="M26.0584 14.167V16.3586C30.826 16.9445 34.2035 21.2735 33.6171 26.0365C33.1175 29.9857 30.0115 33.1213 26.0584 33.5878V35.7577C32.0315 35.161 36.3756 29.8664 35.7783 23.8991C35.2896 18.7455 31.1953 14.6769 26.0584 14.167ZM23.8864 14.1995C21.7686 14.4057 19.7486 15.2194 18.0979 16.5865L19.6509 18.1922C20.8672 17.2157 22.3334 16.5865 23.8864 16.3695V14.1995ZM16.5666 18.1162C15.2087 19.7625 14.3731 21.7759 14.1665 23.8991H16.3385C16.5449 22.3584 17.1531 20.8937 18.1196 19.6677L16.5666 18.1162ZM14.1774 26.069C14.3946 28.1955 15.2308 30.2027 16.5775 31.8519L18.1196 30.3004C17.1606 29.0739 16.5492 27.6125 16.3494 26.069H14.1774ZM19.6509 31.8953L18.0979 33.3816C19.743 34.7516 21.757 35.6048 23.8864 35.8337V33.6637C22.3414 33.4642 20.8785 32.8533 19.6509 31.8953ZM25.5154 19.5592V25.2553L30.4025 28.1521L29.588 29.4866L23.8864 26.069V19.5592H25.5154Z"
|
|
fill="white"
|
|
/>
|
|
</svg>
|
|
<div>
|
|
<h1></h1>
|
|
<progress max="100" value="0"></progress>
|
|
</div>
|
|
<p id="percent"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cinematic" data-component="cinematic" style="display: none; opacity: 0">
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
|
|
<div class="positions-help-wrapper" style="display: none; opacity: 0">
|
|
<div class="positions-help">
|
|
<p data-translation="SETTINGS_POSITIONS_CANCEL"></p>
|
|
<p data-translation="SETTINGS_POSITIONS_SAVE"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings" style="display: none; opacity: 0">
|
|
<div class="settings-wrapper">
|
|
<header class="option">
|
|
<div>
|
|
<h1 data-translation="SETTINGS_HEADER"></h1>
|
|
<p data-translation="SETTINGS_HEADER_DESCRIPTION"></p>
|
|
</div>
|
|
<p data-translation="SETTINGS_EXIT"></p>
|
|
</header>
|
|
<div class="option" data-option="scale">
|
|
<div class="left">
|
|
<h1 data-translation="SETTINGS_SCALE"></h1>
|
|
<div class="option-icon">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M7.90332 16.3885L6.74769 15.2328C6.59148 15.0766 6.59148 14.8233 6.74769 14.6671L9.71753 11.6973C9.87374 11.5411 9.87374 11.2878 9.71753 11.1316L8.86901 10.2831C8.7128 10.1269 8.45953 10.1269 8.30332 10.2831L5.33347 13.2529C5.17726 13.4091 4.924 13.4091 4.76779 13.2529L3.61215 12.0973C3.36017 11.8453 2.92931 12.0238 2.92931 12.3801L2.92931 16.6713C2.92931 16.8922 3.1084 17.0713 3.32931 17.0713L7.62048 17.0713C7.97684 17.0713 8.15531 16.6404 7.90332 16.3885Z"
|
|
fill="white"
|
|
/>
|
|
<path
|
|
d="M12.0967 3.61204L13.2523 4.76767C13.4085 4.92388 13.4085 5.17715 13.2523 5.33336L10.2825 8.30321C10.1263 8.45942 10.1263 8.71268 10.2825 8.86889L11.131 9.71742C11.2872 9.87363 11.5405 9.87363 11.6967 9.71742L14.6665 6.74757C14.8227 6.59136 15.076 6.59136 15.2322 6.74757L16.3878 7.90321C16.6398 8.15519 17.0707 7.97673 17.0707 7.62036L17.0707 3.32919C17.0707 3.10828 16.8916 2.92919 16.6707 2.92919L12.3795 2.92919C12.0232 2.92919 11.8447 3.36005 12.0967 3.61204Z"
|
|
fill="white"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="buttons">
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="100"
|
|
id="settings-scale-range"
|
|
/>
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
max="100"
|
|
class="btn"
|
|
id="settings-scale"
|
|
/>
|
|
<button
|
|
class="btn"
|
|
id="reset-scale"
|
|
data-translation="SETTINGS_SCALE_RESET_BTN"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
<div class="option" data-option="positions">
|
|
<div class="left">
|
|
<h1 data-translation="SETTINGS_POSITIONS"></h1>
|
|
<div class="option-icon">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M9 8.6V4.4C9 4.17909 8.82091 4 8.6 4H6.96569C6.60932 4 6.43086 3.56914 6.68284 3.31716L9.71716 0.282843C9.87337 0.126633 10.1266 0.126633 10.2828 0.282842L13.3172 3.31716C13.5691 3.56914 13.3907 4 13.0343 4H11.4C11.1791 4 11 4.17909 11 4.4V8.6C11 8.82091 11.1791 9 11.4 9H15.6C15.8209 9 16 8.82091 16 8.6V6.96569C16 6.60932 16.4309 6.43086 16.6828 6.68284L19.7172 9.71716C19.8734 9.87337 19.8734 10.1266 19.7172 10.2828L16.6828 13.3172C16.4309 13.5691 16 13.3907 16 13.0343V11.4C16 11.1791 15.8209 11 15.6 11H11.4C11.1791 11 11 11.1791 11 11.4V15.6C11 15.8209 11.1791 16 11.4 16H13.0343C13.3907 16 13.5691 16.4309 13.3172 16.6828L10.2828 19.7172C10.1266 19.8734 9.87337 19.8734 9.71716 19.7172L6.68284 16.6828C6.43086 16.4309 6.60932 16 6.96569 16H8.6C8.82091 16 9 15.8209 9 15.6V11.4C9 11.1791 8.82091 11 8.6 11H4.4C4.17909 11 4 11.1791 4 11.4V13.0343C4 13.3907 3.56914 13.5691 3.31716 13.3172L0.282843 10.2828C0.126633 10.1266 0.126633 9.87337 0.282842 9.71716L3.31716 6.68284C3.56914 6.43086 4 6.60932 4 6.96569V8.6C4 8.82091 4.17909 9 4.4 9H8.6C8.82091 9 9 8.82091 9 8.6Z"
|
|
fill="white"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="buttons">
|
|
<button
|
|
class="btn primary"
|
|
id="select-positions"
|
|
data-translation="SETTINGS_POSITIONS_SELECT_BTN"
|
|
></button>
|
|
<button
|
|
class="btn"
|
|
id="reset-positions"
|
|
data-translation="SETTINGS_POSITIONS_RESET_BTN"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
<div class="option" data-option="colors">
|
|
<div class="left">
|
|
<h1 data-translation="SETTINGS_COLORS"></h1>
|
|
<div class="option-icon">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 14 14"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M11.2778 7C10.9684 7 10.6716 6.87708 10.4528 6.65829C10.234 6.4395 10.1111 6.14275 10.1111 5.83333C10.1111 5.52391 10.234 5.22717 10.4528 5.00838C10.6716 4.78958 10.9684 4.66667 11.2778 4.66667C11.5872 4.66667 11.8839 4.78958 12.1027 5.00838C12.3215 5.22717 12.4444 5.52391 12.4444 5.83333C12.4444 6.14275 12.3215 6.4395 12.1027 6.65829C11.8839 6.87708 11.5872 7 11.2778 7ZM8.94444 3.88889C8.63503 3.88889 8.33828 3.76597 8.11949 3.54718C7.90069 3.32839 7.77778 3.03164 7.77778 2.72222C7.77778 2.4128 7.90069 2.11606 8.11949 1.89726C8.33828 1.67847 8.63503 1.55556 8.94444 1.55556C9.25386 1.55556 9.55061 1.67847 9.7694 1.89726C9.9882 2.11606 10.1111 2.4128 10.1111 2.72222C10.1111 3.03164 9.9882 3.32839 9.7694 3.54718C9.55061 3.76597 9.25386 3.88889 8.94444 3.88889ZM5.05556 3.88889C4.74614 3.88889 4.44939 3.76597 4.2306 3.54718C4.01181 3.32839 3.88889 3.03164 3.88889 2.72222C3.88889 2.4128 4.01181 2.11606 4.2306 1.89726C4.44939 1.67847 4.74614 1.55556 5.05556 1.55556C5.36497 1.55556 5.66172 1.67847 5.88051 1.89726C6.09931 2.11606 6.22222 2.4128 6.22222 2.72222C6.22222 3.03164 6.09931 3.32839 5.88051 3.54718C5.66172 3.76597 5.36497 3.88889 5.05556 3.88889ZM2.72222 7C2.4128 7 2.11606 6.87708 1.89726 6.65829C1.67847 6.4395 1.55556 6.14275 1.55556 5.83333C1.55556 5.52391 1.67847 5.22717 1.89726 5.00838C2.11606 4.78958 2.4128 4.66667 2.72222 4.66667C3.03164 4.66667 3.32839 4.78958 3.54718 5.00838C3.76597 5.22717 3.88889 5.52391 3.88889 5.83333C3.88889 6.14275 3.76597 6.4395 3.54718 6.65829C3.32839 6.87708 3.03164 7 2.72222 7ZM7 0C5.14348 0 3.36301 0.737498 2.05025 2.05025C0.737498 3.36301 0 5.14348 0 7C0 8.85652 0.737498 10.637 2.05025 11.9497C3.36301 13.2625 5.14348 14 7 14C7.30942 14 7.60617 13.8771 7.82496 13.6583C8.04375 13.4395 8.16667 13.1428 8.16667 12.8333C8.16667 12.53 8.05 12.2578 7.86333 12.0556C7.68444 11.8456 7.56778 11.5733 7.56778 11.2778C7.56778 10.9684 7.69069 10.6716 7.90949 10.4528C8.12828 10.234 8.42502 10.1111 8.73444 10.1111H10.1111C11.1425 10.1111 12.1317 9.70139 12.861 8.97208C13.5903 8.24277 14 7.25362 14 6.22222C14 2.78444 10.8656 0 7 0Z"
|
|
fill="white"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="buttons">
|
|
<button
|
|
class="btn primary"
|
|
id="select-colors"
|
|
data-translation="SETTINGS_COLORS_SELECT_BTN"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
<div class="option" data-option="theme">
|
|
<div class="left">
|
|
<h1 data-translation="SETTINGS_CHOOSE_THEME"></h1>
|
|
<div class="option-icon">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 14 13"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M1.39772 11.4773L0.803885 11.2386C0.442924 11.0909 0.201197 10.8352 0.0787032 10.4716C-0.0437905 10.108 -0.0232972 9.75 0.140183 9.39773L1.39772 6.73864V11.4773ZM4.19226 12.9773C3.80801 12.9773 3.47895 12.8436 3.20509 12.5764C2.93122 12.3091 2.79476 11.9882 2.79569 11.6136V7.52273L4.64707 12.5341C4.682 12.6136 4.71693 12.6905 4.75186 12.7645C4.7868 12.8386 4.83337 12.9095 4.89159 12.9773H4.19226ZM7.79022 12.9091C7.41762 13.0455 7.05666 13.0284 6.70734 12.858C6.35802 12.6875 6.1135 12.4205 5.97377 12.0568L2.86485 3.73864C2.72513 3.375 2.73677 3.02 2.89979 2.67364C3.0628 2.32727 3.33061 2.09136 3.70321 1.96591L8.9779 0.0909091C9.3505 -0.0454546 9.71146 -0.0284091 10.0608 0.142045C10.4101 0.3125 10.6546 0.579545 10.7943 0.943182L13.9033 9.26136C14.043 9.625 14.0313 9.98023 13.8683 10.327C13.7053 10.6739 13.4375 10.9095 13.0649 11.0341L7.79022 12.9091ZM6.28816 4.79545C6.4861 4.79545 6.65215 4.73 6.78628 4.59909C6.92042 4.46818 6.98726 4.30636 6.98679 4.11364C6.98679 3.92045 6.91996 3.75841 6.78628 3.6275C6.65261 3.49659 6.48657 3.43136 6.28816 3.43182C6.09021 3.43182 5.9244 3.49727 5.79073 3.62818C5.65706 3.75909 5.58999 3.92091 5.58953 4.11364C5.58953 4.30682 5.65659 4.46886 5.79073 4.59977C5.92487 4.73068 6.09068 4.79591 6.28816 4.79545Z"
|
|
fill="white"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="buttons">
|
|
<button
|
|
class="btn"
|
|
id="auto-theme"
|
|
data-translation="SETTINGS_THEME_AUTO"
|
|
></button>
|
|
<button
|
|
class="btn"
|
|
id="light-theme"
|
|
data-translation="SETTINGS_THEME_LIGHT"
|
|
></button>
|
|
<button
|
|
class="btn"
|
|
id="dark-theme"
|
|
data-translation="SETTINGS_THEME_DARK"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
<div class="option" data-option="timeType">
|
|
<div class="left">
|
|
<h1 data-translation="SETTINGS_TIME"></h1>
|
|
<div class="option-icon">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
>
|
|
<g clip-path="url(#clip0_318_4)">
|
|
<path
|
|
d="M4 4C0.686293 7.31371 0.686293 12.6863 4 16C7.31371 19.3137 12.6863 19.3137 16 16C19.3137 12.6863 19.3137 7.31371 16 4C12.6863 0.686293 7.31371 0.686293 4 4Z"
|
|
stroke="white"
|
|
stroke-width="2"
|
|
/>
|
|
<path
|
|
d="M9 5V9.5C9 10.0523 9.44772 10.5 10 10.5C10.5523 10.5 11 10.0523 11 9.5V5C11 4.44772 10.5523 4 10 4C9.44772 4 9 4.44772 9 5Z"
|
|
fill="white"
|
|
/>
|
|
<path
|
|
d="M14 9L9 9L9 11L14 11C14.5523 11 15 10.5523 15 10C15 9.44772 14.5523 9 14 9Z"
|
|
fill="white"
|
|
/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_318_4">
|
|
<rect
|
|
width="20"
|
|
height="20"
|
|
fill="white"
|
|
/>
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="buttons" id="settings-time">
|
|
<button
|
|
class="btn"
|
|
data-time="server"
|
|
data-translation="SETTINGS_SERVERTIME"
|
|
></button>
|
|
<button
|
|
class="btn"
|
|
data-time="real"
|
|
data-translation="SETTINGS_REALTIME"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
<div class="option" data-option="speed">
|
|
<div class="left">
|
|
<h1 data-translation="SETTINGS_SPPED_UNIT"></h1>
|
|
<div class="option-icon">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 16 12"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M6.89788 8.736C7.16581 8.99429 7.51553 9.11286 7.94706 9.09171C8.37977 9.07 8.69897 8.92286 8.90466 8.65029L13.577 2.37429L7.03214 6.84514C6.73814 7.036 6.57246 7.33171 6.53512 7.73229C6.49837 8.13286 6.61959 8.46771 6.89877 8.73686L6.89788 8.736ZM1.86718 12C1.70121 12 1.54946 11.9597 1.41194 11.8791C1.27442 11.798 1.15824 11.6877 1.0634 11.5483C0.712491 10.9649 0.44753 10.348 0.268518 9.69771C0.089506 9.048 0 8.38686 0 7.71429C0 6.64971 0.210428 5.648 0.631284 4.70914C1.05214 3.77029 1.62326 2.954 2.34464 2.26029C3.06484 1.56486 3.91159 1.01429 4.88489 0.608571C5.85879 0.202857 6.89788 0 8.00219 0C9.10352 0 10.1364 0.199429 11.1008 0.598286C12.0652 0.997143 12.9105 1.54029 13.6366 2.22771C14.3627 2.91514 14.9371 3.72 15.3598 4.64229C15.7824 5.56514 15.9958 6.55714 15.9999 7.61829C16.0029 8.32686 15.9158 9.01543 15.7385 9.684C15.5607 10.3509 15.2931 10.9943 14.9356 11.6143C14.8527 11.7537 14.7394 11.8529 14.596 11.9117C14.4531 11.9706 14.2984 12 14.1319 12H1.86718Z"
|
|
fill="white"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="buttons" id="settings-units">
|
|
<button
|
|
class="btn"
|
|
data-unit="kmh"
|
|
data-translation="KMH"
|
|
></button>
|
|
<button
|
|
class="btn"
|
|
data-unit="mph"
|
|
data-translation="MPH"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
<div class="option" data-option="minimap">
|
|
<div class="left">
|
|
<h1 data-translation="SETTINGS_DISPLAY_MINIMAP"></h1>
|
|
<div class="option-icon">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 13 16"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M6.5 0C2.9161 0 6.61731e-05 2.8712 6.61731e-05 6.396C-0.0234961 11.552 6.253 15.8272 6.5 16C6.5 16 13.0235 11.552 12.9999 6.4C12.9999 2.8712 10.0839 0 6.5 0ZM6.5 9.6C4.70439 9.6 3.25003 8.168 3.25003 6.4C3.25003 4.632 4.70439 3.2 6.5 3.2C8.29561 3.2 9.74997 4.632 9.74997 6.4C9.74997 8.168 8.29561 9.6 6.5 9.6Z"
|
|
fill="white"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="buttons" id="settings-map">
|
|
<button
|
|
class="btn"
|
|
data-value="true"
|
|
data-translation="SETTINGS_SHOW"
|
|
></button>
|
|
<button
|
|
class="btn"
|
|
data-value="inCar"
|
|
data-translation="SETTINGS_ONLY_IN_CAR"
|
|
></button>
|
|
<button
|
|
class="btn"
|
|
data-value="false"
|
|
data-translation="SETTINGS_HIDE"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
<div class="option" data-option="cinematic">
|
|
<div class="left">
|
|
<h1 data-translation="SETTINGS_CINEMATIC_MODE"></h1>
|
|
<div class="option-icon">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 16 16"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M13.5644 0H2.43556C1.78961 0 1.17011 0.256602 0.713358 0.713358C0.256602 1.17011 0 1.78961 0 2.43556V13.5644C0 14.2104 0.256602 14.8299 0.713358 15.2866C1.17011 15.7434 1.78961 16 2.43556 16H13.5644C14.2104 16 14.8299 15.7434 15.2866 15.2866C15.7434 14.8299 16 14.2104 16 13.5644V2.43556C16 1.78961 15.7434 1.17011 15.2866 0.713358C14.8299 0.256602 14.2104 0 13.5644 0ZM3.55556 7.11111H1.77778V5.33333H3.55556V7.11111ZM1.77778 8.88889H3.55556V10.6667H1.77778V8.88889ZM14.2222 7.11111H12.4444V5.33333H14.2222V7.11111ZM12.4444 8.88889H14.2222V10.6667H12.4444V8.88889ZM14.2222 2.43556V3.55556H12.4444V1.77778H13.5644C13.6508 1.77778 13.7364 1.79479 13.8162 1.82785C13.896 1.8609 13.9685 1.90936 14.0296 1.97044C14.0906 2.03152 14.1391 2.10403 14.1722 2.18384C14.2052 2.26364 14.2222 2.34917 14.2222 2.43556ZM2.43556 1.77778H3.55556V3.55556H1.77778V2.43556C1.77778 2.34917 1.79479 2.26364 1.82785 2.18384C1.8609 2.10403 1.90936 2.03152 1.97044 1.97044C2.03152 1.90936 2.10403 1.8609 2.18384 1.82785C2.26364 1.79479 2.34917 1.77778 2.43556 1.77778ZM1.77778 13.5644V12.4444H3.55556V14.2222H2.43556C2.34917 14.2222 2.26364 14.2052 2.18384 14.1722C2.10403 14.1391 2.03152 14.0906 1.97044 14.0296C1.90936 13.9685 1.8609 13.896 1.82785 13.8162C1.79479 13.7364 1.77778 13.6508 1.77778 13.5644ZM14.2222 13.5644C14.2222 13.7389 14.1529 13.9062 14.0296 14.0296C13.9062 14.1529 13.7389 14.2222 13.5644 14.2222H12.4444V12.4444H14.2222V13.5644Z"
|
|
fill="white"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="buttons">
|
|
<div class="checkbox-wrapper">
|
|
<div class="checked">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="15"
|
|
height="12"
|
|
viewBox="0 0 15 12"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M14.7447 1.61816L5.51669 11.7214C5.43632 11.8097 5.34082 11.8798 5.23566 11.9276C5.1305 11.9754 5.01776 12 4.90389 12C4.79003 12 4.67729 11.9754 4.57213 11.9276C4.46697 11.8798 4.37147 11.8097 4.29109 11.7214L0.25383 7.30124C0.173356 7.21314 0.10952 7.10854 0.0659682 6.99342C0.022416 6.8783 1.19916e-09 6.75492 0 6.63032C-1.19915e-09 6.50572 0.022416 6.38234 0.0659682 6.26722C0.10952 6.15211 0.173356 6.04751 0.25383 5.9594C0.334304 5.8713 0.42984 5.80141 0.534984 5.75372C0.640128 5.70604 0.752822 5.6815 0.866629 5.6815C0.980436 5.6815 1.09313 5.70604 1.19827 5.75372C1.30342 5.80141 1.39895 5.8713 1.47943 5.9594L4.90461 9.70944L13.5206 0.277904C13.6831 0.0999648 13.9035 0 14.1334 0C14.3632 0 14.5836 0.0999648 14.7462 0.277904C14.9087 0.455842 15 0.697179 15 0.948823C15 1.20047 14.9087 1.4418 14.7462 1.61974L14.7447 1.61816Z"
|
|
fill="var(--color-text-secondary)"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="unchecked">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="12"
|
|
height="12"
|
|
viewBox="0 0 12 12"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M11.7472 10.5349C11.9081 10.6958 11.9986 10.9141 11.9986 11.1417C11.9986 11.3694 11.9081 11.5877 11.7472 11.7486C11.5862 11.9096 11.3679 12 11.1403 12C10.9126 12 10.6943 11.9096 10.5333 11.7486L6 7.21412L1.46523 11.7472C1.30427 11.9081 1.08595 11.9986 0.858315 11.9986C0.630676 11.9986 0.41236 11.9081 0.251395 11.7472C0.0904294 11.5862 2.39857e-09 11.3679 0 11.1403C-2.39857e-09 10.9127 0.0904294 10.6944 0.251395 10.5334L4.78616 6.00036L0.252823 1.46586C0.0918573 1.30491 0.00142808 1.0866 0.00142808 0.858978C0.00142808 0.631352 0.0918573 0.413049 0.252823 0.252094C0.413788 0.0911379 0.632103 0.000713864 0.859743 0.000713861C1.08738 0.000713859 1.3057 0.0911379 1.46666 0.252094L6 4.78659L10.5348 0.251379C10.6957 0.0904238 10.914 -3.79225e-09 11.1417 0C11.3693 3.79225e-09 11.5876 0.0904238 11.7486 0.251379C11.9096 0.412335 12 0.630638 12 0.858263C12 1.08589 11.9096 1.30419 11.7486 1.46515L7.21384 6.00036L11.7472 10.5349Z"
|
|
fill="var(--color-text-secondary)"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="checkmark"></div>
|
|
<input
|
|
type="checkbox"
|
|
data-name="CinematicMode"
|
|
id="settings-cinematic"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="option" data-option="volume">
|
|
<div class="left">
|
|
<h1 data-translation="SETTINGS_VOLUME"></h1>
|
|
<div class="option-icon">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="19"
|
|
height="16"
|
|
viewBox="0 0 19 16"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M1.15799 9.9299C0.808267 9.34687 0.623535 8.67977 0.623535 7.9999C0.623535 7.32003 0.808267 6.65293 1.15799 6.0699C1.26553 5.89042 1.40943 5.73542 1.58045 5.61487C1.75146 5.49431 1.9458 5.41087 2.15099 5.3699L3.84399 5.0309C3.94496 5.01091 4.03602 4.95691 4.10199 4.8779L6.16999 2.3949C7.35199 0.9749 7.94399 0.2659 8.47099 0.4569C8.99999 0.6479 8.99999 1.5719 8.99999 3.4199V12.5819C8.99999 14.4289 8.99999 15.3519 8.47199 15.5439C7.94499 15.7339 7.35299 15.0249 6.17099 13.6059L4.09999 11.1219C4.03427 11.0431 3.94359 10.9891 3.84299 10.9689L2.14999 10.6299C1.9448 10.5889 1.75046 10.5055 1.57945 10.3849C1.40843 10.2644 1.26553 10.1094 1.15799 9.9299Z"
|
|
fill="white"
|
|
/>
|
|
<path
|
|
d="M11.536 4.46377C12.469 5.39677 12.9955 6.66074 13.0005 7.98021C13.0056 9.29968 12.4889 10.5677 11.563 11.5078M15.657 2.34277C17.1498 3.83544 17.9922 5.85766 18.0004 7.96871C18.0087 10.0798 17.1821 12.1085 15.701 13.6128"
|
|
stroke="white"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="buttons">
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="100"
|
|
id="settings-volume-range"
|
|
/>
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
max="100"
|
|
class="btn"
|
|
id="settings-volume"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<header class="option">
|
|
<div>
|
|
<h1 data-translation="SETTINGS_STATUS_HEADER"></h1>
|
|
<p></p>
|
|
</div>
|
|
</header>
|
|
<div
|
|
class="option"
|
|
data-for-component="healthAndVest"
|
|
data-option="healthAndVest"
|
|
>
|
|
<div class="left">
|
|
<h1 data-translation="SETTINGS_HEALTH_AND_ARMOR"></h1>
|
|
</div>
|
|
<div class="buttons">
|
|
<button
|
|
class="btn"
|
|
data-value="true"
|
|
data-translation="SETTINGS_SHOW"
|
|
></button>
|
|
<button
|
|
class="btn"
|
|
data-value="false"
|
|
data-translation="SETTINGS_SHOW_IF_UNDER"
|
|
></button>
|
|
<input type="number" min="0" max="100" class="btn" />
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="option"
|
|
data-for-component="food"
|
|
data-option="food"
|
|
>
|
|
<div class="left">
|
|
<h1 data-translation="SETTINGS_HUNGER_AND_THIRST"></h1>
|
|
</div>
|
|
<div class="buttons">
|
|
<button
|
|
class="btn"
|
|
data-value="true"
|
|
data-translation="SETTINGS_SHOW"
|
|
></button>
|
|
<button
|
|
class="btn"
|
|
data-value="false"
|
|
data-translation="SETTINGS_SHOW_IF_UNDER"
|
|
></button>
|
|
<input type="number" min="0" max="100" class="btn" />
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="option"
|
|
data-for-component="stress"
|
|
data-option="stress"
|
|
>
|
|
<div class="left">
|
|
<h1 data-translation="SETTINGS_STRESS"></h1>
|
|
</div>
|
|
<div class="buttons">
|
|
<button
|
|
class="btn"
|
|
data-value="true"
|
|
data-translation="SETTINGS_SHOW"
|
|
></button>
|
|
<button
|
|
class="btn"
|
|
data-value="false"
|
|
data-translation="SETTINGS_SHOW_IF_ABOVE"
|
|
></button>
|
|
<input type="number" min="0" max="100" class="btn" />
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="option"
|
|
data-for-component="oxygen"
|
|
data-option="oxygen"
|
|
>
|
|
<div class="left">
|
|
<h1 data-translation="SETTINGS_OXYGEN"></h1>
|
|
</div>
|
|
<div class="buttons">
|
|
<button
|
|
class="btn"
|
|
data-value="true"
|
|
data-translation="SETTINGS_SHOW"
|
|
></button>
|
|
<button
|
|
class="btn"
|
|
data-value="false"
|
|
data-translation="SETTINGS_SHOW_IF_UNDER"
|
|
></button>
|
|
<input type="number" min="0" max="100" class="btn" />
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="option"
|
|
data-for-component="stamina"
|
|
data-option="stamina"
|
|
>
|
|
<div class="left">
|
|
<h1 data-translation="SETTINGS_STAMINA"></h1>
|
|
</div>
|
|
<div class="buttons">
|
|
<button
|
|
class="btn"
|
|
data-value="true"
|
|
data-translation="SETTINGS_SHOW"
|
|
></button>
|
|
<button
|
|
class="btn"
|
|
data-value="false"
|
|
data-translation="SETTINGS_SHOW_IF_UNDER"
|
|
></button>
|
|
<input type="number" min="0" max="100" class="btn" />
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="option"
|
|
data-for-component="voice"
|
|
data-option="voice"
|
|
>
|
|
<div class="left">
|
|
<h1 data-translation="SETTINGS_MICROPHONE"></h1>
|
|
</div>
|
|
<div class="buttons">
|
|
<button
|
|
class="btn"
|
|
data-value="true"
|
|
data-translation="SETTINGS_SHOW"
|
|
></button>
|
|
<button
|
|
class="btn"
|
|
data-value="false"
|
|
data-translation="SETTINGS_HIDE"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="option"
|
|
data-for-component="location"
|
|
data-option="location"
|
|
id="settings-location"
|
|
>
|
|
<div class="left">
|
|
<h1 data-translation="SETTINGS_STREET_NAMES"></h1>
|
|
</div>
|
|
<div class="buttons">
|
|
<button
|
|
class="btn"
|
|
data-value="true"
|
|
data-translation="SETTINGS_SHOW"
|
|
></button>
|
|
<button
|
|
class="btn"
|
|
data-value="inCar"
|
|
data-translation="SETTINGS_ONLY_IN_CAR"
|
|
></button>
|
|
<button
|
|
class="btn"
|
|
data-value="false"
|
|
data-translation="SETTINGS_HIDE"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="option"
|
|
data-for-component="radio"
|
|
data-option="radio"
|
|
>
|
|
<div class="left">
|
|
<h1 data-translation="SETTINGS_RADIO"></h1>
|
|
</div>
|
|
<div class="buttons">
|
|
<button
|
|
class="btn"
|
|
data-value="true"
|
|
data-translation="SETTINGS_SHOW"
|
|
></button>
|
|
<button
|
|
class="btn"
|
|
data-value="false"
|
|
data-translation="SETTINGS_HIDE"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="option"
|
|
data-for-component="time"
|
|
data-option="time"
|
|
>
|
|
<div class="left">
|
|
<h1 data-translation="SETTINGS_GAME_TIME"></h1>
|
|
</div>
|
|
<div class="buttons">
|
|
<button
|
|
class="btn"
|
|
data-value="true"
|
|
data-translation="SETTINGS_SHOW"
|
|
></button>
|
|
<button
|
|
class="btn"
|
|
data-value="false"
|
|
data-translation="SETTINGS_HIDE"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="option"
|
|
data-for-component="cash"
|
|
data-option="cash"
|
|
>
|
|
<div class="left">
|
|
<h1 data-translation="SETTINGS_CASH"></h1>
|
|
</div>
|
|
<div class="buttons">
|
|
<button
|
|
class="btn"
|
|
data-value="true"
|
|
data-translation="SETTINGS_SHOW"
|
|
></button>
|
|
<button
|
|
class="btn"
|
|
data-value="false"
|
|
data-translation="SETTINGS_HIDE"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="option"
|
|
data-for-component="dirt_money"
|
|
data-option="dirt_money"
|
|
>
|
|
<div class="left">
|
|
<h1 data-translation="SETTINGS_DIRT_MONEY"></h1>
|
|
</div>
|
|
<div class="buttons">
|
|
<button
|
|
class="btn"
|
|
data-value="true"
|
|
data-translation="SETTINGS_SHOW"
|
|
></button>
|
|
<button
|
|
class="btn"
|
|
data-value="false"
|
|
data-translation="SETTINGS_HIDE"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="option"
|
|
data-for-component="society_money"
|
|
data-option="society_money"
|
|
>
|
|
<div class="left">
|
|
<h1 data-translation="SETTINGS_SOCIETY_MONEY"></h1>
|
|
</div>
|
|
<div class="buttons">
|
|
<button
|
|
class="btn"
|
|
data-value="true"
|
|
data-translation="SETTINGS_SHOW"
|
|
></button>
|
|
<button
|
|
class="btn"
|
|
data-value="false"
|
|
data-translation="SETTINGS_HIDE"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="option"
|
|
data-for-component="bank"
|
|
data-option="bank"
|
|
>
|
|
<div class="left">
|
|
<h1 data-translation="SETTINGS_BANK"></h1>
|
|
</div>
|
|
<div class="buttons">
|
|
<button
|
|
class="btn"
|
|
data-value="true"
|
|
data-translation="SETTINGS_SHOW"
|
|
></button>
|
|
<button
|
|
class="btn"
|
|
data-value="false"
|
|
data-translation="SETTINGS_HIDE"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="option"
|
|
data-for-component="serverId"
|
|
data-option="serverId"
|
|
>
|
|
<div class="left">
|
|
<h1 data-translation="SETTINGS_SERVER_ID"></h1>
|
|
</div>
|
|
<div class="buttons">
|
|
<button
|
|
class="btn"
|
|
data-value="true"
|
|
data-translation="SETTINGS_SHOW"
|
|
></button>
|
|
<button
|
|
class="btn"
|
|
data-value="false"
|
|
data-translation="SETTINGS_HIDE"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
<div class="option" data-for-component="job" data-option="job">
|
|
<div class="left">
|
|
<h1 data-translation="SETTINGS_JOB"></h1>
|
|
</div>
|
|
<div class="buttons">
|
|
<button
|
|
class="btn"
|
|
data-value="true"
|
|
data-translation="SETTINGS_SHOW"
|
|
></button>
|
|
<button
|
|
class="btn"
|
|
data-value="false"
|
|
data-translation="SETTINGS_HIDE"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="option"
|
|
data-for-component="weapon"
|
|
data-option="weapon"
|
|
>
|
|
<div class="left">
|
|
<h1 data-translation="SETTINGS_WEAPON"></h1>
|
|
</div>
|
|
<div class="buttons">
|
|
<button
|
|
class="btn"
|
|
data-value="true"
|
|
data-translation="SETTINGS_SHOW"
|
|
></button>
|
|
<button
|
|
class="btn"
|
|
data-value="false"
|
|
data-translation="SETTINGS_HIDE"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
<div class="option" id="settings-exit">
|
|
<div>
|
|
<h1 data-translation="SETTINGS_WANT_TO_SAVE"></h1>
|
|
</div>
|
|
<div class="buttons">
|
|
<button
|
|
class="btn primary"
|
|
id="settings-save"
|
|
data-translation="SETTINGS_SAVE"
|
|
></button>
|
|
<button
|
|
class="btn"
|
|
id="settings-cancel"
|
|
data-translation="SETTINGS_CANCEL"
|
|
></button>
|
|
<button
|
|
class="btn"
|
|
id="settings-reset"
|
|
data-translation="SETTINGS_RESET"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colors-wrapper" style="display: none; opacity: 0">
|
|
<header class="option">
|
|
<div>
|
|
<h1 data-translation="COLORS_HEADER"></h1>
|
|
<p data-translation="COLORS_HEADER_DESCRIPTION"></p>
|
|
</div>
|
|
</header>
|
|
<div class="option">
|
|
<div>
|
|
<h1 data-translation="COLORS_CHOOSE_THEME"></h1>
|
|
</div>
|
|
<div class="buttons" id="colors-theme">
|
|
<button
|
|
class="btn"
|
|
data-value="false"
|
|
data-translation="SETTINGS_THEME_LIGHT"
|
|
></button>
|
|
<button
|
|
class="btn"
|
|
data-value="true"
|
|
data-translation="SETTINGS_THEME_DARK"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
<div class="option">
|
|
<div>
|
|
<h1 data-translation="COLORS_SELECT_COLORS"></h1>
|
|
</div>
|
|
<div class="buttons">
|
|
<div class="color" id="--color-primary">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M19.6764 2.92459L17.0766 0.324955C16.6433 -0.108318 15.9433 -0.108318 15.51 0.324955L12.0436 3.79114L9.89931 1.66921L8.33275 3.23566L9.91042 4.81322L0 14.723V20H5.27741L15.1878 10.0903L16.7655 11.6678L18.332 10.1014L16.1989 7.96834L19.6653 4.50215C20.1097 4.05777 20.1097 3.35787 19.6764 2.92459ZM4.35525 17.7781L2.22207 15.645L11.177 6.69074L13.3102 8.82377L4.35525 17.7781Z"
|
|
fill="#292929"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="color" id="--color-secondary">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M19.6764 2.92459L17.0766 0.324955C16.6433 -0.108318 15.9433 -0.108318 15.51 0.324955L12.0436 3.79114L9.89931 1.66921L8.33275 3.23566L9.91042 4.81322L0 14.723V20H5.27741L15.1878 10.0903L16.7655 11.6678L18.332 10.1014L16.1989 7.96834L19.6653 4.50215C20.1097 4.05777 20.1097 3.35787 19.6764 2.92459ZM4.35525 17.7781L2.22207 15.645L11.177 6.69074L13.3102 8.82377L4.35525 17.7781Z"
|
|
fill="#292929"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="color" id="--color-transparent">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M19.6764 2.92459L17.0766 0.324955C16.6433 -0.108318 15.9433 -0.108318 15.51 0.324955L12.0436 3.79114L9.89931 1.66921L8.33275 3.23566L9.91042 4.81322L0 14.723V20H5.27741L15.1878 10.0903L16.7655 11.6678L18.332 10.1014L16.1989 7.96834L19.6653 4.50215C20.1097 4.05777 20.1097 3.35787 19.6764 2.92459ZM4.35525 17.7781L2.22207 15.645L11.177 6.69074L13.3102 8.82377L4.35525 17.7781Z"
|
|
fill="#292929"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="color" id="--color-text-primary">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M19.6764 2.92459L17.0766 0.324955C16.6433 -0.108318 15.9433 -0.108318 15.51 0.324955L12.0436 3.79114L9.89931 1.66921L8.33275 3.23566L9.91042 4.81322L0 14.723V20H5.27741L15.1878 10.0903L16.7655 11.6678L18.332 10.1014L16.1989 7.96834L19.6653 4.50215C20.1097 4.05777 20.1097 3.35787 19.6764 2.92459ZM4.35525 17.7781L2.22207 15.645L11.177 6.69074L13.3102 8.82377L4.35525 17.7781Z"
|
|
fill="#292929"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div class="color" id="--color-text-secondary">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 20 20"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M19.6764 2.92459L17.0766 0.324955C16.6433 -0.108318 15.9433 -0.108318 15.51 0.324955L12.0436 3.79114L9.89931 1.66921L8.33275 3.23566L9.91042 4.81322L0 14.723V20H5.27741L15.1878 10.0903L16.7655 11.6678L18.332 10.1014L16.1989 7.96834L19.6653 4.50215C20.1097 4.05777 20.1097 3.35787 19.6764 2.92459ZM4.35525 17.7781L2.22207 15.645L11.177 6.69074L13.3102 8.82377L4.35525 17.7781Z"
|
|
fill="#292929"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="option">
|
|
<div>
|
|
<h1 data-translation="COLORS_WANT_TO_SAVE"></h1>
|
|
</div>
|
|
<div class="buttons">
|
|
<button
|
|
class="btn primary"
|
|
id="colors-save"
|
|
data-translation="SETTINGS_SAVE"
|
|
></button>
|
|
<button
|
|
class="btn"
|
|
id="colors-cancel"
|
|
data-translation="SETTINGS_CANCEL"
|
|
></button>
|
|
<button
|
|
class="btn"
|
|
id="colors-reset"
|
|
data-translation="SETTINGS_RESET"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
<div class="color-picker" style="display: none; opacity: 0">
|
|
<div class="canvas-wrapper">
|
|
<canvas id="palette"></canvas>
|
|
</div>
|
|
<div class="row">
|
|
<div id="sample"></div>
|
|
<div class="col">
|
|
<div class="select-wrapper">
|
|
<div id="hue"></div>
|
|
</div>
|
|
<div class="select-wrapper">
|
|
<div id="alpha"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="hex">
|
|
<div class="input-wrapper">
|
|
<p>HEX</p>
|
|
<input type="text" name="hex" />
|
|
</div>
|
|
</div>
|
|
<div class="rgba">
|
|
<div class="input-wrapper">
|
|
<p>R</p>
|
|
<input
|
|
type="number"
|
|
name="r"
|
|
min="0"
|
|
max="255"
|
|
/>
|
|
</div>
|
|
<div class="input-wrapper">
|
|
<p>G</p>
|
|
<input
|
|
type="number"
|
|
name="g"
|
|
min="0"
|
|
max="255"
|
|
/>
|
|
</div>
|
|
<div class="input-wrapper">
|
|
<p>B</p>
|
|
<input
|
|
type="number"
|
|
name="b"
|
|
min="0"
|
|
max="255"
|
|
/>
|
|
</div>
|
|
<div class="input-wrapper">
|
|
<p>A</p>
|
|
<input
|
|
type="number"
|
|
name="a"
|
|
min="0"
|
|
max="255"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|