| <!DOCTYPE html> |
| <html lang="es"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Vilanet - Red Comunitaria Autónoma</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: #f8fafc; |
| color: #1e293b; |
| } |
| |
| .gradient-bg { |
| background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); |
| } |
| |
| .tech-card { |
| transition: all 0.3s ease; |
| border-left: 4px solid transparent; |
| } |
| |
| .tech-card:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
| border-left-color: #3b82f6; |
| } |
| |
| .tab-content { |
| display: none; |
| } |
| |
| .tab-content.active { |
| display: block; |
| animation: fadeIn 0.5s ease; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| |
| .network-node { |
| position: relative; |
| } |
| |
| .network-node::after { |
| content: ''; |
| position: absolute; |
| width: 100%; |
| height: 2px; |
| background: #e2e8f0; |
| left: 0; |
| top: 50%; |
| z-index: -1; |
| } |
| |
| .feature-icon { |
| width: 48px; |
| height: 48px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| border-radius: 12px; |
| margin-bottom: 1rem; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <header class="gradient-bg text-white"> |
| <div class="container mx-auto px-4 py-16"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-8 md:mb-0"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Vilanet</h1> |
| <h2 class="text-xl md:text-2xl font-semibold mb-6">Red Comunitaria Autónoma</h2> |
| <p class="text-lg mb-8 opacity-90">Sistema de comunicación resistente que funciona sin internet, combinando IA local y redes mesh para mantener a las comunidades conectadas en cualquier situación.</p> |
| <div class="flex flex-wrap gap-3"> |
| <a href="#features" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-medium hover:bg-blue-50 transition">Características</a> |
| <a href="#tech" class="border-2 border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:bg-opacity-10 transition">Tecnologías</a> |
| </div> |
| </div> |
| <div class="md:w-1/2"> |
| <img src="https://images.unsplash.com/photo-1581092921461-39b2f2a8b162?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Red comunitaria" class="rounded-xl shadow-2xl border-4 border-white border-opacity-20"> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section class="bg-white py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center"> |
| <div class="p-4"> |
| <div class="text-3xl md:text-4xl font-bold text-blue-600 mb-2">50+ km</div> |
| <div class="text-gray-600">Alcance regional</div> |
| </div> |
| <div class="p-4"> |
| <div class="text-3xl md:text-4xl font-bold text-purple-600 mb-2">€200-500</div> |
| <div class="text-gray-600">Costo por nodo</div> |
| </div> |
| <div class="p-4"> |
| <div class="text-3xl md:text-4xl font-bold text-green-600 mb-2">100Mbps</div> |
| <div class="text-gray-600">Velocidad local</div> |
| </div> |
| <div class="p-4"> |
| <div class="text-3xl md:text-4xl font-bold text-amber-600 mb-2">10,000+</div> |
| <div class="text-gray-600">Usuarios soportados</div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="features" class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl font-bold mb-4">¿Qué hace revolucionario a Vilanet?</h2> |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">Un sistema de comunicación autónomo que combina lo mejor de las tecnologías modernas con la resiliencia comunitaria.</p> |
| </div> |
| |
| <div class="grid md:grid-cols-3 gap-8"> |
| |
| <div class="bg-white p-8 rounded-xl shadow-sm"> |
| <div class="feature-icon bg-blue-100 text-blue-600"> |
| <i class="fas fa-wifi text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Funciona sin internet</h3> |
| <p class="text-gray-600">Mantiene la comunicación incluso cuando fallan las redes convencionales durante cortes de internet o desastres naturales.</p> |
| </div> |
| |
| |
| <div class="bg-white p-8 rounded-xl shadow-sm"> |
| <div class="feature-icon bg-purple-100 text-purple-600"> |
| <i class="fas fa-lock text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Privacidad garantizada</h3> |
| <p class="text-gray-600">Encriptación de grado militar (AES-256, Curve25519) similar a la que protege transacciones bancarias y comunicaciones gubernamentales.</p> |
| </div> |
| |
| |
| <div class="bg-white p-8 rounded-xl shadow-sm"> |
| <div class="feature-icon bg-green-100 text-green-600"> |
| <i class="fas fa-users text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Control comunitario</h3> |
| <p class="text-gray-600">Infraestructura propiedad de la comunidad sin dependencia de compañías telefónicas o proveedores de internet.</p> |
| </div> |
| |
| |
| <div class="bg-white p-8 rounded-xl shadow-sm"> |
| <div class="feature-icon bg-amber-100 text-amber-600"> |
| <i class="fas fa-bolt text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Energía alternativa</h3> |
| <p class="text-gray-600">Funciona con paneles solares, baterías y hasta bicigeneradores para mantener la red operativa durante cortes prolongados.</p> |
| </div> |
| |
| |
| <div class="bg-white p-8 rounded-xl shadow-sm"> |
| <div class="feature-icon bg-red-100 text-red-600"> |
| <i class="fas fa-shield-alt text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Resistente a censura</h3> |
| <p class="text-gray-600">Topología de malla sin puntos centrales vulnerables. Cortar un nodo no afecta a toda la red.</p> |
| </div> |
| |
| |
| <div class="bg-white p-8 rounded-xl shadow-sm"> |
| <div class="feature-icon bg-indigo-100 text-indigo-600"> |
| <i class="fas fa-robot text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">IA local avanzada</h3> |
| <p class="text-gray-600">Modelos como LLaMA 3 para asistencia lingüística, gestión de emergencias y educación offline sin necesidad de conexión.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> |
| <h2 class="text-3xl font-bold mb-6">El Sistema Postal Digital</h2> |
| <p class="text-lg text-gray-600 mb-6">Vilanet funciona como un sistema postal tradicional pero digitalizado, donde cada nodo actúa como una oficina postal local que puede recibir y enviar mensajes.</p> |
| |
| <div class="space-y-4"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 bg-blue-100 p-2 rounded-lg text-blue-600 mr-4"> |
| <i class="fas fa-route"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold">Nodos = Oficinas postales</h4> |
| <p class="text-gray-600">Cada una puede recibir y enviar mensajes independientemente.</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 bg-purple-100 p-2 rounded-lg text-purple-600 mr-4"> |
| <i class="fas fa-truck"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold">Red mesh = Carteros</h4> |
| <p class="text-gray-600">Llevan los mensajes de un nodo a otro de forma autoorganizada.</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 bg-green-100 p-2 rounded-lg text-green-600 mr-4"> |
| <i class="fas fa-envelope"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold">Encriptación = Sobres cerrados</h4> |
| <p class="text-gray-600">Nadie puede leer los mensajes excepto el destinatario final.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="md:w-1/2"> |
| <div class="bg-gray-100 p-6 rounded-xl border border-gray-200"> |
| <div class="mb-4"> |
| <div class="flex items-center mb-2"> |
| <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white mr-3">1</div> |
| <div class="font-medium">Juan en la Calle A envía mensaje</div> |
| </div> |
| <div class="ml-11 pl-1 border-l-2 border-gray-300"> |
| <p class="text-gray-600">"¿Dónde está el centro médico más cercano?"</p> |
| </div> |
| </div> |
| |
| <div class="mb-4"> |
| <div class="flex items-center mb-2"> |
| <div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white mr-3">2</div> |
| <div class="font-medium">Nodos intermedios retransmiten</div> |
| </div> |
| <div class="ml-11 pl-1 border-l-2 border-gray-300"> |
| <p class="text-gray-600">El mensaje pasa por varios nodos como vecinos pasando un recado.</p> |
| </div> |
| </div> |
| |
| <div class="mb-4"> |
| <div class="flex items-center mb-2"> |
| <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white mr-3">3</div> |
| <div class="font-medium">María en la Calle D recibe</div> |
| </div> |
| <div class="ml-11 pl-1 border-l-2 border-gray-300"> |
| <p class="text-gray-600">"Centro de salud a 300m dirección norte"</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="tech" class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl font-bold mb-4">Tecnologías Clave</h2> |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">Combinación de hardware accesible y protocolos avanzados para crear una red autónoma.</p> |
| </div> |
| |
| |
| <div class="flex flex-wrap justify-center mb-8 gap-2"> |
| <button onclick="showTab('hardware')" class="tab-button px-6 py-2 rounded-lg font-medium bg-blue-600 text-white">Hardware</button> |
| <button onclick="showTab('software')" class="tab-button px-6 py-2 rounded-lg font-medium bg-gray-200 text-gray-700">Software</button> |
| <button onclick="showTab('ia')" class="tab-button px-6 py-2 rounded-lg font-medium bg-gray-200 text-gray-700">IA Local</button> |
| <button onclick="showTab('seguridad')" class="tab-button px-6 py-2 rounded-lg font-medium bg-gray-200 text-gray-700">Seguridad</button> |
| <button onclick="showTab('energia')" class="tab-button px-6 py-2 rounded-lg font-medium bg-gray-200 text-gray-700">Energía</button> |
| </div> |
| |
| |
| <div class="tab-content active" id="hardware-content"> |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| <div class="tech-card bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600 mr-4"> |
| <i class="fas fa-microchip text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold">Raspberry Pi 5</h3> |
| </div> |
| <p class="text-gray-600 mb-4">Pequeñas computadoras del tamaño de una tarjeta de crédito que actúan como "cerebros" de cada nodo.</p> |
| <div class="flex justify-between text-sm"> |
| <span class="bg-blue-100 text-blue-600 px-3 py-1 rounded-full">€80-100</span> |
| <span class="text-gray-500">5-10W consumo</span> |
| </div> |
| </div> |
| |
| |
| <div class="tech-card bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center text-purple-600 mr-4"> |
| <i class="fas fa-wifi text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold">Tarjetas WiFi Alfa</h3> |
| </div> |
| <p class="text-gray-600 mb-4">Adaptadores especiales con mayor alcance que WiFi normal (hasta 15km en línea de vista).</p> |
| <div class="flex justify-between text-sm"> |
| <span class="bg-purple-100 text-purple-600 px-3 py-1 rounded-full">€50-80</span> |
| <span class="text-gray-500">Alcance extendido</span> |
| </div> |
| </div> |
| |
| |
| <div class="tech-card bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center text-green-600 mr-4"> |
| <i class="fas fa-satellite-dish text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold">Antenas Ubiquiti</h3> |
| </div> |
| <p class="text-gray-600 mb-4">"Megáfonos digitales" que amplifican la señal para mayor alcance y confiabilidad.</p> |
| <div class="flex justify-between text-sm"> |
| <span class="bg-green-100 text-green-600 px-3 py-1 rounded-full">€60-200</span> |
| <span class="text-gray-500">Variedad de ganancias</span> |
| </div> |
| </div> |
| |
| |
| <div class="tech-card bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center text-amber-600 mr-4"> |
| <i class="fas fa-broadcast-tower text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold">Transceptor Xiegu G90</h3> |
| </div> |
| <p class="text-gray-600 mb-4">Radio de 20W para comunicación HF (3-30MHz) que cubre grandes distancias.</p> |
| <div class="flex justify-between text-sm"> |
| <span class="bg-amber-100 text-amber-600 px-3 py-1 rounded-full">~€450</span> |
| <span class="text-gray-500">Consumo bajo</span> |
| </div> |
| </div> |
| |
| |
| <div class="tech-card bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center text-red-600 mr-4"> |
| <i class="fas fa-shield-alt text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold">Jaula Faraday</h3> |
| </div> |
| <p class="text-gray-600 mb-4">Caja de aluminio que protege contra pulsos electromagnéticos (hasta 50kV/m).</p> |
| <div class="flex justify-between text-sm"> |
| <span class="bg-red-100 text-red-600 px-3 py-1 rounded-full">€120</span> |
| <span class="text-gray-500">Protección EMP</span> |
| </div> |
| </div> |
| |
| |
| <div class="tech-card bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center text-indigo-600 mr-4"> |
| <i class="fas fa-solar-panel text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold">Panel Solar 100W</h3> |
| </div> |
| <p class="text-gray-600 mb-4">Fuente de energía autónoma para mantener nodos funcionando indefinidamente.</p> |
| <div class="flex justify-between text-sm"> |
| <span class="bg-indigo-100 text-indigo-600 px-3 py-1 rounded-full">€200-400</span> |
| <span class="text-gray-500">Kit completo</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="tab-content" id="software-content"> |
| <div class="grid md:grid-cols-2 gap-6"> |
| |
| <div class="tech-card bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600 mr-4"> |
| <i class="fab fa-github text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold">LibreMesh</h3> |
| </div> |
| <p class="text-gray-600 mb-4">Software que convierte routers normales en nodos inteligentes de red mesh.</p> |
| <div class="mb-4"> |
| <pre class="bg-gray-100 p-3 rounded-lg text-sm overflow-x-auto"><code>git clone https://github.com/libremesh/lime-packages |
| make defconfig && make -j4</code></pre> |
| </div> |
| <div class="text-sm text-gray-500">Incluye protocolos de enrutamiento (OLSR, B.A.T.M.A.N.) y herramientas de monitorización.</div> |
| </div> |
| |
| |
| <div class="tech-card bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center text-purple-600 mr-4"> |
| <i class="fab fa-telegram text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold">Telegram X</h3> |
| </div> |
| <p class="text-gray-600 mb-4">Versión modificada de Telegram que funciona con la red local sin servidores de internet.</p> |
| <div class="mb-4"> |
| <pre class="bg-gray-100 p-3 rounded-lg text-sm overflow-x-auto"><code>git clone --recursive https://github.com/TGX-Android/Telegram-X |
| nano local.properties # Editar configuración |
| ./gradlew assembleUniversalRelease</code></pre> |
| </div> |
| <div class="text-sm text-gray-500">100% compatible con Telegram normal, alterna automáticamente entre internet y Vilanet.</div> |
| </div> |
| |
| |
| <div class="tech-card bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center text-green-600 mr-4"> |
| <i class="fas fa-exchange-alt text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold">Puente Matrix-LoRa</h3> |
| </div> |
| <p class="text-gray-600 mb-4">Traductor entre la red digital (Matrix) y radios LoRa para comunicación a larga distancia.</p> |
| <div class="mb-4"> |
| <pre class="bg-gray-100 p-3 rounded-lg text-sm overflow-x-auto"><code># matrix_lora_bridge.py |
| from matrix_client.client import MatrixClient |
| import serial |
|
|
| matrix = MatrixClient("http://local.matrix:8008") |
| lora = serial.Serial('/dev/ttyUSB0', 9600) |
|
|
| def handle_room_message(room, event): |
| if event['type'] == "m.room.message": |
| lora.write(f"{event['sender']}: {event['content']['body']}\n".encode()) |
|
|
| matrix.add_listener(handle_room_message) |
| matrix.listen_forever()</code></pre> |
| </div> |
| </div> |
| |
| |
| <div class="tech-card bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center text-amber-600 mr-4"> |
| <i class="fas fa-database text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold">Respaldo M-DISC</h3> |
| </div> |
| <p class="text-gray-600 mb-4">Discos que resisten 1000 años sin degradarse, inmunes a imanes/radiación.</p> |
| <div class="mb-4"> |
| <pre class="bg-gray-100 p-3 rounded-lg text-sm overflow-x-auto"><code>sudo apt install growisofs |
| growisofs -Z /dev/sr0 -r -J /var/backups</code></pre> |
| </div> |
| <div class="text-sm text-gray-500">Costo accesible (~€2 por disco de 25GB), legibles con cualquier lector de DVD.</div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="tab-content" id="ia-content"> |
| <div class="grid md:grid-cols-3 gap-6"> |
| |
| <div class="tech-card bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600 mr-4"> |
| <i class="fas fa-robot text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold">Raspberry Pi 5</h3> |
| </div> |
| <ul class="list-disc pl-5 text-gray-600 mb-4 space-y-1"> |
| <li>Modelos TinyLlama (1.1B parámetros)</li> |
| <li>Respuestas básicas (~5-10 segundos)</li> |
| <li>1 consulta cada 2 minutos</li> |
| </ul> |
| <div class="flex justify-between text-sm"> |
| <span class="bg-blue-100 text-blue-600 px-3 py-1 rounded-full">~80€</span> |
| <span class="text-gray-500">Comunidades pequeñas</span> |
| </div> |
| </div> |
| |
| |
| <div class="tech-card bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center text-purple-600 mr-4"> |
| <i class="fas fa-brain text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold">Jetson Nano (4GB)</h3> |
| </div> |
| <ul class="list-disc pl-5 text-gray-600 mb-4 space-y-1"> |
| <li>Modelos Phi-2 (2.7B parámetros)</li> |
| <li>Procesamiento más rápido (~3-5 segundos)</li> |
| <li>3-5 consultas por minuto</li> |
| </ul> |
| <div class="flex justify-between text-sm"> |
| <span class="bg-purple-100 text-purple-600 px-3 py-1 rounded-full">~150€</span> |
| <span class="text-gray-500">Comunidades medianas</span> |
| </div> |
| </div> |
| |
| |
| <div class="tech-card bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center text-green-600 mr-4"> |
| <i class="fas fa-server text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold">Mini PC con GPU</h3> |
| </div> |
| <ul class="list-disc pl-5 text-gray-600 mb-4 space-y-1"> |
| <li>LLaMA 3 (8B+ parámetros)</li> |
| <li>Multimodal (texto, imágenes)</li> |
| <li>~1-2 segundos por respuesta</li> |
| <li>10+ consultas por minuto</li> |
| </ul> |
| <div class="flex justify-between text-sm"> |
| <span class="bg-green-100 text-green-600 px-3 py-1 rounded-full">€500-1,000</span> |
| <span class="text-gray-500">Ciudades pequeñas</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-8 bg-white p-6 rounded-xl shadow-sm"> |
| <h3 class="text-xl font-semibold mb-4">Casos de Uso Avanzados</h3> |
| <div class="grid md:grid-cols-3 gap-4"> |
| <div class="p-4 bg-blue-50 rounded-lg"> |
| <h4 class="font-medium mb-2 text-blue-700">Asistencia lingüística</h4> |
| <p class="text-sm text-gray-600">Traducción automática entre idiomas locales (ej: catalán ↔ español).</p> |
| </div> |
| <div class="p-4 bg-purple-50 rounded-lg"> |
| <h4 class="font-medium mb-2 text-purple-700">Gestión de emergencias</h4> |
| <p class="text-sm text-gray-600">Análisis de datos de sensores (ej: inundaciones, incendios).</p> |
| </div> |
| <div class="p-4 bg-green-50 rounded-lg"> |
| <h4 class="font-medium mb-2 text-green-700">Educación offline</h4> |
| <p class="text-sm text-gray-600">Chatbot para consultas escolares sin necesidad de internet.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="tab-content" id="seguridad-content"> |
| <div class="grid md:grid-cols-3 gap-6"> |
| |
| <div class="tech-card bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600 mr-4"> |
| <i class="fas fa-key text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold">LoRa/LoRaWAN</h3> |
| </div> |
| <ul class="list-disc pl-5 text-gray-600 mb-4 space-y-1"> |
| <li>AES-128 en hardware</li> |
| <li>Claves dinámicas con rotación cada 24h (OTAA)</li> |
| <li>Paquetes de 51-222 bytes</li> |
| </ul> |
| </div> |
| |
| |
| <div class="tech-card bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center text-purple-600 mr-4"> |
| <i class="fas fa-network-wired text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold">Wi-Fi Mesh</h3> |
| </div> |
| <ul class="list-disc pl-5 text-gray-600 mb-4 space-y-1"> |
| <li>WPA3 para autenticación</li> |
| <li>VPN (WireGuard) entre nodos</li> |
| <li>Hasta 100 Mbps de velocidad</li> |
| </ul> |
| </div> |
| |
| |
| <div class="tech-card bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center text-green-600 mr-4"> |
| <i class="fas fa-database text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold">Servidores Locales</h3> |
| </div> |
| <ul class="list-disc pl-5 text-gray-600 mb-4 space-y-1"> |
| <li>Bases de datos con cifrado AES-256</li> |
| <li>Comunicación interna con TLS 1.3</li> |
| <li>Certificados autofirmados</li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="mt-8 bg-white p-6 rounded-xl shadow-sm"> |
| <h3 class="text-xl font-semibold mb-4">Topología de Malla</h3> |
| <p class="text-gray-600 mb-4">La red no tiene un punto central vulnerable, como una telaraña donde cortar un hilo no la destruye. Si un nodo es comprometido, solo afecta a su conexión directa, no a toda la red.</p> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/NetworkTopology-Mesh.png/800px-NetworkTopology-Mesh.png" alt="Topología de malla" class="rounded-lg border border-gray-200"> |
| </div> |
| </div> |
| |
| <div class="tab-content" id="energia-content"> |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| <div class="tech-card bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600 mr-4"> |
| <i class="fas fa-sun text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold">Panel Solar 100W</h3> |
| </div> |
| <p class="text-gray-600 mb-4">Panel de 100W + batería 12V/100Ah proporciona ≈3 días de autonomía sin sol.</p> |
| <div class="flex justify-between text-sm"> |
| <span class="bg-blue-100 text-blue-600 px-3 py-1 rounded-full">€200-400</span> |
| <span class="text-gray-500">Kit completo</span> |
| </div> |
| </div> |
| |
| |
| <div class="tech-card bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center text-purple-600 mr-4"> |
| <i class="fas fa-wind text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold">Aerogenerador 200W</h3> |
| </div> |
| <p class="text-gray-600 mb-4">Pequeños aerogeneradores para zonas ventosas como complemento a la solar.</p> |
| <div class="flex justify-between text-sm"> |
| <span class="bg-purple-100 text-purple-600 px-3 py-1 rounded-full">€300-600</span> |
| <span class="text-gray-500">En zonas ventosas</span> |
| </div> |
| </div> |
| |
| |
| <div class="tech-card bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center text-green-600 mr-4"> |
| <i class="fas fa-bicycle text-xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold">Bicigenerador Casero</h3> |
| </div> |
| <p class="text-gray-600 mb-4">30 minutos de pedaleo = 1 hora de funcionamiento del nodo.</p> |
| <div class="flex justify-between text-sm"> |
| <span class="bg-green-100 text-green-600 px-3 py-1 rounded-full">€20-50</span> |
| <span class="text-gray-500">Materiales básicos</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-8 bg-white p-6 rounded-xl shadow-sm"> |
| <h3 class="text-xl font-semibold mb-4">Configuración Solar Básica</h3> |
| <pre class="bg-gray-100 p-4 rounded-lg overflow-x-auto"><code># Monitoreo de energía en Raspberry Pi |
| sudo apt install power-monitor |
| power-monitor --config solar-setup.json</code></pre> |
| <p class="text-gray-600 mt-4">Este software ayuda a optimizar el consumo energético según la disponibilidad de energía. Puede apagar servicios no esenciales cuando la carga de la batería es baja, extendiendo la autonomía.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl font-bold mb-4">Conectividad a Diferentes Escalas</h2> |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">Desde tu calle hasta el mundo, Vilanet funciona como un sistema de comunicación por capas.</p> |
| </div> |
| |
| <div class="overflow-x-auto"> |
| <table class="min-w-full bg-white rounded-lg overflow-hidden"> |
| <thead class="bg-gray-100"> |
| <tr> |
| <th class="py-3 px-4 text-left font-semibold text-gray-700">Alcance</th> |
| <th class="py-3 px-4 text-left font-semibold text-gray-700">Tecnología</th> |
| <th class="py-3 px-4 text-left font-semibold text-gray-700">Distancia</th> |
| <th class="py-3 px-4 text-left font-semibold text-gray-700">Velocidad</th> |
| <th class="py-3 px-4 text-left font-semibold text-gray-700">Uso Ideal</th> |
| <th class="py-3 px-4 text-left font-semibold text-gray-700">Costo Aprox.</th> |
| </tr> |
| </thead> |
| <tbody class="divide-y divide-gray-200"> |
| <tr> |
| <td class="py-3 px-4">Local</td> |
| <td class="py-3 px-4 font-medium">Wi-Fi Mesh</td> |
| <td class="py-3 px-4">5-15km</td> |
| <td class="py-3 px-4">100Mbps</td> |
| <td class="py-3 px-4">Chats, fotos, mapas</td> |
| <td class="py-3 px-4">€200-500/nodo</td> |
| </tr> |
| <tr class="bg-gray-50"> |
| <td class="py-3 px-4">Regional</td> |
| <td class="py-3 px-4 font-medium">LoRa Mesh</td> |
| <td class="py-3 px-4">50km</td> |
| <td class="py-3 px-4">300bps</td> |
| <td class="py-3 px-4">Mensajes cortos</td> |
| <td class="py-3 px-4">€100-300/nodo</td> |
| </tr> |
| <tr> |
| <td class="py-3 px-4">Global</td> |
| <td class="py-3 px-4 font-medium">Radio HF</td> |
| <td class="py-3 px-4">Mundial</td> |
| <td class="py-3 px-4">1200bps</td> |
| <td class="py-3 px-4">Emergencias</td> |
| <td class="py-3 px-4">€800-1500/estación</td> |
| </tr> |
| <tr class="bg-gray-50"> |
| <td class="py-3 px-4">Satélite</td> |
| <td class="py-3 px-4 font-medium">LoRa-to-Sat</td> |
| <td class="py-3 px-4">Mundial</td> |
| <td class="py-3 px-4">100bps</td> |
| <td class="py-3 px-4">Último recurso</td> |
| <td class="py-3 px-4">€300-600/estación</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <div class="mt-12 bg-gray-50 p-6 rounded-xl"> |
| <h3 class="text-xl font-semibold mb-4">Ejemplo de Red Multinivel</h3> |
| <div class="grid md:grid-cols-3 gap-4"> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-blue-600 mb-2">Red Local WiFi Mesh</h4> |
| <p class="text-sm text-gray-600">5-15km • 100Mbps • 10-100 usuarios • €200-500/nodo</p> |
| </div> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-purple-600 mb-2">Conexión Regional LoRa Mesh</h4> |
| <p class="text-sm text-gray-600">50km • 300bps • Enlace entre comunidades • €100-300/nodo</p> |
| </div> |
| <div class="bg-white p-4 rounded-lg border border-gray-200"> |
| <h4 class="font-medium text-green-600 mb-2">Conexión Global Radio HF</h4> |
| <p class="text-sm text-gray-600">Mundial • 1200bps • Emergencias • €800-1500/estación</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center mb-12"> |
| <h2 class="text-3xl font-bold mb-4">Flujo de Mensajes en Vilanet</h2> |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto">Cómo se integran las diferentes tecnologías en una experiencia de usuario unificada.</p> |
| </div> |
| |
| <div class="bg-white p-6 rounded-xl shadow-sm"> |
| <div class="flex flex-col md:flex-row justify-between items-center mb-8"> |
| <div class="network-node bg-blue-100 text-blue-600 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-4 md:mb-0"> |
| <i class="fas fa-mobile-alt text-2xl"></i> |
| </div> |
| <div class="network-node bg-purple-100 text-purple-600 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-4 md:mb-0"> |
| <i class="fas fa-wifi text-2xl"></i> |
| </div> |
| <div class="network-node bg-green-100 text-green-600 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-4 md:mb-0"> |
| <i class="fas fa-broadcast-tower text-2xl"></i> |
| </div> |
| <div class="network-node bg-amber-100 text-amber-600 p-4 rounded-full w-16 h-16 flex items-center justify-center"> |
| <i class="fas fa-mobile-alt text-2xl"></i> |
| </div> |
| </div> |
| |
| <div class="grid md:grid-cols-4 gap-4 text-center"> |
| <div> |
| <h4 class="font-semibold mb-2">1. Usuario escribe</h4> |
| <p class="text-sm text-gray-600">En Telegram normal, como siempre</p> |
| </div> |
| <div> |
| <h4 class="font-semibold mb-2">2. App detecta conexión</h4> |
| <p class="text-sm text-gray-600">Si hay internet, usa servidores Telegram; si no, usa nodos Vilanet</p> |
| </div> |
| <div> |
| <h4 class="font-semibold mb-2">3. Red elige mejor ruta</h4> |
| <p class="text-sm text-gray-600">WiFi si está cerca, radio si está lejos, mezcla si es necesario</p> |
| </div> |
| <div> |
| <h4 class="font-semibold mb-2">4. Destinatario recibe</h4> |
| <p class="text-sm text-gray-600">En su Telegram, sin saber qué tecnología se usó</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 gradient-bg text-white"> |
| <div class="container mx-auto px-4"> |
| <div class="max-w-3xl mx-auto text-center"> |
| <h2 class="text-3xl font-bold mb-6">Conclusión</h2> |
| |
| <div class="bg-white bg-opacity-10 p-6 rounded-xl mb-8"> |
| <div class="grid md:grid-cols-2 gap-6 text-left"> |
| <div> |
| <h3 class="text-xl font-semibold mb-3">IA Local Avanzada</h3> |
| <ul class="list-disc pl-5 space-y-2 text-white text-opacity-90"> |
| <li>Posible con Mini PCs + GPUs</li> |
| <li>Limitada a ~10 consultas/minuto</li> |
| <li>Modelos hasta LLaMA 3 8B</li> |
| </ul> |
| </div> |
| <div> |
| <h3 class="text-xl font-semibold mb-3">Red Wireless Propia</h3> |
| <ul class="list-disc pl-5 space-y-2 text-white text-opacity-90"> |
| <li>LoRa para IoT (bajo ancho de banda)</li> |
| <li>Wi-Fi Mesh/TV White Space para datos pesados</li> |
| <li>Máximo alcance: 50+ km</li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| |
| <p class="text-xl mb-8">¿Quieres profundizar en cómo implementar el cluster de IA o la red mesh? ¡Dime y te ayudo con esquemas y código! 😊</p> |
| |
| <a href="#contact" class="inline-block bg-white text-blue-600 px-8 py-3 rounded-lg font-medium hover:bg-blue-50 transition">Contactar</a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="max-w-2xl mx-auto"> |
| <h2 class="text-3xl font-bold mb-6 text-center">¿Interesado en implementar Vilanet?</h2> |
| <p class="text-lg text-gray-600 mb-8 text-center">Completa el formulario y nos pondremos en contacto contigo para asesorarte.</p> |
| |
| <form class="bg-gray-50 p-6 rounded-xl shadow-sm"> |
| <div class="mb-4"> |
| <label for="name" class="block text-gray-700 font-medium mb-2">Nombre</label> |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| </div> |
| |
| <div class="mb-4"> |
| <label for="email" class="block text-gray-700 font-medium mb-2">Email</label> |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| </div> |
| |
| <div class="mb-4"> |
| <label for="community" class="block text-gray-700 font-medium mb-2">Comunidad/Organización</label> |
| <input type="text" id="community" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| </div> |
| |
| <div class="mb-4"> |
| <label for="interest" class="block text-gray-700 font-medium mb-2">Área de interés</label> |
| <select id="interest" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| <option value="">Selecciona una opción</option> |
| <option value="red">Implementación de red mesh</option> |
| <option value="ia">IA local comunitaria</option> |
| <option value="seguridad">Sistemas de seguridad</option> |
| <option value="energia">Soluciones energéticas</option> |
| <option value="otro">Otro</option> |
| </select> |
| </div> |
| |
| <div class="mb-4"> |
| <label for="message" class="block text-gray-700 font-medium mb-2">Mensaje</label> |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea> |
| </div> |
| |
| <button type="submit" class="w-full gradient-bg text-white py-3 rounded-lg font-medium hover:opacity-90 transition">Enviar consulta</button> |
| </form> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 text-white py-8"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-4 md:mb-0"> |
| <h3 class="text-xl font-bold">Vilanet</h3> |
| <p class="text-gray-400">Red Comunitaria Autónoma</p> |
| </div> |
| |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-github text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-telegram text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white transition"> |
| <i class="fab fa-twitter text-xl"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 mt-6 pt-6 text-center text-gray-400 text-sm"> |
| <p>© 2023 Vilanet. Todos los derechos reservados.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| function showTab(tabId) { |
| |
| document.querySelectorAll('.tab-content').forEach(content => { |
| content.classList.remove('active'); |
| }); |
| |
| |
| document.querySelectorAll('.tab-button').forEach(button => { |
| button.classList.remove('bg-blue-600', 'text-white'); |
| button.classList.add('bg-gray-200', 'text-gray-700'); |
| }); |
| |
| |
| document.getElementById(tabId + '-content').classList.add('active'); |
| |
| |
| event.target.classList.remove('bg-gray-200', 'text-gray-700'); |
| event.target.classList.add('bg-blue-600', 'text-white'); |
| } |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=QwanYin/citynet" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
