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 { 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:15 radial-gradient(2000px 1400px at 40% 35%, #0e1216 0%, #0a0d10 40%, #040607 100%),16 repeating-linear-gradient(120deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 2px, rgba(0,0,0,0) 6px);17 color: #fff;18 }19 20 /* Status bar */21 .status-bar {22 position: absolute;23 top: 0;24 left: 0;25 width: 100%;26 height: 100px;27 padding: 24px 32px;28 display: flex;29 align-items: center;30 justify-content: space-between;31 font-size: 34px;32 color: #fff;33 letter-spacing: 0.5px;34 }35 .sb-left { display: flex; align-items: center; gap: 22px; }36 .sb-right { display: flex; align-items: center; gap: 22px; }37 38 /* Date & weather */39 .date-block {40 position: absolute;41 left: 72px;42 top: 540px;43 }44 .date-block h1 {45 margin: 0;46 font-size: 72px;47 font-weight: 500;48 }49 .weather {50 margin-top: 28px;51 display: flex;52 align-items: center;53 gap: 18px;54 font-size: 40px;55 color: rgba(255,255,255,0.92);56 }57 58 /* App grid */59 .app-row {60 position: absolute;61 left: 0;62 width: 100%;63 display: flex;64 justify-content: space-around;65 padding: 0 40px;66 }67 .row-1 { top: 1520px; }68 .row-2 { top: 1780px; }69 .app {70 width: 200px;71 text-align: center;72 color: #eaeaea;73 font-size: 38px;74 margin: 0 6px;75 }76 .app .icon {77 width: 160px;78 height: 160px;79 border-radius: 50%;80 background: #ffffff;81 box-shadow: 0 8px 16px rgba(0,0,0,0.35);82 margin: 0 auto 22px;83 position: relative;84 display: flex;85 align-items: center;86 justify-content: center;87 }88 89 /* Dock */90 .dock {91 position: absolute;92 left: 60px;93 right: 60px;94 bottom: 160px;95 height: 150px;96 background: rgba(40,40,40,0.95);97 border-radius: 80px;98 display: flex;99 align-items: center;100 padding: 0 40px;101 gap: 28px;102 box-shadow: 0 10px 24px rgba(0,0,0,0.5);103 }104 .dock .g-logo {105 width: 76px;106 height: 76px;107 border-radius: 38px;108 background: #1f1f1f;109 display: flex;110 align-items: center;111 justify-content: center;112 font-weight: 700;113 color: #4285F4;114 font-size: 44px;115 border: 1px solid rgba(255,255,255,0.08);116 }117 .dock .spacer {118 flex: 1;119 color: #bdbdbd;120 font-size: 42px;121 }122 .dock .dock-icon {123 width: 84px;124 height: 84px;125 border-radius: 42px;126 background: #2a2a2a;127 display: flex;128 align-items: center;129 justify-content: center;130 border: 1px solid rgba(255,255,255,0.1);131 }132 133 /* Temporary bubble */134 .bubble {135 position: absolute;136 left: 50%;137 transform: translateX(-50%);138 bottom: 360px;139 height: 120px;140 min-width: 420px;141 background: rgba(48,48,48,0.95);142 border-radius: 60px;143 display: flex;144 align-items: center;145 padding: 0 28px;146 gap: 22px;147 color: #e9e9e9;148 font-size: 40px;149 box-shadow: 0 12px 24px rgba(0,0,0,0.45);150 }151 .bubble .avatar {152 width: 84px;153 height: 84px;154 border-radius: 42px;155 background: #f4b000;156 display: flex;157 align-items: center;158 justify-content: center;159 color: #1b1b1b;160 font-weight: 700;161 font-size: 40px;162 }163 164 /* Home indicator */165 .home-indicator {166 position: absolute;167 left: 50%;168 transform: translateX(-50%);169 bottom: 60px;170 width: 280px;171 height: 10px;172 border-radius: 6px;173 background: rgba(255,255,255,0.9);174 }175 176 /* Simple icon styling helpers */177 svg { display: block; }178 .thin { stroke: #fff; stroke-width: 3; fill: none; }179 .white-fill { fill: #fff; }180</style>181</head>182<body>183<div id="render-target">184 185 <!-- Status Bar -->186 <div class="status-bar">187 <div class="sb-left">188 <div style="font-weight:500;">2:29</div>189 <!-- Search icon -->190 <svg width="34" height="34" viewBox="0 0 24 24">191 <circle cx="10" cy="10" r="6" stroke="#fff" stroke-width="2" fill="none"></circle>192 <line x1="14.5" y1="14.5" x2="21" y2="21" stroke="#fff" stroke-width="2" stroke-linecap="round"></line>193 </svg>194 <!-- Small icon (placeholder) -->195 <svg width="34" height="34" viewBox="0 0 24 24">196 <rect x="6" y="4" width="12" height="16" rx="2" stroke="#fff" stroke-width="2" fill="none"></rect>197 <line x1="9" y1="9" x2="15" y2="9" stroke="#fff" stroke-width="2"></line>198 </svg>199 <!-- Tiny dot -->200 <svg width="10" height="10" viewBox="0 0 10 10">201 <circle cx="5" cy="5" r="2" fill="#fff"></circle>202 </svg>203 </div>204 <div class="sb-right">205 <!-- DND icon -->206 <svg width="34" height="34" viewBox="0 0 24 24">207 <circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="2" fill="none"></circle>208 <line x1="7" y1="12" x2="17" y2="12" stroke="#fff" stroke-width="2" stroke-linecap="round"></line>209 </svg>210 <!-- Wi-Fi -->211 <svg width="34" height="34" viewBox="0 0 24 24">212 <path d="M3 9c4.5-4.5 13.5-4.5 18 0M6 12c3.1-3.1 8.9-3.1 12 0M9 15c1.7-1.7 4.3-1.7 6 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>213 <circle cx="12" cy="18" r="1.5" fill="#fff"></circle>214 </svg>215 <!-- Battery -->216 <svg width="44" height="34" viewBox="0 0 28 18">217 <rect x="1" y="3" width="22" height="12" rx="2" stroke="#fff" stroke-width="2" fill="none"></rect>218 <rect x="23" y="6" width="3" height="6" fill="#fff"></rect>219 <rect x="3" y="5" width="14" height="8" fill="#fff"></rect>220 </svg>221 </div>222 </div>223 224 <!-- Date and Weather -->225 <div class="date-block">226 <h1>Fri, Nov 24</h1>227 <div class="weather">228 <!-- Weather icon (waves) -->229 <svg width="60" height="40" viewBox="0 0 60 40">230 <path d="M5 12c6 6 14-6 20 0s14 6 20 0" stroke="#cfd8dc" stroke-width="3" fill="none" stroke-linecap="round"></path>231 <path d="M5 22c6 6 14-6 20 0s14 6 20 0" stroke="#cfd8dc" stroke-width="3" fill="none" stroke-linecap="round"></path>232 </svg>233 <span>25°C</span>234 </div>235 </div>236 237 <!-- First Row of Apps -->238 <div class="app-row row-1">239 <!-- Play Store -->240 <div class="app">241 <div class="icon">242 <svg width="120" height="120" viewBox="0 0 120 120">243 <polygon points="30,20 90,60 30,100" fill="#34A853"></polygon>244 <polygon points="30,20 55,40 30,60" fill="#4285F4"></polygon>245 <polygon points="30,60 55,80 30,100" fill="#EA4335"></polygon>246 <polygon points="55,40 90,60 55,80" fill="#FBBC04"></polygon>247 </svg>248 </div>249 <div>Play Store</div>250 </div>251 252 <!-- Gmail -->253 <div class="app">254 <div class="icon">255 <svg width="120" height="120" viewBox="0 0 120 120">256 <rect x="20" y="30" width="80" height="60" rx="10" fill="#fff" stroke="#cfcfcf"></rect>257 <path d="M20 30 L60 60 L100 30" stroke="#EA4335" stroke-width="10" fill="none"></path>258 <path d="M30 30 L60 55 L90 30" stroke="#34A853" stroke-width="10" fill="none"></path>259 </svg>260 </div>261 <div>Gmail</div>262 </div>263 264 <!-- Photos -->265 <div class="app">266 <div class="icon">267 <svg width="120" height="120" viewBox="0 0 120 120">268 <circle cx="60" cy="60" r="14" fill="#fff"></circle>269 <path d="M60 60 L60 20 A40 40 0 0 1 100 60 Z" fill="#FBBC04"></path>270 <path d="M60 60 L100 60 A40 40 0 0 1 60 100 Z" fill="#34A853"></path>271 <path d="M60 60 L60 100 A40 40 0 0 1 20 60 Z" fill="#4285F4"></path>272 <path d="M60 60 L20 60 A40 40 0 0 1 60 20 Z" fill="#EA4335"></path>273 </svg>274 </div>275 <div>Photos</div>276 </div>277 278 <!-- YouTube -->279 <div class="app">280 <div class="icon">281 <svg width="120" height="120" viewBox="0 0 120 120">282 <rect x="20" y="35" width="80" height="50" rx="14" fill="#FF0000"></rect>283 <polygon points="54,45 54,75 84,60" fill="#fff"></polygon>284 </svg>285 </div>286 <div>YouTube</div>287 </div>288 </div>289 290 <!-- Second Row of Apps -->291 <div class="app-row row-2">292 <!-- Phone -->293 <div class="app">294 <div class="icon">295 <svg width="120" height="120" viewBox="0 0 120 120">296 <path d="M40 35c10 20 20 30 40 45l-12 12c-3 2-7 2-10-1-12-10-22-20-32-36-2-3-1-7 1-10l13-10z" fill="#34A853"></path>297 </svg>298 </div>299 <div>Phone</div>300 </div>301 302 <!-- Messages -->303 <div class="app">304 <div class="icon">305 <svg width="120" height="120" viewBox="0 0 120 120">306 <rect x="22" y="30" width="76" height="50" rx="12" fill="#4285F4"></rect>307 <polygon points="36,80 56,80 46,96" fill="#4285F4"></polygon>308 </svg>309 </div>310 <div>Messages</div>311 </div>312 313 <!-- Chrome -->314 <div class="app">315 <div class="icon">316 <svg width="120" height="120" viewBox="0 0 120 120">317 <circle cx="60" cy="60" r="40" fill="#fff"></circle>318 <path d="M60 60 L95 60 A35 35 0 0 0 45 25 L60 60" fill="#EA4335"></path>319 <path d="M60 60 L45 25 A35 35 0 0 0 25 75 L60 60" fill="#FBBC04"></path>320 <path d="M60 60 L25 75 A35 35 0 0 0 95 60 L60 60" fill="#34A853"></path>321 <circle cx="60" cy="60" r="16" fill="#4285F4"></circle>322 </svg>323 </div>324 <div>Chrome</div>325 </div>326 327 <!-- Camera -->328 <div class="app">329 <div class="icon">330 <svg width="120" height="120" viewBox="0 0 120 120">331 <rect x="24" y="40" width="72" height="44" rx="12" fill="#C0C6CF"></rect>332 <rect x="32" y="48" width="56" height="28" rx="10" fill="#9AA4AE"></rect>333 <circle cx="60" cy="62" r="12" fill="#2A5FFF"></circle>334 <rect x="40" y="30" width="16" height="12" rx="4" fill="#808893"></rect>335 </svg>336 </div>337 <div>Camera</div>338 </div>339 </div>340 341 <!-- Exporting bubble -->342 <div class="bubble">343 <div class="avatar">•</div>344 <div>Exporting...</div>345 </div>346 347 <!-- Dock -->348 <div class="dock">349 <div class="g-logo">G</div>350 <div class="spacer"></div>351 <div class="dock-icon">352 <!-- Mic -->353 <svg width="44" height="44" viewBox="0 0 24 24">354 <rect x="8" y="5" width="8" height="10" rx="4" fill="#ff5555"></rect>355 <path d="M6 12c0 4 3 6 6 6s6-2 6-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>356 <line x1="12" y1="18" x2="12" y2="22" stroke="#fff" stroke-width="2"></line>357 </svg>358 </div>359 <div class="dock-icon">360 <!-- Lens/Camera -->361 <svg width="44" height="44" viewBox="0 0 24 24">362 <rect x="4" y="6" width="16" height="12" rx="6" stroke="#fff" stroke-width="2" fill="none"></rect>363 <circle cx="12" cy="12" r="4" fill="#4caf50"></circle>364 </svg>365 </div>366 </div>367 368 <!-- Home indicator -->369 <div class="home-indicator"></div>370 371</div>372</body>373</html>