GD-ML/AndroidCode
13.4k
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>Android Home UI Mock</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: "Roboto", Arial, Helvetica, sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #5f7a86; /* slate blue/grey wallpaper */20 }21 22 /* Status bar */23 .status-bar {24 position: absolute;25 top: 20px;26 left: 40px;27 width: 1000px;28 height: 60px;29 display: flex;30 align-items: center;31 justify-content: space-between;32 color: #ffffff;33 font-size: 40px;34 letter-spacing: 0.5px;35 }36 .status-icons {37 display: flex;38 align-items: center;39 gap: 24px;40 }41 .status-icons svg {42 fill: none;43 stroke: #ffffff;44 stroke-width: 3;45 }46 47 /* Date text */48 .date {49 position: absolute;50 top: 220px;51 left: 60px;52 color: #ffffff;53 font-size: 72px;54 font-weight: 400;55 }56 57 /* App grid */58 .app-section {59 position: absolute;60 left: 60px;61 width: 960px;62 }63 .grid-3 {64 top: 760px;65 display: grid;66 grid-template-columns: repeat(3, 1fr);67 column-gap: 60px;68 row-gap: 60px;69 }70 .grid-4 {71 top: 1360px;72 display: grid;73 grid-template-columns: repeat(4, 1fr);74 column-gap: 60px;75 row-gap: 60px;76 }77 78 .app {79 text-align: center;80 }81 .app .icon {82 width: 160px;83 height: 160px;84 margin: 0 auto 18px;85 background: #E0E0E0;86 border: 1px solid #BDBDBD;87 border-radius: 50%;88 display: flex;89 align-items: center;90 justify-content: center;91 color: #757575;92 font-size: 26px;93 text-align: center;94 padding: 6px;95 box-sizing: border-box;96 }97 .app .label {98 color: #E8EDF1;99 font-size: 36px;100 font-weight: 500;101 text-shadow: 0 1px 0 rgba(0,0,0,0.45);102 }103 104 /* Dock */105 .dock {106 position: absolute;107 left: 60px;108 top: 1760px;109 width: 960px;110 display: grid;111 grid-template-columns: repeat(4, 1fr);112 column-gap: 60px;113 }114 .dock .icon {115 width: 140px;116 height: 140px;117 margin: 0 auto 12px;118 background: #E0E0E0;119 border: 1px solid #BDBDBD;120 border-radius: 50%;121 display: flex;122 align-items: center;123 justify-content: center;124 color: #757575;125 font-size: 24px;126 padding: 6px;127 box-sizing: border-box;128 }129 130 /* Search bar */131 .search-bar {132 position: absolute;133 left: 60px;134 bottom: 220px;135 width: 960px;136 height: 120px;137 background: #ffffff;138 border-radius: 60px;139 box-shadow: 0 6px 20px rgba(0,0,0,0.25);140 display: flex;141 align-items: center;142 justify-content: space-between;143 padding: 0 28px;144 box-sizing: border-box;145 }146 .search-left {147 display: flex;148 align-items: center;149 gap: 22px;150 }151 .g-chip {152 width: 72px;153 height: 72px;154 border-radius: 36px;155 background: #ffffff;156 border: 2px solid #e6e6e6;157 display: flex;158 align-items: center;159 justify-content: center;160 font-weight: 700;161 font-size: 36px;162 color: #4285F4; /* stylized G */163 }164 .search-placeholder {165 color: #8fa4ad;166 font-size: 36px;167 }168 .search-right {169 display: flex;170 align-items: center;171 gap: 28px;172 }173 .circle-btn {174 width: 72px;175 height: 72px;176 border-radius: 36px;177 background: #ffffff;178 border: 2px solid #e6e6e6;179 display: flex;180 align-items: center;181 justify-content: center;182 }183 .circle-btn svg {184 width: 34px;185 height: 34px;186 fill: #4285F4;187 }188 189 /* Gesture bar */190 .gesture-bar {191 position: absolute;192 bottom: 60px;193 left: 50%;194 transform: translateX(-50%);195 width: 240px;196 height: 14px;197 background: #d7dde1;198 border-radius: 7px;199 opacity: 0.8;200 }201</style>202</head>203<body>204<div id="render-target">205 206 <!-- Status bar -->207 <div class="status-bar">208 <div class="time">1:01</div>209 <div class="status-icons">210 <!-- Wi-Fi icon -->211 <svg width="44" height="30" viewBox="0 0 44 30">212 <path d="M2 8c10-8 30-8 40 0" />213 <path d="M8 14c7-6 21-6 28 0" />214 <path d="M16 20c4-4 12-4 16 0" />215 <circle cx="22" cy="26" r="2" fill="#ffffff" stroke="none"/>216 </svg>217 <!-- Battery icon -->218 <svg width="48" height="26" viewBox="0 0 48 26">219 <rect x="2" y="4" width="40" height="18" rx="3" stroke="#ffffff" />220 <rect x="44" y="9" width="3" height="8" rx="1" fill="#ffffff" stroke="none" />221 <rect x="6" y="8" width="28" height="10" fill="#ffffff" stroke="none" />222 </svg>223 </div>224 </div>225 226 <!-- Date -->227 <div class="date">Fri, Jun 30</div>228 229 <!-- App grid: first two rows (3 then 2) -->230 <div class="app-section grid-3">231 <div class="app">232 <div class="icon">[IMG: Nike Logo]</div>233 <div class="label">Nike</div>234 </div>235 <div class="app">236 <div class="icon">[IMG: adidas Logo]</div>237 <div class="label">adidas</div>238 </div>239 <div class="app">240 <div class="icon">[IMG: Myntra Logo]</div>241 <div class="label">Myntra</div>242 </div>243 244 <div class="app">245 <div class="icon">[IMG: ZARA Logo]</div>246 <div class="label">ZARA</div>247 </div>248 <div class="app">249 <div class="icon">[IMG: H&M Logo]</div>250 <div class="label">H&M</div>251 </div>252 <div class="app">253 <!-- empty to mimic spacing in screenshot -->254 </div>255 </div>256 257 <!-- Google apps row (4 columns) -->258 <div class="app-section grid-4" style="top: 1360px;">259 <div class="app">260 <div class="icon">[IMG: Play Store Icon]</div>261 <div class="label">Play Store</div>262 </div>263 <div class="app">264 <div class="icon">[IMG: Gmail Icon]</div>265 <div class="label">Gmail</div>266 </div>267 <div class="app">268 <div class="icon">[IMG: Google Photos Icon]</div>269 <div class="label">Photos</div>270 </div>271 <div class="app">272 <div class="icon">[IMG: YouTube Icon]</div>273 <div class="label">YouTube</div>274 </div>275 </div>276 277 <!-- Dock row -->278 <div class="dock">279 <div class="app">280 <div class="icon">[IMG: Phone Icon]</div>281 </div>282 <div class="app">283 <div class="icon">[IMG: Messages Icon]</div>284 </div>285 <div class="app">286 <div class="icon">[IMG: Chrome Icon]</div>287 </div>288 <div class="app">289 <div class="icon">[IMG: Camera Icon]</div>290 </div>291 </div>292 293 <!-- Search bar -->294 <div class="search-bar">295 <div class="search-left">296 <div class="g-chip">G</div>297 <div class="search-placeholder">Search...</div>298 </div>299 <div class="search-right">300 <div class="circle-btn" title="Voice">301 <!-- Mic icon -->302 <svg viewBox="0 0 24 24">303 <path d="M12 4a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V7a3 3 0 0 1 3-3z" fill="#4285F4"/>304 <path d="M6 11a6 6 0 0 0 12 0M12 17v4" stroke="#4285F4" stroke-width="2" />305 </svg>306 </div>307 <div class="circle-btn" title="Lens">308 <!-- Simple camera icon -->309 <svg viewBox="0 0 24 24">310 <rect x="3" y="6" width="18" height="12" rx="3" fill="#4285F4" opacity="0.15"/>311 <rect x="3" y="6" width="18" height="12" rx="3" stroke="#4285F4" stroke-width="2"/>312 <circle cx="12" cy="12" r="4" fill="#4285F4"/>313 <rect x="7" y="4" width="4" height="3" rx="1" fill="#4285F4"/>314 </svg>315 </div>316 </div>317 </div>318 319 <!-- Gesture bar -->320 <div class="gesture-bar"></div>321 322</div>323</body>324</html>