src/css/game.css

@@ -46,6 +46,12 @@
     background-size: cover;
 }
 
+.container-first {
+    background-image: url(/src/assets/Design/CAVEBOSSFIGHT.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+    image-rendering: pixelated;
+}
 
 .container-first .content .boss {
     width: 100%;

src/css/style.css

@@ -178,47 +178,4 @@
     border: 1px solid;
     height: 40px;
     align-content: center;
-}
-
-.container-onboard {
-    display: flex;
-    width: 100%;
-    height: 100dvh;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    /* background-image: url(/src/assets/Design/wayland.png);
-    background-repeat: no-repeat;
-    background-size: cover; */
-}
-
-.container-onboard h1{
-    font-size: 150px;
-    color: yellow;
-    font-weight: 400;
-    margin-bottom: 50px;
-}
-
-.container-onboard .menu {
-    display: flex;
-    flex-direction: column;
-    text-align: center;
-}
-
-.container-onboard .menu a {
-    padding: 10px 80px;
-    background-color: #87871b23;
-    margin: 8px;
-    border-radius: 5px;
-    font-size: 30px;
-    color: yellow;
-    border: 1px solid #8170029f;
-    text-decoration: none;
-}
-
-.container-onboard .menu a:hover {
-    transition: 0.4s ease-out;
-    color: #dd85fa;
-    border: 1px solid #dd85fa;
-    background-color: #871b8323;
 }

src/game/firstperson.html

@@ -16,10 +16,10 @@
             <div class="text">
                 <p>selamat datang di python games _____</p>
                 <div class="opt">
-                    <p>a. panteks</p>
-                    <p>b. anjas</p>
-                    <p>c. hell nah</p>
-                    <p>d. my kisah</p>
+                    <p draggable="true">a. panteks</p>
+                    <p draggable="true">b. anjas</p>
+                    <p draggable="true">c. hell nah</p>
+                    <p draggable="true">d. my kisah</p>
                 </div>
             </div>
         </div>

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:onboard.html");
+                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/logout.php

@@ -0,0 +1,11 @@
+<?php
+session_start();
+
+unset($_SESSION['loggedin']);
+unset($_SESSION['username']);
+unset($_SESSION['id']);
+
+$_SESSION['flash'] = "Logout berhasil!";
+
+header("Location: index.php");
+exit();

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>

src/onboard.php

@@ -0,0 +1,39 @@
+<?php
+session_start();
+?>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>onboard</title>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <link rel="stylesheet" href="css/global.css">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+    <div class="container-onboard">
+    <?php include 'notif.php'; ?>
+    <?php
+    if (!empty($_SESSION['flash'])) {
+        echo "<script>showNotif(" . json_encode($_SESSION['flash']) . ");</script>";
+        unset($_SESSION['flash']);
+    }
+    ?>
+        <h1 data-aos="zoom-out" data-aos-duration="1000">👾 codebeater 👾</h1>
+        <div class="menu">
+            <a data-aos="zoom-out" data-aos-duration="2000" href="src/game/thirdperson.html">Game Start</a>
+            <a data-aos="zoom-out" data-aos-duration="2000" href="leaderboard.php">leaderboard</a>
+            <a data-aos="zoom-out" data-aos-duration="2000" href="">Credit</a>
+            <a data-aos="zoom-out" data-aos-duration="2000" href="logout.php">Exit</a>
+        </div>
+    </div>
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script>
+        AOS.init();
+    </script>
+</body>
+
+</html>