Banner HTML Swap + String changes.

Swaps the old banner with the new one, changed a few strings around the site.

public/css/2018.css

@@ -23,13 +23,13 @@ html, .loggedout {
 .arkoticon_small {
 	margin: 0px;
 	width: 30px;
-	content: url("http://archblox.com/img/ark2018nbd.png");
+	content: url("/img/ark2018nbd.png");
 }
 
 .arkoticon_navbar {
 	margin: 0px;
 	margin-top: -5px;
-	content: url("http://archblox.com/img/ark2018.png");
+	content: url("/img/ark2018.png");
 	margin-right: 3px;
 	width: 30px;
 }
@@ -96,6 +96,40 @@ body {
 	height: 28px;
 }
 
+.success {
+	background: #02b757;
+	max-width: 970px;
+}
+.loading {
+	background: #b8b8b8;
+	max-width: 970px;
+}
+.warning {
+	background: #d86868;
+	max-width: 970px;
+}
+.alert {
+	-webkit-transition: all .4s ease;
+	-o-transition: all .4s ease;
+	transition: all .4s ease;
+	top: -40px;
+	border-radius: 0;
+	padding: 15px;
+}
+.loggedout .alert,
+.no-navigation .alert {
+	top: -60px;
+}
+.loggedout .alert.visible,
+.no-navigation .alert.visible {
+	top: 0;
+}
+.alert.visible {
+	top: 40px;
+}
+
+/*/ Legacy Alert CSS (For pages that require the old deprecated banner css.) /*/
+
 #alert,
 #success {
     border: 0;
@@ -105,7 +139,6 @@ body {
     font-size: 20px;
     line-height: 1em;
 }
-
 #alert {
 	background: #D86868;
 }

public/css/AdminPanelCSS.css

@@ -2,7 +2,12 @@
 Includes -> Fallback Theme (Color Theme) -> Light Theme -> Dark Theme.
 /*/
 
+::selection {
+  background-color: #75757580;
+}
+
 body {
+  background: #e3e3e3;
   min-width: 0px;
   font-family: Arial,Helvetica,sans-serif;
 }

public/css/app.css

@@ -48,6 +48,10 @@
   src: url('HelveticaNeue-Italic.ttf');
 }
 
+:focus-visible {
+  outline: 0 !important;
+}
+
 .catalogitem,
 .catalogitemimage {
   width: 126px;
@@ -94,6 +98,15 @@
 
 .success {
   background: #2cdc00;
+  background: linear-gradient(0deg, #1f9d00, #2cdc00);
+  text-align: center;
+  color: #fff;
+  width: 100%;
+  max-width: 980px;
+}
+.loading {
+  background: #9e9e9e;
+  background: linear-gradient(0deg, #636363, #9e9e9e);
   text-align: center;
   color: #fff;
   width: 100%;
@@ -101,16 +114,13 @@
 }
 .warning {
   background: #e23c3c;
+  background: linear-gradient(0deg, #8f2323, #e23c3c);
   text-align: center;
   color: #fff;
   width: 100%;
   max-width: 980px;
 }
-.alert-system {
+.alert {
-  position: relative;
-  width: 100%;
-}
-.alert-system .alert {
   -webkit-transition: all .4s ease;
   -o-transition: all .4s ease;
   transition: all .4s ease;
@@ -123,15 +133,25 @@
   margin: auto;
   left: 0;
   right: 0;
+  z-index: 1;
 }
-.loggedout .alert-system .alert.visible, .no-navigation .alert-system .alert.visible {
+.alert.ontop {
+  z-index: 2
+}
+.alert.important {
+  z-index: 10;
+}
+.loggedout .alert, .no-navigation .alert {
+  top: -60px;
+}
+.loggedout .alert.visible, .no-navigation .alert.visible {
   top: 0;
 }
-.alert-system .alert.visible {
+.alert.visible {
   top: 60px;
 }
 
-/*/ Legacy Alert System /*/
+/*/ Legacy Alert CSS (For pages that require the old deprecated banner css.) /*/
 
 .loggedout #alert {
   animation: alertanim_loggedout !important;
@@ -168,6 +188,8 @@
   color: #fff;
 }
 
+/*/ END /*/
+
 .warningtext {
   color: red;
 }

public/css/classicapp.css

@@ -39,6 +39,42 @@ body {
   background: transparent;
 }
 
+.success {
+  background: #02b757;
+  background: linear-gradient(#a3e2bd 10%, #02b757 100%);
+  max-width: 100%;
+}
+.loading {
+  background: #808080;
+  background: linear-gradient(0deg, #3d3d3d, #808080);
+  max-width: 100%;
+}
+.warning {
+  background: #de2323;
+  background: linear-gradient(#f07575 10%, #de2323 100%);
+  max-width: 100%;
+}
+.alert {
+  -webkit-transition: all 0s ease;
+  -o-transition: all 0s ease;
+  transition: all 0s ease;
+  height: fit-content;
+  margin: 0px;
+  animation: alertanim;
+  animation-duration: 250ms;
+  animation-iteration-count: 1;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-right: 5px;
+  padding-left: 5px;
+  border-radius: 0;
+}
+.alert.visible {
+  top: 72px;
+}
+
+/*/ Legacy Alert CSS (For pages that require the old deprecated banner css.) /*/
+
 #alert,
 #success {
   height: fit-content;

public/css/classicappdark.css

@@ -45,6 +45,42 @@ body {
   margin: auto;
 }
 
+.success {
+  background: #02b757;
+  background: linear-gradient(#a3e2bd 10%, #02b757 100%);
+  max-width: 100%;
+}
+.loading {
+  background: #808080;
+  background: linear-gradient(0deg, #3d3d3d, #808080);
+  max-width: 100%;
+}
+.warning {
+  background: #de2323;
+  background: linear-gradient(#f07575 10%, #de2323 100%);
+  max-width: 100%;
+}
+.alert {
+  -webkit-transition: all 0s ease;
+  -o-transition: all 0s ease;
+  transition: all 0s ease;
+  height: fit-content;
+  margin: 0px;
+  animation: alertanim;
+  animation-duration: 250ms;
+  animation-iteration-count: 1;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-right: 5px;
+  padding-left: 5px;
+  border-radius: 0;
+}
+.alert.visible {
+  top: 72px;
+}
+
+/*/ Legacy Alert CSS (For pages that require the old deprecated banner css.) /*/
+
 #alert, 
 #success {
   height: fit-content;

public/js/detect.js

@@ -1,10 +1,8 @@
 // warning
 
-console.log("Woah there!");
+console.log("Stop!");
 console.log(" ");
-console.log("Be careful what you type or copy in this here javascript console.");
+console.log("Be cautious of what you entering/pasting in here, as it can be an account token stealer, which can get that person access to your account.");
-console.log("Don't copy and paste some javascript code from a random person on the internet.");
-console.log("It can be an account token stealer, which can get that random person into your account.");
 console.log("Be safe, and be smart.");
 console.log(" ");
 console.log("If you know what you're doing, have fun then!");
@@ -13,17 +11,17 @@ console.log(" ");
 // Detect if user is on an older domain that isn't recommended.
 
 function addWarning() {
-    let alertDiv = document.createElement("div");
+    let alertsystemdiv = document.createElement("div");
-    alertDiv.innerHTML = "You are on an unsupported version of the site. Please go to <a href='https://archblox.com'>archblox.com</a> instead.";
+    alertsystemdiv.innerHTML = "You are on an unsupported version of the site. Please go to <a href='https://archblox.com'>archblox.com</a> instead.";
-    alertDiv.setAttribute("id","alert");
+    alertsystemdiv.setAttribute("class","alert warning visible");
-    document.body.appendChild(alertDiv);
+    document.body.appendChild(alertsystemdiv);
 }
 
 function addDatabaseBackupRestoreWarning() {
-    let alertDiv = document.createElement("div");
+    let alertsystemdiv = document.createElement("div");
-    alertDiv.innerHTML = "Thanks for playing! We'll be back as soon as I can get a new VPS. (Please don't change settings, message or post anything!)";
+    alertsystemdiv.innerHTML = "<div class='alert loading visible'>Thanks for playing! We'll be back as soon as I can get a new VPS. (Please don't change settings, message or post anything!)</div>";
-    alertDiv.setAttribute("id","alert");
+    alertsystemdiv.setAttribute("class","alert-system");
-    document.body.appendChild(alertDiv);
+    document.body.appendChild(alertsystemdiv);
 }
 
 if (window.document.location.hostname == "archblox.com") {

public/js/detect_iphone.js

@@ -1,9 +1,7 @@
 // warning
-console.log("Woah there, admin!");
+console.log("Stop, admin!");
 console.log(" ");
-console.log("Be careful what you type or copy in this here javascript console.");
+console.log("Be cautious of what you entering/pasting in here, as it can be an account token stealer, which can get that person access to your account and the entire admin paanel.");
-console.log("Don't copy and paste some javascript code from a random person on the internet, especially if it's not from a developer you trust.");
-console.log("It can be an account token stealer, which can get that random person into your account... and access to the entire admin panel.");
 console.log("Be safe, and be smart.");
 console.log(" ");
 console.log("If you know what you're doing, go ahead!");

public/js/detect_small.js

@@ -1,9 +1,7 @@
 // warning
-console.log("Woah there!");
+console.log("Stop!");
 console.log(" ");
-console.log("Be careful what you type or copy in this here javascript console.");
+console.log("Be cautious of what you entering/pasting in here, as it can be an account token stealer, which can get that person access to your account.");
-console.log("Don't copy and paste some javascript code from a random person on the internet.");
-console.log("It can be an account token stealer, which can get that random person into your account.");
 console.log("Be safe, and be smart.");
 console.log(" ");
 console.log("If you know what you're doing, have fun then!");

resources/views/pages/avatar.blade.php

@@ -10,7 +10,7 @@
 @endsection
 
 @section('alert')
-    <div id="alert">Avatar Editor is currently work in progress.</div>
+    <div class="alert warning visible ontop">Avatar Editor is currently work in progress.</div>
 @endsection
 
 @section('content')

resources/views/pages/catalog.blade.php

@@ -10,7 +10,7 @@
     @endsection
 
     @section('alert')
-    <div id="alert">The catalog is currently work in progress.</div>
+    <div class="alert warning visible ontop">The catalog is currently work in progress.</div>
 @endsection
 
     @section('content')

resources/views/pages/gamepage.blade.php

@@ -10,7 +10,7 @@
 @endsection
 
 @section('alert')
-<div id="alert">Note that this page does not support joining yet. If you would like to play your own game that you are currently hosting, <a style="cursor: pointer;" onclick="openClientPopup('localhost','53640',null,'join')">click here</a>.</div>
+<div class="alert warning visible ontop">Note that this page does not support joining yet. If you would like to play your own game that you are currently hosting, <a style="cursor: pointer;" onclick="openClientPopup('localhost','53640',null,'join')">click here</a>.</a> instead.</div>
 @endsection
 
 @section('content')