index:gameboard.html
This commit is contained in:
commit
f41f8c6638
@ -198,14 +198,50 @@ body {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.gameboard {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
padding: 25px 40px;
|
||||
box-sizing: border-box;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
aspect-ratio: 4 / 3;
|
||||
perspective: 1000px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.play-again { background: #b700ff; color: white; }
|
||||
.leaderboard { background: gold; }
|
||||
.back-menu { background: #444; color: white; } /* ← DITAMBAHKAN */
|
||||
.back-menu { background: #444; color: white; }
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity:0; transform: scale(0.8); }
|
||||
to { opacity:1; transform: scale(1); }
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.gameboard {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
padding: 20px;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.gameboard {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
padding: 14px;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -200,10 +200,36 @@ body {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.gameboard {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
padding: 25px 40px;
|
||||
box-sizing: border-box;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
|
||||
.play-again { background: #b700ff; color: white; }
|
||||
.leaderboard { background: gold; }
|
||||
.back-menu { background: #444; color: white; }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.gameboard {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
padding: 20px;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.gameboard {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
padding: 14px;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/* ================================
|
||||
🌈 GLOBAL THEME (SAMA DENGAN LOGIN/REGISTER)
|
||||
BODY & BACKGROUND STYLES
|
||||
================================== */
|
||||
|
||||
body {
|
||||
@ -15,6 +15,7 @@ body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
/* Glow Background Floating */
|
||||
.bg-circle {
|
||||
position: absolute;
|
||||
@ -34,7 +35,7 @@ body {
|
||||
}
|
||||
|
||||
/* ================================
|
||||
🌟 CONTAINER CARD
|
||||
CONTAINER CARD
|
||||
================================== */
|
||||
|
||||
.container {
|
||||
@ -54,7 +55,7 @@ body {
|
||||
}
|
||||
|
||||
/* ================================
|
||||
👤 HEADER PROFILE
|
||||
HEADER PROFILE
|
||||
================================== */
|
||||
|
||||
.header {
|
||||
@ -171,3 +172,34 @@ body {
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.fruit {
|
||||
position: absolute;
|
||||
width: 95px;
|
||||
opacity: .85;
|
||||
animation: float 6s infinite ease-in-out, drift 15s infinite linear;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.f1 { top: 8%; left: 10%; animation-delay: .3s; }
|
||||
.f2 { top: 65%; right: 12%; animation-delay: .7s; }
|
||||
.f3 { top: 22%; right: 55%; animation-delay: 1.1s; }
|
||||
.f4 { bottom: 15%; left: 28%; animation-delay: .9s; }
|
||||
.f5 { bottom: 10%; right: 30%; animation-delay: 1.4s; }
|
||||
.f6 { top: 40%; left: 50%; animation-delay: .5s; }
|
||||
.f7 { bottom: 30%; left: 15%; animation-delay: 1.2s; }
|
||||
.f8 { top: 75%; right: 40%; animation-delay: .8s; }
|
||||
.f9 { top: 50%; left: 80%; animation-delay: 1s; }
|
||||
.f10 { bottom: 20%; right: 5%; animation-delay: 1.3s; }
|
||||
|
||||
@keyframes float {
|
||||
0% { transform: translateY(0) rotate(0deg); }
|
||||
50% { transform: translateY(-20px) rotate(6deg); }
|
||||
100% { transform: translateY(0) rotate(0deg); }
|
||||
}
|
||||
|
||||
@keyframes drift {
|
||||
0% { transform: translateX(0); }
|
||||
50% { transform: translateX(15px); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
@ -10,6 +10,18 @@
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
<!-- animasi -->
|
||||
<img src="images/fruit1.png" class="fruit f1">
|
||||
<img src="images/fruit2.png" class="fruit f2">
|
||||
<img src="images/fruit3.png" class="fruit f3">
|
||||
<img src="images/fruit4.png" class="fruit f4">
|
||||
<img src="images/fruit5.png" class="fruit f5">
|
||||
<img src="images/fruit6.png" class="fruit f6">
|
||||
<img src="images/fruit7.png" class="fruit f7">
|
||||
<img src="images/fruit8.png" class="fruit f8">
|
||||
<img src="images/fruit9.png" class="fruit f9">
|
||||
<img src="images/fruit10.png" class="fruit f10">
|
||||
|
||||
<!-- HEADER -->
|
||||
<header class="header glass">
|
||||
<div class="user-info">
|
||||
|
||||
@ -4,56 +4,56 @@ if (!isset($_SESSION['user'])) {
|
||||
header("Location: login.php");
|
||||
exit();
|
||||
}
|
||||
|
||||
$user = $_SESSION['user']; // id, username, role
|
||||
$user = $_SESSION['user']; // username, role, id
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MainBoard</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>MainBoard - Memory Card Game</title>
|
||||
<link rel="stylesheet" href="mainboard.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<!-- Floating Fruits -->
|
||||
<img src="img/banana.png" class="fruit f1">
|
||||
<img src="img/apple.png" class="fruit f2">
|
||||
<img src="img/watermelon.png" class="fruit f3">
|
||||
<img src="img/orange.png" class="fruit f4">
|
||||
<img src="img/pineapple.png" class="fruit f5">
|
||||
<img src="img/pear.png" class="fruit f6">
|
||||
<img src="img/dragonfruit.png" class="fruit f7">
|
||||
|
||||
<div class="container glass">
|
||||
|
||||
<header class="header">
|
||||
<div class="user-info">
|
||||
<div class="avatar"><?php echo strtoupper(substr($user['username'], 0, 1)); ?></div>
|
||||
<div class="user-profile">
|
||||
<div class="avatar">
|
||||
<?php echo strtoupper(substr($user['username'], 0, 1)); ?>
|
||||
</div>
|
||||
<div>
|
||||
<h2><?php echo $user['username']; ?>
|
||||
<?php if ($user['role'] === 'admin') echo "👑"; ?>
|
||||
</h2>
|
||||
<h2><?php echo $user['username']; ?> <?php echo $user['role'] === 'admin' ? '👑' : '🎮'; ?></h2>
|
||||
<p><?php echo $user['role'] === 'admin' ? "Administrator" : "Player"; ?></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button onclick="location.href='leaderboard.php'">🏆 Leaderboard</button>
|
||||
<button onclick="location.href='logout.php'">🚪 Logout</button>
|
||||
<div class="actions">
|
||||
<button id="leaderboardBtn" class="btn gold">🏆 Leaderboard</button>
|
||||
<button id="logoutBtn" class="btn gray">🚪 Logout</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<h1>🎮 Memory Card Game</h1>
|
||||
<p>Pilih tingkat kesulitan untuk memulai permainan</p>
|
||||
<h1 class="page-title">Pilih Tingkat Kesulitan</h1>
|
||||
|
||||
<div class="stage-grid">
|
||||
<button class="stage" onclick="window.location.href='gameboard-easy.html'">
|
||||
<h3>Easy Mode</h3>
|
||||
<p>Grid 3x4 (12 kartu)</p>
|
||||
</button>
|
||||
|
||||
<button class>"stage" onclick="selectStage('medium')">
|
||||
<h3>Medium Mode</h3>
|
||||
<p>Grid 4x4 (16 kartu)</p>
|
||||
</button>
|
||||
|
||||
<button class="stage" onclick="selectStage('hard')">
|
||||
<h3>Hard Mode</h3>
|
||||
<p>Grid 5x4 (20 kartu)</p>
|
||||
</button>
|
||||
<button class="stage-btn" onclick="selectStage('easy')">😊 Easy<br>3 x 4</button>
|
||||
<button class="stage-btn" onclick="selectStage('medium')">🤔 Medium<br>4 x 4</button>
|
||||
<button class="stage-btn" onclick="selectStage('hard')">😤 Hard<br>4 x 5</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="mainboard.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
31
register.css
31
register.css
@ -167,3 +167,34 @@ input:focus {
|
||||
color: purple;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.fruit {
|
||||
position: absolute;
|
||||
width: 95px;
|
||||
opacity: .85;
|
||||
animation: float 6s infinite ease-in-out, drift 15s infinite linear;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.f1 { top: 8%; left: 10%; animation-delay: .3s; }
|
||||
.f2 { top: 65%; right: 12%; animation-delay: .7s; }
|
||||
.f3 { top: 22%; right: 55%; animation-delay: 1.1s; }
|
||||
.f4 { bottom: 15%; left: 28%; animation-delay: .9s; }
|
||||
.f5 { bottom: 10%; right: 30%; animation-delay: 1.4s; }
|
||||
.f6 { top: 40%; left: 50%; animation-delay: .5s; }
|
||||
.f7 { bottom: 30%; left: 15%; animation-delay: 1.2s; }
|
||||
.f8 { top: 75%; right: 40%; animation-delay: .8s; }
|
||||
.f9 { top: 50%; left: 80%; animation-delay: 1s; }
|
||||
.f10 { bottom: 20%; right: 5%; animation-delay: 1.3s; }
|
||||
|
||||
@keyframes float {
|
||||
0% { transform: translateY(0) rotate(0deg); }
|
||||
50% { transform: translateY(-20px) rotate(6deg); }
|
||||
100% { transform: translateY(0) rotate(0deg); }
|
||||
}
|
||||
|
||||
@keyframes drift {
|
||||
0% { transform: translateX(0); }
|
||||
50% { transform: translateX(15px); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
@ -9,6 +9,16 @@
|
||||
<body>
|
||||
|
||||
<div class="page">
|
||||
<img src="images/fruit1.png" class="fruit f1">
|
||||
<img src="images/fruit2.png" class="fruit f2">
|
||||
<img src="images/fruit3.png" class="fruit f3">
|
||||
<img src="images/fruit4.png" class="fruit f4">
|
||||
<img src="images/fruit5.png" class="fruit f5">
|
||||
<img src="images/fruit6.png" class="fruit f6">
|
||||
<img src="images/fruit7.png" class="fruit f7">
|
||||
<img src="images/fruit8.png" class="fruit f8">
|
||||
<img src="images/fruit9.png" class="fruit f9">
|
||||
<img src="images/fruit10.png" class="fruit f10">
|
||||
|
||||
<div class="container">
|
||||
<div class="icon-wrapper">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user