- Agregados los datos a un json en la carpeta public.
- Agregados componentes para Anime
This commit is contained in:
Fernando
parent
f06ce17f44
commit
cc0ad0ce73
382
public/animes.json
Normal file
382
public/animes.json
Normal file
@ -0,0 +1,382 @@
|
||||
[
|
||||
{
|
||||
"titulo": "Irozuku Sekai no Ashita Kara",
|
||||
"link": "/Anime/2018/Otono/IrozuKai",
|
||||
"imgUrl": "https://myanimelist.cdn-dena.com/images/anime/1424/93855.jpg",
|
||||
"descripcion": "Ambientada en la ciudad de Nagasaki, la historia tiene lugar en un mundo en el que una cantidad minúscula de magia permanece en la vida cotidiana. Hitomi Tsukishiro es una descendiente de 17 años de una familia de brujas que creció con emociones vivas, ya que perdió su sentido del color a una edad muy temprana. Sintiéndose mal por el futuro de su nieta, Kohaku, una gran bruja, envía a Hitomi al pasado, el año 2018. Mediante intercambios con su abuela de 17 años y los miembros de su club, la historia sigue el crecimiento de Hitomi como persona.",
|
||||
"data": {
|
||||
"estudio": "P.A. Works",
|
||||
"eps": "?",
|
||||
"alAire": "06 de Octubre a ?",
|
||||
"temporada": "Otono",
|
||||
"anio": 2018,
|
||||
"fuente": "Original",
|
||||
"generos": "Drama, Magia, Romance",
|
||||
"OP": {
|
||||
"1": "17sai - Haruka to Miyuki"
|
||||
},
|
||||
"ED": {
|
||||
"1": "Mimei no Kimi to Hakumei no Mahou - Yanagi Nagi"
|
||||
}
|
||||
},
|
||||
"onPagPrin": [true,1],
|
||||
"key": 10001111
|
||||
},
|
||||
{
|
||||
"titulo": "Goblin Slayer",
|
||||
"link": "/Anime/2018/Otono/Goblin-Slayer",
|
||||
"imgUrl": "",
|
||||
"descripcion": "",
|
||||
"data": {
|
||||
"estudio": "",
|
||||
"eps": "",
|
||||
"alAire": "",
|
||||
"temporada": "",
|
||||
"anio": 2018,
|
||||
"fuente": "",
|
||||
"generos": "",
|
||||
"OP": {
|
||||
"1": ""
|
||||
},
|
||||
"ED": {
|
||||
"1": ""
|
||||
}
|
||||
},
|
||||
"onPagPrin": [false,2],
|
||||
"key": 10001110
|
||||
},
|
||||
{
|
||||
"titulo": "Overlord 3",
|
||||
"link": "/Anime/2018/Verano/Overlord-3",
|
||||
"imgUrl": "",
|
||||
"descripcion": "Tercera temporada de Overlord.",
|
||||
"data": {
|
||||
"estudio": "Madhouse",
|
||||
"eps": "13",
|
||||
"alAire": "10 de Julio a 2 de Octubre",
|
||||
"temporada": "Verano",
|
||||
"anio": 2018,
|
||||
"fuente": "Novela Ligera",
|
||||
"generos": "Accion, Fantasia, Magia, Sobrenatural",
|
||||
"OP": {
|
||||
"1": "VORACITY - MYTH & ROID"
|
||||
},
|
||||
"ED": {
|
||||
"1": "Silent Solitude - OxT"
|
||||
}
|
||||
},
|
||||
"onPagPrin": [false,2],
|
||||
"key": 10001101
|
||||
},
|
||||
{
|
||||
"titulo": "Banana Fish",
|
||||
"link": "/Anime/2018/Verano/Banana-Fish",
|
||||
"imgUrl": "https://myanimelist.cdn-dena.com/images/anime/1190/93472.jpg",
|
||||
"descripcion": "La naturaleza hizo a Ash Lynx hermoso; la crianza lo convirtió en un asesino despiadado y frío. Un fugitivo lo crió como el heredero adoptivo y el juguete sexual de 'Papa' Dino Golzine, Ash, ahora a la edad rebelde de diecisiete años, abandona el reino sostenido por el diablo que lo crió.",
|
||||
"data": {
|
||||
"estudio": "MAPPA",
|
||||
"eps": "24",
|
||||
"alAire": "6 de Julio a 21 de Diciembre",
|
||||
"temporada": "Verano",
|
||||
"anio": 2018,
|
||||
"fuente": "Matgo",
|
||||
"generos": "Accion, Aventura, Drama",
|
||||
"OP": {
|
||||
"1": "found & lost - Survive Said The Prophet",
|
||||
"2": "FREEDOM - BLUE ENCOUNT"
|
||||
},
|
||||
"ED": {
|
||||
"1": "Prayer X - King Gnu",
|
||||
"2": "RED - Survive Said The Prophet"
|
||||
}
|
||||
},
|
||||
"onPagPrin": [true,2],
|
||||
"key": 10001100
|
||||
},
|
||||
{
|
||||
"titulo": "Steins;Gate 0",
|
||||
"link": "/Anime/2018/Primavera/Steins;Gate-0",
|
||||
"imgUrl": "https://myanimelist.cdn-dena.com/images/anime/1768/93520.jpg",
|
||||
"descripcion": "La oscura historia no contada de Steins;Gate muestra al excéntrico científico loco Okabe, que lucha por recuperarse de un intento fallido de rescatar a Kurisu. Decide darse por vencido y abandona a su animado álter ego científico, en la búsqueda de olvidar el pasado. Cuando todo parece ser normal, aparentemente recuerda el pasado al conocer a un conocido de Kurisu... ",
|
||||
"data": {
|
||||
"estudio": "White Fox",
|
||||
"eps": "23",
|
||||
"alAire": "12 de Abril a 27 de Septiembre",
|
||||
"temporada": "Primavera",
|
||||
"anio": 2018,
|
||||
"fuente": "Novela Visual",
|
||||
"generos": "Ciencia ficcion, Thriller",
|
||||
"OP": {
|
||||
"1": "Fatima - Kanako Itou"
|
||||
},
|
||||
"ED": {
|
||||
"1": "Amadeus - Kanako Itou",
|
||||
"2": "LAST GAME - Zwei",
|
||||
"3": "World-Line - Amai Isami",
|
||||
"4": "GATE OF STEINER - Sasaki Eri"
|
||||
}
|
||||
},
|
||||
"onPagPrin": [false,0],
|
||||
"key": 10001011
|
||||
},
|
||||
{
|
||||
"titulo": "Mahou Shoujo Site",
|
||||
"link": "/Anime/2018/Primavera/Mahou-Shoujo-Site",
|
||||
"imgUrl": "https://myanimelist.cdn-dena.com/images/anime/1720/95064.jpg",
|
||||
"descripcion": "Aya Asagiri es una chica de secundaria que tiene problemas tanto en la escuela con el acoso escolar como en el hogar debido al abuso físico de su hermano. Al navegar en línea, aparece un sitio web en su computadora con una persona de aspecto espeluznante. Esta persona parece tener piedad de ella, y anuncia que le ha otorgado poderes mágicos a Asagiri. ",
|
||||
"data": {
|
||||
"estudio": "production doA",
|
||||
"eps": "12",
|
||||
"alAire": "7 de Abril a 23 de Junio",
|
||||
"temporada": "Primavera",
|
||||
"anio": 2018,
|
||||
"fuente": "Manga",
|
||||
"generos": "Drama, Horror, Psicologico, Supernatural",
|
||||
"OP": {
|
||||
"1": "Changing Point - i Ris"
|
||||
},
|
||||
"ED": {
|
||||
"1": "Zenzen Tomodachi - Yamazaki Haruka"
|
||||
}
|
||||
},
|
||||
"onPagPrin": [true,3],
|
||||
"key": 10001010
|
||||
},
|
||||
{
|
||||
"titulo": "Wotaku ni Koi wa Muzukashii",
|
||||
"link": "/Anime/2018/Primavera/WotaKoi",
|
||||
"imgUrl": "https://myanimelist.cdn-dena.com/images/anime/1864/93518.jpg",
|
||||
"descripcion": "Después de descubrir que trabajan en la misma compañía, un otaku enloquecido y un fujoshi se reúnen por primera vez desde la secundaria. Después de algunas sesiones de bebida después del trabajo comienzan a salir, pero ¿será una relación perfecta para los dos? ",
|
||||
"data": {
|
||||
"estudio": "A-1 Pictures",
|
||||
"eps": "11",
|
||||
"alAire": "13 de Abril a 22 de Junio",
|
||||
"temporada": "Primavera",
|
||||
"anio": 2018,
|
||||
"fuente": "Manga web",
|
||||
"generos": "Comedia, Romance",
|
||||
"OP": {
|
||||
"1": "Fiction - Sumika"
|
||||
},
|
||||
"ED": {
|
||||
"1": "Kimi no Tonari - halca"
|
||||
}
|
||||
},
|
||||
"onPagPrin": [false,0],
|
||||
"key": 10001001
|
||||
},
|
||||
{
|
||||
"titulo": "Shokugeki no Soma: San no Sara - Toutsuki Ressha-hen",
|
||||
"link": "/Anime/2018/Primavera/Shokugeki-no-Soma-3-2",
|
||||
"imgUrl": "https://myanimelist.cdn-dena.com/images/anime/1604/93531.jpg",
|
||||
"descripcion": "El segundo platillo de Shokugeki no Soma: San no Sara",
|
||||
"data": {
|
||||
"estudio": "J.C. Staff",
|
||||
"eps": "12",
|
||||
"alAire": "9 de Abril a 25 de Junio",
|
||||
"temporada": "Primavera",
|
||||
"anio": 2018,
|
||||
"fuente": "Manga",
|
||||
"generos": "Ecchi, Escolar, Shonen",
|
||||
"OP": {
|
||||
"1": "Symbol - Luck Life"
|
||||
},
|
||||
"ED": {
|
||||
"1": "Atria - Fo'xTails"
|
||||
}
|
||||
},
|
||||
"onPagPrin": [false,0],
|
||||
"key": 10001000
|
||||
},
|
||||
{
|
||||
"titulo": "Violet Evergarden",
|
||||
"link": "/Anime/2018/Invierno/Violet-Evergarden",
|
||||
"imgUrl": "https://myanimelist.cdn-dena.com/images/anime/1795/95088.jpg",
|
||||
"descripcion": "Hay palabras que Violet escuchó en el campo de batalla, las cuales no puede olvidar. Esas palabras le fueron dadas por alguien que conocía, más que nadie. Ella aún no conoce su significado. ",
|
||||
"data": {
|
||||
"estudio": "Kyoto Animation",
|
||||
"eps": "13",
|
||||
"alAire": "11 de Enero a 5 de Abril",
|
||||
"temporada": "Invierno",
|
||||
"anio": 2018,
|
||||
"fuente": "Novela ligera",
|
||||
"generos": "Fantasia, Drama, Slice of Life",
|
||||
"OP": {
|
||||
"1": "Sincerely - TRUIE"
|
||||
},
|
||||
"ED": {
|
||||
"1": "Michishirube - Minori Chihara",
|
||||
"2": "Believe in... - Yuuki Aira"
|
||||
}
|
||||
},
|
||||
"onPagPrin": [false,0],
|
||||
"key": 10000111
|
||||
},
|
||||
{
|
||||
"titulo": "Inuyashiki",
|
||||
"link": "/Anime/2017/Otono/Inuyashiki",
|
||||
"imgUrl": "https://myanimelist.cdn-dena.com/images/anime/3/88470.jpg",
|
||||
"descripcion": "Inuyashiki Ichirou está de mala suerte. Justo cuando parece que las cosas no pueden empeorar, una luz cegadora en el cielo nocturno golpea la tierra donde se encuentra Ichirou. ",
|
||||
"data": {
|
||||
"estudio": "MAPPA",
|
||||
"eps": "11",
|
||||
"alAire": "13 de Octubre al 22 de Diciembre",
|
||||
"temporada": "Otono",
|
||||
"anio": 2017,
|
||||
"fuente": "Manga",
|
||||
"generos": "Accion, Drama, Psicologico, Ciencia ficcion, Seinen",
|
||||
"OP": {
|
||||
"1": "My Hero - MAN WITH A MISSION"
|
||||
},
|
||||
"ED": {
|
||||
"1": "Ai wo Oshiete Kureta Kimi e - Qaijff"
|
||||
}
|
||||
},
|
||||
"onPagPrin": [false,0],
|
||||
"key": 10000110
|
||||
},
|
||||
{
|
||||
"titulo": "Kekkai Sensen & Beyond",
|
||||
"link": "/Anime/2017/Otono/Kekkai-Sensen-Beyond",
|
||||
"imgUrl": "https://myanimelist.cdn-dena.com/images/anime/9/88281.jpg",
|
||||
"descripcion": "Segunda temporada de Kekkai Sensen.",
|
||||
"data": {
|
||||
"estudio": "Bones",
|
||||
"eps": "12",
|
||||
"alAire": "8 de Octubre al 24 de Diciembre",
|
||||
"temporada": "Otono",
|
||||
"anio": 2017,
|
||||
"fuente": "Manga",
|
||||
"generos": "Accion, Comedia, Fantasia, Shounen, Super poderes, Sobrenatural",
|
||||
"OP": {
|
||||
"1": "fake town baby - UNISON SQUARE GARDEN"
|
||||
},
|
||||
"ED": {
|
||||
"1": "Step Up LOVE - DAOKO x Yasuyuki Okamura"
|
||||
}
|
||||
},
|
||||
"onPagPrin": [false,0],
|
||||
"key": 10000101
|
||||
},
|
||||
{
|
||||
"titulo": "Just Because!",
|
||||
"link": "/Anime/2017/Otono/Just-Because",
|
||||
"imgUrl": "https://myanimelist.cdn-dena.com/images/anime/3/88185.jpg",
|
||||
"descripcion": "Al final del segundo semestre del tercer año de preparatoria, cuatro estudiantes están listos para graduarse y pueden sentir el final de su vida en la preparatoria. Pero eso cambia un poco con la llegada de un estudiante transferido. ",
|
||||
"data": {
|
||||
"estudio": "Pine Jam",
|
||||
"eps": "12",
|
||||
"alAire": "5 de Octubre al 28 de Diciembre",
|
||||
"temporada": "Otono",
|
||||
"anio": 2017,
|
||||
"fuente": "Original",
|
||||
"generos": "Slice of Life, Drama, Romance, Escolar",
|
||||
"OP": {
|
||||
"1": "over and over - Yanagi Nagi"
|
||||
},
|
||||
"ED": {
|
||||
"1": "behind - Mio Natsume (Karin Isobe), Hatsuki Morikawa (Yuna Yoshino), Ena Komiya (Lynn)"
|
||||
}
|
||||
},
|
||||
"onPagPrin": [false,0],
|
||||
"key": 10000100
|
||||
},
|
||||
{
|
||||
"titulo": "Shokugeki no Soma: San no Sara",
|
||||
"link": "/Anime/2017/Otono/Shokugeki-no-Soma-3",
|
||||
"imgUrl": "https://myanimelist.cdn-dena.com/images/anime/4/86603.jpg",
|
||||
"descripcion": "Tercera temporada de Shokugeki no Soma",
|
||||
"data": {
|
||||
"estudio": "J.C. Staff",
|
||||
"eps": "12",
|
||||
"alAire": "4 de Octubre al 20 de Diciembre",
|
||||
"temporada": "Otono",
|
||||
"anio": 2017,
|
||||
"fuente": "Manga",
|
||||
"generos": "Ecchi, Escolar, Shonen",
|
||||
"OP": {
|
||||
"1": "BRAVER - ZAQ"
|
||||
},
|
||||
"ED": {
|
||||
"1": "Kyokyo Jitsujitsu - nano.RIPE"
|
||||
}
|
||||
},
|
||||
"onPagPrin": [true,4],
|
||||
"key": 10000011
|
||||
},
|
||||
{
|
||||
"titulo": "Kakegurui",
|
||||
"link": "/Anime/2017/Verano/Kakegurui",
|
||||
"imgUrl": "https://myanimelist.cdn-dena.com/images/anime/3/86578.jpg",
|
||||
"descripcion": "Academia Privada Hyakkaou. Una institución para los privilegiados con un currículo muy peculiar. Veras, cuando eres de los hijos e hijas de los más ricos de los ricos, no es la destreza atlética o la inteligencia lo que te mantiene por delante. Es leer a tu oponente, el arte del trato. ¿Qué mejor manera de afilar esas habilidades que con un riguroso plan de estudios de juegos de azar? ",
|
||||
"data": {
|
||||
"estudio": "MAPPA",
|
||||
"eps": "12",
|
||||
"alAire": "1 de Julio al 23 de Septiembre",
|
||||
"temporada": "Verano",
|
||||
"anio": 2017,
|
||||
"fuente": "Manga",
|
||||
"generos": "Drama, Juegos, Misterio, Psicologico, Escolar, Shonen",
|
||||
"OP": {
|
||||
"1": "Deal with the devil - Tia"
|
||||
},
|
||||
"ED": {
|
||||
"1": "LAYon-theLINE - D-selections"
|
||||
}
|
||||
},
|
||||
"onPagPrin": [false,0],
|
||||
"key": 10000010
|
||||
},
|
||||
{
|
||||
"titulo": "Re:Creators",
|
||||
"link": "/Anime/2017/Verano/Re:Creators",
|
||||
"imgUrl": "https://myanimelist.cdn-dena.com/images/anime/11/85469.jpg",
|
||||
"descripcion": "Los humanos han creado muchas historias. Felicidad, tristeza, ira, emociones profundas. Las historias sacuden nuestro corazón y nos fascinan. Sin embargo, estos son sólo los pensamientos de los espectadores. Pero ¿y si los personajes de la historia tienen 'intenciones'?",
|
||||
"data": {
|
||||
"estudio": "TROYCA",
|
||||
"eps": "22",
|
||||
"alAire": "8 de Abril al 26 de Septiembre",
|
||||
"temporada": "Verano",
|
||||
"anio": 2017,
|
||||
"fuente": "Original",
|
||||
"generos": "Accion, Ciencia ficcion, Fantasia",
|
||||
"OP": {
|
||||
"1": "gravityWall - SawanoHiroyuki[nZk]:Tielle & Gemie",
|
||||
"2": "sh0ut - SawanoHiroyuki[nZk]:Tielle & Gemie"
|
||||
},
|
||||
"ED": {
|
||||
"1": "gravityWall - SawanoHiroyuki[nZk]:Tielle & Gemie",
|
||||
"2": "NEWLOOK - Ayano Mashiro",
|
||||
"3": "world Étude - Toyosaki Aki",
|
||||
"4": "Rubikon - Sangatsu no Phantasia"
|
||||
}
|
||||
},
|
||||
"onPagPrin": [false,0],
|
||||
"key": 10000001
|
||||
},
|
||||
{
|
||||
"titulo": "Flip Flappers",
|
||||
"link": "/Anime/2016/Otono/Flip-Flappers",
|
||||
"imgUrl": "https://myanimelist.cdn-dena.com/images/anime/4/82292.jpg",
|
||||
"descripcion": "Cocona, que lleva una vida normal, se encuentra un día con Papika, y juntas van a Pure Illusion, a conseguir 'fragmentos', que se dice, pueden conceder deseos. ",
|
||||
"data": {
|
||||
"estudio": "Studio 3Hz",
|
||||
"eps": "13",
|
||||
"alAire": "6 de Octubre al 29 de Diciembre",
|
||||
"temporada": "Otono",
|
||||
"anio": 2016,
|
||||
"fuente": "Original",
|
||||
"generos": "Ciencia ficcion, Aventura, Comedia, Magia",
|
||||
"OP": {
|
||||
"1": "Serendipity - ZAQ"
|
||||
},
|
||||
"ED": {
|
||||
"1": "FLIP FLAP FLIP FLAP - TO-MAS feat.Chima",
|
||||
"2": "find the wind - ZAQ",
|
||||
"3": "Over the Rainbow - TO-MAS feat.Chima"
|
||||
}
|
||||
},
|
||||
"onPagPrin": [false,0],
|
||||
"key": 10000000
|
||||
}
|
||||
]
|
||||
@ -5,11 +5,15 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>pseudocloud</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Muli|Open+Sans" rel="stylesheet">
|
||||
|
||||
<title>PseudoSubs - Anime 100% libre de publicidad</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but pseudocloud doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
<strong>Ups. Parece que tu navegador decidió desactivar JavaScript. Actívalo y recarga la página.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
|
||||
23
src/App.vue
23
src/App.vue
@ -1,29 +1,8 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div id="nav">
|
||||
<router-link to="/">Home</router-link> |
|
||||
<router-link to="/about">About</router-link>
|
||||
</div>
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
#app {
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
}
|
||||
#nav {
|
||||
padding: 30px;
|
||||
a {
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
&.router-link-exact-active {
|
||||
color: #42b983;
|
||||
}
|
||||
}
|
||||
}
|
||||
<style lang="sass">
|
||||
</style>
|
||||
|
||||
20
src/components/Anime/BarraTitulo.vue
Normal file
20
src/components/Anime/BarraTitulo.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div class="barra caja">
|
||||
Anime
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "BarraTitulo"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="sass">
|
||||
.barra
|
||||
font:
|
||||
family: Muli, "Open Sans", serif
|
||||
size: xx-large
|
||||
weight: bold
|
||||
text-align: center
|
||||
</style>
|
||||
74
src/components/Anime/Tarjeta.vue
Normal file
74
src/components/Anime/Tarjeta.vue
Normal file
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div class="caja tarjeta" >
|
||||
<div class="center-on-small">
|
||||
<span>
|
||||
<router-link :to="link" class="tarjeta--nombre">
|
||||
{{ titulo }}
|
||||
</router-link>
|
||||
</span>
|
||||
</div>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="col l4 m4 s12 center-on-small">
|
||||
<img :src="imgUrl" class="responsive-img">
|
||||
</div>
|
||||
<div class="col l8 m8 s12">
|
||||
<div class="hide-on-med-and-up"><br></div>
|
||||
{{ descr }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Tarjeta",
|
||||
props: {
|
||||
titulo: {
|
||||
type: String,
|
||||
default: "Nombre del Anime"
|
||||
},
|
||||
descr: {
|
||||
type: String,
|
||||
default: "Descripcion del anime. Descripcion del anime. Descripcion del anime. Descripcion del anime. " +
|
||||
"Descripcion del anime. "
|
||||
},
|
||||
imgUrl: {
|
||||
type: String,
|
||||
default: "https://myanimelist.cdn-dena.com/images/anime/1424/93855.jpg"
|
||||
},
|
||||
link: {
|
||||
type: String,
|
||||
default: "/"
|
||||
},
|
||||
tags: {
|
||||
type: String,
|
||||
default: "nombre del anime"
|
||||
},
|
||||
temporada: {
|
||||
type: String,
|
||||
default: "Ninguna"
|
||||
},
|
||||
anio: {
|
||||
type: Number,
|
||||
default: 2020
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="sass">
|
||||
@media only screen and (max-width: 500px)
|
||||
.center-on-small
|
||||
text-align: center
|
||||
|
||||
.tarjeta--nombre
|
||||
font:
|
||||
family: Muli, "Open Sans", serif
|
||||
weight: bold
|
||||
size: xx-large
|
||||
color: black
|
||||
transition: color 100ms
|
||||
&:hover
|
||||
color: #23bf87
|
||||
</style>
|
||||
@ -1,57 +0,0 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||
|
||||
@Component
|
||||
export default class HelloWorld extends Vue {
|
||||
@Prop() private msg!: string;
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
72
src/components/entrada-reciente.vue
Normal file
72
src/components/entrada-reciente.vue
Normal file
@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div :class="oculto? 'mi-slider--contenido-oculto': 'mi-slider--contenido'" :id="'entrada' + id">
|
||||
<div>
|
||||
<span>
|
||||
<router-link :to="link" class="mi-slider--contenido--titulo">
|
||||
{{ titulo }}
|
||||
</router-link>
|
||||
</span>
|
||||
</div>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="col l4 m4 s12">
|
||||
<img :src="imgUrl" class="responsive-img mi-slider--contenido--img">
|
||||
</div>
|
||||
<div class="col l8 m8 s12 mi-slider--contenido--descripcion">
|
||||
<div class="hide-on-med-and-up"><br></div>
|
||||
{{ descr }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "entrada-reciente",
|
||||
props: {
|
||||
titulo: String,
|
||||
descr: String,
|
||||
imgUrl: String,
|
||||
link: String,
|
||||
id: Number,
|
||||
oculto: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="sass">
|
||||
.mi-slider--contenido
|
||||
transition: opacity 250ms
|
||||
opacity: 1
|
||||
|
||||
.mi-slider--contenido-oculto
|
||||
transition: opacity 250ms
|
||||
display: none
|
||||
overflow: hidden
|
||||
opacity: 0
|
||||
|
||||
.mi-slider--contenido--titulo
|
||||
color: #151515
|
||||
font:
|
||||
family: Muli, 'Product Sans', serif
|
||||
size: x-large
|
||||
weight: bold
|
||||
transition: color 100ms
|
||||
&:hover
|
||||
color: #039f67
|
||||
|
||||
.mi-slider--contenido--img
|
||||
width: 222px
|
||||
height: 320px
|
||||
|
||||
.mi-slider--contenido--descripcion
|
||||
font:
|
||||
size: large
|
||||
text-align: justify
|
||||
padding-right: 20px
|
||||
|
||||
</style>
|
||||
104
src/components/features-card.vue
Normal file
104
src/components/features-card.vue
Normal file
@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div class="caja features">
|
||||
<span class="features--titulo">
|
||||
Nosotros hacemos el trabajo sucio, tú disfrutas.
|
||||
</span>
|
||||
<br /><br />
|
||||
<div class="row">
|
||||
|
||||
<div class="col l4 m4 s12 noSelectionBackground" style="cursor: default">
|
||||
<i class="large material-icons noSelectionBackground">cast_connected</i>
|
||||
<br />
|
||||
<span class="features--imagen-label">Para todos.</span>
|
||||
<br />
|
||||
<br />
|
||||
Descarga 1 vez, reproduce donde sea. Te ofrecemos la mayor compatibilidad,
|
||||
desde el Pocket Neo hasta la PC Master Race.
|
||||
</div>
|
||||
<div class="col l4 m4 s12 noSelectionBackground" style="cursor: default">
|
||||
<i class="large material-icons noSelectionBackground">aspect_ratio</i>
|
||||
<br />
|
||||
<span class="features--imagen-label">No te distraigas.</span>
|
||||
<br />
|
||||
<br />
|
||||
Nuestro diseño minimalista es fácil y agradable de leer, concéntrate en el
|
||||
contenido y no en el diseño.
|
||||
</div>
|
||||
<div class="col l4 m4 s12 noSelectionBackground" style="cursor: default">
|
||||
<i class="large material-icons noSelectionBackground">create</i>
|
||||
<br />
|
||||
<span class="features--imagen-label">Tú eliges cómo.</span>
|
||||
<br />
|
||||
<br />
|
||||
Te ofrecemos hasta 4 opciones diferentes en Anime, y el poder de personalizar todo
|
||||
en Novelas Ligeras.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<br />
|
||||
<div class="divider"></div>
|
||||
<br />
|
||||
<div>
|
||||
<span class="features--titulo">
|
||||
Puedes desactivar el AdBlock.
|
||||
</span><br>
|
||||
<i class="medium material-icons">beach_access</i>
|
||||
<br>
|
||||
<span style="font-size: large">
|
||||
"¿Espera 5 segundos? Mmmph"<br />
|
||||
"¡No, no quiero conocer chicas cerca a mi área!"<br />
|
||||
"Rayos, publicidad.com se ha vuelto inmune al AdBlock."<br /><br />
|
||||
Que no te suceda nunca más. PseudoSubs es 100% libre de publicidad, desde siempre, y por siempre.<br />
|
||||
</span>
|
||||
<br />
|
||||
<br />
|
||||
<div class="divider"></div>
|
||||
</div>
|
||||
<br />
|
||||
<span class="features--titulo">
|
||||
Estamos para ayudarte.
|
||||
</span><br>
|
||||
<i class="medium material-icons">help</i>
|
||||
<br />
|
||||
<span style="font-size: large">
|
||||
¿No sabes qué hacer? ¿Tienes alguna duda? Aquí te explicamos las soluciones a los problemas
|
||||
más frecuentes.
|
||||
</span>
|
||||
<br /><br />
|
||||
<router-link to="/Ayuda" class="waves-effect waves-light btn teal lighten-1"><b>¡Ayuda!</b></router-link>
|
||||
<br />
|
||||
<br />
|
||||
<span style="font-size: large">
|
||||
¿No encontraste una solución? ¿No lo entendiste? ¿Simplemente quieres hablar? ¡Puedes entrar a nuestro Discord!
|
||||
</span>
|
||||
<br /><br />
|
||||
<a href="https://discord.gg/S3vwyXV" class="waves-effect waves-light btn blue darken-1" target="_blank"><b>¡Discord!</b></a>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "features-card"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="sass">
|
||||
.features
|
||||
text-align: center
|
||||
|
||||
.features--titulo
|
||||
font:
|
||||
family: Muli, "Open Sans", serif
|
||||
size: xx-large
|
||||
color: #23bf87
|
||||
&::selection
|
||||
color: white
|
||||
background-color: #23bf87
|
||||
|
||||
.features--imagen-label
|
||||
font:
|
||||
size: x-large
|
||||
family: Muli, "Open Sans",serif
|
||||
cursor: default
|
||||
</style>
|
||||
50
src/components/mi-footer.vue
Normal file
50
src/components/mi-footer.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<footer class="page-footer mi-footer">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col l6 s12">
|
||||
<h5 class="white-text mi-footer--titulo">PseudoSubs</h5>
|
||||
<p class="grey-text text-lighten-4">
|
||||
Anime de temporada @24FPS y @60FPS, H.264 y H.265<br>
|
||||
Traducciones de Novelas Ligeras desde Ingles y Japones.<br>
|
||||
Cosas varias.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col l4 offset-l2 s12">
|
||||
<h5 class="white-text">Otros vínculos.</h5>
|
||||
<ul>
|
||||
<li>
|
||||
<a class="grey-text text-lighten-3" target="_blank" href="http://puya.si/">PuyaSubs</a>
|
||||
</li>
|
||||
<li><a class="grey-text text-lighten-3" target="_blank" href="http://horriblesubs.info/">
|
||||
HorribleSubs</a></li>
|
||||
<li>
|
||||
<a class="grey-text text-lighten-3" target="_blank" href="http://acechanime.com/">AcechaAnime</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-copyright">
|
||||
<div class="container">
|
||||
© 2018 Copyright PseudoSubs.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "mi-footer"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="sass">
|
||||
.mi-footer
|
||||
background-color: #23bf87
|
||||
|
||||
.mi-footer--titulo
|
||||
font:
|
||||
family: Muli, "Open Sans", serif
|
||||
size: xx-large
|
||||
</style>
|
||||
159
src/components/slider-reciente.vue
Normal file
159
src/components/slider-reciente.vue
Normal file
@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div class="mi-slider">
|
||||
<div class="mi-slider--titulo">
|
||||
¡Entradas Recientes!
|
||||
</div>
|
||||
|
||||
<div class="mi-slider--contenido" id="entradasRecientes">
|
||||
<entrada-reciente
|
||||
v-for="(anime, index) in animes"
|
||||
v-if="anime.onPagPrin[0]"
|
||||
:titulo="anime.titulo"
|
||||
:key="anime.key"
|
||||
:id="anime.key"
|
||||
:link="anime.link"
|
||||
:descr="anime.descripcion"
|
||||
:img-url="anime.imgUrl"
|
||||
:oculto="anime.onPagPrin[1] !== 1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mi-slider--flechas" style="display: none;">
|
||||
<i class="material-icons medium left hide-on-small-only noSelectionBackground mi-slider--barra--boton">arrow_back</i>
|
||||
<i class="material-icons medium right hide-on-small-only noSelectionBackground mi-slider--barra--boton">arrow_forward</i>
|
||||
<div class="center">
|
||||
<br />
|
||||
<div style="border: solid #23BF87 1px; border-radius: 8px; display: inline-block; min-width: 160px;
|
||||
max-height: 8px; overflow: hidden">
|
||||
<div id="progressEntrRec">.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<i class="material-icons large left hide-on-med-and-up noSelectionBackground" style="cursor: pointer"
|
||||
onclick="retroceder()">arrow_back
|
||||
</i>
|
||||
<i class="material-icons large big right hide-on-med-and-up noSelectionBackground" style="cursor: pointer"
|
||||
onclick="avanzar()">arrow_forward
|
||||
</i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import entradaReciente from './entrada-reciente'
|
||||
|
||||
let posCicloActual = 0;
|
||||
let entradas = undefined;
|
||||
let intervaloCiclo = undefined;
|
||||
|
||||
const ciclarEntradasRecientes = ():void => {
|
||||
entradas = document.getElementById("entradasRecientes").children;
|
||||
|
||||
intervaloCiclo = setInterval(sigElemReciente, 5000);
|
||||
|
||||
};
|
||||
|
||||
const sigElemReciente = () => {
|
||||
const elemActual = entradas[posCicloActual];
|
||||
|
||||
if (posCicloActual === entradas.length-1)
|
||||
posCicloActual = 0;
|
||||
else
|
||||
posCicloActual++;
|
||||
|
||||
const elemSig = entradas[posCicloActual];
|
||||
|
||||
elemActual.style.opacity = 0;
|
||||
setTimeout(() => {
|
||||
elemActual.className = "mi-slider--contenido-oculto";
|
||||
elemActual.style = "";
|
||||
setTimeout(() => {
|
||||
elemSig.className = "mi-slider--contenido";
|
||||
},10);
|
||||
},250);
|
||||
};
|
||||
|
||||
export default {
|
||||
name: "slider-reciente",
|
||||
data: function () {
|
||||
return {
|
||||
animes: []
|
||||
}
|
||||
},
|
||||
created: function () {
|
||||
// Alias the component instance as `vm`, so that we
|
||||
// can access it inside the promise function
|
||||
let vm = this;
|
||||
|
||||
// Fetch our array of posts from an API
|
||||
fetch('/animes.json')
|
||||
.then( response => response.json())
|
||||
.then(function (myJson) {
|
||||
vm.animes = myJson;
|
||||
window.indiceAnimes = myJson;
|
||||
})
|
||||
|
||||
},
|
||||
components: {
|
||||
'entrada-reciente': entradaReciente
|
||||
},
|
||||
methods: {
|
||||
avanzar: () => {
|
||||
sigElemReciente();
|
||||
}
|
||||
},
|
||||
updated: function () {
|
||||
ciclarEntradasRecientes();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="sass">
|
||||
.mi-slider
|
||||
text-align: center
|
||||
background-color: white
|
||||
margin: 10px 0
|
||||
box-shadow: 2px 2px 2px darkgrey
|
||||
border-radius: 3px
|
||||
padding: 15px
|
||||
|
||||
.mi-slider--titulo
|
||||
color: #039f67
|
||||
font:
|
||||
family: 'Product Sans', serif
|
||||
size: xx-large
|
||||
padding-bottom: 20px
|
||||
|
||||
.mi-slider--contenido
|
||||
max-height: 390px
|
||||
min-height: 389px
|
||||
overflow: hidden
|
||||
|
||||
.mi-slider--contenido-oculto
|
||||
display: none
|
||||
|
||||
.mi-slider--contenido--titulo
|
||||
color: #151515
|
||||
font:
|
||||
family: Muli, 'Product Sans', serif
|
||||
size: x-large
|
||||
weight: bold
|
||||
transition: color 100ms
|
||||
&:hover
|
||||
color: #039f67
|
||||
|
||||
.mi-slider--contenido--img
|
||||
width: 222px
|
||||
height: 320px
|
||||
|
||||
.mi-slider--contenido--descripcion
|
||||
font:
|
||||
size: large
|
||||
text-align: justify
|
||||
padding-right: 20px
|
||||
|
||||
.mi-slider--barra--boton
|
||||
cursor: pointer
|
||||
|
||||
|
||||
</style>
|
||||
55
src/components/tarjeta-menu-princ.vue
Normal file
55
src/components/tarjeta-menu-princ.vue
Normal file
@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div class="col s12 m6" :class="aLaIzq? 'tarjeta-izq': 'tarjeta-der'">
|
||||
<div class="card hoverable tarjeta" v-on:click="goTo(url)">
|
||||
<div class="card-image">
|
||||
<img :src="imgUrl" class="noSelectionBackground">
|
||||
<router-link :to="url" class="btn-floating halfway-fab waves-effect waves-light teal lighten-1">
|
||||
<i class="material-icons">arrow_forward</i>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<span class="card-title noSelectionBackground tarjeta--titulo">
|
||||
{{ titulo }}
|
||||
</span>
|
||||
<p class="noSelectionBackground">
|
||||
<span v-html="descr"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "tarjeta-menu-princ",
|
||||
props: {
|
||||
url: String,
|
||||
imgUrl: String,
|
||||
titulo: String,
|
||||
descr: String,
|
||||
aLaIzq: Boolean
|
||||
},
|
||||
methods: {
|
||||
goTo: function (url) {
|
||||
window.miRouter.push(url);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="sass">
|
||||
.tarjeta-izq
|
||||
padding-left: 0
|
||||
|
||||
.tarjeta-der
|
||||
padding-right: 0
|
||||
|
||||
.tarjeta
|
||||
cursor: pointer
|
||||
padding: 0
|
||||
|
||||
.tarjeta--titulo
|
||||
font:
|
||||
family: Muli, "Open Sans", serif
|
||||
size: xx-large
|
||||
</style>
|
||||
43
src/components/titulo-principal.vue
Normal file
43
src/components/titulo-principal.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div>
|
||||
<div id="titulo-contenedor">
|
||||
<div class="hide-on-small-only">
|
||||
<br>
|
||||
</div>
|
||||
<router-link to="/" id="titulo">PseudoSubs</router-link>
|
||||
<div class="hide-on-small-only">
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue'
|
||||
|
||||
export default Vue.extend({
|
||||
name: 'titulo-principal'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
|
||||
#titulo-contenedor
|
||||
font:
|
||||
family: 'Product Sans', serif
|
||||
size: 50px
|
||||
weight: bold
|
||||
text-align: center
|
||||
background-color: white
|
||||
margin: 10px 0
|
||||
box-shadow: 2px 2px 2px darkgrey
|
||||
border-radius: 3px
|
||||
|
||||
#titulo
|
||||
color: #434343
|
||||
text-shadow: 2px 2px 0 #ffffff, 6px 6px 0 #DDDDDD
|
||||
transition: color 100ms
|
||||
&:hover
|
||||
color: #23bf87
|
||||
|
||||
</style>
|
||||
BIN
src/fonts/ProductSans/ProductSans.ttf
Normal file
BIN
src/fonts/ProductSans/ProductSans.ttf
Normal file
Binary file not shown.
BIN
src/fonts/ProductSans/ProductSansBold.ttf
Normal file
BIN
src/fonts/ProductSans/ProductSansBold.ttf
Normal file
Binary file not shown.
13
src/main.ts
13
src/main.ts
@ -2,9 +2,18 @@ import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
require('./sass/main.sass');
|
||||
|
||||
(() => {
|
||||
// @ts-ignore
|
||||
window.miRouter = router;
|
||||
// @ts-ignore
|
||||
window.indiceAnimes = {};
|
||||
})();
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
}).$mount('#app');
|
||||
|
||||
@ -1,25 +1,33 @@
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import Home from './views/Home.vue'
|
||||
import Inicio from './views/Inicio.vue'
|
||||
import Anime from './views/Anime.vue'
|
||||
import AnimeView from './views/AnimeView.vue'
|
||||
|
||||
Vue.use(Router)
|
||||
Vue.use(Router);
|
||||
|
||||
export default new Router({
|
||||
mode: 'history',
|
||||
base: process.env.BASE_URL,
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: Home
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'about',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (about.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
|
||||
mode: 'history',
|
||||
base: process.env.BASE_URL,
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Inicio',
|
||||
component: Inicio
|
||||
},
|
||||
{
|
||||
path: '/Anime/',
|
||||
name: 'AnimeIndex',
|
||||
component: Anime
|
||||
},
|
||||
{
|
||||
path: '/Anime/:anio/:temp/:anime',
|
||||
name: 'AnimeView',
|
||||
component: AnimeView
|
||||
}
|
||||
],
|
||||
scrollBehavior (to, from, savedPosition) {
|
||||
// return desired position
|
||||
return { x: 0, y: 0 }
|
||||
}
|
||||
]
|
||||
})
|
||||
});
|
||||
|
||||
27
src/sass/main.sass
Normal file
27
src/sass/main.sass
Normal file
@ -0,0 +1,27 @@
|
||||
@font-face
|
||||
font-family: 'Product Sans'
|
||||
src: url(../fonts/ProductSans/ProductSans.ttf)
|
||||
font-style: normal
|
||||
font-weight: normal
|
||||
|
||||
@font-face
|
||||
font-family: 'Product Sans'
|
||||
src: url(../fonts/ProductSans/ProductSansBold.ttf)
|
||||
font-style: normal
|
||||
font-weight: bold
|
||||
|
||||
body
|
||||
background-color: #eeeeee
|
||||
font:
|
||||
family: "Open Sans", serif
|
||||
size: large
|
||||
|
||||
.noSelectionBackground
|
||||
user-select: none
|
||||
|
||||
.caja
|
||||
background-color: white
|
||||
margin: 10px 0
|
||||
box-shadow: 2px 2px 2px darkgrey
|
||||
border-radius: 3px
|
||||
padding: 15px
|
||||
@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</template>
|
||||
64
src/views/Anime.vue
Normal file
64
src/views/Anime.vue
Normal file
@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="container">
|
||||
<titulo-principal />
|
||||
<barra-titulo />
|
||||
|
||||
<tarjeta-anime v-for="(anime, key) in animes" :key="anime.key"
|
||||
:titulo="anime.titulo"
|
||||
:descr="anime.descripcion"
|
||||
:imgUrl="anime.imgUrl"
|
||||
:link="anime.link"
|
||||
:temporada="anime.data.temporada.toLowerCase()"
|
||||
:anio="anime.data.anio"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<mi-footer />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import tituloPrincipal from '@/components/titulo-principal.vue'
|
||||
import BarraTitulo from '@/components/Anime/BarraTitulo.vue'
|
||||
import Tarjeta from '@/components/Anime/Tarjeta.vue'
|
||||
import MiFooter from '@/components/mi-footer.vue'
|
||||
|
||||
export default {
|
||||
name: "Anime",
|
||||
data: function () {
|
||||
return {
|
||||
animes: {}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'titulo-principal': tituloPrincipal,
|
||||
'barra-titulo': BarraTitulo,
|
||||
'tarjeta-anime': Tarjeta,
|
||||
'mi-footer': MiFooter
|
||||
},
|
||||
created: function () {
|
||||
if (window.indiceAnimes[0]) {
|
||||
console.log("Existe we v:");
|
||||
console.log(window.indiceAnimes);
|
||||
this.animes = window.indiceAnimes;
|
||||
} else {
|
||||
console.log("No hay nada we v':");
|
||||
|
||||
let vm = this;
|
||||
// Obtener los animes desde una API v:
|
||||
fetch('/animes.json')
|
||||
.then( response => response.json())
|
||||
.then(function (myJson) {
|
||||
vm.animes = myJson;
|
||||
window.indiceAnimes = myJson;
|
||||
console.log("Pero ya me aseguré de que haya algo.");
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="sass">
|
||||
|
||||
</style>
|
||||
20
src/views/AnimeView.vue
Normal file
20
src/views/AnimeView.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div>
|
||||
Anumaaaa v': <br>
|
||||
<br>
|
||||
Veamos.... <br>
|
||||
{{ this.$route.params.anio }}<br>
|
||||
{{ this.$route.params.temp }}<br>
|
||||
{{ this.$route.params.anime }}<br>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "AnimeView"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,18 +0,0 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<img alt="Vue logo" src="../assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
HelloWorld,
|
||||
},
|
||||
})
|
||||
export default class Home extends Vue {}
|
||||
</script>
|
||||
53
src/views/Inicio.vue
Normal file
53
src/views/Inicio.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="container">
|
||||
<titulo-principal />
|
||||
<slider-reciente />
|
||||
|
||||
<div class="row">
|
||||
<tarjeta-menu-prin
|
||||
url="/Anime/"
|
||||
imgUrl="http://pseudosubs.com/rcs/img/PagInicio/Anime.png"
|
||||
titulo="Anime"
|
||||
descr="Anime de Temporada con la mejor calidad, rápidamente y minimalista.<br>
|
||||
¡Disfruta el original a 24FPS, o deleitate con la fluidez de los 60FPS en 720p y 1080p!"
|
||||
:aLaIzq="true"
|
||||
/>
|
||||
<tarjeta-menu-prin
|
||||
url="/Novelas/"
|
||||
imgUrl="http://pseudosubs.com/rcs/img/PagInicio/NLyukino.png"
|
||||
titulo="Novelas Ligeras"
|
||||
descr="Traducciones de calidad, lo más rápido posible sin descuidar la coherencia, ortografía y atmosfera.<br/>
|
||||
¡Leelo como gustes! Tú decides si es PDF, EPUB, la fuente, tamaño de letra, etc.."
|
||||
:aLaIzq="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<features-card/>
|
||||
</div>
|
||||
<br>
|
||||
<mi-footer/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import tituloPrincipal from '@/components/titulo-principal.vue'
|
||||
import sliderReciente from '@/components/slider-reciente.vue'
|
||||
import tarjetaMenuPrin from '@/components/tarjeta-menu-princ.vue'
|
||||
import featuresCard from '@/components/features-card.vue'
|
||||
import footer from '@/components/mi-footer.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'titulo-principal': tituloPrincipal,
|
||||
'slider-reciente': sliderReciente,
|
||||
'tarjeta-menu-prin': tarjetaMenuPrin,
|
||||
'features-card': featuresCard,
|
||||
'mi-footer': footer
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
|
||||
</style>
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"target": "es2015",
|
||||
"module": "esnext",
|
||||
"strict": true,
|
||||
"jsx": "preserve",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user