CodePen Embed - Fake Hacker

<!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 is owned by Ankizlee on CodePen.

See more by @Ankizlee on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.