From 9afea99ded04b1acb0fdb54548728025267f618e Mon Sep 17 00:00:00 2001
From: Fernando <tbyuyfcjjll@gmail.com>
Date: Thu, 20 Dec 2018 10:13:36 -0500
Subject: [PATCH] Benditos commits

---
 .gitignore                                   |   5 +-
 public/cambios.yaml                          | 221 +++++++++++++++++++
 src/components/Anime/BarraTitulo.vue         |   2 +-
 src/components/Anime/Tarjeta.vue             |   6 +-
 src/components/AnimeView/BarraLateral.vue    |   4 +-
 src/components/AnimeView/Contenido.vue       |  97 ++++----
 src/components/AnimeView/NavBar.vue          |   2 -
 src/components/AnimeView/anuncioLocal.vue    |   3 +-
 src/components/AnimeView/ayudaMini.vue       |   6 +-
 src/components/AnimeView/panelDeDescarga.vue | 121 ++++++----
 src/components/AnimeView/proximoEpisodio.vue |   6 +-
 src/components/ListaDeCambios/Cambio.vue     |  21 +-
 src/components/entrada-reciente.vue          |   3 +-
 src/components/features-card.vue             |   2 +-
 src/components/slider-reciente.vue           |   8 +-
 src/components/tarjeta-menu-princ.vue        |   4 +-
 src/components/titulo-principal.vue          |  17 +-
 src/global.ts                                |   6 +-
 src/sass/main.sass                           |  38 +++-
 src/views/Administracion.vue                 |  64 +++---
 src/views/Anime.vue                          |   5 +-
 src/views/AnimeView.vue                      |   8 +-
 src/views/Inicio.vue                         |   4 +-
 src/views/ListaDeCambios.vue                 |   9 +-
 24 files changed, 491 insertions(+), 171 deletions(-)

diff --git a/.gitignore b/.gitignore
index 544074f..271881e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,4 +22,7 @@ yarn-error.log*
 
 # Archivos para el deploy
 *.js
-*.js.map
\ No newline at end of file
+*.js.map
+
+# Archivos de Materialize
+/src/materialize/
\ No newline at end of file
diff --git a/public/cambios.yaml b/public/cambios.yaml
index e69de29..731b18e 100644
--- a/public/cambios.yaml
+++ b/public/cambios.yaml
@@ -0,0 +1,221 @@
+- version: 4.0
+  fecha: 0
+  cambioGrande: true
+  datos:
+    nuevo:
+      - Sistema de Versiones Semántica
+      - Cambio de paradigma y nomenclatura
+      - 'Los episodios tendrán 3 apartados: Resolución, Formato y modificadores (ligero y 60fps)'
+      - Todas las URLs siguen el mismo patron /Anime/:nombre
+      - La página ha sido reescrita (de nuevo) y es una bala. Por ello, eliminamos la pantalla de carga.
+      - Agregadas estadisticas y anuncios en la Barra Lateral
+      - ¡Modo oscuro!
+      - Nuevo Logo
+      - Simplificación de fuentes en la página
+      - Cambio de fuentes en los animes
+    funciona mejor:
+      - Horas y fechas de episodios nuevos
+      - Todos los animes tienen su esquema de color
+      - Arreglo en el sistema de links
+      - Mejora en la ayuda, fecha de los episodios, y panel de descarga
+    libre de insectos:
+      - Toda la página se verá igual
+      - MEGA para versiones ligeras
+    la caja negra:
+      - Cambio de JSON a YAML
+      - Uso de Base de Datos Relacional
+      - Implementación de una API
+      - Backend con Nodejs, TypeScript y Express
+      - FrontEnd con Vuejs
+- version: 3.14
+  fecha: 29/06/18
+  cambios:
+  - Añadida una barra de progreso en las Entradas Recientes de la Página Principal
+  - Automatización mediante Lua
+- version: 3.13
+  fecha: 19/06/18
+  cambios:
+  - Implementamos H265 como prueba en Overlord III
+  - H265 solo estará disponible en versiones 'ligeras'
+- version: 3.12
+  fecha: 19/06/18
+  cambios:
+  - Arreglada la página de error 404 (de nuevo).
+  - Arreglado error de visualizacion de Anime y Novelas en móviles.
+  - Agregados colores en Google Chrome para movil en algunas páginas.
+  - Agregados los animes de Verano 2018.
+  - Nomenclatura simplificada. Los videos en HardSubs pasan a llamarse MP4, y los SoftSubs serán MKV.
+  - Ahora MKV será 1080p, y MP4 será 720p.
+  - Arreglo de errores en el sistema de links.
+  - Experimentos con codec de video H.265. Hasta un 66% menos de tamaño del video, la misma calidad.
+  - Arreglado el comportamiento de las entradas recientes en la página principal.
+  - Los animes ahora se obtienen desde un lugar centralizado, y se reparten.
+- version: 3.11
+  fecha: 28/05/18
+  cambios:
+  - Sistema de Links Actualizado
+  - Ya no usaremos ningún acortador (goo.gl o bit.ly).
+  - El propio sistema realiza un conteo de los accesos.
+  - El propio sistema realiza las redirecciones.
+  - Mejoras de rendimiento.
+  - Opción de Ver Online removida, por compatibilidad.
+  - Favicon actualizado.
+  - GitHub en la barra de navegación.
+  - Nuevas direcciones para los Animes
+  - pseudosubs.com/Anime/TemporadaAño/Anime cambia a ->
+  - pseudosubs.com/Anime/Año/Temporada/Anime
+
+- version: 3.10.1
+  fecha: 19/05/18
+  cambios:
+  - Eliminada opción de Torrent.
+- version: 3.10
+  fecha: 18/05/18
+  cambios:
+  - Arreglado el comportamiento del sistema de links
+  - Antes, si un episodio faltaba, el link de descarga se mostraba con un '!' o nada; ahora no hay link, y muestra un aviso de 'no disponible'.
+  - A partir de ahora, los archivos .ass se subirán a nyaa, y tendrán un apartado en su respectiva página para su descarga.
+  - ¡Ahora usamos Git y GitHub!
+- version: 3.9
+  fecha: 12/05/18
+  cambios:
+  - Arreglada la numeración para animes cuyo episodio inicial no es el numero 1
+  - Dejamos de usar MEGA para la mayoría de eps.
+  - A partir de ahora, Soft (MKV) será en 1080p y Hard (MP4) será en 720p. Bastante lógico.
+  - Añadidas las pantallas de carga para los animes recientes.
+- version: 3.8
+  fecha: 11/05/18
+  cambios:
+  - Añadida opción de búsqueda en el índce de Animes
+- version: 3.6
+  fecha: 07/04/18
+  cambios:
+  - Cambios en la forma de uso de JS.
+  - Ahora el episodio siguiente y los anuncios se manejan qunto con el sistema de links.
+- version: 3.5.3
+  fecha: 05/04/18
+  cambios:
+  - Arreglada la redirección 404.
+  - Cambios en la fuente del titulo de la Barra de Navegación
+  - Arreglado un error que impedía entrar a la página de Mahou Shoujo Site en el índice de Anime
+- version: 3.4
+  fecha: 23/03/18
+  cambios:
+  - Cambios en el comportamiento de la Barra Lateral
+  - Opción de ver auto sostenible.
+- version: 3.3
+  fecha: 13/03/18
+  cambios:
+  - Hosting con AwardSpace
+  - Uso de un Sistema de Links automático.
+- version: 3.2.3
+  fecha: 25/02/18
+  cambios:
+  - Arreglado el comportamiento de la Barra Lateral
+  - Añadida ayuda para descargar.
+  - La fecha y hora de los nuevos episodios se puede esconder
+- version: 3.1.8
+  fecha: 166/02/18
+  cambios:
+  - Cambio de hosting a Hostinger
+  - Arreglado Bug en la página de inicio
+  - Arreglado Bug en Sobre Nosotros
+  - Arregladas las imagenes de la paginas de inicio
+  - Agregado Changelog
+- version: 3.0
+  fecha: 05/02/18
+  cambioGrande: true
+  cambios:
+  - ¡Nuevo Estilo!
+  - Dejamos Blogger.
+  - Desarrollamos y mantenemos nuestra página desde 0 sin ningún gestor de contenidos.
+  - Inclusión de Materialize css
+  - Inclusión de HTML, CSS, JS, PHP, JSON
+  - Hosting en Hostinger.
+- version: 2.6
+  fecha: 04/01/18
+  cambios:
+  - Arreglos y mejoras en pausa hasta Marzo.
+- version: 2.5
+  fecha: 19/12/17
+  cambios:
+  - Volvemos a Windows.
+  - Dando ultimos toques a la re-estructuración de la página
+- version: 2.4
+  fecha: 13/12/17
+  cambios:
+  - Mudanza a GNU/Linux
+- version: 2.2.1
+  fecha: 22/10/17
+  cambios:
+  - Arreglo de errores en las horas
+  - Eliminamos el temporizador
+- version: 2.2
+  fecha: 21/10/17
+  cambios:
+  - Removida la opción de ver online.
+  - Eliminamos Powr.io
+  - Añadidos fecha del episodio siguiente, hora de publicación, y tiempo restante para los animes
+  - Usaremos OneDrive y MP4 para versiones Hard.
+- version: 2.1.2
+  fecha: 01/09/17
+  cambios:
+  - Retirada la versión para móviles
+  - Añadida opción de ver online.
+  - Inicio de la reconstrucción de la página
+- version: 2.1.1
+  fecha: 26/07/17
+  cambios:
+  - Inclusión de HTML5, CSS3 y JS
+  - Versión especial para móviles (alpha)
+- version: 2.1
+  fecha: 08/07/17
+  cambios:
+  - Añadido Disqus para los comentarios.
+- version: 2.0.1
+  fecha: 13/06/17
+  cambios:
+  - Cambios en la ortografía de algunas palabras
+- version: 2.0
+  fecha: 12/06/17
+  cambioGrande: true
+  cambios:
+  - Tenemos dominio propio 'pseudosubs.com'. ¡Yay!
+- version: 1.3.3
+  fecha: 02/06/17
+  cambios:
+  - Corregido el logo en la barra de pestañas del navegador.
+- version: 1.3.2
+  fecha: 02/06/07
+  cambios:
+  - Links para las carpetas de MEGA
+- version: 1.3
+  fecha: 27/04/17
+  cambios:
+  - PseudoLoad, sistema para traducir y subir los episodios más rápido.
+- version: 1.2.1
+  fecha: 20/05/17
+  cambios:
+  - Implementamos Powr.io
+- verison: 1.0.1
+  fecha: 20/04/17
+  cambios:
+    - ¡Salimos de ßeta!
+    - Ahora traducimos los subtítulos desde el inglés.
+- version: 0.51
+  fecha: 13/04/17
+  beta: true
+  cambios:
+    - Obtenemos mayor ancho de banda.
+    - ¡No mas publicidad!
+- version: 0.35
+  fecha: 25/03/17
+  beta: true
+  cambios:
+    - Inicia el proyecto PseudoSubs Beta
+    - Añadimos karaokes de openings y endings sobre subtitulos en español.
+- version: 0.1
+  fecha: 09/02/17
+  beta: true
+  cambios:
+    - Creacion Oficial
\ No newline at end of file
diff --git a/src/components/Anime/BarraTitulo.vue b/src/components/Anime/BarraTitulo.vue
index 8faee31..3b4675f 100644
--- a/src/components/Anime/BarraTitulo.vue
+++ b/src/components/Anime/BarraTitulo.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="barra caja">
+    <div class="barra caja background2 colorTexto">
         Anime
     </div>
 </template>
diff --git a/src/components/Anime/Tarjeta.vue b/src/components/Anime/Tarjeta.vue
index f98b128..69913a0 100644
--- a/src/components/Anime/Tarjeta.vue
+++ b/src/components/Anime/Tarjeta.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="caja tarjeta" >
+    <div class="caja tarjeta background2 colorTexto">
         <div class="center-on-small">
             <span>
-                <router-link :to="link" class="tarjeta--nombre" >
+                <router-link :to="link" class="tarjeta--nombre colorTexto" >
                     {{ titulo }}
                 </router-link>
             </span>
@@ -67,7 +67,7 @@
         family: Muli, "Open Sans", serif
         weight: bold
         size: xx-large
-    color: black
+    // color: black
     transition: color 100ms
     &:hover
         color: #23bf87
diff --git a/src/components/AnimeView/BarraLateral.vue b/src/components/AnimeView/BarraLateral.vue
index 7deeccb..1a9c345 100644
--- a/src/components/AnimeView/BarraLateral.vue
+++ b/src/components/AnimeView/BarraLateral.vue
@@ -1,5 +1,7 @@
 <template>
-    $END$
+    <div class="caja colorTexto background2">
+        Esta es la barra lateral.
+    </div>
 </template>
 
 <script>
diff --git a/src/components/AnimeView/Contenido.vue b/src/components/AnimeView/Contenido.vue
index 1182d9b..b833301 100644
--- a/src/components/AnimeView/Contenido.vue
+++ b/src/components/AnimeView/Contenido.vue
@@ -1,52 +1,52 @@
 <template>
-    <div>
-        <div class="caja contenido">
+    <div class="caja contenido background2 colorTexto">
 
-            <div class="contenido--titulo">
-                {{ datos.titulo }}
+        <div class="contenido--titulo">
+            {{ datos.titulo }}
+        </div>
+        <br>
+        <div class="contenido--contenedor-imagen">
+            <img :src="datos.imgUrl" :alt="datos.titulo" class="responsive-img">
+        </div>
+        <br>
+        <div class="contenido--descripcion">
+            {{ datos.descripcion }}
+        </div>
+        <div class="contenido--datos">
+            <div class="contenido--datos--titulo" :style="'color: ' + color">
+                Datos adicionales
+            </div>
+            <div class="contenido--datos--descripcion">
+                Capitulos: {{ datos.eps }} <br>
+                Al Aire: {{ datos.alAire }} <br>
+                Temporada: {{ datos.temporada }} <br>
+                Estudio: {{ datos.estudio }} <br>
+                Fuente: {{ datos.fuente }} <br>
+                Generos: {{ datos.generos }} <br>
+                <br>
+                Openings:<br>
+                <template v-for="(op, index) in datos.OP">
+                    <div class="espaciado">{{ index }} : {{ op }}</div>
+                </template>
+                Endings:<br>
+                <template v-for="(op, index) in datos.ED">
+                    <div class="espaciado">{{ index }} : {{ op }}</div>
+                </template>
             </div>
             <br>
-            <div class="contenido--contenedor-imagen">
-                <img :src="datos.imgUrl" :alt="datos.titulo" class="responsive-img">
-            </div>
+            <ayuda-mini :color="color" :nombre-anime="datos.titulo" />
             <br>
-            <div class="contenido--descripcion">
-                {{ datos.descripcion }}
-            </div>
-            <div class="contenido--datos">
-                <div class="contenido--datos--titulo" :style="'color: ' + color">
-                    Especificaciones tecnicas
-                </div>
-                <div class="contenido--datos--descripcion">
-                    Capitulos: {{ datos.eps }} <br>
-                    Al Aire: {{ datos.alAire }} <br>
-                    Temporada: {{ datos.temporada }} <br>
-                    Estudio: {{ datos.estudio }} <br>
-                    Fuente: {{ datos.fuente }} <br>
-                    Generos: {{ datos.generos }} <br>
-                    <br>
-                    Openings:<br>
-                    <template v-for="(op, index) in datos.OP">
-                        <div class="espaciado">{{ index }} : {{ op }}</div>
-                    </template>
-                    Endings:<br>
-                    <template v-for="(op, index) in datos.ED">
-                        <div class="espaciado">{{ index }} : {{ op }}</div>
-                    </template>
-                </div>
-                <br>
-                <ayuda-mini :color="color" :nombre-anime="datos.titulo" />
-                <br>
-                <proximo-episodio :color="color" />
-                <br>
-                <anuncio-global />
-                <anuncio-local :mensaje="datosAnime.aviso"/>
-                <br>
-                <panel-de-descarga :color="color" :nombre="datos.titulo" :datos="datosAnimeLinksOpciones"/>
-
-            </div>
+            <proximo-episodio :color="color" />
+            <br>
+            <anuncio-global />
+            <anuncio-local :mensaje="datosAnime.aviso"/>
+            <br>
+            <panel-de-descarga :color="color" :nombre="datos.titulo" :datos="datosAnimeLinksOpciones"
+                               :datos-correctos="datosAnimeCorrectos"
+                               :mostrar-spinner-para-carga-de-eps="mostrarSpinnerParaCargaDeEps"/>
 
         </div>
+
     </div>
 </template>
 
@@ -66,7 +66,9 @@
             return {
                 datosAnime: {},
                 datosAnimeLinksOpciones: {},
-                datosAnimeListos: false
+                datosAnimeListos: false,
+                datosAnimeCorrectos: false,
+                mostrarSpinnerParaCargaDeEps: true
             }
         },
         props: {
@@ -98,11 +100,16 @@
             xhr.onload = () => {
 
                 const data = YAML.parse(xhr.responseText);
-                console.log("La data es:");
-                console.log(xhr.responseText);
                 if (data.opciones) {
                     vm.datosAnime = data;
                     vm.datosAnimeLinksOpciones = data["opciones"];
+                    vm.datosAnimeCorrectos = true;
+                } else {
+                    vm.datosAnime = {
+                        aviso: 'Hubo un error al obtener los episodios. Inténtalo de nuevo mas tarde.'
+                    };
+                    vm.mostrarSpinnerParaCargaDeEps = false;
+                    console.log("Error al recibir los eps del anime.");
                 }
 
             };
diff --git a/src/components/AnimeView/NavBar.vue b/src/components/AnimeView/NavBar.vue
index d33db52..6427c33 100644
--- a/src/components/AnimeView/NavBar.vue
+++ b/src/components/AnimeView/NavBar.vue
@@ -20,8 +20,6 @@
             <div class="col s12 enMedio">
                 <router-link to="/" class="breadcrumb" style="margin-left: 20px">Inicio</router-link>
                 <router-link to="/Anime/" class="breadcrumb enMedio">Anime</router-link>
-                <router-link :to="'/Anime/' + anio" class="breadcrumb hide-on-small-only enMedio">{{ anio }}</router-link>
-                <router-link :to="'/Anime/' + anio + '/' + temporada" class="breadcrumb hide-on-small-only enMedio">{{ temporada }}</router-link>
                 <router-link to="" class="breadcrumb enMedio" style="cursor: default">{{ nombre }}</router-link>
             </div>
         </div>
diff --git a/src/components/AnimeView/anuncioLocal.vue b/src/components/AnimeView/anuncioLocal.vue
index e7f35f3..28f9629 100644
--- a/src/components/AnimeView/anuncioLocal.vue
+++ b/src/components/AnimeView/anuncioLocal.vue
@@ -3,14 +3,13 @@
 </template>
 
 <script lang="ts">
-    /* TODO: Hacer que el anuncio este basado en los datos de la BBDD */
 
     export default {
         name: "anuncioLocal",
         props: {
             mensaje: {
                 type: String,
-                default: "O no hay novedades, o se están cargando..."
+                default: "Cargando los episodios..."
             }
         }
     }
diff --git a/src/components/AnimeView/ayudaMini.vue b/src/components/AnimeView/ayudaMini.vue
index 71e9e85..dc907bc 100644
--- a/src/components/AnimeView/ayudaMini.vue
+++ b/src/components/AnimeView/ayudaMini.vue
@@ -3,7 +3,7 @@
         <div class="ayuda__titulo" :style="'background-color: ' + color">
             ¿Cómo descargar/abrir?
         </div>
-        <div class="ayuda__contenido">
+        <div class="ayuda__contenido background1">
             <ol class="ayuda__contenido__lista">
                 <li>Escoge un formato y resolución. Soft/Hard y 720p/1080p</li>
                 <li>Descarga el episodio que desees, o la carpeta completa. No te preocupes, no usamos ningun acortador.</li>
@@ -54,8 +54,8 @@
         border-radius: 5px
 
     .ayuda__contenido
-        background-color: rgb(238, 238, 238)
-        color: black
+        // background-color: rgb(238, 238, 238)
+        // color: black
         font-family: "Open Sans", sans-serif
         display: block
         text-align: left
diff --git a/src/components/AnimeView/panelDeDescarga.vue b/src/components/AnimeView/panelDeDescarga.vue
index 216d1e0..3606a00 100644
--- a/src/components/AnimeView/panelDeDescarga.vue
+++ b/src/components/AnimeView/panelDeDescarga.vue
@@ -1,44 +1,61 @@
 <template>
-    <div class="panel">
-        <div class="panel__titulo" :style="'background-color: ' + color">
-            Descarga aquí.<br>
-            <div class="panel__titulo__variantes">
+    <div>
+        <div class="panel" v-if="datosCorrectos">
+            <div class="panel__titulo" :style="'background-color: ' + color">
+                Descarga aquí.<br>
+                <div class="panel__titulo__variantes">
 
-                <template v-for="(opcion, indice) in datos">
-                    <div class="panel__titulo__variantes__variante hoverable"
-                         :style="indice === '1'? `background-color: ${opcion.color}` : ''"
-                         v-on:click="cambiarDescripcionDescarga(indice)" :color-min="opcion.color"
-                         :id="`opcion${indice}`">
-                        {{ opcion.formato }} {{ opcion.res }}<br>{{ opcion.servidor }}
-                    </div>
-                </template>
-
-            </div>
-
-        </div>
-        <div class="panel__descripcion">
-
-            <template v-for="(opcion, indice) in datos">
-
-                <div :id="`tarjeta${indice}`" :style="indice !== '1'? 'display: none' : ''">
-
-                    <div class="panel__descripcion__titulo" :style="'color: ' + color">
-                        Links<br>
-                    </div>
-                    Todos los links se abren en una pestaña nueva.<br>
-                    <span v-for="(ep, num) in opcion.eps" class="panel__descripcion__link">
-                        <br>
-                        Episodio {{ num }} ->
-                        <a :href="ep.link" target="_blank" :style="'color: ' + color"
-                           @mousedown.stop="incrementarContador(ep.ep_ID, $event)">
-                            {{ ep.peso }}
-                        </a>
-                    </span>
+                    <template v-for="(opcion, indice) in datos">
+                        <div class="panel__titulo__variantes__variante hoverable"
+                             :style="indice === '1'? `background-color: ${opcion.color}` : ''"
+                             v-on:click="cambiarDescripcionDescarga(indice)" :color-min="opcion.color"
+                             :id="`opcion${indice}`">
+                            {{ opcion.formato }} {{ opcion.res }}<br>{{ opcion.servidor }}
+                        </div>
+                    </template>
 
                 </div>
 
-            </template>
+            </div>
+            <div class="panel__descripcion background__panel-descarga">
 
+                <template v-for="(opcion, indice) in datos">
+
+                    <div :id="`tarjeta${indice}`" :style="indice !== '1'? 'display: none' : ''">
+
+                        <div class="panel__descripcion__titulo" :style="'color: ' + color">
+                            Links<br>
+                        </div>
+                        Todos los links se abren en una pestaña nueva.<br>
+                        <span v-for="(ep, num) in opcion.eps" class="panel__descripcion__link">
+                    <br>
+                    Episodio {{ num }} ->
+                    <a :href="ep.link" target="_blank" :style="'color: ' + color"
+                       @mousedown.stop="incrementarContador(ep.ep_ID, $event)">
+                        {{ ep.peso }}
+                    </a>
+                </span>
+
+                    </div>
+
+                </template>
+
+            </div>
+        </div>
+        <div v-else class="center">
+            <div class="preloader-wrapper small active" v-if="mostrarSpinnerParaCargaDeEps">
+                <div class="spinner-layer" :style="'border-color: ' + color">
+                    <div class="circle-clipper left">
+                        <div class="circle"></div>
+                    </div>
+                    <div class="gap-patch">
+                        <div class="circle"></div>
+                    </div>
+                    <div class="circle-clipper right">
+                        <div class="circle"></div>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -66,37 +83,51 @@
                 default: function () {
                     return {};
                 }
+            },
+            datosCorrectos: {
+                type: Boolean
+            },
+            mostrarSpinnerParaCargaDeEps: {
+                type: Boolean
             }
         },
         methods: {
-            cambiarDescripcionDescarga (idDestino) {
+            cambiarDescripcionDescarga(idDestino) {
+                const quitarClase = (nombre, nombreClase) => {
+                    const posInicial = nombre.indexOf(nombreClase);
+                    if (posInicial !== -1)
+                        return nombre.substring(0, posInicial-1);
+                    else
+                        return nombre
+                };
+
                 const elemAnterior = document.getElementById(`tarjeta${this.posActual}`);
                 const elemNuevo = document.getElementById(`tarjeta${idDestino}`);
 
                 const opcionAnterior = document.getElementById(`opcion${this.posActual}`);
                 const opcionNueva = document.getElementById(`opcion${idDestino}`);
 
-                console.log("posicionActual es " + this.posActual + " y pronto sera " + idDestino);
-
                 if (elemNuevo && elemAnterior && opcionAnterior && opcionNueva) {
                     this.posActual = idDestino;
 
                     elemAnterior.style.display = "none";
                     opcionAnterior.style.backgroundColor = "transparent";
+                    opcionAnterior.className = quitarClase(opcionNueva.className, "panel__titulo__variantes__variante--activa");
 
                     elemNuevo.style.display = "block";
                     opcionNueva.style.backgroundColor = opcionNueva.getAttribute("color-min");
+                    opcionNueva.className += " panel__titulo__variantes__variante--activa";
 
                 } else {
                     console.log("Woah, elemNuevo && elemAnterior && opcionAnterior && opcionNueva no se cumple...\n" +
                         elemNuevo + " " + elemAnterior + " " + opcionAnterior + " " + opcionNueva);
                 }
             },
-            incrementarContador (ep_ID, evento) {
+            incrementarContador(ep_ID, evento) {
 
                 const xhr = new XMLHttpRequest();
-                xhr.open("PUT","/links");
-                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
+                xhr.open("PUT", "/links");
+                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                 xhr.onload = () => {
                     console.log(xhr.responseText);
                 };
@@ -135,9 +166,13 @@
         size: large
         weight: normal
 
+.panel__titulo__variantes__variante--activa
+    font-weight: bold
+    text-decoration: underline
+
 .panel__descripcion
     padding: 25px 15px
-    background-color: #f2f2f2
+    // background-color: #f2f2f2
 
 .panel__descripcion__titulo
     font:
@@ -149,6 +184,6 @@
     a
         font-weight: bold
 
-
 .panel
+    border-radius: 3px
 </style>
\ No newline at end of file
diff --git a/src/components/AnimeView/proximoEpisodio.vue b/src/components/AnimeView/proximoEpisodio.vue
index 9b7972b..a14e0e2 100644
--- a/src/components/AnimeView/proximoEpisodio.vue
+++ b/src/components/AnimeView/proximoEpisodio.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="proximo">
+    <div class="proximo sombraCaja">
         <div class="proximo__titulo" :style="'background-color: ' + color">
             Próximo Episodio: fecha
         </div>
@@ -34,12 +34,12 @@
         border-radius: 5px
 
     .proximo__contenido
-        color: black
+        // color: black
         text-align: center
         font-size: x-large
         padding: 10px
 
     .proximo
         border-radius: 5px
-        box-shadow: 2px 2px 2px darkgrey
+        // box-shadow: 2px 2px 2px darkgrey
 </style>
\ No newline at end of file
diff --git a/src/components/ListaDeCambios/Cambio.vue b/src/components/ListaDeCambios/Cambio.vue
index b7a2be8..b15da37 100644
--- a/src/components/ListaDeCambios/Cambio.vue
+++ b/src/components/ListaDeCambios/Cambio.vue
@@ -1,13 +1,26 @@
 <template>
-    $END$
+    <div>
+        <span class="titulo">
+            PseudoSubs
+        </span>
+    </div>
 </template>
 
 <script>
     export default {
-        name: "Cambio"
+        name: "Cambio",
+        props: {
+            data: {
+                type: Object
+            }
+        }
     }
 </script>
 
-<style scoped>
-
+<style scoped lang="sass">
+.titulo
+    color: #23bf87
+    font:
+        weight: bold
+        size: x-large
 </style>
\ No newline at end of file
diff --git a/src/components/entrada-reciente.vue b/src/components/entrada-reciente.vue
index fcaeec6..3410820 100644
--- a/src/components/entrada-reciente.vue
+++ b/src/components/entrada-reciente.vue
@@ -2,7 +2,7 @@
     <div :class="oculto? 'mi-slider--contenido-oculto': 'mi-slider--contenido'" :id="'entrada' + id">
         <div>
             <span>
-                <router-link :to="link" class="mi-slider--contenido--titulo">
+                <router-link :to="link" class="mi-slider--contenido--titulo colorTexto">
                     {{ titulo }}
                 </router-link>
             </span>
@@ -50,7 +50,6 @@
     opacity: 0
 
 .mi-slider--contenido--titulo
-    color: #151515
     font:
         family: Muli, 'Product Sans', serif
         size: x-large
diff --git a/src/components/features-card.vue b/src/components/features-card.vue
index 3e728e2..c1f454c 100644
--- a/src/components/features-card.vue
+++ b/src/components/features-card.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="caja features">
+    <div class="caja features background2 colorTexto">
         <span class="features--titulo">
             Nosotros hacemos el trabajo sucio, tú disfrutas.
         </span>
diff --git a/src/components/slider-reciente.vue b/src/components/slider-reciente.vue
index e90bf3c..981df8d 100644
--- a/src/components/slider-reciente.vue
+++ b/src/components/slider-reciente.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="mi-slider">
-        <div class="mi-slider--titulo">
+    <div class="mi-slider background2 sombraCaja colorTexto">
+        <div class="mi-slider--titulo colorPrincipal">
             ¡Entradas Recientes!
         </div>
 
@@ -115,9 +115,9 @@
 <style scoped lang="sass">
 .mi-slider
     text-align: center
-    background-color: white
+    // background-color: white
     margin: 10px 0
-    box-shadow: 2px 2px 2px darkgrey
+    // box-shadow: 2px 2px 2px darkgrey
     border-radius: 3px
     padding: 15px
 
diff --git a/src/components/tarjeta-menu-princ.vue b/src/components/tarjeta-menu-princ.vue
index 814d7aa..d1e89b7 100644
--- a/src/components/tarjeta-menu-princ.vue
+++ b/src/components/tarjeta-menu-princ.vue
@@ -1,13 +1,13 @@
 <template>
     <div class="col s12 m6" :class="aLaIzq? 'tarjeta-izq': 'tarjeta-der'">
-        <div class="card hoverable tarjeta" v-on:click="goTo(url)">
+        <div class="card hoverable tarjeta background2" v-on:click="goTo(url)">
             <div class="card-image">
                 <img :src="imgUrl" class="noSelectionBackground">
                 <router-link :to="url" class="btn-floating halfway-fab waves-effect waves-light teal lighten-1">
                     <i class="material-icons">arrow_forward</i>
                 </router-link>
             </div>
-            <div class="card-content">
+            <div class="card-content colorTexto">
                 <span class="card-title noSelectionBackground tarjeta--titulo">
                     {{ titulo }}
                 </span>
diff --git a/src/components/titulo-principal.vue b/src/components/titulo-principal.vue
index e44a25a..a8c84e4 100644
--- a/src/components/titulo-principal.vue
+++ b/src/components/titulo-principal.vue
@@ -1,10 +1,11 @@
 <template>
-    <div>
-        <div id="titulo-contenedor">
+    <div style="padding-top: 10px">
+        <div id="titulo-contenedor" class="background2 colorTexto">
             <div class="hide-on-small-only">
                 <br>
             </div>
-            <router-link to="/" id="titulo">PseudoSubs</router-link>
+            <!--<img src="/img/pseudo-logo.svg" width="100"/>-->
+            <router-link to="/" id="titulo" class="colorTexto sombraTitulo">PseudoSubs</router-link>
             <div class="hide-on-small-only">
                 <br>
             </div>
@@ -28,14 +29,14 @@ export default Vue.extend({
         size: 50px
         weight: bold
     text-align: center
-    background-color: white
-    margin: 10px 0
-    box-shadow: 2px 2px 2px darkgrey
+    // background-color: inherit
+    margin: 0 0 10px 0
+    box-shadow: inherit
     border-radius: 3px
 
 #titulo
-    color: #434343
-    text-shadow: 2px 2px 0 #ffffff, 6px 6px 0 #DDDDDD
+    // color: #434343
+    // text-shadow: 2px 2px 0 #ffffff, 6px 6px 0 #DDDDDD
     transition: color 100ms
     &:hover
         color: #23bf87
diff --git a/src/global.ts b/src/global.ts
index a0a81be..5d36b00 100644
--- a/src/global.ts
+++ b/src/global.ts
@@ -1,3 +1,5 @@
 export let global = {
-    color: '#23bf87'
-};
\ No newline at end of file
+    color: '#228453'
+};
+
+export let esModoOscuro = true;
\ No newline at end of file
diff --git a/src/sass/main.sass b/src/sass/main.sass
index 003dbc4..b6706cf 100644
--- a/src/sass/main.sass
+++ b/src/sass/main.sass
@@ -10,8 +10,12 @@
   font-style: normal
   font-weight: bold
 
+// Colores para el modo oscuro
+// body ->  background-color: black
+// caja ->  background-color: #1c1c1c
+//          color: #d2d2d2
+
 body
-  background-color: #eeeeee
   font:
     family: "Open Sans", serif
     size: large
@@ -20,8 +24,34 @@ body
   user-select: none
 
 .caja
-  background-color: white
   margin: 10px 0
-  box-shadow: 2px 2px 2px darkgrey
   border-radius: 3px
-  padding: 15px
\ No newline at end of file
+  padding: 15px
+
+.background1
+  //
+  background-color: black
+
+.background2
+  //
+  background-color: #101010
+
+.background__panel-descarga
+  // background-color: #f2f2f2
+  background-color: #1d1d1d
+
+.colorTexto
+  //
+  color: #d2d2d2
+
+.sombraCaja
+  //
+  // box-shadow: 2px 2px 2px #353535
+
+.sombraTitulo
+  // text-shadow: 2px 2px 0 #ffffff, 6px 6px 0 #DDDDDD
+  text-shadow: 2px 2px 0 #373737, 6px 6px 0 #414141
+
+.colorPrincipal
+  // color: #23bf87
+  color: #22a170
\ No newline at end of file
diff --git a/src/views/Administracion.vue b/src/views/Administracion.vue
index d6cd729..2633613 100644
--- a/src/views/Administracion.vue
+++ b/src/views/Administracion.vue
@@ -1,42 +1,44 @@
 <template>
-    <div class="container">
-        <div class="caja">
-            Administracion. <br>
-            No voy a hacer muchas cosas por ahora porque esto es para mi :p <br>
-            <br>
-            <button class="btn" @click="verTodosLosAnimes">
-                Ver todos los animes
-            </button>
-            <br>
-            <br>
-            <form @submit.prevent>
-                Nombre del Anime:
-                <input type="text" placeholder="Nombre del anime">
-                <button class="btn">
-                    Buscar
+    <div class="background1">
+        <div class="container" style="padding-top: 10px">
+            <div class="caja colorTexto background2" style="margin-top: 0">
+                Administracion. <br>
+                No voy a hacer muchas cosas por ahora porque esto es para mi :p <br>
+                <br>
+                <button class="btn" @click="verTodosLosAnimes">
+                    Ver todos los animes
                 </button>
-            </form>
+                <br>
+                <br>
+                <form @submit.prevent>
+                    Nombre del Anime:
+                    <input type="text" placeholder="Nombre del anime">
+                    <button class="btn">
+                        Buscar
+                    </button>
+                </form>
+                <br>
+                <br>
+
+                <lista-animes :lista-animes="listaAnimes" />
+
+            </div>
+            <br>
+            <div class="caja colorTexto background2">
+
+                <button class="btn" @click="mostrarCrearAnime">Crear un anime</button>
+                <br>
+                <crear-anime :render="crearAnime" />
+                <br>
+                <br>
+            </div>
+            <br>
             <br>
             <br>
-
-            <lista-animes :lista-animes="listaAnimes" />
-
-        </div>
-        <br>
-        <div class="caja">
-
-            <button class="btn" @click="mostrarCrearAnime">Crear un anime</button>
             <br>
-            <crear-anime :render="crearAnime" />
             <br>
             <br>
         </div>
-        <br>
-        <br>
-        <br>
-        <br>
-        <br>
-        <br>
     </div>
 </template>
 
diff --git a/src/views/Anime.vue b/src/views/Anime.vue
index 8ab7d8f..0d6dba0 100644
--- a/src/views/Anime.vue
+++ b/src/views/Anime.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="background1">
         <div class="container">
             <titulo-principal />
             <barra-titulo />
@@ -23,6 +23,7 @@
     import BarraTitulo from '../components/Anime/BarraTitulo.vue'
     import Tarjeta from '../components/Anime/Tarjeta.vue'
     import MiFooter from '../components/mi-footer.vue'
+    import { global } from "../global";
 
     export default {
         name: "Anime",
@@ -38,6 +39,8 @@
             'mi-footer': MiFooter
         },
         created: function () {
+            global.color = '#22a170';
+
             if (window.indiceAnimes[0]) {
                 console.log("Existe we v:");
                 console.log(window.indiceAnimes);
diff --git a/src/views/AnimeView.vue b/src/views/AnimeView.vue
index 7ecdba8..ebaa4c3 100644
--- a/src/views/AnimeView.vue
+++ b/src/views/AnimeView.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="background1">
         <nav-bar
                 :variante="'Anime'"
                 :anio="parseInt(this.$route.params.anio)"
@@ -19,9 +19,7 @@
 
             </div>
             <div class="col l4 hide-on-med-and-down">
-                <div class="caja">
-                    we
-                </div>
+                <barra-lateral />
             </div>
         </div>
         <mi-footer />
@@ -31,6 +29,7 @@
 <script>
     import ComponenteCarga from '../components/comp-cargando.vue';
     import { global } from "../global";
+    import BarraLateral from '../components/AnimeView/BarraLateral.vue';
 
     export default {
         name: "AnimeView",
@@ -47,6 +46,7 @@
             'mi-footer': () => ({
                 component: import('../components/mi-footer')
             }),
+            'barra-lateral': BarraLateral
         },
         data: function () {
             return {
diff --git a/src/views/Inicio.vue b/src/views/Inicio.vue
index 650d752..c5ad1e5 100644
--- a/src/views/Inicio.vue
+++ b/src/views/Inicio.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="background1">
         <div class="container">
             <titulo-principal />
             <slider-reciente />
@@ -48,7 +48,7 @@ export default {
         'mi-footer': footer
     },
     created: function () {
-        global.color = '#23bf87';
+        global.color = '#22a170';
     }
 }
 </script>
diff --git a/src/views/ListaDeCambios.vue b/src/views/ListaDeCambios.vue
index f65673d..fb76303 100644
--- a/src/views/ListaDeCambios.vue
+++ b/src/views/ListaDeCambios.vue
@@ -5,7 +5,9 @@
         <div class="container row">
             <div class="col l8 m12 s12">
                 <div class="caja contenido">
-                    Hmmph
+
+                    <cambio :data="'0.1'" />
+
                 </div>
             </div>
             <div class="col l4 hide-on-med-and-down">
@@ -22,13 +24,16 @@
 <script>
     import NavBar from '../components/AnimeView/NavBar.vue'
     import MiFooter from '../components/mi-footer.vue'
+    import Cambio from '../components/ListaDeCambios/Cambio.vue'
     import { global } from "../global";
+    const YAML = require('yaml');
 
     export default {
         name: "ListaDeCambios",
         components: {
             'nav-bar': NavBar,
-            'mi-footer': MiFooter
+            'mi-footer': MiFooter,
+            cambio: Cambio
         },
         created: function () {
             global.color = '#23bf87';