Arreglo del layour de los animes. Arreglado el layout de la lista de animes. Agregada navegacion en la barra inferior.
This commit is contained in:
Fernando
parent
25faec9593
commit
2dd9adec8f
@ -1,12 +1,3 @@
|
||||
[*]
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
|
||||
[*.vue]
|
||||
indent_size = 2
|
||||
|
||||
[*.coffee]
|
||||
indent_size = 2
|
||||
|
||||
[*.sass]
|
||||
indent_size = 2
|
||||
indent_size = 4
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
BIN
public/favicon.png
Normal file
BIN
public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
BIN
public/img/PortadaAnimes/Fruits Basket (2019).jpg
Normal file
BIN
public/img/PortadaAnimes/Fruits Basket (2019).jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
BIN
public/img/PortadaAnimes/Irozuku Sekai no Ashita Kara.jpg
Normal file
BIN
public/img/PortadaAnimes/Irozuku Sekai no Ashita Kara.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 308 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.3 KiB After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.4 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 36 KiB |
@ -4,7 +4,7 @@
|
||||
<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">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.png">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||
rel="stylesheet">
|
||||
<title>PseudoSubs</title>
|
||||
|
||||
112
src/App.vue
112
src/App.vue
@ -1,72 +1,76 @@
|
||||
<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
|
||||
div#app
|
||||
div.fondo.fondo2
|
||||
barra-lateral
|
||||
div.contenido(:class="$store.state.barraLateralOculta? 'contenido--barraOculta' : ''", :barra-oculta="$store.state.barraLateralOculta.toString()")
|
||||
router-view
|
||||
|
||||
</template>
|
||||
|
||||
<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"
|
||||
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"
|
||||
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
|
||||
export default
|
||||
name: "App"
|
||||
data: ->
|
||||
largoVentana: window.innerWidth
|
||||
components:
|
||||
'barra-lateral': barraLateral
|
||||
created: ->
|
||||
if @$store.state.animes[0]?
|
||||
#
|
||||
else
|
||||
console.log "Error al obtener los animes.\n#{res}"
|
||||
#
|
||||
store = @$store
|
||||
fetch("https://pseudosubs.com/anime", {
|
||||
method: "POST"
|
||||
headers:
|
||||
"Content-Type": "application/x-www-form-urlencoded"
|
||||
})
|
||||
.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"
|
||||
@import "./assets/sass/variables"
|
||||
|
||||
.fondo
|
||||
width: 100%
|
||||
height: 100%
|
||||
top: 0
|
||||
left: 0
|
||||
position: fixed
|
||||
z-index: 0
|
||||
.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
|
||||
width: 100%
|
||||
position: absolute
|
||||
padding-left: $largo
|
||||
z-index: 1
|
||||
|
||||
@media only screen and (max-width: $movil)
|
||||
.contenido
|
||||
padding-left: $largoMovil
|
||||
padding-bottom: $bajoMovil
|
||||
.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>
|
||||
@ -11,7 +11,7 @@
|
||||
background-color: white
|
||||
|
||||
.fondo2
|
||||
background-color: #e8e8e8
|
||||
background-color: #eeeeee
|
||||
|
||||
.fondo1--negativo
|
||||
background-color: black
|
||||
@ -2,7 +2,7 @@ $colorPrincipal: #009961
|
||||
$colorSecundario: #ea486a
|
||||
|
||||
$fondo1--claro: white
|
||||
$fondo2--claro: #e8e8e8
|
||||
$fondo2--claro: #eeeeee
|
||||
|
||||
$fondo1--oscuro: #101010
|
||||
$fondo2--oscuro: #000000
|
||||
|
||||
@ -1,46 +1,132 @@
|
||||
<template lang="pug">
|
||||
div.texto1
|
||||
div(v-if="estadoAnime === 0") Cargando...
|
||||
div(v-if="estadoAnime === -1") Error. Anime no encontrado
|
||||
div(v-if="estadoAnime === 1")
|
||||
div.titulo {{ anime.titulo }} -> {{ anime.anime_ID }}
|
||||
p.
|
||||
Advertencia. Página en construcción. Los links pueden estar errados. Para usar la versión estable,
|
||||
visita <a href="https://pseudosubs.com">https://pseudosubs.com</a>
|
||||
panel-de-descarga(:animeid="anime.anime_ID" :color="anime.color")
|
||||
//
|
||||
div.texto1.contenedor
|
||||
div(v-if="estadoAnime === 0") Cargando...
|
||||
div(v-if="estadoAnime === -1") Error. Anime no encontrado
|
||||
div(v-if="estadoAnime === 1")
|
||||
// div.titulo {{ anime.titulo }} -> {{ anime.anime_ID }}
|
||||
// p {{ anime }}
|
||||
br
|
||||
br
|
||||
div.datos
|
||||
img.imagen.tarjeta(:src="anime.imgUrl")
|
||||
div.cont
|
||||
div.tarjeta.fondo1
|
||||
div.descripcion {{ anime.descripcion }}
|
||||
br
|
||||
div.datosAnimeCont
|
||||
div.tarjeta.fondo1.mal
|
||||
div.estudio Estudio: {{ anime.estudio }}
|
||||
div.numEps Episodios: {{ anime.eps === 0? '?' : anime.eps }}
|
||||
div.emision Emisión: {{ anime.alAire }}
|
||||
div.temporada Temporada: {{ anime.temporada + " " + anime.anio }}
|
||||
div.fuente Fuente: {{ anime.fuente }}
|
||||
div.generos Generos: {{ anime.generos }}
|
||||
div.tarjeta.fondo1.op-ed ops y eds aqui. En construcción.
|
||||
br
|
||||
panel-de-descarga(:animeid="anime.anime_ID" :color="anime.color")
|
||||
br
|
||||
//
|
||||
</template>
|
||||
|
||||
<script lang="coffee">
|
||||
import panelDescarga from "./panel-descarga.vue"
|
||||
import panelDescarga from "./panel-descarga.vue"
|
||||
|
||||
export default
|
||||
name: "Anime"
|
||||
components:
|
||||
'panel-de-descarga': panelDescarga
|
||||
data: ->
|
||||
anime: {}
|
||||
# -1 no encontrado, 0 cargando y 1 encontrado
|
||||
estadoAnime: 0
|
||||
created: ->
|
||||
_ = this
|
||||
animes = @$store.state.animes
|
||||
resultado = -1
|
||||
for anime in animes
|
||||
if anime.link is "/Anime/" + @$route.params.nombre
|
||||
_.anime = anime
|
||||
resultado = 1
|
||||
break
|
||||
@estadoAnime = resultado
|
||||
if resultado is 1
|
||||
@$store.commit "cambiarTxtAdicionalAnime", "#{anime.titulo}"
|
||||
else
|
||||
@$store.commit "cambiarTxtAdicionalAnime", "?"
|
||||
export default
|
||||
name: "Anime"
|
||||
components:
|
||||
'panel-de-descarga': panelDescarga
|
||||
data: ->
|
||||
anime: {}
|
||||
# -1 no encontrado, 0 cargando y 1 encontrado
|
||||
estadoAnime: 0
|
||||
created: ->
|
||||
_ = this
|
||||
animes = @$store.state.animes
|
||||
resultado = -1
|
||||
for anime in animes
|
||||
if anime.link is "/Anime/" + @$route.params.nombre
|
||||
_.anime = anime
|
||||
resultado = 1
|
||||
break
|
||||
@estadoAnime = resultado
|
||||
if resultado is 1
|
||||
@$store.commit "cambiarTituloAnime", "#{anime.titulo}"
|
||||
@$store.commit "cambiarTxtAdicionalAnime", (if anime.comentario? then anime.comentario else "Sin comentarios.")
|
||||
@$store.commit "cambiarEstadoImgAnime", true
|
||||
@$store.commit "cambiarImgTituloAnime", @anime.titulo
|
||||
else
|
||||
@$store.commit "cambiarTxtAdicionalAnime", "?"
|
||||
|
||||
@$store.commit "cambiarRutaActual", [
|
||||
{nombre: "PS", ruta: "/"},
|
||||
{nombre: "A", ruta: "/Anime/"},
|
||||
{nombre: "_", ruta: "#"}
|
||||
]
|
||||
|
||||
#
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="sass">
|
||||
@import "../../assets/sass/variables"
|
||||
|
||||
.contenedor
|
||||
margin: 0 50px
|
||||
|
||||
.datos::after, .datosAnimeCont::after
|
||||
content: ""
|
||||
display: table
|
||||
clear: both
|
||||
|
||||
.imagen
|
||||
@extend %bordeRedondo-std
|
||||
position: sticky
|
||||
top: 10px
|
||||
float: left
|
||||
// height: 600px
|
||||
width: 25%
|
||||
display: inline-block
|
||||
|
||||
.cont
|
||||
float: left
|
||||
display: inline-block
|
||||
padding-left: 40px
|
||||
width: 75%
|
||||
div.tarjeta
|
||||
@extend %bordeRedondo-std
|
||||
padding: 20px
|
||||
|
||||
.mal
|
||||
width: 49%
|
||||
float: left
|
||||
|
||||
.op-ed
|
||||
width: 49%
|
||||
float: right
|
||||
|
||||
@media only screen and (max-width: 600px)
|
||||
.imagen, .cont
|
||||
width: 100%
|
||||
|
||||
.imagen
|
||||
position: initial
|
||||
padding-bottom: 30px
|
||||
|
||||
.cont
|
||||
padding: 0
|
||||
div.tarjeta
|
||||
padding: 15px
|
||||
|
||||
.mal, .op-ed
|
||||
width: 100%
|
||||
|
||||
.mal
|
||||
margin-bottom: 20px
|
||||
|
||||
.contenedor
|
||||
margin: 0 5px
|
||||
padding-bottom: 70px
|
||||
|
||||
//
|
||||
|
||||
</style>
|
||||
@ -1,48 +1,68 @@
|
||||
<template lang="pug">
|
||||
div.anime
|
||||
div.cont.fondo1.tarjeta
|
||||
router-link.titulo.texto1(:to="anime.link") {{ anime.titulo }}
|
||||
br
|
||||
router-link(:to="anime.link")
|
||||
img.imagen(:src="anime.imgUrl")
|
||||
//
|
||||
div.anime
|
||||
div.cont.fondo1.tarjeta
|
||||
router-link.titulo.texto1(:to="anime.link") {{ anime.titulo }}
|
||||
br
|
||||
router-link.link(:to="anime.link")
|
||||
img.imagen(:src="anime.imgUrl")
|
||||
//
|
||||
</template>
|
||||
|
||||
<script lang="coffee">
|
||||
|
||||
export default
|
||||
name: "anime"
|
||||
props:
|
||||
anime:
|
||||
type: Object
|
||||
required: true
|
||||
#
|
||||
export default
|
||||
name: "anime"
|
||||
props:
|
||||
anime:
|
||||
type: Object
|
||||
required: true
|
||||
#
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="sass">
|
||||
@import "../../assets/sass/variables"
|
||||
@import "../../assets/sass/variables"
|
||||
|
||||
.anime
|
||||
width: 50%
|
||||
float: left
|
||||
padding: 20px
|
||||
.anime
|
||||
width: 33%
|
||||
float: left
|
||||
padding: 20px
|
||||
|
||||
.cont
|
||||
@extend %bordeRedondo-std
|
||||
padding: 20px
|
||||
height: 500px
|
||||
.cont
|
||||
@extend %bordeRedondo-std
|
||||
padding: 20px
|
||||
|
||||
.titulo
|
||||
display: inline-block
|
||||
font:
|
||||
family: Muli, "Open Sans", sans-serif
|
||||
size: xx-large
|
||||
padding-bottom: 20px
|
||||
text-decoration: none
|
||||
.titulo
|
||||
display: inline-block
|
||||
font:
|
||||
family: Muli, "Open Sans", sans-serif
|
||||
size: xx-large
|
||||
margin-bottom: 20px
|
||||
text-decoration: none
|
||||
overflow: hidden
|
||||
white-space: nowrap
|
||||
width: 100%
|
||||
|
||||
.imagen
|
||||
height: 400px
|
||||
.imagen
|
||||
height: 400px
|
||||
|
||||
//
|
||||
.link
|
||||
display: inline-block
|
||||
width: 100%
|
||||
|
||||
@media only screen and (max-width: 425px)
|
||||
|
||||
.imagen
|
||||
width: 100%
|
||||
height: initial
|
||||
|
||||
@media only screen and (max-width: 1200px)
|
||||
.anime
|
||||
width: 50%
|
||||
|
||||
@media only screen and (max-width: 850px)
|
||||
.anime
|
||||
width: 100%
|
||||
|
||||
//
|
||||
</style>
|
||||
@ -1,24 +1,31 @@
|
||||
<template lang="pug">
|
||||
div.animes
|
||||
anime-item(v-for="anime in $store.state.animes" :anime="anime")
|
||||
//
|
||||
div.animes
|
||||
anime-item(v-for="anime in $store.state.animes" :anime="anime")
|
||||
//
|
||||
</template>
|
||||
|
||||
<script lang="coffee">
|
||||
import animeItem from "./anime.vue"
|
||||
import animeItem from "./anime.vue"
|
||||
|
||||
export default
|
||||
name: "lista-animes"
|
||||
components:
|
||||
'anime-item': animeItem
|
||||
created: ->
|
||||
@$store.commit "cambiarTxtAdicionalAnime", "Comprimido sin perder 1 solo pixel."
|
||||
export default
|
||||
name: "lista-animes"
|
||||
components:
|
||||
'anime-item': animeItem
|
||||
created: ->
|
||||
@$store.commit "cambiarTituloAnime", "Anime"
|
||||
@$store.commit "cambiarTxtAdicionalAnime", "Comprimido sin perder 1 solo pixel."
|
||||
@$store.commit "cambiarEstadoImgAnime", false
|
||||
@$store.commit "cambiarRutaActual", [
|
||||
{nombre: "PS", ruta: "/"},
|
||||
{nombre: "Anime", ruta: "/Anime/"},
|
||||
]
|
||||
#
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="sass">
|
||||
.animes::after
|
||||
content: ""
|
||||
display: table
|
||||
clear: both
|
||||
.animes::after
|
||||
content: ""
|
||||
display: table
|
||||
clear: both
|
||||
</style>
|
||||
@ -1,43 +1,43 @@
|
||||
<template lang="pug">
|
||||
div.texto1.fondo1.main
|
||||
router-link(to="/Anime")
|
||||
span.anime.tarjeta
|
||||
div.titulo.texto1 Anime
|
||||
div.titulo__descr.texto1 Ligero/MP4/MKV 720p/1080p 24fps/60fps
|
||||
router-link(to="/Novelas")
|
||||
span.novelas.tarjeta
|
||||
div.titulo.texto1 Novelas
|
||||
div.titulo__descr.texto1 Redistribuyendo legalmente lo ilegal.
|
||||
//
|
||||
div.texto1.fondo1.main
|
||||
router-link(to="/Anime")
|
||||
span.anime.tarjeta
|
||||
div.titulo.texto1 Anime
|
||||
div.titulo__descr.texto1 Ligero/MP4/MKV 720p/1080p 24fps/60fps
|
||||
router-link(to="/Novelas")
|
||||
span.novelas.tarjeta
|
||||
div.titulo.texto1 Novelas
|
||||
div.titulo__descr.texto1 Redistribuyendo legalmente lo ilegal.
|
||||
//
|
||||
</template>
|
||||
|
||||
<script lang="coffee">
|
||||
|
||||
export default
|
||||
name: "animes-novelas"
|
||||
export default
|
||||
name: "animes-novelas"
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="sass">
|
||||
.main
|
||||
margin: 50px 0
|
||||
.main
|
||||
margin: 50px 0
|
||||
|
||||
.anime, .novelas
|
||||
width: 50%
|
||||
display: inline-block
|
||||
padding: 20px
|
||||
.anime, .novelas
|
||||
width: 50%
|
||||
display: inline-block
|
||||
padding: 20px
|
||||
|
||||
.titulo
|
||||
font:
|
||||
family: "Product Sans", Muli, "Open Sans", sans-serif
|
||||
size: 3rem
|
||||
weight: bold
|
||||
.titulo
|
||||
font:
|
||||
family: "Product Sans", Muli, "Open Sans", sans-serif
|
||||
size: 3rem
|
||||
weight: bold
|
||||
|
||||
.titulo__descr
|
||||
opacity: 0.5
|
||||
font:
|
||||
family: Muli, "Open Sans", sans-serif
|
||||
size: x-large
|
||||
.titulo__descr
|
||||
opacity: 0.5
|
||||
font:
|
||||
family: Muli, "Open Sans", sans-serif
|
||||
size: x-large
|
||||
|
||||
//
|
||||
//
|
||||
</style>
|
||||
@ -1,37 +1,37 @@
|
||||
<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
|
||||
//
|
||||
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 No apto para puristas
|
||||
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 100MB en
|
||||
720p ligero. ¡Sin perdida de calidad!
|
||||
br
|
||||
br
|
||||
br
|
||||
br
|
||||
//
|
||||
</template>
|
||||
|
||||
<script lang="coffee">
|
||||
@ -42,36 +42,36 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="sass">
|
||||
@import "../../assets/sass/variables"
|
||||
@import "../../assets/sass/variables"
|
||||
|
||||
.caracs
|
||||
background: linear-gradient($colorPrincipal 40%, $colorSecundario)
|
||||
padding: 50px 25px
|
||||
margin-top: 100px
|
||||
.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
|
||||
.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
|
||||
.caracsCont
|
||||
color: white
|
||||
max-width: 540px
|
||||
padding: 0 50px
|
||||
|
||||
.titulo
|
||||
font:
|
||||
family: Muli, "Open Sans", sans-serif
|
||||
size: 2.5rem
|
||||
.titulo
|
||||
font:
|
||||
family: Muli, "Open Sans", sans-serif
|
||||
size: 2.5rem
|
||||
//
|
||||
|
||||
.descripcion
|
||||
padding: 50px 20px
|
||||
.descripcion
|
||||
padding: 50px 20px
|
||||
|
||||
</style>
|
||||
@ -51,7 +51,7 @@
|
||||
errorAnimesNoEncontrados: ->
|
||||
if @$store.state.animes[0]?
|
||||
if @primeraCarga
|
||||
if DEV then console.log "Los animes existen, y voy a ciclarlos v:<"
|
||||
|
||||
@anime = @obtenerSigAnime()
|
||||
@establecerIntervalo()
|
||||
@primeraCarga = false
|
||||
|
||||
@ -5,8 +5,8 @@
|
||||
div.otro(:style="'min-height: ' + altoPantalla + 'px' ")
|
||||
div.col
|
||||
div.fil
|
||||
div.titulo Cámbiate a PseudoSubs
|
||||
div.motto Y notarás la diferencia
|
||||
div.titulo <!--Cámbiate a PseudoSubs--> RIP PseudoSubs - 2017-2019
|
||||
div.motto Y notarás la diferencia <small>¿O no?</small>
|
||||
br
|
||||
br
|
||||
br
|
||||
|
||||
@ -1,271 +1,290 @@
|
||||
<!-- 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? '>>': '<<' }}
|
||||
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")
|
||||
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
|
||||
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 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 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
|
||||
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
|
||||
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="/cuenta")
|
||||
span.ocultarEnTablet Ajustes
|
||||
i.material-icons.texto2.mostrarEnTablet settings
|
||||
router-link(to="/cuenta")
|
||||
span.ocultarEnTablet Ajustes
|
||||
i.material-icons.texto2.mostrarEnTablet settings
|
||||
|
||||
div.ocultarEnTablet
|
||||
br
|
||||
hr
|
||||
br
|
||||
div.credito PseudoSubs
|
||||
div.copy © {{ new Date().getUTCFullYear() }} - araozu.dev
|
||||
br
|
||||
div.descr.
|
||||
Traducciones Inglés|Japonés → 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
|
||||
//
|
||||
div.ocultarEnTablet
|
||||
br
|
||||
hr
|
||||
br
|
||||
div.credito PseudoSubs
|
||||
div.copy © {{ new Date().getUTCFullYear() }} - araozu.dev
|
||||
br
|
||||
div.descr.
|
||||
Traducciones Inglés|Japonés → español.<br>
|
||||
<br>
|
||||
Version 5.0.0
|
||||
|
||||
div.inferior.texto2.fondo1.mostrarEnMovil
|
||||
span.tituloInf
|
||||
template(v-for="i in $store.state.rutaActual")
|
||||
router-link.linkBarra(:to="i.ruta") {{ i.nombre }}
|
||||
span >
|
||||
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}"
|
||||
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
|
||||
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
|
||||
|
||||
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
|
||||
ocultarBarraLateral: ->
|
||||
estadoActual = @$store.state.barraLateralOculta
|
||||
console.log "Anuma v: #{estadoActual}"
|
||||
@$store.commit "cambiarBarraLateral"
|
||||
|
||||
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
|
||||
|
||||
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"
|
||||
|
||||
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
|
||||
#
|
||||
@modoSiguiente = if modoColor is "claro" then "oscuro" else "claro"
|
||||
@cambiarModoColor modoColor
|
||||
#
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="sass">
|
||||
@import "../assets/sass/variables"
|
||||
.barraOculta
|
||||
width: 100px !important
|
||||
@import "../assets/sass/variables"
|
||||
|
||||
.linkBarra
|
||||
color: $colorPrincipal
|
||||
|
||||
.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
|
||||
text-decoration: none
|
||||
&:hover
|
||||
background-color: inherit
|
||||
a
|
||||
text-decoration: none
|
||||
.linkImg
|
||||
width: 70px
|
||||
.ocultarEnTablet
|
||||
display: none
|
||||
.mostrarEnTablet
|
||||
display: initial
|
||||
border-radius: 5px
|
||||
text-decoration: underline
|
||||
cursor: pointer
|
||||
transition: background-color 250ms ease-out
|
||||
|
||||
.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
|
||||
&:hover
|
||||
background-color: $colorSecundario
|
||||
|
||||
.cambiarModo
|
||||
border-radius: 5px
|
||||
text-decoration: underline
|
||||
cursor: pointer
|
||||
transition: background-color 250ms ease-out
|
||||
&:hover
|
||||
background-color: $colorSecundario
|
||||
.material-icons
|
||||
font-size: 40px
|
||||
|
||||
.material-icons
|
||||
font-size: 40px
|
||||
.imgGitHub
|
||||
width: 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
|
||||
width: $largo
|
||||
height: 100%
|
||||
position: fixed
|
||||
box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2)
|
||||
z-index: 10
|
||||
|
||||
.linkImg
|
||||
width: $largoImgTablet
|
||||
@extend %margen-std
|
||||
display: inline-block
|
||||
width: $largoImg
|
||||
|
||||
@media only screen and (min-width: $tablet + 1)
|
||||
.mostrarEnTablet
|
||||
display: none
|
||||
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 queries para movil
|
||||
@media only screen and (max-width: $movil)
|
||||
.ocultarEnMovil
|
||||
display: none
|
||||
|
||||
@media only screen and (min-width: $movil + 1)
|
||||
.mostrarEnMovil
|
||||
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
|
||||
// Ocultar link GitHub
|
||||
@media only screen and (max-width: 380px)
|
||||
.github
|
||||
display: none
|
||||
|
||||
.inferior .links i
|
||||
padding: 0 8px
|
||||
.inferior .links i
|
||||
padding: 0 8px
|
||||
|
||||
</style>
|
||||
@ -7,33 +7,48 @@ Vue.use(Vuex)
|
||||
DEV = process.env.NODE_ENV == "development"
|
||||
|
||||
export default new Vuex.Store
|
||||
state:
|
||||
barraLateralOculta:
|
||||
(localStorage?.getItem "barraLateralOculta") == "true" ? true
|
||||
state:
|
||||
barraLateralOculta:
|
||||
(localStorage?.getItem "barraLateralOculta") == "true" ? true
|
||||
|
||||
animes:
|
||||
if localStorage?
|
||||
YAML.parse ((localStorage.getItem "animes") ? "[]")
|
||||
else
|
||||
[]
|
||||
animes:
|
||||
if localStorage?
|
||||
YAML.parse ((localStorage.getItem "animes") ? "[]")
|
||||
else
|
||||
[]
|
||||
|
||||
modoColor: localStorage?.getItem "modoColor" ? "claro"
|
||||
modoColor: localStorage?.getItem "modoColor" ? "claro"
|
||||
tituloAnime: "Anime"
|
||||
txtAdicionalAnime: "Comprimido sin perder 1 solo pixel."
|
||||
mostrarImgAnime: false
|
||||
imgTituloAnime: "19_2_fruits_basket"
|
||||
rutaActual: [{nombre: "PseudoSubs", ruta: "/"}]
|
||||
|
||||
txtAdicionalAnime: "Comprimido sin perder 1 solo pixel."
|
||||
mutations:
|
||||
cambiarBarraLateral: (state) ->
|
||||
state.barraLateralOculta = !state.barraLateralOculta
|
||||
localStorage?.setItem "barraLateralOculta", state.barraLateralOculta
|
||||
|
||||
mutations:
|
||||
cambiarBarraLateral: (state) ->
|
||||
state.barraLateralOculta = !state.barraLateralOculta
|
||||
localStorage?.setItem "barraLateralOculta", state.barraLateralOculta
|
||||
establecerAnime: (state, animes) ->
|
||||
localStorage?.setItem "animes", YAML.stringify animes
|
||||
state.animes = animes
|
||||
|
||||
establecerAnime: (state, animes) ->
|
||||
localStorage?.setItem "animes", YAML.stringify animes
|
||||
state.animes = animes
|
||||
cambiarModoColor: (state, color) ->
|
||||
state.modoColor = color
|
||||
|
||||
cambiarModoColor: (state, color) ->
|
||||
state.modoColor = color
|
||||
cambiarTituloAnime: (state, txt) ->
|
||||
state.tituloAnime = txt
|
||||
|
||||
cambiarTxtAdicionalAnime: (state, txt) ->
|
||||
state.txtAdicionalAnime = txt
|
||||
cambiarTxtAdicionalAnime: (state, txt) ->
|
||||
state.txtAdicionalAnime = txt
|
||||
|
||||
actions: {}
|
||||
cambiarEstadoImgAnime: (state, valor) ->
|
||||
state.mostrarImgAnime = valor
|
||||
|
||||
cambiarImgTituloAnime: (state, valor) ->
|
||||
state.imgTituloAnime = valor
|
||||
|
||||
cambiarRutaActual: (state, valor) ->
|
||||
state.rutaActual = valor
|
||||
|
||||
actions: {}
|
||||
@ -1,45 +1,95 @@
|
||||
<template lang="pug">
|
||||
div.texto1
|
||||
div.tarjeta.fondo1.tituloC
|
||||
router-link.titulo.texto1(to="/Anime") Animes
|
||||
br
|
||||
div.titulo__descr {{ $store.state.txtAdicionalAnime }}
|
||||
router-view
|
||||
//
|
||||
div.texto1.main
|
||||
div.imagenFondo.fondo1(:class="$store.state.mostrarImgAnime? clasesImg : ''" :style="estiloImg")
|
||||
div.fondo1.tituloC(:class="$store.state.mostrarImgAnime? clasesCont : ''")
|
||||
div.textos
|
||||
router-link.titulo.texto1(to="/Anime" :class="sombraLink") {{ $store.state.tituloAnime }}
|
||||
br
|
||||
div.titulo__descr.texto1 {{ $store.state.txtAdicionalAnime }}
|
||||
router-view
|
||||
//
|
||||
</template>
|
||||
|
||||
<script lang="coffee">
|
||||
|
||||
export default
|
||||
name: "AnimeList"
|
||||
export default
|
||||
name: "AnimeList",
|
||||
computed:
|
||||
clasesImg: ->
|
||||
["alto500", "imagenFondo--activo"]
|
||||
clasesCont: ->
|
||||
["alto500", ("tituloC--activo--" + @$store.state.modoColor)]
|
||||
sombraLink: ->
|
||||
"tituloC--sombra--#{@$store.state.modoColor}"
|
||||
linkImg: -> "/img/PortadaAnimes/#{@$store.state.imgTituloAnime}.jpg"
|
||||
estiloImg: ->
|
||||
if @$store.state.mostrarImgAnime
|
||||
"background: url('#{@linkImg}') no-repeat center; background-size: cover"
|
||||
else
|
||||
""
|
||||
#
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="sass">
|
||||
@import "../assets/sass/variables"
|
||||
|
||||
.tituloC
|
||||
padding: 50px
|
||||
.main
|
||||
position: relative
|
||||
height: 0
|
||||
|
||||
.imagenFondo
|
||||
position: absolute
|
||||
height: 250px
|
||||
width: 100%
|
||||
|
||||
.tituloC
|
||||
height: 250px
|
||||
position: relative
|
||||
|
||||
.tituloC--sombra--claro
|
||||
text-shadow: 0 0 15px #c7c7c7
|
||||
|
||||
.tituloC--sombra--oscuro
|
||||
text-shadow: 0 0 15px #484848
|
||||
|
||||
.alto500
|
||||
height: 600px
|
||||
|
||||
.imagenFondo--activo
|
||||
// background: no-repeat center
|
||||
|
||||
.tituloC--activo--oscuro
|
||||
background: linear-gradient(rgba(0,0,0,0) 200px, $fondo2--oscuro)
|
||||
|
||||
.tituloC--activo--claro
|
||||
background: linear-gradient(rgba(0,0,0,0) 200px, $fondo2--claro)
|
||||
|
||||
.textos
|
||||
position: absolute
|
||||
bottom: 50px
|
||||
left: 50px
|
||||
|
||||
.titulo
|
||||
font:
|
||||
family: "Product Sans", Muli, "Open Sans", sans-serif
|
||||
size: 4rem
|
||||
weight: bold
|
||||
text-decoration: none
|
||||
font:
|
||||
family: "Product Sans", Muli, "Open Sans", sans-serif
|
||||
size: 4rem
|
||||
weight: bold
|
||||
text-decoration: none
|
||||
|
||||
.titulo__descr
|
||||
opacity: 0.5
|
||||
font:
|
||||
family: Muli, "Open Sans", sans-serif
|
||||
size: x-large
|
||||
opacity: 0.5
|
||||
font:
|
||||
family: Muli, "Open Sans", sans-serif
|
||||
size: x-large
|
||||
|
||||
@media only screen and (max-width: 425px)
|
||||
.titulo
|
||||
font-size: 3rem
|
||||
|
||||
.animes::after
|
||||
content: ""
|
||||
display: table
|
||||
clear: both
|
||||
.alto500
|
||||
height: 350px
|
||||
|
||||
//
|
||||
//
|
||||
|
||||
</style>
|
||||
@ -1,88 +1,92 @@
|
||||
<!-- 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
|
||||
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.
|
||||
//
|
||||
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"
|
||||
export default
|
||||
name: "Comparar"
|
||||
created: ->
|
||||
@$store.commit "cambiarRutaActual", ["Inicio", "cmp"]
|
||||
#
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="sass">
|
||||
@import "../assets/sass/variables"
|
||||
@import "../assets/sass/variables"
|
||||
|
||||
.contenedor
|
||||
width: 90%
|
||||
margin: 30px auto
|
||||
div
|
||||
@extend %bordeRedondo-std
|
||||
.contenedor
|
||||
width: 90%
|
||||
margin: 30px auto
|
||||
|
||||
.titulo
|
||||
padding: 15px 0
|
||||
text-align: center
|
||||
font:
|
||||
size: 2rem
|
||||
family: Muli, "Open Sans", sans-serif
|
||||
div
|
||||
@extend %bordeRedondo-std
|
||||
|
||||
.subtitulo
|
||||
font:
|
||||
size: 1.5rem
|
||||
family: Muli, "Open Sans", sans-serif
|
||||
.titulo
|
||||
padding: 15px 0
|
||||
text-align: center
|
||||
font:
|
||||
size: 2rem
|
||||
family: Muli, "Open Sans", sans-serif
|
||||
|
||||
.descr
|
||||
padding: 20px 40px
|
||||
font-size: x-large
|
||||
.subtitulo
|
||||
font:
|
||||
size: 1.5rem
|
||||
family: Muli, "Open Sans", sans-serif
|
||||
|
||||
.res
|
||||
width: 100%
|
||||
.descr
|
||||
padding: 20px 40px
|
||||
font-size: x-large
|
||||
|
||||
.label
|
||||
text-align: center
|
||||
font-size: large
|
||||
.res
|
||||
width: 100%
|
||||
|
||||
.label
|
||||
text-align: center
|
||||
font-size: large
|
||||
|
||||
</style>
|
||||
@ -1,11 +1,14 @@
|
||||
<template lang="pug">
|
||||
div.texto1 Error 404. Esta página no existe (aun).
|
||||
div.texto1 Error 404. Esta página no existe (aun).
|
||||
</template>
|
||||
|
||||
<script lang="coffee">
|
||||
|
||||
export default
|
||||
name: "Error404"
|
||||
export default
|
||||
name: "Error404"
|
||||
created: ->
|
||||
@$store.commit "cambiarRutaActual", ["Inicio", "404"]
|
||||
#
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,33 +1,35 @@
|
||||
<template lang="pug">
|
||||
div.inicio
|
||||
ultimos-eps
|
||||
animes-novelas
|
||||
br
|
||||
caracteristicas
|
||||
y-notaras-la-diferencia
|
||||
//
|
||||
div.inicio
|
||||
ultimos-eps
|
||||
animes-novelas
|
||||
br
|
||||
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"
|
||||
import animesNovelas from "../components/Inicio/animes-novelas.vue"
|
||||
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"
|
||||
import animesNovelas from "../components/Inicio/animes-novelas.vue"
|
||||
|
||||
export default
|
||||
name: "Inicio"
|
||||
components:
|
||||
caracteristicas: caracteristicas
|
||||
'y-notaras-la-diferencia': yNotarasLaDiferencia
|
||||
'ultimos-eps': ultimosEps
|
||||
'animes-novelas': animesNovelas
|
||||
#
|
||||
export default
|
||||
name: "Inicio"
|
||||
components:
|
||||
caracteristicas: caracteristicas
|
||||
'y-notaras-la-diferencia': yNotarasLaDiferencia
|
||||
'ultimos-eps': ultimosEps
|
||||
'animes-novelas': animesNovelas
|
||||
created: ->
|
||||
@$store.commit "cambiarRutaActual", [{nombre: "PseudoSubs", ruta: "/"}]
|
||||
#
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="sass">
|
||||
.inicio
|
||||
position: relative
|
||||
width: 100%
|
||||
.inicio
|
||||
position: relative
|
||||
width: 100%
|
||||
</style>
|
||||
@ -33,4 +33,4 @@ export default (req, res) ->
|
||||
razon: "No se ha pasado ningún id."
|
||||
ruta: "/Anime/obtenerTodosAnimes"
|
||||
adicional: "Anime ID actual: #{req.params.id}"
|
||||
"""
|
||||
"""
|
||||
|
||||
Loading…
Reference in New Issue
Block a user