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>Mobile Home Screen Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: linear-gradient(180deg, #bcd0e9 0%, #cfe1f7 60%, #d7e7fb 100%);15 border-radius: 32px;16 }17 18 /* Wallpaper decorative shapes */19 .sun {20 position: absolute;21 width: 680px;22 height: 680px;23 border-radius: 50%;24 background: #f3c542;25 top: 220px;26 left: -140px;27 opacity: 0.95;28 }29 .flower {30 position: absolute; border-radius: 50%;31 box-shadow: 0 8px 20px rgba(0,0,0,0.08);32 }33 .flower.red { width: 320px; height: 320px; background: #e15849; bottom: 520px; left: 40px; }34 .flower.yellow { width: 300px; height: 300px; background: #f7c94a; bottom: 640px; left: 470px; }35 .flower.peach { width: 260px; height: 260px; background: #f3b786; bottom: 780px; right: 120px; }36 .flower.white { width: 240px; height: 240px; background: #ffffff; bottom: 470px; left: 300px; }37 38 /* Status bar */39 .status-bar {40 position: absolute;41 top: 22px;42 left: 28px;43 right: 28px;44 height: 64px;45 color: #ffffff;46 display: flex;47 align-items: center;48 justify-content: space-between;49 font-weight: 600;50 }51 .status-left { font-size: 34px; letter-spacing: 0.5px; }52 .status-right { display: flex; align-items: center; gap: 18px; }53 .status-icon svg { width: 34px; height: 34px; }54 .dot-indicator {55 position: absolute;56 top: 96px;57 left: 50%;58 transform: translateX(-50%);59 width: 12px;60 height: 12px;61 background: rgba(255,255,255,0.9);62 border-radius: 50%;63 }64 65 /* App grid */66 .apps {67 position: absolute;68 top: 320px;69 left: 30px;70 right: 30px;71 display: grid;72 grid-template-columns: repeat(5, 1fr);73 grid-gap: 48px 28px;74 }75 .app-item {76 display: flex;77 flex-direction: column;78 align-items: center;79 }80 .app-icon {81 width: 150px;82 height: 150px;83 border-radius: 50%;84 background: #E0E0E0;85 border: 1px solid #BDBDBD;86 display: flex;87 align-items: center;88 justify-content: center;89 color: #757575;90 text-align: center;91 font-size: 22px;92 padding: 10px;93 }94 .app-name {95 margin-top: 18px;96 width: 160px;97 text-align: center;98 color: #ffffff;99 font-size: 32px;100 line-height: 1.1;101 white-space: nowrap;102 overflow: hidden;103 text-overflow: ellipsis;104 text-shadow: 0 2px 3px rgba(0,0,0,0.25);105 }106 107 /* Dock icons */108 .dock {109 position: absolute;110 bottom: 380px;111 left: 0;112 right: 0;113 display: flex;114 justify-content: center;115 gap: 96px;116 }117 .dock .app-icon { width: 128px; height: 128px; }118 .dock .app-name { display: none; }119 120 /* Google search bar */121 .search-bar {122 position: absolute;123 left: 80px;124 right: 80px;125 bottom: 210px;126 height: 120px;127 background: #2f3238;128 border-radius: 60px;129 box-shadow: 0 10px 24px rgba(0,0,0,0.25);130 display: flex;131 align-items: center;132 justify-content: space-between;133 padding: 0 34px;134 }135 .search-left {136 display: flex;137 align-items: center;138 gap: 22px;139 }140 .g-badge {141 width: 72px;142 height: 72px;143 border-radius: 50%;144 background: #ffffff;145 display: flex;146 align-items: center;147 justify-content: center;148 font-weight: 800;149 font-size: 40px;150 color: #4285F4;151 }152 .search-placeholder {153 color: #cfd3da;154 font-size: 34px;155 }156 .search-right { display: flex; align-items: center; gap: 28px; }157 .search-right svg { width: 48px; height: 48px; }158 159 /* Nav pill */160 .nav-pill {161 position: absolute;162 bottom: 92px;163 left: 50%;164 transform: translateX(-50%);165 width: 220px;166 height: 14px;167 background: #ffffff;168 border-radius: 10px;169 opacity: 0.9;170 }171</style>172</head>173<body>174<div id="render-target">175 176 <!-- Wallpaper decoration -->177 <div class="sun"></div>178 <div class="flower red"></div>179 <div class="flower yellow"></div>180 <div class="flower peach"></div>181 <div class="flower white"></div>182 183 <!-- Status bar -->184 <div class="status-bar">185 <div class="status-left">7:49</div>186 <div class="status-right">187 <div class="status-icon" title="Location">188 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M12 2l7 7-7 13-7-13z"/></svg>189 </div>190 <div class="status-icon" title="Bluetooth">191 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M6 5l12 7-12 7 6-7-6-7z"/></svg>192 </div>193 <div class="status-icon" title="Alarm">194 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><circle cx="12" cy="13" r="7"/><path d="M12 10v4l3 2"/><path d="M5 4l3 3M19 4l-3 3"/></svg>195 </div>196 <div class="status-icon" title="Search">197 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><circle cx="10" cy="10" r="6"/><path d="M14 14l6 6"/></svg>198 </div>199 <div class="status-icon" title="Wi‑Fi">200 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">201 <path d="M2 8c5-4 15-4 20 0"/><path d="M5 12c3-3 11-3 14 0"/><path d="M8 16c2-2 6-2 8 0"/><circle cx="12" cy="19" r="1.5" fill="#fff" stroke="none"/>202 </svg>203 </div>204 <div class="status-icon" title="Battery">205 <svg viewBox="0 0 28 24" fill="none" stroke="#fff" stroke-width="2">206 <rect x="2" y="5" width="20" height="14" rx="2"/>207 <rect x="23" y="9" width="3" height="6" rx="1" fill="#fff" stroke="none"/>208 <rect x="4" y="7" width="12" height="10" fill="#fff" stroke="none"/>209 </svg>210 </div>211 <div style="font-size:28px;color:#ffffff;">42%</div>212 </div>213 </div>214 <div class="dot-indicator"></div>215 216 <!-- App grid -->217 <div class="apps">218 <div class="app-item">219 <div class="app-icon">[APP: Grubhub]</div>220 <div class="app-name">Grubhub</div>221 </div>222 <div class="app-item">223 <div class="app-icon">[APP: eBay]</div>224 <div class="app-name">eBay</div>225 </div>226 <div class="app-item">227 <div class="app-icon">[APP: Kitchen Stories]</div>228 <div class="app-name">Kitchen Sto...</div>229 </div>230 <div class="app-item">231 <div class="app-icon">[APP: Rappi]</div>232 <div class="app-name">Rappi</div>233 </div>234 <div class="app-item">235 <div class="app-icon">[APP: SideChef]</div>236 <div class="app-name">SideChef</div>237 </div>238 239 <div class="app-item">240 <div class="app-icon">[APP: Lunch Recipes]</div>241 <div class="app-name">Lunch Reci...</div>242 </div>243 <div class="app-item">244 <div class="app-icon">[APP: Delivery]</div>245 <div class="app-name">Delivery M...</div>246 </div>247 <div class="app-item">248 <div class="app-icon">[APP: UaiRango]</div>249 <div class="app-name">UaiRango</div>250 </div>251 <div class="app-item">252 <div class="app-icon">[APP: IKEA]</div>253 <div class="app-name">IKEA</div>254 </div>255 <div class="app-item">256 <div class="app-icon">[APP: Pepperfry]</div>257 <div class="app-name">Pepperfry</div>258 </div>259 260 <div class="app-item">261 <div class="app-icon">[APP: Duolingo]</div>262 <div class="app-name">Duolingo</div>263 </div>264 <div class="app-item">265 <div class="app-icon">[APP: Memrise]</div>266 <div class="app-name">Memrise</div>267 </div>268 <div class="app-item">269 <div class="app-icon">[APP: Babbel]</div>270 <div class="app-name">Babbel</div>271 </div>272 <div class="app-item">273 <div class="app-icon">[APP: Falou]</div>274 <div class="app-name">Falou</div>275 </div>276 <div class="app-item">277 <div class="app-icon">[APP: Klook]</div>278 <div class="app-name">Klook</div>279 </div>280 281 <div class="app-item">282 <div class="app-icon">[APP: Disney+ Hotstar]</div>283 <div class="app-name">Hotstar</div>284 </div>285 <div class="app-item">286 <div class="app-icon">[APP: JioCinema]</div>287 <div class="app-name">JioCinema</div>288 </div>289 <div class="app-item">290 <div class="app-icon">[APP: Airbnb]</div>291 <div class="app-name">Airbnb</div>292 </div>293 <div class="app-item">294 <div class="app-icon">[APP: Busuu]</div>295 <div class="app-name">Busuu</div>296 </div>297 <div class="app-item">298 <div class="app-icon">[APP: Mondly Languages]</div>299 <div class="app-name">Mondly Lan...</div>300 </div>301 </div>302 303 <!-- Dock -->304 <div class="dock">305 <div class="app-item">306 <div class="app-icon">[APP: Phone]</div>307 <div class="app-name">Phone</div>308 </div>309 <div class="app-item">310 <div class="app-icon">[APP: Messages]</div>311 <div class="app-name">Messages</div>312 </div>313 <div class="app-item">314 <div class="app-icon">[APP: Chrome]</div>315 <div class="app-name">Chrome</div>316 </div>317 <div class="app-item">318 <div class="app-icon">[APP: Camera]</div>319 <div class="app-name">Camera</div>320 </div>321 </div>322 323 <!-- Google search bar -->324 <div class="search-bar">325 <div class="search-left">326 <div class="g-badge">G</div>327 <div class="search-placeholder">Search</div>328 </div>329 <div class="search-right">330 <!-- Microphone -->331 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">332 <rect x="8" y="4" width="8" height="10" rx="4" fill="#4285F4" stroke="none"/>333 <path d="M6 11a6 6 0 0012 0" stroke="#fff"/>334 <path d="M12 17v3" stroke="#fff"/>335 </svg>336 <!-- Google Lens-like camera -->337 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">338 <rect x="4" y="4" width="16" height="16" rx="5" />339 <circle cx="12" cy="12" r="4" fill="#e94335" stroke="none"/>340 <circle cx="12" cy="12" r="2" fill="#34a853" stroke="none"/>341 </svg>342 </div>343 </div>344 345 <!-- Navigation pill -->346 <div class="nav-pill"></div>347</div>348</body>349</html>