GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Android Home UI Mock</title>6<style>7 body {8 margin: 0;9 padding: 0;10 background: transparent;11 font-family: Arial, Helvetica, sans-serif;12 }13 #render-target {14 position: relative;15 overflow: hidden;16 width: 1080px;17 height: 2400px;18 background:19 radial-gradient(1200px 900px at 20% 30%, rgba(35,35,35,0.9), rgba(18,18,18,0.95)),20 linear-gradient(140deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.6) 45%, rgba(0,0,0,0.9) 100%);21 color: #fff;22 }23 24 /* faint feather-like lines */25 #render-target:before, #render-target:after {26 content: "";27 position: absolute;28 inset: 0;29 background:30 repeating-linear-gradient(110deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, rgba(0,0,0,0.0) 6px),31 repeating-linear-gradient(70deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, rgba(0,0,0,0.0) 8px);32 mix-blend-mode: soft-light;33 pointer-events: none;34 }35 #render-target:after {36 opacity: 0.5;37 transform: scale(1.02);38 }39 40 /* Status bar */41 .status-bar {42 position: absolute;43 top: 0;44 left: 0;45 width: 100%;46 height: 110px;47 padding: 24px 36px;48 display: flex;49 align-items: center;50 justify-content: space-between;51 color: #ffffff;52 font-size: 30px;53 box-sizing: border-box;54 }55 .status-left {56 display: flex;57 align-items: center;58 gap: 16px;59 }60 .status-left .time {61 font-size: 36px;62 font-weight: 600;63 letter-spacing: 0.5px;64 }65 .chip {66 width: 34px;67 height: 34px;68 border-radius: 8px;69 background: rgba(255,255,255,0.16);70 display: inline-flex;71 align-items: center;72 justify-content: center;73 font-size: 22px;74 }75 .status-right {76 display: flex;77 align-items: center;78 gap: 26px;79 }80 .icon {81 display: inline-flex;82 align-items: center;83 justify-content: center;84 }85 86 /* Date & weather */87 .date-block {88 position: absolute;89 top: 190px;90 left: 64px;91 }92 .date-block .date {93 font-size: 58px;94 font-weight: 500;95 margin-bottom: 18px;96 color: #f1f1f1;97 }98 .date-block .weather {99 display: flex;100 align-items: center;101 gap: 16px;102 color: #dcdcdc;103 font-size: 34px;104 }105 106 /* App grid rows */107 .apps-row {108 position: absolute;109 left: 0;110 width: 100%;111 display: flex;112 justify-content: space-around;113 padding: 0 40px;114 box-sizing: border-box;115 }116 .apps-row.top {117 top: 1520px;118 }119 .apps-row.dock {120 top: 1820px;121 }122 .app-item {123 width: 180px;124 text-align: center;125 color: #ffffff;126 }127 .icon-circle {128 width: 152px;129 height: 152px;130 border-radius: 50%;131 background: #ffffff;132 display: flex;133 align-items: center;134 justify-content: center;135 margin: 0 auto;136 box-shadow: 0 8px 18px rgba(0,0,0,0.35);137 }138 .app-label {139 margin-top: 20px;140 font-size: 32px;141 color: #f2f2f2;142 }143 144 /* Search bar */145 .search-bar {146 position: absolute;147 left: 70px;148 right: 70px;149 top: 2060px;150 height: 128px;151 background: #3a3a3a;152 border-radius: 64px;153 display: flex;154 align-items: center;155 justify-content: space-between;156 padding: 0 36px;157 box-shadow: 0 10px 20px rgba(0,0,0,0.4);158 box-sizing: border-box;159 }160 .search-left {161 display: flex;162 align-items: center;163 gap: 22px;164 color: #e6e6e6;165 font-size: 38px;166 letter-spacing: 0.2px;167 }168 .g-badge {169 width: 64px;170 height: 64px;171 border-radius: 50%;172 background: #2b2b2b;173 display: flex;174 align-items: center;175 justify-content: center;176 }177 .search-right {178 display: flex;179 align-items: center;180 gap: 26px;181 }182 183 /* Gesture handle */184 .gesture {185 position: absolute;186 bottom: 36px;187 left: 50%;188 transform: translateX(-50%);189 width: 260px;190 height: 16px;191 border-radius: 10px;192 background: rgba(255,255,255,0.85);193 }194</style>195</head>196<body>197<div id="render-target">198 199 <!-- Status Bar -->200 <div class="status-bar">201 <div class="status-left">202 <div class="time">2:45</div>203 <div class="chip">B</div>204 <div class="chip">N</div>205 <div class="chip">•</div>206 </div>207 <div class="status-right">208 <!-- Wi-Fi icon -->209 <div class="icon">210 <svg width="40" height="40" viewBox="0 0 40 40" fill="none">211 <path d="M5 14c6-5 24-5 30 0" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>212 <path d="M10 20c4-3 16-3 20 0" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>213 <path d="M15 26c2-2 8-2 10 0" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>214 <circle cx="20" cy="31" r="2.6" fill="#ffffff"/>215 </svg>216 </div>217 <!-- Battery icon -->218 <div class="icon">219 <svg width="44" height="40" viewBox="0 0 44 40" fill="none">220 <rect x="5" y="10" width="30" height="20" rx="4" stroke="#ffffff" stroke-width="3"/>221 <rect x="8" y="13" width="24" height="14" rx="2" fill="#ffffff"/>222 <rect x="36" y="15" width="4" height="10" rx="2" fill="#ffffff"/>223 </svg>224 </div>225 </div>226 </div>227 228 <!-- Date and Weather -->229 <div class="date-block">230 <div class="date">Fri, Aug 11</div>231 <div class="weather">232 <svg width="44" height="44" viewBox="0 0 44 44" fill="none">233 <path d="M4 16c6 6 12-6 18 0 6 6 12-6 18 0" stroke="#dcdcdc" stroke-width="3" stroke-linecap="round"/>234 <path d="M4 24c6 6 12-6 18 0 6 6 12-6 18 0" stroke="#dcdcdc" stroke-width="3" stroke-linecap="round"/>235 <path d="M4 32c6 6 12-6 18 0 6 6 12-6 18 0" stroke="#dcdcdc" stroke-width="3" stroke-linecap="round"/>236 </svg>237 <span>34°C</span>238 </div>239 </div>240 241 <!-- Top apps row -->242 <div class="apps-row top">243 <!-- Play Store -->244 <div class="app-item">245 <div class="icon-circle">246 <svg width="120" height="120" viewBox="0 0 100 100">247 <polygon points="12,12 12,88 47,50" fill="#34A853"></polygon>248 <polygon points="47,50 85,22 85,78" fill="#4285F4"></polygon>249 <polygon points="47,50 85,78 61,90" fill="#FBBC05"></polygon>250 <polygon points="47,50 85,22 61,10" fill="#EA4335"></polygon>251 </svg>252 </div>253 <div class="app-label">Play Store</div>254 </div>255 256 <!-- Gmail -->257 <div class="app-item">258 <div class="icon-circle">259 <svg width="120" height="120" viewBox="0 0 100 100">260 <rect x="16" y="26" width="68" height="48" rx="8" fill="#ffffff" stroke="#dadada" stroke-width="2"></rect>261 <!-- M shape bars -->262 <polygon points="18,30 18,70 50,48 50,32" fill="#EA4335"></polygon>263 <polygon points="82,30 82,70 50,48 50,32" fill="#4285F4"></polygon>264 <rect x="18" y="30" width="64" height="10" fill="#FBBC05"></rect>265 <polygon points="18,70 50,48 18,48" fill="#34A853"></polygon>266 <polygon points="82,70 50,48 82,48" fill="#34A853"></polygon>267 </svg>268 </div>269 <div class="app-label">Gmail</div>270 </div>271 272 <!-- Photos -->273 <div class="app-item">274 <div class="icon-circle">275 <svg width="120" height="120" viewBox="0 0 100 100">276 <rect x="46" y="16" width="20" height="32" rx="10" fill="#FBBC05" transform="rotate(45 56 32)"></rect>277 <rect x="64" y="46" width="32" height="20" rx="10" fill="#4285F4" transform="rotate(45 80 56)"></rect>278 <rect x="46" y="52" width="20" height="32" rx="10" fill="#EA4335" transform="rotate(45 56 68)"></rect>279 <rect x="16" y="46" width="32" height="20" rx="10" fill="#34A853" transform="rotate(45 32 56)"></rect>280 <circle cx="56" cy="56" r="10" fill="#ffffff"></circle>281 </svg>282 </div>283 <div class="app-label">Photos</div>284 </div>285 286 <!-- YouTube -->287 <div class="app-item">288 <div class="icon-circle">289 <svg width="120" height="120" viewBox="0 0 100 100">290 <rect x="16" y="30" width="68" height="40" rx="12" fill="#ff0000"></rect>291 <polygon points="44,50 44,42 60,50 44,58" fill="#ffffff"></polygon>292 </svg>293 </div>294 <div class="app-label">YouTube</div>295 </div>296 </div>297 298 <!-- Dock row -->299 <div class="apps-row dock">300 <!-- Phone -->301 <div class="app-item">302 <div class="icon-circle">303 <svg width="120" height="120" viewBox="0 0 100 100">304 <path d="M32 32c5-5 12-5 17 0l4 4c3 3 3 8 0 11l-4 4c4 7 11 12 18 16l4-4c3-3 8-3 11 0l4 4c5 5 5 12 0 17-3 3-8 4-12 3-12-3-29-13-40-24S23 51 20 39c-1-4 0-9 3-12z" fill="#2D7CF7"></path>305 </svg>306 </div>307 </div>308 309 <!-- Messages -->310 <div class="app-item">311 <div class="icon-circle">312 <svg width="120" height="120" viewBox="0 0 100 100">313 <rect x="18" y="24" width="64" height="42" rx="14" fill="#3D79FF"></rect>314 <polygon points="40,66 36,84 52,72" fill="#3D79FF"></polygon>315 <circle cx="34" cy="45" r="5" fill="#cfe0ff"></circle>316 <circle cx="50" cy="45" r="5" fill="#cfe0ff"></circle>317 <circle cx="66" cy="45" r="5" fill="#cfe0ff"></circle>318 </svg>319 </div>320 </div>321 322 <!-- Chrome -->323 <div class="app-item">324 <div class="icon-circle">325 <svg width="120" height="120" viewBox="0 0 100 100">326 <circle cx="50" cy="50" r="40" fill="#F4B400"></circle>327 <path d="M50 10a40 40 0 0 1 35 22H50z" fill="#DB4437"></path>328 <path d="M85 32a40 40 0 0 1-20 48L50 50z" fill="#0F9D58"></path>329 <path d="M65 80A40 40 0 0 1 15 32l35 18z" fill="#4285F4"></path>330 <circle cx="50" cy="50" r="16" fill="#2C7CF7"></circle>331 </svg>332 </div>333 </div>334 335 <!-- Camera -->336 <div class="app-item">337 <div class="icon-circle">338 <svg width="120" height="120" viewBox="0 0 100 100">339 <rect x="20" y="30" width="60" height="40" rx="8" fill="#9AA0A6"></rect>340 <rect x="32" y="20" width="18" height="12" rx="4" fill="#757575"></rect>341 <circle cx="50" cy="50" r="14" fill="#4A90E2"></circle>342 <circle cx="50" cy="50" r="7" fill="#BFE0FF"></circle>343 </svg>344 </div>345 </div>346 </div>347 348 <!-- Search bar -->349 <div class="search-bar">350 <div class="search-left">351 <div class="g-badge">352 <svg width="44" height="44" viewBox="0 0 44 44">353 <path d="M22 8a14 14 0 1 0 0 28c7 0 12-4 13-9h-13v-6h21c1 14-10 23-21 23A20 20 0 1 1 22 4c5 0 9 2 12 5l-5 5c-2-2-4-3-7-3z" fill="#4285F4"/>354 <path d="M22 36a14 14 0 0 0 9-3l-4-5c-2 1-3 2-5 2-4 0-7-3-7-7H9c0 7 6 13 13 13z" fill="#34A853"/>355 <path d="M15 23c0-1 0-2 1-3l-5-4c-2 3-3 6-3 9h7z" fill="#FBBC05"/>356 <path d="M22 16c2 0 3 1 4 2l5-5c-3-3-6-5-10-5-6 0-11 3-14 7l5 4c2-4 6-3 10-3z" fill="#EA4335"/>357 </svg>358 </div>359 <div>Search</div>360 </div>361 <div class="search-right">362 <!-- Mic -->363 <svg width="44" height="44" viewBox="0 0 44 44">364 <rect x="16" y="10" width="12" height="18" rx="6" fill="#4285F4"></rect>365 <path d="M12 22c0 6 5 10 10 10s10-4 10-10" stroke="#34A853" stroke-width="3" fill="none"></path>366 <rect x="20" y="30" width="4" height="8" fill="#EA4335"></rect>367 </svg>368 <!-- Lens/Camera -->369 <svg width="52" height="44" viewBox="0 0 52 44">370 <rect x="8" y="10" width="36" height="24" rx="6" fill="#2b2b2b" stroke="#5f6368" stroke-width="2"></rect>371 <circle cx="26" cy="22" r="8" fill="#1a73e8"></circle>372 <circle cx="26" cy="22" r="4" fill="#a1c8ff"></circle>373 <rect x="12" y="6" width="10" height="6" rx="2" fill="#FBBC05"></rect>374 <rect x="30" y="6" width="10" height="6" rx="2" fill="#34A853"></rect>375 <rect x="12" y="32" width="10" height="6" rx="2" fill="#EA4335"></rect>376 <rect x="30" y="32" width="10" height="6" rx="2" fill="#4285F4"></rect>377 </svg>378 </div>379 </div>380 381 <!-- Gesture handle -->382 <div class="gesture"></div>383</div>384</body>385</html>