Merge branch 'main' of https://git-eng.ukwms.ac.id/2526-web/Kelompok02-Memory-Card
This commit is contained in:
commit
70cc5e6c69
@ -61,6 +61,7 @@ body {
|
|||||||
.btn:hover { transform: scale(1.05); }
|
.btn:hover { transform: scale(1.05); }
|
||||||
|
|
||||||
/* Judul & Grid */
|
/* Judul & Grid */
|
||||||
|
/* Sedikit perbaikan CSS internal agar judul Pink muncul sempurna */
|
||||||
.title { text-align: center; margin-bottom: 20px; }
|
.title { text-align: center; margin-bottom: 20px; }
|
||||||
.title h1 {
|
.title h1 {
|
||||||
font-size: 38px;
|
font-size: 38px;
|
||||||
@ -69,7 +70,11 @@ body {
|
|||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
color: transparent;
|
color: transparent;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
/* Pastikan user-info rata kiri rapi */
|
||||||
|
.user-info h2 { margin: 0; font-size: 1.5rem; color: #333; }
|
||||||
|
.user-info p { margin: 0; color: #666; font-size: 0.9rem; }
|
||||||
|
|
||||||
.stage-grid {
|
.stage-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
@ -161,3 +166,4 @@ body {
|
|||||||
/* Musik */
|
/* Musik */
|
||||||
.music-container { position: fixed; top: 20px; right: 20px; z-index: 1000; }
|
.music-container { position: fixed; top: 20px; right: 20px; z-index: 1000; }
|
||||||
.music-btn { width: 50px; height: 50px; border-radius: 50%; border: none; cursor: pointer; font-size: 24px; background: white; }
|
.music-btn { width: 50px; height: 50px; border-radius: 50%; border: none; cursor: pointer; font-size: 24px; background: white; }
|
||||||
|
|
||||||
|
|||||||
@ -30,3 +30,12 @@
|
|||||||
function closeCredits() {
|
function closeCredits() {
|
||||||
document.getElementById('creditsOverlay').style.display = 'none';
|
document.getElementById('creditsOverlay').style.display = 'none';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Karena JS eksternal mungkin tidak tahu lokasi logout.php, kita bantu disini
|
||||||
|
document.getElementById("logoutBtn").addEventListener("click", () => {
|
||||||
|
window.location.href = "logout.php";
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById("leaderboardBtn").addEventListener("click", () => {
|
||||||
|
window.location.href = "Leaderboard.html"; // Atau Leaderboard.php jika sudah diubah
|
||||||
|
});
|
||||||
@ -1,59 +1,108 @@
|
|||||||
<?php
|
<?php
|
||||||
session_start();
|
session_start();
|
||||||
|
|
||||||
|
// --- 1. CEK LOGIN (SATPAM) ---
|
||||||
if (!isset($_SESSION['user'])) {
|
if (!isset($_SESSION['user'])) {
|
||||||
header("Location: index.php");
|
header("Location: index.php");
|
||||||
exit();
|
exit();
|
||||||
}
|
}
|
||||||
$user = $_SESSION['user']; // username, role, id
|
|
||||||
|
// --- 2. SIAPKAN DATA USER (ANTI ERROR) ---
|
||||||
|
$user = $_SESSION['user'];
|
||||||
|
$username = isset($user['username']) ? $user['username'] : 'Player';
|
||||||
|
// Cek role, jika admin beri mahkota, jika player beri stik game
|
||||||
|
$roleRaw = isset($user['role']) ? $user['role'] : 'player';
|
||||||
|
$roleDisplay = ($roleRaw === 'admin') ? 'Administrator' : 'Player';
|
||||||
|
$roleIcon = ($roleRaw === 'admin') ? '👑' : '🎮';
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>MainBoard - Memory Card Game</title>
|
<title>Memory Flip Card Game</title>
|
||||||
<link rel="stylesheet" href="mainboard.css">
|
|
||||||
|
<link rel="stylesheet" href="assets/mainboard.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<!-- Floating Fruits -->
|
<img src="images/fruit1.png" class="fruit f1">
|
||||||
<img src="img/banana.png" class="fruit f1">
|
<img src="images/fruit2.png" class="fruit f2">
|
||||||
<img src="img/apple.png" class="fruit f2">
|
<img src="images/fruit3.png" class="fruit f3">
|
||||||
<img src="img/watermelon.png" class="fruit f3">
|
<img src="images/fruit4.png" class="fruit f4">
|
||||||
<img src="img/orange.png" class="fruit f4">
|
|
||||||
<img src="img/pineapple.png" class="fruit f5">
|
<div class="music-container">
|
||||||
<img src="img/pear.png" class="fruit f6">
|
<button id="musicBtn" class="music-btn">🔇</button>
|
||||||
<img src="img/dragonfruit.png" class="fruit f7">
|
</div>
|
||||||
|
<audio id="bgMusic" loop src="music/music_background.mp3"></audio>
|
||||||
|
|
||||||
<div class="container glass">
|
<div class="container glass">
|
||||||
|
|
||||||
<header class="header">
|
<header class="header">
|
||||||
<div class="user-profile">
|
<div class="user-info">
|
||||||
<div class="avatar">
|
<h2><?php echo htmlspecialchars($username); ?></h2>
|
||||||
<?php echo strtoupper(substr($user['username'], 0, 1)); ?>
|
<p><?php echo $roleIcon . " " . $roleDisplay; ?></p>
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h2><?php echo $user['username']; ?> <?php echo $user['role'] === 'admin' ? '👑' : '🎮'; ?></h2>
|
|
||||||
<p><?php echo $user['role'] === 'admin' ? "Administrator" : "Player"; ?></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="actions">
|
<div class="actions">
|
||||||
|
<button class="btn blue" onclick="openCredits()">ℹ️ Credit</button>
|
||||||
<button id="leaderboardBtn" class="btn gold">🏆 Leaderboard</button>
|
<button id="leaderboardBtn" class="btn gold">🏆 Leaderboard</button>
|
||||||
<button id="logoutBtn" class="btn gray">🚪 Logout</button>
|
<button id="logoutBtn" class="btn gray">🚪 Logout</button>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<h1 class="page-title">Pilih Tingkat Kesulitan</h1>
|
<div class="title">
|
||||||
|
<h1>Memory Flip Card</h1>
|
||||||
|
<p>Pilih tingkat kesulitan untuk memulai permainan</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="stage-grid">
|
<div class="stage-grid">
|
||||||
<button class="stage-btn" onclick="selectStage('easy')">😊 Easy<br>3 x 4</button>
|
<button class="stage-btn" onclick="selectStage('easy')">
|
||||||
<button class="stage-btn" onclick="selectStage('medium')">🤔 Medium<br>4 x 4</button>
|
<span class="icon">😊</span>
|
||||||
<button class="stage-btn" onclick="selectStage('hard')">😤 Hard<br>4 x 5</button>
|
<h3>Easy Mode</h3>
|
||||||
|
</button>
|
||||||
|
<button class="stage-btn" onclick="selectStage('medium')">
|
||||||
|
<span class="icon">🤔</span>
|
||||||
|
<h3>Medium Mode</h3>
|
||||||
|
</button>
|
||||||
|
<button class="stage-btn" onclick="selectStage('hard')">
|
||||||
|
<span class="icon">😤</span>
|
||||||
|
<h3>Hard Mode</h3>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="mainboard.js"></script>
|
<div id="creditsOverlay" class="credits-overlay">
|
||||||
|
<div class="credits-box">
|
||||||
|
<div class="credits-scroll">
|
||||||
|
<h2 class="credits-title">CREDITS</h2>
|
||||||
|
|
||||||
|
<div class="credits-section">
|
||||||
|
<p><strong>KELOMPOK 2</strong></p>
|
||||||
|
<p>Evelyn Adi Gloria - 5803025026</p>
|
||||||
|
<p>Nathan Handoko S - 5803025001</p>
|
||||||
|
<p>Yustina Rizky S.P - 5803025041</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="credits-section">
|
||||||
|
<p><strong>PROJECT UAS</strong></p>
|
||||||
|
<p>MEMORI FLIP CARD</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="credits-section">
|
||||||
|
<p><strong>SPECIAL THANKS</strong></p>
|
||||||
|
<p>Bu Devi dan Pak Andrew<br>dan teman-teman informatika</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>© 2025 UKWMS</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="close-credits" onclick="closeCredits()">TUTUP</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="assets/mainboard.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user