feat: make credit and ongoing nav
This commit is contained in:
Matthew Florentino
parent
e1478cb88d
commit
4e50ae9f5a
135
src/credit.html
Normal file
135
src/credit.html
Normal file
@ -0,0 +1,135 @@
|
||||
<!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: 520px;
|
||||
--speed: 60;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<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>
|
||||
<div style="height:40px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const inner = document.getElementById('creditsInner');
|
||||
const speed = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--speed')) || 40; // px/sec
|
||||
let last = performance.now();
|
||||
let y = 450;
|
||||
|
||||
// When content is loaded we compute single-block height (half of inner because we duplicated)
|
||||
function start() {
|
||||
const singleBlockHeight = inner.scrollHeight / 2;
|
||||
// guard
|
||||
if (!isFinite(singleBlockHeight) || singleBlockHeight <= 0) return;
|
||||
|
||||
function frame(now) {
|
||||
const dt = (last - now) / 1000; last = now;
|
||||
y = y + speed * dt; // move down
|
||||
if (y >= singleBlockHeight) y -= singleBlockHeight; // loop
|
||||
inner.style.transform = `translateY(${y}px)`;
|
||||
requestAnimationFrame(frame);
|
||||
}
|
||||
requestAnimationFrame(frame);
|
||||
}
|
||||
|
||||
// Wait a tick so browser computes heights (if fonts still loading)
|
||||
window.addEventListener('load', () => setTimeout(start, 10));
|
||||
// Also restart if window resized (recalc heights)
|
||||
window.addEventListener('resize', () => {
|
||||
// reset y to safe value
|
||||
y = 0;
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
||||
<script>
|
||||
AOS.init();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -164,7 +164,8 @@
|
||||
image-rendering: pixelated;
|
||||
|
||||
/* >>> INI KUNCINYA: Atur opasitasnya di sini <<< */
|
||||
opacity:1; /* Contoh nilai 40% transparan */
|
||||
opacity: 1;
|
||||
/* Contoh nilai 40% transparan */
|
||||
|
||||
/* Pindahkan latar ini ke lapisan paling bawah */
|
||||
z-index: -1;
|
||||
@ -233,6 +234,7 @@ td {
|
||||
.container-board .board table tbody tr {
|
||||
background: #0b0e00bd;
|
||||
}
|
||||
|
||||
.container-board .board table tbody tr:hover {
|
||||
background: #c1fc0032;
|
||||
}
|
||||
@ -276,3 +278,74 @@ td {
|
||||
border: 1px solid #dd85fa;
|
||||
background-color: #871b8323;
|
||||
}
|
||||
|
||||
.container-credits {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
background: #060607;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container-credits .credits {
|
||||
width: 100%;
|
||||
height: var(--height);
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .85));
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, .7);
|
||||
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;
|
||||
}
|
||||
@ -10,7 +10,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-third">
|
||||
<h1 id="wellcome-message" class="anm" >PYTHON QUIZ GAME</h1>
|
||||
<h1 id="wellcome-message" class="anm" >! PYTHON QUIZ GAME !</h1>
|
||||
<div class="bg">
|
||||
<img src="/assets/Design/wayland.png" alt="bg">
|
||||
</div>
|
||||
|
||||
@ -26,7 +26,7 @@ session_start();
|
||||
<div class="menu">
|
||||
<a 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="leaderboard.php">leaderboard</a>
|
||||
<a data-aos="zoom-out" data-aos-duration="2000" href="">Credit</a>
|
||||
<a data-aos="zoom-out" data-aos-duration="2000" href="credit.html">Credit</a>
|
||||
<a data-aos="zoom-out" data-aos-duration="2000" href="logout.php">Exit</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user