popups.html

<dialog id="forgotPasswordModal" class="modalWrapper hidden">
  <div class="modal">
    <div class="title">Forgot password</div>
    <input type="text" placeholder="email" />
    <div class="g-recaptcha"></div>
    <!-- <button>send</button> -->
  </div>
</dialog>

<dialog id="miniResultChartModal" class="modalWrapper hidden">
  <div class="modal">
    <canvas></canvas>
  </div>
</dialog>

<dialog id="lastSignedOutResult" class="modalWrapper hidden">
  <div class="modal">
    <div class="title">Last signed out result</div>
    <div class="question">Would you like to save it?</div>
    <div class="divider"></div>
    <div class="result">
      <div class="group wpm">
        <div class="sub">wpm</div>
        <div class="val">-</div>
      </div>
      <div class="group acc">
        <div class="sub">accuracy</div>
        <div class="val">-</div>
      </div>
      <div class="group raw">
        <div class="sub">raw</div>
        <div class="val">-</div>
      </div>
      <div class="group con">
        <div class="sub">consistency</div>
        <div class="val">-</div>
      </div>
      <div class="group chardata">
        <div class="sub">characters</div>
        <div class="val">-</div>
      </div>
      <div class="group testType">
        <div class="sub">test type</div>
        <div class="val">-</div>
      </div>
    </div>
    <div class="buttons">
      <button class="save">save</button>
      <button class="discard">discard</button>
    </div>
  </div>
</dialog>

<dialog id="simpleModal" class="modalWrapper hidden">
  <form class="modal"></form>
</dialog>

<dialog id="cookiesModal" class="modalWrapper hidden" data-nosnippet>
  <div class="extensionMessage">
    If you see this text, that means an extension is blocking a cookie consent
    popup. This will cause the website to incorrectly assume its still visible
    and stop you from enjoying Monkeytype. Please disable any extensions that
    block cookie popups and refresh the page.
  </div>
  <div class="modal">
    <div class="title">
      <i class="fas fa-cookie-bite"></i>
      We use cookies by the way
    </div>
    <div class="main">
      <div class="text">
        Cookies enhance your experience and help us improve our website.
      </div>
      <div class="buttons">
        <button class="active acceptAll">accept all</button>
        <button class="rejectAll">reject non-essential</button>
        <button class="openSettings">more options</button>
      </div>
    </div>
    <div class="settings hidden">
      <div class="cookie security">
        <label class="checkbox">
          <div class="title">security</div>
          <div class="description">
            We use Cloudflare cookies to improve security and performance of our
            site.
            <br />
            <br />
            They
            <b>do not</b>
            store any personal information and are required.
          </div>
          <input type="checkbox" checked disabled />
        </label>
      </div>
      <div class="cookie analytics">
        <label class="checkbox">
          <div class="title">analytics</div>
          <div class="description">
            We use Google Analytics to track the overall traffic and
            demographics of our site.
          </div>
          <input type="checkbox" />
        </label>
      </div>
      <div class="cookie sentry">
        <label class="checkbox">
          <div class="title">sentry</div>
          <div class="description">
            We use Sentry to track errors and performance issues on our site, as
            well as record anonymized user sessions to help us debug issues and
            improve our product.
          </div>
          <input type="checkbox" />
        </label>
      </div>
      <div class="cookie ads">
        <label class="checkbox">
          <div class="title">advertising</div>
          <div class="description">
            Our advertising partner may use cookies to deliver ads that are more
            relevant to you.
          </div>
          <div class="textButton">
            Click to change your preferences on ad related cookies
          </div>
        </label>
      </div>
      <button class="active acceptSelected">accept selected</button>
    </div>
  </div>
</dialog>

<dialog id="shareTestSettingsModal" class="modalWrapper hidden">
  <!-- <div id="shareTestSettingsPopup"> -->
  <div class="modal">
    <div class="title">Share test settings</div>
    <label class="checkboxWithSub mode">
      <input type="checkbox" setting="mode" />
      <div>Mode</div>
      <div class="sub">Time, Words, Quote, Zen, Custom</div>
    </label>
    <label class="checkboxWithSub mode2 subgroup hidden">
      <input type="checkbox" setting="mode2" />
      <div>Mode2</div>
      <div class="sub">Test seconds, Test words, Quote Id</div>
    </label>
    <label class="checkbox customText subgroup hidden">
      <input type="checkbox" setting="customText" />
      Custom text
      <span></span>
    </label>
    <label class="checkbox punctuation">
      <input type="checkbox" setting="punctuation" />
      Punctuation
      <span></span>
    </label>
    <label class="checkbox numbers">
      <input type="checkbox" setting="numbers" />
      Numbers
      <span></span>
    </label>
    <label class="checkbox language">
      <input type="checkbox" setting="language" />
      Language
      <span></span>
    </label>
    <label class="checkbox difficulty">
      <input type="checkbox" setting="difficulty" />
      Difficulty
      <span></span>
    </label>
    <label class="checkbox funbox">
      <input type="checkbox" setting="funbox" />
      Funbox
      <span></span>
    </label>
    <textarea
      class="url"
      placeholder="url"
      value="monkeytype.com"
      readonly
    ></textarea>
    <div class="tooLongWarning hidden">
      <i class="fas fa-fw fa-exclamation-triangle"></i>
      <span>The URL is over 2000 characters long - it might not work</span>
    </div>
    <!-- </div> -->
  </div>
</dialog>

<dialog id="mobileTestConfigModal" class="modalWrapper hidden">
  <div class="modal">
    <div class="group">
      <button class="punctuation">punctuation</button>
      <button class="numbers">numbers</button>
    </div>
    <div class="group modeGroup">
      <button data-mode="time">time</button>
      <button class="active" data-mode="words">words</button>
      <button data-mode="quote">quote</button>
      <button data-mode="zen">zen</button>
      <button data-mode="custom">custom</button>
    </div>
    <div class="group timeGroup">
      <button data-time="15">15</button>
      <button class="button active" data-time="30">30</button>
      <button data-time="60">60</button>
      <button data-time="120">120</button>
      <button data-time="custom">custom</button>
    </div>
    <div class="group wordsGroup hidden">
      <button data-words="10">10</button>
      <button data-words="25">25</button>
      <button data-words="50">50</button>
      <button data-words="100">100</button>
      <button data-words="custom">custom</button>
    </div>
    <div class="group quoteGroup hidden">
      <button data-quoteLength="all">all</button>
      <button data-quoteLength="0">short</button>
      <button data-quoteLength="1">medium</button>
      <button data-quoteLength="2">long</button>
      <button data-quoteLength="3">thicc</button>
      <button id="quote-search-button" data-quoteLength="-2">search</button>
    </div>
    <div class="group customGroup hidden">
      <button class="customChange">change</button>
    </div>
    <div class="group">
      <button class="shareButton">share</button>
    </div>
  </div>
</dialog>

<div id="videoAdPopupWrapper" class="popupWrapper hidden">
  <div id="videoAdPopup">
    <div class="preloader">
      <i class="fas fa-fw fa-spin fa-circle-notch"></i>
    </div>
    <div id="eg-video-player" class="video"></div>
  </div>
</div>

<dialog id="pbTablesModal" class="modalWrapper hidden">
  <div class="modal">
    <table>
      <thead>
        <tr>
          <td width="1%">words</td>
          <td>
            <span class="unit">wpm</span>
            <br />
            <span class="sub">accuracy</span>
          </td>
          <td>
            raw
            <br />
            <span class="sub">consistency</span>
          </td>
          <td>difficulty</td>
          <td>language</td>
          <td>punctuation</td>
          <td>numbers</td>
          <td>lazy mode</td>
          <td>date</td>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
</dialog>

<dialog id="practiseWordsModal" class="modalWrapper hidden">
  <div class="modal" actions="">
    <div class="title">Practice words</div>
    <!-- <div class="inputs"> -->
    <div class="group" data-id="missed">
      <div class="title">
        <i class="fas fa-times"></i>
        missed
      </div>
      <div class="sub">
        Include missed words or biwords (which include the previous word).
      </div>
      <div class="groupInputs">
        <div class="buttonGroup">
          <button class="missedOff" value="off">off</button>
          <button class="missedWords" value="words">words</button>
          <button class="missedBiwords" value="biwords">biwords</button>
        </div>
      </div>
    </div>
    <div class="group" data-id="slow">
      <div class="title">
        <i class="fas fa-tachometer-alt"></i>
        slow
      </div>
      <div class="sub">Include words which you typed slower than others.</div>
      <div class="groupInputs">
        <div class="buttonGroup">
          <button class="slowOff" value="false">off</button>
          <button class="slowOn" value="true">on</button>
        </div>
      </div>
    </div>
    <div></div>
    <!-- </div> -->
    <button class="start">start</button>
  </div>
</dialog>

<dialog id="quoteRateModal" class="modalWrapper hidden">
  <div class="modal">
    <div class="warning">
      If you find a grammatical error, think the quote has inappropriate
      language or feel like it's low quality -
      <span>don't give it a low rating!</span>
      Please report it instead. You can do so by closing this popup and clicking
      the "Flag" icon.
    </div>
    <div class="quote">
      <div class="text">-</div>
      <div class="id">
        <div class="top">id</div>
        <div class="val">-</div>
      </div>
      <div class="length">
        <div class="top">length</div>
        <div class="val">-</div>
      </div>
      <div class="source">
        <div class="top">source</div>
        <div class="val">-</div>
      </div>
    </div>
    <div class="spacer"></div>
    <div class="spacer2"></div>
    <div class="ratingStats">
      <div class="ratingCount">
        <div class="top">ratings</div>
        <div class="val">-</div>
      </div>
      <div class="ratingAverage">
        <div class="top">average</div>
        <div class="val">-</div>
      </div>
      <div class="starsWrapper">
        <div class="top">your rating</div>
        <div class="stars">
          <button class="star" data-rating="1">
            <i class="fas fa-fw fa-star"></i>
          </button>
          <button class="star" data-rating="2">
            <i class="fas fa-fw fa-star"></i>
          </button>
          <button class="star" data-rating="3">
            <i class="fas fa-fw fa-star"></i>
          </button>
          <button class="star" data-rating="4">
            <i class="fas fa-fw fa-star"></i>
          </button>
          <button class="star" data-rating="5">
            <i class="fas fa-fw fa-star"></i>
          </button>
        </div>
      </div>
    </div>
    <!-- <div class="button rate1">
            <i class="fas fa-star"></i>
            <i class="far fa-star"></i>
            <i class="far fa-star"></i>
          </div>
          <div class="button rate2">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="far fa-star"></i>
          </div>
          <div class="button rate3">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
          </div> -->
    <button
      class="textButton submitButton"
      aria-label="Submit review"
      data-balloon-pos="up"
    >
      <i class="fas fa-chevron-right"></i>
    </button>
  </div>
</dialog>

<dialog id="importExportSettingsModal" class="modalWrapper hidden">
  <form class="modal" data-mode="">
    <input type="text" title="import settings" />
    <button>import settings</button>
  </form>
</dialog>

<dialog id="shareCustomThemeUrlModal" class="modalWrapper hidden">
  <div class="modal">
    <input type="text" title="custom theme" />
    <div class="button">ok</div>
  </div>
</dialog>
<dialog id="customTextModal" class="modalWrapper hidden">
  <div class="modal" action="">
    <div class="buttonsTop">
      <div class="button saveCustomText">
        <i class="fas fa-save"></i>
        save
      </div>
      <div class="button showSavedTexts">
        <i class="fas fa-folder"></i>
        saved texts
      </div>
    </div>
    <div class="buttonsTop2">
      <input id="fileInput" type="file" class="hidden" accept=".txt" />
      <label for="fileInput" class="button importText">
        <i class="fas fa-file-import"></i>
        open file
      </label>
      <div class="button wordfilter">
        <i class="fas fa-filter"></i>
        words filter
      </div>
      <div class="button customGenerator">
        <i class="fas fa-cogs"></i>
        custom generator
      </div>
    </div>
    <div class="savedTexts hidden" style="display: none">
      <div class="title">saved texts</div>
      <div class="buttons"></div>
    </div>
    <div class="textAreaWrapper" style="position: relative">
      <div class="longCustomTextWarning">
        <div>
          <p>
            A long custom text is currently loaded.
            <br />
            Editing the text will disable progress tracking.
            <br />
            <br />
          </p>
          <p class="small">Click anywhere to start editing the text.</p>
        </div>
      </div>
      <div class="challengeWarning">
        <div>
          <p>
            A challenge is currently loaded.
            <br />
            Editing the settings will clear the challenge.
            <br />
            <br />
          </p>
          <p class="small">Click anywhere to edit.</p>
        </div>
      </div>
      <textarea class="textarea"></textarea>
    </div>
    <div class="inputs">
      <div class="group" data-id="mode">
        <div class="title">
          <i class="fas fa-fw fa-cog"></i>
          Mode
        </div>
        <div class="sub">Change the way words are generated.</div>
        <div class="groupInputs">
          <div class="buttonGroup">
            <button value="simple">simple</button>
            <button value="repeat">repeat</button>
            <button value="shuffle">shuffle</button>
            <button value="random">random</button>
          </div>
        </div>
      </div>
      <div class="group" data-id="limit">
        <div class="title">
          <i class="fas fa-fw fa-step-forward"></i>
          Limit
        </div>
        <div class="sub">
          Control how many words to generate or for how long you want to type.
        </div>
        <div class="groupInputs limitInputs">
          <input
            class="words"
            type="number"
            value=""
            min="0"
            placeholder="words"
          />
          <input
            class="sections hidden"
            type="number"
            value=""
            min="0"
            placeholder="sections"
          />
          <div class="or">or</div>
          <input
            class="time"
            type="number"
            value=""
            min="0"
            placeholder="time"
          />
        </div>
      </div>

      <div class="group" data-id="delimiter">
        <div class="title">
          <i class="fas fa-fw fa-grip-lines-vertical"></i>
          Word delimiter
        </div>
        <div class="sub">
          Change how words are separated. Using the pipe delimiter allows you to
          randomize groups of words.
        </div>
        <div class="groupInputs">
          <div class="buttonGroup">
            <button value="true">pipe</button>
            <button value="false">space</button>
          </div>
        </div>
      </div>

      <div class="group" data-id="zeroWidth">
        <div class="title">
          <i class="fas fa-fw fa-text-width"></i>
          Remove zero-width characters
        </div>
        <div class="sub">Fully remove zero-width characters.</div>
        <div class="groupInputs">
          <div class="buttonGroup">
            <button value="false">no</button>
            <button value="true">yes</button>
          </div>
        </div>
      </div>

      <div class="group" data-id="fancy">
        <div class="title">
          <i class="fas fa-fw fa-pen-fancy"></i>
          Remove fancy typography
        </div>
        <div class="sub">
          Standardises typography symbols (for example “ and ” become ")
        </div>
        <div class="groupInputs">
          <div class="buttonGroup">
            <button value="false">no</button>
            <button value="true">yes</button>
          </div>
        </div>
      </div>

      <div class="group" data-id="control">
        <div class="title">
          <i class="fas fa-fw fa-code"></i>
          Replace control characters
        </div>
        <div class="sub">
          Replace control characters (\n becomes a new line and \t becomes a
          tab)
        </div>
        <div class="groupInputs">
          <div class="buttonGroup">
            <button value="false">no</button>
            <button value="true">yes</button>
          </div>
        </div>
      </div>

      <div class="group" data-id="newlines">
        <div class="title">
          <i class="fas fa-fw fa-level-down-alt fa-rotate-90"></i>
          Replace new lines with spaces
        </div>
        <div class="sub">
          Replace all new line characters with spaces. Can automatically add
          periods to the end of lines if you wish.
        </div>
        <div class="groupInputs">
          <div class="buttonGroup">
            <button value="off">off</button>
            <button value="space">space</button>
            <button value="periodSpace">period + space</button>
          </div>
        </div>
      </div>
    </div>
    <div class="button apply">ok</div>
  </div>
</dialog>
<dialog id="savedTextsModal" class="modalWrapper hidden">
  <div class="modal">
    <div class="title">Saved texts</div>
    <div class="list"></div>
    <div class="title">Saved long texts</div>
    <div class="listLong"></div>
    <div class="divider"></div>
    <div class="message">
      Heads up! These texts are only stored locally. If you switch devices or
      clear your local browser data they will be lost.
    </div>
  </div>
</dialog>
<dialog id="saveCustomTextModal" class="modalWrapper hidden">
  <form class="modal">
    <div class="title">Save custom text</div>
    <input class="textName" type="text" placeholder="name" />
    <div>
      <label class="checkboxWithSub">
        <input type="checkbox" class="isLongText" />
        <div>Long text (book mode)</div>
        <div class="sub">
          Disables editing this text but allows you to save progress by pressing
          shift + enter or bailing out. You can then load this text again to
          continue where you left off.
        </div>
      </label>
    </div>
    <button class="save">save</button>
  </form>
</dialog>
<dialog id="wordFilterModal" class="modalWrapper hidden">
  <div class="modal">
    <!-- hidden for now, dunno where to place it -->
    <!-- <div class="loadingIndicator">
      <i class="fas fa-fw fa-spin fa-circle-notch"></i>
    </div> -->
    <div class="top">
      <div class="group">
        <div class="title">language</div>
        <select class="languageInput" title="language"></select>
      </div>
      <div class="tip">
        You can manually filter words by length, words or characters (separated
        by spaces) on the left side. On the right side you can generate filters
        based on a preset and selected layout.
      </div>
    </div>
    <div class="leftSide">
      <div class="group lengthgrid">
        <div class="title">min length</div>
        <div class="title">max length</div>

        <input
          class="wordLength wordMinInput"
          autocomplete="off"
          type="number"
          title="min"
        />
        <input
          class="wordLength wordMaxInput"
          autocomplete="off"
          type="number"
          title="max"
        />
      </div>
      <div class="group">
        <div class="title">include</div>
        <input
          class="wordIncludeInput"
          id="wordIncludeInput"
          autocomplete="off"
          title="include"
        />
        <label class="checkbox">
          <input id="exactMatchOnly" type="checkbox" />
          Exact match only
        </label>
      </div>
      <div class="group">
        <div class="title">exclude</div>
        <input
          class="wordExcludeInput"
          id="wordExcludeInput"
          autocomplete="off"
          title="exclude"
        />
      </div>
    </div>
    <div class="divider"></div>

    <div class="rightSide">
      <div class="group">
        <div class="title">presets</div>
        <select class="presetInput"></select>
      </div>
      <div class="group">
        <div class="title">layout</div>
        <select class="layoutInput"></select>
      </div>
      <!-- <div class="tip">Use the dropdowns above to generate presets</div> -->
      <button class="generateButton">apply</button>
    </div>

    <div class="bottom">
      <div class="tip">
        "Set" replaces the current custom word list with the filter result,
        "Add" appends the filter result to the current custom word list.
      </div>
      <button class="setButton">set</button>
      <button class="addButton">add</button>
    </div>
  </div>
</dialog>
<dialog id="customGeneratorModal" class="modalWrapper hidden">
  <div class="modal">
    <div class="main">
      <div class="group">
        <div class="title">presets</div>
        <select class="presetInput">
          <option value="alphas">a-z</option>
          <option value="numbers">0-9</option>
          <option value="special">symbols</option>
          <option value="bigrams">bigrams</option>
          <option value="trigrams">trigrams</option>
        </select>
        <button class="generateButton">apply</button>
      </div>
      <div class="separator"></div>
      <div class="tip">
        Enter characters or strings separated by spaces. Random combinations
        will be generated using these inputs.
      </div>
      <div class="group">
        <div class="title">character set</div>
        <textarea
          class="characterInput"
          id="characterInput"
          autocomplete="off"
          placeholder=""
          title="characters"
        ></textarea>
      </div>
      <div class="group lengthgrid">
        <div class="title">min length</div>
        <div class="title">max length</div>

        <input
          class="wordLength minLengthInput"
          autocomplete="off"
          type="number"
          value="2"
          min="1"
          title="min"
        />
        <input
          class="wordLength maxLengthInput"
          autocomplete="off"
          type="number"
          value="5"
          min="1"
          title="max"
        />
      </div>
      <div class="group">
        <div class="title">word count</div>
        <input
          class="wordCountInput"
          autocomplete="off"
          type="number"
          value="100"
          min="1"
          title="word count"
        />
      </div>
    </div>

    <div class="bottom">
      <div class="tip">
        "Set" replaces the current custom text with generated words, "Add"
        appends generated words to the current custom text.
      </div>
      <button class="setButton">set</button>
      <button class="addButton">add</button>
    </div>
  </div>
</dialog>
<dialog id="googleSignUpModal" class="modalWrapper hidden">
  <form class="modal">
    <div class="title">Account name</div>
    <div class="text">Please enter a username before continuing</div>
    <input type="text" placeholder="username" />
    <div class="captcha"></div>
    <button>continue</button>
  </form>
</dialog>
<dialog id="customWordAmountModal" class="modalWrapper hidden">
  <form class="modal">
    <div class="title">Custom word amount</div>
    <input type="number" value="1" min="0" max="10000" />
    <div class="tip">
      You can start an infinite test by inputting 0. Then, to stop the test, use
      the Bail Out feature (
      <kbd>esc</kbd>
      or
      <kbd>ctrl/cmd</kbd>
      +
      <kbd>shift</kbd>
      +
      <kbd>p</kbd>
      > Bail Out)
    </div>
    <button>ok</button>
  </form>
</dialog>
<dialog id="customTestDurationModal" class="modalWrapper hidden">
  <form class="modal">
    <div class="title">Test duration</div>
    <div class="preview"></div>
    <input value="1" title="test duration" min="0" />
    <div class="tip">
      You can use "h" for hours and "m" for minutes, for example "1h30m".
      <br />
      <br />
      You can start an infinite test by inputting 0. Then, to stop the test, use
      the Bail Out feature (
      <kbd>esc</kbd>
      or
      <kbd>ctrl/cmd</kbd>
      +
      <kbd>shift</kbd>
      +
      <kbd>p</kbd>
      > Bail Out)
    </div>
    <button>ok</button>
  </form>
</dialog>
<dialog id="quoteSearchModal" class="modalWrapper hidden">
  <div class="modal">
    <div id="quoteSearchTop">
      <div class="title">Quote search</div>
      <div class="buttons">
        <button class="goToQuoteSubmit">
          <i class="fas fa-plus"></i>
          Submit a quote
        </button>
        <button class="goToQuoteApprove">
          <i class="fas fa-check"></i>
          Approve quotes
        </button>
      </div>
    </div>
    <div id="quoteSearchControlsWrapper">
      <input
        id="searchBox"
        class="searchBox"
        dir="auto"
        type="text"
        maxlength="200"
        autocomplete="off"
        placeholder="filter by text, source or id"
      />
      <select class="quoteLengthFilter" multiple></select>
      <button class="toggleFavorites">
        <i class="fas fa-fw fa-heart"></i>
        <!-- favorites -->
      </button>
    </div>
    <div dir="auto" id="quoteSearchResults" class="quoteSearchResults"></div>
    <div id="quoteSearchPageNavigator">
      <button class="prevPage" disabled>
        <i class="fas fa-fw fa-chevron-left"></i>
      </button>
      <div class="pageInfo">No search results</div>
      <button class="nextPage" disabled>
        <i class="fas fa-fw fa-chevron-right"></i>
      </button>
    </div>
  </div>
</dialog>
<dialog id="quoteSubmitModal" class="modalWrapper hidden">
  <div class="modal">
    <div class="title">Submit a quote</div>
    <ul>
      <li>
        Do not include content that contains any libelous or otherwise unlawful,
        abusive or obscene text.
      </li>
      <li>Verify quotes added aren't duplicates of any already present</li>
      <li>
        Please do not add extremely short quotes (less than 60 characters)
      </li>
      <li>
        <b>
          Submitting low quality quotes or misusing this form will cause you to
          lose access to this feature
        </b>
      </li>
    </ul>
    <label>quote</label>
    <textarea class="newQuoteText" autocomplete="off" dir="auto"></textarea>
    <label>source</label>
    <input class="newQuoteSource" type="text" autocomplete="off" />
    <label>language</label>
    <select name="language" class="newQuoteLanguage"></select>
    <div class="g-recaptcha"></div>
    <button>submit</button>
  </div>
</dialog>
<dialog id="quoteReportModal" class="modalWrapper hidden">
  <div class="modal">
    <div class="title">Report a quote</div>
    <div class="text">
      Please report quotes responsibly - misuse may result in you losing access
      to this feature.
      <br />
      <br />
      <span class="red">Please add comments in English only.</span>
    </div>
    <label>quote</label>
    <div class="quote" dir="auto"></div>
    <label>reason</label>
    <select name="report-reason" class="reason" title="reason">
      <option value="Grammatical error">Grammatical error</option>
      <option value="Duplicate quote">Duplicate quote</option>
      <option value="Inappropriate content">Inappropriate content</option>
      <option value="Low quality content">Low quality content</option>
      <option value="Incorrect source">Incorrect source</option>
    </select>
    <label>comment</label>
    <textarea class="comment" autocomplete="off"></textarea>
    <div
      class="g-recaptcha"
      data-sitekey="6Lc-V8McAAAAAJ7s6LGNe7MBZnRiwbsbiWts87aj"
    ></div>
    <button>report</button>
  </div>
</dialog>
<dialog id="userReportModal" class="modalWrapper hidden">
  <div class="modal">
    <div class="title">Report a user</div>
    <div class="text">
      Please report users responsibly and add comments in English only. Misuse
      may result in you losing access to this feature.
    </div>
    <label>user</label>
    <div class="user"></div>
    <label>reason</label>
    <select name="report-reason" class="reason">
      <option value="Inappropriate name">Inappropriate name</option>
      <option value="Inappropriate bio">Inappropriate bio</option>
      <option value="Inappropriate social links">
        Inappropriate social links
      </option>
      <option value="Suspected cheating">Suspected cheating</option>
    </select>
    <label>comment</label>
    <textarea class="comment" autocomplete="off"></textarea>
    <div
      class="g-recaptcha"
      data-sitekey="6Lc-V8McAAAAAJ7s6LGNe7MBZnRiwbsbiWts87aj"
    ></div>
    <button>Report</button>
  </div>
</dialog>
<dialog id="quoteApproveModal" class="modalWrapper hidden">
  <div class="modal">
    <div class="top">
      <div class="title">Approve quotes</div>
      <button class="refreshList">
        <i class="fas fa-sync-alt"></i>
        Refresh list
      </button>
    </div>
    <div class="quotes"></div>
  </div>
</dialog>
<dialog id="streakHourOffsetModal" class="modalWrapper hidden">
  <div class="modal">
    <div class="title">Set streak hour offset</div>
    <div class="text">
      Streaks reset at midnight UTC by default. If this is not convenient for
      you (for example if it means that streaks reset in the middle of the day),
      you can change the hour offset here.
      <br />
      <br />
      This will not take daylight savings time into consideration!
      <br />
      <br />
      <span class="red">You can only do this once!</span>
    </div>
    <div class="group">
      <button class="decreaseOffset">
        <i class="fas fa-fw fa-chevron-left"></i>
      </button>
      <input type="number" min="-11" max="12" value="0" step="0.5" />
      <button class="increaseOffset">
        <i class="fas fa-fw fa-chevron-right"></i>
      </button>
    </div>
    <div class="preview"></div>
    <button class="submit">set</button>
  </div>
</dialog>
<dialog id="editResultTagsModal" class="modalWrapper hidden">
  <div class="modal">
    <div class="title">Edit result tags</div>
    <div class="buttons"></div>
    <button class="saveButton">save</button>
  </div>
</dialog>

<!-- Tag modal -->
<dialog id="quoteTagFilterModal" class="modalWrapper hidden">
  <div class="modal">
    <div class="quoteTagFilterDropdownHeader">
      <span class="quoteTagFilterDropdownTitle">Filter by tag</span>
      <button
        type="button"
        class="textButton quoteTagFilterClearBtn"
        id="quoteTagFilterModalClearBtn"
        title="Clear all tag filters"
      >
        clear
      </button>
    </div>

    <div
      class="quoteTagFilterPills"
      id="quoteTagFilterModalPills"
      role="group"
      aria-label="Quote tags"
    ></div>
  </div>
</dialog>

<dialog id="editPresetModal" class="modalWrapper hidden">
  <form class="modal">
    <div class="title popupTitle"></div>
    <div class="group">
      <div class="presetNameTitle">name</div>
      <input type="text" title="presets" />
    </div>
    <label class="changePresetToCurrentCheckbox checkbox">
      <input type="checkbox" />
      Change preset to current settings
    </label>
    <div class="inputs">
      <div class="presetType group" data-id="presetType">
        <div class="title">Preset Type</div>
        <div class="presetTypeButtonGroup">
          <button value="full" type="button">full</button>
          <button value="partial" type="button">partial</button>
        </div>
      </div>
      <div class="partialPresetGroups group">
        <div class="title">partial groups</div>
        <div class="checkboxList"></div>
      </div>
    </div>
    <div class="text deletePrompt"></div>
    <button class="submit" type="submit">add</button>
  </form>
</dialog>
<dialog id="shareCustomThemeModal" class="modalWrapper hidden">
  <div class="modal">
    <div class="title">Share custom theme</div>
    <label class="checkbox">
      <input type="checkbox" id="includeBackground" />
      Include background information
    </label>
    <button>copy link to clipboard</button>
  </div>
</dialog>
<dialog id="commandLine" class="modalWrapper hidden">
  <div class="modal">
    <div
      style="
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
      "
    >
      <div class="searchicon">
        <i class="fas fa-fw fa-search"></i>
      </div>
      <div class="checkingicon hidden">
        <i class="fas fa-fw fa-circle-notch fa-spin"></i>
      </div>
      <input type="text" class="input" placeholder="Type to search" />
    </div>
    <div class="warning hidden">
      <div class="icon">
        <i class="fas fa-fw fa-exclamation-triangle"></i>
      </div>
      <div class="text">This is some warning text.</div>
    </div>
    <div class="suggestions"></div>
  </div>
</dialog>

<dialog id="editProfileModal" class="modalWrapper hidden">
  <form class="modal">
    <div class="title">Edit Profile</div>
    <div>
      <label>name</label>
      <div>
        To update your name, go to Account Settings > Account > Update account
        name
      </div>
    </div>
    <div>
      <label>avatar</label>
      <div>
        To update your avatar make sure your Discord account is linked, then go
        to Account Settings > Account > Discord Integration and click "Update
        Avatar"
      </div>
    </div>
    <div>
      <label>bio</label>
      <textarea class="bio" autocomplete="off" maxlength="250"></textarea>
    </div>
    <div>
      <label>keyboard</label>
      <textarea class="keyboard" autocomplete="off" maxlength="75"></textarea>
    </div>
    <div>
      <label>github</label>
      <div class="socialURL">
        <p>https://github.com/</p>
        <input
          class="github"
          type="text"
          value=""
          placeholder="username"
          maxlength="39"
        />
      </div>
    </div>
    <div>
      <label>twitter</label>
      <div class="socialURL">
        <p>https://x.com/</p>
        <input
          class="twitter"
          type="text"
          value=""
          placeholder="username"
          maxlength="20"
        />
      </div>
    </div>
    <div>
      <label>website</label>
      <input class="website" type="text" value="" maxlength="200" />
    </div>
    <div>
      <label>badge</label>
      <div class="badgeSelectionContainer"></div>
    </div>
    <div>
      <label>public activity</label>
      <label class="checkbox">
        <input
          class="editProfileShowActivityOnPublicProfile"
          type="checkbox"
          checked
        />
        <span>Include test activity graph on your public profile.</span>
      </label>
    </div>
    <button class="edit-profile-submit" type="submit">save</button>
  </form>
</dialog>