GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Android Home UI Mock</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    position: relative;9    overflow: hidden;10    width: 1080px;11    height: 2400px;12    background:13      radial-gradient(ellipse at 40% 20%, rgba(60,60,60,0.5), rgba(20,20,20,0.8)),14      repeating-linear-gradient(140deg, #1e1e1e 0px, #1e1e1e 6px, #222 6px, #222 14px);15    color: #fff;16  }17 18  /* Status bar */19  .statusbar {20    position: absolute;21    top: 0;22    left: 0;23    right: 0;24    height: 115px;25    padding: 28px 36px;26    box-sizing: border-box;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #fff;31    font-weight: 600;32    font-size: 42px;33  }34  .status-left {35    display: flex;36    align-items: center;37    gap: 24px;38  }39  .status-square {40    width: 34px; height: 34px; background:#fff; border-radius:6px;41  }42  .status-right {43    display: flex; align-items: center; gap: 22px;44  }45  .status-icon { width: 44px; height: 44px; }46  .battery {47    display:flex; align-items:center; gap:8px; font-size: 34px;48  }49  /* App grid */50  .grid {51    position: absolute;52    top: 180px;53    left: 60px;54    right: 60px;55    display: grid;56    grid-template-columns: repeat(4, 1fr);57    grid-auto-rows: 300px;58    column-gap: 60px;59    row-gap: 36px;60    text-align: center;61  }62  .app .icon {63    width: 170px;64    height: 170px;65    margin: 0 auto;66    border-radius: 50%;67    background: #E0E0E0;68    border: 1px solid #BDBDBD;69    color: #757575;70    display: flex;71    justify-content: center;72    align-items: center;73    font-size: 28px;74    line-height: 1.2;75    padding: 10px;76    box-sizing: border-box;77  }78  .app .label {79    margin-top: 20px;80    font-size: 34px;81    letter-spacing: 0.4px;82  }83 84  /* Dock icons */85  .dock {86    position: absolute;87    left: 70px;88    right: 70px;89    bottom: 320px;90    height: 180px;91    display: flex;92    justify-content: space-between;93    align-items: center;94  }95  .dock .icon {96    width: 160px;97    height: 160px;98    border-radius: 50%;99    background: #E0E0E0;100    border: 1px solid #BDBDBD;101    color:#757575;102    display:flex;103    justify-content:center;104    align-items:center;105    font-size:28px;106  }107 108  /* Search bar */109  .search-bar {110    position: absolute;111    left: 60px;112    bottom: 160px;113    width: 960px;114    height: 130px;115    background: #3a3a3a;116    border-radius: 100px;117    display: flex;118    align-items: center;119    padding: 0 28px;120    box-sizing: border-box;121    gap: 26px;122  }123  .search-g {124    width: 68px; height: 68px; border-radius: 50%; background:#202020; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:34px; color:#fff;125  }126  .search-placeholder { flex:1; color:#d0d0d0; font-size:34px; }127  .search-actions { display:flex; align-items:center; gap:22px; }128  .search-icon { width:54px; height:54px; }129 130  /* Gesture bar */131  .gesture {132    position: absolute;133    bottom: 60px;134    left: 50%;135    transform: translateX(-50%);136    width: 300px;137    height: 12px;138    border-radius: 12px;139    background: rgba(255,255,255,0.8);140  }141</style>142</head>143<body>144<div id="render-target">145 146  <!-- Status bar -->147  <div class="statusbar">148    <div class="status-left">149      <div class="status-square"></div>150      <div>7:39</div>151    </div>152    <div class="status-right">153      <!-- Wi-Fi -->154      <svg class="status-icon" viewBox="0 0 24 24" fill="none">155        <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>156        <path d="M5 11c4-3 10-3 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>157        <path d="M9 14c3-2 5-2 6 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>158        <circle cx="12" cy="17" r="2" fill="#fff"/>159      </svg>160      <!-- Battery -->161      <div class="battery">162        <svg class="status-icon" viewBox="0 0 26 24" fill="none">163          <rect x="2" y="6" width="18" height="12" rx="2" stroke="#fff" stroke-width="2"/>164          <rect x="4" y="8" width="12" height="8" rx="1" fill="#fff"/>165          <rect x="21" y="9" width="3" height="6" rx="1" fill="#fff"/>166        </svg>167      </div>168    </div>169  </div>170 171  <!-- App grid -->172  <div class="grid">173    <!-- Row 1 -->174    <div class="app">175      <div class="icon">[ICON: Notes]</div>176      <div class="label">Notes</div>177    </div>178    <div class="app">179      <div class="icon">[ICON: OneDrive]</div>180      <div class="label">OneDrive</div>181    </div>182    <div class="app">183      <div class="icon">[ICON: TeraBox]</div>184      <div class="label">TeraBox</div>185    </div>186    <div class="app">187      <div class="icon">[ICON: Edmunds]</div>188      <div class="label">Edmunds</div>189    </div>190 191    <!-- Row 2 -->192    <div class="app">193      <div class="icon">[ICON: Houzz]</div>194      <div class="label">Houzz</div>195    </div>196    <div class="app">197      <div class="icon">[ICON: AutoScout24]</div>198      <div class="label">AutoScout24</div>199    </div>200    <div class="app">201      <div class="icon">[ICON: SSBeauty]</div>202      <div class="label">SSBeauty</div>203    </div>204    <div class="app">205      <div class="icon">[ICON: adidas]</div>206      <div class="label">adidas</div>207    </div>208 209    <!-- Row 3 -->210    <div class="app">211      <div class="icon">[ICON: PUMA]</div>212      <div class="label">PUMA</div>213    </div>214    <div class="app">215      <div class="icon">[ICON: Dr. Driving]</div>216      <div class="label">Dr. Driving</div>217    </div>218    <div class="app">219      <div class="icon">[ICON: Safeway]</div>220      <div class="label">Safeway</div>221    </div>222    <div class="app">223      <div class="icon">[ICON: Sketchbook]</div>224      <div class="label">Sketchbook</div>225    </div>226 227    <!-- Row 4 -->228    <div class="app">229      <div class="icon">[ICON: World Cricket]</div>230      <div class="label">World Crick.</div>231    </div>232    <div class="app">233      <div class="icon">[ICON: Coop]</div>234      <div class="label">Coop</div>235    </div>236    <div class="app">237      <div class="icon">[ICON: ReadEra]</div>238      <div class="label">ReadEra</div>239    </div>240    <div class="app">241      <div class="icon">[ICON]</div>242      <div class="label"></div>243    </div>244  </div>245 246  <!-- Dock -->247  <div class="dock">248    <div class="icon">[ICON: Phone]</div>249    <div class="icon">[ICON: Messages]</div>250    <div class="icon">[ICON: Chrome]</div>251    <div class="icon">[ICON: Camera]</div>252  </div>253 254  <!-- Search bar -->255  <div class="search-bar">256    <div class="search-g">G</div>257    <div class="search-placeholder">Search</div>258    <div class="search-actions">259      <!-- Mic -->260      <svg class="search-icon" viewBox="0 0 24 24" fill="none">261        <rect x="8" y="4" width="8" height="10" rx="4" stroke="#fff" stroke-width="2" fill="none"/>262        <path d="M12 16v4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>263        <path d="M7 12a5 5 0 0010 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>264      </svg>265      <!-- Lens/Camera -->266      <svg class="search-icon" viewBox="0 0 24 24" fill="none">267        <rect x="3" y="6" width="18" height="12" rx="3" stroke="#fff" stroke-width="2"/>268        <circle cx="12" cy="12" r="4" stroke="#fff" stroke-width="2"/>269        <rect x="8" y="4" width="8" height="3" rx="1.5" fill="#fff"/>270      </svg>271    </div>272  </div>273 274  <!-- Gesture bar -->275  <div class="gesture"></div>276 277</div>278</body>279</html>