GD-ML/AndroidCode
13.4k
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>Settings UI</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #222426; /* dark app surface */20 color: #EDEDED;21 border-radius: 0;22 }23 24 /* Status bar */25 .status-bar {26 position: absolute;27 top: 0;28 left: 0;29 width: 1080px;30 height: 100px;31 display: flex;32 align-items: center;33 padding: 0 36px;34 box-sizing: border-box;35 color: #FFFFFF;36 font-weight: 600;37 font-size: 40px;38 }39 .status-left { flex: 1; display: flex; align-items: center; gap: 18px; }40 .status-right { display: flex; align-items: center; gap: 24px; }41 .status-icon svg { width: 48px; height: 48px; fill: none; stroke: #FFFFFF; stroke-width: 3; }42 43 /* App bar */44 .app-bar {45 position: absolute;46 top: 100px;47 left: 0;48 width: 1080px;49 height: 140px;50 display: flex;51 align-items: center;52 padding: 0 36px;53 box-sizing: border-box;54 }55 .back-btn {56 width: 72px;57 height: 72px;58 display: inline-flex;59 align-items: center;60 justify-content: center;61 margin-right: 16px;62 }63 .back-btn svg { width: 60px; height: 60px; fill: none; stroke: #EDEDED; stroke-width: 7; }64 .title {65 font-size: 62px;66 font-weight: 700;67 letter-spacing: 0.5px;68 }69 70 /* Content list */71 .content {72 position: absolute;73 top: 240px;74 left: 0;75 width: 1080px;76 height: 2060px;77 box-sizing: border-box;78 padding: 8px 0 120px;79 }80 81 .section-title {82 color: #5FB3FF;83 font-weight: 700;84 font-size: 40px;85 padding: 24px 36px 12px;86 }87 88 .item {89 display: flex;90 align-items: center;91 justify-content: space-between;92 padding: 28px 36px;93 box-sizing: border-box;94 border-top: 1px solid rgba(255,255,255,0.04);95 }96 .item:first-of-type { border-top: none; }97 98 .texts {99 max-width: 860px;100 }101 .label {102 font-size: 40px;103 line-height: 52px;104 color: #F5F5F5;105 }106 .subtext {107 font-size: 28px;108 line-height: 38px;109 color: #A9B0B6;110 margin-top: 6px;111 }112 113 .checkbox {114 width: 64px;115 height: 64px;116 border: 3px solid #8A8E92;117 border-radius: 10px;118 box-sizing: border-box;119 display: inline-flex;120 align-items: center;121 justify-content: center;122 background: transparent;123 }124 .checkbox.checked {125 border-color: #2196F3;126 background: #2196F3;127 }128 .checkbox.disabled {129 border-color: #5A5E62;130 opacity: 0.6;131 }132 .item.disabled .label,133 .item.disabled .subtext {134 color: #81868B;135 }136 137 .checkmark {138 width: 44px;139 height: 44px;140 }141 .checkmark svg { width: 44px; height: 44px; fill: none; stroke: #FFFFFF; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }142 143 /* Bottom navigation pill */144 .nav-pill {145 position: absolute;146 bottom: 36px;147 left: 50%;148 transform: translateX(-50%);149 width: 360px;150 height: 22px;151 background: #E6E6E6;152 border-radius: 100px;153 opacity: 0.9;154 }155</style>156</head>157<body>158<div id="render-target">159 160 <!-- Status bar -->161 <div class="status-bar">162 <div class="status-left">163 <div>9:25</div>164 <!-- Simple mail icon -->165 <div class="status-icon">166 <svg viewBox="0 0 24 24">167 <path d="M3 6h18v12H3z"></path>168 <path d="M3 6l9 6 9-6" stroke="#FFFFFF"></path>169 </svg>170 </div>171 <!-- Cloud icon -->172 <div class="status-icon">173 <svg viewBox="0 0 24 24">174 <path d="M7 16h9a4 4 0 0 0 0-8 6 6 0 0 0-11 2 3 3 0 0 0 2 6z"></path>175 </svg>176 </div>177 </div>178 <div class="status-right">179 <!-- Wi-Fi icon -->180 <div class="status-icon">181 <svg viewBox="0 0 24 24">182 <path d="M2 8c5-4 15-4 20 0"></path>183 <path d="M5 12c3-3 11-3 14 0"></path>184 <path d="M8 16c2-2 6-2 8 0"></path>185 <circle cx="12" cy="19" r="1.5" fill="#FFFFFF" stroke="none"></circle>186 </svg>187 </div>188 <!-- Battery icon -->189 <div class="status-icon">190 <svg viewBox="0 0 24 24">191 <rect x="3" y="6" width="16" height="12" rx="2"></rect>192 <rect x="19" y="10" width="2" height="4" rx="1" fill="#FFFFFF" stroke="none"></rect>193 <rect x="5" y="8" width="12" height="8" fill="#FFFFFF" stroke="none"></rect>194 </svg>195 </div>196 </div>197 </div>198 199 <!-- App bar -->200 <div class="app-bar">201 <div class="back-btn" aria-label="Back">202 <svg viewBox="0 0 24 24">203 <path d="M15 19l-7-7 7-7"></path>204 </svg>205 </div>206 <div class="title">Settings</div>207 </div>208 209 <!-- Content -->210 <div class="content">211 <div class="section-title">General</div>212 213 <div class="item">214 <div class="texts">215 <div class="label">Download over Wi‑Fi only</div>216 <div class="subtext">Reduces data usage</div>217 </div>218 <div class="checkbox checked" aria-checked="true">219 <div class="checkmark">220 <svg viewBox="0 0 24 24">221 <path d="M5 13l4 4 10-10"></path>222 </svg>223 </div>224 </div>225 </div>226 227 <div class="item">228 <div class="texts">229 <div class="label">Enable PDF uploading</div>230 <div class="subtext">From downloads, mail, or other apps</div>231 </div>232 <div class="checkbox" aria-checked="false"></div>233 </div>234 235 <div class="item">236 <div class="texts">237 <div class="label">Save notes, highlights, and bookmarks in Google Drive</div>238 <div class="subtext">Off</div>239 </div>240 <div class="checkbox" aria-checked="false"></div>241 </div>242 243 <div class="item">244 <div class="texts">245 <div class="label">Offline dictionary</div>246 <div class="subtext">For use without internet</div>247 </div>248 <div class="checkbox" aria-checked="false"></div>249 </div>250 251 <div class="item">252 <div class="texts">253 <div class="label">Parental controls</div>254 <div class="subtext">Off for Books</div>255 </div>256 <div class="checkbox" aria-checked="false"></div>257 </div>258 259 <div class="item disabled">260 <div class="texts">261 <div class="label">Download new books to SD card</div>262 <div class="subtext">No SD card available</div>263 </div>264 <div class="checkbox disabled" aria-checked="false"></div>265 </div>266 267 <div class="section-title" style="margin-top: 16px;">Reading</div>268 269 <div class="item">270 <div class="texts">271 <div class="label">Auto-rotate screen</div>272 <div class="subtext">Use system setting</div>273 </div>274 <div class="checkbox" aria-checked="false"></div>275 </div>276 277 <div class="item">278 <div class="texts">279 <div class="label">Use volume keys to turn pages</div>280 <div class="subtext">When Bubble Zoom is on</div>281 </div>282 <div class="checkbox" aria-checked="false"></div>283 </div>284 285 <div class="item">286 <div class="texts">287 <div class="label">Use 3D effect for page turning</div>288 <div class="subtext"> </div>289 </div>290 <div class="checkbox checked" aria-checked="true">291 <div class="checkmark">292 <svg viewBox="0 0 24 24">293 <path d="M5 13l4 4 10-10"></path>294 </svg>295 </div>296 </div>297 </div>298 299 <div class="item">300 <div class="texts">301 <div class="label">Automatically read aloud</div>302 <div class="subtext">When you open a book and accessibility is turned on</div>303 </div>304 <div class="checkbox" aria-checked="false"></div>305 </div>306 307 <div class="item">308 <div class="texts">309 <div class="label">More natural reading voice</div>310 <div class="subtext">Available only when you're connected to the internet. Carrier charges may apply.</div>311 </div>312 <div class="checkbox" aria-checked="false"></div>313 </div>314 315 <div class="item">316 <div class="texts">317 <div class="label">Tools for beginning readers</div>318 <div class="subtext">Read & listen, tap to hear word, dictionary</div>319 </div>320 <div class="checkbox" aria-checked="false"></div>321 </div>322 </div>323 324 <!-- Bottom navigation pill -->325 <div class="nav-pill"></div>326</div>327</body>328</html>