Sudo-Aju.github.io/404.html at main · Sudo-Aju/Sudo-Aju.github.io

Feb 5, 2026

bdfc26f · · Feb 5, 2026

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404: Catch Me If You Can</title>
    <style>
        :root {
            --primary: #00ff88;
            --bg: #0f172a;
        }

body {
            background-color: var(--bg);
            color: white;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            height: 100vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
           
        }

.header {
            text-align: center;
            z-index: 10;
            pointer-events: none;
        }

h1 {
            font-size: 5rem;
            margin: 0;
            letter-spacing: -2px;
            text-transform: uppercase;
            background: linear-gradient(to bottom, #fff, #64748b);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

#msg {
            font-size: 1.2rem;
            color: var(--primary);
            font-weight: bold;
            
            margin-top: 10px;
        }

#man {
            position: absolute;
            left: 50%;
            top: 50%;
            font-size: 60px;
            cursor: crosshair;
            transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            user-select: none;
            z-index: 5;
        }

.grid {
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
                              linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
            background-size: 50px 50px;
            z-index: 1;
        }
    </style>
</head>
<body>

<div class="header">
    <h1>404: PAGE HARD TO CATCH</h1>
    <p id="msg">He has the link. Catch him if you can.</p>
</div>

document.onmousemove = (e) => {
        const rect = m.getBoundingClientRect();
        const mX = rect.left + rect.width / 2;
        const mY = rect.top + rect.height / 2;
        
        const dx = e.pageX - mX;
        const dy = e.pageY - mY;
        const distance = Math.sqrt(dx*dx + dy*dy);

if (distance < 120) {
            m.style.left = (Math.random() * (window.innerWidth - 100) + 50) + "px";
            m.style.top = (Math.random() * (window.innerHeight - 100) + 50) + "px";
            msg.innerHTML = q[Math.floor(Math.random() * q.length)];
            m.innerHTML = "🏃‍♂️💨";
            
            setTimeout(() => { m.innerHTML = "🏃‍♂️"; }, 400);
        }
    };

m.onclick = () => {
        alert("Fine! You caught me. But I still don't have your page.");
        location.reload();
    };
</script>
</body>
</html> () => {
        alert("Fine! You caught me. But I still don't have your page.");
        location.reload();
    };
</script>
</body>
</html>still don't have your page.");
        location.reload();
    };
</script>
</body>
</html>

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

>gt;

html lang="en">gt;

head>gt;

meta charset="UTF-8">gt;

meta name="viewport" content="width=device-width, initial-scale=1.0">gt;

title>gt;404: Catch Me If You Cantitle>gt;

style>gt;

:root {

--primary: #00ff88;

--bg: #0f172a;

}

body {

background-color: var(--bg);

color: white;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

margin: 0;

height: 100vh;

overflow: hidden;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

.header {

text-align: center;

z-index: 10;

pointer-events: none;

}

h1 {

font-size: 5rem;

margin: 0;

letter-spacing: -2px;

text-transform: uppercase;

background: linear-gradient(to bottom, #fff, #64748b);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

#msg {

font-size: 1.2rem;

color: var(--primary);

font-weight: bold;

margin-top: 10px;

}

#man {

position: absolute;

left: 50%;

top: 50%;

font-size: 60px;

cursor: crosshair;

transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);

user-select: none;

z-index: 5;

}

.grid {

position: absolute;

width: 100%;

height: 100%;

background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),

linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);

background-size: 50px 50px;

z-index: 1;

}

style>gt;

head>gt;

body>gt;

div class="grid">gt;div>gt;

div class="header">gt;

h1>gt;404: PAGE HARD TO CATCHh1>gt;

p id="msg">gt;He has the link. Catch him if you can.p>gt;

div>gt;

div id="man">gt;🏃‍♂️div>gt;

script>gt;

const m = document.getElementById('man'),

msg = document.getElementById('msg');

const q = ["Missed me!", "Wrong way, buddy.", "I'm the 4, you're the 0.", "Try harder.", "Is that your best?", "Not today!"];

document.onmousemove = (e) =>gt; {

const rect = m.getBoundingClientRect();

const mX = rect.left + rect.width / 2;

const mY = rect.top + rect.height / 2;

const dx = e.pageX - mX;

const dy = e.pageY - mY;

const distance = Math.sqrt(dx*dx + dy*dy);

if (distance 120) {

m.style.left = (Math.random() * (window.innerWidth - 100) + 50) + "px";

m.style.top = (Math.random() * (window.innerHeight - 100) + 50) + "px";

msg.innerHTML = q[Math.floor(Math.random() * q.length)];

m.innerHTML = "🏃‍♂️💨";

setTimeout(() =>gt; { m.innerHTML = "🏃‍♂️"; }, 400);

}

};

m.onclick = () =>gt; {

alert("Fine! You caught me. But I still don't have your page.");

location.reload();

};

script>gt;

body>gt;

html>gt;

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Files

Collapse file tree

Files

404.html

Latest commit

History

404.html

File metadata and controls