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 Screen 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: transparent;15 font-family: "Roboto", Arial, sans-serif;16 color: #fff;17 }18 19 /* Wallpaper placeholder (semantic image) */20 .wallpaper {21 position: absolute;22 inset: 0;23 background: #E0E0E0;24 border: 1px solid #BDBDBD;25 display: flex;26 align-items: flex-start;27 justify-content: flex-start;28 color: #757575;29 font-size: 26px;30 padding: 18px;31 }32 .dim-overlay {33 position: absolute;34 inset: 0;35 background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.35) 30%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.55) 100%);36 pointer-events: none;37 }38 39 /* Status bar */40 .status-bar {41 position: absolute;42 top: 28px;43 left: 36px;44 right: 36px;45 height: 80px;46 display: flex;47 align-items: center;48 justify-content: space-between;49 color: #ffffff;50 }51 .status-left {52 display: flex;53 align-items: center;54 gap: 16px;55 }56 .time {57 font-size: 40px;58 font-weight: 500;59 letter-spacing: 0.5px;60 }61 .notif-chip {62 background: rgba(255,255,255,0.18);63 color: #fff;64 font-size: 28px;65 padding: 6px 12px;66 border-radius: 18px;67 line-height: 1;68 }69 .status-right {70 display: flex;71 align-items: center;72 gap: 18px;73 }74 .status-icon svg { width: 40px; height: 40px; fill: #fff; opacity: 0.95; }75 76 /* Apps grid */77 .apps-grid {78 position: absolute;79 left: 36px;80 right: 36px;81 top: 170px;82 display: grid;83 grid-template-columns: repeat(4, 1fr);84 column-gap: 56px;85 row-gap: 96px;86 }87 .app {88 display: flex;89 flex-direction: column;90 align-items: center;91 }92 .icon {93 width: 160px;94 height: 160px;95 border-radius: 50%;96 display: grid;97 place-items: center;98 box-shadow: 0 10px 20px rgba(0,0,0,0.25);99 }100 .label {101 margin-top: 18px;102 font-size: 34px;103 font-weight: 400;104 text-align: center;105 width: 210px;106 color: #ffffff;107 text-shadow: 0 2px 3px rgba(0,0,0,0.6);108 white-space: nowrap;109 overflow: hidden;110 text-overflow: ellipsis;111 }112 113 /* Simple glyphs inside app icons (decorative) */114 .glyph { width: 84px; height: 84px; border-radius: 18px; background: rgba(255,255,255,0.9); }115 .ring {116 width: 90px; height: 90px; border-radius: 50%;117 border: 10px solid rgba(255,255,255,0.9);118 }119 120 /* Dock */121 .dock {122 position: absolute;123 left: 0; right: 0;124 bottom: 520px;125 height: 220px;126 display: flex;127 align-items: center;128 justify-content: center;129 gap: 90px;130 }131 .dock-icon {132 width: 132px; height: 132px; border-radius: 50%;133 background: #ffffff;134 display: grid; place-items: center;135 box-shadow: 0 10px 20px rgba(0,0,0,0.25);136 }137 .dock-icon svg { width: 64px; height: 64px; }138 139 /* Google search pill */140 .search-bar {141 position: absolute;142 left: 60px;143 width: 960px;144 height: 150px;145 bottom: 270px;146 background: #2B2B2B;147 border-radius: 90px;148 box-shadow: 0 18px 30px rgba(0,0,0,0.45);149 display: flex;150 align-items: center;151 justify-content: space-between;152 padding: 0 30px;153 }154 .search-left {155 display: flex; align-items: center; gap: 24px;156 color: #fff;157 }158 .g-badge {159 width: 76px; height: 76px; border-radius: 50%;160 display: grid; place-items: center;161 background: #1a73e8;162 color: #fff; font-weight: 700; font-size: 38px;163 }164 .search-placeholder {165 font-size: 32px; color: #cfcfcf;166 }167 .search-right { display: flex; align-items: center; gap: 18px; }168 .pill-btn {169 width: 76px; height: 76px; border-radius: 50%;170 display: grid; place-items: center;171 background: rgba(255,255,255,0.08);172 border: 1px solid rgba(255,255,255,0.18);173 }174 .pill-btn svg { width: 40px; height: 40px; fill: #fff; }175 176 /* Gesture bar */177 .gesture {178 position: absolute;179 bottom: 40px; left: 50%; transform: translateX(-50%);180 width: 460px; height: 16px; border-radius: 10px;181 background: rgba(255,255,255,0.85);182 }183</style>184</head>185<body>186<div id="render-target">187 <div class="wallpaper">[IMG: Plant wallpaper]</div>188 <div class="dim-overlay"></div>189 190 <!-- Status bar -->191 <div class="status-bar">192 <div class="status-left">193 <div class="time">2:45</div>194 <div class="notif-chip">M</div>195 </div>196 <div class="status-right">197 <div class="status-icon">198 <!-- Wi-Fi icon -->199 <svg viewBox="0 0 24 24">200 <path d="M2 8c5.5-4.7 14.5-4.7 20 0l-2.2 2.2c-4.9-3.9-10.7-3.9-15.6 0L2 8zm3.8 4.1c3.5-2.8 8-2.8 11.5 0l-2.2 2.2c-2.9-2.1-4.3-2.1-7.2 0l-2.1-2.2zm4 4c1.9-1.5 3.6-1.5 5.5 0L12 20l-2.2-3.9z"/>201 </svg>202 </div>203 <div class="status-icon">204 <!-- Battery icon -->205 <svg viewBox="0 0 24 24">206 <path d="M18 7h2v10h-2V7zM3 7h13c.6 0 1 .4 1 1v8c0 .6-.4 1-1 1H3c-.6 0-1-.4-1-1V8c0-.6.4-1 1-1zm2 2v6h9V9H5z"/>207 </svg>208 </div>209 </div>210 </div>211 212 <!-- Apps grid -->213 <div class="apps-grid">214 <!-- Row 1 -->215 <div class="app">216 <div class="icon" style="background:#d7b887;">217 <svg width="90" height="90" viewBox="0 0 24 24" style="fill:#000;">218 <path d="M4 12c6 4 10 4 16 0v2c-6 4-10 4-16 0v-2z"/>219 </svg>220 </div>221 <div class="label">Amazon</div>222 </div>223 <div class="app">224 <div class="icon" style="background:#2c2253;">225 <svg width="90" height="90" viewBox="0 0 24 24" style="fill:#ffcc00;">226 <path d="M12 4l5 9H7l5-9zm0 16a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>227 </svg>228 </div>229 <div class="label">Rail Planner</div>230 </div>231 <div class="app">232 <div class="icon" style="background:#193b72;">233 <div class="ring"></div>234 </div>235 <div class="label">Omio</div>236 </div>237 <div class="app">238 <div class="icon" style="background:#f2b705;">239 <svg width="90" height="90" viewBox="0 0 24 24" style="fill:#fff;">240 <path d="M6 3h12v18H6zM8 6h8v10H8z"/>241 </svg>242 </div>243 <div class="label">Keep Notes</div>244 </div>245 246 <!-- Row 2 -->247 <div class="app">248 <div class="icon" style="background:#ffffff;">249 <svg width="90" height="90" viewBox="0 0 24 24">250 <rect x="3" y="5" width="18" height="14" rx="2" fill="#4CAF50"/>251 <path d="M21 14l-6-6-6 6-6-6v8h18z" fill="#FFC107"/>252 </svg>253 </div>254 <div class="label">Gallery</div>255 </div>256 <div class="app">257 <div class="icon" style="background:#1f78bd;">258 <svg width="90" height="90" viewBox="0 0 24 24" style="fill:#fff;">259 <circle cx="12" cy="12" r="8"/>260 <text x="12" y="15" font-size="10" text-anchor="middle" fill="#1f78bd" font-weight="700">B</text>261 </svg>262 </div>263 <div class="label">SNCB Inter...</div>264 </div>265 <div class="app">266 <div class="icon" style="background:#e12284;">267 <svg width="90" height="90" viewBox="0 0 24 24" style="fill:#fff;">268 <path d="M12 4c4 0 7 3 7 7 0 5-7 9-7 9s-7-4-7-9c0-4 3-7 7-7z"/>269 </svg>270 </div>271 <div class="label">Rome2Rio</div>272 </div>273 <div class="app">274 <div class="icon" style="background:#f0626e;">275 <svg width="90" height="90" viewBox="0 0 24 24" style="fill:#fff;">276 <rect x="3" y="10" width="18" height="7" rx="2"/>277 <circle cx="7" cy="18" r="2"/>278 <circle cx="17" cy="18" r="2"/>279 </svg>280 </div>281 <div class="label">redBus</div>282 </div>283 284 <!-- Row 3 -->285 <div class="app">286 <div class="icon" style="background:#2ebf68;">287 <svg width="90" height="90" viewBox="0 0 24 24" style="fill:#fff;">288 <path d="M5 12h10l-3-3 1.5-1.5L19 12l-5.5 4.5L12 15l3-3H5z"/>289 </svg>290 </div>291 <div class="label">Citymapper</div>292 </div>293 <div class="app">294 <div class="icon" style="background:#18bfa3;">295 <svg width="90" height="90" viewBox="0 0 24 24" style="fill:#fff;">296 <rect x="5" y="5" width="14" height="14" rx="7"/>297 <text x="12" y="15" font-size="8" text-anchor="middle" fill="#18bfa3" font-weight="700">train</text>298 </svg>299 </div>300 <div class="label">Trainline</div>301 </div>302 <div class="app">303 <div class="icon" style="background:#ffffff;">304 <svg width="90" height="90" viewBox="0 0 24 24">305 <circle cx="12" cy="9" r="4" fill="#8BC34A"/>306 <path d="M4 20c2.5-4 6.5-4 8-4s5.5 0 8 4" fill="#8BC34A"/>307 </svg>308 </div>309 <div class="label">Wanderu</div>310 </div>311 <div class="app">312 <div class="icon" style="background:#f03a55;">313 <svg width="90" height="90" viewBox="0 0 24 24" style="fill:#000;">314 <rect x="6" y="6" width="12" height="12" rx="4" fill="#000"/>315 <rect x="9" y="9" width="6" height="6" rx="2" fill="#f03a55"/>316 </svg>317 </div>318 <div class="label">Rail Europe</div>319 </div>320 321 <!-- Row 4 -->322 <div class="app">323 <div class="icon" style="background:#2d74c6;">324 <svg width="90" height="90" viewBox="0 0 24 24" style="fill:#fff;">325 <path d="M4 16l16-8v4l-16 8v-4z"/>326 </svg>327 </div>328 <div class="label">GVB</div>329 </div>330 <div class="app">331 <div class="icon" style="background:#111827;">332 <svg width="90" height="90" viewBox="0 0 24 24">333 <circle cx="9" cy="12" r="5" fill="#7dd3fc"/>334 <circle cx="16" cy="12" r="5" fill="#ffffff"/>335 </svg>336 </div>337 <div class="label">SNCF Conn...</div>338 </div>339 <div class="app">340 <div class="icon" style="background:#ff6e1e;">341 <svg width="90" height="90" viewBox="0 0 24 24">342 <path d="M12 4l6 6-6 6-6-6 6-6z" fill="#fff"/>343 <circle cx="12" cy="12" r="2" fill="#ff6e1e"/>344 </svg>345 </div>346 <div class="label">Moovit</div>347 </div>348 <div class="app">349 <div class="icon" style="background:#1a73e8;">350 <svg width="90" height="90" viewBox="0 0 24 24" style="fill:#ffd54f;">351 <path d="M12 3l5 5-5 5-5-5 5-5z"/>352 <rect x="11" y="13" width="2" height="8" fill="#ffd54f"/>353 </svg>354 </div>355 <div class="label">Busbud</div>356 </div>357 </div>358 359 <!-- Dock icons -->360 <div class="dock">361 <div class="dock-icon">362 <!-- Phone -->363 <svg viewBox="0 0 24 24" fill="#1a73e8">364 <path d="M6.6 10.8c2.1 3.9 5.7 6.5 8.2 6.6l2.1-2.1c.3-.3.4-.8.2-1.2l-2-3.6c-.3-.5-.9-.6-1.3-.3l-1.7 1.3c-1.1-.6-2.1-1.6-2.8-2.8l1.3-1.7c.3-.4.2-1-.3-1.3L8.7 3.1c-.4-.2-.9-.1-1.2.2L5.4 5.4c-.4.4-.6 1-.4 1.5 0 0 .2 1.6 1.6 3.9z"/>365 </svg>366 </div>367 <div class="dock-icon">368 <!-- Messages -->369 <svg viewBox="0 0 24 24" fill="#1a73e8">370 <path d="M4 4h16v12H7l-3 3V4z"/>371 <circle cx="9" cy="10" r="1.5" fill="#fff"/>372 <circle cx="13" cy="10" r="1.5" fill="#fff"/>373 <circle cx="17" cy="10" r="1.5" fill="#fff"/>374 </svg>375 </div>376 <div class="dock-icon">377 <!-- Chrome (simple) -->378 <svg viewBox="0 0 24 24">379 <circle cx="12" cy="12" r="9" fill="#4CAF50"/>380 <path d="M12 12l9-0c0-5-4-9-9-9" fill="#F44336"/>381 <path d="M3 12c0 5 4 9 9 9l-4.5-7.8" fill="#FFC107"/>382 <circle cx="12" cy="12" r="4" fill="#1E88E5"/>383 </svg>384 </div>385 <div class="dock-icon">386 <!-- Camera -->387 <svg viewBox="0 0 24 24" fill="#333">388 <path d="M7 6h3l2-2h4l2 2h1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3z" fill="#9e9e9e"/>389 <circle cx="12" cy="13" r="4" fill="#2196F3"/>390 </svg>391 </div>392 </div>393 394 <!-- Search pill -->395 <div class="search-bar">396 <div class="search-left">397 <div class="g-badge">G</div>398 <div class="search-placeholder">Search...</div>399 </div>400 <div class="search-right">401 <div class="pill-btn" title="Voice">402 <svg viewBox="0 0 24 24"><path d="M12 3a4 4 0 0 1 4 4v5a4 4 0 0 1-8 0V7a4 4 0 0 1 4-4zm-1 15.9V21h2v-2.1a7 7 0 0 0 6-6.9h-2a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.9z"/></svg>403 </div>404 <div class="pill-btn" title="Lens">405 <svg viewBox="0 0 24 24"><path d="M9 4h6a5 5 0 0 1 5 5v6a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5V9a5 5 0 0 1 5-5zm0 4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1H9zm3 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7z"/></svg>406 </div>407 </div>408 </div>409 410 <!-- Gesture bar -->411 <div class="gesture"></div>412</div>413</body>414</html>