Autonom_IA / index.html
Lukeetah's picture
Upload 3 files
dee11d6 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 - Ecosistema Fintech Cooperativo</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header class="header">
<div class="container">
<div class="header__content">
<div class="header__logo">
<div class="logo">
<span class="logo__sun"></span>
<div class="logo__text">
<h1>SoberanIA Argentina</h1>
<span class="logo__tagline">Fintech Cooperativo</span>
</div>
<div class="flag-badge">🇦🇷</div>
</div>
</div>
<nav class="nav">
<button class="nav__item active" data-section="dashboard">Dashboard</button>
<button class="nav__item" data-section="marketplace">Marketplace</button>
<button class="nav__item" data-section="fintech">Fintech</button>
<button class="nav__item" data-section="sorteos">Sorteos</button>
<button class="nav__item" data-section="impacto">Impacto</button>
<button class="nav__item" data-section="cuenta" id="cuenta-nav">Mi Cuenta</button>
</nav>
<div class="header__actions">
<div class="user-info" id="user-info" style="display: none;">
<span class="user-welcome" id="user-welcome"></span>
<button class="btn btn--secondary" id="logout-btn">Salir</button>
</div>
<div class="auth-buttons" id="auth-buttons">
<button class="btn btn--outline" id="login-btn">Ingresar</button>
<button class="btn btn--primary" id="register-btn">Registrarse</button>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="main">
<div class="container">
<!-- Dashboard Section -->
<section class="section active" id="dashboard">
<div class="dashboard">
<div class="welcome-banner">
<h2>¡Bienvenido a la Revolución Fintech Cooperativa!</h2>
<p>Transformamos la economía argentina a través de la cooperación y la soberanía financiera</p>
</div>
<!-- Métricas Principales -->
<div class="metrics-grid">
<div class="metric-card">
<div class="metric-card__icon">👥</div>
<div class="metric-card__content">
<h3>Usuarios Registrados</h3>
<div class="metric-card__value" id="usuarios-counter">1.247.500</div>
<div class="metric-card__trend">+12% este mes</div>
</div>
</div>
<div class="metric-card">
<div class="metric-card__icon">💰</div>
<div class="metric-card__content">
<h3>Redistribuido a Jubilados</h3>
<div class="metric-card__value" id="redistribuido-counter">$45.320.780.000</div>
<div class="metric-card__trend">+8% esta semana</div>
</div>
</div>
<div class="metric-card">
<div class="metric-card__icon"></div>
<div class="metric-card__content">
<h3>Próximo Sorteo</h3>
<div class="metric-card__value" id="countdown">3 días 14 horas</div>
<div class="metric-card__trend">Pool: $2.500.000</div>
</div>
</div>
<div class="metric-card">
<div class="metric-card__icon">🪙</div>
<div class="metric-card__content">
<h3>PESO-D en Circulación</h3>
<div class="metric-card__value" id="pesod-counter">$32.654.892.300</div>
<div class="metric-card__trend">Moneda soberana</div>
</div>
</div>
</div>
<!-- Gráficos y Mapa -->
<div class="dashboard-charts">
<div class="chart-container">
<h3>Crecimiento de Usuarios</h3>
<canvas id="users-chart"></canvas>
</div>
<div class="chart-container">
<h3>Redistribución Económica</h3>
<canvas id="redistribution-chart"></canvas>
</div>
</div>
<!-- Mapa de Argentina -->
<div class="argentina-map">
<h3>Impacto por Provincias</h3>
<div class="provinces-list">
<div class="province-item">
<span class="province-name">Buenos Aires</span>
<div class="province-bar">
<div class="province-progress" style="width: 85%"></div>
</div>
<span class="province-count">420.000 beneficiarios</span>
</div>
<div class="province-item">
<span class="province-name">Córdoba</span>
<div class="province-bar">
<div class="province-progress" style="width: 65%"></div>
</div>
<span class="province-count">180.000 beneficiarios</span>
</div>
<div class="province-item">
<span class="province-name">Santa Fe</span>
<div class="province-bar">
<div class="province-progress" style="width: 60%"></div>
</div>
<span class="province-count">150.000 beneficiarios</span>
</div>
<div class="province-item">
<span class="province-name">Mendoza</span>
<div class="province-bar">
<div class="province-progress" style="width: 45%"></div>
</div>
<span class="province-count">95.000 beneficiarios</span>
</div>
<div class="province-item">
<span class="province-name">Tucumán</span>
<div class="province-bar">
<div class="province-progress" style="width: 40%"></div>
</div>
<span class="province-count">85.000 beneficiarios</span>
</div>
</div>
</div>
<!-- Testimonios -->
<div class="testimonials">
<h3>Testimonios de Beneficiarios</h3>
<div class="testimonials-grid">
<div class="testimonial-card">
<div class="testimonial-content">
"Gracias a SoberanIA pude complementar mi jubilación. Gané $150.000 en el sorteo de marzo."
</div>
<div class="testimonial-author">
<strong>María Elena Rodríguez</strong> (72 años, Buenos Aires)
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-content">
"Vendo mis dulces regionales sin comisiones. Es el futuro del comercio justo."
</div>
<div class="testimonial-author">
<strong>Carlos Mendoza</strong> (68 años, Córdoba)
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-content">
"Mi nieto me ayudó a registrarme. Ahora participo todos los miércoles en los sorteos."
</div>
<div class="testimonial-author">
<strong>Rosa Fernández</strong> (75 años, Santa Fe)
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Marketplace Section -->
<section class="section" id="marketplace">
<div class="marketplace">
<div class="marketplace-header">
<h2>Marketplace Cooperativo</h2>
<p>0% comisiones - Comercio justo para todos</p>
<div class="marketplace-badge">
<span class="badge badge--success">✓ Comercio Cooperativo Verificado</span>
</div>
</div>
<div class="marketplace-filters">
<div class="search-container">
<input type="text" class="form-control" placeholder="Buscar productos..." id="product-search">
</div>
<div class="category-filters">
<button class="filter-btn active" data-category="all">Todos</button>
<button class="filter-btn" data-category="Alimentación">Alimentación</button>
<button class="filter-btn" data-category="Artesanías">Artesanías</button>
<button class="filter-btn" data-category="Indumentaria">Indumentaria</button>
<button class="filter-btn" data-category="Tecnología">Tecnología</button>
</div>
</div>
<div class="products-grid" id="products-grid">
<!-- Products will be dynamically inserted here -->
</div>
<div class="marketplace-cta">
<h3>¿Querés vender tus productos?</h3>
<p>Unite a nuestra cooperativa y vendé sin comisiones</p>
<button class="btn btn--primary" id="sell-product-btn">Publicar Producto</button>
</div>
</div>
</section>
<!-- Fintech Section -->
<section class="section" id="fintech">
<div class="fintech">
<div class="fintech-header">
<h2>Sistema Fintech Soberano</h2>
<p>Tu economía, sin intermediarios bancarios</p>
</div>
<div class="fintech-grid">
<!-- Wallet -->
<div class="fintech-card">
<h3>Wallet PESO-D</h3>
<div class="wallet-balance">
<span class="balance-label">Saldo disponible</span>
<div class="balance-amount" id="wallet-balance">$125.750</div>
</div>
<div class="wallet-actions">
<button class="btn btn--primary" id="add-funds-btn">Cargar Fondos</button>
<button class="btn btn--outline" id="transfer-btn">Transferir</button>
</div>
</div>
<!-- Conversor -->
<div class="fintech-card">
<h3>Conversor PESO-D ↔ ARS</h3>
<div class="converter">
<div class="converter-input">
<input type="number" class="form-control" placeholder="Monto" id="convert-amount">
<select class="form-control" id="convert-from">
<option value="PESOD">PESO-D</option>
<option value="ARS">Pesos ARS</option>
</select>
</div>
<div class="converter-result">
<div class="result-amount" id="conversion-result">$0</div>
<div class="exchange-rate">1 PESO-D = 1.05 ARS</div>
</div>
<button class="btn btn--primary btn--full-width" id="convert-btn">Convertir</button>
</div>
</div>
<!-- Inversiones -->
<div class="fintech-card">
<h3>Simulador de Inversiones</h3>
<div class="investment-options">
<div class="investment-option">
<div class="investment-info">
<strong>Bonos Soberanos</strong>
<span class="investment-return">3% mensual</span>
</div>
<div class="investment-minimum">Mínimo: $50.000</div>
</div>
<div class="investment-option">
<div class="investment-info">
<strong>Fondo Cooperativo</strong>
<span class="investment-return">2.5% mensual</span>
</div>
<div class="investment-minimum">Mínimo: $25.000</div>
</div>
<div class="investment-option">
<div class="investment-info">
<strong>Infraestructura Nacional</strong>
<span class="investment-return">2.2% mensual</span>
</div>
<div class="investment-minimum">Mínimo: $100.000</div>
</div>
</div>
<button class="btn btn--primary btn--full-width" id="simulate-investment-btn">Simular Inversión</button>
</div>
<!-- Créditos P2P -->
<div class="fintech-card">
<h3>Créditos P2P</h3>
<p>Sin bancos, entre cooperativistas</p>
<div class="credit-calculator">
<div class="form-group">
<label class="form-label">Monto solicitado</label>
<input type="number" class="form-control" placeholder="$" id="credit-amount">
</div>
<div class="form-group">
<label class="form-label">Plazo (meses)</label>
<select class="form-control" id="credit-term">
<option value="6">6 meses</option>
<option value="12">12 meses</option>
<option value="24">24 meses</option>
</select>
</div>
<div class="credit-result">
<div class="monthly-payment">Cuota mensual: <span id="monthly-payment">$0</span></div>
<div class="total-interest">Interés total: <span id="total-interest">$0</span></div>
</div>
<button class="btn btn--primary btn--full-width" id="request-credit-btn">Solicitar Crédito</button>
</div>
</div>
</div>
</div>
</section>
<!-- Sorteos Section -->
<section class="section" id="sorteos">
<div class="sorteos">
<div class="sorteos-header">
<h2>Sorteos Redistributivos</h2>
<p>Redistribución automática prioritaria para jubilados</p>
</div>
<div class="sorteo-current">
<div class="sorteo-pool">
<h3>Pool Actual del Sorteo</h3>
<div class="pool-amount">$2.500.000</div>
<div class="pool-countdown">
<span>Próximo sorteo en:</span>
<div class="countdown-timer" id="sorteo-countdown">3 días 14 horas</div>
</div>
</div>
<div class="sorteo-distribution">
<h4>Distribución Automática</h4>
<div class="distribution-chart">
<div class="distribution-item">
<div class="distribution-bar">
<div class="distribution-fill" style="width: 70%; background: #0033A0;"></div>
</div>
<span>70% Jubilados - $1.750.000</span>
</div>
<div class="distribution-item">
<div class="distribution-bar">
<div class="distribution-fill" style="width: 20%; background: #75AADB;"></div>
</div>
<span>20% Vulnerables - $500.000</span>
</div>
<div class="distribution-item">
<div class="distribution-bar">
<div class="distribution-fill" style="width: 10%; background: #B8C5D6;"></div>
</div>
<span>10% General - $250.000</span>
</div>
</div>
</div>
</div>
<div class="sorteo-participation">
<div class="participation-card">
<h3>Tu Participación</h3>
<div class="participation-status" id="participation-status">
<p>Registrate para participar automáticamente en todos los sorteos</p>
</div>
<button class="btn btn--primary btn--full-width" id="participate-btn">Participar Automáticamente</button>
</div>
</div>
<div class="sorteo-winners">
<h3>Ganadores Verificables</h3>
<div class="winners-list">
<div class="winner-item">
<div class="winner-info">
<strong>María E. R.</strong> (Buenos Aires)
<span class="winner-amount">$150.000</span>
</div>
<div class="winner-date">15 Mar 2025</div>
</div>
<div class="winner-item">
<div class="winner-info">
<strong>Carlos M.</strong> (Córdoba)
<span class="winner-amount">$85.000</span>
</div>
<div class="winner-date">8 Mar 2025</div>
</div>
<div class="winner-item">
<div class="winner-info">
<strong>Rosa F.</strong> (Santa Fe)
<span class="winner-amount">$120.000</span>
</div>
<div class="winner-date">1 Mar 2025</div>
</div>
</div>
</div>
<div class="algorithm-transparency">
<h3>Algoritmo Transparente</h3>
<div class="algorithm-info">
<p><strong>Priorización automática:</strong></p>
<ul>
<li>Jubilados: 3x probabilidad base</li>
<li>Situación vulnerable: 2x probabilidad base</li>
<li>Usuarios general: 1x probabilidad base</li>
</ul>
<p>El sistema es completamente transparente y auditable por la comunidad.</p>
</div>
</div>
</div>
</section>
<!-- Impacto Section -->
<section class="section" id="impacto">
<div class="impacto">
<div class="impacto-header">
<h2>Impacto Social</h2>
<p>Midiendo la transformación de Argentina</p>
</div>
<div class="soberania-counter">
<h3>Soberanía Económica Recuperada</h3>
<div class="soberania-progress">
<div class="soberania-circle">
<div class="soberania-percentage">45%</div>
</div>
<div class="soberania-info">
<p>Cada PESO-D en circulación es un paso hacia la independencia financiera</p>
</div>
</div>
</div>
<div class="impact-metrics">
<div class="impact-card">
<h4>Redistribución en Tiempo Real</h4>
<div class="impact-amount">$45.320.780.000</div>
<div class="impact-trend">+$2.1M esta semana</div>
</div>
<div class="impact-card">
<h4>Familias Beneficiadas</h4>
<div class="impact-amount">930.000</div>
<div class="impact-trend">+850 hoy</div>
</div>
<div class="impact-card">
<h4>Comercios Sin Comisión</h4>
<div class="impact-amount">15.420</div>
<div class="impact-trend">+23 esta semana</div>
</div>
</div>
<div class="timeline">
<h3>Timeline de Logros</h3>
<div class="timeline-container">
<div class="timeline-item">
<div class="timeline-date">Jun 2025</div>
<div class="timeline-content">
<h4>1.2M Usuarios Registrados</h4>
<p>Superamos el millón de argentinos en el ecosistema</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-date">May 2025</div>
<div class="timeline-content">
<h4>$40B Redistribuidos</h4>
<p>Récord histórico en redistribución a jubilados</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-date">Abr 2025</div>
<div class="timeline-content">
<h4>Marketplace 0% comisión</h4>
<p>Lanzamiento del comercio cooperativo</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Mi Cuenta Section -->
<section class="section" id="cuenta">
<div class="cuenta">
<div class="cuenta-header">
<h2>Mi Cuenta</h2>
<p>Gestiona tu perfil y configuraciones</p>
</div>
<div class="cuenta-content" id="cuenta-content">
<div class="login-required">
<h3>Acceso Requerido</h3>
<p>Ingresa a tu cuenta para ver esta sección</p>
<button class="btn btn--primary" id="cuenta-login-btn">Ingresar</button>
</div>
</div>
</div>
</section>
</div>
</main>
<!-- Modals -->
<!-- Registration Modal -->
<div class="modal" id="register-modal">
<div class="modal-content">
<div class="modal-header">
<h3>Registro en SoberanIA Argentina</h3>
<button class="modal-close" id="register-close">&times;</button>
</div>
<div class="modal-body">
<form id="register-form">
<div class="form-group">
<label class="form-label">Nombre completo *</label>
<input type="text" class="form-control" id="register-name" required>
</div>
<div class="form-group">
<label class="form-label">Email *</label>
<input type="email" class="form-control" id="register-email" required>
</div>
<div class="form-group">
<label class="form-label">DNI *</label>
<input type="text" class="form-control" id="register-dni" pattern="[0-9]{7,8}" required>
</div>
<div class="form-group">
<label class="form-label">Provincia *</label>
<select class="form-control" id="register-provincia" required>
<option value="">Seleccionar provincia...</option>
<option value="Buenos Aires">Buenos Aires</option>
<option value="CABA">Ciudad Autónoma de Buenos Aires</option>
<option value="Córdoba">Córdoba</option>
<option value="Santa Fe">Santa Fe</option>
<option value="Mendoza">Mendoza</option>
<option value="Tucumán">Tucumán</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Contraseña *</label>
<input type="password" class="form-control" id="register-password" required>
</div>
<div class="form-group">
<div class="checkbox-group">
<input type="checkbox" id="register-jubilado">
<label for="register-jubilado">Soy jubilado/pensionado (prioridad en sorteos)</label>
</div>
</div>
<div class="form-group">
<div class="checkbox-group">
<input type="checkbox" id="register-terms" required>
<label for="register-terms">Acepto los términos y condiciones BCRA *</label>
</div>
</div>
<button type="submit" class="btn btn--primary btn--full-width">Crear Cuenta</button>
</form>
</div>
</div>
</div>
<!-- Login Modal -->
<div class="modal" id="login-modal">
<div class="modal-content">
<div class="modal-header">
<h3>Ingresar a SoberanIA</h3>
<button class="modal-close" id="login-close">&times;</button>
</div>
<div class="modal-body">
<form id="login-form">
<div class="form-group">
<label class="form-label">Email</label>
<input type="email" class="form-control" id="login-email" required>
</div>
<div class="form-group">
<label class="form-label">Contraseña</label>
<input type="password" class="form-control" id="login-password" required>
</div>
<div class="form-group">
<div class="checkbox-group">
<input type="checkbox" id="remember-me">
<label for="remember-me">Recordarme</label>
</div>
</div>
<button type="submit" class="btn btn--primary btn--full-width">Ingresar</button>
<button type="button" class="btn btn--outline btn--full-width" id="forgot-password">Olvidé mi contraseña</button>
</form>
</div>
</div>
</div>
<!-- Product Modal -->
<div class="modal" id="product-modal">
<div class="modal-content">
<div class="modal-header">
<h3>Publicar Producto</h3>
<button class="modal-close" id="product-close">&times;</button>
</div>
<div class="modal-body">
<form id="product-form">
<div class="form-group">
<label class="form-label">Nombre del producto *</label>
<input type="text" class="form-control" id="product-name" required>
</div>
<div class="form-group">
<label class="form-label">Precio (PESO-D) *</label>
<input type="number" class="form-control" id="product-price" required>
</div>
<div class="form-group">
<label class="form-label">Categoría *</label>
<select class="form-control" id="product-category" required>
<option value="">Seleccionar categoría...</option>
<option value="Alimentación">Alimentación</option>
<option value="Artesanías">Artesanías</option>
<option value="Indumentaria">Indumentaria</option>
<option value="Tecnología">Tecnología</option>
<option value="Servicios">Servicios</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Descripción</label>
<textarea class="form-control" id="product-description" rows="3"></textarea>
</div>
<button type="submit" class="btn btn--primary btn--full-width">Publicar Producto</button>
</form>
</div>
</div>
</div>
<!-- Compliance Footer -->
<footer class="footer">
<div class="container">
<div class="compliance-info">
<div class="compliance-badges">
<div class="compliance-badge">
<strong>BCRA Compliance</strong>
<span>Regulado bajo normativas financieras argentinas</span>
</div>
<div class="compliance-badge">
<strong>UIF Compliance</strong>
<span>Prevención de lavado de activos</span>
</div>
<div class="compliance-badge">
<strong>Ley 25.326</strong>
<span>Protección de datos personales</span>
</div>
</div>
<div class="footer-links">
<a href="#" target="_blank">Política de Privacidad</a>
<a href="#" target="_blank">Términos y Condiciones</a>
<a href="#" target="_blank">Transparencia Algoritmos</a>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2025 SoberanIA Argentina. Transformando la economía argentina a través de la cooperación.</p>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="app.js"></script>
</body>
</html>