AutonomIA_3.0 / index.html
Lukeetah's picture
Upload 3 files
0dd743a verified
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AutonomIA Argentina - Sistema Financiero Autónomo con IA</title>
<meta name="description" content="El primer sistema financiero completamente autónomo de Argentina, potenciado por IA Groq para decisiones ultra-rápidas y redistribución inteligente de riqueza.">
<meta name="keywords" content="IA, fintech, Argentina, autonomo, Groq, redistribucion, economia">
<!-- Progressive Web App -->
<meta name="theme-color" content="#21808D">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="AutonomIA Argentina">
<!-- Open Graph -->
<meta property="og:title" content="AutonomIA Argentina - Sistema Financiero Autónomo">
<meta property="og:description" content="Revolucionando la economía argentina con IA autónoma">
<meta property="og:type" content="website">
<!-- Fonts -->
<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">
<!-- Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Loading Screen -->
<div id="loading-screen" class="loading-screen">
<div class="loading-content">
<div class="ai-logo">
<i class="fas fa-brain"></i>
<div class="pulse-ring"></div>
</div>
<h2>AutonomIA Argentina</h2>
<p>Inicializando Sistema Autónomo de IA...</p>
<div class="loading-bar">
<div class="loading-progress"></div>
</div>
<div class="loading-stats">
<div>Conectando con Groq AI...</div>
<div id="loading-status">Cargando módulos autónomos...</div>
</div>
</div>
</div>
<!-- Main Application -->
<div id="app" class="app hidden">
<!-- Header -->
<header class="header">
<div class="container">
<div class="header-content">
<div class="logo">
<i class="fas fa-brain"></i>
<span>AutonomIA Argentina</span>
<span class="version">v1.0.0</span>
</div>
<nav class="nav">
<button class="nav-btn active" data-tab="dashboard">
<i class="fas fa-chart-line"></i>
Dashboard IA
</button>
<button class="nav-btn" data-tab="marketplace">
<i class="fas fa-store"></i>
Marketplace IA
</button>
<button class="nav-btn" data-tab="fintech">
<i class="fas fa-wallet"></i>
Fintech Autónomo
</button>
<button class="nav-btn" data-tab="redistribution">
<i class="fas fa-handshake"></i>
Redistribución IA
</button>
<button class="nav-btn" data-tab="governance">
<i class="fas fa-gavel"></i>
Gobernanza IA
</button>
</nav>
<div class="header-actions">
<button id="download-app" class="btn btn--primary">
<i class="fas fa-download"></i>
Descargar App
</button>
<div class="ai-status">
<div class="ai-indicator active"></div>
<span>IA Activa</span>
</div>
</div>
</div>
</div>
</header>
<!-- Dashboard Tab -->
<main id="dashboard" class="tab-content active">
<div class="container">
<!-- Hero Section -->
<section class="hero">
<div class="hero-content">
<h1>Sistema Financiero Autónomo de Argentina</h1>
<p class="hero-subtitle">
La primera plataforma financiera completamente autónoma del mundo,
potenciada por IA Groq para decisiones ultra-rápidas y redistribución inteligente de riqueza.
</p>
<div class="hero-stats">
<div class="stat">
<div class="stat-value" data-count="2847500">0</div>
<div class="stat-label">Usuarios Activos</div>
</div>
<div class="stat">
<div class="stat-value" data-count="15420">0</div>
<div class="stat-label">Decisiones IA/seg</div>
</div>
<div class="stat">
<div class="stat-value">$78.45B</div>
<div class="stat-label">Redistribuido por IA</div>
</div>
<div class="stat">
<div class="stat-value">99.7%</div>
<div class="stat-label">Tasa Optimización IA</div>
</div>
</div>
</div>
</section>
<!-- Real-time Metrics -->
<section class="metrics-grid">
<div class="card metric-card">
<div class="card__body">
<h3><i class="fas fa-robot"></i> Motor de IA Groq</h3>
<div class="metric-value">300 tokens/seg</div>
<div class="metric-description">Inferencia ultra-rápida sub-milisegundo</div>
<div class="metric-models">
<div class="model-chip">llama-3.1-8b-instant</div>
<div class="model-chip">mixtral-8x7b-32768</div>
<div class="model-chip">whisper-large-v3</div>
</div>
</div>
</div>
<div class="card metric-card">
<div class="card__body">
<h3><i class="fas fa-coins"></i> Circulación Peso Digital</h3>
<div class="metric-value">$54.32B</div>
<div class="metric-change positive">+12.4% esta semana</div>
<div class="progress-bar">
<div class="progress-fill" style="width: 78%"></div>
</div>
</div>
</div>
<div class="card metric-card">
<div class="card__body">
<h3><i class="fas fa-brain"></i> Fondos Gestionados por IA</h3>
<div class="metric-value">$42.1B</div>
<div class="metric-description">245,000 contratos inteligentes activos</div>
<div class="ai-confidence">
<div class="confidence-bar">
<div class="confidence-fill" style="width: 97%"></div>
</div>
<span>97% confianza IA</span>
</div>
</div>
</div>
<div class="card metric-card">
<div class="card__body">
<h3><i class="fas fa-chart-line"></i> Impacto Económico IA</h3>
<div class="metric-value">+8.4%</div>
<div class="metric-description">Aumento estimado del PIB</div>
<div class="economic-indicators">
<div class="indicator">
<span>Pobreza</span>
<span class="negative">-15.2%</span>
</div>
<div class="indicator">
<span>Empleo</span>
<span class="positive">+23.7%</span>
</div>
</div>
</div>
</div>
</section>
<!-- AI Decision Engine -->
<section class="ai-engine">
<div class="card">
<div class="card__body">
<h2><i class="fas fa-cogs"></i> Motor de Decisiones Autónomas</h2>
<div class="engine-grid">
<div class="engine-module">
<h4>Redistribución Autónoma</h4>
<p>IA que redistribuye riqueza automáticamente basada en análisis social en tiempo real</p>
<div class="module-stats">
<span>Modelo: groq_social_optimization</span>
<span>Automatización: 95%</span>
</div>
</div>
<div class="engine-module">
<h4>Predicción Económica Inteligente</h4>
<p>Predicciones económicas autónomas con 97% de precisión</p>
<div class="module-stats">
<span>Modelo: groq_economic_prophet</span>
<span>Precisión: 97.3%</span>
</div>
</div>
<div class="engine-module">
<h4>Scoring Crediticio Inteligente</h4>
<p>Evaluación crediticia autónoma usando 534 variables</p>
<div class="module-stats">
<span>Modelo: groq_credit_ai</span>
<span>Variables: 534</span>
</div>
</div>
<div class="engine-module">
<h4>Detección Autónoma de Fraude</h4>
<p>Detección de fraude en tiempo real con IA avanzada</p>
<div class="module-stats">
<span>Modelo: groq_fraud_hunter</span>
<span>Velocidad: 0.3ms</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Real-time Charts -->
<section class="charts-section">
<div class="charts-grid">
<div class="card">
<div class="card__body">
<h3>Optimización Económica IA en Tiempo Real</h3>
<div class="chart-container">
<canvas id="economicChart"></canvas>
</div>
</div>
</div>
<div class="card">
<div class="card__body">
<h3>Redistribución Autónoma por Región</h3>
<div class="chart-container">
<canvas id="redistributionChart"></canvas>
</div>
</div>
</div>
</div>
</section>
<!-- User Testimonials -->
<section class="testimonials">
<h2>Testimonios de Usuarios</h2>
<div class="testimonials-grid" id="testimonials-container">
<!-- Testimonials will be populated by JavaScript -->
</div>
</section>
</div>
</main>
<!-- Marketplace Tab -->
<main id="marketplace" class="tab-content">
<div class="container">
<section class="marketplace-hero">
<h1><i class="fas fa-store"></i> Marketplace Inteligente con IA</h1>
<p>Precios optimizados por IA, negociación autónoma y recomendaciones inteligentes</p>
</section>
<div class="marketplace-stats">
<div class="stat-card">
<i class="fas fa-percentage"></i>
<h3>Ahorro Promedio</h3>
<div class="stat-value">42%</div>
</div>
<div class="stat-card">
<i class="fas fa-lightning-bolt"></i>
<h3>Negociaciones IA</h3>
<div class="stat-value">15,420/día</div>
</div>
<div class="stat-card">
<i class="fas fa-shield-alt"></i>
<h3>Fraude Detectado</h3>
<div class="stat-value">99.8%</div>
</div>
</div>
<div class="marketplace-products" id="marketplace-products">
<!-- Products will be populated by JavaScript -->
</div>
</div>
</main>
<!-- Fintech Tab -->
<main id="fintech" class="tab-content">
<div class="container">
<section class="fintech-hero">
<h1><i class="fas fa-wallet"></i> Fintech Autónomo</h1>
<p>Servicios financieros completamente autónomos potenciados por IA</p>
</section>
<div class="fintech-services">
<div class="service-card">
<div class="service-icon">
<i class="fas fa-wallet"></i>
</div>
<h3>Billetera IA</h3>
<p>Transacciones autónomas optimizadas por inteligencia artificial</p>
<div class="service-stats">
<div>8.45M transacciones autónomas</div>
<div>$12.3B en ahorros generados</div>
</div>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-chart-line"></i>
</div>
<h3>Inversión Autónoma</h3>
<p>Optimización de inversiones sin intervención humana</p>
<div class="service-stats">
<div>96.8% tasa de éxito</div>
<div>+180% ganancia promedio</div>
</div>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-shield-alt"></i>
</div>
<h3>Gestión de Riesgo IA</h3>
<p>Evaluación y mitigación automática de riesgos financieros</p>
<div class="service-stats">
<div>0.3ms detección</div>
<div>99.7% precisión</div>
</div>
</div>
</div>
<div class="ai-wallet-interface">
<div class="card">
<div class="card__body">
<h3>Interfaz de Billetera IA</h3>
<div class="wallet-balance">
<div class="balance-display">
<span class="currency">$</span>
<span class="amount" id="wallet-balance">0</span>
<span class="currency-code">ARS</span>
</div>
<div class="balance-change positive">+$2,847 (IA)</div>
</div>
<div class="wallet-actions">
<button class="btn btn--primary" id="ai-optimize">
<i class="fas fa-magic"></i>
Optimizar con IA
</button>
<button class="btn btn--secondary">
<i class="fas fa-exchange-alt"></i>
Transferir
</button>
<button class="btn btn--secondary">
<i class="fas fa-chart-bar"></i>
Analizar
</button>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Redistribution Tab -->
<main id="redistribution" class="tab-content">
<div class="container">
<section class="redistribution-hero">
<h1><i class="fas fa-handshake"></i> Redistribución Inteligente</h1>
<p>Sistema autónomo de redistribución de riqueza basado en IA social</p>
</section>
<div class="redistribution-overview">
<div class="overview-card">
<h3>Motor de Redistribución</h3>
<div class="motor-stats">
<div class="stat">
<span>Decisiones/min</span>
<strong>2,400</strong>
</div>
<div class="stat">
<span>Precisión</span>
<strong>99.1%</strong>
</div>
<div class="stat">
<span>Impacto Social</span>
<strong>9.4/10</strong>
</div>
</div>
</div>
<div class="overview-card">
<h3>Estabilizador Económico</h3>
<div class="motor-stats">
<div class="stat">
<span>Intervenciones/día</span>
<strong>150</strong>
</div>
<div class="stat">
<span>Tasa de éxito</span>
<strong>96.8%</strong>
</div>
<div class="stat">
<span>Impacto PIB</span>
<strong>+2.3%</strong>
</div>
</div>
</div>
</div>
<div class="redistribution-map">
<div class="card">
<div class="card__body">
<h3>Mapa de Redistribución en Tiempo Real</h3>
<div class="map-container">
<div class="argentina-regions">
<div class="region" data-region="caba">
<div class="region-name">CABA</div>
<div class="region-amount">$2.1B</div>
</div>
<div class="region" data-region="buenos-aires">
<div class="region-name">Buenos Aires</div>
<div class="region-amount">$15.7B</div>
</div>
<div class="region" data-region="cordoba">
<div class="region-name">Córdoba</div>
<div class="region-amount">$8.3B</div>
</div>
<div class="region" data-region="santa-fe">
<div class="region-name">Santa Fe</div>
<div class="region-amount">$6.9B</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Governance Tab -->
<main id="governance" class="tab-content">
<div class="container">
<section class="governance-hero">
<h1><i class="fas fa-gavel"></i> Gobernanza IA</h1>
<p>Transparencia total en decisiones de IA y cumplimiento autónomo</p>
</section>
<div class="governance-modules">
<div class="governance-card">
<h3><i class="fas fa-list"></i> Log de Decisiones IA</h3>
<div class="decision-log" id="decision-log">
<!-- Decision log will be populated by JavaScript -->
</div>
</div>
<div class="governance-card">
<h3><i class="fas fa-shield-alt"></i> Cumplimiento Autónomo</h3>
<div class="compliance-status">
<div class="compliance-item">
<span>BCRA Compliance</span>
<div class="status status--success">✓ Activo</div>
</div>
<div class="compliance-item">
<span>AML/KYC</span>
<div class="status status--success">✓ Monitoreado</div>
</div>
<div class="compliance-item">
<span>Auditoría IA</span>
<div class="status status--success">✓ Continua</div>
</div>
</div>
</div>
<div class="governance-card">
<h3><i class="fas fa-file-contract"></i> Contratos Inteligentes</h3>
<div class="smart-contracts">
<div class="contract-stat">
<span>Contratos Activos</span>
<strong>245,000</strong>
</div>
<div class="contract-stat">
<span>Ejecuciones/día</span>
<strong>18,500</strong>
</div>
<div class="contract-stat">
<span>Tasa de Éxito</span>
<strong>99.9%</strong>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h4>AutonomIA Argentina</h4>
<p>El primer sistema financiero completamente autónomo, revolucionando la economía argentina con IA.</p>
</div>
<div class="footer-section">
<h4>Tecnología</h4>
<ul>
<li>Groq AI Ultra-Fast</li>
<li>Arquitectura Distribuida</li>
<li>Contratos Inteligentes</li>
<li>Machine Learning Avanzado</li>
</ul>
</div>
<div class="footer-section">
<h4>Contacto</h4>
<ul>
<li>Buenos Aires, Argentina</li>
<li>info@autonomia.ar</li>
<li>+54 11 1234-5678</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2025 AutonomIA Argentina. Revolucionando la economía con IA autónoma.</p>
<div class="footer-tech">
<span>Powered by Groq AI</span>
<span></span>
<span>Optimizado para HuggingFace Spaces</span>
</div>
</div>
</div>
</footer>
</div>
<!-- Scripts -->
<script src="app.js"></script>
</body>
</html>