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>Android Home UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: radial-gradient(1400px 800px at 20% 30%, #94a68f 0%, #7f917f 35%, #5f7264 70%, #4c5a4f 100%);15 }16 /* subtle dark curve accents */17 #render-target::before, #render-target::after {18 content: "";19 position: absolute;20 width: 1400px;21 height: 1400px;22 border-radius: 50%;23 pointer-events: none;24 }25 #render-target::before {26 top: 900px; left: 540px;27 background: radial-gradient(closest-side, rgba(0,0,0,0.25), rgba(0,0,0,0));28 transform: rotate(18deg);29 }30 #render-target::after {31 top: 500px; left: 250px;32 background: radial-gradient(closest-side, rgba(0,0,0,0.18), rgba(0,0,0,0));33 transform: rotate(-12deg);34 }35 36 /* Status bar */37 .status-bar {38 position: absolute;39 top: 24px;40 left: 0; right: 0;41 height: 80px;42 padding: 0 28px;43 color: #fff;44 font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;45 display: flex;46 align-items: center;47 justify-content: space-between;48 opacity: 0.95;49 }50 .status-left { font-size: 40px; font-weight: 500; letter-spacing: 1px; }51 .status-center {52 display: flex; gap: 18px; align-items: center;53 transform: translateX(-60px);54 }55 .status-dot, .status-pill {56 background: rgba(255,255,255,0.18);57 color: #fff; font-size: 26px; line-height: 1;58 border-radius: 16px; padding: 6px 12px;59 }60 .status-dot { width: 12px; height: 12px; padding: 0; border-radius: 50%; }61 .status-right { display: flex; gap: 22px; align-items: center; }62 .status-icon svg { width: 38px; height: 38px; fill: none; stroke: #fff; stroke-width: 2.5; }63 64 /* App grid */65 .apps-grid {66 position: absolute;67 top: 220px;68 left: 0; right: 0;69 padding: 0 60px;70 display: grid;71 grid-template-columns: repeat(4, 1fr);72 grid-column-gap: 42px;73 grid-row-gap: 122px;74 font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;75 color: #f2f2f2;76 }77 .app { text-align: center; }78 .icon {79 width: 150px; height: 150px;80 margin: 0 auto 18px;81 border-radius: 50%;82 display: flex; align-items: center; justify-content: center;83 color: #fff; font-weight: 800; font-size: 58px;84 box-shadow: 0 8px 14px rgba(0,0,0,0.35);85 }86 .label {87 font-size: 34px;88 white-space: nowrap;89 overflow: hidden;90 text-overflow: ellipsis;91 max-width: 220px;92 margin: 0 auto;93 opacity: 0.95;94 }95 96 /* Icon color approximations */97 .i-dbws { background: #3d7d53; }98 .i-kayak { background: #ff7a3d; }99 .i-expedia { background: #f2c93b; color:#273238; font-size: 66px; }100 .i-firstcry { background: #b764d9; font-size: 52px; }101 .i-flipkart { background: #2fa9ff; }102 .i-doordash { background: #ff4e42; }103 .i-chat { background: #1ec86b; }104 .i-instagram { background: radial-gradient(circle at 30% 30%, #ffd86f 0%, #ff7a85 45%, #c343f1 75%, #6b3df6 100%); }105 .i-royalmatch { background: #5c8ef6; }106 .i-gallery { background: #4285f4; }107 .i-nykaa { background: #111; }108 .i-citymapper { background: #2ecc58; }109 .i-zara { background: #fff; color:#000; font-weight: 700; font-size: 40px; }110 .i-hm { background: #fff; color:#c8242a; font-weight: 800; font-size: 44px; }111 .i-amazon { background: #d4b07a; color:#000; font-weight: 800; font-size: 52px; }112 .i-farfetch { background: #fff; color:#000; font-weight: 800; font-size: 44px; }113 114 .nykaa-badge {115 position: absolute;116 top: -6px; right: -6px;117 width: 26px; height: 26px;118 background: #7ad3ff;119 border: 3px solid #141414;120 border-radius: 50%;121 }122 123 /* Dock icons */124 .dock {125 position: absolute;126 bottom: 460px;127 left: 0; right: 0;128 display: flex;129 justify-content: center;130 gap: 72px;131 }132 .dock-icon {133 width: 132px; height: 132px;134 background: #fff;135 border-radius: 50%;136 box-shadow: 0 10px 16px rgba(0,0,0,0.35);137 display: flex; align-items: center; justify-content: center;138 }139 .dock-icon svg { width: 70px; height: 70px; }140 141 /* Search pill */142 .search-pill {143 position: absolute;144 bottom: 270px;145 left: 80px; width: 920px; height: 110px;146 background: #2b2b2b;147 border-radius: 60px;148 box-shadow: 0 12px 20px rgba(0,0,0,0.45);149 display: flex; align-items: center; justify-content: space-between;150 padding: 0 30px;151 color: #fff;152 font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;153 }154 .g-badge {155 display: flex; align-items: center; gap: 16px; color: #fff;156 }157 .google-logo {158 width: 64px; height: 64px; border-radius: 50%;159 background: conic-gradient(#4285F4 0 25%, #34A853 25% 50%, #FBBC05 50% 75%, #EA4335 75% 100%);160 display: flex; align-items: center; justify-content: center;161 }162 .google-logo span {163 font-weight: 800; font-size: 36px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.35);164 }165 .search-right { display: flex; align-items: center; gap: 22px; }166 .search-icon {167 width: 74px; height: 74px; background: #3c3c3c; border-radius: 50%;168 display: flex; align-items: center; justify-content: center;169 }170 .search-icon svg { width: 36px; height: 36px; fill: #fff; }171 172 /* Gesture bar */173 .gesture {174 position: absolute;175 bottom: 32px; left: 50%;176 transform: translateX(-50%);177 width: 360px; height: 16px;178 border-radius: 10px;179 background: rgba(255,255,255,0.55);180 }181</style>182</head>183<body>184<div id="render-target">185 186 <!-- Status bar -->187 <div class="status-bar">188 <div class="status-left">3:50</div>189 <div class="status-center">190 <div class="status-pill">N</div>191 <div class="status-pill">fc</div>192 <div class="status-pill">fc</div>193 <div class="status-pill">M</div>194 <div class="status-dot"></div>195 </div>196 <div class="status-right">197 <div class="status-icon">198 <!-- Silent icon (bell with slash) -->199 <svg viewBox="0 0 24 24">200 <path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z"></path>201 <path d="M18 16V11a6 6 0 1 0-12 0v5l-2 2h16"></path>202 <path d="M3 3l18 18" stroke="#fff"></path>203 </svg>204 </div>205 <div class="status-icon">206 <!-- WiFi -->207 <svg viewBox="0 0 24 24">208 <path d="M2 8c5-4 15-4 20 0"></path>209 <path d="M5 11c3-3 11-3 14 0"></path>210 <path d="M8 14c2-2 6-2 8 0"></path>211 <circle cx="12" cy="17" r="1.6" fill="#fff"></circle>212 </svg>213 </div>214 <div class="status-icon">215 <!-- Battery -->216 <svg viewBox="0 0 28 24">217 <rect x="2" y="5" width="20" height="14" rx="2" ry="2" stroke="#fff"></rect>218 <rect x="4" y="7" width="14" height="10" fill="#fff"></rect>219 <rect x="22" y="9" width="4" height="6" rx="1" ry="1" fill="#fff"></rect>220 </svg>221 </div>222 </div>223 </div>224 225 <!-- App grid -->226 <div class="apps-grid">227 <div class="app">228 <div class="icon i-dbws">A</div>229 <div class="label">DBW Show...</div>230 </div>231 <div class="app">232 <div class="icon i-kayak">K</div>233 <div class="label">KAYAK</div>234 </div>235 <div class="app">236 <div class="icon i-expedia">↗</div>237 <div class="label">Expedia</div>238 </div>239 <div class="app">240 <div class="icon i-firstcry">fc</div>241 <div class="label">FirstCry</div>242 </div>243 244 <div class="app">245 <div class="icon i-flipkart">F</div>246 <div class="label">Flipkart</div>247 </div>248 <div class="app">249 <div class="icon i-doordash">D</div>250 <div class="label">DoorDash</div>251 </div>252 <div class="app">253 <div class="icon i-chat">C</div>254 <div class="label">Chat</div>255 </div>256 <div class="app">257 <div class="icon i-instagram">IG</div>258 <div class="label">Instagram</div>259 </div>260 261 <div class="app">262 <div class="icon i-royalmatch">RM</div>263 <div class="label">Royal Match</div>264 </div>265 <div class="app">266 <div class="icon i-gallery">Ga</div>267 <div class="label">Gallery</div>268 </div>269 <div class="app" style="position:relative;">270 <div class="icon i-nykaa">N</div>271 <div class="nykaa-badge"></div>272 <div class="label">NykaaFashi...</div>273 </div>274 <div class="app">275 <div class="icon i-citymapper">→</div>276 <div class="label">Citymapper</div>277 </div>278 279 <div class="app">280 <div class="icon i-zara">ZARA</div>281 <div class="label">ZARA</div>282 </div>283 <div class="app">284 <div class="icon i-hm">H&M</div>285 <div class="label">H&M</div>286 </div>287 <div class="app">288 <div class="icon i-amazon">a</div>289 <div class="label">Amazon</div>290 </div>291 <div class="app">292 <div class="icon i-farfetch">FF</div>293 <div class="label">Farfetch</div>294 </div>295 </div>296 297 <!-- Dock -->298 <div class="dock">299 <div class="dock-icon" title="Phone">300 <svg viewBox="0 0 24 24" fill="#2b7cff">301 <path d="M6 2h4l2 4-2 2a12 12 0 0 0 6 6l2-2 4 2v4a3 3 0 0 1-3 3c-9 0-16-7-16-16A3 3 0 0 1 6 2z"></path>302 </svg>303 </div>304 <div class="dock-icon" title="Messages">305 <svg viewBox="0 0 24 24" fill="#4a7cf0">306 <path d="M4 5h16v11H7l-3 3V5z"></path>307 </svg>308 </div>309 <div class="dock-icon" title="Chrome">310 <svg viewBox="0 0 24 24">311 <circle cx="12" cy="12" r="10" fill="#f44336"></circle>312 <path d="M12 2a10 10 0 0 1 8.66 5H12" fill="#ffeb3b"></path>313 <path d="M3.35 8A10 10 0 0 0 12 22l-4.5-7.8" fill="#4caf50"></path>314 <circle cx="12" cy="12" r="4" fill="#2196f3"></circle>315 </svg>316 </div>317 <div class="dock-icon" title="Camera">318 <svg viewBox="0 0 24 24" fill="#3c3c3c">319 <rect x="3" y="6" width="18" height="12" rx="2" ry="2" fill="#4b89ff"></rect>320 <circle cx="12" cy="12" r="4" fill="#fff"></circle>321 <rect x="8" y="4" width="8" height="2" fill="#3c3c3c"></rect>322 </svg>323 </div>324 </div>325 326 <!-- Google Search pill -->327 <div class="search-pill">328 <div class="g-badge">329 <div class="google-logo"><span>G</span></div>330 <div style="opacity:.85; font-size:30px;">Search</div>331 </div>332 <div class="search-right">333 <div class="search-icon" title="Voice">334 <svg viewBox="0 0 24 24"><path d="M12 3a4 4 0 0 1 4 4v5a4 4 0 1 1-8 0V7a4 4 0 0 1 4-4z"></path><path d="M19 11a7 7 0 0 1-14 0"></path><path d="M12 18v3"></path></svg>335 </div>336 <div class="search-icon" title="Lens">337 <svg viewBox="0 0 24 24">338 <rect x="4" y="4" width="16" height="16" rx="4" ry="4"></rect>339 <circle cx="12" cy="12" r="4"></circle>340 </svg>341 </div>342 </div>343 </div>344 345 <!-- Gesture bar -->346 <div class="gesture"></div>347</div>348</body>349</html>