CSS / JS text/button over Matrix-Rain for RC Soundboard-HackingPrank

Question

i found this awesome matrix-rain "background" on codepen: https://codepen.io/wefiy/pen/WPpEwo

...I´d love to use it for a little HackingPrank - remote controlled Soundboard that I am working on.

is a working prototype. One opens a session with this link and invites someone with the session-code found on top of the screen (maybe needs a little up-scroll) ...after the "victim" joins the session by entering this session-code at the bamory.com website he/she will click the "I agree" button, which opens a decoy website with a anti-smoke petition - just to forget the opened tab in the background, which will play the pranksounds the "master"/prankster plays by pushing the buttons on his/her screen, which changes the time of the synchronized audio-stream.

I tried to include the matrix-rain code: https://bamory.com/?hotlink=P5.7

...but all text is gone and the buttons appear underneath the matrix-rain, the buttons/audio is not working at all (the audio does not jump back in time when pushing the buttons, which is done by a special script on the server)

-I wish the buttons and text to appear on top of the matrix-rain. ??? -also I´d be curious where I can change the color of the matrix-rain ... I found a part in the JS code

ctx.fillStyle = "#f4427d";//green text

...and I guess it should appear matrix green, but my version appears pink ?!

I really hope somebody can point me in the right direction cause I tried to solve this problem with my bloody-beginner´s skills for days now (No, I did not code the bamory.com-software myself!) the overall design of invitation-links, decoy-page etc will change soon!

CODE:

    


    
        
    


 RCS - The Remote Controlled Soundboard
 Get your victim to enter above gamecode at bamory.com.
   
 turn down your volume.

JAVASCRIPT:

// geting canvas by Boujjou Achraf
    var c = document.getElementById("c");
    var ctx = c.getContext("2d");

    //making the canvas full screen
    c.height = window.innerHeight;
    c.width = window.innerWidth;

    //chinese characters - taken from the unicode charset
    var matrix = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}";
    //converting the string into an array of single characters
    matrix = matrix.split("");

    var font_size = 10;
    var columns = c.width/font_size; //number of columns for the rain
    //an array of drops - one per column
    var drops = [];
    //x below is the x coordinate
    //1 = y co-ordinate of the drop(same for every drop initially)
    for(var x = 0; x < columns; x++)
        drops[x] = 1; 

    //drawing the characters
    function draw()
    {
        //Black BG for the canvas
        //translucent BG to show trail
        ctx.fillStyle = "rgba(0, 0, 0, 0.04)";
        ctx.fillRect(0, 0, c.width, c.height);

        ctx.fillStyle = "#f4427d";//green text
        ctx.font = font_size + "px arial";
        //looping over drops
        for(var i = 0; i < drops.length; i++)
        {
            //a random chinese character to print
            var text = matrix[Math.floor(Math.random()*matrix.length)];
            //x = i*font_size, y = value of drops[i]*font_size
            ctx.fillText(text, i*font_size, drops[i]*font_size);

            //sending the drop back to the top randomly after it has crossed the screen
            //adding a randomness to the reset to make the drops scattered on the Y axis
            if(drops[i]*font_size > c.height && Math.random() > 0.975)
                drops[i] = 0;

            //incrementing Y coordinate
            drops[i]++;
        }
    }

    setInterval(draw, 35);

CSS:

    /* By Boujjou Achraf*/

/*basic reset */

*{
  margin: 0;
  padding: 0;
}

body {background: black;}
canvas {display:block;}


input {
  margin: 10px;
  height: 50px;
  width: 90%;
}

.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: blue;
  background-color: red;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
  width: 26%;
}


.button:hover {background-color: lightblue}

.button:active {
  background-color: red;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}


.button2 {
  display: inline-block;
  padding: 15px 25px;
  font-size: 18px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: darkblue;
  background-color: dimgrey;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
  width: 90%;
}


.button2:hover {background-color: lightblue}

.button2:active {
  background-color: red;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}





.button3 {
  display: inline-block;
  padding: 15px 25px;
  font-size: 18px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: pink;
  background-color: green;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
  width: 90%;
}


.button3:hover {background-color: powderblue}

.button3:active {
  background-color: red;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

CSS / JS text/button over Matrix-Rain for RC Soundboard-HackingPrank

0 Answers