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 Screen Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 font-family: Arial, Helvetica, sans-serif;15 color: #FFFFFF;16 }17 18 /* Wallpaper placeholder */19 .wallpaper {20 position: absolute;21 inset: 0;22 background: #E0E0E0;23 border: 1px solid #BDBDBD;24 display: flex;25 align-items: center;26 justify-content: center;27 color: #757575;28 font-size: 28px;29 }30 .wallpaper::after {31 content: "";32 position: absolute;33 inset: 0;34 background: linear-gradient(to bottom, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.10) 40%, rgba(0,0,0,0.25) 100%);35 pointer-events: none;36 }37 38 /* Status bar */39 .status-bar {40 position: absolute;41 top: 22px;42 left: 30px;43 right: 30px;44 height: 64px;45 display: flex;46 align-items: center;47 justify-content: space-between;48 z-index: 2;49 font-weight: 600;50 }51 .status-time {52 font-size: 44px;53 letter-spacing: 0.5px;54 text-shadow: 0 2px 6px rgba(0,0,0,0.5);55 }56 .status-right {57 display: flex;58 gap: 26px;59 align-items: center;60 }61 .icon {62 width: 36px;63 height: 36px;64 }65 66 /* Date + weather */67 .date-block {68 position: absolute;69 top: 180px;70 left: 60px;71 z-index: 2;72 text-shadow: 0 3px 10px rgba(0,0,0,0.6);73 }74 .date-text {75 font-size: 72px;76 font-weight: 600;77 margin-bottom: 18px;78 }79 .weather {80 display: flex;81 align-items: center;82 gap: 16px;83 font-size: 40px;84 opacity: 0.95;85 }86 .weather .icon { width: 44px; height: 44px; }87 88 /* App grid */89 .app-grid {90 position: absolute;91 left: 0;92 width: 100%;93 display: flex;94 justify-content: space-around;95 z-index: 2;96 }97 .grid-row-1 { top: 1540px; }98 .grid-row-2 { top: 1770px; }99 100 .app {101 width: 180px;102 text-align: center;103 }104 .app-circle {105 width: 160px;106 height: 160px;107 border-radius: 50%;108 background: #FFFFFF;109 box-shadow: 0 10px 24px rgba(0,0,0,0.35);110 margin: 0 auto;111 display: flex;112 align-items: center;113 justify-content: center;114 }115 .app svg { width: 88px; height: 88px; }116 .app-label {117 margin-top: 22px;118 font-size: 36px;119 color: #FFFFFF;120 text-shadow: 0 3px 10px rgba(0,0,0,0.6);121 }122 123 /* Search pill */124 .search-pill {125 position: absolute;126 left: 70px;127 top: 2030px;128 width: 940px;129 height: 120px;130 background: #2E2E2E;131 border-radius: 60px;132 z-index: 2;133 display: flex;134 align-items: center;135 justify-content: space-between;136 padding: 0 34px;137 box-shadow: 0 12px 28px rgba(0,0,0,0.45);138 }139 .search-left {140 display: flex;141 align-items: center;142 gap: 22px;143 color: #FFFFFF;144 font-size: 40px;145 font-weight: 600;146 }147 .google-g {148 width: 46px; height: 46px;149 }150 .search-right {151 display: flex; gap: 24px; align-items: center;152 }153 .search-right .icon { width: 48px; height: 48px; }154 155 /* Gesture bar */156 .gesture {157 position: absolute;158 bottom: 44px;159 left: 420px;160 width: 240px;161 height: 12px;162 background: rgba(140,140,140,0.8);163 border-radius: 8px;164 z-index: 2;165 }166</style>167</head>168<body>169<div id="render-target">170 <div class="wallpaper">[IMG: Mountain Lake Wallpaper]</div>171 172 <!-- Status Bar -->173 <div class="status-bar">174 <div class="status-time">7:39</div>175 <div class="status-right">176 <!-- Do Not Disturb -->177 <svg class="icon" viewBox="0 0 24 24">178 <circle cx="12" cy="12" r="10" fill="none" stroke="#FFF" stroke-width="2"></circle>179 <rect x="6" y="11" width="12" height="2" fill="#FFF"></rect>180 </svg>181 <!-- WiFi (simplified) -->182 <svg class="icon" viewBox="0 0 24 24">183 <path d="M3 9c4.5-3.5 13.5-3.5 18 0" fill="none" stroke="#FFF" stroke-width="2" stroke-linecap="round"></path>184 <path d="M6 12c3-2.2 9-2.2 12 0" fill="none" stroke="#FFF" stroke-width="2" stroke-linecap="round"></path>185 <path d="M9 15c1.5-1.1 4.5-1.1 6 0" fill="none" stroke="#FFF" stroke-width="2" stroke-linecap="round"></path>186 <circle cx="12" cy="18" r="1.8" fill="#FFF"></circle>187 </svg>188 <!-- Battery -->189 <svg class="icon" viewBox="0 0 24 24">190 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#FFF" stroke-width="2"></rect>191 <rect x="21" y="10" width="2" height="4" fill="#FFF"></rect>192 <rect x="4" y="8" width="12" height="8" fill="#FFF"></rect>193 </svg>194 </div>195 </div>196 197 <!-- Date and Weather -->198 <div class="date-block">199 <div class="date-text">Sat, Sep 23</div>200 <div class="weather">201 <!-- Moon icon -->202 <svg class="icon" viewBox="0 0 24 24">203 <path d="M16 3a9 9 0 1 0 5 15.5A8 8 0 1 1 16 3z" fill="#BBD9FF"></path>204 </svg>205 <span>29°C</span>206 </div>207 </div>208 209 <!-- App Grid Row 1 -->210 <div class="app-grid grid-row-1">211 <!-- Play Store -->212 <div class="app">213 <div class="app-circle">214 <svg viewBox="0 0 64 64">215 <polygon points="18,14 50,32 18,50" fill="#3DDC84"></polygon>216 <polygon points="18,14 26,22 18,26" fill="#4285F4"></polygon>217 <polygon points="18,38 26,42 18,50" fill="#EA4335"></polygon>218 </svg>219 </div>220 <div class="app-label">Play Store</div>221 </div>222 <!-- Gmail -->223 <div class="app">224 <div class="app-circle">225 <svg viewBox="0 0 64 64">226 <rect x="10" y="20" width="44" height="28" rx="4" ry="4" fill="#FFFFFF" stroke="#DADCE0" stroke-width="3"></rect>227 <path d="M12 22 L32 38 L52 22" fill="none" stroke="#EA4335" stroke-width="6"></path>228 <path d="M12 22 L32 38 L52 22" fill="none" stroke="#34A853" stroke-width="3" opacity="0.8"></path>229 <path d="M12 22 L32 38 L52 22" fill="none" stroke="#4285F4" stroke-width="2" opacity="0.6"></path>230 </svg>231 </div>232 <div class="app-label">Gmail</div>233 </div>234 <!-- Photos -->235 <div class="app">236 <div class="app-circle">237 <svg viewBox="0 0 64 64">238 <path d="M32 10 L48 26 L32 26 Z" fill="#FBBC05"></path>239 <path d="M54 32 L38 48 L38 32 Z" fill="#34A853"></path>240 <path d="M32 54 L16 38 L32 38 Z" fill="#4285F4"></path>241 <path d="M10 32 L26 16 L26 32 Z" fill="#EA4335"></path>242 <circle cx="32" cy="32" r="6" fill="#FFFFFF"></circle>243 </svg>244 </div>245 <div class="app-label">Photos</div>246 </div>247 <!-- YouTube -->248 <div class="app">249 <div class="app-circle">250 <svg viewBox="0 0 64 64">251 <rect x="12" y="18" width="40" height="28" rx="8" ry="8" fill="#FF0000"></rect>252 <polygon points="28,24 44,32 28,40" fill="#FFFFFF"></polygon>253 </svg>254 </div>255 <div class="app-label">YouTube</div>256 </div>257 </div>258 259 <!-- App Grid Row 2 -->260 <div class="app-grid grid-row-2">261 <!-- Phone -->262 <div class="app">263 <div class="app-circle">264 <svg viewBox="0 0 64 64">265 <path d="M18 20c8 12 14 18 26 26l6-6c2-2 1-5-2-6l-8-3-6 4c-4-3-7-6-10-10l4-6-3-8c-1-3-4-4-6-2l-6 6z" fill="#3D7AFD"></path>266 </svg>267 </div>268 <div class="app-label">Phone</div>269 </div>270 <!-- Messages -->271 <div class="app">272 <div class="app-circle">273 <svg viewBox="0 0 64 64">274 <rect x="12" y="16" width="40" height="28" rx="8" ry="8" fill="#2E6CF5"></rect>275 <path d="M20 46 L28 38 H44" fill="none" stroke="#2E6CF5" stroke-width="6"></path>276 <circle cx="24" cy="30" r="3" fill="#FFFFFF"></circle>277 <circle cx="32" cy="30" r="3" fill="#FFFFFF"></circle>278 <circle cx="40" cy="30" r="3" fill="#FFFFFF"></circle>279 </svg>280 </div>281 <div class="app-label">Messages</div>282 </div>283 <!-- Chrome -->284 <div class="app">285 <div class="app-circle">286 <svg viewBox="0 0 64 64">287 <circle cx="32" cy="32" r="28" fill="#DB4437"></circle>288 <path d="M32 4 A28 28 0 0 1 60 32 H32 Z" fill="#F4B400"></path>289 <path d="M32 32 H8 A28 28 0 0 1 32 4" fill="#0F9D58"></path>290 <circle cx="32" cy="32" r="12" fill="#4285F4"></circle>291 </svg>292 </div>293 <div class="app-label">Chrome</div>294 </div>295 <!-- Camera -->296 <div class="app">297 <div class="app-circle">298 <svg viewBox="0 0 64 64">299 <rect x="12" y="20" width="40" height="26" rx="6" ry="6" fill="#616161"></rect>300 <rect x="22" y="14" width="12" height="6" rx="3" ry="3" fill="#616161"></rect>301 <circle cx="32" cy="33" r="10" fill="#4FC3F7"></circle>302 <circle cx="32" cy="33" r="4" fill="#FFFFFF"></circle>303 </svg>304 </div>305 <div class="app-label">Camera</div>306 </div>307 </div>308 309 <!-- Search pill -->310 <div class="search-pill">311 <div class="search-left">312 <svg class="google-g" viewBox="0 0 24 24">313 <path d="M12 2a10 10 0 1 0 0 20c5.5 0 9.5-4 9.5-9.5h-9v3.5h5.3A7.9 7.9 0 0 1 12 20a8 8 0 1 1 0-16" fill="#4285F4"></path>314 <path d="M12 2a8 8 0 0 1 5.7 2.3l-2.3 2.3A5 5 0 0 0 12 6" fill="#EA4335"></path>315 <path d="M6.3 6.3A8 8 0 0 1 12 4v2a6 6 0 0 0-4.2 1.8z" fill="#FBBC05"></path>316 <path d="M4 12a7.9 7.9 0 0 1 1.8-5.6l2.2 2.2A5 5 0 0 0 7 12" fill="#34A853"></path>317 </svg>318 <span>Search</span>319 </div>320 <div class="search-right">321 <!-- Microphone -->322 <svg class="icon" viewBox="0 0 24 24">323 <rect x="8" y="4" width="8" height="12" rx="4" ry="4" fill="#FFFFFF"></rect>324 <path d="M6 12a6 6 0 0 0 12 0" fill="none" stroke="#FFFFFF" stroke-width="2"></path>325 <rect x="11" y="18" width="2" height="4" fill="#FFFFFF"></rect>326 </svg>327 <!-- Google Lens (camera) -->328 <svg class="icon" viewBox="0 0 24 24">329 <rect x="4" y="6" width="16" height="12" rx="3" ry="3" fill="none" stroke="#FFFFFF" stroke-width="2"></rect>330 <circle cx="12" cy="12" r="4" fill="#FFFFFF"></circle>331 <rect x="9" y="4" width="6" height="3" rx="1.5" ry="1.5" fill="#FFFFFF"></rect>332 </svg>333 </div>334 </div>335 336 <!-- Gesture bar -->337 <div class="gesture"></div>338</div>339</body>340</html>