IPD done (emp_record) done

IPSystemTOPC/EmployeeProdDB/static/css/emp_record.css

@@ -106,6 +106,7 @@ body {
     margin-top: 5px;
     margin-bottom: 5px;
     opacity: 50%;
+    padding: 0px;
 }
 
 .seperator {
@@ -120,6 +121,69 @@ body {
     margin-top: 15px;
 }
 
+.hori-box {
+    border: 0.5px solid grey;
+    width: 91.5%;
+    height: 10%;
+    margin-top: 15px;
+}
+
 .main {
     margin-left: 85px;
+}
+
+.time-info-cont {
+    margin: 15px 50px 0px;
+    display: flex;
+    justify-content: space-between;
+    border-radius: 4px;
+    border: 1px solid black;
+    padding: 10px 50px;
+    align-items: center;
+}
+
+/* not working atm */
+.time-info h6 {
+    padding: 0px, 30px;
+    margin: 0px;
+}
+.time-info span {
+    font-weight: bold;
+    /* padding-left: 5px; */
+}
+
+.dashboard-cont {
+    margin: 30px 50px 0px;
+    width: 91.5%;
+    height: 100%;
+    margin-right: 50px;
+    border-radius: 4px;
+    padding: 5px 0px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.dashboard {
+    width: 55%;
+    height: 100%;
+    min-height: 200px;
+    border-radius: 4px;
+    border: 1px solid black;
+    display: flex;
+    align-items: center;
+}
+
+.remarks {
+    width: 40%;
+    height: 100%;
+    min-height: 200px;
+    border-radius: 4px;
+    border: 1px solid black;
+    display: flex;
+    align-items: center;
+    /* text-align: center; */
+}
+
+#year-padding {
+    padding-left: 5px;
 }
\ No newline at end of file

IPSystemTOPC/EmployeeProdDB/templates/EmployeeProdDB/emp_record.html

@@ -97,7 +97,34 @@
         <div class="hori-line"></div>
     </div>
 
-    <!-- EXTEND CHART JS AND REMARKS PAGE HEREHERE HERE HERE HERE -->
-    <!--  DUNNO HOW TO EXTEND ANOTHER HTML HERE    -->
+    <div class="time-info-cont">
+
+      <div class="time-info">
+        <h6>Record Timespan: <span>info here 
+          <!-- INFO HERE -->
+        </span><span class="vert-line"></span> <span id="year-padding">year
+          <!-- INFO HERE -->
+        </span></h6>
+      </div>
+
+      <div class="time-info">
+        <h6>Total Working Hours: <span>info here
+          <!-- INFO HERE -->
+        </span></h6>
+      </div>
+    </div>
+
+    <div class="dashboard-cont">
+      <div class="dashboard">
+        <!-- EXTEND CHART JS AND REMARKS PAGE HEREHERE HERE HERE HERE -->
+        <!--  DUNNO HOW TO EXTEND ANOTHER HTML HERE    -->
+        dashboard code goes here
+      </div>
+
+      <div class="remarks">
+        remarks crud goes here
+      </div>
+    </div>
+
 </body>
 {% endblock %}