196 lines
7.1 KiB
HTML
196 lines
7.1 KiB
HTML
<!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> |