<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vindictus Inventory Demo</title>
<style>
body{background:#0f0f0f;color:#eee;font-family:'Segoe UI',sans-serif;margin:0;padding:0;}
.container{max-width:1200px;margin:20px auto;padding:20px;background:#1f1f1f;border-radius:15px;box-shadow:0 0 20px #000;}
h1{text-align:center;color:#f39c12;margin-bottom:20px;}
input,select{border-radius:6px;border:none;padding:6px;background:#2c2c2c;color:#eee;}
button{cursor:pointer;}
.add-btn{background:#f39c12;color:#1f1f1f;padding:6px 12px;border:none;border-radius:6px;font-weight:bold;}
.tabs{display:flex;justify-content:center;gap:10px;margin-bottom:15px;}
.tab-btn{background:#333;color:#eee;padding:10px 18px;border:none;border-radius:8px;cursor:pointer;transition:0.3s;}
.tab-btn.active{background:#f39c12;color:#1f1f1f;box-shadow:0 0 8px #f39c12;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,110px);gap:12px;justify-content:center;margin-top:10px;padding:10px;border:2px dashed #444;border-radius:12px;min-height:140px;}
.slot{background:#2a2a2a;border-radius:10px;padding:5px;text-align:center;cursor:pointer;transition:0.2s;position:relative;box-shadow:0 0 5px #000;}
.slot:hover{transform:scale(1.07);box-shadow:0 0 15px #f39c12;}
.slot img{width:60px;height:60px;margin-bottom:5px;}
.slot-info{font-size:12px;color:#f39c12;margin-top:3px;line-height:1.2;}
.remove-btn{position:absolute;top:4px;right:4px;background:#e74c3c;color:#fff;border:none;border-radius:4px;padding:3px 6px;font-size:12px;opacity:0.8;}
.remove-btn:hover{opacity:1;}
.total-gold{margin-top:25px;text-align:center;font-size:20px;color:#f1c40f;font-weight:bold;}
.search-bar{width:50%;margin:0 auto 12px;padding:6px;border-radius:6px;border:none;background:#2c2c2c;color:#eee;box-shadow:0 0 5px #000;}
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);justify-content:center;align-items:center;z-index:10;}
.modal-content{background:#1f1f1f;padding:20px;border-radius:12px;min-width:320px;text-align:center;box-shadow:0 0 15px #f39c12;position:relative;}
.modal-content input{margin:8px;padding:6px;width:80%;border-radius:5px;border:none;background:#2c2c2c;color:#eee;text-align:center;font-weight:bold;}
.close{cursor:pointer;position:absolute;top:8px;right:12px;color:#f39c12;font-size:22px;}
button.edit-btn{background:#f39c12;color:#1f1f1f;border:none;padding:6px 10px;border-radius:6px;margin:5px;font-weight:bold;transition:0.2s;}
button.edit-btn:hover{background:#f1c1c1;color:#1f1f1f;}
</style>
</head>
<body>
<div class="container">
<h1>🗡️ Vindictus Inventory Demo</h1>
<input type="text" id="searchInput" class="search-bar" placeholder="🔍 Search items...">
<!-- Add Item Form -->
<form id="addForm" style="display:flex;gap:10px;align-items:center;justify-content:center;margin-bottom:15px;">
<select id="addCategory" required>
<option value="materials">Materials</option>
<option value="equipment">Equipment</option>
<option value="consumables">Consumables</option>
</select>
<input list="itemList" id="addItem" placeholder="Type or search item" required>
<datalist id="itemList">
<option value="Solid"><option value="IronOre"><option value="SilverOre"><option value="GoldOre">
<option value="Wood"><option value="Stone"><option value="IronSword"><option value="SteelShield">
<option value="LeatherArmor"><option value="HealthPotion"><option value="ManaPotion"><option value="Elixir">
</datalist>
<input type="number" id="addQuantity" placeholder="Qty" min="1">
<input type="number" id="addPrice" placeholder="Price">
<button type="submit" class="add-btn">➕ Add</button>
</form>
<div class="tabs">
<button class="tab-btn active" data-tab="all">All</button>
<button class="tab-btn" data-tab="materials">Materials</button>
<button class="tab-btn" data-tab="equipment">Equipment</button>
<button class="tab-btn" data-tab="consumables">Consumables</button>
</div>
<!-- Inventory Grids -->
<div class="grid" data-cat="all"></div>
<div class="grid" data-cat="materials" style="display:none;"></div>
<div class="grid" data-cat="equipment" style="display:none;"></div>
<div class="grid" data-cat="consumables" style="display:none;"></div>
<div class="total-gold">💰 Total Gold: <span id="totalGold">0</span></div>
<!-- Modal -->
<div id="editModal" class="modal">
<div class="modal-content">
<span class="close" onclick="document.getElementById('editModal').style.display='none'">×</span>
<h3 id="modalTitle"></h3>
<img id="modalImg" src="" width="80"><br>
Quantity: <input type="number" id="modalQty"><br>
Price: <input type="number" id="modalPrice"><br>
<button onclick="saveItem()" class="edit-btn">💾 Save</button>
</div>
</div>
</div>
<script>
let inventory = JSON.parse(localStorage.getItem('inventory')) || {materials:{},equipment:{},consumables:{}};
function formatGold(n){
if(n>=1000000) return (n/1000000).toFixed(1)+'M';
if(n>=1000) return (n/1000).toFixed(1)+'K';
return n;
}
function renderInventory(){
const grids = document.querySelectorAll('.grid');
grids.forEach(grid=>{
const cat = grid.dataset.cat;
grid.innerHTML='';
for(let c of cat==='all'?['materials','equipment','consumables']:[cat]){
for(let item in inventory[c]){
const data = inventory[c][item];
const totalValue = data.quantity * data.price;
const div = document.createElement('div');
div.className='slot';
div.dataset.cat=c;
div.dataset.item=item;
div.dataset.quantity=data.quantity;
div.dataset.price=data.price;
div.innerHTML=`<img src="no-image.png" alt="${item}">
<div class="slot-info"><b>${item}</b><br>Qty: ${data.quantity}<br>Price: ${data.price}<br>Total: ${totalValue}</div>
<button class="remove-btn">❌</button>`;
grid.appendChild(div);
div.querySelector('.remove-btn').onclick=e=>{
e.stopPropagation();
delete inventory[c][item];
saveInventory();
renderInventory();
};
div.onclick=()=>{
document.getElementById('editModal').style.display='flex';
currentItem=item;
currentCat=c;
document.getElementById('modalTitle').innerText=item;
document.getElementById('modalQty').value=data.quantity;
document.getElementById('modalPrice').value=data.price;
};
}
}
});
updateTotalGold();
}
function updateTotalGold(){
let total=0;
for(let c in inventory){
for(let item in inventory[c]){
total += inventory[c][item].quantity*inventory[c][item].price;
}
}
document.getElementById('totalGold').innerText=formatGold(total);
}
function saveInventory(){
localStorage.setItem('inventory',JSON.stringify(inventory));
}
// Tabs
document.querySelectorAll('.tab-btn').forEach(btn=>{
btn.addEventListener('click',()=>{
document.querySelectorAll('.tab-btn').forEach(b=>b.classList.remove('active'));
btn.classList.add('active');
document.querySelectorAll('.grid').forEach(g=>g.style.display='none');
document.querySelector(`.grid[data-cat='${btn.dataset.tab}']`).style.display='grid';
});
});
// Search/filter
document.getElementById('searchInput').addEventListener('input',e=>{
const filter=e.target.value.toLowerCase();
document.querySelectorAll('.slot').forEach(slot=>{
const name=slot.dataset.item.toLowerCase();
slot.style.display = name.includes(filter)?'block':'none';
});
});
// Add Item
document.getElementById('addForm').onsubmit=e=>{
e.preventDefault();
const cat=document.getElementById('addCategory').value;
const item=document.getElementById('addItem').value.trim();
const qty=parseInt(document.getElementById('addQuantity').value)||1;
const price=parseInt(document.getElementById('addPrice').value)||0;
if(!inventory[cat][item]) inventory[cat][item]={quantity:0,price:0};
inventory[cat][item].quantity += qty;
inventory[cat][item].price = price;
saveInventory();
renderInventory();
e.target.reset();
};
// Modal editing
let currentItem,currentCat;
function saveItem(){
const qty=parseInt(document.getElementById('modalQty').value)||0;
const price=parseInt(document.getElementById('modalPrice').value)||0;
inventory[currentCat][currentItem].quantity = qty;
inventory[currentCat][currentItem].price = price;
saveInventory();
renderInventory();
document.getElementById('editModal').style.display='none';
}
renderInventory();
</script>
</body>
</html>