index.html

<!DOCTYPE html>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex" />
<title>~</title>
</head>
<style>
  @import url(https://fonts.googleapis.com/css2?family=Space+Grotesk&display=swap);
</style>
<script>
  const CONFIG = {
    /**
     * Action to take when the clock is clicked. Options include:
     *
     * - "Help" to show the help menu
     * - "Search" to show the search input (useful on mobile)
     */
    clockOnClickAction: 'Help',

    /**
     * The delimiter between the hours, minutes and seconds on the clock.
     */
    clockDelimiter: ' : ',// Those are thin spaces: U+2009

    /**
     * Show seconds on the clock. A monospaced font is recommended for this.
     */
    clockShowSeconds: true,

    /**
     * Show AM/PM indication when CONFIG.clockTwentyFourHours is false.
     */
    clockShowAmPm: true,

    /**
     * Show a twenty-four-hour clock instead of a twelve-hour clock.
     */
    clockTwentyFourHour: true,

    /**
     * Force an IANA timezone. Useful when attempting to prevent browser
     * fingerprinting. For example, "America/Los_Angeles" would force Pacific
     * Time, "Asia/Kolkata" would force Indian Standard Time, etc. Read:
     *
     * https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
     */
    clockTimeZone: "Europe/Podgorica",

    /**
     * Type this to toggle the help menu.
     */
    helpKey: '?',

    /**
     * Instantly redirect when a key is matched. Put a space before any other
     * queries to prevent unwanted redirects.
     */
    queryInstantRedirect: false,

    /**
     * Open triggered queries in a new tab.
     */
    queryNewTab: false,

    /**
     * The delimiter between a command key and a path. For example, you'd type
     * "r/r/unixporn" to go to "https://reddit.com/r/unixporn".
     */
    queryPathDelimiter: '/',

    /**
     * The delimiter between a command key and your search query. For example,
     * to search GitHub for tilde, you'd type "g'tilde".
     */
    querySearchDelimiter: "'",

    /**
     * Scripts allow you to open or search multiple sites at once. For example,
     * to search Google, Bing, DuckDuckGo, Ecosia and Yahoo for cats at the same
     * time, you'd type "q'cats".
     */
    scripts: {
      q: ['bing', 'yah', 'eco', 'ddg', '*'],
      d: ['ddg', '*'],
    },

    /**
     * The order, limit and minimum characters for each suggestion influencer.
     *
     * An "influencer" is just a suggestion source. "limit" is the max number of
     * suggestions an influencer will produce. "minChars" determines how many
     * characters need to be typed before the influencer kicks in.
     *
     * The following influencers are available:
     *
     * - "Default" suggestions come from CONFIG.suggestionDefaults (sync)
     * - "History" suggestions come from your previously entered queries (sync)
     * - "DuckDuckGo" suggestions come from the DuckDuckGo search API (async)
     *
     * To disable suggestions, remove all influencers.
     */
    suggestionInfluencers: [
      { name: 'Default', limit: 4 },
      { name: 'History', limit: 4, minChars: 2 },
      { name: 'DuckDuckGo', limit: 4, minChars: 2 },
    ],

    /**
     * Max number of suggestions that will ever be shown.
     */
    suggestionLimit: 5,

    /**
     * Default search suggestions for the specified queries.
     */
    suggestionDefaults: {
      0: ["0'8000", "0'8080"],
      g: ['g/Syycorax',],
    },

    /**
     * The name, key, url, search path and color for your commands. If none of
     * the specified keys are matched, the * key is used. Commands without a
     * name don't show up in the help menu.
     *
     * "hues" is an array of HSL hues that will be converted into a linear
     * gradient. CSS variables are defined defined below, prefixed with
     * --command-color-, that determine the gradient angle, saturation,
     * lightness and alpha for each generated color.
     *
     * "color", if defined, will be applied to the command as-is.
     */
    commands: [
      {
        hues: ['197', '44'],
        key: "a",
        name: "adh6",
        url: "https://adh6.minet.net"
      },
      {
        hues: ['0', '0'],
        key: 'x',
        name: 'Netflix',
        search: '/search?q={}',
        url: 'https://www.netflix.com/browse',
      },
      {
        hues: ['5', '345'],
        key: 'y',
        name: 'YouTube',
        search: '/results?search_query={}',
        url: 'https://youtube.com/',
      },
      {
        hues: ['355', '335'],
        key: '=',
        name: 'Wolfram',
        search: '/input/?i={}',
        url: 'https://wolfree.pages.dev/input/',
      },
      {
        hues: ["266", "286"],
        key: "f",
        name: "Figma",
        url: "https://www.figma.com/files/recent"
      }, {
        hues: ["230", "280"],
        key: "i",
        name: "Instagram",
        url: "https://www.instagram.com"
      },
      {
        hues: ['264', '244'],
        key: 'v',
        name: 'Twitch',
        url: 'https://www.twitch.tv/',
      },
      {
        hues: ['20', '16'],
        key: 'r',
        name: 'Reddit',
        search: '/search?q={}',
        url: 'https://www.reddit.com',
      },
      {
        hues: ['217', '237'],
        key: 'w',
        name: 'Wikipedia',
        search: '/wiki/{}',
        url: 'https://fr.wikipedia.org/',
      },
      {
        hues: ['220'],
        key: 'g',
        name: 'GitHub',
        search: '/search?q={}',
        url: 'https://github.com',
      },
      {
        hues: ['217', '197'],
        key: 'p',
        name: 'protonmail',
        search: '/u/0/all-mail#keyword={}',
        url: 'https://mail.proton.me/u/0/inbox',
      },
      {
        hues: ['201', '221'],
        key: 'l',
        name: 'linkedin',
        url: 'https://linkedin.com/',
      },
      {
        hues: ['198', '218'],
        key: ';',
        name: 'MDN',
        search: '/en-US/search?q={}',
        url: 'https://developer.mozilla.org/en-US',
      },
      {
        hues: ['217', '5'],
        key: 'm',
        name: 'Gmail',
        search: 'mail/u/0/#search/{}',
        url: 'https://mail.google.com/mail/u/0/#inbox',
      },
      {
        hues: ['203', '183'],
        key: 't',
        name: 'twitter',
        url: 'https://twitter.com/home',
      },
      {
        hues: ["217", "183"],
        key: "s",
        name: "Snapdrop",
        url: "https://snapdrop.net"
      },
      {
        hues: ['13', '33'],
        key: 'h',
        name: 'Hunt',
        search: '/search?q={}',
        url: 'https://www.producthunt.com',
      },
      {
        hues: ['4', '24'],
        key: 'n',
        name: 'Notion',
        url: 'https://www.notion.so',
      },
      {
        color: 'var(--base-background)',
        key: '*',
        search: '/search?q={}',
        url: 'https://www.google.com',
      },
      {
        color: 'var(--base-background)',
        key: 'ddg',
        search: '/?q={}',
        url: 'https://duckduckgo.com',
      },
      {
        key: '0',
        name: 'Local',
        url: 'http://localhost:3000',
      },
      {
        hues: ["120.56"],
        key: "o",
        name: "Overleaf",
        url: "https://overleaf.com/project"
      },
      {
        hues: ["164.32"],
        key: "c",
        name: "ChatGPT",
        url: "https://chat.openai.com/"
      },
      {
        hues: ['180', '300'],
        key: "e",
        name: "Ecampus",
        url: "https://ecampus.imtbs-tsp.eu"
      },

    ].map((command) => {
      const hsla = (hue, saturation = 'var(--command-color-saturation)') =>
        `hsla(${hue}, ${saturation}, var(--command-color-lightness), var(--command-color-alpha))`;

      if (command.color) {
        return command;
      } else if (!Array.isArray(command.hues) || !command.hues.length) {
        command.color = hsla(0, '0%');
      } else if (command.hues.length === 1) {
        command.color = hsla(command.hues[0]);
      } else {
        const c = command.hues.reduce((a, h) => `${a}, ${hsla(h)}`, '');
        command.color = `linear-gradient(var(--command-color-gradient) ${c})`;
      }

      return command;
    }),
  };
</script>

<style>
  :root {
    font-variant-numeric: tabular-nums;
    --base-background: #000;
    --base-border-radius: 4px;
    --base-font-family: 'Space Grotesk', sans-serif;
    --base-font-size: 17px;
    --base-font-weight-black: 900;
    --base-font-weight-bold: 700;
    --base-font-weight-normal: 400;
    --base-foreground: #fff;
    --clock-font-size: 8rem;
    --command-background: #222;
    --command-color-alpha: 1;
    --command-color-gradient: 135deg;
    --command-color-lightness: 50%;
    --command-color-saturation: 40%;
    --command-foreground: var(--base-foreground);
    --command-height: 4rem;
    --command-padding: calc(var(--command-height) / 2 - 1ch / 2);
    --help-grid-columns: 1;
    --help-grid-gap: 1rem;
    --help-overlay-background: var(--base-background);
    --help-overlay-foreground: var(--base-foreground);
    --search-input-font-size: 2rem;
    --search-input-text-align: left;
    --search-overlay-background: var(--base-background);
    --search-overlay-foreground: var(--base-foreground);
    --suggestion-height: 3rem;
    --suggestion-highlight-background: var(--search-overlay-foreground);
    --suggestion-highlight-foreground: var(--search-overlay-background);
    --suggestion-padding: calc(var(--suggestion-height) / 2 - 1ch / 2);
    --suggestions-flex-direction: column;
  }

  @media (min-width: 600px) {
    :root {
      --clock-font-size: 5rem;
      --help-grid-columns: 2;
    }
  }

  @media (min-width: 900px) {
    :root {
      --clock-font-size: 8rem;
      --help-grid-columns: 3;
      --search-input-font-size: 3rem;
      --suggestions-flex-direction: row;
    }
  }

  @media (min-width: 1400px) {
    :root {
      --help-grid-columns: 5;
    }
  }

  * {
    box-sizing: border-box;
  }

  html {
    font-family: 'Space Grotesk', sans-serif;
    font-size: var(--base-font-size);
    font-weight: var(--base-font-weight-normal)
  }

  body {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: var(--base-background);
    color: var(--base-foreground);
  }

  input,
  button {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    background: 0 0;
    color: inherit;
    font-family: var(--base-font-family);
    font-weight: var(--base-font-weight-normal);
    font-size: 1rem;
  }

  input,
  button,
  input:focus,
  button:focus {
    border: 0;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
  }

  ul,
  li {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  a,
  a:focus {
    color: inherit;
    outline: 0;
  }

  .center {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    gap: 6em;
    align-items: center
  }

  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
  }

  .clock {
    display: block;
    font-size: var(--clock-font-size);
    cursor: pointer;
    letter-spacing: -.25rem;
    font-weight: 600;
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
  }

  .help {
    background: var(--help-overlay-background);
    visibility: hidden;
    color: var(--help-overlay-foreground);
    z-index: 1;
  }

  body.help .help {
    visibility: visible;
  }

  body.form .help {
    visibility: hidden;
  }

  .command-list {
    display: grid;
    grid-gap: var(--help-grid-gap);
    grid-template-columns: repeat(var(--help-grid-columns), 1fr);
    padding: 6rem 0;
  }

  .command {
    display: flex;
    background-color: var(--command-background);
    border-radius: var(--base-border-radius);
    color: var(--command-foreground);
    opacity: 0.9;
    line-height: var(--command-height);
    text-decoration: none;
  }

  .command:hover {
    opacity: 1;
  }

  .command:hover .command-key {
    background: 0 0
  }

  .command-key {
    width: var(--command-height);
    border-radius: var(--base-border-radius);
    font-weight: var(--base-font-weight-bold);
    text-align: center;
  }

  .command-name {
    padding: 0 var(--command-padding);
  }

  .search-form {
    background: var(--search-overlay-background);
    color: var(--search-overlay-foreground);
    visibility: hidden;
  }

  body.form .search-form {
    visibility: visible;
  }

  .search-form-content {
    width: 100%;
  }

  .search-input {
    width: 100%;
    font-size: var(--search-input-font-size);
    font-weight: var(--base-font-weight-black);
    text-align: center;
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
  }

  .search-suggestions {
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: var(--suggestions-flex-direction);
    flex-wrap: wrap;
    margin-top: 2rem;
    overflow: hidden;
  }

  body.suggestions .search-suggestions {
    display: flex;
  }

  .search-suggestion {
    border-radius: var(--base-border-radius);
    cursor: pointer;
    font-weight: var(--base-font-weight-bold);
    height: var(--suggestion-height);
    padding: 0 var(--suggestion-padding);
    white-space: nowrap;
  }

  .search-suggestion.highlight {
    background: var(--suggestion-highlight-background);
    color: var(--suggestion-highlight-foreground);
  }

  .search-suggestion-match {
    font-weight: var(--base-font-weight-normal)
  }

  .timer_button {
    color: var(--base-background);
    background: var(--base-foreground);
    border-radius: 50px;
    border: 1px solid var(--base-foreground);
    width: 180px;
    height: 48px;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    margin: 0;
    position: absolute;
    top: 70%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
  }

  .timer_button:hover {
    color: var(--base-foreground);
    background: var(--base-background);
    border: 1px solid var(--base-foreground);
    border-radius: 50px;
    width: 180px;
    height: 48px;
    cursor: pointer
  }
</style>
<html>

<body>
  <div class=center><time class=clock id=clock></time><time class=clock id=timer style=display:none>00:00</time><button
      class=timer_button id=timer_button>Start Pomo</button></div>
  <form autocomplete=off class="center overlay search-form" id=search-form spellcheck=false>
    <div class=search-form-content>
      <input class=search-input id=search-input title=search>
      <ul class=search-suggestions id=search-suggestions>
    </div>
  </form>
  <aside class="center help overlay" id=help>
</body>

</html>
<script>
  var holding, stop_timeout;
  let work = 25,
    breakTime = 5,
    holdTrig = 0,
    isWork = !0,
    // This might be the dumbest way to do this, but it works.
    colors = ["#000000", "#100000", "#200000", "#300000", "#400000", "#500000", "#600000", "#700000", "#800000", "#900000", "#A00000", "#B00000", "#C00000", "#D00000", "#E00000", "#F00000", "#FF0000"],
    letters = ["     ", "     ", "     ", "S    ", "S    ", "S    ", "St   ", "St   ", "St   ", "Sto  ", "Sto  ", "Sto  ", "Stop ", "Stop ", "Stop ", "Stop?", "Stop?"];
  flag = !1;
  var timer_button = document.getElementById("timer_button"),
    timer = document.getElementById("timer");
  let timerInterval;

  function stop_button() {
    timer_button.innerHTML = "Stop?", timer_button.style.color = "white", timer_button.style.backgroundColor = "red", timer_button.style.border = "1px solid red", holdTrig = 0
  }

  function holdStart() {
    "Resume" != timer_button.innerHTML && "Start Pomo" != timer_button.innerHTML && "Stop" != timer_button.innerHTML && (holding = setInterval((function () {
      holdTrig < colors.length && ("Pause" == timer_button.innerHTML || letters.includes(timer_button.innerHTML)) ? (timer_button.style.backgroundColor = colors[holdTrig], timer_button.innerHTML = letters[holdTrig], holdTrig++) : clearInterval(holding)
    }), 100), stop_timeout = setTimeout((function () {
      stop_button(), timer_button.addEventListener("click", (function (t) {
        t.stopPropagation()
      }))
    }), 3e3))
  }

  function holdEnd() {
    clearTimeout(stop_timeout), clearInterval(holding), letters.includes(timer_button.innerHTML) && "Stop?" != timer_button.innerHTML && (timer_button.innerHTML = "Pause", timer_button.style.color = "white", timer_button.style.backgroundColor = "black", timer_button.style.border = "1px solid white", holdTrig = 0)
  }

  function back_to_clock() {
    location.reload()
  }

  function timer_manager() {
    timerInterval = setInterval((function () {
      if (console.log("timer manager"), seconds = parseInt(timer.innerHTML.split(":")[1]), minutes = parseInt(timer.innerHTML.split(":")[0]), 0 == seconds) {
        if (0 == minutes) return isWork = !isWork, isWork ? (timer.innerHTML = work + ":00", document.body.style.backgroundImage = none, document.body.style.backgroundColor = "#000000") : (document.body.style.backgroundImage = "url(https://images.unsplash.com/photo-1515705576963-95cad62945b6)", document.body.style.backgroundSize = "cover", timer.innerHTML = breakTime + ":00"), void new Audio("https://cdn.pixabay.com/download/audio/2023/05/30/audio_870bea9c71.mp3").play();
        minutes--, seconds = 59
      } else seconds--;
      seconds = seconds < 10 ? "0" + seconds : seconds, minutes = minutes < 10 ? "0" + minutes : minutes, timer.innerHTML = minutes + ":" + seconds
    }), 1e3)
  }

  function start_timer() {
    timer_button.innerHTML = "Pause", timer_button.style.color = "white", timer_button.style.backgroundColor = "black", timer_button.style.border = "1px solid white", document.getElementById("clock").style.display = "none", timer.innerHTML = work + ":00", timer.style.display = "block", console.log("start timer"), timer_manager()
  }

  function resume() {
    timer_manager(), color = 0, holdTrig = 0, timer_button.innerHTML = "Pause", timer_button.style.color = "white", timer_button.style.backgroundColor = "black", timer_button.style.border = "1px solid white"
  }

  function pause() {
    clearInterval(timerInterval), timer_button.innerHTML = "Resume", timer_button.style.color = "black", timer_button.style.backgroundColor = "white", timer_button.style.border = "1px solid black", timer_button.addEventListener("mousedown", holdStart), timer_button.addEventListener("mouseup", holdEnd)
  }

  function stopTimer() {
    back_to_clock()
  }
  timer_button.onclick = function () {
    "Start Pomo" == timer_button.innerHTML ? start_timer() : "Resume" == timer_button.innerHTML ? resume() : "Pause" == timer_button.innerHTML ? pause() : "Stop?" == timer_button.innerHTML && (console.log(flag), 1 == flag ? back_to_clock() : flag = !0)
  }, timer_button.addEventListener("mousedown", holdStart), timer_button.addEventListener("mouseup", holdEnd)
</script>
<script>
  const $ = {
    bodyClassAdd: (c) => $.el('body').classList.add(c),
    bodyClassRemove: (c) => $.el('body').classList.remove(c),
    el: (s) => document.querySelector(s),
    els: (s) => [].slice.call(document.querySelectorAll(s) || []),
    escapeRegex: (s) => s?.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'),
    flattenAndUnique: (arr) => [...new Set([].concat.apply([], arr))],
    isDown: (e) => ['ctrl-n', 'down', 'tab'].includes($.whichKey(e)),
    isRemove: (e) => ['backspace', 'delete'].includes($.whichKey(e)),
    isUp: (e) => ['ctrl-p', 'up', 's-tab'].includes($.whichKey(e)),
    whichKey: (e) => {
      const ctrl = e.ctrlKey;
      const meta = e.metaKey;
      const shift = e.shiftKey;

      switch (e.which) {
        case 8:
          return 'backspace';
        case 9:
          return shift ? 's-tab' : 'tab';
        case 13:
          return 'enter';
        case 16:
          return 'shift';
        case 17:
          return 'ctrl';
        case 18:
          return 'alt';
        case 27:
          return 'escape';
        case 38:
          return 'up';
        case 40:
          return 'down';
        case 46:
          return 'delete';
        case 78:
          return ctrl ? 'ctrl-n' : 'n';
        case 80:
          return ctrl ? 'ctrl-p' : 'p';
        case 86:
          if (ctrl) return 'ctrl-v';
          if (meta) return 'ctrl-v';
          break;
        case 91:
        case 93:
        case 224:
          return 'meta';
      }

      if (ctrl) return 'ctrl-*';
      if (meta) return 'meta-*';
    },
  };

  class Clock {
    constructor(options) {
      this._el = $.el('#clock');
      this._amPm = options.amPm;
      this._delimiter = options.delimiter;
      this._showSeconds = options.showSeconds;
      this._timeZone = options.timeZone;
      this._twentyFourHour = options.twentyFourHour;
      this._setTime = this._setTime.bind(this);
      this._el.addEventListener('click', options.onClick);
      this._start();
    }

    _setTime() {
      const date = new Date();

      this._el.innerHTML = date
        .toLocaleString('en-US', {
          hour12: !this._twentyFourHour,
          hour: 'numeric',
          minute: 'numeric',
          second: this._showSeconds ? 'numeric' : undefined,
          timeZone: this._timeZone,
        })
        .replace(this._amPm ? '' : / (AM|PM)/, '')
        .replace(/:/g, this._delimiter)
        .replace(/^0/, '');

      this._el.setAttribute('datetime', date.toTimeString());
    }

    _start() {
      this._setTime();
      setInterval(this._setTime, 1000);
    }
  }

  class Help {
    constructor(options) {
      this._el = $.el('#help');
      this._commands = options.commands;
      this._newTab = options.newTab;
      this._toggled = false;
      this.toggle = this.toggle.bind(this);
      this._handleKeydown = this._handleKeydown.bind(this);
      this._buildCommands();
      this._registerEvents();
    }

    toggle(show) {
      this._toggled = typeof show !== 'undefined' ? show : !this._toggled;
      if (this._toggled) $.bodyClassAdd('help');
      else $.bodyClassRemove('help');
    }

    _buildCommands() {
      const list = document.createElement('ul');
      list.classList.add('command-list');

      list.insertAdjacentHTML(
        'beforeend',
        this._commands.reduce((acc, { color, name, key, url }, i) => {
          if (!name) return acc;
          const target = this._newTab ? '_blank' : '_self';

          return `
            ${acc}
            <style>
              .command-key-${i},
              .command-${i}:hover {
                background: ${color};
              }
            </style>
            <li>
              <a class="command command-${i}" href="${url}" target="${target}" rel="noopener noreferrer">
                <span class="command-key command-key-${i}">${key}</span>
                <span class="command-name">${name}</span>
              </a>
            </li>
          `;
        }, '')
      );

      this._el.appendChild(list);
    }

    _handleKeydown(e) {
      if ($.whichKey(e) === 'escape') this.toggle(false);
    }

    _registerEvents() {
      document.addEventListener('keydown', this._handleKeydown);
    }
  }

  class Influencer {
    constructor(options) {
      this._limit = options.limit;
      this._minChars = options.minChars;
    }

    addItem() {
      return undefined;
    }

    getSuggestions() {
      return Promise.resolve([]);
    }

    _addSearchPrefix(items, { isSearch, key, split }) {
      const searchPrefix = isSearch ? `${key}${split}` : false;
      return items.map((s) => (searchPrefix ? searchPrefix + s : s));
    }

    _isTooShort(query) {
      return query.length < this._minChars;
    }
  }

  class DefaultInfluencer extends Influencer {
    constructor({ suggestionDefaults }) {
      super(...arguments);
      this._suggestionDefaults = suggestionDefaults;
    }

    getSuggestions({ raw }) {
      return new Promise((resolve) =>
        resolve((this._suggestionDefaults[raw] || []).slice(0, this._limit))
      );
    }
  }

  class DuckDuckGoInfluencer extends Influencer {
    constructor() {
      super(...arguments);
    }

    getSuggestions(parsedQuery) {
      const { lower, query } = parsedQuery;
      if (this._isTooShort(query)) return Promise.resolve([]);

      return new Promise((resolve) => {
        window.autocompleteCallback = (res) =>
          resolve(
            this._addSearchPrefix(
              res
                .map((i) => i.phrase)
                .filter((s) => s.toLowerCase() !== lower)
                .slice(0, this._limit),
              parsedQuery
            )
          );

        const script = document.createElement('script');
        script.src = `https://duckduckgo.com/ac/?callback=autocompleteCallback&q=${query}`;
        $.el('head').appendChild(script);
      });
    }
  }

  class HistoryInfluencer extends Influencer {
    constructor() {
      super(...arguments);
      this._storeName = 'history';
    }

    addItem({ isPath, lower }) {
      if (isPath || this._isTooShort(lower)) return;
      let exists;

      const history = this._getHistory().map(([item, count]) => {
        const match = item === lower;
        if (match) exists = true;
        return [item, match ? count + 1 : count];
      });

      if (!exists) history.push([lower, 1]);
      this._setHistory(history.sort((a, b) => b[1] - a[1]));
    }

    getSuggestions(parsedQuery) {
      const { lower } = parsedQuery;
      if (this._isTooShort(lower)) return Promise.resolve([]);

      return new Promise((resolve) =>
        resolve(
          this._addSearchPrefix(
            this._getHistory()
              .filter(([item]) => item !== lower && item.includes(lower))
              .slice(0, this._limit)
              .map(([item]) => item),
            parsedQuery
          )
        )
      );
    }

    _getHistory() {
      this._history =
        this._history ||
        JSON.parse(localStorage.getItem(this._storeName)) ||
        [];

      return this._history;
    }

    _setHistory(history) {
      this._history = history;
      localStorage.setItem(this._storeName, JSON.stringify(history));
    }
  }

  class Suggester {
    constructor(options) {
      this._el = $.el('#search-suggestions');
      this._influencers = options.influencers;
      this._limit = options.limit;
      this._parsedQuery = '';
      this._highlightedSuggestion = null;
      this._suggestionEls = [];
      this._handleKeydown = this._handleKeydown.bind(this);
      this._setSuggestions = this._setSuggestions.bind(this);
      this._registerEvents();
    }

    setOnClick(callback) {
      this._onClick = callback;
    }

    setOnHighlight(callback) {
      this._onHighlight = callback;
    }

    setOnUnhighlight(callback) {
      this._onUnhighlight = callback;
    }

    success(parsedQuery) {
      this._influencers.forEach((i) => i.addItem(parsedQuery));
      this._clearSuggestions();
    }

    suggest(parsedQuery) {
      this._parsedQuery = parsedQuery;
      this._highlightedSuggestion = null;

      if (!parsedQuery.query) {
        this._clearSuggestions();
        return;
      }

      Promise.all(this._getInfluencers()).then(this._setSuggestions);
    }

    _buildSuggestionsHtml(suggestions) {
      return suggestions.slice(0, this._limit).reduce((acc, suggestion) => {
        const match = new RegExp($.escapeRegex(this._parsedQuery.query), 'i');
        const matched = suggestion.match(match);

        const suggestionHtml = matched
          ? suggestion.replace(
            match,
            `<span class="search-suggestion-match">${matched[0]}</span>`
          )
          : suggestion;

        return `
          ${acc}
          <li>
            <button
              type="button"
              class="js-search-suggestion search-suggestion"
              data-suggestion="${suggestion}"
              tabindex="-1"
            >
              ${suggestionHtml}
            </button>
          </li>
        `;
      }, '');
    }

    _clearSuggestionClickEvents() {
      this._suggestionEls.forEach((el) => {
        el.removeEventListener('click', this._onClick);
      });
    }

    _clearSuggestionHighlightEvents() {
      this._suggestionEls.forEach((el) => {
        el.removeEventListener('mouseover', this._highlight);
        el.removeEventListener('mouseout', this._unHighlight);
      });
    }

    _clearSuggestions() {
      $.bodyClassRemove('suggestions');
      this._clearSuggestionHighlightEvents();
      this._clearSuggestionClickEvents();
      this._el.innerHTML = '';
      this._highlightedSuggestion = null;
      this._suggestionEls = [];
    }

    _focusNext(e) {
      const exists = this._suggestionEls.some((el, i) => {
        if (el.classList.contains('highlight')) {
          this._highlight(this._suggestionEls[i + 1], e);
          return true;
        }
      });

      if (!exists) this._highlight(this._suggestionEls[0], e);
    }

    _focusPrevious(e) {
      const exists = this._suggestionEls.some((el, i) => {
        if (el.classList.contains('highlight') && i) {
          this._highlight(this._suggestionEls[i - 1], e);
          return true;
        }
      });

      if (!exists) this._unHighlight(e);
    }

    _getInfluencers() {
      return this._influencers.map((influencer) =>
        influencer.getSuggestions(this._parsedQuery)
      );
    }

    _handleKeydown(e) {
      if ($.isDown(e)) this._focusNext(e);
      if ($.isUp(e)) this._focusPrevious(e);
    }

    _highlight(el, e) {
      this._unHighlight();
      if (!el) return;
      this._highlightedSuggestion = el.getAttribute('data-suggestion');
      this._onHighlight(this._highlightedSuggestion);
      el.classList.add('highlight');
      if (e) e.preventDefault();
    }

    _registerEvents() {
      document.addEventListener('keydown', this._handleKeydown);
    }

    _registerSuggestionClickEvents() {
      this._suggestionEls.forEach((el) => {
        const value = el.getAttribute('data-suggestion');
        el.addEventListener('click', this._onClick.bind(null, value));
      });
    }

    _registerSuggestionHighlightEvents() {
      const noHighlightUntilMouseMove = () => {
        window.removeEventListener('mousemove', noHighlightUntilMouseMove);

        this._suggestionEls.forEach((el) => {
          el.addEventListener('mouseover', this._highlight.bind(this, el));
          el.addEventListener('mouseout', this._unHighlight.bind(this));
        });
      };

      window.addEventListener('mousemove', noHighlightUntilMouseMove);
    }

    _rehighlight() {
      if (!this._highlightedSuggestion) return;

      this._highlight(
        $.el(`[data-suggestion="${this._highlightedSuggestion}"]`)
      );
    }

    _setSuggestions(newSuggestions) {
      const suggestions = $.flattenAndUnique(newSuggestions);
      this._el.innerHTML = this._buildSuggestionsHtml(suggestions);
      this._suggestionEls = $.els('.js-search-suggestion');
      this._registerSuggestionHighlightEvents();
      this._registerSuggestionClickEvents();
      if (this._suggestionEls.length) $.bodyClassAdd('suggestions');
      this._rehighlight();
    }

    _unHighlight(e) {
      const el = $.el('.highlight');
      if (!el) return;
      this._onUnhighlight();
      el.classList.remove('highlight');
      if (e) e.preventDefault();
    }
  }

  class QueryParser {
    constructor(options) {
      this._commands = options.commands;
      this._searchDelimiter = options.searchDelimiter;
      this._pathDelimiter = options.pathDelimiter;
      this._scripts = options.scripts;
      this._protocolRegex = /^[a-zA-Z]+:\/\//i;
      this._urlRegex = /^((https?:\/\/)?[\w-]+(\.[\w-]+)+\.?(:\d+)?(\/\S*)?)$/i;
      this.parse = this.parse.bind(this);
    }

    parse(query) {
      const res = [];
      res.raw = query.trim();
      res.query = res.raw;
      res.lower = res.raw.toLowerCase();
      res.split = null;

      if (this._urlRegex.test(query)) {
        const hasProtocol = this._protocolRegex.test(query);
        res.redirect = hasProtocol ? query : 'http://' + query;
        res.color = QueryParser._getColorFromUrl(this._commands, res.redirect);
        return res;
      }

      const splitSearch = res.query.split(this._searchDelimiter);
      const splitPath = res.query.split(this._pathDelimiter);

      const isScript = Object.entries(this._scripts).some(([key, script]) => {
        if (query === key) {
          res.key = key;
          res.isKey = true;
          script.forEach((command) => res.push(this.parse(command)));
          return true;
        }

        if (splitSearch[0] === key) {
          res.key = key;
          res.isSearch = true;
          res.split = this._searchDelimiter;
          res.query = QueryParser._shiftAndTrim(splitSearch, res.split);

          script.forEach((command) =>
            res.push(this.parse(`${command}${res.split}${res.query}`))
          );

          return true;
        }

        if (splitPath[0] === key) {
          res.key = key;
          res.isPath = true;
          res.split = this._pathDelimiter;
          res.path = QueryParser._shiftAndTrim(splitPath, res.split);

          script.forEach((command) =>
            res.push(this.parse(`${command}${this._pathDelimiter}${res.path}`))
          );

          return true;
        }
      });

      if (isScript) return res;

      this._commands.some(({ key, search, url }) => {
        if (query === key) {
          res.key = key;
          res.isKey = true;
          res.redirect = url;
          return true;
        }

        if (splitSearch[0] === key) {
          res.key = key;
          res.isSearch = true;
          res.split = this._searchDelimiter;
          res.query = QueryParser._shiftAndTrim(splitSearch, res.split);
          res.redirect = QueryParser._prepSearch(url, search, res.query);
          return true;
        }

        if (splitPath[0] === key) {
          res.key = key;
          res.isPath = true;
          res.split = this._pathDelimiter;
          res.path = QueryParser._shiftAndTrim(splitPath, res.split);
          res.redirect = QueryParser._prepPath(url, res.path);
          return true;
        }

        if (key === '*') {
          res.redirect = QueryParser._prepSearch(url, search, query);
        }
      });

      res.color = QueryParser._getColorFromUrl(this._commands, res.redirect);
      return res;
    }

    static _getColorFromUrl(commands, url) {
      const domain = new URL(url).hostname;
      const domainRegex = new RegExp(`${domain}$`);

      return commands.find((c) => domainRegex.test(new URL(c.url).hostname))
        ?.color;
    }

    static _prepPath(url, path) {
      return QueryParser._stripUrlPath(url) + '/' + path;
    }

    static _prepSearch(url, searchPath, query) {
      if (!searchPath) return url;
      const baseUrl = QueryParser._stripUrlPath(url);
      const urlQuery = encodeURIComponent(query);
      searchPath = searchPath.replace(/{}/g, urlQuery);
      return baseUrl + searchPath;
    }

    static _shiftAndTrim(arr, delimiter) {
      arr.shift();
      return arr.join(delimiter).trim();
    }

    static _stripUrlPath(url) {
      const parser = document.createElement('a');
      parser.href = url;
      return `${parser.protocol}//${parser.hostname}`;
    }
  }

  class Form {
    constructor(options) {
      this._formEl = $.el('#search-form');
      this._inputEl = $.el('#search-input');
      this._inputElVal = '';
      this._instantRedirect = options.instantRedirect;
      this._helpKey = options.helpKey;
      this._newTab = options.newTab;
      this._parseQuery = options.parseQuery;
      this._suggester = options.suggester;
      this._toggleHelp = options.toggleHelp;
      this._clearPreview = this._clearPreview.bind(this);
      this._handleInput = this._handleInput.bind(this);
      this._handleKeydown = this._handleKeydown.bind(this);
      this._previewValue = this._previewValue.bind(this);
      this._submitForm = this._submitForm.bind(this);
      this._submitWithValue = this._submitWithValue.bind(this);
      this.hide = this.hide.bind(this);
      this.show = this.show.bind(this);
      this._registerEvents();
      this._loadQueryParam();
    }

    hide() {
      $.bodyClassRemove('form');
      this._inputEl.value = '';
      this._inputElVal = '';
      this._suggester.suggest('');
      this._setColorsFromQuery('');
    }

    show() {
      $.bodyClassAdd('form');
      this._inputEl.focus();
    }

    _clearPreview() {
      this._previewValue(this._inputElVal);
      this._inputEl.focus();
    }

    _handleInput() {
      const newQuery = this._inputEl.value;
      const isHelp = newQuery === this._helpKey;
      const parsedQuery = this._parseQuery(newQuery);
      this._inputElVal = newQuery;
      this._suggester.suggest(parsedQuery);
      this._setColorsFromQuery(newQuery);

      if (!newQuery || isHelp) this.hide();
      if (isHelp) this._toggleHelp();

      if (this._instantRedirect && parsedQuery.isKey) {
        this._submitWithValue(newQuery);
      }
    }

    _handleKeydown(e) {
      if ($.isUp(e) || $.isDown(e) || $.isRemove(e)) return;

      switch ($.whichKey(e)) {
        case 'alt':
        case 'ctrl':
        case 'ctrl-*':
        case 'enter':
        case 'meta':
        case 'meta-*':
        case 'shift':
          return;
        case 'escape':
          this.hide();
          return;
      }

      this.show();
    }

    _loadQueryParam() {
      const q = new URLSearchParams(window.location.search).get('q');
      if (q) this._submitWithValue(q);
    }

    _previewValue(value) {
      this._inputEl.value = value;
      this._setColorsFromQuery(value);
    }

    _redirect(redirect, forceNewTab) {
      if (this._newTab || forceNewTab) {
        window.open(redirect, '_blank', 'noopener noreferrer');
      } else {
        window.location.href = redirect;
      }
    }

    _registerEvents() {
      document.addEventListener('keydown', this._handleKeydown);
      this._inputEl.addEventListener('input', this._handleInput);
      this._formEl.addEventListener('submit', this._submitForm, false);

      if (this._suggester) {
        this._suggester.setOnClick(this._submitWithValue);
        this._suggester.setOnHighlight(this._previewValue);
        this._suggester.setOnUnhighlight(this._clearPreview);
      }
    }

    _setColorsFromQuery(query) {
      const color = this._parseQuery(query).color;
      this._formEl.style.background = color || '';
    }

    _submitForm(e) {
      if (e) e.preventDefault();
      const parsedQuery = this._parseQuery(this._inputEl.value);

      if (parsedQuery.length) {
        parsedQuery.forEach((r) => this._redirect(r.redirect, true));
      } else {
        this._redirect(parsedQuery.redirect);
      }

      this._suggester.success(parsedQuery);
      this.hide();
    }

    _submitWithValue(value) {
      this._inputEl.value = value;
      this._submitForm();
    }
  }

  const help = new Help({
    commands: CONFIG.commands,
    newTab: CONFIG.queryNewTab,
  });

  const queryParser = new QueryParser({
    commands: CONFIG.commands,
    pathDelimiter: CONFIG.queryPathDelimiter,
    scripts: CONFIG.scripts,
    searchDelimiter: CONFIG.querySearchDelimiter,
  });

  const influencers = CONFIG.suggestionInfluencers.map((influencerConfig) => {
    return new {
      Default: DefaultInfluencer,
      DuckDuckGo: DuckDuckGoInfluencer,
      History: HistoryInfluencer,
    }[influencerConfig.name]({
      limit: influencerConfig.limit,
      minChars: influencerConfig.minChars,
      suggestionDefaults: CONFIG.suggestionDefaults,
    });
  });

  const suggester = new Suggester({
    influencers,
    limit: CONFIG.suggestionLimit,
  });

  const form = new Form({
    helpKey: CONFIG.helpKey,
    instantRedirect: CONFIG.queryInstantRedirect,
    newTab: CONFIG.queryNewTab,
    parseQuery: queryParser.parse,
    suggester,
    toggleHelp: help.toggle,
  });

  new Clock({
    amPm: CONFIG.clockShowAmPm,
    delimiter: CONFIG.clockDelimiter,
    onClick: CONFIG.clockOnClickAction === 'Search' ? form.show : help.toggle,
    showSeconds: CONFIG.clockShowSeconds,
    timeZone: CONFIG.clockTimeZone,
    twentyFourHour: CONFIG.clockTwentyFourHour,
  });
</script>