Bitwise/404.html at main · Digit404/Bitwise · 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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html>

<head>
    <title>Not Found</title>
    <link rel="shortcut icon" href="/res/favicon.png" type="image/png">
    <link rel="stylesheet" href="/style.css">
    <style>
        @font-face {
            font-family: 'bitwise';
            src: url(/res/fonts/bitwise.ttf);
        }

        @font-face {
            font-family: 'firacode';
            src: url(/res/fonts/FiraCode.ttf);
        }

        body::-webkit-scrollbar {
            width: 0 !important;
        }

        body {
            overflow: -moz-scrollbars-none;
        }

        .wrapper {
            background-color: #101010;
            position: relative;
            width: 100%;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            overflow-x: hidden;
            min-height: 100vh;
        }

        .bg {
            width: 300%;
            opacity: 0.10;
            zoom: 80%;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            /* Firefox */
            image-rendering: crisp-edges;
            /* Chromium + Safari */
            image-rendering: pixelated;
            background-image: url(/res/img/404.png);
        }

        .vignette {
            background: url(/res/img/vignette.png) center center fixed;
            opacity: 100;
            background-size: 100% 100%;
            background-position: center;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .content {
            position: relative;
            text-align: center;
        }

        .title {
            font-family: 'bitwise', sans-serif;
            text-align: center;
            color: white;
        }

        h1 {
            font-size: 20vw;
            margin-bottom: 10px;
            margin-top: 10vh;
        }

        #footer {
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            text-align: center;
            font-family: 'bitwise', sans-serif;
            position: fixed;
            bottom: 0px;
            height: 20px;
            width: 200px;
            margin-bottom: 10px;
            padding-top: 10px;
            padding-bottom: 10px;
            border-radius: 10px 10px;
            right: 0;
            text-decoration: none;
        }

        .text {
            font-weight: bold;
            font-size: larger;
            color: white;
            font-family: 'firacode', sans-serif;
            width: 50%;
            text-align: center;
            margin-left: auto;
            margin-right: auto;
            margin-top: 50px;
        }
    </style>
    <script>
        // Set the scroll speed of the background
        var scrollSpeed = 0.5;
        // Set the initial position of the background
        var bgPosition = 0;
        // Set the width of the background image
        var bgWidth = 1307;

        // Function to move the background image
        function moveBackground() {
            // Get the current scroll position of the page
            var scrollTop = window.pageYOffset;
            // Set the parallax factor for the background image
            var parallaxFactor = 0.5;
            // Increment the background position by the scroll speed
            bgPosition -= scrollSpeed;
            // If the background position is less than or equal to the negative width of the background, reset the position to 0
            if (bgPosition <= -bgWidth) {
                bgPosition = 0;
            }
            // Set the background position using the CSS "left" property and the current scroll position and parallax factor
            document.getElementsByClassName("bg")[0].style.left = bgPosition + "px";
            document.getElementsByClassName("bg")[0].style.top = (scrollTop * parallaxFactor) + "px";
        }
        // Set the interval for moving the background image
        setInterval(moveBackground, 10);
    </script>
</head>

<body style="margin: 0px">
    <div class="wrapper">
        <div class="bg"></div>
        <div class="vignette"></div>
        <div class="content">
            <h1 style="font-size: 20vw; margin-bottom: 10px; margin-top:10vh;" class="title">404</h1>
            <h2 style="font-size: 50px;" class="title">NOT FOUND</h2>
            <a id="footer" href="/">HOME</a>
        </div>
    </div>
</body>

</html>