chingu-voyages · dawooddilawar · Feb 17, 2024 · Feb 7, 2024 · Feb 7, 2024 · Feb 7, 2024
diff --git a/assets/Add.png b/assets/Add.png
diff --git a/assets/LOOKAHEAD_Logo.png b/assets/LOOKAHEAD_Logo.png
diff --git a/assets/Profile.png b/assets/Profile.png
diff --git a/assets/Save.png b/assets/Save.png
diff --git a/assets/Share.png b/assets/Share.png
diff --git a/assets/Undo.png b/assets/Undo.png
diff --git a/assets/left-arrow.svg b/assets/left-arrow.svg
diff --git a/assets/material-symbols-light_menu.png b/assets/material-symbols-light_menu.png
diff --git a/assets/menu.png b/assets/menu.png
diff --git a/assets/ms-icon.png b/assets/ms-icon.png
diff --git a/assets/pen.svg b/assets/pen.svg
diff --git a/assets/right-arrow.svg b/assets/right-arrow.svg
diff --git a/assets/trash.svg b/assets/trash.svg
diff --git a/assets/vertical-arrow.svg b/assets/vertical-arrow.svg
diff --git a/index.html b/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>Task management tool - V47 T03</title>
@@ -9,26 +10,122 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+    crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
+
 <body>
-<div id="header" class="header grid">
-  <div class="month-change-container">
-    <button class="month-change-btn" >
-      <i class="fa-solid fa-less-than" id="previous-month"></i>
-    </button>
-    <button class="month-change-btn" >
-      <i class="fa-solid fa-greater-than" id="next-month"></i>
-    </button>
-  </div>
-  <div class="month-heading">
-
-    <span id="month"></span>
-  </div>
-  <div class="weekdays" id="weekdays"></div>
-  <div class="month-dates" id="month-dates"></div>
-</div>
-<div id="main-grid" class="grid"></div>
-<script src="index.js" type="module"> </script>
+  <div id="outer" class="frame">
+    <!-- Outer frame -->
+    <div class="outer-frame" id="outer-row">
+      <img src="./assets/LOOKAHEAD_Logo.png" class="logo" alt="LOOKAHEAD Logo">
+      <p class="name">Hannah Leung | Personal Schedule</p>
+    </div>
+    <div class="outer-frame" id="outer-column">
+      <div class="navbar-button-group">
+        <input type="image" src="./assets/menu.png" alt="Menu" class="navbar-button navbar-button-menu" />
+        <input type="image" src="./assets/Profile.png" alt="Profile" class="navbar-button" />
+        <input type="image" src="./assets/Add.png" alt="Add Task" class="navbar-button" id="add-btn" />
+        <input type="image" src="./assets/Undo.png" alt="Undo" class="navbar-button" id="undo-btn" />
+        <input type="image" src="./assets/Save.png" alt="Save" class="navbar-button" />
+        <input type="image" src="./assets/Share.png" alt="Undo" class="navbar-button" />
+      </div>
+    </div>
+
+    <!-- Inner frame -->
+    <div id="inner">
+      <div id="header" class="header grid">
+        <div class="month-change-container">
+          <div class="controls">
+            <button class="month-change-btn" id="previous-month">
+              <!-- <img src="./assets/left-arrow.svg" alt="Select Previous Month"> -->
+              <i class="fa-solid fa-less-than" id="previous-month"></i>
+            </button>
+            <button class="month-change-btn" id="next-month">
+              <!-- <img src="./assets/right-arrow.svg" alt="Select Next Month"> -->
+              <i class="fa-solid fa-greater-than" id="next-month"></i>
+            </button>
+          </div>
+          <div class="month-heading">
+            <span id="month"></span>
+          </div>
+        </div>
+
+        <div class="weekdays" id="weekdays"></div>
+        <div class="month-dates" id="month-dates"></div>
+      </div>
+      <!-- Main chbx grid -->
+      <div id="main-grid" class="main-grid grid"></div>
+    </div>
+
+    <!-- Add button modal -->
+    <form id="add-btn-modal" class="add-btn-modal">
+
+      <div class="add-modal-title">
+        <p>New Task</p>
+      </div>
+
+      <div class="existing-categories-list">
+
+        <select id="categories" class="modal-list">
+          <option value="Routine Activities">
+          <option value="Studying">
+        </select>
+
+        <select class="modal-list" id="activities" disabled>
+          <option value="Projects">
+          <option value="Blog post">
+        </select >
+      </div>
+      <div class="new-categories-input">
+        <input type="text" id="create-new-category" placeholder="Add new Category">
+        <input type="text" id="create-new-sub-category" placeholder="Add new Sub-Category">
+      </div>
+
+      <input type="text" id="create-new-task" placeholder="Task Name">
+
+      <textarea name="description" id="new-task-desc" placeholder="Description"></textarea>
+
+      <p>Due Date</p>
+      <div class="week-month-options">
+
+        <button class="add-modal-btn add-modal-btn-weekly add-modal-btn-primary"
+          id="weekly-btn-add-modal">Weekly</button>
+        <button class="add-modal-btn add-modal-btn-monthly add-modal-btn-secondary"
+          id="monthly-btn-add-modal">Monthly</button>
+
+      </div>
+      <div class="weekly-option-chbx" id="weekly-option">
+
+        <label for="mon">Mon</label>
+        <label for="tue">Tues</label>
+        <label for="wed">Wed</label>
+        <label for="thu">Thurs</label>
+        <label for="fri">Fri</label>
+        <label for="sat">Sat</label>
+        <label for="sun">Sun</label>
+
+        <input id="mon" type="checkbox" value="monday">
+        <input id="tue" type="checkbox" value="tuesday">
+        <input id="wed" type="checkbox" value="wednesday">
+        <input id="thu" type="checkbox" value="thursday">
+        <input id="fri" type="checkbox" value="friday">
+        <input id="sat" type="checkbox" value="saturday">
+        <input id="sun" type="checkbox" value="sunday">
+      </div>
+
+      <input class="monthly-option hide" id="monthly-option" type="text"
+        placeholder="Enter due date. Separate multiple days by commas. Ex. 1, 8, 12">
+
+      <div class="modal-btns">
+        <button class="add-modal-btn add-modal-btn-secondary btn-radius" id="cancel-btn-add-modal">Cancel</button>
+        <button class="add-modal-btn add-modal-btn-primary btn-radius" id="save-btn-add-modal" type="submit">Save</button>
+      </div>
+    </form>
+    <div id="new-task-saved" class="fade">
+      <span>New task saved!</span>
+    </div>
+    <script src="index.js" type="module"> </script>
 </body>
-</html>
+
+</html>