GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>General Settings UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #FFFFFF;19    font-family: Roboto, Arial, sans-serif;20    color: #111;21  }22 23  /* Top bars */24  .status-bar {25    height: 110px;26    background: #0e457f;27    color: #fff;28    display: flex;29    align-items: center;30    justify-content: space-between;31    padding: 0 36px;32    box-sizing: border-box;33    font-size: 42px;34    letter-spacing: 0.5px;35  }36  .status-icons {37    display: flex;38    align-items: center;39    gap: 28px;40  }41  .app-bar {42    height: 160px;43    background: #2c66a6;44    color: #fff;45    display: flex;46    align-items: center;47    padding: 0 36px;48    box-sizing: border-box;49  }50  .app-title {51    font-size: 56px;52    font-weight: 600;53    margin-left: 24px;54  }55  .back-btn {56    width: 72px;57    height: 72px;58    display: inline-flex;59    align-items: center;60    justify-content: center;61  }62 63  /* Content */64  .content {65    padding: 24px 0 0;66    box-sizing: border-box;67    background: #FAFAFA;68    min-height: calc(2400px - 110px - 160px - 150px);69  }70  .section {71    padding: 30px 48px 0;72  }73  .section-title {74    color: #55c3d6;75    font-size: 44px;76    font-weight: 600;77    margin-bottom: 18px;78  }79  .item {80    padding: 32px 0;81  }82  .item .label-row {83    display: flex;84    align-items: center;85    justify-content: space-between;86    gap: 16px;87  }88  .item .label {89    font-size: 46px;90    font-weight: 500;91    color: #111;92    line-height: 1.2;93  }94  .item .sub {95    font-size: 36px;96    color: #757575;97    margin-top: 10px;98    line-height: 1.35;99  }100  .divider {101    height: 1px;102    background: #E0E0E0;103    margin: 32px 0 0;104  }105  .color-square {106    width: 56px;107    height: 56px;108    background: #2c66a6;109    border: 2px solid #355e95;110    border-radius: 8px;111    flex-shrink: 0;112  }113 114  /* Bottom gesture bar */115  .bottom-area {116    position: absolute;117    left: 0; right: 0; bottom: 0;118    height: 150px;119    background: #000;120    display: flex;121    align-items: center;122    justify-content: center;123  }124  .home-pill {125    width: 280px;126    height: 16px;127    background: #D9D9D9;128    border-radius: 12px;129  }130</style>131</head>132<body>133<div id="render-target">134  <!-- Status bar -->135  <div class="status-bar">136    <div class="time">12:21</div>137    <div class="status-icons">138      <!-- Simple status icons -->139      <svg width="40" height="40" viewBox="0 0 24 24">140        <path d="M12 20c3.5-4.5 7-6 10-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>141        <path d="M2 14c3 0 6 1.5 10 6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>142        <circle cx="12" cy="16" r="1.5" fill="#fff"/>143      </svg>144      <svg width="40" height="40" viewBox="0 0 24 24">145        <rect x="2" y="7" width="18" height="10" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"/>146        <rect x="3.5" y="8.5" width="12" height="7" fill="#fff"/>147        <rect x="21" y="9" width="1.5" height="6" fill="#fff"/>148      </svg>149      <svg width="40" height="40" viewBox="0 0 24 24">150        <circle cx="12" cy="12" r="2.5" fill="#fff"/>151      </svg>152    </div>153  </div>154 155  <!-- App bar -->156  <div class="app-bar">157    <div class="back-btn">158      <svg width="48" height="48" viewBox="0 0 48 48">159        <path d="M30 12 L16 24 L30 36" stroke="#fff" stroke-width="4.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>160      </svg>161    </div>162    <div class="app-title">General</div>163  </div>164 165  <!-- Content -->166  <div class="content">167    <div class="section">168      <div class="section-title">Ge