combining mainboard, preparing for sql integration
This commit is contained in:
parent
8b6c95713b
commit
988fc8be0f
205
mainboard.css
205
mainboard.css
@ -1,205 +0,0 @@
|
||||
/* ================================
|
||||
BODY & BACKGROUND STYLES
|
||||
================================== */
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Poppins, Arial, sans-serif;
|
||||
background: linear-gradient(135deg, #d9a7ff, #fbc2eb, #a1c4fd);
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 50px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
/* Glow Background Floating */
|
||||
.bg-circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(70px);
|
||||
opacity: 0.7;
|
||||
animation: float 6s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.circle-one { top: 10%; left: 5%; width: 250px; height: 250px; background: rgba(255,255,255,0.25); }
|
||||
.circle-two { bottom: 15%; right: 8%; width: 300px; height: 300px; background: rgba(255,192,203,0.35); animation-delay: 1s; }
|
||||
.circle-three { top: 45%; left: 60%; width: 260px; height: 260px; background: rgba(180,120,255,0.35); animation-delay: 2s; }
|
||||
|
||||
@keyframes float {
|
||||
0%,100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-25px); }
|
||||
}
|
||||
|
||||
/* ================================
|
||||
CONTAINER CARD
|
||||
================================== */
|
||||
|
||||
.container {
|
||||
width: 750px;
|
||||
background: rgba(255,255,255,0.7);
|
||||
backdrop-filter: blur(15px);
|
||||
padding: 45px;
|
||||
border-radius: 28px;
|
||||
box-shadow: 0 15px 35px rgba(0,0,0,0.2);
|
||||
z-index: 10;
|
||||
animation: fadeIn 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* ================================
|
||||
HEADER PROFILE
|
||||
================================== */
|
||||
|
||||
.header {
|
||||
background: rgba(255,255,255,0.65);
|
||||
backdrop-filter: blur(15px);
|
||||
padding: 22px;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.user-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, purple, hotpink);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 5px 18px rgba(0,0,0,0.22);
|
||||
}
|
||||
|
||||
/* ================================
|
||||
🎀 BUTTONS
|
||||
================================== */
|
||||
|
||||
.btn {
|
||||
padding: 12px 25px;
|
||||
border: none;
|
||||
border-radius: 14px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
transition: .25s;
|
||||
}
|
||||
|
||||
.gold {
|
||||
background: linear-gradient(to right, gold, orange);
|
||||
color: white;
|
||||
}
|
||||
.gold:hover {
|
||||
transform: scale(1.07);
|
||||
box-shadow: 0 4px 12px rgba(255,165,0,0.4);
|
||||
}
|
||||
|
||||
.gray {
|
||||
background: #444;
|
||||
color: white;
|
||||
}
|
||||
.gray:hover {
|
||||
background: #222;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* ================================
|
||||
📝 TITLE
|
||||
================================== */
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.title h1 {
|
||||
font-size: 46px;
|
||||
background: linear-gradient(purple, hotpink);
|
||||
background-clip: text; /* Standar */
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 10px rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
/* ================================
|
||||
🎮 STAGE SELECTION GRID
|
||||
================================== */
|
||||
|
||||
.stage-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.stage-btn {
|
||||
background: rgba(255,255,255,0.65);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 35px;
|
||||
border-radius: 25px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: .25s ease;
|
||||
box-shadow: 0 12px 25px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
.stage-btn:hover {
|
||||
transform: scale(1.08);
|
||||
background: rgba(255,255,255,0.88);
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 48px;
|
||||
display: block;
|
||||
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); }
|
||||
}
|
||||
230
mainboard.html
230
mainboard.html
@ -4,7 +4,216 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Memory Flip Card Game</title>
|
||||
<link rel="stylesheet" href="mainboard.css">
|
||||
|
||||
<style>
|
||||
/* ================================
|
||||
BODY & BACKGROUND STYLES
|
||||
================================== */
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Poppins, Arial, sans-serif;
|
||||
background: linear-gradient(135deg, #d9a7ff, #fbc2eb, #a1c4fd);
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 50px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
/* Glow Background Floating */
|
||||
.bg-circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(70px);
|
||||
opacity: 0.7;
|
||||
animation: float 6s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.circle-one { top: 10%; left: 5%; width: 250px; height: 250px; background: rgba(255,255,255,0.25); }
|
||||
.circle-two { bottom: 15%; right: 8%; width: 300px; height: 300px; background: rgba(255,192,203,0.35); animation-delay: 1s; }
|
||||
.circle-three { top: 45%; left: 60%; width: 260px; height: 260px; background: rgba(180,120,255,0.35); animation-delay: 2s; }
|
||||
|
||||
@keyframes float {
|
||||
0%,100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-25px); }
|
||||
}
|
||||
|
||||
/* ================================
|
||||
CONTAINER CARD
|
||||
================================== */
|
||||
|
||||
.container {
|
||||
width: 750px;
|
||||
background: rgba(255,255,255,0.7);
|
||||
backdrop-filter: blur(15px);
|
||||
padding: 45px;
|
||||
border-radius: 28px;
|
||||
box-shadow: 0 15px 35px rgba(0,0,0,0.2);
|
||||
z-index: 10;
|
||||
animation: fadeIn 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* ================================
|
||||
HEADER PROFILE
|
||||
================================== */
|
||||
|
||||
.header {
|
||||
background: rgba(255,255,255,0.65);
|
||||
backdrop-filter: blur(15px);
|
||||
padding: 22px;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.user-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, purple, hotpink);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
box-shadow: 0 5px 18px rgba(0,0,0,0.22);
|
||||
}
|
||||
|
||||
/* ================================
|
||||
🎀 BUTTONS
|
||||
================================== */
|
||||
|
||||
.btn {
|
||||
padding: 12px 25px;
|
||||
border: none;
|
||||
border-radius: 14px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
transition: .25s;
|
||||
}
|
||||
|
||||
.gold {
|
||||
background: linear-gradient(to right, gold, orange);
|
||||
color: white;
|
||||
}
|
||||
.gold:hover {
|
||||
transform: scale(1.07);
|
||||
box-shadow: 0 4px 12px rgba(255,165,0,0.4);
|
||||
}
|
||||
|
||||
.gray {
|
||||
background: #444;
|
||||
color: white;
|
||||
}
|
||||
.gray:hover {
|
||||
background: #222;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* ================================
|
||||
📝 TITLE
|
||||
================================== */
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.title h1 {
|
||||
font-size: 46px;
|
||||
background: linear-gradient(purple, hotpink);
|
||||
background-clip: text; /* Standar */
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 10px rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
/* ================================
|
||||
🎮 STAGE SELECTION GRID
|
||||
================================== */
|
||||
|
||||
.stage-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.stage-btn {
|
||||
background: rgba(255,255,255,0.65);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 35px;
|
||||
border-radius: 25px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: .25s ease;
|
||||
box-shadow: 0 12px 25px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
.stage-btn:hover {
|
||||
transform: scale(1.08);
|
||||
background: rgba(255,255,255,0.88);
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 48px;
|
||||
display: block;
|
||||
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); }
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -65,6 +274,23 @@
|
||||
|
||||
</div>
|
||||
|
||||
<script src="mainboard.js"></script>
|
||||
<script>
|
||||
function selectStage(stage) {
|
||||
if (stage === "easy") {
|
||||
window.location.href = "gameboard-easy.html";
|
||||
} else if (stage === "medium") {
|
||||
window.location.href = "gameboard-medium.html";
|
||||
} else if (stage === "hard") {
|
||||
window.location.href = "gameboard-hard.html";
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById("leaderboardBtn").addEventListener("click", () => {window.location.href = "Leaderboard.html"});
|
||||
|
||||
document.getElementById("logoutBtn").addEventListener("click", () => {
|
||||
alert("Logout berhasil!");
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
15
mainboard.js
15
mainboard.js
@ -1,15 +0,0 @@
|
||||
function selectStage(stage) {
|
||||
if (stage === "easy") {
|
||||
window.location.href = "gameboard-easy.html";
|
||||
} else if (stage === "medium") {
|
||||
window.location.href = "gameboard-medium.html";
|
||||
} else if (stage === "hard") {
|
||||
window.location.href = "gameboard-hard.html";
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById("leaderboardBtn").addEventListener("click", () => {window.location.href = "Leaderboard.html"});
|
||||
|
||||
document.getElementById("logoutBtn").addEventListener("click", () => {
|
||||
alert("Logout berhasil!");
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user