2526-web/kelompok06-2048
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Register update

Browse Source
This commit is contained in:
Jevinca Marvella 2025-11-25 11:51:17 +07:00
parent c548614a94
commit 07be893964
4 changed files with 117 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
2048.css
View File

@ -47,10 +47,6 @@ button:hover {
font-size: 20px; font-size: 20px;
} }
/* ======================
BOARD
====================== */
/* ========================== /* ==========================
BOARD — MIRIP BORDER LOGIN BOARD — MIRIP BORDER LOGIN
@ -100,7 +96,6 @@ button:hover {
} }
/* ====================== /* ======================
TILE TILE
====================== */ ====================== */

4
Modal_Register.js
View File

@ -9,10 +9,10 @@ export function showModal(type, title, message) {
if (type === "success") { if (type === "success") {
modalIcon.classList.add("success"); modalIcon.classList.add("success");
modalTitle.textContent = title || "Register Berhasil!"; modalTitle.textContent = title || "Register Successful!";
} else { } else {
modalIcon.classList.add("error"); modalIcon.classList.add("error");
modalTitle.textContent = title || "Register Gagal!"; modalTitle.textContent = title || "Register Failed!";
} }
modalMessage.textContent = message; modalMessage.textContent = message;

147
Register.css
View File

@ -158,14 +158,18 @@ input::placeholder {
text-shadow: 0 0 10px #00ddff; text-shadow: 0 0 10px #00ddff;
} }
/* Modal */ /* Modal - CENTERED VERSION */
.modal { .modal {
display: none; display: none;
position: fixed; position: fixed;
z-index: 999; z-index: 1000;
inset: 0; left: 0;
background-color: rgba(0, 0, 0, 0.75); top: 0;
backdrop-filter: blur(8px); width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(5px);
animation: fadeIn 0.3s ease;
} }
.modal.show { .modal.show {
@ -175,75 +179,124 @@ input::placeholder {
} }
.modal-content { .modal-content {
background: rgba(20, 0, 40, 0.95); background: linear-gradient(135deg, rgba(30, 0, 50, 0.95) 0%, rgba(50, 0, 80, 0.95) 100%);
border: 2px solid rgba(0, 217, 255, 0.3);
border-radius: 20px; border-radius: 20px;
border: 2px solid rgba(0, 255, 255, 0.4); padding: 40px 30px;
padding: 35px 25px; text-align: center;
width: 90%;
max-width: 400px; max-width: 400px;
width: 90%;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
0 0 40px rgba(0, 217, 255, 0.3),
inset 0 0 30px rgba(0, 217, 255, 0.1);
animation: slideIn 0.3s ease, glowBorder 3s ease-in-out infinite;
}
box-shadow: @keyframes glowBorder {
0 0 30px #00eaff, 0%, 100% {
0 0 60px #ff00ff; border-color: rgba(0, 217, 255, 0.4);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
0 0 40px rgba(0, 217, 255, 0.3),
inset 0 0 30px rgba(0, 217, 255, 0.1);
}
50% {
border-color: rgba(255, 0, 255, 0.5);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
0 0 50px rgba(255, 0, 255, 0.4),
inset 0 0 40px rgba(255, 0, 255, 0.15);
}
} }
.modal-icon { .modal-icon {
width: 80px; width: 80px;
height: 80px; height: 80px;
margin: 0 auto 15px; margin: 0 auto 20px;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 38px; font-size: 40px;
color: white;
} }
.modal-icon.success { .modal-icon.success {
background: linear-gradient(135deg, #00eaff, #00ff88); background: linear-gradient(135deg, #00d9ff 0%, #00ff88 100%);
box-shadow: 0 0 25px #00ffcc; box-shadow: 0 0 30px rgba(0, 217, 255, 0.6);
}
.modal-icon.success::before {
content: "✓";
color: #fff;
} }
.modal-icon.error { .modal-icon.error {
background: linear-gradient(135deg, #ff0066, #ff00ff); background: linear-gradient(135deg, #ff0080 0%, #ff00ff 100%);
box-shadow: 0 0 25px #ff00aa; box-shadow: 0 0 30px rgba(255, 0, 128, 0.6);
}
.modal-icon.error::before {
content: "✕";
color: #fff;
} }
.modal-content h2 { .modal-content h2 {
font-size: 1.7rem; color: #fff;
margin-bottom: 10px; font-size: 1.8rem;
margin-bottom: 15px;
background: linear-gradient(90deg, #00eaff, #ff00ff); background: linear-gradient(90deg, #00d9ff 0%, #ff00ff 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text; /* FIX: properti standar */
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-clip: text;
} }
.modal-content p { .modal-content p {
color: rgba(240, 240, 255, 0.8); color: rgba(255, 255, 255, 0.8);
margin-bottom: 25px; font-size: 1rem;
margin-bottom: 30px;
line-height: 1.5; line-height: 1.5;
} }
.modal-btn { .modal-btn {
padding: 12px 55px; padding: 12px 50px;
background: linear-gradient(90deg, #00eaff, #ff00ff); background: linear-gradient(90deg, #00d9ff 0%, #ff00ff 100%);
border: none; border: none;
border-radius: 10px; border-radius: 10px;
color: #fff;
color: white;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
cursor: pointer; cursor: pointer;
box-shadow: 0 0 20px #00d9ff; transition: all 0.3s ease;
transition: 0.3s ease; box-shadow: 0 5px 25px rgba(0, 217, 255, 0.4);
} }
.modal-btn:hover { .modal-btn:hover {
transform: translateY(-3px); transform: translateY(-2px);
box-shadow: 0 0 30px #00eaff; box-shadow: 0 8px 35px rgba(0, 217, 255, 0.6);
}
.modal-btn:active {
transform: translateY(0);
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideIn {
from {
transform: translateY(-50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
} }
/* Autocomplete/Datalist Styling */ /* Autocomplete/Datalist Styling */
@ -251,7 +304,7 @@ input::-webkit-calendar-picker-indicator {
filter: invert(1); filter: invert(1);
} }
/* Styling untuk browser autocomplete */ /* Browser autocomplete styling */
input:-webkit-autofill, input:-webkit-autofill,
input:-webkit-autofill:hover, input:-webkit-autofill:hover,
input:-webkit-autofill:focus { input:-webkit-autofill:focus {
@ -265,7 +318,7 @@ input:-webkit-autofill:focus {
border-color: #00d9ff; border-color: #00d9ff;
} }
/* Styling untuk datalist dropdown - terbatas karena browser restrictions */ /* Datalist dropdown styling - limited due to browser restrictions */
datalist { datalist {
background-color: rgba(30, 0, 50, 0.95); background-color: rgba(30, 0, 50, 0.95);
} }
@ -276,12 +329,12 @@ option {
padding: 10px; padding: 10px;
} }
/* Untuk Firefox */ /* For Firefox */
input::-moz-list-thumbnail { input::-moz-list-thumbnail {
background-color: rgba(30, 0, 50, 0.95); background-color: rgba(30, 0, 50, 0.95);
} }
/* Custom styling untuk dropdown suggestion */ /* Custom styling for dropdown suggestion */
input[list]::-webkit-list-button { input[list]::-webkit-list-button {
color: #00d9ff; color: #00d9ff;
} }
@ -305,4 +358,18 @@ input[list]::-webkit-list-button {
padding: 13px; padding: 13px;
font-size: 16px; font-size: 16px;
} }
.modal-icon {
width: 60px;
height: 60px;
font-size: 30px;
}
.modal-content h2 {
font-size: 1.3rem;
}
.modal-content p {
font-size: 0.9rem;
}
} }

14
Register.js
View File

@ -14,13 +14,13 @@ document.getElementById("registerForm").addEventListener("submit", async functio
// Validasi kosong // Validasi kosong
if (!username || !password || !confirmPassword) { if (!username || !password || !confirmPassword) {
showModal("error", "Register Gagal!", "Semua field wajib diisi."); showModal("error", "Register Failed!", "All fields are required.");
return; return;
} }
// Validasi password tidak sama // Validasi password tidak sama
if (password !== confirmPassword) { if (password !== confirmPassword) {
showModal("error", "Password Tidak Cocok!", "Password dan Confirm Password harus sama."); showModal("error", "Password Mismatch!", "Password and Confirm Password must match.");
setInputError("password"); setInputError("password");
setInputError("confirmPassword"); setInputError("confirmPassword");
return; return;
@ -29,7 +29,7 @@ document.getElementById("registerForm").addEventListener("submit", async functio
// Button loading state // Button loading state
const submitBtn = this.querySelector("button[type='submit']"); const submitBtn = this.querySelector("button[type='submit']");
const originalText = submitBtn.textContent; const originalText = submitBtn.textContent;
submitBtn.innerHTML = "<span>Memproses...</span>"; submitBtn.innerHTML = "<span>Loading...</span>";
submitBtn.disabled = true; submitBtn.disabled = true;
try { try {
@ -37,20 +37,20 @@ document.getElementById("registerForm").addEventListener("submit", async functio
// API temenmu return: { status: "success", message: "..." } // API temenmu return: { status: "success", message: "..." }
if (data.status === "success") { if (data.status === "success") {
showModal("success", "Register Berhasil!", data.message); showModal("success", "Register Successful!", data.message);
} else { } else {
showModal("error", "Register Gagal!", data.message || "Terjadi kesalahan."); showModal("error", "Register Failed!", data.message || "An error occurred.");
setInputError("username"); setInputError("username");
} }
} catch (error) { } catch (error) {
console.error("Register Error:", error); console.error("Register Error:", error);
let msg = "Terjadi kesalahan koneksi."; let msg = "A connection error occurred.";
if (error.message === "Failed to fetch") { if (error.message === "Failed to fetch") {
msg = "Tidak dapat terhubung ke server."; msg = "Unable to connect to server.";
} }
showModal("error", "Error!", msg); showModal("error", "Error!", msg);