Unmined Bitcoin

Verbleibende Bitcoin bis 21 000 000

 <canvas id="bitcoinHourglass" width="200" height="400" style="border:1px solid #ccc; background:#f9f9f9;"></canvas>

Lade Daten…

<script> (function() {

 const canvas = document.getElementById('bitcoinHourglass');
 const ctx = canvas.getContext('2d');
 const totalSupply = 21000000;
 let circulating = 0;
 let remaining = 0;
 let animationParticles = [];

 async function fetchCirculatingSupply() {
   try {
     const response = await fetch('https://api.coingecko.com/api/v3/coins/bitcoin');
     if (!response.ok) throw new Error('Netzwerkfehler');
     const data = await response.json();
     circulating = data.market_data.circulating_supply;
     remaining = Math.max(totalSupply - circulating, 0);
     document.getElementById('btc-remaining-text').textContent =
       'Noch ' + remaining.toLocaleString('de-DE') + ' BTC';
   } catch (err) {
     document.getElementById('btc-remaining-text').textContent = 'Fehler beim Laden der Daten';
     console.error(err);
   }
 }

 function drawHourglassFrame() {
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   ctx.strokeStyle = '#333';
   ctx.lineWidth = 2;

   // Obere Kammer (Dreieck nach unten)
   ctx.beginPath();
   ctx.moveTo(20, 20);
   ctx.lineTo(canvas.width - 20, 20);
   ctx.lineTo(canvas.width/2 + 20, canvas.height/2 - 20);
   ctx.lineTo(canvas.width/2 - 20, canvas.height/2 - 20);
   ctx.closePath();
   ctx.stroke();

   // Untere Kammer (Dreieck nach oben)
   ctx.beginPath();
   ctx.moveTo(20, canvas.height - 20);
   ctx.lineTo(canvas.width - 20, canvas.height - 20);
   ctx.lineTo(canvas.width/2 + 20, canvas.height/2 + 20);
   ctx.lineTo(canvas.width/2 - 20, canvas.height/2 + 20);
   ctx.closePath();
   ctx.stroke();

   // Verbindungslinien
   ctx.beginPath();
   ctx.moveTo(canvas.width/2 - 20, canvas.height/2 - 20);
   ctx.lineTo(canvas.width/2 - 20, canvas.height/2 + 20);
   ctx.moveTo(canvas.width/2 + 20, canvas.height/2 - 20);
   ctx.lineTo(canvas.width/2 + 20, canvas.height/2 + 20);
   ctx.stroke();
 }

 function drawSandLevels() {
   const ratio = remaining / totalSupply;
   const maxHeight = (canvas.height/2 - 30);
   const upperHeight = maxHeight * ratio;
   const lowerHeight = maxHeight * (1 - ratio);

   // Obere Kammer füllen
   if (upperHeight > 0) {
     ctx.fillStyle = '#f2c94c';
     ctx.beginPath();
     const topY = 20;
     const baseY = (canvas.height/2 - 20);
     const currentY = baseY - upperHeight;
     const interpolation = (currentY - topY) / (baseY - topY);
     const leftX = 20 + (canvas.width/2 - 20 - 20) * (1 - interpolation);
     const rightX = canvas.width - 20 - (canvas.width/2 - 20 - 20) * (1 - interpolation);

     ctx.moveTo(leftX, currentY);
     ctx.lineTo(rightX, currentY);
     ctx.lineTo(canvas.width/2 + 20, baseY);
     ctx.lineTo(canvas.width/2 - 20, baseY);
     ctx.closePath();
     ctx.fill();
   }

   // Untere Kammer füllen
   if (lowerHeight > 0) {
     ctx.fillStyle = '#f2c94c';
     ctx.beginPath();
     const bottomY = canvas.height - 20;
     const baseY2 = (canvas.height/2 + 20);
     const currentY2 = baseY2 + lowerHeight;
     const interpolation2 = (currentY2 - baseY2) / (bottomY - baseY2);
     const leftX2 = 20 + (canvas.width/2 - 20 - 20) * interpolation2;
     const rightX2 = canvas.width - 20 - (canvas.width/2 - 20 - 20) * interpolation2;

     ctx.moveTo(canvas.width/2 - 20, baseY2);
     ctx.lineTo(canvas.width/2 + 20, baseY2);
     ctx.lineTo(rightX2, currentY2);
     ctx.lineTo(leftX2, currentY2);
     ctx.closePath();
     ctx.fill();
   }
 }

 class Particle {
   constructor() {
     this.reset();
   }
   reset() {
     this.x = canvas.width/2 + (Math.random() * 20 - 10);
     this.y = canvas.height/2 - 20;
     this.size = Math.random() * 3 + 2;
     this.vy = Math.random() * 2 + 1;
     this.alpha = 1;
   }
   update() {
     this.y += this.vy;
     if (this.y > canvas.height/2 + 20) {
       this.alpha -= 0.05;
     }
     if (this.alpha <= 0) {
       this.reset();
     }
   }
   draw() {
     ctx.fillStyle = 'rgba(242,201,76,' + this.alpha + ')';
     ctx.beginPath();
     ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
     ctx.fill();
   }
 }

 function initParticles(count) {
   for (let i = 0; i < count; i++) {
     animationParticles.push(new Particle());
   }
 }

 function animateSand() {
   drawHourglassFrame();
   drawSandLevels();
   animationParticles.forEach(p => {
     p.update();
     p.draw();
   });
   requestAnimationFrame(animateSand);
 }

 async function init() {
   await fetchCirculatingSupply();
   initParticles(50);
   animateSand();
   setInterval(async () => {
     await fetchCirculatingSupply();
   }, 5 * 60 * 1000);
 }

 init();

})(); </script>