fea: 添加设置功能

index.html

@@ -38,8 +38,9 @@
         <button class="btn big" data-act="levels">关卡选择</button>
         <button class="btn" data-act="editor">自制关卡</button>
         <button class="btn" data-act="help">操作说明</button>
-        <button class="btn small" data-act="wipe">清除存档</button>
+        <button class="btn" data-act="settings">设置</button>
       </div>
+      <div id="title-user" class="title-user"></div>
       <div class="foot">非商业同人作品 · 致敬 I Wanna Be The Guy / I Wanna Be The Creator · 素材与代码原创</div>
     </div>
 
@@ -134,6 +135,34 @@
       </div>
     </div>
 
+    <!-- ===== SETTINGS ===== -->
+    <div class="screen hidden" id="scr-settings">
+      <div class="panel">
+        <div class="panel-head">
+          <h2>设置</h2>
+          <button class="btn tiny" data-act="back">返回</button>
+        </div>
+        <div class="set-body">
+          <div class="set-row">
+            <label class="set-lab" for="set-username">用户名</label>
+            <input id="set-username" class="set-in" maxlength="16" placeholder="无名氏">
+            <span class="set-hint">显示在标题界面</span>
+          </div>
+          <div class="set-row col">
+            <label class="set-lab">手机操作按钮</label>
+            <span class="set-hint">拖动按钮调整位置，拖动右下角圆点调整大小（仅移动端生效）</span>
+            <div id="touch-preview" class="touch-preview">
+              <div class="tp-tip">拖动按钮移动位置 · 拖动右下角圆点缩放大小</div>
+            </div>
+          </div>
+        </div>
+        <div class="modal-btns set-btns">
+          <button class="btn tiny" data-act="set-reset">恢复默认</button>
+          <button class="btn tiny go" data-act="set-ok">确定</button>
+        </div>
+      </div>
+    </div>
+
     <!-- ===== EDITOR ===== -->
     <div class="screen hidden" id="scr-editor">
       <div class="panel">