maria
/
IT-Sec


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
							<html>
    <head>
        <style>
            input {
                width:30%;
            }
            .letter {
                width:90%;
                padding-left:10px;
            }
        </style>
        <script>
            function load() {
                var list = document.getElementById("list");
                for (var i = 1; i <= 26; i++) {
                    var div = document.createElement("DIV");
                    var input = document.createElement("INPUT");
                    div.classList.add("letter");
                    div.innerHTML = String.fromCharCode(i + 64) + " => ";
                    if (input.value == "") { input.value = String.fromCharCode(i + 64); }
                    input.id = "k" + i;
                    input.oninput = function(){decrypt()}; 
                    input.maxLength = "1";
                    div.appendChild(input);
                    list.appendChild(div);
                }
            }

            function decrypt() {
                var cipher = document.getElementById("cipher").value;
                var key = [];
                for (var i = 1; i <= 26; i++) {
                    var letter = document.getElementById("k"+i).value;
                    key.push(letter.toUpperCase());
                }
                cipher = cipher.toLowerCase()
                for (var i = 1; i <= 26; i++) {
                    cipher = cipher.replace(new RegExp(String.fromCharCode(i + 96), 'g'), key[i-1]);
                }
                document.getElementById("plain").innerHTML = cipher;
            }
        </script>
    </head>

    <body onload="load()">

        
        <div style="width:80%;height:10%;border:1px solid black;position:absolute;left:10%;top:5%" >
            <h1 align="center" style="width:100%;height:100%;"> Monoalphabetic Substitution </h1>
        </div>
        <div style="width:70%;height:40%;border:1px solid black;position:absolute;left:10%;top:15%;overflow:scroll" >
            <h1> Cipher Text </h1>
            <textarea id="cipher" oninput="decrypt()" style="width:100%;height:100%;resize:none"> </textarea>
        </div>
        <div style="width:70%;height:40%;border:1px solid black;position:absolute;left:10%;top:55%;overflow:scroll" >
            <h1> Plain Text </h1>
            <p id="plain"> </p>
        </div>
        
        <div id="list" style="width:10%;height:80%;border:1px solid black;position:absolute;left:80%;top:15%;overflow:scroll" >        
            <h1 align="center"> Map </h1>
        </div>
    </body>
</html>