2526-web/kelompok12-codebeater
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: change credit code but not clear enough

Browse Source
This commit is contained in:
Matthew Florentino 2025-12-03 09:12:20 +07:00
parent 4dca350c97
commit dddb927c24
3 changed files with 21 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/credit.html
View File

@ -10,13 +10,13 @@
<link rel="stylesheet" href="/css/style.css">
<style>
:root {
--height: 520px;
--speed: 60;
--height: 500px;
}
</style>
</head>
<body>
<audio id="bgm" src="/assets/music/credit.mp3"></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">
@ -86,48 +86,37 @@
<div style="height:40px;"></div>
<div style="height:40px"></div>
</div>
<div style="height:40px"></div>
</div>
</div>
</div>
</div>
<script>
var backgroundMusic = document.createElement('audio');
backgroundMusic.src = "assets/music/leaderboard.";
backgroundMusic.play();
(function () {
const inner = document.getElementById('creditsInner');
const speed = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--speed')) || 40; // px/sec
let last = performance.now();
let y = 450;
document.addEventListener("DOMContentLoaded", () => {
const bgm = document.getElementById("bgm");
bgm.play()
const inner = document.getElementById("creditsInner");
let y = 0;
let blockH = inner.scrollHeight / 2;
const speed = 40;
// 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);
function loop() {
y -= speed / 60;
if (y <= -blockH) y = 0;
inner.style.transform = `translateY(${y}px)`;
requestAnimationFrame(loop);
}
// 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
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>

2
src/css/style.css
View File

@ -309,8 +309,6 @@ td {
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;
}

3
src/leaderboard.php
View File

@ -92,8 +92,7 @@ if($result){
<tbody>
<tr>
<td><?php echo $realrank; ?></td>
<td><?php echo $nama; ?></td>
<td><?php echo $nama; ?></td>
<td><?php echo $score; ?> PTS</td>
</tr>
</tbody>