GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Android Home Screen Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: linear-gradient(150deg, #7e8f7f 0%, #90a08f 40%, #6f7e71 100%);14 }15 /* subtle abstract curves */16 .bg-curve {17 position: absolute;18 border-radius: 50%;19 filter: blur(2px);20 opacity: 0.25;21 pointer-events: none;22 }23 .curve-1 { width: 1400px; height: 1400px; left: -200px; top: 600px; background: radial-gradient(circle at 60% 40%, #8ea192 0%, #6d7b6e 60%, transparent 70%); }24 .curve-2 { width: 1200px; height: 1200px; right: -350px; top: 200px; background: radial-gradient(circle at 40% 50%, #7b8c7d 0%, #4f5a51 70%, transparent 75%); }25 26 /* Status bar */27 .status-bar {28 position: absolute;29 top: 0;30 left: 0;31 width: 1080px;32 height: 92px;33 padding: 18px 32px;34 box-sizing: border-box;35 display: flex;36 align-items: center;37 color: #ffffff;38 font-weight: 500;39 font-size: 34px;40 letter-spacing: 0.2px;41 }42 .sb-left { display: flex; align-items: center; gap: 22px; }43 .sb-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }44 .sb-icon { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; }45 .sb-temp { font-size: 28px; opacity: 0.9; }46 47 /* App grid */48 .home-grid {49 position: absolute;50 top: 140px;51 left: 40px;52 right: 40px;53 display: grid;54 grid-template-columns: repeat(4, 1fr);55 grid-column-gap: 34px;56 grid-row-gap: 64px;57 color: #ffffff;58 }59 .app {60 text-align: center;61 }62 .app .icon {63 width: 168px;64 height: 168px;65 margin: 0 auto 18px;66 border-radius: 50%;67 box-shadow: 0 8px 16px rgba(0,0,0,0.25);68 display: flex;69 align-items: center;70 justify-content: center;71 font-weight: 700;72 font-size: 48px;73 color: #ffffff;74 }75 .app .label {76 font-size: 30px;77 line-height: 1.15;78 color: #ffffff;79 opacity: 0.95;80 }81 82 /* Dock row */83 .dock {84 position: absolute;85 bottom: 410px;86 left: 80px;87 right: 80px;88 display: flex;89 justify-content: space-between;90 }91 .dock .dock-item {92 text-align: center;93 }94 .dock .dock-circle {95 width: 156px;96 height: 156px;97 border-radius: 50%;98 background: #ffffff;99 box-shadow: 0 8px 18px rgba(0,0,0,0.25);100 display: flex;101 align-items: center;102 justify-content: center;103 }104 .dock .dock-label {105 margin-top: 16px;106 font-size: 28px;107 color: #ffffff;108 opacity: 0.95;109 }110 111 /* Search bar */112 .search-bar {113 position: absolute;114 bottom: 220px;115 left: 60px;116 right: 60px;117 height: 118px;118 background: #ffffff;119 border-radius: 60px;120 box-shadow: 0 10px 22px rgba(0,0,0,0.25);121 display: flex;122 align-items: center;123 justify-content: space-between;124 padding: 0 34px;125 box-sizing: border-box;126 }127 .search-left {128 display: flex;129 align-items: center;130 gap: 20px;131 color: #5f6368;132 font-size: 34px;133 }134 .pill-icon {135 width: 60px;136 height: 60px;137 border-radius: 50%;138 background: #ffffff;139 display: inline-flex;140 align-items: center;141 justify-content: center;142 }143 .google-g {144 width: 44px; height: 44px;145 background: conic-gradient(#4285F4 0 25%, #DB4437 25% 50%, #F4B400 50% 75%, #0F9D58 75% 100%);146 border-radius: 50%;147 }148 .search-right { display: flex; align-items: center; gap: 22px; }149 150 /* Gesture bar */151 .gesture-bar {152 position: absolute;153 bottom: 54px;154 left: 390px;155 width: 300px;156 height: 10px;157 border-radius: 6px;158 background: rgba(0,0,0,0.55);159 }160 161 /* Convenience colors for app icons */162 .c-insight { background: #d7b384; color: #4b3a24; }163 .c-cricket { background: #3fb4c6; }164 .c-booking { background: #123b88; }165 .c-hotels { background: #e84a3c; }166 .c-kayak { background: #ff7a3a; }167 .c-driving { background: #d6a56b; color:#4b3a24; }168 .c-box { background: #3b82f6; }169 .c-hm { background: #ffffff; color: #d81b1b; }170 .c-ajio { background: #2e3b46; }171 .c-shoppers { background: #000000; }172 .c-flipkart { background: #3278d9; }173 .c-max { background: #ffffff; color: #3f51b5; }174 .c-ebay { background: #ffffff; color: #34495e; }175 .c-asos { background: #000000; }176 .c-myntra { background: #ffffff; color: #ff4d94; }177 .c-pantaloons { background: #48b3a1; }178 .c-amazon { background: #d6c097; color:#222; }179 .c-zara { background: #ffffff; color:#111; }180 .c-lifestyle { background: #ffffff; color:#6f6f6f; }181 182 /* Simple SVG icon styling */183 svg { display: block; }184</style>185</head>186<body>187<div id="render-target">188 189 <div class="bg-curve curve-1"></div>190 <div class="bg-curve curve-2"></div>191 192 <!-- Status Bar -->193 <div class="status-bar">194 <div class="sb-left">195 <span>10:32</span>196 <span class="sb-temp">16°</span>197 <span class="sb-icon">198 <!-- bell icon -->199 <svg width="28" height="28" viewBox="0 0 24 24" fill="#ffffff" opacity="0.9">200 <path d="M12 2a5 5 0 0 0-5 5v4.4l-1.5 2.6c-.4.7.2 1.5 1 1.5h12c.8 0 1.3-.8 1-1.5L18 11.4V7a5 5 0 0 0-6-5zM9.5 19a2.5 2.5 0 0 0 5 0h-5z"/>201 </svg>202 </span>203 </div>204 <div class="sb-right">205 <!-- Signal -->206 <svg width="28" height="28" viewBox="0 0 24 24" fill="#ffffff" opacity="0.9">207 <path d="M3 18h2v3H3v-3zm4-5h2v8H7v-8zm4-4h2v12h-2V9zm4-4h2v16h-2V5z"/>208 </svg>209 <!-- WiFi -->210 <svg width="28" height="28" viewBox="0 0 24 24" fill="#ffffff" opacity="0.9">211 <path d="M12 18.5l2.5 2.5-2.5 2.5-2.5-2.5L12 18.5zm-7-7a13 13 0 0 1 14 0l-2 2a9 9 0 0 0-10 0l-2-2zm3.5 3.5a8.5 8.5 0 0 1 9 0l-2 2a5.5 5.5 0 0 0-5 0l-2-2z"/>212 </svg>213 <!-- Battery -->214 <svg width="36" height="28" viewBox="0 0 36 24" opacity="0.95">215 <rect x="2" y="4" width="28" height="16" rx="3" ry="3" fill="#ffffff"></rect>216 <rect x="32" y="9" width="3" height="6" rx="1" fill="#ffffff"></rect>217 <rect x="5" y="7" width="22" height="10" fill="#4caf50"></rect>218 </svg>219 </div>220 </div>221 222 <!-- App Grid -->223 <div class="home-grid">224 <!-- Row 1 -->225 <div class="app">226 <div class="icon c-insight">IT</div>227 <div class="label">Insight Timer</div>228 </div>229 <div class="app">230 <div class="icon c-cricket">🏏</div>231 <div class="label">Cricket Lea...</div>232 </div>233 <div class="app">234 <div class="icon c-booking">B</div>235 <div class="label">Booking.com</div>236 </div>237 <div class="app">238 <div class="icon c-hotels">H</div>239 <div class="label">Hotels.com</div>240 </div>241 242 <!-- Row 2 -->243 <div class="app">244 <div class="icon c-kayak">K</div>245 <div class="label">KAYAK</div>246 </div>247 <div class="app">248 <div class="icon c-driving">🚗</div>249 <div class="label">Dr. Driving</div>250 </div>251 <div class="app">252 <div class="icon c-box">box</div>253 <div class="label">Box</div>254 </div>255 256 <!-- Row 3 -->257 <div class="app">258 <div class="icon c-hm">H&M</div>259 <div class="label">H&M</div>260 </div>261 <div class="app">262 <div class="icon c-ajio">A</div>263 <div class="label">AJIO</div>264 </div>265 <div class="app">266 <div class="icon c-shoppers">SS</div>267 <div class="label">Shoppers S...</div>268 </div>269 <div class="app">270 <div class="icon c-flipkart">F</div>271 <div class="label">Flipkart</div>272 </div>273 274 <!-- Row 4 -->275 <div class="app">276 <div class="icon c-max">max</div>277 <div class="label">Max Fashion</div>278 </div>279 <div class="app">280 <div class="icon c-ebay">eBay</div>281 <div class="label">eBay</div>282 </div>283 <div class="app">284 <div class="icon c-asos">a</div>285 <div class="label">ASOS</div>286 </div>287 <div class="app">288 <div class="icon c-myntra">M</div>289 <div class="label">Myntra</div>290 </div>291 292 <!-- Row 5 -->293 <div class="app">294 <div class="icon c-pantaloons">P’</div>295 <div class="label">Pantaloons</div>296 </div>297 <div class="app">298 <div class="icon c-amazon">a</div>299 <div class="label">Amazon</div>300 </div>301 <div class="app">302 <div class="icon c-zara">ZARA</div>303 <div class="label">ZARA</div>304 </div>305 <div class="app">306 <div class="icon c-lifestyle">lifestyle</div>307 <div class="label">Lifestyle</div>308 </div>309 </div>310 311 <!-- Dock Icons -->312 <div class="dock">313 <div class="dock-item">314 <div class="dock-circle">315 <!-- Phone icon -->316 <svg width="72" height="72" viewBox="0 0 24 24" fill="#2e7d32">317 <path d="M6.6 10.2c1.4 2.7 3.5 4.8 6.2 6.2l2.1-2.1a1 1 0 0 1 1-.26l3.5.88a1 1 0 0 1 .76.97v3.1a1 1 0 0 1-.89 1c-10.5-.6-18.9-8.9-19.5-19.5a1 1 0 0 1 1-.89h3.1a1 1 0 0 1 .97.76l.88 3.5a1 1 0 0 1-.26 1l-2.1 2.1z"/>318 </svg>319 </div>320 <div class="dock-label">Phone</div>321 </div>322 <div class="dock-item">323 <div class="dock-circle">324 <!-- Messages icon -->325 <svg width="72" height="72" viewBox="0 0 24 24" fill="#1e88e5">326 <path d="M4 4h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9l-5 4V6a2 2 0 0 1 2-2z"/>327 <rect x="7" y="8" width="10" height="2" fill="#ffffff"/>328 <rect x="7" y="12" width="7" height="2" fill="#ffffff"/>329 </svg>330 </div>331 <div class="dock-label">Messages</div>332 </div>333 <div class="dock-item">334 <div class="dock-circle">335 <!-- Chrome icon simplified -->336 <svg width="72" height="72" viewBox="0 0 24 24">337 <circle cx="12" cy="12" r="10" fill="#f44336"/>338 <path d="M12 2A10 10 0 0 1 22 12H12L7 3.5A10 10 0 0 1 12 2z" fill="#f4b400"/>339 <path d="M22 12a10 10 0 0 1-9.5 10L9 12h13z" fill="#0f9d58"/>340 <circle cx="12" cy="12" r="4.5" fill="#4285f4"/>341 </svg>342 </div>343 <div class="dock-label">Chrome</div>344 </div>345 <div class="dock-item">346 <div class="dock-circle">347 <!-- Camera icon -->348 <svg width="72" height="72" viewBox="0 0 24 24" fill="#3949ab">349 <rect x="3" y="6" width="18" height="12" rx="2" fill="#3949ab"/>350 <rect x="10" y="4" width="4" height="3" rx="1" fill="#283593"/>351 <circle cx="12" cy="12" r="4" fill="#90caf9"/>352 </svg>353 </div>354 <div class="dock-label">Camera</div>355 </div>356 </div>357 358 <!-- Search bar -->359 <div class="search-bar">360 <div class="search-left">361 <div class="pill-icon"><div class="google-g"></div></div>362 <span>Search</span>363 </div>364 <div class="search-right">365 <!-- Microphone -->366 <div class="pill-icon">367 <svg width="42" height="42" viewBox="0 0 24 24" fill="#4285F4">368 <rect x="9" y="4" width="6" height="10" rx="3"></rect>369 <path d="M6 11a6 6 0 0 0 12 0h-2a4 4 0 0 1-8 0H6z" fill="#34A853"></path>370 <rect x="11" y="16" width="2" height="4" fill="#EA4335"></rect>371 <rect x="8" y="20" width="8" height="2" rx="1" fill="#FBBC05"></rect>372 </svg>373 </div>374 <!-- Camera (Google Lens style simple) -->375 <div class="pill-icon">376 <svg width="42" height="42" viewBox="0 0 24 24" fill="#202124">377 <rect x="4" y="7" width="16" height="11" rx="2" fill="#5f6368"></rect>378 <circle cx="12" cy="12.5" r="3.25" fill="#ffffff"></circle>379 <rect x="10" y="5" width="4" height="3" rx="1" fill="#5f6368"></rect>380 </svg>381 </div>382 </div>383 </div>384 385 <!-- Gesture bar -->386 <div class="gesture-bar"></div>387 388</div>389</body>390</html>