update grammar index quick search, add info cards

- added donation card to backup reminder.
- added info card to donation page.
- enhances quick searching for lesson 11 of the grammar index (#18)

donate/index.html

@@ -36,6 +36,11 @@ <h1><a href="../" id="home-link">Tobira Study Resources</a></h1>
     <div id="content">
       <div class="content-block">
         <h2 class="title center" id="donate">Donate</h2>
+        <div class="info-box">
+          <div class="info-icon"><i class="fa">&#xf05a;</i></div>
+          <div class="info-text">If you're a student or someone struggling to make ends meet, please don't worry about donating and consider saving the money for your own expenses. The thought or your vocal support are more than enough!</div>
+        </div>
+
         <p>Tobira Study Resources wouldn't be possible without <strong>Tobira: Gateway to Advanced Japanese</strong>, so please consider purchasing a copy of the book to support the authors if you haven't yet. You can find out where to purchase the book via the following links.</p>
 
         <ul>

resources/css/stylesheet.css

@@ -512,6 +512,76 @@ h1:hover .anchor-icon, h2:hover .anchor-icon, h3:hover .anchor-icon, h4:hover .a
 
 #exercise-list .indent-block { margin-left:10px; }
 
+/* donate box */
+.donate-box {
+  color:#333;
+  background:#FCF;
+  border:1px solid #C6C;
+  position:relative;
+  padding:5px;
+  padding-left:35px;
+  margin:5px auto;
+  text-align:left;
+  width:80%;
+  max-width:600px;
+}
+
+.donate-icon {
+  color:#FCF;
+  background:#C6C;
+  font-size:20px;
+  width:30px;
+  text-align:center;
+  position:absolute;
+  top:0;
+  left:0;
+  bottom:0;
+  display:flex;
+  justify-content:center;
+  align-items:center;
+}
+
+.donate-text a {
+  color:#039;
+  font-weight:bold;
+}
+
+.donate-text a i {
+  font-size:12px;
+  font-weight:normal;
+  vertical-align:super;
+  margin-left:-3px;
+}
+
+.info-box {
+  color:#333;
+  background:#EFF;
+  border:1px solid #17A;
+  position:relative;
+  padding:5px;
+  padding-left:35px;
+  margin:5px auto;
+  text-align:left;
+  width:80%;
+  max-width:600px;
+}
+
+.info-icon {
+  color:#EFF;
+  background:#17A;
+  font-size:20px;
+  width:30px;
+  text-align:center;
+  position:absolute;
+  top:0;
+  left:0;
+  bottom:0;
+  display:flex;
+  justify-content:center;
+  align-items:center;
+}
+
+
 /* related projects */
 #project-list img {
   height:120px;

resources/javascript/genki.js

@@ -1419,7 +1419,12 @@
                   '<div title="Stops this popup from showing every 10 exercises.\nYou can re-enable the data backup reminder via the settings manager.">'+
                     '<input id="modal-data-backup-reminder" class="genki_input_hidden" type="checkbox" onchange="localStorage.dataBackupReminder = this.checked == true ? false : true;">'+
                     '<span tabindex="0" class="genki_pseudo_checkbox" onclick="this.previousSibling.click();" onkeypress="event.key == \'Enter\' && this.previousSibling.click();"></span>'+
-                    '<label class="checkbox-label" for="modal-data-backup-reminder">Disable Data Backup Reminders</label>'+
+                    '<label class="checkbox-label" for="modal-data-backup-reminder">Disable Data Backup Reminders</label><br><br>'+
+
+                    '<div class="donate-box clear">'+
+                      '<div class="donate-icon"><i class="fa">&#xf004;</i></div>'+
+                      '<div class="donate-text">If Tobira Study Resources has helped you with your studies, please also consider <a href="' + getPaths() + 'donate/' + Genki.local + '" target="_blank">making a donation <i class="fa">&#xf08e;</i></a> if you can, to help support the continued development and maintenance of these resources. Your support is greatly appreciated!</div>'+
+                    '</div>'+
                   '</div>'+
                 '</div>',
                 zIndex : 'low',