New changes.

osinaweb/input.css

@@ -67,7 +67,7 @@
 
 
 
-/* TO ANIMATION THE UER ACTIVITY FIXED BUTTON */
+/* TO ANIMATE THE USER ACTIVITY FIXED BUTTON */
 @keyframes zoomInOut {
 
     0%,
@@ -78,9 +78,7 @@
 
     50% {
         transform: scale(1.2);
-        /* Adjust the scale factor as needed */
         opacity: 1;
-        /* Adjust the opacity as needed */
     }
 }
 
@@ -89,6 +87,25 @@
 }
 
 
+/* TO ANIMATE THE CONNECTED USERS GREEN DOT */
+@keyframes pop {
+    0% {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(1.1);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+.connectedUsersDot {
+    animation: pop 1s infinite ease-in-out;
+}
+
 /* DRAGGABLE SLIDER */
 .swiper-container {
     width: 100%;

osinaweb/static/dist/output.css

@@ -650,6 +650,10 @@ video {
   position: relative;
 }
 
+.inset-0 {
+  inset: 0px;
+}
+
 .inset-x-0 {
   left: 0px;
   right: 0px;
@@ -699,6 +703,10 @@ video {
   right: 1.25rem;
 }
 
+.top-0 {
+  top: 0px;
+}
+
 .top-1 {
   top: 0.25rem;
 }
@@ -828,6 +836,10 @@ video {
   display: none;
 }
 
+.h-1 {
+  height: 0.25rem;
+}
+
 .h-14 {
   height: 3.5rem;
 }
@@ -848,6 +860,10 @@ video {
   height: 150px;
 }
 
+.h-\[18px\] {
+  height: 18px;
+}
+
 .h-\[25px\] {
   height: 25px;
 }
@@ -905,6 +921,10 @@ video {
   height: 100vh;
 }
 
+.w-1 {
+  width: 0.25rem;
+}
+
 .w-48 {
   width: 12rem;
 }
@@ -941,6 +961,10 @@ video {
   width: 160px;
 }
 
+.w-\[18px\] {
+  width: 18px;
+}
+
 .w-\[20\%\] {
   width: 20%;
 }
@@ -1005,10 +1029,6 @@ video {
   width: 50%;
 }
 
-.w-\[500px\] {
-  width: 500px;
-}
-
 .w-\[50px\] {
   width: 50px;
 }
@@ -1033,6 +1053,10 @@ video {
   width: 80px;
 }
 
+.w-\[90\%\] {
+  width: 90%;
+}
+
 .w-\[95\%\] {
   width: 95%;
 }
@@ -1295,6 +1319,10 @@ video {
   border-bottom-right-radius: 0.375rem;
 }
 
+.rounded-tl-full {
+  border-top-left-radius: 9999px;
+}
+
 .rounded-tl-md {
   border-top-left-radius: 0.375rem;
 }
@@ -1377,6 +1405,11 @@ video {
   border-color: rgb(194 65 12 / var(--tw-border-opacity));
 }
 
+.border-red-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(248 113 113 / var(--tw-border-opacity));
+}
+
 .border-red-500 {
   --tw-border-opacity: 1;
   border-color: rgb(239 68 68 / var(--tw-border-opacity));
@@ -1607,6 +1640,84 @@ video {
   --tw-bg-opacity: 0.6;
 }
 
+.bg-gradient-to-b {
+  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
+}
+
+.bg-gradient-to-br {
+  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
+}
+
+.bg-gradient-to-l {
+  background-image: linear-gradient(to left, var(--tw-gradient-stops));
+}
+
+.bg-gradient-to-r {
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+}
+
+.from-green-400 {
+  --tw-gradient-from: #4ade80 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-green-500 {
+  --tw-gradient-from: #22c55e var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-green-600 {
+  --tw-gradient-from: #16a34a var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(22 163 74 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-green-700 {
+  --tw-gradient-from: #15803d var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(21 128 61 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-white {
+  --tw-gradient-from: #fff var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.via-green-500 {
+  --tw-gradient-to: rgb(34 197 94 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #22c55e var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-green-600 {
+  --tw-gradient-to: rgb(22 163 74 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #16a34a var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-green-700 {
+  --tw-gradient-to: rgb(21 128 61 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #15803d var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-transparent {
+  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.to-green-700 {
+  --tw-gradient-to: #15803d var(--tw-gradient-to-position);
+}
+
+.to-green-800 {
+  --tw-gradient-to: #166534 var(--tw-gradient-to-position);
+}
+
+.to-transparent {
+  --tw-gradient-to: transparent var(--tw-gradient-to-position);
+}
+
 .stroke-black {
   stroke: #000;
 }
@@ -1852,6 +1963,11 @@ video {
   color: rgb(194 65 12 / var(--tw-text-opacity));
 }
 
+.text-red-400 {
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-text-opacity));
+}
+
 .text-red-500 {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));
@@ -2051,7 +2167,7 @@ video {
   }
 }
 
-/* TO ANIMATION THE UER ACTIVITY FIXED BUTTON */
+/* TO ANIMATE THE USER ACTIVITY FIXED BUTTON */
 
 @keyframes zoomInOut {
   0%,
@@ -2062,9 +2178,7 @@ video {
 
   50% {
     transform: scale(1.2);
-    /* Adjust the scale factor as needed */
     opacity: 1;
-    /* Adjust the opacity as needed */
   }
 }
 
@@ -2072,6 +2186,26 @@ video {
   animation: zoomInOut 1.5s infinite;
 }
 
+/* TO ANIMATE THE CONNECTED USERS GREEN DOT */
+
+@keyframes pop {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.1);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+.connectedUsersDot {
+  animation: pop 1s infinite ease-in-out;
+}
+
 /* DRAGGABLE SLIDER */
 
 .swiper-container {
@@ -2162,21 +2296,13 @@ video {
   outline-offset: 2px;
 }
 
-.group:hover .group-hover\:flex {
-  display: flex;
-}
-
 @media (min-width: 650px) {
-  .s\:h-\[35px\] {
-    height: 35px;
-  }
-
   .s\:h-\[50px\] {
     height: 50px;
   }
 
-  .s\:w-\[35px\] {
-    width: 35px;
+  .s\:w-\[500px\] {
+    width: 500px;
   }
 
   .s\:w-\[50px\] {
@@ -2204,6 +2330,11 @@ video {
     padding-left: 2.25rem;
     padding-right: 2.25rem;
   }
+
+  .s\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
 }
 
 @media (min-width: 798px) {

osinaweb/templates/login.html

@@ -19,7 +19,7 @@
         <div class="w-full flex justify-center items-center mt-[5%]">
             <h1 class="text-[50px] text-slate-800 font-semibold">OSINA</h1>
         </div>
-        <div class="w-[500px] h-fit rounded-md bg-white shadow-lg mt-5 flex flex-col items-center-center pt-3 pb-5 px-3">
+        <div class="w-[90%] s:w-[500px] h-fit rounded-md bg-white shadow-lg mt-5 flex flex-col items-center pt-3 pb-5 px-3">
             <h1 class="text-blue-500 text-[25px] text-center font-light mt-2">Login To Dashboard</h1>
             <form class="w-full mt-5"  method="post" action="{% url 'signin' %}">
                 {% csrf_token %}
@@ -35,7 +35,7 @@
                     <p class="text-base text-gray-400 font-light">Keep me logged in</p>
                 </div>
                 <div class="w-full flex justify-center items-center mt-5">
-                    <button type="submit" class="w-full h-[45px] bg-blue-500 border border-blue-500 text-white text-xl rounded-md font-medium hover:bg-white hover:text-blue-500 duration-300">LOGIN</button>
+                    <button type="submit" class="w-full h-[45px] bg-blue-500 border border-blue-500 text-white text-base s:text-xl rounded-md font-medium hover:bg-white hover:text-blue-500 duration-300">LOGIN</button>
                 </div>
                 <div class="mt-3 w-full flex justify-center items-center">
                     <p class="text-base text-gray-400 font-light cursor-pointer">Forgot Password?</p>

osinaweb/templates/main.html

@@ -286,11 +286,13 @@
             <div class="w-full h-fit grid grid-cols-1 xxlg1:grid-cols-3 gap-5 px-5 s:px-9 py-5">
                 <div class="h-[150px] bg-white shadow-md rounded-md block xxlg1:hidden">
                     <div
-                        class="px-5 py-3 bg-slate-700 rounded-t-md flex justify-between items-center text-white text-[22px] font-bold">
-                        <p>Recent Status</p>
+                        class=" bg-slate-700 rounded-t-md flex justify-between items-center text-white text-[22px] font-bold h-[50px]">
+                        <div class="px-3">
+                            <p>Recent Status</p>
+                        </div>
 
                         <button
-                            class="w-[30px] h-[30px] rounded-full p-2 bg-gray-300 text-slate-700 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md addStatusButtonMobile"
+                            class="h-full rounded-tr-md px-4 bg-gray-300 text-slate-700 text-[18px] outline-none border-none cursor-pointer flex justify-center items-center shadow-md addStatusButtonMobile"
                             data-modal-url="{% url 'statusmobilemodal' %}">
                             <i class="fa fa-plus"></i>
                         </button>
@@ -304,11 +306,11 @@
                     <div class="w-full h-full flex flex-col justify-between items-center">
                         <div class="w-full flex justify-between items-center">
                             <p class="text-[22px] text-slate-800 font-bold uppercase">Tasks</p>
-                            <i class="fa fa-tasks" style="font-size: 30px; color: green;"></i>
+                            <i class="fa fa-tasks" style="font-size: 30px; color: salmon;"></i>
                         </div>
                         <div
-                            class="w-[60px] h-[60px] bg-white border-2 rounded-full border-green-700 flex justify-center items-center">
-                            <p class="text-green-700 text-xl font-semibold">{{total_tasks}}</p>
+                            class="w-[60px] h-[60px] bg-white border-2 rounded-full border-red-400 flex justify-center items-center">
+                            <p class="text-red-400 text-xl font-semibold">{{total_tasks}}</p>
                         </div>
                     </div>
                 </div>
@@ -326,116 +328,16 @@
                     </div>
                 </div>
 
-                <div class="h-fit md:h-[150px] bg-white shadow-md rounded-md p-5 flex flex-col gap-3">
-                    <div class="w-full flex justify-between items-center">
-                        <p class="text-[22px] text-slate-800 font-bold uppercase">Connected Users</p>
-                        <i class="fa fa-users" style="font-size: 30px; color: salmon;"></i>
-                    </div>
-                    <div class="flex flex-wrap gap-2">
-                        <div class="relative group">
-                            <div
-                                class="userName absolute w-fit py-2 px-2 bg-black bg-opacity-50 text-white text-sm whitespace-nowrap bottom-10 group-hover:flex duration-500 hidden">
-                                <p>Salim Elliye</p>
-                            </div>
-                            <div class="w-[30px] s:w-[35px] h-[30px] s:h-[35px] rounded-full cursor-pointer userImage">
-                                <img src="{% static 'images/1669023415919.jpeg' %}" alt="User Profile"
-                                    class="w-full h-full rounded-full object-cover">
-                            </div>
-                        </div>
-
-
-                        <div class="relative group">
-                            <div
-                                class="userName absolute w-fit py-2 px-2 bg-black bg-opacity-50 text-white text-sm whitespace-nowrap bottom-10 group-hover:flex duration-500 hidden">
-                                <p>Salim Elliye</p>
-                            </div>
-                            <div class="w-[30px] s:w-[35px] h-[30px] s:h-[35px] rounded-full cursor-pointer userImage">
-                                <img src="{% static 'images/1669023415919.jpeg' %}" alt="User Profile"
-                                    class="w-full h-full rounded-full object-cover">
-                            </div>
-                        </div>
-
-                        <div class="relative group">
-                            <div
-                                class="userName absolute w-fit py-2 px-2 bg-black bg-opacity-50 text-white text-sm whitespace-nowrap bottom-10 group-hover:flex duration-500 hidden">
-                                <p>Salim Elliye</p>
-                            </div>
-                            <div class="w-[30px] s:w-[35px] h-[30px] s:h-[35px] rounded-full cursor-pointer userImage">
-                                <img src="{% static 'images/1669023415919.jpeg' %}" alt="User Profile"
-                                    class="w-full h-full rounded-full object-cover">
-                            </div>
-                        </div>
-
-
-                        <div class="relative group">
-                            <div
-                                class="userName absolute w-fit py-2 px-2 bg-black bg-opacity-50 text-white text-sm whitespace-nowrap bottom-10 group-hover:flex duration-500 hidden">
-                                <p>Salim Elliye</p>
-                            </div>
-                            <div class="w-[30px] s:w-[35px] h-[30px] s:h-[35px] rounded-full cursor-pointer userImage">
-                                <img src="{% static 'images/1669023415919.jpeg' %}" alt="User Profile"
-                                    class="w-full h-full rounded-full object-cover">
-                            </div>
-                        </div>
-
-
-                        <div class="relative group">
-                            <div
-                                class="userName absolute w-fit py-2 px-2 bg-black bg-opacity-50 text-white text-sm whitespace-nowrap bottom-10 group-hover:flex duration-500 hidden">
-                                <p>Salim Elliye</p>
-                            </div>
-                            <div class="w-[30px] s:w-[35px] h-[30px] s:h-[35px] rounded-full cursor-pointer userImage">
-                                <img src="{% static 'images/1669023415919.jpeg' %}" alt="User Profile"
-                                    class="w-full h-full rounded-full object-cover">
-                            </div>
-                        </div>
-
-
-                        <div class="relative group">
-                            <div
-                                class="userName absolute w-fit py-2 px-2 bg-black bg-opacity-50 text-white text-sm whitespace-nowrap bottom-10 group-hover:flex duration-500 hidden">
-                                <p>Salim Elliye</p>
-                            </div>
-                            <div class="w-[30px] s:w-[35px] h-[30px] s:h-[35px] rounded-full cursor-pointer userImage">
-                                <img src="{% static 'images/1669023415919.jpeg' %}" alt="User Profile"
-                                    class="w-full h-full rounded-full object-cover">
-                            </div>
-                        </div>
-
-
-                        <div class="relative group">
-                            <div
-                                class="userName absolute w-fit py-2 px-2 bg-black bg-opacity-50 text-white text-sm whitespace-nowrap bottom-10 group-hover:flex duration-500 hidden">
-                                <p>Salim Elliye</p>
-                            </div>
-                            <div class="w-[30px] s:w-[35px] h-[30px] s:h-[35px] rounded-full cursor-pointer userImage">
-                                <img src="{% static 'images/1669023415919.jpeg' %}" alt="User Profile"
-                                    class="w-full h-full rounded-full object-cover">
-                            </div>
-                        </div>
-
-                        <div class="relative group">
-                            <div
-                                class="userName absolute w-fit py-2 px-2 bg-black bg-opacity-50 text-white text-sm whitespace-nowrap bottom-10 group-hover:flex duration-500 hidden">
-                                <p>Salim Elliye</p>
-                            </div>
-                            <div class="w-[30px] s:w-[35px] h-[30px] s:h-[35px] rounded-full cursor-pointer userImage">
-                                <img src="{% static 'images/1669023415919.jpeg' %}" alt="User Profile"
-                                    class="w-full h-full rounded-full object-cover">
-                            </div>
+                <div class="h-fit md:h-[150px] bg-white shadow-md rounded-md p-5 cursor-pointer">
+                    <div class="w-full h-full flex flex-col justify-between items-center">
+                        <div class="w-full flex justify-between items-center">
+                            <p class="text-[22px] text-slate-800 font-bold uppercase">Connected Users</p>
+                            <div class="w-[18px] h-[18px] bg-gradient-to-r from-green-500 via-green-600 to-green-700 rounded-full shadow-md border border-gray-200 connectedUsersDot"></div>
                         </div>
-
-                        <div class="relative group">
-                            <div
-                                class="userName absolute w-fit py-2 px-2 bg-black bg-opacity-50 text-white text-sm whitespace-nowrap bottom-10 group-hover:flex duration-500 hidden">
-                                <p>Salim Elliye</p>
-                            </div>
-                            <div class="w-[30px] s:w-[35px] h-[30px] s:h-[35px] rounded-full cursor-pointer userImage">
-                                <img src="{% static 'images/1669023415919.jpeg' %}" alt="User Profile"
-                                    class="w-full h-full rounded-full object-cover">
-                            </div>
+                        <div
+                            class="w-[60px] h-[60px] bg-white border-2 rounded-full border-green-700 flex justify-center items-center">
+                            <p class="text-green-700 text-xl font-semibold">2</p>
                         </div>
-
                     </div>
                 </div>
 

osinaweb/templates/recent-status.html

@@ -1,7 +1,7 @@
 {% load static %}
 
 <div>
-    <p class="text-sm text-gray-500 truncate max-w-2xl">Recent Status: <span
+    <p class="text-sm text-gray-500 truncate max-w-xl">Recent Status: <span
             class="text-slate-700 font-semibold">{{last_status.text}}</span></p>
     <p class="text-sm text-gray-500">Last update:
         {% if last_status.date == current_date %}