diff --git a/ReallifeGamemode.Client/assets/html/inventory/vehicle/script.js b/ReallifeGamemode.Client/assets/html/inventory/vehicle/script.js
new file mode 100644
index 00000000..d0150b9b
--- /dev/null
+++ b/ReallifeGamemode.Client/assets/html/inventory/vehicle/script.js
@@ -0,0 +1,347 @@
+
+document.addEventListener("DOMContentLoaded", function () {
+ //fire functions before page load
+ drawToPage();
+ console.log("loading finished");
+ mp.trigger("CEF:BrowserLoadedTrade");
+});
+
+var vehicleExtraSlot = 0;
+
+function setItems(itemIdArr1, itemAmountArr1, vehicleExtraSlot1) {
+ var itemIdArr = JSON.parse(itemIdArr1);
+ vehicleExtraSlot = JSON.parse(vehicleExtraSlot1);
+ var itemAmountArr = JSON.parse(itemAmountArr1);
+ var itemAmountArr = JSON.parse(itemAmountArr1);
+ for (var i = 0; i < itemIdArr.length; i++) {
+ for (x = 0; x < itemAmountArr[i]; x++) {
+ commands.addToPlayerInv(itemIdArr[i]);
+ console.log(i);
+ }
+ }
+}
+
+var holz = {
+ name: "Holz",
+ rarity: 'common',
+ selected: 'false',
+ usable: 'true',
+ amount: 1,
+ currentWeight: 0.65,
+ stackable: 'true',
+ object: 'true',
+ itemId: 1,
+ img: "package://assets/img/items/wood.svg"
+}
+var hamburger = {
+ name: "Hamburger",
+ rarity: 'common',
+ selected: 'false',
+ usable: 'true',
+ amount: 1,
+ currentWeight: 0.3,
+ stackable: 'true',
+ object: 'true',
+ itemId: 2,
+ img: "package://assets/img/items/burger.svg"
+}
+var cocaine = {
+ name: "Koks",
+ rarity: 'common',
+ selected: 'false',
+ usable: 'true',
+ amount: 1,
+ currentWeight: 0.05,
+ stackable: 'true',
+ object: 'true',
+ itemId: 3,
+ img: "package://assets/img/items/cocaine.svg"
+}
+var cannabis = {
+ name: "Cannabis",
+ rarity: 'common',
+ selected: 'false',
+ usable: 'true',
+ amount: 1,
+ currentWeight: 0.05,
+ stackable: 'true',
+ object: 'true',
+ itemId: 4,
+ img: "package://assets/img/items/cannabis.svg"
+}
+var flunder = {
+ name: "Flunder",
+ weight: 7.7,
+ currentWeight: 1,
+ rarity: 'fishes',
+ statSlots: [],
+ runes: [],
+ amount: 1,
+ usable: 'false',
+ selected: 'false',
+ stackable: 'false',
+ object: 'true',
+ itemId: 5,
+ img: 'package://assets/img/items/flounder.svg'
+}
+var aal = {
+ name: "Aal",
+ weight: 3.6,
+ currentWeight: 1,
+ rarity: 'fishes',
+ statSlots: [],
+ runes: [],
+ amount: 1,
+ usable: 'false',
+ selected: 'false',
+ stackable: 'false',
+ object: 'true',
+ itemId: 6,
+ img: 'package://assets/img/items/aal.svg'
+}
+var barsch = {
+ name: "Barsch",
+ weight: 2.6,
+ currentWeight: 1,
+ rarity: 'fishes',
+ statSlots: [],
+ runes: [],
+ amount: 1,
+ usable: 'false',
+ selected: 'false',
+ stackable: 'false',
+ object: 'true',
+ itemId: 7,
+ img: 'package://assets/img/items/perch.svg'
+}
+var lachs = {
+ name: "Lachs",
+ weight: 4.2,
+ currentWeight: 1,
+ rarity: 'fishes',
+ statSlots: [],
+ runes: [],
+ amount: 1,
+ usable: 'false',
+ selected: 'false',
+ stackable: 'false',
+ object: 'true',
+ itemId: 8,
+ img: 'package://assets/img/items/salmon.svg'
+}
+var thunfisch = {
+ name: "Thunfisch",
+ weight: 11,
+ currentWeight: 1,
+ rarity: 'fishes',
+ statSlots: [],
+ runes: [],
+ amount: 1,
+ usable: 'false',
+ selected: 'false',
+ stackable: 'false',
+ object: 'true',
+ itemId: 9,
+ img: 'package://assets/img/items/salmon.svg'
+}
+var zander = {
+ name: "Zander",
+ weight: 5,
+ currentWeight: 1,
+ rarity: 'fishes',
+ statSlots: [],
+ runes: [],
+ amount: 1,
+ usable: 'false',
+ selected: 'false',
+ stackable: 'false',
+ object: 'true',
+ itemId: 10,
+ img: 'package://assets/img/items/zander.svg'
+}
+
+var allItems = [holz, hamburger, cocaine, cannabis, flunder, aal, barsch, lachs, thunfisch, zander];
+
+
+
+////////////////////////
+// Player Invenotry //
+////////////////////////
+
+var vehInventory = [];
+var EmptySlot = { name: 'blankSpace', rarity: '', object: 'false' };
+
+
+function addToVehInvenotry(addItem) {
+ var cloneItem = Object.assign({}, addItem);
+ var getExsistingId = cloneItem.itemId;
+ var unfininshedStack;
+
+
+ //Checks to see if any items can be stacked, the location, and stack amount
+ for (var i = 0; i < vehInventory.length; i++) {
+ if (vehInventory[i].itemId === getExsistingId && cloneItem.stackable === 'true' && vehInventory[i].amount < 10) {
+ unfininshedStack = i
+ break;
+ }
+ }
+ if (cloneItem.currentWeight * cloneItem.amount + weightInv >= 25) {
+ return;
+ }
+
+ //Adds item to inventory
+ for (var i = 0; i < vehInventory.length; i++) {
+ if (unfininshedStack != undefined) {
+ if (vehInventory[unfininshedStack].amount + cloneItem.amount <= 10) {
+ vehInventory[unfininshedStack].amount += cloneItem.amount;
+ unfininshedStack = undefined;
+ drawToPage();
+ moveItemsInv();
+ break;
+ }
+ else if (vehInventory[unfininshedStack].amount + cloneItem.amount > 10) {
+ var stackRemainder = 10 - vehInventory[unfininshedStack].amount;
+ vehInventory[unfininshedStack].amount += stackRemainder;
+ cloneItem.amount -= stackRemainder;
+ var recycleCloned = cloneItem;
+ addToVehInvenotry(recycleCloned);
+ unfininshedStack = undefined;
+ drawToPage();
+ moveItemsInv();
+ break;
+ }
+ }
+ else if (cloneItem.amount > 10 && vehInventory[i].object === 'false') {
+ var reduceCloneAmount = Object.assign({}, cloneItem);
+ reduceCloneAmount.amount = 10;
+ vehInventory[i] = reduceCloneAmount;
+ cloneItem.amount -= 10;
+ addToVehInvenotry(cloneItem);
+ drawToPage();
+ moveItemsInv();
+ break;
+ }
+ else if (unfininshedStack == undefined && vehInventory[i].object === 'false') {
+ vehInventory[i] = cloneItem;
+ drawToPage();
+ moveItemsInv();
+ break;
+ }
+ }
+}
+
+var getItemSlotData;
+function getAllItemSlotData() {
+ getItemSlotData = document.getElementsByClassName('itemSlot');
+}
+
+
+var currentSelected;
+
+function refreshAllCurrentItems() {
+ var remove = document.getElementById('hanContainer');
+ while (remove.firstChild) remove.removeChild(remove.firstChild);
+}
+
+
+function fillOutEmptyInv() {
+ for (var i = 0; i < 12 + vehicleExtraSlot; i++) {
+ if (!vehInventory[i]) {
+ vehInventory.push(EmptySlot);
+ drawToPage();
+ }
+ }
+}
+var weightInv = 0;
+function drawToPage() {
+ refreshAllCurrentItems();
+ weightInv = 0;
+ for (var i = 0; i < vehInventory.length; i++) {
+ if (vehInventory[i].selected == 'true') {
+ var className = ' selected';
+ }
+ else {
+ var className = '';
+ }
+
+ if (i >= 60) {
+ //Keeps inventory set to 10 items max
+ console.log('Inventory is full!')
+ return;
+ }
+ else {
+ //creates item element
+ var item = document.createElement("div");
+ item.className = "itemSlot " + vehInventory[i].rarity + className;
+ item.setAttribute("data-value", i);
+ item.setAttribute("inv-type", 'p');
+ item.setAttribute("object", vehInventory[i].object);
+ item.setAttribute('style', 'background: url(' + vehInventory[i].img + '); background-size: contain;');
+
+ //show element amounts
+ var itemAmount = document.createElement("div");
+ itemAmount.className = "itemAmount";
+ var itemAmountDisplay = document.createElement("p");
+ if (vehInventory[i].amount) {
+ var itemDisplayStatsName = document.createTextNode(vehInventory[i].amount);
+ }
+ else {
+ var itemDisplayStatsName = document.createTextNode('');
+ }
+ item.appendChild(itemAmount);
+ itemAmount.appendChild(itemAmountDisplay);
+ itemAmountDisplay.appendChild(itemDisplayStatsName);
+
+
+ //adds item element or elements
+ document.getElementById("hanContainer").appendChild(item);
+
+ //creates item display information
+ if (vehInventory[i].object === 'true') {
+ var itemDesc = document.createElement("div");
+ var itemDescTitle = document.createElement("h3");
+
+ var getItemTitle = document.createTextNode(vehInventory[i].name + " (" + Math.round(vehInventory[i].currentWeight * vehInventory[i].amount * 100) / 100 + " kg)");
+ itemDesc.className = "itemDesc";
+ item.appendChild(itemDesc);
+ itemDesc.appendChild(itemDescTitle);
+ itemDescTitle.appendChild(getItemTitle);
+
+ weightInv += vehInventory[i].currentWeight * vehInventory[i].amount;
+ document.getElementById('gewicht').innerText = Math.round(weightInv * 100) / 100 + "/25 kg";
+ }
+ }
+ }
+ fillOutEmptyInv();
+}
+
+
+
+///////////////////
+// Dev Commands //
+///////////////////
+
+var commands = {
+ addToPlayerInv: function (itemGiveId) {
+ for (var i = 0; i < allItems.length; i++) {
+ if (allItems[i].itemId === itemGiveId) {
+ addToVehInvenotry(allItems[i]);
+ }
+ }
+ },
+ clearPlayerInv: function () {
+ vehInventory = [];
+ drawToPage();
+ },
+}
+
+
+//Handel Akzeptierenfenster
+
+$("#buttonakzeptieren").click(function () {
+ mp.trigger('CEF:acceptTrade');
+});
+
+$("#buttonablehnen").click(function () {
+ mp.trigger('CEF:declineTrade');
+});
diff --git a/ReallifeGamemode.Client/assets/html/inventory/vehicle/style.css b/ReallifeGamemode.Client/assets/html/inventory/vehicle/style.css
new file mode 100644
index 00000000..57991426
--- /dev/null
+++ b/ReallifeGamemode.Client/assets/html/inventory/vehicle/style.css
@@ -0,0 +1,304 @@
+/* *** FOR TESTING ONLY *** */
+.greyFont {
+ color: gray;
+ font-size: 14px;
+ width: 250px;
+}
+
+body {
+ overflow: hidden;
+ font-family: 'Roboto', sans-serif;
+ font-weight: 500;
+ color: #222;
+ margin: 0;
+ padding: 0;
+}
+#buttonbenutzen {
+ background-color: #4CAF50; /* gruen */
+ border: none;
+ color: white;
+ padding: 12px 24px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ position: relative;
+ left: 1.5%;
+}
+#buttonwegwerfen {
+ background-color: #f44336; /* rot */
+ border: none;
+ color: white;
+ padding: 12px 24px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ position: relative;
+ left: 1.5%;
+}
+#buttonhandeln {
+ background-color: #008CBA; /* blau */
+ border: none;
+ color: white;
+ padding: 12px 24px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ position: relative;
+ left: 1.5%;
+}
+#buttonablehnen {
+ background-color: #f44336; /* rot */
+ border: none;
+ color: white;
+ padding: 12px 24px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ position: relative;
+ left: 18%;
+}
+#buttonakzeptieren {
+ background-color: #008CBA; /* blau */
+ border: none;
+ color: white;
+ padding: 12px 24px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ position: relative;
+ left: 18%;
+}
+
+button {
+ width: 125px;
+ background-color: lightGrey;
+ padding: 5px;
+ margin: 2px 0px;
+ border: none;
+ cursor: pointer;
+}
+
+button:hover {
+ background-color: grey;
+}
+
+h2 {
+ font-family: 'Roboto', sans-serif;
+ font-weight: 700;
+ font-size: 18px;
+ color: white;
+ margin:5px;
+ padding: 5px;
+ border: 1px solid #808080;
+ width: 20.75em;
+}
+.box1 {
+ float: left;
+ width: 50%;
+ top:auto;
+}
+.box2 {
+ padding: 2px;
+ top: auto;
+}
+
+h4 {
+ font-family: 'Roboto', sans-serif;
+ font-weight: 700;
+ font-size: 18px;
+ color: white;
+ margin:5px;
+ padding: 5px;
+ text-align:right;
+ border: none;
+}
+
+.pakWrapper {
+ background: rgba(0,0,0,0.4);
+ height: 395px;
+ width: 394px;
+ display: block;
+ padding: 5px;
+ position: absolute;
+ left: 25%;
+ top: 0;
+}
+.pukWrapper {
+ background: rgba(0,0,0,0.4);
+ height: 395px;
+ width: 394px;
+ display: block;
+ padding: 5px;
+ position: absolute;
+ left: 55%;
+ top: 0;
+}
+
+
+#invContainer{
+ width: 110%;
+ height: auto;
+}
+
+#invContainer h3 {
+ padding: 0px 10px;
+}
+
+#hanContainer {
+ width: 110%;
+ height: auto;
+}
+
+#hanContainer h3 {
+ padding: 0px 10px;
+}
+
+.itemSlot {
+ width: 54px;
+ height: 54px;
+ margin: 5px;
+ float: left;
+ border: 1px solid #808080;
+ border-radius: 5px;
+ position: relative;
+ cursor: pointer;
+}
+
+.itemSlot:hover {
+ border: 1px solid #999999;
+}
+
+.itemAmount p {
+ color: white;
+ font-family: 'Roboto', sans-serif;
+ font-weight: 700;
+ text-shadow: 0px 0px 2px black;
+ position: absolute;
+ top: 16px;
+ left: 4px;
+}
+
+
+.selected {
+ box-shadow: 0px 0px 6px white;
+ border: 1px solid yellow;
+}
+
+.common {
+ box-shadow: 0 0 2px 1px white inset;
+}
+
+.common h3 {
+ color: white;
+ text-shadow: 0 0 0 1px black;
+}
+
+.uncommon {
+ box-shadow: 0 0 2px 1px #3333ff inset;
+}
+
+.uncommon h3 {
+ color: #3333ff;
+ text-shadow: 0 0 0 1px black;
+}
+
+.rare {
+ box-shadow: 0 0 2px 1px #66ff33 inset;
+}
+
+.rare h3 {
+ color: #66ff33;
+ text-shadow: 0 0 0 1px black;
+}
+
+.superior {
+ box-shadow: 0 0 3px 1px #990099 inset;
+}
+
+.superior h3 {
+ color: #990099;
+ text-shadow: 0px 0px 1px black;
+}
+
+.mythic {
+ box-shadow: 0 0 3px 1px #ffa333 inset;
+}
+
+.mythic h3 {
+ color: #ffa333;
+ text-shadow: 0px 0px 1px black;
+}
+
+.pForgeWrapper {
+ background: #222;
+ height: 176px;
+ width: 330px;
+ display: block;
+ padding: 5px;
+ position: absolute;
+ left: 0;
+ top: 0;
+}
+
+/*item description */
+.itemSlot:hover > .itemDesc {
+ display: block;
+}
+
+.itemDesc {
+ width: 250px;
+ height: auto;
+ top: 60px;
+ border: 1px solid #808080;
+ border-radius: 5px;
+ background: #1a1a1a;
+ position: absolute;
+ display: none;
+ z-index: 9999;
+}
+
+.itemDesc p{
+ color: white;
+}
+/*Handelfenster */
+#tf_betrag {
+ background-color: #008CBA; /* blau */
+ border: none;
+ height: 30px;
+ width: 124px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ font-color: white;
+ position: relative;
+ left: 1.5%;
+ color:#ffffff;
+}
+::placeholder {
+ color: white;
+ opacity: 1;
+}
+#tf_submit {
+ background-color: #008CBA; /* blau */
+ border: none;
+ height: 32px;
+ width: 124px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ font-color: white;
+ position: relative;
+ left: 1.5%;
+ color:#ffffff;
+}
+
+
+
+/* tasks */
\ No newline at end of file
diff --git a/ReallifeGamemode.Client/assets/html/inventory/vehicle/vehicleInventory.html b/ReallifeGamemode.Client/assets/html/inventory/vehicle/vehicleInventory.html
new file mode 100644
index 00000000..fcffdd83
--- /dev/null
+++ b/ReallifeGamemode.Client/assets/html/inventory/vehicle/vehicleInventory.html
@@ -0,0 +1,32 @@
+
+
+
+
+ Inventory
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file