GD-ML/AndroidCode
13.4k
1<html>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: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: radial-gradient(1200px 900px at 65% 55%, #3d4f44 0%, #2f3f37 40%, #283a33 70%, #24352f 100%);13 color: #fff;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 100%;22 height: 90px;23 padding: 18px 28px;24 box-sizing: border-box;25 display: flex;26 align-items: center;27 justify-content: space-between;28 font-weight: 600;29 letter-spacing: 0.5px;30 }31 .status-left { font-size: 34px; }32 .status-middle { font-size: 24px; opacity: 0.85; }33 .status-right { display: flex; align-items: center; gap: 22px; }34 .sb-icon { display: inline-flex; align-items: center; justify-content: center; }35 36 /* Simple icons */37 .wifi svg, .battery svg {38 width: 40px; height: 40px;39 }40 .battery {41 position: relative;42 }43 .battery svg { fill: none; stroke: #fff; stroke-width: 5; }44 .battery .level {45 position: absolute;46 left: 5px; top: 8px;47 width: 26px; height: 24px; background: #fff; border-radius: 3px;48 }49 50 /* App grid */51 .apps {52 position: absolute;53 top: 140px;54 left: 0;55 width: 100%;56 padding: 0 56px;57 box-sizing: border-box;58 display: grid;59 grid-template-columns: repeat(4, 1fr);60 column-gap: 40px;61 row-gap: 110px;62 }63 .app-item {64 text-align: center;65 }66 .app-icon {67 width: 150px;68 height: 150px;69 border-radius: 50%;70 margin: 0 auto;71 display: flex;72 align-items: center;73 justify-content: center;74 font-weight: 800;75 font-size: 34px;76 color: #fff;77 box-shadow: 0 8px 16px rgba(0,0,0,0.35) inset, 0 2px 6px rgba(0,0,0,0.25);78 }79 .label {80 margin-top: 18px;81 font-size: 34px;82 font-weight: 600;83 }84 85 /* Colors approximating app icons */86 .c-android { background: #5d8f59; }87 .c-redfin { background: #c0362f; }88 .c-rentberry { background: #f0f2f7; color: #2f5bd5; }89 .c-trovit { background: #3c7af8; }90 .c-flipkart { background: #f3c933; color: #1f56d5; }91 .c-zara { background: #ffffff; color: #000; font-weight: 900; }92 .c-chat { background: #ffffff; color: #29a65a; }93 .c-workout { background: #c53434; }94 .c-fit { background: #ffffff; color: #e84c3d; }95 .c-ebay { background: #ffffff; color: #3777f3; }96 97 .tiny-text { font-size: 28px; opacity: 0.9; }98 99 /* Dock icons */100 .dock {101 position: absolute;102 bottom: 300px;103 left: 0;104 width: 100%;105 display: flex;106 justify-content: space-evenly;107 padding: 0 120px;108 box-sizing: border-box;109 }110 .dock .dock-icon {111 width: 150px; height: 150px; border-radius: 50%;112 background: rgba(255,255,255,0.95);113 display: flex; align-items: center; justify-content: center;114 box-shadow: 0 8px 18px rgba(0,0,0,0.3);115 }116 .dock .dock-icon svg { width: 70px; height: 70px; }117 118 /* Search bar */119 .search-bar {120 position: absolute;121 bottom: 110px;122 left: 60px;123 width: 960px;124 height: 120px;125 background: rgba(28,28,28,0.85);126 border-radius: 60px;127 box-shadow: 0 10px 24px rgba(0,0,0,0.35);128 display: flex;129 align-items: center;130 justify-content: space-between;131 padding: 0 36px;132 box-sizing: border-box;133 }134 .search-left {135 display: flex; align-items: center; gap: 20px;136 }137 .g-dot {138 width: 56px; height: 56px; border-radius: 50%;139 background: #fff; display: flex; align-items: center; justify-content: center;140 color: #4285F4; font-weight: 900; font-size: 28px;141 }142 .search-placeholder { color: #cfcfcf; font-size: 34px; }143 .search-right { display: flex; align-items: center; gap: 24px; }144 .circle-btn {145 width: 64px; height: 64px; border-radius: 50%;146 background: rgba(255,255,255,0.1);147 display: flex; align-items: center; justify-content: center;148 }149 .circle-btn svg { width: 34px; height: 34px; stroke: #fff; }150 151 /* Gesture pill */152 .gesture {153 position: absolute;154 bottom: 36px;155 left: 50%;156 transform: translateX(-50%);157 width: 330px; height: 12px;158 background: rgba(255,255,255,0.65);159 border-radius: 8px;160 }161 162 /* Helper small icons inside app icons */163 .house-icon svg { width: 70px; height: 70px; }164 .chat-bubble svg { width: 74px; height: 74px; }165</style>166</head>167<body>168<div id="render-target">169 170 <!-- Status bar -->171 <div class="status-bar">172 <div class="status-left">1:10</div>173 <div class="status-middle">M G</div>174 <div class="status-right">175 <div class="sb-icon wifi">176 <svg viewBox="0 0 24 24">177 <path fill="#fff" d="M12 20c.9 0 1.6-.7 1.6-1.6S12.9 16.8 12 16.8s-1.6.7-1.6 1.6S11.1 20 12 20z"/>178 <path fill="#fff" opacity="0.8" d="M3 9c2.6-2.3 5.8-3.5 9-3.5s6.4 1.2 9 3.5l-1.7 2c-2.1-1.8-4.7-2.8-7.3-2.8S6.1 9.2 4 11l-1-2z"/>179 <path fill="#fff" opacity="0.6" d="M6 12.3c1.8-1.5 4-2.3 6-2.3s4.2.8 6 2.3l-1.6 1.8c-1.3-1.1-2.9-1.7-4.5-1.7s-3.2.6-4.5 1.7L6 12.3z"/>180 </svg>181 </div>182 <div class="sb-icon battery">183 <svg viewBox="0 0 36 24">184 <rect x="2" y="3" width="28" height="18" rx="3"></rect>185 <rect x="30" y="8" width="4" height="8" rx="2"></rect>186 </svg>187 <div class="level"></div>188 </div>189 </div>190 </div>191 192 <!-- App grid -->193 <div class="apps">194 195 <div class="app-item">196 <div class="app-icon c-android">🤖</div>197 <div class="label">DBW Show...</div>198 </div>199 200 <div class="app-item">201 <div class="app-icon c-redfin" style="font-size:32px; letter-spacing:1px;">REDFIN</div>202 <div class="label">Redfin</div>203 </div>204 205 <div class="app-item">206 <div class="app-icon c-rentberry house-icon">207 <svg viewBox="0 0 24 24">208 <path fill="#2f5bd5" d="M4 12l8-6 8 6v8H4z"></path>209 <rect x="10" y="13" width="4" height="5" fill="#ffc234"></rect>210 </svg>211 </div>212 <div class="label">Rentberry</div>213 </div>214 215 <div class="app-item">216 <div class="app-icon c-trovit">217 <svg viewBox="0 0 24 24">218 <path fill="none" stroke="#fff" stroke-width="2.5" d="M4 12l8-6 8 6v8H4z"></path>219 </svg>220 </div>221 <div class="label">Trovit Homes</div>222 </div>223 224 <div class="app-item">225 <div class="app-icon c-flipkart">F</div>226 <div class="label">Flipkart</div>227 </div>228 229 <div class="app-item">230 <div class="app-icon c-zara">ZARA</div>231 <div class="label">ZARA</div>232 </div>233 234 <div class="app-item">235 <div class="app-icon c-chat chat-bubble">236 <svg viewBox="0 0 24 24">237 <path fill="#29a65a" d="M4 5h16v10H9l-5 4V5z"></path>238 </svg>239 </div>240 <div class="label">Chat</div>241 </div>242 243 <div class="app-item">244 <div class="app-icon c-workout" style="font-size:28px;">Home Work</div>245 <div class="label">Home Work...</div>246 </div>247 248 <div class="app-item">249 <div class="app-icon c-fit">250 <svg viewBox="0 0 24 24">251 <path fill="none" stroke="#e84c3d" stroke-width="2.5" d="M12 20s-7-4.3-7-9a4 4 0 017-2 4 4 0 017 2c0 4.7-7 9-7 9z"></path>252 </svg>253 </div>254 <div class="label">Fit</div>255 </div>256 257 <div class="app-item">258 <div class="app-icon c-ebay" style="font-size:32px;">259 <span style="color:#e5333a;">e</span><span style="color:#2f6bf5;">b</span><span style="color:#f1b508;">a</span><span style="color:#31b55a;">y</span>260 </div>261 <div class="label">eBay</div>262 </div>263 264 <!-- empty grid spots to keep layout spacing -->265 <div></div>266 <div></div>267 268 </div>269 270 <!-- Dock -->271 <div class="dock">272 <div class="dock-icon">273 <!-- Phone -->274 <svg viewBox="0 0 24 24">275 <path fill="#3b78ff" d="M6 2h12v20H6z" opacity="0.12"></path>276 <path fill="#3b78ff" d="M18 17.5c-3.7-.8-7.1-4.2-7.9-7.9-.1-.5.1-1 .5-1.3l1.7-1.7c.4-.4.4-1 0-1.4L10.3 2C10 1.7 9.6 1.7 9.3 2L6.4 4.9C5.8 5.6 5.5 6.5 5.7 7.3c.9 3.8 4.2 8.1 8.1 9.1.8.2 1.7-.1 2.3-.7l2.6-2.6c.4-.4.4-1 0-1.4l-1.7-1.7c-.4-.4-1-.4-1.4 0l-1.7 1.7c-.3.4-.8.6-1.3.5z"></path>277 </svg>278 </div>279 <div class="dock-icon">280 <!-- Messages -->281 <svg viewBox="0 0 24 24">282 <path fill="#4f79ff" d="M4 4h16v12H9l-5 4z"></path>283 </svg>284 </div>285 <div class="dock-icon">286 <!-- Chrome -->287 <svg viewBox="0 0 24 24">288 <circle cx="12" cy="12" r="10" fill="#f44336"></circle>289 <path d="M12 2a10 10 0 019.6 7H12z" fill="#ffc107"></path>290 <path d="M4.7 6.8A10 10 0 002 12a10 10 0 0010 10l5.3-9H12z" fill="#4caf50"></path>291 <circle cx="12" cy="12" r="5" fill="#1e88e5"></circle>292 </svg>293 </div>294 <div class="dock-icon">295 <!-- Camera -->296 <svg viewBox="0 0 24 24">297 <rect x="3" y="6" width="18" height="12" rx="2" fill="#333"></rect>298 <circle cx="12" cy="12" r="4.5" fill="#6aa9ff"></circle>299 <rect x="8" y="4" width="8" height="3" rx="1.5" fill="#666"></rect>300 </svg>301 </div>302 </div>303 304 <!-- Search bar -->305 <div class="search-bar">306 <div class="search-left">307 <div class="g-dot">G</div>308 <div class="search-placeholder">Search</div>309 </div>310 <div class="search-right">311 <div class="circle-btn">312 <!-- Mic -->313 <svg viewBox="0 0 24 24" fill="none">314 <rect x="9" y="5" width="6" height="9" rx="3" stroke="#fff" stroke-width="2"></rect>315 <path d="M6 11c0 3.3 2.7 6 6 6s6-2.7 6-6" stroke="#fff" stroke-width="2"></path>316 <path d="M12 17v3" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>317 </svg>318 </div>319 <div class="circle-btn">320 <!-- Camera/Lens -->321 <svg viewBox="0 0 24 24" fill="none">322 <rect x="3" y="6" width="18" height="12" rx="2" stroke="#fff" stroke-width="2"></rect>323 <circle cx="12" cy="12" r="4" stroke="#fff" stroke-width="2"></circle>324 </svg>325 </div>326 </div>327 </div>328 329 <!-- Gesture pill -->330 <div class="gesture"></div>331 332</div>333</body>334</html>