sQr00t/ProxyBro
sQr00t
/
ProxyBro
3
1
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

Add dashboard styling 

- use dummy values to style the dashboard
- initial styling done. room for cleanup
- responsive design not implemented
This commit is contained in:
Square Root 2021-02-17 15:42:23 +05:30
parent a552cff572
commit ef3c82a3bd
3 changed files with 267 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
web/dashboard.php
View File

@ -23,15 +23,97 @@
<div class="container">
<?php require(__DIR__."/php/components/header.php"); ?>
<?php
if ($user->active) {
echo '<a href="/toggle_activation.php">Deactivate account</a>';
echo "Account active";
} else {
echo '<a href="/toggle_activation.php">Activate account</a>';
echo "Account inactive";
}
?>
<main id="dashboard">
<div id="stats">
<div id="stats_left">
<div class="info_entry">25<span>Success</span></div>
<span class="seperator"></span>
<div class="info_entry">1<span>Aborted</span></div>
<span class="seperator"></span>
<div class="info_entry">2<span>Pending</span></div>
</div>
<div id="stats_right">
<div class="info_entry">
Z1X0X0XOX
<span>John Longname Doe</span>
</div>
</div>
</div>
<div id="summary">
<div id="summary_left">
<?php
if ($user->active) {
echo'
<div id="indicator" class="inactive"></div>
<div id="bro_activity" class="info_entry">
Bro on Duty
<span>Your attendance is being checked and marked</span>
</div>
';
} else {
echo'
<div id="indicator" class="active"></div>
<div id="bro_activity" class="info_entry">
Bro is chilling
<span>Account is inactive</span>
</div>
';
}
?>
</div>
<div id="summary_right">
<?php
if ($user->active) {
echo '<a href="/toggle_activation.php">
<div id="btn_acountstatus" class="active">
Deactivate
</div>
</a>';
} else {
echo '<a href="/toggle_activation.php">
<div id="btn_acountstatus" class="inactive">
Activate
</div>
</a>';
}
?>
</div>
</div>
<div id="schedule">
<h2>Active Schedules</h2>
<table>
<thead>
<tr>
<th class="course">Course</th>
<th>Attempts</th>
<th>Last Try</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td class="course">AB1123D Physics</td>
<td>3</td>
<td>20XX-XX-01 9:16 AM</td>
<td class="aborted">Aborted</td>
</tr>
<tr>
<td class="course">AB1124X Chemistry</td>
<td>1</td>
<td>20XX-XX-02 10:17 AM</td>
<td class="success">Success</td>
</tr>
<tr>
<td class="course">AB1125Y Mathematics</td>
<td>0</td>
<td>-</td>
<td class="pending">Pending</td>
</tr>
</tbody>
</table>
</div>
</main>
<?php require(__DIR__."/php/components/footer.php"); ?>
</div>

2
web/index.php
View File

@ -72,7 +72,7 @@
<span class="sub">Please note that we will be storing this password in a database as plain text. So please don't use your master or important passwords.</span>
</div>
<form id="form" method="post" action="/index.php">
<input class="input <?php echo $isError ? "error" : ""; ?>" id="username" type="text" name="username" value="<?php echo $username; ?>"placeholder="eduserver username" />
<input autofocus class="input <?php echo $isError ? "error" : ""; ?>" id="username" type="text" name="username" value="<?php echo $username; ?>"placeholder="eduserver username" />
<input class="input <?php echo $isError ? "error" : ""; ?>" id="password" type="password" name="password" placeholder="eduserver password" />
<div class="error"><?php echo $error; ?></div>
<div class="bottom-container">

195
web/style/main.css
View File

@ -17,7 +17,7 @@
--color-primary-dark: #0c1018;
--color-accent: #3bd671;
--color-accent-dark: #199b46;
--color-accent-error: #e41919;
--color-accent-error: #DF484A;
--color-accent-error-border: #9b2222;
--color-primary-light: #212937;
--color-body: #687790;
@ -30,10 +30,14 @@
font-family: "Roboto", sans-serif;
font-weight: 400;
--font-normal: 1rem;
--font-medium: 1.2rem;
--font-large: 1.7rem;
--font-xl: 2.2rem;
/* --font-normal: 1rem; */
/* --font-medium: 1.2rem; */
/* --font-large: 1.7rem; */
/* --font-xl: 2.2rem; */
--font-normal: 16px;
--font-medium: 18px;
--font-large: 24px;
--font-xl: 28px;
}
body {
@ -43,11 +47,16 @@ body {
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
/* position: relative; */
width: 100%;
margin: auto;
max-width: 1500px;
min-height: calc(100vh - 100px);
height: 100vh;
/* margin: auto; */
/* max-width: 1500px; */
/* min-height: calc(100vh - 100px); */
padding: 0 50px;
}
@ -73,8 +82,8 @@ h2,
header {
width: 100%;
margin: auto;
max-width: 1400px;
/* margin: auto; */
/* max-width: 1400px; */
display: flex;
flex-direction: column;
align-items: center;
@ -99,13 +108,13 @@ header nav a:hover {
/* footer */
footer {
position: absolute;
/* position: absolute; */
display: flex;
justify-content: space-between;
align-items: center;
left: 0;
bottom: -100px;
padding: 0 50px;
padding: 20px 50px;
height: 100px;
width: 100%;
}
@ -126,7 +135,7 @@ footer nav a:hover {
}
main#homepage {
padding-top: 75px;
padding-top: 40px;
}
main#homepage .part.left {
@ -141,10 +150,9 @@ main#homepage .part.left {
}
main#homepage .part.left .message-card {
margin-top: 80px;
margin-bottom: 80px;
margin: 15px 0 30px 0;
background-color: var(--color-primary-light);
padding: 50px 70px;
padding: 30px 50px;
border-radius: 5px;
font-size: var(--font-large);
color: var(--color-heading);
@ -155,7 +163,7 @@ main#homepage .part.right {
display: flex;
flex-direction: column;
background-color: var(--color-primary-light);
padding: 50px 70px;
padding: 50px 40px 30px 40px;
border-radius: 5px;
}
@ -179,6 +187,7 @@ main#homepage .part.right #form {
margin: 10px 0;
font-size: var(--font-medium);
border-radius: 5px;
border: 1px solid var(--color-primary-light);
}
.input:focus, .button:focus {
@ -230,13 +239,159 @@ form .bottom-container {
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 50px 10px 50px 10px;
padding: 20px 10px;
}
main#homepage {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 50px;
padding-top: 7%;
padding-top: 10px;
}
}
/* Dashboard Styling */
main#dashboard {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 80%;
min-width: 400px;
padding: 10px;
}
/* Dashboard stats */
main#dashboard #stats {
background-color: var(--color-primary-light);
border-radius: 5px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 30px;
color: #fff;
text-align: center;
margin-bottom: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1)
}
main#dashboard #stats_left {
display: flex;
justify-content: space-around;
width: 50%;
}
main#dashboard #stats_left .seperator {
min-width: 3px;
height: 30px%;
background-color: var(--color-primary);
}
main#dashboard #stats_right {
width: 30%;
margin: 0 20px;
}
main#dashboard .info_entry {
margin: 5px;
display: flex;
flex-direction: column;
font-size: var(--font-xl);
font-weight: 700;
}
main#dashboard .info_entry span {
font-size: var(--font-normal);
font-weight: 400;
color: var(--color-body);
}
/* Dashboard summary */
main#dashboard #summary {
background-color: var(--color-primary-light);
border-radius: 5px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 50px;
color: #fff;
text-align: center;
margin-bottom: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1)
}
main#dashboard #indicator {
min-width: 20px;
min-height: 20px;
height: 20px;
/* filter: drop-shadow(0px 0px 10px); */
box-shadow: 0 0px 19px;
}
main#dashboard #summary_left {
display: flex;
align-items: center;
}
main#dashboard #summary_right a {
text-decoration: none;
}
main#dashboard #bro_activity {
text-align: left;
margin-left: 35px;
}
main#dashboard #btn_acountstatus {
padding: 10px 15px;
font-weight: 700;
color: #fff;
}
main#dashboard .inactive {
background-color: var(--color-accent);
color: var(--color-accent);
}
main#dashboard .active {
background-color: var(--color-accent-error);
color: var(--color-accent-error);
}
/* schedule styling */
main#dashboard #schedule {
width: 95%;
margin: auto;
margin-top: 40px;
}
main#dashboard #schedule h2 {
color: #fff;
}
main#dashboard table {
background-color: var(--color-primary-light);
width: 100%;
border-collapse: collapse;
border-radius: 5px;
margin: 20px 0;
/* filter: drop-shadow(10px 10px 30px var(--color-primary-dark)); */
box-shadow: 0 20px 40px rgba(0,0,0,0.2)
}
main#dashboard table thead {
background-color: #181F2C;
color: #fff;
}
main#dashboard table th,td {
padding: 20px 20px;
text-align: center;
}
main#dashboard table td {
border-top: 1px solid var(--color-primary);
}
main#dashboard table .course {
text-align: left;
color: #fff;
}
main#dashboard table tbody>tr>:nth-child(4) {
font-weight: 500;
}
main#dashboard table td.aborted {
color: var(--color-accent-error);
}
main#dashboard table td.success {
color: var(--color-accent);
}
main#dashboard table td.pending {
color: #F29030;
}