Android-Settings
/
index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>仿Android Setting</title>
  <link rel="stylesheet" href="./css/mdui.css">
  <script src="./js/mdui.js"></script>
  <style>
    .mdui-textfield-label {
      margin-left: 10px;
    }

    .mdui-appbar {
      height: 64px;
      top: 0;
      right: 0;
      left: 0;
      width: 100%;
      z-index: 999;
      position: fixed;
    }

    .mdui-drawer,
    .mdui-list#main {
      margin-top: 65px;
    }
  </style>

<body class="mdui-drawer-body-left" onload="new mdui.Drawer('#drawer').close();">

  <div class="mdui-appbar">
    <div class="mdui-toolbar mdui-color-teal">
      <a href="javascript:;" class="mdui-btn mdui-btn-icon" onclick="new mdui.Drawer('#drawer').toggle();"><i
          class="mdui-icon material-icons">menu</i></a>
      <a href="javascript:;" class="mdui-typo-headline">设置</a>
    </div>
  </div>

  <div class="mdui-drawer" id="drawer">
    <ul class="mdui-list">
      <li class="mdui-subheader">无线和网络</li>
      <a href="./settings/WLAN.html">
        <li class="mdui-list-item mdui-ripple">
          <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">network_wifi</i>
          <div class="mdui-list-item-content">WLAN</div>
        </li>
      </a>
      <a href="./settings/bluetooth.html">
        <li class="mdui-list-item mdui-ripple">
          <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">bluetooth</i>
          <div class="mdui-list-item-content">蓝牙</div>
        </li>
      </a>
      <a href="./settings/more.html">
        <li class="mdui-list-item mdui-ripple">
          <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">more_horiz</i>
          <div class="mdui-list-item-content">更多</div>
        </li>
      </a>
      <li class="mdui-subheader">设备</li>
      <a href="./settings/display.html">
        <li class="mdui-list-item mdui-ripple">
          <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">brightness_6</i>
          <div class="mdui-list-item-content">显示</div>
        </li>
      </a>
      <a href="./settings/notifi.html">
        <li class="mdui-list-item mdui-ripple">
          <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">notifications</i>
          <div class="mdui-list-item-content">通知</div>
        </li>
      </a>
      <a href="./settings/sound.html">
        <li class="mdui-list-item mdui-ripple">
          <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">volume_up</i>
          <div class="mdui-list-item-content">声音</div>
        </li>
      </a>
      <a href="./settings/apps.html">
        <li class="mdui-list-item mdui-ripple">
          <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">adb</i>
          <div class="mdui-list-item-content">应用</div>
        </li>
      </a>
      <a href="./settings/storage.html">
        <li class="mdui-list-item mdui-ripple">
          <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">storage</i>
          <div class="mdui-list-item-content">存储</div>
        </li>
      </a>
      <a href="./settings/battery.html">
        <li class="mdui-list-item mdui-ripple">
          <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">battery_std</i>
          <div class="mdui-list-item-content">电池</div>
        </li>
      </a>
      <a href="./settings/memory.html">
        <li class="mdui-list-item mdui-ripple">
          <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">memory</i>
          <div class="mdui-list-item-content">内存</div>
        </li>
      </a>
      <li class="mdui-subheader">个人</li>
      <a href="./settings/location.html">
        <li class="mdui-list-item mdui-ripple">
          <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">location_on</i>
          <div class="mdui-list-item-content">位置信息</div>
        </li>
      </a>
      <a href="./settings/security.html">
        <li class="mdui-list-item mdui-ripple">
          <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">lock</i>
          <div class="mdui-list-item-content">安全</div>
        </li>
      </a>
      <a href="./settings/accounts.html">
        <li class="mdui-list-item mdui-ripple">
          <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">account_box</i>
          <div class="mdui-list-item-content">账号</div>
        </li>
      </a>
      <a href="./settings/language.html">
        <li class="mdui-list-item mdui-ripple">
          <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">language</i>
          <div class="mdui-list-item-content">语言和输入法</div>
        </li>
      </a>
      <a href="./settings/backup.html">
        <li class="mdui-list-item mdui-ripple">
          <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">backup</i>
          <div class="mdui-list-item-content">备份和重置</div>
        </li>
      </a>
      <li class="mdui-subheader">系统</li>
      <a href="./settings/date.html">
        <li class="mdui-list-item mdui-ripple">
          <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">access_time</i>
          <div class="mdui-list-item-content">日期和时间</div>
        </li>
      </a>
      <a href="./settings/access.html">
        <li class="mdui-list-item mdui-ripple">
          <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">accessibility</i>
          <div class="mdui-list-item-content">无障碍</div>
        </li>
      </a>
      <a href="./settings/print.html">
        <li class="mdui-list-item mdui-ripple">
          <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">print</i>
          <div class="mdui-list-item-content">打印</div>
        </li>
      </a>
      <a href="./settings/developer.html">
        <li class="mdui-list-item mdui-ripple">
          <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">code</i>
          <div class="mdui-list-item-content">开发者选项</div>
        </li>
      </a>
      <a href="./settings/about.html">
        <li class="mdui-list-item mdui-ripple">
          <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">info_outline</i>
          <div class="mdui-list-item-content">关于平板电脑</div>
        </li>
      </a>
    </ul>
  </div>

  <ul class="mdui-list" id="main">
    <label class="mdui-textfield-label">无线和网络</label>
    <a href="./settings/WLAN.html">
      <li class="mdui-list-item mdui-ripple">
        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">network_wifi</i>
        <div class="mdui-list-item-content">
          <div class="mdui-list-item-title">WLAN</div>
          <div class="mdui-list-item-text">已停用</div>
        </div>
      </li>
    </a>
    <a href="./settings/bluetooth.html">
      <li class="mdui-list-item mdui-ripple">
        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">bluetooth</i>
        <div class="mdui-list-item-content">
          <div class="mdui-list-item-title">蓝牙</div>
          <div class="mdui-list-item-text">已停用</div>
        </div>
      </li>
    </a>
    <a href="./settings/more.html">
      <li class="mdui-list-item mdui-ripple">
        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">more_horiz</i>
        <div class="mdui-list-item-content">
          <div class="mdui-list-item-title">更多</div>
        </div>
      </li>
    </a>
    <li class="mdui-divider"></li>
    <label class="mdui-textfield-label">设备</label>
    <a href="./settings/display.html">
      <li class="mdui-list-item mdui-ripple">
        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">brightness_6</i>
        <div class="mdui-list-item-content">
          <div class="mdui-list-item-title">显示</div>
          <div class="mdui-list-item-text">自动调节亮度功能已关闭</div>
        </div>
      </li>
    </a>
    <a href="./settings/notifi.html">
      <li class="mdui-list-item mdui-ripple">
        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">notifications</i>
        <div class="mdui-list-item-content">
          <div class="mdui-list-item-title">通知</div>
          <div class="mdui-list-item-text">已允许所有应用发送通知</div>
        </div>
      </li>
    </a>
    <a href="./settings/sound.html">
      <li class="mdui-list-item mdui-ripple">
        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">volume_up</i>
        <div class="mdui-list-item-content">
          <div class="mdui-list-item-title">声音</div>
          <div class="mdui-list-item-text">铃声音量为71%</div>
        </div>
      </li>
    </a>
    <a href="./settings/apps.html">
      <li class="mdui-list-item mdui-ripple">
        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">adb</i>
        <div class="mdui-list-item-content">
          <div class="mdui-list-item-title">应用</div>
          <div class="mdui-list-item-text">已安装30个应用</div>
        </div>
      </li>
    </a>
    <a href="./settings/storage.html">
      <li class="mdui-list-item mdui-ripple">
        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">storage</i>
        <div class="mdui-list-item-content">
          <div class="mdui-list-item-title">存储</div>
          <div class="mdui-list-item-text">已使用45.84GB(共128.23GB)</div>
        </div>
      </li>
    </a>
    <a href="./settings/battery.html">
      <li class="mdui-list-item mdui-ripple">
        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">battery_std</i>
        <div class="mdui-list-item-content">
          <div class="mdui-list-item-title">电池</div>
          <div class="mdui-list-item-text">99% - 正在通过交流电源供电</div>
        </div>
      </li>
    </a>
    <a href="./settings/memory.html">
      <li class="mdui-list-item mdui-ripple">
        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">memory</i>
        <div class="mdui-list-item-content">
          <div class="mdui-list-item-title">内存</div>
          <div class="mdui-list-item-text">平均内存用量为1.2GB，共12.0GB</div>
        </div>
      </li>
    </a>
    <li class="mdui-divider"></li>
    <label class="mdui-textfield-label">个人</label>
    <a href="./settings/location.html">
      <li class="mdui-list-item mdui-ripple">
        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">location_on</i>
        <div class="mdui-list-item-content">
          <div class="mdui-list-item-title">位置信息</div>
          <div class="mdui-list-item-text">开启/仅限设备</div>
        </div>
      </li>
    </a>
    <a href="./settings/security.html">
      <li class="mdui-list-item mdui-ripple">
        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">lock</i>
        <div class="mdui-list-item-content">
          <div class="mdui-list-item-title">安全</div>
        </div>
      </li>
    </a>
    <a href="./settings/accounts.html">
      <li class="mdui-list-item mdui-ripple">
        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">account_box</i>
        <div class="mdui-list-item-content">
          <div class="mdui-list-item-title">账号</div>
        </div>
      </li>
    </a>
    <a href="./settings/language.html">
      <li class="mdui-list-item mdui-ripple">
        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">language</i>
        <div class="mdui-list-item-content">
          <div class="mdui-list-item-title">语言和输入法</div>
          <div class="mdui-list-item-text">中文（中国）</div>
        </div>
      </li>
    </a>
    <a href="./settings/backup.html">
      <li class="mdui-list-item mdui-ripple">
        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">backup</i>
        <div class="mdui-list-item-content">
          <div class="mdui-list-item-title">备份和重置</div>
        </div>
      </li>
    </a>
    <li class="mdui-divider"></li>
    <label class="mdui-textfield-label">系统</label>
    <a href="./settings/date.html">
      <li class="mdui-list-item mdui-ripple">
        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">access_time</i>
        <div class="mdui-list-item-content">
          <div class="mdui-list-item-title">日期和时间</div>
          <div class="mdui-list-item-text">GMT+08:00 中国标准时间</div>
        </div>
      </li>
    </a>
    <a href="./settings/access.html">
      <li class="mdui-list-item mdui-ripple">
        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">accessibility</i>
        <div class="mdui-list-item-content">
          <div class="mdui-list-item-title">无障碍</div>
        </div>
      </li>
    </a>
    <a href="./settings/print.html">
      <li class="mdui-list-item mdui-ripple">
        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">print</i>
        <div class="mdui-list-item-content">
          <div class="mdui-list-item-title">打印</div>
          <div class="mdui-list-item-text">108项打印任务</div>
        </div>
      </li>
    </a>
    <a href="./settings/developer.html">
      <li class="mdui-list-item mdui-ripple">
        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">code</i>
        <div class="mdui-list-item-content">
          <div class="mdui-list-item-title">开发者选项</div>
        </div>
      </li>
    </a>
    <a href="./settings/about.html">
      <li class="mdui-list-item mdui-ripple">
        <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-teal">info_outline</i>
        <div class="mdui-list-item-content">
          <div class="mdui-list-item-title">关于平板电脑</div>
          <div class="mdui-list-item-text">Android 7.1.1</div>
        </div>
      </li>
    </a>
  </ul>
</body>

</html>