added user profile with some features!

.gitignore

@@ -0,0 +1,2 @@
+bootstrap-simple-admin-template-main
+database/connect.php

assets/css/user.css

@@ -0,0 +1,60 @@
+body{
+    color: #1a202c;
+    text-align: left;
+    background-color: #e2e8f0;    
+}
+.main-body {
+    padding: 15px;
+}
+.card {
+    box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
+}
+
+.card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    background-color: #fff;
+    background-clip: border-box;
+    border: 0 solid transparent;
+    border-radius: .25rem;
+    margin-bottom: 1.5rem;
+    box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%), 0 2px 6px 0 rgb(206 206 238 / 54%);
+}
+.me-2 {
+    margin-right: .5rem!important;
+}
+
+.card-body {
+    flex: 1 1 auto;
+    min-height: 1px;
+    padding: 1rem;
+}
+
+
+
+/* DRAG AND DROP BOX */
+.droparea {
+    margin: 1rem auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 384px;
+    max-width: 100%;
+    height: 160px;
+    border: 4px dashed grey;
+    border-radius: 15px;
+  }
+
+  .droparea i {
+    font-size: 3rem;
+    flex-grow: 1;
+    padding-top: 1rem;
+  }
+
+  .green-border {
+    border-color: green;
+  }

auth/auth.js → assets/js/auth.js

@@ -156,7 +156,7 @@ function authenticate(form, filepath) {
 			`An error has occurred, most likely due to an attempt to execute`,
 			`server-side scripts on a GitHub page, which is not permitted.`, 
 			`Please run this project on a PHP-supported server for seamless functionality.`,
-			`\nThank you for your understanding and cooperation.\n Ignore: ${error}`
+			`\nThank you for your understanding and cooperation.`
 		];
 		alert(err_msg.join(" "));
 		window.location.reload();

assets/js/common.js

@@ -15,9 +15,12 @@ $(function () {
       dataType: 'json',
       success: function (result) {
         if (result.isLoggedIn) {
-          var div = $('#status');
-          div.find('a').eq(0).attr('href', '#').text('Profile');
-          div.find('a').eq(1).attr('href', baseURL + "/backend/logout.inc.php").text('Log Out');
+          $('#login-false').addClass("visually-hidden");
+          $('#login-true').removeClass("visually-hidden");
+          $('#login-true > a').append(" &nbsp" + result.name);
+        } else {
+          $('#login-false').removeClass("visually-hidden");
+          $('#login-true').addClass("visually-hidden");
         }
       },
       error: function (xhr, status, error) {
@@ -27,7 +30,7 @@ $(function () {
           `Please run this project on a PHP-supported server for seamless functionality.`,
           `\nThank you for your understanding and cooperation.\n Ignore:`
         ];
-        console.error(err_msg, error);
+        console.error(err_msg.join(" "), error);
       }
     });
 

assets/js/user.js

@@ -0,0 +1,34 @@
+const initApp = () => {
+  const droparea = document.querySelector('.droparea');
+
+  const active = () => droparea.classList.add("green-border");
+
+  const inactive = () => droparea.classList.remove("green-border");
+
+  const prevents = (e) => e.preventDefault();
+
+  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(evtName => {
+      droparea.addEventListener(evtName, prevents);
+  });
+
+  ['dragenter', 'dragover'].forEach(evtName => {
+      droparea.addEventListener(evtName, active);
+  });
+
+  ['dragleave', 'drop'].forEach(evtName => {
+      droparea.addEventListener(evtName, inactive);
+  });
+
+  droparea.addEventListener("drop", handleDrop);
+
+}
+
+document.addEventListener("DOMContentLoaded", initApp);
+
+const handleDrop = (e) => {
+  const dt = e.dataTransfer;
+  const files = dt.files;
+  const fileArray = [...files];
+  console.log(files); // FileList
+  console.log(fileArray);
+}