From de6e1deb9ad02a7bd0d3e3c4769186097ba0509f Mon Sep 17 00:00:00 2001 From: Thomas G <62822072+Thomasluigi07@users.noreply.github.com> Date: Fri, 21 Apr 2023 06:12:38 +1000 Subject: [PATCH] Add new font, custom audio player, --- .DS_Store | Bin 10244 -> 10244 bytes maintenance/{ => audio}/buttonhell.mp3 | Bin maintenance/buttonhell.html | 23 ++- maintenance/css/app.css | 67 ++++++-- maintenance/css/appdark.css | 1 + public/{ => audio}/buttonhell.mp3 | Bin public/css/app.css | 67 ++++++-- public/css/appdark.css | 1 + public/css/smartbanner.css | 207 +++++++++++++++++++++++++ public/js/darkmode.js | 4 +- public/js/detect.js | 52 ++++++- 11 files changed, 389 insertions(+), 33 deletions(-) rename maintenance/{ => audio}/buttonhell.mp3 (100%) rename public/{ => audio}/buttonhell.mp3 (100%) create mode 100644 public/css/smartbanner.css diff --git a/.DS_Store b/.DS_Store index ae4f0e084d87839fc41342d7a6e06407f5c01cfa..ae62e27d9a40826fc123ca7278fcf101eec6da30 100644 GIT binary patch delta 1037 zcmZn(XbG6$&uFkQU^hRb!Db!-UlzvglMTcQ)x@i-jV&y66ih5@brh;C%*}yJ3xnEP zP7YCJee0n3?3~=Z{LaZI#N-*fCjS$bs?SU=D@e-8PhwzTJd{+BlUZD1U~peRfRTxr zg_Vt+gOiJ!hnJ6EKu}0nP()BrP*hA@P(nybI$l6HDKR-ay(qslFU2`OC%?!kr!+NQ zfWJ5+zuYr9KQEvtwJbBWJfbAEq9i!83MeInrXeUbB`&ERZb(RF0Z@?$nj-h2)YQD_ z^rFlZ|FpE?)RG7!b|lEU*loN+U|!Y>vButton Hell - ARCHBLOX - + @@ -29,6 +29,12 @@ } + @@ -41,9 +47,16 @@

Button Hell

Can you find the Jim button? If you cheat, you SUCK!!!


-

Please play this audio for the best experience:

-
- + +
+ + + + + + + +


@@ -67,7 +80,7 @@ - + diff --git a/maintenance/css/app.css b/maintenance/css/app.css index abbee36..1f31ad5 100644 --- a/maintenance/css/app.css +++ b/maintenance/css/app.css @@ -325,7 +325,7 @@ position: relative; height: 36px; z-index: 200; - font-family: Arial, 'Helvetica Neue', Helvetica, Sans-Serif; + font-family: Arial, 'Lucida Grande', 'Helvetica Neue', Helvetica, Sans-Serif; } .BannerCenterContainer { @@ -379,7 +379,7 @@ div.mySubmenuFixed { background: #A3514F; background-repeat: repeat-x; color: White; - font-family: Arial, 'Helvetica Neue', Helvetica, Sans-Serif; + font-family: Arial, 'Lucida Grande', 'Helvetica Neue', Helvetica, Sans-Serif; font-size: 14px; height: 26px; position: relative; @@ -434,7 +434,7 @@ div.mySubmenuFixed { } #HeaderSignUp { - font-family: Arial, 'Helvetica Neue', Helvetica, Sans-Serif; + font-family: Arial, 'Lucida Grande', 'Helvetica Neue', Helvetica, Sans-Serif; font-weight: bold; color: #fff; font-size: 13px; @@ -444,7 +444,7 @@ div.mySubmenuFixed { } #HeaderOr { - font-family: Arial, 'Helvetica Neue', Helvetica, Sans-Serif; + font-family: Arial, 'Lucida Grande', 'Helvetica Neue', Helvetica, Sans-Serif; font-weight: normal; color: #9Ec3E7; font-size: 13px; @@ -483,7 +483,7 @@ div.mySubmenuFixed { padding: 0; text-decoration: none; outline: none; - font-family: Arial, 'Helvetica Neue', Helvetica, Sans-Serif; + font-family: Arial, 'Lucida Grande', 'Helvetica Neue', Helvetica, Sans-Serif; text-shadow: #11111191 1px 1px 1px; } @@ -688,7 +688,7 @@ iframe { text-decoration: none; font-weight: 800; outline: none; - font-family: Arial, 'Helvetica Neue', Helvetica, Sans-Serif; + font-family: Arial, 'Lucida Grande', 'Helvetica Neue', Helvetica, Sans-Serif; } .smallnavbarbutton { @@ -711,7 +711,7 @@ iframe { html { margin: 0px; - font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif; + font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, Sans-Serif; font-style: normal; height: 100%; } @@ -868,7 +868,7 @@ body { height: 20px; border-radius: 1px; border: 1px solid #3D414A; - font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif; + font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, Sans-Serif; padding-left: 5px; padding-right: 5px; color: rgb(0, 0, 0) !important; @@ -882,7 +882,7 @@ body { height: 20px; border-radius: 1px; border: 1px solid #3D414A; - font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif; + font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, Sans-Serif; padding-left: 5px; padding-right: 5px; color: #fff !important; @@ -897,7 +897,7 @@ button { height: 20px; border-radius: 3px; border: 1px solid #3D414A; - font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif; + font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, Sans-Serif; color: #fff; } @@ -1198,4 +1198,51 @@ div#testingSitePanelWrapper, .warning { max-width: 100%; } +} + + +/* Music Player */ + +.musicplayer { + background: rgb(29, 29, 29); + color: white; + background: linear-gradient(0deg, rgba(41, 41, 41, 0.5), rgba(162, 162, 162, 0.48) 47.48%, rgba(123, 123, 123, 0.48) 49.58%, rgba(71, 71, 71, 0.47) 94.96%, rgba(157, 157, 157, 0.52)); + height: 42px; + border-style: solid; + border-radius: 5px; + border-width: 1px; + border-color: rgba(84, 84, 84, 0.792); +} + +.musicplayer button { + width: 30%; + height: 20px; + background: none; + color: white; + border-style: none; + border-radius: 0px; + border-left-style: solid; + border-color: rgba(84, 84, 84, 0.792); + border-left-width: 1px; +} + +.musicplayer .dlbtn { + width: 19%; +} + +.musicplayer .volup, .musicplayer .voldn { + width: 17%; +} + +.musicplayer .ignoreresize { + width: 79%; + height: 18px; + background: none; + color: white; + border-style: none; + border-radius: 0px; +} + +.musicplayer .playbtn { + border-left-width: 0px; } \ No newline at end of file diff --git a/maintenance/css/appdark.css b/maintenance/css/appdark.css index 0f6c3c0..09b2057 100644 --- a/maintenance/css/appdark.css +++ b/maintenance/css/appdark.css @@ -76,6 +76,7 @@ body { .content_signup { color: rgb(167, 167, 167); background-color: rgba(0,0,0,0.5); + border-color: black; background: rgba(0,0,0,0.5) } diff --git a/public/buttonhell.mp3 b/public/audio/buttonhell.mp3 similarity index 100% rename from public/buttonhell.mp3 rename to public/audio/buttonhell.mp3 diff --git a/public/css/app.css b/public/css/app.css index abbee36..1f31ad5 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -325,7 +325,7 @@ position: relative; height: 36px; z-index: 200; - font-family: Arial, 'Helvetica Neue', Helvetica, Sans-Serif; + font-family: Arial, 'Lucida Grande', 'Helvetica Neue', Helvetica, Sans-Serif; } .BannerCenterContainer { @@ -379,7 +379,7 @@ div.mySubmenuFixed { background: #A3514F; background-repeat: repeat-x; color: White; - font-family: Arial, 'Helvetica Neue', Helvetica, Sans-Serif; + font-family: Arial, 'Lucida Grande', 'Helvetica Neue', Helvetica, Sans-Serif; font-size: 14px; height: 26px; position: relative; @@ -434,7 +434,7 @@ div.mySubmenuFixed { } #HeaderSignUp { - font-family: Arial, 'Helvetica Neue', Helvetica, Sans-Serif; + font-family: Arial, 'Lucida Grande', 'Helvetica Neue', Helvetica, Sans-Serif; font-weight: bold; color: #fff; font-size: 13px; @@ -444,7 +444,7 @@ div.mySubmenuFixed { } #HeaderOr { - font-family: Arial, 'Helvetica Neue', Helvetica, Sans-Serif; + font-family: Arial, 'Lucida Grande', 'Helvetica Neue', Helvetica, Sans-Serif; font-weight: normal; color: #9Ec3E7; font-size: 13px; @@ -483,7 +483,7 @@ div.mySubmenuFixed { padding: 0; text-decoration: none; outline: none; - font-family: Arial, 'Helvetica Neue', Helvetica, Sans-Serif; + font-family: Arial, 'Lucida Grande', 'Helvetica Neue', Helvetica, Sans-Serif; text-shadow: #11111191 1px 1px 1px; } @@ -688,7 +688,7 @@ iframe { text-decoration: none; font-weight: 800; outline: none; - font-family: Arial, 'Helvetica Neue', Helvetica, Sans-Serif; + font-family: Arial, 'Lucida Grande', 'Helvetica Neue', Helvetica, Sans-Serif; } .smallnavbarbutton { @@ -711,7 +711,7 @@ iframe { html { margin: 0px; - font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif; + font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, Sans-Serif; font-style: normal; height: 100%; } @@ -868,7 +868,7 @@ body { height: 20px; border-radius: 1px; border: 1px solid #3D414A; - font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif; + font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, Sans-Serif; padding-left: 5px; padding-right: 5px; color: rgb(0, 0, 0) !important; @@ -882,7 +882,7 @@ body { height: 20px; border-radius: 1px; border: 1px solid #3D414A; - font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif; + font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, Sans-Serif; padding-left: 5px; padding-right: 5px; color: #fff !important; @@ -897,7 +897,7 @@ button { height: 20px; border-radius: 3px; border: 1px solid #3D414A; - font-family: 'Helvetica Neue', Helvetica, Arial, Sans-Serif; + font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, Sans-Serif; color: #fff; } @@ -1198,4 +1198,51 @@ div#testingSitePanelWrapper, .warning { max-width: 100%; } +} + + +/* Music Player */ + +.musicplayer { + background: rgb(29, 29, 29); + color: white; + background: linear-gradient(0deg, rgba(41, 41, 41, 0.5), rgba(162, 162, 162, 0.48) 47.48%, rgba(123, 123, 123, 0.48) 49.58%, rgba(71, 71, 71, 0.47) 94.96%, rgba(157, 157, 157, 0.52)); + height: 42px; + border-style: solid; + border-radius: 5px; + border-width: 1px; + border-color: rgba(84, 84, 84, 0.792); +} + +.musicplayer button { + width: 30%; + height: 20px; + background: none; + color: white; + border-style: none; + border-radius: 0px; + border-left-style: solid; + border-color: rgba(84, 84, 84, 0.792); + border-left-width: 1px; +} + +.musicplayer .dlbtn { + width: 19%; +} + +.musicplayer .volup, .musicplayer .voldn { + width: 17%; +} + +.musicplayer .ignoreresize { + width: 79%; + height: 18px; + background: none; + color: white; + border-style: none; + border-radius: 0px; +} + +.musicplayer .playbtn { + border-left-width: 0px; } \ No newline at end of file diff --git a/public/css/appdark.css b/public/css/appdark.css index 0f6c3c0..09b2057 100644 --- a/public/css/appdark.css +++ b/public/css/appdark.css @@ -76,6 +76,7 @@ body { .content_signup { color: rgb(167, 167, 167); background-color: rgba(0,0,0,0.5); + border-color: black; background: rgba(0,0,0,0.5) } diff --git a/public/css/smartbanner.css b/public/css/smartbanner.css new file mode 100644 index 0000000..447a2bb --- /dev/null +++ b/public/css/smartbanner.css @@ -0,0 +1,207 @@ +#smartbanner { + position: absolute; + left: 0; + top: -82px; + border-bottom: 1px solid #e8e8e8; + width: 100%; + height: 78px; + font-family: 'Helvetica Neue', sans-serif; + background: -webkit-linear-gradient(top, #f4f4f4 0%, #cdcdcd 100%); + background-image: -ms-linear-gradient(top, #F4F4F4 0%, #CDCDCD 100%); + background-image: -moz-linear-gradient(top, #F4F4F4 0%, #CDCDCD 100%); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); + z-index: 9998; + -webkit-font-smoothing: antialiased; + overflow: hidden; + -webkit-text-size-adjust: none; +} + +#smartbanner, +html.sb-animation { + -webkit-transition: all .3s ease; +} + +#smartbanner .sb-container { + margin: 0 auto; +} + +#smartbanner .sb-close { + position: absolute; + left: 5px; + top: 5px; + display: block; + border: 2px solid #fff; + width: 14px; + height: 14px; + font-family: 'ArialRoundedMTBold', Arial; + font-size: 15px; + line-height: 15px; + text-align: center; + color: #fff; + background: #070707; + text-decoration: none; + text-shadow: none; + border-radius: 14px; + box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4); + -webkit-font-smoothing: subpixel-antialiased; +} + +#smartbanner .sb-close:active { + font-size: 13px; + color: #aaa; +} + +#smartbanner .sb-icon { + position: absolute; + left: 30px; + top: 10px; + display: block; + width: 57px; + height: 57px; + background: rgba(0, 0, 0, 0.6); + background-size: cover; + border-radius: 10px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); +} + +#smartbanner.no-icon .sb-icon { + display: none; +} + +#smartbanner .sb-info { + position: absolute; + left: 98px; + top: 18px; + width: 44%; + font-size: 11px; + line-height: 1.2em; + font-weight: bold; + color: #6a6a6a; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); +} + +#smartbanner #smartbanner.no-icon .sb-info { + left: 34px; +} + +#smartbanner .sb-info strong { + display: block; + font-size: 13px; + color: #4d4d4d; + line-height: 18px; +} + +#smartbanner .sb-info>span { + display: block; +} + +#smartbanner .sb-info em { + font-style: normal; + text-transform: uppercase; +} + +#smartbanner .sb-button { + position: absolute; + right: 20px; + top: 24px; + border: 1px solid #bfbfbf; + padding: 0 10px; + min-width: 10%; + height: 24px; + font-size: 14px; + line-height: 24px; + text-align: center; + font-weight: bold; + color: #6a6a6a; + background: -webkit-linear-gradient(top, #efefef 0%, #dcdcdc 100%); + text-transform: uppercase; + text-decoration: none; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); + border-radius: 3px; + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 0 rgba(255, 255, 255, 0.7) inset; +} + +#smartbanner .sb-button:active, +#smartbanner .sb-button:hover { + background: -webkit-linear-gradient(top, #dcdcdc 0%, #efefef 100%); +} + +#smartbanner .sb-icon.gloss:after { + content: ''; + position: absolute; + left: 0; + top: -1px; + border-top: 1px solid rgba(255, 255, 255, 0.8); + width: 100%; + height: 50%; + background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.2) 100%); + border-radius: 10px 10px 12px 12px; +} + +#smartbanner.android { + border-color: #212228; + background: #3d3d3d url('data:image/gif;base64,R0lGODlhCAAIAIABAFVVVf///yH5BAEHAAEALAAAAAAIAAgAAAINRG4XudroGJBRsYcxKAA7'); + border-top: 5px solid #88B131; + box-shadow: none; +} + +#smartbanner.android .sb-close { + border: 0; + width: 17px; + height: 17px; + line-height: 17px; + color: #b1b1b3; + background: #1c1e21; + text-shadow: 0 1px 1px #000; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) inset, 0 1px 1px rgba(255, 255, 255, 0.3); +} + +#smartbanner.android .sb-close:active { + color: #eee; +} + +#smartbanner.android .sb-info { + color: #ccc; + text-shadow: 0 1px 2px #000; +} + +#smartbanner.android .sb-info strong { + color: #fff; +} + +#smartbanner.android .sb-button { + min-width: 12%; + border: 1px solid #DDDCDC; + padding: 1px; + color: #d1d1d1; + background: none; + border-radius: 0; + box-shadow: none; + min-height: 28px +} + +#smartbanner.android .sb-button span { + text-align: center; + display: block; + padding: 0 10px; + background-color: #42B6C9; + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#42B6C9), to(#39A9BB)); + background-image: -moz-linear-gradient(top, #42B6C9, #39A9BB); + text-transform: none; + text-shadow: none; + box-shadow: none; +} + +#smartbanner.android .sb-button:active, +#smartbanner.android .sb-button:hover { + background: none; +} + +#smartbanner.android .sb-button:active span, +#smartbanner.android .sb-button:hover span { + background: #2AC7E1; +} + +#smartbanner.windows .sb-icon { + border-radius: 0px; +} \ No newline at end of file diff --git a/public/js/darkmode.js b/public/js/darkmode.js index 94b57db..5c5395d 100644 --- a/public/js/darkmode.js +++ b/public/js/darkmode.js @@ -1,8 +1,8 @@ function getDarkMode() { var currentTime = new Date().getHours(); - if (6 >= currentTime || currentTime > 18) { + if (6 >= currentTime || currentTime > 16) { var li = document.createElement('link'); - var href = "{{ asset('css/appdark.css?id='.Str::random(8)) }}"; + var href = "https://archblox.com/css/appdark.css"; var rel = 'stylesheet'; li.setAttribute('href', href); li.setAttribute('rel', rel); diff --git a/public/js/detect.js b/public/js/detect.js index 4b5df9d..e49de59 100644 --- a/public/js/detect.js +++ b/public/js/detect.js @@ -10,24 +10,64 @@ console.log(" "); // Detect if user is on an older domain that isn't recommended. -function addWarning() { +function addUnsupportedWarning() { 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() { +function addDatabaseBackupWarning() { 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.innerHTML = "
The database is currently being backed up. Please don't change any settings, send messages or update your status. They will not be saved. Invite creation and sign up has been temporarily disabled.
"; + alertsystemdiv.setAttribute("class","alert warning visible"); + document.body.appendChild(alertsystemdiv); +} + +function addDatabaseBackupCompleteNotification() { + let alertsystemdiv = document.createElement("div"); + alertsystemdiv.innerHTML = "
The database has finished being backed up. Invite creation and Sign Up has been re-enabled.
"; alertsystemdiv.setAttribute("class","alert-system"); document.body.appendChild(alertsystemdiv); } -if (window.document.location.hostname == "archblox.com" || window.document.location.hostname == "localhost" || window.document.location.hostname == "127.0.0.1" || window.document.location.hostname == "127.0.0.1:8000") { +function addDatabaseRestoreWarning() { + let alertsystemdiv = document.createElement("div"); + alertsystemdiv.innerHTML = "
The database is currently being restored. Please don't change any settings, send messages or update your status. They will not be saved. Invite creation and sign up has been temporarily disabled.
"; + alertsystemdiv.setAttribute("class","alert warning visible"); + document.body.appendChild(alertsystemdiv); +} + +function addDatabaseRestoreCompleteNotification() { + let alertsystemdiv = document.createElement("div"); + alertsystemdiv.innerHTML = "
The database has finished being restored. Invite creation and Sign Up has been re-enabled.
"; + alertsystemdiv.setAttribute("class","alert-system"); + document.body.appendChild(alertsystemdiv); +} + +function addShutdownWarning(date) { + let alertsystemdiv = document.createElement("div"); + alertsystemdiv.innerHTML = "
Thanks for playing! ARCHBLOX's VPS will be shutting down on "+ date +". We'll be back eventually. For now, please don't change any settings, send messages or update your status. They will not be saved. Invite creation and sign up has been temporarily disabled.
"; + alertsystemdiv.setAttribute("class","alert warning visible"); + document.body.appendChild(alertsystemdiv); +} + +function addMaintenanceWarning(date,enddate) { + let alertsystemdiv = document.createElement("div"); + alertsystemdiv.innerHTML = "
ARCHBLOX will go under maintenance on " + date +". It will finish on "+ enddate +".
"; + alertsystemdiv.setAttribute("class","alert-system"); + document.body.appendChild(alertsystemdiv); +} + +if (window.document.location.hostname == "archblox.com" || window.document.location.hostname == "www.archblox.com" || window.document.location.hostname == "localhost" || window.document.location.hostname == "127.0.0.1" || window.document.location.hostname == "127.0.0.1:8000") { console.log("User is on " + window.document.location.hostname + ". Supported URL."); - //addDatabaseBackupRestoreWarning(); -- only when the sever is backing up. + //addDatabaseBackupWarning(); // when the database is backing up. + //addDatabaseBackupCompleteNotification(); // when the database has completed a backup. + //addDatabaseRestoreWarning(); // when the database is restoring from a backup. + //addDatabaseRestoreCompleteNotification(); // when the database has completed a restore. + //addShutdownWarning("26/11/2022 (DD/MM/YYYY)"); // when vps is about to expire and site is going into maintenance. + //addMaintenanceWarning("06/03/2023 (DD/MM/YYYY)","an unknown date."); // when site is going into maintenance. } else { console.log("User is on " + window.document.location.hostname + ". Unsupported/legacy URL."); - addWarning(); + addUnsupportedWarning(); } \ No newline at end of file