Scribd
Upload
40 views7 pages

Dowodle Value Overview

The document outlines a web page titled 'Their Offer' featuring a grid layout for displaying various pets with images and values. It includes interactive elements such as a modal for searching pets and a total value display for selected items. The page is styled with a dark theme and includes responsive design elements for a better user experience.

Uploaded by

nada.hachimi2005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
40 views7 pages

Dowodle Value Overview

The document outlines a web page titled 'Their Offer' featuring a grid layout for displaying various pets with images and values. It includes interactive elements such as a modal for searching pets and a total value display for selected items. The page is styled with a dark theme and includes responsive design elements for a better user experience.

Uploaded by

nada.hachimi2005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

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:
"[Link] value:
"10K" },
{ name: "King Doggy", image:
"[Link] value:
"5K" },
{ name: "Shiny Dowodle", image:
"[Link]
value: "7.5K" },
{ name: "Seraph", image:
"[Link] value:
"4K" },
{ name: "Shiny Beta TV", image:
"[Link]
value: "3.5K" },
{ name: "The Overlord", image:
"[Link]
value: "2.5K" },
{ name: "Moonburst", image:
"[Link] value:
"125" },
{ name: "Mythic Moonburst", image: "[Link]
infinity/images/0/08/Mythic_Moonburst.png", value: "1K" },
{ name: "Shiny Trio Cube", image: "[Link]
infinity/images/9/94/Shiny_Trio_Cube.png", value: "2K" },
{ name: "Mythic NULLVoid", image: "[Link]
infinity/images/8/8e/Mythic_NULLVoid.png", value: "1.5K" },
{ name: "Mythic Sigma Serpent", image: "[Link]
[Link]", value: "900" },
{ name: "Shiny NULLVoid", image: "[Link]
infinity/images/0/0c/Shiny_NULLVoid.png", value: "900" },
{ name: "Shiny Sunburst", image: "[Link]
infinity/images/5/56/Shiny_Sunburst.png", value: "1K" },
{ name: "Dowodle", image:
"[Link] value:
"1K" },
{ name: "Mythic Rainbow Shock", image: "[Link]
infinity/images/b/b8/Mythic_Rainbow_Shock.png", value: "1K" },
{ name: "Mythic Sunburst", image: "[Link]
infinity/images/9/9f/Mythic_Sunburst.png", value: "800" },
{ name: "Shiny Sigma Serpent", image: "[Link]
[Link]", value: "950" },
{ name: "Shiny Rainbow Shock", image: "[Link]
infinity/images/8/8b/Shiny_Rainbow_Shock.png", value: "500" },
{ name: "Ophanim Shiny", image: "[Link]
value: "550" },
{ name: "Shiny Evil Shock", image: "[Link]
[Link]", value: "425" },
{ name: "Mythic Hexarium", image: "[Link]
infinity/images/0/02/Mythic_Hexarium.png", value: "300" },
{ name: "Shiny Hexarium", image: "[Link]
infinity/images/2/2f/Shiny_Hexarium.png", value: "N/A" },
{ name: "Beta TV", image:
"[Link] value:
"450" },
{ name: "Crescent Empress", image: "[Link]
infinity/images/1/1f/Crescent_Empress.png", value: "350" },
{ name: "Sigma Serpent", image:
"[Link]
value: "250" },
{ name: "NULLVoid", image:
"[Link] value:
"225" },
{ name: "Trio Cube", image:
"[Link] value:
"200" },
{ name: "Mythic Virus", image:
"[Link]
value: "150" },
{ name: "Sunburst", image:
"[Link] value:
"800" },
{ name: "Ophanim", image: "[Link] value:
"100" },
{ name: "Rainbow Shock", image:
"[Link]
value: "75" },
{ name: "Holy Shock", image: "[Link] value:
"50" },
{ name: "Evil Shock", image: "[Link] value:
"50" },
{ name: "Hexarium", image:
"[Link] value:
"25" },
// ---- O/C & N/A pets start here (kept in your original order) ----
{ name: "Shiny The Overlord", image: "[Link]
infinity/images/e/ed/Shiny_The_Overlord.png", value: "O/C" },
{ name: "Mythic The Overlord", image: "[Link]
infinity/images/a/aa/Mythic_The_Overlord.png", value: "O/C" },
{ name: "Shiny Mythic The Overlord", image:
"[Link]
[Link]", value: "O/C" },
{ name: "Shiny King Doggy", image: "[Link]
infinity/images/5/5b/Shiny_King_Doggy.png", value: "N/A" },
{ name: "Mythic King Doggy", image: "[Link]
infinity/images/7/78/Mythic_King_Doggy.png", value: "O/C" },
{ name: "Shiny Mythic King Doggy", image: "[Link]
infinity/images/5/52/Shiny_Mythic_King_Doggy.png", value: "O/C" },
{ name: "Shiny Avernus", image:
"[Link]
value: "O/C" },
{ name: "Mythic Avernus", image: "[Link]
infinity/images/b/ba/Mythic_Avernus.png", value: "O/C" },
{ name: "Shiny Mythic Avernus", image: "[Link]
infinity/images/5/59/Shiny_Mythic_Avernus.png", value: "O/C" },
{ name: "Man Face God", image:
"[Link]
value: "O/C" },
{ name: "Shiny Man Face God", image: "[Link]
infinity/images/1/13/Shiny_MAN_FACE_GOD.png", value: "O/C" },
{ name: "Mythic Man Face God", image: "[Link]
infinity/images/9/9c/Mythic_MAN_FACE_GOD.png", value: "O/C" },
{ name: "Shiny Mythic Man Face God", image:
"[Link]
[Link]", value: "O/C" },
{ name: "Shiny NULLVoid", image: "[Link]
infinity/images/1/18/Shiny_Mythic_NULLVoid.png", value: "O/C" },
{ name: "Shiny Mythic Rainbow Shock", image:
"[Link]
[Link]", value: "O/C" },
{ name: "Shiny Seraph", image: "[Link]
value: "O/C" },
{ name: "Mythic Seraph", image: "[Link]
value: "N/A" },
{ name: "Shiny Mythic Seraph", image: "[Link]
[Link]", value: "O/C" },
{ name: "Mythic Hacker Prism", image: "[Link]
infinity/images/4/46/Mythic_Hacker_Prism.png", value: "N/A" },
{ name: "Shiny Mythic Hacker Prism", image:
"[Link]
[Link]", value: "N/A" },
{ name: "Shiny Crescent Empress", image: "[Link]
infinity/images/9/97/Shiny_Crescent_Empress.png", value: "O/C" },
{ name: "Mythic Crescent Empress", image: "[Link]
infinity/images/4/4a/Mythic_Crescent_Empress.png", value: "N/A" },
{ name: "Shiny Mythic Crescent Empress", image:
"[Link]
[Link]", value: "O/C" },
{ name: "Shiny Moonburst", image: "[Link]
infinity/images/1/1a/Shiny_Moonburst.png", value: "O/C" },
{ name: "Shiny Mythic Moonburst", image: "[Link]
infinity/images/e/ea/Shiny_Mythic_Moonburst.png", value: "O/C" },
{ name: "Mythic Trio Cube", image: "[Link]
infinity/images/d/dd/Mythic_Trio_Cube.png", value: "N/A" },
{ name: "Shiny Mythic Trio Cube", image: "[Link]
infinity/images/9/90/Shiny_Mythic_Trio_Cube.png", value: "N/A" },
{ name: "Shiny Mythic Sunburst", image: "[Link]
infinity/images/2/2d/Shiny_Mythic_Sunburst.png", value: "O/C" },
{ name: "Shiny Mythic Virus", image: "[Link]
infinity/images/d/dd/Shiny_Mythic_Virus.png", value: "O/C" },
{ name: "Shiny Mythic Sigma Serpent", image: "[Link]
[Link]", value: "O/C" },
{ name: "Shiny Mythic Hexarium", image: "[Link]
infinity/images/e/ea/Shiny_Mythic_Hexarium.png", value: "N/A" },
{ name: "Shiny Holy Shock", image: "[Link]
[Link]", value: "N/A" }

];
const offerGrid = [Link]("offerGrid");
const petModal = [Link]("petModal");
const modalPetList = [Link]("modalPetList");
const modalSearchInput = [Link]("modalSearchInput");
const totalValueEl = [Link]("totalValue");
const givingValueEl = [Link]("givingValue");

const offerPets = [];

function openModal() {
if ([Link] >= 10) return alert("You can only add up to 10 pets!");
[Link] = '';
refreshModalList(petData);
[Link] = 'flex';
}

function closeModal() {
[Link] = 'none';
}

function refreshModalList(data) {
[Link] = '';
[Link](addPetToModal);
}

function addPetToModal(pet) {
const item = [Link]("div");
[Link] = "grid-item";
[Link] = `
<div class="value-badge">${[Link]}</div>
<img src="${[Link]}" alt="${[Link]}">
<div>${[Link]}</div>
`;
[Link] = () => {
if ([Link] >= 10) {
alert("Maximum of 10 pets allowed!");
return;
}
[Link](pet);
renderOfferGrid();
closeModal();
};
[Link](item);
}

function renderOfferGrid() {
[Link] = '';
[Link]((pet, index) => {
const item = [Link]("div");
[Link] = "grid-item";
[Link] = `
<div class="value-badge">${[Link]}</div>
<img src="${[Link]}" alt="${[Link]}">
<div>${[Link]}</div>
`;
[Link] = () => {
[Link](index, 1);
renderOfferGrid();
};
[Link](item);
});

if ([Link] < 10) {


const plus = [Link]("div");
[Link] = "plus-button";
[Link] = "+";
[Link] = openModal;
[Link](plus);
}

updateTotalValue();
}

function convertToNumber(value) {
value = [Link]();
if ([Link]("K")) return parseFloat(value) * 1000;
if ([Link]("M")) return parseFloat(value) * 1000000;
return parseFloat(value);
}

function updateTotalValue() {
const total = [Link]((sum, pet) => sum +
convertToNumber([Link]), 0);
[Link] = [Link]();
[Link] = [Link]();
}

[Link]("input", () => {
const searchTerm = [Link]();
const filtered = [Link](pet =>
[Link]().includes(searchTerm));
refreshModalList(filtered);
});

[Link]("click", e => {
if ([Link] === petModal) {
closeModal();
}
});
</script>
</body>
</html>

You might also like