extension/popup.html

Rama main · réplica de lectura del repositorio original.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Cloudmark</title>
    <link rel="stylesheet" href="/src/style.css" />
  </head>
  <body>
    <div class="app">
      <header class="app-header">
        <div class="brand">
          <span class="brand-dot" aria-hidden="true"></span>
          <span id="brand-name" class="brand-name">Cloudmark</span>
        </div>
        <button type="button" id="header-toggle" class="icon-button" aria-label="Settings" title="Settings">
          <svg id="icon-gear" class="icon-fill" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" />
          </svg>
          <svg id="icon-back" class="icon hidden" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path d="M15 18l-6-6 6-6" />
          </svg>
        </button>
      </header>

      <main id="view-save" class="view">
        <form id="save-form" novalidate>
          <div class="field">
            <label for="title-input" id="label-title"></label>
            <input id="title-input" type="text" maxlength="200" autocomplete="off" spellcheck="false" />
          </div>
          <div class="field">
            <label for="url-input" id="label-url"></label>
            <input id="url-input" type="text" maxlength="2048" autocomplete="off" spellcheck="false" />
          </div>
          <div class="field">
            <label for="description-input" id="label-description"></label>
            <textarea id="description-input" rows="2" maxlength="2000"></textarea>
          </div>
          <div class="field">
            <label for="category-select" id="label-category"></label>
            <select id="category-select"></select>
            <input id="category-new" type="text" maxlength="50" class="hidden" autocomplete="off" spellcheck="false" />
          </div>
          <p id="status" class="status" role="status" aria-live="polite"></p>
          <button type="submit" id="save-button" class="button button-primary"></button>
          <div id="success-actions" class="success-actions hidden">
            <a id="open-collection" class="button button-secondary" href="#" target="_blank" rel="noreferrer noopener"></a>
            <button type="button" id="save-another" class="button button-ghost"></button>
          </div>
        </form>
      </main>

      <main id="view-settings" class="view hidden">
        <form id="settings-form" novalidate>
          <p id="settings-hint" class="settings-hint hidden"></p>
          <div class="field">
            <label for="settings-mark" id="label-settings-mark"></label>
            <input id="settings-mark" type="text" maxlength="64" autocomplete="off" spellcheck="false" />
            <p class="field-error" aria-live="polite"></p>
          </div>
          <div class="field">
            <label for="settings-token" id="label-settings-token"></label>
            <div class="input-with-button">
              <input id="settings-token" type="password" maxlength="128" autocomplete="off" spellcheck="false" />
              <button type="button" id="settings-reveal" class="button button-ghost button-small" aria-pressed="false"></button>
            </div>
            <p class="field-error" aria-live="polite"></p>
          </div>
          <div class="field">
            <label for="settings-base-url" id="label-settings-base-url"></label>
            <input
              id="settings-base-url"
              type="url"
              placeholder="https://cloudmark.site"
              autocomplete="url"
              spellcheck="false"
            />
            <p class="field-error" aria-live="polite"></p>
          </div>
          <p id="settings-status" class="status" role="status" aria-live="polite"></p>
          <button type="submit" id="settings-save" class="button button-primary"></button>
        </form>
      </main>
    </div>
    <script type="module" src="/src/popup.ts"></script>
  </body>
</html>