GD-ML/AndroidCode

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 UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: radial-gradient(1500px 1200px at 540px 800px, #1b1b1b 0%, #121212 55%, #0b0b0b 100%);15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 100%;23    height: 120px;24    padding: 30px 36px 0 36px;25    box-sizing: border-box;26    color: #ffffff;27    font-family: Arial, Helvetica, sans-serif;28    display: flex;29    align-items: flex-start;30    justify-content: space-between;31  }32  .status-left { font-size: 44px; font-weight: 600; letter-spacing: 0.5px; }33  .status-center { display: flex; gap: 18px; align-items: center; margin-left: 20px; }34  .status-right { display: flex; gap: 22px; align-items: center; }35  .status-icon svg { width: 32px; height: 32px; fill: none; stroke: #fff; stroke-width: 2.2; }36  .dot { width: 10px; height: 10px; background: #ffffff; border-radius: 50%; opacity: 0.8; }37 38  /* App grid */39  .apps {40    position: absolute;41    top: 160px;42    left: 0;43    width: 100%;44    padding: 0 46px;45    box-sizing: border-box;46    display: grid;47    grid-template-columns: repeat(4, 1fr);48    column-gap: 54px;49    row-gap: 64px;50    font-family: Arial, Helvetica, sans-serif;51  }52  .app {53    display: flex;54    flex-direction: column;55    align-items: center;56  }57  .icon {58    width: 160px;59    height: 160px;60    border-radius: 50%;61    background: #E0E0E0;62    border: 2px solid #BDBDBD;63    display: flex;64    justify-content: center;65    align-items: center;66    color: #757575;67    font-size: 26px;68    text-align: center;69    line-height: 1.1;70  }71  .label {72    margin-top: 16px;73    color: #ffffff;74    font-size: 36px;75    font-weight: 500;76    text-align: center;77    width: 210px;78    white-space: nowrap;79    overflow: hidden;80    text-overflow: ellipsis;81  }82 83  /* Dock row */84  .dock {85    position: absolute;86    bottom: 360px;87    left: 0;88    width: 100%;89    display: flex;90    justify-content: space-evenly;91    align-items: center;92    padding: 0 80px;93    box-sizing: border-box;94  }95  .dock .icon { width: 150px; height: 150px; border-width: 2px; font-size: 22px; }96 97  /* Search pill */98  .search-bar {99    position: absolute;100    bottom: 210px;101    left: 50%;102    transform: translateX(-50%);103    width: 960px;104    height: 120px;105    background: #2f2f2f;106    border-radius: 60px;107    box-shadow: 0 6px 18px rgba(0,0,0,0.35) inset;108    display: flex;109    align-items: center;110    justify-content: space-between;111    padding: 0 28px;112    box-sizing: border-box;113  }114  .search-left {115    display: flex; align-items: center; gap: 18px;116    color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 36px;117  }118  .google-dot {119    width: 56px; height: 56px; border-radius: 50%; background: #3a3a3a;120    display: flex; align-items: center; justify-content: center;121    font-weight: 700; color: #ffffff;122  }123  .search-right { display: flex; gap: 26px; }124  .search-right .status-icon svg { width: 40px; height: 40px; stroke-width: 2.4; }125 126  /* Home indicator */127  .home-indicator {128    position: absolute;129    bottom: 80px;130    left: 50%;131    transform: translateX(-50%);132    width: 420px;133    height: 14px;134    background: #ffffff;135    opacity: 0.85;136    border-radius: 10px;137  }138</style>139</head>140<body>141<div id="render-target">142 143  <!-- Status Bar -->144  <div class="status-bar">145    <div class="status-left">9:26</div>146    <div class="status-center">147      <div class="status-icon">148        <svg viewBox="0 0 24 24"><path d="M12 3c-3.3 0-6 2.7-6 6v3l-2 2v1h16v-1l-2-2V9c0-3.3-2.7-6-6-6z"/><path d="M9 19h6" stroke-linecap="round"/></svg>149      </div>150      <div class="status-icon">151        <svg viewBox="0 0 24 24"><path d="M12 3c-3.3 0-6 2.7-6 6v3l-2 2v1h16v-1l-2-2V9c0-3.3-2.7-6-6-6z"/><path d="M9 19h6" stroke-linecap="round"/></svg>152      </div>153      <div class="status-icon">154        <svg viewBox="0 0 24 24"><path d="M12 3c-3.3 0-6 2.7-6 6v3l-2 2v1h16v-1l-2-2V9c0-3.3-2.7-6-6-6z"/><path d="M9 19h6" stroke-linecap="round"/></svg>155      </div>156      <div class="status-icon">157        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3" stroke-linecap="round"/></svg>158      </div>159      <div class="dot"></div>160    </div>161    <div class="status-right">162      <div class="status-icon">163        <svg viewBox="0 0 24 24"><path d="M12 3c-3.3 0-6 2.7-6 6v3l-2 2v1h10" opacity="0.8"/><path d="M5 5l14 14" stroke-linecap="round"/></svg>164      </div>165      <div class="status-icon">166        <svg viewBox="0 0 24 24"><path d="M3 16c3-3 7-3 10 0"/><path d="M6 13c2-2 5-2 7 0"/><path d="M9 10c1-1 3-1 4 0"/></svg>167      </div>168      <div class="status-icon">169        <svg viewBox="0 0 24 24"><rect x="3" y="7" width="16" height="10" rx="2"/><rect x="19.5" y="10" width="2" height="4" rx="1" /></svg>170      </div>171    </div>172  </div>173 174  <!-- Apps Grid -->175  <div class="apps">176    <!-- Row 1 -->177    <div class="app">178      <div class="icon">[ICON: Kids Toys]</div>179      <div class="label">Kids Toys</div>180    </div>181    <div class="app">182      <div class="icon">[ICON: Toys shop]</div>183      <div class="label">Toys shopp...</div>184    </div>185    <div class="app">186      <div class="icon">[ICON: Hamleys]</div>187      <div class="label">Hamleys</div>188    </div>189    <div class="app">190      <div class="icon">[ICON: Toys Shopping]</div>191      <div class="label">Toys Shopp..</div>192    </div>193 194    <!-- Row 2 -->195    <div class="app">196      <div class="icon">[ICON: Foursquare]</div>197      <div class="label">Foursquare</div>198    </div>199    <div class="app">200      <div class="icon">[ICON: Instagram]</div>201      <div class="label">Instagram</div>202    </div>203    <div class="app">204      <div class="icon">[ICON: Zoop]</div>205      <div class="label">Zoop</div>206    </div>207    <div class="app">208      <div class="icon">[ICON: MojoPizza]</div>209      <div class="label">MojoPizza</div>210    </div>211 212    <!-- Row 3 -->213    <div class="app">214      <div class="icon">[ICON: Citymapper]</div>215      <div class="label">Citymapper</div>216    </div>217    <div class="app">218      <div class="icon">[ICON: Expedia]</div>219      <div class="label">Expedia</div>220    </div>221    <div class="app">222      <div class="icon">[ICON: Agoda]</div>223      <div class="label">Agoda</div>224    </div>225    <div class="app">226      <div class="icon">[ICON: To Do]</div>227      <div class="label">To Do</div>228    </div>229 230    <!-- Row 4 -->231    <div class="app">232      <div class="icon">[ICON: To Do List]</div>233      <div class="label">To Do List</div>234    </div>235    <div class="app">236      <div class="icon">[ICON: Trip.com]</div>237      <div class="label">Trip.com</div>238    </div>239    <div class="app">240      <div class="icon">[ICON: Timezone]</div>241      <div class="label">Timezone ...</div>242    </div>243    <div class="app">244      <div class="icon">[ICON: Easy Timezone]</div>245      <div class="label">Easy Timez...</div>246    </div>247 248    <!-- Row 5 -->249    <div class="app">250      <div class="icon">[ICON: WorldClock]</div>251      <div class="label">WorldClock</div>252    </div>253    <div class="app"></div>254    <div class="app"></div>255    <div class="app"></div>256  </div>257 258  <!-- Dock icons -->259  <div class="dock">260    <div class="icon">[ICON: Phone]</div>261    <div class="icon">[ICON: Messages]</div>262    <div class="icon">[ICON: Chrome]</div>263    <div class="icon">[ICON: Camera]</div>264  </div>265 266  <!-- Search bar -->267  <div class="search-bar">268    <div class="search-left">269      <div class="google-dot">G</div>270      <div>Search</div>271    </div>272    <div class="search-right">273      <div class="status-icon">274        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3" stroke-linecap="round"/></svg>275      </div>276      <div class="status-icon">277        <svg viewBox="0 0 24 24"><path d="M12 5v12"/><path d="M5 12h14"/></svg>278      </div>279      <div class="status-icon">280        <svg viewBox="0 0 24 24"><rect x="5" y="6" width="14" height="12" rx="2"/><circle cx="12" cy="12" r="3"/></svg>281      </div>282    </div>283  </div>284 285  <!-- Home Indicator -->286  <div class="home-indicator"></div>287 288</div>289</body>290</html>