mirror of https://github.com/Kylart/KawAnime.git
164 lines
6.5 KiB
HTML
164 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="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-pink.min.css">
|
|
<link rel="stylesheet" href="app/style.css">
|
|
<link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="stylesheet" type="text/css">
|
|
|
|
</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 restart KawAnime.</h3>
|
|
</div>
|
|
|
|
<div id="container">
|
|
<div class="left-background"></div>
|
|
<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"><h4 class="greetings">Welcome {{ username }} ! Here are some of the
|
|
latest anime episodes.</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="sample"
|
|
id="fixed-header-drawer-exp">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="mdl-layout__drawer">
|
|
<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="getInfoPage()">Get information</a>
|
|
<a class="mdl-navigation__link" href="#">Watch List</a>
|
|
</nav>
|
|
</div>
|
|
<main class="mdl-layout__content">
|
|
<div class="page-content">
|
|
<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">
|
|
<h6>{{ release.title }}</h6>
|
|
<div class="picture">
|
|
<img v-bind:src="release.picture" height="180">
|
|
</div>
|
|
<div class="text-container">
|
|
<div class="synopsis">
|
|
<p>{{ release.synopsis }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="links">
|
|
<button @click="download(release.link, release.realTitle)"
|
|
class="link-download mdl-button mdl-js-button mdl-js-ripple-effect">
|
|
<a>download!</a>
|
|
</button>
|
|
<button @click="searchThis(release.realTitle)"
|
|
class="link-more mdl-button mdl-js-button mdl-js-ripple-effect">
|
|
<a href="#">more</a>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</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 }">
|
|
<button @click="backToMain()" id="back-button" class="mdl-button mdl-js-button mdl-button--raised">
|
|
Back
|
|
</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 class="infos-japTitle">Japanese title: {{ infos.japTitle }}</h6>
|
|
<h6>{{ infos.episodes }} episodes</h6>
|
|
</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">
|
|
<h6>Score:</h6>
|
|
<h4>{{ infos.stats.score.value }}</h4>
|
|
<h6>{{ infos.stats.ranking }}</h6>
|
|
</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--3-col-phone">
|
|
<h6 class="character-name">{{ character.name }}</h6>
|
|
<h6 class="seiyuu-name">{{ character.actor }}</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>`
|
|
</div>
|
|
|
|
<script>
|
|
const isOnline = require('is-online')
|
|
|
|
isOnline(function(err, online) {
|
|
if (err) throw err
|
|
|
|
if(online)
|
|
{
|
|
require('./renderer.js')
|
|
}
|
|
else
|
|
{
|
|
document.getElementById('not-online').style.display = 'block'
|
|
document.getElementById('container').style.display = 'none'
|
|
}
|
|
})
|
|
</script>
|
|
<script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
|
|
</body>
|
|
</html>
|