diff --git a/public/css/dashboard.css b/public/css/dashboard.css index 902ba60..59b3f71 100644 --- a/public/css/dashboard.css +++ b/public/css/dashboard.css @@ -12,6 +12,10 @@ body #userWrapper { position: absolute; + display: flex; + flex-wrap: wrap; + gap: 1em; + justify-content: center; top:3vh; left:50%; transform: translateX(-50%); @@ -23,37 +27,35 @@ body } #avatar { + flex-direction: column; background-color: ivory; height: 10vh; width: 10vh; background-size: 10vh 10vh; position: relative; top:2vh; - left: 10%; border-radius: 10px; } -#userName +.userNameWrapper { - position: relative; - left: 50%; - top:-25%; - font-size: larger; - font-family: 'Lato'; - font-weight: bolder; - color: rgb(15, 98, 131); + display: flex; + flex-direction: column; + min-width: 20vh; + max-width: 70%; + height: 15vh; + justify-content: center; + text-align: center; } -#guilds +#userName { - position: relative; - top:20vh; - background-color: rgba(210, 252, 253, 0.541); - width: 80%; - height: 70%; - font-family: 'Lato'; + margin: 0; + position: relative; + + font-size: 2.5em; + font-family: 'Lato'; font-weight: bolder; - text-align: center; - border-radius: 2%; - border: 2px solid #020608; + white-space: pre-wrap; + color: rgb(15, 98, 131); } .DiscordAddBtn { @@ -69,28 +71,69 @@ body } -.material-symbols-outlined +.close, .checkBox { - cursor: pointer; + cursor: pointer; } -.popup .material-symbols-outlined +.close +{ + position: relative; + top:-0.1em; + right:1vh; + float:right; +} +.popup .checkBox { position: relative; top:-0.1em; right:1vh; float:right; } +.popup .info +{ + position: relative; + font-size: 20px; +} +.popup .tooltip { + visibility: hidden; + width: 17vw; + background-color: rgba(37, 14, 165, 0.171); + color: ivory; + font-size: small; + text-align: center; + border-radius: 6px; + padding: 5px 0; + white-space: pre-wrap; + /* Position the tooltip */ + position: absolute; + z-index: 1; +} + +.info:hover .tooltip{ + visibility: visible; +} .popup { position: absolute; - height: 30%; + min-height: 30%; + max-height: 50%; width: 50%; top:calc(50% - 15%); - background-color: rgba(210, 252, 253, 0.541); + background-color: rgba(210, 252, 253, 0.295); border-radius: 5px; border: 2px solid #020608; z-index: 10; text-align: center; + backdrop-filter: blur(3px); +} +.popup p +{ + margin-top: 0.5em; + margin-bottom: 0.5em; +} +.popup h3 +{ + margin-bottom: 1.7em; } h1 { diff --git a/public/js/dashboard.js b/public/js/dashboard.js index c83aa27..e2dfcad 100644 --- a/public/js/dashboard.js +++ b/public/js/dashboard.js @@ -26,7 +26,7 @@ function updateUser(accessToken, tokenType) { userID = response.id; avatar.style.backgroundImage = `url(https://cdn.discordapp.com/avatars/${response.id}/${response.avatar}.jpeg)` - userName.textContent = response.username+"'s servers:" + userName.textContent = response.username+"'s servers" }) .catch(console.error); } diff --git a/views/dashboard.ejs b/views/dashboard.ejs index 823ec1f..9f28c09 100644 --- a/views/dashboard.ejs +++ b/views/dashboard.ejs @@ -9,14 +9,16 @@ - +
-

USERNAME

+
+

USERNAME

+
@@ -26,11 +28,23 @@ cancel

PLACEHOLDER

-

Activate Music: - check_box_outline_blank

- -

Activate Strikes: - check_box_outline_blank +

Activate Music: + info + Allow your server to use music (Temporarly does nothing as its a WIP[work in progress]). + + check_box_outline_blank +

+

Activate Strikes: + info + Activate a 3 strike system before automatic ban. (Theese are to be validated before they are self-actionable) + + check_box_outline_blank +

+

Activate Invites: + info + Allow invites to other servers on your server. + + check_box_outline_blank

Role rules

Feeds