GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Android App Drawer Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #f7e6df;13  }14 15  /* Status bar */16  .status-bar {17    height: 90px;18    padding: 18px 28px;19    box-sizing: border-box;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #2b2b2b;24    font-size: 34px;25    letter-spacing: 0.5px;26  }27  .status-icons {28    display: flex;29    align-items: center;30    gap: 22px;31    color: #333;32    font-size: 28px;33  }34  .icon-dot {35    width: 14px; height: 14px; border-radius: 50%; background:#777; display:inline-block;36  }37  .battery {38    display: inline-flex; align-items: center; gap: 10px; color:#222; font-weight: 600;39  }40  .battery-shape {41    position: relative;42    width: 46px; height: 24px; border: 3px solid #222; border-radius: 5px; box-sizing: border-box;43  }44  .battery-shape::after {45    content:""; position:absolute; right:-8px; top:6px; width:6px; height:12px; background:#222; border-radius:2px;46  }47  .battery-fill {48    position:absolute; left:2px; top:2px; bottom:2px; right:2px; background:#1a1; border-radius:3px;49  }50 51  /* Search bar */52  .search-wrap {53    padding: 8px 28px 0 28px;54  }55  .search-bar {56    height: 120px;57    border-radius: 60px;58    background: #ffffff;59    box-shadow: 0 2px 0 rgba(0,0,0,0.04) inset;60    display: flex;61    align-items: center;62    padding: 0 34px;63    gap: 24px;64    box-sizing: border-box;65  }66  .g-badge {67    width: 68px; height: 68px; border-radius: 34px; background:#f1f5ff; border:1px solid #dfe6ff;68    display:flex; align-items:center; justify-content:center; font-weight: 800; font-size: 36px;69    color:#2a6df4;70  }71  .search-placeholder {72    flex: 1; color:#8b8b8b; font-size: 36px;73  }74  .right-tools { display:flex; align-items:center; gap: 24px; }75  .tool {76    width: 70px; height: 70px; border-radius: 35px; background:#f6fafc; border:1px solid #e2e8f0;77    display:flex; align-items:center; justify-content:center;78  }79  svg { display:block; }80 81  /* Grid */82  .grid {83    padding: 24px 28px 0 28px;84  }85  .app-grid {86    display: grid;87    grid-template-columns: repeat(4, 1fr);88    column-gap: 22px;89    row-gap: 36px;90  }91  .app {92    display: flex;93    flex-direction: column;94    align-items: center;95  }96  .app .icon {97    width: 170px; height: 170px; border-radius: 50%;98    background: #ffffff;99    border: 2px solid #e6e0dd;100    display: flex; align-items: center; justify-content: center;101    font-weight: 800; font-size: 52px; color: #333;102  }103  .app .label {104    margin-top: 22px; text-align: center; color:#2f2f2f; font-size: 34px;105  }106 107  .divider {108    height: 6px;109    width: 520px;110    background: #d7cfc9;111    border-radius: 3px;112    margin: 18px auto 10px auto;113  }114 115  /* Scroll indicator on right */116  .scroll-indicator {117    position: absolute;118    right: 16px;119    top: 510px;120    width: 18px;121    height: 280px;122    background: #c64e3b;123    border-radius: 12px;124  }125 126  /* Specific icon color hints to resemble apps */127  .black { background:#000; color:#fff; border-color:#000; }128  .green { background:#25c466; color:#fff; border-color:#25c466; }129  .orange { background:#f58e33; color:#fff; border-color:#f58e33; }130  .pink { background:#ff6666; color:#fff; border-color:#ff6666; }131  .blue { background:#1976d2; color:#fff; border-color:#1976d2; }132  .light { background:#fff; color:#111; }133  .teal { background:#2fb5a7; color:#fff; border-color:#2fb5a7; }134  .indigo { background:#673ab7; color:#fff; border-color:#673ab7; }135  .gray { background:#f2f2f2; color:#222; }136  .mint { background:#e9f7ed; color:#2c8b4e; border-color:#d6f0de; }137</style>138</head>139<body>140<div id="render-target">141 142  <!-- Status bar -->143  <div class="status-bar">144    <div>11:01</div>145    <div class="status-icons">146      <span class="icon-dot"></span>147      <span class="icon-dot" style="background:#4a4a4a;"></span>148      <div class="battery">149        <div class="battery-shape"><div class="battery-fill"></div></div>150        100%151      </div>152    </div>153  </div>154 155  <!-- Search bar -->156  <div class="search-wrap">157    <div class="search-bar">158      <div class="g-badge">G</div>159      <div class="search-placeholder">Search</div>160      <div class="right-tools">161        <div class="tool">162          <svg width="36" height="36" viewBox="0 0 24 24" fill="#1565c0">163            <path d="M9.5 3a1.5 1.5 0 0 0-1.5 1.5v6a1.5 1.5 0 0 0 3 0v-6A1.5 1.5 0 0 0 9.5 3zM5 10v1a6 6 0 0 0 4 5.66V20h2v-3.34A6 6 0 0 0 15 11v-1H5z"/>164          </svg>165        </div>166        <div class="tool">167          <svg width="36" height="36" viewBox="0 0 24 24" fill="#d32f2f">168            <path d="M7 4h10l2 4v10a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V8l2-4zm5 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8z"/>169          </svg>170        </div>171      </div>172    </div>173  </div>174 175  <!-- Apps grid -->176  <div class="grid">177    <div class="app-grid">178 179      <!-- Row 1 -->180      <div class="app">181        <div class="icon black">P</div>182        <div class="label">PUMA</div>183      </div>184      <div class="app">185        <div class="icon indigo">B</div>186        <div class="label">Bloomberg</div>187      </div>188      <div class="app">189        <div class="icon light">✓</div>190        <div class="label">Nike</div>191      </div>192      <div class="app">193        <div class="icon light">▶</div>194        <div class="label">Play Store</div>195      </div>196 197      <!-- Divider resembling the thin line -->198      <div class="divider" style="grid-column: 1 / span 4;"></div>199 200      <!-- Row 2 -->201      <div class="app">202        <div class="icon black">A</div>203        <div class="label">ABC News</div>204      </div>205      <div class="app">206        <div class="icon gray">abc</div>207        <div class="label">ABC News</div>208      </div>209      <div class="app">210        <div class="icon black">ad</div>211        <div class="label">adidas</div>212      </div>213      <div class="app">214        <div class="icon light">A</div>215        <div class="label">Albertsons</div>216      </div>217 218      <!-- Row 3 -->219      <div class="app">220        <div class="icon orange">阿</div>221        <div class="label">Alibaba.com</div>222      </div>223      <div class="app">224        <div class="icon mint">a</div>225        <div class="label">Amazon</div>226      </div>227      <div class="app">228        <div class="icon pink">♪</div>229        <div class="label">Apple Music</div>230      </div>231      <div class="app">232        <div class="icon light">bb</div>233        <div class="label">bbdaily</div>234      </div>235 236      <!-- Row 4 -->237      <div class="app">238        <div class="icon green">B</div>239        <div class="label">Blinkit</div>240      </div>241      <div class="app">242        <div class="icon indigo">B</div>243        <div class="label">Bloomberg</div>244      </div>245      <div class="app">246        <div class="icon light">≠</div>247        <div class="label">Calculator</div>248      </div>249      <div class="app">250        <div class="icon light">5</div>251        <div class="label">Calendar</div>252      </div>253 254      <!-- Row 5 -->255      <div class="app">256        <div class="icon gray">📷</div>257        <div class="label">Camera</div>258      </div>259      <div class="app">260        <div class="icon blue">C</div>261        <div class="label">CARS24</div>262      </div>263      <div class="app">264        <div class="icon light">T</div>265        <div class="label">CarTrade | ..</div>266      </div>267      <div class="app">268        <div class="icon mint">💬</div>269        <div class="label">Chat</div>270      </div>271 272      <!-- Row 6 -->273      <div class="app">274        <div class="icon light">◎</div>275        <div class="label">Chrome</div>276      </div>277      <div class="app">278        <div class="icon blue">🕒</div>279        <div class="label">Clock</div>280      </div>281      <div class="app">282        <div class="icon light">👤</div>283        <div class="label">Contacts</div>284      </div>285      <div class="app">286        <div class="icon light">D</div>287        <div class="label">DailyCart U..</div>288      </div>289 290      <!-- Row 7 placeholders (bottom partially visible in screenshot) -->291      <div class="app">292        <div class="icon light">🤖</div>293        <div class="label">Android</div>294      </div>295      <div class="app">296        <div class="icon mint">DM</div>297        <div class="label">DMart</div>298      </div>299      <div class="app">300        <div class="icon light">📄</div>301        <div class="label">Files</div>302      </div>303      <div class="app">304        <div class="icon pink">⟲</div>305        <div class="label">Updates</div>306      </div>307 308    </div>309  </div>310 311  <!-- Right scroll indicator -->312  <div class="scroll-indicator"></div>313 314</div>315</body>316</html>