{"style.css":"BODY {\n background: black;\n color: white;\n font-family: courier new;\n}\n\nimg {\n background:white;\n}\n.pigpen-wrapper {\n display: inline-block;\n background: white;\n width: 50px;\n height: 50px; \n padding: 10px;\n box-sizing: border-box;\n overflow: hidden;\n}\n.dotted {\n background: black;\n -webkit-box-shadow: inset 0px 0px 0px 23px rgba(255,255,255,1);\n -moz-box-shadow: inset 0px 0px 0px 23px rgba(255,255,255,1);\n box-shadow: inset -2px 0px 0px 23px rgba(255,255,255,1);\n}\n\n.pigpen {\n display: inline-block;\nbackground: transparent;\n width:10px;\n height: 30px; \n padding: 10px;\n box-sizing: border-box;\nborder: 4px solid white;\n}\n\n.a, .j {\n border-color: white black black white;\n}\n.b, .k {\n border-color: white black black black;\n}\n.c, .l {\n border-color: white white black black;\n}\n.d, .m {\n border-color: black black black white;\n}\n.e, .n {\n border-color: black black black black;\n}\n.f, .o {\n border-color: black white black black;\n}\n.g, .p{\n border-color: black black white white;\n}\n.h, .q {\n border-color: black black white black;\n}\n.i, .r {\n border-color: black white white black;\n}\n\n.s {\n border-color: white black black white;\n transform: translate(0px, -6px) rotate(45deg);\n}\n.u {\n border-color: white white black black;\n transform: translate(6px, 0px) rotate(45deg); \n}\n.t{\n border-color: black black white white;\n transform: translate(-6px, 0px) rotate(45deg); \n}\n.v {\n border-color: black white white black;\n transform: translate(0px, 6px) rotate(45deg); \n}\n \n\n.w {\n border-color: white black black white;\n transform: translate(0px, -6px) rotate(45deg);\n}\n.y {\n border-color: white white black black;\n transform: translate(6px, 0px) rotate(45deg); \n}\n.x {\n border-color: black black white white;\n transform: translate(-6px, 0px) rotate(45deg); \n}\n .z {\n border-color: black white white black;\n transform: translate(0px, 6px) rotate(45deg); \n}\n\n","script.js":"function encode() {\n var plaintext=document.getElementById(\"plaintext\").value;\n plaintext=plaintext.toLowerCase();\n var ciphertext=\"\";\n var alphabetNoDot=\"abcdefghistuv\";\n var alphabetDot=\"jklmnopqrwxyz\";\n \n for (var i = 0; i < plaintext.length; i++) {\n var letter=plaintext.charAt(i);\n if (alphabetNoDot.indexOf(letter)>-1) {\n ciphertext=ciphertext+\"

\";\n } else {\n if (alphabetDot.indexOf(letter)>-1) {\n ciphertext=ciphertext+\"

\";\n } \n }\n }\n document.getElementById(\"ciphertext\").innerHTML=ciphertext;\n}\n ","index.html":"\n\n PigPen Cipher\n \n \n\n\n\n

Pigpen Cipher Encoder

Plaintext:

\n \n\n

Pigpen Cipher Encoder

Plaintext:

Ciphertext:

Key: