48053b47ec
- add hero video to screen-1 with local Dune Rise font replacing Google Fonts - screen-2: replace cards with interactive FAQ accordion (6 questions + 5 nested) - add SSB pub node status monitor with live API polling - add Flask API (/api/status/ssb, /api/status/ecoind) proxied via nginx - full responsive CSS rewrite (1024px, 768px, 480px breakpoints) - strip all accent marks for Dune Rise font compatibility Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
350 lines
17 KiB
HTML
350 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="robots" content="noindex">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>OASIS</title>
|
||
<link rel="stylesheet" href="styles.css" />
|
||
<link rel="icon" href="images/oasis_logo_simple.png" type="image/png" />
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Pantalla inicial -->
|
||
<section class="screen screen-1">
|
||
<div class="header">
|
||
<img src="images/oasis-logo.webp" alt="OASIS Logo" class="logo">
|
||
<h1 class="main-title">OASIS</h1>
|
||
</div>
|
||
<div class="hero-video-wrap">
|
||
<video class="hero-video" autoplay muted loop playsinline>
|
||
<source src="oasis_web.mp4" type="video/mp4">
|
||
</video>
|
||
</div>
|
||
|
||
<div class="buttons">
|
||
<a href="https://oasis-project.pub/#about" class="btn_main">Overview</a>
|
||
<a href="https://oasis-project.pub/#technologies" class="btn_main">Technologies</a>
|
||
<a href="https://oasis-project.pub/#community" class="btn_main">Community</a>
|
||
<a href="https://code.03c8.net/KrakensLab/oasis/src/master/install.sh" class="btn_main">Download</a>
|
||
<a href="https://solarnethub.com" class="btn_main">Solarnethub</a>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<!-- About -->
|
||
<section class="screen screen-2" id="about">
|
||
<div class="content">
|
||
<h2 class="screen2-title">0asis.net <span class="screen2-subtitle">→ oasis desde cero</span></h2>
|
||
|
||
<div class="faq-section">
|
||
|
||
<div class="faq-item">
|
||
<button class="faq-q" onclick="toggleFaq(this)">
|
||
¿QUE PUEDO HACER EN OASIS? <span class="faq-arrow">▼</span>
|
||
</button>
|
||
<div class="faq-a">OASIS es una plataforma completa con mas de 40 aplicaciones integradas: publicas en tu feed, envias mensajes, participas en foros y eventos, gestionas proyectos colectivos, votas propuestas, compras y vendes en el marketplace, creas y consumes contenido multimedia. Todo desde un mismo lugar, sin publicidad, sin algoritmos que manipulen lo que ves y sin que nadie venda tus datos.</div>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<button class="faq-q" onclick="toggleFaq(this)">
|
||
¿COMO ENTRO? ¿QUE ES UN PUB? <span class="faq-arrow">▼</span>
|
||
</button>
|
||
<div class="faq-a">Un PUB es la puerta de entrada a OASIS. Es un servidor comunitario siempre encendido — como una plaza publica — que conecta a los nuevos usuarios con la red. Este servidor, 0asis.net, es uno de esos PUBs. Para unirte, instala OASIS y acepta un invite de este PUB. En segundos estaras sincronizando feeds con la comunidad federada. No necesitas cuenta, no hay registro centralizado.</div>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<button class="faq-q" onclick="toggleFaq(this)">
|
||
¿PUEDO CREAR MI PROPIA COMUNIDAD? <span class="faq-arrow">▼</span>
|
||
</button>
|
||
<div class="faq-a">Si. Cualquiera puede levantar su propio PUB y convertirlo en el centro de su comunidad. Dentro de OASIS puedes crear Tribus — espacios colectivos con gobernanza propia, foros, proyectos y economia compartida. No dependes de ninguna plataforma externa para organizarte: las reglas, los miembros y las decisiones las pone la propia comunidad.</div>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<button class="faq-q" onclick="toggleFaq(this)">
|
||
¿LOS DATOS SON REALMENTE MIOS? <span class="faq-arrow">▼</span>
|
||
</button>
|
||
<div class="faq-a">Completamente. Tu identidad y tu contenido se almacenan en tu propio dispositivo, cifrados. No existe un servidor central que los controle. Si un nodo cae, la red continua. Si decides irte, te llevas todo contigo. Nadie puede borrarte, silenciarte ni venderte: ni una empresa, ni un gobierno, ni los propios desarrolladores de OASIS.</div>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<button class="faq-q" onclick="toggleFaq(this)">
|
||
¿TIENE ECONOMIA PROPIA? <span class="faq-arrow">▼</span>
|
||
</button>
|
||
<div class="faq-a">Si. OASIS integra ECOIN, su token comunitario, con el que puedes participar en el marketplace, acceder a servicios, recompensar contribuciones y co-gobernar la red. Hay modulos de banca, UBI (renta basica universal), mercado de trabajo y contratos inteligentes — todo dentro del ecosistema, sin depender de intermediarios financieros externos.</div>
|
||
</div>
|
||
|
||
<div class="faq-item">
|
||
<button class="faq-q" onclick="toggleFaq(this)">
|
||
¿PUEDO VERLO ANTES DE INSTALAR NADA? <span class="faq-arrow">▼</span>
|
||
</button>
|
||
<div class="faq-a">Si. Hay una demo publica en <a href="https://demo.oasis-project.pub" target="_blank" style="color:var(--orange-neon)">demo.oasis-project.pub</a> donde puedes explorar todos los modulos — feeds, gobernanza, economia, media — directamente desde el navegador, sin instalar nada. Es la forma mas rapida de hacerte una idea de lo que OASIS puede hacer por ti y tu comunidad.</div>
|
||
</div>
|
||
|
||
<div class="faq-item faq-item-parent">
|
||
<button class="faq-q" onclick="toggleFaq(this)">
|
||
¿QUE MAS PUEDO HACER? <span class="faq-arrow">▼</span>
|
||
</button>
|
||
<div class="faq-a faq-a-nested">
|
||
<div class="faq-section faq-nested">
|
||
|
||
<div class="faq-item faq-item-sub">
|
||
<button class="faq-q faq-q-sub" onclick="toggleFaqSub(this)">
|
||
¿COMO CREO UNA TRIBU? <span class="faq-arrow">▼</span>
|
||
</button>
|
||
<div class="faq-a">Una Tribu es tu comunidad dentro de OASIS: tiene su propio foro, proyectos, economia y gobernanza. Para crearla, entra en el modulo <strong>Tribes</strong>, elige nombre, describe su proposito y define las reglas de acceso — abierta o por invitacion. Desde ese momento puedes invitar miembros, lanzar propuestas de voto, gestionar un fondo comun con ECOIN y organizar eventos propios.</div>
|
||
</div>
|
||
|
||
<div class="faq-item faq-item-sub">
|
||
<button class="faq-q faq-q-sub" onclick="toggleFaqSub(this)">
|
||
¿COMO PUEDO ENCONTRAR TRABAJO? <span class="faq-arrow">▼</span>
|
||
</button>
|
||
<div class="faq-a">OASIS tiene un modulo de <strong>Jobs</strong>. Puedes publicar tu perfil profesional, explorar ofertas de trabajo publicadas por tribus y proyectos, ofrecer servicios y contratar a otros miembros. Los pagos se gestionan en ECOIN directamente, sin intermediarios. Un mercado de trabajo horizontal donde el valor circula entre personas.</div>
|
||
</div>
|
||
|
||
<div class="faq-item faq-item-sub">
|
||
<button class="faq-q faq-q-sub" onclick="toggleFaqSub(this)">
|
||
¿COMO PUBLICO UN BLOG? <span class="faq-arrow">▼</span>
|
||
</button>
|
||
<div class="faq-a">Desde el modulo <strong>Media</strong> puedes redactar entradas de blog con texto, imagenes y video, asignarles etiquetas y publicarlas en tu feed personal o en la tribu que elijas. Tu contenido queda en tu nodo — nadie puede borrarlo ni censurarlo. Si otros nodos te replican, tu blog vivira en la red aunque apagues tu dispositivo.</div>
|
||
</div>
|
||
|
||
<div class="faq-item faq-item-sub">
|
||
<button class="faq-q faq-q-sub" onclick="toggleFaqSub(this)">
|
||
¿COMO CREO MI PROPIA TIENDA? <span class="faq-arrow">▼</span>
|
||
</button>
|
||
<div class="faq-a">El modulo <strong>Market</strong> te permite abrir tu tienda en minutos: sube productos o servicios, fija precio en ECOIN, gestiona pedidos y cobros. Sin comisiones de plataforma, sin algoritmo que decida quien te ve. Tambien puedes usar contratos inteligentes para garantizar transacciones entre partes que no se conocen.</div>
|
||
</div>
|
||
|
||
<div class="faq-item faq-item-sub">
|
||
<button class="faq-q faq-q-sub" onclick="toggleFaqSub(this)">
|
||
¿QUE OTROS MODULOS HAY? <span class="faq-arrow">▼</span>
|
||
</button>
|
||
<div class="faq-a">Votar en el <strong>Parlamento</strong>, cobrar <strong>UBI</strong> (renta basica), gestionar tu <strong>CV</strong> y cartera digital, subir audio y video, organizar eventos, resolver conflictos en el <strong>Court</strong>, contribuir a proyectos open source con recompensas en ECOIN... mas de 40 modulos en total. Exploralos en <a href="https://demo.oasis-project.pub" target="_blank" style="color:var(--orange-neon)">demo.oasis-project.pub</a>.</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="buttons" style="margin-top:2.5rem;">
|
||
<a href="subdirectorios/overview.html" class="btn-overview">OVERVIEW & RESEARCH</a>
|
||
</div>
|
||
|
||
<div class="pub-terminal" style="margin-top:2.5rem;">
|
||
<div class="term-header">
|
||
<span class="term-prompt">⟁</span> 0ASIS PUB :: N0DE STATUS M0NIT0R
|
||
</div>
|
||
<div class="term-grid">
|
||
<div class="term-card">
|
||
<div class="term-card-head">
|
||
<span class="term-svc">⟁ SSB PUB</span>
|
||
<div class="term-indicator">
|
||
<div class="term-dot checking" id="ssb-dot"></div>
|
||
<span class="term-status checking" id="ssb-status">CH3CKING...</span>
|
||
</div>
|
||
</div>
|
||
<div class="term-row">P0RT <span>8008</span></div>
|
||
<div class="term-row">N3TW0RK <span>0ASIS F3D</span></div>
|
||
<div class="term-row" id="ssb-feeds">F33DS <span>---</span></div>
|
||
<div class="term-row" id="ssb-peers">P33RS <span>---</span></div>
|
||
</div>
|
||
<div class="term-card">
|
||
<div class="term-card-head">
|
||
<span class="term-svc">₿ 3C0IND</span>
|
||
<div class="term-indicator">
|
||
<div class="term-dot checking" id="eco-dot"></div>
|
||
<span class="term-status checking" id="eco-status">CH3CKING...</span>
|
||
</div>
|
||
</div>
|
||
<div class="term-row">P0RT <span>7408</span></div>
|
||
<div class="term-row">N3TW0RK <span>3C0IN MAIN</span></div>
|
||
<div class="term-row" id="eco-blocks">BL0CKS <span>---</span></div>
|
||
<div class="term-row" id="eco-conns">C0NNS <span>---</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="term-pubinfo">
|
||
<div class="term-pubinfo-line">
|
||
<span class="term-label">PUB KEY</span>
|
||
<span class="term-val">@Tpv8GV08SDKuYmlkNVw+wRK9AXDTS/mwxJ29qsL00rc=.ed25519</span>
|
||
</div>
|
||
<div class="term-pubinfo-line">
|
||
<span class="term-label">CONNECT</span>
|
||
<span class="term-val">net:0asis.net:8008~shs:zTmidAb7t+tKi7W93FIHbOvlbd936x6G/vm8e8Td//A=</span>
|
||
</div>
|
||
</div>
|
||
<div class="term-lastcheck" id="term-lastcheck">LAST CH3CK: ---</div>
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
<!-- Technologies -->
|
||
<section class="screen screen-3" id="technologies">
|
||
<div class="content">
|
||
<h2>TECHNOLOGIES</h2>
|
||
<div class="buttons">
|
||
<a href="subdirectorios/technologies.html" class="btn">DIVE IN</a>
|
||
<a href="https://code.03c8.net/KrakensLab/oasis/src/master/install.sh" class="btn">INSTALL</a>
|
||
</div>
|
||
|
||
<div class="card-group">
|
||
|
||
<!-- 1) SELF HOSTED & ENCRYPTED -->
|
||
<div class="card">
|
||
<h3>SELF HOSTED & ENCRYPTED</h3>
|
||
<div class="extra-info">
|
||
<p>OASIS nodes are run by individuals, not corporations. Each one is autonomous, sovereign, and resilient — no cloud, no dependencies.</p>
|
||
<img src="images/imagotipo_selfhosted.png" alt="Self-hosted logo" class="code-image" />
|
||
<p>Communication is end-to-end encrypted using the scuttlebutt protocol. Every message is signed. Every feed is verified.</p>
|
||
<img src="images/encryption.png" alt="Encrypted logo" class="code-image" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2) DECENTRALIZED & FEDERATED -->
|
||
<div class="card">
|
||
<h3>DISTRIBUTED & FEDERATED</h3>
|
||
<div class="extra-info">
|
||
<p>Data replication is social: it follows trust, not hierarchy.</p>
|
||
<img src="images/imagotipo_decentralization_simple.png" alt="Decentralized logo" class="code-image" />
|
||
<p>PUBs act as community mirrors with HTTPS frontends, making content accessible from the clearnet while preserving protocol integrity.</p>
|
||
<img src="images/imagotipo_decentralized.png" alt="Federated logo" class="code-image" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 3) BLOCKCHAIN FOR THE PEOPLE -->
|
||
<div class="card">
|
||
<h3>BLOCKCHAIN FOR THE PEOPLE</h3>
|
||
<div class="extra-info">
|
||
<p><em>"What we do in this live, echoes in eternity"</em> — immutable content for all time.</p>
|
||
<img src="images/blockchain_for_the_people.webp" alt="blockchain_for_the_people" class="code-image" />
|
||
<p><strong>ECOIN</strong> — our community token for rewards, governance, and sustainable node hosting.</p>
|
||
<a href="https://code.03c8.net/epsylon/ecoin/src/master/ecoin/INSTALL" class="btn"><img src="images/0ASIS_WEB_PEN/ecoin.webp" alt="Federated logo" class="code-image" /><a/>
|
||
<div class="buttons">
|
||
<a href="https://code.03c8.net/epsylon/ecoin/src/master/ecoin/INSTALL" class="btn">INSTALL</a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- Community -->
|
||
<section class="screen screen-4" id="community">
|
||
<div class="content">
|
||
<h2>COMMUNITY</h2>
|
||
<div class="card-group">
|
||
|
||
<a href="https://wiki.solarnethub.com/community/talks" class="card-link">
|
||
<div class="card">
|
||
<h3>SHARING</h3>
|
||
<p>Multimedia talks, workshops & live events.</p>
|
||
</div>
|
||
</a>
|
||
<a href="subdirectorios/helpout.html" class="card-link">
|
||
<div class="card">
|
||
<h3>HELP OUT</h3>
|
||
<p>See current tasks, TO:DOs and how to collaborate with OASIS.</p>
|
||
</div>
|
||
</a>
|
||
<a href="subdirectorios/larp.html" class="card-link">
|
||
<div class="card">
|
||
<h3>Roleplay</h3>
|
||
<p>Live-action role play – choose your house and shape your future.</p>
|
||
</div>
|
||
</a>
|
||
<a href="subdirectorios/maintainers.html" class="card-link">
|
||
<div class="card">
|
||
<h3>MAINTAINERS</h3>
|
||
<p>Discover the people and houses that sustain OASIS.</p>
|
||
</div>
|
||
</a>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="site-footer">
|
||
<div class="buttons">
|
||
<a href="https://copyleft.com" class="btn_main">Copyleft OASIS</a>
|
||
<a href="mailto:solarnethub@riseup.net" class="btn_main">solarnethub@riseup.net</a>
|
||
</div>
|
||
|
||
<div class="buttons">
|
||
<a href="https://oasis-project.pub/#about" class="btn_main">Overview</a>
|
||
<a href="https://oasis-project.pub/#technologies" class="btn_main">Technologies</a>
|
||
<a href="https://oasis-project.pub/#community" class="btn_main">Community</a>
|
||
</div>
|
||
<div class="buttons">
|
||
<a href="https://code.03c8.net/KrakensLab/oasis/src/master/install.sh" class="btn_main">Download</a>
|
||
<a href="https://solarnethub.com" class="btn_main">Solarnethub</a>
|
||
</div>
|
||
|
||
|
||
</footer>
|
||
|
||
<script>
|
||
function toggleFaq(btn) {
|
||
const item = btn.closest('.faq-item');
|
||
const isOpen = item.classList.contains('open');
|
||
document.querySelectorAll('.faq-section > .faq-item.open').forEach(el => el.classList.remove('open'));
|
||
if (!isOpen) item.classList.add('open');
|
||
}
|
||
|
||
function toggleFaqSub(btn) {
|
||
const item = btn.closest('.faq-item-sub');
|
||
const isOpen = item.classList.contains('open');
|
||
item.closest('.faq-nested').querySelectorAll('.faq-item-sub.open').forEach(el => el.classList.remove('open'));
|
||
if (!isOpen) item.classList.add('open');
|
||
}
|
||
|
||
async function checkPubStatus() {
|
||
document.getElementById('term-lastcheck').textContent =
|
||
'LAST CH3CK: ' + new Date().toLocaleTimeString('en-US', {hour12: false});
|
||
|
||
try {
|
||
const r = await fetch('/api/status/ssb');
|
||
if (r.ok) {
|
||
const d = await r.json();
|
||
setTerm('ssb', d.status);
|
||
if (d.feeds !== undefined)
|
||
document.getElementById('ssb-feeds').innerHTML = 'F33DS <span>' + d.feeds + '</span>';
|
||
if (d.peers !== undefined)
|
||
document.getElementById('ssb-peers').innerHTML = 'P33RS <span>' + (d.peers ?? 'N/A') + '</span>';
|
||
} else { setTerm('ssb', 'offline'); }
|
||
} catch(e) { setTerm('ssb', 'offline'); }
|
||
|
||
try {
|
||
const r = await fetch('/api/status/ecoind');
|
||
if (r.ok) {
|
||
const d = await r.json();
|
||
setTerm('eco', d.status);
|
||
if (d.blocks !== undefined)
|
||
document.getElementById('eco-blocks').innerHTML = 'BL0CKS <span>' + d.blocks + '</span>';
|
||
if (d.connections !== undefined)
|
||
document.getElementById('eco-conns').innerHTML = 'C0NNS <span>' + d.connections + '</span>';
|
||
} else { setTerm('eco', 'offline'); }
|
||
} catch(e) { setTerm('eco', 'offline'); }
|
||
}
|
||
|
||
function setTerm(id, state) {
|
||
const dot = document.getElementById(id + '-dot');
|
||
const txt = document.getElementById(id + '-status');
|
||
dot.className = 'term-dot ' + state;
|
||
txt.className = 'term-status ' + state;
|
||
txt.textContent = state === 'online' ? '0NLIN3' : '0FFLIN3';
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
checkPubStatus();
|
||
setInterval(checkPubStatus, 30000);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|