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

Compare commits

base: 2526-web:1cc51683622b51346bae55e0918efe35d11dd81b
Branches Tags
2526-web:main
..
compare: 2526-web:a7f203dacd0ef8dee415078baf088524af576358
Branches Tags
2526-web:main

No commits in common. "1cc51683622b51346bae55e0918efe35d11dd81b" and "a7f203dacd0ef8dee415078baf088524af576358" have entirely different histories.
1cc5168362 ... a7f203dacd

7 changed files with 125 additions and 205 deletions
Show Stats Expand all files Collapse all files

237
login.css
View File

@ -1,211 +1,174 @@
/* Background & body */
body { body {
margin: 0; margin: 0;
font-family: Arial, sans-serif; font-family: Poppins, Arial, sans-serif;
background: linear-gradient(135deg, #d9a7ff, #fbc2eb, #a1c4fd); background: linear-gradient(135deg, #d9a7ff, #fbc2eb, #a1c4fd);
min-height: 100vh; min-height: 100vh;
overflow-y: auto; overflow: hidden;
overflow-x: hidden;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.container, .login-card { /* Animated background circles */
background: rgba(255,255,255,0.7); .bg-1, .bg-2, .bg-3 {
backdrop-filter: blur(10px); position: absolute;
padding: 40px; border-radius: 50%;
border-radius: 25px; filter: blur(70px);
width: 350px; opacity: 0.8;
z-index: 10; animation: float 7s infinite ease-in-out;
box-shadow: 0 10px 28px rgba(0,0,0,0.2);
position: relative;
} }
.bg-1 {
top: 10%;
left: 5%;
width: 220px;
height: 220px;
background: rgba(255,255,255,0.5);
}
.bg-2 {
bottom: 10%;
right: 5%;
width: 300px;
height: 300px;
background: rgba(255,180,220,0.5);
animation-delay: 1.3s;
}
.bg-3 {
top: 55%;
left: 50%;
width: 200px;
height: 200px;
transform: translate(-50%, -50%);
background: rgba(150,110,255,0.5);
animation-delay: 2s;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-25px); }
}
/* Login Card (match with register) */
.login-card {
background: rgba(255,255,255,0.35);
backdrop-filter: blur(20px);
padding: 35px;
max-width: 420px;
width: 100%;
border-radius: 25px;
box-shadow: 0 20px 50px rgba(0,0,0,0.15);
border: 1px solid rgba(255,255,255,0.4);
position: relative;
z-index: 5;
}
/* Icon */
.icon-wrapper { .icon-wrapper {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-bottom: 20px; margin-bottom: 25px;
position: relative;
} }
.icon-bg { .icon-bg {
width: 90px; height: 90px; width: 90px;
background: linear-gradient(45deg, purple, hotpink); height: 90px;
border-radius: 50%;
filter: blur(12px);
position: absolute; position: absolute;
animation: glow 3s infinite alternate; border-radius: 50%;
filter: blur(15px);
background: linear-gradient(135deg, #7928ff, #ff0080);
animation: float 5s infinite ease-in-out;
} }
.icon { .icon {
width: 70px; height: 70px; width: 70px;
height: 70px;
background: linear-gradient(135deg, #7928ff, #ff0080);
border-radius: 50%; border-radius: 50%;
background: linear-gradient(45deg, purple, hotpink);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: relative;
} }
/* Title & subtitle */
.title { .title {
text-align: center; text-align: center;
font-size: 22px; font-size: 28px;
font-weight: 700;
margin-bottom: 10px; margin-bottom: 10px;
background: linear-gradient(45deg, purple, hotpink); background: linear-gradient(45deg, #7928ff, #ff0080);
color: transparent;
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text; background-clip: text;
color: transparent;
} }
.subtitle { .subtitle {
text-align: center; text-align: center;
color: gray; color: #333;
margin-bottom: 20px; margin-bottom: 20px;
} }
label { /* Input fields */
font-size: 14px;
color: #444;
}
input { input {
width: 100%; width: 100%;
padding: 12px; padding: 13px;
border-radius: 12px; border-radius: 12px;
border: 2px solid #ccc; border: 2px solid #e6d9ff;
background: #fafafa; background: rgba(255,255,255,0.75);
margin-bottom: 15px; margin-bottom: 15px;
transition: 0.3s ease;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
} }
input:focus { input:focus {
border-color: #b47cff;
box-shadow: 0 0 10px rgba(180,124,255,0.7);
outline: none; outline: none;
border-color: purple;
} }
/* Error box */
#errorBox { #errorBox {
color: red;
background: #ffe5e5; background: #ffe5e5;
border: 1px solid #ffb2b2;
color: #b00000;
padding: 10px; padding: 10px;
border-radius: 10px; border-radius: 12px;
margin-bottom: 10px; margin-bottom: 10px;
display: none; display: none;
box-shadow: 0 5px 15px rgba(255,0,0,0.1);
} }
/* Button */
.btn { .btn {
width: 100%; width: 100%;
padding: 14px; padding: 13px;
background: linear-gradient(45deg, purple, hotpink); background: linear-gradient(to right, #7928ff, #ff0080);
color: white; color: white;
border-radius: 15px; border-radius: 14px;
border: none; border: none;
cursor: pointer; cursor: pointer;
font-size: 16px; font-weight: bold;
transition: 0.2s; letter-spacing: 0.5px;
box-shadow: 0 6px 15px rgba(255,0,128,0.3);
transition: 0.3s ease;
} }
.btn:hover { .btn:hover {
transform: scale(1.02); transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0,0,0,0.3); box-shadow: 0 10px 18px rgba(255,0,128,0.4);
}
.btn-login {
width: 100%;
padding: 14px;
background: linear-gradient(45deg, purple, hotpink);
color: white;
border-radius: 15px;
border: none;
cursor: pointer;
font-size: 16px;
transition: 0.25s ease;
}
.btn-login:hover {
transform: scale(1.03);
box-shadow: 0 4px 15px rgba(0,0,0,0.25);
}
.login-container {
max-height: none;
height: auto;
overflow: visible; /* Penting */
padding-bottom: 40px; /* Biar bagian bawah tidak kepotong */
} }
/* Register link */
.login-link { .login-link {
text-align: center; text-align: center;
margin-top: 15px; margin-top: 15px;
} }
.login-link a { .login-link a {
color: purple; color: #7928ff;
font-weight: 600;
text-decoration: underline; text-decoration: underline;
} }
.glitter {
position: absolute;
width: 4px;
height: 4px;
background: purple;
border-radius: 50%;
opacity: 0;
animation: glitter-burst 2s infinite ease-out;
pointer-events: none;
}
/* Tombol Toggle Demo */
.demo-toggle {
margin-top: 10px;
width: 100%;
padding: 10px;
border: none;
border-radius: 12px;
background: rgba(255,255,255,0.6);
cursor: pointer;
font-size: 15px;
transition: 0.3s;
}
.demo-section {
margin-top: 20px;
padding-bottom: 20px;
overflow: visible;
}
.demo-toggle:hover {
background: rgba(255,255,255,0.85);
}
.demo-box {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.5s ease, opacity 0.4s ease;
background: rgba(255, 255, 255, 0.6);
padding: 15px;
border-radius: 12px;
line-height: 1.6;
}
.demo-box.show {
max-height: 1000px;
opacity: 1;
}
@keyframes glitter-burst {
0% {
transform: scale(0.4) translate(0,0);
opacity: 0.9;
}
50% {
opacity: 1;
}
100% {
transform: scale(1) translate(var(--x), var(--y));
opacity: 0;
}
}
@keyframes glow {
0% { opacity: 0.2; }
100% { opacity: 0.55; }
}

15
login.html
View File

@ -3,7 +3,7 @@
<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>Login</title> <title>Login Page</title>
<link rel="stylesheet" href="login.css" /> <link rel="stylesheet" href="login.css" />
</head> </head>
<body> <body>
@ -20,12 +20,14 @@
<!-- Login Card --> <!-- Login Card -->
<div class="login-card"> <div class="login-card">
<div class="icon-wrapper"> <div class="icon-wrapper">
<div class="icon-bg"></div>
<div class="icon-circle"> <div class="icon-circle">
</div> </div>
</div> </div>
<div class="header-text"> <div class="header-text">
<h2>Selamat Datang! ✨</h2> <h2>Selamat Datang! ✨</h2>
<p>Login untuk bermain Memory Flip Card Game</p> <p>Login untuk bermain Memory Card Game</p>
</div> </div>
<form id="loginForm"> <form id="loginForm">
@ -37,7 +39,7 @@
<div id="errorBox" class="error"></div> <div id="errorBox" class="error"></div>
<button class="btn-login">Login Sekarang</button> <button type="submit" class="btn-login">Login Sekarang</button>
</form> </form>
<p class="register-text"> <p class="register-text">
@ -45,9 +47,7 @@
<a href="register.html">Daftar Sekarang</a> <a href="register.html">Daftar Sekarang</a>
</p> </p>
<button class="demo-toggle" onclick="toggleDemo()">Lihat Demo Akun ▼</button> <div class="demo-box">
<div class="demo-box" id="demoBox">
<p><strong>🎮 Demo Akun</strong></p> <p><strong>🎮 Demo Akun</strong></p>
<div class="demo-item"> <div class="demo-item">
@ -63,6 +63,9 @@
</div> </div>
</div> </div>
</div>
</div>
<script src="login.js"></script> <script src="login.js"></script>
</body> </body>
</html> </html>

43
login.js
View File

@ -1,4 +1,3 @@
/*LOGIN VALIDATION*/
document.getElementById("loginForm").addEventListener("submit", function(e) { document.getElementById("loginForm").addEventListener("submit", function(e) {
e.preventDefault(); e.preventDefault();
@ -34,7 +33,7 @@ document.getElementById("loginForm").addEventListener("submit", function(e) {
return; return;
} }
// Login sukses // Login success
localStorage.setItem("loggedInUser", JSON.stringify(user)); localStorage.setItem("loggedInUser", JSON.stringify(user));
window.location.href = "mainboard.html"; window.location.href = "mainboard.html";
}); });
@ -44,43 +43,3 @@ function showError(msg) {
errorBox.innerText = msg; errorBox.innerText = msg;
errorBox.style.display = "block"; errorBox.style.display = "block";
} }
function toggleDemo() {
const box = document.getElementById("demoBox");
const btn = document.querySelector(".demo-toggle");
box.classList.toggle("show");
// Ubah teks tombol
if (box.classList.contains("show")) {
btn.textContent = "Sembunyikan Demo Akun ▲";
} else {
btn.textContent = "Lihat Demo Akun ▼";
}
}
/* GLITTER EFFECT*/
document.addEventListener("DOMContentLoaded", function () {
const card = document.querySelector(".login-card");
if (!card) return;
// Tambah glitter 20x
for (let i = 0; i < 20; i++) {
const g = document.createElement("div");
g.className = "glitter";
// Random posisi ledakan glitter
g.style.setProperty("--x", (Math.random() * 200 - 100) + "px");
g.style.setProperty("--y", (Math.random() * 200 - 100) + "px");
g.style.left = (Math.random() * 100) + "%";
g.style.top = (Math.random() * 100) + "%";
g.style.animationDelay = (Math.random() * 2) + "s";
card.appendChild(g);
}
});

7
mainboard.css
View File

@ -33,13 +33,6 @@ body {
margin: auto; margin: auto;
position: relative; position: relative;
z-index: 10; z-index: 10;
background: rgba(255,255,255,0.7);
backdrop-filter: blur(10px);
padding: 40px;
border-radius: 25px;
width: 600px;
z-index: 10;
box-shadow: 0 10px 28px rgba(0,0,0,0.2);
} }
/* HEADER CARD */ /* HEADER CARD */

3
mainboard.html
View File

@ -3,7 +3,7 @@
<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>Memory Flip Card Game</title> <title>Memory Game</title>
<link rel="stylesheet" href="mainboard.css"> <link rel="stylesheet" href="mainboard.css">
</head> </head>
@ -25,6 +25,7 @@
</div> </div>
</header> </header>
<!-- TITLE -->
<div class="title"> <div class="title">
<h1>🎮 Memory Flip Card Game</h1> <h1>🎮 Memory Flip Card Game</h1>
<p>Pilih tingkat kesulitan untuk memulai permainan</p> <p>Pilih tingkat kesulitan untuk memulai permainan</p>

2
register.css
View File

@ -1,7 +1,7 @@
body { body {
margin: 0; margin: 0;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background: linear-gradient(135deg, #d9a7ff, #fbc2eb, #a1c4fd);; background: #f7f7ff;
} }
.page { .page {

1
register.html
View File

@ -18,6 +18,7 @@
<div class="icon-wrapper"> <div class="icon-wrapper">
<div class="icon-bg"></div> <div class="icon-bg"></div>
<div class="icon"> <div class="icon">
<img src="userplus.png" width="45" />
</div> </div>
</div> </div>