Commit db4527bf authored by Tulane Chris's avatar Tulane Chris

add paint bay

parent 2b257b3f
const app = new Vue({
el: '#app',
data: {
model: '',
model: 3714356651,
enginehealth: '',
bodyhealth: '',
engine: -1,
......
html {
height: 100%;
background-color: rgba(0, 0, 0, 0.0);
background-color: rgba(0, 0, 0, 0);
font-family: Segoe UI;
font-weight: 100;
color: #DDD;
text-align: center;
}
.logoLoading {
......@@ -16,6 +15,26 @@
/*height: 40vh;*/
}
.ma-service-shop {
display: grid;
grid-template-columns: auto auto auto auto auto auto;
grid-template-rows: auto auto auto;
row-gap: 1em;
column-gap: 1em;
margin: 6vh;
margin-top: 28vh;
}
.itemCard {
background: white;
color: rgb(26, 26, 26);
border-radius: 3px;
}
.itemCard-inner {
padding: 10px;
}
.ma-close {
background: rgb(82, 82, 82);
position: absolute;
......@@ -26,6 +45,7 @@
font-size: 2vh;
transition: 0.3s;
z-index: 2;
text-align: center;
}
.ma-close:hover {
......@@ -36,8 +56,7 @@
display: grid;
grid-template-columns: auto auto auto auto auto
auto auto auto auto ;
}
}
.m1-tuning-parts {
grid-column-start: 4;
......
......@@ -123,26 +123,33 @@
</div>
</div>
<div class="ma-service-shop">
<div v-if="model === 3714356651">
<div v-for="product in m3f80" class="applyMod">
<div v-if="model === 3714356651">
<div class="ma-service-shop">
<div v-for="product in m3f80" class="itemCard">
<div class="itemCard-inner">
<div>{{ product.local }}</div>
<div>{{ product.index }}</div>
<div>{{ product.mod }}</div>
<div>{{ product.item }}</div>
</div>
</div>
</div>
</div>
<div v-if="model === 3559038310">
<div v-for="product in impalass">
<div>{{product.item}}</div>
</div>
<div v-if="model === 3559038310">
<div class="ma-service-shop">
<div v-for="product in impalass" class="itemCard">
<div>{{ product.local }}</div>
<div>{{ product.index }}</div>
<div>{{ product.mod }}</div>
<div>{{ product.item }}</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="js/mech.js"></script>
\ No newline at end of file
function prime(picker) {
document.getElementById('hex-str').innerHTML = picker.toHEXString();
document.getElementById('rgb-str').innerHTML = picker.toRGBString();
document.getElementById('rgb').innerHTML =
Math.round(picker.rgb[0]) + ', ' +
Math.round(picker.rgb[1]) + ', ' +
Math.round(picker.rgb[2]);
service.prime =
Math.round(picker.rgb[0]) + ', ' +
Math.round(picker.rgb[1]) + ', ' +
Math.round(picker.rgb[2]);
}
function second(picker) {
document.getElementById('hex-str2').innerHTML = picker.toHEXString();
document.getElementById('rgb-str2').innerHTML = picker.toRGBString();
document.getElementById('rgb2').innerHTML =
Math.round(picker.rgb[0]) + ', ' +
Math.round(picker.rgb[1]) + ', ' +
Math.round(picker.rgb[2]);
service.second =
Math.round(picker.rgb[0]) + ', ' +
Math.round(picker.rgb[1]) + ', ' +
Math.round(picker.rgb[2]);
}
const app = new Vue({
el: '#app',
data: {
model: '',
enginehealth: '',
bodyhealth: '',
prime: 0,
second: 0,
paint: '??',
pearl: '??',
repairammount: 50
},
methods: {
changeCamRotation: function() {
mp.trigger("cChangeHeading", this.camRotation);
},
setPaint: function() {
const paint = {
primary: this.prime,
secondary: this.second,
}
mp.trigger("cMisc-CallServerEvent", "sAutoShop-SetPaint", JSON.stringify(paint));
this.exit()
},
exit: function() {
mp.trigger("cCloseCefAndDestroyCam");
}
}
})
\ No newline at end of file
.b3-close {
background: coral;
position: fixed;
right: 0;
top: 0;
width: 6vh;
height: 3vh;
font-size: 2vh;
transition: 0.3s;
z-index: 3;
html {
height: 100%;
background-color: rgba(0, 0, 0, 0.0);
font-family: Segoe UI;
font-weight: 100;
color: #DDD;
text-align: center;
}
html {
/*background-image: url('https://i.imgur.com/fWJwB7u.jpg');*/
height: 100%;
background-size: cover;
font-family: Segoe UI;
font-weight: 100;
color: white;
text-align: center;
.logoLoading {
height: 100vh;
}
.logo {
margin: auto;
/*height: 40vh;*/
}
.close {
background: coral;
.ma-close {
background: rgb(82, 82, 82);
position: absolute;
right: 0;
top: 0;
......@@ -32,442 +28,57 @@ html {
z-index: 2;
}
.close:hover {
background: tomato;
}
.main {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(0, 191, 255, 0.5), rgba(255, 130, 0, 0.5));
}
.content {
display: flex;
align-items: flex-start;
background-color: rgba(0, 0, 0, 0.3);
height: 100vh;
}
.menu {
width: 25%;
}
.menu__header {
border-bottom: 1px solid #aaa;
padding: 5vh 0;
}
.menu__header > img {
border-radius: 50%;
width: 15vh;
height: 15vh;
}
.menu__header__name {
color: deepskyblue;
margin-top: 1vh;
font-size: 3vh;
}
.menu-items {
overflow: auto;
max-height: 70vh;
}
.menu-items > a {
display: block;
border-bottom: 1px solid #aaa;
font-size: 2.5vh;
padding: 2.5vh 0;
transition: 0.3s;
}
.menu-items > a:hover {
background: linear-gradient(45deg, rgba(0, 191, 255, 0.25), rgba(255, 130, 0, 0.25));
}
.active {
background: linear-gradient(45deg, rgba(0, 191, 255, 0.25), rgba(255, 130, 0, 0.25));
}
.fade-enter-active, .fade-leave-active {
transition: opacity .1s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
.info {
width: 75%;
overflow: auto;
height: 100vh;
border-left: 1px solid #aaa;
}
::-webkit-scrollbar {
width: 0;
}
.tab-home {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
.b-item {
display: flex;
flex-direction: column;
text-align: center;
width: 15vw;
margin: 2.25vw 0 0 2.25vw;
/*background: rgba(0, 0, 0, 0.1);*/
color: deepskyblue;
padding: 3vw 0.5vw;
transition: 0.3s;
}
.b-item:hover {
background: rgba(0, 0, 0, 0.25);
}
.b-item > img {
width: 7.5vw;
height: 7.5vw;
margin: auto;
}
.b-item > span {
font-size: 2.5vw;
margin-top: 1vh;
padding: 0 1vw;
}
.b-item > div {
text-transform: uppercase;
color: white;
font-size: 1.25vw;
}
.cash {
color: limegreen;
}
.cash:before {
content: "$";
}
.violations-free {
width: 100%;
height: 90%;
display: flex;
justify-content: center;
align-items: center;
font-size: 4vw;
color: limegreen;
}
.tab-violations {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
position: relative;
padding-top: 8vh;
height: 92vh;
}
.violations-total {
width: 100%;
font-size: 2.9vw;
padding-top: 2vw;
position: absolute;
top: 0;
left: 0;
}
.tab-vehicles {
display: flex;
}
.tab-vehicles .veh-list {
width: 35%;
overflow: auto;
border-right: 1px solid #aaa;
}
.tab-vehicles .veh-info {
width: 65%;
overflow-y: auto;
overflow-x: hidden;
position: relative;
}
.veh-item {
display: flex;
flex-direction: column;
padding: 1vw 0;
border-bottom: 1px solid #aaa;
font-size: 1.5vw;
position: relative;
transition: 0.3s;
.ma-close:hover {
background: rgb(236, 41, 41);
}
.veh-item.lefted {
transform: translateX(-5.5vw);
.m1-tray-wrapper {
display: grid;
grid-template-columns: auto auto auto auto auto
auto auto auto auto ;
}
.veh-item .confirm {
position: absolute;
right: -5.5vw;
top: 0;
height: 100%;
width: 5.5vw;
background: limegreen;
display: flex;
justify-content: center;
align-items: center;
transition: 0.2s;
z-index: 2;
.m1-tuning-parts {
grid-column-start: 4;
background: rgba(36, 36, 36, 0.74);
}
.veh-item .confirm:hover {
background: green;
.m1-custom-parts {
grid-column-start: 5;
background: rgba(36, 36, 36, 0.74);
}
.veh-item:hover {
background: linear-gradient(45deg, rgba(0, 191, 255, 0.25), rgba(255, 130, 0, 0.25));
.m1-garage-services {
grid-column-start: 6;
background: rgba(36, 36, 36, 0.74);
}
.veh-item > span {
font-size: 1em;
}
.veh-item > div {
font-size: 0.75em;
}
.veh-info_title {
margin-top: 5vh;
font-size: 2.5vw;
}
.veh-info_number {
font-size: 1.5vw;
}
.veh-info_props {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
padding: 4vh 0;
}
.veh-info_prop {
display: flex;
flex-direction: column;
font-size: 1.5vw;
width: 26%;
padding: 1.5vw 0;
transition: 0.2s;
}
.veh-info_prop:hover {
background: rgba(0, 0, 0, 0.25);
}
.veh-info_prop > img {
width: 4vw;
height: 4vw;
margin: auto;
}
.veh-info_prop > span {
color: deepskyblue;
font-size: 1em;
}
.veh-info_prop > div {
font-size: 0.75em;
text-transform: uppercase;
}
.sell-for-player {
display: flex;
transition: 0.3s;
border-bottom: 1px solid #aaa;
}
.sell-for-player .players {
width: 50%;
display: flex;
flex-direction: column;
max-height: 10.8vw;
overflow: auto;
}
.sell-for-player .players > a {
font-size: 1.5vw;
display: block;
padding: 1vh 0;
border-bottom: 1px solid #aaa;
}
.sell-for-player .players > a:hover {
background: linear-gradient(45deg, rgba(0, 191, 255, 0.25), rgba(255, 130, 0, 0.25));
}
.sell-for-player .data {
width: 50%;
display: flex;
flex-direction: column;
border-left: 1px solid #aaa;
font-size: 1.5vw;
}
.sell-for-player .data .price {
display: flex;
flex-direction: column;
margin-top: 1vw;
}
.sell-for-player .data .price > span {
font-size: 2.25vw;
}
.sell-for-player .data .price > div {
font-size: 1.25vw;
text-transform: uppercase;
}
.veh-sellinput {
border: 0px solid white;
background: transparent;
font-size: 1em;
font-family: Segoe UI;
font-weight: 100;
color: limegreen;
outline: none;
}
.sell-for-player .data .sell {
background: limegreen;
margin-top: 1vw;
padding: 1vw 0;
transition: 0.3s;
}
.sell-for-player .data .sell:hover {
background: green;
}
.no-veh {
padding: 42vh 0;
font-size: 6vh;
width: 100%;
}
.gps-findbus {
border-top: 1px solid #aaa;
position: absolute;
bottom: 0;
width: 100%;
}
.gps-findbus > a > input {
background: transparent;
font-size: 2.5vh;
font-family: Segoe UI;
font-weight: 100;
color: white;
width: 5vw;
outline: none;
border-style: none;
}
.gps-findbus > a > .confirm {
position: absolute;
right: 0vw;
top: 0;
height: 100%;
width: 5.5vw;
background: limegreen;
display: flex;
justify-content: center;
align-items: center;
transition: 0.2s;
}
.gps-findbus > a > .confirm:hover {
background: green;
}
.help-p {
font-size: 1.5vw;
margin: 3vh 10%;
text-align: left;
}
.settings-pass {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
font-size: 1.2vw;
margin: 0 5%;
padding: 1.25vw 0;
.m1-tray {
display: grid;
grid-template-columns: auto auto;
background: rgb(82, 82, 82);
font-size: 2vh;
transition: 0.3s;
z-index: 2;
}
.settings-pass > div {
width: 50%;
text-align: left;
margin: 0.5vw 0vw;
.m1-label {
grid-column-start: 1;
}
.settings-pass > input {
width: 50%;
padding: 0 1vw;
margin: 0.5vw 0vw;
background: transparent;
font-size: 1.2vw;
color: white;
border-style: none;
border-bottom: 1px solid #ccc;
outline: none;
.m1-value {
grid-column-start: 2;
}
.settings-pass > a {
display: block;
width: 100%;
margin: 1vw 0;
padding: 0.5vw 0;
background: limegreen;
transition: 0.2s;
}
.settings-pass > a:hover {
background: green;
}
.settings-lang {
width: 100% !important;
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
max-height: 12.3vw;
}
/* .m1-label {
background: rgb(82, 82, 82);
grid-column-start: 2;
width: 3vh;
height: 3vh;
} */
.settings-title {
margin: 3vh 0%;
text-align: center;
}
.m1-tray:hover {
background: rgb(236, 41, 41);
}
\ No newline at end of file
......@@ -5,11 +5,63 @@
<script src="jscolor.js"></script>
<body>
<div id="app">
<div class="ma-close" id="close-button" @click="exit">X</div>
<div class="ma-service-show">
<div class="m1-tray-wrapper">
<div class="m1-tuning-parts">
<div class="m1-tray">
<div class="m1-label">Primary</div>
<div class="m1-value">{{ prime }}</div>
</div>
<div class="m1-tray">
<div class="m1-label">Secondary</div>
<div class="m1-value">{{ second }}</div>
</div>
<div class="m1-tray">
<div class="m1-label">paint</div>
<div class="m1-value">{{ paint }}</div>
</div>
</div>
<div class="m1-custom-parts">
<div class="m1-tray">
<div