GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>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: Roboto, Arial, sans-serif;12 }13 #render-target {14 position: relative;15 width: 1080px;16 height: 2400px;17 overflow: hidden;18 background:19 radial-gradient(1200px 800px at 20% 10%, #32373b 0%, #1f2226 50%, #14171a 100%);20 }21 22 /* Subtle feather-like texture using repeating linear gradients */23 #render-target:before, #render-target:after {24 content: "";25 position: absolute;26 inset: 0;27 background:28 repeating-linear-gradient(120deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 7px),29 repeating-linear-gradient(60deg, rgba(0,0,0,0.15) 0 3px, transparent 3px 10px);30 mix-blend-mode: overlay;31 opacity: 0.25;32 pointer-events: none;33 }34 35 /* Status bar */36 .status-bar {37 position: absolute;38 top: 18px;39 left: 24px;40 right: 24px;41 height: 60px;42 color: #fff;43 display: flex;44 align-items: center;45 font-weight: 500;46 }47 .status-left {48 display: flex;49 align-items: center;50 gap: 20px;51 font-size: 34px;52 }53 .status-icons {54 display: flex;55 align-items: center;56 gap: 14px;57 margin-left: 20px;58 opacity: 0.9;59 }60 .status-right {61 margin-left: auto;62 display: flex;63 align-items: center;64 gap: 20px;65 }66 .mini-icon {67 width: 28px;68 height: 28px;69 border-radius: 6px;70 background: rgba(255,255,255,0.15);71 }72 .wifi, .battery {73 width: 34px;74 height: 34px;75 }76 77 /* Date & weather */78 .date-weather {79 position: absolute;80 top: 180px;81 left: 60px;82 color: #ffffff;83 }84 .date-weather .date {85 font-size: 72px;86 font-weight: 500;87 letter-spacing: 0.2px;88 }89 .date-weather .weather {90 margin-top: 18px;91 display: flex;92 align-items: center;93 gap: 14px;94 font-size: 34px;95 opacity: 0.95;96 }97 .weather-icon {98 width: 64px;99 height: 40px;100 position: relative;101 }102 .weather-icon .sun {103 position: absolute;104 width: 24px;105 height: 24px;106 background: #FFC107;107 border-radius: 50%;108 left: 0;109 top: 0;110 box-shadow: 0 0 0 4px rgba(255,193,7,0.2);111 }112 .weather-icon .cloud {113 position: absolute;114 right: 0;115 bottom: -6px;116 width: 56px;117 height: 30px;118 background: #eeeeee;119 border-radius: 20px;120 box-shadow: 0 -10px 0 0 #eeeeee inset;121 }122 123 /* App grid */124 .app-row {125 position: absolute;126 left: 60px;127 right: 60px;128 display: grid;129 grid-template-columns: repeat(5, 1fr);130 column-gap: 40px;131 row-gap: 40px;132 justify-items: center;133 }134 .row-1 { top: 1480px; }135 .row-2 { top: 1720px; }136 137 .app {138 width: 160px;139 text-align: center;140 color: #ffffff;141 }142 .app .icon {143 width: 150px;144 height: 150px;145 background: #ffffff;146 border-radius: 50%;147 box-shadow: 0 10px 18px rgba(0,0,0,0.35);148 display: flex;149 align-items: center;150 justify-content: center;151 margin: 0 auto 22px;152 }153 .app .label {154 font-size: 34px;155 opacity: 0.95;156 }157 158 /* Dock search bar */159 .search-bar {160 position: absolute;161 left: 60px;162 right: 60px;163 bottom: 170px;164 height: 130px;165 background: #2e3236;166 border-radius: 65px;167 box-shadow: 0 18px 28px rgba(0,0,0,0.45);168 display: flex;169 align-items: center;170 padding: 0 36px;171 color: #fff;172 }173 .search-left {174 display: flex;175 align-items: center;176 gap: 18px;177 font-size: 36px;178 opacity: 0.9;179 }180 .search-right {181 margin-left: auto;182 display: flex;183 align-items: center;184 gap: 26px;185 }186 .pill-g {187 width: 54px;188 height: 54px;189 border-radius: 50%;190 background: #ffffff;191 position: relative;192 overflow: hidden;193 }194 .pill-g span { position:absolute; }195 .pill-g .red { background:#EA4335; left:0; top:0; width:50%; height:50%; }196 .pill-g .blue { background:#4285F4; right:0; top:0; width:50%; height:50%; }197 .pill-g .green { background:#34A853; left:0; bottom:0; width:50%; height:50%; }198 .pill-g .yellow { background:#FBBC05; right:0; bottom:0; width:50%; height:50%; }199 200 /* Gesture handle */201 .gesture {202 position: absolute;203 bottom: 64px;204 left: 390px;205 width: 300px;206 height: 12px;207 background: #ffffff;208 border-radius: 8px;209 opacity: 0.85;210 }211 212 /* Simple SVG helper style */213 svg { display: block; }214</style>215</head>216<body>217<div id="render-target">218 219 <!-- Status Bar -->220 <div class="status-bar">221 <div class="status-left">222 <div class="time">12:16</div>223 <div class="status-icons">224 <div class="mini-icon"></div>225 <div class="mini-icon"></div>226 <div class="mini-icon"></div>227 <div class="mini-icon"></div>228 <div style="width:8px;height:8px;border-radius:50%;background:#fff;opacity:0.9;"></div>229 </div>230 </div>231 <div class="status-right">232 <!-- Wi-Fi icon -->233 <svg class="wifi" viewBox="0 0 24 24" fill="#ffffff">234 <path d="M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm-6.5-7.5a10 10 0 0 1 13 0l-1.8 1.8a7.5 7.5 0 0 0-9.4 0L5.5 12.5ZM2 9a16 16 0 0 1 20 0l-2 2a13 13 0 0 0-16 0L2 9Z"/>235 </svg>236 <!-- Battery icon -->237 <svg class="battery" viewBox="0 0 28 28" fill="#ffffff">238 <rect x="2" y="6" width="20" height="12" rx="2" ry="2" stroke="#ffffff" stroke-width="2" fill="none"/>239 <rect x="4" y="8" width="12" height="8" fill="#ffffff"/>240 <rect x="22" y="9" width="3" height="6" rx="1"/>241 </svg>242 </div>243 </div>244 245 <!-- Date & Weather -->246 <div class="date-weather">247 <div class="date">Wed, Aug 9</div>248 <div class="weather">249 <div class="weather-icon">250 <div class="sun"></div>251 <div class="cloud"></div>252 </div>253 <div>32°C</div>254 </div>255 </div>256 257 <!-- First Row of Apps -->258 <div class="app-row row-1">259 <!-- Google -->260 <div class="app">261 <div class="icon">262 <svg viewBox="0 0 100 100" width="84" height="84">263 <circle cx="50" cy="50" r="40" fill="none" stroke="#4285F4" stroke-width="10"/>264 <path d="M50 90 A40 40 0 0 1 20 70" stroke="#34A853" stroke-width="10" fill="none"/>265 <path d="M20 30 A40 40 0 0 1 50 10" stroke="#FBBC05" stroke-width="10" fill="none"/>266 <path d="M80 30 A40 40 0 0 1 80 70" stroke="#EA4335" stroke-width="10" fill="none"/>267 </svg>268 </div>269 <div class="label">Google</div>270 </div>271 272 <!-- Play Store -->273 <div class="app">274 <div class="icon">275 <svg viewBox="0 0 100 100" width="86" height="86">276 <polygon points="20,20 80,50 20,80" fill="#34A853"/>277 <polygon points="20,20 48,48 20,80" fill="#4285F4"/>278 <polygon points="48,48 80,50 20,20" fill="#FBBC05"/>279 <polygon points="48,52 80,50 20,80" fill="#EA4335"/>280 </svg>281 </div>282 <div class="label">Play Store</div>283 </div>284 285 <!-- Gmail -->286 <div class="app">287 <div class="icon">288 <svg viewBox="0 0 100 100" width="86" height="86">289 <rect x="18" y="28" width="64" height="44" rx="8" ry="8" fill="#ffffff" stroke="#9E9E9E" stroke-width="4"/>290 <path d="M18 36 L50 56 L82 36" stroke="#EA4335" stroke-width="10" fill="none"/>291 <path d="M18 36 L50 56 L82 36" stroke="#FBBC05" stroke-width="6" opacity="0.6"/>292 </svg>293 </div>294 <div class="label">Gmail</div>295 </div>296 297 <!-- Photos -->298 <div class="app">299 <div class="icon">300 <svg viewBox="0 0 100 100" width="86" height="86">301 <circle cx="50" cy="30" r="18" fill="#EA4335"/>302 <circle cx="70" cy="50" r="18" fill="#FBBC05"/>303 <circle cx="50" cy="70" r="18" fill="#34A853"/>304 <circle cx="30" cy="50" r="18" fill="#4285F4"/>305 </svg>306 </div>307 <div class="label">Photos</div>308 </div>309 310 <!-- YouTube -->311 <div class="app">312 <div class="icon">313 <svg viewBox="0 0 100 100" width="100" height="68">314 <rect x="6" y="20" width="88" height="60" rx="16" fill="#EA4335"/>315 <polygon points="42,34 42,66 70,50" fill="#ffffff"/>316 </svg>317 </div>318 <div class="label">YouTube</div>319 </div>320 </div>321 322 <!-- Second Row (Dock Apps) -->323 <div class="app-row row-2">324 <!-- Phone -->325 <div class="app">326 <div class="icon">327 <svg viewBox="0 0 100 100" width="80" height="80">328 <path d="M30 26c6 0 10 6 10 10 0 5-3 8-3 10 4 6 13 15 19 19 2-1 5-3 10-3 4 0 10 4 10 10-1 6-9 8-12 8C47 80 26 59 22 46c0-3 2-11 8-12z" fill="#4285F4"/>329 </svg>330 </div>331 <div class="label">Phone</div>332 </div>333 334 <!-- Messages -->335 <div class="app">336 <div class="icon">337 <svg viewBox="0 0 100 100" width="86" height="86">338 <rect x="16" y="20" width="68" height="50" rx="12" fill="#3F83F8"/>339 <rect x="36" y="58" width="24" height="16" rx="4" fill="#2C5CC5"/>340 </svg>341 </div>342 <div class="label">Messages</div>343 </div>344 345 <!-- Chrome -->346 <div class="app">347 <div class="icon">348 <svg viewBox="0 0 100 100" width="86" height="86">349 <circle cx="50" cy="50" r="40" fill="#F44336"/>350 <path d="M50 10 A40 40 0 0 1 90 50 L60 50 Z" fill="#FFEB3B"/>351 <path d="M90 50 A40 40 0 0 1 50 90 L60 50 Z" fill="#4CAF50"/>352 <circle cx="50" cy="50" r="18" fill="#2196F3" stroke="#ffffff" stroke-width="6"/>353 </svg>354 </div>355 <div class="label">Chrome</div>356 </div>357 358 <!-- Camera -->359 <div class="app">360 <div class="icon">361 <svg viewBox="0 0 100 100" width="90" height="90">362 <rect x="16" y="26" width="68" height="48" rx="10" fill="#9E9E9E"/>363 <rect x="28" y="20" width="20" height="10" rx="4" fill="#757575"/>364 <circle cx="50" cy="50" r="16" fill="#607D8B"/>365 <circle cx="50" cy="50" r="8" fill="#3F51B5"/>366 </svg>367 </div>368 <div class="label">Camera</div>369 </div>370 371 <!-- Empty slot to match spacing -->372 <div class="app" style="opacity:0;"></div>373 </div>374 375 <!-- Search bar widget -->376 <div class="search-bar">377 <div class="search-left">378 <div class="pill-g">379 <span class="red"></span>380 <span class="blue"></span>381 <span class="green"></span>382 <span class="yellow"></span>383 </div>384 <div>Search</div>385 </div>386 <div class="search-right">387 <!-- Mic icon -->388 <svg viewBox="0 0 24 24" width="44" height="44" fill="#4CAF50">389 <path d="M12 3a4 4 0 0 1 4 4v6a4 4 0 0 1-8 0V7a4 4 0 0 1 4-4Zm6 7v2a6 6 0 0 1-12 0V10H4v2a8 8 0 0 0 7 7.9V22h2v-2.1A8 8 0 0 0 20 12v-2h-2Z"/>390 </svg>391 <!-- Lens icon (rounded camera) -->392 <svg viewBox="0 0 24 24" width="44" height="44" fill="#EA4335">393 <rect x="3" y="7" width="18" height="12" rx="3"/>394 <rect x="8" y="4" width="8" height="4" rx="2" fill="#EA4335"/>395 <circle cx="12" cy="13" r="4" fill="#ffffff"/>396 </svg>397 </div>398 </div>399 400 <!-- Gesture handle -->401 <div class="gesture"></div>402 403</div>404</body>405</html>