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>Preferences UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FAFAFA;15 font-family: Roboto, Arial, sans-serif;16 color: #222;17 }18 19 /* Top bars */20 .status-bar {21 height: 120px;22 background: #123E7B;23 color: #fff;24 display: flex;25 align-items: center;26 padding: 0 36px;27 box-sizing: border-box;28 font-size: 42px;29 }30 .status-icons {31 margin-left: auto;32 display: flex;33 align-items: center;34 gap: 28px;35 }36 .status-icons svg { fill: none; stroke: #fff; stroke-width: 6; }37 38 .app-bar {39 height: 180px;40 background: #2B68A8;41 display: flex;42 align-items: center;43 padding: 0 36px;44 box-sizing: border-box;45 color: #fff;46 }47 .app-bar h1 {48 margin: 0;49 font-size: 60px;50 font-weight: 600;51 letter-spacing: 0.2px;52 }53 .back-icon svg { width: 72px; height: 72px; stroke: #fff; stroke-width: 12; fill: none; }54 55 /* List */56 .list {57 padding-top: 8px;58 }59 .item {60 height: 140px;61 display: flex;62 align-items: center;63 padding: 0 48px;64 box-sizing: border-box;65 border-bottom: 1px solid #EAEAEA;66 }67 .icon {68 width: 120px;69 display: flex;70 justify-content: center;71 align-items: center;72 }73 .icon svg {74 width: 72px;75 height: 72px;76 fill: none;77 stroke: #8E8E8E;78 stroke-width: 8;79 }80 .label {81 font-size: 48px;82 color: #333;83 letter-spacing: 0.2px;84 }85 86 /* Other section */87 .divider {88 height: 1px;89 background: #E0E0E0;90 margin: 0;91 }92 .section-header {93 padding: 40px 48px 10px 48px;94 box-sizing: border-box;95 font-size: 34px;96 color: #3CB6C8;97 letter-spacing: 2px;98 font-weight: 700;99 text-transform: uppercase;100 }101 .other-item {102 padding: 28px 48px;103 box-sizing: border-box;104 border-bottom: 1px solid #EAEAEA;105 }106 .other-item .title {107 font-size: 44px;108 color: #333;109 margin-bottom: 12px;110 }111 .other-item .sub {112 font-size: 32px;113 color: #8A8A8A;114 }115 116 /* Bottom navigation bar */117 .nav-bar {118 position: absolute;119 bottom: 0;120 left: 0;121 width: 100%;122 height: 120px;123 background: #000;124 display: flex;125 align-items: center;126 justify-content: center;127 }128 .home-pill {129 width: 260px;130 height: 12px;131 background: #fff;132 border-radius: 12px;133 opacity: 0.9;134 }135</style>136</head>137<body>138<div id="render-target">139 <!-- Status bar -->140 <div class="status-bar">141 <div>12:18</div>142 <div class="status-icons">143 <!-- simple icons to suggest system indicators -->144 <svg viewBox="0 0 100 100">145 <!-- rotation icon -->146 <path d="M50 20 A30 30 0 1 1 30 30" />147 <path d="M30 30 L20 20" />148 </svg>149 <svg viewBox="0 0 100 100">150 <!-- apps icon -->151 <rect x="18" y="18" width="24" height="24"></rect>152 <rect x="58" y="18" width="24" height="24"></rect>153 <rect x="18" y="58" width="24" height="24"></rect>154 <rect x="58" y="58" width="24" height="24"></rect>155 </svg>156 <svg viewBox="0 0 100 100">157 <!-- calendar icon -->158 <rect x="18" y="30" width="64" height="52" rx="8"></rect>159 <line x1="18" y1="45" x2="82" y2="45"></line>160 <line x1="32" y1="20" x2="32" y2="36"></line>161 <line x1="68" y1="20" x2="68" y2="36"></line>162 </svg>163 <div style="font-size: 56px; line-height: 1;">•</div>164 <svg viewBox="0 0 100 100">165 <!-- wifi -->166 <path d="M20 40 Q50 20 80 40"></path>167 <path d="M30 55 Q50 40 70 55"></path>168 <path d="M40 70 Q50 62 60 70"></path>169 <circle cx="50" cy="78" r="4" fill="#fff" stroke="none"></circle>170 </svg>171 <svg viewBox="0 0 100 100">172 <!-- battery -->173 <rect x="16" y="28" width="64" height="44" rx="8"></rect>174 <rect x="82" y="40" width="6" height="20" rx="2"></rect>175 <rect x="22" y="34" width="52" height="32" fill="#fff" stroke="none"></rect>176 </svg>177 </div>178 </div>179 180 <!-- App bar -->181 <div class="app-bar">182 <div class="back-icon">183 <svg viewBox="0 0 100 100">184 <path d="M60 20 L30 50 L60 80" />185 </svg>186 </div>187 <h1>Preferences</h1>188 </div>189 190 <!-- List of preferences -->191 <div class="list">192 <div class="item">193 <div class="icon">194 <svg viewBox="0 0 100 100">195 <circle cx="50" cy="50" r="18"></circle>196 <circle cx="50" cy="50" r="38"></circle>197 </svg>198 </div>199 <div class="label">General</div>200 </div>201 202 <div class="item">203 <div class="icon">204 <svg viewBox="0 0 100 100">205 <rect x="18" y="26" width="64" height="56" rx="8"></rect>206 <line x1="18" y1="40" x2="82" y2="40"></line>207 <line x1="32" y1="20" x2="32" y2="36"></line>208 <line x1="68" y1="20" x2="68" y2="36"></line>209 </svg>210 </div>211 <div class="label">Events</div>212 </div>213 214 <div class="item">215 <div class="icon">216 <svg viewBox="0 0 100 100">217 <rect x="18" y="22" width="64" height="56" rx="8"></rect>218 <circle cx="36" cy="40" r="8"></circle>219 <path d="M32 70 L52 50 L72 70"></path>220 </svg>221 </div>222 <div class="label">Images</div>223 </div>224 225 <div class="item">226 <div class="icon">227 <svg viewBox="0 0 100 100">228 <circle cx="50" cy="50" r="34"></circle>229 <line x1="50" y1="50" x2="50" y2="28"></line>230 <line x1="50" y1="50" x2="66" y2="50"></line>231 </svg>232 </div>233 <div class="label">Date & time</div>234 </div>235 236 <div class="item">237 <div class="icon">238 <svg viewBox="0 0 100 100">239 <path d="M50 20 C70 20 78 36 78 48 C78 64 68 74 50 78 C32 74 22 64 22 48 C22 36 30 20 50 20"></path>240 <circle cx="50" cy="80" r="2"></circle>241 </svg>242 </div>243 <div class="label">Notifications</div>244 </div>245 246 <div class="item">247 <div class="icon">248 <svg viewBox="0 0 100 100">249 <rect x="20" y="20" width="20" height="20"></rect>250 <rect x="40" y="20" width="20" height="20"></rect>251 <rect x="60" y="20" width="20" height="20"></rect>252 <rect x="20" y="40" width="20" height="20"></rect>253 <rect x="40" y="40" width="20" height="20"></rect>254 <rect x="60" y="40" width="20" height="20"></rect>255 </svg>256 </div>257 <div class="label">Calendar views</div>258 </div>259 260 <div class="item">261 <div class="icon">262 <svg viewBox="0 0 100 100">263 <circle cx="30" cy="36" r="10"></circle>264 <path d="M24 64 C24 64 32 52 48 52 C64 52 72 60 76 68 C76 68 62 76 46 76 C30 76 24 64 24 64 Z"></path>265 </svg>266 </div>267 <div class="label">Weather</div>268 </div>269 270 <div class="item">271 <div class="icon">272 <svg viewBox="0 0 100 100">273 <circle cx="50" cy="36" r="14"></circle>274 <path d="M24 76 C28 60 72 60 76 76"></path>275 </svg>276 </div>277 <div class="label">Privacy</div>278 </div>279 280 <div class="item">281 <div class="icon">282 <svg viewBox="0 0 100 100">283 <circle cx="20" cy="50" r="4"></circle>284 <circle cx="50" cy="50" r="4"></circle>285 <circle cx="80" cy="50" r="4"></circle>286 </svg>287 </div>288 <div class="label">Advanced</div>289 </div>290 291 <div class="item">292 <div class="icon">293 <svg viewBox="0 0 100 100">294 <rect x="26" y="44" width="48" height="30" rx="6"></rect>295 <path d="M34 44 C34 32 66 32 66 44" />296 </svg>297 </div>298 <div class="label">Permissions</div>299 </div>300 301 <div class="item">302 <div class="icon">303 <svg viewBox="0 0 100 100">304 <path d="M30 30 L20 20 M80 80 L70 70"></path>305 <path d="M30 70 L20 80 M80 20 L70 30"></path>306 <rect x="36" y="36" width="28" height="28" rx="6"></rect>307 </svg>308 </div>309 <div class="label">Developer options</div>310 </div>311 </div>312 313 <div class="divider"></div>314 315 <div class="section-header">OTHER</div>316 317 <div class="other-item">318 <div class="title">Installation ID</div>319 <div class="sub">a9bd0f4d-510f-4d16-9960-a8f4e4de1369</div>320 </div>321 <div class="other-item" style="border-bottom: none;">322 <div class="title">License codes</div>323 </div>324 325 <!-- Bottom navigation -->326 <div class="nav-bar">327 <div class="home-pill"></div>328 </div>329</div>330</body>331</html>