Minor CSS changes, better README

Elements are more centered, the README is better written with images and credit.

README.md

@@ -1,22 +1,43 @@
 # Plex Wrapped
+
 ## Introduction
-A website and API for collecting Plex user stats within a set timeframe using [Tautulli](https://github.com/Tautulli/Tautulli). Yes, you need Tautulli to have been running beforehand and currently for this to work.
+A website-based platform and API for collecting Plex user stats within a set timeframe using [Tautulli](https://github.com/Tautulli/Tautulli). The data is displayed a stat-summary, sort of like Spotify Wrapped. Yes, you need Tautulli to have been running beforehand and currently for this to work.
+
+![alt text](https://raw.githubusercontent.com/aunefyren/Plex-Wrapped/main/assets/img/example_01.PNG?raw=true)
+
+###Features
+- Custom timeframes
+- Caching of results
+- Friendly, dynamic display for statistics with nice illustrations
+- Email and username search
+- Admin page with authentication for settings
+- Pre-caching of results
+
+![alt text](https://raw.githubusercontent.com/aunefyren/Plex-Wrapped/main/assets/img/example_02.PNG?raw=true)
+
+### Credit
+- Beautiful illustrations downloaded from https://freewebillustrations.com/
+- Amazing statistics gathered using [Tautulli](https://github.com/Tautulli/Tautulli)
+
+![alt text](https://raw.githubusercontent.com/aunefyren/Plex-Wrapped/main/assets/img/example_03.PNG?raw=true)
+
 ## Instructions
 This is a web-based platform. Place it in a webserver like Apache or Nginx and make sure it processes PHP content.
 
-There are multiple settings you must configure! They will be stored in config/config.json, but can be configured easily at <b>you-domain-or-ip.com/admin</b>.
+There are multiple settings you must configure! They will be stored in config/config.json, but can be configured easily at <b>your-domain-or-ip/admin</b>.
 
 PHP will have issues with this API based on the results you want. If you have a large time frame for your wrapped period and there is a huge amount of Tautulli entries you can have multiple issues.
 In your php.ini file you may have to change:
 - max_execution_time=<b>enough seconds for the script to finish</b>
-- memory_limit=<b>enough M for the script to handle JSON data</b>
+- memory_limit=<b>enough memory for the script to handle JSON data</b>
 - max_input_time=<b>enough seconds for the script to parse JSON data</b>
 
-You need to give PHP permission to edit files in the directory called <b>config</b>
+You need to give PHP permission to edit files in the directory called <b>config</b>.
 
-The cache is stored at config/cache.json, but can be cleared using the admin menu.
+The cache is stored at config/cache.json. You can delete the content with a text-editor, but it can also be cleared using the admin menu mentioned earlier.
+
+If you visit <b>your-domain-or-ip/caching</b> you can do a pre-caching for a set of users. This is very useful if you want to prepare for a lot of traffic.
 
-If you visit <b>you-domain-or-ip.com/caching</b> you can do a pre-caching of a set of users. This is very useful if you want to prepare for a lot of traffic.
 
 ## Need help?
 If you have any issues feel free to contact me. I am always trying to improve the project. If I can't, many people on several forums (including /r/plex) might be able to assist you.

assets/css/wrapped.css

@@ -178,7 +178,7 @@ img {
   color: white;
   font-size: 1.25em;
   box-sizing: border-box;
-  max-width: 100%;
+  max-width: 40em;
 }
 
 .stats-list {

get_stats.js

@@ -73,11 +73,11 @@ function load_introduction() {
 
         text += "<div class='boks3'>";
 
-            text += "<div class='boks2'>";
+            text += "<div class='boks2' style='vertical-align: middle;'>";
                 text += '<img src="assets/img/finished-illustration.svg" style="width:100%; ">';
             text += "</div>";
 
-            text += "<div class='boks2'>";
+            text += "<div class='boks2' style='vertical-align: middle;'>";
                 text += "<br>";
                 text += "<h1 style='font-size:3em; display: block;'>Hey there, " + results.user.name + "!</h1>";
                 text += "<br><br><br><br>";
@@ -100,7 +100,7 @@ function load_movies() {
         text += "<div class='boks' style='height: auto !important; width: 100%; padding-bottom: 25em; padding-top: 25em; height:10em; background-color:#B9A3D2;'>";
 
             text += "<div class='boks3'>";
-                text += "<h1>Let's look at some movies.</h1>";
+                text += "<h1>Movies!</h1>";
                 text += "<br><br><br>";
                 text += "<h2>You watched " + results.user.user_movies.data.movies.length + " movies. That's a lot of movies!</h2><p>(or not, I am pre-programmed to say that)</p>"
 
@@ -146,7 +146,7 @@ function load_movies() {
         text += "<div class='boks' style='height: auto !important; width: 100%; padding-bottom: 25em; padding-top: 25em; height:10em; background-color:#B9A3D2;'>";
 
             text += "<div class='boks3'>";
-                text += "<h1>Let's look at some movies.</h1>";
+                text += "<h1>Movies!</h1>";
                 text += "<br><br><br>";
                 text += "<h2>You watched " + results.user.user_movies.data.movies.length + " movie. You know what you like!</h2><p>(at least you tried it out)</p>";
                 text += "<br><br>";
@@ -179,7 +179,7 @@ function load_movies() {
 
             text += "<div class='boks3'>";
                 text += "<div class='status'>";
-                    text += "<h1>Let's look at some movies.</h1>";
+                    text += "<h1>Movies!</h1>";
                     text += "<br><br><br>";
                     text += "<h2>You watched " + results.user.user_movies.data.movies.length + " movies. That's impressive in itself!</h2><p>(might wanna try it out)</p>"
                     text += '<img src="assets/img/bored.svg" style="margin: auto; display: block; width: 15em;">';
@@ -199,7 +199,7 @@ function load_shows() {
         text += "<div class='boks' style='height: auto !important; width: 100%; padding-bottom: 25em; padding-top: 25em; height:10em; background-color:#BBD2A3;'>";
 
             text += "<div class='boks3'>";
-                text += "<h1>Now, let's have a look at some shows!</h1>";
+                text += "<h1>Shows!</h1>";
                 text += "<br><br><br><h2>You watched " + results.user.user_shows.data.shows.length + " different shows.</h2><p>(No, watching The Office twice in a year doesn't count as two shows)</p>"
             text += "</div>";
 
@@ -236,7 +236,7 @@ function load_shows() {
         text += "<div class='boks' style='height: auto !important; width: 100%; padding-bottom: 25em; padding-top: 25em; height:10em; background-color:#BBD2A3;'>";
 
             text += "<div class='boks3'>";
-                text += "<h1>Now, let's have a look at some shows!</h1>";
+                text += "<h1>Shows!</h1>";
                 text += "<br><br><br><h2>You watched " + results.user.user_shows.data.shows.length + " show.</h2><p>(Better not be that same one again...)</p>"
             text += "</div>";
 
@@ -261,7 +261,7 @@ function load_shows() {
 
             text += "<div class='boks3'>";
                 text += "<div class='status'>";
-                    text += "<h1>Now, let's have a look at some shows!</h1>";
+                    text += "<h1>Shows!</h1>";
                     text += "<br><br><br>";
                     text += "<h2>You watched " + results.user.user_shows.data.shows.length + " shows. I get it, it's not for everyone!</h2><p>(might wanna try it out)</p>"
                     text += '<img src="assets/img/bored.svg" style="margin: auto; display: block; width: 15em;">';
@@ -465,7 +465,7 @@ function load_users() {
     var text = "";
 
     text += "<div class='boks' style='height: auto !important; width: 100%; padding-bottom: 25em; padding-top: 25em; height:10em; background-color:	#a2d1d0;'>";
-        text += "<h1>Finally, let's look at the top users, movies and shows!</h1>";
+        text += "<h1>Top contenders!</h1>";
         text += "<br><br><br><br><h2>It's okay to feel shame if you are on the list.</h2><p>(or missing from it...)</p>"
         text += "<br><br>";
 
@@ -525,10 +525,11 @@ function load_outro() {
 
     text += "<div class='boks' style='height: auto !important; width: 100%; padding-bottom: 15em; padding-top: 15em; height:10em; background-color:#39393A;'>";
         text += "<div class='boks3'>";
-            text += "<div class='boks2'>";
+            text += "<div class='boks2' style='vertical-align: middle;'>";
                 text += '<img src="assets/img/new-years.svg" style="width:100%; ">';
             text += "</div>";
-            text += "<div class='boks2' style='margin-top:5em;'>";
+
+            text += "<div class='boks2' style='vertical-align: middle;'>";
                 text += "<h1>Hope you are staying safe!</h1><br><br><h4>Goodybye.</h4>";
             text += "</div>";
         text += "</div>";