GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body {8 margin: 0;9 padding: 0;10 background: transparent;11 font-family: Arial, Helvetica, sans-serif;12 color: #222;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #F1F1F1;20 }21 22 /* Status bar */23 .statusbar {24 height: 120px;25 padding: 0 48px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #444;30 font-size: 36px;31 }32 .status-right {33 display: flex;34 align-items: center;35 gap: 28px;36 }37 .status-icon svg {38 width: 44px;39 height: 44px;40 stroke: #444;41 fill: none;42 stroke-width: 5;43 }44 45 /* Header / Title */46 .header {47 padding: 20px 72px 0 72px;48 }49 .title-row {50 display: flex;51 align-items: center;52 justify-content: space-between;53 }54 .title-row .title {55 font-size: 96px;56 font-weight: 600;57 letter-spacing: -0.5px;58 color: #222;59 }60 .avatar {61 width: 116px;62 height: 116px;63 border-radius: 58px;64 background: #4D5F66;65 color: #fff;66 display: flex;67 align-items: center;68 justify-content: center;69 font-size: 60px;70 font-weight: 700;71 margin-right: 18px;72 }73 74 /* Search bar */75 .search {76 margin-top: 36px;77 height: 110px;78 border-radius: 55px;79 background: #FFFFFF;80 box-shadow: 0 2px 0 rgba(0,0,0,0.05);81 display: flex;82 align-items: center;83 padding: 0 40px;84 gap: 26px;85 }86 .search svg {87 width: 48px;88 height: 48px;89 stroke: #666;90 fill: none;91 stroke-width: 6;92 }93 .search span {94 font-size: 42px;95 color: #666;96 }97 98 /* List */99 .list {100 margin-top: 36px;101 padding: 0 72px 0 72px;102 }103 .item {104 display: flex;105 align-items: flex-start;106 gap: 36px;107 padding: 34px 0;108 }109 .icon {110 width: 80px;111 height: 80px;112 display: flex;113 align-items: center;114 justify-content: center;115 }116 .icon svg {117 width: 64px;118 height: 64px;119 stroke: #1F1F1F;120 fill: none;121 stroke-width: 5.5;122 }123 .texts .top {124 font-size: 48px;125 font-weight: 600;126 color: #222;127 line-height: 1.2;128 }129 .texts .sub {130 margin-top: 12px;131 font-size: 32px;132 color: #6E6E6E;133 }134 135 /* Gesture bar */136 .gesture {137 position: absolute;138 bottom: 28px;139 left: 50%;140 transform: translateX(-50%);141 width: 320px;142 height: 16px;143 border-radius: 10px;144 background: #B9B9B9;145 }146</style>147</head>148<body>149<div id="render-target">150 151 <!-- Status bar -->152 <div class="statusbar">153 <div class="time">1:13</div>154 <div class="status-right">155 <div class="status-icon">156 <!-- Wi‑Fi icon -->157 <svg viewBox="0 0 24 24">158 <path d="M3 9 Q12 3 21 9"></path>159 <path d="M6 12 Q12 7 18 12"></path>160 <path d="M9 15 Q12 12 15 15"></path>161 <circle cx="12" cy="18" r="1.8" fill="#444" stroke="none"></circle>162 </svg>163 </div>164 <div class="status-icon">165 <!-- Battery icon -->166 <svg viewBox="0 0 28 24">167 <rect x="2" y="5" width="20" height="14" rx="2" ry="2"></rect>168 <rect x="22.5" y="9" width="3.5" height="6" rx="1" ry="1" fill="#444" stroke="none"></rect>169 </svg>170 </div>171 </div>172 </div>173 174 <!-- Header -->175 <div class="header">176 <div class="title-row">177 <div class="title">Settings</div>178 <div class="avatar">C</div>179 </div>180 181 <!-- Search bar -->182 <div class="search">183 <svg viewBox="0 0 24 24">184 <circle cx="10" cy="10" r="6"></circle>185 <line x1="14.5" y1="14.5" x2="21" y2="21"></line>186 </svg>187 <span>Search settings</span>188 </div>189 </div>190 191 <!-- List -->192 <div class="list">193 <!-- Network & internet -->194 <div class="item">195 <div class="icon">196 <svg viewBox="0 0 24 24">197 <path d="M3 8 Q12 2 21 8"></path>198 <path d="M6 11 Q12 6.5 18 11"></path>199 <path d="M9 14 Q12 12 15 14"></path>200 <circle cx="12" cy="17.5" r="1.6" fill="#1F1F1F" stroke="none"></circle>201 </svg>202 </div>203 <div class="texts">204 <div class="top">Network & internet</div>205 <div class="sub">Mobile, Wi‑Fi, hotspot</div>206 </div>207 </div>208 209 <!-- Connected devices -->210 <div class="item">211 <div class="icon">212 <svg viewBox="0 0 24 24">213 <rect x="3" y="5" width="12" height="9" rx="1.5"></rect>214 <rect x="17" y="8" width="4.5" height="8" rx="1"></rect>215 <rect x="6" y="7" width="2.5" height="2.5" rx="0.5"></rect>216 </svg>217 </div>218 <div class="texts">219 <div class="top">Connected devices</div>220 <div class="sub">Bluetooth, pairing</div>221 </div>222 </div>223 224 <!-- Apps -->225 <div class="item">226 <div class="icon">227 <svg viewBox="0 0 24 24">228 <rect x="3" y="3" width="4" height="4" rx="1" fill="#1F1F1F" stroke="none"></rect>229 <rect x="10" y="3" width="4" height="4" rx="1" fill="#1F1F1F" stroke="none"></rect>230 <rect x="17" y="3" width="4" height="4" rx="1" fill="#1F1F1F" stroke="none"></rect>231 <rect x="3" y="10" width="4" height="4" rx="1" fill="#1F1F1F" stroke="none"></rect>232 <rect x="10" y="10" width="4" height="4" rx="1" fill="#1F1F1F" stroke="none"></rect>233 <rect x="17" y="10" width="4" height="4" rx="1" fill="#1F1F1F" stroke="none"></rect>234 <rect x="3" y="17" width="4" height="4" rx="1" fill="#1F1F1F" stroke="none"></rect>235 <rect x="10" y="17" width="4" height="4" rx="1" fill="#1F1F1F" stroke="none"></rect>236 <rect x="17" y="17" width="4" height="4" rx="1" fill="#1F1F1F" stroke="none"></rect>237 </svg>238 </div>239 <div class="texts">240 <div class="top">Apps</div>241 <div class="sub">Assistant, recent apps, default apps</div>242 </div>243 </div>244 245 <!-- Notifications -->246 <div class="item">247 <div class="icon">248 <svg viewBox="0 0 24 24">249 <path d="M6 9 C6 6.5 8.5 5 12 5 C15.5 5 18 6.5 18 9 V14 L20 16 H4 L6 14 Z"></path>250 <circle cx="12" cy="19.2" r="1.6" fill="#1F1F1F" stroke="none"></circle>251 </svg>252 </div>253 <div class="texts">254 <div class="top">Notifications</div>255 <div class="sub">Notification history, conversations</div>256 </div>257 </div>258 259 <!-- Battery -->260 <div class="item">261 <div class="icon">262 <svg viewBox="0 0 26 24">263 <rect x="2" y="5" width="18" height="14" rx="2" ry="2"></rect>264 <rect x="20.5" y="9" width="3.5" height="6" rx="1" ry="1"></rect>265 <rect x="5" y="8" width="12" height="8" fill="#1F1F1F" stroke="none"></rect>266 </svg>267 </div>268 <div class="texts">269 <div class="top">Battery</div>270 <div class="sub">100%</div>271 </div>272 </div>273 274 <!-- Storage -->275 <div class="item">276 <div class="icon">277 <svg viewBox="0 0 24 24">278 <rect x="4" y="4" width="16" height="4" rx="1.2"></rect>279 <rect x="4" y="10" width="16" height="4" rx="1.2"></rect>280 <rect x="4" y="16" width="16" height="4" rx="1.2"></rect>281 </svg>282 </div>283 <div class="texts">284 <div class="top">Storage</div>285 <div class="sub">18% used - 105 GB free</div>286 </div>287 </div>288 289 <!-- Sound & vibration -->290 <div class="item">291 <div class="icon">292 <svg viewBox="0 0 24 24">293 <path d="M4 10 H8 L13 6 V18 L8 14 H4 Z"></path>294 <path d="M16 10 Q19 12 16 14" stroke-linecap="round"></path>295 <path d="M18 8 Q22 12 18 16" stroke-linecap="round"></path>296 </svg>297 </div>298 <div class="texts">299 <div class="top">Sound & vibration</div>300 <div class="sub">Volume, haptics, Do Not Disturb</div>301 </div>302 </div>303 </div>304 305 <!-- Gesture bar -->306 <div class="gesture"></div>307</div>308</body>309</html>