New changes.

osinaweb/osinacore/views.py

@@ -82,3 +82,67 @@ def detailed_project(request, project_id):
     }
     return render(request, 'project-details.html', context)
 
+
+@login_required
+def create_project(request):
+    context = {       
+
+    }
+    return render(request, 'create-project.html', context)
+
+@login_required
+def create_epic(request):
+    context = {       
+
+    }
+    return render(request, 'create-epic.html', context)
+
+
+
+def add_note_modal(request, *args, **kwargs):
+    context = {
+
+    }
+    return render(request, 'addnote-modal.html', context)   
+
+def add_status_modal(request, *args, **kwargs):
+    context = {
+
+    }
+    return render(request, 'addstatus-modal.html', context)
+
+def add_point_modal(request, *args, **kwargs):
+    context = {
+
+    }
+    return render(request, 'addpoint-modal.html', context)
+
+def add_time_modal(request, *args, **kwargs):
+    context = {
+
+    }
+    return render(request, 'addtime-modal.html', context)
+
+def delete_task_modal(request, *args, **kwargs):
+    context = {
+
+    }
+    return render(request, 'deletetask-modal.html', context)
+
+def show_points_modal(request, *args, **kwargs):
+    context = {
+
+    }
+    return render(request, 'showpoints-modal.html', context)
+
+def timeline_modal(request, *args, **kwargs):
+    context = {
+
+    }
+    return render(request, 'timeline-modal.html', context)
+
+def update_status_modal(request, *args, **kwargs):
+    context = {
+
+    }
+    return render(request, 'update-status-modal.html', context)

osinaweb/osinaweb/settings.py

@@ -23,10 +23,12 @@ BASE_DIR = Path(__file__).resolve().parent.parent
 # SECURITY WARNING: keep the secret key used in production secret!
 SECRET_KEY = 'django-insecure-(rqb)11ax((t*r$hji+m4fdh^w-*c(dv*97rjv25&=sxa4m^-h'
 
+X_FRAME_OPTIONS = 'SAMEORIGIN'
+
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True
 
-ALLOWED_HOSTS = []
+ALLOWED_HOSTS = ['*']
 
 LOGIN_URL = 'signin' 
 

osinaweb/osinaweb/urls.py

@@ -25,5 +25,15 @@ urlpatterns = [
     path('', login_required(views.home), name='home'),
     path('my-projects/', login_required(views.my_projects), name='my-projects'),
     path('detailedproject/<str:project_id>/', views.detailed_project, name='detailed-project'),
+    path('createproject/', views.create_project, name='createproject'),
+    path('createepic/', views.create_epic, name='createepic'),
 
+    path('addstatus/', views.add_status_modal, name='addstatus'),
+    path('updatestatus/', views.update_status_modal, name='updatestatus'),
+    path('addnote/', views.add_note_modal, name='addnote'),
+    path('addpoint/', views.add_point_modal, name='addpoint'),
+    path('showpoints/', views.show_points_modal, name='showpoints'),
+    path('addtime/', views.add_time_modal, name='addtime'),
+    path('timeline/', views.timeline_modal, name='timeline'),
+    path('deletetask/', views.delete_task_modal, name='deletetask'),
 ]

osinaweb/static/dist/output.css

@@ -534,6 +534,18 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.visible {
+  visibility: visible;
+}
+
+.collapse {
+  visibility: collapse;
+}
+
+.static {
+  position: static;
+}
+
 .fixed {
   position: fixed;
 }
@@ -566,6 +578,11 @@ video {
   z-index: 20;
 }
 
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -614,18 +631,38 @@ video {
   margin-top: 1.25rem;
 }
 
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
 .mt-\[5\%\] {
   margin-top: 5%;
 }
 
+.block {
+  display: block;
+}
+
 .flex {
   display: flex;
 }
 
+.table {
+  display: table;
+}
+
+.contents {
+  display: contents;
+}
+
 .hidden {
   display: none;
 }
 
+.h-14 {
+  height: 3.5rem;
+}
+
 .h-\[100px\] {
   height: 100px;
 }
@@ -674,6 +711,10 @@ video {
   height: 50px;
 }
 
+.h-\[600px\] {
+  height: 600px;
+}
+
 .h-\[60px\] {
   height: 60px;
 }
@@ -715,6 +756,10 @@ video {
   width: 15%;
 }
 
+.w-\[150px\] {
+  width: 150px;
+}
+
 .w-\[15px\] {
   width: 15px;
 }
@@ -775,6 +820,10 @@ video {
   width: 35px;
 }
 
+.w-\[40px\] {
+  width: 40px;
+}
+
 .w-\[45\%\] {
   width: 45%;
 }
@@ -803,6 +852,10 @@ video {
   width: 55%;
 }
 
+.w-\[60\%\] {
+  width: 60%;
+}
+
 .w-\[60px\] {
   width: 60px;
 }
@@ -836,6 +889,14 @@ video {
   flex: 1 1 0%;
 }
 
+.border-collapse {
+  border-collapse: collapse;
+}
+
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -844,6 +905,14 @@ video {
   cursor: pointer;
 }
 
+.resize-none {
+  resize: none;
+}
+
+.resize {
+  resize: both;
+}
+
 .list-disc {
   list-style-type: disc;
 }
@@ -856,6 +925,10 @@ video {
   flex-wrap: wrap;
 }
 
+.items-start {
+  align-items: flex-start;
+}
+
 .items-center {
   align-items: center;
 }
@@ -912,6 +985,10 @@ video {
   gap: 3%;
 }
 
+.gap-y-2 {
+  row-gap: 0.5rem;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -933,6 +1010,10 @@ video {
   border-top-right-radius: 0.375rem;
 }
 
+.rounded-bl-lg {
+  border-bottom-left-radius: 0.5rem;
+}
+
 .rounded-bl-md {
   border-bottom-left-radius: 0.375rem;
 }
@@ -1028,6 +1109,11 @@ video {
   border-color: rgb(30 41 59 / var(--tw-border-opacity));
 }
 
+.border-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -1038,6 +1124,11 @@ video {
   background-color: rgb(191 219 254 / var(--tw-bg-opacity));
 }
 
+.bg-blue-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
+}
+
 .bg-blue-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
@@ -1068,16 +1159,31 @@ video {
   background-color: rgb(21 128 61 / var(--tw-bg-opacity));
 }
 
+.bg-orange-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(194 65 12 / var(--tw-bg-opacity));
+}
+
 .bg-pink-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(251 207 232 / var(--tw-bg-opacity));
 }
 
+.bg-pink-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 168 212 / var(--tw-bg-opacity));
+}
+
 .bg-purple-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(233 213 255 / var(--tw-bg-opacity));
 }
 
+.bg-red-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+}
+
 .bg-red-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(239 68 68 / var(--tw-bg-opacity));
@@ -1122,11 +1228,6 @@ video {
   background-color: rgb(250 204 21 / var(--tw-bg-opacity));
 }
 
-.bg-yellow-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
-}
-
 .bg-opacity-40 {
   --tw-bg-opacity: 0.4;
 }
@@ -1339,6 +1440,10 @@ video {
   color: rgb(234 179 8 / var(--tw-text-opacity));
 }
 
+.underline {
+  text-decoration-line: underline;
+}
+
 .opacity-30 {
   opacity: 0.3;
 }
@@ -1366,6 +1471,16 @@ video {
   outline-offset: 2px;
 }
 
+.outline {
+  outline-style: solid;
+}
+
+.transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .duration-300 {
   transition-duration: 300ms;
 }
@@ -1418,6 +1533,11 @@ video {
   color: rgb(30 41 59 / var(--tw-text-opacity));
 }
 
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
 @media (min-width: 798px) {
   .md\:w-\[300px\] {
     width: 300px;

osinaweb/static/js/pop-modals.js

@@ -53,35 +53,43 @@ document.addEventListener("DOMContentLoaded", function () {
         }
     });
 
-    //ADD NOTE MODAL
-    const addNoteButton = document.getElementById("addNoteButton");
-
-    addNoteButton.addEventListener("click", () => {
-        openModal("./addnote-modal.html"); //Replace with the actual URL of your external content
-
-        const iframe = document.getElementById("popupModalFrame");
-        iframe.style.height = "160px"
-        iframe.style.width = "400px"
-    });
-
     //ADD STATUS MODAL
     const addStatusButton = document.getElementById("addStatusButton");
 
     addStatusButton.addEventListener("click", () => {
-        openModal("./addstatus-modal.html");
+        const modalUrl = addStatusButton.getAttribute("data-modal-url");
+
+        openModal(modalUrl);
 
         const iframe = document.getElementById("popupModalFrame");
         iframe.style.height = "200px"
         iframe.style.width = "450px"
     });
 
+    //ADD NOTE MODAL
+    const addNoteButton = document.getElementById("addNoteButton");
+
+    addNoteButton.addEventListener("click", () => {
+        // Retrieve the URL from the data attribute
+        const modalUrl = addNoteButton.getAttribute("data-modal-url");
+
+        // Open the modal with the retrieved URL
+        openModal(modalUrl);
+
+        const iframe = document.getElementById("popupModalFrame");
+        iframe.style.height = "225px"
+        iframe.style.width = "400px"
+    });
+
 
     //SHOW TASK MODALS
     //Show the update status modal
     const updateStatusButton = document.getElementById("updateStatusButton");
 
     updateStatusButton.addEventListener("click", () => {
-        openModal("./update-status-modal.html");
+        const modalUrl = updateStatusButton.getAttribute("data-modal-url");
+
+        openModal(modalUrl);
 
         const iframe = document.getElementById("popupModalFrame");
         iframe.style.height = "160px"
@@ -93,7 +101,9 @@ document.addEventListener("DOMContentLoaded", function () {
     const showPointsButton = document.getElementById("showPointsButton");
 
     showPointsButton.addEventListener("click", () => {
-        openModal("./showpoints-modal.html");
+        const modalUrl = showPointsButton.getAttribute("data-modal-url");
+
+        openModal(modalUrl);
 
         const iframe = document.getElementById("popupModalFrame");
         iframe.style.height = "450px"
@@ -104,7 +114,9 @@ document.addEventListener("DOMContentLoaded", function () {
     const addPointButton = document.getElementById("addPointButton");
 
     addPointButton.addEventListener("click", () => {
-        openModal("./addpoint-modal.html");
+        const modalUrl = addPointButton.getAttribute("data-modal-url");
+
+        openModal(modalUrl);
 
         const iframe = document.getElementById("popupModalFrame");
         iframe.style.height = "160px"
@@ -115,7 +127,9 @@ document.addEventListener("DOMContentLoaded", function () {
     const timelineButton = document.getElementById("timelineButton");
 
     timelineButton.addEventListener("click", () => {
-        openModal("./timeline-modal.html");
+        const modalUrl = timelineButton.getAttribute("data-modal-url");
+
+        openModal(modalUrl);
 
         const iframe = document.getElementById("popupModalFrame");
         iframe.style.height = "450px"
@@ -126,7 +140,9 @@ document.addEventListener("DOMContentLoaded", function () {
     const addTimeButton = document.getElementById("addTimeButton");
 
     addTimeButton.addEventListener("click", () => {
-        openModal("./addtime-modal.html");
+        const modalUrl = addTimeButton.getAttribute("data-modal-url");
+
+        openModal(modalUrl);
 
         const iframe = document.getElementById("popupModalFrame");
         iframe.style.height = "270px"
@@ -137,7 +153,9 @@ document.addEventListener("DOMContentLoaded", function () {
     const deleteTaskButton = document.getElementById("deleteTaskButton");
 
     deleteTaskButton.addEventListener("click", () => {
-        openModal("./deletetask-modal.html");
+        const modalUrl = deleteTaskButton.getAttribute("data-modal-url");
+
+        openModal(modalUrl);
 
         const iframe = document.getElementById("popupModalFrame");
         iframe.style.height = "130px"

osinaweb/tailwind.config.js

@@ -1,6 +1,11 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["static/dist/*.{html,js}"],
+  content: [
+    "./input.css",
+    "./static/**/*.html",
+    "./static/dist/output.css",
+    "./templates/**/*.html",
+  ],
   theme: {
     screens: {
       xs: '380px',

osinaweb/templates/addnote-modal.html

@@ -1,11 +1,14 @@
+{% load static %}
+
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Osina</title>
 
-    <link href="output.css" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 </head>
@@ -13,15 +16,95 @@
 <body>
     <div id="hiddenContent">
         <h1 class="text-slate-800 text-2xl font-semibold text-center">Add Note</h1>
-    
+
         <div class="w-full flex justify-center items-center">
-            <input type="text" placeholder="Type your note here..." class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4">
+            <input type="text" placeholder="Type your note here..."
+                class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-4">
+        </div>
+
+        <div class="w-full flex justify-between items-center flex-wrap mt-4">
+            <div class="color-option w-[40px] h-[40px] rounded-full bg-blue-200 cursor-pointer"
+                style="background-color: #BFDBFF;" id="blue">
+
+            </div>
+
+            <div class="color-option w-[40px] h-[40px] rounded-full bg-pink-200 cursor-pointer"
+                style="background-color: #FBCFE8;" id="pink">
+
+            </div>
+
+            <div class="color-option w-[40px] h-[40px] rounded-full bg-yellow-200 cursor-pointer"
+                style="background-color: #FEEF91;" id="yellow">
+
+            </div>
+
+            <div class="color-option w-[40px] h-[40px] rounded-full bg-green-200 cursor-pointer"
+                style="background-color: #B6FAD0;" id="green">
+
+            </div>
+
+            <div class="color-option w-[40px] h-[40px] rounded-full bg-purple-200 cursor-pointer"
+                style="background-color: #EBD6F9;" id="purple">
+
+            </div>
+
+            <div class="color-option w-[40px] h-[40px] rounded-full bg-red-200 cursor-pointer"
+                style="background-color: #FFCACA;" id="red">
+
+            </div>
+        </div>
+
+        <div>
+            <input type="text"
+                class="w-full border border-gray-300 rounded-md py-1 px-3 outline-none h-[50px] mt-4 hidden"
+                id="hexCodeDisplay">
         </div>
-    
-        <div class="w-full flex justify-center items-center mt-4">
+
+        <script>
+            // TO GET THE COLOR OF THE DIV
+            const colorOptions = document.querySelectorAll('.color-option');
+            const hexCodeDisplay = document.getElementById('hexCodeDisplay');
+
+            colorOptions.forEach((colorOption) => {
+                colorOption.addEventListener('click', () => {
+                    // Remove borders from all color-options
+                    colorOptions.forEach((option) => {
+                        option.style.border = 'none';
+                    });
+
+                    // Get the id and background color of the clicked color div
+                    const colorId = colorOption.id;
+                    const bgColor = colorOption.style.backgroundColor;
+
+                    // Convert the RGB color to a hex code (if it's in RGB format)
+                    const hexColor = rgbToHex(bgColor);
+
+                    // Display the hex code in the input field
+                    hexCodeDisplay.value = hexColor;
+
+                    // Apply a black border to the selected color-option
+                    colorOption.style.border = '3px solid gray';
+
+                    console.log(`Selected color ID: ${colorId}`);
+                });
+            });
+
+            // Function to convert RGB color to hex code
+            function rgbToHex(rgb) {
+                const rgbaArray = rgb.match(/\d+/g);
+                const hexArray = rgbaArray.map((value) => {
+                    const hex = parseInt(value, 10).toString(16);
+                    return hex.length === 1 ? '0' + hex : hex;
+                });
+                return '#' + hexArray.join('');
+            }
+        </script>
+
+        <div class="w-full flex justify-center items-center mt-6">
             <button
                 class="w-fit bg-blue-500 border border-blue-500 rounded-md text-white text-xl px-3 py-2 hover:bg-white hover:text-blue-500">Add</button>
         </div>
     </div>
 </body>
+
 </html>

osinaweb/templates/addpoint-modal.html

@@ -1,3 +1,5 @@
+{% load static %}
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -5,11 +7,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Osina</title>
 
-    <link href="output.css" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 </head>
 
+
 <body>
     <div id="hiddenContent">
         <h1 class="text-slate-800 text-2xl font-semibold text-center">Add Point</h1>

osinaweb/templates/addstatus-modal.html

@@ -1,3 +1,5 @@
+{% load static %}
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -5,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Osina</title>
 
-    <link href="output.css" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 </head>

osinaweb/templates/addtime-modal.html

@@ -1,3 +1,5 @@
+{% load static %}
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -5,11 +7,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Osina</title>
 
-    <link href="output.css" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 </head>
 
+
 <body>
     <div id="hiddenContent">
         <h1 class="text-slate-800 text-2xl font-semibold text-center">Add Timeline</h1>

osinaweb/templates/create-epic.html

@@ -0,0 +1,171 @@
+{% extends "main.html" %}
+{%load static%}
+{% block content %}
+
+<div class="w-full px-10">
+    <div class="w-full bg-white h-fit shadow-md rounded-md p-5">
+        <h1 class="text-3xl text-slate-800 text-center font-semibold">
+            Create Epic
+        </h1>
+        <div class="mx-auto w-full flex flex-col gap-3 justify-center items-center mt-5">
+            <input type="text" placeholder="Epic Name"
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md">
+
+            <textarea type="text" placeholder="Epic Description" rows="5" cols="5"
+                class="w-full py-3 px-3 border border-gray-300 outline-none rounded-md resize-none"></textarea>
+
+            <select id=""
+                class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                <option value="" selected disabled>Select Status</option>
+                <option value="">Open</option>
+                <option value="">Closed</option>
+            </select>
+
+            <div class="w-full">
+                <label class="text-gray-500">Start Date:</label>
+                <input type="date" id="date" name="date"
+                    class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-1">
+            </div>
+
+            <div class="w-full">
+                <label class="text-gray-500">End Date:</label>
+                <input type="date" id="date" name="date"
+                    class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-1">
+            </div>
+
+            <div class="w-full">
+                <button class="w-full border border-gray-300 text-gray-500 py-2 px-3 outline-none rounded-md text-xl"
+                    id="AddTaskButton">Add
+                    Task</button>
+            </div>
+
+            <div class="w-full flex justify-center items-center mt-3">
+                <button
+                    class="w-fit py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 text-xl cursor-pointer hover:bg-white hover:text-blue-500">Add
+                    Epic</button>
+            </div>
+        </div>
+
+        <div class="mx-auto w-[60%] h-full shadow-md rounded-md mt-5 border border-gray-300 p-3 hidden"
+            id="taskFormContainer">
+            <h1 class="text-3xl text-slate-800 text-center font-semibold">
+                Create Task
+            </h1>
+
+            <div class="w-full flex flex-col gap-3 justify-center items-center mt-5">
+                <input type="text" placeholder="Task Name"
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md">
+
+                <select id=""
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                    <option value="" selected disabled>Assigned To</option>
+                    <option value="">Nataly</option>
+                    <option value="">Salim</option>
+                </select>
+
+                <select id=""
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                    <option value="" selected disabled>Status</option>
+                    <option value="">Open</option>
+                    <option value="">Working On</option>
+                    <option value="">Closed</option>
+                </select>
+
+                <select id=""
+                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
+                    <option value="" selected disabled>Extra</option>
+                    <option value="">Yes</option>
+                    <option value="">No</option>
+                </select>
+
+                <div class="w-full">
+                    <label class="text-gray-500">Start Date:</label>
+                    <input type="date" id="date" name="date"
+                        class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-1">
+                </div>
+
+                <div class="w-full">
+                    <label class="text-gray-500">End Date:</label>
+                    <input type="date" id="date" name="date"
+                        class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-1">
+                </div>
+
+                <div class="w-full flex justify-between items-center gap-2">
+                    <input type="text" placeholder="Add Point"
+                        class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md">
+                    <button
+                        class="w-[150px] h-[50px] py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 cursor-pointer hover:bg-white hover:text-blue-500">Add
+                        Point</button>
+                </div>
+
+                <div class="inbox-box border border-gray-300 py-1 px-3 w-full rounded-md">
+                    <div class="flex items-center justify-between">
+                        <input required name="cv" type="file" id="actual-btn" accept=".pdf,.docx" hidden multiple />
+                        <span id="file-name" class="text-gray-500 text-base focus:outline-none outline-none">Upload
+                            Document</span>
+                        <label for="actual-btn"
+                            class="bg-transparent text-gray-500 border border-white px-4 py-2 h-14 cursor-pointer flex items-center"><i
+                                class="fa fa-upload"></i></label>
+
+                    </div>
+                </div>
+
+                <!-- WHEN THE USER CHOOSE A FILE THE NAME OF THE FILE WILL APPEAR IN THE SPAN -->
+                <script>
+                    const fileInput = document.getElementById('actual-btn');
+                    const fileNameSpan = document.getElementById('file-name');
+
+                    fileInput.addEventListener('change', (event) => {
+                        const selectedFiles = event.target.files;
+                        if (selectedFiles.length > 0) {
+                            const fileNames = Array.from(selectedFiles).map(file => file.name).join(', ');
+                            fileNameSpan.textContent = fileNames;
+                        } else {
+                            fileNameSpan.textContent = 'Upload Documents (PDF, docx)';
+                        }
+                    });
+                </script>
+
+                <div class="w-full flex justify-center items-center mt-3">
+                    <button
+                        class="w-fit py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 text-xl cursor-pointer hover:bg-white hover:text-blue-500">Add
+                        Task</button>
+                </div>
+            </div>
+        </div>
+
+        <script>
+            const addTaskButton = document.getElementById('AddTaskButton');
+            const taskFormContainer = document.getElementById('taskFormContainer');
+
+            // Add a click event listener to the button
+            addTaskButton.addEventListener('click', () => {
+                // Toggle the visibility of the taskFormContainer
+                if (taskFormContainer.style.display === 'none' || taskFormContainer.style.display === '') {
+                    taskFormContainer.style.display = 'block';
+                    // Scroll to the taskFormContainer
+                    taskFormContainer.scrollIntoView({ behavior: 'smooth' });
+                } else {
+                    taskFormContainer.style.display = 'none';
+                }
+            });
+        </script>
+    </div>
+</div>
+</div>
+
+<!-- POPUP MODAL -->
+<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" id="popUpModal">
+    <div class="w-[95%] md:w-fit h-fit bg-white rounded-md p-9 relative">
+        <button class="absolute top-3 right-5 text-slate-800 text-xl cursor-pointer outline-none border-none"
+            id="closeModalButton">
+            <i class="fa fa-close"></i>
+        </button>
+        <iframe id="popupModalFrame" frameborder="0"></iframe>
+    </div>
+</div>
+
+<script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>
+</div>
+
+{% endblock content %}

osinaweb/templates/create-project.html

@@ -0,0 +1,26 @@
+{% extends "main.html" %}
+{%load static%}
+{% block content %}
+
+<div class="w-full px-10">
+    <div class="w-full bg-white h-[600px] shadow-md rounded-md">
+
+    </div>
+</div>
+</div>
+
+<!-- POPUP MODAL -->
+<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" id="popUpModal">
+    <div class="w-[95%] md:w-fit h-fit bg-white rounded-md p-9 relative">
+        <button class="absolute top-3 right-5 text-slate-800 text-xl cursor-pointer outline-none border-none"
+            id="closeModalButton">
+            <i class="fa fa-close"></i>
+        </button>
+        <iframe id="popupModalFrame" frameborder="0"></iframe>
+    </div>
+</div>
+
+<script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>
+</div>
+
+{% endblock content %}

osinaweb/templates/deletetask-modal.html

@@ -1,12 +1,13 @@
+{% load static %}
+
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Osina</title>
 
-    <link href="output.css" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 </head>

osinaweb/templates/login.html

@@ -9,7 +9,6 @@
     <title>Osina</title>
 
     <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
-    <link href="../input.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 

osinaweb/templates/main.html

@@ -7,7 +7,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %} Osina {% endblock %}</title>
     <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
-    <link href="../input.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 
@@ -140,7 +139,7 @@
                         </div>
                         <button
                             class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-white text-[18px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md"
-                            id="addStatusButton">
+                            id="addStatusButton" data-modal-url="{% url 'addstatus' %}">
                             <i class="fa fa-plus"></i>
                         </button>
                     </div>
@@ -229,9 +228,6 @@
     <!---------------------- JS SCRIPTS -------------------->
     <!-- SIDE BAR SCRIPT -->
     <script type="text/javascript" src='{% static "js/side-bar.js" %}'></script>
-
-    <!-- TO SHOW ALL THE ADDED NOTES BY THE USER WHEN CLICKING ON THE SHOW NOTES BUTTON -->
-    <script type="text/javascript" src='{% static "js/show-notes.js" %}'></script>
    
 </body>
 

osinaweb/templates/projects.html

@@ -1,301 +1,344 @@
 {% extends "main.html" %}
 {%load static%}
 {% block title %}My Projects{% endblock %}
-{% block content %} 
-            <!-- NOTES SECTION -->
-            <div class="w-full h-fit flex justify-between items-center px-10 pb-5">
-                <div class="relative w-full h-fit bg-white shadow-md rounded-md p-5">
-                    <div class="w-full flex justify-between items-center">
-                        <div>
-                            <p class="text-base text-gray-500">Recent Note:</p>
-                            <p class="text-slate-700">Send an Email to Salim.</p>
-                        </div>
-                        <div class="flex justify-end items-center gap-4">
-                            <button
-                                class="w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
-                                id="showNotesButton">Show
-                                Notes</button>
-                            <button
-                                class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md"
-                                id="addNoteButton">
-                                <i class="fa fa-plus"></i>
-                            </button>
-                        </div>
-                    </div>
+{% block content %}
+<!-- NOTES SECTION -->
+<div class="w-full h-fit flex justify-between items-center px-10 pb-5">
+    <div class="relative w-full h-fit bg-white shadow-md rounded-md p-5">
+        <div class="w-full flex justify-between items-center">
+            <div>
+                <p class="text-base text-gray-500">Recent Note:</p>
+                <p class="text-slate-700">Send an Email to Salim.</p>
+            </div>
+            <div class="flex justify-end items-center gap-4">
+                <button
+                    class="w-fit rounded-md py-1 px-3 bg-slate-800 border border-slate-800 text-white hover:bg-white hover:text-slate-800"
+                    id="showNotesButton">Show
+                    Notes</button>
+                <button
+                    class="w-[35px] h-[35px] rounded-full p-2 bg-gray-300 text-white text-[20px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md"
+                    id="addNoteButton">
+                    <i class="fa fa-plus"></i>
+                </button>
+            </div>
+        </div>
 
-                    <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
-                    <div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto"
-                        id="notesContainer">
-                        <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 p-5">
-                            <p class="text-base text-slate-800">Send an Email to Salim.</p>
-                        </div>
+        <!-- ALL NOTES CONTAINER (it appears when clicking on the "Show notes" button) -->
+        <div class="w-full h-fit relative hidden justify-start gap-3 items-center mt-5 overflow-hidden overflow-x-auto"
+            id="notesContainer">
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 p-5">
+                <p class="text-base text-slate-800">Send an Email to Salim.</p>
+            </div>
 
-                        <div class="w-[16.33%] h-[150px] shadow-xl bg-pink-200 top-90 right-10 p-5">
-                            <p class="text-base text-slate-80">Contact the client.</p>
-                        </div>
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-pink-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Contact the client.</p>
+            </div>
 
-                        <div class="w-[16.33%] h-[150px] shadow-xl bg-green-200 top-90 right-10 p-5">
-                            <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-                        </div>
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-green-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
 
-                        <div class="w-[16.33%] h-[150px] shadow-xl bg-blue-200 top-90 right-10 p-5">
-                            <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-                        </div>
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-blue-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
 
-                        <div class="w-[16.33%] h-[150px] shadow-xl bg-purple-200 top-90 right-10 p-5">
-                            <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-                        </div>
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-purple-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
 
-                        <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 top-90 right-10 p-5">
-                            <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
-                        </div>
-                    </div>
+            <div class="w-[16.33%] h-[150px] shadow-xl bg-yellow-200 top-90 right-10 p-5">
+                <p class="text-base text-slate-80">Add daily report at the end of the day.</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- PROJECTS AND USERS ACTIVITY SECTION -->
+<div class="w-full flex items-stretch justify-between gap-[2.5%] px-10 pb-5">
+    <!-- LEFT SIDE / PROJECTS SECTION -->
+    <div class="w-[74.5%]">
+        <div class="w-full h-[800px] bg-white rounded-md shadow-md p-5">
+            <h1 class="text-slate-800 text-[30px] font-semibold">My Projects</h1>
+
+            <!-- PROJECT FILTERING -->
+            <div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex justify-between items-center">
+                <div class="flex justify-start items-center gap-5">
+                    <input type="text" placeholder="Enter Project Name"
+                        class="w-[300px] h-[40px] py-2 px-3 border border-gray-300 rounded-md outline-none">
+
+                    <select name="" id=""
+                        class="border border-gray-300 p-2 rounded-md outline-none w-[160px] text-gray-500 h-[40px]">
+                        <option value="" disabled selected>Status</option>
+                        <option value="">Open</option>
+                        <option value="">Working On</option>
+                        <option value="">Closed</option>
+                    </select>
+                </div>
+                <div>
+                    <a href="{% url 'createproject' %}">
+                        <button
+                            class="w-fit text-base px-3 py-2 bg-blue-500 text-white outline-none border border-blue-500 rounded-md cursor-pointer hover:bg-white hover:text-blue-500">Create
+                            Project</button>
+                    </a>
                 </div>
             </div>
 
-            <!-- PROJECTS AND USERS ACTIVITY SECTION -->
-            <div class="w-full flex items-stretch justify-between gap-[2.5%] px-10 pb-5">
-                <!-- LEFT SIDE / PROJECTS SECTION -->
-                <div class="w-[74.5%]">
-                    <div class="w-full h-[800px] bg-white rounded-md shadow-md p-5">
-                        <h1 class="text-slate-800 text-[30px] font-semibold">My Projects</h1>
-
-                        <!-- PROJECT FILTERING -->
-                        <div
-                            class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex justify-start items-center gap-5">
-                            <input type="text" placeholder="Enter Project Name"
-                                class="w-[300px] h-[40px] py-2 px-3 border border-gray-300 rounded-md outline-none">
-
-                            <select name="" id=""
-                                class="border border-gray-300 p-2 rounded-md outline-none w-[160px] text-gray-500 h-[40px]">
-                                <option value="" disabled selected>Status</option>
-                                <option value="">Open</option>
-                                <option value="">Working On</option>
-                                <option value="">Closed</option>
-                            </select>
+            <div class="mt-5 w-full h-[500px]">
+                <div class="w-full border-x border-t border-gray-300 rounded-t-md ">
+                    <!-- TABLE HEADER -->
+                    <div
+                        class="w-full flex justify-between items-center h-[60px] border-b border-gray-300 rounded-t-md">
+                        <div class="w-[10%] h-full border-r border-gray-300 flex justify-center items-center">
+                            <p class="text-slate-800">#</p>
                         </div>
-
-                        <div class="mt-5 w-full h-[500px]">
-                            <div class="w-full border-x border-t border-gray-300 rounded-t-md ">
-                                <!-- TABLE HEADER -->
-                                <div
-                                    class="w-full flex justify-between items-center h-[60px] border-b border-gray-300 rounded-t-md">
-                                    <div
-                                        class="w-[10%] h-full border-r border-gray-300 flex justify-center items-center">
-                                        <p class="text-slate-800">#</p>
-                                    </div>
-                                    <div
-                                        class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
-                                        <p>Project</p>
-                                    </div>
-                                    <div
-                                        class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
-                                        <p class="text-slate-800">Client</p>
-                                    </div>
-                                    <div
-                                        class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center">
-                                        <p class="text-slate-800">Status</p>
-                                    </div>
-                                    <div class="w-[15%] h-full flex justify-center items-center">
-                                        <!-- <div>
+                        <div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
+                            <p>Project</p>
+                        </div>
+                        <div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
+                            <p class="text-slate-800">Client</p>
+                        </div>
+                        <div class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center">
+                            <p class="text-slate-800">Status</p>
+                        </div>
+                        <div class="w-[15%] h-full flex justify-center items-center">
+                            <!-- <div>
                                             <i class="fa fa-eye"></i>
                                         </div>
                                         <div>
                                             <i class="fa fa-trash"></i>
                                         </div> -->
-                                        <p class="text-slate-800">Action</p>
-                                    </div>
-                                </div>
+                            <p class="text-slate-800">Action</p>
+                        </div>
+                    </div>
 
-                                <!-- TABLE BODY -->
-                                <div class="w-full">
-                                    <!-- 1st row -->
-                                    {% for project in projects %}
-                                    <div
-                                        class="w-full h-[60px] flex justify-between items-center border-b border-gray-300">
-                                        <div
-                                            class="w-[10%] h-full border-r border-gray-300 flex justify-center items-center">
-                                            <p class="text-gray-500">{{project.project_id}}</p>
-                                        </div>
-                                        <div
-                                            class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
-                                            <p class="text-gray-500">{{project.name}}</p>
-                                        </div>
-                                        <div
-                                            class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
-                                            <p class="text-gray-500">{{project.customer}}</p>
-                                        </div>
-                                        {% if project.status == 'Completed' %}
-                                        <div
-                                            class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center bg-green-700">
-                                            <p class="text-white">{{project.status}}</p>
-                                        </div>
-                                        {% endif %}
-                                        {% if project.status == 'Cancelled' %}
-                                        <div
-                                            class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center bg-red-500">
-                                            <p class="text-white">{{project.status}}</p>
-                                        </div>
-                                        {% endif %}
-                                        {% if project.status == 'Active' %}
-                                        <div
-                                            class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center bg-orange-700">
-                                            <p class="text-white">{{project.status}}</p>
-                                        </div>
-                                        {% endif %}
-                                        {% if project.status == 'Pending' %}
-                                        <div
-                                            class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center bg-yellow-400">
-                                            <p class="text-white">{{project.status}}</p>
-                                        </div>
-                                        {% endif %}
-                                        <div class="w-[15%] h-full flex justify-center items-center gap-4">
-                                            <a href="{% url 'detailed-project' project.project_id %}">
-                                                <div class="text-[18px] text-blue-500 cursor-pointer">
-                                                    <i class="fa fa-eye"></i>
-                                                </div>
-                                            </a>
-                                            <div class="text-[18px] text-red-500 cursor-pointer">
-                                                <i class="fa fa-trash"></i>
-                                            </div>
-                                        </div>
+                    <!-- TABLE BODY -->
+                    <div class="w-full">
+                        <!-- 1st row -->
+                        {% for project in projects %}
+                        <div class="w-full h-[60px] flex justify-between items-center border-b border-gray-300">
+                            <div class="w-[10%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">{{project.project_id}}</p>
+                            </div>
+                            <div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">{{project.name}}</p>
+                            </div>
+                            <div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
+                                <p class="text-gray-500">{{project.customer}}</p>
+                            </div>
+                            {% if project.status == 'Completed' %}
+                            <div
+                                class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center bg-green-700">
+                                <p class="text-white">{{project.status}}</p>
+                            </div>
+                            {% endif %}
+                            {% if project.status == 'Cancelled' %}
+                            <div
+                                class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center bg-red-500">
+                                <p class="text-white">{{project.status}}</p>
+                            </div>
+                            {% endif %}
+                            {% if project.status == 'Active' %}
+                            <div
+                                class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center bg-orange-700">
+                                <p class="text-white">{{project.status}}</p>
+                            </div>
+                            {% endif %}
+                            {% if project.status == 'Pending' %}
+                            <div
+                                class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center bg-yellow-400">
+                                <p class="text-white">{{project.status}}</p>
+                            </div>
+                            {% endif %}
+                            <div class="w-[15%] h-full flex justify-center items-center gap-4">
+                                <a href="{% url 'detailed-project' project.project_id %}">
+                                    <div class="text-[18px] text-blue-500 cursor-pointer">
+                                        <i class="fa fa-eye"></i>
                                     </div>
-                                    {% endfor %}
-
+                                </a>
+                                <div class="text-[18px] text-slate-800 cursor-pointer">
+                                    <i class="fa fa-edit"></i>
+                                </div>
+                                <div class="text-[18px] text-red-500 cursor-pointer">
+                                    <i class="fa fa-trash"></i>
                                 </div>
                             </div>
                         </div>
+                        {% endfor %}
+
                     </div>
                 </div>
+            </div>
+        </div>
+    </div>
 
-                <!-- RIGHT SIDE / USERS ACTIVITY -->
-                <div class="w-[23%] bg-white flex-1 rounded-md shadow-md p-5">
-                    <h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
-                    <div class="w-full h-[300px] mt-2">
+    <!-- RIGHT SIDE / USERS ACTIVITY -->
+    <div class="w-[23%] bg-white flex-1 rounded-md shadow-md p-5">
+        <h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
+        <div class="w-full h-[300px] mt-2">
 
-                        <div class="w-full flex flex-col py-3">
-                            <div class="w-full flex justify-start gap-2 items-center">
-                                <div class="w-[45px] h-[45px] rounded-full">
-                                    <img src='{% static "images/avatar.svg" %}' alt="user profile"
-                                        class="w-full h-full object-cover">
-                                </div>
-                                <div class="flex flex-col">
-                                    <h1 class="text-sm text-slate-700 font-semibold">Nataly</h1>
-                                    <p class="text-sm text-gray-500">11:30 AM</p>
-                                    <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
-                                </div>
-                                <div class="cursor-pointer">
-                                    <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
-                                </div>
+
+            <!-- 1ST ROW -->
+            <div class="w-full flex flex-col py-3">
+                <div class="w-full flex flex-col justify-center items-start gap-2">
+                    <div class="w-full flex justify-between items-center gap-2">
+                        <div class="flex justify-start gap-2">
+                            <div class="w-[45px] h-[45px] rounded-full">
+                                <img src='{% static "images/avatar.svg" %}' alt="user profile"
+                                    class="w-full h-full object-cover">
                             </div>
-                            <!-- Add comment section -->
-                            <div
-                                class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
-                                <input type="text" placeholder="Add Comment..."
-                                    class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
-                                <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
-                                    <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
-                                </button>
+                            <div class="flex flex-col">
+                                <h1 class="text-sm text-slate-700 font-semibold">Nataly</h1>
+                                <p class="text-sm text-gray-500">11:30 AM</p>
                             </div>
                         </div>
+                        <div class="cursor-pointer">
+                            <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
+                        </div>
+                    </div>
 
-                        <div class="w-full flex flex-col py-3">
-                            <div class="w-full flex justify-start gap-2 items-center">
-                                <div class="w-[45px] h-[45px] rounded-full">
-                                    <img src='{% static "images/avatar2.png" %}' alt="user profile"
-                                        class="w-full h-full object-cover">
-                                </div>
-                                <div class="flex flex-col">
-                                    <h1 class="text-sm text-slate-700 font-semibold">Salim</h1>
-                                    <p class="text-sm text-gray-500">11:30 AM</p>
-                                    <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
-                                </div>
-                                <div class="cursor-pointer">
-                                    <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
-                                </div>
+                    <!-- Status -->
+                    <div class="w-full">
+                        <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
+                    </div>
+
+                    <!-- Add comment section -->
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
+                        <input type="text" placeholder="Add Comment..."
+                            class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
+                        <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
+                            <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 2NT ROW -->
+            <div class="w-full flex flex-col py-3">
+                <div class="w-full flex flex-col justify-center items-start gap-2">
+                    <div class="w-full flex justify-between items-center gap-2">
+                        <div class="flex justify-start gap-2">
+                            <div class="w-[45px] h-[45px] rounded-full">
+                                <img src='{% static "images/avatar2.png" %}' alt="user profile"
+                                    class="w-full h-full object-cover">
                             </div>
-                            <!-- Add comment section -->
-                            <div
-                                class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
-                                <input type="text" placeholder="Add Comment..."
-                                    class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
-                                <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
-                                    <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
-                                </button>
+                            <div class="flex flex-col">
+                                <h1 class="text-sm text-slate-700 font-semibold">Salim</h1>
+                                <p class="text-sm text-gray-500">11:30 AM</p>
                             </div>
                         </div>
+                        <div class="cursor-pointer">
+                            <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
+                        </div>
+                    </div>
 
-                        <div class="w-full flex flex-col py-3">
-                            <div class="w-full flex justify-start gap-2 items-center">
-                                <div class="w-[45px] h-[45px] rounded-full">
-                                    <img src='{% static "images/avatar3.png" %}' alt="user profile"
-                                        class="w-full h-full object-cover">
-                                </div>
-                                <div class="flex flex-col">
-                                    <h1 class="text-sm text-slate-700 font-semibold">Emile</h1>
-                                    <p class="text-sm text-gray-500">12:30 PM</p>
-                                    <p class="text-sm text-gray-500">Working - Create the Osina home page</p>
-                                </div>
-                                <div class="cursor-pointer">
-                                    <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
-                                </div>
+                    <!-- Status -->
+                    <div class="w-full">
+                        <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
+                    </div>
+
+                    <!-- Add comment section -->
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
+                        <input type="text" placeholder="Add Comment..."
+                            class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
+                        <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
+                            <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 3RD ROW -->
+            <div class="w-full flex flex-col py-3">
+                <div class="w-full flex flex-col justify-center items-start gap-2">
+                    <div class="w-full flex justify-between items-center gap-2">
+                        <div class="flex justify-start gap-2">
+                            <div class="w-[45px] h-[45px] rounded-full">
+                                <img src='{% static "images/avatar3.png" %}' alt="user profile"
+                                    class="w-full h-full object-cover">
                             </div>
-                            <!-- Add comment section -->
-                            <div
-                                class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
-                                <input type="text" placeholder="Add Comment..."
-                                    class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
-                                <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
-                                    <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
-                                </button>
+                            <div class="flex flex-col">
+                                <h1 class="text-sm text-slate-700 font-semibold">Emile</h1>
+                                <p class="text-sm text-gray-500">11:30 AM</p>
                             </div>
                         </div>
+                        <div class="cursor-pointer">
+                            <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
+                        </div>
+                    </div>
 
-                        <div class="w-full flex flex-col py-3">
-                            <div class="w-full flex justify-start gap-2 items-center">
-                                <div class="w-[45px] h-[45px] rounded-full">
-                                    <img src='{% static "images/avatar.svg" %}' alt="user profile"
-                                        class="w-full h-full object-cover">
-                                </div>
-                                <div class="flex flex-col">
-                                    <h1 class="text-sm text-slate-700 font-semibold">Nataly</h1>
-                                    <p class="text-sm text-gray-500">11:30 AM</p>
-                                    <p class="text-sm text-gray-500">Closed - Create Enooma home page</p>
-                                </div>
-                                <div class="cursor-pointer">
-                                    <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
-                                </div>
+                    <!-- Status -->
+                    <div class="w-full">
+                        <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
+                    </div>
+
+                    <!-- Add comment section -->
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
+                        <input type="text" placeholder="Add Comment..."
+                            class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
+                        <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
+                            <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 4TH ROW -->
+            <div class="w-full flex flex-col py-3">
+                <div class="w-full flex flex-col justify-center items-start gap-2">
+                    <div class="w-full flex justify-between items-center gap-2">
+                        <div class="flex justify-start gap-2">
+                            <div class="w-[45px] h-[45px] rounded-full">
+                                <img src='{% static "images/avatar.svg" %}' alt="user profile"
+                                    class="w-full h-full object-cover">
                             </div>
-                            <!-- Add comment section -->
-                            <div
-                                class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
-                                <input type="text" placeholder="Add Comment..."
-                                    class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
-                                <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
-                                    <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
-                                </button>
+                            <div class="flex flex-col">
+                                <h1 class="text-sm text-slate-700 font-semibold">Nataly</h1>
+                                <p class="text-sm text-gray-500">11:30 AM</p>
                             </div>
                         </div>
+                        <div class="cursor-pointer">
+                            <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
+                        </div>
+                    </div>
 
-                
+                    <!-- Status -->
+                    <div class="w-full">
+                        <p class="text-sm text-gray-500">Closed - Create the Osina home page</p>
+                    </div>
+
+                    <!-- Add comment section -->
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
+                        <input type="text" placeholder="Add Comment..."
+                            class="outline-none text-gray-500 p-2 w-[100%] text-sm h-[40px] rounded-tl-md rounded-bl-md">
+                        <button class="w-fit px-3 py-2 bg-slate-800 rounded-tr-md rounded-br-md">
+                            <i class="fa fa-send" style="color: white; font-size: 15px;"></i>
+                        </button>
                     </div>
                 </div>
             </div>
-
         </div>
+    </div>
+</div>
 
-        <!-- POPUP MODAL -->
-        <div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" id="popUpModal">
-            <div class="w-[95%] md:w-fit h-fit bg-white rounded-md p-9 relative">
-                <button class="absolute top-3 right-5 text-slate-800 text-xl cursor-pointer outline-none border-none"
-                    id="closeModalButton">
-                    <i class="fa fa-close"></i>
-                </button>
-                <iframe id="popupModalFrame" frameborder="0"></iframe>
-            </div>
-        </div>
+</div>
 
-      <script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>
+<!-- POPUP MODAL -->
+<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" id="popUpModal">
+    <div class="w-[95%] md:w-fit h-fit bg-white rounded-md p-9 relative">
+        <button class="absolute top-3 right-5 text-slate-800 text-xl cursor-pointer outline-none border-none"
+            id="closeModalButton">
+            <i class="fa fa-close"></i>
+        </button>
+        <iframe id="popupModalFrame" frameborder="0"></iframe>
     </div>
+</div>
+
+<script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>
+</div>
+
+<!---------------------- JS SCRIPTS -------------------->
+
+<!-- TO SHOW ALL THE ADDED NOTES BY THE USER WHEN CLICKING ON THE SHOW NOTES BUTTON -->
+<script type="text/javascript" src='{% static "js/show-notes.js" %}'></script>
 
 {% endblock content %}

osinaweb/templates/showpoints-modal.html

@@ -1,3 +1,5 @@
+{% load static %}
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -5,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Osina</title>
 
-    <link href="output.css" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 </head>

osinaweb/templates/task-details.html

@@ -7,7 +7,6 @@
     <title>Task Detail</title>
 
     <link href="output.css" rel="stylesheet">
-    <link href="../src/input.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 

osinaweb/templates/timeline-modal.html

@@ -1,16 +1,16 @@
+{% load static %}
+
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Osina</title>
 
-    <link href="output.css" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 </head>
-
 <body>
     <div id="hiddenContent">
         <h1 class="text-slate-800 text-2xl font-semibold text-center mb-2">Timeline</h1>

osinaweb/templates/update-status-modal.html

@@ -1,3 +1,5 @@
+{% load static %}
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -5,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Osina</title>
 
-    <link href="output.css" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
 </head>