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; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: radial-gradient(1200px 1200px at 60% 40%, #6b5e73 0%, #554e66 40%, #2f2b3b 75%, #201c2a 100%);15 }16 /* Darken top area a bit for readability */17 #render-target:before {18 content: "";19 position: absolute;20 inset: 0;21 background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 25%, rgba(0,0,0,0.05) 60%, rgba(0,0,0,0) 100%);22 pointer-events: none;23 }24 25 /* Status bar */26 .status-bar {27 position: absolute;28 top: 0; left: 0; right: 0;29 height: 90px;30 padding: 22px 28px 0 28px;31 color: #fff;32 font-size: 36px;33 display: flex;34 align-items: center;35 justify-content: space-between;36 letter-spacing: 0.5px;37 }38 .status-icons {39 display: flex;40 align-items: center;41 gap: 22px;42 }43 .dot { width: 8px; height: 8px; background: #fff; border-radius: 50%; opacity: 0.9; }44 45 /* Date/Weather widget */46 .date-widget {47 position: absolute;48 top: 200px;49 left: 60px;50 color: #fff;51 }52 .date-widget .date {53 font-size: 82px;54 font-weight: 400;55 margin: 0 0 18px 0;56 }57 .weather {58 display: flex;59 align-items: center;60 gap: 18px;61 font-size: 38px;62 opacity: 0.9;63 }64 65 /* App grid rows */66 .apps-row {67 position: absolute;68 left: 0; right: 0;69 display: flex;70 justify-content: center;71 gap: 88px;72 }73 .top-row { top: 1320px; }74 .dock-row { top: 1605px; gap: 92px; }75 76 .app { text-align: center; color: #fff; }77 .icon {78 width: 180px;79 height: 180px;80 background: #ffffff;81 border-radius: 50%;82 box-shadow: 0 8px 18px rgba(0,0,0,0.35);83 position: relative;84 display: grid;85 place-items: center;86 }87 .icon svg { width: 120px; height: 120px; }88 .label {89 margin-top: 22px;90 font-size: 36px;91 opacity: 0.95;92 }93 94 /* Search bar */95 .search-bar {96 position: absolute;97 left: 60px;98 right: 60px;99 top: 1845px;100 height: 120px;101 background: #ffffff;102 border-radius: 60px;103 box-shadow: 0 10px 24px rgba(0,0,0,0.35);104 display: flex;105 align-items: center;106 padding: 0 32px;107 color: #333;108 }109 .search-left {110 display: flex;111 align-items: center;112 gap: 22px;113 flex: 1;114 font-size: 36px;115 }116 .search-placeholder {117 color: #757575;118 font-size: 36px;119 }120 .search-right {121 display: flex;122 align-items: center;123 gap: 22px;124 }125 .search-icon {126 width: 72px; height: 72px;127 display: grid; place-items: center;128 border-radius: 50%;129 background: #f3f3f3;130 }131 .search-icon svg { width: 38px; height: 38px; }132 133 /* Gesture bar */134 .gesture {135 position: absolute;136 bottom: 34px;137 left: 50%;138 transform: translateX(-50%);139 width: 320px;140 height: 10px;141 background: rgba(255,255,255,0.85);142 border-radius: 10px;143 }144 145 /* Small helpers for tiny badge-like squares seen near the clock (placeholder) */146 .tiny-box {147 width: 44px; height: 28px;148 border-radius: 6px;149 border: 2px solid rgba(255,255,255,0.9);150 color: #fff;151 font-size: 22px;152 line-height: 24px;153 display: flex; align-items: center; justify-content: center;154 opacity: 0.9;155 }156 .mid-icons { display: flex; align-items: center; gap: 10px; margin-left: 18px; }157</style>158</head>159<body>160<div id="render-target">161 162 <!-- Status Bar -->163 <div class="status-bar">164 <div style="display:flex; align-items:center;">165 <div style="font-weight:500;">11:13</div>166 <div class="mid-icons">167 <div class="tiny-box">99</div>168 <div class="tiny-box">99</div>169 <div class="dot"></div>170 </div>171 </div>172 <div class="status-icons">173 <!-- Wi-Fi Icon -->174 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">175 <path d="M2 8c5-4 15-4 20 0" />176 <path d="M5 12c3-3 11-3 14 0" />177 <path d="M8 16c2-2 6-2 8 0" />178 <circle cx="12" cy="20" r="1.5" fill="#fff" stroke="none"></circle>179 </svg>180 <!-- Battery Icon -->181 <svg viewBox="0 0 36 24">182 <rect x="2" y="5" width="28" height="14" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"></rect>183 <rect x="31" y="9" width="3" height="6" fill="#fff"></rect>184 <polygon points="15,7 11,13 16,13 13,19 23,11 18,11 20,7" fill="#fff" opacity="0.9"></polygon>185 </svg>186 </div>187 </div>188 189 <!-- Date and Weather -->190 <div class="date-widget">191 <div class="date">Tue, Jul 25</div>192 <div class="weather">193 <!-- Wavy lines icon -->194 <svg viewBox="0 0 64 24" width="64" height="24">195 <path d="M2 6c6 6 18 6 24 0s18-6 24 0" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"/>196 <path d="M2 16c6 6 18 6 24 0s18-6 24 0" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" opacity="0.85"/>197 </svg>198 <span>31°C</span>199 </div>200 </div>201 202 <!-- Top row of apps -->203 <div class="apps-row top-row">204 <!-- Play Store -->205 <div class="app">206 <div class="icon">207 <svg viewBox="0 0 100 100">208 <polygon points="20,20 70,50 20,80" fill="#34a853"></polygon>209 <polygon points="20,20 45,35 35,45" fill="#4285f4"></polygon>210 <polygon points="35,55 45,65 20,80" fill="#fbbc05"></polygon>211 <polygon points="45,35 70,50 45,65" fill="#ea4335"></polygon>212 </svg>213 </div>214 <div class="label">Play Store</div>215 </div>216 217 <!-- Gmail -->218 <div class="app">219 <div class="icon">220 <svg viewBox="0 0 100 100">221 <rect x="18" y="28" width="64" height="44" rx="8" ry="8" fill="#ffffff" stroke="#bdbdbd" stroke-width="2"></rect>222 <path d="M20 32 L50 50 L80 32" stroke="#ea4335" stroke-width="10" fill="none" stroke-linecap="round" />223 <path d="M20 72 V36 L50 56 L80 36 V72" stroke="#34a853" stroke-width="6" fill="none" stroke-linecap="round"/>224 </svg>225 </div>226 <div class="label">Gmail</div>227 </div>228 229 <!-- Photos -->230 <div class="app">231 <div class="icon">232 <svg viewBox="0 0 100 100">233 <path d="M50 12 L50 50 L12 50 A38 38 0 0 1 50 12" fill="#fbbc05"></path>234 <path d="M88 50 L50 50 L50 12 A38 38 0 0 1 88 50" fill="#ea4335"></path>235 <path d="M50 88 L50 50 L88 50 A38 38 0 0 1 50 88" fill="#34a853"></path>236 <path d="M12 50 L50 50 L50 88 A38 38 0 0 1 12 50" fill="#4285f4"></path>237 <circle cx="50" cy="50" r="10" fill="#fff"></circle>238 </svg>239 </div>240 <div class="label">Photos</div>241 </div>242 243 <!-- YouTube -->244 <div class="app">245 <div class="icon">246 <svg viewBox="0 0 100 100">247 <rect x="18" y="28" width="64" height="44" rx="10" ry="10" fill="#ff0000"></rect>248 <polygon points="45,36 70,50 45,64" fill="#fff"></polygon>249 </svg>250 </div>251 <div class="label">YouTube</div>252 </div>253 </div>254 255 <!-- Dock row -->256 <div class="apps-row dock-row">257 <!-- Phone -->258 <div class="icon">259 <svg viewBox="0 0 100 100">260 <path d="M30 30 c0 30 40 40 40 40 l8 -8 c4 -4 2 -10 -3 -12 l-10 -4 c-3 -1 -7 0 -9 3 l-4 4 c-8 -5 -16 -13 -21 -21 l4 -4 c3 -3 4 -6 3 -9 l-4 -10 c-2 -5 -8 -7 -12 -3z" fill="#2e7d32"></path>261 </svg>262 </div>263 264 <!-- Messages -->265 <div class="icon">266 <svg viewBox="0 0 100 100">267 <rect x="18" y="24" width="64" height="44" rx="10" ry="10" fill="#1a73e8"></rect>268 <polygon points="46,68 40,54 54,54" fill="#1a73e8"></polygon>269 <rect x="28" y="36" width="44" height="6" fill="#fff" opacity="0.9"></rect>270 <rect x="28" y="48" width="32" height="6" fill="#fff" opacity="0.9"></rect>271 </svg>272 </div>273 274 <!-- Chrome -->275 <div class="icon">276 <svg viewBox="0 0 100 100">277 <circle cx="50" cy="50" r="38" fill="#fbbc05"></circle>278 <path d="M50 12 A38 38 0 0 1 86 50 H50 Z" fill="#ea4335"></path>279 <path d="M50 50 L30 84 A38 38 0 0 1 14 46 L50 50 Z" fill="#34a853"></path>280 <circle cx="50" cy="50" r="18" fill="#4285f4"></circle>281 <circle cx="50" cy="50" r="8" fill="#e3f2fd"></circle>282 </svg>283 </div>284 285 <!-- Camera -->286 <div class="icon">287 <svg viewBox="0 0 100 100">288 <rect x="20" y="32" width="60" height="40" rx="8" ry="8" fill="#616161"></rect>289 <rect x="28" y="28" width="20" height="8" rx="4" ry="4" fill="#757575"></rect>290 <circle cx="50" cy="52" r="14" fill="#90caf9"></circle>291 <circle cx="50" cy="52" r="8" fill="#1976d2"></circle>292 </svg>293 </div>294 </div>295 296 <!-- Search bar -->297 <div class="search-bar">298 <div class="search-left">299 <!-- Google 'G' simplified -->300 <svg viewBox="0 0 24 24" width="56" height="56">301 <path d="M12 3a9 9 0 1 0 0 18c4.6 0 8.2-3 8.8-7h-8.8v-4h14" fill="none" stroke="#4285f4" stroke-width="2"></path>302 <path d="M12 3a9 9 0 0 1 6.4 2.6" stroke="#ea4335" stroke-width="2" fill="none"></path>303 <path d="M5.6 6.5a9 9 0 0 1 6.4-3.5" stroke="#fbbc05" stroke-width="2" fill="none"></path>304 <path d="M4 12a8 8 0 0 0 8 8" stroke="#34a853" stroke-width="2" fill="none"></path>305 </svg>306 <div class="search-placeholder">Search...</div>307 </div>308 <div class="search-right">309 <div class="search-icon">310 <!-- Mic -->311 <svg viewBox="0 0 24 24" fill="#1a73e8">312 <rect x="9" y="4" width="6" height="10" rx="3"></rect>313 <path d="M5 12a7 7 0 0 0 14 0" fill="none" stroke="#1a73e8" stroke-width="2"></path>314 <rect x="11" y="18" width="2" height="3" fill="#1a73e8"></rect>315 </svg>316 </div>317 <div class="search-icon">318 <!-- Lens/Camera -->319 <svg viewBox="0 0 24 24">320 <rect x="4" y="6" width="16" height="12" rx="3" fill="#34a853"></rect>321 <circle cx="12" cy="12" r="4" fill="#fff"></circle>322 <circle cx="12" cy="12" r="2" fill="#1a73e8"></circle>323 </svg>324 </div>325 </div>326 </div>327 328 <!-- Gesture bar -->329 <div class="gesture"></div>330</div>331</body>332</html>