GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Android Home Screen Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: radial-gradient(1200px 1600px at 50% 40%, #2c2c2c 0%, #1e1e1e 50%, #171717 100%);13 color: #fff;14 }15 16 /* Status Bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 120px;23 padding: 24px 32px;24 box-sizing: border-box;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #ffffff;29 font-weight: 600;30 letter-spacing: 0.5px;31 }32 .status-left {33 display: flex;34 align-items: center;35 gap: 24px;36 font-size: 40px;37 }38 .mini-icons { display: flex; align-items: center; gap: 16px; }39 .mini-icon {40 width: 34px; height: 34px; border-radius: 7px;41 background: #e9e9e9;42 border: 1px solid #bdbdbd;43 }44 .status-right { display: flex; align-items: center; gap: 24px; }45 .wifi svg, .battery svg { display: block; }46 .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.7; }47 48 /* App Grid */49 .apps {50 position: absolute;51 top: 160px;52 left: 0;53 width: 100%;54 padding: 40px 60px 0;55 box-sizing: border-box;56 display: grid;57 grid-template-columns: repeat(4, 1fr);58 grid-column-gap: 60px;59 grid-row-gap: 70px;60 }61 .app {62 display: flex;63 flex-direction: column;64 align-items: center;65 }66 .icon {67 width: 170px; height: 170px; border-radius: 50%;68 display: flex; align-items: center; justify-content: center;69 font-size: 56px; font-weight: 700;70 box-shadow: 0 6px 16px rgba(0,0,0,0.35);71 }72 .icon.light { background: #ffffff; color: #000; }73 .icon.blue { background: #2b6ff7; }74 .icon.green { background: #58b764; }75 .icon.dark { background: #333; }76 .icon.coral { background: #ff6f61; }77 .icon.violet { background: #7b61ff; }78 .icon.yellow { background: #f4c542; color: #111; }79 .icon.teal { background: #2fa7a1; }80 .icon.pink { background: #e86fb7; }81 .icon.orange { background: #f28c2b; }82 .icon.red { background: #e04848; }83 .icon.maroon { background: #aa3333; }84 .icon.gray { background: #606060; }85 86 .label {87 margin-top: 18px;88 max-width: 190px;89 text-align: center;90 font-size: 36px;91 font-weight: 500;92 white-space: nowrap;93 overflow: hidden;94 text-overflow: ellipsis;95 color: #fafafa;96 }97 98 /* Bottom Dock Icons */99 .dock {100 position: absolute;101 bottom: 340px;102 left: 60px;103 width: 960px;104 display: flex;105 justify-content: space-between;106 align-items: center;107 }108 .dock-icon {109 width: 160px; height: 160px; border-radius: 50%;110 background: #e9eef7;111 display: flex; align-items: center; justify-content: center;112 box-shadow: 0 6px 16px rgba(0,0,0,0.35);113 }114 .dock-icon svg { width: 82px; height: 82px; }115 116 /* Google Search Bar */117 .search-bar {118 position: absolute;119 left: 60px;120 bottom: 160px;121 width: 960px;122 height: 120px;123 background: #2d2d2d;124 border-radius: 60px;125 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05);126 display: flex;127 align-items: center;128 padding: 0 34px;129 box-sizing: border-box;130 gap: 26px;131 }132 .g-pill {133 width: 72px; height: 72px; border-radius: 50%;134 background: #ffffff; color: #1976d2; font-weight: 800; font-size: 46px;135 display: flex; align-items: center; justify-content: center;136 }137 .search-spacer { flex: 1; }138 .sb-icon { width: 70px; height: 70px; border-radius: 18px; background: #3a3a3a; display: flex; align-items: center; justify-content: center; }139 .sb-icon svg { width: 40px; height: 40px; fill: #ffffff; }140 141 /* Gesture pill */142 .gesture {143 position: absolute;144 bottom: 26px;145 left: 50%;146 transform: translateX(-50%);147 width: 260px; height: 14px;148 background: #cfcfcf;149 border-radius: 8px;150 opacity: 0.85;151 }152 153 /* Long names slightly smaller */154 .label.small { font-size: 34px; }155</style>156</head>157<body>158<div id="render-target">159 160 <!-- Status bar -->161 <div class="status-bar">162 <div class="status-left">163 <div>8:51</div>164 <div class="mini-icons">165 <div class="mini-icon"></div>166 <div class="mini-icon"></div>167 <div class="mini-icon"></div>168 <div class="mini-icon"></div>169 </div>170 <div class="dot"></div>171 </div>172 <div class="status-right">173 <div class="wifi">174 <svg width="48" height="36" viewBox="0 0 48 36">175 <path d="M24 30c2.2 0 4 1.8 4 4h-8c0-2.2 1.8-4 4-4z" fill="#fff"/>176 <path d="M6 10c5-4 11-6 18-6s13 2 18 6l-4 4c-4-3-9-4.5-14-4.5S14 11 10 14l-4-4z" fill="#fff" opacity="0.7"/>177 <path d="M12 16c3.9-2.8 8.5-4.2 12-4.2s8.1 1.4 12 4.2l-4 4c-2.6-2-5.6-3-8-3s-5.4 1-8 3l-4-4z" fill="#fff" opacity="0.75"/>178 <circle cx="24" cy="26" r="3" fill="#fff"/>179 </svg>180 </div>181 <div class="battery">182 <svg width="60" height="28" viewBox="0 0 60 28">183 <rect x="2" y="2" width="48" height="24" rx="4" fill="none" stroke="#fff" stroke-width="3"/>184 <rect x="6" y="6" width="40" height="16" rx="3" fill="#ffffff"/>185 <rect x="52" y="8" width="6" height="12" rx="2" fill="#fff"/>186 </svg>187 </div>188 </div>189 </div>190 191 <!-- App grid -->192 <div class="apps">193 194 <!-- Row 1 -->195 <div class="app">196 <div class="icon light">G</div>197 <div class="label">GoTo</div>198 </div>199 <div class="app">200 <div class="icon light" style="background:#f7f7ff; color:#3949ab;">•</div>201 <div class="label">TeamLink</div>202 </div>203 <div class="app">204 <div class="icon light" style="background:#fff; color:#f57c00;">A</div>205 <div class="label">AnyMeeting</div>206 </div>207 <div class="app">208 <div class="icon green">209 <svg width="96" height="96" viewBox="0 0 96 96">210 <rect x="20" y="18" width="56" height="44" rx="8" fill="#fff"/>211 <rect x="64" y="28" width="10" height="20" rx="4" fill="#b2df8a"/>212 </svg>213 </div>214 <div class="label small">Connect M...</div>215 </div>216 217 <!-- Row 2 -->218 <div class="app">219 <div class="icon light" style="background:#ffffff; color:#1976d2;">220 <svg width="86" height="86" viewBox="0 0 86 86">221 <rect x="18" y="24" width="50" height="36" rx="8" fill="#1976d2"/>222 <circle cx="43" cy="42" r="10" fill="#fff"/>223 </svg>224 </div>225 <div class="label">Teameet</div>226 </div>227 <div class="app">228 <div class="icon teal">S</div>229 <div class="label">StartMeeting</div>230 </div>231 <div class="app">232 <div class="icon blue">Z</div>233 <div class="label small">Zoom for In...</div>234 </div>235 <div class="app">236 <div class="icon light" style="background:#ffffff; color:#1e88e5;">237 <svg width="86" height="86" viewBox="0 0 86 86">238 <rect x="18" y="24" width="50" height="36" rx="10" fill="#1e88e5"/>239 <rect x="54" y="30" width="14" height="16" rx="3" fill="#fff"/>240 </svg>241 </div>242 <div class="label small">Video Conf..</div>243 </div>244 245 <!-- Row 3 -->246 <div class="app">247 <div class="icon dark">W</div>248 <div class="label">Webex</div>249 </div>250 <div class="app">251 <div class="icon light" style="background:#ffffff; color:#2196f3;">S</div>252 <div class="label">Skype</div>253 </div>254 <div class="app">255 <div class="icon blue">Z</div>256 <div class="label small">Room Cont...</div>257 </div>258 <div class="app">259 <div class="icon violet">Y</div>260 <div class="label">Yalla Toys</div>261 </div>262 263 <!-- Row 4 -->264 <div class="app">265 <div class="icon pink">fc</div>266 <div class="label">FirstCry</div>267 </div>268 <div class="app">269 <div class="icon light" style="background:#ffffff; color:#1e88e5;">T</div>270 <div class="label">ToysPoint</div>271 </div>272 <div class="app">273 <div class="icon yellow">274 <svg width="92" height="92" viewBox="0 0 92 92">275 <rect x="20" y="40" width="52" height="20" rx="6" fill="#fff"/>276 <circle cx="65" cy="50" r="10" fill="#c6c6c6"/>277 </svg>278 </div>279 <div class="label small">Toys shopp...</div>280 </div>281 <div class="app">282 <div class="icon yellow">283 <svg width="92" height="92" viewBox="0 0 92 92">284 <rect x="20" y="24" width="52" height="44" rx="9" fill="#fff"/>285 <circle cx="46" cy="46" r="9" fill="#e67e22"/>286 </svg>287 </div>288 <div class="label small">Toys Shopp..</div>289 </div>290 291 <!-- Row 5 -->292 <div class="app">293 <div class="icon red">S</div>294 <div class="label">Snapdeal</div>295 </div>296 <div class="app">297 <div class="icon maroon">H</div>298 <div class="label">Hamleys</div>299 </div>300 <div class="app">301 <div class="icon orange">302 <svg width="92" height="92" viewBox="0 0 92 92">303 <circle cx="46" cy="46" r="24" fill="#fff"/>304 <circle cx="46" cy="46" r="10" fill="#f28c2b"/>305 <rect x="30" y="28" width="32" height="12" rx="6" fill="#fff" opacity="0.8"/>306 </svg>307 </div>308 <div class="label">BigOven</div>309 </div>310 <div class="app">311 <div class="icon gray">C</div>312 <div class="label">Cookd</div>313 </div>314 </div>315 316 <!-- Dock -->317 <div class="dock">318 <div class="dock-icon">319 <!-- Phone -->320 <svg viewBox="0 0 64 64">321 <path d="M20 14c2-2 6-2 8 0l6 6c2 2 2 6 0 8l-4 4c6 8 14 12 20 14l4-4c2-2 6-2 8 0l6 6c2 2 2 6 0 8l-4 4c-8 2-20-2-32-14S18 22 20 14z" fill="#1e88e5" />322 </svg>323 </div>324 <div class="dock-icon">325 <!-- Messages -->326 <svg viewBox="0 0 64 64">327 <rect x="8" y="10" width="48" height="34" rx="8" fill="#3f51b5"/>328 <path d="M16 50l10-6h30" stroke="#3f51b5" stroke-width="8" fill="none"/>329 <rect x="14" y="18" width="36" height="16" rx="4" fill="#fff"/>330 </svg>331 </div>332 <div class="dock-icon">333 <!-- Chrome (simple circle) -->334 <svg viewBox="0 0 64 64">335 <circle cx="32" cy="32" r="26" fill="#4caf50"/>336 <path d="M32 6a26 26 0 0123 13H32z" fill="#f44336"/>337 <path d="M55 19a26 26 0 01-10 33L32 32z" fill="#ffeb3b"/>338 <circle cx="32" cy="32" r="12" fill="#2196f3"/>339 </svg>340 </div>341 <div class="dock-icon">342 <!-- Camera -->343 <svg viewBox="0 0 64 64">344 <rect x="10" y="18" width="44" height="28" rx="6" fill="#424242"/>345 <rect x="20" y="12" width="16" height="8" rx="4" fill="#616161"/>346 <circle cx="32" cy="32" r="10" fill="#90caf9"/>347 </svg>348 </div>349 </div>350 351 <!-- Google Search Bar -->352 <div class="search-bar">353 <div class="g-pill">G</div>354 <div class="search-spacer"></div>355 <div class="sb-icon" title="Voice">356 <svg viewBox="0 0 32 32">357 <rect x="12" y="6" width="8" height="14" rx="4" fill="#fff"/>358 <path d="M8 16c0 6 4 10 8 10s8-4 8-10" stroke="#fff" stroke-width="3" fill="none"/>359 <rect x="14" y="24" width="4" height="4" fill="#fff"/>360 </svg>361 </div>362 <div class="sb-icon" title="Search by image">363 <svg viewBox="0 0 36 28">364 <rect x="2" y="4" width="28" height="20" rx="4" fill="#fff"/>365 <circle cx="16" cy="14" r="6" fill="#3a3a3a"/>366 <rect x="30" y="10" width="4" height="8" rx="2" fill="#fff"/>367 </svg>368 </div>369 </div>370 371 <!-- Gesture pill -->372 <div class="gesture"></div>373 374</div>375</body>376</html>