Config para el usuario

30 files changed, 367 insertions, 45 deletions

diff --git a/static/css/cyber.css b/static/css/cyber.css
index 3504641..39eee7a 100644
--- a/static/css/cyber.css
+++ b/static/css/cyber.css
@@ -52,10 +52,10 @@ input[type="submit"]:active {
   background: #1a1a1a;
   border-bottom: double 3px #989898;
   color: #989898;
-  margin: -10px -10px 0;
-  padding: 10px;
+  margin: -8px -8px 0;
+  padding: 8px;
 }
-.logo {
+#logo {
   color: #c00;
 }
 .replymode,
diff --git a/static/css/dickgirl.css b/static/css/dickgirl.css
index 9f3d4ec..da5b708 100644
--- a/static/css/dickgirl.css
+++ b/static/css/dickgirl.css
@@ -21,7 +21,7 @@ a:hover .name,
   margin: -8px -8px 0;
   padding: 8px;
 }
-.logo {
+#logo {
   color: #d3f8d3;
 }
 hr {
diff --git a/static/css/guro.css b/static/css/guro.css
index 1a74df4..cea75cf 100644
--- a/static/css/guro.css
+++ b/static/css/guro.css
@@ -19,7 +19,7 @@ a:hover .name b,
 .nav label:hover {
   color: #d00;
 }
-.logo {
+#logo {
   color: #af0a0f;
 }
 .replymode,
diff --git a/static/css/hotdog.css b/static/css/hotdog.css
index 81d271b..1e38749 100644
--- a/static/css/hotdog.css
+++ b/static/css/hotdog.css
@@ -108,8 +108,8 @@ input[type="submit"]:active, input[type="button"]:active{
   background:#fff;
   border-bottom:1px solid #000;
   color:#000;
-  margin:-10px -10px 0;
-  padding:10px
+  margin:-8px -8px 0;
+  padding:8px;
 }
 .managertable td{
   border:1px solid #000
diff --git a/static/css/ib.css b/static/css/ib.css
index 5118ebf..7ea910e 100644
--- a/static/css/ib.css
+++ b/static/css/ib.css
@@ -55,7 +55,7 @@ select,
 #search input {
   font-size: 85%;
 }
-.logo {
+#logo {
   font-size: 160%;
   font-weight: bold;
   margin: 8px 0;
@@ -294,7 +294,7 @@ body:not(.res) .thread.hidden > *,
   text-align: center;
   white-space: nowrap;
 }
-.footer {
+#footer {
   clear: both;
   margin-top: 8px;
   text-align: center;
@@ -309,12 +309,8 @@ body:not(.res) .thread.hidden > *,
 
 @media (max-width: 600px) {
   body {
-    font-size: 14px;
     padding: 4px;
   }
-  textarea {
-    font-size: 14px;
-  }
   #main_nav.mob {
     font-size: 12px;
     line-height: 1em;
@@ -380,6 +376,7 @@ body:not(.res) .thread.hidden > *,
     margin-left: 4px;
   }
   .thumb {
+    margin: 0 8px;
     max-width: 100px;
     max-height: 100px;
     object-fit: scale-down;
diff --git a/static/css/kraut.css b/static/css/kraut.css
index 5b7a862..ec1798a 100644
--- a/static/css/kraut.css
+++ b/static/css/kraut.css
@@ -27,8 +27,8 @@ a:hover .name,
 }
 #main_nav {
   background: #bbd;
-  margin: -10px -10px 0;
-  padding: 10px;
+  margin: -8px -8px 0;
+  padding: 8px;
 }
 .replymode,
 .extramode {
diff --git a/static/css/lavanda.css b/static/css/lavanda.css
index 3ba0b79..3ae7893 100644
--- a/static/css/lavanda.css
+++ b/static/css/lavanda.css
@@ -16,7 +16,7 @@ a:hover .name,
 .nav label:hover {
   color: rgb(221, 0, 129);
 }
-.logo {
+#logo {
   color: #ffccfc;
 }
 .replymode,
diff --git a/static/css/photon.css b/static/css/photon.css
index b7b487d..af8f539 100644
--- a/static/css/photon.css
+++ b/static/css/photon.css
@@ -10,7 +10,7 @@ body {
 a,
 a .name,
 a .name b,
-.logo,
+#logo,
 .nav label {
   color: #f60;
 }
diff --git a/static/css/putaba.css b/static/css/putaba.css
index 45152dc..f86cb4e 100644
--- a/static/css/putaba.css
+++ b/static/css/putaba.css
@@ -177,12 +177,12 @@ input[type="submit"].psei {
 .yt:hover {
   background: #efefef;
 }
-.footer {
+#footer {
   background: #000;
   color: #fff;
 }
-.footer a,
-.footer a:hover {
+#footer a,
+#footer a:hover {
   background: #000;
 }
 .quoted {
diff --git a/static/css/rene.css b/static/css/rene.css
index cc4a4c6..e13752b 100644
--- a/static/css/rene.css
+++ b/static/css/rene.css
@@ -20,8 +20,8 @@ a:hover .name,
 #main_nav {
   background: #d15014;
   color: #eee;
-  margin: -10px -10px 0;
-  padding: 10px;
+  margin: -8px -8px 0;
+  padding: 8px;
 }
 #main_nav a {
   color: #fff;
@@ -30,7 +30,7 @@ a:hover .name,
   color: #d15014;
   background: #fff;
 }
-.logo,
+#logo,
 .replymode,
 .extramode {
   color: #fff;
diff --git a/static/css/spc/material.css b/static/css/spc/material.css
index 02eb49e..cbae764 100644
--- a/static/css/spc/material.css
+++ b/static/css/spc/material.css
@@ -59,7 +59,7 @@ h2 span,
 .threadnav,
 hr,
 #size,
-.banner,
+#banner,
 .threadpage .postform br {
   display: none;
 }
diff --git a/static/css/spc/material_normal.css b/static/css/spc/material_normal.css
index 0c75456..7011925 100644
--- a/static/css/spc/material_normal.css
+++ b/static/css/spc/material_normal.css
@@ -56,7 +56,7 @@ h4 {
 }
 hr,
 #size,
-.banner,
+#banner,
 .threadpage .postform br {
   display: none;
 }
diff --git a/static/css/spc/navidad.css b/static/css/spc/navidad.css
index 19621bb..55177e4 100644
--- a/static/css/spc/navidad.css
+++ b/static/css/spc/navidad.css
@@ -20,7 +20,7 @@ a:hover {
   clear: both;
   float: right;
 }
-.logo {
+#logo {
   clear: both;
   text-align: center;
   font-size: 2em;
@@ -56,7 +56,7 @@ a:hover {
   color: #fff;
   font-weight: 800;
 }
-.footer {
+#footer {
   text-align: center;
   font-size: 12px;
   font-family: serif;
diff --git a/static/css/spc/valentin.css b/static/css/spc/valentin.css
index cf70219..5a96e5b 100644
--- a/static/css/spc/valentin.css
+++ b/static/css/spc/valentin.css
@@ -21,7 +21,7 @@ a:hover {
   clear: both;
   float: right;
 }
-.logo {
+#logo {
   clear: both;
   text-align: center;
   font-size: 2em;
@@ -57,7 +57,7 @@ a:hover {
   color: #2c5700;
   font-weight: 800;
 }
-.footer {
+#footer {
   text-align: center;
   font-size: 12px;
   font-family: serif;
diff --git a/static/css/spc/valentin2.css b/static/css/spc/valentin2.css
index 83f76d3..f908139 100644
--- a/static/css/spc/valentin2.css
+++ b/static/css/spc/valentin2.css
@@ -20,7 +20,7 @@ a:hover {
   clear: both;
   float: right;
 }
-.logo {
+#logo {
   clear: both;
   text-align: center;
   font-size: 2em;
@@ -58,7 +58,7 @@ a:hover {
   color: #666;
   font-weight: 800;
 }
-.footer {
+#footer {
   text-align: center;
   font-size: 12px;
   font-family: serif;
diff --git a/static/css/txt/amber.css b/static/css/txt/amber.css
index a7a1fc8..4f24254 100644
--- a/static/css/txt/amber.css
+++ b/static/css/txt/amber.css
@@ -44,7 +44,7 @@ h3:after {
 }
 h2,
 .thread .threadnav {
-  margin: 7px;
+  margin: 7px 7px 0;
 }
 h3 {
   margin: 8px 0;
diff --git a/static/css/txt/ayashii.css b/static/css/txt/ayashii.css
index bb981a9..6653a92 100644
--- a/static/css/txt/ayashii.css
+++ b/static/css/txt/ayashii.css
@@ -51,7 +51,7 @@ button {
   padding: 0 8px;
 }
 #main_nav,
-.banner {
+#banner {
   background: inherit;
   text-align: left;
   margin: 0;
@@ -162,7 +162,7 @@ form .msg {
     margin-right: 4px;
   }
   #main_nav,
-  .banner {
+  #banner {
     padding-left: 0;
   }
   h2 span {
diff --git a/static/css/txt/bbs.css b/static/css/txt/bbs.css
index a8a5a7b..622ab7e 100644
--- a/static/css/txt/bbs.css
+++ b/static/css/txt/bbs.css
@@ -77,12 +77,12 @@ button:active {
   background: #ccc;
   border-style: inset;
 }
-.banner {
+#banner {
   display: block;
   margin: 0 auto;
 }
 #rules {
-  margin: 0.5em 0;
+  margin: 0.5em 0 0 0;
 }
 code {
   font-size: 14px;
@@ -354,7 +354,7 @@ form .msg {
   body.threadpage {
     margin: 4px;
   }
-  .banner {
+  #banner {
     width: 100% !important;
     height: auto !important;
     margin-top: 1em;
diff --git a/static/css/txt/berries.css b/static/css/txt/berries.css
index 425f1ca..fd0e5a0 100644
--- a/static/css/txt/berries.css
+++ b/static/css/txt/berries.css
@@ -87,7 +87,7 @@ h4 {
   border-bottom: 1px solid #222;
   color: #7cafc2;
 }
-.banner {
+#banner {
   -webkit-filter: grayscale(60%);
   filter: grayscale(60%);
 }
diff --git a/static/css/txt/cuteanarchy.css b/static/css/txt/cuteanarchy.css
index 864cc40..a1d7935 100644
--- a/static/css/txt/cuteanarchy.css
+++ b/static/css/txt/cuteanarchy.css
@@ -84,7 +84,7 @@ h3 span {
   color: #7cafc2;
 }
 
-.banner {
+#banner {
   -webkit-filter: grayscale(60%);
   filter: grayscale(60%);
 }
diff --git a/static/css/txt/gamer.css b/static/css/txt/gamer.css
index 3079afe..9352597 100644
--- a/static/css/txt/gamer.css
+++ b/static/css/txt/gamer.css
@@ -175,7 +175,7 @@ form .msg {
 #threads td {
   color: #aaa;
 }
-.footer {
+#footer {
   color: #66B;
 }
 @media (max-width: 600px) {
diff --git a/static/css/txt/mercury.css b/static/css/txt/mercury.css
index 921ec7c..bc4273b 100644
--- a/static/css/txt/mercury.css
+++ b/static/css/txt/mercury.css
@@ -15,6 +15,9 @@ h2 a:active,
 #n2:active {
   color: #f48;
 }
+#main_nav {
+  background: #cce;
+}
 h2 a,
 h4,
 h4 a {
diff --git a/static/css/txt/void.css b/static/css/txt/void.css
index 5e9d431..38a49dc 100644
--- a/static/css/txt/void.css
+++ b/static/css/txt/void.css
@@ -11,7 +11,7 @@ body,
 #main_nav {
   background: #000;
 }
-.banner,
+#banner,
 .outerbox,
 .thread,
 #threads {
diff --git a/static/css/vndb.css b/static/css/vndb.css
index 90481f2..734bf5d 100644
--- a/static/css/vndb.css
+++ b/static/css/vndb.css
@@ -26,7 +26,7 @@ a:hover .name,
   border-bottom: none;
   text-decoration: underline;
 }
-.logo {
+#logo {
   color: #135;
   font-style: italic;
 }
@@ -110,8 +110,8 @@ hr {
   background: rgba(7, 28, 47, 0.8);
   border: 1px solid #258;
 }
-.footer,
-.footer a {
+#footer,
+#footer a {
   color: #247;
 }
 .quoted {
diff --git a/static/example/banner.jpg b/static/example/banner.jpg
new file mode 100644
index 0000000..1b87d92
--- /dev/null
+++ b/static/example/banner.jpg
diff --git a/static/example/bbs1.html b/static/example/bbs1.html
new file mode 100644
index 0000000..fdf59ba
--- /dev/null
+++ b/static/example/bbs1.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <title>Ejemplo de Bienvenido a Internet BBS</title>
+  <meta charset="utf-8">
+  <meta name="robots" content="noindex, nofollow" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="shortcut icon" href="/favicon.ico" />
+  <link rel="stylesheet" href="/static/css/txt/bbs.css" />
+  <link rel="stylesheet" id="css" href="/static/css/txt/futanari.css" />
+</head>
+<body class="mainpage">
+<div id="main_nav"><a href="#">Bienvenido a Internet</a> | <a href="#">Board 1</a> <a href="#">Board 2</a> <a href="#">Board 3</a></div>
+
+<img id="banner" src="/static/example/banner.jpg" style="width:420px;height:75px;">
+
+<div id="titlebox" class="outerbox">
+	<div class="innerbox">
+		<div class="threadnav"><a href="#">■</a><a href="#">▼</a></div>
+		<h1>Board 1@Bienvenido a Internet BBS</h1>
+		<div id="rules">Descripción del board.</div>
+	</div>
+	<div class="innerbox links"><a href="#"><b>Enlace 1</b></a> | <a href="#"><b>Enlace 2</b></a> | <a href="#"><b>Enlace 3</b></a></div>
+</div>
+
+<div class="thread">
+<div class="innerbox">
+  <div class="threadnav"><a href="#">■</a><a href="#">▲</a><a href="#">▼</a></div>
+  <h2><span>[1:3]</span><a href="#">Hilo de ejemplo</a></h2>
+  <div class="replies">
+    <div class="reply">
+      <h4>1 : <span class="name"><b>Sin Nombre</b></span> : <span class="date">01/09/93(mie)00:26:56 ID:BdsM7DCu0</span></h4>
+      <div class="msg">Mensaje de ejemplo.</div>
+    </div>
+    <div class="reply">
+      <h4>2 : <span class="name"><b>Sin Nombre</b> ◆Tripcode</span> : <span class="date">01/09/93(mie)00:30:40 ID:pBCyve6z0</span></h4>
+      <div class="msg">Mensaje de ejemplo.</div>
+    </div>
+    <div class="reply">
+      <h4>3 : <a href="#"><span class="name"><b>Sin Nombre</b></span></a> : <span class="date">01/09/93(mie)01:02:10 ID:UpB2akif4</span></h4>
+      <div class="msg">Mensaje de ejemplo.</div>
+    </div>
+  </div>
+	<form class="postform" name="postform" action="#">
+    <input type="submit" value="Responder"> <input type="button" name="preview" value="Previsualizar"> <span><span>Nombre:&nbsp;</span><input type="text" name="fielda" size="13"><span>&nbsp;E-mail:&nbsp;</span><input type="text" name="fieldb" size="13"></span>
+    <div class="formpad">
+      <textarea name="message" cols="70" rows="6"></textarea>
+      <div class="threadlinks">
+        <a href="#"><b>Hilo completo</b></a>
+        <a href="#"><b>Lista de hilos</b></a>
+        <a href="#"><b>Nuevo hilo</b></a>
+      </div>
+    </div>
+  </form>
+</div>
+</div>
+</body>
+</html>
diff --git a/static/example/bbs2.html b/static/example/bbs2.html
new file mode 100644
index 0000000..f9b4386
--- /dev/null
+++ b/static/example/bbs2.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <title>Ejemplo de Bienvenido a Internet BBS</title>
+  <meta charset="utf-8">
+  <meta name="robots" content="noindex, nofollow" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="shortcut icon" href="/favicon.ico" />
+  <link rel="stylesheet" href="/static/css/txt/bbs.css" />
+  <link rel="stylesheet" id="css" href="/static/css/txt/futanari.css" />
+</head>
+<body class="threadpage">
+<div id="thread_nav">
+  <a href="#">Bienvenido a Internet</a>
+  <a href="#">■Volver al BBS■</a>
+  <a href="#">Hilo completo</a>
+  <a href="#">▼Bajar▼</a>
+</div>
+<hr />
+<div class="thread">
+  <h3>Hilo de ejemplo <span>(3 respuestas)</span></h3>
+  <div class="replies">
+    <div class="reply">
+      <h4>1 : <span class="name"><b>Sin Nombre</b></span> : <span class="date">01/09/93(mie)00:26:56 ID:BdsM7DCu0</span></h4>
+      <div class="msg">Mensaje de ejemplo.</div>
+    </div>
+    <div class="reply">
+      <h4>2 : <span class="name"><b>Sin Nombre</b> ◆Tripcode</span> : <span class="date">01/09/93(mie)00:30:40 ID:pBCyve6z0</span></h4>
+      <div class="msg">Mensaje de ejemplo.</div>
+    </div>
+    <div class="reply">
+      <h4>3 : <a href="#"><span class="name"><b>Sin Nombre</b></span></a> : <span class="date">01/09/93(mie)01:02:10 ID:UpB2akif4</span></h4>
+      <div class="msg">Mensaje de ejemplo.</div>
+    </div>
+  </div>
+	<div id="size">0 KB</div>
+</div>
+<hr />
+<div id="lastposts"><a href="#" id="n">Ver nuevos posts</a></div>
+<hr />
+<form class="postform" name="postform" action="#">
+	<div class="threadlinks">
+		<a href="#">■Volver al BBS■</a>
+		<a href="#">Hilo completo</a>
+		<a href="#">▲Subir▲</a>
+	</div>
+	<input type="submit" value="Responder"> <input type="button" name="preview" value="Previsualizar"> <span><span>Nombre:&nbsp;</span><input type="text" name="fielda" size="13"><span>&nbsp;E-mail:&nbsp;</span><input type="text" name="fieldb" size="13"></span>
+	<br />
+	<textarea name="message" cols="80" rows="7"></textarea>
+</form>
+</div>
+</body>
+</html>
diff --git a/static/example/ib1.html b/static/example/ib1.html
new file mode 100644
index 0000000..69c5865
--- /dev/null
+++ b/static/example/ib1.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <title>Ejemplo de B.a.I. IB</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="robots" content="noindex, nofollow" />
+  <link rel="shortcut icon" href="/favicon.ico" />
+  <link rel="stylesheet" href="/static/css/ib.css" />
+  <link rel="stylesheet" id="css" href="/static/css/dickgirl.css" />
+</head>
+<body>
+<div id="main_nav"><span>[<a href="#">Bienvenido a Internet</a>] [<a href="#">Board 1</a> <a href="#">Board 2</a> <a href="#">Board 3</a>]</span></div>
+
+<div id="logo">Board 1@B.a.I. IB</div>
+
+<hr width="90%" size="1">
+
+<div class="postarea">
+<form name="postform" id="postform" action="#">
+<table class="postform">
+  <tr>
+    <td class="postblock">Asunto</td>
+    <td>
+      <input type="text" name="subject" size="35">
+      <input type="submit" value="Crear hilo">
+    </td>
+  </tr>
+  <tr>
+    <td class="postblock">Mensaje</td>
+    <td><textarea name="message" cols="40" rows="6" style="height:80px"></textarea></td>
+  </tr>
+  <tr>
+    <td colspan="2" id="rules">
+    <ul>
+      <li>Descripción del board.</li>
+      <li><a href="#">Enlace 1</a> (<a href="#">Enlace 2</a>/<a href="#">Enlace 3</a>/<a href="#">Enlace 4</a>)</li>
+    </ul>
+    </td>
+  </tr>
+</table>
+</form>
+</div>
+
+<hr />
+
+<div class="thread">
+  <div class="fs">
+    <span>Nombre de archivo:</span><a href="#" class="expimg">1234567890.gif</a>-(4000 B, 200x260)
+    <small>Imagen miniatura</small> [<a href="#" class="tt">Ocultar hilo</a>]
+  </div>
+  <a href="#"><img class="thumb" src="/basura3.gif" width="192" height="250"></a>
+  <div class="info">
+    <label><input type="checkbox" name="delete" value="1"><span class="subj">Sin asunto</span></label>
+    <span class="name"><b>Sin Nombre</b></span>
+    <span class="date">01/09/93(mie)00:00:01</span>
+    <span class="reflink"><a href="#">No.</a><a href="#">123</a></span>
+    <a class="rep" href="#">rep</a>
+    [<a href="#" class="hsbn">Responder</a>]
+  </div>
+  <blockquote>Mensaje de ejemplo.</blockquote>
+  <table>
+    <tr>
+    <td class="ell">…</td>
+    <td class="reply">
+      <div class="info">
+        <label><input type="checkbox" name="delete" value="1"></label>
+        <span class="name"><b>Sin Nombre</b></span>
+        <span class="date">01/09/93(mie)02:17:49</span>
+        <span class="reflink"><a href="#">No.</a><a href="#">127</a></span>
+        <a class="rep" href="#">rep</a>
+      </div>
+      <blockquote>Mensaje de ejemplo.</blockquote>
+    </td>
+    </tr>
+  </table>
+  <table>
+    <tr>
+    <td class="ell">…</td>
+    <td class="reply">
+      <div class="info">
+        <label><input type="checkbox" name="delete" value="1"></label>
+        <a href="#"><span class="name"><b>Sin Nombre</b></span></a>
+        <span class="date">01/09/93(mie)02:55:36</span>
+        <span class="reflink"><a href="#">No.</a><a href="#">135</a></span>
+        <a class="rep" href="#">rep</a>
+      </div>
+      <blockquote>Mensaje de ejemplo.</blockquote>
+    </td>
+    </tr>
+  </table>
+</div>
+<div class="cut"></div>
+<hr />
+<div id="footer">- <a href="#">weabot</a> -</div>
+</body>
+</html>
diff --git a/static/js/userconf.js b/static/js/userconf.js
new file mode 100644
index 0000000..985090a
--- /dev/null
+++ b/static/js/userconf.js
@@ -0,0 +1,114 @@
+var request = new XMLHttpRequest();
+
+function cargarEstilos() {
+  var api = '/cgi/api/styles';
+  request.open("GET", api, true);
+  request.send();
+}
+
+function listarEstilos(id, estilos, def) {
+	var select = document.getElementById(id);
+
+	for (var i=0; i < estilos.length; i++) {
+		var opt = document.createElement('option');
+		opt.value = estilos[i];
+		opt.textContent = estilos[i];
+		if (i == def) {
+			opt.selected = true;
+		}
+		select.appendChild(opt);
+	}
+}
+
+request.onreadystatechange = function() {
+  if (request.readyState == 4) {
+    var json = JSON.parse(request.responseText);
+    if (json.state == "success") {
+			listarEstilos('stylebbs', json.bbs_styles, json.bbs_styles_default);
+			listarEstilos('styleib', json.ib_styles, json.ib_styles_default);
+    }
+  }
+};
+
+function cambiarModo(e) {
+  var iframe = document.getElementById('examplebbs');
+  var estilo = document.getElementById('stylebbs').value;
+
+  if (this.dataset.view == '1') {
+    iframe.addEventListener('load', mostrarEstilo);
+    iframe.src = '/static/example/bbs2.html';
+    this.value = 'Ver modo frontal';
+    this.dataset.view = '2';
+  } else {
+    iframe.src = '/static/example/bbs1.html';
+    this.value = 'Ver modo respuesta';
+    this.dataset.view = '1';
+  }
+}
+
+function mostrarEstilo(e) {
+  var tipo = e.target.dataset.type;
+  if (e.target.tagName.toLowerCase() == 'iframe') {
+    var estilo = document.getElementById(('style'+tipo)).value;
+    var iframe = e.target;
+  } else {
+    var estilo = e.target.value;
+    var id = "example" + tipo;
+    var iframe = document.getElementById(id);
+  }
+
+  var css = iframe.contentDocument.getElementById('css');
+  var loc = "/static/css/";
+  if (tipo == 'bbs') {
+    loc += 'txt/';
+  }
+
+  css.href = loc + estilo.toLowerCase() + ".css";
+}
+
+function cargariframe(tipo) {
+  var iframe = document.createElement('iframe');
+  iframe.id = 'example' + tipo;
+  iframe.dataset.type = tipo;
+  iframe.addEventListener('load', cargarDatos);
+  iframe.src = '/static/example/' + tipo + '1.html';
+  var div = document.getElementById("desc" + tipo);
+  div.appendChild(document.createElement("br"));
+  div.appendChild(iframe);
+}
+
+function cargarDatos(e) {
+  var tipo = this.dataset.type;
+  var key = 'weabot_style_' + tipo;
+  if (localStorage.hasOwnProperty(key)) {
+    var estilo = localStorage.getItem(key);
+    document.getElementById(('style'+tipo)).value = estilo;
+    mostrarEstilo(e);
+    this.tabIndex = -1;
+  }
+  this.removeEventListener('load', cargarDatos);
+}
+
+function establecerEstilo(e) {
+  var key = e.target.dataset.key;
+}
+
+function init(tipo) {
+  cargariframe(tipo);
+  document.getElementById('style'+tipo).addEventListener('change', mostrarEstilo);
+  document.getElementById('set'+tipo).addEventListener('click', function() {
+    var key = 'weabot_style_' + tipo;
+    var estilo = document.getElementById(('style'+tipo)).value;
+    localStorage.setItem(key, estilo);
+  });
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+  document.getElementById("escondeme").style.display = 'none';
+
+  cargarEstilos();
+
+  document.getElementById('switchview').addEventListener('click', cambiarModo);
+  init('bbs');
+  init('ib');
+});
diff --git a/static/js/weabotxt.js b/static/js/weabotxt.js
index 2c93105..27d3cda 100644
--- a/static/js/weabotxt.js
+++ b/static/js/weabotxt.js
@@ -1,4 +1,4 @@
-var style_cookie = "weabot_style_txt";
+var style_cookie = "weabot_style_bbs";
 if (localStorage.hasOwnProperty(style_cookie)) {
   setTheme(localStorage.getItem(style_cookie));
 }