Bitcoin hoje

.bitcoin-calculator-widget * {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif;
}

.bitcoin-calculator-widget {
width: 100%;
max-width: 48rem;
margin: 1rem auto;
background-color: white;
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
overflow: hidden;
}

.bitcoin-calculator-widget .header {
background: linear-gradient(to right, #f97316, #facc15);
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}

.bitcoin-calculator-widget .header h2 {
color: white;
font-size: clamp(1.25rem, 4vw, 1.5rem);
font-weight: bold;
margin: 0;
padding: 0;
}

.bitcoin-calculator-widget .content {
padding: clamp(1rem, 3vw, 1.5rem);
}

.bitcoin-calculator-widget .calculator-section {
max-width: 32rem;
margin: 0 auto 2rem;
}

.bitcoin-calculator-widget .input-group {
margin-bottom: clamp(0.75rem, 2vw, 1rem);
}

.bitcoin-calculator-widget .input-group label {
display: block;
font-size: clamp(0.75rem, 2vw, 0.875rem);
font-weight: 500;
color: #374151;
margin-bottom: 0.25rem;
}

.bitcoin-calculator-widget .input-group input {
width: 100%;
padding: clamp(0.375rem, 1.5vw, 0.5rem);
border: 1px solid black;
border-radius: 0.25rem;
outline: none;
font-size: clamp(0.875rem, 2.5vw, 1rem);
}

.bitcoin-calculator-widget .input-group input:focus {
border-color: transparent;
box-shadow: 0 0 0 2px #f97316;
}

.bitcoin-calculator-widget .price-display {
background-color: #fff7ed;
padding: clamp(0.75rem, 2vw, 1rem);
border-radius: 0.5rem;
border: 1px solid #fed7aa;
margin-top: clamp(1rem, 3vw, 1.5rem);
}

.bitcoin-calculator-widget .price-display p:first-child {
font-size: clamp(0.75rem, 2vw, 0.875rem);
color: #4b5563;
margin: 0;
}

.bitcoin-calculator-widget .price-display p:last-child {
font-size: clamp(1.25rem, 3.5vw, 1.5rem);
font-weight: bold;
color: #111827;
margin: 0.25rem 0 0 0;
}

.bitcoin-calculator-widget .chart-container {
background-color: white;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
padding: clamp(0.5rem, 2vw, 0.75rem);
height: 300px;
margin-top: 1rem;
}

.bitcoin-calculator-widget .footer {
text-align: center;
font-size: clamp(0.625rem, 1.5vw, 0.75rem);
color: #6b7280;
margin-top: clamp(0.75rem, 2vw, 1rem);
padding: 0 1rem;
}

@media (max-width: 480px) {
.bitcoin-calculator-widget {
margin: 0.5rem auto;
border-radius: 0.375rem;
}

.bitcoin-calculator-widget .header {
padding: 0.75rem;
}

.bitcoin-calculator-widget .content {
padding: 1rem;
}

.bitcoin-calculator-widget .chart-container {
height: 250px;
}
}

@media (max-width: 320px) {
.bitcoin-calculator-widget .header h2 {
font-size: 1.125rem;
}

.bitcoin-calculator-widget .input-group input {
font-size: 0.875rem;
}

.bitcoin-calculator-widget .price-display p:last-child {
font-size: 1.125rem;
}
}

let btcPrice = 0;
let chart = null;

async function fetchCurrentPrice() {
try {
const response = await fetch(‘https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=brl’);
const data = await response.json();
btcPrice = data.bitcoin.brl;
document.getElementById(‘currentPrice’).textContent =
`R$ ${btcPrice.toLocaleString(‘pt-BR’, { minimumFractionDigits: 2 })}`;
} catch (error) {
console.error(‘Erro ao buscar preço atual:’, error);
}
}

async function fetchHistoricalData() {
try {
const today = new Date();
const sixMonthsAgo = new Date();
sixMonthsAgo.setMonth(today.getMonth() – 6);

const response = await fetch(
`https://api.coingecko.com/api/v3/coins/bitcoin/market_chart/range?vs_currency=brl&from=${Math.floor(
sixMonthsAgo.getTime() / 1000
)}&to=${Math.floor(today.getTime() / 1000)}`
);
const data = await response.json();

const dates = data.prices.map(item =>
new Date(item[0]).toLocaleDateString(‘pt-BR’)
);
const prices = data.prices.map(item => item[1]);

updateChart(dates, prices);
} catch (error) {
console.error(‘Erro ao buscar dados históricos:’, error);
}
}

function updateChart(dates, prices) {
const ctx = document.getElementById(‘priceChart’).getContext(‘2d’);

if (chart) {
chart.destroy();
}

chart = new Chart(ctx, {
type: ‘line’,
data: {
labels: dates,
datasets: [{
label: ‘Preço do Bitcoin (BRL)’,
data: prices,
borderColor: ‘rgb(75, 192, 192)’,
tension: 0.1
}]
},
options: {
responsive: true,
maintainAspectRatio: true,
plugins: {
legend: {
position: ‘top’,
labels: {
font: {
size: window.innerWidth < 768 ? 10 : 12
}
}
},
title: {
display: true,
text: 'Histórico de Preço do Bitcoin (6 meses)',
font: {
size: window.innerWidth < 768 ? 12 : 14
}
}
},
scales: {
x: {
ticks: {
font: {
size: window.innerWidth < 768 ? 8 : 10
},
maxRotation: 45,
minRotation: 45
}
},
y: {
ticks: {
font: {
size: window.innerWidth < 768 ? 8 : 10
}
}
}
}
}
});
}

document.getElementById('brlInput').addEventListener('input', function(e) {
const brlValue = e.target.value;
if (brlValue && btcPrice) {
const btcValue = (parseFloat(brlValue) / btcPrice).toFixed(8);
document.getElementById('btcInput').value = btcValue;
} else {
document.getElementById('btcInput').value = '';
}
});

document.getElementById('btcInput').addEventListener('input', function(e) {
const btcValue = e.target.value;
if (btcValue && btcPrice) {
const brlValue = (parseFloat(btcValue) * btcPrice).toFixed(2);
document.getElementById('brlInput').value = brlValue;
} else {
document.getElementById('brlInput').value = '';
}
});

window.addEventListener('resize', function() {
if (chart) {
chart.options.plugins.legend.labels.font.size = window.innerWidth < 768 ? 10 : 12;
chart.options.plugins.title.font.size = window.innerWidth < 768 ? 12 : 14;
chart.options.scales.x.ticks.font.size = window.innerWidth < 768 ? 8 : 10;
chart.options.scales.y.ticks.font.size = window.innerWidth < 768 ? 8 : 10;
chart.update();
}
});

// Inicialização
fetchCurrentPrice();
fetchHistoricalData();
setInterval(fetchCurrentPrice, 60000);