��

mybb@mybb.ru (��) — Tue, 28 Jan 2025 20:39:40 +0300

[html] <style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}

.container {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.header {
text-align: center;
background-color: #b7323f;
padding: 10px;
color: white;
border-radius: 15px 15px 0 0;
}

.section {
margin: 20px 0;
}

.section h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
}

.items {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
max-height: 200px;
overflow-y: auto;
padding: 10px;
border: 1px solid #ddd;
border-radius: 10px;
background-color: #f9f9f9;
}

.item {
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 10px;
padding: 10px;
width: 200px;
text-align: center;
position: relative;
}

.item .quantity {
font-size: 14px;
margin: 5px 0;
}

.item .price {
font-size: 16px;
font-weight: bold;
color: #333;
}

.item button {
background-color: #b7323f;
color: white;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
}

.item button:hover {
background-color: #a12d38;
}

.summary {
text-align: center;
margin-top: 30px;
font-size: 18px;
font-weight: bold;
}

.reset-btn {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #f44336;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

.reset-btn:hover {
background-color: #e53935;
}

.custom-sum {
text-align: center;
margin: 20px 0;
}

.custom-sum input {
padding: 5px;
font-size: 16px;
width: 150px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">��</div>

let totalAmount = 0;
let breakdown = {};

const earnSection = document.getElementById('earn-section');
const spendSection = document.getElementById('spend-section');
const totalPriceElement = document.getElementById('total-price');
const breakdownElement = document.getElementById('breakdown');
const resetButton = document.getElementById('reset-btn');
const customInput = document.getElementById('custom-input');
const addCustomButton = document.getElementById('add-custom');
const subtractCustomButton = document.getElementById('subtract-custom');

function updateSummary() {
const breakdownText = Object.keys(breakdown).map(key => {
const { name, quantity, price } = breakdown[key];
return `${name}: ${quantity} × ${price} ₽`;
}).join('<br>');

totalPriceElement.textContent = `${totalAmount} ₽`;
breakdownElement.innerHTML = breakdownText || '0 ₽';
}

function createItemElement(item, sectionType) {
const itemElement = document.createElement('div');
itemElement.classList.add('item');

const nameElement = document.createElement('div');
nameElement.textContent = item.name;

const quantityElement = document.createElement('input');
quantityElement.type = 'number';
quantityElement.value = 1;
quantityElement.min = 1;
quantityElement.classList.add('quantity');

const priceElement = document.createElement('div');
priceElement.classList.add('price');
priceElement.textContent = `${item.price} ₽`;

const addButton = document.createElement('button');
addButton.textContent = '��';

const removeButton = document.createElement('button');
removeButton.textContent = '��';

addButton.addEventListener('click', () => {
const quantity = parseInt(quantityElement.value);

if (sectionType === 'earn') {
totalAmount += item.price * quantity;
} else {
totalAmount -= item.price * quantity;
}

if (!breakdown[item.name]) {
breakdown[item.name] = { name: item.name, quantity: 0, price: item.price };
}

breakdown[item.name].quantity += quantity;
updateSummary();
});

removeButton.addEventListener('click', () => {
const quantity = parseInt(quantityElement.value);

if (breakdown[item.name]) {
breakdown[item.name].quantity -= quantity;

if (breakdown[item.name].quantity <= 0) {
delete breakdown[item.name];
}

if (sectionType === 'earn') {
totalAmount -= item.price * quantity;
} else {
totalAmount += item.price * quantity;
}

updateSummary();
}
});

itemElement.appendChild(nameElement);
itemElement.appendChild(quantityElement);
itemElement.appendChild(priceElement);
itemElement.appendChild(addButton);
itemElement.appendChild(removeButton);

return itemElement;
}

itemsData.slice(0, 2).forEach(item => {
earnSection.appendChild(createItemElement(item, 'earn'));
spendSection.appendChild(createItemElement(item, 'spend'));
});

itemsData.slice(2).forEach(item => {
const hiddenItem = createItemElement(item, 'earn');
earnSection.appendChild(hiddenItem);
});

addCustomButton.addEventListener('click', () => {
const customValue = parseInt(customInput.value);
if (!isNaN(customValue)) {
totalAmount += customValue;
breakdown['�� '] = {
name: '�� ',
quantity: 1,
price: customValue
};
updateSummary();
}
});

subtractCustomButton.addEventListener('click', () => {
const customValue = parseInt(customInput.value);
if (!isNaN(customValue)) {
totalAmount -= customValue;
breakdown['�� '] = {
name: '�� ',
quantity: -1,
price: customValue
};
updateSummary();
}
});

resetButton.addEventListener('click', () => {
totalAmount = 0;
breakdown = {};
updateSummary();
});
</script>[/html]

jjjjjjjjay

�������� ���������

��