<!DOCTYPE html>
<html>
<body>
<head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.core.min.js'></script>
<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap' rel='stylesheet'>
</head>
<table>
<tr class='top'>
<td class='left'>
<pre id='code' class='fakehack'></pre>
</td>
<td class='right'>
<table>
<tr class='top'>
<td class='full'>
<div id='passDecry' class='fakehack'>
Password Decryption:
<br>
<br>
<a id='passStatus'></a>
<br>
<br>
<div id='passProg'>
<div id='innerPassProg'>
</div>
</div>
</div>
</td>
</tr>
<tr class='bottom'>
<td class='full'>
<div id='firewall' class='fakehack'>
Firewall Status:
<br>
<br>
<a id='wallStatus'></a>
<br>
<br>
<div id='firewallProg'>
<div id='innerFirewall'>
</div>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr class='bottom'>
<td class='left'>
<div id='binSpam' class='fakehack'></div>
</td>
<td class='right'>
<div id='randomSpam'>
<pre id='r1' class='randomLines'></pre>
<pre id='r2' class='randomLines'></pre>
<pre id='r3' class='randomLines'></pre>
<pre id='r4' class='randomLines'></pre>
<pre id='r5' class='randomLines'></pre>
<pre id='r6' class='randomLines'></pre>
<pre id='r7' class='randomLines'></pre>
<pre id='r8' class='randomLines'></pre>
<pre id='r9' class='randomLines'></pre>
<pre id='r10' class='randomLines'></pre>
<pre id='r11' class='randomLines'></pre>
<pre id='r12' class='randomLines'></pre>
<pre id='r13' class='randomLines'></pre>
</div>
</td>
</tr>
</table>
</body>
</html>
body {
background-color: black;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
#binSpam {
overflow-wrap: break-word;
overflow-y: scroll;
}
.full {
width: 100%;
height: 100%;
}
table {
width: 98%;
height: 98%;
position: absolute;
top: 0;
left: 0;
}
tr {
width: 100%;
height: 50%;
position: absolute;
}
.top {
top: 0;
}
.bottom {
bottom: 0;
}
td {
position: absolute;
width: 50%;
height: 100%;
}
.left {
left: 0;
}
.right {
right: 0;
}
.fakehack {
color: #4bd927;
position: absolute;
width: 100%;
height: 100%;
font-family: 'Source Code Pro';
font-weight: bold;
}
#passDecry {
text-align: center;
font-size: 18px;
}
#passProg {
width: 70%;
height: 30%;
border: 1px solid white;
margin: auto;
position: relative;
overflow-x: hidden;
}
#innerPassProg {
position: absolute;
left: 0;
height: 100%;
background-color: #4bd927;
}
#firewall {
color: #ff8800;
text-align: center;
font-size: 18px;
}
#firewallProg {
width: 70%;
height: 30%;
border: 1px solid white;
margin: auto;
position: relative;
overflow-x: hidden;
}
#innerFirewall {
position: absolute;
left: 0;
height: 100%;
background-color: #ff8800;
}
#code {
overflow: scroll;
height: 90%;
}
#code.caret::after {
content: '|'
}
.randomLines {
height: 100%;
width: 6%;
text-align: center;
color: #4bd927;
display: inline-block;
overflow-wrap: break-word;
overflow-y: scroll;
font-weight: bold;
font-family: 'Source Code Pro';
}
#randomSpam {
height: 100%;
width: 100%;
}
const code =
`
#include <iostream>
using namespace std;
int main ( ) {
//set status to encrypting
cout << "Encrypting";
//get password
string password;
cin >> password;
//display even numbers from 0 -> 100
for (int i = 0; i < 100; i++) cout << i % 2 == 0 ? i : '' << endl;
//fetch date and stuff
time_t t = time(NULL);
tm* timePtr = localtime(&t);
cout << "seconds= " << (timePtr->tm_sec) << endl;
cout << "minutes = " << (timePtr->tm_min) << endl;
cout << "hours = " << (timePtr->tm_hour) << endl;
cout << "day of month = " << (timePtr->tm_mday) << endl;
cout << "month of year = " << (timePtr->tm_mon)+1 << endl;
cout << "year = " << (timePtr->tm_year)+1900 << endl;
cout << "weekday = " << (timePtr->tm_wday )<< endl;
cout << "day of year = " << (timePtr->tm_yday )<< endl;
cout << "daylight savings = " <<(timePtr->tm_isdst )<< endl;
cout << endl;
cout << endl;
cout << "Date " <<(timePtr->tm_mday)<<"/"<< (timePtr->tm_mon)+1 <<"/"<< (timePtr->tm_year)+1900<< endl;
cout << "Time " << (timePtr->tm_hour)<<":"<< (timePtr->tm_min)<<":"<< (timePtr->tm_sec) << endl;
return 0;
}
`.split(' ');
var cur = 0
function parser() {
if (cur >= code.length) cur = 0;
$('#code').text($('#code').text() + " " + code[cur]);
cur++;
document.getElementById('code').scrollBy(0, 1000);
}
$(document).on('keydown', parser);
setInterval(() => $('#code').toggleClass('caret'), 500)
var passStats = ['Initializing', 'Decrypting', 'Finding', 'Creating', 'Installing', 'Deleting', 'Updating', 'Removing', 'Destroying', 'Corrupting', 'Breaching'];
setInterval(() => {
document.getElementById('binSpam').scrollBy(0, 10);
$('#binSpam').text($('#binSpam').text() + Math.round(Math.random()));
}, 100);
setInterval(() => {
$('#passStatus').text(
(document.getElementById('passStatus').innerHTML.includes('/') ? '\\' : '/')
+
passStats[Math.floor(Math.random() * passStats.length)]
);
}, 100);
setInterval(() => $('#innerPassProg').css({
'width': (($('#innerPassProg').width() / $('#innerPassProg').parent().width() * 100) >= 100
? 0
: ($('#innerPassProg').width() / $('#innerPassProg').parent().width() * 100)) + 2 + '%'
}), 500);
setInterval(() => {
$('#wallStatus').text(
(document.getElementById('wallStatus').innerHTML.includes('/') ? '\\' : '/')
+
passStats[Math.floor(Math.random() * passStats.length)]
);
}, 100);
setInterval(() => $('#innerFirewall').css({
'width': (($('#innerFirewall').width() / $('#innerFirewall').parent().width() * 100) >= 100
? 0
: ($('#innerFirewall').width() / $('#innerFirewall').parent().width() * 100)) + 5 + '%'
}), 700);
var chars = ['7', 'e', 'l', '\\', '/', '&', '>', 'M', 'Q', '?', ':', '^', '-', '[', '|', '+', '*', '!'];
setInterval(() => {
for (let i = 0; i < document.getElementsByClassName('randomLines').length; i++) {
document.getElementsByClassName('randomLines')[i].innerHTML+=chars[Math.floor(Math.random() * chars.length)] + '\n';
document.getElementsByClassName('randomLines')[i].scrollBy(0, 10);
}
}, 10);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.