MJeanneRose.github.io/404.html at gh-pages · MJeanneRose/MJeanneRose.github.io · 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
---
permalink: /404.html
layout: default
title: Not found
---

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - Page Non Trouvée</title>
    <style>
        body {
            background-color: black;
            color: white;
            font-family: monospace;
            text-align: center;
            overflow: hidden;
        }
        #animation {
            margin-top: 50px;
        }
        #message {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="animation">
        <pre id="ascii-art"></pre>
    </div>
    <div id="message">
        <h1>404 - Not Found</h1>
        <p>The truth is out there… but not here.</p>
    </div>

    <script>
        const earth = [
            "                                                ",
            "               -o#&&*''''?d:>b\_                ",
            "          _o/'`''  '',, dMF9MMMMMHo_            ",
            "       .o&#'        `'MbHMMMMMMMMMMMHo.         ",
            "     .o''' '         vodM*$&&HMMMMMMMMMM?.       ",
            "    ,'              $M&ood,~'`(&##MMMMMMH\      ",
            "   /               ,MMMMMMM#b?#bobMMMMHMMML     ",
            "  &              ?MMMMMMMMMMMMMMMMM7MMM$R*Hk    ",
            " ?$.            :MMMMMMMMMMMMMMMMMMM/HMMM|`*L   ",
            "|               |MMMMMMMMMMMMMMMMMMMMbMH'   T,  ",
            "$H#:            `*MMMMMMMMMMMMMMMMMMMMb#}'  `?  ",
            "]MMH#             ''*''''*#MMMMMMMMMMMMM'    -  ",
            "MMMMMb_                   |MMMMMMMMMMMP'     :  ",
            "HMMMMMMMHo                 `MMMMMMMMMT       .  ",
            "?MMMMMMMMP                  9MMMMMMMM}       -  ",
            "-?MMMMMMM                  |MMMMMMMMM?,d-    '  ",
            " :|MMMMMM-                 `MMMMMMMT .M|.   :   ",
            "  .9MMM[                    &MMMMM*' `'    .    ",
            "   :9MMk                    `MMM#'        -     ",
            "     &M}                     `          .-      ",
            "      `&.                             .         ",
            "        `~,   .                     ./          ",
            "            . _                  .-             ",
            "              '`--._,dd###pp='''                "
        ];

        const ufo = [
            "  ,-~~~~~-,",
            "  |(     )|",
            "  |( 6 6 )|",
            "  | \\ ' / |",
            "  |  )=(  |",
            ".--        --.",
            "(    404     )",
            " \\.-~~~~~~-./"
        ];

   let position = -ufo[0].length;
    const asciiArt = document.getElementById('ascii-art');

    function updateAnimation() {
      let output = [];
      const ufoStartLine = earth.length - ufo.length - 2;

      for (let i = 0; i < earth.length; i++) {
        let line = earth[i];

        if (i >= ufoStartLine && i < ufoStartLine + ufo.length) {
          let ufoLine = ufo[i - ufoStartLine];
          let pos = position;
          let visiblePart = ufoLine;

          if (pos < 0) {
            // Vaisseau entre à gauche : tronquer le début
            visiblePart = ufoLine.slice(-pos);
            const after = line.slice(visiblePart.length);
            line = visiblePart + after;
          } else {
            // Vaisseau visible au milieu
            if (pos + ufoLine.length > line.length) {
              const overflow = (pos + ufoLine.length) - line.length;
              visiblePart = ufoLine.slice(0, ufoLine.length - overflow);
            }

            const before = line.slice(0, pos);
            const after = line.slice(pos + visiblePart.length);
            line = before + visiblePart + after;
          }
        }

        output.push(line);
      }

      asciiArt.textContent = output.join('\n');
      position++;

      if (position > earth[0].length) {
        position = -ufo[0].length;
      }
    }

    setInterval(updateAnimation, 150);
  </script>
</body>
</html>