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<title>Android Home UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #000;15 }16 17 /* Full-screen wallpaper placeholder */18 .wallpaper {19 position: absolute;20 inset: 0;21 background: #E0E0E0;22 border: 1px solid #BDBDBD;23 color: #757575;24 display: flex;25 align-items: center;26 justify-content: center;27 font-size: 36px;28 letter-spacing: 0.5px;29 }30 31 /* Subtle vignette like the screenshot */32 .vignette {33 position: absolute;34 inset: 0;35 background: radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,0.18) 95%);36 pointer-events: none;37 }38 39 /* Status bar */40 .status-bar {41 position: absolute;42 top: 20px;43 left: 32px;44 right: 32px;45 height: 64px;46 display: flex;47 align-items: center;48 justify-content: space-between;49 color: rgba(255,255,255,0.95);50 }51 .status-left {52 display: flex;53 align-items: center;54 gap: 18px;55 font-size: 36px;56 font-weight: 500;57 text-shadow: 0 2px 6px rgba(0,0,0,0.35);58 }59 .status-icons {60 display: flex;61 align-items: center;62 gap: 22px;63 }64 .sb-ico svg { display: block; width: 36px; height: 36px; fill: #fff; opacity: 0.95; }65 66 /* Date & weather block */67 .date-block {68 position: absolute;69 left: 64px;70 top: 240px;71 color: #fff;72 text-shadow: 0 4px 16px rgba(0,0,0,0.55);73 }74 .date-block .date {75 font-size: 82px;76 font-weight: 500;77 margin: 0 0 18px 0;78 letter-spacing: 0.3px;79 }80 .weather {81 display: flex;82 align-items: center;83 gap: 18px;84 font-size: 44px;85 opacity: 0.9;86 }87 .weather svg { width: 52px; height: 52px; fill: #fff; opacity: 0.9; }88 89 /* App grid */90 .apps-row {91 position: absolute;92 left: 60px;93 right: 60px;94 display: flex;95 justify-content: space-between;96 }97 .row-top { top: 1550px; }98 .row-bottom { top: 1788px; } /* dock row */99 .app {100 width: 200px;101 text-align: center;102 color: #fff;103 text-shadow: 0 3px 12px rgba(0,0,0,0.55);104 }105 .icon {106 width: 160px;107 height: 160px;108 border-radius: 50%;109 background: #fff;110 box-shadow: 0 8px 24px rgba(0,0,0,0.35);111 margin: 0 auto 20px auto;112 display: flex;113 align-items: center;114 justify-content: center;115 }116 .label {117 font-size: 36px;118 opacity: 0.95;119 }120 121 /* Search bar pill */122 .search-pill {123 position: absolute;124 left: 60px;125 right: 60px;126 bottom: 180px;127 height: 120px;128 background: rgba(26,26,26,0.92);129 border-radius: 60px;130 box-shadow: 0 10px 28px rgba(0,0,0,0.45);131 display: flex;132 align-items: center;133 padding: 0 34px;134 color: #eaeaea;135 }136 .search-left,137 .search-right {138 display: flex;139 align-items: center;140 gap: 22px;141 }142 .search-left { flex: 1; gap: 24px; }143 .search-hint {144 font-size: 38px;145 opacity: 0.85;146 }147 .pill-ico svg { width: 54px; height: 54px; display: block; }148 149 /* Bottom navigation pill (gesture bar) */150 .nav-pill {151 position: absolute;152 width: 300px;153 height: 12px;154 left: 390px; /* centered in 1080px */155 bottom: 50px;156 border-radius: 6px;157 background: rgba(255,255,255,0.6);158 }159</style>160</head>161<body>162<div id="render-target">163 <div class="wallpaper">[IMG: Mountain Wallpaper]</div>164 <div class="vignette"></div>165 166 <!-- Status bar -->167 <div class="status-bar">168 <div class="status-left">169 <span>5:26</span>170 <span class="sb-ico" title="Do Not Disturb">171 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2Zm-6 9h12v2H6v-2Z"/></svg>172 </span>173 <span class="sb-ico" title="Alarm">174 <svg viewBox="0 0 24 24"><path d="M7.1 1.9 2 6.2l1.6 1.9 5.2-4.4L7.1 1.9zM16.9 1.9 15.2 3.7l5.2 4.4L22 6.2l-5.1-4.3zM12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm1 4v5.2l4 2.4-.9 1.5L11 14V8h2z"/></svg>175 </span>176 <span class="sb-ico" title="Weather">177 <svg viewBox="0 0 24 24"><path d="M17 7a4 4 0 0 0-7.7-1.6A5 5 0 1 0 7 18h10a5 5 0 0 0 0-10z"/></svg>178 </span>179 <span>•</span>180 </div>181 <div class="status-icons">182 <span class="sb-ico" title="Wi‑Fi">183 <svg viewBox="0 0 24 24"><path d="M12 18.5 9.7 16.2a3.3 3.3 0 0 1 4.6 0L12 18.5zm5.5-5.5a8 8 0 0 0-11 0l1.8 1.8a5.5 5.5 0 0 1 7.4 0L17.5 13zM21 8a14 14 0 0 0-18 0l1.8 1.8a11.5 11.5 0 0 1 14.4 0L21 8z"/></svg>184 </span>185 <span class="sb-ico" title="Battery">186 <svg viewBox="0 0 28 24"><path d="M22 7h2v10h-2v2H4V5h18v2zM6 7v8h14V7H6z" /></svg>187 </span>188 </div>189 </div>190 191 <!-- Date and weather -->192 <div class="date-block">193 <h1 class="date">Wed, Oct 4</h1>194 <div class="weather">195 <svg viewBox="0 0 24 24"><path d="M2 14c1.8 0 2.2-1 4-1s2.2 1 4 1 2.2-1 4-1 2.2 1 4 1 2.2-1 4-1v2c-1.8 0-2.2 1-4 1s-2.2-1-4-1-2.2 1-4 1-2.2-1-4-1-2.2 1-4 1v-2z"/></svg>196 <span>33°C</span>197 </div>198 </div>199 200 <!-- Top apps row -->201 <div class="apps-row row-top">202 <!-- Play Store -->203 <div class="app">204 <div class="icon">205 <svg viewBox="0 0 64 64" width="104" height="104">206 <defs>207 <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">208 <stop offset="0" stop-color="#34a853"/><stop offset="1" stop-color="#0f9d58"/>209 </linearGradient>210 </defs>211 <path d="M10 10l28 22-28 22z" fill="#4285F4"/>212 <path d="M10 10l20 16-6 5-14-21z" fill="#34A853"/>213 <path d="M38 32 10 54l14-21 14-1z" fill="#FBBC05"/>214 <path d="M40 30 52 22v20L40 34z" fill="#EA4335"/>215 </svg>216 </div>217 <div class="label">Play Store</div>218 </div>219 220 <!-- Gmail -->221 <div class="app">222 <div class="icon">223 <svg viewBox="0 0 64 64" width="110" height="110">224 <path d="M8 20v24c0 2 2 4 4 4h8V26L32 36l12-10v22h8c2 0 4-2 4-4V20L32 32 8 20z" fill="#EA4335"/>225 <path d="M20 48V24l12 8 12-8v24h-8V34L32 40l-8-6v14h-4z" fill="#34A853"/>226 <path d="M12 20h8l12 8 12-8h8l-20 14z" fill="#FBBC05"/>227 <path d="M12 20c-2 0-4 2-4 4v2l24 16 24-16v-2c0-2-2-4-4-4L32 30 12 20z" fill="#4285F4" opacity=".7"/>228 </svg>229 </div>230 <div class="label">Gmail</div>231 </div>232 233 <!-- Photos -->234 <div class="app">235 <div class="icon">236 <svg viewBox="0 0 64 64" width="108" height="108">237 <circle cx="32" cy="32" r="6" fill="#fff"/>238 <path d="M32 10a12 12 0 0 1 0 24V10z" fill="#EA4335"/>239 <path d="M54 32a12 12 0 0 1-24 0h24z" fill="#34A853"/>240 <path d="M32 54a12 12 0 0 1 0-24v24z" fill="#4285F4"/>241 <path d="M10 32a12 12 0 0 1 24 0H10z" fill="#FBBC05"/>242 </svg>243 </div>244 <div class="label">Photos</div>245 </div>246 247 <!-- YouTube -->248 <div class="app">249 <div class="icon">250 <svg viewBox="0 0 64 64" width="104" height="104">251 <rect x="10" y="18" width="44" height="28" rx="6" fill="#FF0000"/>252 <polygon points="28,22 46,32 28,42" fill="#fff"/>253 </svg>254 </div>255 <div class="label">YouTube</div>256 </div>257 </div>258 259 <!-- Bottom/dock apps row -->260 <div class="apps-row row-bottom">261 <!-- Phone -->262 <div class="app">263 <div class="icon">264 <svg viewBox="0 0 64 64" width="104" height="104">265 <circle cx="32" cy="32" r="26" fill="#E8F0FE"/>266 <path d="M22 18c3-3 6-2 7-1l4 4c1 1 1 3-1 4l-3 2c1 4 5 8 9 9l2-3c1-2 3-2 4-1l4 4c1 1 2 4-1 7-4 4-16-1-25-10S18 22 22 18z" fill="#1A73E8"/>267 </svg>268 </div>269 </div>270 271 <!-- Messages -->272 <div class="app">273 <div class="icon">274 <svg viewBox="0 0 64 64" width="104" height="104">275 <rect x="10" y="14" width="44" height="34" rx="8" fill="#1A73E8"/>276 <rect x="16" y="22" width="32" height="6" rx="3" fill="#E8F0FE"/>277 <rect x="16" y="32" width="22" height="6" rx="3" fill="#E8F0FE"/>278 </svg>279 </div>280 </div>281 282 <!-- Chrome -->283 <div class="app">284 <div class="icon">285 <svg viewBox="0 0 64 64" width="104" height="104">286 <circle cx="32" cy="32" r="12" fill="#1A73E8"/>287 <path d="M32 8a24 24 0 0 1 20.8 12H32a12 12 0 0 0-10.4 6L12 14A24 24 0 0 1 32 8z" fill="#EA4335"/>288 <path d="M52.8 20A24 24 0 0 1 40 56L29.6 38A12 12 0 0 0 44 20h8.8z" fill="#34A853"/>289 <path d="M40 56A24 24 0 0 1 12 26h20a12 12 0 0 0 10.4 18L40 56z" fill="#FBBC05"/>290 <circle cx="32" cy="32" r="8" fill="#E8F0FE"/>291 </svg>292 </div>293 </div>294 295 <!-- Camera -->296 <div class="app">297 <div class="icon">298 <svg viewBox="0 0 64 64" width="104" height="104">299 <rect x="10" y="18" width="44" height="30" rx="6" fill="#444"/>300 <rect x="22" y="12" width="20" height="8" rx="3" fill="#666"/>301 <circle cx="32" cy="33" r="10" fill="#8AB4F8"/>302 <circle cx="32" cy="33" r="6" fill="#2962FF"/>303 <circle cx="50" cy="22" r="3" fill="#9E9E9E"/>304 </svg>305 </div>306 </div>307 </div>308 309 <!-- Search bar -->310 <div class="search-pill">311 <div class="search-left">312 <!-- Google G -->313 <span class="pill-ico">314 <svg viewBox="0 0 24 24">315 <path d="M12 4a8 8 0 1 0 0 16c3.8 0 6.9-2.7 7.7-6.2h-7.7v-3.2h11c.1.6.2 1.2.2 1.9 0 6.2-4.7 11.5-11.2 11.5A12 12 0 1 1 12 0v4z" fill="#4285F4"/>316 <path d="M12 4v4h6.7A8 8 0 0 0 12 4z" fill="#34A853"/>317 <path d="M6 14a8 8 0 0 0 6 6v-4H8.5A6 6 0 0 1 6 14z" fill="#FBBC05"/>318 <path d="M8.5 8H12V4a8 8 0 0 0-7 4.1l3.5-.1z" fill="#EA4335"/>319 </svg>320 </span>321 <span class="search-hint">Search</span>322 </div>323 <div class="search-right">324 <!-- Mic -->325 <span class="pill-ico">326 <svg viewBox="0 0 24 24">327 <path d="M12 3a3 3 0 0 1 3 3v6a3 3 0 1 1-6 0V6a3 3 0 0 1 3-3z" fill="#1A73E8"/>328 <path d="M5 11a7 7 0 0 0 14 0h-2a5 5 0 0 1-10 0H5zM11 19h2v2h-2z" fill="#34A853"/>329 </svg>330 </span>331 <!-- Lens -->332 <span class="pill-ico">333 <svg viewBox="0 0 24 24">334 <rect x="3" y="3" width="18" height="18" rx="5" fill="#1E1E1E" stroke="#3DDC84" stroke-width="2"/>335 <circle cx="12" cy="12" r="4" fill="#4285F4"/>336 </svg>337 </span>338 </div>339 </div>340 341 <!-- Gesture bar -->342 <div class="nav-pill"></div>343</div>344</body>345</html>