Add offline capability indicator and links

1 files changed, 36 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>