Valley-View-University · Mark-Finley · Nov 27, 2023 · Nov 27, 2023
diff --git a/index.html b/index.html
@@ -3,12 +3,13 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="/resources/css/styles.css">
+    <link rel="stylesheet" href="./resources/css/styles.css">
     <title>AAS-Tracker</title>
 </head>
 <body>
 <!-- Option Select to continue -->
     <div class="container">
+        <img src="./resources/images/logo.png" alt="logo" class="logo">
         <h1>AAS-Tracker</h1>
         <p>Welcome, <span style="font-weight: 900;">User</span> Choose a user type to continue.</p>
         <form action="">

diff --git a/resources/css/dashboardstyles.css b/resources/css/dashboardstyles.css
@@ -13,7 +13,7 @@
     height: 60px;
     width: 100%;
     /* background-color: rgba(145, 251, 230, 0.5); */
-    background: #b7b6b6;
+    background: rgb(135, 205, 235);
     box-shadow: 0px 2px 20px 0px rgba(1, 41, 112, 0.10);
 }
 
@@ -58,7 +58,7 @@
 .side-bar{
     height: 100%;
     /* flex-basis: 20%; */
-    background: #a7a5a5;
+    background: skyblue;
     box-shadow: 0px 0px 20px 0px rgba(1, 41, 112, 0.10);
 }
 
@@ -80,4 +80,104 @@
     /* height: 100%;*/
     background: #F6F9FF;
     width: 100%;
+}
+
+.attendance-sheet {
+    display: flex;
+    justify-content: center;
+    background: #fff;
+    padding: 40px;
+    border-radius: 10px;
+    box-shadow: 0 10px rgba(0, 0, 0, 0.1);
+    margin: 100px 0;
+    justify-content: center;
+    /* width: 400px;
+    padding: 35px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: #fff;
+    border-radius: 10px */
+}
+
+.attendance-sheet p {
+    display: inline;
+    font-family: 600;
+    font-size: 15px;
+    margin-bottom: 8px;
+}
+
+.attendance-sheet input {
+    width: 100%;
+    height: 50px;
+    border: 1px solid skyblue;
+    outline: 0;
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+
+.attendance-sheet button {
+    width: 100%;
+    height: 50px;
+    background: #a780be;
+    color: #fff;
+    border: 0;
+    outline: 0;
+    border-radius: 5px;
+    cursor: pointer;
+    margin: 10px 0;
+    font-weight: 500;
+}
+
+.attendance-sheet button:hover {
+    background: #8d35c0;
+}
+
+#imgBoxK{
+    width: 100%;
+    height: 100%;
+    border-radius: 5px;
+    margin: 10px;
+}
+
+footer {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    background-color: skyblue;
+    color: black;
+    text-align: center;
+}
+
+@media screen and (max-width: 480px) {
+    .attendance-sheet {
+        width: 300px;
+    }
+
+    .attendance-sheet h1 {
+        font-size: 25px;
+    }
+
+    .attendance-sheet p {
+        font-size: 13px;
+    }
+
+    .attendance-sheet input {
+        font-size: 13px;
+    }  
+
+    .attendance-sheet button {
+        font-size: 13px;
+    }   
+
+    .attendance-sheet button:hover {
+        font-size: 13px;
+    }
+
+    .attendance-sheet button:active {
+        font-size: 13px;
+    }   
 }
diff --git a/resources/images/logo.png b/resources/images/logo.png
diff --git a/resources/pages/adminlogin.html b/resources/pages/adminlogin.html
@@ -9,6 +9,7 @@
 <body>
 <!-- Admin login -->
     <div class="container">
+        <img src="../images/logo.png" alt="logo" class="logo">
         <h1>AAS-Tracker</h1>
         <p>Welcome here, <span style="font-weight: 900;">Admin</span> Login to continue.</p>
         <form action="">

diff --git a/resources/pages/attendance-sheet.html b/resources/pages/attendance-sheet.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../css/dashboardstyles.css">
+    <title>User Dashboard</title>
+</head>
+<body>
+    <div class="container">
+        <div class="nav-bar">
+            <div class="nav-bar-left">
+                <h1>AAS-Tracker</h1>
+            </div>
+            <div class="nav-bar-right">
+                <img src="../images/profile.jpg" alt="profile-pic" class="profile">
+                <h3>Mark-Finley</h3>
+            </div>
+        </div>
+
+        <div class="inner-container">
+            <div class="side-bar">
+                <ul>
+                    <li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <path d="M14.5 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V7.5L14.5 2Z" stroke="#012970" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                        <path d="M14 2V8H20M8 13H10M8 17H10M14 13H16M14 17H16" stroke="#012970" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                      </svg><a href="#attendance-sheet">  Attendance Sheet</a></li>
+
+                      <li><svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
+                          <path d="M7.25829 23.075C7.05968 22.8764 6.96038 22.6236 6.96038 22.3167C6.96038 22.0097 7.05968 21.7569 7.25829 21.5583L12.4312 16.3583C12.8465 15.9431 13.3611 15.7354 13.975 15.7354C14.5888 15.7354 15.1034 15.9431 15.5187 16.3583L17.7666 18.6062L22.6145 13.7583C22.8312 13.5417 23.084 13.4333 23.3729 13.4333C23.6618 13.4333 23.9145 13.5417 24.1312 13.7583C24.3479 13.975 24.4562 14.2321 24.4562 14.5297C24.4562 14.8279 24.3479 15.0854 24.1312 15.3021L19.3104 20.15C18.8951 20.5653 18.3852 20.7729 17.7807 20.7729C17.1755 20.7729 16.6652 20.5653 16.25 20.15L13.975 17.875L8.77496 23.075C8.57635 23.2736 8.3279 23.3773 8.02963 23.3859C7.73207 23.3953 7.47496 23.2917 7.25829 23.075ZM4.33329 22.75C3.73746 22.75 3.22757 22.538 2.80363 22.1141C2.37896 21.6894 2.16663 21.1792 2.16663 20.5833V5.41667C2.16663 4.82083 2.37896 4.31058 2.80363 3.88592C3.22757 3.46197 3.73746 3.25 4.33329 3.25H19.5C20.0958 3.25 20.606 3.46197 21.0307 3.88592C21.4547 4.31058 21.6666 4.82083 21.6666 5.41667V9.75C21.6666 10.0569 21.5626 10.3141 21.3546 10.5213C21.1473 10.7293 20.8902 10.8333 20.5833 10.8333H4.33329V20.5833V22.75ZM4.33329 8.66667H19.5V5.41667H4.33329V8.66667Z" fill="#012970"/>
+                        </svg><a href="">  Dashboard</a></li>
+
+                    <li><svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
+                        <mask id="path-1-inside-1_659_20" fill="white">
+                          <path d="M8.125 14.625H14.625V16.25H8.125V14.625ZM8.125 10.5625H17.875V12.1875H8.125V10.5625ZM8.125 18.6875H12.1875V20.3125H8.125V18.6875Z"/>
+                        </mask>
+                        <path d="M8.125 14.625H14.625V16.25H8.125V14.625ZM8.125 10.5625H17.875V12.1875H8.125V10.5625ZM8.125 18.6875H12.1875V20.3125H8.125V18.6875Z" fill="#012970"/>
+                        <path d="M8.125 14.625V12.625H6.125V14.625H8.125ZM14.625 14.625H16.625V12.625H14.625V14.625ZM14.625 16.25V18.25H16.625V16.25H14.625ZM8.125 16.25H6.125V18.25H8.125V16.25ZM8.125 10.5625V8.5625H6.125V10.5625H8.125ZM17.875 10.5625H19.875V8.5625H17.875V10.5625ZM17.875 12.1875V14.1875H19.875V12.1875H17.875ZM8.125 12.1875H6.125V14.1875H8.125V12.1875ZM8.125 18.6875V16.6875H6.125V18.6875H8.125ZM12.1875 18.6875H14.1875V16.6875H12.1875V18.6875ZM12.1875 20.3125V22.3125H14.1875V20.3125H12.1875ZM8.125 20.3125H6.125V22.3125H8.125V20.3125ZM8.125 16.625H14.625V12.625H8.125V16.625ZM12.625 14.625V16.25H16.625V14.625H12.625ZM14.625 14.25H8.125V18.25H14.625V14.25ZM10.125 16.25V14.625H6.125V16.25H10.125ZM8.125 12.5625H17.875V8.5625H8.125V12.5625ZM15.875 10.5625V12.1875H19.875V10.5625H15.875ZM17.875 10.1875H8.125V14.1875H17.875V10.1875ZM10.125 12.1875V10.5625H6.125V12.1875H10.125ZM8.125 20.6875H12.1875V16.6875H8.125V20.6875ZM10.1875 18.6875V20.3125H14.1875V18.6875H10.1875ZM12.1875 18.3125H8.125V22.3125H12.1875V18.3125ZM10.125 20.3125V18.6875H6.125V20.3125H10.125Z" fill="#012970" mask="url(#path-1-inside-1_659_20)"/>
+                        <mask id="path-3-inside-2_659_20" fill="white">
+                          <path d="M20.3125 4.0625H17.875V3.25C17.875 2.81902 17.7038 2.4057 17.399 2.10095C17.0943 1.7962 16.681 1.625 16.25 1.625H9.75C9.31902 1.625 8.9057 1.7962 8.60095 2.10095C8.29621 2.4057 8.125 2.81902 8.125 3.25V4.0625H5.6875C5.25652 4.0625 4.8432 4.2337 4.53845 4.53845C4.2337 4.8432 4.0625 5.25652 4.0625 5.6875V22.75C4.0625 23.181 4.2337 23.5943 4.53845 23.899C4.8432 24.2038 5.25652 24.375 5.6875 24.375H20.3125C20.7435 24.375 21.1568 24.2038 21.4615 23.899C21.7663 23.5943 21.9375 23.181 21.9375 22.75V5.6875C21.9375 5.25652 21.7663 4.8432 21.4615 4.53845C21.1568 4.2337 20.7435 4.0625 20.3125 4.0625ZM9.75 3.25H16.25V6.5H9.75V3.25ZM20.3125 22.75H5.6875V5.6875H8.125V8.125H17.875V5.6875H20.3125V22.75Z"/>
+                        </mask>
+                        <path d="M20.3125 4.0625H17.875V3.25C17.875 2.81902 17.7038 2.4057 17.399 2.10095C17.0943 1.7962 16.681 1.625 16.25 1.625H9.75C9.31902 1.625 8.9057 1.7962 8.60095 2.10095C8.29621 2.4057 8.125 2.81902 8.125 3.25V4.0625H5.6875C5.25652 4.0625 4.8432 4.2337 4.53845 4.53845C4.2337 4.8432 4.0625 5.25652 4.0625 5.6875V22.75C4.0625 23.181 4.2337 23.5943 4.53845 23.899C4.8432 24.2038 5.25652 24.375 5.6875 24.375H20.3125C20.7435 24.375 21.1568 24.2038 21.4615 23.899C21.7663 23.5943 21.9375 23.181 21.9375 22.75V5.6875C21.9375 5.25652 21.7663 4.8432 21.4615 4.53845C21.1568 4.2337 20.7435 4.0625 20.3125 4.0625ZM9.75 3.25H16.25V6.5H9.75V3.25ZM20.3125 22.75H5.6875V5.6875H8.125V8.125H17.875V5.6875H20.3125V22.75Z" fill="#012970"/>
+                        <path d="M20.3125 4.0625V2.0625V4.0625ZM17.875 4.0625H15.875V6.0625H17.875V4.0625ZM16.25 1.625V-0.375V1.625ZM9.75 1.625V-0.375V1.625ZM8.125 4.0625V6.0625H10.125V4.0625H8.125ZM5.6875 4.0625V2.0625V4.0625ZM4.0625 5.6875H2.0625H4.0625ZM4.0625 22.75H2.0625H4.0625ZM9.75 3.25V1.25H7.75V3.25H9.75ZM16.25 3.25H18.25V1.25H16.25V3.25ZM16.25 6.5V8.5H18.25V6.5H16.25ZM9.75 6.5H7.75V8.5H9.75V6.5ZM20.3125 22.75V24.75H22.3125V22.75H20.3125ZM5.6875 22.75H3.6875V24.75H5.6875V22.75ZM5.6875 5.6875V3.6875H3.6875V5.6875H5.6875ZM8.125 5.6875H10.125V3.6875H8.125V5.6875ZM8.125 8.125H6.125V10.125H8.125V8.125ZM17.875 8.125V10.125H19.875V8.125H17.875ZM17.875 5.6875V3.6875H15.875V5.6875H17.875ZM20.3125 5.6875H22.3125V3.6875H20.3125V5.6875ZM20.3125 2.0625H17.875V6.0625H20.3125V2.0625ZM19.875 4.0625V3.25H15.875V4.0625H19.875ZM19.875 3.25C19.875 2.28859 19.4931 1.36656 18.8133 0.686738L15.9848 3.51516C15.9145 3.44484 15.875 3.34946 15.875 3.25H19.875ZM18.8133 0.686738C18.1334 0.00691855 17.2114 -0.375 16.25 -0.375V3.625C16.1505 3.625 16.0552 3.58549 15.9848 3.51516L18.8133 0.686738ZM16.25 -0.375H9.75V3.625H16.25V-0.375ZM9.75 -0.375C8.78859 -0.375 7.86656 0.00691855 7.18674 0.686738L10.0152 3.51516C9.94484 3.58549 9.84946 3.625 9.75 3.625V-0.375ZM7.18674 0.686738C6.50692 1.36656 6.125 2.28859 6.125 3.25H10.125C10.125 3.34946 10.0855 3.44484 10.0152 3.51516L7.18674 0.686738ZM6.125 3.25V4.0625H10.125V3.25H6.125ZM8.125 2.0625H5.6875V6.0625H8.125V2.0625ZM5.6875 2.0625C4.72609 2.0625 3.80406 2.44442 3.12424 3.12424L5.95266 5.95266C5.88234 6.02299 5.78696 6.0625 5.6875 6.0625V2.0625ZM3.12424 3.12424C2.44442 3.80406 2.0625 4.72609 2.0625 5.6875H6.0625C6.0625 5.78696 6.02299 5.88234 5.95266 5.95266L3.12424 3.12424ZM2.0625 5.6875V22.75H6.0625V5.6875H2.0625ZM2.0625 22.75C2.0625 23.7114 2.44442 24.6334 3.12424 25.3133L5.95266 22.4848C6.02299 22.5552 6.0625 22.6505 6.0625 22.75H2.0625ZM3.12424 25.3133C3.80406 25.9931 4.72609 26.375 5.6875 26.375V22.375C5.78696 22.375 5.88234 22.4145 5.95266 22.4848L3.12424 25.3133ZM5.6875 26.375H20.3125V22.375H5.6875V26.375ZM20.3125 26.375C21.2739 26.375 22.1959 25.9931 22.8758 25.3133L20.0473 22.4848C20.1177 22.4145 20.213 22.375 20.3125 22.375V26.375ZM22.8758 25.3133C23.5556 24.6334 23.9375 23.7114 23.9375 22.75H19.9375C19.9375 22.6505 19.977 22.5552 20.0473 22.4848L22.8758 25.3133ZM23.9375 22.75V5.6875H19.9375V22.75H23.9375ZM23.9375 5.6875C23.9375 4.72609 23.5556 3.80406 22.8758 3.12424L20.0473 5.95266C19.977 5.88234 19.9375 5.78696 19.9375 5.6875H23.9375ZM22.8758 3.12424C22.1959 2.44442 21.2739 2.0625 20.3125 2.0625V6.0625C20.213 6.0625 20.1177 6.02299 20.0473 5.95266L22.8758 3.12424ZM9.75 5.25H16.25V1.25H9.75V5.25ZM14.25 3.25V6.5H18.25V3.25H14.25ZM16.25 4.5H9.75V8.5H16.25V4.5ZM11.75 6.5V3.25H7.75V6.5H11.75ZM20.3125 20.75H5.6875V24.75H20.3125V20.75ZM7.6875 22.75V5.6875H3.6875V22.75H7.6875ZM5.6875 7.6875H8.125V3.6875H5.6875V7.6875ZM6.125 5.6875V8.125H10.125V5.6875H6.125ZM8.125 10.125H17.875V6.125H8.125V10.125ZM19.875 8.125V5.6875H15.875V8.125H19.875ZM17.875 7.6875H20.3125V3.6875H17.875V7.6875ZM18.3125 5.6875V22.75H22.3125V5.6875H18.3125Z" fill="#012970" mask="url(#path-3-inside-2_659_20)"/>
+                      </svg><a href="">  Report</a></li>
+
+                    <li><svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none">
+                        <path d="M23.1349 5.34422L13.3849 2.09422C13.1352 2.00993 12.8648 2.00993 12.6151 2.09422L2.86506 5.34422C2.63241 5.42127 2.4284 5.56667 2.27965 5.76144C2.1309 5.95621 2.04433 6.1913 2.03123 6.43602C2.03012 6.45733 2.03012 6.47869 2.03123 6.5V14.625C2.03123 14.9482 2.15963 15.2582 2.38819 15.4868C2.61675 15.7153 2.92675 15.8438 3.24998 15.8438C3.57321 15.8438 3.88321 15.7153 4.11177 15.4868C4.34033 15.2582 4.46873 14.9482 4.46873 14.625V8.19102L6.87678 8.99336C6.12944 10.4239 5.90735 12.0711 6.24917 13.6485C6.59099 15.2258 7.47507 16.6334 8.74756 17.6262C7.08236 18.4473 5.67308 19.7077 4.67185 21.2713C4.58169 21.4053 4.51906 21.5559 4.48761 21.7143C4.45616 21.8727 4.45651 22.0358 4.48865 22.1941C4.52078 22.3524 4.58406 22.5027 4.6748 22.6363C4.76554 22.7699 4.88194 22.8842 5.01722 22.9724C5.1525 23.0606 5.30398 23.1211 5.46284 23.1503C5.62169 23.1795 5.78477 23.1768 5.94258 23.1424C6.10039 23.108 6.24979 23.0426 6.38209 22.9499C6.5144 22.8573 6.62697 22.7393 6.71326 22.6027C8.16256 20.3724 10.4609 19.0938 13 19.0938C15.539 19.0938 17.8374 20.3724 19.2918 22.6027C19.3781 22.7393 19.4906 22.8573 19.6229 22.9499C19.7552 23.0426 19.9046 23.108 20.0625 23.1424C20.2203 23.1768 20.3833 23.1795 20.5422 23.1503C20.7011 23.1211 20.8525 23.0606 20.9878 22.9724C21.1231 22.8842 21.2395 22.7699 21.3302 22.6363C21.421 22.5027 21.4843 22.3524 21.5164 22.1941C21.5485 22.0358 21.5489 21.8727 21.5174 21.7143C21.486 21.5559 21.4233 21.4053 21.3332 21.2713C20.331 19.7059 18.9198 18.4443 17.2524 17.6231C18.5249 16.6303 19.409 15.2228 19.7508 13.6454C20.0926 12.0681 19.8705 10.4208 19.1232 8.99031L23.1349 7.65274C23.3773 7.57165 23.588 7.41643 23.7373 7.20902C23.8866 7.00162 23.967 6.75252 23.967 6.49696C23.967 6.24139 23.8866 5.99229 23.7373 5.78489C23.588 5.57748 23.3773 5.42226 23.1349 5.34117V5.34422ZM13 4.53172L18.8957 6.5L13 8.46524L7.10935 6.5L13 4.53172ZM17.4687 12.1875C17.4689 12.8816 17.3073 13.5662 16.9968 14.187C16.6864 14.8078 16.2356 15.3478 15.6802 15.7641C15.1248 16.1804 14.48 16.4616 13.7971 16.5854C13.1141 16.7092 12.4116 16.6722 11.7454 16.4774C11.0792 16.2825 10.4676 15.9351 9.95899 15.4628C9.45038 14.9905 9.05879 14.4061 8.81527 13.7561C8.57176 13.1061 8.483 12.4084 8.55604 11.7181C8.62908 11.0278 8.86191 10.3641 9.23607 9.77946L12.6151 10.9058C12.8648 10.9898 13.1352 10.9898 13.3849 10.9058L16.7639 9.77946C17.2248 10.498 17.4694 11.3339 17.4687 12.1875Z" fill="#012970"/>
+                      </svg><a href="">  Student</a></li>
+
+                    <li><svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none">
+                        <path d="M9.49683 2.375H2.375V16.625H9.5M13.0625 13.0625L16.625 9.5L13.0625 5.9375M6.33333 9.49683H16.625" stroke="#012970" stroke-width="2.16667" stroke-linecap="round" stroke-linejoin="round"/>
+                      </svg><a href="./studentlogin.html">  Logout</a></li>
+                </ul>
+            </div>
+            <div class="content">
+                <h1>Attendance Sheet</h1>
+                <div class="attendance-sheet">
+                    <!-- <p>Enter your course</p>  -->
+                    <input type="text" placeholder="course" id="qrText">
+                    <!-- <p>Enter your section</p>  -->
+                    <input type="text" placeholder="section" id="qrTextii">
+                    <!-- <p>Enter your text or URL</p>  -->
+                    <input type="text" placeholder="Text or URL" id="qrTextiii">
+                    <button onclick="generateQR()">Generate QR Code</button>
+
+                    <div id='imgBox'> 
+                         <img src="" id="qrImgBox">
+                    </div>
+
+                    <footer>This is made with 💓 from Accra By Michelle</footer>
+                 </div>
+
+
+                <script>
+                    function generateQR() {
+                        // Get values from input fields
+                        let course = document.getElementById('qrText').value;
+                        let section = document.getElementById('qrTextii').value;
+                        let textOrUrl = document.getElementById('qrTextiii').value;
+
+                        // Combine values to create a string for the QR code
+                        let qrText = `Course: ${course}\nSection: ${section}\n${textOrUrl}`;
+
+                        // Generate the QR code and update the image source
+                        let qrImg = document.getElementById('qrImgBox');
+                        qrImg.src = 'https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=' + encodeURIComponent(qrText);
+                    }
+                </script>
+            </div>
+        </div>
+    </div>
+</body>
+</html>