From ef3c82a3bdfc873238b2321f5dcf076817f2f266 Mon Sep 17 00:00:00 2001
From: Square Root <82hbu59a@anonaddy.me>
Date: Wed, 17 Feb 2021 15:42:23 +0530
Subject: [PATCH] Add dashboard styling

- use dummy values to style the dashboard
- initial styling done. room for cleanup
- responsive design not implemented
---
 web/dashboard.php  | 100 ++++++++++++++++++++---
 web/index.php      |   2 +-
 web/style/main.css | 195 ++++++++++++++++++++++++++++++++++++++++-----
 3 files changed, 267 insertions(+), 30 deletions(-)

diff --git a/web/dashboard.php b/web/dashboard.php
index c3052ec..bcce6d6 100644
--- a/web/dashboard.php
+++ b/web/dashboard.php
@@ -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>
diff --git a/web/index.php b/web/index.php
index 7443ec2..88f5b54 100644
--- a/web/index.php
+++ b/web/index.php
@@ -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">
diff --git a/web/style/main.css b/web/style/main.css
index 45f4e6a..ad81b7f 100644
--- a/web/style/main.css
+++ b/web/style/main.css
@@ -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;
+}