feat: add logo and favicon

espy · Mar 15, 2019 · 7bce875 · 7bce875
1 parent c280b5b
commit 7bce875
Show file tree

Hide file tree

Showing 17 changed files with 78 additions and 2 deletions.
diff --git a/android-chrome-192x192.png b/android-chrome-192x192.png
diff --git a/android-chrome-512x512.png b/android-chrome-512x512.png
diff --git a/apple-touch-icon.png b/apple-touch-icon.png
diff --git a/assets/main.css b/assets/main.css
@@ -8,6 +8,13 @@ body {
   height: 100vh;
   flex-direction: column;
 }
+h1 svg {
+  height: 1em;
+  display: inline-block;
+  width: 1em;
+  vertical-align: bottom;
+}
+
 #holder {
   display: block;
   position: fixed;

diff --git a/assets/main.js b/assets/main.js
@@ -55,7 +55,7 @@ holder.ondrop = function (e) {
 
   var file = e.dataTransfer.files[0]
   fileName = file.name
-  document.getElementById('title').innerHTML = 'Transcribing ' + file.name
+  document.getElementById('filename').innerHTML = file.name
   // var reader = new FileReader()
   // `loadBlob` doesn’t work with `backend: MediaElement`
   // wavesurfer.loadBlob(file)

diff --git a/browserconfig.xml b/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#2d89ef</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/favicon-16x16.png b/favicon-16x16.png
diff --git a/favicon-32x32.png b/favicon-32x32.png
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -3,12 +3,24 @@
 <head>
   <meta charset="UTF-8">
   <title>Transcribe</title>
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+  <link rel="manifest" href="/site.webmanifest">
+  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+  <meta name="msapplication-TileColor" content="#2d89ef">
+  <meta name="theme-color" content="#ffffff">
   <link rel="stylesheet" href="assets/main.css">
 </head>
 <body>
   <div id="holder">Drop an audio file here…</div>
   <section id="audio-area">
-    <h1><span id="title">Transcribe</span><span id="time"></span></h1>
+    <h1>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
+        <path d="M30 210V90m0 0c0-33.1 26.9-60 60-60m60 60c0-33.1-26.9-60-60-60m60 180V90m0 120c0 33.1 26.9 60 60 60s60-26.9 60-60m0 0V90" fill="none" stroke="#4e9dca" stroke-width="31" stroke-linecap="round" stroke-miterlimit="10"/>
+      </svg>
+      <span id="filename"></span>
+    </h1>
     <div id="waveform-display">
       <div id="loading-message">
         Generating your waveform…

diff --git a/mstile-144x144.png b/mstile-144x144.png
diff --git a/mstile-150x150.png b/mstile-150x150.png
diff --git a/mstile-310x150.png b/mstile-310x150.png
diff --git a/mstile-310x310.png b/mstile-310x310.png
diff --git a/mstile-70x70.png b/mstile-70x70.png
diff --git a/safari-pinned-tab.svg b/safari-pinned-tab.svg
diff --git a/site.webmanifest b/site.webmanifest
@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}