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;
|
image-rendering: pixelated;
|
||||||
|
|
||||||
/* >>> INI KUNCINYA: Atur opasitasnya di sini <<< */
|
/* >>> 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 */
|
/* Pindahkan latar ini ke lapisan paling bawah */
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
@ -233,6 +234,7 @@ td {
|
|||||||
.container-board .board table tbody tr {
|
.container-board .board table tbody tr {
|
||||||
background: #0b0e00bd;
|
background: #0b0e00bd;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container-board .board table tbody tr:hover {
|
.container-board .board table tbody tr:hover {
|
||||||
background: #c1fc0032;
|
background: #c1fc0032;
|
||||||
}
|
}
|
||||||
@ -276,3 +278,74 @@ td {
|
|||||||
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: #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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container-third">
|
<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">
|
<div class="bg">
|
||||||
<img src="/assets/Design/wayland.png" alt="bg">
|
<img src="/assets/Design/wayland.png" alt="bg">
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -26,7 +26,7 @@ session_start();
|
|||||||
<div class="menu">
|
<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="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="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>
|
<a data-aos="zoom-out" data-aos-duration="2000" href="logout.php">Exit</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user