USYDUniTrack · jennifermtan · Apr 11, 2024 · Apr 11, 2024 · Apr 12, 2024 · Apr 12, 2024
diff --git a/templates/base.html b/templates/base.html
@@ -14,7 +14,7 @@
 
     <link rel="icon" type="image/x-icon" href="/static/favicon.ico" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined">
 </head>
 <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' hx-ext="response-targets">
     <div class="pageContainer">

diff --git a/templates/degree_components/degree_requirements.html b/templates/degree_components/degree_requirements.html
@@ -0,0 +1,38 @@
+<div class="degreeRequirements">
+    <div class="degreeProgress">
+        <p id="degreePercentage" onclick="updateProgressBar(12, 100)">0% planned</p>
+        <p id="completedCredits">0/0cp</p>
+        <br/>
+    </div>
+    <progress value="0" max="100"></progress>
+
+    <div class="creditRequirements">
+        <div class="degreeRequirement">
+            <p>Degree core</p>
+            <p>0/96</p>
+        </div>
+        <div class="degreeRequirement">
+            <p>Major 1</p>
+            <p>0/48</p>
+        </div>
+        <div class="degreeRequirement">
+            <p>Major 2</p>
+            <p>0/48</p>
+        </div>
+        <div class="degreeRequirement">
+            <p>Degree requirement</p>
+            <p>0/0</p>
+        </div>
+    </div>
+</div>
+
+<script>
+function updateProgressBar(credits, totalCredits) {
+    var credits = credits;
+    var totalCredits = totalCredits;
+    document.getElementsByTagName("PROGRESS")[0].setAttribute("value", credits / totalCredits * 100);
+    document.getElementById("degreePercentage").innerHTML = credits / totalCredits * 100 + "% planned";
+    document.getElementById("completedCredits").innerHTML = credits + "/" + totalCredits + "cp";
+}
+</script>
+
diff --git a/templates/degree_components/empty_unit.html b/templates/degree_components/empty_unit.html
@@ -0,0 +1,5 @@
+<div class="degreeUnit">
+    <a href="#">
+        <i class="material-icons">search</i>
+    </a>
+</div>
diff --git a/templates/degree_components/semester_plan.html b/templates/degree_components/semester_plan.html
@@ -0,0 +1,12 @@
+<div class="semesterPlan">
+    <p id="year">2021</p>
+
+    <div class="semesterRow">
+        <p id="semester">Semester 2</p>
+        <a href="#">
+            <i class="material-icons-outlined">add_box</i>
+        </a>
+    </div>
+
+    {% include 'degree_components/empty_unit.html' %}
+</div>
diff --git a/templates/degree_plan.html b/templates/degree_plan.html
@@ -3,7 +3,18 @@
 {% block main %}
     {% include 'components/navbar.html' %}
     <div class=pageContentsContainer>
-        Degree plan page
-
+        <div class="degreePlan">
+            <div class="heading">
+                <p>Bachelor of Advanced Computing</p>
+                <a href="#">
+                    <i class="material-icons">edit</i>
+                </a>
+            </div>
+            {% include 'degree_components/semester_plan.html' %}
+            {% include 'degree_components/semester_plan.html' %}
+            {% include 'degree_components/semester_plan.html' %}
+            {% include 'degree_components/semester_plan.html' %}
+        </div>
+        {% include 'degree_components/degree_requirements.html' %}
     </div>
 {% endblock %}
diff --git a/unitrack/static/global/scss/_degreePlanner.scss b/unitrack/static/global/scss/_degreePlanner.scss
@@ -0,0 +1,158 @@
+.degreePlan {
+    display: grid;
+    align-content: space-evenly;
+    grid-template-columns: auto;
+    gap: 25px;
+    padding: 10px 20px;
+    height: 100%;
+    width: 100%;
+    margin: 10px;
+    background-color: #F0EEEE;
+    border-radius: 15px;
+}
+
+.degreePlan > .heading {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.degreePlan > .heading p {
+    font-size: 20px;
+    font-weight: 600;
+}
+
+.degreePlan > .heading i {
+    color: black;
+    font-size: 35px;
+
+    &:hover {
+        color: #DD432B;
+    }
+}
+
+.degreeRequirements {
+    float: right;
+    position: sticky;
+    top: 0;
+    height: 100%; 
+    padding: 15px 15px;
+    height: 100%;
+}
+
+.degreeRequirements > .creditRequirements {
+    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
+    margin-top: 10px;
+}
+
+.degreeRequirements > .creditRequirements p {
+    padding: 20px;
+}
+
+.creditRequirements > .degreeRequirement {
+    width: 255px;
+    height: 48px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.degreeProgress {
+    width: 255px;
+    display: table;
+}
+
+.degreeProgress p {
+    display: table-cell;
+    width: 100%; // Fill the whole width
+}
+
+// Progress bar styling
+progress[value] {
+    --color: #DD432B; /* the progress color */
+    --background: #E5E5E5; /* the background color */
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border: none;
+    width: 255px;
+    height: 9px;
+    margin-bottom: 5px;
+    border-radius: 5em;
+    background: var(--background);
+}
+
+progress[value]::-webkit-progress-bar {
+    border-radius: 10em;
+    background: var(--background);
+}
+
+progress[value]::-webkit-progress-value {
+border-radius: 10em;
+background: var(--color);
+}
+
+progress[value]::-moz-progress-bar {
+border-radius: 10em;
+background: var(--color);
+}
+
+// Degree unit styling
+.degreeUnit {
+    display: flex;
+    border-radius: 15px;
+    background: rgba(255, 255, 255, 1);
+    flex-direction: column;
+    width: 150px;
+    min-width: 130px;
+    height: 100px;
+    padding: 10px;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 20px;
+    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.1);
+    align-items: center;
+    justify-content: center;
+}
+
+.degreeUnit i {
+    color: black;
+    opacity: 50%;
+    font-size: 35px;
+
+    &:hover {
+        color: #DD432B;
+        opacity: 100%;
+    }
+}
+
+.semesterRow {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.semesterPlan > .semesterRow i {
+    color: black;
+    font-size: 30px;
+    margin-left: 10px;
+
+    &:hover {
+        color: #DD432B;
+    }
+}
+
+.semesterPlan p {
+    display: inline; // Prevent new line
+}
+
+.semesterPlan #year {
+    font-size: 25px;
+    font-weight: 700;
+}
+
+.semesterPlan #semester {
+    font-size: 20px;
+    font-weight: 600;
+}
diff --git a/unitrack/static/global/scss/global.scss b/unitrack/static/global/scss/global.scss
@@ -24,13 +24,12 @@ button {
 }
 
 .pageContentsContainer {
-    padding: 10px;
+    padding: 15px;
     display: flex;
-    flex-direction: column;
-    align-items: flex-start;
     justify-content: center;
     height: 100%;
+    width: 100%;
     box-sizing: border-box;
 }
 
-@import "navbar", "signin", "register";
+@import "navbar", "signin", "register", "degreePlanner";