515 lines
No EOL
26 KiB
HTML
515 lines
No EOL
26 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<title>Inventory</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" type="text/css" href="css/main.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/context-menu.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/trade.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/compact.css" />
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
|
|
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
|
|
<!-- Bootstrap CSS -->
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css">
|
|
<script src="https://use.fortawesome.com/1ce05b4b.js"></script>
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
|
|
<!-- jQuery UI -->
|
|
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
|
|
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
|
|
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js" integrity="sha256-xH4q8N0pEzrZMaRmd7gQVcTZiFei+HfRTBPJ1OGXC0k=" crossorigin="anonymous"></script>
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body style="background-color: rgba(0,0,0,0); font-family: 'Roboto', sans-serif !important;">
|
|
|
|
<section id="intro" class="intro hidden">
|
|
<article id="intro-server-container">
|
|
<p id="intro-server-name">QUASAR ROLEPLAY</p>
|
|
|
|
</article>
|
|
</section>
|
|
|
|
<section id="intro-logo" class="intro hidden">
|
|
<figure id="intro-top"></figure>
|
|
<figure id="intro-bottom"></figure>
|
|
<article id="intro-logo-container" class="hidden">
|
|
<img src="./icons/logo.png" alt="logo">
|
|
</article>
|
|
</section>
|
|
|
|
<div class="weapon-attachments-container">
|
|
<div class="weapon-attachments-info">
|
|
<div class="weapon-attachments-container-title">Pistol | <span style="font-size: 2vh;">9mm</span></div>
|
|
<div class="weapon-attachments-container-description">This is a water gun yaay ...</div>
|
|
<div class="weapon-attachments-container-details"><span style="font-weight: bold; letter-spacing: .1vh;">Serial Number</span><br> 12345678<br><br><span style="font-weight: bold; letter-spacing: .1vh;">Durability</span>
|
|
<div class="weapon-attachments-container-detail-durability">
|
|
<div class="weapon-attachments-container-detail-durability-total"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<canvas id="attachment-canvas" width="300" height="300"></canvas>
|
|
<div class="weapon-attachments-lines">
|
|
<div class="weapon-attachments-line">
|
|
<div class="attachmentItem-container">
|
|
<div class="weapon-attachment-label">
|
|
<p>Demper</p>
|
|
</div>
|
|
<div class="weapon-attachment-img"><img src="images/pistol_suppressor.png"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="weapon-attachments-weaponContainer" onmousedown="openWeaponRotate(event)" onmousemove="weaponMouseMove(event)"></div>
|
|
<div class="weapon-attachments-title"><span style="font-weight: bold; letter-spacing: .1vh;">Attachments</span></div>
|
|
<div class="weapon-attachments">
|
|
</div>
|
|
|
|
<div class="weapon-attachments-remove"><i class="fas fa-trash"></i></div>
|
|
|
|
<div class="weapon-attachments-back">
|
|
<div class="iconBigger returnIcon">
|
|
<i class="fa-solid fa-arrow-left"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ply-hotbar-inventory" data-inventory="hotbar">
|
|
<!-- auto generated -->
|
|
</div>
|
|
|
|
<div class="z-hotbar-inventory">
|
|
<!-- auto generated -->
|
|
</div>
|
|
|
|
<div class="container">
|
|
<section class="label-changer-container">
|
|
<article class="label-changed">
|
|
<button id="label-changer-close">×</button>
|
|
<div class="label-changer-title">Label changer:</div>
|
|
<div class="label-changer-input-container">
|
|
<input type="text" class="label-changer-input" placeholder="Label" id="label-changer-input">
|
|
</div>
|
|
<div class="label-changer-button-container">
|
|
<div class="label-changer-button" id="label-changer-button">Change</div>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
<div id="inventory-container">
|
|
<div class="inventory-animation">
|
|
|
|
|
|
<div class="inventory-info">
|
|
|
|
|
|
</div>
|
|
<div class="inv-container">
|
|
<div class="inventory-playerstats">
|
|
<div class="playerstats">
|
|
<div class="playerstat-item" id="player-hp"> <i class="playerstat-icon far fa-heart">
|
|
<p class="playerstat-text" id="playerhp"></p>
|
|
</i> </div>
|
|
<div class="playerstat-item" id="player-armor"> <i class="playerstat-icon fas fa-shield-alt">
|
|
<p class="playerstat-text" id="playerarmor"></p>
|
|
</i> </div>
|
|
<div class="playerstat-item" id="player-hunger"> <i class="playerstat-icon fas fa-utensils">
|
|
<p class="playerstat-text" id="playerhunger"></p>
|
|
</i> </div>
|
|
<div class="playerstat-item" id="player-thirst"> <i class="playerstat-icon fas fa-tint">
|
|
<p class="playerstat-text" id="playerthirst"></p>
|
|
</i> </div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ply-inv-container">
|
|
<div class="player-inv-info">
|
|
<span id="player-inv-label">
|
|
<!-- auto generated -->
|
|
</span><br>
|
|
<div class="progressbar">
|
|
|
|
<div class="weight_flex">
|
|
<div class="iconStylish weightIcon"></div>
|
|
<span id="player-inv-weight"></span>
|
|
</div>
|
|
|
|
<div class="player-weight-progressbar flexik">
|
|
<div class="weight_bar_bordered"></div>
|
|
<div class="weight_bar_bordered"></div>
|
|
<div class="weight_bar_bordered"></div>
|
|
<div class="weight_bar_bordered"></div>
|
|
<div class="weight_bar_bordered"></div>
|
|
<div class="weight_bar_bordered"></div>
|
|
<div class="weight_bar_bordered"></div>
|
|
<div class="weight_bar_bordered"></div>
|
|
<div class="weight_bar_bordered"></div>
|
|
<div class="weight_bar_bordered"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="player-inventory" data-inventory="player">
|
|
<!-- auto generated -->
|
|
</div>
|
|
|
|
<div class="ply-iteminfo-container ply-item-inf-own">
|
|
<div class="ply-iteminfo">
|
|
<div class="iteminfo-content">
|
|
<div class="item-info-title"></div>
|
|
<div class="item-info-description"></div>
|
|
</div>
|
|
<div class="item-info-types">
|
|
<!-- <i class="fa-solid fa-user"></i>
|
|
<i class="fa-solid fa-user"></i>
|
|
<i class="fa-solid fa-user"></i> -->
|
|
</div>
|
|
<div class="item-information-container">
|
|
<div class="item-info-img"><!-- <img src="images/pistol_suppressor.png"> --></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="logo-container"></div>
|
|
<div class="inv-options">
|
|
<div class="inv-options-list">
|
|
<input type="number" id="item-amount" class="inv-option-item" value="0" min="0" max="10000" placeholder="Amount" oninput="validateInput(event)" />
|
|
<div class="inv-option-item" id="item-use">
|
|
<p>USE</p>
|
|
</div>
|
|
<div class="inv-option-item" id="item-give">
|
|
<p>GIVE</p>
|
|
</div>
|
|
<div class="inv-option-item" id="item-trade">
|
|
<p>TRADE</p>
|
|
</div>
|
|
<div class="inv-option-item" id="item-throw">
|
|
<p>THROW</p>
|
|
</div>
|
|
<div class="inv-option-item" id="clothmenu">
|
|
<div class="iconBigger clothIcon">
|
|
<i class="fa-solid fa-shirt"></i>
|
|
</div>
|
|
<!-- <p>CLOTHING</p> -->
|
|
</div>
|
|
<div class="inv-option-item" id="inventory-custom">
|
|
<div class="iconBigger settingsIcon">
|
|
<i class="fa-solid fa-sliders"></i>
|
|
</div>
|
|
<!-- <p>CONFIGURATION</p> -->
|
|
</div>
|
|
<div class="inv-option-item" id="reset-localstorage">
|
|
<p>RESET</p>
|
|
</div>
|
|
<div class="inv-option-item" id="item-combine">
|
|
<p>COMBINE</p>
|
|
</div>
|
|
<div class="inv-option-item" id="item-switch">
|
|
<p>SWITCH</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="oth-inv-container">
|
|
<div class="other-inv-info">
|
|
<span id="other-inv-label"></span><br>
|
|
<div class="progressbar">
|
|
|
|
<div class="weight_flex">
|
|
<div class="iconStylish weightIcon"></div>
|
|
<span id="other-inv-weight"></span>
|
|
</div>
|
|
|
|
<div class="other-weight-progressbar flexik">
|
|
<div class="weight_bar_bordered"></div>
|
|
<div class="weight_bar_bordered"></div>
|
|
<div class="weight_bar_bordered"></div>
|
|
<div class="weight_bar_bordered"></div>
|
|
<div class="weight_bar_bordered"></div>
|
|
<div class="weight_bar_bordered"></div>
|
|
<div class="weight_bar_bordered"></div>
|
|
<div class="weight_bar_bordered"></div>
|
|
<div class="weight_bar_bordered"></div>
|
|
<div class="weight_bar_bordered"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <span id="other-inv-weight"></span> -->
|
|
</div>
|
|
<div class="other-inventory" data-inventory="other">
|
|
<!-- auto generated -->
|
|
</div>
|
|
|
|
<div class="ply-iteminfo-container ply-item-inf-other">
|
|
<div class="ply-iteminfo">
|
|
|
|
<div class="iteminfo-content">
|
|
<div class="item-info-title"></div>
|
|
<div class="item-info-description"></div>
|
|
</div>
|
|
|
|
<div class="item-info-types">
|
|
<!-- <i class="fa-solid fa-user"></i>
|
|
<i class="fa-solid fa-user"></i>
|
|
<i class="fa-solid fa-user"></i> -->
|
|
</div>
|
|
|
|
<div class="item-information-container">
|
|
<div class="item-info-img"><!-- <img src="images/pistol_suppressor.png"> --></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="custom-inventory" data-inventory="custom">
|
|
<div class="custom-primary-color">
|
|
<div class="flexik">
|
|
<div class="flexik flexik_col">
|
|
<label class="primary-color-picker configure-text" for="primary-color-picker">Primary</label>
|
|
<input type="color" id="primary-color-picker">
|
|
</div>
|
|
<div class="flexik flexik_col">
|
|
<label class="opacity-slider configure-text" for="primary-opacity-slider">Opacity:</label>
|
|
<input type="range" id="primary-opacity-slider" min="0" max="1" step="0.1" value="0.4">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="custom-secondary-color">
|
|
<div class="flexik">
|
|
<div class="flexik flexik_col">
|
|
<label class="secondary-color-picker configure-text" for="secondary-color-picker">Secondary background color:</label>
|
|
<input type="color" id="secondary-color-picker">
|
|
</div>
|
|
<div class="flexik flexik_col">
|
|
<label class="opacity-slider configure-text" for="secondary-opacity-slider">Opacity:</label>
|
|
<input type="range" id="secondary-opacity-slider" min="0" max="1" step="0.1" value="0.4">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="custom-border-container">
|
|
<div class="custom-border">
|
|
<div class="flexik flexik_col">
|
|
<label class="border-color-picker configure-text" for="border-color-picker">Border color:</label>
|
|
<input type="color" id="border-color-picker">
|
|
<label class="opacity-slider" for="border-opacity-slider">Opacity:</label>
|
|
<input type="range" id="border-opacity-slider" min="0" max="1" step="0.1" value="0.5">
|
|
</div>
|
|
</div>
|
|
<div class="custom-details">
|
|
<div class="custom-border-radius">
|
|
<label class="border-radius-slider configure-text" for="border-radius-slider">Border radius:</label>
|
|
<input type="range" id="border-radius-slider" min="0" max="10" step="1" value="5">
|
|
</div>
|
|
<div class="custom-text-color">
|
|
<div class="flexik flexik_col">
|
|
<label class="text-color-picker configure-text" for="text-color-picker">Text Color:</label>
|
|
<input type="color" id="text-color-picker" value="#FFFFFF">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<section class="clothes-inventory" data-inventory="clothing">
|
|
|
|
</section>
|
|
|
|
</div>
|
|
<div class="inventory-playerdata">
|
|
<div class="playerdata">
|
|
<div class="playerstat-item" id="player-id"> <i class="playerstat-icon fas fa-address-card">
|
|
<p class="playerstat-text" id="playerId"></p>
|
|
</i> </div>
|
|
<div class="playerstat-item" id="player-money"> <i class="playerstat-icon fas fa-money-bill">
|
|
<p class="playerstat-text" id="playerMoney"></p>
|
|
</i> </div>
|
|
<div class="playerstat-item" id="player-bank"> <i class="playerstat-icon fas fa-piggy-bank">
|
|
<p class="playerstat-text" id="playerBank"></p>
|
|
</i> </div>
|
|
<div class="playerstat-item" id="player-black-money"> <i class="playerstat-icon fas fa-money-bill-wave">
|
|
<p class="playerstat-text" id="playerBlackMoney"></p>
|
|
</i> </div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="inv-background"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="itemboxes-container"></div>
|
|
<div class="itembox-container template"></div>
|
|
<div class="requiredItem-container">
|
|
</div>
|
|
|
|
|
|
<div id="dialog">
|
|
<h2>Nearby players:</h2>
|
|
<button id="close-inventory-give">×</button>
|
|
<div id="nearPlayers">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="weapon-tint-full-screen">
|
|
<div class="weapon-tint-container">
|
|
<button id="weapon-tint-close">×</button>
|
|
<div class="weapon-tint-title">Custom Tint:</div>
|
|
|
|
<div class="weapon-tint-box-container">
|
|
<div class="weapon-tint-input-container">
|
|
<input class="weapon-tint-input" id="weapon-tint-input" placeholder="Put a URL for your tint..." type="text">
|
|
</div>
|
|
<div class="weapon-tint-button-container">
|
|
<div class="weapon-tint-set-tint">Save custom tint</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="trade">
|
|
<div class="trade-container" v-if=show>
|
|
<div class="wrapper">
|
|
|
|
<div class="buttons">
|
|
<div class="gray-text" v-if="source == senderId">
|
|
<span v-if="!senderConfirmed">{{Lang('INVENTORY_TRADE_WAITING_YOU_CONFIRM')}}</span>
|
|
<span v-else-if="!receiverConfirmed">{{Lang('INVENTORY_TRADE_WAITING_CONFIRM')}} {{receiverName}}</span>
|
|
<span v-else>
|
|
Items are giving
|
|
</span>
|
|
|
|
</div>
|
|
<div class="gray-text" v-else-if="source == receiverId">
|
|
<span v-if="!receiverConfirmed">{{Lang('INVENTORY_TRADE_WAITING_YOU_CONFIRM')}}</span>
|
|
<span v-else-if="!senderConfirmed">{{Lang('INVENTORY_TRADE_WAITING_CONFIRM')}} {{senderName}}</span>
|
|
<span v-else>
|
|
Items are giving
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div class="buttons-group">
|
|
<div class="btn btn-green" @click="confirmTrade"><i class="fas fa-check"></i>
|
|
|
|
</div>
|
|
<div class="btn btn-red" @click="cancelTrade"><i class="fas fa-ban"></i>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="offer-container sender">
|
|
<div class="header-wrapper">
|
|
<h2 class="header sender item-trade-cut">{{Lang('INVENTORY_TRADE_ITEMS_FROM')}} {{senderName}}</h2>
|
|
<input type="number" min="0" value="0" class="amount" v-if="senderId == source">
|
|
</div>
|
|
|
|
<div class="items-header">{{Lang('INVENTORY_TRADE_OFFERED_ITEMS')}}</div>
|
|
|
|
<div class="offer-items sender" data-tradeinventory='sender-offer'>
|
|
<div class="trade-item-slot sender" v-for="slot in offerSlots" :data-slotid="slot " data-item="{}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="items-header">{{Lang('INVENTORY_TRADE_ITEMS_FROM')}} {{senderName}}</div>
|
|
<div class="items sender items-sender" data-tradeinventory='sender-items'>
|
|
<div class="trade-item-slot sender" v-for='(item, index) in combineSenderItems' v-if='item != null' :data-slotid="index+1" :data-item="JSON.stringify(item)">
|
|
<div class="item-amount">{{item.amount}}</div>
|
|
<div class="item-img">
|
|
<img :src="'images/' + getImageUrl(item)">
|
|
</div>
|
|
<div class="item-infos">
|
|
<div class="item-label">{{item.label}}</div>
|
|
</div>
|
|
<div v-if="item.rare" :class="`item-slot-rare ${item.rare}`"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border"></div>
|
|
|
|
<div class="offer-container receiver">
|
|
|
|
<div class="header-wrapper">
|
|
<h2 class="header sender item-trade-cut">{{Lang('INVENTORY_TRADE_ITEMS_FROM')}} {{receiverName}}</h2>
|
|
<input type="number" min="0" value="0" class="amount" v-if="receiverId == source">
|
|
</div>
|
|
|
|
<div class="items-header">{{Lang('INVENTORY_TRADE_OFFERED_ITEMS')}}</div>
|
|
<div class="offer-items receiver" data-tradeinventory='receiver-offer'>
|
|
|
|
<div class="trade-item-slot receiver" v-for="slot in offerSlots" :data-slotid="slot"></div>
|
|
|
|
</div>
|
|
|
|
<div class="items-header">{{Lang('INVENTORY_TRADE_ITEMS_FROM')}} {{receiverName}}</div>
|
|
|
|
<div class="items receiver" data-tradeinventory='receiver-items'>
|
|
|
|
<div class="trade-item-slot receiver" v-for='(item, index) in combineReceiverItems' :data-slotid="index+1" :data-item="JSON.stringify(item)">
|
|
<div class="item-amount">{{item.amount}}</div>
|
|
<div class="item-img">
|
|
<img :src="'images/' + getImageUrl(item)">
|
|
</div>
|
|
<div class="item-infos">
|
|
<div class="item-label">{{item.label}}</div>
|
|
</div>
|
|
<div v-if="item.rare" :class="`item-slot-rare ${item.rare}`"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
|
|
<script src="js/app.js" type="text/javascript"></script>
|
|
<script src="../config/metadata.js" type="text/javascript"></script>
|
|
<script src="../config/defaultColors.js" type="text/javascript"></script>
|
|
<script src="js/modules/custom.js" type="text/javascript"></script>
|
|
<script src="js/modules/responsive.js" type="text/javascript"></script>
|
|
<script src="js/modules/debounce.min.js" type="text/javascript"></script>
|
|
<script src="js/modules/trade.js" type="text/javascript"></script>
|
|
|
|
|
|
<script>
|
|
function scaleContainer() {
|
|
const container = document.querySelector('.container');
|
|
if (container) {
|
|
const scaleX = window.innerWidth / container.offsetWidth;
|
|
const scaleY = window.innerHeight / container.offsetHeight;
|
|
const scale = Math.min(scaleX, scaleY);
|
|
|
|
container.style.transform = `scale(${scale})`;
|
|
}
|
|
}
|
|
|
|
window.addEventListener('load', scaleContainer);
|
|
window.addEventListener('resize', scaleContainer);
|
|
</script>
|
|
</body>
|
|
|
|
</html> |