AutonomIA_2.0 / index.html
Lukeetah's picture
Update index.html
bfcdf19 verified
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SoberanIA Argentina - Fintech Cooperativa Revolucionaria</title>
<meta name="description" content="La primera plataforma fintech cooperativa de Argentina. 0% comisiones, redistribución automática a jubilados, soberanía monetaria digital con PESO-D.">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Header -->
<header class="header">
<div class="container">
<div class="header__content">
<div class="header__logo">
<i class="fas fa-hand-holding-heart"></i>
<h1>SoberanIA Argentina</h1>
<span class="header__tagline">Fintech Cooperativa</span>
</div>
<nav class="nav" id="nav-menu">
<ul class="nav__list">
<li><a href="#" class="nav__link active" data-section="dashboard">
<i class="fas fa-tachometer-alt"></i> Dashboard
</a></li>
<li><a href="#" class="nav__link" data-section="marketplace">
<i class="fas fa-store"></i> Marketplace 0%
</a></li>
<li><a href="#" class="nav__link" data-section="fintech">
<i class="fas fa-wallet"></i> Fintech Soberana
</a></li>
<li><a href="#" class="nav__link" data-section="sorteos">
<i class="fas fa-gift"></i> Sorteos
</a></li>
<li><a href="#" class="nav__link" data-section="impacto">
<i class="fas fa-heart"></i> Impacto Social
</a></li>
</ul>
</nav>
<div class="header__actions">
<button id="login-btn" class="btn btn--outline btn--sm">
<i class="fas fa-sign-in-alt"></i> Ingresar
</button>
<button id="register-btn" class="btn btn--primary btn--sm">
<i class="fas fa-user-plus"></i> Registro GRATIS
</button>
</div>
<button class="nav-toggle" id="nav-toggle">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</header>
<!-- Main Content -->
<main class="main">
<!-- Dashboard Section -->
<section id="dashboard" class="section active">
<!-- Hero Section -->
<div class="hero">
<div class="container">
<div class="hero__content">
<div class="hero__text">
<h2 class="hero__title">
La Revolución Fintech que
<span class="highlight">Argentina Necesita</span>
</h2>
<p class="hero__description">
Única plataforma cooperativa con 0% comisiones, redistribución automática a jubilados
y soberanía monetaria digital. ¡Compite con MercadoLibre desde el cooperativismo!
</p>
<div class="hero__actions">
<button id="hero-register" class="btn btn--primary btn--lg">
<i class="fas fa-rocket"></i> Únete a la Revolución
</button>
<div class="hero__benefit">
<i class="fas fa-gift"></i>
<span>¡Bono $1,000 PESO-D de bienvenida!</span>
</div>
</div>
</div>
<div class="hero__stats">
<div class="stat-card">
<div class="stat-card__icon">
<i class="fas fa-users"></i>
</div>
<div class="stat-card__content">
<div class="stat-card__number counter" data-target="1247500">0</div>
<div class="stat-card__label">Usuarios Activos</div>
<div class="stat-card__trend">
<i class="fas fa-arrow-up"></i> +18% esta semana
</div>
</div>
</div>
<div class="stat-card">
<div class="stat-card__icon">
<i class="fas fa-heart"></i>
</div>
<div class="stat-card__content">
<div class="stat-card__number">$<span class="counter" data-target="45320">0</span>M</div>
<div class="stat-card__label">Redistribuido a Jubilados</div>
<div class="stat-card__trend">
<i class="fas fa-arrow-up"></i> +25% vs MercadoLibre
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Live Metrics -->
<div class="metrics">
<div class="container">
<div class="metrics__grid">
<div class="metric-item">
<div class="metric-item__icon">
<i class="fas fa-coins"></i>
</div>
<div class="metric-item__content">
<div class="metric-item__number">$<span class="counter" data-target="32654">0</span>M</div>
<div class="metric-item__label">PESO-D en Circulación</div>
<div class="metric-item__badge">Respaldado 1:1 BCRA</div>
</div>
</div>
<div class="metric-item">
<div class="metric-item__icon">
<i class="fas fa-clock"></i>
</div>
<div class="metric-item__content">
<div class="metric-item__number" id="sorteo-countdown">2d 14h 25m</div>
<div class="metric-item__label">Próximo Sorteo</div>
<div class="metric-item__badge">Pool: $12.5M</div>
</div>
</div>
<div class="metric-item">
<div class="metric-item__icon">
<i class="fas fa-flag"></i>
</div>
<div class="metric-item__content">
<div class="metric-item__number"><span class="counter" data-target="45">0</span>%</div>
<div class="metric-item__label">Soberanía Económica</div>
<div class="metric-item__badge">vs 0% MercadoLibre</div>
</div>
</div>
<div class="metric-item">
<div class="metric-item__icon">
<i class="fas fa-store"></i>
</div>
<div class="metric-item__content">
<div class="metric-item__number"><span class="counter" data-target="28750">0</span></div>
<div class="metric-item__label">Comercios Adheridos</div>
<div class="metric-item__badge">0% Comisión</div>
</div>
</div>
</div>
</div>
</div>
<!-- Charts Section -->
<div class="charts-section">
<div class="container">
<div class="charts-grid">
<div class="chart-container">
<h3>Crecimiento Explosivo de Usuarios</h3>
<div class="chart-wrapper">
<canvas id="growthChart"></canvas>
</div>
</div>
<div class="chart-container">
<h3>Redistribución Revolucionaria</h3>
<div class="chart-wrapper">
<canvas id="redistributionChart"></canvas>
</div>
</div>
</div>
</div>
</div>
<!-- News & Winners -->
<div class="news-section">
<div class="container">
<div class="news-grid">
<div class="news-column">
<h3><i class="fas fa-newspaper"></i> Últimas Noticias</h3>
<div id="news-container"></div>
</div>
<div class="winners-column">
<h3><i class="fas fa-trophy"></i> Últimos Ganadores</h3>
<div class="winners-table">
<table>
<thead>
<tr>
<th>Fecha</th>
<th>Ganador</th>
<th>Categoría</th>
<th>Premio</th>
</tr>
</thead>
<tbody id="winners-tbody"></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Marketplace Section -->
<section id="marketplace" class="section">
<div class="container">
<div class="marketplace-header">
<h2>Marketplace Cooperativo - 0% Comisiones</h2>
<p>Productos directos de cooperativas argentinas. Ahorra hasta 40% vs MercadoLibre</p>
<div class="marketplace-controls">
<div class="search-container">
<input type="text" id="product-search" placeholder="Buscar productos..." class="form-control">
<i class="fas fa-search"></i>
</div>
<div class="filter-buttons">
<button class="filter-btn active" data-category="all">Todos</button>
<button class="filter-btn" data-category="tecnologia">Tecnología</button>
<button class="filter-btn" data-category="hogar">Hogar</button>
<button class="filter-btn" data-category="deportes">Deportes</button>
</div>
<button id="sell-product-btn" class="btn btn--primary">
<i class="fas fa-plus"></i> Vender Producto
</button>
</div>
</div>
<div class="comparison-banner">
<div class="comparison-item">
<span class="label">MercadoLibre:</span>
<span class="value negative">12% comisión + costos ocultos</span>
</div>
<div class="comparison-item">
<span class="label">SoberanIA:</span>
<span class="value positive">0% comisión + redistribución social</span>
</div>
</div>
<div class="products-grid" id="products-container"></div>
</div>
</section>
<!-- Fintech Section -->
<section id="fintech" class="section">
<div class="container">
<div class="fintech-header">
<h2>Fintech Soberana - PESO-D</h2>
<p>Tu wallet digital con soberanía monetaria. Transferencias gratuitas e inversiones transparentes.</p>
</div>
<div class="wallet-overview">
<div class="wallet-card">
<div class="wallet-card__header">
<h3>Mi Wallet PESO-D</h3>
<div class="wallet-card__status">
<span class="status status--success">Activa</span>
</div>
</div>
<div class="wallet-card__balance">
<div class="balance-label">Saldo Disponible</div>
<div class="balance-amount">$25,450.00</div>
<div class="balance-usd">≈ USD $28.27</div>
</div>
<div class="wallet-card__actions">
<button id="send-money-btn" class="btn btn--primary">
<i class="fas fa-paper-plane"></i> Enviar
</button>
<button id="receive-money-btn" class="btn btn--secondary">
<i class="fas fa-qrcode"></i> Recibir
</button>
<button id="history-btn" class="btn btn--outline">
<i class="fas fa-history"></i> Historial
</button>
</div>
</div>
</div>
<div class="fintech-services">
<div class="service-section">
<h3><i class="fas fa-chart-line"></i> Inversiones Soberanas</h3>
<div class="investment-options">
<div class="investment-option">
<h4>Bonos Argentinos</h4>
<div class="investment-rate">15% anual</div>
<input type="number" class="investment-input form-control" data-rate="1.15" placeholder="Monto a invertir">
<div class="investment-result">Retorno anual: $<span>0</span></div>
</div>
<div class="investment-option">
<h4>PESO-D Staking</h4>
<div class="investment-rate">8% anual</div>
<input type="number" class="investment-input form-control" data-rate="1.08" placeholder="Monto a stakear">
<div class="investment-result">Retorno anual: $<span>0</span></div>
</div>
</div>
</div>
<div class="service-section">
<h3><i class="fas fa-handshake"></i> Créditos P2P Sin Bancos</h3>
<div class="credit-options">
<div class="credit-option">
<h4>Crédito Personal</h4>
<div class="credit-rate">3% mensual</div>
<input type="number" class="credit-input form-control" data-rate="0.03" placeholder="Monto del crédito">
<select class="credit-term form-control">
<option value="6">6 meses</option>
<option value="12">12 meses</option>
<option value="18">18 meses</option>
</select>
<div class="credit-result">Cuota mensual: $<span>0</span></div>
</div>
<div class="credit-option">
<h4>Microcrédito Cooperativo</h4>
<div class="credit-rate">2% mensual</div>
<input type="number" class="credit-input form-control" data-rate="0.02" placeholder="Monto del microcrédito">
<select class="credit-term form-control">
<option value="3">3 meses</option>
<option value="6">6 meses</option>
</select>
<div class="credit-result">Cuota mensual: $<span>0</span></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Sorteos Section -->
<section id="sorteos" class="section">
<div class="container">
<div class="sorteos-header">
<h2>Sistema de Sorteos Revolucionario</h2>
<p>Redistribución automática y transparente. 70% prioridad para jubilados.</p>
</div>
<div class="sorteo-main">
<div class="sorteo-countdown">
<h3>Próximo Sorteo</h3>
<div class="countdown">
<div class="countdown-item">
<span id="days">2</span>
<label>Días</label>
</div>
<div class="countdown-item">
<span id="hours">14</span>
<label>Horas</label>
</div>
<div class="countdown-item">
<span id="minutes">25</span>
<label>Minutos</label>
</div>
<div class="countdown-item">
<span id="seconds">30</span>
<label>Segundos</label>
</div>
</div>
<div class="sorteo-info">
<div class="sorteo-pool">Pool Actual: <strong>$12,500,000</strong></div>
<div class="sorteo-schedule">Todos los domingos 20:00hs</div>
</div>
</div>
<div class="sorteo-distribution">
<h3>Distribución de Premios</h3>
<div class="distribution-chart">
<canvas id="sorteoDistributionChart"></canvas>
</div>
<div class="distribution-details">
<div class="distribution-item">
<span class="percentage">70%</span>
<span class="category">Jubilados</span>
<span class="amount">$8,750,000</span>
</div>
<div class="distribution-item">
<span class="percentage">20%</span>
<span class="category">Sectores Vulnerables</span>
<span class="amount">$2,500,000</span>
</div>
<div class="distribution-item">
<span class="percentage">10%</span>
<span class="category">Pool General</span>
<span class="amount">$1,250,000</span>
</div>
</div>
</div>
</div>
<div class="sorteo-transparency">
<h3>Transparencia Total</h3>
<div class="transparency-grid">
<div class="transparency-card">
<i class="fas fa-code"></i>
<h4>Smart Contract Auditable</h4>
<p>Algoritmo verificable públicamente</p>
</div>
<div class="transparency-card">
<i class="fas fa-balance-scale"></i>
<h4>BCRA Supervisado</h4>
<p>Cumplimiento Comunicación A 7769</p>
</div>
<div class="transparency-card">
<i class="fas fa-shield-alt"></i>
<h4>Fondos Garantizados</h4>
<p>Respaldo 1:1 en reservas oficiales</p>
</div>
</div>
</div>
</div>
</section>
<!-- Impacto Social Section -->
<section id="impacto" class="section">
<div class="container">
<div class="impacto-header">
<h2>Impacto Social Transformador</h2>
<p>Midiendo el cambio real en la vida de los argentinos. Datos verificables y transparentes.</p>
</div>
<div class="impact-metrics">
<div class="impact-card">
<div class="impact-card__icon">
<i class="fas fa-users"></i>
</div>
<div class="impact-card__content">
<div class="impact-card__number">872,500</div>
<div class="impact-card__label">Jubilados Beneficiados</div>
<div class="impact-card__description">De 18M total en Argentina</div>
</div>
</div>
<div class="impact-card">
<div class="impact-card__icon">
<i class="fas fa-home"></i>
</div>
<div class="impact-card__content">
<div class="impact-card__number">315,000</div>
<div class="impact-card__label">Familias Incluidas Financieramente</div>
<div class="impact-card__description">Primera cuenta bancaria digital</div>
</div>
</div>
<div class="impact-card">
<div class="impact-card__icon">
<i class="fas fa-chart-line"></i>
</div>
<div class="impact-card__content">
<div class="impact-card__number">$45.3B</div>
<div class="impact-card__label">Redistribuido Total</div>
<div class="impact-card__description">Directamente a sectores vulnerables</div>
</div>
</div>
</div>
<div class="geographic-impact">
<h3>Impacto por Provincia</h3>
<div class="provincial-grid" id="provincial-stats"></div>
</div>
<div class="testimonials-section">
<h3>Testimonios Reales</h3>
<div class="testimonials-carousel" id="testimonials-carousel"></div>
</div>
<div class="sovereignty-meter">
<h3>Medidor de Soberanía Económica</h3>
<div class="sovereignty-progress">
<div class="sovereignty-bar">
<div class="sovereignty-fill" style="width: 45%">45%</div>
</div>
<div class="sovereignty-labels">
<span>Dependencia Total</span>
<span>Soberanía Digital</span>
</div>
</div>
<div class="sovereignty-comparison">
<div class="comparison-item">
<span class="label">Argentina Tradicional:</span>
<span class="value">0% soberanía económica</span>
</div>
<div class="comparison-item">
<span class="label">Con SoberanIA:</span>
<span class="value highlight">45% y creciendo</span>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Modals -->
<!-- Register Modal -->
<div id="register-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>Únete a la Revolución Fintech</h3>
<button class="modal-close" data-modal="register-modal">
<i class="fas fa-times"></i>
</button>
</div>
<form id="register-form" class="modal-body">
<div class="form-group">
<label class="form-label">Nombre de Usuario</label>
<input type="text" name="username" class="form-control" required>
</div>
<div class="form-group">
<label class="form-label">Email</label>
<input type="email" name="email" class="form-control" required>
</div>
<div class="form-group">
<label class="form-label">DNI (8 dígitos)</label>
<input type="text" name="dni" class="form-control" pattern="[0-9]{8}" required>
</div>
<div class="form-group">
<label class="form-label">Categoría</label>
<select name="category" class="form-control" required>
<option value="">Seleccionar...</option>
<option value="jubilado">Jubilado/Pensionado</option>
<option value="vulnerable">Sector Vulnerable</option>
<option value="general">Población General</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Contraseña</label>
<input type="password" name="password" class="form-control" required>
</div>
<div class="form-group">
<label class="form-label">Confirmar Contraseña</label>
<input type="password" name="confirm-password" class="form-control" required>
</div>
<button type="submit" class="btn btn--primary btn--full-width">
<i class="fas fa-user-plus"></i> Registrarse Gratis
</button>
</form>
</div>
</div>
<!-- Login Modal -->
<div id="login-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>Iniciar Sesión</h3>
<button class="modal-close" data-modal="login-modal">
<i class="fas fa-times"></i>
</button>
</div>
<form id="login-form" class="modal-body">
<div class="form-group">
<label class="form-label">Email o Usuario</label>
<input type="text" name="username" class="form-control" required>
</div>
<div class="form-group">
<label class="form-label">Contraseña</label>
<input type="password" name="password" class="form-control" required>
</div>
<button type="submit" class="btn btn--primary btn--full-width">
<i class="fas fa-sign-in-alt"></i> Ingresar
</button>
</form>
</div>
</div>
<!-- Send Money Modal -->
<div id="send-money-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>Enviar PESO-D</h3>
<button class="modal-close" data-modal="send-money-modal">
<i class="fas fa-times"></i>
</button>
</div>
<form id="send-money-form" class="modal-body">
<div class="form-group">
<label class="form-label">Destinatario (email o DNI)</label>
<input type="text" name="recipient" class="form-control" required>
</div>
<div class="form-group">
<label class="form-label">Monto</label>
<input type="number" name="amount" class="form-control" min="1" required>
</div>
<div class="form-group">
<label class="form-label">Concepto (opcional)</label>
<input type="text" name="concept" class="form-control">
</div>
<button type="submit" class="btn btn--primary btn--full-width">
<i class="fas fa-paper-plane"></i> Enviar
</button>
</form>
</div>
</div>
<!-- Sell Product Modal -->
<div id="sell-product-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>Publicar Producto</h3>
<button class="modal-close" data-modal="sell-product-modal">
<i class="fas fa-times"></i>
</button>
</div>
<form id="sell-product-form" class="modal-body">
<div class="form-group">
<label class="form-label">Título del Producto</label>
<input type="text" name="title" class="form-control" required>
</div>
<div class="form-group">
<label class="form-label">Precio (PESO-D)</label>
<input type="number" name="price" class="form-control" min="1" required>
</div>
<div class="form-group">
<label class="form-label">Categoría</label>
<select name="category" class="form-control" required>
<option value="">Seleccionar...</option>
<option value="tecnologia">Tecnología</option>
<option value="hogar">Hogar</option>
<option value="deportes">Deportes</option>
<option value="ropa">Ropa</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Descripción</label>
<textarea name="description" class="form-control" rows="3" required></textarea>
</div>
<button type="submit" class="btn btn--primary btn--full-width">
<i class="fas fa-plus"></i> Publicar (0% comisión)
</button>
</form>
</div>
</div>
<!-- Shopping Cart Sidebar -->
<div id="cart-sidebar" class="cart-sidebar">
<div class="cart-header">
<h3><i class="fas fa-shopping-cart"></i> Mi Carrito</h3>
<button id="cart-close" class="btn btn--outline btn--sm">
<i class="fas fa-times"></i>
</button>
</div>
<div class="cart-body">
<div id="cart-items"></div>
</div>
<div class="cart-footer">
<div class="cart-total">
Total: $<span id="cart-total">0</span>
</div>
<button id="checkout-btn" class="btn btn--primary btn--full-width">
<i class="fas fa-credit-card"></i> Pagar con PESO-D
</button>
</div>
</div>
<!-- Toast Container -->
<div id="toast-container" class="toast-container"></div>
<!-- JavaScript -->
<script src="app.js"></script>
</body>
</html>