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>

<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="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="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="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="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>
<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>