Terminada funcionalidad entradas recientes

.editorconfig

@@ -0,0 +1,9 @@
+[*]
+indent_style = space
+indent_size = 4
+
+[*.vue]
+indent_size = 2
+
+[*.coffee]
+indent_size = 2

.gitignore

@@ -19,3 +19,7 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw*
+
+# Archivos de desarrollo del servidor
+/srv/*/**.js
+/srv/*/**.js.map

package.json

@@ -4,20 +4,29 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build"
+    "build": "vue-cli-service build",
+    "express": "vue-cli-service express:watch",
+    "express:run": "vue-cli-service express:run"
   },
   "dependencies": {
+    "mysql": "^2.16.0",
     "register-service-worker": "^1.6.2",
     "vue": "^2.6.6",
     "vue-router": "^3.0.1",
-    "vuex": "^3.0.1"
+    "vuex": "^3.0.1",
+    "yaml": "^1.4.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.0.5",
     "@vue/cli-plugin-pwa": "^3.0.5",
     "@vue/cli-service": "^3.0.5",
+    "coffee-loader": "^0.9.0",
+    "coffeescript": "^2.3.2",
     "node-sass": "^4.9.0",
+    "pug": "^2.0.3",
+    "pug-plain-loader": "^1.0.0",
     "sass-loader": "^7.1.0",
+    "vue-cli-plugin-express": "^1.0.0",
     "vue-template-compiler": "^2.5.21"
   },
   "postcss": {

public/img/github.svg

@@ -0,0 +1,27 @@
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     width="438.549px" height="438.549px" viewBox="0 0 438.549 438.549" style="enable-background:new 0 0 438.549 438.549;"
+     xml:space="preserve">
+<g>
+	<path fill="#434343" d="M409.132,114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736,15.166,259.057,5.365,219.271,5.365
+		c-39.781,0-76.472,9.804-110.063,29.408c-33.596,19.605-60.192,46.204-79.8,79.8C9.803,148.168,0,184.854,0,224.63
+		c0,47.78,13.94,90.745,41.827,128.906c27.884,38.164,63.906,64.572,108.063,79.227c5.14,0.954,8.945,0.283,11.419-1.996
+		c2.475-2.282,3.711-5.14,3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567,1.136
+		c-4.187,0.767-9.469,1.092-15.846,1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559
+		c-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559
+		c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997
+		c-0.572-1.335-0.098-2.43,1.427-3.289c1.525-0.859,4.281-1.276,8.28-1.276l5.708,0.853c3.807,0.763,8.516,3.042,14.133,6.851
+		c5.614,3.806,10.229,8.754,13.846,14.842c4.38,7.806,9.657,13.754,15.846,17.847c6.184,4.093,12.419,6.136,18.699,6.136
+		c6.28,0,11.704-0.476,16.274-1.423c4.565-0.952,8.848-2.383,12.847-4.285c1.713-12.758,6.377-22.559,13.988-29.41
+		c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126
+		c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035,7.52-42.637,22.557-58.817
+		c-7.044-17.318-6.379-36.732,1.997-58.24c5.52-1.715,13.706-0.428,24.554,3.853c10.85,4.283,18.794,7.952,23.84,10.994
+		c5.046,3.041,9.089,5.618,12.135,7.708c17.705-4.947,35.976-7.421,54.818-7.421s37.117,2.474,54.823,7.421l10.849-6.849
+		c7.419-4.57,16.18-8.758,26.262-12.565c10.088-3.805,17.802-4.853,23.134-3.138c8.562,21.509,9.325,40.922,2.279,58.24
+		c15.036,16.18,22.559,35.787,22.559,58.817c0,16.178-1.958,30.497-5.853,42.966c-3.9,12.471-8.941,22.457-15.125,29.979
+		c-6.191,7.521-13.901,13.85-23.131,18.986c-9.232,5.14-18.182,8.85-26.84,11.136c-8.662,2.286-18.415,4.004-29.263,5.146
+		c9.894,8.562,14.842,22.077,14.842,40.539v60.237c0,3.422,1.19,6.279,3.572,8.562c2.379,2.279,6.136,2.95,11.276,1.995
+		c44.163-14.653,80.185-41.062,108.068-79.226c27.88-38.161,41.825-81.126,41.825-128.906
+		C438.536,184.851,428.728,148.168,409.132,114.573z"/>
+</g>
+</svg>
+

public/img/githubOsc.svg

@@ -0,0 +1,27 @@
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     width="438.549px" height="438.549px" viewBox="0 0 438.549 438.549" style="enable-background:new 0 0 438.549 438.549;"
+     xml:space="preserve">
+<g>
+	<path fill="#d1d1d1" d="M409.132,114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736,15.166,259.057,5.365,219.271,5.365
+		c-39.781,0-76.472,9.804-110.063,29.408c-33.596,19.605-60.192,46.204-79.8,79.8C9.803,148.168,0,184.854,0,224.63
+		c0,47.78,13.94,90.745,41.827,128.906c27.884,38.164,63.906,64.572,108.063,79.227c5.14,0.954,8.945,0.283,11.419-1.996
+		c2.475-2.282,3.711-5.14,3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567,1.136
+		c-4.187,0.767-9.469,1.092-15.846,1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559
+		c-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559
+		c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997
+		c-0.572-1.335-0.098-2.43,1.427-3.289c1.525-0.859,4.281-1.276,8.28-1.276l5.708,0.853c3.807,0.763,8.516,3.042,14.133,6.851
+		c5.614,3.806,10.229,8.754,13.846,14.842c4.38,7.806,9.657,13.754,15.846,17.847c6.184,4.093,12.419,6.136,18.699,6.136
+		c6.28,0,11.704-0.476,16.274-1.423c4.565-0.952,8.848-2.383,12.847-4.285c1.713-12.758,6.377-22.559,13.988-29.41
+		c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126
+		c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035,7.52-42.637,22.557-58.817
+		c-7.044-17.318-6.379-36.732,1.997-58.24c5.52-1.715,13.706-0.428,24.554,3.853c10.85,4.283,18.794,7.952,23.84,10.994
+		c5.046,3.041,9.089,5.618,12.135,7.708c17.705-4.947,35.976-7.421,54.818-7.421s37.117,2.474,54.823,7.421l10.849-6.849
+		c7.419-4.57,16.18-8.758,26.262-12.565c10.088-3.805,17.802-4.853,23.134-3.138c8.562,21.509,9.325,40.922,2.279,58.24
+		c15.036,16.18,22.559,35.787,22.559,58.817c0,16.178-1.958,30.497-5.853,42.966c-3.9,12.471-8.941,22.457-15.125,29.979
+		c-6.191,7.521-13.901,13.85-23.131,18.986c-9.232,5.14-18.182,8.85-26.84,11.136c-8.662,2.286-18.415,4.004-29.263,5.146
+		c9.894,8.562,14.842,22.077,14.842,40.539v60.237c0,3.422,1.19,6.279,3.572,8.562c2.379,2.279,6.136,2.95,11.276,1.995
+		c44.163-14.653,80.185-41.062,108.068-79.226c27.88-38.161,41.825-81.126,41.825-128.906
+		C438.536,184.851,428.728,148.168,409.132,114.573z"/>
+</g>
+</svg>
+

public/index.html

@@ -1,17 +1,19 @@
 <!DOCTYPE html>
-<html lang="en">
-  <head>
+<html lang="es">
+<head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>pseudosubs5</title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but pseudosubs5 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+          rel="stylesheet">
+    <title>PseudoSubs</title>
+</head>
+<body>
+<noscript>
+    <strong>¿Qué esto, la edad de piedra? Activa JavaScript y actualiza tu navegador v:&langd;</strong>
+</noscript>
+<div id="app"></div>
+<!-- built files will be auto injected -->
+</body>
 </html>

src/App.vue

@@ -1,29 +1,72 @@
-<template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view/>
-  </div>
+<template lang="pug">
+  div#app
+    div.fondo.fondo2
+    barra-lateral
+    div.contenido(:class="$store.state.barraLateralOculta? 'contenido--barraOculta' : ''", :barra-oculta="$store.state.barraLateralOculta.toString()")
+      router-view
+
 </template>
 
-<style lang="scss">
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-#nav {
-  padding: 30px;
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
-</style>
+<script lang="coffee">
+  import "./assets/sass/global.sass"
+  import "./assets/sass/modo-claro.sass"
+  import barraLateral from "./components/barra-lateral.vue"
+  import YAML from "yaml"
+
+  DEV = process.env.NODE_ENV == "development"
+
+  export default
+    name: "App"
+    data: ->
+      largoVentana: window.innerWidth
+    components:
+      'barra-lateral': barraLateral
+    created: ->
+      if @$store.state.animes[0]?
+        #
+      else
+        store = @$store
+        fetch("/anime")
+          .then((x) -> x.text())
+          .then (res) ->
+            # if DEV then console.log res
+            resultado = YAML.parse res
+
+            if resultado.exito
+              store.commit "establecerAnime", resultado.payload
+            else
+              console.log "Error al obtener los animes.\n#{res}"
+      #
+
+</script>
+
+<style lang="sass">
+  @import "./assets/sass/variables"
+
+  .fondo
+    width: 100%
+    height: 100%
+    top: 0
+    left: 0
+    position: fixed
+    z-index: 0
+
+  .contenido
+    width: 100%
+    position: absolute
+    padding-left: $largo
+    z-index: 1
+
+  .contenido--barraOculta
+    padding-left: $largoTablet
+
+  @media only screen and (max-width: $tablet)
+    .contenido
+      padding-left: $largoTablet
+
+  @media only screen and (max-width: $movil)
+    .contenido
+      padding-left: $largoMovil
+      padding-bottom: $bajoMovil
+
+</style>

src/assets/img/logo.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW X7 -->
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="370px" height="370px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
+viewBox="0 0 370 370"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil0 {fill:#009C64}
+    .fil1 {fill:#EA486A}
+    .fil2 {fill:#FEFEFE;fill-rule:nonzero}
+   ]]>
+  </style>
+ </defs>
+ <g id="Capa_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <rect class="fil0" width="370" height="370"/>
+  <rect class="fil1" x="232" width="138" height="370"/>
+  <path class="fil2" d="M138 272l0 69 -22 0 0 -170 58 0c15,0 27,5 38,15 10,10 15,22 15,36 0,14 -5,26 -15,36 -10,9 -23,14 -38,14l-36 0zm0 -80l0 59 37 0c8,0 16,-3 21,-8 6,-6 9,-13 9,-21 0,-8 -3,-15 -9,-21 -5,-6 -13,-9 -21,-9l-37 0z"/>
+  <path id="1" class="fil2" d="M355 296c0,15 -5,27 -16,36 -11,9 -25,13 -41,13 -14,0 -26,-4 -37,-12 -11,-9 -18,-20 -22,-34l21 -9c1,5 3,10 6,14 2,4 5,8 9,11 3,3 7,5 11,7 4,1 8,2 13,2 10,0 18,-2 24,-8 7,-5 10,-12 10,-20 0,-7 -3,-13 -8,-18 -5,-5 -14,-10 -27,-15 -14,-5 -23,-8 -26,-10 -18,-9 -27,-22 -27,-40 0,-13 5,-24 15,-32 10,-9 23,-14 37,-14 13,0 25,4 34,10 10,7 16,15 19,25l-20 8c-2,-6 -6,-11 -12,-16 -5,-4 -12,-6 -20,-6 -9,0 -16,3 -22,7 -6,5 -9,10 -9,18 0,5 3,11 7,15 5,4 16,9 33,15 18,6 30,13 37,22 8,8 11,18 11,31z"/>
+ </g>
+</svg>

src/assets/sass/global.sass

@@ -0,0 +1,15 @@
+*
+  box-sizing: border-box
+  margin: 0
+  padding: 0
+
+html, body
+  font:
+    size: large
+    family: 'Open Sans', sans-serif
+
+.tarjeta
+  transition: box-shadow 250ms ease-out
+  &:hover
+    box-shadow: 0 0 10px 3px rgba(0,0,0,0.2)
+

src/assets/sass/modo-claro.sass

@@ -0,0 +1,17 @@
+.texto1
+  color: black
+
+.texto2
+  color: #434343
+
+.texto1--negativo
+  color: white
+
+.fondo1
+  background-color: white
+
+.fondo2
+  background-color: #e8e8e8
+
+.fondo1--negativo
+  background-color: black

src/assets/sass/modo-oscuro.css

@@ -0,0 +1 @@
+.texto1{color:#fff}.texto2{color:#d1d1d1}.texto1--negativo{color:#000}.fondo1{background-color:#101010}.fondo2{background-color:#000}.fondo1--negativo{background-color:#fff}

src/assets/sass/modo-oscuro.sass

@@ -0,0 +1,17 @@
+.texto1
+  color: white
+
+.texto2
+  color: #d1d1d1 //
+
+.texto1--negativo
+  color: black
+
+.fondo1
+  background-color: #101010
+
+.fondo2
+  background-color: #000000
+
+.fondo1--negativo
+  background-color: white

src/assets/sass/variables.sass

@@ -0,0 +1,29 @@
+$colorPrincipal: #009961
+$colorSecundario: #ea486a
+
+$fondo1--claro: white
+$fondo2--claro: #e8e8e8
+
+$fondo1--oscuro: #101010
+$fondo2--oscuro: #000000
+
+%margen-std
+  margin: 15px
+
+%bordeRedondo-std
+  border-radius: 10px
+
+// Tamaño de la barra lateral
+$largo: 336px
+$largoImg: $largo - 30px
+
+$tablet: 1200px
+$largoTablet: 100px
+$largoImgTablet: $largoTablet - 30px
+
+$movil: 600px
+$largoMovil: 0px
+$bajoMovil: 70px
+$largoImgMovil: 0px
+
+$movilDiminuto: 380px

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa" target="_blank" rel="noopener">pwa</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/Inicio/anime.vue

@@ -0,0 +1,128 @@
+<template lang="pug">
+  div
+    div.anime(v-if="!errorAnimesNoEncontrados")
+      div.fondo_1(:style="'background-color: ' + anime.color")
+      div.fondo_texto(:class="'fondo_texto--' + $store.state.modoColor")
+      div.cont
+        div.titulo {{ anime.titulo }}
+
+        img.imagen.tarjeta(:src="anime.imgUrl")
+        div.animeCont
+          div.descr {{ anime.descripcion }}
+          br
+          div.eps {{ anime.eps === 0? '?': anime.eps }} episodios.
+          br
+          div.estudio Estudio: {{ anime.estudio }}
+          br
+          div.emision {{ anime.diaDeEmision? 'Nuevo ep los ' + anime.diaDeEmision : '' }}
+          br
+        div.posActual {{ numAnimeActual }} de {{ cantidadAnimes }}
+    div(v-else) Error. No hay animes que mostrar. Revisa tu conexión a internet.
+
+</template>
+
+<script lang="coffee">
+
+  DEV = process.env.NODE_ENV == "development"
+
+  export default
+    name: "anime"
+    data: ->
+      anime: {}
+      intervalo: {}
+      primeraCarga: true
+    props:
+      obtenerNuevoAnime:
+        type: Function
+        required: true
+      numAnimeActual:
+        type: Number
+        required: true
+      cantidadAnimes:
+        type: Number
+        required: true
+    computed:
+      errorAnimesNoEncontrados: ->
+        if @$store.state.animes[0]?
+          if @primeraCarga
+            if DEV then console.log "Los animes existen, y voy a ciclarlos v:<"
+            @ciclarAnimes()
+            @primeraCarga = false
+          false
+        else
+          true
+    methods:
+      ciclarAnimes: ->
+        _ = this
+        clearInterval @intervalo
+
+        @anime = @obtenerNuevoAnime()
+
+        @intervalo = setInterval (() ->
+          _.anime = _.obtenerNuevoAnime()
+        ), 10000
+    beforeDestroy: ->
+      clearInterval @intervalo
+  #
+
+</script>
+
+<style scoped lang="sass">
+  @import "../../assets/sass/variables"
+
+  .anime
+    transition: background-color 250ms ease-out
+    height: 580px
+    width: 100%
+    position: relative
+
+  .titulo
+    font:
+      family: Muli, "Open Sans", sans-serif
+      size: xx-large
+    color: white
+    padding-bottom: 10px
+    height: 54px
+    // position: relative
+    // width: 500px
+    overflow: visible
+
+  .fondo_1, .fondo_texto, .cont
+    position: absolute
+    width: 100%
+    height: 580px
+
+  .fondo_1
+    z-index: 1
+    transition: background-color 500ms
+
+  .fondo_texto
+    z-index: 3
+
+  .fondo_texto--claro
+    background: linear-gradient(to right, transparent, rgba(255,255,255,0.8) 40%, $fondo2--claro 70%)
+
+  .fondo_texto--oscuro
+    background: linear-gradient(to right, transparent, rgba(0,0,0,0.8) 40%, $fondo2--oscuro 70%)
+
+  .animeCont
+    max-height: 500px
+
+  .posActual
+    position: absolute
+    bottom: 15px
+    left: 440px
+
+  .cont
+    padding: 10px 40px
+    z-index: 4
+
+  .imagen
+    @extend %bordeRedondo-std
+    float: left
+    height: 500px
+    width: 360px
+    margin-right: 40px
+
+  //
+</style>

src/components/Inicio/caracteristicas.vue

@@ -0,0 +1,77 @@
+<template lang="pug">
+    div.caracs.texto1--negativo
+      div.motto.fondo1--negativo.texto1--negativo Vuelve a<br><b>disfrutar</b><br>del anime
+      div.caracsCont
+        div.titulo Sin publicidad
+        div.descripcion.
+          Encuentra lo que buscas, y descárgalo. No tendrás que cerrar ningún pop-up, evitar
+          banners, o esperar 5 segundos.<br>
+          <br>
+          Aunque el Hosting, Dominio, y Almacenamiento no son gratis, PseudoSubs es libre de anuncios.
+          Desde siempre, y para siempre.
+        div.titulo Minimalista
+        div.descripcion.
+          Una página intuitiva, facil de usar.<br>
+          <br>
+          Anime con karaokes mínimos, si no te gustan, puedes ignorarlos.<br>
+          <br>
+          Fuentes y colores fáciles de leer.
+        div.titulo Instantaneo
+        div.descripcion.
+          Navega por la página de forma instantanea, sin tiempos de carga.<br>
+          <br>
+          Utilizamos lo último en tecnología para brindarte una experiencia
+          <b>inigualable</b>. ¡Si encuentras una página más rápida te devolvemos tu dinero!
+        div.titulo Moderno
+        div.descripcion.
+          ¿1.5 GB por episodio? No gracias.<br>
+          Con las últimas técnicas de compresión, reducimos 1GB a ~400MB en 1080px, y hasta 150MB en
+          720p ligero. ¡Sin perdida de calidad!
+      br
+      br
+      br
+      br
+      //
+</template>
+
+<script lang="coffee">
+
+    export default
+        name: "caracteristicas"
+
+</script>
+
+<style scoped lang="sass">
+  @import "../../assets/sass/variables"
+
+  .caracs
+    background: linear-gradient($colorPrincipal 40%, $colorSecundario)
+    padding: 50px 25px
+    margin-top: 100px
+    //
+
+  .motto
+    display: inline-block
+    padding: 20px
+    position: relative
+    top: -115px
+    font:
+      family: 'Product Sans' ,Muli, 'Open Sans', sans-serif
+      size: x-large
+    text-transform: uppercase
+
+  .caracsCont
+    color: white
+    max-width: 540px
+    padding: 0 50px
+
+  .titulo
+    font:
+      family: Muli, "Open Sans", sans-serif
+      size: 2.5rem
+    //
+
+  .descripcion
+    padding: 50px 20px
+
+</style>

src/components/Inicio/ultimos-animes.vue

@@ -0,0 +1,51 @@
+<template lang="pug">
+  div.texto2.fondo1.tarjeta
+    // div.titulo Últimos animes
+    anime-reciente(:obtener-nuevo-anime="obtenerSigAnime" :num-anime-actual="animeActual"
+      :cantidad-animes="numAnimesRecientes")
+    //
+
+</template>
+
+<script lang="coffee">
+  import anime from "./anime.vue"
+
+  export default
+    name: "ultimos-eps"
+    components:
+      'anime-reciente': anime
+    data: ->
+      numAnimesRecientes: 4
+      animeActual: 0
+    computed:
+      ultimosAnimes: ->
+        animes = @$store.state.animes
+        contador = 0
+        resultado =
+          for _anime in animes when contador < @numAnimesRecientes
+            contador = contador + 1
+            _anime
+    methods:
+      obtenerSigAnime: ->
+        if @animeActual is @numAnimesRecientes
+          @animeActual = 1
+        else
+          @animeActual++
+        @ultimosAnimes[@animeActual - 1]
+
+    #
+
+</script>
+
+<style scoped lang="sass">
+  @import "../../assets/sass/variables"
+
+  .titulo
+    color: $colorPrincipal
+    filter: opacity(0.4)
+    font:
+      size: 4rem
+    padding: 40px
+
+
+</style>

src/components/Inicio/y-notaras-la-diferencia.vue

@@ -0,0 +1,87 @@
+<!-- Y notarás la diferencia. Responsivo hasta 285px de ancho. -->
+<template lang="pug">
+  div(style="position: absolute; width: 100%")
+    div.contImg(:style="'min-height: ' + altoPantalla + 'px' ")
+    div.otro(:style="'min-height: ' + altoPantalla + 'px' ")
+      div.col
+        div.fil
+          div.titulo Cámbiate a PseudoSubs
+          div.motto Y notarás la diferencia
+          br
+          br
+          br
+          br
+          router-link.comparar(to="/comparar") Comparar pixel a pixel.
+    //
+
+</template>
+
+<script lang="coffee">
+
+  export default
+    name: "y-notaras-la-diferencia"
+    computed:
+      altoPantalla: ->
+        window.innerHeight ? document.documentElement.clientHeight ? document.body.clientHeight
+      anchoPantalla: ->
+        window.innerWidth ? document.documentElement.clientWidth ? document.body.clientWidth
+    #
+
+</script>
+
+<style scoped lang="sass">
+  @import "../../assets/sass/variables"
+
+  .contImg
+    display: inline-table
+    width: 100%
+    filter: brightness(0.4)
+
+
+    background-image: url("../../assets/img/y_notaras_la_diferencia.jpg")
+    background-attachment: fixed
+    background-position: center
+    background-repeat: no-repeat
+    background-size: cover
+    background-color: black
+
+  .otro
+    position: absolute
+    top: 0
+    left: 0
+    z-index: 2
+    width: 100%
+    display: inline-table
+    .col
+      display: table-row
+      .fil
+        display: table-cell
+        vertical-align: middle
+        text-align: center
+        color: white
+        .titulo
+          padding: 0 20px
+          font:
+            family: "Product Sans", Muli, "Open Sans", sans-serif
+            weight: bold
+            size: 4rem
+        .comparar
+          display: inline-block
+          color: white
+          text-decoration: none
+          padding: 20px 30px
+          background-color: $colorSecundario
+          font-family: Muli, "Open Sans", sans-serif
+          border-radius: 32px
+
+  @media only screen and (max-width: $movil)
+    .otro .col .fil .titulo
+      font-size: 3rem
+
+  @media only screen and (max-width: $movilDiminuto)
+    .otro .col .fil .titulo
+      font-size: 2.3rem
+  //
+
+
+</style>

src/components/barra-lateral.vue

@@ -0,0 +1,272 @@
+<!-- TODO: Re-escribir para que la funcionalidad sea igual pero el codigo no sea asi de horrible.
+ Barra Lateral. Responsivo hasta los 285px de ancho. -->
+<template lang="pug">
+  div.barra
+    div.lateral.fondo2.ocultarEnMovil(:class="$store.state.barraLateralOculta? 'barraOculta': ''")
+      div.botonOcultar(@click="ocultarBarraLateral()" :style="'display: ' + (largoVentana < 1201? 'none': 'block')").
+        {{ $store.state.barraLateralOculta? '>>': '<<' }}
+
+      router-link.linkImg(to="/" title="Ir al inicio")
+        img.tarjeta(src="../assets/img/logo.svg")
+
+      div.items.tarjeta.fondo1.texto2
+        div.cambiarModo(@click="cambiarModoColor()")
+          span.ocultarEnTablet Cambiar a modo {{ modoSiguiente }}
+          i.material-icons.texto2.mostrarEnTablet.
+            {{ modoSiguiente === 'oscuro'? 'brightness_3': 'brightness_5' }}
+        br
+        hr
+        br
+
+        router-link(to="/")
+          span.ocultarEnTablet Nosotros
+          i.material-icons.texto2.mostrarEnTablet group
+        br.mostrarEnTablet
+
+        router-link(to="/")
+          span.ocultarEnTablet Cambios
+          i.material-icons.texto2.mostrarEnTablet new_releases
+        br.mostrarEnTablet
+
+        router-link(to="/")
+          span.ocultarEnTablet Diseño
+          i.material-icons.texto2.mostrarEnTablet brush
+        br.mostrarEnTablet
+
+        a(href="https://github.com/Araozu/PseudoSubs_" target="_blank" title="GitHub")
+          span.ocultarEnTablet GitHub
+          img.imgGitHub.texto2.mostrarEnTablet(
+            :src="modoSiguiente === 'oscuro'? '/img/github.svg': '/img/githubOsc.svg' ")
+        br.mostrarEnTablet
+
+        router-link(to="/")
+          span.ocultarEnTablet Ajustes
+          i.material-icons.texto2.mostrarEnTablet settings
+
+        div.ocultarEnTablet
+          br
+          hr
+          br
+          div.credito PseudoSubs
+          div.copy &copy; {{ new Date().getUTCFullYear() }} - araozu.dev
+          br
+          div.descr.
+            Traducciones Inglés|Japonés &rarr; español.<br>
+            <br>
+            Version 5.0.0
+        //
+    div.inferior.texto2.fondo1.mostrarEnMovil
+      span.tituloInf PseudoSubs
+      div.links
+        i.material-icons.texto2.mostrarEnTablet(@click="cambiarModoColor()").
+          {{ modoSiguiente === 'oscuro'? 'brightness_3': 'brightness_5' }}
+        a.github(href="https://github.com/Araozu/PseudoSubs_" target="_blank" title="GitHub")
+          img.imgGitHub.texto2.mostrarEnTablet(
+            :src="modoSiguiente === 'oscuro'? '/img/github.svg': '/img/githubOsc.svg' ")
+        router-link(to="")
+          i.material-icons.texto2.mostrarEnTablet settings
+        //
+
+
+</template>
+
+<script lang="coffee">
+  modoOscuro = ".texto1{color:#fff}.texto2{color:#d1d1d1}.texto1--negativo{color:#000}.fondo1{background-color:#101010}.fondo2{background-color:#000}.fondo1--negativo{background-color:#fff}"
+
+  export default
+    name: "barra-lateral"
+    data: ->
+      modoSiguiente: "oscuro"
+      elemHtmlModoOscuro: document.getElementById "modoOscuro"
+      largoVentana: window.innerWidth
+
+    methods:
+      cambiarModoColor: (color = @modoSiguiente) ->
+        localStorage?.setItem "modoColor", color
+        @$store.commit "cambiarModoColor", color
+        resultado =
+          if color is "claro"
+            @modoSiguiente = "oscuro"
+            ""
+          else if color is "oscuro"
+            @modoSiguiente = "claro"
+            modoOscuro
+          else
+            console.log "¿Qué pasó aquí? Modo siguiente es #{@modoSiguiente}"
+            ""
+        this.elemHtmlModoOscuro.innerHTML = resultado
+
+      # // Todo: Almacenar el estado de la barra lateral en localStorage
+      ocultarBarraLateral: ->
+        estadoActual = @$store.state.barraLateralOculta
+        console.log "Anuma v: #{estadoActual}"
+        @$store.commit "cambiarBarraLateral"
+
+    created: ->
+      unless this.elemHtmlModoOscuro
+        nuevoElem = document.createElement "style"
+        nuevoElem.type = "text/css"
+        nuevoElem.id = "modoOscuro"
+        document.head.appendChild nuevoElem
+        @elemHtmlModoOscuro = nuevoElem
+
+      modoColor =
+        if Storage? and localStorage.getItem "modoColor"
+          localStorage.getItem "modoColor"
+        else if Storage?
+          localStorage.setItem "modoColor","oscuro"
+          "oscuro"
+        else
+          console.log "No hay soporte para LocalStorage"
+          "claro"
+
+      @modoSiguiente = if modoColor is "claro" then "oscuro" else "claro"
+      @cambiarModoColor modoColor
+    #
+
+</script>
+
+<style scoped lang="sass">
+  @import "../assets/sass/variables"
+  .barraOculta
+    width: 100px !important
+    .cambiarModo
+      text-decoration: none
+      &:hover
+        background-color: inherit
+    a
+      text-decoration: none
+    .linkImg
+      width: 70px
+    .ocultarEnTablet
+      display: none
+    .mostrarEnTablet
+      display: initial
+
+  .botonOcultar
+    color: white
+    position: absolute
+    top: 50%
+    right: -21px
+    width: 44px
+    height: 44px
+    padding: 10px
+    box-shadow: 0 0 10px 3px rgba(0,0,0,0.2)
+    border-radius: 22px
+    background-color: $colorSecundario
+    cursor: pointer
+
+  .cambiarModo
+    border-radius: 5px
+    text-decoration: underline
+    cursor: pointer
+    transition: background-color 250ms ease-out
+    &:hover
+      background-color: $colorSecundario
+
+  .material-icons
+    font-size: 40px
+  .imgGitHub
+    width: 40px
+
+
+  .lateral
+    width: $largo
+    height: 100%
+    position: fixed
+    box-shadow: 0 0 10px 3px rgba(0,0,0,0.2)
+    z-index: 10
+
+  .linkImg
+    @extend %margen-std
+    display: inline-block
+    width: $largoImg
+    img
+      @extend %bordeRedondo-std
+      width: 100%
+
+  .items
+    @extend %margen-std
+    @extend %bordeRedondo-std
+    padding: 15px
+    overflow: auto
+    a::after
+      content: ""
+      display: block
+
+  .credito
+    color: #009c64
+    font:
+      family: Muli, "Open Sans", sans-serif
+      size: xx-large
+      //
+  .copy
+    color: #009c64
+    font:
+      family: Muli, "Open Sans", sans-serif
+
+  .inferior
+    position: fixed
+    bottom: 0
+    height: $bajoMovil
+    width: 100%
+    z-index: 10
+    .tituloInf
+      float: left
+      color: #009c64
+      font:
+        family: Muli, "Open Sans", sans-serif
+        size: x-large
+      padding: 20px 10px
+      &::after
+        content: ""
+        display: table
+        clear: both
+    .links
+      padding: 15px
+      height: 70px
+      text-align: right
+      width: auto
+      i
+        padding: 0 20px
+
+  .ocultar
+    display: none
+
+  // Media queries para tablet
+  @media only screen and (max-width: $tablet)
+    .cambiarModo:hover
+      background-color: inherit
+
+    .ocultarEnTablet
+      display: none
+
+    .lateral
+      width: $largoTablet
+
+    .linkImg
+      width: $largoImgTablet
+
+  @media only screen and (min-width: $tablet + 1)
+    .mostrarEnTablet
+      display: none
+
+
+  // Media queries para movil
+  @media only screen and (max-width: $movil)
+    .ocultarEnMovil
+      display: none
+
+  @media only screen and (min-width: $movil + 1)
+    .mostrarEnMovil
+      display: none
+
+  // Ocultar link GitHub
+  @media only screen and (max-width: 380px)
+    .github
+      display: none
+
+    .inferior .links i
+      padding: 0 8px
+
+</style>

src/main.js

@@ -1,13 +1,13 @@
 import Vue from 'vue'
 import App from './App.vue'
-import router from './router'
-import store from './store'
+import router from './router.coffee'
+import store from './store.coffee'
 import './registerServiceWorker'
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
 
 new Vue({
   router,
   store,
   render: h => h(App)
-}).$mount('#app')
+}).$mount('#app');

src/router.coffee

@@ -0,0 +1,22 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import Inicio from './views/Inicio.vue'
+import Comparar from "./views/Comparar.vue"
+
+Vue.use Router
+
+export default new Router
+  mode: "history"
+  base: process.env.BASE_URL
+  routes: [
+    path: "/"
+    name: "Inicio"
+    component: Inicio
+  ,
+    path: "/comparar"
+    name: "Comparar"
+    component: Comparar
+  ]
+  scrollBehavior: (to, from, savedPosition) ->
+    x: 0
+    y: 0

src/router.js

@@ -1,25 +0,0 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-import Home from './views/Home.vue'
-
-Vue.use(Router)
-
-export default new Router({
-  mode: 'history',
-  base: process.env.BASE_URL,
-  routes: [
-    {
-      path: '/',
-      name: 'home',
-      component: Home
-    },
-    {
-      path: '/about',
-      name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (about.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
-    }
-  ]
-})

src/store.coffee

@@ -0,0 +1,35 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import YAML from "yaml"
+
+Vue.use(Vuex)
+
+DEV = process.env.NODE_ENV == "development"
+
+export default new Vuex.Store
+  state:
+    barraLateralOculta:
+      (localStorage?.getItem "barraLateralOculta") == "true" ? true
+
+    animes:
+      if localStorage?
+        YAML.parse ((localStorage.getItem "animes") ? "[]")
+      else
+        []
+
+    modoColor: localStorage?.getItem "modoColor" ? "claro"
+
+
+  mutations:
+    cambiarBarraLateral: (state) ->
+      state.barraLateralOculta = !state.barraLateralOculta
+      localStorage?.setItem "barraLateralOculta", state.barraLateralOculta
+
+    establecerAnime: (state, animes) ->
+      localStorage?.setItem "animes", YAML.stringify animes
+      state.animes = animes
+
+    cambiarModoColor: (state, color) ->
+      state.modoColor = color
+
+  actions: {}

src/store.js

@@ -1,16 +0,0 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-Vue.use(Vuex)
-
-export default new Vuex.Store({
-  state: {
-
-  },
-  mutations: {
-
-  },
-  actions: {
-
-  }
-})

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/Comparar.vue

@@ -0,0 +1,88 @@
+<!-- Incompleto -->
+<template lang="pug">
+  div.texto2.contenedor
+    div.tarjeta.fondo1
+      h1.titulo Sin perdida de calidad.
+      br
+      div.descr
+        p.
+          En PseudoSubs no sacrificamos nada. Hemos alcanzado el balance ideal para no perder
+          nada<sup>*</sup> de calidad.
+        p(style="font-size: small") * Sin perdida de calidad visible.
+        p(style="font-size: small").
+          ** Las perdidas mostradas aquí son mínimas, pues el programa compara exactamente pixel por pixel.
+          No representa una gran perdida.
+        p(style="font-size: small").
+          *** Incluso si comparas pixel por pixel, las diferencias son inapreciables.
+        br
+        br
+        p Hemos realizado pruebas con varias configuraciones y revisado pixel a pixel.<br>
+        br
+        br
+        p.
+          Las pruebas se realizaron con <a href="https://github.com/rsmbl/Resemble.js" target="blank">Resemble.js</a>.
+        br
+        br
+        h2.subtitulo Original vs Soft - Irodzuku Sekai no Ashita Kara 13 03:15
+        br
+        br
+        h2.subtitulo Original vs Hard 720p - Irodzuku Sekai no Ashita Kara 13 03:15
+        br
+        br
+        h2.subtitulo Original vs Hard - Yakusoku no Neverland
+        br
+        br
+        h2.subtitulo Original vs ligero - Yakusoku no Neverland
+
+        img.res(src="../assets/img/Comparacion/Yaku-OvsLig.jpg")
+        p.label Caso promedio
+        br
+        p.
+          La versión ligera en 720p HEVC es un <b><i>0.31%</i></b> diferente al original.
+          En el peor de los casos es hasta 1.52%, y en el mejor, 0%.
+        br
+        img.res(src="../assets/img/Comparacion/Yak_OvsLig_Peor.jpg")
+        p.label.texto2 Peor caso - 1.52% de distorsión.
+    //
+</template>
+
+<script lang="coffee">
+
+  export default
+    name: "Comparar"
+
+</script>
+
+<style scoped lang="sass">
+  @import "../assets/sass/variables"
+
+  .contenedor
+    width: 90%
+    margin: 30px auto
+    div
+      @extend %bordeRedondo-std
+
+  .titulo
+    padding: 15px 0
+    text-align: center
+    font:
+      size: 2rem
+      family: Muli, "Open Sans", sans-serif
+
+  .subtitulo
+    font:
+      size: 1.5rem
+      family: Muli, "Open Sans", sans-serif
+
+  .descr
+    padding: 20px 40px
+    font-size: x-large
+
+  .res
+    width: 100%
+
+  .label
+    text-align: center
+    font-size: large
+
+</style>

src/views/Home.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'home',
-  components: {
-    HelloWorld
-  }
-}
-</script>

src/views/Inicio.vue

@@ -0,0 +1,29 @@
+<template lang="pug">
+  div.inicio
+    ultimos-eps
+    caracteristicas
+    y-notaras-la-diferencia
+    //
+
+</template>
+
+<script lang="coffee">
+  import ultimosEps from "../components/Inicio/ultimos-animes.vue"
+  import caracteristicas from "../components/Inicio/caracteristicas.vue"
+  import yNotarasLaDiferencia from "../components/Inicio/y-notaras-la-diferencia.vue"
+
+  export default
+    name: "Inicio"
+    components:
+      caracteristicas: caracteristicas
+      'y-notaras-la-diferencia': yNotarasLaDiferencia
+      'ultimos-eps': ultimosEps
+
+
+</script>
+
+<style scoped lang="sass">
+  .inicio
+    position: relative
+    width: 100%
+</style>

srv/Anime/obtenerAnime.coffee

@@ -0,0 +1,36 @@
+import { con } from "../index"
+import YAML from "yaml"
+
+export default (req, res) ->
+
+  if req.params.id?
+    idAnime = req.params.id
+
+    query = "SELECT * FROM animes WHERE anime_ID=?"
+
+    con.query query, [idAnime], (err, respuesta) ->
+      res.send do ->
+        unless err
+          YAML.stringify
+            exito: true
+            payload: respuesta[0]
+            error: {}
+        else
+          """
+          exito: false
+          payload: {}
+          error:
+            razon: "Error al ejecutar consulta en la base de datos."
+            ruta: "/Anime/obtenerTodosAnimes"
+            adicional: "Query: #{query}\nError:#{err}"
+          """
+
+  else
+    res.send """
+      exito: false
+      payload: {}
+      error:
+        razon: "No se ha pasado ningún id."
+        ruta: "/Anime/obtenerTodosAnimes"
+        adicional: "Anime ID actual: #{req.params.id}"
+      """

srv/Anime/obtenerTodosAnimes.coffee

@@ -0,0 +1,22 @@
+import { con } from "../index"
+import YAML from "yaml"
+
+export default (req, res) ->
+
+  query = "SELECT * FROM animes ORDER BY anime_ID DESC "
+  con.query query, (err, respuesta) ->
+    res.send do ->
+      unless err
+        YAML.stringify
+          exito: true
+          payload: respuesta
+          error: {}
+      else
+        """
+        exito: false
+        payload: {}
+        error:
+          razon: Error al ejecutar la consulta a la base de datos
+          ruta: /Anime/obtenerTodosAnimes
+          adicional: "Query: #{query}\nError: #{err}"
+        """

srv/index.js

@@ -0,0 +1,27 @@
+import express from 'express';
+import mysql from "mysql";
+
+import obtenerAnimes from "./Anime/obtenerAnime"
+import obtenerTodosAnimes from "./Anime/obtenerTodosAnimes"
+
+export const con = mysql.createConnection({
+    host: "127.0.0.1",
+    user: "pseubntq_araozu",
+    password: "@Xsakah4b",
+    database: "pseubntq_pseudosubs"
+});
+con.connect(err => {
+    if (err) {
+        console.log("Error al conectarse a la base de datos :c\n" + err);
+    } else {
+        console.log("Exito al conectarse a la base de datos :D");
+    }
+});
+
+
+export default (app, http) => {
+
+    app.get("/anime/:id", obtenerAnimes);
+    app.get("/anime", obtenerTodosAnimes);
+
+}

srv/modelo-respuesta.yaml

@@ -0,0 +1,6 @@
+exito: true|false
+payload: datos
+error:
+  razon: Razon por la que el error sucedió
+  ruta: Ruta al archivo de error en el backend
+  adicional: Datos adicionales, como query SQL, o stack trace del error.