merge from notif to dev (#6)

src/index.php

@@ -1,13 +1,15 @@
 <?php 
 session_start();
 include "config/db.php";
+include "notif.php";
 
 if(isset($_POST['login'])){
     $username = $_POST['username'];
     $password = $_POST['password'];
 
     if(empty($username)||empty($password)){
-        echo "semua data    harus terisi";
+        $msg = "Data Harus Lengkap !";
+        echo "<script>showNotif(" . json_encode($msg) . ");</script>";
     }else{
         $sql = "SELECT * FROM users WHERE username =?";
         $stmt = $db -> prepare($sql);
@@ -21,13 +23,15 @@ if(isset($_POST['login'])){
                 $_SESSION['loggedin']='true';   
                 $_SESSION['username']=$user['username'];  
                 $_SESSION['id']=$user['id']; 
-                header("location:leaderboard.php");
+                header("location:onboard.php");
                 exit();
             }else{
-                echo "password salah";
+                $msg = "Password Salah !";
+                echo "<script>showNotif(" . json_encode($msg) . ");</script>";
             }
         }else{
-            echo "username salah";
+            $msg = "Username tidak ditemukan !";
+                echo "<script>showNotif(" . json_encode($msg) . ");</script>";
         }
         $stmt->close();
     }
@@ -56,6 +60,7 @@ $db->close();
             <button type="submit" name="login" placeholder="input your password" data-aos="fade-up" data-aos-duration="3000">LOGIN</button>
             <p placeholder="input your password" data-aos="fade-up" data-aos-duration="3000"><a href="register.php">don't have account yet?<span> register now!</span></a></p>
         </form>
+        <div id="notif" class="notif"></div>
     </div>
     <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
     <script>

src/notif.php

@@ -0,0 +1,40 @@
+<div id="notif" class="notif"></div>
+
+<style>
+.notif {
+    position: fixed;
+    top: 50px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #b2db0e1c;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    color: yellow;
+    padding: 12px 18px;
+    width: 300px;
+    height: 25px;
+    font-size: 20px;
+    border: 1px solid yellow;
+    border-radius: 8px;
+    opacity: 0;
+    transition: .3s;
+    z-index: 9999;
+}
+.notif.show {
+    opacity: 1;
+}
+</style>
+
+<script>
+function showNotif(msg) {
+    const n = document.getElementById("notif");
+    n.textContent = msg;
+    n.classList.add("show");
+
+    setTimeout(() => {
+        n.classList.remove("show");
+    }, 3000);
+}
+</script>