GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Android Home UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: radial-gradient(1200px 1200px at 75% 38%, #a88bc8 0%, #6e579a 40%, #3a2b66 100%);14 color: #ffffff;15 }16 17 /* Decorative sky stars */18 .star { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: 0.9; }19 .star.s { width: 4px; height: 4px; opacity: 0.8; }20 .star.l { width: 10px; height: 10px; opacity: 1; }21 22 /* Moon */23 .moon {24 position: absolute;25 right: -90px;26 top: 480px;27 width: 760px;28 height: 760px;29 border-radius: 50%;30 background: #cab0de;31 box-shadow: 0 0 60px rgba(255,255,255,0.25);32 opacity: 0.95;33 }34 .moon:after {35 content: "";36 position: absolute;37 inset: 0;38 border-radius: 50%;39 background:40 radial-gradient(120px 100px at 30% 30%, rgba(120,85,145,0.35), transparent 60%),41 radial-gradient(170px 140px at 58% 50%, rgba(120,85,145,0.28), transparent 65%),42 radial-gradient(140px 110px at 38% 68%, rgba(120,85,145,0.32), transparent 60%),43 radial-gradient(110px 90px at 70% 80%, rgba(120,85,145,0.28), transparent 65%);44 mix-blend-mode: multiply;45 }46 47 /* Simple skyline silhouettes */48 .skyline {49 position: absolute;50 bottom: 320px;51 left: 0;52 width: 100%;53 height: 520px;54 background:55 linear-gradient(to top, rgba(31,20,56,0.9), rgba(31,20,56,0.0) 60%);56 pointer-events: none;57 }58 .building {59 position: absolute;60 bottom: 320px;61 width: 360px; height: 520px;62 background: #2a1f4a;63 box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1);64 }65 .building.left { left: 30px; height: 500px; width: 380px; background: #291f49; }66 .building.right { right: 30px; height: 620px; width: 420px; bottom: 320px; background: #251b44; }67 .window {68 position: absolute; width: 44px; height: 54px; border-radius: 8px;69 background: rgba(255,240,180,0.7);70 box-shadow: 0 0 6px rgba(255,240,180,0.4);71 }72 73 /* Status bar */74 .status-bar {75 position: absolute; top: 24px; left: 24px; right: 24px; height: 64px; display: flex; align-items: center;76 justify-content: space-between; color: #fff;77 }78 .status-time { font-size: 42px; font-weight: 600; letter-spacing: 1px; }79 .status-icons { display: flex; gap: 24px; align-items: center; }80 81 /* Date and weather */82 .date-block {83 position: absolute; top: 160px; left: 64px; color: #fff;84 }85 .date-text { font-size: 58px; font-weight: 600; }86 .weather { margin-top: 18px; display: flex; align-items: center; gap: 16px; font-size: 40px; }87 .sun {88 width: 44px; height: 44px; border-radius: 50%; background: #ffcc54; box-shadow: 0 0 0 6px rgba(255,204,84,0.25);89 }90 91 /* Icon grid shared styles */92 .row {93 position: absolute; left: 64px; width: 952px; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 64px;94 justify-items: center;95 }96 .row.top { bottom: 820px; }97 .row.dock { bottom: 560px; }98 .app {99 display: flex; flex-direction: column; align-items: center; color: #fff; text-align: center;100 }101 .icon {102 width: 170px; height: 170px; border-radius: 50%;103 background: #ffffff; display: grid; place-items: center; position: relative;104 box-shadow: 0 8px 16px rgba(0,0,0,0.25);105 }106 .label {107 margin-top: 22px; font-size: 38px;108 text-shadow: 0 1px 2px rgba(0,0,0,0.35);109 }110 .notif-dot {111 position: absolute; right: 18px; top: 18px; width: 30px; height: 30px; border-radius: 50%;112 background: #f7a6b9; border: 4px solid #fff;113 }114 115 /* Search bar */116 .search-bar {117 position: absolute; left: 64px; right: 64px; bottom: 240px; height: 106px;118 background: rgba(40,40,50,0.65); border-radius: 56px;119 display: flex; align-items: center; padding: 0 34px; gap: 26px; color: #eaeaea;120 backdrop-filter: blur(3px);121 }122 .search-input { flex: 1; opacity: 0.92; }123 .search-input span { opacity: 0.9; font-size: 36px; }124 125 /* Nav pill */126 .nav-pill {127 position: absolute; bottom: 116px; left: 50%; transform: translateX(-50%);128 width: 260px; height: 12px; border-radius: 8px; background: rgba(255,255,255,0.7);129 }130 131 /* Simple inline icon containers to standardize size */132 .glyph { width: 90px; height: 90px; }133 134 /* Utility tiny text for placeholder images if any were used (none here) */135 .muted { color: #d0d0d0; font-size: 26px; }136</style>137</head>138<body>139<div id="render-target">140 141 <!-- Stars -->142 <div class="star l" style="top:80px; left:160px;"></div>143 <div class="star" style="top:120px; left:360px;"></div>144 <div class="star s" style="top:170px; left:520px;"></div>145 <div class="star s" style="top:220px; left:710px;"></div>146 <div class="star" style="top:240px; left:940px;"></div>147 <div class="star s" style="top:320px; left:140px;"></div>148 <div class="star" style="top:360px; left:300px;"></div>149 <div class="star s" style="top:410px; left:450px;"></div>150 <div class="star" style="top:460px; left:620px;"></div>151 <div class="star s" style="top:520px; left:820px;"></div>152 <div class="star" style="top:560px; left:980px;"></div>153 <div class="star s" style="top:630px; left:260px;"></div>154 155 <!-- Moon -->156 <div class="moon"></div>157 158 <!-- Status bar -->159 <div class="status-bar">160 <div class="status-time">10:53</div>161 <div class="status-icons">162 <!-- Wi-Fi icon -->163 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">164 <path d="M2 9c5.5-5 14.5-5 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>165 <path d="M5 12c4-3.5 10-3.5 14 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>166 <path d="M8 15c2.5-2 5.5-2 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>167 <circle cx="12" cy="19" r="1.6" fill="#fff"/>168 </svg>169 <!-- Battery icon -->170 <svg width="44" height="44" viewBox="0 0 28 24" fill="none">171 <rect x="2" y="5" width="20" height="14" rx="2" ry="2" stroke="#fff" stroke-width="2"/>172 <rect x="4" y="7" width="16" height="10" fill="#fff"/>173 <rect x="22" y="9" width="4" height="6" rx="1" fill="#fff"/>174 </svg>175 </div>176 </div>177 178 <!-- Date + Weather -->179 <div class="date-block">180 <div class="date-text">Mon, Aug 7</div>181 <div class="weather">182 <div class="sun"></div>183 <div>32°C</div>184 </div>185 </div>186 187 <!-- Skyline silhouettes with windows -->188 <div class="building left">189 <div class="window" style="left:70px; top:270px;"></div>190 <div class="window" style="left:130px; top:270px;"></div>191 <div class="window" style="left:60px; top:380px; width:100px;"></div>192 </div>193 <div class="building right">194 <div class="window" style="right:260px; top:90px; background: rgba(248,200,160,0.75);"></div>195 <div class="window" style="right:180px; top:90px;"></div>196 <div class="window" style="right:100px; top:90px;"></div>197 <div class="window" style="right:220px; top:220px; width:70px; height:90px;"></div>198 <div class="window" style="right:120px; top:220px; width:70px; height:90px;"></div>199 <div class="window" style="right:20px; top:220px; width:70px; height:90px;"></div>200 </div>201 <div class="skyline"></div>202 203 <!-- Main apps row -->204 <div class="row top">205 <!-- Play Store -->206 <div class="app">207 <div class="icon">208 <svg class="glyph" viewBox="0 0 64 64">209 <defs>210 <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">211 <stop offset="0" stop-color="#19c37d"/><stop offset="1" stop-color="#27ae60"/>212 </linearGradient>213 </defs>214 <path d="M14 12 L46 32 L14 52 Z" fill="url(#g1)"/>215 <path d="M18 16 L28 26 L18 32 Z" fill="#00a7ff" opacity="0.9"/>216 <path d="M18 32 L28 38 L18 48 Z" fill="#ff4154" opacity="0.9"/>217 <path d="M28 26 L46 32 L28 38 Z" fill="#ffd54f" opacity="0.9"/>218 </svg>219 </div>220 <div class="label">Play Store</div>221 </div>222 223 <!-- Gmail -->224 <div class="app">225 <div class="icon">226 <div class="notif-dot"></div>227 <svg class="glyph" viewBox="0 0 64 64">228 <rect x="10" y="18" width="44" height="30" rx="6" fill="#fff"/>229 <path d="M12 22 L32 36 L52 22" stroke="#ea4335" stroke-width="8" stroke-linejoin="round" fill="none"/>230 <path d="M12 22 v24" stroke="#34a853" stroke-width="6"/>231 <path d="M52 22 v24" stroke="#4285f4" stroke-width="6"/>232 <path d="M22 22 L32 30 L42 22" stroke="#fbbc04" stroke-width="6" fill="none"/>233 </svg>234 </div>235 <div class="label">Gmail</div>236 </div>237 238 <!-- Photos -->239 <div class="app">240 <div class="icon">241 <svg class="glyph" viewBox="0 0 64 64">242 <path d="M32 8 A12 12 0 0 1 44 20 L32 32 Z" fill="#ea4335"/>243 <path d="M56 32 A12 12 0 0 1 44 44 L32 32 Z" fill="#34a853"/>244 <path d="M32 56 A12 12 0 0 1 20 44 L32 32 Z" fill="#4285f4"/>245 <path d="M8 32 A12 12 0 0 1 20 20 L32 32 Z" fill="#fbbc04"/>246 </svg>247 </div>248 <div class="label">Photos</div>249 </div>250 251 <!-- YouTube -->252 <div class="app">253 <div class="icon">254 <svg class="glyph" viewBox="0 0 64 64">255 <rect x="10" y="18" width="44" height="28" rx="10" fill="#ff2d2d"/>256 <polygon points="28,22 44,32 28,42" fill="#fff"/>257 </svg>258 </div>259 <div class="label">YouTube</div>260 </div>261 </div>262 263 <!-- Dock icons -->264 <div class="row dock">265 <!-- Phone -->266 <div class="app">267 <div class="icon">268 <svg class="glyph" viewBox="0 0 64 64">269 <circle cx="32" cy="32" r="28" fill="#25d366"/>270 <path d="M39 41c-6-3-10-7-12-12l5-5-7-7-6 6c1 11 10 20 21 21l6-6-7-7-5 5" fill="#fff" opacity="0.95"/>271 </svg>272 </div>273 </div>274 275 <!-- Messages -->276 <div class="app">277 <div class="icon">278 <svg class="glyph" viewBox="0 0 64 64">279 <rect x="10" y="12" width="44" height="36" rx="10" fill="#1a73e8"/>280 <rect x="16" y="20" width="32" height="8" rx="4" fill="#fff" opacity="0.95"/>281 <rect x="16" y="32" width="22" height="8" rx="4" fill="#e9f1ff"/>282 <path d="M28 48 L22 42 H42 Z" fill="#1a73e8"/>283 </svg>284 </div>285 </div>286 287 <!-- Chrome -->288 <div class="app">289 <div class="icon">290 <svg class="glyph" viewBox="0 0 64 64">291 <circle cx="32" cy="32" r="28" fill="#db4437"/>292 <path d="M32 4 A28 28 0 0 1 59 32 H32 Z" fill="#f4b400"/>293 <path d="M59 32 A28 28 0 0 1 16 54 L32 32 Z" fill="#0f9d58"/>294 <circle cx="32" cy="32" r="14" fill="#4285f4" stroke="#fff" stroke-width="4"/>295 </svg>296 </div>297 </div>298 299 <!-- Camera -->300 <div class="app">301 <div class="icon">302 <svg class="glyph" viewBox="0 0 64 64">303 <rect x="10" y="22" width="44" height="28" rx="8" fill="#e0e0e5"/>304 <rect x="18" y="16" width="14" height="10" rx="3" fill="#c7c7d1"/>305 <circle cx="34" cy="36" r="10" fill="#5aa7ff"/>306 <circle cx="34" cy="36" r="6" fill="#2d6fd6"/>307 <rect x="48" y="26" width="6" height="6" rx="2" fill="#b0b0bd"/>308 </svg>309 </div>310 </div>311 </div>312 313 <!-- Search bar -->314 <div class="search-bar">315 <!-- Google G -->316 <svg width="58" height="58" viewBox="0 0 48 48">317 <path fill="#FFC107" d="M43 24.5c0-1.4-.1-2.7-.4-4H24v7.6h10.7c-.5 2.5-2 4.6-4.2 6v5h6.8C40.8 36.3 43 30.9 43 24.5z"/>318 <path fill="#FF3D00" d="M24 44c5.4 0 9.9-1.8 13.2-4.9l-6.8-5c-1.8 1.2-4.2 1.9-6.4 1.9-4.9 0-9-3.3-10.5-7.8h-7v4.9C10 39.3 16.5 44 24 44z"/>319 <path fill="#4CAF50" d="M13.5 28.2c-.3-1-.5-2.1-.5-3.2s.2-2.2.5-3.2v-4.9h-7C5.2 19.3 5 21.6 5 24s.2 4.7 1.5 7.1l7-2.9z"/>320 <path fill="#1976D2" d="M24 14.2c2.9 0 5.6 1 7.6 2.9l5.7-5.7C33.9 7.6 29.4 6 24 6 16.5 6 10 10.7 7.5 16.9l7 5.9C15 17.5 19.1 14.2 24 14.2z"/>321 </svg>322 <div class="search-input"><span>Search…</span></div>323 <!-- Mic -->324 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">325 <rect x="8" y="3" width="8" height="12" rx="4" fill="#1a73e8"/>326 <path d="M5 12a7 7 0 0 0 14 0" stroke="#fff" stroke-width="2"/>327 <rect x="11" y="19" width="2" height="3" fill="#fff"/>328 </svg>329 <!-- Google Lens like square -->330 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">331 <rect x="4" y="6" width="14" height="12" rx="3" stroke="#34a853" stroke-width="2"/>332 <circle cx="11" cy="12" r="3" fill="#ea4335"/>333 <rect x="17" y="4" width="3" height="3" rx="1" fill="#fbbc04"/>334 </svg>335 </div>336 337 <!-- Navigation pill -->338 <div class="nav-pill"></div>339 340</div>341</body>342</html>