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.0">6<title>Android Home Mock</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13 }14 #render-target {15 position: relative;16 overflow: hidden;17 width: 1080px;18 height: 2400px;19 background: linear-gradient(180deg, #8aa0ad 0%, #b9b2ac 18%, #8f7769 38%, #5e4d46 60%, #4a4a4a 100%);20 }21 22 /* subtle misty top and bottom overlays to mimic wallpaper atmosphere */23 .mist-top {24 position: absolute;25 top: -120px;26 left: -120px;27 width: 1400px;28 height: 520px;29 background: radial-gradient(ellipse at 40% 50%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.15) 35%, rgba(255,255,255,0) 70%);30 pointer-events: none;31 }32 .mist-bottom {33 position: absolute;34 bottom: -120px;35 left: -100px;36 width: 1400px;37 height: 700px;38 background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 60%);39 pointer-events: none;40 }41 42 /* status bar */43 .status-bar {44 position: absolute;45 top: 0;46 left: 0;47 width: 100%;48 height: 100px;49 padding: 28px 28px 0 28px;50 color: #fff;51 display: flex;52 align-items: center;53 justify-content: space-between;54 box-sizing: border-box;55 font-weight: 500;56 }57 .status-left {58 display: flex;59 align-items: center;60 gap: 16px;61 font-size: 34px;62 letter-spacing: 0.5px;63 }64 .status-icons-left {65 display: flex;66 align-items: center;67 gap: 14px;68 }69 .status-right {70 display: flex;71 align-items: center;72 gap: 20px;73 }74 .icon-small {75 width: 30px;76 height: 30px;77 fill: #ffffff;78 opacity: 0.95;79 }80 81 /* date + weather widget */82 .date-widget {83 position: absolute;84 top: 240px;85 left: 64px;86 color: #ffffff;87 }88 .date-widget .date {89 font-size: 64px;90 font-weight: 600;91 text-shadow: 0 2px 8px rgba(0,0,0,0.25);92 }93 .date-widget .weather {94 margin-top: 18px;95 display: flex;96 align-items: center;97 gap: 18px;98 font-size: 40px;99 font-weight: 500;100 text-shadow: 0 2px 8px rgba(0,0,0,0.25);101 }102 .sun {103 width: 36px;104 height: 36px;105 background: #FFD54F;106 border-radius: 50%;107 box-shadow: 0 0 0 4px rgba(255,213,79,0.25);108 }109 110 /* app grid */111 .apps {112 position: absolute;113 left: 0;114 width: 100%;115 top: 1280px;116 }117 .row {118 width: 100%;119 display: flex;120 justify-content: space-around;121 margin: 0 auto;122 margin-bottom: 120px;123 padding: 0 40px;124 box-sizing: border-box;125 }126 .app {127 width: 220px;128 text-align: center;129 color: #ffffff;130 text-shadow: 0 2px 8px rgba(0,0,0,0.35);131 }132 .app-icon {133 width: 160px;134 height: 160px;135 margin: 0 auto 22px;136 border-radius: 50%;137 background: #ffffff;138 box-shadow: 0 12px 24px rgba(0,0,0,0.35);139 display: flex;140 align-items: center;141 justify-content: center;142 }143 .app svg {144 width: 104px;145 height: 104px;146 }147 .app-label {148 font-size: 36px;149 font-weight: 500;150 }151 152 /* search bar dock */153 .search-dock {154 position: absolute;155 left: 60px;156 right: 60px;157 bottom: 200px;158 height: 120px;159 background: rgba(56,46,43,0.95);160 border-radius: 60px;161 display: flex;162 align-items: center;163 justify-content: space-between;164 padding: 0 34px;165 color: #fff;166 box-shadow: 0 8px 22px rgba(0,0,0,0.45);167 }168 .search-left {169 display: flex;170 align-items: center;171 gap: 24px;172 }173 .g-logo {174 width: 62px;175 height: 62px;176 border-radius: 50%;177 background: #ffffff;178 display: grid;179 place-items: center;180 }181 .search-placeholder {182 color: rgba(255,255,255,0.85);183 font-size: 38px;184 }185 .dock-actions {186 display: flex;187 align-items: center;188 gap: 26px;189 }190 .dock-icon {191 width: 58px;192 height: 58px;193 }194 195 /* gesture bar */196 .gesture {197 position: absolute;198 bottom: 60px;199 left: 50%;200 transform: translateX(-50%);201 width: 300px;202 height: 12px;203 border-radius: 6px;204 background: rgba(255,255,255,0.95);205 }206</style>207</head>208<body>209<div id="render-target">210 <div class="mist-top"></div>211 <div class="mist-bottom"></div>212 213 <!-- Status Bar -->214 <div class="status-bar">215 <div class="status-left">216 <div>1:40</div>217 <div class="status-icons-left">218 <!-- tiny dots/indicators -->219 <svg class="icon-small" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg>220 <svg class="icon-small" viewBox="0 0 24 24"><path d="M5 12h14M12 5v14" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>221 <svg class="icon-small" viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"/><circle cx="20" cy="12" r="2"/><circle cx="4" cy="12" r="2"/></svg>222 </div>223 </div>224 <div class="status-right">225 <!-- WiFi -->226 <svg class="icon-small" viewBox="0 0 24 24">227 <path d="M12 18.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM4 10a12 12 0 0 1 16 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>228 <path d="M7 13a8 8 0 0 1 10 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>229 </svg>230 <!-- Battery -->231 <svg class="icon-small" viewBox="0 0 28 24">232 <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>233 <rect x="4" y="8" width="14" height="8" fill="#ffffff"/>234 <rect x="22" y="9" width="3" height="6" fill="#ffffff"/>235 </svg>236 </div>237 </div>238 239 <!-- Date & Weather -->240 <div class="date-widget">241 <div class="date">Tue, Nov 7</div>242 <div class="weather">243 <div class="sun"></div>244 <div>29°C</div>245 </div>246 </div>247 248 <!-- Apps Grid -->249 <div class="apps">250 <div class="row">251 <!-- Play Store -->252 <div class="app">253 <div class="app-icon">254 <svg viewBox="0 0 100 100">255 <polygon points="20,12 88,50 20,88" fill="#34A853"/>256 <polygon points="20,12 46,38 36,48 10,28" fill="#4285F4"/>257 <polygon points="20,88 46,62 36,52 10,72" fill="#FBBC05"/>258 <polygon points="36,48 46,38 72,54 46,70 36,60" fill="#EA4335"/>259 </svg>260 </div>261 <div class="app-label">Play Store</div>262 </div>263 <!-- Gmail -->264 <div class="app">265 <div class="app-icon">266 <svg viewBox="0 0 100 100">267 <rect x="14" y="26" width="72" height="48" rx="8" ry="8" fill="#fff" stroke="#DB4437" stroke-width="6"/>268 <path d="M14 32 L50 56 L86 32" fill="none" stroke="#DB4437" stroke-width="10" stroke-linejoin="round"/>269 <path d="M22 70 V36 L50 56 L78 36 V70" fill="none" stroke="#0F9D58" stroke-width="6"/>270 </svg>271 </div>272 <div class="app-label">Gmail</div>273 </div>274 <!-- Photos -->275 <div class="app">276 <div class="app-icon">277 <svg viewBox="0 0 100 100">278 <path d="M50 10a20 20 0 0 1 20 20H50Z" fill="#EA4335"/>279 <path d="M90 50a20 20 0 0 1-20 20V50Z" fill="#4285F4"/>280 <path d="M50 90a20 20 0 0 1-20-20H50Z" fill="#34A853"/>281 <path d="M10 50a20 20 0 0 1 20-20v20Z" fill="#FBBC05"/>282 <circle cx="50" cy="50" r="10" fill="#ffffff"/>283 </svg>284 </div>285 <div class="app-label">Photos</div>286 </div>287 <!-- YouTube -->288 <div class="app">289 <div class="app-icon">290 <svg viewBox="0 0 100 100">291 <rect x="16" y="30" width="68" height="40" rx="12" ry="12" fill="#FF0000"/>292 <polygon points="44,36 70,50 44,64" fill="#ffffff"/>293 </svg>294 </div>295 <div class="app-label">YouTube</div>296 </div>297 </div>298 299 <div class="row" style="margin-bottom: 80px;">300 <!-- Phone -->301 <div class="app">302 <div class="app-icon">303 <svg viewBox="0 0 100 100">304 <path d="M36 24c-4 0-8 3-8 7 0 26 21 47 47 47 4 0 7-4 7-8v-9c0-3-2-5-5-5-4 0-8 1-12 3-8-4-15-11-19-19 2-4 3-8 3-12 0-3-2-5-5-5h-8z" fill="#1976D2"/>305 </svg>306 </div>307 <div class="app-label">Phone</div>308 </div>309 <!-- Messages -->310 <div class="app">311 <div class="app-icon">312 <svg viewBox="0 0 100 100">313 <rect x="14" y="20" width="72" height="52" rx="12" ry="12" fill="#1E88E5"/>314 <path d="M34 72 l10-12h42" stroke="#1E88E5" stroke-width="10" fill="#1E88E5"/>315 <rect x="28" y="36" width="44" height="10" rx="5" fill="#ffffff"/>316 </svg>317 </div>318 <div class="app-label">Messages</div>319 </div>320 <!-- Chrome -->321 <div class="app">322 <div class="app-icon">323 <svg viewBox="0 0 100 100">324 <circle cx="50" cy="50" r="44" fill="#DB4437"/>325 <path d="M50 50 L92 50 A42 42 0 0 1 22 86 Z" fill="#0F9D58"/>326 <path d="M50 50 L22 86 A42 42 0 0 1 8 28 Z" fill="#F4B400"/>327 <circle cx="50" cy="50" r="22" fill="#4285F4" stroke="#ffffff" stroke-width="4"/>328 </svg>329 </div>330 <div class="app-label">Chrome</div>331 </div>332 <!-- Camera -->333 <div class="app">334 <div class="app-icon">335 <svg viewBox="0 0 100 100">336 <rect x="16" y="30" width="68" height="44" rx="10" ry="10" fill="#9E9E9E"/>337 <rect x="26" y="22" width="18" height="12" rx="4" ry="4" fill="#BDBDBD"/>338 <circle cx="50" cy="52" r="14" fill="#2962FF"/>339 <circle cx="50" cy="52" r="8" fill="#90CAF9"/>340 </svg>341 </div>342 <div class="app-label">Camera</div>343 </div>344 </div>345 </div>346 347 <!-- Search Dock -->348 <div class="search-dock">349 <div class="search-left">350 <div class="g-logo">351 <svg viewBox="0 0 24 24" width="28" height="28">352 <path fill="#EA4335" d="M12 10.2h10c.1.5.1 1 .1 1.6 0 5.6-3.8 9.6-9.9 9.6A10.9 10.9 0 0 1 1 12 10.9 10.9 0 0 1 12 1c2.9 0 5.3 1.1 7.1 2.9l-2.9 2.9A6.5 6.5 0 0 0 12 4.5c-4.1 0-7.5 3.4-7.5 7.5s3.4 7.5 7.5 7.5c3.8 0 6.2-2.1 6.6-5.1H12v-4.2z"/>353 </svg>354 </div>355 <div class="search-placeholder">Search…</div>356 </div>357 <div class="dock-actions">358 <!-- Mic -->359 <svg class="dock-icon" viewBox="0 0 24 24">360 <path d="M12 15a3 3 0 0 0 3-3V7a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3z" fill="#00E676"/>361 <path d="M5 12a7 7 0 0 0 14 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>362 <path d="M12 19v3" stroke="#fff" stroke-width="2" stroke-linecap="round"/>363 </svg>364 <!-- Lens camera -->365 <svg class="dock-icon" viewBox="0 0 24 24">366 <rect x="3" y="6" width="18" height="12" rx="3" ry="3" fill="#FF5722"/>367 <circle cx="12" cy="12" r="4" fill="#FFC107"/>368 <circle cx="12" cy="12" r="2" fill="#4CAF50"/>369 </svg>370 </div>371 </div>372 373 <!-- Gesture bar -->374 <div class="gesture"></div>375</div>376</body>377</html>