TheAdnan · stefanobg · Oct 11, 2017 · Oct 11, 2017 · Oct 11, 2017 · Oct 11, 2017
diff --git a/README.md b/README.md
@@ -1,4 +1,25 @@
-# hashr
-### _Password hash generator_
+<p align="center">
+  <img src="https://raw.githubusercontent.com/stefanobg/hashr/master/assets/Hashr-Dark-slogan.png">
+</p>
 
-List of all PHP hashing algorithms ([hash_algos() function](http://php.net/manual/en/function.hash-algos.php)) and their result for an input string.
+# 🔒 Hashr! [![Open Source Love](https://badges.frapsoft.com/os/v2/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/)
+Password hash generator, easy as pie.
+<br/><br/>
+
+## 💻 Online Example 
+The app is deployed on heroku, take a look by clicking [here](https://hashr-php.herokuapp.com/)
+<br/><br/>
+
+## 🔥 New Interface and Visual Identity
+> Contribution by [Stéfano Girardelli](https://stefanobg.com)
+🎨  **Logo, Colors and Favicon**
+<p float="left">
+  <img src="https://raw.githubusercontent.com/stefanobg/hashr/master/assets/Colors-Logo.png">
+</p>
+<br/><br/>
+
+📱 **Interface**
+<p float="left">
+  <img src="https://raw.githubusercontent.com/stefanobg/hashr/master/assets/Interaction.gif">
+</p>
+<br/><br/>
diff --git a/assets/Colors-Logo.png b/assets/Colors-Logo.png
diff --git a/assets/Hashr-Dark-slogan.png b/assets/Hashr-Dark-slogan.png
diff --git a/assets/Hashr-Dark.png b/assets/Hashr-Dark.png
diff --git a/assets/Hashr-Dark.svg b/assets/Hashr-Dark.svg
diff --git a/assets/Hashr-Light.png b/assets/Hashr-Light.png
diff --git a/assets/Hashr-Light.svg b/assets/Hashr-Light.svg
diff --git a/assets/Interaction.gif b/assets/Interaction.gif
diff --git a/assets/Interface/Generated (Hover).png b/assets/Interface/Generated (Hover).png
diff --git a/assets/Interface/Generated.png b/assets/Interface/Generated.png
diff --git a/assets/Interface/Home (Hover).png b/assets/Interface/Home (Hover).png
diff --git a/assets/Interface/Home (Type - Hover).png b/assets/Interface/Home (Type - Hover).png
diff --git a/assets/Interface/Home (Type).png b/assets/Interface/Home (Type).png
diff --git a/assets/Interface/Home.png b/assets/Interface/Home.png
diff --git a/assets/favicon.png b/assets/favicon.png
diff --git a/function.php b/function.php
@@ -1,8 +1,14 @@
 <?php
 	$hashes = array();
+	$hashTime = array();
 	if(isset($_POST['submit']) && !empty($_POST['input'])){
 		foreach (hash_algos() as $algo) {
-			array_push($hashes, hash($algo, $_POST['input']));
+
+            $start = microtime(true);
+		    $hash = hash($algo, $_POST['input']);
+            $timeElapsed = microtime(true) - $start;
+            $hashTime[$algo] = $timeElapsed;
+			$hashes[$algo] = $hash;
 		}
 	}
 ?>
diff --git a/index.php b/index.php
@@ -1,42 +1,31 @@
-<?php 
+<?php
 	require_once("function.php");
  ?>
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Hashr</title>
 	<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
-	<style type="text/css">
-		html{
-			font-family: Orbitron;
-		}
-		.hashes {
-			display: grid;
-			grid-template-columns: repeat(2, 1fr);
-			grid-gap: 10px;
-			grid-auto-columns: minmax(20%, 30%);
-		}
-	</style>
+	<link href="main.css" rel="stylesheet">
 	<link href="https://fonts.googleapis.com/css?family=Nunito|Orbitron" rel="stylesheet">
 </head>
 <body>
-	<form method="post">
+	<form name ="hashform" method="post" onsubmit="return validateform()">
 		<label>Input string: </label>
-		<input type="text" name="input">
-		<input type="submit" name="submit" value="Hash!">
+		<input type="text" name="input" required oninvalid="this.setCustomValidity('You can\'t leave the input string blank!')">
+		<input type="submit" class="submit" name="submit" value="Hash!">
 	</form>
 	<br>
 	<div class="hashes">
-		<?php 
-			foreach (hash_algos() as $i => $algo) { ?>
+		<?php
+			foreach (hash_algos() as $algo) { ?>
 				<div class="hash_algo">
 					<p class="algo"><b><?= $algo; ?></b></p>
-					<p>Hash: <span style="font-family: Nunito"><?= $hashes[$i]; ?></span></p>
+					<p class="hash">Hash: <span style="font-family: Nunito"><?= $hashes[$algo]; ?></span></p>
+                    <small>Execution time: <span class="exec-time" style="font-family: Nunito"><?= number_format($hashTime[$algo] * 1000000000, 0); ?> nanoseconds</span></small>
 				</div>
 		<?php	}
 		 ?>
 	</div>
 </body>
 </html>
-
-
diff --git a/main.css b/main.css
@@ -0,0 +1,65 @@
+html{
+  font-family: Orbitron;
+  background: black;
+  color: #1be71b;
+}
+.hashes {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 12px;
+}
+
+.hash_algo{
+  border: 0.6px solid rgb(44, 140, 49);
+  padding: 10px;
+}
+
+.algo{
+  font-size: 19px;
+}
+
+.hash{
+  font-size: 15px;
+}
+
+.exec-time{
+  font-weight: bold;
+}
+
+.submit{
+  background-color: green;
+  border: 2px solid green;
+  color: #fff;
+  width: 100px;
+  margin-left: 20px;
+  font-family: Orbitron;
+  -webkit-transition: all 0.5s ease-in;
+  -moz-transition: all 0.5s ease-in;
+  -ms-transition: all 0.5s ease-in;
+  -o-transition: all 0.5s ease-in;
+  transition: all 0.5s ease-in;
+
+}
+
+.submit:hover{
+  cursor: pointer;
+  font-size: 15px;
+  -moz-transform: scale(1.1);
+  -webkit-transform: scale(1.1);
+  -o-transform: scale(1.1);
+  -ms-transform: scale(1.1);
+  transform: scale(1.1);
+  -webkit-transition: all 0.5s ease-in;
+  -moz-transition: all 0.5s ease-in;
+  -ms-transition: all 0.5s ease-in;
+  -o-transition: all 0.5s ease-in;
+  transition: all 0.5s ease-in;
+}
+
+small{
+  font-size: 12px;
+}
+
+p{
+  margin: 10px 0;
+}