redesign screen-1 and screen-2, add pub status API and FAQ

- 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>

index.html

@@ -16,15 +16,16 @@
       <img src="images/oasis-logo.webp" alt="OASIS Logo" class="logo">
       <h1 class="main-title">OASIS</h1>
     </div>
-    <div class="intro-block">
-      <h2>YOUR FREEDOM, OUR FUTURE</h2>
+    <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>
-    </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>
@@ -34,54 +35,150 @@
   <!-- About -->
   <section class="screen screen-2" id="about">
     <div class="content">
-      <h2>ULTIMATE SOCIAL NETWORK</h2>
-      <p>It may sound radical, we are just passionate</p>
-      <div class="buttons">
-        <a href="subdirectorios/overview.html" class="btn">OVERVIEW & RESEARCH</a>
-      </div>
-    </div>
+      <h2 class="screen2-title">0asis.net <span class="screen2-subtitle">→ oasis desde cero</span></h2>
 
-    <div class="content" style="margin-top:2rem;">
-      <h2>STARS IN THE SHADE</h2>
-      <div class="card-group">
-        <div class="card">
-          <h3>OWN YOUR DATA</h3>
-          <p>Your data is key for you. You will have your data sovereignly stored and encrypted.</p>
-          <div class="extra-info">
-            <p>Oasis cares data in a truly secure, efficient, respectful and custom network, where you can also publish on the internet.</p>
-            <img src="images/your_data_our_future_candado.webp" alt="Encrypted logo" class="code-image" />
-            <p>OASIS reclaims autonomy. It reconnects people through resilient technologies, bypassing gatekeepers, and enabling a new era of decentralized empowerment — for everyone.</p>
+      <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 class="card">
-          <h3>Deeply GrassRoots</h3>
-          <p>OASIS is the long-term, deeply cared idea of a collective mind.</p>
-          <div class="extra-info">
-            <img src="images/deeply_grasroots_placa.webp" alt="Encrypted logo" class="code-image" />
-            <p>Oasis founders and maintainers feel and will feel the freedom pulse for a long time. The ideation and implementation of the infrastructure carries thought and poetry. We are pleased to feature tools that guide ecological and personal maintenance and development.</p>
+
+      </div>
+
+      <div class="buttons" style="margin-top:2.5rem;">
+        <a href="subdirectorios/overview.html" class="btn-overview">OVERVIEW &amp; 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="card">
-          <h3>Integral Sovereignity</h3>
-          <p>We care about thriving all important and basic territories of your digital life.</p>
-          <div class="extra-info">
-            <img src="images/asamblea.webp" alt="Encrypted logo" class="code-image" />
-            <p>OASIS cares about thriving all important and basic territories of your digital life. <br />OASIS offers features that guide ecological, economical, social and personal development. </p>
-	  </div>
-        </div>
-        <div class="card">
-          <h3>Open Community</h3>
-          <p>Watch us hands-on, evolve us in our forums, thrive with us, fork us.</p>
-          <div class="extra-info">
-            <img src="images/open_community_asambleas.webp" alt="Encrypted logo" class="code-image" />
-            <p>As a distributed project, we focus on evolving decentralization dynamics for the project’s caretaking. Dive in and discover new management sparks.</p>
+        <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>
-
   </section>
   <!-- Technologies -->
   <section class="screen screen-3" id="technologies">
@@ -107,9 +204,9 @@
 
         <!-- 2) DECENTRALIZED & FEDERATED -->
         <div class="card">
-          <h3>DECENTRALIZED &amp; FEDERATED</h3>
+          <h3>DISTRIBUTED &amp; FEDERATED</h3>
           <div class="extra-info">
-            <p>There is no central point of failure. Data replication is social: it follows trust, not hierarchy.</p>
+            <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" />
@@ -192,5 +289,62 @@
 
   </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>