Modernized, BS5, better js. Also, h.

dnorhoj · Sep 8, 2021 · c03f76a · c03f76a
1 parent b86b58a
commit c03f76a
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 51 deletions.
diff --git a/assets/h.js b/assets/h.js
@@ -0,0 +1,42 @@
+DarkReader.setFetchMethod(window.fetch);
+DarkReader.auto();
+
+document.onload = () => {
+	let h = document.getElementById('h');
+	let hh = document.getElementById('hh');
+
+	document.getElementById("hhh").addEventListener('click', () => {
+		hh.value = HH(stringToBinary(h.value));
+	});
+
+	document.getElementById("hhhh").addEventListener('click', () => {
+		if(h.value.match(/[^Hh\n ]/g) || h.value.length % 8 != 0) {
+			new bootstrap.Toast(document.querySelector("#hhhhhhh")).show();
+			hh.value = "";
+			return;
+		}
+		hh.value = binaryToString(H(h.value));
+	});
+
+	document.getElementById("hhhhh").addEventListener('click', () => {
+		navigator.clipboard.writeText(hh.value).then(() => {
+			new bootstrap.Toast(document.querySelector('#hhhhhh')).show();
+		});
+	});
+
+	function H(h) {
+		let hh = h;	
+		hh = hh.replace(new RegExp(" ", "g"), "");
+		hh = hh.replace(new RegExp("h", "g"), "0");
+		hh = hh.replace(new RegExp("H", "g"), "1");
+		return hh;
+	}
+
+	function HH(h) {
+		let hh = h;
+		hh = hh.replace(new RegExp(" ", "g"), "");
+		hh = hh.replace(new RegExp("0", "g"), "h");
+		hh = hh.replace(new RegExp("1", "g"), "H");
+		return hh;
+	}
+};
diff --git a/hh.js → assets/hh.js b/hh.js → assets/hh.js
diff --git a/assets/style.css b/assets/style.css
@@ -0,0 +1,24 @@
+textarea {
+    resize: none;
+}
+
+.clipboard {
+	position: relative;
+	display: block;
+	float: right;
+}
+
+.btn-clipboard {
+	position: absolute;
+	top: .5rem;
+	right: .5rem;
+	z-index: 10;
+	display: block;
+	padding: .25rem .5rem;
+	font-size: 75%;
+	color: #fff;
+	cursor: pointer;
+	background-color: #027de7;
+	border: 0;
+	border-radius: .25rem;
+}
diff --git a/h.js b/h.js
diff --git a/index.html b/index.html
@@ -1,32 +1,67 @@
 <!DOCTYPE html>
 <html>
+
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<title>H</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
-	<script src="hh.js" type="text/javascript"></script>
+
+	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+	integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
+	<script src="https://cdn.jsdelivr.net/combine/npm/[email protected],npm/[email protected]"></script>
+
+	<link href="assets/style.css" rel="stylesheet">
+	<script src="assets/hh.js" type="text/javascript"></script>
+	<script src="assets/h.js" type="text/javascript"></script>
 </head>
+
 <body>
-	<div class="container-fluid">
-		<h1>H</h1>
-		<div class="row">
-			<div class="form-group col-md-6">
-				<textarea class="form-control" id="h" placeholder="H"></textarea>
-				<h2 style="display:inline;">↓-↓ ↓-↓</h2><br/><br>
-				<textarea class="form-control" id="hh" placeholder="H"></textarea><br/>
-				<select class="form-control" id="hhh">
-					<option value="h">Text to H</option>
-					<option value="hh">H to Text</option>
-				</select>
-				<br/>
-				<div class="form-check">
-					<a class="btn btn-success" onclick="hhhhh()" id="hhhh">H</a>
+	<div class="container-md py-5">
+		<div class="card">
+			<div class="card-header">
+				<h1>H Translator</h1>
+				<span>by <b>dnorhoj</b></span>
+			</div>
+			<div class="card-body">
+				<textarea class="form-control" id="h" placeholder="Welcome!"></textarea>
+				<div class="input-group py-2">
+					<button class="btn btn-outline-primary w-50" id="hhh">Hencode</button>
+					<button class="btn btn-outline-primary w-50" id="hhhh">Hdecode</button>
+				</div>
+				<div class="clipboard">
+					<button class="btn-clipboard" id="hhhhh">Copy</button>
+				</div>
+				<textarea class="form-control" id="hh"
+					placeholder="hHhHhHHHhHHhhHhHhHHhHHhhhHHhhhHHhHHhHHHHhHHhHHhHhHHhhHhHhhHhhhhH" disabled></textarea>
+			</div>
+		</div>
+	</div>
+
+	<div aria-live="polite" aria-atomic="true" class="position-relative"></div>
+		<div class="toast-container position-absolute top-0 end-0 p-3">
+			<div class="toast align-items-center text-white bg-success border-0" id="hhhhhh" role="alert" aria-live="assertive"
+				aria-atomic="true">
+				<div class="d-flex">
+					<div class="toast-body">
+						Copied!
+					</div>
+					<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
+						aria-label="Close"></button>
+				</div>
+			</div>
+			<div class="toast align-items-center text-white bg-danger border-0" id="hhhhhhh" role="alert" aria-live="assertive"
+				aria-atomic="true">
+				<div class="d-flex">
+					<div class="toast-body">
+						Invalid input data!
+					</div>
+					<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
+						aria-label="Close"></button>
 				</div>
 			</div>
 		</div>
 	</div>
 </body>
+
 </html>
-<script src="h.js" type="text/javascript"></script>