feat: make credit and ongoing nav

2025-12-02 10:18:59 +07:00 · 2025-12-02 10:18:59 +07:00 · 4e50ae9f5a
commit 4e50ae9f5a
parent e1478cb88d
4 changed files with 216 additions and 8 deletions
--- a/src/credit.html
+++ b/src/credit.html
@ -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>
--- a/src/css/style.css
+++ b/src/css/style.css
@ -142,9 +142,9 @@
    /* Hapus properti background dari sini dan pindahkan ke ::before */

    /* Tambahkan posisi relatif agar pseudo-element bisa diposisikan absolut di dalamnya */
-    position: relative; 
+    position: relative;
    /* Pastikan konten di dalam container ada di atas latar */
-    z-index: 1; 
+    z-index: 1;
 }

 /* Pseudo-element untuk menampung gambar latar transparan */
@ -155,7 +155,7 @@
    left: 0;
    right: 0;
    bottom: 0;
-    
+
    /* Pindahkan properti background Anda ke sini */
    background-image: url(/assets/Design/CampFire8WESFIX!-export.png);
    background-repeat: no-repeat;
@ -164,10 +164,11 @@
    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; 
+    z-index: -1;
 }

 .container-board .chara {
@ -233,6 +234,7 @@ td {
 .container-board .board table tbody tr {
    background: #0b0e00bd;
 }
+
 .container-board .board table tbody tr:hover {
    background: #c1fc0032;
 }
@ -275,4 +277,75 @@ td {
    color: #dd85fa;
    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;
 }
--- a/src/game/thirdperson.html
+++ b/src/game/thirdperson.html
@ -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>
--- a/src/onboard.php
+++ b/src/onboard.php
@ -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>