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_style = space
|
||||||
indent_size = 4
|
indent_size = 4
|
||||||
|
|
||||||
[*.vue]
|
|
||||||
indent_size = 2
|
|
||||||
|
|
||||||
[*.coffee]
|
|
||||||
indent_size = 2
|
|
||||||
|
|
||||||
[*.sass]
|
|
||||||
indent_size = 2
|
|
||||||
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 charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<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"
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||||
rel="stylesheet">
|
rel="stylesheet">
|
||||||
<title>PseudoSubs</title>
|
<title>PseudoSubs</title>
|
||||||
|
|||||||
112
src/App.vue
112
src/App.vue
@ -1,72 +1,76 @@
|
|||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
div#app
|
div#app
|
||||||
div.fondo.fondo2
|
div.fondo.fondo2
|
||||||
barra-lateral
|
barra-lateral
|
||||||
div.contenido(:class="$store.state.barraLateralOculta? 'contenido--barraOculta' : ''", :barra-oculta="$store.state.barraLateralOculta.toString()")
|
div.contenido(:class="$store.state.barraLateralOculta? 'contenido--barraOculta' : ''", :barra-oculta="$store.state.barraLateralOculta.toString()")
|
||||||
router-view
|
router-view
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="coffee">
|
<script lang="coffee">
|
||||||
import "./assets/sass/global.sass"
|
import "./assets/sass/global.sass"
|
||||||
import "./assets/sass/modo-claro.sass"
|
import "./assets/sass/modo-claro.sass"
|
||||||
import barraLateral from "./components/barra-lateral.vue"
|
import barraLateral from "./components/barra-lateral.vue"
|
||||||
import YAML from "yaml"
|
import YAML from "yaml"
|
||||||
|
|
||||||
DEV = process.env.NODE_ENV == "development"
|
DEV = process.env.NODE_ENV == "development"
|
||||||
|
|
||||||
export default
|
export default
|
||||||
name: "App"
|
name: "App"
|
||||||
data: ->
|
data: ->
|
||||||
largoVentana: window.innerWidth
|
largoVentana: window.innerWidth
|
||||||
components:
|
components:
|
||||||
'barra-lateral': barraLateral
|
'barra-lateral': barraLateral
|
||||||
created: ->
|
created: ->
|
||||||
if @$store.state.animes[0]?
|
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
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="sass">
|
<style lang="sass">
|
||||||
@import "./assets/sass/variables"
|
@import "./assets/sass/variables"
|
||||||
|
|
||||||
.fondo
|
.fondo
|
||||||
width: 100%
|
width: 100%
|
||||||
height: 100%
|
height: 100%
|
||||||
top: 0
|
top: 0
|
||||||
left: 0
|
left: 0
|
||||||
position: fixed
|
position: fixed
|
||||||
z-index: 0
|
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
|
.contenido
|
||||||
padding-left: $largoTablet
|
width: 100%
|
||||||
|
position: absolute
|
||||||
|
padding-left: $largo
|
||||||
|
z-index: 1
|
||||||
|
|
||||||
@media only screen and (max-width: $movil)
|
.contenido--barraOculta
|
||||||
.contenido
|
padding-left: $largoTablet
|
||||||
padding-left: $largoMovil
|
|
||||||
padding-bottom: $bajoMovil
|
@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>
|
</style>
|
||||||
@ -11,7 +11,7 @@
|
|||||||
background-color: white
|
background-color: white
|
||||||
|
|
||||||
.fondo2
|
.fondo2
|
||||||
background-color: #e8e8e8
|
background-color: #eeeeee
|
||||||
|
|
||||||
.fondo1--negativo
|
.fondo1--negativo
|
||||||
background-color: black
|
background-color: black
|
||||||
@ -2,7 +2,7 @@ $colorPrincipal: #009961
|
|||||||
$colorSecundario: #ea486a
|
$colorSecundario: #ea486a
|
||||||
|
|
||||||
$fondo1--claro: white
|
$fondo1--claro: white
|
||||||
$fondo2--claro: #e8e8e8
|
$fondo2--claro: #eeeeee
|
||||||
|
|
||||||
$fondo1--oscuro: #101010
|
$fondo1--oscuro: #101010
|
||||||
$fondo2--oscuro: #000000
|
$fondo2--oscuro: #000000
|
||||||
|
|||||||
@ -1,46 +1,132 @@
|
|||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
div.texto1
|
div.texto1.contenedor
|
||||||
div(v-if="estadoAnime === 0") Cargando...
|
div(v-if="estadoAnime === 0") Cargando...
|
||||||
div(v-if="estadoAnime === -1") Error. Anime no encontrado
|
div(v-if="estadoAnime === -1") Error. Anime no encontrado
|
||||||
div(v-if="estadoAnime === 1")
|
div(v-if="estadoAnime === 1")
|
||||||
div.titulo {{ anime.titulo }} -> {{ anime.anime_ID }}
|
// div.titulo {{ anime.titulo }} -> {{ anime.anime_ID }}
|
||||||
p.
|
// p {{ anime }}
|
||||||
Advertencia. Página en construcción. Los links pueden estar errados. Para usar la versión estable,
|
br
|
||||||
visita <a href="https://pseudosubs.com">https://pseudosubs.com</a>
|
br
|
||||||
panel-de-descarga(:animeid="anime.anime_ID" :color="anime.color")
|
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>
|
</template>
|
||||||
|
|
||||||
<script lang="coffee">
|
<script lang="coffee">
|
||||||
import panelDescarga from "./panel-descarga.vue"
|
import panelDescarga from "./panel-descarga.vue"
|
||||||
|
|
||||||
export default
|
export default
|
||||||
name: "Anime"
|
name: "Anime"
|
||||||
components:
|
components:
|
||||||
'panel-de-descarga': panelDescarga
|
'panel-de-descarga': panelDescarga
|
||||||
data: ->
|
data: ->
|
||||||
anime: {}
|
anime: {}
|
||||||
# -1 no encontrado, 0 cargando y 1 encontrado
|
# -1 no encontrado, 0 cargando y 1 encontrado
|
||||||
estadoAnime: 0
|
estadoAnime: 0
|
||||||
created: ->
|
created: ->
|
||||||
_ = this
|
_ = this
|
||||||
animes = @$store.state.animes
|
animes = @$store.state.animes
|
||||||
resultado = -1
|
resultado = -1
|
||||||
for anime in animes
|
for anime in animes
|
||||||
if anime.link is "/Anime/" + @$route.params.nombre
|
if anime.link is "/Anime/" + @$route.params.nombre
|
||||||
_.anime = anime
|
_.anime = anime
|
||||||
resultado = 1
|
resultado = 1
|
||||||
break
|
break
|
||||||
@estadoAnime = resultado
|
@estadoAnime = resultado
|
||||||
if resultado is 1
|
if resultado is 1
|
||||||
@$store.commit "cambiarTxtAdicionalAnime", "#{anime.titulo}"
|
@$store.commit "cambiarTituloAnime", "#{anime.titulo}"
|
||||||
else
|
@$store.commit "cambiarTxtAdicionalAnime", (if anime.comentario? then anime.comentario else "Sin comentarios.")
|
||||||
@$store.commit "cambiarTxtAdicionalAnime", "?"
|
@$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>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="sass">
|
<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>
|
</style>
|
||||||
@ -1,48 +1,68 @@
|
|||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
div.anime
|
div.anime
|
||||||
div.cont.fondo1.tarjeta
|
div.cont.fondo1.tarjeta
|
||||||
router-link.titulo.texto1(:to="anime.link") {{ anime.titulo }}
|
router-link.titulo.texto1(:to="anime.link") {{ anime.titulo }}
|
||||||
br
|
br
|
||||||
router-link(:to="anime.link")
|
router-link.link(:to="anime.link")
|
||||||
img.imagen(:src="anime.imgUrl")
|
img.imagen(:src="anime.imgUrl")
|
||||||
//
|
//
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="coffee">
|
<script lang="coffee">
|
||||||
|
|
||||||
export default
|
export default
|
||||||
name: "anime"
|
name: "anime"
|
||||||
props:
|
props:
|
||||||
anime:
|
anime:
|
||||||
type: Object
|
type: Object
|
||||||
required: true
|
required: true
|
||||||
#
|
#
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="sass">
|
<style scoped lang="sass">
|
||||||
@import "../../assets/sass/variables"
|
@import "../../assets/sass/variables"
|
||||||
|
|
||||||
.anime
|
.anime
|
||||||
width: 50%
|
width: 33%
|
||||||
float: left
|
float: left
|
||||||
padding: 20px
|
padding: 20px
|
||||||
|
|
||||||
.cont
|
.cont
|
||||||
@extend %bordeRedondo-std
|
@extend %bordeRedondo-std
|
||||||
padding: 20px
|
padding: 20px
|
||||||
height: 500px
|
|
||||||
|
|
||||||
.titulo
|
.titulo
|
||||||
display: inline-block
|
display: inline-block
|
||||||
font:
|
font:
|
||||||
family: Muli, "Open Sans", sans-serif
|
family: Muli, "Open Sans", sans-serif
|
||||||
size: xx-large
|
size: xx-large
|
||||||
padding-bottom: 20px
|
margin-bottom: 20px
|
||||||
text-decoration: none
|
text-decoration: none
|
||||||
|
overflow: hidden
|
||||||
|
white-space: nowrap
|
||||||
|
width: 100%
|
||||||
|
|
||||||
.imagen
|
.imagen
|
||||||
height: 400px
|
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>
|
</style>
|
||||||
@ -1,24 +1,31 @@
|
|||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
div.animes
|
div.animes
|
||||||
anime-item(v-for="anime in $store.state.animes" :anime="anime")
|
anime-item(v-for="anime in $store.state.animes" :anime="anime")
|
||||||
//
|
//
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="coffee">
|
<script lang="coffee">
|
||||||
import animeItem from "./anime.vue"
|
import animeItem from "./anime.vue"
|
||||||
|
|
||||||
export default
|
export default
|
||||||
name: "lista-animes"
|
name: "lista-animes"
|
||||||
components:
|
components:
|
||||||
'anime-item': animeItem
|
'anime-item': animeItem
|
||||||
created: ->
|
created: ->
|
||||||
@$store.commit "cambiarTxtAdicionalAnime", "Comprimido sin perder 1 solo pixel."
|
@$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>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="sass">
|
<style scoped lang="sass">
|
||||||
.animes::after
|
.animes::after
|
||||||
content: ""
|
content: ""
|
||||||
display: table
|
display: table
|
||||||
clear: both
|
clear: both
|
||||||
</style>
|
</style>
|
||||||
@ -1,43 +1,43 @@
|
|||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
div.texto1.fondo1.main
|
div.texto1.fondo1.main
|
||||||
router-link(to="/Anime")
|
router-link(to="/Anime")
|
||||||
span.anime.tarjeta
|
span.anime.tarjeta
|
||||||
div.titulo.texto1 Anime
|
div.titulo.texto1 Anime
|
||||||
div.titulo__descr.texto1 Ligero/MP4/MKV 720p/1080p 24fps/60fps
|
div.titulo__descr.texto1 Ligero/MP4/MKV 720p/1080p 24fps/60fps
|
||||||
router-link(to="/Novelas")
|
router-link(to="/Novelas")
|
||||||
span.novelas.tarjeta
|
span.novelas.tarjeta
|
||||||
div.titulo.texto1 Novelas
|
div.titulo.texto1 Novelas
|
||||||
div.titulo__descr.texto1 Redistribuyendo legalmente lo ilegal.
|
div.titulo__descr.texto1 Redistribuyendo legalmente lo ilegal.
|
||||||
//
|
//
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="coffee">
|
<script lang="coffee">
|
||||||
|
|
||||||
export default
|
export default
|
||||||
name: "animes-novelas"
|
name: "animes-novelas"
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="sass">
|
<style scoped lang="sass">
|
||||||
.main
|
.main
|
||||||
margin: 50px 0
|
margin: 50px 0
|
||||||
|
|
||||||
.anime, .novelas
|
.anime, .novelas
|
||||||
width: 50%
|
width: 50%
|
||||||
display: inline-block
|
display: inline-block
|
||||||
padding: 20px
|
padding: 20px
|
||||||
|
|
||||||
.titulo
|
.titulo
|
||||||
font:
|
font:
|
||||||
family: "Product Sans", Muli, "Open Sans", sans-serif
|
family: "Product Sans", Muli, "Open Sans", sans-serif
|
||||||
size: 3rem
|
size: 3rem
|
||||||
weight: bold
|
weight: bold
|
||||||
|
|
||||||
.titulo__descr
|
.titulo__descr
|
||||||
opacity: 0.5
|
opacity: 0.5
|
||||||
font:
|
font:
|
||||||
family: Muli, "Open Sans", sans-serif
|
family: Muli, "Open Sans", sans-serif
|
||||||
size: x-large
|
size: x-large
|
||||||
|
|
||||||
//
|
//
|
||||||
</style>
|
</style>
|
||||||
@ -1,37 +1,37 @@
|
|||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
div.caracs.texto1--negativo
|
div.caracs.texto1--negativo
|
||||||
div.motto.fondo1--negativo.texto1--negativo Vuelve a<br><b>disfrutar</b><br>del anime
|
div.motto.fondo1--negativo.texto1--negativo Vuelve a<br><b>disfrutar</b><br>del anime
|
||||||
div.caracsCont
|
div.caracsCont
|
||||||
div.titulo Sin publicidad
|
div.titulo Sin publicidad
|
||||||
div.descripcion.
|
div.descripcion.
|
||||||
Encuentra lo que buscas, y descárgalo. No tendrás que cerrar ningún pop-up, evitar
|
Encuentra lo que buscas, y descárgalo. No tendrás que cerrar ningún pop-up, evitar
|
||||||
banners, o esperar 5 segundos.<br>
|
banners, o esperar 5 segundos.<br>
|
||||||
<br>
|
<br>
|
||||||
Aunque el Hosting, Dominio, y Almacenamiento no son gratis, PseudoSubs es libre de anuncios.
|
Aunque el Hosting, Dominio, y Almacenamiento no son gratis, PseudoSubs es libre de anuncios.
|
||||||
Desde siempre, y para siempre.
|
Desde siempre, y para siempre.
|
||||||
div.titulo Minimalista
|
div.titulo Minimalista
|
||||||
div.descripcion.
|
div.descripcion.
|
||||||
Una página intuitiva, facil de usar.<br>
|
Una página intuitiva, facil de usar.<br>
|
||||||
<br>
|
<br>
|
||||||
Anime con karaokes mínimos, si no te gustan, puedes ignorarlos.<br>
|
Anime con karaokes mínimos, si no te gustan, puedes ignorarlos.<br>
|
||||||
<br>
|
<br>
|
||||||
Fuentes y colores fáciles de leer.
|
Fuentes y colores fáciles de leer.
|
||||||
div.titulo Instantaneo
|
div.titulo Instantaneo
|
||||||
div.descripcion.
|
div.descripcion.
|
||||||
Navega por la página de forma instantanea, sin tiempos de carga.<br>
|
Navega por la página de forma instantanea, sin tiempos de carga.<br>
|
||||||
<br>
|
<br>
|
||||||
Utilizamos lo último en tecnología para brindarte una experiencia
|
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!
|
<b>inigualable</b>. ¡Si encuentras una página más rápida te devolvemos tu dinero!
|
||||||
div.titulo Moderno
|
div.titulo No apto para puristas
|
||||||
div.descripcion.
|
div.descripcion.
|
||||||
¿1.5 GB por episodio? No gracias.<br>
|
¿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
|
Con las últimas técnicas de compresión, reducimos 1GB a ~400MB en 1080px, y hasta 100MB en
|
||||||
720p ligero. ¡Sin perdida de calidad!
|
720p ligero. ¡Sin perdida de calidad!
|
||||||
br
|
br
|
||||||
br
|
br
|
||||||
br
|
br
|
||||||
br
|
br
|
||||||
//
|
//
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="coffee">
|
<script lang="coffee">
|
||||||
@ -42,36 +42,36 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="sass">
|
<style scoped lang="sass">
|
||||||
@import "../../assets/sass/variables"
|
@import "../../assets/sass/variables"
|
||||||
|
|
||||||
.caracs
|
.caracs
|
||||||
background: linear-gradient($colorPrincipal 40%, $colorSecundario)
|
background: linear-gradient($colorPrincipal 40%, $colorSecundario)
|
||||||
padding: 50px 25px
|
padding: 50px 25px
|
||||||
margin-top: 100px
|
margin-top: 100px
|
||||||
//
|
//
|
||||||
|
|
||||||
.motto
|
.motto
|
||||||
display: inline-block
|
display: inline-block
|
||||||
padding: 20px
|
padding: 20px
|
||||||
position: relative
|
position: relative
|
||||||
top: -115px
|
top: -115px
|
||||||
font:
|
font:
|
||||||
family: 'Product Sans' ,Muli, 'Open Sans', sans-serif
|
family: 'Product Sans', Muli, 'Open Sans', sans-serif
|
||||||
size: x-large
|
size: x-large
|
||||||
text-transform: uppercase
|
text-transform: uppercase
|
||||||
|
|
||||||
.caracsCont
|
.caracsCont
|
||||||
color: white
|
color: white
|
||||||
max-width: 540px
|
max-width: 540px
|
||||||
padding: 0 50px
|
padding: 0 50px
|
||||||
|
|
||||||
.titulo
|
.titulo
|
||||||
font:
|
font:
|
||||||
family: Muli, "Open Sans", sans-serif
|
family: Muli, "Open Sans", sans-serif
|
||||||
size: 2.5rem
|
size: 2.5rem
|
||||||
//
|
//
|
||||||
|
|
||||||
.descripcion
|
.descripcion
|
||||||
padding: 50px 20px
|
padding: 50px 20px
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@ -51,7 +51,7 @@
|
|||||||
errorAnimesNoEncontrados: ->
|
errorAnimesNoEncontrados: ->
|
||||||
if @$store.state.animes[0]?
|
if @$store.state.animes[0]?
|
||||||
if @primeraCarga
|
if @primeraCarga
|
||||||
if DEV then console.log "Los animes existen, y voy a ciclarlos v:<"
|
|
||||||
@anime = @obtenerSigAnime()
|
@anime = @obtenerSigAnime()
|
||||||
@establecerIntervalo()
|
@establecerIntervalo()
|
||||||
@primeraCarga = false
|
@primeraCarga = false
|
||||||
|
|||||||
@ -5,8 +5,8 @@
|
|||||||
div.otro(:style="'min-height: ' + altoPantalla + 'px' ")
|
div.otro(:style="'min-height: ' + altoPantalla + 'px' ")
|
||||||
div.col
|
div.col
|
||||||
div.fil
|
div.fil
|
||||||
div.titulo Cámbiate a PseudoSubs
|
div.titulo <!--Cámbiate a PseudoSubs--> RIP PseudoSubs - 2017-2019
|
||||||
div.motto Y notarás la diferencia
|
div.motto Y notarás la diferencia <small>¿O no?</small>
|
||||||
br
|
br
|
||||||
br
|
br
|
||||||
br
|
br
|
||||||
|
|||||||
@ -1,271 +1,290 @@
|
|||||||
<!-- TODO: Re-escribir para que la funcionalidad sea igual pero el codigo no sea asi de horrible.
|
<!-- 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. -->
|
Barra Lateral. Responsivo hasta los 285px de ancho. -->
|
||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
div.barra
|
div.barra
|
||||||
div.lateral.fondo2.ocultarEnMovil(:class="$store.state.barraLateralOculta? 'barraOculta': ''")
|
div.lateral.fondo2.ocultarEnMovil(:class="$store.state.barraLateralOculta? 'barraOculta': ''")
|
||||||
div.botonOcultar(@click="ocultarBarraLateral()" :style="'display: ' + (largoVentana < 1201? 'none': 'block')").
|
div.botonOcultar(@click="ocultarBarraLateral()" :style="'display: ' + (largoVentana < 1201? 'none': 'block')").
|
||||||
{{ $store.state.barraLateralOculta? '>>': '<<' }}
|
{{ $store.state.barraLateralOculta? '>>': '<<' }}
|
||||||
|
|
||||||
router-link.linkImg(to="/" title="Ir al inicio")
|
router-link.linkImg(to="/" title="Ir al inicio")
|
||||||
img.tarjeta(src="../assets/img/logo.svg")
|
img.tarjeta(src="../assets/img/logo.svg")
|
||||||
|
|
||||||
div.items.tarjeta.fondo1.texto2
|
div.items.tarjeta.fondo1.texto2
|
||||||
div.cambiarModo(@click="cambiarModoColor()")
|
div.cambiarModo(@click="cambiarModoColor()")
|
||||||
span.ocultarEnTablet Cambiar a modo {{ modoSiguiente }}
|
span.ocultarEnTablet Cambiar a modo {{ modoSiguiente }}
|
||||||
i.material-icons.texto2.mostrarEnTablet.
|
i.material-icons.texto2.mostrarEnTablet.
|
||||||
{{ modoSiguiente === 'oscuro'? 'brightness_3': 'brightness_5' }}
|
{{ modoSiguiente === 'oscuro'? 'brightness_3': 'brightness_5' }}
|
||||||
br
|
br
|
||||||
hr
|
hr
|
||||||
br
|
br
|
||||||
|
|
||||||
router-link(to="/")
|
router-link(to="/")
|
||||||
span.ocultarEnTablet Nosotros
|
span.ocultarEnTablet Nosotros
|
||||||
i.material-icons.texto2.mostrarEnTablet group
|
i.material-icons.texto2.mostrarEnTablet group
|
||||||
br.mostrarEnTablet
|
br.mostrarEnTablet
|
||||||
|
|
||||||
router-link(to="/")
|
router-link(to="/")
|
||||||
span.ocultarEnTablet Cambios
|
span.ocultarEnTablet Cambios
|
||||||
i.material-icons.texto2.mostrarEnTablet new_releases
|
i.material-icons.texto2.mostrarEnTablet new_releases
|
||||||
br.mostrarEnTablet
|
br.mostrarEnTablet
|
||||||
|
|
||||||
router-link(to="/")
|
router-link(to="/")
|
||||||
span.ocultarEnTablet Diseño
|
span.ocultarEnTablet Diseño
|
||||||
i.material-icons.texto2.mostrarEnTablet brush
|
i.material-icons.texto2.mostrarEnTablet brush
|
||||||
br.mostrarEnTablet
|
br.mostrarEnTablet
|
||||||
|
|
||||||
a(href="https://github.com/Araozu/PseudoSubs_" target="_blank" title="GitHub")
|
a(href="https://github.com/Araozu/PseudoSubs_" target="_blank" title="GitHub")
|
||||||
span.ocultarEnTablet GitHub
|
span.ocultarEnTablet GitHub
|
||||||
img.imgGitHub.texto2.mostrarEnTablet(
|
img.imgGitHub.texto2.mostrarEnTablet(
|
||||||
:src="modoSiguiente === 'oscuro'? '/img/github.svg': '/img/githubOsc.svg' ")
|
:src="modoSiguiente === 'oscuro'? '/img/github.svg': '/img/githubOsc.svg' ")
|
||||||
br.mostrarEnTablet
|
br.mostrarEnTablet
|
||||||
|
|
||||||
router-link(to="/cuenta")
|
router-link(to="/cuenta")
|
||||||
span.ocultarEnTablet Ajustes
|
span.ocultarEnTablet Ajustes
|
||||||
i.material-icons.texto2.mostrarEnTablet settings
|
i.material-icons.texto2.mostrarEnTablet settings
|
||||||
|
|
||||||
div.ocultarEnTablet
|
div.ocultarEnTablet
|
||||||
br
|
br
|
||||||
hr
|
hr
|
||||||
br
|
br
|
||||||
div.credito PseudoSubs
|
div.credito PseudoSubs
|
||||||
div.copy © {{ new Date().getUTCFullYear() }} - araozu.dev
|
div.copy © {{ new Date().getUTCFullYear() }} - araozu.dev
|
||||||
br
|
br
|
||||||
div.descr.
|
div.descr.
|
||||||
Traducciones Inglés|Japonés → español.<br>
|
Traducciones Inglés|Japonés → español.<br>
|
||||||
<br>
|
<br>
|
||||||
Version 5.0.0
|
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.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>
|
</template>
|
||||||
|
|
||||||
<script lang="coffee">
|
<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
|
export default
|
||||||
name: "barra-lateral"
|
name: "barra-lateral"
|
||||||
data: ->
|
data: ->
|
||||||
modoSiguiente: "oscuro"
|
modoSiguiente: "oscuro"
|
||||||
elemHtmlModoOscuro: document.getElementById "modoOscuro"
|
elemHtmlModoOscuro: document.getElementById "modoOscuro"
|
||||||
largoVentana: window.innerWidth
|
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:
|
ocultarBarraLateral: ->
|
||||||
cambiarModoColor: (color = @modoSiguiente) ->
|
estadoActual = @$store.state.barraLateralOculta
|
||||||
localStorage?.setItem "modoColor", color
|
console.log "Anuma v: #{estadoActual}"
|
||||||
@$store.commit "cambiarModoColor", color
|
@$store.commit "cambiarBarraLateral"
|
||||||
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: ->
|
created: ->
|
||||||
estadoActual = @$store.state.barraLateralOculta
|
unless this.elemHtmlModoOscuro
|
||||||
console.log "Anuma v: #{estadoActual}"
|
nuevoElem = document.createElement "style"
|
||||||
@$store.commit "cambiarBarraLateral"
|
nuevoElem.type = "text/css"
|
||||||
|
nuevoElem.id = "modoOscuro"
|
||||||
|
document.head.appendChild nuevoElem
|
||||||
|
@elemHtmlModoOscuro = nuevoElem
|
||||||
|
|
||||||
created: ->
|
modoColor =
|
||||||
unless this.elemHtmlModoOscuro
|
if Storage? and localStorage.getItem "modoColor"
|
||||||
nuevoElem = document.createElement "style"
|
localStorage.getItem "modoColor"
|
||||||
nuevoElem.type = "text/css"
|
else if Storage?
|
||||||
nuevoElem.id = "modoOscuro"
|
localStorage.setItem "modoColor", "oscuro"
|
||||||
document.head.appendChild nuevoElem
|
"oscuro"
|
||||||
@elemHtmlModoOscuro = nuevoElem
|
else
|
||||||
|
console.log "No hay soporte para LocalStorage"
|
||||||
|
"claro"
|
||||||
|
|
||||||
modoColor =
|
@modoSiguiente = if modoColor is "claro" then "oscuro" else "claro"
|
||||||
if Storage? and localStorage.getItem "modoColor"
|
@cambiarModoColor 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>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="sass">
|
<style scoped lang="sass">
|
||||||
@import "../assets/sass/variables"
|
@import "../assets/sass/variables"
|
||||||
.barraOculta
|
|
||||||
width: 100px !important
|
.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
|
.cambiarModo
|
||||||
text-decoration: none
|
border-radius: 5px
|
||||||
&:hover
|
text-decoration: underline
|
||||||
background-color: inherit
|
cursor: pointer
|
||||||
a
|
transition: background-color 250ms ease-out
|
||||||
text-decoration: none
|
|
||||||
.linkImg
|
|
||||||
width: 70px
|
|
||||||
.ocultarEnTablet
|
|
||||||
display: none
|
|
||||||
.mostrarEnTablet
|
|
||||||
display: initial
|
|
||||||
|
|
||||||
.botonOcultar
|
&:hover
|
||||||
color: white
|
background-color: $colorSecundario
|
||||||
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
|
.material-icons
|
||||||
border-radius: 5px
|
font-size: 40px
|
||||||
text-decoration: underline
|
|
||||||
cursor: pointer
|
|
||||||
transition: background-color 250ms ease-out
|
|
||||||
&:hover
|
|
||||||
background-color: $colorSecundario
|
|
||||||
|
|
||||||
.material-icons
|
.imgGitHub
|
||||||
font-size: 40px
|
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
|
.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
|
.linkImg
|
||||||
width: $largoImgTablet
|
@extend %margen-std
|
||||||
|
display: inline-block
|
||||||
|
width: $largoImg
|
||||||
|
|
||||||
@media only screen and (min-width: $tablet + 1)
|
img
|
||||||
.mostrarEnTablet
|
@extend %bordeRedondo-std
|
||||||
display: none
|
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 queries para movil
|
||||||
@media only screen and (max-width: $movil)
|
@media only screen and (max-width: $movil)
|
||||||
.ocultarEnMovil
|
.ocultarEnMovil
|
||||||
display: none
|
display: none
|
||||||
|
|
||||||
@media only screen and (min-width: $movil + 1)
|
@media only screen and (min-width: $movil + 1)
|
||||||
.mostrarEnMovil
|
.mostrarEnMovil
|
||||||
display: none
|
display: none
|
||||||
|
|
||||||
// Ocultar link GitHub
|
// Ocultar link GitHub
|
||||||
@media only screen and (max-width: 380px)
|
@media only screen and (max-width: 380px)
|
||||||
.github
|
.github
|
||||||
display: none
|
display: none
|
||||||
|
|
||||||
.inferior .links i
|
.inferior .links i
|
||||||
padding: 0 8px
|
padding: 0 8px
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@ -7,33 +7,48 @@ Vue.use(Vuex)
|
|||||||
DEV = process.env.NODE_ENV == "development"
|
DEV = process.env.NODE_ENV == "development"
|
||||||
|
|
||||||
export default new Vuex.Store
|
export default new Vuex.Store
|
||||||
state:
|
state:
|
||||||
barraLateralOculta:
|
barraLateralOculta:
|
||||||
(localStorage?.getItem "barraLateralOculta") == "true" ? true
|
(localStorage?.getItem "barraLateralOculta") == "true" ? true
|
||||||
|
|
||||||
animes:
|
animes:
|
||||||
if localStorage?
|
if localStorage?
|
||||||
YAML.parse ((localStorage.getItem "animes") ? "[]")
|
YAML.parse ((localStorage.getItem "animes") ? "[]")
|
||||||
else
|
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:
|
establecerAnime: (state, animes) ->
|
||||||
cambiarBarraLateral: (state) ->
|
localStorage?.setItem "animes", YAML.stringify animes
|
||||||
state.barraLateralOculta = !state.barraLateralOculta
|
state.animes = animes
|
||||||
localStorage?.setItem "barraLateralOculta", state.barraLateralOculta
|
|
||||||
|
|
||||||
establecerAnime: (state, animes) ->
|
cambiarModoColor: (state, color) ->
|
||||||
localStorage?.setItem "animes", YAML.stringify animes
|
state.modoColor = color
|
||||||
state.animes = animes
|
|
||||||
|
|
||||||
cambiarModoColor: (state, color) ->
|
cambiarTituloAnime: (state, txt) ->
|
||||||
state.modoColor = color
|
state.tituloAnime = txt
|
||||||
|
|
||||||
cambiarTxtAdicionalAnime: (state, txt) ->
|
cambiarTxtAdicionalAnime: (state, txt) ->
|
||||||
state.txtAdicionalAnime = 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">
|
<template lang="pug">
|
||||||
div.texto1
|
div.texto1.main
|
||||||
div.tarjeta.fondo1.tituloC
|
div.imagenFondo.fondo1(:class="$store.state.mostrarImgAnime? clasesImg : ''" :style="estiloImg")
|
||||||
router-link.titulo.texto1(to="/Anime") Animes
|
div.fondo1.tituloC(:class="$store.state.mostrarImgAnime? clasesCont : ''")
|
||||||
br
|
div.textos
|
||||||
div.titulo__descr {{ $store.state.txtAdicionalAnime }}
|
router-link.titulo.texto1(to="/Anime" :class="sombraLink") {{ $store.state.tituloAnime }}
|
||||||
router-view
|
br
|
||||||
//
|
div.titulo__descr.texto1 {{ $store.state.txtAdicionalAnime }}
|
||||||
|
router-view
|
||||||
|
//
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="coffee">
|
<script lang="coffee">
|
||||||
|
|
||||||
export default
|
export default
|
||||||
name: "AnimeList"
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="sass">
|
<style scoped lang="sass">
|
||||||
|
@import "../assets/sass/variables"
|
||||||
|
|
||||||
.tituloC
|
.main
|
||||||
padding: 50px
|
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
|
.titulo
|
||||||
font:
|
font:
|
||||||
family: "Product Sans", Muli, "Open Sans", sans-serif
|
family: "Product Sans", Muli, "Open Sans", sans-serif
|
||||||
size: 4rem
|
size: 4rem
|
||||||
weight: bold
|
weight: bold
|
||||||
text-decoration: none
|
text-decoration: none
|
||||||
|
|
||||||
.titulo__descr
|
.titulo__descr
|
||||||
opacity: 0.5
|
opacity: 0.5
|
||||||
font:
|
font:
|
||||||
family: Muli, "Open Sans", sans-serif
|
family: Muli, "Open Sans", sans-serif
|
||||||
size: x-large
|
size: x-large
|
||||||
|
|
||||||
|
@media only screen and (max-width: 425px)
|
||||||
|
.titulo
|
||||||
|
font-size: 3rem
|
||||||
|
|
||||||
.animes::after
|
.alto500
|
||||||
content: ""
|
height: 350px
|
||||||
display: table
|
|
||||||
clear: both
|
|
||||||
|
|
||||||
//
|
//
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@ -1,88 +1,92 @@
|
|||||||
<!-- Incompleto -->
|
<!-- Incompleto -->
|
||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
div.texto2.contenedor
|
div.texto2.contenedor
|
||||||
div.tarjeta.fondo1
|
div.tarjeta.fondo1
|
||||||
h1.titulo Sin perdida de calidad.
|
h1.titulo Sin perdida de calidad.
|
||||||
br
|
br
|
||||||
div.descr
|
div.descr
|
||||||
p.
|
p.
|
||||||
En PseudoSubs no sacrificamos nada. Hemos alcanzado el balance ideal para no perder
|
En PseudoSubs no sacrificamos nada. Hemos alcanzado el balance ideal para no perder
|
||||||
nada<sup>*</sup> de calidad.
|
nada<sup>*</sup> de calidad.
|
||||||
p(style="font-size: small") * Sin perdida de calidad visible.
|
p(style="font-size: small") * Sin perdida de calidad visible.
|
||||||
p(style="font-size: small").
|
p(style="font-size: small").
|
||||||
** Las perdidas mostradas aquí son mínimas, pues el programa compara exactamente pixel por pixel.
|
** Las perdidas mostradas aquí son mínimas, pues el programa compara exactamente pixel por pixel.
|
||||||
No representa una gran perdida.
|
No representa una gran perdida.
|
||||||
p(style="font-size: small").
|
p(style="font-size: small").
|
||||||
*** Incluso si comparas pixel por pixel, las diferencias son inapreciables.
|
*** Incluso si comparas pixel por pixel, las diferencias son inapreciables.
|
||||||
br
|
br
|
||||||
br
|
br
|
||||||
p Hemos realizado pruebas con varias configuraciones y revisado pixel a pixel.<br>
|
p Hemos realizado pruebas con varias configuraciones y revisado pixel a pixel.<br>
|
||||||
br
|
br
|
||||||
br
|
br
|
||||||
p.
|
p.
|
||||||
Las pruebas se realizaron con <a href="https://github.com/rsmbl/Resemble.js" target="blank">Resemble.js</a>.
|
Las pruebas se realizaron con <a href="https://github.com/rsmbl/Resemble.js" target="blank">Resemble.js</a>.
|
||||||
br
|
br
|
||||||
br
|
br
|
||||||
h2.subtitulo Original vs Soft - Irodzuku Sekai no Ashita Kara 13 03:15
|
h2.subtitulo Original vs Soft - Irodzuku Sekai no Ashita Kara 13 03:15
|
||||||
br
|
br
|
||||||
br
|
br
|
||||||
h2.subtitulo Original vs Hard 720p - Irodzuku Sekai no Ashita Kara 13 03:15
|
h2.subtitulo Original vs Hard 720p - Irodzuku Sekai no Ashita Kara 13 03:15
|
||||||
br
|
br
|
||||||
br
|
br
|
||||||
h2.subtitulo Original vs Hard - Yakusoku no Neverland
|
h2.subtitulo Original vs Hard - Yakusoku no Neverland
|
||||||
br
|
br
|
||||||
br
|
br
|
||||||
h2.subtitulo Original vs ligero - Yakusoku no Neverland
|
h2.subtitulo Original vs ligero - Yakusoku no Neverland
|
||||||
|
|
||||||
img.res(src="../assets/img/Comparacion/Yaku-OvsLig.jpg")
|
img.res(src="../assets/img/Comparacion/Yaku-OvsLig.jpg")
|
||||||
p.label Caso promedio
|
p.label Caso promedio
|
||||||
br
|
br
|
||||||
p.
|
p.
|
||||||
La versión ligera en 720p HEVC es un <b><i>0.31%</i></b> diferente al original.
|
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%.
|
En el peor de los casos es hasta 1.52%, y en el mejor, 0%.
|
||||||
br
|
br
|
||||||
img.res(src="../assets/img/Comparacion/Yak_OvsLig_Peor.jpg")
|
img.res(src="../assets/img/Comparacion/Yak_OvsLig_Peor.jpg")
|
||||||
p.label.texto2 Peor caso - 1.52% de distorsión.
|
p.label.texto2 Peor caso - 1.52% de distorsión.
|
||||||
//
|
//
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="coffee">
|
<script lang="coffee">
|
||||||
|
|
||||||
export default
|
export default
|
||||||
name: "Comparar"
|
name: "Comparar"
|
||||||
|
created: ->
|
||||||
|
@$store.commit "cambiarRutaActual", ["Inicio", "cmp"]
|
||||||
|
#
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="sass">
|
<style scoped lang="sass">
|
||||||
@import "../assets/sass/variables"
|
@import "../assets/sass/variables"
|
||||||
|
|
||||||
.contenedor
|
.contenedor
|
||||||
width: 90%
|
width: 90%
|
||||||
margin: 30px auto
|
margin: 30px auto
|
||||||
div
|
|
||||||
@extend %bordeRedondo-std
|
|
||||||
|
|
||||||
.titulo
|
div
|
||||||
padding: 15px 0
|
@extend %bordeRedondo-std
|
||||||
text-align: center
|
|
||||||
font:
|
|
||||||
size: 2rem
|
|
||||||
family: Muli, "Open Sans", sans-serif
|
|
||||||
|
|
||||||
.subtitulo
|
.titulo
|
||||||
font:
|
padding: 15px 0
|
||||||
size: 1.5rem
|
text-align: center
|
||||||
family: Muli, "Open Sans", sans-serif
|
font:
|
||||||
|
size: 2rem
|
||||||
|
family: Muli, "Open Sans", sans-serif
|
||||||
|
|
||||||
.descr
|
.subtitulo
|
||||||
padding: 20px 40px
|
font:
|
||||||
font-size: x-large
|
size: 1.5rem
|
||||||
|
family: Muli, "Open Sans", sans-serif
|
||||||
|
|
||||||
.res
|
.descr
|
||||||
width: 100%
|
padding: 20px 40px
|
||||||
|
font-size: x-large
|
||||||
|
|
||||||
.label
|
.res
|
||||||
text-align: center
|
width: 100%
|
||||||
font-size: large
|
|
||||||
|
.label
|
||||||
|
text-align: center
|
||||||
|
font-size: large
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@ -1,11 +1,14 @@
|
|||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
div.texto1 Error 404. Esta página no existe (aun).
|
div.texto1 Error 404. Esta página no existe (aun).
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="coffee">
|
<script lang="coffee">
|
||||||
|
|
||||||
export default
|
export default
|
||||||
name: "Error404"
|
name: "Error404"
|
||||||
|
created: ->
|
||||||
|
@$store.commit "cambiarRutaActual", ["Inicio", "404"]
|
||||||
|
#
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -1,33 +1,35 @@
|
|||||||
<template lang="pug">
|
<template lang="pug">
|
||||||
div.inicio
|
div.inicio
|
||||||
ultimos-eps
|
ultimos-eps
|
||||||
animes-novelas
|
animes-novelas
|
||||||
br
|
br
|
||||||
caracteristicas
|
caracteristicas
|
||||||
y-notaras-la-diferencia
|
y-notaras-la-diferencia
|
||||||
//
|
//
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="coffee">
|
<script lang="coffee">
|
||||||
import ultimosEps from "../components/Inicio/ultimos-animes.vue"
|
import ultimosEps from "../components/Inicio/ultimos-animes.vue"
|
||||||
import caracteristicas from "../components/Inicio/caracteristicas.vue"
|
import caracteristicas from "../components/Inicio/caracteristicas.vue"
|
||||||
import yNotarasLaDiferencia from "../components/Inicio/y-notaras-la-diferencia.vue"
|
import yNotarasLaDiferencia from "../components/Inicio/y-notaras-la-diferencia.vue"
|
||||||
import animesNovelas from "../components/Inicio/animes-novelas.vue"
|
import animesNovelas from "../components/Inicio/animes-novelas.vue"
|
||||||
|
|
||||||
export default
|
export default
|
||||||
name: "Inicio"
|
name: "Inicio"
|
||||||
components:
|
components:
|
||||||
caracteristicas: caracteristicas
|
caracteristicas: caracteristicas
|
||||||
'y-notaras-la-diferencia': yNotarasLaDiferencia
|
'y-notaras-la-diferencia': yNotarasLaDiferencia
|
||||||
'ultimos-eps': ultimosEps
|
'ultimos-eps': ultimosEps
|
||||||
'animes-novelas': animesNovelas
|
'animes-novelas': animesNovelas
|
||||||
#
|
created: ->
|
||||||
|
@$store.commit "cambiarRutaActual", [{nombre: "PseudoSubs", ruta: "/"}]
|
||||||
|
#
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="sass">
|
<style scoped lang="sass">
|
||||||
.inicio
|
.inicio
|
||||||
position: relative
|
position: relative
|
||||||
width: 100%
|
width: 100%
|
||||||
</style>
|
</style>
|
||||||
@ -33,4 +33,4 @@ export default (req, res) ->
|
|||||||
razon: "No se ha pasado ningún id."
|
razon: "No se ha pasado ningún id."
|
||||||
ruta: "/Anime/obtenerTodosAnimes"
|
ruta: "/Anime/obtenerTodosAnimes"
|
||||||
adicional: "Anime ID actual: #{req.params.id}"
|
adicional: "Anime ID actual: #{req.params.id}"
|
||||||
"""
|
"""
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user