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>
@@ -15,13 +18,93 @@
         <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>
+
+        <script>
+            // TO GET THE COLOR OF THE DIV
+            const colorOptions = document.querySelectorAll('.color-option');
+            const hexCodeDisplay = document.getElementById('hexCodeDisplay');
 
-        <div class="w-full flex justify-center items-center mt-4">
+            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/index.html

@@ -16,7 +16,7 @@
                     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">
+                    id="addNoteButton" data-modal-url="{% url 'addnote' %}">
                     <i class="fa fa-plus"></i>
                 </button>
             </div>
@@ -27,7 +27,7 @@
             id="notesContainer">
 
             {% for note in notes %}
-                        <div class="w-[16.33%] h-[150px] shadow-xl  p-5" style="background-color: {{note.color}}">
+            <div class="w-[16.33%] h-[150px] shadow-xl p-5 rounded-bl-lg" style="background-color: {{note.color}}">
                 <p class="text-base text-slate-800">{{note.text}}</p>
             </div>
             {% endfor %}
@@ -41,8 +41,7 @@
     <!-- LEFT SIDE / TASKS SECTION -->
     <div class="w-[74.5%]">
         <!-- TASK FILTERING BAR -->
-                    <div
+        <div class="w-full h-fit bg-white shadow-md rounded-md flex justify-center items-center gap-10 py-5 px-3">
-                        class="w-full h-fit bg-white shadow-md rounded-md flex justify-center items-center gap-10 py-5 px-3">
             <a class="text-xl text-gray-500">Tasks</a>
             <select name="" id=""
                 class="border border-gray-300 p-2 rounded-md outline-none w-[160px] text-gray-500 h-[40px]">
@@ -126,24 +125,23 @@
                             class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Close</button>
                         <button
                             class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
-                                        id="updateStatusButton">Update
+                            id="updateStatusButton" data-modal-url="{% url 'updatestatus' %}">Update
                             Status</button>
                         <button
                             class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
-                                        id="addTimeButton">Add
+                            id="addTimeButton" data-modal-url="{% url 'addtime' %}">Add
                             Time</button>
-                                    <button
+                        <button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-red-500 text-white"
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-red-500 text-white"
+                            id="deleteTaskButton" data-modal-url="{% url 'deletetask' %}">Delete</button>
-                                        id="deleteTaskButton">Delete</button>
                         <button
                             class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-blue-500 text-white">Update</button>
                         <button
                             class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
-                                        id="showPointsButton">Show
+                            id="showPointsButton" data-modal-url="{% url 'showpoints' %}">Show
                             Points</button>
                         <button
                             class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
-                                        id="addPointButton">Add
+                            id="addPointButton" data-modal-url="{% url 'addpoint' %}">Add
                             Point</button>
                         <a href="./task-details.html" class="w-[33.33%]">
                             <button
@@ -151,93 +149,7 @@
                         </a>
                         <button
                             class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 rounded-br-md"
-                                        id="timelineButton">Timline</button>
+                            id="timelineButton" data-modal-url="{% url 'timeline' %}">Timeline</button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- TASKS TABLE -->
-                    <div class="w-full h-fit bg-white p-3 rounded-md shadow-md mt-5">
-                        <div class="w-full bg-white h-fit rounded-md border border-gray-300">
-                            <!-- TABLE HEADER -->
-                            <div class="w-full flex h-[70px] rounded-t-md">
-                                <div
-                                    class="w-[55%] flex justify-center items-center border-r border-b border-gray-300 bg-green-700 rounded-tl-md">
-                                    <p class="text-xl text-white">Task Name</p>
-                                </div>
-                                <div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
-                                    <p class="text-xl text-slate-700">Open</p>
-                                </div>
-                                <div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
-                                    <p class="text-xl text-slate-700">1/2/2021</p>
-                                </div>
-                                <div class="w-[15%] flex justify-center items-center border-b border-gray-300">
-                                    <p class="text-xl text-slate-700">1/2/2022</p>
-                                </div>
-                            </div>
-
-                            <!-- TABLE BODY -->
-                            <div class="w-full h-fit flex">
-                                <!-- LEFT SIDE OF TABLE BODY -->
-                                <div class="w-[55%] h-fit bg-white p-3 rounded-bl-md">
-                                    <!-- 1st row -->
-                                    <div class="w-full flex flex-col gap-2">
-                                        <div class="flex justify-start items-center gap-2">
-                                            <p class="text-gray-400  text-base">Project:</p>
-                                            <p class="text-slate-700 text-base">Osina Project</p>
-                                        </div>
-
-                                        <div class="flex justify-start items-center gap-2">
-                                            <p class="text-gray-400  text-base">Epic:</p>
-                                            <p class="text-slate-700 text-base">epic</p>
-                                        </div>
-
-                                        <div class="flex justify-start items-center gap-2">
-                                            <p class="text-gray-400  text-base">Assigned To:</p>
-                                            <p class="text-slate-700 text-base">Nataly</p>
-                                        </div>
-
-                                        <div class="flex justify-start items-center gap-2">
-                                            <p class="text-gray-400  text-base">Files:</p>
-                                            <p class="text-slate-700 text-base">Documentation.pdf, Project.doc</p>
-                                        </div>
-                                        <div class="flex justify-start items-center gap-2">
-                                            <p class="text-gray-400  text-base">Tags:</p>
-                                            <p class="text-slate-700 text-base">Live Streaming, Media Streaming</p>
-                                        </div>
-
-                                        <div class="flex justify-start items-center gap-2">
-                                            <p class="text-gray-400  text-base">Extra:</p>
-                                            <p class="text-slate-700 text-base">Yes</p>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <!-- RIGHT SIDE OF TABLE BODY -->
-                                <div class="w-[45%] h-fit bg-white flex flex-wrap justify-start rounded-br-md">
-                                    <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Close</button>
-                                    <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Update
-                                        Status</button>
-                                    <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Add
-                                        Time</button>
-                                    <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-red-500 text-white">Delete</button>
-                                    <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-blue-500 text-white">Update</button>
-                                    <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Show
-                                        Points</button>
-                                    <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Add
-                                        Point</button>
-                                    <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Details</button>
-                                    <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 rounded-br-md">Timline</button>
                     </div>
                 </div>
             </div>
@@ -305,25 +217,32 @@
                         <button
                             class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Close</button>
                         <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Update
+                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
+                            id="updateStatusButton" data-modal-url="{% url 'updatestatus' %}">Update
                             Status</button>
                         <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Add
+                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
+                            id="addTimeButton" data-modal-url="{% url 'addtime' %}">Add
                             Time</button>
-                                    <button
+                        <button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-red-500 text-white"
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-red-500 text-white">Delete</button>
+                            id="deleteTaskButton" data-modal-url="{% url 'deletetask' %}">Delete</button>
                         <button
                             class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-blue-500 text-white">Update</button>
                         <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Show
+                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
+                            id="showPointsButton" data-modal-url="{% url 'showpoints' %}">Show
                             Points</button>
                         <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Add
+                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
+                            id="addPointButton" data-modal-url="{% url 'addpoint' %}">Add
                             Point</button>
+                        <a href="./task-details.html" class="w-[33.33%]">
                             <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Details</button>
+                                class="w-full p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Details</button>
+                        </a>
                         <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 rounded-br-md">Timline</button>
+                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 rounded-br-md"
+                            id="timelineButton" data-modal-url="{% url 'timeline' %}">Timeline</button>
                     </div>
                 </div>
             </div>
@@ -391,25 +310,32 @@
                         <button
                             class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Close</button>
                         <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Update
+                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
+                            id="updateStatusButton" data-modal-url="{% url 'updatestatus' %}">Update
                             Status</button>
                         <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Add
+                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
+                            id="addTimeButton" data-modal-url="{% url 'addtime' %}">Add
                             Time</button>
-                                    <button
+                        <button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-red-500 text-white"
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-red-500 text-white">Delete</button>
+                            id="deleteTaskButton" data-modal-url="{% url 'deletetask' %}">Delete</button>
                         <button
                             class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-blue-500 text-white">Update</button>
                         <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Show
+                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
+                            id="showPointsButton" data-modal-url="{% url 'showpoints' %}">Show
                             Points</button>
                         <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Add
+                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
+                            id="addPointButton" data-modal-url="{% url 'addpoint' %}">Add
                             Point</button>
+                        <a href="./task-details.html" class="w-[33.33%]">
                             <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Details</button>
+                                class="w-full p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Details</button>
+                        </a>
                         <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 rounded-br-md">Timline</button>
+                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 rounded-br-md"
+                            id="timelineButton" data-modal-url="{% url 'timeline' %}">Timeline</button>
                     </div>
                 </div>
             </div>
@@ -477,25 +403,32 @@
                         <button
                             class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Close</button>
                         <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Update
+                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
+                            id="updateStatusButton" data-modal-url="{% url 'updatestatus' %}">Update
                             Status</button>
                         <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Add
+                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
+                            id="addTimeButton" data-modal-url="{% url 'addtime' %}">Add
                             Time</button>
-                                    <button
+                        <button class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-red-500 text-white"
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-red-500 text-white">Delete</button>
+                            id="deleteTaskButton" data-modal-url="{% url 'deletetask' %}">Delete</button>
                         <button
                             class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-blue-500 text-white">Update</button>
                         <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Show
+                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
+                            id="showPointsButton" data-modal-url="{% url 'showpoints' %}">Show
                             Points</button>
                         <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Add
+                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500"
+                            id="addPointButton" data-modal-url="{% url 'addpoint' %}">Add
                             Point</button>
+                        <a href="./task-details.html" class="w-[33.33%]">
                             <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Details</button>
+                                class="w-full p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500">Details</button>
+                        </a>
                         <button
-                                        class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 rounded-br-md">Timline</button>
+                            class="w-[33.33%] p-2 border border-gray-200 text-base h-[70px] bg-gray-300 text-gray-500 rounded-br-md"
+                            id="timelineButton" data-modal-url="{% url 'timeline' %}">Timeline</button>
                     </div>
                 </div>
             </div>
@@ -507,8 +440,12 @@
         <h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
         <div class="w-full h-[300px] mt-2">
 
+
+            <!-- 1ST ROW -->
             <div class="w-full flex flex-col py-3">
-                            <div class="w-full flex justify-start gap-2 items-center">
+                <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">
@@ -516,15 +453,20 @@
                             <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>
                         <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
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
-                                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">
@@ -532,9 +474,13 @@
                         </button>
                     </div>
                 </div>
+            </div>
 
+            <!-- 2NT ROW -->
             <div class="w-full flex flex-col py-3">
-                            <div class="w-full flex justify-start gap-2 items-center">
+                <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">
@@ -542,15 +488,20 @@
                             <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>
                         <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
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
-                                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">
@@ -558,25 +509,34 @@
                         </button>
                     </div>
                 </div>
+            </div>
 
+            <!-- 3RD ROW -->
             <div class="w-full flex flex-col py-3">
-                            <div class="w-full flex justify-start gap-2 items-center">
+                <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>
                             <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">11:30 AM</p>
-                                    <p class="text-sm text-gray-500">Working - Create the Osina home page</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
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
-                                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">
@@ -584,9 +544,13 @@
                         </button>
                     </div>
                 </div>
+            </div>
 
+            <!-- 4TH ROW -->
             <div class="w-full flex flex-col py-3">
-                            <div class="w-full flex justify-start gap-2 items-center">
+                <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">
@@ -594,41 +558,20 @@
                             <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>
                         <div class="cursor-pointer">
                             <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
                         </div>
                     </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 class="w-full flex flex-col py-3">
+                    <!-- Status -->
-                            <div class="w-full flex justify-start gap-2 items-center">
+                    <div class="w-full">
-                                <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>
-                            </div>
                     <!-- Add comment section -->
-                            <div
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
-                                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">
@@ -639,12 +582,12 @@
             </div>
         </div>
     </div>
+</div>
 
 <!-- TICKETS SECTION -->
 <div class="w-full h-fit px-10 py-5">
     <!-- TICKETS FILTERING BAR -->
-                <div
+    <div class="w-full h-fit bg-white shadow-md rounded-md flex justify-center items-center gap-10 py-5 px-3">
-                    class="w-full h-fit bg-white shadow-md rounded-md flex justify-center items-center gap-10 py-5 px-3">
         <a class="text-xl text-gray-500">Tickets</a>
         <select name="" id=""
             class="border border-gray-300 p-2 rounded-md outline-none w-[160px] text-gray-500 h-[40px]">
@@ -716,13 +659,11 @@
                 <div class="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2">
                     <p class="text-sm text-gray-500 text-center">Development</p>
                 </div>
-                            <div
+                <div class="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2 bg-green-700">
-                                class="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2 bg-green-700">
                     <p class="text-sm text-white text-center">Open</p>
                 </div>
                 <div class="w-[5%] h-full flex justify-center items-center gap-3 p-2">
-                                <i class="fa fa-edit"
+                    <i class="fa fa-edit" style="color: cornflowerblue; font-size: 15px; cursor: pointer;"></i>
-                                    style="color: cornflowerblue; font-size: 15px; cursor: pointer;"></i>
                     <i class="fa fa-trash" style="color: red; font-size: 15px; cursor: pointer;"></i>
                 </div>
             </div>
@@ -747,13 +688,11 @@
                 <div class="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2">
                     <p class="text-sm text-gray-500 text-center">Development</p>
                 </div>
-                            <div
+                <div class="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2 bg-yellow-400">
-                                class="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2 bg-yellow-400">
                     <p class="text-sm text-white text-center">Working on</p>
                 </div>
                 <div class="w-[5%] h-full flex justify-center items-center gap-3 p-2">
-                                <i class="fa fa-edit"
+                    <i class="fa fa-edit" style="color: cornflowerblue; font-size: 15px; cursor: pointer;"></i>
-                                    style="color: cornflowerblue; font-size: 15px; cursor: pointer;"></i>
                     <i class="fa fa-trash" style="color: red; font-size: 15px; cursor: pointer;"></i>
                 </div>
             </div>
@@ -779,13 +718,11 @@
                 <div class="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2">
                     <p class="text-sm text-gray-500 text-center">Development</p>
                 </div>
-                            <div
+                <div class="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2 bg-blue-500">
-                                class="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2 bg-blue-500">
                     <p class="text-sm text-white text-center">Waiting for client reply</p>
                 </div>
                 <div class="w-[5%] h-full flex justify-center items-center gap-3 p-2">
-                                <i class="fa fa-edit"
+                    <i class="fa fa-edit" style="color: cornflowerblue; font-size: 15px; cursor: pointer;"></i>
-                                    style="color: cornflowerblue; font-size: 15px; cursor: pointer;"></i>
                     <i class="fa fa-trash" style="color: red; font-size: 15px; cursor: pointer;"></i>
                 </div>
             </div>
@@ -811,13 +748,11 @@
                 <div class="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2">
                     <p class="text-sm text-gray-500 text-center">Development</p>
                 </div>
-                            <div
+                <div class="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2 bg-green-700">
-                                class="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2 bg-green-700">
                     <p class="text-sm text-white text-center">Open</p>
                 </div>
                 <div class="w-[5%] h-full flex justify-center items-center gap-3 p-2">
-                                <i class="fa fa-edit"
+                    <i class="fa fa-edit" style="color: cornflowerblue; font-size: 15px; cursor: pointer;"></i>
-                                    style="color: cornflowerblue; font-size: 15px; cursor: pointer;"></i>
                     <i class="fa fa-trash" style="color: red; font-size: 15px; cursor: pointer;"></i>
                 </div>
             </div>
@@ -843,13 +778,11 @@
                 <div class="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2">
                     <p class="text-sm text-gray-500 text-center">Development</p>
                 </div>
-                            <div
+                <div class="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2 bg-red-500">
-                                class="w-[10%] h-full flex justify-center items-center border-r border-gray-300 p-2 bg-red-500">
                     <p class="text-sm text-white text-center">Closed</p>
                 </div>
                 <div class="w-[5%] h-full flex justify-center items-center gap-3 p-2">
-                                <i class="fa fa-edit"
+                    <i class="fa fa-edit" style="color: cornflowerblue; font-size: 15px; cursor: pointer;"></i>
-                                    style="color: cornflowerblue; font-size: 15px; cursor: pointer;"></i>
                     <i class="fa fa-trash" style="color: red; font-size: 14px; cursor: pointer;"></i>
                 </div>
             </div>
@@ -874,5 +807,9 @@
 
 </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/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>
@@ -230,9 +229,6 @@
     <!-- 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>
 
 </html>

osinaweb/templates/project-details.html

@@ -1,4 +1,3 @@
-
 {% extends "main.html" %}
 {%load static%}
 {% block content %}
@@ -25,7 +24,7 @@
                     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">
+                    id="addNoteButton" data-modal-url="{% url 'addnote' %}">
                     <i class="fa fa-plus"></i>
                 </button>
             </div>
@@ -65,12 +64,18 @@
 <div class="w-full flex items-stretch justify-between gap-[2.5%] px-10 pb-5">
     <!-- LEFT SIDE / TASK DETAIL SECTION -->
     <div class="w-[74.5%] bg-white h-fit rounded-md shadow-md p-5">
-                    <div class="w-full flex justify-between items-center relative">
+        <div class="flex flex-col justify-center items-center">
-                        <div
+            <h1 class="text-3xl text-yellow-500 font-semibold">{{project.name}}</h1>
-                            class="w-full h-[70px] flex flex-col justify-center items-center bg-green-700 rounded-md py-1">
+            <p class="text-yellow-500 text-base">{{project.project_id}}</p>
-                            <h1 class="text-3xl text-white font-semibold">{{project.name}}</h1>
-                            <p class="text-white text-base">{{project.project_id}}</p>
         </div>
+        <div
+            class="w-full h-[70px] flex justify-end items-center bg-gray-100 shadow-md rounded-md px-3 py-1 mt-4 gap-3">
+            <button
+                class="w-fit text-base px-3 py-2 bg-red-500 text-white outline-none border border-red-500 rounded-md cursor-pointer hover:bg-white hover:text-red-500">Delete
+                Project</button>
+            <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">Edit
+                Project</button>
         </div>
         <div class="w-full flex flex-col gap-4 mt-5">
             <div>
@@ -132,8 +137,7 @@
                     <div class="w-full border-t border-x border-gray-300 rounded-t-md mt-3">
                         <!-- HEADER -->
                         <div class="w-full h-[60px] flex items-center justify-between">
-                                        <div
+                            <div class="w-[70%] h-full border-r border-gray-300 flex justify-center items-center">
-                                            class="w-[70%] h-full border-r border-gray-300 flex justify-center items-center">
                                 <p class="text-sm">File Name</p>
                             </div>
                             <div class="w-[30%] h-full flex justify-center items-center">
@@ -144,10 +148,8 @@
                         <!-- BODY -->
                         <div class="w-full border-t border-gray-300">
                             <!-- 1ST ROW -->
-                                        <div
+                            <div class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
-                                            class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
+                                <div class="w-[70%] h-full border-r border-gray-300 flex justify-center items-center">
-                                            <div
-                                                class="w-[70%] h-full border-r border-gray-300 flex justify-center items-center">
                                     <p class="text-sm">Documentation.pdf</p>
                                 </div>
                                 <div class="w-[30%] h-full flex justify-center items-center">
@@ -156,10 +158,8 @@
                             </div>
 
                             <!-- 2nd ROW -->
-                                        <div
+                            <div class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
-                                            class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
+                                <div class="w-[70%] h-full border-r border-gray-300 flex justify-center items-center">
-                                            <div
-                                                class="w-[70%] h-full border-r border-gray-300 flex justify-center items-center">
                                     <p class="text-sm">database.docx</p>
                                 </div>
                                 <div class="w-[30%] h-full flex justify-center items-center">
@@ -178,12 +178,10 @@
                     <div class="w-full border-t border-x border-gray-300 rounded-t-md mt-3">
                         <!-- HEADER -->
                         <div class="w-full h-[60px] flex items-center justify-between">
-                                        <div
+                            <div class="w-[50%] h-full border-r border-gray-300 flex justify-center items-center">
-                                            class="w-[50%] h-full border-r border-gray-300 flex justify-center items-center">
                                 <p class="text-sm">Account</p>
                             </div>
-                                        <div
+                            <div class="w-[25%] border-r border-gray-300 h-full flex justify-center items-center">
-                                            class="w-[25%] border-r border-gray-300 h-full flex justify-center items-center">
                                 <p class="text-sm">Password</p>
                             </div>
                             <div class="w-[25%] h-full flex justify-center items-center">
@@ -194,14 +192,11 @@
                         <!-- BODY -->
                         <div class="w-full border-t border-gray-300">
                             <!-- 1ST ROW -->
-                                        <div
+                            <div class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
-                                            class="w-full h-[50px] flex justify-between items-center border-b border-gray-300">
+                                <div class="w-[50%] h-full border-r border-gray-300 flex justify-center items-center">
-                                            <div
-                                                class="w-[50%] h-full border-r border-gray-300 flex justify-center items-center">
                                     <p class="text-sm">nataly.aw@ositcom.net</p>
                                 </div>
-                                            <div
+                                <div class="w-[25%] border-r border-gray-300 h-full flex justify-center items-center">
-                                                class="w-[25%] border-r border-gray-300 h-full flex justify-center items-center">
                                     <p class="text-sm">12345678</p>
                                 </div>
                                 <div class="w-[25%] h-full flex justify-center items-center">
@@ -233,8 +228,7 @@
 
             <!-- RELATED TASK CONTAINER BASED ON THE CHOSEN EPIC -->
             <div class="w-full mt-5">
-                            <div
+                <div class="w-full bg-slate-300 rounded-md shadow-md h-fit p-5 flex justify-between items-center">
-                                class="w-full bg-slate-300 rounded-md shadow-md h-fit p-5 flex justify-between items-center">
                     <div>
                         <select id="epicSelect"
                             class="w-[250px] rounded-md border border-gray-300 p-3 outline-none text-gray-500 cursor-pointer">
@@ -247,15 +241,17 @@
                     </div>
                     <div class="w-full flex justify-end gap-[3%] pl-5">
                         <div class="w-[50%] justify-start items-center gap-2 hidden" id="epicDetails">
-                                        <p class="text-gray-500 font-light">Start Date: <span
+                            <p class="text-gray-500 font-light">Start Date: <span class="text-slate-800">1/2/2023</span>
-                                                class="text-slate-800">1/2/2023</span></p>
+                            </p>
-                                        <p class="text-gray-500 font-light">End Date: <span
+                            <p class="text-gray-500 font-light">End Date: <span class="text-slate-800">1/3/2023</span>
-                                                class="text-slate-800">1/3/2023</span></p>
+                            </p>
                         </div>
                         <div class="w-[50%] flex justify-end items-center gap-2">
+                            <a href="{% url 'createepic' %}">
                                 <button
                                 class="w-fit bg-blue-500 border border-blue-500 text-white text-base py-2 px-3 rounded-md hover:bg-transparent hover:text-blue-500 duration-300">Create
                                 Epic</button>
+                            </a>
                             <button id="createTaskButton"
                                 class="w-fit bg-blue-500 border border-blue-500 text-white text-base py-2 px-3 rounded-md cursor-not-allowed opacity-30 duration-300 epicButtons"
                                 disabled>Create
@@ -280,12 +276,10 @@
                                 class="w-[55%] flex justify-center items-center border-r border-b border-gray-300 bg-green-700 rounded-tl-md">
                                 <p class="text-xl text-white">Task Name</p>
                             </div>
-                                        <div
+                            <div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
-                                            class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
                                 <p class="text-xl text-slate-700">Open</p>
                             </div>
-                                        <div
+                            <div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
-                                            class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
                                 <p class="text-xl text-slate-700">1/2/2021</p>
                             </div>
                             <div class="w-[15%] flex justify-center items-center border-b border-gray-300">
@@ -376,12 +370,10 @@
                                 class="w-[55%] flex justify-center items-center border-r border-b border-gray-300 bg-green-700 rounded-tl-md">
                                 <p class="text-xl text-white">Task Name</p>
                             </div>
-                                        <div
+                            <div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
-                                            class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
                                 <p class="text-xl text-slate-700">Open</p>
                             </div>
-                                        <div
+                            <div class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
-                                            class="w-[15%] flex justify-center items-center border-r border-b border-gray-300">
                                 <p class="text-xl text-slate-700">1/2/2021</p>
                             </div>
                             <div class="w-[15%] flex justify-center items-center border-b border-gray-300">
@@ -467,29 +459,24 @@
             </div>
 
             <div class="mt-10 flex flex-col justify-center items-center w-full">
-                            <p class="text-xl text-gray-500">Total Extra Task Time : <span
+                <p class="text-xl text-gray-500">Total Extra Task Time : <span class="text-slate-800 font-semibold">46
-                                    class="text-slate-800 font-semibold">46 hrs and 50 min</span></p>
+                        hrs and 50 min</span></p>
-                            <p class="text-xl text-gray-500">Total Task Time : <span
+                <p class="text-xl text-gray-500">Total Task Time : <span class="text-slate-800 font-semibold">240 hrs
-                                    class="text-slate-800 font-semibold">240 hrs and 40 min</span></p>
+                        and 40 min</span></p>
             </div>
         </div>
-
-                    <div class="w-full flex justify-center items-center gap-4 mt-11">
-                        <button
-                            class="w-fit text-xl px-3 py-2 bg-red-500 text-white outline-none border border-red-500 rounded-md cursor-pointer hover:bg-white hover:text-red-500">Delete
-                            Project</button>
-                        <button
-                            class="w-fit text-xl 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">Edit
-                            Project</button>
-                    </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">
 
+
+            <!-- 1ST ROW -->
             <div class="w-full flex flex-col py-3">
-                            <div class="w-full flex justify-start gap-2 items-center">
+                <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">
@@ -497,15 +484,20 @@
                             <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>
                         <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
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
-                                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">
@@ -513,9 +505,13 @@
                         </button>
                     </div>
                 </div>
+            </div>
 
+            <!-- 2NT ROW -->
             <div class="w-full flex flex-col py-3">
-                            <div class="w-full flex justify-start gap-2 items-center">
+                <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">
@@ -523,15 +519,20 @@
                             <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>
                         <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
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
-                                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">
@@ -539,25 +540,34 @@
                         </button>
                     </div>
                 </div>
+            </div>
 
+            <!-- 3RD ROW -->
             <div class="w-full flex flex-col py-3">
-                            <div class="w-full flex justify-start gap-2 items-center">
+                <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>
                             <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">11:30 AM</p>
-                                    <p class="text-sm text-gray-500">Working - Create the Osina home page</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
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
-                                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">
@@ -565,9 +575,13 @@
                         </button>
                     </div>
                 </div>
+            </div>
 
+            <!-- 4TH ROW -->
             <div class="w-full flex flex-col py-3">
-                            <div class="w-full flex justify-start gap-2 items-center">
+                <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">
@@ -575,41 +589,20 @@
                             <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>
                         <div class="cursor-pointer">
                             <i class="fa fa-thumbs-up" style="color: rgb(184, 184, 184); font-size: 15px;"></i>
                         </div>
                     </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 class="w-full flex flex-col py-3">
+                    <!-- Status -->
-                            <div class="w-full flex justify-start gap-2 items-center">
+                    <div class="w-full">
-                                <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>
-                            </div>
                     <!-- Add comment section -->
-                            <div
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
-                                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">
@@ -621,6 +614,7 @@
         </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">
@@ -633,10 +627,13 @@
     </div>
 </div>
 <script type="text/javascript" src='{% static "js/pop-modals.js" %}'></script>
+</div>
 
 
-    </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>
 
 <!-- THE SCRIPT FOR THE EPICS BAR -->
 <script type="text/javascript" src='{% static "js/epics.js" %}'></script>

osinaweb/templates/projects.html

@@ -61,8 +61,8 @@
             <h1 class="text-slate-800 text-[30px] font-semibold">My Projects</h1>
 
             <!-- PROJECT FILTERING -->
-                        <div
+            <div class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex justify-between items-center">
-                            class="w-full py-4 px-3 bg-gray-200 rounded-md shadow-md mt-4 flex justify-start items-center gap-5">
+                <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">
 
@@ -74,26 +74,30 @@
                         <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>
 
             <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
+                        <div class="w-[10%] h-full border-r border-gray-300 flex justify-center items-center">
-                                        class="w-[10%] h-full border-r border-gray-300 flex justify-center items-center">
                             <p class="text-slate-800">#</p>
                         </div>
-                                    <div
+                        <div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
-                                        class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
                             <p>Project</p>
                         </div>
-                                    <div
+                        <div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
-                                        class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
                             <p class="text-slate-800">Client</p>
                         </div>
-                                    <div
+                        <div class="w-[15%] h-full border-r border-gray-300 flex justify-center items-center">
-                                        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">
@@ -111,18 +115,14 @@
                     <div class="w-full">
                         <!-- 1st row -->
                         {% for project in projects %}
-                                    <div
+                        <div class="w-full h-[60px] flex justify-between items-center border-b border-gray-300">
-                                        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">
-                                        <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
+                            <div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
-                                            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
+                            <div class="w-[30%] h-full border-r border-gray-300 flex justify-center items-center">
-                                            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' %}
@@ -155,6 +155,9 @@
                                         <i class="fa fa-eye"></i>
                                     </div>
                                 </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>
@@ -173,8 +176,12 @@
         <h1 class="text-2xl text-slate-700 text-center font-semibold">USERS ACTIVITY</h1>
         <div class="w-full h-[300px] mt-2">
 
+
+            <!-- 1ST ROW -->
             <div class="w-full flex flex-col py-3">
-                            <div class="w-full flex justify-start gap-2 items-center">
+                <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">
@@ -182,15 +189,20 @@
                             <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>
                         <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
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
-                                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">
@@ -198,9 +210,13 @@
                         </button>
                     </div>
                 </div>
+            </div>
 
+            <!-- 2NT ROW -->
             <div class="w-full flex flex-col py-3">
-                            <div class="w-full flex justify-start gap-2 items-center">
+                <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">
@@ -208,15 +224,20 @@
                             <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>
                         <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
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
-                                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">
@@ -224,25 +245,34 @@
                         </button>
                     </div>
                 </div>
+            </div>
 
+            <!-- 3RD ROW -->
             <div class="w-full flex flex-col py-3">
-                            <div class="w-full flex justify-start gap-2 items-center">
+                <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>
                             <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">11:30 AM</p>
-                                    <p class="text-sm text-gray-500">Working - Create the Osina home page</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
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
-                                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">
@@ -250,9 +280,13 @@
                         </button>
                     </div>
                 </div>
+            </div>
 
+            <!-- 4TH ROW -->
             <div class="w-full flex flex-col py-3">
-                            <div class="w-full flex justify-start gap-2 items-center">
+                <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">
@@ -260,15 +294,20 @@
                             <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>
                         <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
+                    <div class="w-full h-fit flex justify-between items-center border border-gray-200 mt-2 rounded-md">
-                                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">
@@ -276,8 +315,7 @@
                         </button>
                     </div>
                 </div>
-
+            </div>
-                
         </div>
     </div>
 </div>
@@ -298,4 +336,9 @@
 <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>