Compare commits
No commits in common. "d509f38d2d053ecc213d7dd5d8a23af200283d79" and "530d7c664fc6d6ead87265187a50976c44b698d5" have entirely different histories.
d509f38d2d
...
530d7c664f
@ -1,163 +0,0 @@
|
|||||||
/* ================================
|
|
||||||
1. BODY (KUNCI ANTI-SCROLL)
|
|
||||||
================================== */
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
font-family: Poppins, Arial, sans-serif;
|
|
||||||
background: linear-gradient(135deg, #d9a7ff, #fbc2eb, #a1c4fd);
|
|
||||||
height: 100vh; /* Kunci tinggi layar */
|
|
||||||
overflow: hidden; /* Hilangkan scrollbar */
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================================
|
|
||||||
2. CONTAINER (UKURAN TETAP / STAY)
|
|
||||||
================================== */
|
|
||||||
.container {
|
|
||||||
width: 90%;
|
|
||||||
max-width: 800px;
|
|
||||||
background: rgba(255,255,255,0.7);
|
|
||||||
backdrop-filter: blur(15px);
|
|
||||||
padding: 25px 35px;
|
|
||||||
border-radius: 28px;
|
|
||||||
box-shadow: 0 15px 35px rgba(0,0,0,0.2);
|
|
||||||
z-index: 10;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
animation: fadeIn 0.6s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from { opacity: 0; transform: translateY(20px); }
|
|
||||||
to { opacity: 1; transform: translateY(0); }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Header & Tombol */
|
|
||||||
.header {
|
|
||||||
background: rgba(255,255,255,0.65);
|
|
||||||
padding: 15px 22px;
|
|
||||||
border-radius: 20px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
padding: 10px 20px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: bold;
|
|
||||||
transition: 0.25s;
|
|
||||||
}
|
|
||||||
.blue { background: linear-gradient(to right, #4facfe, #00f2fe); color: white; margin-right: 5px; }
|
|
||||||
.gold { background: linear-gradient(to right, gold, orange); color: white; margin-right: 5px; }
|
|
||||||
.gray { background: #444; color: white; }
|
|
||||||
.btn:hover { transform: scale(1.05); }
|
|
||||||
|
|
||||||
/* Judul & Grid */
|
|
||||||
.title { text-align: center; margin-bottom: 20px; }
|
|
||||||
.title h1 {
|
|
||||||
font-size: 38px;
|
|
||||||
margin: 0;
|
|
||||||
background: linear-gradient(purple, hotpink);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-clip: text;
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stage-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
.stage-btn {
|
|
||||||
background: white;
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 20px;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
.icon { font-size: 40px; display: block; }
|
|
||||||
|
|
||||||
/* ================================
|
|
||||||
3. BACKGROUND FRUITS
|
|
||||||
================================== */
|
|
||||||
.fruit {
|
|
||||||
position: absolute;
|
|
||||||
width: 90px;
|
|
||||||
opacity: 0.8;
|
|
||||||
animation: floatFruit 6s infinite ease-in-out;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
.f1 { top: 10%; left: 5%; }
|
|
||||||
.f2 { bottom: 10%; right: 5%; }
|
|
||||||
.f3 { top: 20%; right: 10%; }
|
|
||||||
.f4 { bottom: 20%; left: 15%; }
|
|
||||||
|
|
||||||
@keyframes floatFruit {
|
|
||||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
|
||||||
50% { transform: translateY(-20px) rotate(5deg); }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ================================
|
|
||||||
4. OVERLAY CREDITS (ANIMASI JALAN)
|
|
||||||
================================== */
|
|
||||||
.credits-overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 0; left: 0; width: 100%; height: 100%;
|
|
||||||
background: rgba(0, 0, 0, 0.95);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
display: none; /* Muncul lewat JS */
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
z-index: 9999;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.credits-box {
|
|
||||||
height: 60%;
|
|
||||||
width: 80%;
|
|
||||||
max-width: 500px;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
border-top: 1px solid rgba(255,255,255,0.2);
|
|
||||||
border-bottom: 1px solid rgba(255,255,255,0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.credits-scroll {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
animation: scrollAnimation 15s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes scrollAnimation {
|
|
||||||
0% { top: 100%; }
|
|
||||||
100% { top: -120%; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.credits-title { color: #ff419b; font-size: 2.5rem; margin-bottom: 30px; }
|
|
||||||
.credits-section { margin-bottom: 30px; }
|
|
||||||
.close-credits {
|
|
||||||
margin-top: 30px;
|
|
||||||
padding: 12px 40px;
|
|
||||||
background: white;
|
|
||||||
color: black;
|
|
||||||
border: none;
|
|
||||||
border-radius: 10px;
|
|
||||||
font-weight: bold;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Musik */
|
|
||||||
.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; }
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
// LOGIKA MUSIK
|
|
||||||
const musicBtn = document.getElementById('musicBtn');
|
|
||||||
const bgMusic = document.getElementById('bgMusic');
|
|
||||||
let isMusicPlaying = false;
|
|
||||||
|
|
||||||
musicBtn.addEventListener('click', () => {
|
|
||||||
isMusicPlaying ? bgMusic.pause() : bgMusic.play();
|
|
||||||
musicBtn.innerText = isMusicPlaying ? '🔇' : '🔊';
|
|
||||||
isMusicPlaying = !isMusicPlaying;
|
|
||||||
});
|
|
||||||
|
|
||||||
// NAVIGATION
|
|
||||||
function selectStage(stage) {
|
|
||||||
window.location.href = "gameboard-" + stage + ".html";
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById("leaderboardBtn").addEventListener("click", () => {
|
|
||||||
window.location.href = "Leaderboard.html";
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById("logoutBtn").addEventListener("click", () => {
|
|
||||||
alert("Logout berhasil!");
|
|
||||||
});
|
|
||||||
|
|
||||||
// OVERLAY CREDITS
|
|
||||||
function openCredits() {
|
|
||||||
document.getElementById('creditsOverlay').style.display = 'flex';
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeCredits() {
|
|
||||||
document.getElementById('creditsOverlay').style.display = 'none';
|
|
||||||
}
|
|
||||||
@ -28,51 +28,19 @@ function toggleAuth(mode) {
|
|||||||
setTimeout(setHeight, 50);
|
setTimeout(setHeight, 50);
|
||||||
}
|
}
|
||||||
|
|
||||||
// ==========================================
|
// 3. DETEKSI ERROR DARI PHP
|
||||||
// 3. DETEKSI PESAN DARI PHP (UPDATED)
|
|
||||||
// ==========================================
|
|
||||||
window.addEventListener("DOMContentLoaded", function() {
|
window.addEventListener("DOMContentLoaded", function() {
|
||||||
setHeight(); // Set tinggi awal
|
setHeight(); // Set tinggi awal
|
||||||
|
|
||||||
const urlParams = new URLSearchParams(window.location.search);
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
|
const errorStatus = urlParams.get('error');
|
||||||
// 1. Tangkap Parameter
|
|
||||||
const loginError = urlParams.get('error'); // Untuk Login Gagal
|
|
||||||
const registerError = urlParams.get('register_error'); // Untuk Register Gagal
|
|
||||||
const successStatus = urlParams.get('success'); // Untuk Register Sukses
|
|
||||||
|
|
||||||
// 2. Logic Login Error
|
if (errorStatus === 'gagal') {
|
||||||
if (loginError === 'gagal') {
|
|
||||||
const errorBox = document.getElementById("loginError");
|
const errorBox = document.getElementById("loginError");
|
||||||
errorBox.innerHTML = "<p>Username atau Password salah!</p>";
|
errorBox.innerText = "Username atau Password salah!";
|
||||||
errorBox.style.display = "block";
|
|
||||||
setHeight();
|
|
||||||
}
|
|
||||||
|
|
||||||
// 3. Logic Register Error (PENTING: Pindah tab ke Register dulu)
|
|
||||||
if (registerError) {
|
|
||||||
// Otomatis pindah ke mode register supaya user liat errornya
|
|
||||||
toggleAuth('register');
|
|
||||||
|
|
||||||
const errorBox = document.getElementById("regError");
|
|
||||||
errorBox.innerHTML = "<p>" + registerError + "</p>";
|
|
||||||
errorBox.style.display = "block";
|
errorBox.style.display = "block";
|
||||||
|
|
||||||
// Tunggu transisi sebentar, lalu set tinggi lagi
|
|
||||||
setTimeout(setHeight, 100);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 4. Logic Register Sukses
|
|
||||||
if (successStatus === 'register') {
|
|
||||||
const errorBox = document.getElementById("loginError");
|
|
||||||
// Pakai warna hijau biar kelihatan sukses
|
|
||||||
errorBox.innerHTML = "<p style='color: #2ecc71;'>Register Berhasil! Silakan Login.</p>";
|
|
||||||
errorBox.style.display = "block";
|
|
||||||
setHeight();
|
setHeight();
|
||||||
}
|
|
||||||
|
|
||||||
// 5. Bersihkan URL (Supaya kalau di-refresh errornya hilang)
|
|
||||||
if (loginError || registerError || successStatus) {
|
|
||||||
window.history.replaceState(null, null, window.location.pathname);
|
window.history.replaceState(null, null, window.location.pathname);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
11
auth.php
11
auth.php
@ -13,7 +13,6 @@ if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
|
|||||||
/* =====================================================
|
/* =====================================================
|
||||||
REGISTER
|
REGISTER
|
||||||
===================================================== */
|
===================================================== */
|
||||||
// Ini akan mendeteksi <input type="hidden" name="btn-register"> dari HTML
|
|
||||||
if (isset($_POST['btn-register'])) {
|
if (isset($_POST['btn-register'])) {
|
||||||
|
|
||||||
$username = trim($_POST['username']);
|
$username = trim($_POST['username']);
|
||||||
@ -23,7 +22,8 @@ if (isset($_POST['btn-register'])) {
|
|||||||
|
|
||||||
// --- VALIDASI DASAR ---
|
// --- VALIDASI DASAR ---
|
||||||
|
|
||||||
if (empty($username) || empty($email) || empty($password) || empty($confirm)) {
|
if (!$username || !$email || !$password || !$confirm) {
|
||||||
|
// Balik ke index dengan pesan error
|
||||||
header("Location: index.php?register_error=Data tidak boleh kosong");
|
header("Location: index.php?register_error=Data tidak boleh kosong");
|
||||||
exit;
|
exit;
|
||||||
}
|
}
|
||||||
@ -51,6 +51,7 @@ if (isset($_POST['btn-register'])) {
|
|||||||
$cek->store_result();
|
$cek->store_result();
|
||||||
|
|
||||||
if ($cek->num_rows > 0) {
|
if ($cek->num_rows > 0) {
|
||||||
|
// INI YANG SEBELUMNYA MATI, SEKARANG REDIRECT:
|
||||||
header("Location: index.php?register_error=Username atau Email sudah terdaftar!");
|
header("Location: index.php?register_error=Username atau Email sudah terdaftar!");
|
||||||
exit;
|
exit;
|
||||||
}
|
}
|
||||||
@ -63,8 +64,9 @@ if (isset($_POST['btn-register'])) {
|
|||||||
$insert->bind_param("sss", $username, $email, $hash);
|
$insert->bind_param("sss", $username, $email, $hash);
|
||||||
|
|
||||||
if ($insert->execute()) {
|
if ($insert->execute()) {
|
||||||
// PERUBAHAN DISINI: Tambahkan ?success=register agar JS menampilkan pesan hijau
|
// Register Berhasil -> Arahkan ke Login (atau mainboard)
|
||||||
header("Location: index.php?success=register");
|
// Kita kosongkan error agar masuk ke state normal
|
||||||
|
header("Location: index.php");
|
||||||
exit;
|
exit;
|
||||||
} else {
|
} else {
|
||||||
header("Location: index.php?register_error=Gagal mendaftar, coba lagi nanti.");
|
header("Location: index.php?register_error=Gagal mendaftar, coba lagi nanti.");
|
||||||
@ -92,6 +94,7 @@ if (isset($_POST['btn-login'])) {
|
|||||||
|
|
||||||
// Cek Password
|
// Cek Password
|
||||||
if (!$user || !password_verify($password, $user['password'])) {
|
if (!$user || !password_verify($password, $user['password'])) {
|
||||||
|
// Redirect dengan parameter 'error=gagal' agar ditangkap JS Login
|
||||||
header("Location: index.php?error=gagal");
|
header("Location: index.php?error=gagal");
|
||||||
exit;
|
exit;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -35,9 +35,7 @@
|
|||||||
</p>
|
</p>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<form id="registerForm" action="auth.php" method="POST">
|
<form id="registerForm" action="auth.php" method="POST">
|
||||||
<input type="hidden" name="btn-register" value="true">
|
|
||||||
|
|
||||||
<h2>Buat Akun Baru ✨</h2>
|
<h2>Buat Akun Baru ✨</h2>
|
||||||
<p class="subtitle">Daftar petualangan baru</p>
|
<p class="subtitle">Daftar petualangan baru</p>
|
||||||
|
|
||||||
@ -54,7 +52,6 @@
|
|||||||
|
|
||||||
<label>Konfirmasi Password</label>
|
<label>Konfirmasi Password</label>
|
||||||
<input type="password" id="regConfirm" name="confirm_password" placeholder="Ulangi Password" required>
|
<input type="password" id="regConfirm" name="confirm_password" placeholder="Ulangi Password" required>
|
||||||
|
|
||||||
<button type="submit" class="btn-submit" name="btn-register">Daftar Sekarang</button>
|
<button type="submit" class="btn-submit" name="btn-register">Daftar Sekarang</button>
|
||||||
|
|
||||||
<p class="switch-text">
|
<p class="switch-text">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user