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">6<title>Android Home Screen Mock</title>7<style>8 /* Body reset and transparency */9 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }10 11 /* Root container */12 #render-target {13 width: 1080px;14 height: 2400px;15 position: relative;16 overflow: hidden;17 /* Painterly green + warm tones background to mimic wallpaper */18 background:19 radial-gradient(1200px 900px at 20% 80%, rgba(205,74,57,0.85) 0 28%, rgba(205,74,57,0.0) 35%),20 radial-gradient(1600px 1200px at 65% 30%, #5aa87a 0%, #2e7c63 55%, #1f5647 100%);21 /* subtle texture */22 background-blend-mode: overlay, normal;23 }24 25 /* Status bar */26 #status-bar {27 position: absolute;28 top: 0;29 left: 0;30 right: 0;31 height: 96px;32 padding: 18px 28px;33 color: #ffffff;34 display: flex;35 align-items: center;36 justify-content: space-between;37 font-weight: 500;38 text-shadow: 0 1px 2px rgba(0,0,0,0.4);39 }40 #status-time {41 font-size: 42px;42 letter-spacing: 1px;43 }44 #status-icons {45 display: flex;46 align-items: center;47 gap: 18px;48 }49 .status-dot {50 width: 12px; height: 12px; background: #ffffff; border-radius: 50%;51 opacity: 0.95;52 }53 .icon-wrap { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }54 55 /* App grid */56 .app-grid {57 position: absolute;58 left: 60px;59 right: 60px;60 top: 210px;61 display: grid;62 grid-template-columns: repeat(4, 1fr);63 grid-row-gap: 70px;64 grid-column-gap: 32px;65 }66 .app {67 width: 210px;68 text-align: center;69 color: #ffffff;70 text-shadow: 0 2px 3px rgba(0,0,0,0.55);71 }72 .app .icon {73 width: 170px;74 height: 170px;75 border-radius: 50%;76 margin: 0 auto 18px;77 position: relative;78 box-shadow: 0 6px 18px rgba(0,0,0,0.35);79 display: flex;80 align-items: center;81 justify-content: center;82 }83 .badge-dot {84 position: absolute;85 right: 10px;86 top: 10px;87 width: 28px; height: 28px;88 background: #b9e4e8;89 border-radius: 50%;90 border: 4px solid rgba(0,0,0,0.15);91 }92 .label {93 font-size: 32px;94 line-height: 1.1;95 white-space: nowrap;96 overflow: hidden;97 text-overflow: ellipsis;98 }99 100 /* Dock */101 .dock {102 position: absolute;103 bottom: 420px;104 left: 120px;105 right: 120px;106 display: flex;107 justify-content: space-between;108 align-items: center;109 }110 .dock-icon {111 width: 150px;112 height: 150px;113 border-radius: 50%;114 background: #ffffff;115 display: flex;116 align-items: center;117 justify-content: center;118 box-shadow: 0 8px 22px rgba(0,0,0,0.35);119 }120 121 /* Search pill */122 .search-pill {123 position: absolute;124 bottom: 280px;125 left: 70px;126 right: 70px;127 height: 120px;128 background: #ffffff;129 border-radius: 60px;130 box-shadow: 0 8px 26px rgba(0,0,0,0.35);131 display: flex;132 align-items: center;133 padding: 0 28px;134 }135 .search-left {136 display: flex;137 align-items: center;138 gap: 18px;139 color: #5f6368;140 font-size: 34px;141 flex: 1;142 }143 .google-g {144 width: 66px; height: 66px; border-radius: 50%;145 display: inline-flex; align-items: center; justify-content: center;146 font-weight: 700; color: #4285F4; border: 3px solid #e6e6e6;147 background: #fff;148 }149 .search-actions {150 display: flex;151 align-items: center;152 gap: 22px;153 }154 .act {155 width: 64px; height: 64px; border-radius: 50%; display: flex; align-items:center; justify-content:center; background: #f1f3f4;156 }157 158 /* Gesture bar */159 .gesture {160 position: absolute;161 bottom: 210px;162 left: 50%;163 transform: translateX(-50%);164 width: 260px;165 height: 10px;166 background: #ffffff;167 border-radius: 8px;168 opacity: 0.9;169 box-shadow: 0 1px 2px rgba(0,0,0,0.25);170 }171 172 /* Simple helpers to color icons */173 .c-purple { background: #eae7ff; }174 .c-blue { background: #00a9e0; }175 .c-indigo { background: #3d4f67; }176 .c-amber { background: #fff5e1; }177 .c-calm { background: #699df2; }178 .c-teal { background: #23b3b0; }179 .c-white { background: #ffffff; }180 .c-cyan { background: #0db2c1; }181 .c-lav { background: #9aa9ff; }182 .c-rainbow { background: linear-gradient(180deg, #f44336 0 20%, #ff9800 20% 40%, #ffeb3b 40% 60%, #4caf50 60% 80%, #2196f3 80% 100%); }183 .c-soft { background: #f6f7f8; }184 185 svg { display: block; }186</style>187</head>188<body>189<div id="render-target">190 <!-- Status bar -->191 <div id="status-bar">192 <div id="status-time">9:08</div>193 <div id="status-icons">194 <!-- Simple status icons -->195 <div class="icon-wrap">196 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">197 <circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="2" opacity="0.85"></circle>198 <circle cx="12" cy="12" r="2" fill="#fff"></circle>199 </svg>200 </div>201 <div class="icon-wrap">202 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">203 <path d="M3 16l7-7 4 4 7-7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" opacity="0.9"/>204 </svg>205 </div>206 <div class="icon-wrap">207 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">208 <path d="M3 16h18" stroke="#fff" stroke-width="2" opacity="0.6"/>209 <path d="M6 13h12" stroke="#fff" stroke-width="2" opacity="0.6"/>210 <path d="M9 10h6" stroke="#fff" stroke-width="2" opacity="0.6"/>211 </svg>212 </div>213 <div class="icon-wrap">214 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">215 <path d="M3 12h18" stroke="#fff" stroke-width="2" opacity="0.9"/>216 <circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="2" opacity="0.6"></circle>217 </svg>218 </div>219 <div class="icon-wrap">220 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">221 <path d="M3 12a9 9 0 0118 0" stroke="#fff" stroke-width="2" opacity="0.9" />222 <path d="M6 12a6 6 0 0112 0" stroke="#fff" stroke-width="2" opacity="0.8" />223 <path d="M9 12a3 3 0 016 0" stroke="#fff" stroke-width="2" opacity="0.9" />224 </svg>225 </div>226 <div class="icon-wrap">227 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">228 <rect x="4" y="6" width="14" height="12" rx="2" stroke="#fff" stroke-width="2"/>229 <rect x="6" y="8" width="10" height="8" fill="#fff"/>230 <rect x="19" y="10" width="2" height="8" fill="#fff"/>231 </svg>232 </div>233 </div>234 </div>235 236 <!-- App icons grid -->237 <div class="app-grid">238 <!-- Row 1 -->239 <div class="app">240 <div class="icon c-purple">241 <svg width="120" height="120" viewBox="0 0 120 120">242 <path d="M15 70c10-20 20 20 30 0s20 20 30 0 20 20 30 0" stroke="#6b4fd6" stroke-width="12" fill="none" stroke-linecap="round"/>243 </svg>244 </div>245 <div class="label">Medito</div>246 </div>247 <div class="app">248 <div class="icon c-blue">249 <svg width="120" height="120" viewBox="0 0 120 120">250 <circle cx="60" cy="70" r="18" fill="#fff"/>251 <path d="M40 92c8-14 32-14 40 0" stroke="#fff" stroke-width="10" fill="none" stroke-linecap="round"/>252 <path d="M60 40v20" stroke="#fff" stroke-width="10" stroke-linecap="round"/>253 </svg>254 </div>255 <div class="label">Mindfulnes...</div>256 </div>257 <div class="app">258 <div class="icon c-indigo">259 <svg width="120" height="120" viewBox="0 0 120 120">260 <rect x="35" y="30" width="50" height="60" rx="16" fill="#f6c2b3"/>261 <rect x="50" y="30" width="20" height="60" rx="10" fill="#f3a58f"/>262 </svg>263 </div>264 <div class="label">Breethe</div>265 </div>266 <div class="app">267 <div class="icon c-amber">268 <svg width="120" height="120" viewBox="0 0 120 120">269 <ellipse cx="60" cy="60" rx="38" ry="24" fill="#b67822"/>270 <rect x="22" y="54" width="76" height="12" fill="#7b4b0f"/>271 </svg>272 </div>273 <div class="label">Insight Timer</div>274 </div>275 276 <!-- Row 2 -->277 <div class="app">278 <div class="icon c-calm">279 <div class="badge-dot"></div>280 <svg width="120" height="120" viewBox="0 0 120 120">281 <path d="M20 70c20 10 60 10 80 0" stroke="#fff" stroke-width="10" fill="none" stroke-linecap="round"/>282 <path d="M30 60c15-25 45-25 60 0" stroke="#fff" stroke-width="8" fill="none" opacity="0.9"/>283 </svg>284 </div>285 <div class="label">Calm</div>286 </div>287 <div class="app">288 <div class="icon c-teal">289 <div class="badge-dot"></div>290 <svg width="120" height="120" viewBox="0 0 120 120">291 <path d="M35 70c0-20 50-20 50 0s-50 20-50 0z" fill="#fff" opacity="0.95"/>292 <rect x="50" y="40" width="20" height="20" rx="10" fill="#fff"/>293 </svg>294 </div>295 <div class="label">Balance</div>296 </div>297 <div class="app">298 <div class="icon c-white">299 <div class="badge-dot"></div>300 <svg width="120" height="120" viewBox="0 0 120 120">301 <path d="M30 85c15-30 45-30 60 0" stroke="#333" stroke-width="12" fill="none" stroke-linecap="round"/>302 <circle cx="60" cy="55" r="18" fill="#333"/>303 </svg>304 </div>305 <div class="label">Atom</div>306 </div>307 <div class="app">308 <div class="icon c-cyan">309 <div class="badge-dot"></div>310 <svg width="120" height="120" viewBox="0 0 120 120">311 <circle cx="60" cy="55" r="22" fill="#fff"/>312 <path d="M30 95c20-20 40-20 60 0" stroke="#fff" stroke-width="10" fill="none" stroke-linecap="round"/>313 </svg>314 </div>315 <div class="label">Idanim</div>316 </div>317 318 <!-- Row 3 -->319 <div class="app">320 <div class="icon c-lav">321 <svg width="120" height="120" viewBox="0 0 120 120">322 <path d="M30 70h60" stroke="#fff" stroke-width="12" stroke-linecap="round"/>323 <path d="M50 50l15-20 15 20" stroke="#fff" stroke-width="10" stroke-linecap="round"/>324 </svg>325 </div>326 <div class="label">Daily Yoga</div>327 </div>328 <div class="app">329 <div class="icon c-rainbow">330 <svg width="120" height="120" viewBox="0 0 120 120">331 <circle cx="60" cy="60" r="26" fill="#fff"/>332 <rect x="48" y="70" width="24" height="20" rx="10" fill="#fff"/>333 </svg>334 </div>335 <div class="label">Evolve</div>336 </div>337 <div class="app">338 <div class="icon c-white">339 <svg width="120" height="120" viewBox="0 0 120 120">340 <circle cx="60" cy="55" r="20" fill="#2db7c6"/>341 <rect x="42" y="75" width="36" height="18" rx="9" fill="#2db7c6"/>342 </svg>343 </div>344 <div class="label">Simple Habit</div>345 </div>346 <div class="app">347 <div class="icon c-lav">348 <svg width="120" height="120" viewBox="0 0 120 120">349 <path d="M60 36c-10 10-22 18-22 34 0 10 10 18 22 18s22-8 22-18c0-16-12-24-22-34z" stroke="#fff" stroke-width="8" fill="none"/>350 <circle cx="60" cy="62" r="6" fill="#fff"/>351 </svg>352 </div>353 <div class="label">Meditopia</div>354 </div>355 </div>356 357 <!-- Bottom dock icons -->358 <div class="dock">359 <div class="dock-icon">360 <!-- Phone -->361 <svg width="86" height="86" viewBox="0 0 24 24" fill="none">362 <path d="M6 3l3 3-2 2c1 3 4 6 7 7l2-2 3 3c-1 2-3 3-5 3-6 0-11-5-11-11 0-2 1-4 3-5z" fill="#1a73e8"/>363 </svg>364 </div>365 <div class="dock-icon">366 <!-- Messages -->367 <svg width="86" height="86" viewBox="0 0 24 24" fill="none">368 <rect x="3" y="4" width="18" height="14" rx="3" fill="#1a73e8"/>369 <path d="M7 9h10M7 12h6" stroke="#fff" stroke-width="2" stroke-linecap="round"/>370 </svg>371 </div>372 <div class="dock-icon">373 <!-- Chrome -->374 <svg width="86" height="86" viewBox="0 0 24 24" fill="none">375 <circle cx="12" cy="12" r="9" fill="#4caf50"/>376 <path d="M12 3a9 9 0 018 5H12" fill="#f44336"/>377 <path d="M4 8l4 7h6" fill="#ffeb3b"/>378 <circle cx="12" cy="12" r="4" fill="#1a73e8" stroke="#fff" stroke-width="2"/>379 </svg>380 </div>381 <div class="dock-icon">382 <!-- Camera -->383 <svg width="86" height="86" viewBox="0 0 24 24" fill="none">384 <rect x="3" y="6" width="18" height="14" rx="3" fill="#333"/>385 <rect x="8" y="3" width="8" height="4" rx="2" fill="#555"/>386 <circle cx="12" cy="13" r="4" fill="#1a73e8" stroke="#cbd5e1" stroke-width="2"/>387 </svg>388 </div>389 </div>390 391 <!-- Search bar -->392 <div class="search-pill">393 <div class="search-left">394 <div class="google-g">G</div>395 <div>Search</div>396 </div>397 <div class="search-actions">398 <div class="act">399 <!-- Mic -->400 <svg width="30" height="30" viewBox="0 0 24 24" fill="none">401 <rect x="9" y="4" width="6" height="10" rx="3" fill="#1a73e8"/>402 <path d="M6 12a6 6 0 0012 0M12 18v3" stroke="#1a73e8" stroke-width="2" stroke-linecap="round"/>403 </svg>404 </div>405 <div class="act">406 <!-- Lens -->407 <svg width="30" height="30" viewBox="0 0 24 24" fill="none">408 <rect x="5" y="5" width="10" height="10" rx="3" stroke="#1a73e8" stroke-width="2"/>409 <circle cx="15" cy="15" r="4" stroke="#34a853" stroke-width="2"/>410 </svg>411 </div>412 </div>413 </div>414 415 <!-- Gesture bar -->416 <div class="gesture"></div>417</div>418</body>419</html>