GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Android Home Screen Mock</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: Roboto, Arial, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: radial-gradient(ellipse at center, #2e2e36 0%, #1f2129 60%, #181a22 100%);18    color: #fff;19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 90px;28    padding: 0 30px;29    display: flex;30    align-items: center;31    justify-content: space-between;32    font-weight: 600;33    letter-spacing: 0.5px;34    font-size: 36px;35  }36  .status-right {37    display: flex;38    align-items: center;39    gap: 24px;40    font-size: 24px;41    opacity: 0.9;42  }43  .status-icon {44    width: 36px;45    height: 36px;46  }47  .status-icon svg { width: 100%; height: 100%; fill: #ffffff; opacity: 0.9; }48 49  /* App grid */50  .app-grid {51    position: absolute;52    top: 140px;53    left: 0;54    width: 100%;55    padding: 0 20px;56    display: grid;57    grid-template-columns: repeat(4, 1fr);58    grid-row-gap: 44px;59    grid-column-gap: 0px;60  }61  .app-item {62    width: 100%;63    text-align: center;64  }65  .app-icon {66    width: 160px;67    height: 160px;68    margin: 0 auto 14px auto;69    border-radius: 50%;70    background: #3a3d46;71    border: 2px solid rgba(255,255,255,0.08);72    display: flex;73    align-items: center;74    justify-content: center;75    color: #e0e0e0;76    font-size: 28px;77    line-height: 1.2;78    padding: 12px;79  }80  .app-label {81    font-size: 34px;82    color: #f5f5f5;83  }84 85  /* Dock icons */86  .dock {87    position: absolute;88    bottom: 220px;89    left: 0;90    width: 100%;91    display: flex;92    justify-content: space-evenly;93    padding: 0 60px;94  }95  .dock-icon {96    width: 160px;97    height: 160px;98    border-radius: 50%;99    background: #3a3d46;100    border: 2px solid rgba(255,255,255,0.1);101    display: flex;102    align-items: center;103    justify-content: center;104    color: #dcdcdc;105    font-size: 28px;106  }107 108  /* Search pill */109  .search-pill {110    position: absolute;111    bottom: 110px;112    left: 50%;113    transform: translateX(-50%);114    width: 920px;115    height: 120px;116    border-radius: 60px;117    background: #2c2f37;118    border: 2px solid rgba(255,255,255,0.08);119    display: flex;120    align-items: center;121    justify-content: space-between;122    padding: 0 32px;123  }124  .search-left {125    display: flex;126    align-items: center;127    gap: 20px;128    color: #ffffff;129    font-size: 44px;130    font-weight: 700;131  }132  .pill-icon {133    width: 72px;134    height: 72px;135    border-radius: 50%;136    background: #3c4049;137    display: flex;138    align-items: center;139    justify-content: center;140  }141  .pill-icon svg { width: 42px; height: 42px; fill: #fff; opacity: 0.9; }142 143  /* Home indicator */144  .home-indicator {145    position: absolute;146    bottom: 36px;147    left: 50%;148    transform: translateX(-50%);149    width: 500px;150    height: 12px;151    border-radius: 12px;152    background: rgba(255,255,255,0.6);153  }154 155  /* Small helper to emulate image placeholders (if needed) */156  .img-plc {157    background: #E0E0E0;158    border: 1px solid #BDBDBD;159    color: #757575;160  }161</style>162</head>163<body>164<div id="render-target">165 166  <!-- Status Bar -->167  <div class="status-bar">168    <div>9:08</div>169    <div class="status-right">170      <div class="status-icon" title="Cellular">171        <svg viewBox="0 0 24 24">172          <rect x="2" y="17" width="3" height="5"></rect>173          <rect x="7" y="13" width="3" height="9"></rect>174          <rect x="12" y="9" width="3" height="13"></rect>175          <rect x="17" y="5" width="3" height="17"></rect>176        </svg>177      </div>178      <div class="status-icon" title="Download">179        <svg viewBox="0 0 24 24">180          <path d="M12 3v10l4-4h-3V3H11v6H8l4 4V3z"></path>181          <rect x="4" y="19" width="16" height="2"></rect>182        </svg>183      </div>184      <div class="status-icon" title="Cloud">185        <svg viewBox="0 0 24 24">186          <path d="M6 18h10a4 4 0 0 0 0-8h-.3A6 6 0 0 0 6 7a5 5 0 0 0 0 11z"></path>187        </svg>188      </div>189      <div class="status-icon" title="Wi-Fi">190        <svg viewBox="0 0 24 24">191          <path d="M12 18a2 2 0 1 0 0.001 0z"></path>192          <path d="M2 9c5.5-5 14.5-5 20 0l-2 2c-4.5-4-11.5-4-16 0L2 9z"></path>193          <path d="M5 12c3.8-3.5 10.2-3.5 14 0l-2 2c-2.9-2.7-7.1-2.7-10 0L5 12z"></path>194        </svg>195      </div>196      <div class="status-icon" title="Battery">197        <svg viewBox="0 0 24 24">198          <rect x="2" y="6" width="18" height="12" rx="2"></rect>199          <rect x="21" y="10" width="2" height="4"></rect>200          <rect x="4" y="8" width="12" height="8" fill="#76ff03"></rect>201        </svg>202      </div>203    </div>204  </div>205 206  <!-- App Grid -->207  <div class="app-grid">208 209    <!-- Row 1 -->210    <div class="app-item">211      <div class="app-icon">DBW Show...</div>212      <div class="app-label">DBW Show...</div>213    </div>214    <div class="app-item">215      <div class="app-icon">adidas</div>216      <div class="app-label">adidas</div>217    </div>218    <div class="app-item">219      <div class="app-icon">PUMA</div>220      <div class="app-label">PUMA</div>221    </div>222    <div class="app-item">223      <div class="app-icon">Decathlon</div>224      <div class="app-label">Decathlon</div>225    </div>226 227    <!-- Row 2 -->228    <div class="app-item">229      <div class="app-icon">Flipkart</div>230      <div class="app-label">Flipkart</div>231    </div>232    <div class="app-item">233      <div class="app-icon">Nike</div>234      <div class="app-label">Nike</div>235    </div>236    <div class="app-item">237      <div class="app-icon">Etsy</div>238      <div class="app-label">Etsy</div>239    </div>240    <div class="app-item">241      <div class="app-icon">Home Work...</div>242      <div class="app-label">Home Work...</div>243    </div>244 245    <!-- Row 3 -->246    <div class="app-item">247      <div class="app-icon">Fit</div>248      <div class="app-label">Fit</div>249    </div>250    <div class="app-item">251      <div class="app-icon">eBay</div>252      <div class="app-label">eBay</div>253    </div>254    <div class="app-item">255      <div class="app-icon">Amazon</div>256      <div class="app-label">Amazon</div>257    </div>258    <div class="app-item">259      <div class="app-icon">Vimeo</div>260      <div class="app-label">Vimeo</div>261    </div>262 263    <!-- Row 4 -->264    <div class="app-item">265      <div class="app-icon">M&S India</div>266      <div class="app-label">M&S India</div>267    </div>268    <div class="app-item">269      <div class="app-icon">Dropbox</div>270      <div class="app-label">Dropbox</div>271    </div>272    <div class="app-item">273      <div class="app-icon">Wanderu</div>274      <div class="app-label">Wanderu</div>275    </div>276    <div class="app-item">277      <div class="app-icon">Zombie Wa...</div>278      <div class="app-label">Zombie Wa...</div>279    </div>280 281    <!-- Row 5 -->282    <div class="app-item">283      <div class="app-icon">Groupon</div>284      <div class="app-label">Groupon</div>285    </div>286    <div class="app-item">287      <div class="app-icon">NNNOW</div>288      <div class="app-label">NNNOW</div>289    </div>290    <div class="app-item">291      <div class="app-icon">XGallery - P...</div>292      <div class="app-label">XGallery - P...</div>293    </div>294    <div class="app-item">295      <div class="app-icon">The Weath...</div>296      <div class="app-label">The Weath...</div>297    </div>298  </div>299 300  <!-- Dock Icons -->301  <div class="dock">302    <div class="dock-icon">Phone</div>303    <div class="dock-icon">Messages</div>304    <div class="dock-icon">Chrome</div>305    <div class="dock-icon">Camera</div>306  </div>307 308  <!-- Search pill -->309  <div class="search-pill">310    <div class="search-left">311      <div class="pill-icon" title="Google G">312        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle></svg>313      </div>314      <div>Google</div>315    </div>316    <div class="pill-icon" title="Voice">317      <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-4z"></path><rect x="11" y="16" width="2" height="4"></rect><rect x="8" y="20" width="8" height="2"></rect></svg>318    </div>319    <div class="pill-icon" title="Lens">320      <svg viewBox="0 0 24 24"><rect x="5" y="5" width="14" height="14" rx="4"></rect><circle cx="12" cy="12" r="3"></circle></svg>321    </div>322  </div>323 324  <!-- Home Indicator -->325  <div class="home-indicator"></div>326 327</div>328</body>329</html>