API tools faq
paste
lyonlyke

JS BASE 64 ENCODER/DECODER

lyonlyke
Jul 26th, 2019
222
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.15 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>BASE 64 ENCODER/DECODER TOOL</title>
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <link href="../../../css/style2.css" rel="stylesheet" type="text/css" media="all"/>
  8.  
  9.  
  10. <style>
  11. body {
  12. margin:0 calc(50% - 150px);
  13. background-color:#353535;
  14. overflow-x:hidden;
  15. overflow-y:hidden;
  16.  
  17. }
  18.  
  19. #cont {
  20. position:absolute;
  21. width:300px;
  22. height:100%;
  23. padding:2px 10px;
  24. background-color:black;
  25. margin:0;
  26. border-right:1px solid #444444;
  27. border-left:1px solid #444444;
  28. }
  29.  
  30. #cont h1,
  31. #cont h2 {
  32.  
  33. font-family: 'Arial', Helvetica, Sans-Serif;
  34. font-size:14px;
  35. font-weight:900;
  36. text-align:center;
  37. color:white;
  38. letter-spacing:1px;
  39. word-spacing:5px;
  40. margin:0;
  41. background-color:blue;
  42. width:100%;
  43.  
  44. }
  45.  
  46. #cont h2 {
  47. font-size:18px;
  48. background-color:#FE8046;
  49. color:grey;
  50.  
  51. }
  52.  
  53. #encoder,
  54. #coded {
  55. width:294px;
  56. height:150px;
  57. overflow-x:hidden;
  58. margin:0;
  59. outline:none;
  60. }
  61.  
  62. .btns {
  63. position:relative;
  64. margin-bottom:60px;
  65. text-align:center;
  66. padding:0;
  67. }
  68.  
  69. .btns button {
  70.  
  71. width:148px;
  72. height:24px;
  73. letter-spacing:2px;
  74. margin:0;
  75. margin-bottom:5px;
  76. padding:0;
  77. font-family:Sans-Serif;
  78. font-size:16px;
  79. font-weight:600;
  80. line-height:24px;
  81. box-shadow:inset 0 0 7px #000;
  82. border:none;
  83. outline:none;
  84. background-color:#CCCCCC;
  85. color:#999999;
  86. }
  87.  
  88. .btns button:hover {background-color:yellow;color:#FE8046;}
  89. .btns button:active {background-color:lime;color:white;}
  90.  
  91. hr {
  92. border: 1px outset yellow;
  93. width:100%;
  94. margin:-40px 0 0 0;
  95. }
  96.  
  97. address {
  98. position:relative;
  99. margin:0;
  100. text-align:center;
  101. color:#EEEEEE;
  102. letter-spacing:2px;
  103. }
  104.  
  105. .right {float:right;}
  106. .left {float:left;}
  107.  
  108.  
  109. input:focus {outline:none;}
  110. </style>
  111.  
  112.  
  113. <script>
  114. function enCode(){
  115. var t = document.getElementById('encoder').value;
  116. document.getElementById('coded').value = btoa(t);
  117. }
  118.  
  119. function deCode(){
  120. var t = document.getElementById('coded').value;
  121. document.getElementById('coded').value = atob(t);
  122. }
  123.  
  124.  
  125.  
  126. function clearCode(ID){
  127. document.getElementById(ID).value = "";
  128. }
  129.  
  130. function copyCode(ID){
  131. var copyText = document.getElementById(ID);
  132. copyText.select();
  133. document.execCommand("copy");
  134. }
  135.  
  136. function pasteCode(){
  137. document.execCommand("paste");
  138. }
  139.  
  140.  
  141. </script>
  142.  
  143. </head>
  144.  
  145. <body>
  146. <div id="cont">
  147. <h1>BASE 64 ENCODER / DECODER</h1>
  148.  
  149. <h2>INPUT</h2>
  150. <textarea id="encoder" placeholder="Paste text to be processed here."></textarea>
  151.  
  152. <div class="btns">
  153. <button class="left" type="button" onclick="enCode()";>ENCODE</button>
  154. <button class="right" type="button" onclick="deCode()";>DECODE</button>
  155. <button class="left" type="button" onclick="copyCode('encoder')";>COPY</button>
  156. <button class="right" type="button" onclick="clearCode('encoder')";>CLEAR</button>
  157. </div>
  158.  
  159.  
  160.  
  161. <h2>OUTPUT</h2>
  162. <textarea id="coded" placeholder="Encoded/Decoded text appears here."></textarea>
  163. <div class="btns">
  164. <button class="left" type="button" onclick="copyCode('coded')";>COPY</button>
  165. <button class="right" type="button" onclick="clearCode('coded')";>CLEAR</button>
  166. </div>
  167. <hr>
  168. <address>Lionel Mertens ~ 2019</address>
  169. </div>
  170.  
  171.  
  172. </body>
  173. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!