GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<meta name="viewport" content="width=1080, initial-scale=1">5<title>Android Home UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 color: #ffffff;14 background:15 radial-gradient(1200px 900px at 20% 0%, #1e1f22 0%, #141516 60%, #121314 100%),16 repeating-linear-gradient(80deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 8px, rgba(0,0,0,0.08) 8px, rgba(0,0,0,0.08) 16px);17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 18px;23 left: 24px;24 right: 24px;25 height: 48px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 font-size: 36px;30 letter-spacing: 0.4px;31 }32 .status-left { display: flex; align-items: center; gap: 24px; }33 .status-right { display: flex; align-items: center; gap: 28px; }34 35 .icon {36 width: 40px;37 height: 40px;38 }39 .icon svg { width: 100%; height: 100%; }40 41 /* Date & weather */42 .date-weather {43 position: absolute;44 top: 160px;45 left: 64px;46 color: #fff;47 }48 .date-weather .date {49 font-size: 72px;50 font-weight: 600;51 margin-bottom: 18px;52 }53 .date-weather .weather {54 display: flex;55 align-items: center;56 gap: 20px;57 font-size: 44px;58 opacity: 0.9;59 }60 .weather .waves svg { width: 62px; height: 42px; }61 62 /* App grid */63 .app-row {64 position: absolute;65 left: 0;66 width: 100%;67 display: flex;68 justify-content: space-around;69 padding: 0 60px;70 }71 .row1 { top: 1520px; }72 .row2 { top: 1780px; }73 74 .app {75 width: 180px;76 text-align: center;77 color: #fff;78 }79 .app .badge {80 width: 180px;81 height: 180px;82 background: #ffffff;83 border-radius: 50%;84 display: flex;85 align-items: center;86 justify-content: center;87 }88 .app-label {89 margin-top: 22px;90 font-size: 42px;91 font-weight: 600;92 }93 94 /* Simple logo shapes inside badges */95 .logo svg { width: 110px; height: 110px; }96 97 /* Google search pill widget */98 .search-widget {99 position: absolute;100 bottom: 170px;101 left: 50%;102 transform: translateX(-50%);103 width: 920px;104 height: 130px;105 background: #2c2c2f;106 border-radius: 70px;107 box-shadow: 0 6px 20px rgba(0,0,0,0.35) inset;108 display: flex;109 align-items: center;110 justify-content: space-between;111 padding: 0 40px;112 }113 .search-left {114 display: flex;115 align-items: center;116 gap: 22px;117 color: #ffffff;118 font-size: 46px;119 opacity: 0.95;120 }121 .g-badge {122 width: 64px;123 height: 64px;124 border-radius: 50%;125 background: conic-gradient(#4285F4 0 90deg, #34A853 90deg 180deg, #FBBC05 180deg 270deg, #EA4335 270deg 360deg);126 display: flex; align-items: center; justify-content: center;127 color: #fff; font-weight: 700; font-size: 32px;128 }129 .search-right { display: flex; align-items: center; gap: 26px; }130 131 .mini-icon { width: 50px; height: 50px; }132 .mini-icon svg { width: 100%; height: 100%; }133 134 /* Gesture bar */135 .gesture {136 position: absolute;137 bottom: 30px;138 left: 50%;139 transform: translateX(-50%);140 width: 360px;141 height: 12px;142 background: #d9d9d9;143 border-radius: 8px;144 opacity: 0.7;145 }146 147 /* App label tones for realism */148 .muted { opacity: 0.95; }149</style>150</head>151<body>152<div id="render-target">153 154 <!-- Status Bar -->155 <div class="status-bar">156 <div class="status-left">157 <div>2:11</div>158 <div class="icon" aria-label="Search">159 <svg viewBox="0 0 24 24" fill="none">160 <circle cx="10" cy="10" r="7" stroke="#fff" stroke-width="2"></circle>161 <line x1="15" y1="15" x2="22" y2="22" stroke="#fff" stroke-width="2" stroke-linecap="round"></line>162 </svg>163 </div>164 <div class="icon" aria-label="Status">165 <svg viewBox="0 0 24 24" fill="none">166 <rect x="4" y="4" width="16" height="16" stroke="#fff" stroke-width="2" rx="2"></rect>167 <line x1="8" y1="8" x2="16" y2="16" stroke="#fff" stroke-width="2"></line>168 <line x1="16" y1="8" x2="8" y2="16" stroke="#fff" stroke-width="2"></line>169 </svg>170 </div>171 </div>172 <div class="status-right">173 <!-- DND -->174 <div class="icon" aria-label="Do Not Disturb">175 <svg viewBox="0 0 24 24" fill="none">176 <circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="2"></circle>177 <line x1="7" y1="12" x2="17" y2="12" stroke="#fff" stroke-width="2" stroke-linecap="round"></line>178 </svg>179 </div>180 <!-- WiFi -->181 <div class="icon" aria-label="WiFi">182 <svg viewBox="0 0 24 24" fill="none">183 <path d="M2 9c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>184 <path d="M5 12c4-3 10-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>185 <path d="M8 15c2-2 6-2 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>186 <circle cx="12" cy="18" r="1.6" fill="#fff"></circle>187 </svg>188 </div>189 <!-- Battery -->190 <div class="icon" aria-label="Battery">191 <svg viewBox="0 0 28 24" fill="none">192 <rect x="1" y="6" width="22" height="12" stroke="#fff" stroke-width="2" rx="2"></rect>193 <rect x="3" y="8" width="16" height="8" fill="#fff"></rect>194 <rect x="23" y="9" width="3" height="6" fill="#fff"></rect>195 </svg>196 </div>197 </div>198 </div>199 200 <!-- Date + Weather -->201 <div class="date-weather">202 <div class="date">Thu, Nov 30</div>203 <div class="weather">204 <div class="waves">205 <svg viewBox="0 0 64 32" fill="none">206 <path d="M5 12c6 6 16-6 22 0s16 6 22 0" stroke="#cfd8dc" stroke-width="3" stroke-linecap="round"></path>207 <path d="M5 20c6 6 16-6 22 0s16 6 22 0" stroke="#cfd8dc" stroke-width="3" stroke-linecap="round"></path>208 <path d="M5 28c6 6 16-6 22 0s16 6 22 0" stroke="#cfd8dc" stroke-width="3" stroke-linecap="round"></path>209 </svg>210 </div>211 <div class="muted">23°C</div>212 </div>213 </div>214 215 <!-- App Grid Row 1 -->216 <div class="app-row row1">217 <!-- Play Store -->218 <div class="app">219 <div class="badge">220 <div class="logo" aria-label="Play Store">221 <svg viewBox="0 0 64 64">222 <polygon points="12,10 52,32 12,54" fill="#34A853"></polygon>223 <polygon points="12,10 32,32 12,54" fill="#4285F4"></polygon>224 <polygon points="32,32 52,32 42,42" fill="#FBBC05"></polygon>225 <polygon points="32,32 52,32 42,22" fill="#EA4335"></polygon>226 </svg>227 </div>228 </div>229 <div class="app-label">Play Store</div>230 </div>231 <!-- Gmail -->232 <div class="app">233 <div class="badge">234 <div class="logo" aria-label="Gmail">235 <svg viewBox="0 0 64 64">236 <rect x="10" y="18" width="44" height="28" rx="5" fill="#ffffff" stroke="#cfcfcf"></rect>237 <path d="M12 20 L32 34 L52 20" stroke="#EA4335" stroke-width="5" fill="none" stroke-linecap="round"></path>238 <path d="M12 20 L12 46" stroke="#34A853" stroke-width="5"></path>239 <path d="M52 20 L52 46" stroke="#4285F4" stroke-width="5"></path>240 </svg>241 </div>242 </div>243 <div class="app-label">Gmail</div>244 </div>245 <!-- Photos -->246 <div class="app">247 <div class="badge">248 <div class="logo" aria-label="Photos">249 <svg viewBox="0 0 64 64">250 <path d="M32 10a14 14 0 0 1 0 28 14 14 0 0 0 0-28z" fill="#4285F4"></path>251 <path d="M32 54a14 14 0 0 1 0-28 14 14 0 0 0 0 28z" fill="#EA4335"></path>252 <path d="M10 32a14 14 0 0 1 28 0 14 14 0 0 0-28 0z" fill="#FBBC05"></path>253 <path d="M54 32a14 14 0 0 1-28 0 14 14 0 0 0 28 0z" fill="#34A853"></path>254 </svg>255 </div>256 </div>257 <div class="app-label">Photos</div>258 </div>259 <!-- YouTube -->260 <div class="app">261 <div class="badge">262 <div class="logo" aria-label="YouTube">263 <svg viewBox="0 0 64 64">264 <rect x="10" y="18" width="44" height="28" rx="8" fill="#EA4335"></rect>265 <polygon points="28,24 44,32 28,40" fill="#fff"></polygon>266 </svg>267 </div>268 </div>269 <div class="app-label">YouTube</div>270 </div>271 </div>272 273 <!-- App Grid Row 2 -->274 <div class="app-row row2">275 <!-- Phone -->276 <div class="app">277 <div class="badge">278 <div class="logo" aria-label="Phone">279 <svg viewBox="0 0 64 64">280 <path d="M20 18c8 16 18 24 24 26l8-8c-6-2-10-4-12-6-2-2-4-6-6-12z" fill="#4285F4"></path>281 <rect x="40" y="42" width="10" height="10" rx="3" fill="#34A853"></rect>282 </svg>283 </div>284 </div>285 <div class="app-label">Phone</div>286 </div>287 <!-- Messages -->288 <div class="app">289 <div class="badge">290 <div class="logo" aria-label="Messages">291 <svg viewBox="0 0 64 64">292 <rect x="10" y="14" width="44" height="30" rx="12" fill="#4c8bf5"></rect>293 <rect x="18" y="30" width="20" height="12" rx="6" fill="#ffffff"></rect>294 </svg>295 </div>296 </div>297 <div class="app-label">Messages</div>298 </div>299 <!-- Chrome -->300 <div class="app">301 <div class="badge">302 <div class="logo" aria-label="Chrome">303 <svg viewBox="0 0 64 64">304 <circle cx="32" cy="32" r="22" fill="#EA4335"></circle>305 <path d="M10 32a22 22 0 0 0 22 22l10-18H26L10 32z" fill="#FBBC05"></path>306 <path d="M54 32A22 22 0 0 0 32 10l-6 18h16l12 4z" fill="#34A853"></path>307 <circle cx="32" cy="32" r="10" fill="#4285F4" stroke="#fff" stroke-width="2"></circle>308 </svg>309 </div>310 </div>311 <div class="app-label">Chrome</div>312 </div>313 <!-- Camera -->314 <div class="app">315 <div class="badge">316 <div class="logo" aria-label="Camera">317 <svg viewBox="0 0 64 64">318 <rect x="10" y="20" width="44" height="28" rx="6" fill="#2f2f33" stroke="#4c4c50" stroke-width="2"></rect>319 <rect x="18" y="14" width="12" height="8" rx="2" fill="#5b5d61"></rect>320 <circle cx="32" cy="34" r="10" fill="#4285F4" stroke="#d6d6d6" stroke-width="3"></circle>321 </svg>322 </div>323 </div>324 <div class="app-label">Camera</div>325 </div>326 </div>327 328 <!-- Google Search Widget -->329 <div class="search-widget">330 <div class="search-left">331 <div class="g-badge">G</div>332 <div>Search</div>333 </div>334 <div class="search-right">335 <div class="mini-icon" aria-label="Voice">336 <svg viewBox="0 0 24 24" fill="none">337 <rect x="9" y="4" width="6" height="10" rx="3" fill="#34A853"></rect>338 <path d="M6 12a6 6 0 0 0 12 0" stroke="#fff" stroke-width="2"></path>339 <line x1="12" y1="18" x2="12" y2="22" stroke="#fff" stroke-width="2"></line>340 </svg>341 </div>342 <div class="mini-icon" aria-label="Google Lens / Camera">343 <svg viewBox="0 0 24 24" fill="none">344 <rect x="4" y="6" width="16" height="12" rx="3" stroke="#fff" stroke-width="2"></rect>345 <circle cx="12" cy="12" r="4" fill="#4285F4"></circle>346 <circle cx="12" cy="12" r="2" fill="#FBBC05"></circle>347 </svg>348 </div>349 </div>350 </div>351 352 <!-- Gesture Bar -->353 <div class="gesture"></div>354 355</div>356</body>357</html>