Spaces:

JairoDanielMT
/

4monedas

Running

App Files Files Community

JairoDanielMT commited on 17 days ago

Commit

161780e

verified ·

1 Parent(s): ddcd034

Update index.html

Browse files

Files changed (1) hide show

index.html +120 -87

index.html CHANGED Viewed

@@ -7,38 +7,55 @@
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <style>
     body { font-family: Inter, system-ui, Arial; margin: 18px; background:#f7f8fb; color:#111; }
-    header { display:flex; gap:12px; align-items:center; margin-bottom:12px; }
     .card { background:white; border-radius:8px; padding:12px; box-shadow:0 6px 18px rgba(20,20,40,0.06); }
-    #controls { display:flex; gap:12px; align-items:center; margin-bottom:12px; }
     .small { font-size:0.9rem; color:#555; }
-    #grid { display:grid; grid-template-columns: 1fr 300px; gap:12px; }
-    #chartCard { min-height:360px; }
     input[type="number"]{ width:120px; padding:6px; border-radius:6px; border:1px solid #ddd; }
     button { padding:8px 10px; border-radius:6px; border:none; background:#2563eb; color:white; cursor:pointer; }
     button.secondary { background:#e5e7eb; color:#111; }
     .asset-toggle { display:flex; gap:6px; flex-wrap:wrap; }
     .asset-toggle label { display:flex; gap:6px; align-items:center; font-size:0.9rem; }
   </style>
 </head>
 <body>
   <header>
-    <h2>Crypto 7d — XRP, PAXG, WLD, USDC</h2>
-    <div class="small">Fuente de precios: CoinGecko · Est. rendement Morpho para USDC (ejemplo).</div>
   </header>
   <div id="grid">
     <div class="card" id="chartCard">
       <canvas id="priceChart"></canvas>
     </div>
     <div class="card">
-      <h3>Earn Morpho — Estimador (USDC)</h3>
-      <div class="small" style="margin-bottom:8px;">Tasa usada (30d APY de referencia): <span id="morphoRateDisplay">4.00%</span></div>
       <label>Monto en USDC:
         <input id="amount" type="number" min="0" step="0.01" value="1000">
       </label>
-      <div style="margin-top:8px; display:flex; gap:8px;">
         <button id="calcBtn">Calcular (7 días)</button>
         <button id="setRateBtn" class="secondary">Usar otra tasa</button>
       </div>
@@ -50,33 +67,31 @@
       </div>
       <hr style="margin:12px 0;" />
-      <h4>Visibilidad activos</h4>
-      <div class="asset-toggle" id="toggles">
-        <!-- toggles inserted dynamically -->
-      </div>
       <div style="margin-top:12px;" class="small">
-        Nota: CoinGecko API pública se usa para datos históricos. Ajusta la tasa Morpho según la plataforma o fuente que prefieras. Fuentes: CoinGecko y pools/agg. de rendimiento (ejemplo). :contentReference[oaicite:2]{index=2}
       </div>
     </div>
   </div>
 <script>
 const assets = [
-  { id: 'xrp', label: 'XRP' },
-  { id: 'pax-gold', label: 'PAXG' },
-  { id: 'worldcoin', label: 'WLD' },
-  { id: 'usd-coin', label: 'USDC' }
 ];
-// CoinGecko market_chart endpoint: /coins/{id}/market_chart?vs_currency=usd&days=7
 async function fetchPriceSeries(assetId) {
   const url = `https://api.coingecko.com/api/v3/coins/${assetId}/market_chart?vs_currency=usd&days=7&interval=daily`;
   const res = await fetch(url);
-  if(!res.ok) throw new Error('Error fetching ' + assetId + ' -> ' + res.status);
   const j = await res.json();
-  // j.prices -> [ [timestamp, price], ... ]
-  return j.prices.map(p => ({ t: p[0], price: p[1] }));
 }
 function tsToLabel(ts) {
@@ -89,93 +104,111 @@ function colorFor(label) {
   return map[label] || '#888';
 }
-(async function init(){
-  try {
-    // fetch all series in parallel
-    const promises = assets.map(a => fetchPriceSeries(a.id));
-    const all = await Promise.all(promises);
-    // build common labels from first series timestamps
-    const labels = all[0].map(p => tsToLabel(p.t));
-    const datasets = assets.map((a, i) => ({
-      label: a.label,
-      data: all[i].map(pt => Number(pt.price.toFixed(6))),
-      borderColor: colorFor(a.label),
-      backgroundColor: colorFor(a.label),
-      tension: 0.2,
-      fill: false,
-      pointRadius: 3
-    }));
-    // create toggles
-    const togglesDiv = document.getElementById('toggles');
-    datasets.forEach((ds, i) => {
-      const id = 'chk_' + i;
-      const wrapper = document.createElement('label');
-      wrapper.innerHTML = `<input type="checkbox" id="${id}" checked data-idx="${i}"> <span style="width:64px;display:inline-block">${ds.label}</span>`;
-      togglesDiv.appendChild(wrapper);
-      wrapper.querySelector('input').addEventListener('change', e=>{
-        const idx = Number(e.target.dataset.idx);
-        myChart.data.datasets[idx].hidden = !e.target.checked;
-        myChart.update();
-      });
-    });
-    // Chart.js
-    const ctx = document.getElementById('priceChart').getContext('2d');
-    window.myChart = new Chart(ctx, {
-      type: 'line',
-      data: { labels, datasets },
-      options: {
-        responsive:true,
-        interaction: { mode: 'index', intersect: false },
-        plugins: { legend: { display: true } },
-        scales: {
-          y: { ticks: { callback: function(v){ return v; } } }
-        }
-      }
-    });
-  } catch (err) {
-    console.error(err);
-    document.getElementById('chartCard').innerHTML = '<div class="card"><strong>Error cargando datos:</strong> ' + err.message + '</div>';
   }
-})();
 // --- Morpho estimator ---
-let morphoAPY = 0.04; // referencia 4% (30d APY ejemplo). Cámbiala si tienes otro valor.
-document.getElementById('morphoRateDisplay').innerText = (morphoAPY*100).toFixed(2) + '%';
 function estimateCompound(amount, apy, days) {
-  // interest compounded daily approximation
   const daily = apy / 365;
   const total = amount * Math.pow(1 + daily, days);
   return { total, gain: total - amount };
 }
-document.getElementById('calcBtn').addEventListener('click', ()=>{
   const amt = parseFloat(document.getElementById('amount').value) || 0;
   const res = estimateCompound(amt, morphoAPY, 7);
   document.getElementById('gain7').innerText = res.gain.toFixed(6) + ' USDC';
   document.getElementById('total7').innerText = res.total.toFixed(6) + ' USDC';
 });
-// quick set rate button => prompt for new %
-document.getElementById('setRateBtn').addEventListener('click', ()=>{
-  const v = prompt('Nueva tasa APY (%) — ejemplo 4 para 4%:', (morphoAPY*100).toString());
-  if(v !== null) {
-    const n = parseFloat(v)/100;
-    if(!isNaN(n) && n >= 0) {
-      morphoAPY = n;
-      document.getElementById('morphoRateDisplay').innerText = (morphoAPY*100).toFixed(2) + '%';
-      document.getElementById('calcBtn').click();
-    } else alert('Valor inválido');
   }
 });
-// run initial calc
 document.getElementById('calcBtn').click();
 </script>
 </body>

   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <style>
     body { font-family: Inter, system-ui, Arial; margin: 18px; background:#f7f8fb; color:#111; }
+    header { display:flex; gap:12px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
     .card { background:white; border-radius:8px; padding:12px; box-shadow:0 6px 18px rgba(20,20,40,0.06); }
     .small { font-size:0.9rem; color:#555; }
+    #grid { display:grid; grid-template-columns: 1fr 300px; gap:12px; align-items:start; }
+    #chartCard { min-height:360px; position:relative; }
+    .banner {
+      display:none;
+      margin-bottom:10px;
+      padding:10px 12px;
+      background:#fff7ed;
+      border:1px solid #fed7aa;
+      color:#9a3412;
+      border-radius:8px;
+      font-size:0.95rem;
+    }
     input[type="number"]{ width:120px; padding:6px; border-radius:6px; border:1px solid #ddd; }
     button { padding:8px 10px; border-radius:6px; border:none; background:#2563eb; color:white; cursor:pointer; }
     button.secondary { background:#e5e7eb; color:#111; }
     .asset-toggle { display:flex; gap:6px; flex-wrap:wrap; }
     .asset-toggle label { display:flex; gap:6px; align-items:center; font-size:0.9rem; }
+    .muted { color:#6b7280; font-size:0.85rem; }
+    @media (max-width: 900px){
+      #grid { grid-template-columns: 1fr; }
+    }
   </style>
 </head>
 <body>
   <header>
+    <h2 style="margin:0;">Crypto 7d — XRP, PAXG, WLD, USDC</h2>
+    <div class="small">Fuente de precios: CoinGecko · Est. rendimiento Morpho para USDC (ejemplo).</div>
   </header>
   <div id="grid">
     <div class="card" id="chartCard">
+      <div id="errorBox" class="banner"></div>
       <canvas id="priceChart"></canvas>
+      <div class="muted" style="margin-top:8px;">Tip: puedes ocultar/mostrar activos a la derecha.</div>
     </div>
     <div class="card">
+      <h3 style="margin-top:0;">Earn Morpho — Estimador (USDC)</h3>
+      <div class="small" style="margin-bottom:8px;">
+        Tasa usada (30d APY de referencia): <span id="morphoRateDisplay">4.00%</span>
+      </div>
       <label>Monto en USDC:
         <input id="amount" type="number" min="0" step="0.01" value="1000">
       </label>
+      <div style="margin-top:8px; display:flex; gap:8px; flex-wrap:wrap;">
         <button id="calcBtn">Calcular (7 días)</button>
         <button id="setRateBtn" class="secondary">Usar otra tasa</button>
       </div>
       </div>
       <hr style="margin:12px 0;" />
+      <h4 style="margin:0 0 8px;">Visibilidad activos</h4>
+      <div class="asset-toggle" id="toggles"></div>
       <div style="margin-top:12px;" class="small">
+        Nota: CoinGecko API pública se usa para datos históricos. Ajusta la tasa Morpho según la plataforma o fuente que prefieras.
       </div>
     </div>
   </div>
 <script>
 const assets = [
+  // IDs correctos en CoinGecko:
+  { id: 'ripple',        label: 'XRP'  },
+  { id: 'pax-gold',      label: 'PAXG' },
+  { id: 'worldcoin-wld', label: 'WLD'  },
+  { id: 'usd-coin',      label: 'USDC' }
 ];
+// CoinGecko market_chart: /coins/{id}/market_chart?vs_currency=usd&days=7&interval=daily
 async function fetchPriceSeries(assetId) {
   const url = `https://api.coingecko.com/api/v3/coins/${assetId}/market_chart?vs_currency=usd&days=7&interval=daily`;
   const res = await fetch(url);
+  if (!res.ok) throw new Error(`${assetId} -> ${res.status}`);
   const j = await res.json();
+  return j.prices.map(p => ({ t: p[0], price: p[1] })); // [timestamp, price]
 }
 function tsToLabel(ts) {
   return map[label] || '#888';
 }
+function showError(msg) {
+  const box = document.getElementById('errorBox');
+  box.style.display = 'block';
+  box.textContent = msg;
+}
+(async function init(){
+  const results = await Promise.allSettled(assets.map(a => fetchPriceSeries(a.id)));
+  // Separa OK vs errores
+  const ok = [];
+  const fails = [];
+  results.forEach((r, i) => {
+    if (r.status === 'fulfilled') ok.push({ asset: assets[i], series: r.value });
+    else fails.push({ asset: assets[i], error: r.reason });
+  });
+  if (fails.length) {
+    showError(
+      'Algunos activos no cargaron: ' +
+      fails.map(f => `${f.asset.label} (${String(f.error.message || f.error)})`).join(' · ')
+    );
+  }
+  if (!ok.length) {
+    showError('No se pudo cargar ningún activo (revisa conectividad / límites de API).');
+    return;
   }
+  // Labels desde el primer activo exitoso
+  const labels = ok[0].series.map(p => tsToLabel(p.t));
+  const datasets = ok.map(({asset, series}) => ({
+    label: asset.label,
+    data: series.map(pt => Number(pt.price.toFixed(6))),
+    borderColor: colorFor(asset.label),
+    backgroundColor: colorFor(asset.label),
+    tension: 0.2,
+    fill: false,
+    pointRadius: 3
+  }));
+  // Chart.js
+  const ctx = document.getElementById('priceChart').getContext('2d');
+  window.myChart = new Chart(ctx, {
+    type: 'line',
+    data: { labels, datasets },
+    options: {
+      responsive: true,
+      interaction: { mode: 'index', intersect: false },
+      plugins: { legend: { display: true } },
+      scales: { y: { ticks: { callback: (v) => v } } }
+    }
+  });
+  // toggles (solo para los datasets realmente cargados)
+  const togglesDiv = document.getElementById('toggles');
+  togglesDiv.innerHTML = '';
+  datasets.forEach((ds, i) => {
+    const id = 'chk_' + i;
+    const wrapper = document.createElement('label');
+    wrapper.innerHTML = `
+      <input type="checkbox" id="${id}" checked data-idx="${i}">
+      <span style="width:64px;display:inline-block">${ds.label}</span>
+    `;
+    togglesDiv.appendChild(wrapper);
+    wrapper.querySelector('input').addEventListener('change', e => {
+      const idx = Number(e.target.dataset.idx);
+      myChart.data.datasets[idx].hidden = !e.target.checked;
+      myChart.update();
+    });
+  });
+})();
 // --- Morpho estimator ---
+let morphoAPY = 0.04; // ejemplo 4% APY
+document.getElementById('morphoRateDisplay').innerText = (morphoAPY * 100).toFixed(2) + '%';
 function estimateCompound(amount, apy, days) {
   const daily = apy / 365;
   const total = amount * Math.pow(1 + daily, days);
   return { total, gain: total - amount };
 }
+document.getElementById('calcBtn').addEventListener('click', () => {
   const amt = parseFloat(document.getElementById('amount').value) || 0;
   const res = estimateCompound(amt, morphoAPY, 7);
   document.getElementById('gain7').innerText = res.gain.toFixed(6) + ' USDC';
   document.getElementById('total7').innerText = res.total.toFixed(6) + ' USDC';
 });
+document.getElementById('setRateBtn').addEventListener('click', () => {
+  const v = prompt('Nueva tasa APY (%) — ejemplo 4 para 4%:', (morphoAPY * 100).toString());
+  if (v === null) return;
+  const n = parseFloat(v) / 100;
+  if (!isNaN(n) && n >= 0) {
+    morphoAPY = n;
+    document.getElementById('morphoRateDisplay').innerText = (morphoAPY * 100).toFixed(2) + '%';
+    document.getElementById('calcBtn').click();
+  } else {
+    alert('Valor inválido');
   }
 });
+// initial calc
 document.getElementById('calcBtn').click();
 </script>
 </body>