sound.html

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

    <header>
      <a href="#root"><span class="icon icon-back">back</span></a>
      <h1 data-l10n-id="sound-header"> Sound </h1>
    </header>

    <div>
      <ul>
        <li>
          <label class="pack-switch">
            <input type="checkbox" name="vibration.enabled" checked class="uninit">
            <span data-l10n-id="vibrate">Vibrate</span>
          </label>
        </li>
      </ul>

      <header>
        <h2 data-l10n-id="volume">Volume</h2>
      </header>
      <ul>
        <li class="sound-setting">
          <label class="range-icons volume">
            <p data-l10n-id="media-sound">Media</p>
            <input type="range" name="audio.volume.content" step="1" min="0" value="15" max="15">
          </label>
        </li>
        <li class="sound-setting">
          <label class="range-icons volume">
            <p data-l10n-id="ringer-and-notification-sound">Ringer & Notifications</p>
            <input type="range" name="audio.volume.notification" step="1" min="0" value="15" max="15">
          </label>
        </li>
        <li class="sound-setting">
          <label class="range-icons volume">
            <p data-l10n-id="alarm-sound">Alarm</p>
            <input type="range" name="audio.volume.alarm" step="1" min="0" value="15" max="15">
          </label>
        </li>
      </ul>

      <header>
        <h2 data-l10n-id="tones">Tones</h2>
      </header>
      <ul>
        <li id="ringer" hidden>
          <p data-l10n-id="ringer">Ringer</p>
          <button id="ring-tone-selection" class="icon icon-view" data-l10n-id="change"></button>
        </li>
        <li id="alerts">
          <p data-l10n-id="alerts">Alerts</p>
          <button id="alert-tone-selection" class="icon icon-view" data-l10n-id="change"></button>
        </li>
        <li id="touch-tone-selector" hidden>
          <a data-l10n-id="touch-tones">Audible touch tones</a>
          <span class="button icon icon-dialog">
            <select name="phone.dtmf.type">
              <option value="short" data-l10n-id="touch-tone-short">Short</option>
              <option value="long" data-l10n-id="touch-tone-long">Long</option>
            </select>
          </span>
        </li>
      </ul>

      <header>
        <h2 data-l10n-id="other-sounds">Other Sounds</h2>
      </header>
      <ul>
        <li>
          <label class="pack-checkbox">
            <input type="checkbox" name="phone.ring.keypad" checked>
            <span data-l10n-id="keypad">Keypad</span>
          </label>
        </li>
        <li>
          <label class="pack-checkbox">
            <input type="checkbox" name="camera.shutter.enabled" checked>
            <span data-l10n-id="camera-shutter">Camera Shutter</span>
          </label>
        </li>
        <li>
          <label class="pack-checkbox">
            <input type="checkbox" name="camera.recordingsound.enabled" checked>
            <span data-l10n-id="camera-recordingsound">Camera Recording Sound</span>
          </label>
        </li>
        <li>
          <label class="pack-checkbox">
            <input type="checkbox" name="mail.sent-sound.enabled" checked>
            <span data-l10n-id="sent-mail">Sent Mail</span>
          </label>
        </li>
        <li>
          <label class="pack-checkbox">
            <input type="checkbox" name="message.sent-sound.enabled" checked>
            <span data-l10n-id="sent-message">Sent Message</span>
          </label>
        </li>
        <li>
          <label class="pack-checkbox">
            <input type="checkbox" name="lockscreen.unlock-sound.enabled" checked>
            <span data-l10n-id="unlock-screen">Unlock Screen</span>
          </label>
        </li>
      </ul>
    </div>

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

  </template>
</element>