menambahkan animasi
This commit is contained in:
Evelyn
parent
6bef66244f
commit
a0efd7d8b3
@ -1,5 +1,5 @@
|
|||||||
/* ================================
|
/* ================================
|
||||||
🌈 GLOBAL THEME (SAMA DENGAN LOGIN/REGISTER)
|
BODY & BACKGROUND STYLES
|
||||||
================================== */
|
================================== */
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@ -15,6 +15,7 @@ body {
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Glow Background Floating */
|
/* Glow Background Floating */
|
||||||
.bg-circle {
|
.bg-circle {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -34,7 +35,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ================================
|
/* ================================
|
||||||
🌟 CONTAINER CARD
|
CONTAINER CARD
|
||||||
================================== */
|
================================== */
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
@ -54,7 +55,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ================================
|
/* ================================
|
||||||
👤 HEADER PROFILE
|
HEADER PROFILE
|
||||||
================================== */
|
================================== */
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
@ -171,3 +172,34 @@ body {
|
|||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 12px;
|
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>
|
<body>
|
||||||
<div class="container">
|
<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 -->
|
||||||
<header class="header glass">
|
<header class="header glass">
|
||||||
<div class="user-info">
|
<div class="user-info">
|
||||||
|
|||||||
@ -4,56 +4,56 @@ if (!isset($_SESSION['user'])) {
|
|||||||
header("Location: login.php");
|
header("Location: login.php");
|
||||||
exit();
|
exit();
|
||||||
}
|
}
|
||||||
|
$user = $_SESSION['user']; // username, role, id
|
||||||
$user = $_SESSION['user']; // id, username, role
|
|
||||||
?>
|
?>
|
||||||
<!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</title>
|
<title>MainBoard - Memory Card Game</title>
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="mainboard.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="container">
|
<!-- Floating Fruits -->
|
||||||
<header class="header">
|
<img src="img/banana.png" class="fruit f1">
|
||||||
<div class="user-info">
|
<img src="img/apple.png" class="fruit f2">
|
||||||
<div class="avatar"><?php echo strtoupper(substr($user['username'], 0, 1)); ?></div>
|
<img src="img/watermelon.png" class="fruit f3">
|
||||||
<div>
|
<img src="img/orange.png" class="fruit f4">
|
||||||
<h2><?php echo $user['username']; ?>
|
<img src="img/pineapple.png" class="fruit f5">
|
||||||
<?php if ($user['role'] === 'admin') echo "👑"; ?>
|
<img src="img/pear.png" class="fruit f6">
|
||||||
</h2>
|
<img src="img/dragonfruit.png" class="fruit f7">
|
||||||
<p><?php echo $user['role'] === 'admin' ? "Administrator" : "Player"; ?></p>
|
|
||||||
|
<div class="container glass">
|
||||||
|
|
||||||
|
<header class="header">
|
||||||
|
<div class="user-profile">
|
||||||
|
<div class="avatar">
|
||||||
|
<?php echo strtoupper(substr($user['username'], 0, 1)); ?>
|
||||||
|
</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">
|
||||||
|
<button id="leaderboardBtn" class="btn gold">🏆 Leaderboard</button>
|
||||||
|
<button id="logoutBtn" class="btn gray">🚪 Logout</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<h1 class="page-title">Pilih Tingkat Kesulitan</h1>
|
||||||
|
|
||||||
|
<div class="stage-grid">
|
||||||
|
<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>
|
||||||
|
|
||||||
<div class="btn-group">
|
<script src="mainboard.js"></script>
|
||||||
<button onclick="location.href='leaderboard.php'">🏆 Leaderboard</button>
|
</body>
|
||||||
<button onclick="location.href='logout.php'">🚪 Logout</button>
|
</html>
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<h1>🎮 Memory Card Game</h1>
|
|
||||||
<p>Pilih tingkat kesulitan untuk memulai permainan</p>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|||||||
31
register.css
31
register.css
@ -167,3 +167,34 @@ input:focus {
|
|||||||
color: purple;
|
color: purple;
|
||||||
text-decoration: underline;
|
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>
|
<body>
|
||||||
|
|
||||||
<div class="page">
|
<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="container">
|
||||||
<div class="icon-wrapper">
|
<div class="icon-wrapper">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user