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">6<title>Android Home Screen Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: radial-gradient(ellipse at center, #222933 0%, #1a2028 45%, #151b22 100%);15 border-radius: 36px;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 100%;24 height: 120px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 padding: 0 40px;29 color: #ffffff;30 font-size: 34px;31 box-sizing: border-box;32 }33 .status-right {34 display: flex;35 align-items: center;36 gap: 26px;37 }38 .status-icon svg { display: block; }39 .status-icon { opacity: 0.92; }40 41 /* Apps grid */42 .apps-wrapper {43 position: absolute;44 top: 140px;45 left: 0;46 width: 100%;47 box-sizing: border-box;48 padding: 0 54px;49 }50 .app-grid {51 display: grid;52 grid-template-columns: repeat(4, 1fr);53 column-gap: 40px;54 row-gap: 72px;55 justify-items: center;56 }57 .app-item {58 width: 210px;59 text-align: center;60 color: #f2f2f2;61 }62 .app-icon {63 width: 160px;64 height: 160px;65 border-radius: 50%;66 box-shadow: 0 6px 14px rgba(0,0,0,0.35) inset, 0 10px 20px rgba(0,0,0,0.25);67 display: flex;68 align-items: center;69 justify-content: center;70 border: 1px solid rgba(255,255,255,0.08);71 font-size: 26px;72 color: #ffffff;73 text-align: center;74 padding: 10px;75 box-sizing: border-box;76 }77 .app-name {78 margin-top: 16px;79 font-size: 30px;80 letter-spacing: 0.2px;81 color: #eaeaea;82 white-space: nowrap;83 overflow: hidden;84 text-overflow: ellipsis;85 }86 87 /* Color presets approximating icons */88 .c-blue { background: #3B7DDD; }89 .c-black { background: #101010; }90 .c-orange { background: #D56B2A; }91 .c-red { background: #B43636; }92 .c-white { background: #F5F6F7; color: #222; }93 .c-beige { background: #C7B084; }94 .c-dark { background: #2a2f38; }95 .c-green { background: #4CAF50; }96 .c-lblue { background: #4C8BF5; }97 .c-violet { background: #5866FF; }98 99 /* Dock row */100 .dock {101 position: absolute;102 left: 0;103 right: 0;104 bottom: 430px;105 padding: 0 140px;106 display: flex;107 justify-content: space-between;108 align-items: center;109 }110 .dock .dock-icon {111 width: 150px;112 height: 150px;113 border-radius: 50%;114 background: #F5F6F7;115 display: flex;116 align-items: center;117 justify-content: center;118 box-shadow: 0 10px 22px rgba(0,0,0,0.25);119 border: 1px solid rgba(255,255,255,0.08);120 }121 122 /* Search bar */123 .search-bar {124 position: absolute;125 left: 80px;126 right: 80px;127 bottom: 230px;128 height: 120px;129 border-radius: 60px;130 background: #2a2f38;131 box-shadow: 0 12px 24px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.06);132 display: flex;133 align-items: center;134 padding: 0 36px;135 gap: 24px;136 color: #d7d7d7;137 font-size: 34px;138 box-sizing: border-box;139 }140 .search-right {141 margin-left: auto;142 display: flex;143 gap: 26px;144 }145 .pill-icon {146 width: 58px;147 height: 58px;148 border-radius: 50%;149 background: #3b414b;150 display: flex;151 align-items: center;152 justify-content: center;153 }154 155 /* Home indicator */156 .home-indicator {157 position: absolute;158 bottom: 100px;159 left: 50%;160 transform: translateX(-50%);161 width: 300px;162 height: 12px;163 background: #ffffff;164 border-radius: 6px;165 opacity: 0.9;166 }167</style>168</head>169<body>170<div id="render-target">171 172 <!-- Status Bar -->173 <div class="status-bar">174 <div class="status-left">1:11</div>175 <div class="status-right">176 <div class="status-icon">177 <!-- Cellular bars -->178 <svg width="48" height="32" viewBox="0 0 48 32">179 <rect x="2" y="20" width="8" height="10" fill="#fff"/>180 <rect x="14" y="14" width="8" height="16" fill="#fff"/>181 <rect x="26" y="8" width="8" height="22" fill="#fff"/>182 </svg>183 </div>184 <div class="status-icon">185 <!-- Home square -->186 <svg width="34" height="32" viewBox="0 0 34 32">187 <rect x="6" y="8" width="22" height="16" rx="2" fill="#fff"/>188 </svg>189 </div>190 <div class="status-icon">191 <!-- Wi-Fi -->192 <svg width="40" height="32" viewBox="0 0 40 32">193 <path d="M4 12c8-6 24-6 32 0" stroke="#fff" stroke-width="3" fill="none"/>194 <path d="M10 18c6-4 14-4 20 0" stroke="#fff" stroke-width="3" fill="none"/>195 <circle cx="20" cy="24" r="3" fill="#fff"/>196 </svg>197 </div>198 <div class="status-icon">199 <!-- Battery -->200 <svg width="40" height="32" viewBox="0 0 40 32">201 <rect x="2" y="8" width="30" height="16" rx="2" fill="none" stroke="#fff" stroke-width="3"/>202 <rect x="34" y="12" width="4" height="8" fill="#fff"/>203 <rect x="6" y="11" width="22" height="10" fill="#fff"/>204 </svg>205 </div>206 </div>207 </div>208 209 <!-- Apps Grid -->210 <div class="apps-wrapper">211 <div class="app-grid">212 <div class="app-item">213 <div class="app-icon c-blue">[IMG: DBW Showcase Icon]</div>214 <div class="app-name">DBW Show...</div>215 </div>216 <div class="app-item">217 <div class="app-icon c-black">[IMG: adidas Logo]</div>218 <div class="app-name">adidas</div>219 </div>220 <div class="app-item">221 <div class="app-icon c-black">[IMG: PUMA Logo]</div>222 <div class="app-name">PUMA</div>223 </div>224 <div class="app-item">225 <div class="app-icon c-blue">[IMG: Decathlon Icon]</div>226 <div class="app-name">Decathlon</div>227 </div>228 229 <div class="app-item">230 <div class="app-icon c-blue">[IMG: Flipkart Icon]</div>231 <div class="app-name">Flipkart</div>232 </div>233 <div class="app-item">234 <div class="app-icon c-white">[IMG: Nike Swoosh]</div>235 <div class="app-name">Nike</div>236 </div>237 <div class="app-item">238 <div class="app-icon c-orange">[IMG: Etsy Logo]</div>239 <div class="app-name">Etsy</div>240 </div>241 <div class="app-item">242 <div class="app-icon c-red">[IMG: Home Workout Icon]</div>243 <div class="app-name">Home Work...</div>244 </div>245 246 <div class="app-item">247 <div class="app-icon c-white">[IMG: Google Fit Heart]</div>248 <div class="app-name">Fit</div>249 </div>250 <div class="app-item">251 <div class="app-icon c-white">[IMG: eBay Logo]</div>252 <div class="app-name">eBay</div>253 </div>254 <div class="app-item">255 <div class="app-icon c-beige">[IMG: Amazon Smiley Box]</div>256 <div class="app-name">Amazon</div>257 </div>258 <div class="app-item">259 <div class="app-icon c-white">[IMG: Vimeo Icon]</div>260 <div class="app-name">Vimeo</div>261 </div>262 263 <div class="app-item">264 <div class="app-icon c-black">[IMG: M&S India Logo]</div>265 <div class="app-name">M&S India</div>266 </div>267 <div class="app-item">268 <div class="app-icon c-lblue">[IMG: Dropbox Icon]</div>269 <div class="app-name">Dropbox</div>270 </div>271 <div class="app-item">272 <div class="app-icon c-white">[IMG: Wanderu Icon]</div>273 <div class="app-name">Wanderu</div>274 </div>275 <div class="app-item">276 <div class="app-icon c-dark">[IMG: Zombie War Game]</div>277 <div class="app-name">Zombie Wa...</div>278 </div>279 280 <div class="app-item">281 <div class="app-icon c-green">[IMG: Groupon Icon]</div>282 <div class="app-name">Groupon</div>283 </div>284 <div class="app-item">285 <div class="app-icon c-white">[IMG: NNNOW Icon]</div>286 <div class="app-name">NNNOW</div>287 </div>288 <div class="app-item">289 <div class="app-icon c-violet">[IMG: XGallery Icon]</div>290 <div class="app-name">XGallery - P...</div>291 </div>292 <div class="app-item">293 <div class="app-icon c-blue">[IMG: Weather Channel]</div>294 <div class="app-name">The Weath...</div>295 </div>296 </div>297 </div>298 299 <!-- Dock row -->300 <div class="dock">301 <div class="dock-icon">302 <!-- Phone icon -->303 <svg width="74" height="74" viewBox="0 0 64 64">304 <path d="M18 10c-2 0-4 2-4 4 0 22 18 40 40 40 2 0 4-2 4-4l-2-10c-1-2-3-3-5-2l-9 4c-8-4-15-11-19-19l4-9c1-2 0-4-2-5l-7-3z" fill="#3B7DDD"/>305 </svg>306 </div>307 <div class="dock-icon">308 <!-- Messages icon -->309 <svg width="74" height="74" viewBox="0 0 64 64">310 <rect x="10" y="14" width="44" height="30" rx="6" fill="#4C8BF5"/>311 <path d="M18 44l10-8h18" stroke="#fff" stroke-width="4" fill="none"/>312 </svg>313 </div>314 <div class="dock-icon">315 <!-- Chrome simplified -->316 <svg width="74" height="74" viewBox="0 0 64 64">317 <circle cx="32" cy="32" r="30" fill="#DB4437"/>318 <path d="M32 32L10 20a30 30 0 0 1 44 6" fill="#0F9D58"/>319 <path d="M32 32l22 18a30 30 0 0 1-52-8" fill="#F4B400"/>320 <circle cx="32" cy="32" r="12" fill="#4285F4"/>321 </svg>322 </div>323 <div class="dock-icon">324 <!-- Camera icon -->325 <svg width="74" height="74" viewBox="0 0 64 64">326 <rect x="10" y="18" width="44" height="28" rx="6" fill="#9aa0a6"/>327 <circle cx="32" cy="32" r="10" fill="#1a73e8"/>328 <rect x="22" y="12" width="20" height="8" rx="3" fill="#5f6368"/>329 </svg>330 </div>331 </div>332 333 <!-- Search bar -->334 <div class="search-bar">335 <div class="pill-icon" style="background:#fff;">336 <!-- Google 'G' simplified -->337 <svg width="34" height="34" viewBox="0 0 48 48">338 <circle cx="24" cy="24" r="20" fill="none" stroke="#4285F4" stroke-width="6"/>339 <path d="M24 24h16" stroke="#4285F4" stroke-width="6"/>340 <path d="M14 16a14 14 0 0 1 20 0" stroke="#EA4335" stroke-width="6" fill="none"/>341 <path d="M14 32a14 14 0 0 0 20 0" stroke="#34A853" stroke-width="6" fill="none"/>342 <path d="M10 24a14 14 0 0 1 4-8" stroke="#FBBC05" stroke-width="6" fill="none"/>343 </svg>344 </div>345 <div>Search</div>346 <div class="search-right">347 <div class="pill-icon">348 <!-- Mic -->349 <svg width="28" height="28" viewBox="0 0 32 32">350 <rect x="12" y="6" width="8" height="14" rx="4" fill="#fff"/>351 <path d="M8 16c0 6 4 10 8 10s8-4 8-10" stroke="#fff" stroke-width="2" fill="none"/>352 <rect x="15" y="24" width="2" height="4" fill="#fff"/>353 </svg>354 </div>355 <div class="pill-icon">356 <!-- Lens camera -->357 <svg width="28" height="28" viewBox="0 0 32 32">358 <rect x="6" y="8" width="20" height="16" rx="4" fill="#fff"/>359 <circle cx="16" cy="16" r="5" fill="#1a73e8"/>360 </svg>361 </div>362 </div>363 </div>364 365 <!-- Home indicator -->366 <div class="home-indicator"></div>367</div>368</body>369</html>