VulpesOS/assets/webapps/settings.gaiamobile.org/elements/about.html

<element name="about" extends="section">
  <template>

    <gaia-header action="back" data-href="#root">
      <h1 data-l10n-id="deviceInfo-header"></h1>
    </gaia-header>

    <div>
<!-- VULPES BRAND START -->
      <section class="vulpes-brand" aria-label="Project Vulpes" style="box-sizing:border-box;text-align:center;background:#071d35;color:#f5f8fa;padding:24px 20px;margin:0 0 18px">
        <img src="/shared/resources/branding/vulpes-symbol.png" alt="Vulpes" style="width:112px;height:112px;object-fit:contain">
        <h2 style="background:none;color:inherit;font-size:28px;padding:6px;margin:0">Vulpes 2.7</h2>
        <p style="font-size:16px;margin:8px 0;color:#52c7e8">A community continuation of Firefox OS</p>
        <p style="font-size:13px;line-height:1.5;margin:12px 0">Based on Mozilla&#x27;s open-source Boot to Gecko / Firefox OS code.</p>
        <p style="font-size:12px;line-height:1.5;margin:12px 0 0">Vulpes is an independent community project and is not affiliated with or endorsed by Mozilla.</p>
      </section>
      <!-- VULPES BRAND END -->
      <ul>
        <li class="deviceinfo-phone-num">
          <span data-l10n-id="deviceInfo-MSISDN"></span>
          <small class="deviceInfo-msisdns multiline"></small>
        </li>
        <li>
          <span id="model-name" data-l10n-id="model-name"></span>
          <small data-name="deviceinfo.product_model"></small>
        </li>
        <li>
          <span id="os-version" data-l10n-id="software"></span>
          <small data-name="deviceinfo.software"></small>
        </li>
        <li>
          <span data-l10n-id="last-updated"></span>
          <small class="last-update-date"></small>
        </li>
        <li>
          <a class="menu-item" href="#about-moreInfo">
            <span data-l10n-id="more-info"></span>
          </a>
        </li>
      </ul>

      <header>
        <h2 data-l10n-id="softwareUpdates"></h2>
      </header>
      <ul>
        <li>
          <p data-l10n-id="check-for-updates"></p>
          <span class="button icon icon-dialog">
            <select name="app.update.interval">
              <option value="86400" data-l10n-id="check-update-daily" selected></option>
              <option value="604800" data-l10n-id="check-update-weekly"></option>
              <option value="2592000" data-l10n-id="check-update-monthly"></option>
            </select>
          </span>
        </li>
        <li>
          <button class="check-update-now"
            data-l10n-id="check-update-now"></button>
        </li>
        <li class="update-status description update-status">
          <p>
            <span class="general-information"
              data-l10n-id="checking-for-update"></span>
            <span class="system-update-status"></span>
          </p>
        </li>
        <li>
          <gaia-switch name="addons.auto_update">
            <label data-l10n-id="addons-auto-update"></label>
          </gaia-switch>
        </li>
        <li class="addon-update-notify hidden">
          <gaia-checkbox name="addons.update_notify">
            <label data-l10n-id="addons-update-notify"></label>
          </gaia-checkbox>
        </li>
      </ul>

      <header>
        <h2 data-l10n-id="aboutBrowserOS"></h2>
      </header>
      <ul>
        <li class="description">
          <p data-l10n-id="browser-os-desc"></p>
        </li>
        <li>
          <a class="menu-item" href="#about-yourRights">
            <span data-l10n-id="your-rights"></span>
          </a>
        </li>
        <li>
          <a class="menu-item" href="#about-yourPrivacy">
            <span data-l10n-id="your-privacy"></span>
          </a>
        </li>
        <li>
          <a class="menu-item" href="#about-legal">
            <span data-l10n-id="about-legal-info"></span>
          </a>
        </li>
        <li>
          <a class="menu-item" href="https://www.mozilla.org/credits/">
            <span data-l10n-id="about-credit-info"></span>
          </a>
        </li>
      </ul>
      <header>
        <h2 data-l10n-id="reset-head"></h2>
      </header>
      <ul>
        <li>
          <button class="reset-phone" data-l10n-id="reset-device"></button>
        </li>
      </ul>
    </div>

    <form role="dialog" data-type="confirm" class="reset-phone-dialog" hidden>
      <section>
        <h1 data-l10n-id="reset-warning-title"></h1>
        <p data-l10n-id="reset-warning-body"></p>
      </section>
      <menu>
        <button data-l10n-id="cancel" class="cancel-reset-phone"></button>
        <button data-l10n-id="reset" class="confirm-reset-phone danger"></button>
      </menu>
    </form>

    <panel data-path="panels/about/panel"></panel>

  </template>
</element>