2016-11-21 14:33:22 +00:00
|
|
|
<!DOCTYPE html>
|
2016-11-24 18:34:06 +00:00
|
|
|
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
2016-11-25 01:02:36 +00:00
|
|
|
<title>KawAnime</title>
|
2016-11-24 18:34:06 +00:00
|
|
|
<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">
|
2016-11-25 21:49:09 +00:00
|
|
|
<link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="stylesheet" type="text/css">
|
|
|
|
|
|
2016-11-24 18:34:06 +00:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
2016-11-21 14:33:22 +00:00
|
|
|
|
2016-11-24 18:34:06 +00:00
|
|
|
<div id="not-online">
|
|
|
|
|
<h1>You're not connected to the internet...</h1>
|
|
|
|
|
<h3>Please connect the Internet and restart KawAnime.</h3>
|
|
|
|
|
</div>
|
2016-11-21 14:33:22 +00:00
|
|
|
|
2016-11-24 18:34:06 +00:00
|
|
|
<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">
|
2016-11-25 01:02:36 +00:00
|
|
|
<div
|
|
|
|
|
class="mdl-layout-spacer"><h4 class="greetings">Welcome {{ username }} ! Here are some of the
|
|
|
|
|
latest anime episodes.</h4></div>
|
2016-11-24 18:34:06 +00:00
|
|
|
<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>
|
2016-11-21 14:33:22 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2016-11-24 18:34:06 +00:00
|
|
|
</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>
|
2016-11-25 21:49:09 +00:00
|
|
|
<a class="mdl-navigation__link" href="#">Watch List</a>
|
2016-11-24 18:34:06 +00:00
|
|
|
</nav>
|
|
|
|
|
</div>
|
|
|
|
|
<main class="mdl-layout__content">
|
2016-11-25 21:49:09 +00:00
|
|
|
<div class="page-content">
|
2016-11-26 13:57:00 +00:00
|
|
|
<div id="releases" class="mdl-grid" v-if="show">
|
2016-11-25 21:49:09 +00:00
|
|
|
<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">
|
|
|
|
|
<!-- Flat button with ripple -->
|
2016-11-26 11:34:17 +00:00
|
|
|
<button @click="download(release.link, release.realTitle)"
|
|
|
|
|
class="link-download mdl-button mdl-js-button mdl-js-ripple-effect">
|
2016-11-29 12:22:55 +00:00
|
|
|
<a>download!</a>
|
2016-11-25 21:49:09 +00:00
|
|
|
</button>
|
|
|
|
|
<!-- Flat button with ripple -->
|
2016-11-29 12:22:55 +00:00
|
|
|
<button @click="searchThis(release.realTitle)"
|
|
|
|
|
class="link-more mdl-button mdl-js-button mdl-js-ripple-effect">
|
2016-11-25 21:49:09 +00:00
|
|
|
<a href="#">more</a>
|
|
|
|
|
</button>
|
2016-11-24 18:34:06 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2016-11-25 21:49:09 +00:00
|
|
|
</template>
|
|
|
|
|
</div>
|
2016-11-26 13:57:00 +00:00
|
|
|
<div id="loader-container" v-if="show">
|
|
|
|
|
<div class="loading-text">
|
|
|
|
|
<h3>少々お待ち下さい。</h3>
|
|
|
|
|
</div>
|
2016-11-29 12:22:55 +00:00
|
|
|
<div class="loader-gif" ></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="info-container" v-if="show" v-bind:style="{ display: display }">
|
|
|
|
|
<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 }}</h5>
|
|
|
|
|
</div>
|
|
|
|
|
<div @click="test()" id="synopsis-container">
|
|
|
|
|
<pre>{{ infos.synopsis }}</pre>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone">
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mdl-cell mdl-cell--6-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="characters">
|
|
|
|
|
<h6>Characters</h6>
|
|
|
|
|
<ul>
|
|
|
|
|
<li v-for="character in infos.characters">
|
|
|
|
|
<p>{{ character.name }}</p>
|
|
|
|
|
<p>{{ character.actor }}</p>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mdl-cell mdl-cell--2-col mdl-cell--2-col-phone">
|
|
|
|
|
<!-- For some reason, those generate warnings on initial render-->
|
|
|
|
|
<p>{{ infos.stats.score.value}}</p>
|
|
|
|
|
<p>{{ infos.stats.ranking}}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2016-11-26 13:57:00 +00:00
|
|
|
</div>
|
2016-11-21 14:33:22 +00:00
|
|
|
</div>
|
2016-11-24 18:34:06 +00:00
|
|
|
</main>
|
|
|
|
|
</div>`
|
|
|
|
|
</div>
|
2016-11-21 14:33:22 +00:00
|
|
|
|
2016-11-24 18:34:06 +00:00
|
|
|
<script>
|
|
|
|
|
const isOnline = require('is-online')
|
2016-11-21 19:08:13 +00:00
|
|
|
|
2016-11-24 18:34:06 +00:00
|
|
|
isOnline(function(err, online) {
|
|
|
|
|
if (err) throw err
|
2016-11-21 14:33:22 +00:00
|
|
|
|
2016-11-24 18:34:06 +00:00
|
|
|
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>
|
2016-11-21 14:33:22 +00:00
|
|
|
</html>
|
