Add a small illustration to the start interface

Author: thomasjbradley

CHANGELOG.md

@@ -5,6 +5,14 @@ Patternbot adheres to [Semantic Versioning](http://semver.org/).
 
 ---
 
+## [1.3.1] — 2017-03-28
+
+### Changed
+
+- Added a small robot illustration to the start screen to differentiate Patternbot from the other Toolbots.
+
+---
+
 ## [1.3.0] — 2017-03-25
 
 ### Added

app/renderer/windows/main/main.css

@@ -89,6 +89,7 @@ header {
   justify-content: center;
   align-items: center;
   flex-grow: 1;
+  position: relative;
 
   text-align: center;
 }
@@ -186,3 +187,43 @@ main {
   transform: translate(-50%, -50%);
   opacity: .3;
 }
+
+#robot-bust-wrap {
+  bottom: -46px;
+  left: calc(50% - 48px);
+  position: absolute;
+  width: 96px;
+}
+
+#robot-speech {
+  left: 50%;
+  margin: 0;
+  padding: 4px 0;
+  position: absolute;
+  top: -1em;
+  width: 12em;
+
+  background-color: rgba(0, 0, 0, .16);
+  border-radius: var(--control-border-radius);
+  transform: translateX(-50%);
+
+  color: #fff;
+  font-size: 11px;
+  text-align: center;
+}
+
+#robot-speech-triangle {
+  bottom: -9px;
+  left: 50%;
+  position: absolute;
+  width: 16px;
+
+  opacity: .16;
+  transform: translateX(-50%);
+}
+
+#robot-bust {
+  width: 100%;
+
+  opacity: .16;
+}

app/renderer/windows/main/main.html

@@ -10,6 +10,33 @@
   <header id="header" role="banner">
     <img class="drop-arrow" src="../../images/drop-arrow.svg" alt="">
     <h1>Drag <abbr title="and">&amp;</abbr> drop a folder…</h1>
+    <div id="robot-bust-wrap">
+      <p id="robot-speech">
+        <span>By your command.</span>
+        <svg id="robot-speech-triangle" viewBox="0 0 256 140">
+          <polygon fill="#000" points="128 134.4 2.9 -1.8 253.1 -1.8 128 134.4"/>
+        </svg>
+      </p>
+      <svg id="robot-bust" viewBox="0 0 512 512">
+        <path d="M320.8 154.1H190.5c-5 0-12.6 5.2-8.3 2.6l-35.7 21.4h219l-36.1-21.7a13.7 13.7 0 0 0-8.6-2.3z"/>
+        <polygon points="325.5 307.5 186.5 307.5 146.5 262.8 365.5 262.8 325.5 307.5"/>
+        <circle cx="303.3" cy="236.1" r="14.1"/>
+        <path d="M277 323.3a6.6 6.6 0 0 1-6.5 6.7h-28.6c-3.6 0-5.9-3.1-5.9-6.7V315h-28.9l7.9 28.2a11.8 11.8 0 0 0 11.7 11.8h59a11.8 11.8 0 0 0 11.7-11.8l7.9-28.2H277z"/>
+        <path d="M148.2 446h216l-17.7-75.2a22.8 22.8 0 0 0-22.7-22.8H188.7a22.8 22.8 0 0 0-22.8 22.8zm57.8-84h100v64H206z"/>
+        <path d="M235.9 124.9c0 8.7 6.1 16 13.1 18.8V161h15v-17.8a20 20 0 1 0-28.1-18.3zm30.8 0a10.6 10.6 0 1 1-10.6-10.6 10.6 10.6 0 0 1 10.6 10.6z"/>
+        <path d="M398.5 220.6l-24-28.6h-237l-24 28.6-3 23.5a8 8 0 0 0 8 8h157.8l-6-35h58.2l10 35h55a8 8 0 0 0 8-8zM190 239h-44v-9h44zm0-16h-44v-11h44z"/>
+        <rect width="12" height="40" x="218.5" y="373"/>
+        <circle cx="288.4" cy="379.9" r="6.9"/>
+        <circle cx="288.4" cy="406.1" r="6.9"/>
+        <rect width="40" height="9.87" x="332.7" y="387.2" rx="4.1" ry="4.1" transform="rotate(-180 352.7 392.1)"/>
+        <rect width="40" height="9.87" x="332.7" y="401.3" rx="4.1" ry="4.1" transform="rotate(-180 352.7 406.3)"/>
+        <rect width="40" height="9.87" x="332.7" y="373" rx="4.1" ry="4.1" transform="rotate(180 352.7 377.9)"/>
+        <rect width="40" height="9.87" x="139.7" y="387.2" rx="4.1" ry="4.1" transform="rotate(-180 159.7 392.1)"/>
+        <rect width="40" height="9.87" x="139.7" y="401.3" rx="4.1" ry="4.1" transform="rotate(-180 159.7 406.3)"/>
+        <rect width="40" height="9.87" x="139.7" y="373" rx="4.1" ry="4.1" transform="rotate(180 159.7 377.9)"/>
+        <rect width="216.8" height="44" x="147.4" y="446"/>
+      </svg>
+    </div>
   </header>
 
   <main id="main" role="main" hidden>