refisi update

about.md

@@ -1 +0,0 @@
-Permainan dengan nama HarGame adalah game sederhana berbasis HTML,CSS, dan JavaScript dimana pemain menggerakan kotak biru ke kiri atau kanan untuk menghindari blok merah yang jatuh.Skor akan bertambah setiap detik, dan level akan meningkat otomatis sehingga kecepatan musuh semakin cepat.Jika terkena blok, game berakhir dan skor tertinggi disimpan dengan LocalStorage.Game ini menampilkan mekanik dasar seperti gerakan pemain, spawn musuh deteksi tabrakan,dan sistem level

assets/game.js

@@ -0,0 +1,65 @@
+const player = document.getElementById("player");
+const block = document.getElementById("block");
+const scoreText = document.getElementById("scoreText");
+
+let score = 0;
+let playerX = 180;
+
+// KECEPATAN (DIUBAH)
+let speed = 1;             
+let speedIncrease = 0.6;   
+let maxSpeed = 12;         
+
+document.addEventListener("keydown", (e) => {
+    if (e.key === "ArrowLeft" && playerX > 0) {
+        playerX -= 20;
+    }
+    if (e.key === "ArrowRight" && playerX < 360) {
+        playerX += 20;
+    }
+    player.style.left = playerX + "px";
+});
+
+function moveBlock() {
+    let blockY = -40;
+    let blockX = Math.floor(Math.random() * 360);
+    block.style.left = blockX + "px";
+
+    let fall = setInterval(() => {
+        blockY += speed;
+        block.style.top = blockY + "px";
+
+        // TABRAKAN
+        if (
+            blockY > 450 &&
+            blockX < playerX + 40 &&
+            blockX + 40 > playerX
+        ) {
+            alert("Game Over! Score: " + score);
+            score = 0;
+            speed = 1; // reset ke pelan (DIUBAH)
+            scoreText.textContent = "Score: 0";
+            clearInterval(fall);
+            moveBlock();
+        }
+
+        // BLOCK LOLOS
+        if (blockY > 500) {
+            score++;
+            scoreText.textContent = "Score: " + score;
+
+            // NAIK BERTAHAP (TERASA)
+            if (speed < maxSpeed) {
+                speed += speedIncrease;
+            }
+
+            blockY = -40;
+            block.style.top = "-40px";
+            clearInterval(fall);
+            moveBlock();
+        }
+
+    }, 16); // DIUBAH: lebih smooth (60 FPS)
+}
+
+moveBlock();

assets/style.css

@@ -0,0 +1,196 @@
+/* ============================
+   GLOBAL STYLE
+============================ */
+body {
+    font-family: 'Poppins', sans-serif;
+    background: linear-gradient(135deg, #1b1b1b, #2a2a2a);
+    color: #f5f5f5;
+    text-align: center;
+    margin: 0;
+    padding: 0;
+}
+
+/* ============================
+   AUTH BOX (Login / Register)
+============================ */
+.box {
+    background: #1f1f1f;
+    margin: 100px auto;
+    width: 350px;
+    padding: 30px;
+    border-radius: 15px;
+    box-shadow: 0px 0px 20px rgba(0, 150, 255, 0.2);
+    animation: fadeIn 0.6s ease-in-out;
+}
+
+.box h2 {
+    margin-bottom: 20px;
+    color: #00aaff;
+    letter-spacing: 1px;
+}
+
+input, button {
+    padding: 12px;
+    margin: 8px 0;
+    width: 90%;
+    border-radius: 10px;
+    border: none;
+    outline: none;
+    font-size: 15px;
+}
+
+input {
+    background: #2e2e2e;
+    color: white;
+}
+
+button {
+    background: #007bff;
+    color: white;
+    font-weight: bold;
+    transition: 0.3s;
+}
+
+button:hover {
+    background: #005fcc;
+    transform: scale(1.03);
+}
+
+/* ============================
+   GAME AREA
+============================ */
+#gameArea {
+    width: 400px;
+    height: 500px;
+    background: #111;
+    border-radius: 15px;
+    margin: 30px auto;
+    position: relative;
+    overflow: hidden;
+    border: 2px solid #00aaff;
+    box-shadow: 0px 0px 25px rgba(0, 170, 255, 0.4);
+    animation: fadeIn 0.8s;
+}
+
+/* Player */
+#player {
+    width: 40px;
+    height: 40px;
+    background: cyan;
+    position: absolute;
+    bottom: 10px;
+    left: 180px;
+    border-radius: 8px;
+}
+
+
+/* Falling Block */
+#block {
+    width: 45px;
+    height: 45px;
+    background: linear-gradient(135deg, #ff4d4d, #ff0000);
+    border-radius: 10px;
+    position: absolute;
+    top: -50px;
+    left: 180px;
+    box-shadow: 0 0 12px rgba(255, 50, 50, 0.8);
+}
+
+/* ============================
+   TOP BAR (Game Page)
+============================ */
+.top-bar {
+    margin-top: 20px;
+    background: #1f1f1f;
+    width: 100%;
+    padding: 15px 0;
+    color: #00d0ff;
+    font-size: 18px;
+    box-shadow: 0 3px 15px rgba(0, 150, 255, 0.2);
+}
+
+.top-bar a {
+    color: #ff5252;
+    margin-left: 15px;
+    text-decoration: none;
+    transition: 0.3s;
+}
+
+.top-bar a:hover {
+    color: #ff7777;
+}
+
+/* ================= POPUP GAME OVER ================= */
+#gameOverPopup {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.85);
+    display: none;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+
+.popup-box {
+    background: #1e1e1e;
+    padding: 30px;
+    width: 300px;
+    text-align: center;
+    border-radius: 12px;
+    box-shadow: 0 0 15px rgba(0,0,0,0.5);
+    animation: popIn 0.25s ease-out;
+}
+
+.popup-box h2 {
+    margin-bottom: 10px;
+}
+
+.popup-box button {
+    width: 130px;
+    padding: 10px;
+    font-size: 16px;
+    border-radius: 8px;
+    border: none;
+    cursor: pointer;
+    margin: 5px;
+}
+
+#btnRestart {
+    background: #0aa4ff;
+    color: white;
+}
+
+#btnMenu {
+    background: #00d37e;
+    color: white;
+}
+#btnMenu:hover {
+    background: #00b86b;
+}
+
+@keyframes popIn {
+    from { transform: scale(0.6); opacity: 0; }
+    to { transform: scale(1); opacity: 1; }
+}
+
+/* ============================
+   SCORE TEXT
+============================ */
+#scoreText {
+    font-size: 26px;
+    font-weight: bold;
+    margin-top: 10px;
+    color: #00eaff;
+    text-shadow: 0px 0px 10px rgba(0, 200, 255, 0.7);
+}
+
+/* ============================
+   ANIMATIONS
+============================ */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to   { opacity: 1; transform: translateY(0); }
+}

db.php

@@ -0,0 +1,12 @@
+<?php
+$host = "localhost";
+$user = "root";
+$pass = "";
+$db   = "dodge_game";
+
+$conn = new mysqli($host, $user, $pass, $db);
+
+if ($conn->connect_error) {
+    die("Koneksi gagal: " . $conn->connect_error);
+}
+?>

db.sql

@@ -0,0 +1,8 @@
+
+USE dodge_game;
+
+CREATE TABLE users (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    username VARCHAR(50) UNIQUE,
+    password VARCHAR(255)
+);

events.md

@@ -1,14 +0,0 @@
-## EVENTS
-
-##  Mulai Pembuatan HarGame (menghindari blok merah)
-    Diskusi Dan Membuat Judul Game Pada Tanggal 12 November 2025
-
-## Memulai Pembuatan Html Dan Php
-    
-
-
-## Memulai Pembuatan Css 
-
-
-## memulai Pembuatan javascript 
-   

game.php

@@ -0,0 +1,295 @@
+<?php
+session_start();
+if (!isset($_SESSION['user'])) {
+    header("Location: index.php");
+    exit;
+}
+
+$username = $_SESSION['user'];
+
+// koneksi db
+$conn = new mysqli("localhost", "root", "", "dodge_game");
+// Ambil skin user dari database
+$q = $conn->query("SELECT skin FROM users WHERE username='$username'");
+$skinColor = $q->fetch_assoc()["skin"];
+
+// Daftar warna skin
+$skinList = [
+    "cyan" => "#00ffff",
+    "blue" => "#0066ff",
+    "yellow" => "#ffee00",
+    "purple" => "#ff55ff",
+    "green" => "#33ff55"
+];
+
+// Warna player yang dipakai
+$playerColor = $skinList[$skinColor];
+
+?>
+
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Hindari Block</title>
+    <style>
+        body {
+            font-family: Arial;
+            background: url('assets/bg.jpg') no-repeat center center fixed;
+            background-size: cover;
+            color: white;
+            margin: 0;
+            display: flex;
+        }
+
+        #gameWrapper {
+            width: 75%;
+            padding: 20px;
+            text-align: center;
+        }
+
+        #gameArea {
+            width: 400px;
+            height: 500px;
+            background: #222;
+            margin: 0 auto;
+            position: relative;
+            overflow: hidden;
+            border-radius: 10px;
+            box-shadow: 0 0 10px #000;
+        }
+
+        #player {
+         width: 40px;
+        height: 40px;
+        background: <?= $playerColor ?>; 
+        position: absolute;
+        bottom: 10px;
+        left: 180px;
+        border-radius: 8px;
+    }
+
+
+        #block {
+            width: 40px;
+            height: 40px;
+            background: red;
+            position: absolute;
+            top: -40px;
+            left: 180px;
+            border-radius: 8px;
+        }
+
+        #leaderboard {
+            width: 25%;
+            padding: 20px;
+            background: #111;
+            border-left: 2px solid #333;
+            height: 100vh;
+        }
+
+        table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+
+        th, td {
+            padding: 8px;
+            border-bottom: 1px solid #333;
+        }
+
+        /* ===== POPUP GAME OVER ===== */
+        #gameOverPopup {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.7);
+            justify-content: center;
+            align-items: center;
+        }
+
+        .popup-box {
+            background: #222;
+            padding: 25px;
+            border-radius: 10px;
+            text-align: center;
+            width: 300px;
+            box-shadow: 0 0 10px #000;
+        }
+
+        .popup-box button {
+            margin-top: 15px;
+            padding: 10px;
+            width: 120px;
+            border: none;
+            cursor: pointer;
+            font-size: 16px;
+            border-radius: 6px;
+        }
+
+        #btnRestart {
+            background: #00d37e;
+        }
+
+        #btnLmenu {
+            background: #00d37e;
+        }
+    </style>
+</head>
+
+<body>
+
+<div id="gameWrapper">
+    <h1>Hindari Block</h1>
+    <p>Player: <b><?= $username ?></b></p>
+    <div class="score-box">Score: <span id="score">0</span></div>
+
+    <div id="gameArea">
+        <div id="player"></div>
+        <div id="block"></div>
+    </div>
+    <p>Credits: Haekal Adi Rendra & Gerrad</p>
+</div>
+
+<div id="leaderboard">
+    <h2>Leaderboard</h2>
+    <table>
+        <tr>
+            <th>User</th>
+            <th>Score</th>
+        </tr>
+
+        <?php
+        $result = $conn->query("SELECT username, score FROM leaderboard ORDER BY score DESC LIMIT 20");
+        while ($row = $result->fetch_assoc()) {
+            echo "<tr><td>{$row['username']}</td><td>{$row['score']}</td></tr>";
+        }
+        ?>
+    </table>
+</div>
+
+<!-- ========= POPUP GAME OVER ========= -->
+<div id="gameOverPopup">
+    <div class="popup-box">
+        <h2>Game Over</h2>
+        <p>Score Kamu: <span id="finalScore"></span></p>
+
+        <button id="btnRestart">New Game</button>
+        <button id="btnmenu">Menu</button>
+    </div>
+</div>
+<audio id="soundMove" src="assets/sound/move.wav"></audio>
+<audio id="soundScore" src="assets/sound/score.wav"></audio>
+<audio id="soundGameOver" src="assets/sound/gameover.wav"></audio>
+
+<script>
+let currentUser = "<?= $username ?>";
+</script>
+
+<script>
+// ========= GAME SCRIPT ==========
+const player = document.getElementById("player");
+const block = document.getElementById("block");
+let score = 0;
+let gameRunning = true;
+
+document.addEventListener("keydown", e => {
+    if (!gameRunning) return;
+
+    let left = parseInt(window.getComputedStyle(player).getPropertyValue("left"));
+
+    if (e.key === "ArrowLeft" && left > 0) {
+        player.style.left = (left - 20) + "px";
+        soundMove.currentTime = 0;
+        soundMove.play();
+    }
+
+    if (e.key === "ArrowRight" && left < 360) {
+        player.style.left = (left + 20) + "px";
+        soundMove.currentTime = 0;
+        soundMove.play();
+    }
+});
+
+
+let blockSpeed = 5; // kecepatan awal block
+
+function fall() {
+    if (!gameRunning) return;
+
+    let blockTop = parseInt(window.getComputedStyle(block).getPropertyValue("top"));
+    let blockLeft = parseInt(window.getComputedStyle(block).getPropertyValue("left"));
+    let playerLeft = parseInt(window.getComputedStyle(player).getPropertyValue("left"));
+
+    // TABRAKAN
+    if (blockTop > 450 && Math.abs(blockLeft - playerLeft) < 40) {
+        gameRunning = false;
+        soundGameOver.play();
+        saveScore(score);
+        showGameOver(score);
+        return;
+    }
+
+    // Jika block sudah jatuh ke bawah
+    if (blockTop > 500) {
+        block.style.top = "-40px";
+        block.style.left = Math.floor(Math.random() * 360) + "px";
+        score++;
+        document.getElementById("score").innerText = score;
+
+        // ======== TINGKATKAN KECEPATAN BLOCK BERDASARKAN SCORE ========
+        if (score === 15) blockSpeed = 7;
+        if (score === 25) blockSpeed = 8;
+        if (score === 35) blockSpeed = 10;
+        if (score === 45) blockSpeed = 12;
+        if (score === 60) blockSpeed = 14;
+        if (score === 80) blockSpeed = 16;
+        if (score === 100) blockSpeed = 18;
+
+        soundScore.currentTime = 0;
+        soundScore.play();
+    } else {
+        block.style.top = (blockTop + blockSpeed) + "px";
+    }
+
+    requestAnimationFrame(fall);
+}
+fall();
+
+
+
+// ================== SIMPAN SKOR KE SERVER ==================
+function saveScore(finalScore) {
+    fetch("save_score.php", {
+        method: "POST",
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        body: "username=" + currentUser + "&score=" + finalScore
+    });
+}
+
+
+// ================== POPUP GAME OVER ==================
+const popup = document.getElementById("gameOverPopup");
+const finalScoreText = document.getElementById("finalScore");
+const btnRestart = document.getElementById("btnRestart");
+const btnmenu = document.getElementById("btnmenu");
+
+function showGameOver(finalScore) {
+    finalScoreText.textContent = finalScore;
+    popup.style.display = "flex";
+}
+
+btnRestart.onclick = () => {
+    window.location.reload();
+};
+
+btnmenu.onclick = () => {
+    window.location.href = "menu.php";
+};
+
+</script>
+
+</body>
+</html>

index.php

@@ -0,0 +1,45 @@
+<?php
+session_start();
+require 'db.php';   
+
+$message = "";
+
+if ($_SERVER["REQUEST_METHOD"] == "POST") {
+    $username = $_POST['username'];
+    $password = $_POST['password'];
+
+    $query = $conn->query("SELECT * FROM users WHERE username='$username'");
+    
+    if ($query->num_rows > 0) {
+        $row = $query->fetch_assoc();
+        if (password_verify($password, $row['password'])) {
+            $_SESSION['user'] = $row['username'];
+            header("Location: menu.php"); // ⬅ KE MENU BUKAN GAME
+            exit;
+        } else {
+            $message = "Password salah!";
+        }
+    } else {
+        $message = "Username tidak ditemukan!";
+    }
+}
+?>
+<!DOCTYPE html>
+<html>
+<head>
+<title>Login</title>
+<link rel="stylesheet" href="assets/style.css">
+</head>
+<body>
+<div class="box">
+<h2>Login</h2>
+<form method="POST">
+<input type="text" name="username" placeholder="Username" required><br>
+<input type="password" name="password" placeholder="Password" required><br>
+<button type="submit">Masuk</button>
+</form>
+<p><?= $message ?></p>
+<a href="register.php">Register</a>
+</div>
+</body>
+</html>

logout.php

@@ -0,0 +1,4 @@
+<?php
+session_start();
+session_destroy();
+header("Location: index.php");

menu.php

@@ -0,0 +1,97 @@
+<?php
+session_start();
+if (!isset($_SESSION['user'])) {
+    header("Location: index.php");
+    exit;
+}
+?>
+
+<!DOCTYPE html>
+<html>
+<head>
+<title>Menu Utama</title>
+<link rel="stylesheet" href="assets/style.css">
+
+<style>
+    /* Popup background */
+    #settingsPopup {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0,0,0,0.7);
+        justify-content: center;
+        align-items: center;
+    }
+
+    /* Popup box */
+    .popup-box {
+        background: #1e1e1e;
+        width: 350px;
+        padding: 20px;
+        border-radius: 12px;
+        text-align: center;
+        color: white;
+        box-shadow: 0 0 20px black;
+    }
+
+    .popup-option {
+        width: 100%;
+        padding: 12px;
+        margin-top: 8px;
+        border: none;
+        border-radius: 8px;
+        font-size: 15px;
+        cursor: pointer;
+    }
+</style>
+
+</head>
+
+<body>
+
+<div class="box" style="width: 350px;">
+    <h2>Menu Utama</h2>
+    <p>Halo, <b><?= $_SESSION['user'] ?></b></p>
+
+    <a href="game.php">
+        <button style="width: 100%;">Mulai Game</button>
+    </a>
+
+    <!-- Tombol Settings membuka popup -->
+    <button onclick="openSettings()" style="width: 100%; background:#00d37e;">Pengaturan</button>
+
+    <a href="logout.php">
+        <button style="width: 100%; background: #ff4d4d;">Keluar</button>
+    </a>
+</div>
+
+
+<!-- ================= SETTINGS POPUP ================== -->
+<div id="settingsPopup">
+    <div class="popup-box">
+        <h2>Pengaturan</h2>
+
+        <a href="skins.php">
+            <button class="popup-option" style="background:#ffaa00;">Pilih Skin</button>
+        </a>
+
+        <button class="popup-option" onclick="closeSettings()" style="background:#555;">Kembali</button>
+    </div>
+</div>
+
+
+<script>
+function openSettings() {
+    document.getElementById("settingsPopup").style.display = "flex";
+}
+
+function closeSettings() {
+    document.getElementById("settingsPopup").style.display = "none";
+}
+</script>
+
+</body>
+</html>

readme.md

@@ -1,7 +0,0 @@
-Kelompok 1 
-
-Nama Anggota: 
-
-Haekal - ( Mengcoding css )
-Adi - (mengcoding javascript )
-Rendra & Gerrad - ( mengcoding html dan php )

register.php

@@ -0,0 +1,43 @@
+<?php
+require 'db.php';
+
+$message = "";
+
+if ($_SERVER["REQUEST_METHOD"] == "POST") {
+    $username = $_POST['username'];
+    $password = password_hash($_POST['password'], PASSWORD_DEFAULT);
+
+    $check = $conn->query("SELECT * FROM users WHERE username='$username'");
+    if ($check->num_rows > 0) {
+        $message = "Username sudah digunakan!";
+    } else {
+        $sql = "INSERT INTO users(username, password) VALUES('$username', '$password')";
+        if ($conn->query($sql)) {
+            header("Location: index.php");
+            exit;
+        } else {
+            $message = "Gagal registrasi!";
+        }
+    }
+}
+?>
+
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Register</title>
+    <link rel="stylesheet" href="assets/style.css">
+</head>
+<body>
+<div class="box">
+    <h2>Register</h2>
+    <form method="POST">
+        <input type="text" name="username" placeholder="Username" required><br>
+        <input type="password" name="password" placeholder="Password" required><br>
+        <button type="submit">Daftar</button>
+    </form>
+    <p><?= $message ?></p>
+    <a href="index.php">Login</a>
+</div>
+</body>
+</html>

save_score.php

@@ -0,0 +1,24 @@
+<?php
+session_start();
+$conn = new mysqli("localhost", "root", "", "dodge_game");
+
+if ($conn->connect_error) {
+    die("DB Error: " . $conn->connect_error);
+}
+
+$username = $_POST['username'];
+$score = intval($_POST['score']);
+
+// cek jika user sudah punya skor sebelumnya
+$check = $conn->query("SELECT * FROM leaderboard WHERE username='$username'");
+
+if ($check->num_rows > 0) {
+    // update jika score baru lebih tinggi
+    $conn->query("UPDATE leaderboard SET score=GREATEST(score, $score) WHERE username='$username'");
+} else {
+    // insert jika belum ada
+    $conn->query("INSERT INTO leaderboard (username, score) VALUES ('$username', $score)");
+}
+
+echo "OK";
+?>

skins.php

@@ -0,0 +1,134 @@
+<?php
+session_start();
+if (!isset($_SESSION['user'])) {
+    header("Location: index.php");
+    exit;
+}
+
+$conn = new mysqli("localhost", "root", "", "dodge_game");
+$user = $_SESSION['user'];
+
+// AMBIL SKIN USER SEKARANG
+$qSkin = $conn->query("SELECT skin FROM users WHERE username='$user'");
+$currentSkin = $qSkin->fetch_assoc()['skin'];
+
+// LIST SKIN
+$skins = [
+    "cyan" => "#00ffff",
+    "blue" => "#0066ff",
+    "yellow" => "#ffee00",
+    "purple" => "#ff55ff",
+    "green" => "#33ff55"
+];
+
+// AMBIL SKIN USER
+$qSkin = $conn->query("SELECT skin FROM users WHERE username='$user'");
+$data = $qSkin->fetch_assoc();
+
+// PROSES SIMPAN SKIN
+if (isset($_POST['chooseSkin'])) {
+    $selectedSkin = $_POST['skin'];
+    $conn->query("UPDATE users SET skin='$selectedSkin' WHERE username='$user'");
+    $currentSkin = $selectedSkin;
+}
+?>
+
+<!DOCTYPE html>
+<html>
+<head>
+<title>Pilih Skin</title>
+<link rel="stylesheet" href="assets/style.css">
+
+<style>
+body {
+    text-align: center;
+    padding-top: 40px;
+    color: white;
+}
+
+.skin-container {
+    margin-top: 20px;
+}
+
+.skin-box {
+    width: 90px;
+    height: 90px;
+    border-radius: 12px;
+    display: inline-block;
+    margin: 12px;
+    cursor: pointer;
+    transition: 0.2s;
+    border: 4px solid transparent;
+}
+
+.skin-box:hover {
+    transform: scale(1.1);
+}
+
+.skin-selected {
+    border: 4px solid #fff;
+    box-shadow: 0 0 15px white;
+}
+
+.hidden-radio {
+    display: none;
+}
+</style>
+</head>
+
+<body>
+
+<h2>Pilih Skin Pemain</h2>
+
+<form method="POST">
+
+<div class="skin-container">
+
+<?php foreach ($skins as $name => $color): ?>
+    <label>
+        <input 
+            type="radio" 
+            name="skin" 
+            class="hidden-radio"
+            value="<?= $name ?>" 
+            <?= $currentSkin == $name ? "checked" : "" ?>
+        >
+        <div 
+            class="skin-box <?= $currentSkin == $name ? "skin-selected" : "" ?>"
+            style="background: <?= $color ?>"
+        ></div>
+    </label>
+<?php endforeach; ?>
+
+</div>
+
+<br><br>
+<button type="submit" name="chooseSkin" style="width:250px;">Simpan Skin</button>
+
+</form>
+
+<a href="menu.php">
+    <button style="width:250px; background:#555; margin-top:20px;">Kembali</button>
+</a>
+
+<script>
+// AUTO HIGHLIGHT SKIN KETIKA DIPILIH
+const radios = document.querySelectorAll("input[name='skin']");
+const boxes = document.querySelectorAll(".skin-box");
+
+boxes.forEach((box, index) => {
+    box.addEventListener("click", () => {
+        // pilih radio
+        radios[index].checked = true;
+
+        // remove highlight
+        boxes.forEach(b => b.classList.remove("skin-selected"));
+
+        // add highlight ke yang dipilih
+        box.classList.add("skin-selected");
+    });
+});
+</script>
+
+</body>
+</html>