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 UI 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 background:15 radial-gradient(1200px 1200px at 70% 30%, #1c1f23 0%, #121416 60%, #0e1012 100%),16 repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 2px, rgba(0,0,0,0.06) 8px, rgba(0,0,0,0.06) 12px);17 font-family: "Roboto", Arial, sans-serif;18 color: #fff;19 }20 21 /* Status bar */22 .status-bar {23 position: absolute;24 top: 0;25 left: 0;26 width: 1080px;27 height: 96px;28 display: flex;29 align-items: center;30 justify-content: space-between;31 padding: 0 36px;32 color: rgba(255,255,255,0.92);33 font-weight: 500;34 font-size: 40px;35 letter-spacing: 0.5px;36 }37 .sb-left, .sb-right {38 display: flex;39 align-items: center;40 gap: 28px;41 }42 .sb-icon { width: 40px; height: 40px; opacity: 0.85; }43 44 /* Date & weather */45 .date-block {46 position: absolute;47 top: 260px;48 left: 80px;49 }50 .date-text {51 font-size: 72px;52 font-weight: 500;53 margin-bottom: 24px;54 text-shadow: 0 2px 8px rgba(0,0,0,0.35);55 }56 .weather {57 display: flex;58 align-items: center;59 gap: 18px;60 font-size: 44px;61 opacity: 0.9;62 }63 .weather .icon { width: 60px; height: 60px; opacity: 0.9; }64 65 /* App grid */66 .apps-row {67 position: absolute;68 left: 0;69 width: 100%;70 display: flex;71 justify-content: space-around;72 }73 .apps-row.row1 { top: 1460px; }74 .apps-row.row2 { top: 1760px; }75 .app {76 width: 270px;77 text-align: center;78 color: #fff;79 }80 .icon-circle {81 width: 168px;82 height: 168px;83 background: #fff;84 border-radius: 50%;85 margin: 0 auto 26px;86 display: grid;87 place-items: center;88 box-shadow: 0 8px 24px rgba(0,0,0,0.35);89 position: relative;90 }91 .badge {92 position: absolute;93 right: 12px;94 top: 12px;95 width: 28px;96 height: 28px;97 background: #c5a3ff;98 border-radius: 50%;99 box-shadow: 0 0 0 4px #fff;100 }101 .label {102 font-size: 40px;103 opacity: 0.95;104 }105 106 /* Search bar */107 .search-bar {108 position: absolute;109 left: 60px;110 right: 60px;111 bottom: 180px;112 height: 148px;113 background: #2d3035;114 border-radius: 74px;115 display: flex;116 align-items: center;117 padding: 0 40px;118 box-shadow: 0 10px 24px rgba(0,0,0,0.45);119 gap: 28px;120 }121 .search-pill {122 flex: 1;123 color: rgba(255,255,255,0.85);124 font-size: 44px;125 }126 .search-icon { width: 64px; height: 64px; }127 .google-g {128 width: 64px; height: 64px;129 border-radius: 50%;130 background: #fff;131 display: grid; place-items: center;132 }133 134 /* Home indicator */135 .home-indicator {136 position: absolute;137 left: 50%;138 transform: translateX(-50%);139 bottom: 72px;140 width: 360px;141 height: 16px;142 background: rgba(255,255,255,0.85);143 border-radius: 8px;144 }145</style>146</head>147<body>148<div id="render-target">149 150 <!-- Status Bar -->151 <div class="status-bar">152 <div class="sb-left">153 <div style="margin-right:8px;">2:10</div>154 <!-- Moon -->155 <svg class="sb-icon" viewBox="0 0 24 24">156 <path fill="#fff" d="M12.6 2.5c-2.9 1-5 3.8-5 7.1a7.4 7.4 0 0 0 7.6 7.4c2.2 0 4.2-1 5.6-2.6A8.5 8.5 0 0 1 12.6 2.5z"/>157 </svg>158 <!-- Chat bubble -->159 <svg class="sb-icon" viewBox="0 0 24 24">160 <path fill="#fff" d="M4 5h16v10H9l-5 4V5z"/>161 </svg>162 <!-- Letter T -->163 <svg class="sb-icon" viewBox="0 0 24 24">164 <path fill="#fff" d="M4 4h16v3H13v13H11V7H4z"/>165 </svg>166 <!-- Dot -->167 <svg class="sb-icon" viewBox="0 0 24 24">168 <circle cx="12" cy="12" r="3" fill="#fff"/>169 </svg>170 </div>171 <div class="sb-right">172 <!-- Location pin -->173 <svg class="sb-icon" viewBox="0 0 24 24">174 <path fill="#fff" d="M12 3a7 7 0 0 0-7 7c0 5 7 11 7 11s7-6 7-11a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/>175 </svg>176 <!-- Do not disturb -->177 <svg class="sb-icon" viewBox="0 0 24 24">178 <circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"/>179 <rect x="6" y="11" width="12" height="2" fill="#fff"/>180 </svg>181 <!-- Wi-Fi -->182 <svg class="sb-icon" viewBox="0 0 24 24">183 <path fill="#fff" d="M2 9a14 14 0 0 1 20 0l-2 2a11 11 0 0 0-16 0L2 9zm4 5a8 8 0 0 1 12 0l-2 2a5 5 0 0 0-8 0l-2-2zm6 6 3-3-3-3-3 3 3 3z"/>184 </svg>185 <!-- Battery -->186 <svg class="sb-icon" viewBox="0 0 26 24">187 <rect x="2" y="5" width="18" height="14" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>188 <rect x="4" y="7" width="14" height="10" fill="#fff"/>189 <rect x="21" y="9" width="3" height="6" rx="1" fill="#fff"/>190 </svg>191 </div>192 </div>193 194 <!-- Date & Weather -->195 <div class="date-block">196 <div class="date-text">Fri, Dec 22</div>197 <div class="weather">198 <svg class="icon" viewBox="0 0 64 64">199 <path d="M6 24c8 6 16 6 24 0s16-6 24 0" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>200 <path d="M6 40c8 6 16 6 24 0s16-6 24 0" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"/>201 </svg>202 <div>21°C</div>203 </div>204 </div>205 206 <!-- Apps Row 1 -->207 <div class="apps-row row1">208 <!-- Play Store -->209 <div class="app">210 <div class="icon-circle">211 <svg width="120" height="120" viewBox="0 0 100 100">212 <defs>213 <linearGradient id="tri" x1="0" y1="0" x2="1" y2="1">214 <stop offset="0%" stop-color="#34a853"/>215 <stop offset="50%" stop-color="#4285f4"/>216 <stop offset="100%" stop-color="#fbbc05"/>217 </linearGradient>218 </defs>219 <path d="M18 18 L82 50 L18 82 Z" fill="url(#tri)"/>220 <circle cx="75" cy="50" r="8" fill="#ea4335"/>221 </svg>222 </div>223 <div class="label">Play Store</div>224 </div>225 226 <!-- Gmail -->227 <div class="app">228 <div class="icon-circle">229 <div class="badge"></div>230 <svg width="120" height="120" viewBox="0 0 100 100">231 <rect x="18" y="30" width="64" height="40" rx="8" fill="#fff" stroke="#ccc"/>232 <path d="M18 30 L50 54 L82 30" stroke-width="12" stroke="#ea4335" fill="none"/>233 <path d="M18 70 V40" stroke="#34a853" stroke-width="12"/>234 <path d="M82 70 V40" stroke="#4285f4" stroke-width="12"/>235 <path d="M40 30 L50 38 L60 30" stroke="#fbbc05" stroke-width="10"/>236 </svg>237 </div>238 <div class="label">Gmail</div>239 </div>240 241 <!-- Photos -->242 <div class="app">243 <div class="icon-circle">244 <svg width="120" height="120" viewBox="0 0 100 100">245 <circle cx="50" cy="28" r="18" fill="#fbbc05"/>246 <circle cx="72" cy="50" r="18" fill="#34a853"/>247 <circle cx="50" cy="72" r="18" fill="#4285f4"/>248 <circle cx="28" cy="50" r="18" fill="#ea4335"/>249 <circle cx="50" cy="50" r="10" fill="#fff"/>250 </svg>251 </div>252 <div class="label">Photos</div>253 </div>254 255 <!-- YouTube -->256 <div class="app">257 <div class="icon-circle">258 <div class="badge"></div>259 <svg width="120" height="120" viewBox="0 0 100 100">260 <rect x="18" y="28" width="64" height="44" rx="14" fill="#ff0000"/>261 <path d="M44 36 L64 50 L44 64 Z" fill="#fff"/>262 </svg>263 </div>264 <div class="label">YouTube</div>265 </div>266 </div>267 268 <!-- Apps Row 2 (Dock) -->269 <div class="apps-row row2">270 <!-- Phone -->271 <div class="app">272 <div class="icon-circle">273 <svg width="120" height="120" viewBox="0 0 100 100">274 <path d="M30 26c14 20 24 30 44 44l-10 10c-22-12-34-24-46-46l12-8z" fill="#1a73e8"/>275 <rect x="58" y="56" width="12" height="20" rx="6" fill="#3c8df0"/>276 </svg>277 </div>278 </div>279 280 <!-- Messages -->281 <div class="app">282 <div class="icon-circle">283 <svg width="120" height="120" viewBox="0 0 100 100">284 <rect x="18" y="24" width="64" height="44" rx="12" fill="#4285f4"/>285 <rect x="30" y="40" width="40" height="10" rx="5" fill="#cfe1ff"/>286 <path d="M40 68 L30 82 L30 68 Z" fill="#4285f4"/>287 </svg>288 </div>289 </div>290 291 <!-- Chrome -->292 <div class="app">293 <div class="icon-circle">294 <svg width="120" height="120" viewBox="0 0 100 100">295 <circle cx="50" cy="50" r="40" fill="#ea4335"/>296 <path d="M50 10 A40 40 0 0 1 90 50 L70 50 A20 20 0 0 0 50 30Z" fill="#fbbc05"/>297 <path d="M10 50 A40 40 0 0 1 50 10 L40 30 A20 20 0 0 0 30 50Z" fill="#34a853"/>298 <circle cx="50" cy="50" r="18" fill="#4285f4" stroke="#fff" stroke-width="6"/>299 </svg>300 </div>301 </div>302 303 <!-- Camera -->304 <div class="app">305 <div class="icon-circle">306 <svg width="120" height="120" viewBox="0 0 100 100">307 <rect x="18" y="34" width="64" height="40" rx="10" fill="#3b3f45"/>308 <rect x="30" y="24" width="20" height="12" rx="4" fill="#2c2f34"/>309 <circle cx="50" cy="54" r="18" fill="#5b6bff"/>310 <circle cx="50" cy="54" r="10" fill="#bcd1ff"/>311 </svg>312 </div>313 </div>314 </div>315 316 <!-- Search bar -->317 <div class="search-bar">318 <div class="google-g">319 <svg class="search-icon" viewBox="0 0 24 24">320 <path fill="#ea4335" d="M12 2a10 10 0 0 0-9 6l3 2a6 6 0 0 1 6-4z"/>321 <path fill="#34a853" d="M3 8a10 10 0 0 0 9 14v-4a6 6 0 0 1-6-6z"/>322 <path fill="#4285f4" d="M12 22a10 10 0 0 0 7-3l-3-3a6 6 0 0 1-4 2v4z"/>323 <path fill="#fbbc05" d="M19 19a10 10 0 0 0 0-14l-3 3a6 6 0 0 1 0 8l3 3z"/>324 </svg>325 </div>326 <div class="search-pill">Search…</div>327 <!-- Mic -->328 <svg class="search-icon" viewBox="0 0 24 24">329 <rect x="8" y="4" width="8" height="12" rx="4" fill="#ff5252"/>330 <path d="M6 12a6 6 0 0 0 12 0" stroke="#fff" stroke-width="2" fill="none"/>331 <rect x="11" y="18" width="2" height="4" fill="#fff"/>332 </svg>333 <!-- Camera -->334 <svg class="search-icon" viewBox="0 0 24 24">335 <rect x="3" y="6" width="18" height="12" rx="3" fill="#4caf50"/>336 <rect x="8" y="3" width="8" height="4" rx="2" fill="#388e3c"/>337 <circle cx="12" cy="12" r="4" fill="#c8e6c9"/>338 </svg>339 </div>340 341 <!-- Home indicator -->342 <div class="home-indicator"></div>343</div>344</body>345</html>