GD-ML/AndroidCode

1<html>2<head>3  <meta charset="utf-8">4  <title>Display Settings UI</title>5  <style>6    body { margin: 0; padding: 0; background: transparent; }7    #render-target {8      width: 1080px;9      height: 2400px;10      position: relative;11      overflow: hidden;12      background: #ffffff;13      font-family: Roboto, Arial, sans-serif;14      color: #000;15    }16 17    /* Status bar */18    .status-bar {19      position: absolute;20      top: 0;21      left: 0;22      width: 100%;23      height: 160px;24      background: #cfcfcf;25    }26    .status-left {27      position: absolute;28      left: 48px;29      top: 50%;30      transform: translateY(-50%);31      font-size: 42px;32      color: #222;33      letter-spacing: 1px;34    }35    .status-right {36      position: absolute;37      right: 40px;38      top: 50%;39      transform: translateY(-50%);40      display: flex;41      gap: 28px;42      align-items: center;43    }44    .icon { width: 44px; height: 44px; }45 46    /* App bar */47    .appbar {48      position: absolute;49      top: 160px;50      left: 0;51      width: 100%;52      height: 180px;53      background: #ffffff;54      display: flex;55      align-items: center;56      border-bottom: 1px solid #e6e6e6;57    }58    .back-btn {59      width: 88px;60      height: 88px;61      margin-left: 40px;62      display: flex;63      align-items: center;64      justify-content: center;65    }66    .title {67      margin-left: 20px;68      font-size: 64px;69      font-weight: 600;70      color: #222;71    }72 73    /* Content */74    .content {75      position: absolute;76      top: 340px;77      left: 0;78      right: 0;79      bottom: 0;80      padding-top: 20px;81    }82    .section-title {83      font-size: 42px;84      font-weight: 700;85      letter-spacing: 2px;86      color: #1a1a1a;87      margin-left: 64px;88      margin-bottom: 40px;89    }90    .row {91      display: flex;92      justify-content: space-between;93      align-items: center;94      padding: 40px 64px;95    }96    .row .label {97      font-size: 56px;98      color: #111;99    }100 101    /* Radio buttons */102    .radio {103      width: 80px;104      height: 80px;105      border-radius: 50%;106      border: 8px solid #9e9e9e;107      box-sizing: border-box;108    }109    .radio.selected {110      border-color: #f26f3a;111      position: relative;112    }113    .radio.selected::after {114      content: "";115      position: absolute;116      top: 50%;117      left: 50%;118      transform: translate(-50%, -50%);119      width: 34px;120      height: 34px;121      border-radius: 50%;122      border: 8px solid #f26f3a;123    }124 125    /* Gesture bar */126    .gesture {127      position: absolute;128      bottom: 42px;129      left: 50%;130      transform: translateX(-50%);131      width: 320px;132      height: 12px;133      background: #8f8f8f;134      border-radius: 8px;135    }136  </style>137</head>138<body>139  <div id="render-target">140    <!-- Status bar -->141    <div class="status-bar">142      <div class="status-left">8:47</div>143      <div class="status-right">144        <!-- simple notification dots -->145        <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#757575"/></svg>146        <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#757575"/></svg>147        <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#757575"/></svg>148        <!-- wifi icon -->149        <svg class="icon" viewBox="0 0 24 24">150          <path d="M2 8c5-5 15-5 20 0" stroke="#616161" stroke-width="2" fill="none"/>151          <path d="M5 11c3.5-3.5 10.5-3.5 14 0" stroke="#616161" stroke-width="2" fill="none"/>152          <path d="M8 14c2-2 6-2 8 0" stroke="#616161" stroke-width="2" fill="none"/>153          <circle cx="12" cy="17" r="2" fill="#616161"/>154        </svg>155        <!-- battery icon -->156        <svg class="icon" viewBox="0 0 24 24">157          <rect x="1" y="6" width="18" height="12" rx="2" ry="2" stroke="#616161" stroke-width="2" fill="none"/>158          <rect x="3" y="8" width="14" height="8" fill="#616161"/>159          <rect x="20" y="9" width="3" height="6" fill="#616161"/>160        </svg>161      </div>162    </div>163 164    <!-- App bar -->165    <div class="appbar">166      <div class="back-btn">167        <svg width="56" height="56" viewBox="0 0 24 24">168          <path d="M15 18l-6-6 6-6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>169        </svg>170      </div>171      <div class="title">Display</div>172    </div>173 174    <!-- Content -->175    <div class="content">176      <div class="section-title">DARK THEME</div>177 178      <div class="row">179        <div class="label">Use System Default</div>180        <div class="radio"></div>181      </div>182 183      <div class="row">184        <div class="label">Light</div>185        <div class="radio selected"></div>186      </div>187 188      <div class="row">189        <div class="label">Dark</div>190        <div class="radio"></div>191      </div>192    </div>193 194    <!-- Gesture handle -->195    <div class="gesture"></div>196  </div>197</body>198</html>