<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Their Offer</title>
<style>
body {
background-color: #121212;
color: #fff;
font-family: Arial, sans-serif;
padding: 20px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 20px;
}
.grid-item {
background-color: #1c1c1c;
border-radius: 15px;
padding: 10px;
text-align: center;
transition: transform 0.2s, background-color 0.3s;
cursor: pointer;
position: relative;
}
.grid-item:hover {
background-color: #333;
}
.grid-item img {
width: 100%;
height: 100px;
object-fit: cover;
border-radius: 10px;
}
.value-badge {
position: absolute;
top: 8px;
left: 8px;
background-color: rgba(0, 0, 0, 0.6);
padding: 6px 10px;
font-size: 14px;
border-radius: 12px;
}
.total-value {
margin-top: 20px;
font-size: 20px;
text-align: center;
border-radius: 10px;
padding: 10px;
background-color: #2a2a2a;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
}
.extension-box {
position: fixed;
top: 20px;
right: 20px;
background-color: #2a2a2a;
color: #fff;
padding: 15px 25px;
border-radius: 10px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
font-size: 16px;
z-index: 1000;
}
#petModal {
display: none;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(0,0,0,0.8);
z-index: 2000;
align-items: center;
justify-content: center;
}
#petModal .modal-content {
background-color: #1c1c1c;
padding: 20px;
border-radius: 15px;
width: 90%;
max-width: 600px;
}
.plus-button {
width: 100px;
height: 100px;
background-color: #333;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
cursor: pointer;
}
#modalPetList {
max-height: 400px; /* Set a fixed height */
overflow-y: auto; /* Enable vertical scrolling */
}
</style>
</head>
<body>
<div class="extension-box">
Receiving Value: <span id="givingValue">0</span>
</div>
<h2>Their Offer</h2>
<div class="grid-container" id="offerGrid">
<div class="plus-button" onclick="openModal()">+</div>
</div>
<div class="total-value">Total Value: <span id="totalValue">0</span></div>
<div id="petModal">
<div class="modal-content">
<input type="text" id="modalSearchInput" placeholder="Search pets..."
style="width: 100%; padding: 8px; border-radius: 8px; border: none; margin-bottom:
10px; background-color: #2a2a2a; color: #fff;">
<div class="grid-container" id="modalPetList"></div>
</div>
</div>
<script>
const petData = [
{ name: "Avernus", image:
"https://static.wikia.nocookie.net/bgs-infinity/images/0/06/Avernus.png", value:
"10K" },
{ name: "King Doggy", image:
"https://static.wikia.nocookie.net/bgs-infinity/images/a/a8/King_Doggy.png", value:
"5K" },
{ name: "Shiny Dowodle", image:
"https://static.wikia.nocookie.net/bgs-infinity/images/9/98/Shiny_Dowodle.png",
value: "7.5K" },
{ name: "Seraph", image:
"https://static.wikia.nocookie.net/bgs-infinity/images/e/e6/Seraph.png", value:
"4K" },
{ name: "Shiny Beta TV", image:
"https://static.wikia.nocookie.net/bgs-infinity/images/9/9e/Shiny_Beta_TV.png",
value: "3.5K" },
{ name: "The Overlord", image:
"https://static.wikia.nocookie.net/bgs-infinity/images/c/c0/The_Overlord.png",
value: "2.5K" },
{ name: "Moonburst", image:
"https://static.wikia.nocookie.net/bgs-infinity/images/a/ab/Moonburst.png", value:
"125" },
{ name: "Mythic Moonburst", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/0/08/Mythic_Moonburst.png", value: "1K" },
{ name: "Shiny Trio Cube", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/9/94/Shiny_Trio_Cube.png", value: "2K" },
{ name: "Mythic NULLVoid", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/8/8e/Mythic_NULLVoid.png", value: "1.5K" },
{ name: "Mythic Sigma Serpent", image: "https://www.bgsi.gg/items/mythic-sigma-
serpent.png", value: "900" },
{ name: "Shiny NULLVoid", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/0/0c/Shiny_NULLVoid.png", value: "900" },
{ name: "Shiny Sunburst", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/5/56/Shiny_Sunburst.png", value: "1K" },
{ name: "Dowodle", image:
"https://static.wikia.nocookie.net/bgs-infinity/images/6/69/Dowodle.png", value:
"1K" },
{ name: "Mythic Rainbow Shock", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/b/b8/Mythic_Rainbow_Shock.png", value: "1K" },
{ name: "Mythic Sunburst", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/9/9f/Mythic_Sunburst.png", value: "800" },
{ name: "Shiny Sigma Serpent", image: "https://www.bgsi.gg/items/shiny-sigma-
serpent.png", value: "950" },
{ name: "Shiny Rainbow Shock", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/8/8b/Shiny_Rainbow_Shock.png", value: "500" },
{ name: "Ophanim Shiny", image: "https://www.bgsi.gg/items/shiny-ophanim.png",
value: "550" },
{ name: "Shiny Evil Shock", image: "https://www.bgsi.gg/items/shiny-evil-
shock.png", value: "425" },
{ name: "Mythic Hexarium", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/0/02/Mythic_Hexarium.png", value: "300" },
{ name: "Shiny Hexarium", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/2/2f/Shiny_Hexarium.png", value: "N/A" },
{ name: "Beta TV", image:
"https://static.wikia.nocookie.net/bgs-infinity/images/6/69/Beta_TV.png", value:
"450" },
{ name: "Crescent Empress", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/1/1f/Crescent_Empress.png", value: "350" },
{ name: "Sigma Serpent", image:
"https://static.wikia.nocookie.net/bgs-infinity/images/3/3d/Sigma_Serpent.png",
value: "250" },
{ name: "NULLVoid", image:
"https://static.wikia.nocookie.net/bgs-infinity/images/9/98/NULLVoid.png", value:
"225" },
{ name: "Trio Cube", image:
"https://static.wikia.nocookie.net/bgs-infinity/images/7/71/Trio_Cube.png", value:
"200" },
{ name: "Mythic Virus", image:
"https://static.wikia.nocookie.net/bgs-infinity/images/7/71/Mythic_Virus.png",
value: "150" },
{ name: "Sunburst", image:
"https://static.wikia.nocookie.net/bgs-infinity/images/9/97/Sunburst.png", value:
"800" },
{ name: "Ophanim", image: "https://www.bgsi.gg/items/ophanim.png", value:
"100" },
{ name: "Rainbow Shock", image:
"https://static.wikia.nocookie.net/bgs-infinity/images/c/c6/Rainbow_Shock.png",
value: "75" },
{ name: "Holy Shock", image: "https://www.bgsi.gg/items/holy-shock.png", value:
"50" },
{ name: "Evil Shock", image: "https://www.bgsi.gg/items/evil-shock.png", value:
"50" },
{ name: "Hexarium", image:
"https://static.wikia.nocookie.net/bgs-infinity/images/8/89/Hexarium.png", value:
"25" },
// ---- O/C & N/A pets start here (kept in your original order) ----
{ name: "Shiny The Overlord", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/e/ed/Shiny_The_Overlord.png", value: "O/C" },
{ name: "Mythic The Overlord", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/a/aa/Mythic_The_Overlord.png", value: "O/C" },
{ name: "Shiny Mythic The Overlord", image:
"https://static.wikia.nocookie.net/bgs-infinity/images/3/36/Shiny_Mythic_The_Overlo
rd.png", value: "O/C" },
{ name: "Shiny King Doggy", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/5/5b/Shiny_King_Doggy.png", value: "N/A" },
{ name: "Mythic King Doggy", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/7/78/Mythic_King_Doggy.png", value: "O/C" },
{ name: "Shiny Mythic King Doggy", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/5/52/Shiny_Mythic_King_Doggy.png", value: "O/C" },
{ name: "Shiny Avernus", image:
"https://static.wikia.nocookie.net/bgs-infinity/images/b/b5/Shiny_Avernus.png",
value: "O/C" },
{ name: "Mythic Avernus", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/b/ba/Mythic_Avernus.png", value: "O/C" },
{ name: "Shiny Mythic Avernus", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/5/59/Shiny_Mythic_Avernus.png", value: "O/C" },
{ name: "Man Face God", image:
"https://static.wikia.nocookie.net/bgs-infinity/images/1/1b/MAN_FACE_GOD.png",
value: "O/C" },
{ name: "Shiny Man Face God", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/1/13/Shiny_MAN_FACE_GOD.png", value: "O/C" },
{ name: "Mythic Man Face God", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/9/9c/Mythic_MAN_FACE_GOD.png", value: "O/C" },
{ name: "Shiny Mythic Man Face God", image:
"https://static.wikia.nocookie.net/bgs-infinity/images/2/2d/Shiny_Mythic_MAN_FACE_G
OD.png", value: "O/C" },
{ name: "Shiny NULLVoid", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/1/18/Shiny_Mythic_NULLVoid.png", value: "O/C" },
{ name: "Shiny Mythic Rainbow Shock", image:
"https://static.wikia.nocookie.net/bgs-infinity/images/7/71/Shiny_Mythic_Rainbow_Sh
ock.png", value: "O/C" },
{ name: "Shiny Seraph", image: "https://www.bgsi.gg/items/shiny-seraph.png",
value: "O/C" },
{ name: "Mythic Seraph", image: "https://www.bgsi.gg/items/mythic-seraph.png",
value: "N/A" },
{ name: "Shiny Mythic Seraph", image: "https://www.bgsi.gg/items/shiny-mythic-
seraph.png", value: "O/C" },
{ name: "Mythic Hacker Prism", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/4/46/Mythic_Hacker_Prism.png", value: "N/A" },
{ name: "Shiny Mythic Hacker Prism", image:
"https://static.wikia.nocookie.net/bgs-infinity/images/e/e0/Shiny_Mythic_Hacker_Pri
sm.png", value: "N/A" },
{ name: "Shiny Crescent Empress", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/9/97/Shiny_Crescent_Empress.png", value: "O/C" },
{ name: "Mythic Crescent Empress", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/4/4a/Mythic_Crescent_Empress.png", value: "N/A" },
{ name: "Shiny Mythic Crescent Empress", image:
"https://static.wikia.nocookie.net/bgs-infinity/images/a/ac/Shiny_Mythic_Crescent_E
mpress.png", value: "O/C" },
{ name: "Shiny Moonburst", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/1/1a/Shiny_Moonburst.png", value: "O/C" },
{ name: "Shiny Mythic Moonburst", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/e/ea/Shiny_Mythic_Moonburst.png", value: "O/C" },
{ name: "Mythic Trio Cube", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/d/dd/Mythic_Trio_Cube.png", value: "N/A" },
{ name: "Shiny Mythic Trio Cube", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/9/90/Shiny_Mythic_Trio_Cube.png", value: "N/A" },
{ name: "Shiny Mythic Sunburst", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/2/2d/Shiny_Mythic_Sunburst.png", value: "O/C" },
{ name: "Shiny Mythic Virus", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/d/dd/Shiny_Mythic_Virus.png", value: "O/C" },
{ name: "Shiny Mythic Sigma Serpent", image: "https://www.bgsi.gg/items/shiny-
mythic-sigma-serpent.png", value: "O/C" },
{ name: "Shiny Mythic Hexarium", image: "https://static.wikia.nocookie.net/bgs-
infinity/images/e/ea/Shiny_Mythic_Hexarium.png", value: "N/A" },
{ name: "Shiny Holy Shock", image: "https://www.bgsi.gg/items/shiny-holy-
shock.png", value: "N/A" }
];
const offerGrid = document.getElementById("offerGrid");
const petModal = document.getElementById("petModal");
const modalPetList = document.getElementById("modalPetList");
const modalSearchInput = document.getElementById("modalSearchInput");
const totalValueEl = document.getElementById("totalValue");
const givingValueEl = document.getElementById("givingValue");
const offerPets = [];
function openModal() {
if (offerPets.length >= 10) return alert("You can only add up to 10 pets!");
modalSearchInput.value = '';
refreshModalList(petData);
petModal.style.display = 'flex';
}
function closeModal() {
petModal.style.display = 'none';
}
function refreshModalList(data) {
modalPetList.innerHTML = '';
data.forEach(addPetToModal);
}
function addPetToModal(pet) {
const item = document.createElement("div");
item.className = "grid-item";
item.innerHTML = `
<div class="value-badge">${pet.value}</div>
<img src="${pet.image}" alt="${pet.name}">
<div>${pet.name}</div>
`;
item.onclick = () => {
if (offerPets.length >= 10) {
alert("Maximum of 10 pets allowed!");
return;
}
offerPets.push(pet);
renderOfferGrid();
closeModal();
};
modalPetList.appendChild(item);
}
function renderOfferGrid() {
offerGrid.innerHTML = '';
offerPets.forEach((pet, index) => {
const item = document.createElement("div");
item.className = "grid-item";
item.innerHTML = `
<div class="value-badge">${pet.value}</div>
<img src="${pet.image}" alt="${pet.name}">
<div>${pet.name}</div>
`;
item.onclick = () => {
offerPets.splice(index, 1);
renderOfferGrid();
};
offerGrid.appendChild(item);
});
if (offerPets.length < 10) {
const plus = document.createElement("div");
plus.className = "plus-button";
plus.innerText = "+";
plus.onclick = openModal;
offerGrid.appendChild(plus);
}
updateTotalValue();
}
function convertToNumber(value) {
value = value.toUpperCase();
if (value.endsWith("K")) return parseFloat(value) * 1000;
if (value.endsWith("M")) return parseFloat(value) * 1000000;
return parseFloat(value);
}
function updateTotalValue() {
const total = offerPets.reduce((sum, pet) => sum +
convertToNumber(pet.value), 0);
totalValueEl.innerText = total.toLocaleString();
givingValueEl.innerText = total.toLocaleString();
}
modalSearchInput.addEventListener("input", () => {
const searchTerm = modalSearchInput.value.toLowerCase();
const filtered = petData.filter(pet =>
pet.name.toLowerCase().includes(searchTerm));
refreshModalList(filtered);
});
window.addEventListener("click", e => {
if (e.target === petModal) {
closeModal();
}
});
</script>
</body>
</html>
