+
+
+
Japanese title : {{ japaneseTitle }}
+
+
+
+
+
+
+
+
{{ title }}
+
+
Synopsis
+
+
Characters
+
+
+
+ {{ chara.name }}
+
+
+ → {{ chara.actor }}
+
+
+ {{ chara.language }}
+ {{ chara.role }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ episodes }} episodes -- {{ status }}
+
Aired from {{ aired }}
+
+ -
+ {{ guy.role[0] }} : {{ guy.name }}
+
+
+
+
-
-
-
-
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/app/InformationPage/informations.js b/app/InformationPage/informations.js
index afd4991..723c882 100644
--- a/app/InformationPage/informations.js
+++ b/app/InformationPage/informations.js
@@ -5,63 +5,66 @@
const remote = require('electron').remote
const main = remote.require(`${__dirname}/../../main.js`)
const mal = require('malapi').Anime
+const ProgressBar = require('progressbar.js');
-
-let container = new Vue({
- el: '#container',
- data: {
- showForm: 'v-a'
- },
- components: {
- 'v-a': {
- template: `
-
`,
- data: function () {
- return {
- title_: 'Need infos ?',
- toMain: 'To main page',
- bringIt: 'Gimme info!'
- }
- },
- computed: {
- title: function () {
- return this.title_
- }
- },
- methods: {
- back: function () {
- main.getMainPage()
- },
- gotInfo: function () {
- console.log('Clicked')
- container.showForm = 'v-b'
- }
- }
- },
- 'v-b': {
- template: `
Hello
`
- }
- }
-})
+// let container = new Vue({
+// el: '#container',
+// data: {
+// showForm: 'v-a'
+// },
+// components: {
+// 'v-a': {
+// template: `
+//
`,
+// data: function () {
+// return {
+// title_: 'Need infos ?',
+// toMain: 'To main page',
+// bringIt: 'Gimme info!'
+// }
+// },
+// computed: {
+// title: function () {
+// return this.title_
+// }
+// },
+// methods: {
+// back: function () {
+// main.getMainPage()
+// },
+// gotInfo: function () {
+// console.log('Clicked')
+// container.showForm = 'v-b'
+// },
+// getDownloader: function () {
+// main.openDownloader()
+// }
+// }
+// },
+// 'v-b': {
+// template: `
Hello
`
+// }
+// }
+// })
function makeResearch(name) {
mal.fromName(name).then(anime => {
@@ -72,4 +75,139 @@ function makeResearch(name) {
})
}
+let sakuraTrick = {
+ title: 'Sakura Trick',
+ japaneseTitle: '桜Trick',
+ image: 'https://myanimelist.cdn-dena.com/images/anime/2/56189.jpg',
+ synopsis: 'Love is in the air when the story of Sakura Trick begins. Haruka Takayama and Yuu Sonoda were best' +
+ ' friends in middle school, and are now attending Misato West High School together. They are assigned to the same class in their first year, but are given seats on opposite sides of the room! If that wasn\'t enough, it is announced at the entrance ceremony that the school will be closed in three years. This doesn\'t bother either of them, as they still plan on having lots of fun together during their high school years.\r\n\r\nHaruka gets jealous of Yuu making new friends though, so the two decide to deepen their bond. "Let\'s do something we\'d never do with other girls," Yuu says, and they share a kiss in a vacant classroom after school one day. After that one kiss leads to many kisses, the two begin to realize that the relationship they share has changed completely. But what will happen to their relationship once a disapproving older sister begins to suspect that something is going on between the two?',
+ episodes: '12',
+ studio: [ 'Studio Deen' ],
+ stats: { score: { value: '7.20', count: '50,078' },
+ popularity: '#500',
+ members: '106,584',
+ favorites: '899',
+ ranking: '#2648' },
+ genres: [ 'Slice of Life',
+ 'Comedy',
+ 'Romance',
+ 'School',
+ 'Seinen',
+ 'Shoujo Ai' ],
+ status: 'Finished Airing',
+ aired: 'Jan 10, 2014 to Mar 28, 2014',
+ type: 'TV'
+}
+let container = new Vue({
+ el: '#container-',
+ data: {
+ title: 'Sakura Trick',
+ japaneseTitle: '桜Trick',
+ image: 'https://myanimelist.cdn-dena.com/images/anime/2/56189.jpg',
+ synopsis: 'Love is in the air when the story of Sakura Trick begins. Haruka Takayama and Yuu Sonoda were best' +
+ ' friends in middle school, and are now attending Misato West High School together. They are assigned to the same class in their first year, but are given seats on opposite sides of the room! If that wasn\'t enough, it is announced at the entrance ceremony that the school will be closed in three years. This doesn\'t bother either of them, as they still plan on having lots of fun together during their high school years.\r\n\r\nHaruka gets jealous of Yuu making new friends though, so the two decide to deepen their bond. "Let\'s do something we\'d never do with other girls," Yuu says, and they share a kiss in a vacant classroom after school one day. After that one kiss leads to many kisses, the two begin to realize that the relationship they share has changed completely. But what will happen to their relationship once a disapproving older sister begins to suspect that something is going on between the two?',
+ episodes: '12',
+ studios: [ 'Studio Deen' ],
+ stats: { score: '7.20',
+ popularity: '#500',
+ members: '106,584',
+ favorites: '899',
+ ranking: '#2648' },
+ genres: [ 'Slice of Life',
+ 'Comedy',
+ 'Romance',
+ 'School',
+ 'Seinen',
+ 'Shoujo Ai' ],
+ status: 'Finished Airing',
+ aired: 'Jan 10, 2014 to Mar 28, 2014',
+ type: 'TV',
+ characters: [
+ { name: 'Takayama, Haruka',
+ role: 'Main',
+ actor: 'Tomatsu, Haruka',
+ language: 'Japanese' },
+ { name: 'Sonoda, Yuu',
+ role: 'Main',
+ actor: 'Iguchi, Yuka',
+ language: 'Japanese' },
+ { name: 'Ikeno, Kaede',
+ role: 'Main',
+ actor: 'Fuchigami, Mai',
+ language: 'Japanese' },
+ { name: 'Iizuka, Yuzu',
+ role: 'Main',
+ actor: 'Toda, Megumi',
+ language: 'Japanese'
+ }
+ ],
+ staff : [
+ { name: 'Ishikura, Kenichi', role: [ 'Director',
+ 'Episode Director',
+ 'Storyboard',
+ 'Series Composition' ] },
+ { name: 'Ishigura, Kenichi',
+ role: [ 'Director', 'Series Composition' ] },
+ { name: 'Iida, Satoki', role: [ 'Sound Director' ] },
+ { name: 'Tomatsu, Haruka', role: [ 'Theme Song Performance' ] } ]
+ },
+ methods: {
+ back: function () {
+ main.getMainPage()
+ },
+ gotInfo: function () {
+ console.log('Clicked')
+ container.showForm = 'v-b'
+ },
+ getDownloader: function () {
+ main.openDownloader()
+ },
+ toSearch: function () {
+ container.showForm = 'v-b'
+ }
+
+ }
+})
+
+let elemFound = false
+
+try
+{
+ let bar = new ProgressBar.Circle(document.getElementById('mark-displayer'), {
+ color: '#aaa',
+ // This has to be the same size as the maximum width to
+ // prevent clipping
+ strokeWidth: 4,
+ trailWidth: 1,
+ easing: 'easeInOut',
+ duration: 1400,
+ text: {
+ autoStyleContainer: false
+ },
+ from: {color: '#aaa', width: 1},
+ to: {color: '#0af', width: 4},
+ // Set default step function for all animate calls
+ step: function (state, circle) {
+ circle.path.setAttribute('stroke', state.color);
+ circle.path.setAttribute('stroke-width', state.width);
+
+ let value = Math.round(circle.value() * 100);
+ if (value === 0) {
+ circle.setText('');
+ } else {
+ circle.setText(value / 10);
+ }
+
+ }
+ });
+ bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
+ bar.text.style.color = '#3cf';
+
+ bar.animate(container.stats.score / 10); // Number from 0.0 to 1.0
+c
+ elemFound = true
+}
+catch (e) {
+
+}
\ No newline at end of file
diff --git a/app/InformationPage/style.css b/app/InformationPage/style.css
index a23945d..961a57e 100644
--- a/app/InformationPage/style.css
+++ b/app/InformationPage/style.css
@@ -6,8 +6,26 @@ body
background-image: url('../../resources/formBack.jpg');
background-size: cover;
background-repeat: no-repeat;
+ overflow: hidden;
}
+#container
+{
+ width: 100%;
+ height: 100%;
+}
+
+/* TEMP */
+#container-
+{
+ width: 100%;
+ height: 100%;
+ margin: 0 auto;
+ background-color: rgba(0, 0, 0, 0.15);
+ position: fixed;
+}
+/* END TEMP */
+
#form-container
{
text-align: center;
@@ -21,6 +39,34 @@ body
display: inline;
}
+#info-buttons-container
+{
+ position: inherit;
+ display: inline;
+ margin-top: 7%;
+ width: 100%;
+}
+
+#info-buttons-container button
+{
+ display: inline;
+}
+
+#info-download
+{
+ margin-left: 25%;
+}
+
+#info-back
+{
+ margin-left: 3.5%;
+}
+
+#info-to-search
+{
+ margin-left: 25%;
+}
+
#info
{
margin-left: 2%;
@@ -32,8 +78,219 @@ body
}
.form-fade-enter-active, .form-fade-leave-active {
- transition: opacity 3s ease;
+ transition: opacity 3.2s ease;
}
.form-fade-enter, .form-fade-leave-active {
opacity: 0;
+}
+
+#right-container
+{
+ position: static;
+ margin-left: 80%;
+ height: 100%;
+ width: 20%
+}
+
+#mark-displayer
+{
+ /*margin-left: 80%;*/
+ margin-top: 2%;
+ margin-left: 2%;
+ width: 15%;
+ height: 22.5%;
+ position: absolute;
+ font-size: 7rem;
+}
+
+#info-displayer
+{
+ position: absolute;
+ margin-top: 18%;
+ padding: 3% 3% 3% 3%;
+ background-color: rgba(255, 255, 255, 0.7);
+}
+
+#info-displayer h6
+{
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+#middle-container
+{
+ width: 60%;
+ position: absolute;
+ height: 100%;
+ margin-top: 1%;
+ margin-left: 20%;
+}
+
+#middle-container h6
+{
+ margin: 0;
+}
+
+#middle-title
+{
+ text-align: center;
+ width: 100%;
+}
+
+#middle-title h3
+{
+ margin-bottom: 2%;
+}
+
+#synopsis
+{
+ /*margin-top: 7%;*/
+ margin-bottom: 3%;
+ padding-left: 8%;
+ padding-right: 8%;
+ color: rgba(0,0,0,.54);
+}
+
+#synopsis pre
+{
+ line-height: 130%;
+ text-align: justify;
+ text-indent: 20px;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ font-family: inherit;
+ padding: 3% 3% 3% 3%;
+ background-color: rgba(255, 255, 255, 0.7);
+}
+
+#character-grid
+{
+ margin-left: 2%;
+ display: inline-flex;
+ width: 100%;
+ /*padding-left: 4.5%;*/
+ /*padding-right: 3%;*/
+}
+
+.character
+{
+
+ background-color: rgba(255, 255, 255, 0.7);
+ margin-left: 2.6%;
+ padding: 10px 10px 10px 10px;
+ width: 18%;
+}
+
+.seiyuu
+{
+ line-height: 130%;
+ font-weight: bold;
+}
+
+.actor-name
+{
+ float: right;
+}
+
+.chara-stat
+{
+ line-height: 120%;
+}
+
+.chara-name
+{
+ text-align: right;
+}
+
+.lang
+{
+ float: left;
+}
+
+.role
+{
+ float: right;
+}
+
+
+#left-container
+{
+ margin-top: 2%;
+ /*background-color: rgba(0, 0, 0, 0.15);*/
+ width: 18%;
+ height: 45%;
+ position: absolute;
+}
+
+#image
+{
+ background-repeat: no-repeat;
+ background-size: cover;
+ height: 99%;
+ width: 99%;
+ margin-top: 1%;
+ position: relative;
+}
+
+#anime-title
+{
+ height: 10%;
+ width: 100%;
+ font-size: medium;
+ background-color: rgba(0, 0, 0, 0.15);
+ position: absolute;
+ bottom: 0;
+ display: flex;
+ align-items: center;
+ color: rgba(50, 50, 50, 0.9);
+}
+
+#anime-title span
+{
+ margin-left: 5%;
+ font-weight: bold;
+}
+
+#jap-title
+{
+ margin-top: 5%;
+ /*margin-left: 5%;*/
+ margin-bottom: 0;
+ padding: 3% 3% 3% 3%;
+ background-color: rgba(255, 255, 255, 0.7);
+}
+
+#genres
+{
+ /*margin-left: 5%;*/
+ padding: 3% 3% 3% 3%;
+ background-color: rgba(255, 255, 255, 0.7);
+}
+
+#genres h6
+{
+ margin: 0;
+
+}
+
+#genres ul
+{
+ margin-top: 0;
+}
+
+#studio
+{
+ /*margin-left: 5%;*/
+ padding: 3% 3% 3% 3%;
+ background-color: rgba(255, 255, 255, 0.7);
+}
+
+#studio h6
+{
+ margin: 0;
+}
+
+#studio ul
+{
+ margin-top: 0;
}
\ No newline at end of file