GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Android Home - Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background:14      radial-gradient(transparent 0, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 3px, transparent 3px) 0 0/12px 12px,15      linear-gradient(#0f1217, #1a1d23);16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 24px;22    left: 36px;23    right: 36px;24    height: 72px;25    display: flex;26    align-items: center;27    color: #fff;28    font-weight: 600;29  }30  .status-bar .time {31    font-size: 40px;32    letter-spacing: 1px;33  }34  .status-icons {35    margin-left: auto;36    display: flex;37    align-items: center;38    gap: 26px;39    opacity: 0.95;40  }41  .status-icons svg { width: 38px; height: 38px; fill: #fff; }42 43  /* App grid */44  .apps {45    position: absolute;46    top: 170px;47    left: 40px;48    right: 40px;49    display: grid;50    grid-template-columns: repeat(4, 1fr);51    justify-items: center;52    row-gap: 80px;53  }54  .app {55    width: 220px;56    text-align: center;57    color: #fff;58  }59  .icon {60    width: 168px;61    height: 168px;62    border-radius: 50%;63    display: grid;64    place-items: center;65    font-weight: 700;66    color: #fff;67    border: 2px solid rgba(255,255,255,0.15);68    box-shadow: 0 2px 8px rgba(0,0,0,0.35) inset;69  }70  .label {71    margin-top: 20px;72    font-size: 34px;73    line-height: 1.15;74    white-space: nowrap;75    overflow: hidden;76    text-overflow: ellipsis;77  }78 79  /* Specific icon colors/looks */80  .temu { background:#ff7d2b; font-size: 40px; }81  .ikea { background:#ffdf5a; color:#1a3ea1; font-size: 42px; }82  .ib { background:#ffffff; color:#ff6b2e; font-size: 42px; }83  .onshop { background: radial-gradient(circle at 70% 20%, #fff 0 52%, #e54545 52% 100%); color:#222; font-weight:600; font-size:28px; }84  .mywh { background:#6a56c9; font-size: 36px; }85  .dhgate { background:#ffc94d; color:#333; font-size: 40px; }86  .freefire { background: linear-gradient(140deg,#6cc7ff,#2e57ff); font-size: 34px; }87  .monopoly { background: radial-gradient(circle at 35% 35%, #ffd78a 0 40%, #1f1f1f 40% 100%); font-size: 30px; }88  .subway { background:#4aa7ff; font-size: 34px; }89  .carrom { background:#b28156; font-size: 34px; }90 91  /* Bottom dock icons */92  .dock {93    position: absolute;94    bottom: 290px;95    left: 80px;96    right: 80px;97    display: flex;98    justify-content: space-between;99    align-items: center;100  }101  .dock .dicon {102    width: 150px;103    height: 150px;104    border-radius: 50%;105    display: grid;106    place-items: center;107    border: 2px solid rgba(255,255,255,0.2);108    box-shadow: 0 2px 8px rgba(0,0,0,0.35) inset;109    background: #fff;110  }111  .dicon svg { width: 70px; height: 70px; }112  .dicon.chrome {113    background: radial-gradient(circle at 50% 50%, #fff 0 28%, #0da34f 28% 34%, #fcd205 34% 62%, #db4437 62% 90%);114  }115  .dicon.amazon { background:#d6b98a; }116  .dicon.phone { background:#f7f9ff; }117  .dicon.camera { background:#f6f7fb; }118 119  /* Google search bar */120  .search-bar {121    position: absolute;122    left: 60px;123    right: 60px;124    bottom: 140px;125    height: 120px;126    background: #2a2e34;127    border-radius: 60px;128    border: 1px solid rgba(255,255,255,0.12);129    display: flex;130    align-items: center;131    padding: 0 36px;132    color: #cfd8dc;133    font-size: 40px;134  }135  .g-logo {136    width: 76px;137    height: 76px;138    border-radius: 50%;139    background:140      conic-gradient(#4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0 100%);141    display: grid;142    place-items: center;143    margin-right: 20px;144  }145  .g-logo span {146    width: 42px; height: 42px; border: 6px solid #fff; border-left-color: transparent; border-radius: 50%;147  }148  .search-actions {149    margin-left: auto;150    display: flex;151    align-items: center;152    gap: 26px;153  }154  .search-actions .chip {155    width: 56px; height: 56px; border-radius: 50%;156    display: grid; place-items: center;157    background:#3a3f46;158    border:1px solid rgba(255,255,255,0.15);159  }160  .search-actions svg { width: 34px; height: 34px; fill:#55b0ff; }161 162  /* Gesture bar */163  .gesture {164    position: absolute;165    bottom: 28px;166    left: 50%;167    transform: translateX(-50%);168    width: 360px;169    height: 10px;170    background: #f1f1f1;171    border-radius: 6px;172    opacity: 0.95;173  }174</style>175</head>176<body>177<div id="render-target">178 179  <!-- Status bar -->180  <div class="status-bar">181    <div class="time">10:03</div>182    <div class="status-icons">183      <!-- Signal -->184      <svg viewBox="0 0 24 24"><path d="M2 20h2v-4H2v4zm4 0h2v-7H6v7zm4 0h2v-10h-2v10zm4 0h2V6h-2v14zm4 0h2V3h-2v17z"/></svg>185      <!-- WiFi -->186      <svg viewBox="0 0 24 24"><path d="M12 20l-3-3h6l-3 3zm8.5-8.5L18 9c-3.3-2-8.7-2-12 0l-2.5 2.5L2 9c5.5-4.2 14.5-4.2 20 0l-1.5 2.5z"/></svg>187      <!-- Battery -->188      <svg viewBox="0 0 24 24"><path d="M16 7h2a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2v2H8v-2H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h2V5h8v2zM6 9v6h12V9H6z"/></svg>189    </div>190  </div>191 192  <!-- Apps grid -->193  <div class="apps">194    <!-- Row 1 -->195    <div class="app">196      <div class="icon temu">TEMU</div>197      <div class="label">Temu</div>198    </div>199    <div class="app">200      <div class="icon ikea">IKEA</div>201      <div class="label">IKEA</div>202    </div>203    <div class="app">204      <div class="icon ib">ib</div>205      <div class="label">Industrybu...</div>206    </div>207    <div class="app">208      <div class="icon onshop">Shop</div>209      <div class="label">Online Sho...</div>210    </div>211 212    <!-- Row 2 -->213    <div class="app">214      <div class="icon mywh">MW</div>215      <div class="label">MyWareho...</div>216    </div>217    <div class="app">218      <div class="icon dhgate">DHgate</div>219      <div class="label">DHgate</div>220    </div>221    <div class="app">222      <div class="icon freefire">Free Fire</div>223      <div class="label">Free Fire M...</div>224    </div>225    <div class="app">226      <div class="icon monopoly">Mr. M</div>227      <div class="label">MONOPOL...</div>228    </div>229 230    <!-- Row 3 -->231    <div class="app">232      <div class="icon subway">Subway</div>233      <div class="label">Subway Surf</div>234    </div>235    <div class="app">236      <div class="icon carrom">Carrom</div>237      <div class="label">Carrom Dis...</div>238    </div>239  </div>240 241  <!-- Dock -->242  <div class="dock">243    <div class="dicon phone">244      <svg viewBox="0 0 24 24" fill="#2a6cff"><path d="M6.6 10.2a15.8 15.8 0 0 0 7.2 7.2l2.4-2.4c.3-.3.8-.4 1.2-.2 1.3.6 2.8 1 4.3 1 .6 0 1 .4 1 1V21c0 .6-.4 1-1 1C10.1 22 2 13.9 2 3c0-.6.4-1 1-1h3.3c.6 0 1 .4 1 1 0 1.5.3 3 1 4.3.2.4.1.9-.2 1.2L6.6 10.2z"/></svg>245    </div>246    <div class="dicon amazon">247      <svg viewBox="0 0 24 24" fill="#1a73e8"><path d="M12 3l4 3-4 3-4-3 4-3zm-6 8h12v2H6v-2zm0 5h12v2H6v-2z"/></svg>248    </div>249    <div class="dicon chrome"></div>250    <div class="dicon camera">251      <svg viewBox="0 0 24 24" fill="#2c63ff"><path d="M9 5h6l1.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h3L9 5zm3 4a5 5 0 1 0 0 10 5 5 0 0 0 0-10z"/></svg>252    </div>253  </div>254 255  <!-- Google Search bar -->256  <div class="search-bar">257    <div class="g-logo"><span></span></div>258    <div>Search</div>259    <div class="search-actions">260      <div class="chip">261        <!-- Mic -->262        <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.9V20h2v-2.1A7 7 0 0 0 19 11h-2z"/></svg>263      </div>264      <div class="chip">265        <!-- Lens (rounded camera) -->266        <svg viewBox="0 0 24 24"><path d="M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm8-2h-3l-1.5-2h-5L8 5H5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3z"/></svg>267      </div>268    </div>269  </div>270 271  <!-- Gesture bar -->272  <div class="gesture"></div>273</div>274</body>275</html>