2526-web/Kelompok02-Memory-Card
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

creating index as replacement to login register, creating connection into database

Browse Source
This commit is contained in:
Nathan 2025-12-14 18:09:48 +07:00
parent 556ef5ee5f
commit fe5344a341
1 changed files with 73 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

262
index.html
View File

@ -20,36 +20,33 @@ body {
overflow-x: hidden; overflow-x: hidden;
} }
/* --- 2. CONTAINER KARTU (LOGIC SLIDING) --- */ /* --- 2. CONTAINER KARTU --- */
.auth-card { .auth-card {
width: 380px; width: 380px;
background: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.9); /* Dibuat lebih solid sedikit */
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border-radius: 25px; border-radius: 25px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2); box-shadow: 0 10px 30px rgba(0,0,0,0.2);
overflow: hidden; /* Sembunyikan form yang ada di luar area */ overflow: hidden;
position: relative; position: relative;
z-index: 10; z-index: 10;
transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s ease; /* Animasi Tinggi agar mulus saat resize */
} transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
.auth-card:hover {
transform: scale(1.01);
} }
.form-wrapper { .form-wrapper {
width: 100%; width: 100%;
overflow: hidden;
} }
/* Container Form (Lebar 200% untuk 2 form) */ /* --- PERBAIKAN UTAMA ADA DI SINI --- */
.forms-container { .forms-container {
display: flex; display: flex;
width: 200%; width: 200%;
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
/* PENTING: Agar form Login tidak dipaksa setinggi form Register */
align-items: flex-start;
} }
/* Geser ke kanan (Register) saat active */
.auth-card.active .forms-container { .auth-card.active .forms-container {
transform: translateX(-50%); transform: translateX(-50%);
} }
@ -58,16 +55,16 @@ body {
form { form {
width: 50%; width: 50%;
flex-shrink: 0; flex-shrink: 0;
padding: 40px; padding: 40px; /* Padding ini menentukan jarak dalam */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; /* Center content vertically if height allows */ /* Hapus justify-content: center agar tinggi dihitung dari konten asli */
} }
/* Typography */ /* Typography & Inputs */
h2 { h2 {
margin: 10px 0 10px; /* Adjusted margin since icon is gone */ margin: 0 0 10px;
text-align: center; text-align: center;
font-size: 26px; font-size: 26px;
background: linear-gradient(45deg, purple, hotpink); background: linear-gradient(45deg, purple, hotpink);
@ -77,155 +74,63 @@ h2 {
} }
.subtitle { .subtitle {
text-align: center; text-align: center; color: gray; font-size: 14px; margin-bottom: 25px;
color: gray;
font-size: 14px;
margin-bottom: 25px;
} }
label { label {
font-size: 14px; font-size: 14px; color: #444; width: 100%; margin-bottom: 6px; font-weight: bold;
color: #444;
width: 100%;
margin-bottom: 6px;
font-weight: bold;
} }
input { input {
width: 100%; width: 100%; padding: 12px; border-radius: 12px;
padding: 12px; border: 2px solid #ccc; background: #fafafa;
border-radius: 12px; margin-bottom: 15px; font-size: 14px; transition: 0.3s;
border: 2px solid #ccc;
background: #fafafa;
margin-bottom: 15px;
font-size: 14px;
transition: 0.3s;
} }
input:focus { input:focus { outline: none; border-color: purple; background: #fff; box-shadow: 0 0 8px rgba(128, 0, 128, 0.1); }
outline: none;
border-color: purple;
background: #fff;
box-shadow: 0 0 8px rgba(128, 0, 128, 0.1);
}
/* Tombol */ /* Tombol */
.btn-submit { .btn-submit {
width: 100%; width: 100%; padding: 14px;
padding: 14px;
background: linear-gradient(45deg, purple, hotpink); background: linear-gradient(45deg, purple, hotpink);
color: white; color: white; border-radius: 15px; border: none;
border-radius: 15px; cursor: pointer; font-size: 16px; font-weight: bold;
border: none; transition: 0.25s ease; margin-top: 10px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
transition: 0.25s ease;
margin-top: 10px;
box-shadow: 0 4px 15px rgba(128, 0, 128, 0.2); box-shadow: 0 4px 15px rgba(128, 0, 128, 0.2);
} }
.btn-submit:hover { transform: scale(1.02); }
.btn-submit:hover {
transform: scale(1.02);
box-shadow: 0 6px 20px rgba(128, 0, 128, 0.35);
}
/* Link Switch */ /* Link Switch */
.switch-text { .switch-text { margin-top: 20px; font-size: 14px; color: #555; }
margin-top: 20px; .switch-text a { color: purple; text-decoration: none; font-weight: bold; cursor: pointer; }
font-size: 14px; .switch-text a:hover { text-decoration: underline; }
color: #555;
}
.switch-text a {
color: purple;
text-decoration: none;
font-weight: bold;
cursor: pointer;
}
.switch-text a:hover {
text-decoration: underline;
}
/* Error Box */ /* Error Box */
.error-box { .error-box {
width: 100%; width: 100%; color: #d8000c; background: #ffbaba;
color: #d8000c; padding: 10px; border-radius: 10px; margin-bottom: 15px;
background: #ffbaba; font-size: 13px; text-align: center; display: none;
padding: 10px;
border-radius: 10px;
margin-bottom: 15px;
font-size: 13px;
text-align: center;
display: none;
} }
/* --- 4. DEKORASI (BUAH & GLITTER) --- */ /* Dekorasi (Buah & Glitter) */
.fruit { .fruit { position: absolute; width: 90px; opacity: 0.85; animation: float 6s infinite ease-in-out, drift 15s infinite linear; pointer-events: none; z-index: 1; }
position: absolute; .f1 { top: 8%; left: 10%; width: 80px; } .f2 { top: 65%; right: 12%; } .f3 { top: 22%; right: 55%; width: 60px; }
width: 90px; .f4 { bottom: 15%; left: 28%; } .f5 { bottom: 10%; right: 30%; width: 70px; } .f6 { top: 40%; left: 50%; }
opacity: 0.85; .f7 { bottom: 30%; left: 15%; width: 50px; } .f8 { top: 75%; right: 40%; } .f9 { top: 50%; left: 80%; width: 85px; }
animation: float 6s infinite ease-in-out, drift 15s infinite linear; .f10 { bottom: 20%; right: 5%; }
pointer-events: none; @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px) rotate(6deg); } }
z-index: 1; @keyframes drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(15px); } }
} .glitter { position: absolute; width: 4px; height: 4px; background: purple; border-radius: 50%; opacity: 0; animation: glitter-burst 2s infinite ease-out; pointer-events: none; z-index: 11; }
@keyframes glitter-burst { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(1) translate(var(--x), var(--y)); opacity: 0; } }
/* Posisi Buah */
.f1 { top: 8%; left: 10%; animation-delay: .3s; width: 80px; }
.f2 { top: 65%; right: 12%; animation-delay: .7s; }
.f3 { top: 22%; right: 55%; animation-delay: 1.1s; width: 60px; }
.f4 { bottom: 15%; left: 28%; animation-delay: .9s; }
.f5 { bottom: 10%; right: 30%; animation-delay: 1.4s; width: 70px; }
.f6 { top: 40%; left: 50%; animation-delay: .5s; }
.f7 { bottom: 30%; left: 15%; animation-delay: 1.2s; width: 50px; }
.f8 { top: 75%; right: 40%; animation-delay: .8s; }
.f9 { top: 50%; left: 80%; animation-delay: 1s; width: 85px; }
.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); }
}
.glitter {
position: absolute;
width: 4px;
height: 4px;
background: purple;
border-radius: 50%;
opacity: 0;
animation: glitter-burst 2s infinite ease-out;
pointer-events: none;
z-index: 11;
}
@keyframes glitter-burst {
0% { transform: scale(0.4); opacity: 0.9; }
50% { opacity: 1; }
100% { transform: scale(1) translate(var(--x), var(--y)); opacity: 0; }
}
</style> </style>
</head> </head>
<body> <body>
<img src="images/fruit1.png" class="fruit f1"> <img src="images/fruit1.png" class="fruit f1"><img src="images/fruit2.png" class="fruit f2">
<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/fruit3.png" class="fruit f3"> <img src="images/fruit5.png" class="fruit f5"><img src="images/fruit6.png" class="fruit f6">
<img src="images/fruit4.png" class="fruit f4"> <img src="images/fruit7.png" class="fruit f7"><img src="images/fruit8.png" class="fruit f8">
<img src="images/fruit5.png" class="fruit f5"> <img src="images/fruit9.png" class="fruit f9"><img src="images/fruit10.png" class="fruit f10">
<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="auth-card" id="authCard"> <div class="auth-card" id="authCard">
<div class="form-wrapper"> <div class="form-wrapper">
@ -233,7 +138,7 @@ input:focus {
<form id="loginForm" action="login.php" method="POST"> <form id="loginForm" action="login.php" method="POST">
<h2>Selamat Datang! ✨</h2> <h2>Selamat Datang! ✨</h2>
<p class="subtitle">Login untuk bermain Memory Flip</p> <p class="subtitle">Login untuk bermain</p>
<div id="loginError" class="error-box"></div> <div id="loginError" class="error-box"></div>
@ -246,14 +151,13 @@ input:focus {
<button type="submit" class="btn-submit" name="btn-login">Login Sekarang</button> <button type="submit" class="btn-submit" name="btn-login">Login Sekarang</button>
<p class="switch-text"> <p class="switch-text">
Belum punya akun? Belum punya akun? <a onclick="toggleAuth('register')">Daftar Sekarang</a>
<a onclick="toggleAuth('register')">Daftar Sekarang</a>
</p> </p>
</form> </form>
<form id="registerForm" action="register.php" method="POST"> <form id="registerForm" action="register.php" method="POST">
<h2>Buat Akun Baru ✨</h2> <h2>Buat Akun Baru ✨</h2>
<p class="subtitle">Daftar untuk memulai petualangan</p> <p class="subtitle">Daftar petualangan baru</p>
<div id="regError" class="error-box"></div> <div id="regError" class="error-box"></div>
@ -267,13 +171,12 @@ input:focus {
<input type="password" id="regPass" name="password" placeholder="Minimal 6 karakter" required> <input type="password" id="regPass" name="password" placeholder="Minimal 6 karakter" required>
<label>Konfirmasi Password</label> <label>Konfirmasi Password</label>
<input type="password" id="regConfirm" name="confirm_password" placeholder="Ketik ulang 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">
Sudah punya akun? Sudah punya akun? <a onclick="toggleAuth('login')">Login Sekarang</a>
<a onclick="toggleAuth('login')">Login Sekarang</a>
</p> </p>
</form> </form>
@ -282,19 +185,24 @@ input:focus {
</div> </div>
<script> <script>
/* --- LOGIC SLIDING & HEIGHT ADJUSTMENT --- */ /* --- LOGIC RESIZE OTOMATIS --- */
const card = document.getElementById("authCard"); const card = document.getElementById("authCard");
const loginForm = document.getElementById("loginForm"); const loginForm = document.getElementById("loginForm");
const registerForm = document.getElementById("registerForm"); const registerForm = document.getElementById("registerForm");
function setHeight() { function setHeight() {
const isActive = card.classList.contains("active"); const isActive = card.classList.contains("active");
// Hitung tinggi form yang sedang aktif
// offsetHeight akan mengambil tinggi asli konten + padding
const formHeight = isActive ? registerForm.offsetHeight : loginForm.offsetHeight; const formHeight = isActive ? registerForm.offsetHeight : loginForm.offsetHeight;
// Terapkan tinggi ke kartu utama
card.style.height = formHeight + "px"; card.style.height = formHeight + "px";
} }
function toggleAuth(mode) { function toggleAuth(mode) {
// Sembunyikan pesan error saat pindah // Hilangkan error saat pindah
document.getElementById("loginError").style.display = "none"; document.getElementById("loginError").style.display = "none";
document.getElementById("regError").style.display = "none"; document.getElementById("regError").style.display = "none";
@ -304,69 +212,45 @@ input:focus {
card.classList.remove("active"); card.classList.remove("active");
} }
// Tunggu transisi slide sedikit, lalu resize
setTimeout(setHeight, 50); setTimeout(setHeight, 50);
} }
// Jalankan saat pertama kali loading
window.addEventListener("load", setHeight); window.addEventListener("load", setHeight);
// Jalankan jika ukuran layar browser diubah
window.addEventListener("resize", setHeight); window.addEventListener("resize", setHeight);
/* --- LOGIC LOGIN --- */ /* --- LOGIC SUBMIT (PHP) --- */
loginForm.addEventListener("submit", function(e) { loginForm.addEventListener("submit", function(e) {
e.preventDefault();
const username = document.getElementById("loginUser").value.trim(); const username = document.getElementById("loginUser").value.trim();
const password = document.getElementById("loginPass").value.trim(); const password = document.getElementById("loginPass").value.trim();
const errorBox = document.getElementById("loginError"); if (!username || !password) {
e.preventDefault();
errorBox.style.display = "none"; showMsg(document.getElementById("loginError"), "Isi semua data!");
if (!username || !password) return showMsg(errorBox, "Isi semua data!");
const usersData = localStorage.getItem("users");
const users = usersData ? JSON.parse(usersData) : [];
const user = users.find(u => u.username === username);
if (!user || user.password !== password) {
return showMsg(errorBox, "Username atau password salah");
} }
localStorage.setItem("loggedInUser", JSON.stringify(user));
window.location.href = "mainboard.html";
}); });
/* --- LOGIC REGISTER --- */
registerForm.addEventListener("submit", function(e) { registerForm.addEventListener("submit", function(e) {
e.preventDefault(); const pass = document.getElementById("regPass").value.trim();
const username = document.getElementById("regUser").value.trim();
const email = document.getElementById("regEmail").value.trim();
const password = document.getElementById("regPass").value.trim();
const confirm = document.getElementById("regConfirm").value.trim(); const confirm = document.getElementById("regConfirm").value.trim();
const errorBox = document.getElementById("regError"); if (pass.length < 6) {
e.preventDefault();
errorBox.style.display = "none"; showMsg(document.getElementById("regError"), "Password minimal 6 karakter!");
} else if (pass !== confirm) {
if (!username || !email || !password || !confirm) return showMsg(errorBox, "Semua kolom wajib diisi!"); e.preventDefault();
if (password.length < 6) return showMsg(errorBox, "Password minimal 6 karakter!"); showMsg(document.getElementById("regError"), "Password tidak cocok!");
if (password !== confirm) return showMsg(errorBox, "Password tidak cocok!"); }
// Simpan data (Simulasi)
const users = JSON.parse(localStorage.getItem("users") || "[]");
users.push({ username, password, email });
localStorage.setItem("users", JSON.stringify(users));
alert("Registrasi Berhasil! Silakan Login.");
toggleAuth('login');
}); });
function showMsg(element, msg) { function showMsg(element, msg) {
element.innerText = msg; element.innerText = msg;
element.style.display = "block"; element.style.display = "block";
setHeight(); setHeight(); // Resize ulang jika pesan error muncul
} }
/* Glitter Effect */
/* --- GLITTER EFFECT --- */
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
const card = document.querySelector(".auth-card"); const card = document.querySelector(".auth-card");
for (let i = 0; i < 15; i++) { for (let i = 0; i < 15; i++) {