From dfd3095ef327eae589470d0bc08d2c789de8133e Mon Sep 17 00:00:00 2001 From: tersiswilvin <52929976+tersiswilvin@users.noreply.github.com> Date: Sat, 19 Nov 2022 09:54:38 -0800 Subject: [PATCH] Banner HTML Swap + String changes. Swaps the old banner with the new one, changed a few strings around the site. --- public/css/2018.css | 39 ++++++++++++++++++++++-- public/css/AdminPanelCSS.css | 5 +++ public/css/app.css | 38 ++++++++++++++++++----- public/css/classicapp.css | 36 ++++++++++++++++++++++ public/css/classicappdark.css | 36 ++++++++++++++++++++++ public/js/detect.js | 22 ++++++------- public/js/detect_iphone.js | 6 ++-- public/js/detect_small.js | 6 ++-- resources/views/pages/avatar.blade.php | 2 +- resources/views/pages/catalog.blade.php | 2 +- resources/views/pages/gamepage.blade.php | 2 +- 11 files changed, 160 insertions(+), 34 deletions(-) diff --git a/public/css/2018.css b/public/css/2018.css index b5c6c5e..50dc487 100644 --- a/public/css/2018.css +++ b/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; } diff --git a/public/css/AdminPanelCSS.css b/public/css/AdminPanelCSS.css index adaec1b..c8fefe7 100644 --- a/public/css/AdminPanelCSS.css +++ b/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; } diff --git a/public/css/app.css b/public/css/app.css index cf75cd7..0d2527f 100644 --- a/public/css/app.css +++ b/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 { - position: relative; - width: 100%; -} -.alert-system .alert { +.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; } diff --git a/public/css/classicapp.css b/public/css/classicapp.css index 7bbe125..c835484 100644 --- a/public/css/classicapp.css +++ b/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; diff --git a/public/css/classicappdark.css b/public/css/classicappdark.css index 2ff43a9..d4636f5 100644 --- a/public/css/classicappdark.css +++ b/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; diff --git a/public/js/detect.js b/public/js/detect.js index b312f16..9e85d66 100644 --- a/public/js/detect.js +++ b/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("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 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("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"); - alertDiv.innerHTML = "You are on an unsupported version of the site. Please go to archblox.com instead."; - alertDiv.setAttribute("id","alert"); - document.body.appendChild(alertDiv); + let alertsystemdiv = document.createElement("div"); + alertsystemdiv.innerHTML = "You are on an unsupported version of the site. Please go to archblox.com instead."; + alertsystemdiv.setAttribute("class","alert warning visible"); + document.body.appendChild(alertsystemdiv); } function addDatabaseBackupRestoreWarning() { - let alertDiv = 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!)"; - alertDiv.setAttribute("id","alert"); - document.body.appendChild(alertDiv); + let alertsystemdiv = document.createElement("div"); + alertsystemdiv.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.setAttribute("class","alert-system"); + document.body.appendChild(alertsystemdiv); } if (window.document.location.hostname == "archblox.com") { diff --git a/public/js/detect_iphone.js b/public/js/detect_iphone.js index 8e82a54..145d52d 100644 --- a/public/js/detect_iphone.js +++ b/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("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 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("Be safe, and be smart."); console.log(" "); console.log("If you know what you're doing, go ahead!"); diff --git a/public/js/detect_small.js b/public/js/detect_small.js index a388dd6..ccc9997 100644 --- a/public/js/detect_small.js +++ b/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("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 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("Be safe, and be smart."); console.log(" "); console.log("If you know what you're doing, have fun then!"); diff --git a/resources/views/pages/avatar.blade.php b/resources/views/pages/avatar.blade.php index af086cf..bd916b6 100644 --- a/resources/views/pages/avatar.blade.php +++ b/resources/views/pages/avatar.blade.php @@ -10,7 +10,7 @@ @endsection @section('alert') -
Avatar Editor is currently work in progress.
+
Avatar Editor is currently work in progress.
@endsection @section('content') diff --git a/resources/views/pages/catalog.blade.php b/resources/views/pages/catalog.blade.php index bb68893..1282f26 100644 --- a/resources/views/pages/catalog.blade.php +++ b/resources/views/pages/catalog.blade.php @@ -10,7 +10,7 @@ @endsection @section('alert') -
The catalog is currently work in progress.
+
The catalog is currently work in progress.
@endsection @section('content') diff --git a/resources/views/pages/gamepage.blade.php b/resources/views/pages/gamepage.blade.php index a482d4e..11cf9ac 100644 --- a/resources/views/pages/gamepage.blade.php +++ b/resources/views/pages/gamepage.blade.php @@ -10,7 +10,7 @@ @endsection @section('alert') -
Note that this page does not support joining yet. If you would like to play your own game that you are currently hosting, click here.
+
Note that this page does not support joining yet. If you would like to play your own game that you are currently hosting, click here. instead.
@endsection @section('content')