mirror of https://github.com/Kylart/KawAnime.git
460 lines
21 KiB
HTML
460 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>KawAnime</title>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
|
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-red.min.css">
|
|
<link rel="stylesheet" href="node_modules/vue-material/dist/vue-material.css">
|
|
<link href="node_modules/mdi/css/materialdesignicons.min.css" media="all" rel="stylesheet" type="text/css" />
|
|
<link rel="stylesheet" href="src/style.css">
|
|
<script src="https://code.getmdl.io/1.2.1/material.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
|
|
|
<div id="not-online">
|
|
<h1>You're not connected to the internet...</h1>
|
|
<h3>Please connect the Internet and press refresh.</h3>
|
|
<button id="not-online-button"
|
|
class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">
|
|
refresh
|
|
</button>
|
|
</div>
|
|
|
|
<div id="container" style="display: none;">
|
|
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer
|
|
mdl-layout--fixed-header">
|
|
<header class="mdl-layout__header">
|
|
<div class="mdl-layout__header-row">
|
|
<div class="mdl-layout-spacer dragable">
|
|
<h4 class="greetings">Welcome {{ username }} !</h4>
|
|
</div>
|
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
|
|
mdl-textfield--floating-label mdl-textfield--align-right">
|
|
<label class="mdl-button mdl-js-button mdl-button--icon"
|
|
for="fixed-header-drawer-exp">
|
|
<i class="material-icons">search</i>
|
|
</label>
|
|
<div class="mdl-textfield__expandable-holder">
|
|
<input class="mdl-textfield__input" type="text" name="search"
|
|
id="fixed-header-drawer-exp">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="mdl-layout__drawer dragable">
|
|
<span class="mdl-layout-title">KawAnime</span>
|
|
<nav class="mdl-navigation">
|
|
<a class="mdl-navigation__link" href="#" v-on:click="getDownloader()">Download an anime</a>
|
|
<a class="mdl-navigation__link" href="#" v-on:click="getMainPage()">Recent releases</a>
|
|
<a class="mdl-navigation__link" href="#" v-on:click="getLocalPage()">Local animes</a>
|
|
<a class="mdl-navigation__link" href="#" v-on:click="getNewsPage()">Get news</a>
|
|
<a class="mdl-navigation__link" href="#" v-on:click="getSeasonPage()">Check anime seasons</a>
|
|
<a class="mdl-navigation__link" href="#" v-on:click="getWatchListPage()">Watch List</a>
|
|
</nav>
|
|
</div>
|
|
<main class="mdl-layout__content">
|
|
<div class="page-content">
|
|
<div id="download-container" v-if="show"
|
|
v-bind:style="{ display: display }">
|
|
<downloader></downloader>
|
|
</div>
|
|
<div id="releases" class="mdl-grid" v-if="show">
|
|
<template v-for="release in releases">
|
|
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
|
|
<div class="elem">
|
|
<md-ink-ripple></md-ink-ripple>
|
|
<h6 v-bind:title="release.title">{{ release.title }}</h6>
|
|
<div class="picture-container">
|
|
<div class="picture"
|
|
v-bind:style="{ content : 'url(' + release.picture + ')'}"></div>
|
|
</div>
|
|
<div class="text-container">
|
|
<div class="synopsis ">
|
|
<p>{{ release.synopsis }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="links">
|
|
<md-button v-if="prefMagnets"
|
|
v-bind:href="release.link + '&magnet=1'"
|
|
class="md-dense link-download"
|
|
v-bind:style="styleButton">
|
|
<p style="margin-top: 4px;">Download</p>
|
|
</md-button>
|
|
<md-button v-else
|
|
@click.native="download(release.link, release.realTitle)"
|
|
class="md-dense link-download"
|
|
v-bind:style="styleButton">
|
|
<p>Download</p>
|
|
</md-button>
|
|
<md-button @click.native="searchThis(release.realTitle)"
|
|
class="md-dense link-more"
|
|
v-bind:style="styleButton">
|
|
<p>More</p>
|
|
</md-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div id="local-page" v-if="show">
|
|
<local-page></local-page>
|
|
</div>
|
|
<div id="loader-container" v-if="show">
|
|
<div class="loading-text">
|
|
<h3>少々お待ち下さい。</h3>
|
|
</div>
|
|
<div class="loader-gif"></div>
|
|
</div>
|
|
<div id="info-container" v-if="show" v-bind:style="{ display: display }">
|
|
<md-button @click.native="back()"
|
|
id="back-button" class="md-raised md-accent">
|
|
Back
|
|
</md-button>
|
|
<div class="mdl-grid">
|
|
<div id="info-picture"
|
|
class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet">
|
|
<div v-bind:style="{ content: 'url(' + infos.image + ')'}"></div>
|
|
</div>
|
|
<div id="title-synopsis-container" class="mdl-cell mdl-cell--9-col mdl-cell--8-col-tablet">
|
|
<div id="info-title" >
|
|
<h5>{{ infos.title }} [{{ infos.type }}]</h5>
|
|
</div>
|
|
<div id="synopsis-container" >
|
|
<pre>{{ infos.synopsis }}</pre>
|
|
</div>
|
|
</div>
|
|
<div class="infos-bottom-left mdl-cell mdl-cell--3-col mdl-cell--4-col-phone ">
|
|
<h6>Japanese title: </h6>
|
|
<h6 class="infos-japTitle">{{ infos.japTitle }}</h6>
|
|
<h6>{{ infos.episodes }} episodes</h6>
|
|
<h6>{{ infos.status }}</h6>
|
|
<p class="airing">{{ infos.aired }}</p>
|
|
</div>
|
|
<div class="infos-bottom-middle mdl-cell mdl-cell--7-col mdl-cell--6-col-phone">
|
|
<div class="studios ">
|
|
<h6>Studios</h6>
|
|
<ul>
|
|
<li v-for="studio in infos.studios">{{ studio }}</li>
|
|
</ul>
|
|
</div>
|
|
<div class="genres ">
|
|
<h6 class="infos-genresTitle">Genres</h6>
|
|
<ul>
|
|
<li v-for="genre in infos.genres" >
|
|
{{ genre }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="infos-bottom-right mdl-cell mdl-cell--2-col mdl-cell--2-col-phone">
|
|
<div class="infos-bottom-right-inside">
|
|
<h6 >Score:</h6>
|
|
<h4 >{{ infos.stats.score.value }}</h4>
|
|
<h5 >{{ infos.stats.ranking }}</h5>
|
|
</div>
|
|
</div>
|
|
<div class="characters mdl-cell mdl-cell--12-col mdl-cell--12-col-phone">
|
|
<h5>Characters</h5>
|
|
<div class="mdl-grid">
|
|
<div v-for="character in infos.characters"
|
|
class="character mdl-cell mdl-cell--3-col mdl-cell--6-col-phone">
|
|
<h6 class="character-name ">{{ character.name }}</h6>
|
|
<h6 class="seiyuu-name ">by {{ character.actor }}</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="news-container" v-if="show" v-bind:style="{ display: display }">
|
|
<div class="mdl-grid">
|
|
<div v-for="article in news"
|
|
class="news mdl-cell mdl-cell--12-col mdl-cell--12-col-phone">
|
|
<md-ink-ripple></md-ink-ripple>
|
|
<h5 class="news-title">{{ article.title }}</h5>
|
|
<div class="news-picture" v-bind:style="{content: 'url(' + article.image + ')'}"></div>
|
|
<div class="news-synopsis">
|
|
{{ article.text }}
|
|
</div>
|
|
<md-button @click.native="openLink(article.link)"
|
|
class="md-raised md-primary news-link"
|
|
v-bind:style="buttonStyle">
|
|
Open
|
|
</md-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="season-info-container"
|
|
v-if="show"
|
|
v-bind:style="{ display: display }">
|
|
<div id="season-form-container">
|
|
<div class="field-group">
|
|
<md-input-container id="season-container" style="margin-right: 20px;">
|
|
<!--suppress XmlInvalidId -->
|
|
<label for="season">Season</label>
|
|
<md-select name="season" id="season" v-model="season">
|
|
<md-option value="winter"><a>Winter</a></md-option>
|
|
<md-option value="spring"><a>Spring</a></md-option>
|
|
<md-option value="summer"><a>Summer</a></md-option>
|
|
<md-option value="fall"><a>Fall</a></md-option>
|
|
</md-select>
|
|
</md-input-container>
|
|
|
|
<md-input-container id="year-container">
|
|
<label>Year</label>
|
|
<md-input type="number" v-model="year" style="color: rgba(0, 0, 0, 0.87);"
|
|
@keydown.enter="getThisSeason(year, season)"></md-input>
|
|
</md-input-container>
|
|
|
|
<md-button id="season-search" disabled
|
|
@click.native="getThisSeason(year, season)"
|
|
class="md-raised md-accent">
|
|
Search
|
|
</md-button>
|
|
</div>
|
|
|
|
</div>
|
|
<div id="season-displayer">
|
|
<md-tabs md-fixed>
|
|
<md-tab id="tv" md-label="TV">
|
|
<div class="mdl-grid">
|
|
<template v-for="anime in TVs">
|
|
<div class="mdl-cell mdl-cell--6-col mdl-cell--6-col-tablet">
|
|
<div class="elem">
|
|
<md-ink-ripple></md-ink-ripple>
|
|
<div class="title-container">
|
|
<h6>{{ reduced(anime.title, 40) }}</h6>
|
|
<p class="from-type">[{{ anime.fromType }}]</p>
|
|
</div>
|
|
<div class="genres-score">
|
|
<p class="genres">
|
|
{{ reduced(anime.genres.join(' '), 47) }}
|
|
</p>
|
|
<h5 class="score" v-bind:style="scoreStyle">{{ anime.scores }}</h5>
|
|
</div>
|
|
<div class="picture-container" v-bind:style="pictureStyle">
|
|
<div class="picture"
|
|
v-bind:style="{ content : 'url(' + anime.image + ')'}"></div>
|
|
</div>
|
|
<div class="text-container" v-bind:style="textStyle">
|
|
<div class="synopsis" v-bind:style="synopsisStyle">
|
|
<p>{{ reduced(anime.synopsis, 175) }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="season-footer">
|
|
<div class="date-nbEp">
|
|
<p class="release-date">{{ anime.releaseDates }}</p>
|
|
<p class="season-nb-ep" v-bind:style="">{{ anime.nbEp }}</p>
|
|
</div>
|
|
<div class="producers-more">
|
|
<p class="producers">{{ anime.producers }}</p>
|
|
<md-button @click.native="searchThis(anime.title)"
|
|
class="md-dense season-link-more"
|
|
v-bind:style="link">
|
|
More
|
|
</md-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</md-tab>
|
|
|
|
<md-tab id="ona" md-label="ONA">
|
|
<div class="mdl-grid">
|
|
<template v-for="anime in ONAs">
|
|
<div class="mdl-cell mdl-cell--6-col mdl-cell--6-col-tablet">
|
|
<div class="elem">
|
|
<md-ink-ripple></md-ink-ripple>
|
|
<div class="title-container">
|
|
<h6>{{ reduced(anime.title, 40) }}</h6>
|
|
<p class="from-type">[{{ anime.fromType }}]</p>
|
|
</div>
|
|
<div class="genres-score">
|
|
<p class="genres">
|
|
{{ reduced(anime.genres.join(' '), 47) }}
|
|
</p>
|
|
<h5 class="score" v-bind:style="scoreStyle">{{ anime.scores }}</h5>
|
|
</div>
|
|
<div class="picture-container" v-bind:style="pictureStyle">
|
|
<div class="picture"
|
|
v-bind:style="{ content : 'url(' + anime.image + ')'}"></div>
|
|
</div>
|
|
<div class="text-container" v-bind:style="textStyle">
|
|
<div class="synopsis" v-bind:style="synopsisStyle">
|
|
<p>{{ reduced(anime.synopsis, 175) }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="season-footer">
|
|
<div class="date-nbEp">
|
|
<p class="release-date">{{ anime.releaseDates }}</p>
|
|
<p class="season-nb-ep" v-bind:style="">{{ anime.nbEp }}</p>
|
|
</div>
|
|
<div class="producers-more">
|
|
<p class="producers">{{ anime.producers }}</p>
|
|
<md-button @click.native="searchThis(anime.title)"
|
|
class="md-dense season-link-more"
|
|
v-bind:style="link">
|
|
More
|
|
</md-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</md-tab>
|
|
|
|
<md-tab id="ova" md-label="OVA">
|
|
<div class="mdl-grid">
|
|
<template v-for="anime in OVAs">
|
|
<div class="mdl-cell mdl-cell--6-col mdl-cell--6-col-tablet">
|
|
<div class="elem">
|
|
<md-ink-ripple></md-ink-ripple>
|
|
<div class="title-container">
|
|
<h6>{{ anime.title }}</h6>
|
|
<p class="from-type">[{{ anime.fromType }}]</p>
|
|
</div>
|
|
<div class="genres-score">
|
|
<p class="genres">
|
|
{{ reduced(anime.genres.join(' '), 47) }}
|
|
</p>
|
|
<h5 class="score" v-bind:style="scoreStyle">{{ anime.scores }}</h5>
|
|
</div>
|
|
<div class="picture-container" v-bind:style="pictureStyle">
|
|
<div class="picture"
|
|
v-bind:style="{ content : 'url(' + anime.image + ')'}"></div>
|
|
</div>
|
|
<div class="text-container" v-bind:style="textStyle">
|
|
<div class="synopsis" v-bind:style="synopsisStyle">
|
|
<p>{{ reduced(anime.synopsis, 175) }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="season-footer">
|
|
<div class="date-nbEp">
|
|
<p class="release-date">{{ anime.releaseDates }}</p>
|
|
<p class="season-nb-ep" v-bind:style="">{{ anime.nbEp }}</p>
|
|
</div>
|
|
<div class="producers-more">
|
|
<p class="producers">{{ anime.producers }}</p>
|
|
<md-button @click.native="searchThis(anime.title)"
|
|
class="md-dense season-link-more"
|
|
v-bind:style="link">
|
|
More
|
|
</md-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</md-tab>
|
|
|
|
<md-tab id="movies" md-label=Movies>
|
|
<div class="mdl-grid">
|
|
<template v-for="anime in Movies">
|
|
<div class="mdl-cell mdl-cell--6-col mdl-cell--6-col-tablet">
|
|
<div class="elem">
|
|
<md-ink-ripple></md-ink-ripple>
|
|
<div class="title-container">
|
|
<h6>{{ reduced(anime.title, 40) }}</h6>
|
|
<p class="from-type">[{{ anime.fromType }}]</p>
|
|
</div>
|
|
<div class="genres-score">
|
|
<p class="genres">
|
|
{{ reduced(anime.genres.join(' '), 47) }}
|
|
</p>
|
|
<h5 class="score" v-bind:style="scoreStyle">{{ anime.scores }}</h5>
|
|
</div>
|
|
<div class="picture-container" v-bind:style="pictureStyle">
|
|
<div class="picture"
|
|
v-bind:style="{ content : 'url(' + anime.image + ')'}"></div>
|
|
</div>
|
|
<div class="text-container" v-bind:style="textStyle">
|
|
<div class="synopsis" v-bind:style="synopsisStyle">
|
|
<p>{{ reduced(anime.synopsis, 175) }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="season-footer">
|
|
<div class="date-nbEp">
|
|
<p class="release-date">{{ anime.releaseDates }}</p>
|
|
<p class="season-nb-ep" v-bind:style="">{{ anime.nbEp }}</p>
|
|
</div>
|
|
<div class="producers-more">
|
|
<p class="producers">{{ anime.producers }}</p>
|
|
<md-button @click.native="searchThis(anime.title)"
|
|
class="md-dense season-link-more"
|
|
v-bind:style="link">
|
|
More
|
|
</md-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</md-tab>
|
|
|
|
<md-tab id="specials" md-label=Specials>
|
|
<div class="mdl-grid">
|
|
<template v-for="anime in Specials">
|
|
<div class="mdl-cell mdl-cell--6-col mdl-cell--6-col-tablet">
|
|
<div class="elem">
|
|
<md-ink-ripple></md-ink-ripple>
|
|
<div class="title-container">
|
|
<h6>{{ reduced(anime.title, 40) }}</h6>
|
|
<p class="from-type">[{{ anime.fromType }}]</p>
|
|
</div>
|
|
<div class="genres-score">
|
|
<p class="genres">
|
|
{{ reduced(anime.genres.join(' '), 47) }}
|
|
</p>
|
|
<h5 class="score" v-bind:style="scoreStyle">{{ anime.scores }}</h5>
|
|
</div>
|
|
<div class="picture-container" v-bind:style="pictureStyle">
|
|
<div class="picture"
|
|
v-bind:style="{ content : 'url(' + anime.image + ')'}"></div>
|
|
</div>
|
|
<div class="text-container" v-bind:style="textStyle">
|
|
<div class="synopsis" v-bind:style="synopsisStyle">
|
|
<p>{{ reduced(anime.synopsis, 175) }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="season-footer">
|
|
<div class="date-nbEp">
|
|
<p class="release-date">{{ anime.releaseDates }}</p>
|
|
<p class="season-nb-ep" v-bind:style="">{{ anime.nbEp }}</p>
|
|
</div>
|
|
<div class="producers-more">
|
|
<p class="producers">{{ anime.producers }}</p>
|
|
<md-button @click.native="searchThis(anime.title)"
|
|
class="md-dense season-link-more"
|
|
v-bind:style="link">
|
|
More
|
|
</md-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</md-tab>
|
|
</md-tabs>
|
|
</div>
|
|
</div>
|
|
<div id="watch-list-container" v-if="show">
|
|
<watch-list></watch-list>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
require('./index.js')
|
|
</script>
|
|
</body>
|
|
</html>
|