Add offline capability indicator and links

3 files changed, 80 insertions, 18 deletions

diff --git a/index.html b/index.html
index b402c8a..90f9aad 100644
--- a/index.html
+++ b/index.html
@@ -18,25 +18,43 @@
     <canvas id="screen" class="centered"></canvas>
 
     <div id="welcomeScreen" class="centered">
-      <h1>Pointless Viewer</h1>
-      
-      <p>This viewer accepts double-width PDF presentations of the following shape:</p>
-      <table>
-        <tr>
-          <td>SLIDES</td>
-          <td>NOTES</td>
-        </tr>
-      </table>
-
-      <p>
-        (L<sup>A</sup>T<sub>E</sub>X-Beamer users may use
-        <code>\setbeameroption{show notes on second screen=right}</code>)
-      </p>
-
-      <p>Please select a PDF presentation file to open.</p>
-      <input id="fileInput" type="file" multiple="false"/>
+      <header>
+        <h1>Pointless Viewer</h1>
+        <span id="offlineCapable">(available offline)</span>
+      </header>
+
+      <div>
+        <p>This viewer accepts double-width PDF presentations of the following shape:</p>
+        <table>
+          <tr>
+            <td>SLIDES</td>
+            <td>NOTES</td>
+          </tr>
+        </table>
+
+        <p>
+          (L<sup>A</sup>T<sub>E</sub>X-Beamer users may use
+          <code>\setbeameroption{show notes on second screen=right}</code>)
+        </p>
+
+        <p>
+          Please select a PDF file to load.
+          Slides will be opened in a new window.
+        </p>
+
+        <input id="fileInput" type="file" multiple="false"/>
+      </div>
+
+      <div>
+        <ul>
+          <li><a href="https://pacien.org">&copy; 2018 Pacien</a></li>
+          <li><a href="https://github.com/pacien/pointless-viewer/issues">Bug tracker</a></li>
+          <li><a href="https://cgit.pacien.net/public/apps/pointless-viewer/">Source repository</a></li>
+          <li><a href="https://mozilla.github.io/pdf.js/">Powered by PDF.js</a></li>
+        </ul>
+      </div>
     </div>
-    
+
     <div id="timer" class="notification"></div>
     <div id="message" class="notification"></div>
 
diff --git a/pointless/viewer/init.js b/pointless/viewer/init.js
index 9ba881c..dddbf17 100644
--- a/pointless/viewer/init.js
+++ b/pointless/viewer/init.js
@@ -23,6 +23,9 @@ function isController() {
 function initCache() {
   if (!navigator.serviceWorker) return;
   navigator.serviceWorker.register("appcache.js");
+  
+  var offlineCapableIndicator = document.getElementById("offlineCapable");
+  offlineCapableIndicator.style.visibility = "visible";
 }
 
 function init() {
diff --git a/pointless/viewer/viewer.css b/pointless/viewer/viewer.css
index 57d95f4..d5b766b 100644
--- a/pointless/viewer/viewer.css
+++ b/pointless/viewer/viewer.css
@@ -13,10 +13,33 @@ html, body {
   height: 100%;
 }
 
+a {
+  color: white;
+}
+
+header > h1 {
+  display: inline-block;
+  margin-bottom: 0;
+  margin-right: 0.5rem;
+
+}
+
+header span {
+  font-size: 1.25rem;
+}
+
+#offlineCapable {
+  visibility: hidden;
+}
+
 #welcomeScreen {
   display: none;
 }
 
+#welcomeScreen > div {
+  margin-bottom: 4rem;
+}
+
 #welcomeScreen table {
   width: 100%;
   border-collapse: collapse;
@@ -29,6 +52,24 @@ html, body {
   height: 8rem;
 }
 
+#welcomeScreen ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+#welcomeScreen li {
+  display: inline;
+}
+
+#welcomeScreen li + li::before {
+  content: " • ";
+}
+
+#fileInput {
+  width: 100%;
+}
+
 .centered {
   position: absolute;
   top: 50%;