Raspberry/article5.html at main · MrInc0gnito/Raspberry · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scrolling Credits</title>
    <style>
        body {
            background-color: black;
            color: white;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .scrolling-container {
            height: 80vh;
            width: 80vw;
            overflow: hidden;
            position: relative;
        }

        .scrolling-credits {
            position: absolute;
            top: 100%;
            width: 100%;
            animation: scroll-up 39s linear infinite;
        }

        @keyframes scroll-up {
            0% { top: 100%; }
            100% { top: -100%; }
        }

        p {
            margin: 0;
            padding: 10px 0;
            font-size: 24px;
        }

        .play-button {
            background-color: #ffffff;
            color: #000000;
            font-size: 18px;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .play-button.hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class="scrolling-container">
        <div class="scrolling-credits">
            <p>Thanks for using Raspberry Web</p>
            <p>Creators: MrInc0gnito</p>
            <p>Special Group Mentions: FontAwesome, JSFiddle, Cloudflare, GitHub,</p>
            <p>W3Schools, GeeksForGeeks, StackOverflow, Google, Raspberry Pi Foundation,</p>
            <p>DJ JBK, DEV.TO, Youtube API, YTLooted</p>
            <p>Music By: Synthou</p>
            <p>Radio By: NCS</p>
            <p>Music Player By: ZXMushroom63</p>
            <p>Special People Mentions: Georgie, Dominic, Tommy, Al, Reece, Austin, Tristan, George A, Owen W, George H, Lucy L, Lola, Ashley, Daniel, Samuel, Isaac, Ned, Hazza</p>

            <!-- Blank lines for spacing -->
            <p>&nbsp;</p>
            <p>&nbsp;</p>

            <p>- end -</p>
        </div>
    </div>

    <!-- Play Button -->
    <button class="play-button" id="play-button">Roll The Credits</button>

    <!-- Background Music -->
    <audio id="background-audio" loop>
        <source src="https://ronaldomaths.pages.dev/sijddij.mp3" type="audio/mp3">
        Your browser does not support the audio element.
    </audio>

    <script>
        const playButton = document.getElementById('play-button');
        const audio = document.getElementById('background-audio');

        // Play audio when the play button is clicked
        playButton.addEventListener('click', function () {
            audio.play().then(() => {
                console.log("Audio is playing.");
                playButton.classList.add('hidden');  // Hide the play button after audio starts
            }).catch(error => {
                console.error("Audio play error:", error);
            });
        });
    </script>
</body>
</html>