398 lines
18 KiB
HTML
398 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="english">
|
|
<head>
|
|
<title>BIT-VehControl</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
|
|
<meta charset="utf-8" />
|
|
<meta property="twitter:card" content="summary_large_image" />
|
|
|
|
<style data-tag="reset-style-sheet">
|
|
html { line-height: 1.15;}body { margin: 0;}* { box-sizing: border-box; border-width: 0; border-style: solid;}p,li,ul,pre,div,h1,h2,h3,h4,h5,h6 { margin: 0; padding: 0;}button,input,optgroup,select,textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0;}button,select { text-transform: none;}button,[type="button"],[type="reset"],[type="submit"] { -webkit-appearance: button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner { border-style: none; padding: 0;}button:-moz-focus,[type="button"]:-moz-focus,[type="reset"]:-moz-focus,[type="submit"]:-moz-focus { outline: 1px dotted ButtonText;}a { color: inherit; text-decoration: inherit;}input { padding: 2px 4px;}img { display: block;}html { scroll-behavior: smooth }
|
|
</style>
|
|
<style data-tag="default-style-sheet">
|
|
html {
|
|
font-family: Inter;
|
|
font-size: 16px;
|
|
}
|
|
|
|
body {
|
|
font-weight: 400;
|
|
font-style:normal;
|
|
text-decoration: none;
|
|
text-transform: none;
|
|
letter-spacing: normal;
|
|
line-height: 1.15;
|
|
color: var(--dl-color-gray-black);
|
|
background-color: transparent;
|
|
|
|
}
|
|
</style>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
|
|
data-tag="font"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
|
|
data-tag="font"
|
|
/>
|
|
<link rel="stylesheet" href="./style.css" />
|
|
<script src='https://code.jquery.com/ui/1.12.1/jquery-ui.js'></script>
|
|
</head>
|
|
<body id="body">
|
|
<div>
|
|
<link href="./veh-control.css" rel="stylesheet" />
|
|
<img class="rearcam" src="./public/playground_assets/rearcam.png">
|
|
<div class="rearcam-exit">
|
|
<span>Exit</span>
|
|
<img src="./public/playground_assets/wpf_shutdown.svg">
|
|
</div>
|
|
<div class="veh-control-container">
|
|
<div class="veh-control-veh-control">
|
|
<div class="veh-control-windows">
|
|
<div class="veh-control-windows-1"><img class="img-windows" src="./public/playground_assets/window2.png"></div>
|
|
<div class="veh-control-windows-2"><img class="img-windows2" src="./public/playground_assets/window1.png"></div>
|
|
<div class="veh-control-windows-3"><img class="img-windows" src="./public/playground_assets/window2.png"></div>
|
|
<div class="veh-control-windows-4"><img class="img-windows2" src="./public/playground_assets/window1.png"></div>
|
|
</div>
|
|
<div class="veh-control-container1">
|
|
<img
|
|
src="public/playground_assets/rectangle154-n6x-600w.png"
|
|
alt="Rectangle154"
|
|
class="veh-control-rectangle1"
|
|
/>
|
|
<img
|
|
src="public/playground_assets/rectangle255-ell-600w.png"
|
|
alt="Rectangle255"
|
|
class="veh-control-rectangle2"
|
|
/>
|
|
<div class="veh-control-main">
|
|
<div class="veh-control-gps">
|
|
<img
|
|
src="public/playground_assets/rectangle357-xl9-200h.png"
|
|
alt="Rectangle357"
|
|
class="veh-control-rectangle3"
|
|
/>
|
|
<img
|
|
src="public/playground_assets/carbonlocationfilled514-zh3.svg"
|
|
alt="carbonlocationfilled514"
|
|
class="veh-control-carbonlocationfilled"
|
|
/>
|
|
<span class="veh-control-text">No Destination</span>
|
|
<span class="veh-control-text02">-</span>
|
|
</div>
|
|
<div class="veh-control-temp">
|
|
<img
|
|
src="public/playground_assets/raphaeltemp523-ilqo.svg"
|
|
alt="raphaeltemp523"
|
|
class="veh-control-raphaeltemp"
|
|
/>
|
|
<span class="veh-control-text04"><span>Engine</span></span>
|
|
<span class="veh-control-text06">98º</span>
|
|
</div>
|
|
<div class="veh-control-emergency">
|
|
<img
|
|
src="public/playground_assets/rectangle5528-1lmk-200h.png"
|
|
alt="Rectangle5528"
|
|
class="veh-control-rectangle5"
|
|
/>
|
|
<img
|
|
src="public/playground_assets/materialsymbolsemergencyhome530-jkq.svg"
|
|
alt="materialsymbolsemergencyhome530"
|
|
class="veh-control-materialsymbolsemergencyhome"
|
|
/>
|
|
<span class="veh-control-text08"><span>Emergency</span></span>
|
|
<img
|
|
src="public/playground_assets/rectangle6533-6bqs-200h.png"
|
|
alt="Rectangle6533"
|
|
class="veh-control-rectangle6"
|
|
/>
|
|
<div class="veh-control-ellipse1"></div>
|
|
</div>
|
|
<div class="veh-control-lock">
|
|
<div class="veh-control-rectangle8"></div>
|
|
<div class="veh-control-rectangle7"></div>
|
|
<img
|
|
src="public/playground_assets/dashiconslockduplicate546-69igj.svg"
|
|
alt="dashiconslockduplicate546"
|
|
class="veh-control-dashiconslockduplicate"
|
|
/>
|
|
<span class="veh-control-text10"><span>Lock</span></span>
|
|
</div>
|
|
<div class="veh-control-lights">
|
|
<div class="veh-control-rectangle16"></div>
|
|
<span class="veh-control-text12"><span>Lights</span></span>
|
|
<img
|
|
src="public/playground_assets/mdicarlightdimmed577-tfr9.svg"
|
|
alt="mdicarlightdimmed577"
|
|
class="veh-control-mdicarlightdimmed"
|
|
/>
|
|
</div>
|
|
<div class="veh-control-seat">
|
|
<div class="veh-control-rectangle10"></div>
|
|
<span class="veh-control-text14"><span>Seat</span></span>
|
|
<img
|
|
src="public/playground_assets/mdicarseat555-hoa7.svg"
|
|
alt="mdicarseat555"
|
|
class="veh-control-mdicarseat"
|
|
/>
|
|
</div>
|
|
<div class="veh-control-engine">
|
|
<div class="veh-control-rectangle12"></div>
|
|
<span class="veh-control-text16"><span>Engine</span></span>
|
|
<img
|
|
src="public/playground_assets/mdiengine562-rqbd.svg"
|
|
alt="mdiengine562"
|
|
class="veh-control-mdiengine"
|
|
/>
|
|
</div>
|
|
<div class="veh-control-interiorlight">
|
|
<div class="veh-control-rectangle13"></div>
|
|
<span class="veh-control-text18"><span>Light</span></span>
|
|
<img
|
|
src="public/playground_assets/carbonlightfilled569-rq2c.svg"
|
|
alt="carbonlightfilled569"
|
|
class="veh-control-carbonlightfilled"
|
|
/>
|
|
<span class="veh-control-text20"><span>Interior</span></span>
|
|
</div>
|
|
<div class="veh-control-car">
|
|
<img
|
|
src="public/playground_assets/isolatedrealisticshinyblackelegantsportcitycarfrom542-y7pc-300h.png"
|
|
alt="isolatedrealisticshinyblackelegantsportcitycarfrom542"
|
|
class="veh-control-isolatedrealisticshinyblackelegantsportcitycarfrom"
|
|
/>
|
|
<div class="veh-control-door2">
|
|
<img
|
|
src="public/playground_assets/bxslockopenalt580-nl5g.svg"
|
|
alt="bxslockopenalt580"
|
|
class="veh-control-bxslockopenalt"
|
|
/>
|
|
<img
|
|
src="public/playground_assets/ellipse2579-cs1m-200h.png"
|
|
alt="Ellipse2579"
|
|
class="veh-control-ellipse2"
|
|
/>
|
|
</div>
|
|
<div class="veh-control-door1">
|
|
<img
|
|
src="public/playground_assets/bxslockopenalt584-f9jz.svg"
|
|
alt="bxslockopenalt584"
|
|
class="veh-control-bxslockopenalt1"
|
|
/>
|
|
<img
|
|
src="public/playground_assets/ellipse2586-356p-200h.png"
|
|
alt="Ellipse2586"
|
|
class="veh-control-ellipse21"
|
|
/>
|
|
</div>
|
|
<div class="veh-control-door3">
|
|
<img
|
|
src="public/playground_assets/bxslockopenalt588-dqxk.svg"
|
|
alt="bxslockopenalt588"
|
|
class="veh-control-bxslockopenalt2"
|
|
/>
|
|
<img
|
|
src="public/playground_assets/ellipse2590-1nes-200h.png"
|
|
alt="Ellipse2590"
|
|
class="veh-control-ellipse22"
|
|
/>
|
|
</div>
|
|
<div class="veh-control-door4">
|
|
<img
|
|
src="public/playground_assets/bxslockopenalt592-gbc.svg"
|
|
alt="bxslockopenalt592"
|
|
class="veh-control-bxslockopenalt3"
|
|
/>
|
|
<img
|
|
src="public/playground_assets/ellipse2594-3n82-200h.png"
|
|
alt="Ellipse2594"
|
|
class="veh-control-ellipse23"
|
|
/>
|
|
</div>
|
|
<div class="veh-control-door5">
|
|
<img
|
|
src="public/playground_assets/bxslockopenalt596-yok.svg"
|
|
alt="bxslockopenalt596"
|
|
class="veh-control-bxslockopenalt4"
|
|
/>
|
|
<img
|
|
src="public/playground_assets/ellipse2598-9n3-200h.png"
|
|
alt="Ellipse2598"
|
|
class="veh-control-ellipse24"
|
|
/>
|
|
</div>
|
|
<div class="veh-control-door6">
|
|
<img
|
|
src="public/playground_assets/bxslockopenalt5100-bhr.svg"
|
|
alt="bxslockopenalt5100"
|
|
class="veh-control-bxslockopenalt5"
|
|
/>
|
|
<img
|
|
src="public/playground_assets/ellipse25102-c20or-200h.png"
|
|
alt="Ellipse25102"
|
|
class="veh-control-ellipse25"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="veh-control-fuel">
|
|
<img
|
|
src="public/playground_assets/bifuelpumpfill5105-7juq.svg"
|
|
alt="bifuelpumpfill5105"
|
|
class="veh-control-bifuelpumpfill"
|
|
/>
|
|
<div class="veh-control-rectangle81"><div class="veh-control-rectangle9"></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="veh-control-playergroup">
|
|
<div class="veh-control-searchbutton">
|
|
<img
|
|
src="public/playground_assets/rectangle185162-3oi-200h.png"
|
|
alt="Rectangle185162"
|
|
class="veh-control-rectangle18"
|
|
/>
|
|
<img
|
|
src="public/playground_assets/fasolidsearch5399-cpd.svg"
|
|
alt="fasolidsearch5399"
|
|
class="veh-control-fasolidsearch"
|
|
/>
|
|
</div>
|
|
<div class="veh-control-searchinput">
|
|
<input class="veh-control-text22" placeholder="Youtube URL">
|
|
</div>
|
|
<div class="veh-control-play">
|
|
<div class="veh-control-rectangle20"></div>
|
|
<img
|
|
src="public/playground_assets/elplay5436-kauf.svg"
|
|
alt="elplay5436"
|
|
class="veh-control-elplay"
|
|
/>
|
|
</div>
|
|
<div class="veh-control-anterior">
|
|
<div class="veh-control-rectangle201"></div>
|
|
<img
|
|
src="public/playground_assets/cifastrewind5438-w16.svg"
|
|
alt="cifastrewind5438"
|
|
class="veh-control-cifastrewind"
|
|
/>
|
|
</div>
|
|
<div class="veh-control-siguente">
|
|
<div class="veh-control-rectangle202"></div>
|
|
<img
|
|
src="public/playground_assets/cifastforward5444-47uf.svg"
|
|
alt="cifastforward5444"
|
|
class="veh-control-cifastforward"
|
|
/>
|
|
</div>
|
|
<div class="veh-control-player">
|
|
<img
|
|
src="public/playground_assets/equalizer.gif"
|
|
alt="IMAGE9145yafeO2L15430"
|
|
class="veh-control-i-m-a-g-e9145yafe-o2l1"
|
|
/>
|
|
<img
|
|
src="public/playground_assets/rectangle175159-f6tl-500w.png"
|
|
alt="Rectangle175159"
|
|
class="veh-control-rectangle17"
|
|
/>
|
|
<img
|
|
src="public/playground_assets/rectangle185432-nxzi.svg"
|
|
alt="Rectangle185432"
|
|
class="veh-control-rectangle181"
|
|
/>
|
|
<img
|
|
src="public/playground_assets/rectangle195435-760f.svg"
|
|
alt="Rectangle195435"
|
|
class="veh-control-rectangle19"
|
|
/>
|
|
<div class="veh-control-volumeup">
|
|
<img
|
|
src="public/playground_assets/rectangle205414-v7lc-200h.png"
|
|
alt="Rectangle205414"
|
|
class="veh-control-rectangle203"
|
|
/>
|
|
<img
|
|
src="public/playground_assets/emojionemonotonespeakerhighvolume5422-k68.svg"
|
|
alt="emojionemonotonespeakerhighvolume5422"
|
|
class="veh-control-emojionemonotonespeakerhighvolume"
|
|
/>
|
|
</div>
|
|
<div class="veh-control-volumedown">
|
|
<img
|
|
src="public/playground_assets/rectangle225416-ye-200h.png"
|
|
alt="Rectangle225416"
|
|
class="veh-control-rectangle22"
|
|
/>
|
|
<img
|
|
src="public/playground_assets/emojionemonotonespeakermediumvolume5419-gsqr.svg"
|
|
alt="emojionemonotonespeakermediumvolume5419"
|
|
class="veh-control-emojionemonotonespeakermediumvolume"
|
|
/>
|
|
</div>
|
|
<span class="veh-control-text24">Waiting:</span>
|
|
<span class="veh-control-text26">
|
|
<span></span>
|
|
</span>
|
|
<span class="veh-control-text28">
|
|
<span class="veh-control-text29">0:00 / 0:00</span>
|
|
</span>
|
|
<span class="veh-control-text31">
|
|
<span class="veh-control-text32"><b>Volume:</b> 50%</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="veh-control-clock">
|
|
<span class="veh-control-text34">02</span>
|
|
<span class="veh-control-text36">35</span>
|
|
</div>
|
|
<div class="veh-control-weather">
|
|
<span class="veh-control-text38"></span>
|
|
<span class="veh-control-text40">Weather</span>
|
|
<img
|
|
src="public/playground_assets/bicloudrainheavyfill538-ky5w.svg"
|
|
alt="bicloudrainheavyfill538"
|
|
class="veh-control-bicloudrainheavyfill"
|
|
/>
|
|
</div>
|
|
<div class="veh-control-shutdown">
|
|
<img
|
|
src="public/playground_assets/wpf_shutdown.svg"
|
|
alt="bimoonfill5123"
|
|
class="veh-control-bimoonfill"
|
|
/>
|
|
</div>
|
|
<div class="veh-control-camera">
|
|
<div class="veh-control-rectangle161"></div>
|
|
<img
|
|
src="public/playground_assets/fluentcameradome16filled5155-reyj.svg"
|
|
alt="fluentcameradome16filled5155"
|
|
class="veh-control-fluentcameradome16filled"
|
|
/>
|
|
</div>
|
|
<div class="veh-control-music">
|
|
<div class="veh-control-rectangle162"></div>
|
|
<img
|
|
src="public/playground_assets/claritymusicnotesolid5136-g8u.svg"
|
|
alt="claritymusicnotesolid5136"
|
|
class="veh-control-claritymusicnotesolid"
|
|
/>
|
|
</div>
|
|
<div class="veh-control-home">
|
|
<div class="veh-control-rectangle163"></div>
|
|
<img
|
|
src="public/playground_assets/fasolidcar5148-v8x.svg"
|
|
alt="fasolidcar5148"
|
|
class="veh-control-fasolidcar"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="./script.js" type="text/javascript"></script>
|
|
<script src="./functions.js" type="text/javascript"></script>
|
|
</body>
|
|
</html>
|