Compare commits
No commits in common. "dev" and "feat/score" have entirely different histories.
dev
...
feat/score
11
coba.html
11
coba.html
@ -1,11 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Document</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1>hai</h1>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 216 B |
Binary file not shown.
|
Before Width: | Height: | Size: 245 B |
Binary file not shown.
|
Before Width: | Height: | Size: 240 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 873 B |
Binary file not shown.
|
Before Width: | Height: | Size: 741 B |
Binary file not shown.
|
Before Width: | Height: | Size: 831 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
196
src/credit.html
196
src/credit.html
@ -1,196 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Document</title>
|
|
||||||
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
|
||||||
<link rel="stylesheet" href="/css/global.css">
|
|
||||||
<link rel="stylesheet" href="/css/style.css">
|
|
||||||
<style>
|
|
||||||
:root {
|
|
||||||
--height: 500px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<audio id="bgm-crdt" src="/assets/music/credit.mp3" autoplay></audio>
|
|
||||||
<div class="container-credits" id="credits">
|
|
||||||
<a class="back" href="onboard.php" data-aos="fade-in" data-aos-duration="3000">✖</a>
|
|
||||||
<div class="credits">
|
|
||||||
<div class="credits-inner" id="creditsInner">
|
|
||||||
<div class="block">
|
|
||||||
<h1>👾 codebeater 👾</h1>
|
|
||||||
|
|
||||||
<div class="role">lecturer Counselors</div>
|
|
||||||
<div class="name">Bu Devi</div>
|
|
||||||
<div class="name">Koh Andrew</div>
|
|
||||||
|
|
||||||
<div class="role">Development Team</div>
|
|
||||||
<div class="name">Owen</div>
|
|
||||||
<div class="name">Matthew Florentino</div>
|
|
||||||
<div class="name">Carolus Bramantyo</div>
|
|
||||||
<div class="name">Yohannes Marcel</div>
|
|
||||||
|
|
||||||
<div class="role">Frontend Developer</div>
|
|
||||||
<div class="name">Yohannes Marcel</div>
|
|
||||||
<div class="name">Matthew Florentino</div>
|
|
||||||
<div class="name">Owen</div>
|
|
||||||
|
|
||||||
<div class="role">backend Developer</div>
|
|
||||||
<div class="name">Carolus Bramantyo</div>
|
|
||||||
<div class="name">Matthew Florentino</div>
|
|
||||||
|
|
||||||
<div class="role">Game Designers</div>
|
|
||||||
<div class="name">Yohannes Marcel</div>
|
|
||||||
|
|
||||||
<div class="role">Assets Designers</div>
|
|
||||||
<div class="name">Yohannes Marcel</div>
|
|
||||||
|
|
||||||
<div class="role">Questions Designers</div>
|
|
||||||
<div class="name">Yohannes Marcel</div>
|
|
||||||
<div class="name">Owen</div>
|
|
||||||
|
|
||||||
<div class="role">CSS Specialist</div>
|
|
||||||
<div class="name">Matthew Florentino</div>
|
|
||||||
|
|
||||||
<div class="role">JS Specialist</div>
|
|
||||||
<div class="name">Matthew Florentino</div>
|
|
||||||
|
|
||||||
<div class="role">PHP Specialist</div>
|
|
||||||
<div class="name">Carolus Bramantyo</div>
|
|
||||||
|
|
||||||
<div class="role">SQL Specialist</div>
|
|
||||||
<div class="name">Carolus Bramantyo</div>
|
|
||||||
|
|
||||||
<div class="role">Advicer</div>
|
|
||||||
<div class="name">Rafael</div>
|
|
||||||
<div class="name">Erlang</div>
|
|
||||||
<div class="name">Bu Devi</div>
|
|
||||||
<div class="name">koh Andrew</div>
|
|
||||||
|
|
||||||
<div class="role">Libary</div>
|
|
||||||
<div class="name">Animate on Scroll</div>
|
|
||||||
|
|
||||||
<div class="role">Font</div>
|
|
||||||
<div class="name">Jetbrains Mono</div>
|
|
||||||
|
|
||||||
<div class="role">Reference Game</div>
|
|
||||||
<div class="name">Undertale</div>
|
|
||||||
<div class="name">Soul Knight</div>
|
|
||||||
<div class="name">Tomb of the Mask</div>
|
|
||||||
|
|
||||||
<div class="role">Reference Music</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div style="height:40px;"></div>
|
|
||||||
<div style="height:40px"></div>
|
|
||||||
</div>
|
|
||||||
<div class="block">
|
|
||||||
<h1>👾 codebeater 👾</h1>
|
|
||||||
|
|
||||||
<div class="role">lecturer Counselors</div>
|
|
||||||
<div class="name">Bu Devi</div>
|
|
||||||
<div class="name">Koh Andrew</div>
|
|
||||||
|
|
||||||
<div class="role">Development Team</div>
|
|
||||||
<div class="name">Owen</div>
|
|
||||||
<div class="name">Matthew Florentino</div>
|
|
||||||
<div class="name">Carolus Bramantyo</div>
|
|
||||||
<div class="name">Yohannes Marcel</div>
|
|
||||||
|
|
||||||
<div class="role">Frontend Developer</div>
|
|
||||||
<div class="name">Yohannes Marcel</div>
|
|
||||||
<div class="name">Matthew Florentino</div>
|
|
||||||
<div class="name">Owen</div>
|
|
||||||
|
|
||||||
<div class="role">backend Developer</div>
|
|
||||||
<div class="name">Carolus Bramantyo</div>
|
|
||||||
<div class="name">Matthew Florentino</div>
|
|
||||||
|
|
||||||
<div class="role">Game Designers</div>
|
|
||||||
<div class="name">Yohannes Marcel</div>
|
|
||||||
|
|
||||||
<div class="role">Assets Designers</div>
|
|
||||||
<div class="name">Yohannes Marcel</div>
|
|
||||||
|
|
||||||
<div class="role">Questions Designers</div>
|
|
||||||
<div class="name">Yohannes Marcel</div>
|
|
||||||
<div class="name">Owen</div>
|
|
||||||
|
|
||||||
<div class="role">CSS Specialist</div>
|
|
||||||
<div class="name">Matthew Florentino</div>
|
|
||||||
|
|
||||||
<div class="role">JS Specialist</div>
|
|
||||||
<div class="name">Matthew Florentino</div>
|
|
||||||
|
|
||||||
<div class="role">PHP Specialist</div>
|
|
||||||
<div class="name">Carolus Bramantyo</div>
|
|
||||||
|
|
||||||
<div class="role">SQL Specialist</div>
|
|
||||||
<div class="name">Carolus Bramantyo</div>
|
|
||||||
|
|
||||||
<div class="role">Advicer</div>
|
|
||||||
<div class="name">Rafael</div>
|
|
||||||
<div class="name">Erlang</div>
|
|
||||||
<div class="name">Bu Devi</div>
|
|
||||||
<div class="name">koh Andrew</div>
|
|
||||||
|
|
||||||
<div class="role">Libary</div>
|
|
||||||
<div class="name">Animate on Scroll</div>
|
|
||||||
|
|
||||||
<div class="role">Font</div>
|
|
||||||
<div class="name">Jetbrains Mono</div>
|
|
||||||
|
|
||||||
<div class="role">Reference Game</div>
|
|
||||||
<div class="name">Undertale</div>
|
|
||||||
<div class="name">Soul Knight</div>
|
|
||||||
<div class="name">Tomb of the Mask</div>
|
|
||||||
|
|
||||||
<div class="role">Reference Music</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div style="height:40px;"></div>
|
|
||||||
<div style="height:40px"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
|
||||||
const bgm = document.getElementById("bgm-crdt");
|
|
||||||
bgm.volume = 0.2;
|
|
||||||
bgm.play()
|
|
||||||
const inner = document.getElementById("creditsInner");
|
|
||||||
let y = 0;
|
|
||||||
let blockH = inner.scrollHeight / 2;
|
|
||||||
const speed = 40;
|
|
||||||
|
|
||||||
function loop() {
|
|
||||||
y -= speed / 60;
|
|
||||||
if (y <= -blockH) y = 0;
|
|
||||||
inner.style.transform = `translateY(${y}px)`;
|
|
||||||
requestAnimationFrame(loop);
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener("resize", () => {
|
|
||||||
blockH = inner.scrollHeight / 2;
|
|
||||||
y = 0;
|
|
||||||
});
|
|
||||||
|
|
||||||
loop();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
|
||||||
<script>
|
|
||||||
AOS.init();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@ -7,6 +7,15 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.container-third .anm {
|
||||||
|
font-size: 100px;
|
||||||
|
background-size: cover;
|
||||||
|
position: absolute;
|
||||||
|
top: 100px;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.container-third .bg img {
|
.container-third .bg img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -38,11 +47,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.container-first {
|
.container-first {
|
||||||
background-image: url(/assets/Design/newBGBOSSFIGHT.gif);
|
/* background-image: url(/src/assets/Design/CAVEBOSSFIGHT.png); */
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
image-rendering: pixelated;
|
image-rendering: pixelated;
|
||||||
background-position: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.container-first .content .boss {
|
.container-first .content .boss {
|
||||||
@ -64,57 +72,6 @@
|
|||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container-first .content .boss .dmg {
|
|
||||||
width: 600px;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 100px;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
image-rendering: pixelated;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes shake {
|
|
||||||
0% {
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
25% {
|
|
||||||
transform: translateX(calc(-50% - 5px));
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
transform: translateX(calc(-50% + 5px));
|
|
||||||
}
|
|
||||||
|
|
||||||
75% {
|
|
||||||
transform: translateX(calc(-50% - 5px));
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.animate-shake {
|
|
||||||
animation: shake 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-first .hearts {
|
|
||||||
position: absolute;
|
|
||||||
top: 322px;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
image-rendering: pixelated;
|
|
||||||
z-index: 999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-first .hearts img {
|
|
||||||
width: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-first .content .quiz {
|
.container-first .content .quiz {
|
||||||
width: 1000px;
|
width: 1000px;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
@ -153,7 +110,7 @@
|
|||||||
color: #ffdf12;
|
color: #ffdf12;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
background-color: #f7e62e34;
|
background-color: #f7e62e34;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
@ -170,36 +127,4 @@
|
|||||||
100% {
|
100% {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.container-load {
|
|
||||||
position: relative;
|
|
||||||
min-height: 100dvh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-load .bg {
|
|
||||||
background-size: cover;
|
|
||||||
width: 100%;
|
|
||||||
height: 100dvh;
|
|
||||||
position: absolute;
|
|
||||||
z-index: -999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-load .anm {
|
|
||||||
font-size: 25px;
|
|
||||||
background-size: cover;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 50%;
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-load .hero {
|
|
||||||
width: 100px;
|
|
||||||
position: absolute;
|
|
||||||
image-rendering: pixelated;
|
|
||||||
bottom: -5%;
|
|
||||||
left: 5%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
z-index: 999;
|
|
||||||
}
|
}
|
||||||
@ -8,8 +8,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.container-login h1 {
|
.container-login h1 {
|
||||||
font-size: 130px;
|
font-size: 100px;
|
||||||
font-weight: 400;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.container-login form {
|
.container-login form {
|
||||||
@ -19,16 +18,15 @@
|
|||||||
|
|
||||||
.container-login form h2 {
|
.container-login form h2 {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
font-size: 40px;
|
font-size: 30px;
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container-login form input {
|
.container-login form input {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
width: 300px;
|
width: 200px;
|
||||||
height: 40px;
|
height: 30px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
font-size: 20px;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
border: 1px solid white;
|
border: 1px solid white;
|
||||||
@ -41,12 +39,20 @@
|
|||||||
|
|
||||||
.container-login form button {
|
.container-login form button {
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
width: 300px;
|
width: 200px;
|
||||||
height: 40px;
|
height: 30px;
|
||||||
margin-top: 40px;
|
margin-top: 40px;
|
||||||
font-size: 30px
|
font-size: 30px
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.container-login form button:hover {
|
||||||
|
border-radius: 6px;
|
||||||
|
width: 200px;
|
||||||
|
height: 30px;
|
||||||
|
margin-top: 40px;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
.container-login form p {
|
.container-login form p {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
@ -70,8 +76,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.container-register h1 {
|
.container-register h1 {
|
||||||
font-size: 120px;
|
font-size: 100px;
|
||||||
font-weight: 400;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.container-register form {
|
.container-register form {
|
||||||
@ -80,17 +85,16 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.container-register form h2 {
|
.container-register form h2 {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 20px;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container-register form input {
|
.container-register form input {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
width: 300px;
|
width: 200px;
|
||||||
height: 40px;
|
height: 30px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
font-size: 20px;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
border: 1px solid white;
|
border: 1px solid white;
|
||||||
@ -103,12 +107,20 @@
|
|||||||
|
|
||||||
.container-register form button {
|
.container-register form button {
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
width: 300px;
|
width: 200px;
|
||||||
height: 40px;
|
height: 30px;
|
||||||
margin-top: 10px;
|
margin-top: 40px;
|
||||||
font-size: 30px
|
font-size: 30px
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.container-register form button:hover {
|
||||||
|
border-radius: 6px;
|
||||||
|
width: 200px;
|
||||||
|
height: 30px;
|
||||||
|
margin-top: 40px;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
.container-register form p {
|
.container-register form p {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
@ -127,36 +139,6 @@
|
|||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 100dvh;
|
height: 100dvh;
|
||||||
/* Hapus properti background dari sini dan pindahkan ke ::before */
|
|
||||||
|
|
||||||
/* Tambahkan posisi relatif agar pseudo-element bisa diposisikan absolut di dalamnya */
|
|
||||||
position: relative;
|
|
||||||
/* Pastikan konten di dalam container ada di atas latar */
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Pseudo-element untuk menampung gambar latar transparan */
|
|
||||||
.container-board::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
|
|
||||||
/* Pindahkan properti background Anda ke sini */
|
|
||||||
background-image: url(/assets/Design/CampFire8WESFIX!-export.png);
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
image-rendering: pixelated;
|
|
||||||
|
|
||||||
/* >>> INI KUNCINYA: Atur opasitasnya di sini <<< */
|
|
||||||
opacity: 1;
|
|
||||||
/* Contoh nilai 40% transparan */
|
|
||||||
|
|
||||||
/* Pindahkan latar ini ke lapisan paling bawah */
|
|
||||||
z-index: -1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.container-board .chara {
|
.container-board .chara {
|
||||||
@ -182,8 +164,9 @@
|
|||||||
|
|
||||||
.container-board .menu {
|
.container-board .menu {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
border-radius: 6px;
|
border-radius: 10px;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
|
border: 1px solid;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
}
|
}
|
||||||
@ -195,15 +178,13 @@
|
|||||||
/*menghilangkan gap antar border*/
|
/*menghilangkan gap antar border*/
|
||||||
font-family: "Segoe UI", Tahoma, sans-serif;
|
font-family: "Segoe UI", Tahoma, sans-serif;
|
||||||
color: white;
|
color: white;
|
||||||
font-weight: 200;
|
|
||||||
font-size: 20px;
|
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container-board .board table th,
|
.container-board .board table th,
|
||||||
td {
|
td {
|
||||||
border: 5px solid #ffffff;
|
border: 5px solid #ffffffb8;
|
||||||
padding: 14px 18px;
|
padding: 14px 18px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -217,28 +198,10 @@ td {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.container-board .board table {
|
|
||||||
background: #0b0e00f3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-board .board table tbody tr:hover {
|
.container-board .board table tbody tr:hover {
|
||||||
background: #c1fc0032;
|
background: #c1fc0032;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container-board .back {
|
|
||||||
color: #ffff009a;
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 30px;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 99999;
|
|
||||||
left: 2%;
|
|
||||||
top: 5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-board .back:hover {
|
|
||||||
color: yellow;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-onboard {
|
.container-onboard {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -246,8 +209,9 @@ td {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-image: url(/assets/Design/landingPage.png);
|
/* background-image: url(/src/assets/Design/wayland.png);
|
||||||
background-position: center;
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.container-onboard h1 {
|
.container-onboard h1 {
|
||||||
@ -279,75 +243,4 @@ td {
|
|||||||
color: #dd85fa;
|
color: #dd85fa;
|
||||||
border: 1px solid #dd85fa;
|
border: 1px solid #dd85fa;
|
||||||
background-color: #871b8323;
|
background-color: #871b8323;
|
||||||
}
|
|
||||||
|
|
||||||
.container-credits {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 100vh;
|
|
||||||
background-image: url(/assets/Design/creditbg.png);
|
|
||||||
margin: 0;
|
|
||||||
background-position: center;
|
|
||||||
background-size:cover ;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-credits .credits {
|
|
||||||
width: 100%;
|
|
||||||
height: var(--height);
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 24px 12px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-credits .credits .credits-inner {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
transform: translateY(0);
|
|
||||||
will-change: transform;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-credits .credits .credits-inner h1 {
|
|
||||||
font-size: 150px;
|
|
||||||
color: yellow;
|
|
||||||
font-weight: 400;
|
|
||||||
margin-bottom: 50px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-credits .credits .credits-inner .role {
|
|
||||||
font-weight: 400;
|
|
||||||
color: yellow;
|
|
||||||
margin-top: 10px;
|
|
||||||
text-align: center;
|
|
||||||
padding: 6px 0;
|
|
||||||
font-size: 50px;
|
|
||||||
line-height: 1.25;
|
|
||||||
text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-credits .credits .credits-inner .name {
|
|
||||||
font-weight: 400;
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 14px;
|
|
||||||
text-align: center;
|
|
||||||
padding: 6px 0;
|
|
||||||
font-size: 30px;
|
|
||||||
line-height: 1.25;
|
|
||||||
text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-credits .back {
|
|
||||||
color: #ffff009a;
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 30px;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 99999;
|
|
||||||
left: 2%;
|
|
||||||
top: 5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container-credits .back:hover {
|
|
||||||
color: yellow;
|
|
||||||
}
|
}
|
||||||
@ -1,52 +1,29 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<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>firstperson</title>
|
<title>firstperson</title>
|
||||||
<link rel="stylesheet" href="/css/global.css">
|
<link rel="stylesheet" href="/css/global.css">
|
||||||
<link rel="stylesheet" href="/css/game.css">
|
<link rel="stylesheet" href="/css/game.css">
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<audio id="bgm" src="/assets/music/game.mp3" loop autoplay></audio>
|
|
||||||
<audio id="sfx" src="/assets/music/slash.mp3"></audio>
|
|
||||||
<audio id="sfxhrt" src="/assets/music/hurt.mp3"></audio>
|
|
||||||
<div class="container-first">
|
<div class="container-first">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="boss">
|
<div class="boss">
|
||||||
<img id="boss" src="/assets/Design/PYTHON-BOSSFIGHTMODEFINALt.gif" alt="">
|
<img id="boss" src="/assets/Design/PYTHON-BOSSFIGHTMODEFINALt.gif" alt="">
|
||||||
<img id="dmg" class="dmg" src="/assets/Design/damageeffectNEWSLASH.gif"/>
|
|
||||||
</div>
|
|
||||||
<div class="hearts" id="hrt">
|
|
||||||
<img id="h1" src="/assets/Design/Heartfull.png">
|
|
||||||
<img id="h2" src="/assets/Design/Heartfull.png">
|
|
||||||
<img id="h3" src="/assets/Design/Heartfull.png">
|
|
||||||
</div>
|
</div>
|
||||||
<div class="quiz">
|
<div class="quiz">
|
||||||
<h2 id="question"></h2>
|
<h2 id="question">Question Goes Here ......... !!</h2>
|
||||||
<div id="btn-answer">
|
<div id="btn-answer">
|
||||||
<button class="btn"></button>
|
<button class="btn">text</button>
|
||||||
<button class="btn"></button>
|
<button class="btn">text</button>
|
||||||
<button class="btn"></button>
|
<button class="btn">text</button>
|
||||||
<button class="btn"></button>
|
<button class="btn">text</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script type="module" src="/js/firstperson.js"></script>
|
<script src="/js/firstperson.js"></script>
|
||||||
<script>
|
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
|
||||||
const bgm = document.getElementById("bgm");
|
|
||||||
bgm.volume = 0.1;
|
|
||||||
bgm.loop(true)
|
|
||||||
bgm.play()
|
|
||||||
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@ -1,18 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Loading ...</title>
|
|
||||||
<link rel="stylesheet" href="/css/global.css">
|
|
||||||
<link rel="stylesheet" href="/css/game.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container-load">
|
|
||||||
<p id="wellcome-message" class="anm" ><span style="color: yellow; font-size: 40px;">Welcome to the Python Quiz!</span><br>You’ll face multiple-choice questions designed to test your logic and Python skills. <br>Let’s see how well you can outsmart the code!</p>
|
|
||||||
<img id="hero" class="hero" src="/assets/Design/KNIGHTPIXLETPP.gif" alt="">
|
|
||||||
<img class="bg" src="/assets/Design/LOADSCREEN.gif" alt="">
|
|
||||||
</div>
|
|
||||||
<script src="/js/load.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -10,6 +10,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container-third">
|
<div class="container-third">
|
||||||
|
<h1 id="wellcome-message" class="anm" >PYTHON QUIZ GAME</h1>
|
||||||
<div class="bg">
|
<div class="bg">
|
||||||
<img src="/assets/Design/wayland.png" alt="bg">
|
<img src="/assets/Design/wayland.png" alt="bg">
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,4 +1,32 @@
|
|||||||
import { questions } from "./soal.js";
|
const questions = [
|
||||||
|
{
|
||||||
|
question: "what is Python ?",
|
||||||
|
answers: [
|
||||||
|
{text: "Programming Lang", correct: true},
|
||||||
|
{text: "Animal", correct: false},
|
||||||
|
{text: "Danger", correct: false},
|
||||||
|
{text: "All Answer Correct", correct: false},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Data type at python ?",
|
||||||
|
answers: [
|
||||||
|
{text: "Docx", correct: false},
|
||||||
|
{text: "CSV", correct: false},
|
||||||
|
{text: "String", correct: true},
|
||||||
|
{text: "SQL", correct: false},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Index at python start from ?",
|
||||||
|
answers: [
|
||||||
|
{text: "1", correct: false},
|
||||||
|
{text: "-1", correct: false},
|
||||||
|
{text: "10", correct: false},
|
||||||
|
{text: "0", correct: true},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
const questionElement = document.getElementById("question")
|
const questionElement = document.getElementById("question")
|
||||||
const answerBtn = document.getElementById("btn-answer")
|
const answerBtn = document.getElementById("btn-answer")
|
||||||
@ -6,25 +34,12 @@ const answerBtn = document.getElementById("btn-answer")
|
|||||||
let currentQuestionIndex = 0;
|
let currentQuestionIndex = 0;
|
||||||
let score = 0;
|
let score = 0;
|
||||||
|
|
||||||
let wrongCount = 0;
|
|
||||||
let maxWrong = 3;
|
|
||||||
|
|
||||||
function shuffle(array) {
|
|
||||||
for (let i = array.length - 1; i > 0; i--) {
|
|
||||||
const j = Math.floor(Math.random() * (i + 1));
|
|
||||||
[array[i], array[j]] = [array[j], array[i]];
|
|
||||||
}
|
|
||||||
return array;
|
|
||||||
}
|
|
||||||
|
|
||||||
function startQuiz(){
|
function startQuiz(){
|
||||||
currentQuestionIndex = 0;
|
currentQuestionIndex = 0;
|
||||||
score = 0;
|
score = 0;
|
||||||
shuffle(questions);
|
|
||||||
showQuestion();
|
showQuestion();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function showQuestion(){
|
function showQuestion(){
|
||||||
resetState();
|
resetState();
|
||||||
let currentQuestion = questions[currentQuestionIndex]
|
let currentQuestion = questions[currentQuestionIndex]
|
||||||
@ -46,80 +61,27 @@ function resetState(){
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateHearts(){
|
|
||||||
const hearts = [
|
|
||||||
document.getElementById("h1"),
|
|
||||||
document.getElementById("h2"),
|
|
||||||
document.getElementById("h3")
|
|
||||||
];
|
|
||||||
|
|
||||||
hearts.forEach((h, i) => {
|
|
||||||
if(i < wrongCount){
|
|
||||||
h.src = "/assets/Design/HeartEmpty.png";
|
|
||||||
} else {
|
|
||||||
h.src = "/assets/Design/Heartfull.png";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function dmg(){
|
|
||||||
const dmg = document.getElementById("dmg");
|
|
||||||
|
|
||||||
dmg.style.display = "block";
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
dmg.style.display = "none";
|
|
||||||
}, 450);
|
|
||||||
}
|
|
||||||
|
|
||||||
function shake(el){
|
|
||||||
el.classList.remove("animate-shake");
|
|
||||||
void el.offsetWidth;
|
|
||||||
el.classList.add("animate-shake");
|
|
||||||
|
|
||||||
el.addEventListener("animationend", () => {
|
|
||||||
el.classList.remove("animate-shake");
|
|
||||||
}, { once: true });
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function selectAnswer(e){
|
function selectAnswer(e){
|
||||||
const selectedBtn = e.target;
|
const selectedBtn = e.target;
|
||||||
const isCorrect = selectedBtn.dataset.correct === "true";
|
const isCorrect = selectedBtn.dataset.correct === "true";
|
||||||
if(isCorrect){
|
if(isCorrect){
|
||||||
selectedBtn.classList.add("correct");
|
selectedBtn.classList.add("correct");
|
||||||
score += 10;
|
score += 10;
|
||||||
shake(document.getElementById("boss"))
|
|
||||||
dmg();
|
|
||||||
const bgm = document.getElementById("sfx");
|
|
||||||
bgm.play()
|
|
||||||
} else {
|
} else {
|
||||||
selectedBtn.classList.add("Incorrect");
|
selectedBtn.classList.add("Incorrect");
|
||||||
wrongCount ++;
|
|
||||||
shake(document.getElementById("hrt"))
|
|
||||||
updateHearts();
|
|
||||||
const bgm = document.getElementById("sfxhrt");
|
|
||||||
bgm.play()
|
|
||||||
|
|
||||||
if(wrongCount >= maxWrong){
|
|
||||||
setTimeout(()=>{
|
|
||||||
showScore();
|
|
||||||
}, 500);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Array.from(answerBtn.children).forEach(button => {
|
Array.from(answerBtn.children).forEach(button => {
|
||||||
if(button.dataset.correct === "true") button.classList.add("correct");
|
if(button.dataset.correct === "true") button.classList.add("correct");
|
||||||
button.disabled = true;
|
button.disabled = true;
|
||||||
});
|
},
|
||||||
setTimeout(nextQuestion, 500)
|
setTimeout(nextQuestion, 1000)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function showScore(){
|
function showScore(){
|
||||||
resetState();
|
resetState();
|
||||||
const show = questionElement.innerHTML = `you scored ${score} out of 200 !`;
|
const show = questionElement.innerHTML = `you scored ${score} out of ${questions.length}!`;
|
||||||
postScore(score);
|
postScore(score);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -151,13 +113,9 @@ function postScore(score){
|
|||||||
console.log("Server response:", data);
|
console.log("Server response:", data);
|
||||||
|
|
||||||
if(data.success || data.message === "Score accumulated") {
|
if(data.success || data.message === "Score accumulated") {
|
||||||
setTimeout(() => {
|
window.location.href = "../leaderboard.php";
|
||||||
window.location.href = "../leaderboard.php";
|
|
||||||
}, 3000);
|
|
||||||
} else {
|
} else {
|
||||||
setTimeout(() => {
|
window.location.href = "../leaderboard.php";
|
||||||
window.location.href = "../leaderboard.php";
|
|
||||||
}, 3000);
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch(err => {
|
.catch(err => {
|
||||||
|
|||||||
@ -1,3 +0,0 @@
|
|||||||
setTimeout(()=> {
|
|
||||||
window.location.href = "/game/firstperson.html"
|
|
||||||
}, 5000)
|
|
||||||
183
src/js/soal.js
183
src/js/soal.js
@ -1,182 +1 @@
|
|||||||
export const questions = [
|
dadad
|
||||||
{
|
|
||||||
question: "what is Python ?",
|
|
||||||
answers: [
|
|
||||||
{text: "Programming Lang", correct: true},
|
|
||||||
{text: "Animal", correct: false},
|
|
||||||
{text: "Danger", correct: false},
|
|
||||||
{text: "All Answer Correct", correct: false},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
question: "Data type at python ?",
|
|
||||||
answers: [
|
|
||||||
{text: "Docx", correct: false},
|
|
||||||
{text: "CSV", correct: false},
|
|
||||||
{text: "String", correct: true},
|
|
||||||
{text: "SQL", correct: false},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
question: "Index at python start from ?",
|
|
||||||
answers: [
|
|
||||||
{text: "1", correct: false},
|
|
||||||
{text: "-1", correct: false},
|
|
||||||
{text: "10", correct: false},
|
|
||||||
{text: "0", correct: true},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
question: "How do you start a comment in Python code ?",
|
|
||||||
answers: [
|
|
||||||
{text: "// This is a comment", correct: true},
|
|
||||||
{text: "/* This is a comment */", correct: false},
|
|
||||||
{text: "`this is comment`", correct: false},
|
|
||||||
{text: "# This is a comment", correct: false},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
question: "What is the result of the following operation ? (print('5'+'5'))",
|
|
||||||
answers: [
|
|
||||||
{text: "10", correct: false},
|
|
||||||
{text: "55", correct: true},
|
|
||||||
{text: "error", correct: false},
|
|
||||||
{text: "NaN", correct: false},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
question: "Correct string format ?",
|
|
||||||
answers: [
|
|
||||||
{text: "'bahlil'", correct: true},
|
|
||||||
{text: "(bahlil)", correct: false},
|
|
||||||
{text: "[bahlil]", correct: false},
|
|
||||||
{text: "{bahlil}", correct: false},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
question: "Correct loop syntax ?",
|
|
||||||
answers: [
|
|
||||||
{text: "for i in range(5):", correct: true},
|
|
||||||
{text: "loop 5 time", correct: false},
|
|
||||||
{text: "foreach i in 5", correct: false},
|
|
||||||
{text: "repeat", correct: false},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
question: "Function to get user input ?",
|
|
||||||
answers: [
|
|
||||||
{text: "scan()", correct: false},
|
|
||||||
{text: "input()", correct: true},
|
|
||||||
{text: "error", correct: false},
|
|
||||||
{text: "get()", correct: false},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
question: "Convert integer to string ?",
|
|
||||||
answers: [
|
|
||||||
{text: "text(5)", correct: false},
|
|
||||||
{text: "toStr(5)", correct: false},
|
|
||||||
{text: "str(5)", correct: true},
|
|
||||||
{text: "char(5)", correct: false},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
question: "Stop a loop ?",
|
|
||||||
answers: [
|
|
||||||
{text: "break", correct: true},
|
|
||||||
{text: "stop", correct: false},
|
|
||||||
{text: "exit", correct: false},
|
|
||||||
{text: "kill", correct: false},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
question: "Symbol for tuples?",
|
|
||||||
answers: [
|
|
||||||
{text: "[ ]", correct: false},
|
|
||||||
{text: "{ }", correct: false},
|
|
||||||
{text: "( )", correct: true},
|
|
||||||
{text: "< >", correct: false},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
question: "Output of int(3.9) ?",
|
|
||||||
answers: [
|
|
||||||
{text: "4", correct: false},
|
|
||||||
{text: "3,9", correct: false},
|
|
||||||
{text: "3", correct: true},
|
|
||||||
{text: "tiga koma sembilan", correct: false},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
question: "Find max number ?",
|
|
||||||
answers: [
|
|
||||||
{text: "top()", correct: false},
|
|
||||||
{text: "max()", correct: true},
|
|
||||||
{text: "high()", correct: false},
|
|
||||||
{text: "largest()", correct: false},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
question: '(3 * "A") output ?',
|
|
||||||
answers: [
|
|
||||||
{text: "error", correct: false},
|
|
||||||
{text: "none", correct: false},
|
|
||||||
{text: "AAA", correct: true},
|
|
||||||
{text: "A3A", correct: false},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
question: "Logical OR operator ?",
|
|
||||||
answers: [
|
|
||||||
{text: "||", correct: false},
|
|
||||||
{text: "%%", correct: false},
|
|
||||||
{text: "or", correct: true},
|
|
||||||
{text: "&&", correct: false},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
question: "result of not True ?",
|
|
||||||
answers: [
|
|
||||||
{text: "true", correct: false},
|
|
||||||
{text: "false", correct: true},
|
|
||||||
{text: "null", correct: false},
|
|
||||||
{text: "0", correct: false},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
question: "Check if item exists ?",
|
|
||||||
answers: [
|
|
||||||
{text: "exists", correct: false},
|
|
||||||
{text: "inside", correct: false},
|
|
||||||
{text: "in", correct: true},
|
|
||||||
{text: "has", correct: false},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
question: "x += 1 means?",
|
|
||||||
answers: [
|
|
||||||
{text: "x = 1", correct: false},
|
|
||||||
{text: "x = x + 1", correct: true},
|
|
||||||
{text: "x = x - 1", correct: false},
|
|
||||||
{text: "idk", correct: false},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
question: "Define a class ?",
|
|
||||||
answers: [
|
|
||||||
{text: "struct", correct: false},
|
|
||||||
{text: "object", correct: false},
|
|
||||||
{text: "type", correct: false},
|
|
||||||
{text: "class", correct: true},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
question: "how much data type in python ?",
|
|
||||||
answers: [
|
|
||||||
{text: "5", correct: true},
|
|
||||||
{text: "1", correct: false},
|
|
||||||
{text: "2", correct: false},
|
|
||||||
{text: "100", correct: false},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
];
|
|
||||||
@ -1,18 +1,39 @@
|
|||||||
|
const txt = document.getElementById('wellcome-message');
|
||||||
const hero = document.getElementById('hero');
|
const hero = document.getElementById('hero');
|
||||||
const boss = document.getElementById('boss');
|
const boss = document.getElementById('boss');
|
||||||
|
|
||||||
boss.style.transition = '2s cubic-bezier(0.4, 0, 0.2, 1)';
|
boss.style.transition = '2s cubic-bezier(0.4, 0, 0.2, 1)';
|
||||||
hero.style.transition = '2s cubic-bezier(0.4, 0, 0.2, 1)';
|
hero.style.transition = '2s cubic-bezier(0.4, 0, 0.2, 1)';
|
||||||
|
txt.style.transition = 'opacity .6s cubic-bezier(0.4, 0, 0.2, 1)';
|
||||||
|
txt.style.opacity = '0';
|
||||||
|
txt.style.display = 'block';
|
||||||
|
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
hero.style.left = '1000px';
|
txt.style.opacity = '1';
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
txt.style.opacity = '0';
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
txt.style.display = 'none';
|
||||||
|
}, 400);
|
||||||
|
}, 5000);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
hero.style.left = '800px';
|
||||||
}, 500);
|
}, 500);
|
||||||
setTimeout(()=> {
|
setTimeout(()=> {
|
||||||
hero.src = "/assets/Design/KnightPixLE2-exporgift.gif";
|
hero.src = "/assets/Design/KnightPixLE2-exporgift.gif";
|
||||||
}, 1700);
|
}, 1700);
|
||||||
|
setTimeout(() => {
|
||||||
|
boss.style.right = '700px';
|
||||||
|
}, 500);
|
||||||
|
|
||||||
setTimeout(()=> {
|
setTimeout(()=> {
|
||||||
window.location.href = "/game/loading.html"
|
window.location.href = "/game/firstperson.html"
|
||||||
}, 3000)
|
}, 5500)
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,11 +1,11 @@
|
|||||||
<?php
|
<?php
|
||||||
session_start();
|
session_start();
|
||||||
require_once "config/db.php";
|
require_once "config/db.php";
|
||||||
|
|
||||||
$sql= "SELECT username, score
|
$sql= "SELECT username, score
|
||||||
FROM users
|
FROM users
|
||||||
ORDER BY score DESC
|
ORDER BY score DESC
|
||||||
LIMIT 8";
|
LIMIT 10";
|
||||||
$nama = $_SESSION['username'];
|
$nama = $_SESSION['username'];
|
||||||
$score = 0;
|
$score = 0;
|
||||||
|
|
||||||
@ -17,10 +17,6 @@ if ($result_me && mysqli_num_rows($result_me)>0){
|
|||||||
$score = $row['score'];
|
$score = $row['score'];
|
||||||
}
|
}
|
||||||
|
|
||||||
$queryrank = "SELECT COUNT(*) as ranking FROM users WHERE score > $score";
|
|
||||||
$resultrank = mysqli_query($db, $queryrank);
|
|
||||||
$rowrank = mysqli_fetch_assoc($resultrank);
|
|
||||||
$realrank = $rowrank['ranking']+1;
|
|
||||||
|
|
||||||
$result = mysqli_query($db, $sql);
|
$result = mysqli_query($db, $sql);
|
||||||
$leaderboard = [];
|
$leaderboard = [];
|
||||||
@ -42,12 +38,13 @@ if($result){
|
|||||||
<link rel="stylesheet" href="css/style.css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<audio id="bgm" src="/assets/music/leaderboard.mp3" loop autoplay></audio>
|
|
||||||
<div class="container-board">
|
<div class="container-board">
|
||||||
<a class="back" href="onboard.php" data-aos="fade-in" data-aos-duration="3000">✖</a>
|
|
||||||
<div class="chara">
|
<div class="chara">
|
||||||
|
<div class="menu">
|
||||||
|
<h1 style="text-align: center;"><?php echo $nama; ?></h1>
|
||||||
|
</div>
|
||||||
|
<h1 style="text-align: center;"> <?php echo $score; ?> </h1>
|
||||||
<div class="character">
|
<div class="character">
|
||||||
<h1 style="text-align: center; padding-right: 45px; color: yellow;">Knight</h1>
|
|
||||||
<img src="/assets/Design/KnightPixLE2-exporgift.gif" alt="knight">
|
<img src="/assets/Design/KnightPixLE2-exporgift.gif" alt="knight">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -82,34 +79,9 @@ if($result){
|
|||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tbody>
|
|
||||||
<?php
|
|
||||||
$peringkat = 1;
|
|
||||||
|
|
||||||
?>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<table>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td><?php echo $realrank; ?></td>
|
|
||||||
<td><?php echo $nama; ?></td>
|
|
||||||
<td><?php echo $score; ?> PTS</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
|
||||||
const bgm = document.getElementById("bgm");
|
|
||||||
bgm.loop = true
|
|
||||||
bgm.volume = 0.2
|
|
||||||
bgm.play()
|
|
||||||
|
|
||||||
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@ -14,8 +14,6 @@ session_start();
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<audio id="bgm" src="/assets/music/onboard.mp3" loop autoplay></audio>
|
|
||||||
<audio id="hover-sfx" src="/assets/music/hover.mp3" ></audio>
|
|
||||||
<div class="container-onboard">
|
<div class="container-onboard">
|
||||||
<?php include 'notif.php'; ?>
|
<?php include 'notif.php'; ?>
|
||||||
<?php
|
<?php
|
||||||
@ -26,47 +24,16 @@ session_start();
|
|||||||
?>
|
?>
|
||||||
<h1 data-aos="zoom-out" data-aos-duration="1000">👾 codebeater 👾</h1>
|
<h1 data-aos="zoom-out" data-aos-duration="1000">👾 codebeater 👾</h1>
|
||||||
<div class="menu">
|
<div class="menu">
|
||||||
<a class="hover-btn" data-aos="zoom-out" data-aos-duration="2000" href="game/thirdperson.html">Game Start</a>
|
<a data-aos="zoom-out" data-aos-duration="2000" href="game/thirdperson.html">Game Start</a>
|
||||||
<a class="hover-btn" data-aos="zoom-out" data-aos-duration="2000" href="leaderboard.php">leaderboard</a>
|
<a data-aos="zoom-out" data-aos-duration="2000" href="leaderboard.php">leaderboard</a>
|
||||||
<a class="hover-btn" data-aos="zoom-out" data-aos-duration="2000" href="credit.html">Credit</a>
|
<a data-aos="zoom-out" data-aos-duration="2000" href="">Credit</a>
|
||||||
<a class="hover-btn" data-aos="zoom-out" data-aos-duration="2000" href="logout.php">Exit</a>
|
<a data-aos="zoom-out" data-aos-duration="2000" href="logout.php">Exit</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
||||||
<script>
|
<script>
|
||||||
AOS.init();
|
AOS.init();
|
||||||
</script>
|
</script>
|
||||||
<script>
|
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
|
||||||
const bgm = document.getElementById("bgm");
|
|
||||||
const hoversfx = document.getElementById('hover-sfx');
|
|
||||||
const buttons = document.querySelectorAll('.hover-btn');
|
|
||||||
|
|
||||||
bgm.volume =0.2;
|
|
||||||
hoversfx.volume =0.2;
|
|
||||||
buttons.forEach(button => {
|
|
||||||
button.addEventListener('mouseenter', () => {
|
|
||||||
hoversfx.currentTime = 0;
|
|
||||||
hoversfx.play().catch(error => console.log('menunggu iteraksi user'))
|
|
||||||
});
|
|
||||||
});
|
|
||||||
function playBGM(){
|
|
||||||
bgm.play().then(()=>{
|
|
||||||
console.log('BGM Berputar')
|
|
||||||
}).catch(error => {
|
|
||||||
console.log('auto diblok')
|
|
||||||
});
|
|
||||||
}
|
|
||||||
playBGM();
|
|
||||||
|
|
||||||
|
|
||||||
document.body.addEventListener("click", () => {
|
|
||||||
if (bgm.paused) {
|
|
||||||
bgm.play();
|
|
||||||
}
|
|
||||||
}, { once: true });
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
15
users.sql
15
users.sql
@ -3,7 +3,7 @@
|
|||||||
-- https://www.phpmyadmin.net/
|
-- https://www.phpmyadmin.net/
|
||||||
--
|
--
|
||||||
-- Host: db:3306
|
-- Host: db:3306
|
||||||
-- Generation Time: Dec 01, 2025 at 08:08 AM
|
-- Generation Time: Nov 25, 2025 at 09:57 AM
|
||||||
-- Server version: 8.0.44
|
-- Server version: 8.0.44
|
||||||
-- PHP Version: 8.3.26
|
-- PHP Version: 8.3.26
|
||||||
|
|
||||||
@ -41,16 +41,7 @@ CREATE TABLE `users` (
|
|||||||
|
|
||||||
INSERT INTO `users` (`id`, `username`, `email`, `password`, `score`) VALUES
|
INSERT INTO `users` (`id`, `username`, `email`, `password`, `score`) VALUES
|
||||||
(1, 'bram', 'bahlil@gmail.com', '$2y$10$tOKCS5lO0/lRUW9c.VmsAeMu1M5LxO9F2lq/44yLk3Dl7FvmFUWEu', 100),
|
(1, 'bram', 'bahlil@gmail.com', '$2y$10$tOKCS5lO0/lRUW9c.VmsAeMu1M5LxO9F2lq/44yLk3Dl7FvmFUWEu', 100),
|
||||||
(4, 'bahlil', 'bahlil1@gmail.com', '$2y$10$qmU02E22qB6MD5RR8Bopi.nBI38jk2mOht2SHnXb64m30fpyg8cf6', 0),
|
(4, 'bahlil', 'bahlil1@gmail.com', '$2y$10$qmU02E22qB6MD5RR8Bopi.nBI38jk2mOht2SHnXb64m30fpyg8cf6', 0);
|
||||||
(8, 'fork', 'bolo@gmail.com', '$2y$10$XZ/uNqSGiZhfCjDEaZUzner0L2tKRBrEVX5cNG0nK4f/IFuf42jCK', 0),
|
|
||||||
(13, 'adsasd', 'da@gmail.com', '$2y$10$lOWJD1OLc9/pREEvH72b4u7YDZpekwX9W/Wt7mlhSnJuhKNC2dm1i', 0),
|
|
||||||
(20, 'bobi', 'skibidi@gmail.com', '$2y$10$v2SToxPT3kzfD1BPMJuQGe2kOKqaX7ZcHyuvyUaAWm/GySx2RaAqW', 0),
|
|
||||||
(21, 'sada', 'sad@gmail.com', '$2y$10$JO0oMbKmJHbUhRNCcyYxnOwK0OFLv69FCItzwCK0h0p6KeAzvekGW', 0),
|
|
||||||
(24, 'orgil', 'fasfa@gmail.com', '$2y$10$rxkVaEwirysMIiaDgrixQeCbuGpkMdbvA2Kvw.l2t0hk7PO4KzZ4i', 0),
|
|
||||||
(28, 'bencong', 'bahliltod@gmai.com', '$2y$10$yM13E5kcWDU.FPUpuWkWbuGqpq9tMfS2vKE1Wu8xMPbHleNSCI5pW', 0),
|
|
||||||
(29, 'adudu', 'adudu@gmail.com', '$2y$10$MW5hI5zKBNDHpEgGOipozOVPaH985N0.J1qxHen15eK1KVI6HfKa.', 0),
|
|
||||||
(30, 'kkhungke', 'cuki@gmail.com', '$2y$10$6u2vzf6icHzmZeIqDfBHqOEwjGEcpuo0c7QGmZeuzICq71Af0vY6y', 0),
|
|
||||||
(33, 'koko', 'kkhungke@gmail.com', '$2y$10$ys7rs4PAtl0z74RfgNuu9O50t.ibMgljWEC8x.9Anm3DBw5aB7q8C', 0);
|
|
||||||
|
|
||||||
--
|
--
|
||||||
-- Indexes for dumped tables
|
-- Indexes for dumped tables
|
||||||
@ -72,7 +63,7 @@ ALTER TABLE `users`
|
|||||||
-- AUTO_INCREMENT for table `users`
|
-- AUTO_INCREMENT for table `users`
|
||||||
--
|
--
|
||||||
ALTER TABLE `users`
|
ALTER TABLE `users`
|
||||||
MODIFY `id` int NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=34;
|
MODIFY `id` int NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;
|
||||||
COMMIT;
|
COMMIT;
|
||||||
|
|
||||||
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
|
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user