Inital styles

front-end/css/style.css

@@ -10,147 +10,52 @@ html {
 body {
 	padding: 50px;
 	font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
-	background: #333;
-	color: white;
+	font-family: HelveticaNeue;
+	color: #010101;
 }
 
 button {
-	clear:both;
-	background: #3498db;
-	border-radius: 5px;
-	color: #fff;
-	padding: 10px 20px 10px 20px;
-	text-decoration: none;
-	border:0;
-    width: 100%;
+	/* Background: */
+	background-image: linear-gradient(-180deg, #4C98FE 0%, #0664E3 100%);
+	/* Sketch doesnt export gradient borders at this point */
+	box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.15);
+	border-radius: 3px;
+	/* Button: */
+	font-size: 14px;
+	color: #FFFFFF;
+	letter-spacing: -0.11px;
+	line-height: 12px;
+	height: 21px;
+	width: 60px;
+	border: 0.5px solid #247EFF;
 }
 
-button:disabled {
-	background: #eee;
-	color: #aaa
-}
-
-
-button:hover {
-	background: #3cb0fd;
-	text-decoration: none;
-}
-
-button:hover:disabled {
-    background: #bbb;
-    color: #aaa
+select {
+	width: 254px;
+	height: 21px;
+	font-size: 13px;
 }
 
 label {
-	width: 180px;
-	display: inline-block;
+	font-size: 13px;
 }
 
-select {
-	width: 200px;
-	font-size: 15px;
-}
 footer {
 	position:fixed;
 	left:0;
 	bottom:0;
 	height:30px;
+	padding-top:10px;
 	width:100%;
-	background: #0568c6;
-	color: white;
-}
-
-footer span {
-	top: 5px;
-	left: 10px;
-	position: relative;
-}
-
-#progressBar {
-    display:none;
-}
-
-#progress {
-	width: 0;
-}
-
-#form div {
-	margin-bottom: 30px;
 	text-align: center;
+	border-top: 1px solid #EDEAE8;
 }
-#form label {
-	text-align: right;
-}
-/*
-* https://css-tricks.com/examples/ProgressBars/
-*/
-.meter {
-	height: 40px;  /* Can be anything */
-	position: relative;
-	margin: 40px 0 20px 0; /* Just for demo spacing */
-	background: #555;
-	border-radius: 25px;
-	padding: 10px;
-	box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
-}
-.meter > span {
-	display: block;
-	height: 100%;
-	border-top-right-radius: 8px;
-	border-bottom-right-radius: 8px;
-	border-top-left-radius: 20px;
-	border-bottom-left-radius: 20px;
-	background-color: rgb(5, 138, 255);
-	background-image: -webkit-gradient(
-			linear,
-			left bottom,
-			left top,
-			color-stop(0,  rgb(5, 138, 255)),
-			color-stop(1, rgb(71, 190, 240))
-	);
 
-	box-shadow:
-			inset 0 2px 9px  rgba(255,255,255,0.3),
-			inset 0 -2px 6px rgba(0,0,0,0.4);
-	position: relative;
-	overflow: hidden;
-}
-.meter > span:after, .animate > span > span {
-	content: "";
-	position: absolute;
-	top: 0; left: 0; bottom: 0; right: 0;
-	background-image:
-			-webkit-gradient(linear, 0 0, 100% 100%,
-			color-stop(.25, rgba(255, 255, 255, .2)),
-			color-stop(.25, transparent), color-stop(.5, transparent),
-			color-stop(.5, rgba(255, 255, 255, .2)),
-			color-stop(.75, rgba(255, 255, 255, .2)),
-			color-stop(.75, transparent), to(transparent)
-			);
-	z-index: 1;
-	background-size: 50px 50px;
-	-webkit-animation: move 2s linear infinite;
-	border-top-right-radius: 8px;
-	border-bottom-right-radius: 8px;
-	border-top-left-radius: 20px;
-	border-bottom-left-radius: 20px;
-	overflow: hidden;
-}
-
-.animate > span:after {
-	display: none;
-}
-
-@-webkit-keyframes move {
-	0% {
-		background-position: 0 0;
-	}
-	100% {
-		background-position: 50px 50px;
-	}
+img {
+	width: 180px;
+	display: inline-block;
 }
-
-.nostripes > span > span, .nostripes > span:after {
-	-webkit-animation: none;
-	background-image: none;
+#form {
+	display: inline-block;
+	width: 300px;
 }

front-end/images/logo.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 180 180" style="enable-background:new 0 0 180 180;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:url(#SVGID_1_);stroke-width:2.7653;stroke-miterlimit:10;}
+	.st1{fill:none;stroke:#FFAB91;stroke-width:2.7653;stroke-miterlimit:10;}
+	.st2{fill:none;stroke:#FFD600;stroke-width:2.7653;stroke-miterlimit:10;}
+</style>
+<g>
+	<title>Flasherjs</title>
+	
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="49.358" y1="145.223" x2="127.8842" y2="145.223" gradientTransform="matrix(1 0 0 1 0 -55.223)">
+		<stop  offset="0" style="stop-color:#FFAB91"/>
+		<stop  offset="1" style="stop-color:#FFD600"/>
+	</linearGradient>
+	<polyline class="st0" points="52.1,27.5 62.6,27.5 51,92.5 56.5,92.5 72.3,4 77.8,4 62.1,92.5 67.6,92.5 78.4,37.7 83.9,37.7 
+		73.1,92.5 78.7,92.5 85.9,55.4 91.4,55.4 69.3,176 74.8,176 91.4,87.5 96.9,87.5 84.5,153.9 90,153.9 102.4,87.5 108,87.5 
+		99.7,136.2 105.2,136.2 113.5,87.5 119,87.5 116.8,99.4 127.9,99.4 	"/>
+	<circle class="st1" cx="48.8" cy="27.5" r="3.3"/>
+	<circle class="st2" cx="131.2" cy="99.7" r="3.3"/>
+</g>
+</svg>

front-end/index.html

@@ -6,32 +6,33 @@
     <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
-<div id="form">
-    <div>
-        <label for="ports">Select Port:</label>
-        <select title="Select a Serial/COM Port" id="ports" name="ports" disabled>
+    <img src="images/logo.svg" width="180" height="180">
+    <div id="form">
+        <div>
+            <label for="ports">Select Port:</label><br>
+            <select title="Select a Serial/COM Port" id="ports" name="ports" disabled>
 
-        </select>
-    </div>
-    <div>
-        <label for="manifests">Select Binaries to Flash:</label>
-        <select title="Select Binaries to Flash" id="manifests" name="manifests" disabled>
+            </select>
+        </div>
+        <div>
+            <label for="manifests">Select Binaries to Flash:</label><br>
+            <select title="Select Binaries to Flash" id="manifests" name="manifests" disabled>
 
-        </select>
+            </select>
+        </div>
+        <div>
+            <button id="flash-button" disabled>
+                Flash!
+            </button>
+        </div>
     </div>
-    <div>
-        <button id="flash-button" disabled>
-            Flash!
-        </button>
+    <div id="progressBar" class="meter animate">
+        <span id="progress"><span></span></span>
     </div>
-</div>
-<div id="progressBar" class="meter animate">
-    <span id="progress"><span></span></span>
-</div>
 
-<footer><span id="status"></span></footer>
+    <footer><span id="status"></span></footer>
 
-<!-- Javascript -->
-<script src="js/app.js" charset="utf-8"></script>
+    <!-- Javascript -->
+    <script src="js/app.js" charset="utf-8"></script>
 </body>
 </html>