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, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 border-radius: 0;14 background: radial-gradient(1200px 1600px at 20% 10%, #80907f 0%, #6e816e 40%, #5b6f5e 70%, #536a58 100%);15 color: #fff;16 }17 18 /* abstract glassy curves */19 .curve {20 position: absolute;21 border-radius: 50%;22 filter: blur(0.2px);23 mix-blend-mode: soft-light;24 }25 .curve.c1 {26 width: 1400px; height: 2400px;27 left: -420px; top: -200px;28 background: linear-gradient(180deg, rgba(30,40,34,0.35), rgba(0,0,0,0.0));29 border: 2px solid rgba(20,30,24,0.35);30 transform: rotate(8deg);31 }32 .curve.c2 {33 width: 1200px; height: 1700px;34 right: -520px; top: 540px;35 background: linear-gradient(180deg, rgba(16,22,18,0.55), rgba(0,0,0,0.0));36 border: 2px solid rgba(15,25,18,0.5);37 transform: rotate(-18deg);38 }39 .curve.c3 {40 width: 1000px; height: 1400px;41 right: -100px; top: 980px;42 background: linear-gradient(140deg, rgba(0,0,0,0.3), rgba(0,0,0,0));43 border: 2px solid rgba(25,35,28,0.45);44 transform: rotate(12deg);45 }46 47 .status {48 position: absolute;49 top: 0; left: 0;50 width: 100%; height: 96px;51 display: flex;52 align-items: center;53 justify-content: space-between;54 padding: 0 38px;55 font-size: 40px;56 letter-spacing: 0.5px;57 color: #f5f7f6;58 }59 .status .left { display: flex; align-items: center; gap: 20px; }60 .status .right { display: flex; align-items: center; gap: 28px; }61 62 /* simple right icons */63 .icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; }64 .icon svg { width: 44px; height: 44px; fill: #fff; }65 66 .date-widget {67 position: absolute;68 left: 68px; top: 210px;69 color: #f7faf7;70 }71 .date-widget .day {72 font-size: 72px; font-weight: 500;73 }74 .date-widget .weather {75 display: flex; align-items: center; gap: 18px;76 margin-top: 30px;77 font-size: 40px; opacity: 0.95;78 }79 .weather .waves svg { width: 70px; height: 36px; }80 81 /* apps grid */82 .apps { position: absolute; left: 0; width: 100%; }83 .apps.row1 { top: 1500px; }84 .apps.row2 { top: 1758px; }85 .app-row {86 display: flex;87 justify-content: space-around;88 padding: 0 60px;89 }90 .app {91 width: 210px;92 text-align: center;93 color: #f9f9f9;94 }95 .app .circle {96 width: 170px; height: 170px;97 background: #ffffff;98 border-radius: 50%;99 margin: 0 auto 20px auto;100 display: flex; align-items: center; justify-content: center;101 box-shadow: 0 2px 8px rgba(0,0,0,0.25);102 position: relative;103 }104 .app .label { font-size: 36px; text-shadow: 0 1px 1px rgba(0,0,0,0.25); }105 106 /* gmail badge */107 .badge {108 position: absolute;109 right: 14px; top: 14px;110 width: 34px; height: 34px; border-radius: 50%;111 background: #7bd1d5; border: 3px solid #fff;112 }113 114 /* Google search pill */115 .search {116 position: absolute;117 left: 66px; bottom: 210px;118 width: 948px; height: 128px;119 background: #222629;120 border: 2px solid rgba(255,255,255,0.08);121 border-radius: 70px;122 display: flex; align-items: center; justify-content: space-between;123 padding: 0 34px 0 40px;124 color: #dfe5df;125 box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);126 }127 .search .left-group { display: flex; align-items: center; gap: 22px; }128 .search .g {129 width: 64px; height: 64px; border-radius: 50%;130 background: #fff; display: flex; align-items: center; justify-content: center;131 font-weight: 700; color: #4285F4; font-size: 40px;132 }133 .search .prompt { font-size: 40px; opacity: 0.9; }134 135 /* bottom nav pill */136 .nav-pill {137 position: absolute; bottom: 40px; left: 50%;138 transform: translateX(-50%);139 width: 360px; height: 12px; background: rgba(230,235,230,0.6);140 border-radius: 8px;141 }142 143 /* small helpers for app glyphs */144 .glyph svg { width: 110px; height: 110px; }145 .glyph-small svg { width: 90px; height: 90px; }146</style>147</head>148<body>149<div id="render-target">150 <!-- abstract background shapes -->151 <div class="curve c1"></div>152 <div class="curve c2"></div>153 <div class="curve c3"></div>154 155 <!-- Status bar -->156 <div class="status">157 <div class="left">158 <div>11:03</div>159 </div>160 <div class="right">161 <!-- wifi -->162 <span class="icon">163 <svg viewBox="0 0 24 24">164 <path d="M12 18.5c-.9 0-1.7.7-1.7 1.5S11.1 21.5 12 21.5s1.7-.7 1.7-1.5-.8-1.5-1.7-1.5zm7.6-6.9C16.6 8.1 13.4 7 12 7s-4.6 1.1-7.6 4.6l1.5 1.3C8.4 9.8 10.6 9 12 9s3.6.8 6.2 3.5l1.4-1.9zM12 3C8.5 3 4.9 4.4 1.7 7.7L3.3 9c2.8-2.7 5.7-4 8.7-4s5.9 1.3 8.7 4l1.6-1.3C19.1 4.4 15.5 3 12 3z"/>165 </svg>166 </span>167 <!-- battery -->168 <span class="icon">169 <svg viewBox="0 0 24 24">170 <path d="M17 6h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-1v1h-2v-1H7a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h10zm0 2H7a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1z"/>171 </svg>172 </span>173 </div>174 </div>175 176 <!-- Date and weather -->177 <div class="date-widget">178 <div class="day">Mon, Sep 11</div>179 <div class="weather">180 <span class="waves">181 <svg viewBox="0 0 64 24">182 <path d="M4 8c4 4 8 4 12 0s8-4 12 0 8 4 12 0" stroke="#e7efe6" stroke-width="3" fill="none" stroke-linecap="round"/>183 <path d="M4 16c4 4 8 4 12 0s8-4 12 0 8 4 12 0" stroke="#e7efe6" stroke-width="3" fill="none" stroke-linecap="round" opacity="0.9"/>184 </svg>185 </span>186 <span>27°C</span>187 </div>188 </div>189 190 <!-- App icons row 1 -->191 <div class="apps row1">192 <div class="app-row">193 <!-- Play Store -->194 <div class="app">195 <div class="circle glyph">196 <svg viewBox="0 0 64 64">197 <path d="M14 10l28 22-28 22z" fill="#4CAF50"/>198 <path d="M42 32l10 8-10 8-10-8z" fill="#F4B400"/>199 <path d="M14 10l28 22-10 8L14 10z" fill="#4285F4"/>200 <path d="M14 54l28-22-10-8-18 30z" fill="#DB4437"/>201 </svg>202 </div>203 <div class="label">Play Store</div>204 </div>205 <!-- Gmail -->206 <div class="app">207 <div class="circle glyph">208 <div class="badge"></div>209 <svg viewBox="0 0 64 64">210 <path d="M8 18v28a4 4 0 0 0 4 4h40a4 4 0 0 0 4-4V18L32 34 8 18z" fill="#ffffff"/>211 <path d="M8 18l24 16 24-16v-2a4 4 0 0 0-4-4H12a4 4 0 0 0-4 4v2z" fill="#EA4335"/>212 <path d="M12 20v30h8V26l12 8 12-8v24h8V20L32 34 12 20z" fill="#34A853"/>213 <path d="M20 26v-8h24v8L32 34 20 26z" fill="#FBBC05"/>214 <path d="M12 20l20 14L52 20" fill="none" stroke="#4285F4" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>215 </svg>216 </div>217 <div class="label">Gmail</div>218 </div>219 <!-- Photos -->220 <div class="app">221 <div class="circle glyph-small">222 <svg viewBox="0 0 64 64">223 <circle cx="22" cy="22" r="12" fill="#FBBC05"/>224 <circle cx="42" cy="22" r="12" fill="#34A853"/>225 <circle cx="22" cy="42" r="12" fill="#EA4335"/>226 <circle cx="42" cy="42" r="12" fill="#4285F4"/>227 </svg>228 </div>229 <div class="label">Photos</div>230 </div>231 <!-- YouTube -->232 <div class="app">233 <div class="circle glyph-small">234 <svg viewBox="0 0 64 64">235 <rect x="8" y="18" width="48" height="28" rx="8" fill="#FF0000"/>236 <path d="M28 24l16 10-16 10V24z" fill="#fff"/>237 </svg>238 </div>239 <div class="label">YouTube</div>240 </div>241 </div>242 </div>243 244 <!-- App icons row 2 -->245 <div class="apps row2">246 <div class="app-row">247 <!-- Phone -->248 <div class="app">249 <div class="circle glyph-small">250 <svg viewBox="0 0 64 64">251 <path d="M22 14l8 6-4 7c3 5 7 9 12 12l7-4 6 8-4 6c-2 2-6 3-9 2-8-3-18-13-21-21-1-3 0-7 2-9l3-3z" fill="#1E88E5"/>252 </svg>253 </div>254 <div class="label">Phone</div>255 </div>256 <!-- Messages -->257 <div class="app">258 <div class="circle glyph-small">259 <svg viewBox="0 0 64 64">260 <path d="M10 14h44a6 6 0 0 1 6 6v18a6 6 0 0 1-6 6H26l-12 8v-8h-4a6 6 0 0 1-6-6V20a6 6 0 0 1 6-6z" fill="#2A74F5"/>261 <rect x="18" y="24" width="28" height="6" rx="3" fill="#ffffff"/>262 <rect x="18" y="34" width="20" height="6" rx="3" fill="#ffffff" opacity="0.95"/>263 </svg>264 </div>265 <div class="label">Messages</div>266 </div>267 <!-- Chrome -->268 <div class="app">269 <div class="circle glyph">270 <svg viewBox="0 0 64 64">271 <circle cx="32" cy="32" r="28" fill="#DB4437"/>272 <path d="M32 4a28 28 0 0 1 24 14H32z" fill="#F4B400"/>273 <path d="M8 18l12 22h12l12-22" fill="#0F9D58" opacity="0.95"/>274 <circle cx="32" cy="32" r="13" fill="#4285F4" stroke="#fff" stroke-width="2"/>275 </svg>276 </div>277 <div class="label">Chrome</div>278 </div>279 <!-- Camera -->280 <div class="app">281 <div class="circle glyph">282 <svg viewBox="0 0 64 64">283 <rect x="8" y="18" width="48" height="30" rx="6" fill="#424B57"/>284 <rect x="16" y="10" width="14" height="10" rx="3" fill="#2E3742"/>285 <circle cx="32" cy="33" r="11" fill="#1E88E5"/>286 <circle cx="32" cy="33" r="6" fill="#A6C8FF"/>287 <circle cx="50" cy="22" r="3" fill="#A3B1BE"/>288 </svg>289 </div>290 <div class="label">Camera</div>291 </div>292 </div>293 </div>294 295 <!-- Google search pill -->296 <div class="search">297 <div class="left-group">298 <div class="g">G</div>299 <div class="prompt">Search</div>300 </div>301 <div class="left-group">302 <!-- mic -->303 <span class="icon" style="width:56px;height:56px;">304 <svg viewBox="0 0 24 24">305 <path d="M12 14a3 3 0 0 0 3-3V7a3 3 0 0 0-6 0v4a3 3 0 0 0 3 3z" fill="#4CAF50"/>306 <path d="M5 11a7 7 0 0 0 14 0h-2a5 5 0 0 1-10 0H5z" fill="#FBBC05"/>307 <rect x="11" y="17" width="2" height="4" rx="1" fill="#4285F4"/>308 </svg>309 </span>310 <!-- lens/camera -->311 <span class="icon" style="width:56px;height:56px;">312 <svg viewBox="0 0 24 24">313 <rect x="3" y="5" width="18" height="14" rx="3" fill="#34A853"/>314 <circle cx="12" cy="12" r="4" fill="#ffffff"/>315 <circle cx="12" cy="12" r="2" fill="#4285F4"/>316 </svg>317 </span>318 </div>319 </div>320 321 <!-- bottom navigation pill -->322 <div class="nav-pill"></div>323</div>324</body>325</html>