Redesign

package.json

@@ -16,7 +16,7 @@
 		"uws": "10.148.1"
 	},
 	"devDependencies": {
-		"eslint": "^5.11.0",
+		"eslint": "^5.11.1",
 		"htmlhint": "^0.10.1"
 	},
 	"scripts": {

src/pages/credits.html

@@ -49,10 +49,10 @@
 			<div>
 				<a class="backlink-anchor" href="/">Back</a>
 			</div>
-			<h1>Contribution credits for the page:</h1>
+			<h1 id="header">Contribution credits for the page:</h1>
 			<ul>
-				<li><a href="http://nyanpass.com/">nyanpass.com</a> for inspiration of this website's base concept</li>
-				<li><a href="https://platelets.fun">platelets.fun</a> for the concept behind <a href="https://megumin.love/fun">megumin.love/fun</a></li>
+				<li><a href="http://nyanpass.com/">nyanpass.com</a> for inspiration of this website's base concept.</li>
+				<li><a href="https://platelets.fun">platelets.fun</a> for the concept behind <a href="https://megumin.love/fun">megumin.love/fun.</a></li>
 				<li><a href="https://github.com/RShadowhand">Shadowhand</a> on <a href="https://github.com">GitHub</a> for tons and tons of advice.</li>
 				<li><a href="https://kitsu.io/users/wopian">wopian</a> on <a href="https://kitsu.io">Kitsu</a> for providing the initial webserver (Thanks man!).</li>
 				<li><a href="https://www.reddit.com/user/Kagumi">Kagumi</a> on <a href="https://www.reddit.com">Reddit</a> for the initial SQL implementation and advice.</li>

src/pages/index.html

@@ -49,7 +49,7 @@
 			<p id="counter">Loading...</p>
 			<button>やめろ!!</button>
 			<div id="versions-social-anchors">
-				<a href="/versions">[ver6.0]</a>
+				<a href="/versions">[ver7.0]</a>
 				<span id="share-buttons-frame">
 					<span class="share-buttons">
 						<a href="https://twitter.com/intent/tweet?text=Megumin%20Fansite%21%20Check%20it%20out%21&amp;url=https%3A%2F%2Fmegumin.love" onclick="window.open(this.href, '', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false; ">
@@ -73,7 +73,7 @@
 				<a href="/statistics">Statistics</a>
 			</div>
 			<div id="survey-frame">
-				<p>Please take 5 minutes to answer this <a href="https://goo.gl/forms/HhLVDpTkIq56Yxjx2">survey on soundclip boat</a> to help me improve the website.</p>
+				<p><a href="https://niu.moe/@robflop/101334496412797125">Survey results</a> now available.</p>
 			</div>
 		</div>
 
@@ -131,6 +131,6 @@ <h2>Be sure to also visit the following Links:</h2>
 		<script src="/js/googleanalytics.min.js" async></script>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.15/howler.core.min.js"></script>
 		<script src="/js/extras.min.js"></script>
-		<script src="/js/index.min.js"></script>
+		<script src="/js/index.js"></script>
 	</body>
 </html>

src/pages/soundboard.html

@@ -52,7 +52,7 @@
 			</div>
 			<a href="/rankings">Rankings</a>
 			<p id="loading">Loading...</p>
-			<p id="survey">Please take 5 minutes to answer this <a href="https://goo.gl/forms/HhLVDpTkIq56Yxjx2">survey on soundclip boat</a> to help me improve the website.</p>
+			<p id="survey"><a href="https://niu.moe/@robflop/101334496412797125">Survey results</a> now available.</p>
 			<div id="soundboard">
 				<!-- Automatically generated -->
 			</div>

src/pages/versions.html

@@ -49,7 +49,7 @@
 			<div>
 				<a class="backlink-anchor" href="/">Back</a>
 			</div>
-			<h1 id="header">Version History</h1>
+			<h1 id="header">Version History:</h1>
 			<div>
 				<h2>Version P1 (Prototype 1) -- 03.05.2016</h2>
 				<ul>
@@ -235,10 +235,36 @@ <h2>Version 6.0 - 12.09.2018</h2>
 				</ul>
 			</div>
 			<hr>
+			<div>
+				<h2>Version 7.0 - 31.12.2018</h2>
+				<ul>
+					<li>Data transfer between server and client optimized to use less data</li>
+					<li>Database update interval adjusted to every 15 minutes</li>
+					<li>Social media icons and links updated</li>
+					<li>Credits overhauled and expanded</li>
+					<li>Admin sound upload/rename/delete functionality reworked</li>
+					<li>API routes (locations, mostly) and documentation reworked to make a lot more sense</li>
+					<li>Chart data for statistics now sent via WebSocket for live updates, as well as giving it consistent scaling</li>
+					<li>"from" argument for statistics api endpoint reworked to fit more into the "from" / "to" wording</li>
+					<li>Remove jQuery and maintenance mode, instead use standard browser javascript</li>
+					<li>Refactor soundboard inner workings and fix some bugs, as well as adding a "Play all" button for every source</li>
+					<li>Update dependencies and manifest file the site uses</li>
+					<li>Add many different seasonal backgrounds (check the sidebar dropdown)</li>
+					<li>Adjust main counter to fit 9,99 billion (as it surpassed prev. 99,99 million limit)</li>
+					<li>Rewrite versions page into lists (like this one)</li>
+					<li>Improve responsiveness (mobile layout)</li>
+					<li>SEO optimization (robots.txt, sitemap, canonical links, etc)</li>
+					<li>Adjust content of sidebar (links, mostly)</li>
+					<li>General code refactorization, including dropping ogg audio format and only carrying mp3</li>
+					<li>Make <a href="https://megumin.love/fun">megumin.love/fun</a> out of boredom (try pressing on it)</li>
+					<li>Add possibility of having different versions of the same seasonal background</li>
+					<li>Adjust color scheme and redesign buttons website-wide (based on survey results)</li>
+				</ul>
+			</div>
+			<hr>
 			<div id="backlink-bottom">
 				<a class="backlink-anchor" href="/">Back</a>
 			</div>
-			<hr>
 		</div>
 
 		<div class="megu-sidebar">

src/resources/css/admin_style.css

@@ -58,7 +58,7 @@ label[for="bg-select"], select[id="bg-select"] {
 #upload-res, #delete-res, #rename-res {
 	display: none;
 	font-size: 16px;
-	color: #dd0000;
+	color: #ef9a9a;
 }
 
 #delete-confirm-wrapper label {

src/resources/css/credits_style.css

@@ -1,7 +1,3 @@
-h1 {
-	text-decoration: underline;
-}
-
 li {
 	margin-top: 10px;
 }

src/resources/css/error_style.css

@@ -17,7 +17,7 @@ a {
 }
 
 .big-red {
-	color: #dd0000;
+	color: #d50000;
 	font-size: 72px;
 	text-align: center;
 }

src/resources/css/index_style.css

@@ -5,7 +5,7 @@ button {
 }
 
 a[href="/versions"], a[href="/soundboard"], [href="/statistics"] {
-	color: #dd0000;
+	color: #d50000;
 }
 
 a[href="/versions"] {
@@ -39,7 +39,7 @@ a[href="/statistics"] {
 	position: relative;
 	text-align: center;
 	font-size: 50px;
-	color: #dd0000;
+	color: #d50000;
 	margin: auto;
 	text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
 }
@@ -64,18 +64,10 @@ a[href="/statistics"] {
 }
 
 #survey-frame p, #survey-frame a {
-	color: #ff8080;
+	color: #ef9a9a;
 	margin: 0;
 }
 
-/* Doesn't count while survey is up, but usually: Only 360px needs adjustment, since container is 360px wide */
-
-@media only screen and (max-width: 960px) {
-	footer {
-		bottom: -35px;
-	}
-}
-
 @media only screen and (max-width: 360px) {
 	a[href="/soundboard"] {
 		margin-left: 30px;

src/resources/css/login_style.css

@@ -16,7 +16,7 @@ form, #login-res {
 #login-res {
 	display: none;
 	font-size: 16px;
-	color: #dd0000;
+	color: #ef9a9a;
 }
 
 /* No media queries needed as container is only 320px wide */

src/resources/css/soundboard_style.css

@@ -1,5 +1,5 @@
 a[href="/rankings"] {
-	color: #dd0000;
+	color: #d50000;
 	text-align: center;
 	display: block;
 	font-size: 30px;
@@ -31,10 +31,9 @@ footer {
 
 .playall {
 	display: block;
-	margin: 5px auto;
+	margin: 10px auto;
 	width: 10%;
 	font-size: 15px;
-	box-shadow: none;
 }
 
 #container {
@@ -51,7 +50,7 @@ footer {
 }
 
 #survey, #survey a {
-	color: #ff8080;
+	color: #ef9a9a;
 	text-align: center;
 	font-size: 20px;
 }

src/resources/css/style_template.css

@@ -19,19 +19,21 @@ body {
 }
 
 button, .playall {
-	background-color: #dd0000;
-	color: #ff8080;
-	border-radius: 20px;
+	background-color: #b71c1c;
+	color: #ef9a9a;
+	border: 0;
+	border-radius: 10px;
 	cursor: pointer;
-	box-shadow: -3px 1px 40px 14px rgba(51,38,51,0.6);
+	box-shadow: 0 10px 30px rgba(0,0,0,.1), 0 1px 8px rgba(0,0,0,.2);
 }
 
 button:focus, .playall:focus {
 	outline: 0;
 }
 
 button:hover, .playall:hover {
-	background-color: #ff3338;
+	background-color: #d50000;
+	transform: translate3d(0, -3px, 0);
 }
 
 form p {
@@ -139,15 +141,14 @@ footer p, footer a {
 .titles {
 	margin: 0 auto;
 	text-align: center;
-	background-color: #dd0000;
-	color: #ff8080;
-	border-radius: 15px;
-	width: 65%;
-	box-shadow: -3px 1px 40px 14px rgba(51,38,51,0.8);
+	color: #ef9a9a;
+	border-bottom: solid;
+	border-radius: 25px;
+	width: 50%;
 }
 
 .backlink-anchor {
-	color: #dd0000;
+	color: #d50000;
 }
 
 .megu-sidebar {
@@ -242,12 +243,14 @@ footer p, footer a {
 	border-radius: 20px;
 	font-size: 48px;
 	text-align: center;
-	box-shadow: -3px 1px 40px 14px rgba(51,38,51,0.6);
+	width: 50%;
+	margin: 0 auto;
+	margin-top: 10px;
 }
 
 #loading {
-	background-color: #dd0000;
-	color: #ff8080;
+	background-color: #b71c1c;
+	color: #ef9a9a;
 }
  #warning { /* Created on main page / soundboard when no sounds are available */
 	background-color: #606060;
@@ -266,8 +269,8 @@ footer p, footer a {
 #notification {
 	display: inline-block;
 	text-align: left;
-	background-color: #dd0000;
-	color: #ff8080;
+	background-color: #b71c1c;
+	color: #ef9a9a;
 	font-size: 30px;
 	max-width: 1400px;
 	padding: 5px;
@@ -285,11 +288,12 @@ footer p, footer a {
 
 #crazymode-warning {
 	font-style: italic;
-	color: #dd0000;
+	color: #d50000;
 }
 
 #backlink-bottom {
 	text-align: right;
+	margin-top: 10px;
 }
 
 @media only screen and (max-width: 1366px) {