first commit

2021-09-13 21:59:13 +02:00 · 2021-09-13 21:59:13 +02:00 · ee5a06dc3d
commit ee5a06dc3d
7 changed files with 735 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,21 @@
+# [xinu.me](https://xinu.me/)
+Sitio web de xinu.me
+
+```
+       _                              
+ __  _(_)_ __  _   _    _ __ ___   ___ 
+ \ \/ / | '_ \| | | |  | '_ ` _ \ / _ \
+  >  <| | | | | |_| | _| | | | | |  __/
+ /_/\_\_|_| |_|\__,_|(_)_| |_| |_|\___|                                        
+```
+
+Este repositorio contiene la página web de xinu.me
+
+## Contribución
+¿Quieres contribuir a este sitio web?
+
+1. Haz un fork
+
+2. Implementa tus cambios
+
+3. Envíanos un PR
--- a/css/style.css
+++ b/css/style.css
@ -0,0 +1,216 @@
+
+@-webkit-keyframes acidmove {
+  0%   {left:-10px; opacity: 0.3;}
+  5%  {left:-5px; opacity: 0.4;}
+  10%  {left:-8px; opacity: 0.3;}
+  15%  {left:-4px; opacity: 0.1;}
+  20%  {left:-5px; opacity: 0.1;}
+  25%  {left:-4px; opacity: 0.1;}
+  30%  {left:-9px; opacity: 0.2;}
+  35%  {left:-6px; opacity: 0.4;}
+  40%  {left:-3px; opacity: 0.2;}
+  45%  {left:-8px; opacity: 0.2;}
+  100% {left:-4px; opacity: 0.2;}
+}
+
+@-webkit-keyframes acidmove-retina {
+    0%   {left:-11px; opacity: 0.3;}
+    5%  {left:-6px; opacity: 0.4;}
+    10%  {left:-9px; opacity: 0.3;}
+    15%  {left:-6px; opacity: 0.1;}
+    20%  {left:-4px; opacity: 0.1;}
+    25%  {left:-4px; opacity: 0.1;}
+    30%  {left:-9px; opacity: 0.2;}
+    35%  {left:-6px; opacity: 0.4;}
+    40%  {left:-3px; opacity: 0.2;}
+    45%  {left:-8px; opacity: 0.2;}
+    100% {left:-4px; opacity: 0.2;}
+}
+
+@-webkit-keyframes static {
+  0%   {top: 0; height: 0; opacity: 0.5;}
+  10%  {top: 0; height: 10%;}
+  11%  {opacity: 0.8;}
+  12%  {opacity: 0.5;}
+  20%  {opacity: 0.3;}
+  21%  {opacity: 0.8;}
+  23%  {opacity: 0.3;}
+  41%  {opacity: 0.7;}
+  44%  {opacity: 0.6;}
+  50%  {opacity: 0.4;}
+  60%  {opacity: 0.3;}
+  61%  {opacity: 0.5;}
+  63%  {opacity: 0.6;}
+  90%  {top: 90%; height: 10%;}
+  100% {top: 100%; height: 0; opacity: 0.5;}
+}
+
+@-webkit-keyframes static-retina {
+    0%   {top: 0; height: 0; opacity: 0.5;}
+    10%  {top: 0; height: 10%;}
+    11%  {opacity: 0.7;}
+    12%  {opacity: 0.6;}
+    20%  {opacity: 0.3;}
+    21%  {opacity: 0.7;}
+    23%  {opacity: 0.3;}
+    41%  {opacity: 0.7;}
+    44%  {opacity: 0.5;}
+    50%  {opacity: 0.4;}
+    60%  {opacity: 0.3;}
+    61%  {opacity: 0.5;}
+    63%  {opacity: 0.7;}
+    90%  {top: 90%; height: 10%;}
+    100% {top: 100%; height: 0; opacity: 0.5;}
+}
+
+
+
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+html, body {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  background-color: black;
+  background-image: url('/img/broken_noise_@2X.png');
+
+  color: #00DF00;
+  font-family: 'VT323', 'Courier', monospace;
+  font-size: 26px;
+}
+
+pre {
+  margin: 0;
+}
+
+::selection {
+  background: #00DF00; /* Safari */
+  color: black;
+}
+::-moz-selection {
+  background: #ffb7b7; /* Firefox */
+}
+.content {
+  z-index: 100;
+  background-image: url('/img/line.png');
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  min-height: 100%;
+  padding-bottom: 100px;
+}
+.content:last-child {
+  z-index: 1;
+  left: -2px;
+  opacity: 0.3;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+@media (-webkit-min-device-pixel-ratio: 1) {
+.content:last-child {
+  -webkit-animation: acidmove 8s ease-in;
+  -webkit-animation-delay: 2s;
+  -webkit-animation-iteration-count: infinite;
+}
+
+.fuzz {
+  -webkit-animation: static 40s linear;
+  -webkit-animation-delay: 2s;
+  -webkit-animation-iteration-count: infinite;
+}
+}
+
+
+@media (-webkit-min-device-pixel-ratio: 2) {
+.content:last-child {
+  -webkit-animation: acidmove-retina 8s ease-in;
+  -webkit-animation-delay: 2s;
+  -webkit-animation-iteration-count: infinite;
+}
+.fuzz {
+  -webkit-animation: static-retina 40s linear;
+  -webkit-animation-delay: 2s;
+  -webkit-animation-iteration-count: infinite;
+}
+
+
+
+}
+
+.fuzz {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(80,80,80,0.2);
+  z-index: 20;
+  height: 0;
+  transform: translate3d(0,0,0);
+  pointer-events: none;
+}
+
+.content:last-child .fuzz {
+  display: none;
+}
+
+.logo-area {
+  text-align: center;
+  margin-top: 60px;
+  text-shadow: 0 0 20px #00DF00;
+}
+.logo {
+  display: inline-block;
+  text-align: left;
+}
+.logo-area-quote {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.instructions-wrapper {
+  text-align: center;
+  margin-top: 50px;
+  margin-bottom: 10px;
+}
+.instructions {
+  display: inline-block;
+  width: 40em;
+  text-align: left;
+}
+.green {
+  color: #00DF00;
+  text-shadow: 0 0 20px #00DF00;
+}
+.white{
+  color: white;
+  text-shadow: 0 0 20px rgba(255,255,255,0.5);
+}
+.cyan {
+  color: #00E3E3;
+  text-shadow: 0 0 20px #00E3E3;
+}
+.yellow {
+  color: #E7E700;
+  text-shadow: 0 0 20px #E7E700;
+}
+.magenta {
+  color: #E100E1;
+  text-shadow: 0 0 20px #E100E1;
+}
+ul,
+ol {
+  list-style: none;
+}
--- a/css/style2.css
+++ b/css/style2.css
@ -0,0 +1,148 @@
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+html, body {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  background-color: black;
+
+  color: #00DF00;
+  font-family: 'VT323', 'Courier', monospace;
+  font-size: 26px;
+}
+
+pre {
+  margin: 0;
+}
+
+::selection {
+  background: #00DF00; /* Safari */
+  color: black;
+}
+::-moz-selection {
+  background: #ffb7b7; /* Firefox */
+}
+.content {
+  z-index: 100;
+  background-image: url('/img/line.png');
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  min-height: 100%;
+  padding-bottom: 100px;
+}
+.content:last-child {
+  z-index: 1;
+  left: -2px;
+  opacity: 0.3;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+@media (-webkit-min-device-pixel-ratio: 1) {
+.content:last-child {
+  -webkit-animation: acidmove 8s ease-in;
+  -webkit-animation-delay: 2s;
+  -webkit-animation-iteration-count: infinite;
+}
+
+.fuzz {
+  -webkit-animation: static 40s linear;
+  -webkit-animation-delay: 2s;
+  -webkit-animation-iteration-count: infinite;
+}
+}
+
+
+@media (-webkit-min-device-pixel-ratio: 2) {
+.content:last-child {
+  -webkit-animation: acidmove-retina 8s ease-in;
+  -webkit-animation-delay: 2s;
+  -webkit-animation-iteration-count: infinite;
+}
+.fuzz {
+  -webkit-animation: static-retina 40s linear;
+  -webkit-animation-delay: 2s;
+  -webkit-animation-iteration-count: infinite;
+}
+
+
+
+}
+
+.fuzz {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: rgba(80,80,80,0.2);
+  z-index: 20;
+  height: 0;
+  transform: translate3d(0,0,0);
+  pointer-events: none;
+}
+
+.content:last-child .fuzz {
+  display: none;
+}
+
+.logo-area {
+  text-align: center;
+  margin-top: 60px;
+  text-shadow: 0 0 20px #00DF00;
+}
+.logo {
+  display: inline-block;
+  text-align: left;
+}
+.logo-area-quote {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.instructions-wrapper {
+  text-align: center;
+  margin-top: 50px;
+  margin-bottom: 10px;
+}
+.instructions {
+  display: inline-block;
+  width: 40em;
+  text-align: left;
+}
+.green {
+  color: #00DF00;
+  text-shadow: 0 0 20px #00DF00;
+}
+.white{
+  color: white;
+  text-shadow: 0 0 20px rgba(255,255,255,0.5);
+}
+.cyan {
+  color: #00E3E3;
+  text-shadow: 0 0 20px #00E3E3;
+}
+.yellow {
+  color: #E7E700;
+  text-shadow: 0 0 20px #E7E700;
+}
+.magenta {
+  color: #E100E1;
+  text-shadow: 0 0 20px #E100E1;
+}
+ul,
+ol {
+  list-style: none;
+}
--- a/faq.html
+++ b/faq.html
@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet" type="text/css">
+  <link href="css/style.css" rel="stylesheet" type="text/css">
+  <title>xinu.me</title>
+</head>
+
+<body>
+<div class="content" id="content-node">
+  <div class="fuzz"></div>
+  <div class="logo-area">
+    <pre class="logo">
+       _                                
+ __  _(_)_ __  _   _    _ __ ___   ___ 
+ \ \/ / | '_ \| | | |  | '_ ` _ \ / _ \
+  >  <| | | | | |_| | _| | | | | |  __/
+ /_/\_\_|_| |_|\__,_|(_)_| |_| |_|\___|
+                                        
+    </pre>
+    <blockquote class="logo-area-quote white">&quot;pequeño sistema UNIX de acceso público&quot;</blockquote>
+  </div>
+  <div class="instructions-wrapper">
+    <div class="instructions">
+
+      <h3>¿Quieres unirte?¡Estaremos encantados de conocerte!</h3>
+      <p>
+      Echa un ojo <a href="inscripcion.html" class="cyan">aquí</a>.
+      </p>
+
+      <h3>Ya estoy en xinu.me, ¿ahora qué?</h3>
+      <p>
+      Nos gustaría que xinu.me tuviese un gran espíritu de comunidad. Mientras redactamos unas 
+      normas de netiqueta para los recien llegados...
+      <ol class="green">
+        <li><span class="white">-</span> ¡NO PIRATEES EL GIBSON!</li>
+        <li><span class="white">-</span> Nada de dramas. Se respetuoso. Diviértete. Nos estamos esforzando y estamos todos juntos en esto.</li>
+      </ol>
+      </p>
+      
+      <h3>Vale, lo he pillado: no seas un capullo. Pero... ¿cómo hago cosas?</h3>
+      <p>
+        <a href="tutorial.html" class="cyan">Aquí</a> podrás encontrar un pequeño tutorial introductorio con lo más básico.
+
+      </p>
+     
+      <h3>Estamos deseando conocerte</h3>
+      <pre>
+                \||/
+                |  @___oo
+      /\  /\   / (__,,,,|
+     ) /^\) ^\/ _)
+     )   /^\/   _)
+     )   _ /  / _)
+ /\  )/\/ ||  | )_)
+<  >      |(,,) )__)
+ ||      /    \)___)\
+ | \____(      )___) )___
+  \______(_______;;; __;;;
+      </pre>
+
+      <br><span class="green">100% compatible con Lynx. En serio.</span>
+    </div>
+  </div>
+</div>
+
+<script>
+  var p = document.getElementById("content-node");
+  var p_prime = p.cloneNode(true);
+  document.body.appendChild(p_prime);
+</script>
+
+</body>
+</html>
--- a/index.php
+++ b/index.php
@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet" type="text/css">
+  <link href="css/style.css" rel="stylesheet" type="text/css">
+  <title>xinu.me</title>
+</head>
+
+<body>
+<div class="content" id="content-node">
+  <div class="fuzz"></div>
+  <div class="logo-area">
+    <pre class="logo">
+       _                                
+ __  _(_)_ __  _   _    _ __ ___   ___ 
+ \ \/ / | '_ \| | | |  | '_ ` _ \ / _ \
+  >  <| | | | | |_| | _| | | | | |  __/
+ /_/\_\_|_| |_|\__,_|(_)_| |_| |_|\___|
+                                        
+    </pre>
+    <blockquote class="logo-area-quote white">&quot;pequeño sistema UNIX de acceso público&quot;</blockquote>
+  </div>
+  <div class="instructions-wrapper">
+    <div class="instructions">
+      <p>
+      xinu.me no es una red social. Es una comunidad experimental para socializar, desarrollar habilidades digitales y colaborar a través de la shell del sistema.<br>
+      </p>
+      <strong>PRINCIPIOS:</strong>
+      <ul style="margin-top:0px">
+          <li>
+            <strong class="yellow">FUERA DE LA WEB:</strong>
+            Aunque los usuarios puede crear sitios web, cápsulas gemini y contenido gopher, lo interesante pasa en la línea de comandos donde tu controlas quién ve tu contenido.
+          </li>
+          <li>
+            <strong class="yellow">DIY:</strong>
+            El entorno UNIX facilita la "fabricación" de tus propias herramientas.
+          </li>
+          <li>
+            <strong class="yellow">MINIMALISMO:</strong>
+            xine.me corre sobre un VPS con 1 GB de RAM y 30 GB de disco duro. Usando interfaces basadas en texto se minimiza el consumo de recursos. 
+          </li>
+          <li>
+            <strong class="yellow">NO COMERCIAL:</strong>
+            Sin cuota de miembro, sin publicidad y nadie crea un perfil con tus movimientos online para venderlo. En xine.me pagas tu cuota de miembro participando en la comunidad, creando cosas molonas, testeando lo que crearon otros miembros y enseñando a otros lo que sabes. 
+          </li>
+          <li>
+            <strong class="yellow">ASÍNCRONO:</strong>
+            Aunque puedes usar el IRC para la comunicación en tiempo real, mucha de la interacción es asíncrona en el sentido de que puedes ver lo que están haciendo el resto de usuarios, darle unas vueltas y luego comentarlo en el BBS tranquílamente, sin prisa.
+          </li>
+      </ul>
+      <p>
+        Inspirado fuertemente por los principios del <a href="https://tildeverse.org/" class="cyan">"tildeverso"</a> y el servidor tilde <a href="https://rawtext.club/" class="cyan">rawtext.club</a>.
+      </p>
+      <span class="green">Enlaces de interés:</span><br>
+      
+        <ol class="green">
+          <li>1. <a href="faq.html" class="cyan">FAQ</a></li>
+          <li>2. <a href="inscripcion.html" class="cyan">Inscríbete</a>!</li>
+
+        </ol>
+      
+      <span class="yellow">USUARIOS:</span><br>
+        <ul style="margin-top:0px;">
+<?php
+$homes = preg_grep('/^([^.])/', scandir("/home/"));
+foreach ($homes as $user){
+    if ($user != '.' or $user != ".."){
+        echo '<li><a href="https://xinu.me/~'.$user.'" class="cyan">~'.$user.'</a></li>';
+    }
+}
+?>
+        </ul>
+      <br><span class="green">100% compatible con Lynx. En serio.</span>
+    </div>
+  </div>
+</div>
+
+<script>
+  var p = document.getElementById("content-node");
+  var p_prime = p.cloneNode(true);
+  document.body.appendChild(p_prime);
+</script>
+
+</body>
+</html>
--- a/inscripcion.html
+++ b/inscripcion.html
@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet" type="text/css">
+  <link href="css/style.css" rel="stylesheet" type="text/css">
+  <title>xinu.me</title>
+</head>
+
+<body>
+<div class="content" id="content-node">
+  <div class="fuzz"></div>
+  <div class="logo-area">
+    <pre class="logo">
+       _                                
+ __  _(_)_ __  _   _    _ __ ___   ___ 
+ \ \/ / | '_ \| | | |  | '_ ` _ \ / _ \
+  >  <| | | | | |_| | _| | | | | |  __/
+ /_/\_\_|_| |_|\__,_|(_)_| |_| |_|\___|
+                                        
+    </pre>
+    <blockquote class="logo-area-quote white">&quot;pequeño sistema UNIX de acceso público&quot;</blockquote>
+  </div>
+  <div class="instructions-wrapper">
+    <div class="instructions">
+      <h4 class="yellow">Solicitar una cuenta:</h4>
+      <p>
+      Para solicitar una cuenta de usuario en xinu.me envíame un email a serxoz en xinu.me con los siguientes datos:
+      </p>
+      <ol class="green">
+        <li>1. Un nombre de <span class="white">usuario</span> que te mole.</li>
+        <li>2. Tu clave ssh <span class="white">pública</span>.</li>
+        <li>3. Tu <span class="white">shell</span> favorita, si es que tienes alguna.</li>
+      </ol>
+      <p>
+      Cuentanos también algo de tí, intereses o como has oído hablar de xinu.me
+      </p>
+      <h4 class="yellow">Como conectarte:</h4>
+      <p>
+      Desde linux puedes generar tu clave pública así:<br>
+      <code class="white">
+        mkdir ~/.ssh || ssh-keygen -t rsa -b 2048 -f ~/.ssh/xinu.me
+      </code>
+      <br><br>
+      Así podrás enviarme por email el archivo <span class="white">~/.ssh/xinu.me.pub</span> y podrás configurar tu archivo <span class="white">~/.ssh/config</span> con el siguiente  contenido para conectarte por ssh sin tener que especificar la clave privada:<br>
+      <code class="white">
+        Host xinu.me<br>
+        &nbsp;&nbsp;&nbsp;&nbsp;IdentityFile ~/.ssh/xinu.me
+      </code>
+      <br><br>
+      Ahora ya podrás acceder por SSH al sistema:<br>
+      <code class="white">
+        ssh <tu_usuario>@xinu.me
+      </code>
+      </p>
+      <br><span class="green">100% compatible con Lynx. En serio.</span>
+    </div>
+  </div>
+</div>
+
+<script>
+  var p = document.getElementById("content-node");
+  var p_prime = p.cloneNode(true);
+  document.body.appendChild(p_prime);
+</script>
+
+</body>
+</html>
--- a/tutorial.html
+++ b/tutorial.html
@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet" type="text/css">
+  <link href="css/style.css" rel="stylesheet" type="text/css">
+  <title>xinu.me</title>
+</head>
+
+<body>
+<div class="content" id="content-node">
+  <div class="fuzz"></div>
+  <div class="logo-area">
+    <pre class="logo">
+       _                                
+ __  _(_)_ __  _   _    _ __ ___   ___ 
+ \ \/ / | '_ \| | | |  | '_ ` _ \ / _ \
+  >  <| | | | | |_| | _| | | | | |  __/
+ /_/\_\_|_| |_|\__,_|(_)_| |_| |_|\___|
+                                        
+    </pre>
+    <blockquote class="logo-area-quote white">&quot;pequeño sistema UNIX de acceso público&quot;</blockquote>
+  </div>
+  <div class="instructions-wrapper">
+    <div class="instructions">
+
+      <h3>¡Bienvenido!</h3>
+      <p>
+      ¿Nuevo con la línea de comandos y todo la movida web? ¡Estás de suerte! Aquí encontrarás un pequeño tutorial básico al estilo "Hola Mundo".
+      </p>
+
+      <h3>Iniciando sesión</h3>
+      <pre>
+       _______________________________________
+      / Bienvenido a xinu.me! Un lugar para   \
+      \ alojar tus páginas web.               /
+       ---------------------------------------
+              \   ^__^
+               \  (oo)\_______
+                  (__)\       )\/\
+                      ||----w |
+                      ||     ||
+      </pre>
+      <p>
+        <ol class="green">
+          <li>1. En un Mac abre la aplicación Terminal, en un Windows necesitas un cliente SSH.
+          <a href="https://www.putty.org/" class="cyan">PuTTY</a> es una buena opción.</li>
+          <li>2. Teclea: <span class="white">ssh tuusuariomolón@xinu.me</span> y pulsa la tecla "Entrar".</li>
+          <li>3. Teclea <span class="white">tuclave</span> y pulsa la tecla "Entrar".</li>
+
+        </ol>
+      </p>
+      
+      <h3>Encuentra tu archivo index.hml</h3>
+      <p>
+      Hay varios comandos básicos que querrás aprender, pero para este tutorial solo necesitarás unos pocos:
+      </p>
+      <ol class="green">
+        <li><span class="white">ls</span> sirve para listar los archivos en el directorio actual.</li>
+        <li><span class="white">cd</span> sirve para cambiar de directorio.</li>
+        <li><span class="white">nano</span> es un editor de línea de comandos.</li>
+      </ol>
+
+      <ol class="green">
+        <li>1. Teclea: <span class="white">ls</span> y pulsa "Entrar" para ver donde estás. Deberías
+        ver un directorio llamado "public_html".</li>
+        <li>2. Teclea: <span class="white">cd public_html</span> y pulsa "Entrar" para moverte a ese directorio.</li>
+        <li>3. Teclea: <span class="white">ls</span> y pulsa "Entrar" para ver donde estás. Deberías
+        ver tu archivo index.html.</li>
+      </ol>
+      
+      <h3>Edita tu archivo index.html</h3>
+      <ol class="green">
+        <li>1. Teclea: <span class="white">nano index.html</span> y pulsa "Entrar" para abrir tu archivo
+          index.html y empezar a editarlo.</li>
+        <li>2. Edita tu archivo, quiera o no quiera :D</li>
+        <li>3. Cuando acabes, usa <span class="white">CTRL+X</span> para cerrar el archivo.</li>
+        <li>4. Te preguntará si quieres guardarlo; responde <span class="white">y</span> y pulsa "Entrar"
+        para volver a la línea de comandos.</li>
+        <li>5. Refresca tu página https://xinu.me/~<span class="white">tuusuariomolón</span> en tu navegador y verás tu nuevo sitio web. </li>
+      </ol>
+      
+      <h3>Actualiza la vista de tu editor</h3>
+      <p>
+      Te pueden haber pillado con la guardia baja mientras editabas algún archivo y algún mensaje
+      aleatorio de chat la ha liado con tu vista. No la ha liado realmente y tu página HTML no
+      se ha editado pero necesitas refrescar la vista de tu editor.
+      Para ello:
+      <ol class="green">
+        <li>1. <span class="white">CTRL+L</span> refrescará tu vista.</li>
+      </ol>
+      </p>
+      
+      <h3>Charlar</h3>
+      <p>
+      Mientras estás en la línea de comandos puedes participar en el chat. Si hay algún chat o bien,
+      si tienes alguna duda.
+      </p>
+      <ol class="green">
+        <li>1. Teclea: <span class="white">wall</span> y pulsa "Entrar" para decirle a tu shell que 
+          estás listo para chatear.</li>
+        <li>2. Teclea tu mensaje y pulsa "Entrar".</li>
+        <li>3. Teclea <span class="white">CTRL+D</span> para enviar el mensaje o <span class="white">CTRL+C</span> si quieres cancelarlo.</li>
+        <li>4. ¡Diviértete!</li>
+      </ol>
+      
+      <br><span class="green">100% compatible con Lynx. En serio.</span>
+    </div>
+  </div>
+</div>
+
+<script>
+/*
+  var p = document.getElementById("content-node");
+  var p_prime = p.cloneNode(true);
+  document.body.appendChild(p_prime);
+*/
+</script>
+
+</body>
+</html>