GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Android Home Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 overflow: hidden;11 width: 1080px;12 height: 2400px;13 background: radial-gradient(1200px 1200px at 20% 85%, #8ea28d 0%, #6f846f 30%, #5c705f 60%, #4c5e4f 100%);14 }15 16 /* abstract curved wallpaper accents */17 .curve {18 position: absolute;19 border-radius: 50%;20 filter: blur(0.2px);21 pointer-events: none;22 }23 .curve.c1 { width: 1200px; height: 2500px; left: 620px; top: -200px; background: rgba(0,0,0,0.22); transform: rotate(20deg); }24 .curve.c2 { width: 900px; height: 2400px; left: -240px; top: 120px; background: rgba(0,0,0,0.12); transform: rotate(-10deg); }25 .curve.c3 { width: 420px; height: 2200px; right: -120px; top: 420px; background: rgba(0,0,0,0.22); transform: rotate(-18deg); }26 27 /* status bar */28 .status-bar {29 position: absolute;30 left: 0; right: 0; top: 0;31 height: 112px;32 padding: 24px 28px;33 color: #ffffff;34 font-size: 34px;35 display: flex;36 align-items: center;37 justify-content: space-between;38 text-shadow: 0 1px 2px rgba(0,0,0,0.35);39 }40 .sb-left { display: flex; align-items: center; gap: 18px; }41 .sb-right { display: flex; align-items: center; gap: 22px; }42 43 .sb-icon {44 width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;45 opacity: 0.95;46 }47 .sb-icon svg { width: 100%; height: 100%; fill: #ffffff; }48 49 /* page dot */50 .page-dot {51 position: absolute;52 top: 152px;53 left: 50%;54 transform: translateX(-50%);55 width: 12px; height: 12px;56 border-radius: 50%;57 background: #e9ecef;58 opacity: 0.8;59 }60 61 /* app grid */62 .apps {63 position: absolute;64 top: 280px;65 left: 40px;66 right: 40px;67 display: grid;68 grid-template-columns: repeat(4, 1fr);69 grid-row-gap: 140px;70 grid-column-gap: 10px;71 }72 .app {73 display: flex;74 align-items: center;75 flex-direction: column;76 gap: 22px;77 min-height: 260px;78 }79 .icon {80 width: 160px;81 height: 160px;82 border-radius: 40%;83 display: flex;84 align-items: center;85 justify-content: center;86 color: #fff;87 font-weight: 700;88 font-size: 68px;89 box-shadow: 0 8px 18px rgba(0,0,0,0.35);90 position: relative;91 }92 .label {93 max-width: 210px;94 color: #f5f7f9;95 font-size: 34px;96 letter-spacing: 0.2px;97 text-align: center;98 text-shadow: 0 2px 3px rgba(0,0,0,0.35);99 white-space: nowrap;100 overflow: hidden;101 text-overflow: ellipsis;102 }103 104 /* colors per app */105 .c-android { background: #4caf50; border-radius: 22%; }106 .c-kayak { background: #ff7a3d; border-radius: 28%; }107 .c-expedia{ background: #ffe25c; color: #0c1330; border-radius: 50%; }108 .c-flipkart{ background: #2c7be5; border-radius: 28%; }109 .c-doordash{ background: #ffffff; color: #e53935; }110 .c-chat{ background: #ffffff; color: #2e7d32; }111 .c-city{ background: #32b44a; }112 .c-zara{ background: #ffffff; color: #000; }113 .c-hm{ background: #ffffff; color: #d62222; }114 .c-amazon{ background: #d7ba86; color: #111; }115 .c-ff{ background: #ffffff; color: #111; }116 .c-nykaa{ background: #0d0d10; color: #ff4b8e; }117 118 /* simple marks inside icons */119 .icon svg { width: 70%; height: 70%; }120 .tiny-dot {121 position: absolute;122 width: 30px; height: 30px;123 border-radius: 50%;124 right: -2px; top: -2px;125 background: #7fd0d7;126 border: 4px solid rgba(0,0,0,0.35);127 }128 129 /* Dock row */130 .dock {131 position: absolute;132 left: 0; right: 0;133 bottom: 340px;134 display: flex;135 justify-content: center;136 gap: 80px;137 }138 .dock .dock-icon {139 width: 128px; height: 128px;140 background: #ffffff;141 color: #4a67d1;142 border-radius: 36%;143 display: flex;144 align-items: center;145 justify-content: center;146 font-size: 58px;147 box-shadow: 0 8px 18px rgba(0,0,0,0.35);148 }149 .dock .dock-icon svg { width: 64%; height: 64%; fill: #2e5bd4; }150 151 /* Search bar */152 .search {153 position: absolute;154 left: 60px; right: 60px; bottom: 170px;155 height: 120px;156 background: rgba(18,18,18,0.92);157 border-radius: 60px;158 display: flex;159 align-items: center;160 padding: 0 28px 0 34px;161 box-shadow: 0 12px 24px rgba(0,0,0,0.45) inset, 0 10px 40px rgba(0,0,0,0.35);162 color: #eaeaea;163 }164 .search .g {165 width: 76px; height: 76px; border-radius: 50%;166 display: flex; align-items: center; justify-content: center;167 font-weight: 800; margin-right: 20px;168 background: #fff; color: #4285F4;169 box-shadow: 0 3px 8px rgba(0,0,0,0.25);170 }171 .search .spacer { flex: 1; }172 .search .s-btn {173 width: 78px; height: 78px; border-radius: 50%;174 background: #2a2a2a; display: flex; align-items: center; justify-content: center;175 margin-left: 16px;176 }177 .search .s-btn svg { width: 46px; height: 46px; fill: #d7d7d7; }178 179 /* home indicator */180 .home {181 position: absolute;182 left: 50%; bottom: 84px; transform: translateX(-50%);183 width: 220px; height: 10px; border-radius: 8px; background: rgba(255,255,255,0.65);184 }185</style>186</head>187<body>188<div id="render-target">189 <div class="curve c1"></div>190 <div class="curve c2"></div>191 <div class="curve c3"></div>192 193 <div class="status-bar">194 <div class="sb-left">195 <div class="time">12:13</div>196 <div class="sb-icon" title="messages">197 <svg viewBox="0 0 24 24"><path d="M20 2H4a2 2 0 0 0-2 2v14l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z"/></svg>198 </div>199 </div>200 <div class="sb-right">201 <div class="sb-icon" title="silent">202 <svg viewBox="0 0 24 24"><path d="M12 3 4 9v6h5v5l7-5h4V9z"/></svg>203 </div>204 <div class="sb-icon" title="wifi">205 <svg viewBox="0 0 24 24"><path d="M12 18a2 2 0 1 0 .001 4.001A2 2 0 0 0 12 18zm-7-5a12 12 0 0 1 14 0l-2 2a9 9 0 0 0-10 0l-2-2zm-3-4a18 18 0 0 1 20 0l-2 2a15 15 0 0 0-16 0L2 9z"/></svg>206 </div>207 <div class="sb-icon" title="battery">208 <svg viewBox="0 0 24 24"><path d="M18 6h2v12h-2M4 7h12v10H4z"/></svg>209 </div>210 </div>211 </div>212 213 <div class="page-dot"></div>214 215 <div class="apps">216 <!-- Row 1 -->217 <div class="app">218 <div class="icon c-android">219 <svg viewBox="0 0 64 64">220 <rect x="12" y="22" width="40" height="28" rx="14" fill="#c8e6c9"/>221 <circle cx="26" cy="30" r="3" fill="#2e7d32"/>222 <circle cx="38" cy="30" r="3" fill="#2e7d32"/>223 <rect x="25" y="14" width="14" height="10" rx="5" fill="#c8e6c9"/>224 <rect x="16" y="28" width="6" height="16" rx="3" fill="#c8e6c9"/>225 <rect x="42" y="28" width="6" height="16" rx="3" fill="#c8e6c9"/>226 <rect x="21" y="10" width="2" height="8" rx="1" fill="#c8e6c9"/>227 <rect x="41" y="10" width="2" height="8" rx="1" fill="#c8e6c9"/>228 </svg>229 </div>230 <div class="label">DBW Show...</div>231 </div>232 233 <div class="app">234 <div class="icon c-kayak">K</div>235 <div class="label">KAYAK</div>236 </div>237 238 <div class="app">239 <div class="icon c-expedia">240 <svg viewBox="0 0 64 64">241 <circle cx="32" cy="32" r="28" fill="#ffe25c"/>242 <path d="M18 38l28-14-12 14 12 6z" fill="#0c1330"/>243 </svg>244 </div>245 <div class="label">Expedia</div>246 </div>247 248 <div class="app" style="opacity:0;">249 <div class="icon c-nykaa">N</div>250 <div class="label">placeholder</div>251 </div>252 253 <!-- Row 2 -->254 <div class="app">255 <div class="icon c-flipkart">256 <svg viewBox="0 0 64 64">257 <rect x="18" y="18" width="28" height="28" rx="6" fill="#ffda3e"/>258 <path d="M24 34h12l-3 6H21z" fill="#2c7be5"/>259 </svg>260 </div>261 <div class="label">Flipkart</div>262 </div>263 264 <div class="app">265 <div class="icon c-doordash">266 <svg viewBox="0 0 64 64">267 <path d="M12 30h34a8 8 0 0 1-8 8H20l-8-8z" fill="#e53935"/>268 </svg>269 </div>270 <div class="label">DoorDash</div>271 </div>272 273 <div class="app">274 <div class="icon c-chat">275 <svg viewBox="0 0 64 64">276 <path d="M12 16h40v26H28l-10 8v-8H12z" fill="#2e7d32"/>277 </svg>278 <span class="tiny-dot"></span>279 </div>280 <div class="label">Chat</div>281 </div>282 283 <div class="app">284 <div class="icon c-city">285 <svg viewBox="0 0 64 64" fill="#fff">286 <circle cx="20" cy="32" r="4" fill="#fff"/>287 <circle cx="44" cy="32" r="4" fill="#fff"/>288 <rect x="22" y="30" width="20" height="4" fill="#fff"/>289 <path d="M40 26l8 6-8 6z" fill="#fff"/>290 </svg>291 </div>292 <div class="label">Citymapper</div>293 </div>294 295 <!-- Row 3 -->296 <div class="app">297 <div class="icon c-zara">298 <svg viewBox="0 0 64 64">299 <text x="50%" y="54%" dominant-baseline="middle" text-anchor="middle" font-size="28" font-weight="700" fill="#000">ZARA</text>300 </svg>301 </div>302 <div class="label">ZARA</div>303 </div>304 305 <div class="app">306 <div class="icon c-hm">307 <svg viewBox="0 0 64 64">308 <text x="50%" y="54%" dominant-baseline="middle" text-anchor="middle" font-size="30" font-weight="700" fill="#d62222">H&M</text>309 </svg>310 </div>311 <div class="label">H&M</div>312 </div>313 314 <div class="app">315 <div class="icon c-amazon">316 <svg viewBox="0 0 64 64">317 <path d="M46 22c-8 6-18 6-28 4 6 4 18 8 28-4z" fill="#111"/>318 <path d="M22 40c8 6 18 6 28-1" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round"/>319 <rect x="36" y="10" width="10" height="8" rx="2" fill="#5fb3ff"/>320 </svg>321 </div>322 <div class="label">Amazon</div>323 </div>324 325 <div class="app">326 <div class="icon c-ff">327 <svg viewBox="0 0 64 64">328 <path d="M18 18h20a10 10 0 0 1 0 20H30" stroke="#111" stroke-width="8" fill="none" stroke-linecap="round"/>329 <path d="M18 32h20" stroke="#111" stroke-width="8" fill="none" stroke-linecap="round"/>330 </svg>331 </div>332 <div class="label">Farfetch</div>333 </div>334 </div>335 336 <!-- Nykaa Fashion floating icon to match screenshot -->337 <div style="position:absolute; left:480px; top:970px; display:flex; flex-direction:column; align-items:center; gap:22px;">338 <div class="icon c-nykaa">339 <svg viewBox="0 0 64 64">340 <text x="50%" y="54%" dominant-baseline="middle" text-anchor="middle" font-size="36" font-weight="800" fill="#ff4b8e">N</text>341 </svg>342 <span class="tiny-dot"></span>343 </div>344 <div class="label" style="width:220px; text-align:center;">NykaaFashi...</div>345 </div>346 347 <!-- Dock icons -->348 <div class="dock">349 <div class="dock-icon" title="Phone">350 <svg viewBox="0 0 24 24"><path d="M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2c.3-.3.8-.4 1.2-.2 1.3.5 2.7.8 4.1.8.7 0 1.3.6 1.3 1.3V20c0 .7-.6 1.3-1.3 1.3C9.6 21.3 2.7 14.4 2.7 5.3 2.7 4.6 3.3 4 4 4h2.9c.7 0 1.3.6 1.3 1.3 0 1.4.3 2.8.8 4.1.1.4 0 .8-.3 1.1l-2.1 2.3z"/></svg>351 </div>352 <div class="dock-icon" title="Messages">353 <svg viewBox="0 0 24 24"><path d="M4 4h16v12H8l-4 4z"/></svg>354 </div>355 <div class="dock-icon" title="Chrome">356 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#43a047"/><path d="M12 2a10 10 0 0 1 8.7 5H12a5 5 0 0 0-4.3 2.5L5 5.5A10 10 0 0 1 12 2z" fill="#e53935"/><path d="M21.3 7A10 10 0 0 1 12 22l4.7-8.5A5 5 0 0 0 21.3 7z" fill="#fbc02d"/><path d="M12 22A10 10 0 0 1 5 5.5L9.7 12A5 5 0 0 0 12 17v5z" fill="#1e88e5"/></svg>357 </div>358 <div class="dock-icon" title="Camera">359 <svg viewBox="0 0 24 24"><path d="M7 6h3l2-2h4l2 2h3v14H3V6h4zM12 9a5 5 0 1 0 0 10 5 5 0 0 0 0-10z"/></svg>360 </div>361 </div>362 363 <!-- Search bar -->364 <div class="search">365 <div class="g">G</div>366 <div style="opacity:0.85;">Search</div>367 <div class="spacer"></div>368 <div class="s-btn" title="Voice">369 <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V7a3 3 0 0 0-6 0v4a3 3 0 0 0 3 3zm-6-3h2a4 4 0 0 0 8 0h2a6 6 0 0 1-5 5.9V20h-2v-3.1A6 6 0 0 1 6 11z"/></svg>370 </div>371 <div class="s-btn" title="Lens">372 <svg viewBox="0 0 24 24"><path d="M9 3h6a6 6 0 0 1 6 6v6l-6 6H9a6 6 0 0 1-6-6V9l6-6zM7 9h10v6H7V9z"/></svg>373 </div>374 </div>375 376 <div class="home"></div>377</div>378</body>379</html>