<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Калькулятор обміну криптовалюти</title>
<link rel="stylesheet" href="style.css" />
<style>
body {
background-color: #0f1115;
font-family: 'Segoe UI', sans-serif;
color: #fff;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.calculator {
background: #1a1c22;
padding: 30px;
border-radius: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
max-width: 400px;
width: 100%;
}
h2 {
color: #00c86f;
text-align: center;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
select, input {
width: 100%;
padding: 10px;
border: none;
border-radius: 10px;
font-size: 16px;
background: #2a2d35;
color: white;
appearance: none;
}
.icon-option {
display: flex;
align-items: center;
gap: 10px;
}
button {
background: #00c86f;
color: white;
padding: 14px;
border: none;
border-radius: 10px;
width: 100%;
font-size: 16px;
cursor: pointer;
}
.result {
margin-top: 15px;
font-size: 18px;
text-align: center;
}
.swap-btn {
display: flex;
justify-content: center;
margin-bottom: 15px;
}
.swap-btn button {
background: transparent;
border: none;
cursor: pointer;
font-size: 24px;
color: #00c86f;
}
.select-wrapper {
display: flex;
align-items: center;
gap: 10px;
}
.select-icon {
width: 24px;
height: 24px;
}
#second-column {
margin-top: -10px;
}
</style>
</head>
<body>
<div class="calculator">
<h2>Калькулятор обміну</h2>
<div class="form-group">
<label for="amount">Сума</label>
<input type="number" id="amount" placeholder="Введіть суму" />
</div>
<div class="form-group" id="first-column">
<label for="fiat">Валюта</label>
<div class="select-wrapper">
<img id="fiat-icon" class="select-icon" src="assets/icons/usd.svg" alt="usd">
<select id="fiat">
<option value="USD" data-icon="usd.svg">USD (Долар)</option>
<option value="EUR" data-icon="eur.svg">EUR (Євро)</option>
<option value="UAH" data-icon="uah.svg">UAH (Гривня)</option>
</select>
</div>
</div>
<div class="swap-btn">
<button onclick="swapFields()">⇅</button>
</div>
<div class="form-group" id="second-column">
<label for="crypto">Криптовалюта</label>
<div class="select-wrapper">
<img id="crypto-icon" class="select-icon" src="assets/icons/bitcoin-btc-logo.svg" alt="btc">
<select id="crypto">
<option value="BTC" data-icon="bitcoin-btc-logo.svg">Bitcoin (BTC)</option>
<option value="ETH" data-icon="ethereum-eth-logo.svg">Ethereum (ETH)</option>
<option value="USDT" data-icon="tether-usdt-logo.svg">Tether (USDT)</option>
<option value="BNB" data-icon="binance-coin-bnb-logo.svg">Binance Coin (BNB)</option>
<option value="SOL" data-icon="solana-sol-logo.svg">Solana (SOL)</option>
</select>
</div>
</div>
<button onclick="calculate()">Розрахувати</button>
<div class="result" id="result"></div>
</div>

<script>
const fiatSelect = document.getElementById("fiat");
const cryptoSelect = document.getElementById("crypto");
const fiatIcon = document.getElementById("fiat-icon");
const cryptoIcon = document.getElementById("crypto-icon");
const firstColumn = document.getElementById("first-column");
const secondColumn = document.getElementById("second-column");

fiatSelect.addEventListener("change", () => {
fiatIcon.src = assets/icons/${fiatSelect.options[fiatSelect.selectedIndex].dataset.icon};
});

cryptoSelect.addEventListener("change", () => {
cryptoIcon.src = assets/icons/${cryptoSelect.options[cryptoSelect.selectedIndex].dataset.icon};
});

let isFiatFirst = true;

function swapFields() {
isFiatFirst = !isFiatFirst;

const firstHTML = firstColumn.innerHTML;
const secondHTML = secondColumn.innerHTML;

firstColumn.innerHTML = secondHTML;
secondColumn.innerHTML = firstHTML;

updateIcons();
}

function updateIcons() {
const fiat = document.getElementById("fiat");
const fiatIconEl = document.getElementById("fiat-icon");
const crypto = document.getElementById("crypto");
const cryptoIconEl = document.getElementById("crypto-icon");

if (fiat && fiatIconEl) {
fiat.addEventListener("change", () => {
fiatIconEl.src = assets/icons/${fiat.options[fiat.selectedIndex].dataset.icon};
});
}

if (crypto && cryptoIconEl) {
crypto.addEventListener("change", () => {
cryptoIconEl.src = assets/icons/${crypto.options[crypto.selectedIndex].dataset.icon};
});
}
}

async function getRate(from, to) {
const res = await fetch(https://min-api.cryptocompare.com/data/price?fsym=${from}&tsyms=${to});
const data = await res.json();
return data[to];
}

async function calculate() {
const amount = parseFloat(document.getElementById('amount').value);
const from = isFiatFirst ? document.getElementById("fiat").value : document.getElementById("crypto").value;
const to = isFiatFirst ? document.getElementById("crypto").value : document.getElementById("fiat").value;

if (!amount || amount <= 0) return alert("Введіть коректну суму");

const rate = await getRate(from, to);
const result = isFiatFirst
? (amount / rate * 0.98).toFixed(6)
: (amount * rate * 0.98).toFixed(2);

document.getElementById("result").innerText = ≈ ${result} ${to};
}
</script>
</body>
</html>