diff options
| -rw-r--r-- | assets/css/main.css | 2 | ||||
| -rw-r--r-- | assets/css/main.css.map | 2 | ||||
| -rw-r--r-- | assets/css/main.sass | 29 | ||||
| -rwxr-xr-x | assets/js/main.js | 108 | ||||
| -rwxr-xr-x | index.html | 8 |
5 files changed, 94 insertions, 55 deletions
diff --git a/assets/css/main.css b/assets/css/main.css index 3e9093c..faf1c9c 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,2 +1,2 @@ -body{font-family:"Varela Round", sans-serif !important;text-rendering:optimizeLegibility !important;box-sizing:border-box !important}.Main{min-height:100vh}.SectionHeader{display:flex;justify-content:center;align-items:center;align-content:space-between;width:100%}.SectionHeader h1{text-transform:capitalize}canvas#MostWatchedChart{opacity:0}.GradientBackground .GreenBlue,.GradientBackground .OrangePink{position:fixed;top:0;left:0;z-index:-1;transition:opacity 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s;width:100%;height:100vh}.GradientBackground .Color:not(.Active){display:none}.GradientBackground .GreenBlue{background:linear-gradient(145deg, #c3f0c8, #509bf5)}.GradientBackground .OrangePink{background:linear-gradient(145deg, #ffc867, #f037a6)}.GradientBackground .GreenBlue{background:linear-gradient(145deg, #c3f0c8, #509bf5)}.FavoritesSection .SectionHeader{height:40vh;color:#1e3264} +body{font-family:"Varela Round", sans-serif !important;text-rendering:optimizeLegibility !important;box-sizing:border-box !important}.Main{min-height:100vh}.SectionHeader{display:flex;justify-content:center;align-items:center;align-content:space-between;width:100%}.SectionHeader h1{text-transform:capitalize}.GradientBackground .GreenBlue,.GradientBackground .OrangePink{position:fixed;top:0;left:0;z-index:-1;transition:opacity 1.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s;width:100%;height:100vh}.GradientBackground .Color:not(.Active){display:none}.GradientBackground .GreenBlue{background:linear-gradient(145deg, #c3f0c8, #509bf5)}.GradientBackground .OrangePink{background:linear-gradient(145deg, #ffc867, #f037a6)}.GradientBackground .GreenBlue{background:linear-gradient(145deg, #c3f0c8, #509bf5)}.FavoritesSection .SectionHeader{height:40vh;color:#1e3264}.FavoritesSection .MostWatchedOverview{padding:30px}.FavoritesSection .MostWatchedOverview .OverviewText{position:relative;float:left;max-width:50%}.FavoritesSection .MostWatchedOverview .MostWatchedPoster{position:relative;float:right;max-width:50%;margin-bottom:20px}canvas#MostWatchedChart{opacity:0} /*# sourceMappingURL=main.css.map */
\ No newline at end of file diff --git a/assets/css/main.css.map b/assets/css/main.css.map index 18c3668..8d9b4db 100644 --- a/assets/css/main.css.map +++ b/assets/css/main.css.map @@ -1,6 +1,6 @@ { "version": 3, - "mappings": "AAQA,AAAA,IAAI,AAAC,CACD,WAAW,CAAE,qCAAqC,CAClD,cAAc,CAAE,6BAA6B,CAC7C,UAAU,CAAE,qBAAqB,CAAI,AAEzC,AAAA,KAAK,AAAC,CAEF,UAAU,CAAE,KAAK,CAAI,AAGzB,AAAA,cAAc,AAAC,CACX,OAAO,CAAE,IAAI,CACb,eAAe,CAAE,MAAM,CACvB,WAAW,CAAE,MAAM,CACnB,aAAa,CAAE,aAAa,CAC5B,KAAK,CAAE,IAAI,CAAI,AAEnB,AAAe,cAAD,CAAC,EAAE,AAAC,CACd,cAAc,CAAE,UAAU,CAAI,AAGlC,AAAA,MAAM,AAAA,iBAAiB,AAAC,CACpB,OAAO,CAAE,CAAC,CAAI,AAGlB,AACI,mBADe,CAaf,UAAU,CAbd,AACI,mBADe,CAkBf,WAAW,AAjBD,CACN,QAAQ,CAAE,KAAK,CACf,GAAG,CAAE,CAAC,CACN,IAAI,CAAE,CAAC,CACP,OAAO,CAAE,EAAE,CACX,UAAU,CAAE,OAAO,CAAC,IAAI,CAAC,qCAAqC,CAAC,EAAE,CACjE,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,KAAK,CAAI,AARzB,AAUI,mBAVe,CAUf,MAAM,AAAA,IAAK,CAAA,AAAA,OAAO,CAAE,CAChB,OAAO,CAAE,IAAI,CAAI,AAXzB,AAaI,mBAbe,CAaf,UAAU,AAAC,CACP,UAAU,CAAE,yCAAyC,CAEjC,AAhB5B,AAkBI,mBAlBe,CAkBf,WAAW,AAAC,CACR,UAAU,CAAE,yCAAyC,CAEjC,AArB5B,AAaI,mBAbe,CAaf,UAAU,AAUC,CACP,UAAU,CAAE,yCAAyC,CAEjC,AAG5B,AAAkB,iBAAD,CAAC,cAAc,AAAC,CAC7B,MAAM,CAAE,IAAI,CACZ,KAAK,CA1DG,OAAO,CA0DK", + "mappings": "AAQA,AAAA,IAAI,AAAC,CACD,WAAW,CAAE,qCAAqC,CAClD,cAAc,CAAE,6BAA6B,CAC7C,UAAU,CAAE,qBAAqB,CAAI,AAEzC,AAAA,KAAK,AAAC,CAEF,UAAU,CAAE,KAAK,CAAI,AAGzB,AAAA,cAAc,AAAC,CACX,OAAO,CAAE,IAAI,CACb,eAAe,CAAE,MAAM,CACvB,WAAW,CAAE,MAAM,CACnB,aAAa,CAAE,aAAa,CAC5B,KAAK,CAAE,IAAI,CAAI,AAEnB,AAAe,cAAD,CAAC,EAAE,AAAC,CACd,cAAc,CAAE,UAAU,CAAI,AAGlC,AACI,mBADe,CAaf,UAAU,CAbd,AACI,mBADe,CAkBf,WAAW,AAjBD,CACN,QAAQ,CAAE,KAAK,CACf,GAAG,CAAE,CAAC,CACN,IAAI,CAAE,CAAC,CACP,OAAO,CAAE,EAAE,CACX,UAAU,CAAE,OAAO,CAAC,IAAI,CAAC,qCAAqC,CAAC,EAAE,CACjE,KAAK,CAAE,IAAI,CACX,MAAM,CAAE,KAAK,CAAI,AARzB,AAUI,mBAVe,CAUf,MAAM,AAAA,IAAK,CAAA,AAAA,OAAO,CAAE,CAChB,OAAO,CAAE,IAAI,CAAI,AAXzB,AAaI,mBAbe,CAaf,UAAU,AAAC,CACP,UAAU,CAAE,yCAAyC,CAEjC,AAhB5B,AAkBI,mBAlBe,CAkBf,WAAW,AAAC,CACR,UAAU,CAAE,yCAAyC,CAEjC,AArB5B,AAaI,mBAbe,CAaf,UAAU,AAUC,CACP,UAAU,CAAE,yCAAyC,CAEjC,AAG5B,AACI,iBADa,CACb,cAAc,AAAC,CACX,MAAM,CAAE,IAAI,CACZ,KAAK,CAvDD,OAAO,CAuDS,AAH5B,AAKI,iBALa,CAKb,oBAAoB,AAAC,CACjB,OAAO,CAAE,IAAI,CAWgB,AAjBrC,AAQQ,iBARS,CAKb,oBAAoB,CAGhB,aAAa,AAAC,CACV,QAAQ,CAAE,QAAQ,CAClB,KAAK,CAAE,IAAI,CACX,SAAS,CAAE,GAAG,CAAI,AAX9B,AAaQ,iBAbS,CAKb,oBAAoB,CAQhB,kBAAkB,AAAC,CACf,QAAQ,CAAE,QAAQ,CAClB,KAAK,CAAE,KAAK,CACZ,SAAS,CAAE,GAAG,CACd,aAAa,CAAE,IAAI,CAAI,AAGnC,AAAA,MAAM,AAAA,iBAAiB,AAAC,CACpB,OAAO,CAAE,CAAC,CAAI", "sources": [ "main.sass" ], diff --git a/assets/css/main.sass b/assets/css/main.sass index 4c07d53..45c3768 100644 --- a/assets/css/main.sass +++ b/assets/css/main.sass @@ -26,10 +26,6 @@ body .SectionHeader h1 text-transform: capitalize -// Charts -canvas#MostWatchedChart - opacity: 0 - // Gradients .GradientBackground %Gradient @@ -60,6 +56,25 @@ canvas#MostWatchedChart @extend %Gradient // Favorites -.FavoritesSection .SectionHeader - height: 40vh - color: $BlueColor
\ No newline at end of file +.FavoritesSection + .SectionHeader + height: 40vh + color: $BlueColor + + .MostWatchedOverview + padding: 30px + + .OverviewText + position: relative + float: left + max-width: 50% + + .MostWatchedPoster + position: relative + float: right + max-width: 50% + margin-bottom: 20px + +// Charts +canvas#MostWatchedChart + opacity: 0 diff --git a/assets/js/main.js b/assets/js/main.js index b383a16..f1f386d 100755 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -10,7 +10,7 @@ $(() => { let NetflixJson; if (!DebuggingMode) { - CookieInput.keyup((e) => { + CookieInput.keyup(e => { if (e.keyCode === 13) { $.ajax({ url: "assets/php/getNetflixJson.php", @@ -18,7 +18,7 @@ $(() => { Cookie: CookieInput.val() }, type: "POST" - }).done((response) => { + }).done(response => { CookieInput.val(""); CookieInput.hide(); $(".Main").fadeIn(); @@ -34,7 +34,7 @@ $(() => { Cookie: CookieInput.val() }, type: "POST" - }).done((response) => { + }).done(response => { $(".Main").fadeIn(); AnalyzeData(response); }); @@ -139,7 +139,8 @@ $(() => { // Calculate the most watched series/movies const UnsortedTitleOccurrenceCounter = EveryWatched.reduce( - (prev, curr) => ((prev[curr] = ++prev[curr] || 1), prev), {} + (prev, curr) => ((prev[curr] = ++prev[curr] || 1), prev), + {} ); const SortedTitleOccurrenceCounter = sortObject( UnsortedTitleOccurrenceCounter @@ -162,11 +163,11 @@ $(() => { // create scroll events new Waypoint({ - element: $('canvas#MostWatchedChart'), - handler: (direction) => { - $('canvas#MostWatchedChart').fadeTo(1000, (direction === "down" ? 1 : 0)) + element: $("canvas#MostWatchedChart"), + handler: direction => { + $("canvas#MostWatchedChart").fadeTo(1000, direction === "down" ? 1 : 0); }, - offset: $('canvas#MostWatchedChart').height() + offset: $("canvas#MostWatchedChart").height() }); } @@ -183,7 +184,7 @@ $(() => { const WatchTimeChartElement = document .getElementById("WatchTimeChart") .getContext("2d"); - const WatchTimeChart = new Chart(WatchTimeChartElement, { + new Chart(WatchTimeChartElement, { type: "line", data: { labels: [ @@ -212,37 +213,43 @@ $(() => { "10pm", "11pm" ], - datasets: [{ - label: "Watches at daytime", - borderColor: "rgb(255, 99, 132)", - cubicInterpolationMode: "monotone", - pointRadius: 0, - pointHitRadius: 15, - data: AverageWatchTimeOccurrenceArray - }] + datasets: [ + { + label: "Watches at daytime", + borderColor: "rgb(255, 99, 132)", + cubicInterpolationMode: "monotone", + pointRadius: 0, + pointHitRadius: 15, + data: AverageWatchTimeOccurrenceArray + } + ] }, options: { scales: { - yAxes: [{ - ticks: { - display: false - }, - gridLines: { - zeroLineColor: "transparent", - zeroLineWidth: 2, - drawTicks: false, - drawBorder: false, - color: "transparent" + yAxes: [ + { + ticks: { + display: false + }, + gridLines: { + zeroLineColor: "transparent", + zeroLineWidth: 2, + drawTicks: false, + drawBorder: false, + color: "transparent" + } } - }], - xAxes: [{ - gridLines: { - zeroLineColor: "rgba(255, 255, 255, 0.25)", - display: true, - drawBorder: false, - color: "rgba(255, 255, 255, 0.25)" + ], + xAxes: [ + { + gridLines: { + zeroLineColor: "rgba(255, 255, 255, 0.25)", + display: true, + drawBorder: false, + color: "rgba(255, 255, 255, 0.25)" + } } - }] + ] }, tension: 1 } @@ -277,14 +284,16 @@ $(() => { .getContext("2d"); var MostWatchedChartData = { labels: [], - datasets: [{ - label: "Most watched", - backgroundColor: GenerateRandomColorArray(), - data: [] - }] + datasets: [ + { + label: "Most watched", + backgroundColor: GenerateRandomColorArray(), + data: [] + } + ] }; Chart.pluginService.register({ - beforeInit: (chart) => { + beforeInit: chart => { var data = chart.config.data; for (var key in TitleOccurrenceCounterObject) { if (TitleOccurrenceCounterObject.hasOwnProperty(key)) { @@ -296,7 +305,7 @@ $(() => { } } }); - var MostWatchedChart = new Chart(MostWatchedChartElement, { + new Chart(MostWatchedChartElement, { type: "doughnut", data: MostWatchedChartData, options: { @@ -322,10 +331,17 @@ $(() => { Title: Title }, type: "POST" - }).done((response) => { - console.log(JSON.parse(response)); + }).done(result => { + const TopInformation = JSON.parse(result); + $(".MostWatchedOverview .MostWatchedPoster").attr( + "src", + `https://image.tmdb.org/t/p/w300${TopInformation.poster_path}` + ); + $(".MostWatchedOverview .OverviewText .Description").text( + TopInformation.overview + ); + console.log(TopInformation); }); - // TODO: Write to site/DOM } /** @@ -346,4 +362,4 @@ $(() => { } return orderedList; } -});
\ No newline at end of file +}); @@ -31,6 +31,14 @@ <div class="SectionHeader"> <h1>Let's check out your most watched series</h1> </div> + <div class="MostWatchedOverview"> + <div class="OverviewText"> + <div class="Description"> + + </div> + </div> + <img class="MostWatchedPoster" src="" alt=""> + </div> </div> <canvas id="WatchTimeChart"></canvas> <canvas id="MostWatchedChart"></canvas> |