miércoles, 18 de febrero de 2026

Proyecto Ozono

 <!DOCTYPE html>

<html lang="es">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Selección de Proyecto Abierto</title>

    <style>

        body { font-family: sans-serif; padding: 20px; }

        .project-card { border: 1px solid #ccc; padding: 15px; max-width: 300px; border-radius: 5px; }

        .btn-open { 

            display: inline-block; 

            padding: 10px 15px; 

            background-color: #007bff; 

            color: white; 

            text-decoration: none; 

            border-radius: 3px; 

        }

        .btn-open:hover { background-color: #0056b3; }

    </style>

</head>

<body>


    <article class="project-card">

        <h3>Mi Proyecto Open Source</h3>

        <p>Haz clic abajo para ver el repositorio en una nueva pestaña.</p>

        

        <!-- ENLACE CON TARGET="_BLANK" -->

        <a href="https://ozonoextension.blogspot.com/" 

           target="_blank" 

           rel="noopener noreferrer" 

           class="btn-open">

            Ver Proyecto

        </a>

    </article>


</body>

</html>


martes, 17 de febrero de 2026

CONTRIBUCIONES CON COMISION DEL 3%

 Este es un ejemplo de código abierto (open source) en HTML, CSS y JavaScript para un formulario de cobro de contribuciones. Calcula automáticamente una comisión de red del 3% y el total a pagar, mostrando el desglose al usuario.

Este código es funcional en el lado del cliente (frontend) y puede integrarse con cualquier pasarela de pagos.
html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulario de Contribución - 3% Red</title>
    <style>
        body { font-family: Arial, sans-serif; background-color: #f4f4f9; padding: 20px; }
        .container { max-width: 400px; margin: auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        h2 { text-align: center; color: #333; }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; font-weight: bold; }
        input[type="number"], input[type="text"] { width: 100%; padding: 8px; box-sizing: border-box; }
        .summary { background: #eee; padding: 10px; border-radius: 4px; margin-top: 20px; }
        .summary p { margin: 5px 0; display: flex; justify-content: space-between; }
        button { width: 100%; padding: 10px; background-color: #28a745; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; }
        button:hover { background-color: #218838; }
        .fee-highlight { color: #d9534f; font-weight: bold; }
    </style>
</head>
<body>

<div class="container">
    <h2>Contribución</h2>
    <form id="contribucionForm">
        <div class="form-group">
            <label for="nombre">Nombre del Contribuyente</label>
            <input type="text" id="nombre" name="nombre" required placeholder="Juan Pérez">
        </div>
        
        <div class="form-group">
            <label for="monto">Monto de Contribución ($)</label>
            <input type="number" id="monto" name="monto" required min="1" step="0.01" placeholder="0.00" oninput="calcularTotal()">
        </div>

        <div class="summary">
            <p><span>Contribución:</span> <span id="resMonto">$0.00</span></p>
            <p><span>Impuesto Red (3%):</span> <span id="resComision" class="fee-highlight">+$0.00</span></p>
            <p><strong>Total a pagar:</strong> <strong id="resTotal">$0.00</strong></p>
        </div>

        <button type="submit" style="margin-top:20px;">Confirmar Pago</button>
    </form>
</div>

<script>
    function calcularTotal() {
        // 1. Obtener el monto ingresado
        let montoInput = document.getElementById('monto').value;
        let monto = parseFloat(montoInput) || 0;

        // 2. Calcular la comisión (3%)
        let comision = monto * 0.03;
        let total = monto + comision;

        // 3. Mostrar desglosado en la interfaz
        document.getElementById('resMonto').innerText = '$' + monto.toFixed(2);
        document.getElementById('resComision').innerText = '+$' + comision.toFixed(2);
        document.getElementById('resTotal').innerText = '$' + total.toFixed(2);
    }

    // Manejar el envío del formulario
    document.getElementById('contribucionForm').addEventListener('submit', function(e) {
        e.preventDefault();
        alert('Procesando pago de: ' + document.getElementById('resTotal').innerText);
        // Aquí se integraría la lógica para enviar los datos a un backend (ej. Stripe/PayPal)
    });
</script>

</body>
</html>
Características de este código:
  • Código Abierto: Puedes copiar, modificar y usar libremente.
  • Cálculo Dinámico: Usa JavaScript (oninput="calcularTotal()") para actualizar la comisión y el total en tiempo real mientras el usuario escribe.
  • Desglose de Comisión: Muestra claramente el 3% de impuesto de red.
  • Estructura HTML5: Formulario limpio y organizado.
  • Seguridad Básica: Campos obligatorios (required) y tipos de datos numéricos.
Nota: Para un entorno de producción, la comisión del 3% debe recalcularse en el servidor (backend) para evitar alteraciones en el navegador del cliente.

METAVERSO API

Este código utiliza fetch para simular la obtención de datos de una API y Chart.js para renderizar un gráfico de líneas técnico.
html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Miner Dash - Usuario 001</title>
    <!-- Importar Chart.js de un CDN para facilidad -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body { font-family: Arial, sans-serif; background-color: #121212; color: white; padding: 20px; }
        .container { max-width: 1000px; margin: auto; }
        .stats-panel { display: flex; gap: 20px; margin-bottom: 20px; }
        .stat-card { background: #1e1e1e; padding: 20px; border-radius: 8px; flex: 1; text-align: center; }
        .chart-container { background: #1e1e1e; padding: 20px; border-radius: 8px; }
        canvas { width: 100% !important; height: 400px !important; }
    </style>
</head>
<body>

<div class="container">
    <h1>Dashboard Técnico de Minería</h1>
    
    <div class="stats-panel">
        <div class="stat-card">
            <h3>Hashrate Actual</h3>
            <p id="hashrate">-- H/s</p>
        </div>
        <div class="stat-card">
            <h3>Acciones (Shares)</h3>
            <p id="shares">--</p>
        </div>
        <div class="stat-card">
            <h3>Balance Estimado</h3>
            <p id="balance">-- BTC</p>
        </div>
    </div>

    <div class="chart-container">
        <canvas id="miningChart"></canvas>
    </div>
</div>

<script>
    // 1. Configuración del Gráfico (Chart.js)
    const ctx = document.getElementById('miningChart').getContext('2d');
    const miningChart = new Chart(ctx, {
        type: 'line', // Gráfico técnico de líneas
        data: {
            labels: [], // Tiempo
            datasets: [{
                label: 'Hashrate (KH/s)',
                data: [],
                borderColor: '#00ff00',
                backgroundColor: 'rgba(0, 255, 0, 0.1)',
                fill: true,
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            scales: { y: { beginAtZero: true } }
        }
    });

    // 2. Simulación de llamada API (Reemplazar por fetch real)
    function fetchMiningData() {
        // En producción: fetch('https://api.mi-pool.com')
        console.log("Actualizando datos...");
        
        // Datos simulados
        const data = {
            hashrate: Math.floor(Math.random() * 1000 + 5000),
            shares: Math.floor(Math.random() * 100),
            balance: (Math.random() * 0.001).toFixed(6),
            time: new Date().toLocaleTimeString()
        };

        // Actualizar tarjetas estadísticas
        document.getElementById('hashrate').innerText = data.hashrate + " H/s";
        document.getElementById('shares').innerText = data.shares;
        document.getElementById('balance').innerText = data.balance + " BTC";

        // Actualizar gráfico
        if (miningChart.data.labels.length > 20) {
            miningChart.data.labels.shift();
            miningChart.data.datasets[0].data.shift();
        }
        miningChart.data.labels.push(data.time);
        miningChart.data.datasets[0].data.push(data.hashrate);
        miningChart.update();
    }

    // Actualizar datos cada 5 segundos
    setInterval(fetchMiningData, 5000);
    fetchMiningData(); // Llamada inicial
</script>

</body>
</html>
Componentes Clave:
  1. HTML5 Canvas (<canvas id="miningChart">): Define el área de dibujo.
  2. Chart.js (CDN): Biblioteca open-source para visualización de datos.
  3. JavaScript (fetch y setInterval): Obtiene los datos de la API cada pocos segundos y actualiza el DOM sin recargar la página.
  4. Estilos CSS: Tema oscuro (dark mode) diseñado para monitoreo de datos técnicos.
Para Implementarlo:
  • API: Reemplaza la simulación en fetchMiningData con una llamada a la API de tu pool de minería (ej. fetch('URL_DE_LA_API')).
  • Adaptación: Chart.js permite cambiar type: 'line' a 'bar''pie', o gráficos avanzados para visualizar la estadística del usuario.

PREFERENCIAS

Acceso Web Agencia

Para crear un elemento en HTML que combine texto e imagen y funcione como una pestaña (tab) o enlace, la forma más estándar es utilizar un e...