Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AutoRevenue Generator - Generador de Ingresos Autom谩ticos</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header class="header"> | |
| <div class="container flex items-center justify-between"> | |
| <div class="flex items-center gap-16"> | |
| <div class="logo"> | |
| <i class="fas fa-coins"></i> | |
| <span>AutoRevenue</span> | |
| </div> | |
| <nav class="nav"> | |
| <a href="#dashboard" class="nav-link active" data-section="dashboard">Dashboard</a> | |
| <a href="#payment-links" class="nav-link" data-section="payment-links">Enlaces de Pago</a> | |
| <a href="#pdf-monetization" class="nav-link" data-section="pdf-monetization">PDFs</a> | |
| <a href="#form-builder" class="nav-link" data-section="form-builder">Formularios</a> | |
| <a href="#analytics" class="nav-link" data-section="analytics">Analytics</a> | |
| </nav> | |
| </div> | |
| <div class="profile"> | |
| <i class="fas fa-user-circle"></i> | |
| <span>Mi Cuenta</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="main"> | |
| <!-- Dashboard Section --> | |
| <section id="dashboard" class="section active"> | |
| <div class="container"> | |
| <!-- Hero Section --> | |
| <div class="hero"> | |
| <div class="hero-content"> | |
| <h1>隆Generando Ingresos Autom谩ticamente!</h1> | |
| <p>Tu plataforma est谩 trabajando 24/7 para crear ingresos pasivos</p> | |
| <div class="revenue-counter"> | |
| <span class="currency">$</span> | |
| <span id="total-revenue">1847.50</span> | |
| <div class="revenue-label">Total Generado</div> | |
| </div> | |
| </div> | |
| <div class="hero-visual"> | |
| <div class="floating-money"> | |
| <i class="fas fa-dollar-sign"></i> | |
| <i class="fas fa-coins"></i> | |
| <i class="fas fa-money-bill-wave"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Stats --> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <div class="stat-icon"> | |
| <i class="fas fa-link"></i> | |
| </div> | |
| <div class="stat-content"> | |
| <div class="stat-value">12</div> | |
| <div class="stat-label">Enlaces Activos</div> | |
| <div class="stat-change positive">+3 esta semana</div> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon"> | |
| <i class="fas fa-file-pdf"></i> | |
| </div> | |
| <div class="stat-content"> | |
| <div class="stat-value">8</div> | |
| <div class="stat-label">PDFs Vendidos</div> | |
| <div class="stat-change positive">+$420</div> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon"> | |
| <i class="fas fa-clipboard-list"></i> | |
| </div> | |
| <div class="stat-content"> | |
| <div class="stat-value">89</div> | |
| <div class="stat-label">Leads Generados</div> | |
| <div class="stat-change positive">+15 hoy</div> | |
| </div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-icon"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <div class="stat-content"> | |
| <div class="stat-value">$42.30</div> | |
| <div class="stat-label">Promedio Diario</div> | |
| <div class="stat-change positive">+12%</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Revenue Chart --> | |
| <div class="chart-section"> | |
| <div class="card"> | |
| <div class="card__header"> | |
| <h3>Ingresos de los 脷ltimos 7 D铆as</h3> | |
| </div> | |
| <div class="card__body"> | |
| <canvas id="revenueChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Transactions --> | |
| <div class="transactions-section"> | |
| <div class="card"> | |
| <div class="card__header"> | |
| <h3>Transacciones Recientes</h3> | |
| <div class="live-indicator"> | |
| <span class="pulse"></span> | |
| <span>En Vivo</span> | |
| </div> | |
| </div> | |
| <div class="card__body"> | |
| <div class="transactions-list" id="transactions-list"> | |
| <!-- Transactions will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="quick-actions"> | |
| <h3>Acciones R谩pidas</h3> | |
| <div class="actions-grid"> | |
| <button class="action-btn" data-section="payment-links"> | |
| <i class="fas fa-link"></i> | |
| <span>Crear Enlace de Pago</span> | |
| </button> | |
| <button class="action-btn" data-section="pdf-monetization"> | |
| <i class="fas fa-file-pdf"></i> | |
| <span>Monetizar PDF</span> | |
| </button> | |
| <button class="action-btn" data-section="form-builder"> | |
| <i class="fas fa-edit"></i> | |
| <span>Crear Formulario</span> | |
| </button> | |
| <button class="action-btn" data-section="analytics"> | |
| <i class="fas fa-chart-bar"></i> | |
| <span>Ver Analytics</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Payment Links Section --> | |
| <section id="payment-links" class="section"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2>Generador de Enlaces de Pago</h2> | |
| <p>Crea enlaces de pago instant谩neos y empieza a generar ingresos</p> | |
| </div> | |
| <div class="tools-grid"> | |
| <div class="tool-panel"> | |
| <div class="card"> | |
| <div class="card__header"> | |
| <h3>Crear Nuevo Enlace</h3> | |
| </div> | |
| <div class="card__body"> | |
| <form id="payment-link-form"> | |
| <div class="form-group"> | |
| <label class="form-label">Nombre del Producto</label> | |
| <input type="text" class="form-control" placeholder="Ej: Curso de Marketing"> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label">Precio (USD)</label> | |
| <input type="number" class="form-control" placeholder="25.00"> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label">Descripci贸n</label> | |
| <textarea class="form-control" rows="3" placeholder="Describe tu producto..."></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label">Email de Notificaci贸n</label> | |
| <input type="email" class="form-control" placeholder="tu@email.com"> | |
| </div> | |
| <button type="submit" class="btn btn--primary btn--full-width"> | |
| <i class="fas fa-magic"></i> | |
| Generar Enlace | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tool-panel"> | |
| <div class="card"> | |
| <div class="card__header"> | |
| <h3>Enlace Generado</h3> | |
| </div> | |
| <div class="card__body"> | |
| <div id="generated-link" class="generated-content" style="display: none;"> | |
| <div class="link-preview"> | |
| <input type="text" class="form-control" id="payment-url" readonly> | |
| <button class="btn btn--secondary" id="copy-link"> | |
| <i class="fas fa-copy"></i> | |
| Copiar | |
| </button> | |
| </div> | |
| <div class="qr-code"> | |
| <canvas id="qr-canvas"></canvas> | |
| </div> | |
| </div> | |
| <div id="link-placeholder" class="placeholder"> | |
| <i class="fas fa-link"></i> | |
| <p>Tu enlace de pago aparecer谩 aqu铆</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Active Links List --> | |
| <div class="active-links"> | |
| <div class="card"> | |
| <div class="card__header"> | |
| <h3>Enlaces Activos</h3> | |
| </div> | |
| <div class="card__body"> | |
| <div class="links-table" id="links-table"> | |
| <!-- Will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- PDF Monetization Section --> | |
| <section id="pdf-monetization" class="section"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2>Monetizaci贸n de PDFs</h2> | |
| <p>Convierte tus PDFs en fuentes de ingresos autom谩ticos</p> | |
| </div> | |
| <div class="upload-zone"> | |
| <div class="card"> | |
| <div class="card__body"> | |
| <div class="dropzone" id="pdf-dropzone"> | |
| <i class="fas fa-cloud-upload-alt"></i> | |
| <h3>Arrastra tu PDF aqu铆</h3> | |
| <p>o haz clic para seleccionar archivo</p> | |
| <input type="file" id="pdf-input" accept=".pdf" style="display: none;"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pdf-config" id="pdf-config" style="display: none;"> | |
| <div class="card"> | |
| <div class="card__header"> | |
| <h3>Configuraci贸n de Monetizaci贸n</h3> | |
| </div> | |
| <div class="card__body"> | |
| <div class="config-grid"> | |
| <div class="form-group"> | |
| <label class="form-label">T铆tulo del PDF</label> | |
| <input type="text" class="form-control" id="pdf-title"> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label">Precio</label> | |
| <input type="number" class="form-control" id="pdf-price" placeholder="10.00"> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label">Tipo de Acceso</label> | |
| <select class="form-control" id="pdf-access"> | |
| <option value="free">Gratuito (con email)</option> | |
| <option value="paid">Pago 煤nico</option> | |
| <option value="subscription">Suscripci贸n</option> | |
| </select> | |
| </div> | |
| </div> | |
| <button class="btn btn--primary" id="create-pdf-page"> | |
| <i class="fas fa-rocket"></i> | |
| Crear Landing Page | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- PDF Products List --> | |
| <div class="pdf-products"> | |
| <div class="card"> | |
| <div class="card__header"> | |
| <h3>PDFs Monetizados</h3> | |
| </div> | |
| <div class="card__body"> | |
| <div class="products-grid" id="pdf-products-grid"> | |
| <!-- Will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Form Builder Section --> | |
| <section id="form-builder" class="section"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2>Constructor de Formularios Inteligentes</h2> | |
| <p>Crea formularios que conviertan visitantes en ingresos</p> | |
| </div> | |
| <div class="form-templates"> | |
| <h3>Templates Disponibles</h3> | |
| <div class="templates-grid"> | |
| <div class="template-card" data-template="contact"> | |
| <i class="fas fa-envelope"></i> | |
| <h4>Formulario de Contacto</h4> | |
| <p>Captura leads b谩sicos</p> | |
| </div> | |
| <div class="template-card" data-template="consultation"> | |
| <i class="fas fa-calendar-alt"></i> | |
| <h4>Reserva de Consultor铆a</h4> | |
| <p>$50 por lead calificado</p> | |
| </div> | |
| <div class="template-card" data-template="newsletter"> | |
| <i class="fas fa-newspaper"></i> | |
| <h4>Newsletter Premium</h4> | |
| <p>Suscripci贸n mensual</p> | |
| </div> | |
| <div class="template-card" data-template="survey"> | |
| <i class="fas fa-poll"></i> | |
| <h4>Encuesta Pagada</h4> | |
| <p>Recompensa por participar</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-builder-tool" id="form-builder-tool" style="display: none;"> | |
| <div class="builder-grid"> | |
| <div class="form-elements"> | |
| <div class="card"> | |
| <div class="card__header"> | |
| <h3>Elementos</h3> | |
| </div> | |
| <div class="card__body"> | |
| <div class="elements-list"> | |
| <div class="element-item" data-type="text"> | |
| <i class="fas fa-font"></i> | |
| <span>Campo de Texto</span> | |
| </div> | |
| <div class="element-item" data-type="email"> | |
| <i class="fas fa-at"></i> | |
| <span>Email</span> | |
| </div> | |
| <div class="element-item" data-type="textarea"> | |
| <i class="fas fa-align-left"></i> | |
| <span>脕rea de Texto</span> | |
| </div> | |
| <div class="element-item" data-type="select"> | |
| <i class="fas fa-list"></i> | |
| <span>Lista Desplegable</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-preview"> | |
| <div class="card"> | |
| <div class="card__header"> | |
| <h3>Vista Previa</h3> | |
| </div> | |
| <div class="card__body"> | |
| <div id="form-preview-area"> | |
| <p>Selecciona un template para empezar</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-actions"> | |
| <button class="btn btn--primary" id="publish-form"> | |
| <i class="fas fa-globe"></i> | |
| Publicar Formulario | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Active Forms --> | |
| <div class="active-forms"> | |
| <div class="card"> | |
| <div class="card__header"> | |
| <h3>Formularios Activos</h3> | |
| </div> | |
| <div class="card__body"> | |
| <div class="forms-list" id="forms-list"> | |
| <!-- Will be populated by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Analytics Section --> | |
| <section id="analytics" class="section"> | |
| <div class="container"> | |
| <div class="section-header"> | |
| <h2>Analytics Avanzados</h2> | |
| <p>Analiza y optimiza tus fuentes de ingresos</p> | |
| </div> | |
| <div class="analytics-overview"> | |
| <div class="overview-cards"> | |
| <div class="overview-card"> | |
| <h4>Ingresos por Herramienta</h4> | |
| <canvas id="toolsChart"></canvas> | |
| </div> | |
| <div class="overview-card"> | |
| <h4>Proyecci贸n Mensual</h4> | |
| <div class="projection"> | |
| <div class="projection-value">$3,250</div> | |
| <div class="projection-growth">+24% vs mes anterior</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="detailed-analytics"> | |
| <div class="card"> | |
| <div class="card__header"> | |
| <h3>M茅tricas Detalladas</h3> | |
| </div> | |
| <div class="card__body"> | |
| <div class="metrics-grid"> | |
| <div class="metric"> | |
| <div class="metric-label">Tasa de Conversi贸n Global</div> | |
| <div class="metric-value">8.7%</div> | |
| <div class="metric-change positive">+1.2%</div> | |
| </div> | |
| <div class="metric"> | |
| <div class="metric-label">Valor Promedio por Cliente</div> | |
| <div class="metric-value">$28.45</div> | |
| <div class="metric-change positive">+5.8%</div> | |
| </div> | |
| <div class="metric"> | |
| <div class="metric-label">ROI de Marketing</div> | |
| <div class="metric-value">340%</div> | |
| <div class="metric-change positive">+15%</div> | |
| </div> | |
| <div class="metric"> | |
| <div class="metric-label">Tiempo Promedio de Conversi贸n</div> | |
| <div class="metric-value">2.3 d铆as</div> | |
| <div class="metric-change negative">-0.5 d铆as</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Floating Notifications --> | |
| <div id="notifications-container"></div> | |
| <!-- Success Sound --> | |
| <audio id="success-sound" preload="auto"> | |
| <source src="data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBjiR1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBjiR1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBjiR1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBjiR1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBjiR1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBjiR1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBjiR1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBjiR1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBjiR1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBjiR1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBjiR1/LNeSsFJHfH8N2QQAoUXrTp66hVFApGn+DyvmMcBjiR1/LNeSs=" type="audio/wav"> | |
| </audio> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> |