fix statusmessage

assets/script.js

@@ -1,4 +1,30 @@
 let UserInfo;
+
+function handleResponse(data, successMessage, failureMessage) {
+    const statusMessageContainer = document.getElementById("statusMessageContainer");
+
+    const statusMessage = document.createElement("div");
+    statusMessage.classList.add("status-message");
+
+    if (data.Status === 'Success') {
+        statusMessage.innerText = successMessage;
+        statusMessage.classList.add("success");
+    } else {
+        statusMessage.innerText = failureMessage;
+        statusMessage.classList.add("failure");
+    }
+
+    statusMessageContainer.appendChild(statusMessage);
+
+    // Automatically remove the message after 3 seconds
+    setTimeout(() => {
+        statusMessage.style.opacity = "0";
+        setTimeout(() => {
+            statusMessage.remove();
+        }, 500);
+    }, 3000);
+}
+
 async function doAction(url, requestData, successMessage, failureMessage, silent = false) {
     try {
         const params = new URLSearchParams();

assets/style.css

@@ -27,25 +27,41 @@ body {
     align-items: center;
 }
 
+nav, footer {
+    padding: 1.2rem 1rem;
+    background-color: rgba(0, 0, 0, 0.2);
+    -webkit-box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.2);
+    box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.2);
+}
+
+#navbar_container, #page_container, #footer_container {
+    width: 100%;
+}
+
 nav {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    height: 75px !important;
+    position: relative;
+    z-index: 500;
 }
 
-ul {
+ul, header ul, header ul li, ul.navpage_list {
     display: flex;
     flex-direction: row;
     gap: 2.5rem;
     list-style: none;
     padding-left: 0;
+    width: fit-content;
 }
 
-li {
+li, li.navpage_item {
     list-style: none;
 }
 
-li a {
+li a, li.navpage_item {
     position: relative;
     padding-bottom: 0.45rem;
     color: var(--primary-text);
@@ -53,18 +69,6 @@ li a {
     transition: all 0.3s ease;
 }
 
-/*li a::after {
-    content: "";
-    position: absolute;
-    height: 4px;
-    width: 0;
-    bottom: 0;
-    left: 0;
-    background-color: var(--primary);
-    transition: all 0.3s ease;
-    border-radius: 15px;
-}*/
-
 li a:hover::after {
     width: 85%;
     margin: 0 auto;
@@ -110,11 +114,10 @@ header {
     align-items: center;
     text-align: center;
 }
-header h1 {
+
+header h1, header a {
     margin: 0;
     padding: 0;
-}
-header a {
     color: var(--primary);
 }
 
@@ -124,27 +127,11 @@ header hr {
     width: 30%;
 }
 
-.navsite_list{
+.navsite_list, .navpage_list, .navsite_item, .navsite_item:hover .navpage_list, .navsite_item:not(:hover) .navpage_list {
     display: flex;
     flex-direction: row;
     gap: 3.25rem;
 }
-.navpage_list{
-    display: none;
-    flex-direction: column;
-}
-
-.navsite_item {
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    width: 120px;
-}
-
-.navsite_item:hover .navpage_list{
-    display: flex !important;
-}
-
 
 .navpage_list {
     background-color: var(--third-bg);
@@ -156,7 +143,7 @@ header hr {
     border: 0 solid transparent;
     transition: max-height 0.3s ease, border 0.325s ease;
     position: relative;
-    z-index: 999;
+    z-index: 2;
 }
 
 .navsite_item:hover .navpage_list {
@@ -170,81 +157,49 @@ header hr {
     transition-delay: 0.1s;
 }
 
-
+li.navpage_item {
-li.navpage_item{
     padding-left: 20px;
     padding-right: 20px;
 }
 
-ul.navpage_list{
+ul.navpage_list {
     gap: 10px;
 }
 
-header ul {
+.feature-list, .feature-list-ul, .feature-list-ul ul {
-    display: flex;
-    flex-direction: column;
-    gap: 0;
-    text-align: left;
-    width: fit-content;
-}
-header ul li {
-    list-style: circle;
-    width: fit-content;
-}
-
-.feature-list {
     margin: auto;
     width: fit-content;
     display: block;
 }
 
-.feature-list-ul {
+.status-message {
-    margin: auto;
+    background-color: #dff0d8; /* Success background color */
-}
+    border: 1px solid #3c763d; /* Success border color */
-
+    color: #3c763d; /* Success text color */
-.feature-list-ul ul {
+    padding: 15px;
-    margin-top: 5px;
+    margin-bottom: 10px;
-    margin-left: 20px;
+    opacity: 1;
-}
-
-#StatusMessage {
-    display: none;
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    padding: 10px;
-    background-color: var(--third-bg);
-    color: var(--primary-text);
-    border-radius: 5px;
-    opacity: 0;
     transition: opacity 0.5s ease-in-out;
 }
 
+.status-message.failure {
+    background-color: #f2dede; /* Failure background color */
+    border: 1px solid #a94442; /* Failure border color */
+    color: #a94442; /* Failure text color */
+}
+
 table.list-table > tbody, table.list-table > tbody > th, table.list-table > tbody > tr, table.list-table > tbody > tr > td {
     border: 2px solid var(--primary);
     border-collapse: collapse;
 }
 
-/*  <DASHBOARD STYLING>  */
-/*  ZAČÍNAJ VŠETKO S ".dashboard"  */
-
-
 .dashboard {
     width: 100%;
     height: 100%;
     text-align: center;
 }
 
-/*  </DASHBOARD STYLING>  */
+#loginForm input, #register_Form input {
-
-#loginForm input {
-    border-radius: 50px;
-    background: none;
-    border: 2px solid var(--primary);
-    width: 175px;
-}
-
-#register_Form input {
     border-radius: 50px;
     background: none;
     border: 2px solid var(--primary);
@@ -253,22 +208,4 @@ table.list-table > tbody, table.list-table > tbody > th, table.list-table > tbod
 
 #page_container {
     flex-grow: 1;
-}
-
-nav, footer {
-    padding: 1.2rem 1rem;
-    background-color: rgba(0, 0, 0, 0.2);
-    -webkit-box-shadow: 0 20px 28px 0 rgba(0,0,0,0.2);
-    -moz-box-shadow: 0 20px 28px 0 rgba(0,0,0,0.2);
-    box-shadow: 0 20px 28px 0 rgba(0,0,0,0.2);
-}
-
-#navbar_container {
-    height: 75px !important;
-    position: relative;
-    z-index: 500;
-}
-
-#navbar_container, #page_container, #footer_container {
-    width: 100%;
 }

templates/skeleton.html

@@ -15,6 +15,7 @@
     <div id="navbar_container">
         __TEMPLATE__NAV__
     </div>
+    <div id="statusMessageContainer"></div>
     <div id="page_container">
         __TEMPLATE__PAGE__
     </div>