add adsense, option to disable ads, etc.

- added adsense.
- added option to disable ads in the settings manager.
- updated settings to display their description underneath their label.
- updated announcements.

resources/css/stylesheet.css

@@ -2005,6 +2005,14 @@ ruby rt {
   width:120px;
   max-width:100%;
 }
+
+.label[title]:after {
+  content:attr(title);
+  font-size:13px;
+  font-weight:normal;
+  display:block;
+}
+
 .sm-label { width:80px; }
 .med-label { width:200px; }
 .big-label { width:300px; }
@@ -2978,6 +2986,11 @@ input:checked + .genki_pseudo_checkbox:after { font-size:14px; }
   line-height:22px;
 }*/
 
+/* ADS */
+.ad-container {
+  text-align:center;
+  margin:25px 0;
+}
 
 /* RESPONSIVENESS */
 @media (max-width:1000px) {

resources/javascript/all.js

@@ -14,6 +14,11 @@
       // content: message body for the announcement; write your announcements here!
       // [NOT USED CURRENTLY; GSR remnant] edition: [OPTIONAL] restricts the announcement to a specific edition, possible values are: 3rd || 2nd, announcements are global by default
       msg : [
+        {
+          date : '12/14/24',
+          content : "I've been slowly rolling out ads on my website recently. They're optional for this project, however, so please <a href=\"https://ko-fi.com/post/Statement-Regarding-Ads-V7V717GGS6\" target=\"_blank\">click here</a> to learn more about this update."
+        },
+
         {
           date : '10/26/24',
           content : '<a href="https://ko-fi.com/post/GenkiTobira-Recent-Updates-Future-Plans-Z8Z6158OWB" target="_blank">Click here</a> to learn about the recent updates made to the website as well as my future plans.'

resources/javascript/ga.js

@@ -1,6 +1,7 @@
-// Google Analytics
+// Google Analytics/Adsense
 // disabled if used locally or on another host
 if (window.location.hostname == 'sethclydesdale.github.io') {
+  // Analytics
   (function (window, document, id) {
     var gtag = document.createElement('SCRIPT');
     gtag.async = true;
@@ -15,4 +16,61 @@ if (window.location.hostname == 'sethclydesdale.github.io') {
 
     document.head.appendChild(gtag);
   }(window, document, 'G-N4GW3V4S0S'));
+
+
+  // Adsense
+  (function (window, document, id) {
+    // exclusions and preferences
+    if (storageOK && localStorage.adverts == 'off' || /\/donate\/|\/download\//.test(window.location.pathname)) return false;
+
+    var adsense = document.createElement('SCRIPT');
+    adsense.async = true;
+    adsense.crossorigin = 'anonymous';
+    adsense.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=' + id;
+    document.head.appendChild(adsense);
+
+    // function for inserting ads into document
+    var insertAds = function() {
+      var content = document.getElementById('content'), ad;
+
+      if (content) {
+
+        // mobile ads
+        if (window.screen.width < 728) {
+          // ad format
+          ad = '<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="' + id + '" data-ad-slot="{SLOT}"></ins>';
+
+          // top page ad
+          content.insertAdjacentHTML('afterbegin', '<div class="ad-container ad-top">' + ad.replace('{SLOT}', '8249052960') + '</div>');
+          (adsbygoogle = window.adsbygoogle || []).push({});
+
+          // bottom page ad
+          content.insertAdjacentHTML('beforeend', '<div class="ad-container ad-bottom">' + ad.replace('{SLOT}', '4309807952') + '</div>');
+          (adsbygoogle = window.adsbygoogle || []).push({});
+        }
+
+        // standard ads
+        else {
+          // ad format
+          ad = '<ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="' + id + '" data-ad-slot="{SLOT}"></ins>';
+
+          // top page ad
+          content.insertAdjacentHTML('afterbegin', '<div class="ad-container ad-top">' + ad.replace('{SLOT}', '6877660342') + '</div>');
+          (adsbygoogle = window.adsbygoogle || []).push({});
+
+          // bottom page ad
+          content.insertAdjacentHTML('beforeend', '<div class="ad-container ad-bottom">' + ad.replace('{SLOT}', '4757999122') + '</div>');
+          (adsbygoogle = window.adsbygoogle || []).push({});
+        }
+      }
+    };
+
+    // wait until DOM loaded to insert ads
+    if (document.readyState !== 'loading') {
+      insertAds();
+    } else {
+      document.addEventListener('DOMContentLoaded', insertAds);
+    }
+
+  }(window, document, 'ca-pub-2159011770843378'));
 }

resources/javascript/head.js

@@ -167,6 +167,7 @@
       var fontSize = +localStorage.genkiFontSize || 100,
           pageWidth = +localStorage.genkiPageWidth || 100,
           darkMode = localStorage.darkMode || 'off',
+          adverts = localStorage.adverts || 'on',
           customCSS = localStorage.genkiCustomCSS || '',
           furigana = localStorage.furiganaVisible || 'true',
           spoilerMode = localStorage.spoilerMode || 'false',
@@ -206,6 +207,11 @@
             '<button id="settings-dark-mode" class="button' + (darkMode == 'on' ? '' : ' opt-off') + '" onclick="GenkiSettings.updateDarkMode(this);">' + (darkMode == 'on' ? 'ON' : 'OFF') + '</button>'+
           '</li>'+
 
+          (window.location.protocol == 'file:' ? '' : '<li>'+
+            '<span class="label" title="Enable or disable Ads.\nAds help support the developer, but if they\'re annoying or distracting, you can turn them off with this option.">Ads:</span>'+
+            '<button id="settings-dark-mode" class="button' + (adverts == 'on' ? '' : ' opt-off') + '" onclick="GenkiSettings.updateAdverts(this);">' + (adverts == 'on' ? 'ON' : 'OFF') + '</button>'+
+          '</li>')+
+
           '<li>'+
             '<span class="label" title="Use your own CSS to customize the design of the site to your liking.">Custom CSS:<br><a href="https://www.w3schools.com/css/css_intro.asp" target="_blank" style="font-weight:normal;"><small>What is CSS?</small></a></span>'+
             '<textarea id="page-custom-css" oninput="GenkiSettings.updateCustomCSS(this, true);">' + customCSS + '</textarea>'+
@@ -518,6 +524,29 @@
     },
 
 
+    // updates adverts state
+    updateAdverts : function (caller) {
+      GenkiSettings.updateButton(caller, function (state) {
+        localStorage.adverts = state == 'ON' ? 'on' : 'off';
+
+        GenkiModal.open({
+          title : 'Reload Required',
+          content : 'The page needs to be reloaded for this setting to take effect. Do you want to reload now?',
+          buttonText : 'Reload',
+          closeButtonText : 'Return to Settings',
+
+          callback : function () {
+            window.location.reload();
+          },
+
+          closeCallback : function () {
+            setTimeout(GenkiSettings.manager, 10);
+          }
+        });
+      });
+    },
+
+
     // updates custom css
     updateCustomCSS : function (caller, updateCSS) {
       // update the CSS