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"> <link rel="stylesheet" href="/css/style.css">
<style> <style>
:root { :root {
--height: 520px; --height: 500px;
--speed: 60;
} }
</style> </style>
</head> </head>
<body> <body>
<audio id="bgm" src="/assets/music/credit.mp3"></audio>
<div class="container-credits" id="credits"> <div class="container-credits" id="credits">
<a class="back" href="onboard.php" data-aos="fade-in" data-aos-duration="3000">✖</a> <a class="back" href="onboard.php" data-aos="fade-in" data-aos-duration="3000">✖</a>
<div class="credits"> <div class="credits">
@ -86,48 +86,37 @@
<div style="height:40px;"></div>
<div style="height:40px"></div> <div style="height:40px"></div>
</div> </div>
<div style="height:40px"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<script> <script>
var backgroundMusic = document.createElement('audio'); document.addEventListener("DOMContentLoaded", () => {
backgroundMusic.src = "assets/music/leaderboard."; const bgm = document.getElementById("bgm");
backgroundMusic.play(); bgm.play()
(function () { const inner = document.getElementById("creditsInner");
const inner = document.getElementById('creditsInner'); let y = 0;
const speed = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--speed')) || 40; // px/sec let blockH = inner.scrollHeight / 2;
let last = performance.now(); const speed = 40;
let y = 450;
// When content is loaded we compute single-block height (half of inner because we duplicated) function loop() {
function start() { y -= speed / 60;
const singleBlockHeight = inner.scrollHeight / 2; if (y <= -blockH) y = 0;
// guard inner.style.transform = `translateY(${y}px)`;
if (!isFinite(singleBlockHeight) || singleBlockHeight <= 0) return; requestAnimationFrame(loop);
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("resize", () => {
window.addEventListener('load', () => setTimeout(start, 10)); blockH = inner.scrollHeight / 2;
// Also restart if window resized (recalc heights)
window.addEventListener('resize', () => {
// reset y to safe value
y = 0; y = 0;
}); });
})();
loop();
});
</script> </script>
<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>

2
src/css/style.css
View File

@ -309,8 +309,6 @@ td {
height: var(--height); height: var(--height);
overflow: hidden; overflow: hidden;
border-radius: 8px; 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; padding: 24px 12px;
position: relative; position: relative;
} }

3
src/leaderboard.php
View File

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