Improve dashboard frontend

This commit is contained in:
SileNce5k 2025-01-13 20:46:23 +01:00
parent 3a13f98ab4
commit e256fd40ea
Signed by: SileNce
GPG key ID: B0A142BB4291B204
2 changed files with 38 additions and 14 deletions

View file

@ -39,7 +39,7 @@ a:visited {
#check01, ul.dropdown-submenu { #check01, .dropdown-submenu {
display: none; display: none;
} }
@ -60,17 +60,30 @@ a:visited {
} }
#check01:checked~ul.dropdown-submenu { #check01:checked~.dropdown-submenu {
display: inherit; display: inherit;
flex-direction: column; flex-direction: column;
position: inherit; position: inherit;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 10px 0px 0px 0px; padding: 10px 0px 0px 0px;
outline: 2px solid #c8c8c8; /* outline: 2px solid #c8c8c8; */
margin-top: 55px; margin-top: 55px;
} }
.dropdown-submenu > a {
border: 1px solid #444;
border-radius: 51px;
width: 117%;
padding: 0px;
margin: 1px 1px 1px 1px 1px;
background-color: #717171;
}
.dropdown-submenu > a {
text-decoration-line: none;
}
.user-dropdown { .user-dropdown {
display: flex; display: flex;
top: 10px; top: 10px;
@ -81,7 +94,7 @@ a:visited {
#bot { #bot {
width: 1200px; width: 1200px;
border: 5px solid #444; border: 3px solid #444;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -94,18 +107,17 @@ a:visited {
} }
#bot-log { #bot-log {
border: 5px solid #444; border: 3px solid #444;
display: flex; display: flex;
align-items: center;
position: relative; position: relative;
width: 85%; width: 85%;
height: 500px;
flex-direction: column; flex-direction: column;
height: 85%;
} }
#bot-log > p { #bot-log > p {
font-size: 17px; font-size: 17px;
margin: 0px; margin: 0px 0px 0px 7px;
} }
#main-content { #main-content {
@ -123,6 +135,13 @@ a:visited {
} }
#bot-buttons > button { #bot-buttons > button {
margin-top: 2px; margin-top: 3px;
border-radius: 20px;
background-color: #6a6a6a;
color: #ececec;
border-color: #828282;
} }
.dashboard {
text-align: center;
}

View file

@ -10,24 +10,29 @@
<body> <body>
<header class="dashboard"> <header class="dashboard">
<h1 class="dashboard-title">Dashboard</h1>
<div class="user-dropdown"> <div class="user-dropdown">
<input id="check01" type="checkbox" name="menu" /> <input id="check01" type="checkbox" name="menu" />
<label class="dropdown-label" for="check01"> <label class="dropdown-label" for="check01">
<%= user.username %> <%= user.username %>
</label> </label>
<ul class="dropdown-submenu"> <!-- <ul class="dropdown-submenu">
<li><a href="/users/<%= user.user_id %>/settings">Settings</a></li> <li><a href="/users/<%= user.user_id %>/settings">Settings</a></li>
<li><a href="/logout">Logout</a></li> <li><a href="/logout">Logout</a></li>
</ul> </ul> -->
<div class="dropdown-submenu">
<a href="/users/<%= user.user_id %>/settings">Settings</a>
<a href="/logout">Logout</a>
</div>
</div> </div>
</header> </header>
<div id="main-content"> <div id="main-content">
<h1 class="dashboard-title">Dashboard</h1>
<div id="bot"> <div id="bot">
<div id="bot-log"> <div id="bot-log">
<p>2025-01-13 05:55:02 - example command executed by -some-user-id-</p> <p>1970-01-01 00:00:00 - example command executed by -some-user-id-</p>
<p>2025-01-13 05:57:33 - userinfo command executed by -some-user-id-</p> <p>1970-01-01 00:00:00 - userinfo command executed by -some-user-id-</p>
<p>1970-01-01 00:00:00 - etc...</p>
</div> </div>
<div id="bot-buttons"> <div id="bot-buttons">
<button>Restart</button> <button>Restart</button>