* Konami code.

src/app/App.js

@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import SearchField from './SearchField';
 import vex from 'vex-js/dist/js/vex.combined';
 import SoundCloudAudio from 'soundcloud-audio';
-
+import './index.css';
 export default class App extends Component {
     
     constructor(props){
@@ -14,15 +14,19 @@ export default class App extends Component {
         }
 
         this.playMusic = this.playMusic.bind(this);
+        this.state = {
+            konamiKlass: ''
+        };
     }
 
     componentDidMount(){
         vex.dialog.alert('This website is for educational purpose only. Every data is fetched from haveibeenpwned.com');
+        this.konamiListener();
     }
     
     render(){
         return(
-            <div id="content">
+            <div id="content" className={`${this.state.konamiKlass}`}>
             <SearchField />
             </div>
         );
@@ -42,4 +46,22 @@ export default class App extends Component {
             });
         }
     }
+
+    konamiListener(){
+        if ( window.addEventListener ) {
+            var kkeys = [], konami = "38,38,40,40,37,39,37,39,66,65";
+            window.addEventListener("keydown", (e)=>{
+                kkeys.push( e.keyCode );
+                // debugger;
+                if ( kkeys.toString().indexOf( konami ) >= 0 ){
+                    // console.log('Aila');
+                    this.setState({
+                        konamiKlass:'konami'
+                    });
+                    this.playMusic();
+                    kkeys = [];
+        }
+            }, true);
+        }
+    }
 }

src/app/SearchField.css

@@ -50,6 +50,17 @@
     padding: 3px;
 }
 
+.konami .search .email-field{
+  border: 1px solid #fff;
+  height: 46px;
+  width: 375px;
+  font-family: RMTyperighter;
+  font-size: 18px;
+  padding: 3px;
+  background: #4b4b4b;
+}
+
+
 .hover-field {
     text-decoration: none
 }
@@ -61,6 +72,13 @@
     font-size: 12px;
     color: #000;
 }
+
+.konami .hover-field span {
+  display: none;
+  font-size: 12px;
+  color: #fff;
+}
+
 .hover-field:hover span {
     border: #8f8e8e 1px solid;
     padding: 5px 20px 5px 5px;
@@ -80,6 +98,14 @@
     color: black;
     position: relative;
   }
+
+  .konami .glitch-text {
+    /* font-size: 100px; */
+    color: white;
+    position: relative;
+  }
+
+  
   @keyframes glitch-text-anim-1 {
     0% {
       clip: rect(24px, 450px, 67px, 0);
@@ -201,6 +227,17 @@
     background: white;
     clip: rect(0, 0, 0, 0);
   }
+
+  .konami .glitch-text:before, .konami .glitch-text:after {
+    content: attr(data-text);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background: #000;
+    clip: rect(0, 0, 0, 0);
+  }
+
   .glitch-text:after {
     left: 2px;
     text-shadow: -1px 0 red;

src/app/index.css

@@ -0,0 +1,21 @@
+.konami *{
+    background: #000;
+    color: #fff;
+}
+
+.konami .kool-button-black{
+    background: #fff;
+    color: #000;
+    border: 2px solid transparent;
+    padding: .75em 2em;
+    cursor: pointer;
+    font-family: RMTyperighter;
+}
+
+.konami .kool-button-white{
+    background: #000;
+    color: #fff;
+    border: 2px solid transparent;
+    padding: .75em 2em;
+    cursor: pointer;
+}