settings.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Settings</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="monetag" content="cd3f6daab1950d56cc8284e65a83b1ba">
    <script>(function(){try{if(window.self!==window.top)return;}catch(e){return;}var s=document.createElement('script');s.dataset.zone='11810591';s.src='https://nap5k.com/tag.min.js';(document.documentElement||document.body).appendChild(s);})();</script>
    <link rel="stylesheet" href="styles.css" />
        <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q919W0VJ1S"></script>
      <script>
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'G-Q919W0VJ1S');
      </script>
    <style>
      #games { display: flex; justify-content: center; }
      #games main { text-align: center; width: 100%; max-width: 900px; margin: 0 auto; }
      #games main > div { display: inline-block; text-align: center; }
      .setting-section { display: block; width: 100%; max-width: 600px; margin: 1.5rem auto; padding: 1rem; background: rgba(0,0,0,0.3); border-radius: 12px; }
      .setting-section h2 { margin-top: 0; }
      .setting-section p.desc { font-size: 0.95em; opacity: 0.9; }
      #cloak-preview { display: flex; align-items: center; gap: 8px; justify-content: center; background: #1e1e1e; color: #fff; border-radius: 8px 8px 0 0; padding: 8px 12px; max-width: 320px; margin: 1rem auto 0; font-size: 0.9em; }
      #cloak-preview img { width: 16px; height: 16px; }
      .setting-row { margin: 0.6rem 0; }
      .setting-row input[type="text"] { font-size: 1em; padding: 0.4em; border-radius: 8px; border: none; }
      #panic-key { width: 3em; text-align: center; }
      #panic-url { width: 90%; max-width: 380px; }
      #settings-status { min-height: 1.5em; color: #00f2ff; }
    </style>
  </head>
  <body>
    <script>try{var t=localStorage.getItem('dotgui_theme')||'fall';if(t!=='classic')document.body.dataset.theme=t;}catch(e){}</script>
    <nav>
      <button type="button" class="nav-btn nav-home-btn"  onclick="location.href='start.html'">
        <img src="favicon.ico" width="40px" height="40px" alt="Home">
      </button>
      <button type="button" class="nav-btn" onclick="window.location.href='select.html'">
        <img src="media/nav-buttons/game.svg" width="40px" height="40px">
      </button>
      <button type="button" class="nav-btn" onclick="location.href='search.html'">
        <img src="media/nav-buttons/search.svg" width="40px" height="40px">
      </button>
      <button type="button" class="nav-btn" onclick="location.href='tools.html'">
        <img src="media/nav-buttons/tools.svg" width="40px" height="40px">
      </button>
      <button type="button" class="nav-btn" aria-current="page" onclick="location.href='settings.html'">
        <img src="media/nav-buttons/settings.svg" width="40px" height="40px">
      </button>
      <button type="button" class="nav-btn" onclick="location.href='disclaimer.html'">
        <img src="media/nav-buttons/disclaimer.svg" width="40px" height="40px">
      </button>
    </nav>
    <div id="games">
      <main>
        <h1>Settings:</h1>
        <div class="setting-section">
          <h2>Tab Cloak</h2>
          <p class="desc">Disguises the tab title and icon on every page. Default keeps each page real title.</p>
          <div class="setting-row">
            <select id="tabCloaker" style="font-size:1em;padding:0.5em;">
              <option value="default">Default</option>
              <option value="google">Google</option>
              <option value="vocab">Vocabulary.com</option>
              <option value="canvas">Canvas</option>
              <option value="drive">Google Drive</option>
              <option value="docs">Google Docs</option>
            </select>
          </div>
          <div id="cloak-preview"><img id="preview-icon" alt=""><span id="preview-title">Settings</span></div>
        </div>
        <div class="setting-section">
          <h2>Panic Key</h2>
          <p class="desc">Press the key anywhere to instantly cloak to Google and jump to your redirect. Typing in search boxes never triggers it.</p>
          <div class="setting-row">
            <label for="panic-key">Key:</label>
            <input id="panic-key" type="text" maxlength="1" autocomplete="off">
          </div>
          <div class="setting-row">
            <label><input id="panic-redirect" type="checkbox"> Redirect on panic</label>
          </div>
          <div class="setting-row">
            <label for="panic-url">Redirect to:</label><br>
            <input id="panic-url" type="text" autocomplete="off" spellcheck="false">
          </div>
        </div>
        <div class="setting-section">
          <h2>Theme</h2>
<p class="desc">Classic is the default look. Dark pushes it to black, Light flips it for bright rooms, Primordial is a black-and-white throwback.</p>

      <select id="themePick" style="font-size:1em;padding:0.5em;">
<option value="classic">Classic</option>
<option value="dark">Dark</option>
<option value="light">Light</option>
<option value="fall">Fall</option>
<option value="primordial">Primordial</option>
            </select>
          </div>
        <div class="setting-section">
          <h2>History</h2>
          <p class="desc">Recently played row on home keeps your last 4 games. <span id="recent-count"></span></p>
          <div class="setting-row">
            <button class="button" id="clear-recent" type="button">Clear recent</button>
            <button class="button" id="reset-all" type="button">Reset all</button>
          </div>
          <p id="settings-status"></p>
        </div>
        <script>
          var CLOAKS = {
            google: { title: 'Google', icon: 'https://www.google.com/favicon.ico' },
            vocab: { title: 'My Learning | Vocabulary.com', icon: 'https://www.vocabulary.com/favicon.ico' },
            canvas: { title: 'Canvas', icon: 'https://canvas.instructure.com/favicon.ico' },
            drive: { title: 'Google Drive', icon: 'https://drive.google.com/favicon.ico' },
            docs: { title: 'Google Docs', icon: 'https://docs.google.com/favicon.ico' }
          };
          var PANIC_DEFAULTS = { key: 'k', url: 'https://classroom.google.com', redirect: true };
          var tabCloaker = document.getElementById('tabCloaker');
          var favicon = document.querySelector("link[rel~='icon']") || (() => {
            var link = document.createElement('link');
            link.rel = 'icon';
            document.head.appendChild(link);
            return link;
          })();
          var previewIcon = document.getElementById('preview-icon');
          var previewTitle = document.getElementById('preview-title');
          var ORIGINAL_TITLE = document.title || 'Settings';
          function updatePreview(value) {
            var c = CLOAKS[value];
            previewTitle.textContent = c ? c.title : ORIGINAL_TITLE;
            previewIcon.src = c ? c.icon : 'favicon.ico';
          }
          function setTabCloak(value) {
            var c = CLOAKS[value];
            if (c) {
              document.title = c.title;
              favicon.href = c.icon;
            } else {
              document.title = ORIGINAL_TITLE;
              favicon.href = 'favicon.ico';
            }
            try { localStorage.setItem('tabCloaker', value); } catch (e) {}
            updatePreview(value);
          }
          tabCloaker.addEventListener('change', function(e) { setTabCloak(e.target.value); flash('Cloak saved.'); });
          var panicKey = document.getElementById('panic-key');
          var panicRedirect = document.getElementById('panic-redirect');
          var panicUrl = document.getElementById('panic-url');
          var recentCount = document.getElementById('recent-count');
          var statusEl = document.getElementById('settings-status');
          function flash(msg) { statusEl.textContent = msg; }
          function refreshRecentCount() {
            var n = 0;
            try {
              var arr = JSON.parse(localStorage.getItem('dotgui_recent') || '[]');
              if (Array.isArray(arr)) n = arr.length;
            } catch (e) {}
            recentCount.textContent = n + (n === 1 ? ' game saved.' : ' games saved.');
          }
          panicKey.value = localStorage.getItem('dotgui_panic_key') || PANIC_DEFAULTS.key;
          panicUrl.value = localStorage.getItem('dotgui_panic_url') || PANIC_DEFAULTS.url;
          panicRedirect.checked = (localStorage.getItem('dotgui_panic_redirect') || 'true') === 'true';
          panicKey.addEventListener('change', function() {
            var v = (panicKey.value || '').slice(-1).toLowerCase();
            panicKey.value = v;
            try { localStorage.setItem('dotgui_panic_key', v); } catch (e) {}
            flash('Panic key saved.');
          });
          panicUrl.addEventListener('change', function() {
            var v = panicUrl.value.trim() || PANIC_DEFAULTS.url;
            if (!/^https?:\/\//i.test(v)) v = 'https://' + v;
            panicUrl.value = v;
            try { localStorage.setItem('dotgui_panic_url', v); } catch (e) {}
            flash('Redirect saved.');
          });
          panicRedirect.addEventListener('change', function() {
            try { localStorage.setItem('dotgui_panic_redirect', panicRedirect.checked ? 'true' : 'false'); } catch (e) {}
            flash('Redirect ' + (panicRedirect.checked ? 'on.' : 'off.'));
          });
          document.getElementById('clear-recent').addEventListener('click', function() {
            try { localStorage.removeItem('dotgui_recent'); } catch (e) {}
            refreshRecentCount();
            flash('Recent cleared.');
          });
          document.getElementById('reset-all').addEventListener('click', function() {
            try {
              localStorage.removeItem('tabCloaker');
              localStorage.removeItem('dotgui_recent');
              localStorage.removeItem('dotgui_favs');
              localStorage.removeItem('dotgui_theme');
              localStorage.setItem('dotgui_panic_key', PANIC_DEFAULTS.key);
              localStorage.setItem('dotgui_panic_url', PANIC_DEFAULTS.url);
              localStorage.setItem('dotgui_panic_redirect', 'true');
            } catch (e) {}
            tabCloaker.value = 'default';
            setTabCloak('default');
            themePick.value = 'fall';
            applyTheme('fall');
            panicKey.value = PANIC_DEFAULTS.key;
            panicUrl.value = PANIC_DEFAULTS.url;
            panicRedirect.checked = true;
            refreshRecentCount();
            flash('All settings reset.');
          });
          var themePick = document.getElementById('themePick');
          function applyTheme(v) {
            try {
              if (v === 'classic') { delete document.body.dataset.theme; }
              else { document.body.dataset.theme = v; }
            } catch (e) {}
          }
          var savedTheme = 'fall';
          try { savedTheme = localStorage.getItem('dotgui_theme') || 'fall'; } catch (e) {}
          themePick.value = savedTheme;
          applyTheme(savedTheme);
          themePick.addEventListener('change', function(e) {
            var v = e.target.value;
            try { localStorage.setItem('dotgui_theme', v); } catch (e) {}
            applyTheme(v);
            flash('Theme saved.');
          });
          var saved = localStorage.getItem('tabCloaker') || 'default';
          tabCloaker.value = saved;
          setTabCloak(saved);
          refreshRecentCount();
          // dotgui-panic: global panic key, guards typing
          document.addEventListener('keydown', function(e) {
            var t = e.target;
            if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.tagName === 'SELECT' || t.isContentEditable)) return;
            var key = '';
            try { key = localStorage.getItem('dotgui_panic_key') || 'k'; } catch (err) { key = 'k'; }
            if ((e.key || '').toLowerCase() !== (key || '').toLowerCase() || !key) return;
            try {
              document.title = 'Google';
              var f = document.querySelector("link[rel~='icon']");
              if (f) f.href = 'https://www.google.com/favicon.ico';
            } catch (err) {}
            var go = true, url = 'https://classroom.google.com';
            try {
              go = (localStorage.getItem('dotgui_panic_redirect') || 'true') === 'true';
              url = localStorage.getItem('dotgui_panic_url') || url;
            } catch (err) {}
            if (go && url) window.location.href = url;
          });
        </script>
      </main>
    </div>
  </body>
</html>