GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Android Settings UI Mock</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: Arial, Helvetica, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #121212;19    color: #EAEAEA;20  }21 22  /* Status bar */23  .status-bar {24    height: 96px;25    padding: 0 40px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #EAEAEA;30    font-size: 40px;31  }32  .status-right {33    display: flex;34    align-items: center;35    gap: 28px;36  }37 38  /* Search */39  .search-wrap {40    padding: 24px 40px 0 40px;41  }42  .search-bar {43    height: 128px;44    background: #2A2A2A;45    border-radius: 64px;46    display: flex;47    align-items: center;48    padding: 0 40px;49    gap: 28px;50    color: #BDBDBD;51    font-size: 52px;52  }53 54  /* Battery info row */55  .info-row {56    display: flex;57    align-items: center;58    gap: 28px;59    padding: 26px 40px 14px 40px;60    color: #CFCFCF;61    font-size: 42px;62  }63  .checkbox {64    width: 40px;65    height: 40px;66    border-radius: 6px;67    border: 4px solid #999;68    box-sizing: border-box;69  }70 71  /* List section */72  .list {73    padding: 0 40px 40px 40px;74  }75  .item {76    display: flex;77    gap: 36px;78    padding: 40px 0;79    border-bottom: 1px solid rgba(255,255,255,0.06);80  }81  .icon {82    width: 88px;83    height: 88px;84    min-width: 88px;85    border-radius: 18px;86    background: #1E1E1E;87    display: flex;88    align-items: center;89    justify-content: center;90  }91  .texts .title {92    font-size: 56px;93    line-height: 1.1;94    color: #F5F5F5;95    margin-bottom: 18px;96  }97  .texts .sub {98    font-size: 38px;99    color: #A9A9A9;100  }101 102  /* Small footer spacing mimic */103  .bottom-space {104    height: 120px;105  }106 107  /* Simple SVG defaults */108  svg {109    width: 64px;110    height: 64px;111    fill: none;112    stroke: #EAEAEA;113    stroke-width: 6;114    stroke-linecap: round;115    stroke-linejoin: round;116  }117</style>118</head>119<body>120<div id="render-target">121 122  <!-- Status Bar -->123  <div class="status-bar">124    <div class="status-left">12:16</div>125    <div class="status-right">126      <!-- Cloud / indicators simplified as squares -->127      <div style="width:34px;height:34px;background:#EAEAEA;border-radius:6px;"></div>128      <div style="width:34px;height:34px;background:#EAEAEA;border-radius:6px;"></div>129      <!-- Wi-Fi icon -->130      <svg viewBox="0 0 24 24">131        <path d="M2 8c5-4 15-4 20 0"/>132        <path d="M6 12c3-2 9-2 12 0"/>133        <path d="M10 16c2-1 4-1 6 0"/>134        <circle cx="12" cy="20" r="1.5" fill="#EAEAEA" stroke="none"/>135      </svg>136      <!-- Battery icon -->137      <svg viewBox="0 0 24 24">138        <rect x="3" y="6" width="16" height="12" rx="2"></rect>139        <rect x="19.5" y="10" width="2.5" height="4" rx="1" fill="#EAEAEA" stroke="none"></rect>140        <rect x="5" y="8" width="12" height="8" rx="1" fill="#EAEAEA" stroke="none" />141      </svg>142    </div>143  </div>144 145  <!-- Search -->146  <div class="search-wrap">147    <div class="search-bar">148      <svg viewBox="0 0 24 24">149        <circle cx="10" cy="10" r="7"></circle>150        <line x1="15.5" y1="15.5" x2="22" y2="22"></line>151      </svg>152      <div>Search settings</div>153    </div>154  </div>155 156  <!-- Battery info row -->157  <div class="info-row">158    <div class="checkbox"></div>159    <div>92% - 19 min left until full</div>160  </div>161 162  <!-- Settings list -->163  <div class="list">164 165    <!-- Storage -->166    <div class="item">167      <div class="icon">168        <svg viewBox="0 0 24 24">169          <rect x="4" y="5" width="16" height="3" rx="1"></rect>170          <rect x="4" y="10" width="16" height="3" rx="1"></rect>171          <rect x="4" y="15" width="16" height="3" rx="1"></rect>172        </svg>173      </div>174      <div class="texts">175        <div class="title">Storage</div>176        <div class="sub">17% used - 106 GB free</div>177      </div>178    </div>179 180    <!-- Sound & vibration -->181    <div class="item">182      <div class="icon">183        <svg viewBox="0 0 24 24">184          <polygon points="4,10 9,10 13,6 13,18 9,14 4,14" fill="none" stroke="#EAEAEA"></polygon>185          <path d="M16 8c2 2 2 6 0 8"></path>186          <path d="M18 6c3 3 3 10 0 13"></path>187        </svg>188      </div>189      <div class="texts">190        <div class="title">Sound & vibration</div>191        <div class="sub">Volume, haptics, Do Not Disturb</div>192      </div>193    </div>194 195    <!-- Display -->196    <div class="item">197      <div class="icon">198        <svg viewBox="0 0 24 24">199          <rect x="3" y="5" width="18" height="12" rx="2"></rect>200          <line x1="8" y1="19" x2="16" y2="19"></line>201        </svg>202      </div>203      <div class="texts">204        <div class="title">Display</div>205        <div class="sub">Dark theme, font size, brightness</div>206      </div>207    </div>208 209    <!-- Wallpaper & style -->210    <div class="item">211      <div class="icon">212        <svg viewBox="0 0 24 24">213          <circle cx="10" cy="10" r="6"></circle>214          <circle cx="7.5" cy="8" r="1.2" fill="#EAEAEA" stroke="none"></circle>215          <circle cx="11" cy="7" r="1.2" fill="#EAEAEA" stroke="none"></circle>216          <circle cx="13" cy="11" r="1.2" fill="#EAEAEA" stroke="none"></circle>217        </svg>218      </div>219      <div class="texts">220        <div class="title">Wallpaper & style</div>221        <div class="sub">Colors, themed icons, app grid</div>222      </div>223    </div>224 225    <!-- Accessibility -->226    <div class="item">227      <div class="icon">228        <svg viewBox="0 0 24 24">229          <circle cx="12" cy="5" r="2"></circle>230          <path d="M3 9h18"></path>231          <path d="M12 9v9"></path>232          <path d="M7 22l5-4 5 4"></path>233        </svg>234      </div>235      <div class="texts">236        <div class="title">Accessibility</div>237        <div class="sub">Display, interaction, audio</div>238      </div>239    </div>240 241    <!-- Security & privacy -->242    <div class="item">243      <div class="icon">244        <svg viewBox="0 0 24 24">245          <path d="M12 3l8 3v6c0 6-8 9-8 9s-8-3-8-9V6l8-3z"></path>246          <path d="M9 12h6"></path>247        </svg>248      </div>249      <div class="texts">250        <div class="title">Security & privacy</div>251        <div class="sub">App security, device lock, permissions</div>252      </div>253    </div>254 255    <!-- Location -->256    <div class="item">257      <div class="icon">258        <svg viewBox="0 0 24 24">259          <path d="M12 22s-6-6-6-11a6 6 0 1 1 12 0c0 5-6 11-6 11z"></path>260          <circle cx="12" cy="11" r="2" fill="#EAEAEA" stroke="none"></circle>261        </svg>262      </div>263      <div class="texts">264        <div class="title">Location</div>265        <div class="sub">Off</div>266      </div>267    </div>268 269    <!-- Safety & emergency -->270    <div class="item">271      <div class="icon">272        <svg viewBox="0 0 24 24">273          <path d="M12 3v18"></path>274          <path d="M3 12h18"></path>275          <path d="M5 5l14 14"></path>276          <path d="M19 5L5 19"></path>277        </svg>278      </div>279      <div class="texts">280        <div class="title">Safety & emergency</div>281        <div class="sub">Emergency SOS, medical info, alerts</div>282      </div>283    </div>284 285    <div class="bottom-space"></div>286  </div>287 288</div>289</body>290</html>