Merge pull request #1 from BlockArchitech/main

Add Web App
zNotChill · Mar 20, 2022 · 3bdf5d7 · 3bdf5d7
2 parents aa9b5a3 + b1cfe20
commit 3bdf5d7
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 0 deletions.
diff --git a/WebAPP/index.html b/WebAPP/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MDJSON</title>
+	<link rel="stylesheet" href="fix.css">
+	<link rel="stylesheet" href="rainbow.css">
+	<link href='https://fonts.googleapis.com/css?family=Roboto Mono' rel='stylesheet'>
+	<style>
+		h1 {
+			font-family: 'Roboto Mono', monospace;
+		}
+		h2 {
+			font-family: 'Roboto Mono', monospace;
+		}
+		h3 {
+			padding-top: 25px;
+		}
+		h4 {
+			padding-top: 8px;
+		}
+		h5 {
+	padding-top: 200px;
+       }
+	</style>	
+	<link href="https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" rel="stylesheet" />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/3.6.2/fetch.min.js" integrity="sha512-1Gn7//DzfuF67BGkg97Oc6jPN6hqxuZXnaTpC9P5uw8C6W4yUNj5hoS/APga4g1nO2X6USBb/rXtGzADdaVDeA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+</head>
+<body>
+    <!-- <input type="text" id="input" placeholder="Input" class="enter" class="form-control input-monospace" placeholder="hhhh" /> -->
+	<center>
+	<h5> </h5> <!-- for padding -->
+	<h1><span class="gradient">MDJSON</span></h1>
+	<h4> </h4>
+	<h2>Create an MD5 hash and JSON string with ease</h2>
+	<h3> </h3> <!-- once again for padding -->
+	<input class="form-control input-monospace enter" type="text" id="input" placeholder="Input a string" classaria-label="SHA" />
+    <button class="btn" type="button" id="enter">Enter</button>
+	<p id="output"></p>
+
+
+	</center>
+
+</body>
+    <script src="main.js"></script>
+    <script src="md5.js"></script>
+</html>
diff --git a/WebAPP/main.js b/WebAPP/main.js
@@ -0,0 +1,19 @@
+$(document).ready(function(){
+    $("#enter").click(function(){
+        if (document.getElementById('input').value.length === 0) {
+            document.getElementById('output').innerHTML = '<div class="flash mt-3 flash-error" style="max-width: 300px"> <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M4.47.22A.75.75 0 015 0h6a.75.75 0 01.53.22l4.25 4.25c.141.14.22.331.22.53v6a.75.75 0 01-.22.53l-4.25 4.25A.75.75 0 0111 16H5a.75.75 0 01-.53-.22L.22 11.53A.75.75 0 010 11V5a.75.75 0 01.22-.53L4.47.22zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5H5.31zM8 4a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 018 4zm0 8a1 1 0 100-2 1 1 0 000 2z"></path></svg> Please enter a string! </div>';
+            return
+        }
+        document.getElementById('output').innerHTML = ""
+        const split = document.getElementById('input').value.split(' ')
+        const length = split.length;
+        const list = []
+        for (let l = 0; l < length; l++) {
+            list.push(`{"${l + 1}": {
+                "split": "${split[l]}",
+                "md5": "${md5(split[l])}"
+            }`) // l + 1 bc who the hell wants to use arrays that begin at 0 lets be honest
+            document.getElementById('output').innerHTML = `<div class="flash mt-3 flash-success" style="max-width: 1000px"> <!-- <%= octicon "check" %> --> <svg class="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg> ${list.join(',')}</div>`
+        }
+    })
+})
diff --git a/WebAPP/md5.js b/WebAPP/md5.js
diff --git a/WebAPP/rainbow.css b/WebAPP/rainbow.css
@@ -0,0 +1,45 @@
+:root {
+	--red: #c96565;
+	--yellow: #c9b065;
+	--lime: #8cba5d;
+	--green: #65b87a;
+	--cyan: #60b5a8;
+	--blue: #658fc9;
+	--purple: #8665c9;
+	--pink: #c965c1;
+	--accent: var(--blue);
+
+	--background: #fff;
+	--backdrop: #eee;
+	--foreground: #444;
+	--shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2);
+}
+
+.gradient {
+	background: linear-gradient(
+		to right,
+		var(--red),
+		var(--yellow),
+		var(--lime),
+		var(--green),
+		var(--cyan),
+		var(--blue),
+		var(--purple),
+		var(--pink)
+	);
+	-webkit-background-clip: text;
+	background-clip: text;
+	color: transparent;
+	animation: rainbow 5s ease infinite;
+	background-size: 400% 100%;
+}
+
+@keyframes rainbow {
+	0%,
+	100% {
+		background-position: 0 0;
+	}
+	50% {
+		background-position: 100% 0;
+	}
+}