Skip to content

Commit

Permalink
Update U5tV8n4d6.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@5H2
5H2 authored Apr 17, 2024
1 parent 5a2f8f0 commit 152da20
Showing 1 changed file with 374 additions and 2 deletions.
376 changes: 374 additions & 2 deletions user/U5tV8n4d6.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="images/5H2.ico">
<title>5H2 | Skyblock Seniors</title>
<title>❀ 5H2 | Skyblock Seniors</title>
<style>
body {
background-color: #22272e;
Expand All @@ -26,10 +26,382 @@
text-align: left;
margin-top: -15px;
}
#header {
background-color: #1c1f24;
padding: 10px 20px;
font-size: 28px;
font-weight: bold;
margin-bottom: 20px;
}
.popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
justify-content: center;
align-items: center;
}
.popup-content {
background-color: #2d333b;
padding: 20px;
border-radius: 10px;
width: 400px;
text-align: center;
}
.close {
position: absolute;
top: 50px;
right: 50px;
cursor: pointer;
color: white;
scale: 2;
}
.close:hover {
color: red;
}
.search-suggestions {
list-style: none;
padding: 0;
margin: 10px 0;
}
.search-suggestions li {
padding: 5px;
cursor: pointer;
display: flex;
align-items: center;
}
.search-suggestions li:hover {
background-color: #555;
}
.search-suggestions li img {
width: 30px; /* Adjust as needed */
height: 30px; /* Adjust as needed */
margin-right: 10px;
}
input[type="text"], input[type="number"] {
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
border: 1px solid #ccc;
background-color: #2d333b;
color: #fff;
font-size: 16px;
width: calc(100% - 20px);
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 18px;
}
#portfolio {
margin-top: 30px;
}
#portfolio h2 {
font-size: 28px;
margin-bottom: 10px;
}
#portfolio-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.portfolio-item {
background-color: #444;
color: white;
padding: 10px;
border-radius: 10px;
margin-bottom: 10px;
width: 300px;
position: relative;
}
.portfolio-item img {
width: 200px;
height: 200px;
border-radius: 5px;
object-fit: cover;
display: block;
margin: 0 auto;
}
.item-details {
padding: 10px;
margin-top: 10px;
font-size: 16px;
text-align: left;
}
.remove-item {
position: absolute;
top: 5px;
right: 5px;
opacity: 0;
transition: opacity 0.3s ease;
cursor: pointer;
font-size: 20px;
color: #ccc;
}
.portfolio-item:hover .remove-item {
opacity: 1;
}
.remove-item:hover {
color: red;
}
#add-item-container {
width: 300px;
height: 200px;
border: 2px dashed #007bff;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
margin-bottom: 20px;
}
#add-item-container:hover {
background-color: rgba(0, 123, 255, 0.1);
}
.add-item-text {
font-size: 36px;
color: #007bff;
}
#total-spend { /* New CSS for Total Spend */
margin-top: 20px;
}
#total-investments { /* New CSS for Total Investments */
margin-top: 20px;
}
</style>
</head>
<body>
<div id="header">
Skyblock Seniors
</div>

<h1>Welcome 5H2!</h1>
<p>Good Luck trading!</p>
<p>Thank you for your purchase, good luck!</p>

<div id="add-item-container" onclick="openPopup()">
<div class="add-item-text">+</div>
</div>

<div id="popup" class="popup">
<div class="popup-content">
<span class="close" onclick="closePopup()">&times;</span>
<input type="text" id="search" placeholder="Search for an item..." oninput="filterItems()" autocomplete="off" >
<ul class="search-suggestions" id="suggestions"></ul>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" required autocomplete="off">
<label for="price">Price:</label>
<input type="number" id="price" required autocomplete="off">
<button onclick="addToPortfolio()">Save to Portfolio</button>
</div>
</div>

<div id="portfolio">
<h2>Portfolio</h2>
<div id="portfolio-list"></div>
</div>

<div id="total-investments">
Total Investments: <span id="total-investments-amount">0</span> in <span id="unique-items">0</span> unique items
</div>

<div id="total-spend">
Total Assets: <span id="total-spend-amount">0</span> coins
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
const portfolioList = document.getElementById("portfolio-list");
const totalSpendAmount = document.getElementById("total-spend-amount");
const totalInvestmentsAmount = document.getElementById("total-investments-amount");
const uniqueItems = document.getElementById("unique-items");

function displayPortfolio(portfolio) {
portfolioList.innerHTML = "";
portfolio.forEach((entry, index) => {
const div = document.createElement("div");
div.classList.add("portfolio-item");

const img = document.createElement("img");
img.src = getImageUrl(entry.item);
div.appendChild(img);

const details = document.createElement("div");
details.classList.add("item-details");
details.innerHTML = `<strong>${getDisplayName(entry.item)}</strong><br>Bought ${entry.quantity} at ${entry.price} coins each (Total: ${entry.quantity * entry.price} Coins)`;
div.appendChild(details);

const removeButton = document.createElement("span");
removeButton.classList.add("remove-item");
removeButton.textContent = "❌";
removeButton.title = "Remove item";
removeButton.addEventListener("click", function () {
removeItem(index);
});
div.appendChild(removeButton);

portfolioList.appendChild(div);
});
}

function updateTotalSpend(portfolio) {
const totalSpend = portfolio.reduce((acc, entry) => acc + (entry.quantity * entry.price), 0);
totalSpendAmount.textContent = totalSpend;
}

function updateTotalInvestments(portfolio) {
const totalInvestments = portfolio.reduce((acc, entry) => acc + entry.quantity, 0);
totalInvestmentsAmount.textContent = totalInvestments;
const uniqueItemIds = new Set(portfolio.map(entry => entry.item));
uniqueItems.textContent = uniqueItemIds.size;
}

function removeItem(index) {
let portfolio = JSON.parse(localStorage.getItem("portfolio")) || [];
portfolio.splice(index, 1);
localStorage.setItem("portfolio", JSON.stringify(portfolio));
loadPortfolio();
updateTotalSpend(portfolio);
updateTotalInvestments(portfolio);
}

function loadPortfolio() {
const portfolio = JSON.parse(localStorage.getItem("portfolio")) || [];
displayPortfolio(portfolio);
updateTotalSpend(portfolio);
updateTotalInvestments(portfolio);
}

loadPortfolio();
});

let selectedItem = "";

function openPopup() {
document.getElementById("popup").style.display = "flex";
document.getElementById("search").value = "";
document.getElementById("quantity").value = "";
document.getElementById("price").value = "";
document.getElementById("suggestions").innerHTML = "";
document.getElementById("search").focus();
}

function closePopup() {
document.getElementById("popup").style.display = "none";
}

function filterItems() {
const search = document.getElementById("search").value.toLowerCase();
const suggestions = document.getElementById("suggestions");
suggestions.innerHTML = "";
const items = {
CORRUPTED_BAIT: "Corrupted Bait",
ENCHANTMENT_ULTIMATE_NO_PAIN_NO_GAIN_2: "Enchantment Ultimate No Pain No Gain 2",
TARANTULA_WEB: "Tarantula Web",
ENCHANTMENT_ULTIMATE_NO_PAIN_NO_GAIN_1: "Enchantment Ultimate No Pain No Gain 1",
DUNGEON_TRAP: "Dungeon Trap",
DARK_ORB: "Dark Orb",
ARCHITECT_FIRST_DRAFT: "Architect First Draft",
ENCHANTMENT_PROTECTION_7: "Enchantment Protection 7",
ENCHANTMENT_PROTECTION_6: "Enchantment Protection 6",
RITUAL_RESIDUE: "Ritual Residue",
ESSENCE_DRAGON: "Dragon Essence",
RECOMBOBULATOR_3000: "Recombobulator 3000"
};
let count = 0; // Counter for limiting suggestions
Object.entries(items).forEach(([id, item]) => {
if (count < 5 && item.toLowerCase().includes(search)) {
const li = document.createElement("li");
const img = document.createElement("img");
img.src = getImageUrl(id); // Use item ID to get image URL
li.appendChild(img);
const span = document.createElement("span");
span.textContent = item;
li.appendChild(span);
li.onclick = function() {
document.getElementById("search").value = item;
selectedItem = id;
suggestions.innerHTML = "";
};
suggestions.appendChild(li);
count++;
}
});
}

function addToPortfolio() {
const quantity = document.getElementById("quantity").value;
const price = document.getElementById("price").value;
if (!selectedItem || !quantity || !price) {
alert("Please fill out all fields correctly.");
return;
}
const portfolioList = document.getElementById("portfolio-list");
const div = document.createElement("div");
div.classList.add("portfolio-item");
const img = document.createElement("img");
img.src = getImageUrl(selectedItem);
div.appendChild(img);
const details = document.createElement("div");
details.classList.add("item-details");
details.innerHTML = `<strong>${getDisplayName(selectedItem)}</strong><br>Bought ${quantity} at ${price} coins each (Total: ${quantity * price} Coins)`;
div.appendChild(details);
const removeButton = document.createElement("span");
removeButton.classList.add("remove-item");
removeButton.textContent = "❌";
removeButton.title = "Remove item";
removeButton.addEventListener("click", function () {
div.remove();
});
div.appendChild(removeButton);
portfolioList.appendChild(div);
document.getElementById("total-spend-amount").textContent = parseInt(document.getElementById("total-spend-amount").textContent) + (quantity * price);
closePopup();
}

function getImageUrl(item) {
const imageUrlPrefix = '../images/';
const itemImages = {
CORRUPTED_BAIT: "CORRUPTED_BAIT.png",
ENCHANTMENT_ULTIMATE_NO_PAIN_NO_GAIN_2: "ENCHANTMENT_ULTIMATE_NO_PAIN_NO_GAIN_2.png",
TARANTULA_WEB: "TARANTULA_WEB.png",
ENCHANTMENT_ULTIMATE_NO_PAIN_NO_GAIN_1: "ENCHANTMENT_ULTIMATE_NO_PAIN_NO_GAIN_1.png",
DUNGEON_TRAP: "DUNGEON_TRAP.png",
DARK_ORB: "DARK_ORB.png",
ARCHITECT_FIRST_DRAFT: "ARCHITECT_FIRST_DRAFT.png",
ENCHANTMENT_PROTECTION_7: "ENCHANTMENT_PROTECTION_7.png",
ENCHANTMENT_PROTECTION_6: "ENCHANTMENT_PROTECTION_6.png",
RITUAL_RESIDUE: "RITUAL_RESIDUE.png",
ESSENCE_DRAGON: "ESSENCE_DRAGON.png",
RECOMBOBULATOR_3000: "RECOMBOBULATOR_3000.png"
};
return imageUrlPrefix + itemImages[item] || "";
}

function getDisplayName(item) {
const itemNames = {
CORRUPTED_BAIT: "Corrupted Bait",
ENCHANTMENT_ULTIMATE_NO_PAIN_NO_GAIN_2: "Enchantment Ultimate No Pain No Gain 2",
TARANTULA_WEB: "Tarantula Web",
ENCHANTMENT_ULTIMATE_NO_PAIN_NO_GAIN_1: "Enchantment Ultimate No Pain No Gain 1",
DUNGEON_TRAP: "Dungeon Trap",
DARK_ORB: "Dark Orb",
ARCHITECT_FIRST_DRAFT: "Architect First Draft",
ENCHANTMENT_PROTECTION_7: "Enchantment Protection 7",
ENCHANTMENT_PROTECTION_6: "Enchantment Protection 6",
RITUAL_RESIDUE: "Ritual Residue",
ESSENCE_DRAGON: "Dragon Essence",
RECOMBOBULATOR_3000: "Recombobulator 3000"
};
return itemNames[item] || "";
}
</script>
</body>
</html>

0 comments on commit 152da20

Please sign in to comment.