popups.html

<dialog id="registerCaptchaModal" class="modalWrapper hidden">
  <div class="modal">
    <div class="g-recaptcha"></div>
  </div>
</dialog>

<dialog id="alertsPopup" class="modalWrapper hidden">
  <div class="modal">
    <button class="mobileClose">
      <i class="fas fa-times"></i>
      Close
    </button>
    <div class="scrollWrapper">
      <div class="accountAlerts">
        <div class="title">
          <div class="left">
            <i class="fas fa-inbox"></i>
            Inbox
          </div>
          <div class="right"></div>
        </div>
        <button class="claimAll hidden">
          <i class="fas fa-fw fa-gift"></i>
          Claim all
        </button>
        <button class="deleteAll hidden">
          <i class="fas fa-fw fa-trash"></i>
          Delete all
        </button>
        <div class="list">
          <div class="nothing">Nothing to show</div>
        </div>
      </div>
      <div class="separator accountSeparator"></div>
      <div class="psas">
        <div class="title">
          <i class="fas fa-bullhorn"></i>
          Announcements
        </div>
        <div class="list">
          <div class="nothing">Nothing to show</div>
        </div>
      </div>
      <div class="separator"></div>
      <div class="notificationHistory">
        <div class="title">
          <i class="fas fa-comment-alt"></i>
          Notifications
        </div>
        <div class="list">
          <div class="nothing">Nothing to show</div>
        </div>
      </div>
    </div>
  </div>
</dialog>

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

<dialog id="cookiesModal" class="modalWrapper hidden">
  <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 far 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 cookies to check how users interact with our
            website and use this data to improve our site design.
          </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>

<div id="shareTestSettingsPopupWrapper" class="popupWrapper hidden">
  <div id="shareTestSettingsPopup">
    <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 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="-1">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>
</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>

<div id="practiseWordsPopupWrapper" class="popupWrapper hidden" tabindex="-1">
  <div id="practiseWordsPopup" action="">
    <div class="title">Practice words</div>
    <div class="text">
      This will start a new test in custom mode. Words that you mistyped more
      often or words that you typed much slower will be weighted higher and
      appear more often.
    </div>
    <div class="button missed" tabindex="1">Practice missed</div>
    <div class="button slow" tabindex="1">Practice slow</div>
    <div class="button both" tabindex="1">Practice both</div>
  </div>
</div>

<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>
        Show saved texts
      </div>
      <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>
    <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>
      <textarea class="textarea"></textarea>
    </div>
    <div class="inputs">
      <label class="checkboxWithSub randomWordsCheckbox">
        <input type="checkbox" />
        <div>Random</div>
        <div class="sub">
          Randomize the above words, and control how many words are generated.
        </div>
      </label>
      <div class="randomInputFields disabled">
        <label class="wordcount">
          Words
          <input type="number" value="" min="1" max="10000" />
        </label>
        <label class="sectioncount hidden">
          Sections
          <input type="number" value="" min="1" max="10000" />
        </label>
        <div style="color: var(--sub-color)">or</div>
        <label class="time">
          Time
          <input type="number" value="" min="1" max="10000" />
        </label>
        <!-- <div style="color: var(--sub-color)">or</div> -->
      </div>
      <label class="checkboxWithSub typographyCheck">
        <input type="checkbox" checked />
        <div>Remove fancy typography</div>
        <div class="sub">
          Standardises typography symbols (for example “ and ” become ")
        </div>
      </label>
      <label class="checkboxWithSub replaceControlCharacters">
        <input type="checkbox" checked />
        <div>Replace control characters</div>
        <div class="sub">
          Replace control characters (\n becomes a new line and \t becomes a
          tab)
        </div>
      </label>
      <label class="checkboxWithSub delimiterCheck">
        <input type="checkbox" />
        <div>Pipe delimiter</div>
        <div class="sub">
          Change how words are separated. Using the pipe delimiter allows you to
          randomize groups of words.
        </div>
      </label>
      <label class="checkboxWithSub replaceNewlineWithSpace">
        <input type="checkbox" />
        <div>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>
      </label>
      <div class="replaceNewLinesButtons">
        <div class="buttonGroup">
          <div class="button active noPeriods">no periods</div>
          <div class="button periods">periods</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>
</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"
        />
      </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">generate</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="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 (
      <key>esc</key>
      or
      <key>ctrl/cmd</key>
      +
      <key>shift</key>
      +
      <key>p</key>
      > 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 (esc or ctrl/cmd + shift + p > 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"
        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 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>
    <div style="position: relative">
      <textarea class="newQuoteText" type="text" autocomplete="off"></textarea>
      <div class="characterCount">-</div>
    </div>
    <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="apeKeysModal" class="hidden modalWrapper">
  <div class="modal">
    <div class="top">
      <div class="title">Ape Keys</div>
      <button class="generateApeKey">
        <i class="fas fa-plus"></i>
        Generate new key
      </button>
    </div>
    <table>
      <thead>
        <tr>
          <td width="1px">active</td>
          <td>name</td>
          <td>created on</td>
          <td>modified on</td>
          <td>last used on</td>
          <td width="1px"></td>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </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"></div>
    <label>reason</label>
    <select name="report-reason" class="reason" title="reason">
      <option value="Grammatical error">Grammatical error</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>
    <div style="position: relative">
      <textarea class="comment" type="text" autocomplete="off"></textarea>
      <div class="characterCount">-</div>
    </div>
    <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>
    <div style="position: relative">
      <textarea class="comment" type="text" autocomplete="off"></textarea>
      <div class="characterCount">-</div>
    </div>
    <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="editTagModal" class="modalWrapper hidden">
  <form class="modal">
    <div class="title"></div>
    <input type="text" title="tag" />
    <div class="text"></div>
    <button type="submit"></button>
  </form>
</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>
    <input type="number" min="-11" max="12" value="0" />
    <div class="preview"></div>
    <button>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>
<dialog id="editPresetModal" class="modalWrapper hidden">
  <form class="modal">
    <div class="title"></div>
    <input type="text" title="presets" />
    <label class="checkbox">
      <input type="checkbox" />
      Change preset to current settings
    </label>
    <div class="text"></div>
    <button 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>
<div id="leaderboardsWrapper" class="popupWrapper hidden">
  <div id="leaderboards">
    <div class="leaderboardsTop">
      <div class="mainTitle">All-Time English Leaderboards</div>
      <div class="subTitle">Next update in: --:--</div>
      <div class="textButton showYesterdayButton hidden">
        <i class="fas fa-calendar-day"></i>
        <div class="text">Show yesterday</div>
      </div>
      <div class="buttons">
        <div class="buttonGroup timeRange">
          <div class="button allTime">all-time</div>
          <div class="button daily">daily</div>
          <select class="languageSelect" disabled></select>
        </div>
      </div>
    </div>
    <div class="tables">
      <div class="titleAndTable">
        <div class="titleAndButtons">
          <div class="title">
            Time 15
            <i
              class="hidden leftTableLoader fas fa-fw fa-spin fa-circle-notch"
            ></i>
          </div>
          <div class="buttons">
            <div class="button leftTableJumpToTop">
              <i class="fas fa-fw fas fa-crown"></i>
              <!-- Top -->
            </div>
            <div class="button leftTableJumpToMe">
              <i class="fas fa-fw fas fa-user"></i>
              <!-- Me -->
            </div>
          </div>
        </div>
        <div class="leftTableWrapper invisible">
          <table class="left">
            <thead>
              <tr>
                <td width="1%">#</td>
                <td>name</td>
                <td class="alignRight" width="1%">
                  wpm
                  <br />
                  <div class="sub">accuracy</div>
                </td>
                <td class="alignRight" width="1%">
                  raw
                  <br />
                  <div class="sub">consistency</div>
                </td>
                <td class="alignRight" width="125px">date</td>
              </tr>
            </thead>
            <tbody></tbody>
            <tfoot></tfoot>
          </table>
        </div>
      </div>
      <div class="titleAndTable">
        <div class="titleAndButtons">
          <div class="title">
            Time 60
            <i
              class="hidden rightTableLoader fas fa-fw fa-spin fa-circle-notch"
            ></i>
          </div>
          <div class="buttons">
            <div class="button rightTableJumpToTop">
              <i class="fas fa-fw fas fa-crown"></i>
              <!-- Top -->
            </div>
            <div class="button rightTableJumpToMe">
              <i class="fas fa-fw fas fa-user"></i>
              <!-- Me -->
            </div>
          </div>
        </div>
        <div class="rightTableWrapper invisible">
          <table class="right">
            <thead>
              <tr>
                <td width="1%">#</td>
                <td>name</td>
                <td class="alignRight" width="1%">
                  wpm
                  <br />
                  <div class="sub">accuracy</div>
                </td>
                <td class="alignRight" width="1%">
                  raw
                  <br />
                  <div class="sub">consistency</div>
                </td>
                <td class="alignRight" width="120px">date</td>
              </tr>
            </thead>
            <tbody></tbody>
            <tfoot></tfoot>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
<dialog id="versionHistoryModal" class="modalWrapper hidden">
  <div class="modal"></div>
</dialog>
<dialog id="supportModal" class="modalWrapper hidden">
  <div class="modal">
    <div class="title">Support Monkeytype</div>
    <div class="text">
      Thank you so much for thinking about supporting this project. It would not
      be possible without you and your continued support.
      <i class="fas fa-heart"></i>
    </div>
    <div class="buttons">
      <button class="ads">
        <div class="icon"><i class="fas fa-fw fa-ad"></i></div>
        <div class="text">Enable Ads</div>
      </button>
      <!-- <div class="button watchVideoAd">
        <div class="icon"><i class="fas fa-fw fa-ad"></i></div>
        <div class="text">
          Watch
          <br />
          a Video Ad
        </div>
      </div> -->
      <a
        class="button"
        href="https://ko-fi.com/monkeytype"
        target="_blank"
        rel="noreferrer noopener"
      >
        <div class="icon"><i class="fas fa-fw fa-donate"></i></div>
        <div class="text">Donate</div>
      </a>
      <a
        class="button"
        href="https://www.patreon.com/monkeytype"
        target="_blank"
        rel="noreferrer noopener"
      >
        <div class="icon"><i class="fab fa-fw fa-patreon"></i></div>
        <div class="text">Join Patreon</div>
      </a>
      <a
        class="button"
        href="https://monkeytype.store"
        target="_blank"
        rel="noreferrer noopener"
      >
        <div class="icon"><i class="fas fa-fw fa-tshirt"></i></div>
        <div class="text">Buy Merch</div>
      </a>
    </div>
  </div>
</dialog>
<dialog id="contactModal" class="modalWrapper hidden">
  <div class="modal">
    <div class="title">Contact</div>
    <div class="text">
      Feel free to send an email to contact@monkeytype.com. For business
      inquiries, email jack@monkeytype.com (the buttons below will open the
      default mail client).
      <br />
      <br />
      Please
      <span>do not send</span>
      requests to delete account, update email, update name or clear personal
      bests - you can do that in the settings page.
    </div>
    <div class="buttons">
      <a
        class="button"
        target="_blank"
        href="mailto:contact@monkeytype.com?subject=[Question] "
        rel="noopener"
      >
        <div class="icon"><i class="fas fa-question-circle"></i></div>
        <div class="textGroup">
          <div class="text">Question</div>
          <!-- <div class="subtext">Confused about something?</div> -->
        </div>
      </a>
      <a
        class="button"
        target="_blank"
        href="mailto:contact@monkeytype.com?subject=[Feedback] "
        rel="noopener"
      >
        <div class="icon"><i class="fas fa-comment-dots"></i></div>
        <div class="textGroup">
          <div class="text">Feedback</div>
          <!-- <div class="subtext">Feel like the website could be improved?</div> -->
        </div>
      </a>
      <a
        class="button"
        target="_blank"
        href="mailto:support@monkeytype.com?subject=[Bug] "
        rel="noopener"
      >
        <div class="icon"><i class="fas fa-bug"></i></div>
        <div class="textGroup">
          <div class="text">Bug Report</div>
          <!-- <div class="subtext">Report any bugs you found. You can also open a new issue on GitHub.</div> -->
        </div>
      </a>
      <a
        class="button"
        target="_blank"
        href="mailto:support@monkeytype.com?subject=[Account] "
        rel="noopener"
      >
        <div class="icon"><i class="fas fa-user-circle"></i></div>
        <div class="textGroup">
          <div class="text">Account Help</div>
          <!-- <div class="subtext">Report any problems with your account like login issues.</div> -->
        </div>
      </a>
      <a
        class="button"
        target="_blank"
        href="mailto:jack@monkeytype.com?subject=[Business] "
        rel="noopener"
      >
        <div class="icon"><i class="fas fa-briefcase"></i></div>
        <div class="textGroup">
          <div class="text">Business Inquiry</div>
          <!-- <div class="subtext">Let's work together.</div> -->
        </div>
      </a>
      <a
        class="button"
        target="_blank"
        href="mailto:contact@monkeytype.com?subject=[Other] "
        rel="noopener"
      >
        <div class="icon"><i class="fas fa-ellipsis-h"></i></div>
        <div class="textGroup">
          <div class="text">Other</div>
          <!-- <div class="subtext">We will try to help.</div> -->
        </div>
      </a>
    </div>
  </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>
      <input type="text" class="input" placeholder="Type to search" />
    </div>
    <div class="suggestions"></div>
  </div>
</dialog>

<dialog id="newFilterPresetModal" class="modalWrapper hidden">
  <form class="modal">
    <div class="title">New filter preset</div>
    <input type="text" value="" />
    <button>add</button>
  </form>
</dialog>

<dialog id="editProfileModal" class="modalWrapper hidden">
  <form class="modal">
    <div class="title">Edit Profile</div>
    <div>
      <label>avatar</label>
      <div>
        To update your avatar make sure your Discord account is linked, then go
        to Settings > Account > Discord Integration and click "Update Avatar"
      </div>
    </div>
    <div>
      <label>bio</label>
      <textarea class="bio" type="text" autocomplete="off"></textarea>
    </div>
    <div>
      <label>keyboard</label>
      <textarea class="keyboard" type="text" autocomplete="off"></textarea>
    </div>
    <div>
      <label>github</label>
      <div class="socialURL">
        <p>https://github.com/</p>
        <input class="github" type="text" value="" placeholder="username" />
      </div>
    </div>
    <div>
      <label>twitter</label>
      <div class="socialURL">
        <p>https://twitter.com/</p>
        <input class="twitter" type="text" value="" placeholder="username" />
      </div>
    </div>
    <div>
      <label>website</label>
      <input class="website" type="text" value="" />
    </div>
    <div>
      <label>badge</label>
      <div class="badgeSelectionContainer"></div>
    </div>
    <button class="edit-profile-submit" type="submit">save</button>
  </form>
</dialog>