add commit hash

src/index.html

@@ -21,16 +21,27 @@
   <div class="header">
     <div class="wrap">
       <form action="JavaScript:getCover()">
-        <input type="text" id="videoUrl" placeholder="YouTube video url" onchange="getCover()"><!--
+        <input type="text" id="videoUrl" placeholder="YouTube video URL" onchange="getCover()"><!--
       --><button type="submit">Search</button>
       </form>
     </div>
   </div>
+
   <div class="content">
-    <div class="wrap" id="ytImage">
+    <div class="wrap">
+      <div class="cover" id="ytImage"></div>
     </div>
-    <p>Thanks: <a href="https://github.com/takien">@takien</a> for youtubeID.js script.<br>
-      <a href="https://github.com/iiiypuk/YTCget">View on GitHub</a></p>
   </div>
+
+  <footer>
+    <p>
+      Thanks: <a target="_blank" href="https://github.com/takien">@takien</a>
+      for youtubeID.js script.<br>
+      <a target="_blank" href="https://git.a2s.su/iiiypuk/YTCget">Source code</a>
+    </p>
+    <p class="git-commit">
+      {GIT_COMMIT_HASH}
+    </p>
+  </footer>
 </body>
 </html>

src/styles.css

@@ -28,15 +28,32 @@ div.content img {
   max-width: 100%;
   border-radius: 8px;
 }
-div.content p {
+
+div.cover {
+  text-align: center;
+}
+
+footer {
   color: #808080;
   text-align: center;
 }
-div.content a {
+footer a {
   color: #ffffff;
   text-decoration: none;
 }
 
+.git-commit {
+  font-size: .8em;
+  color: #ffffff;
+  background-color: #232323;
+  display: inline-block;
+  border: 1px solid #808080;
+  border-radius: 8px;
+  padding: 4px 8px;
+  margin-top: 8px;
+}
+
+
 input, button {
   box-sizing: border-box;
   border: 1px solid #121212;
@@ -51,7 +68,6 @@ input {
   color: #808080;
   border-radius: 8px 0 0 8px;
 }
-
 input::placeholder {
   color: #818181;
   transition: 250ms all;