commit a0886a21cd8455cc2e3b15be9ae2b3348a6248b7
parent 3a8de71c92f05c4cac0008cfef6d340bf50abda8
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date: Mon, 29 Jun 2020 12:42:29 -0700
Add instructions for studying offline.
Diffstat:
4 files changed, 70 insertions(+), 0 deletions(-)
diff --git a/Offline/index.html b/Offline/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8"/>
+ <title>Spanish-Quizzer</title>
+ <meta name="description" content="Quiz yourself on Spanish vocabulary through a free and highly customizable web interface.">
+ <meta name="viewport" content="width=device-width, user-scalable=no"/>
+ <link rel="icon" type="image/png" href="../Images/favicon-32.png">
+ <link rel="apple-touch-icon" sizes="180x180" href="../Images/apple-touch-icon.png">
+ <link rel="stylesheet" href="../Styles/Global.css">
+ <link rel="stylesheet" href="../Styles/Offline.css">
+ </head>
+
+ <body>
+ <div id="title">
+ <h1 onclick="window.location='../'">Spanish-Quizzer</h1>
+ </div>
+
+ <h2>How to study offline</h2>
+
+ <div id="instructions">
+ <h4>Safari (iOS)</h4>
+ <ol>
+ <li>Go to the <a href="../">Spanish-Quizzer homepage</a>.</li>
+ <li>Tap the share icon and select "Add to Reading List".</li>
+ <li>Open the Settings app and select "Safari".</li>
+ <li>Scroll down to the "Reading List" section and enable "Automatically Save Offline".</li>
+ <li>When you are offline, return to the <a href="../">homepage</a> to study offline.</li>
+ </ol>
+ <h4>Chrome / Firefox / Edge</h4>
+ <ol>
+ <li>Go to the <a href="../">Spanish-Quizzer homepage</a>.</li>
+ <li>Click on the star on the right side of the address bar.</li>
+ <li>Click "Done".</li>
+ <li>When you are offline, return to the <a href="../">homepage</a> to study offline.</li>
+ </ol>
+ </div>
+
+ <div class="footer">
+ <div id="share" hidden>
+ <a href="mailto:?Subject=Spanish-Quizzer&Body=https://ashermorgan.github.io/Spanish-Quizzer">Email</a>
+ <a href="http://www.facebook.com/sharer.php?u=https://ashermorgan.github.io/Spanish-Quizzer" target="_blank">Facebook</a>
+ <a href="https://twitter.com/share?url=https://ashermorgan.github.io/Spanish-Quizzer&text=Spanish-Quizzer" target="_blank">Twitter</a>
+ <a href="http://reddit.com/submit?url=https://ashermorgan.github.io/Spanish-Quizzer&title=Spanish-Quizzer" target="_blank">Reddit</a>
+ <a id="shareSMS" href="sms:&body=https://ashermorgan.github.io/Spanish-Quizzer" hidden>SMS</a>
+ </div>
+ <a href="../">Home</a>
+ <a href="../Reference">Reference Tables</a>
+ <a href="javascript:document.getElementById('share').hidden = false;">Share</a>
+ </div>
+ </body>
+</html>
+\ No newline at end of file
diff --git a/Reference/index.html b/Reference/index.html
@@ -67,6 +67,7 @@
<a id="shareSMS" href="sms:&body=https://ashermorgan.github.io/Spanish-Quizzer/Reference" hidden>SMS</a>
</div>
<a href="../">Home</a>
+ <a href="../Offline">Study Offline</a>
<a href="javascript:document.getElementById('share').hidden = false;">Share</a>
</div>
</body>
diff --git a/Styles/Offline.css b/Styles/Offline.css
@@ -0,0 +1,15 @@
+/******** Instruction styles ********/
+#instructions {
+ max-width: 500px;
+ text-align: left;
+ margin: auto;
+}
+
+h4 {
+ text-align: center;
+ margin-bottom: 0px;
+}
+
+ol {
+ margin-top: 5px;
+}
diff --git a/index.html b/index.html
@@ -148,6 +148,7 @@
<a href="http://reddit.com/submit?url=https://ashermorgan.github.io/Spanish-Quizzer&title=Spanish-Quizzer" target="_blank">Reddit</a>
<a id="shareSMS" href="sms:&body=https://ashermorgan.github.io/Spanish-Quizzer" hidden>SMS</a>
</div>
+ <a href="Offline">Study Offline</a>
<a href="Reference">Reference Tables</a>
<a href="javascript:document.getElementById('share').hidden = false;">Share</a>
</div>
