style: styling leaderboard

add folder assets form branch design to backup
style: styling index register and leaderboard ongoing
2025-11-24 11:16:48 +07:00 · 2025-11-24 10:53:10 +07:00 · 2025-11-24 10:43:05 +07:00
13 changed files with 283 additions and 11 deletions
--- a/src/assets/Design/KnightPixLE.png
+++ b/src/assets/Design/KnightPixLE.png
--- a/src/assets/Design/KnightPixLE2-export.png
+++ b/src/assets/Design/KnightPixLE2-export.png
--- a/src/assets/Design/PYTHON-BOSSFIGHTMODE1.gif
+++ b/src/assets/Design/PYTHON-BOSSFIGHTMODE1.gif
--- a/src/assets/Design/castel
+++ b/src/assets/Design/castel
--- a/src/assets/Design/for-NewPythonGift.gif
+++ b/src/assets/Design/for-NewPythonGift.gif
--- a/src/assets/Design/for-python-Recovered-export2.png
+++ b/src/assets/Design/for-python-Recovered-export2.png
--- a/src/assets/Design/for-python-Recovered.png
+++ b/src/assets/Design/for-python-Recovered.png
--- a/src/assets/Design/newinpu2t.png
+++ b/src/assets/Design/newinpu2t.png
--- a/src/css/global.css
+++ b/src/css/global.css
@ -10,14 +10,3 @@ body {
    background-color: black;
 }

-.row {
-    display: flex;
-    height: 100dvh;
-}
-
-.col {
-    flex: 1;           
-    width: 50%;
-    padding: 30px;        
-    box-sizing: border-box;
-}
--- a/src/css/style.css
+++ b/src/css/style.css
@ -65,3 +65,117 @@
 .container-login form p a span {
    color: yellow;
 }
+
+.container-register {
+    display: flex;
+    width: 100%;
+    height: 100dvh;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.container-register h1 {
+    font-size: 100px;
+}
+
+.container-register form {
+    text-align: center;
+    padding: 30px;
+}
+
+.container-register form h2 {
+    margin-bottom: 20px;
+    font-size: 30px;
+    text-transform: capitalize;
+}
+
+.container-register form input {
+    margin-bottom: 10px;
+    width: 200px;
+    height: 30px;
+    border-radius: 6px;
+    text-align: center;
+    background-color: black;
+    border: 1px solid white;
+    color: white;
+}
+
+.container-register form input::placeholder {
+    color: #919191;
+}
+
+.container-register form button {
+    border-radius: 6px;
+    width: 200px;
+    height: 30px;
+    margin-top: 40px;
+    font-size: 30px
+}
+
+.container-register form button:hover {
+    border-radius: 6px;
+    width: 200px;
+    height: 30px;
+    margin-top: 40px;
+    font-size: 30px;
+}
+
+.container-register form p {
+    margin-top: 10px;
+}
+
+.container-register form p a {
+    color: white;
+    text-decoration: none;
+}
+
+.container-register form p a span {
+    color: yellow;
+}
+
+.container-board {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    height: 100dvh;
+}
+
+.container-board .chara {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.container-board .chara .character {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.container-board .chara .character img {
+    width: 300px;
+    image-rendering: pixelated;
+    margin: 20px;
+}
+
+.container-board .menu {
+    margin: 0 auto;
+    border-radius: 10px;
+    width: 400px;
+    border: 1px solid;
+    height: 40px;
+    align-content: center;
+}
+
+.container-board table {
+    margin: 0 auto;
+    border-radius: 10px;
+    width: 400px;
+    border: 1px solid;
+    height: 40px;
+    align-content: center;
+}
--- a/src/index.php
+++ b/src/index.php
@ -42,6 +42,7 @@ $db->close();
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login</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>
@ -56,5 +57,9 @@ $db->close();
            <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>
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script>
+        AOS.init();
+    </script>
 </body>
 </html>
--- a/src/leaderboard.php
+++ b/src/leaderboard.php
@ -0,0 +1,74 @@
+<?php 
+// session_start();
+// require_once "config/db.php";
+
+// $sql_leaderbord = "SELECT u.username, c.poin FROM characters c JOIN users u ON u.user_id = c.user_id ORDER BY c.poin DESC LIMIT 10 ";
+
+// $result = $db ->query($sql_leaderbord);
+
+// $leaderboard=[];
+// if($result&&$result -> num_rows >0){
+//     while($row = $result->fetch_assoc()){
+//         $leaderboard[]=$row;
+//     }
+// }
+
+?>
+
+    <!DOCTYPE html>
+    <html lang="en">
+
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>leaderboard</title>
+        <link rel="stylesheet" href="css/global.css">
+        <link rel="stylesheet" href="css/style.css">
+    </head>
+    <body>
+        <div class="container-board">
+            <div class="chara">
+                <div class="menu">
+                    <h1 style="text-align: center;">Matthew as Knight</h1>
+                </div>
+                <h1 style="text-align: center;">150pts</h1>
+                <div class="character">
+                    <img src="assets/Design/KnightPixLE.png" alt="knight">
+                </div>
+            </div>
+            <div class="board">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>#</th>
+                            <th>Username</th>
+                            <th>Score</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <!-- <?php 
+                        $peringkat = 1;
+                        foreach ($leaderboard as $pemain) :
+                        ?>
+                        
+                            <tr>
+                                <td><?php echo $peringkat; ?></td>
+                                <td><?php echo htmlspecialchars($pemain['username']); ?></td>
+                                <td><?php echo $pemain['poin']; ?> PTS</td>
+                            </tr>
+
+                        <?php 
+                            $peringkat++;
+                        endforeach;
+                        
+                        if (empty($leaderboard)) {
+                            echo '<tr><td colspan="3" style="text-align: center;">Belum ada pemain</td></tr>';
+                        }
+                        ?> -->
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </body>
+
+    </html>
--- a/src/register.php
+++ b/src/register.php
@ -0,0 +1,90 @@
+<?php
+
+session_start();
+include "config/db.php";
+
+$pesan_sukses="";
+$pesan_gagal="";
+
+
+if(isset($_POST['register'])){
+    $email = $_POST['email'];
+    $username = $_POST['username'];
+    $password = $_POST['password'];
+    $rpassword = $_POST['rpassword'];
+    
+    if(empty($email) || empty($username) || empty($password)){
+        $pesan_gagal= "Semua data harus terisi";
+    }else if($password !== $rpassword){
+        $pesan_gagal=  "password tidak sama";
+    }
+    else{
+        $hashpw = password_hash($password, PASSWORD_DEFAULT); 
+
+        $sql = "INSERT INTO users (email,username,password)VALUES(?,?,?)";
+
+        $stmt = $db -> prepare($sql);
+
+        $stmt->bind_param("sss",$email,$username,$hashpw);
+
+
+        if($stmt->execute()){
+
+            $new_user_id =$db-> insert_id;
+
+            $sql_char = "INSERT INTO characters (user_id, name, poin) VALUES (?, ?, 0)";
+            
+            $stmt_char = $db->prepare($sql_char);
+            $stmt_char->bind_param("is", $new_user_id, $username);
+
+            if($stmt_char->execute()){
+                header("location:index.php");
+                exit();
+            }else{
+                $pesan_gagal = "Registrasi user berhasil, tapi gagal membuat karakter: " . $stmt_char->error;
+            }
+            $stmt_char->close();
+
+        }else{
+            if($stmt->erno==1602){
+                $pesan_gagal = "email atau username sudah pernah terdaftar";
+            }else{
+                $pesan_sukses = "Regitrasi gagal: ".$stmt->error;
+            }
+        }
+        $stmt -> close();
+    }
+}$db->close()
+?>
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>codebeater</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-register">
+        <h1 data-aos="zoom-out" data-aos-duration="1000">codebeater</h1>
+        <form action="register.php" method="POST">
+            <h2 data-aos="fade-up" data-aos-duration="1000">Register to get account</h2>
+            <input type="email" name="email" id="email" placeholder="input your email" data-aos="fade-up" data-aos-duration="2000"><br>
+            <input type="text" name="username" id="username" placeholder="input your username" data-aos="fade-up" data-aos-duration="2000"><br>
+            <input type="password" name="password" id="password" placeholder="input your password" data-aos="fade-up" data-aos-duration="2000"><br>
+            <input type="password" name="rpassword" id="rpassword" placeholder="repeat your password" data-aos="fade-up" data-aos-duration="2000"><br>
+            <button type="submit" name="register" data-aos="fade-up" data-aos-duration="3000">REGISTER</button>
+            <p data-aos="fade-up" data-aos-duration="3000"><a href="index.php" name = "login">have an account? <span> Login now!</span></a></p>
+        </form>
+    </div>
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script>
+        AOS.init();
+    </script>
+</body>
+
+</html>
Author	SHA1	Message	Date
Matthew Florentino	fb1ebd6fee	style: styling leaderboard	2025-11-24 11:16:48 +07:00
Matthew Florentino	7e6d71d67a	add folder assets form branch design to backup	2025-11-24 10:53:10 +07:00
Matthew Florentino	9bf0395d24	style: styling index register and leaderboard ongoing	2025-11-24 10:43:05 +07:00