GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Android Home UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: linear-gradient(180deg, #5f756a 0%, #6e8677 45%, #718c7b 100%);13 }14 15 /* Abstract background shapes to emulate wallpaper */16 .bg-shape {17 position: absolute;18 border-radius: 50%;19 filter: blur(2px);20 }21 .s1 { width: 1300px; height: 1300px; right: -380px; top: -80px; background: rgba(38,57,49,0.45); }22 .s2 { width: 1200px; height: 1900px; left: -300px; top: 280px; background: rgba(30,45,40,0.35); }23 .s3 { width: 900px; height: 900px; right: -200px; bottom: 300px; background: rgba(20,35,30,0.28); }24 .s4 { width: 700px; height: 1200px; left: 420px; top: 760px; background: rgba(220,235,225,0.08); border: 1px solid rgba(255,255,255,0.05); }25 26 /* Status bar */27 #statusbar {28 position: absolute;29 top: 0;30 left: 0;31 width: 100%;32 height: 90px;33 color: #ffffff;34 display: flex;35 align-items: center;36 justify-content: space-between;37 padding: 18px 28px;38 box-sizing: border-box;39 font-size: 34px;40 }41 #status-left { display: flex; align-items: center; gap: 18px; }42 #status-icons { display: flex; align-items: center; gap: 12px; opacity: 0.9; }43 .dot { width: 10px; height: 10px; background: #ffffff; border-radius: 50%; opacity: 0.8; }44 45 #status-right { display: flex; align-items: center; gap: 18px; }46 .sb-icon svg { width: 34px; height: 34px; }47 48 /* Header date & weather */49 #header {50 position: absolute;51 top: 130px;52 left: 70px;53 color: #ffffff;54 }55 #date {56 font-size: 64px;57 font-weight: 500;58 letter-spacing: 0.5px;59 margin-bottom: 22px;60 }61 #weather {62 display: flex;63 align-items: center;64 gap: 18px;65 color: #e2e4e3;66 font-size: 34px;67 }68 #weather svg { width: 70px; height: 34px; }69 70 /* App grid */71 .app-row {72 position: absolute;73 left: 50%;74 transform: translateX(-50%);75 width: 960px;76 display: flex;77 justify-content: space-between;78 align-items: flex-start;79 }80 #row1 { top: 1500px; }81 #row2 { top: 1785px; }82 83 .app {84 width: 200px;85 text-align: center;86 color: #ffffff;87 }88 .icon {89 width: 160px;90 height: 160px;91 margin: 0 auto 20px auto;92 border-radius: 50%;93 display: flex;94 align-items: center;95 justify-content: center;96 background: rgba(255,255,255,0.08);97 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12);98 }99 .label {100 font-size: 36px;101 letter-spacing: 0.2px;102 text-shadow: 0 1px 1px rgba(0,0,0,0.2);103 }104 105 /* Search bar */106 #search {107 position: absolute;108 left: 60px;109 bottom: 160px;110 width: 960px;111 height: 120px;112 background: rgba(255,255,255,0.95);113 border-radius: 60px;114 box-shadow: 0 8px 20px rgba(0,0,0,0.25);115 display: flex;116 align-items: center;117 justify-content: space-between;118 padding: 0 30px;119 box-sizing: border-box;120 }121 #search-left {122 display: flex;123 align-items: center;124 gap: 22px;125 }126 .g-badge {127 width: 70px;128 height: 70px;129 border-radius: 50%;130 overflow: hidden;131 position: relative;132 }133 .g-badge::before,134 .g-badge::after {135 content: "";136 position: absolute;137 }138 /* A simple multicolor "G" circle feel */139 .g-badge { background: conic-gradient(#2f7ef7 0 90deg, #34a853 90deg 180deg, #fbbc05 180deg 270deg, #ea4335 270deg 360deg); }140 #search-text { color: #6d6d6d; font-size: 34px; }141 #search-right { display: flex; align-items: center; gap: 26px; }142 #search-right .pill-icon svg { width: 48px; height: 48px; }143 144 /* Home indicator bar */145 #home-indicator {146 position: absolute;147 bottom: 52px;148 left: 50%;149 transform: translateX(-50%);150 width: 300px;151 height: 10px;152 border-radius: 6px;153 background: rgba(0,0,0,0.6);154 }155</style>156</head>157<body>158<div id="render-target">159 <!-- Wallpaper shapes -->160 <div class="bg-shape s1"></div>161 <div class="bg-shape s2"></div>162 <div class="bg-shape s3"></div>163 <div class="bg-shape s4"></div>164 165 <!-- Status bar -->166 <div id="statusbar">167 <div id="status-left">168 <div style="font-weight: 600;">8:20</div>169 <div id="status-icons">170 <div class="dot"></div>171 <div class="dot"></div>172 <div class="dot"></div>173 <div class="dot"></div>174 </div>175 </div>176 <div id="status-right">177 <div class="sb-icon">178 <!-- WiFi icon -->179 <svg viewBox="0 0 24 24">180 <path d="M12 18l2 2-2 2-2-2 2-2z" fill="#ffffff" opacity="0.0"></path>181 <path d="M2 8c5-4 15-4 20 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>182 <path d="M5 12c3-2 11-2 14 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>183 <circle cx="12" cy="16" r="2" fill="#ffffff"/>184 </svg>185 </div>186 <div class="sb-icon">187 <!-- Battery icon -->188 <svg viewBox="0 0 28 24">189 <rect x="2" y="5" width="20" height="14" rx="3" ry="3" stroke="#ffffff" stroke-width="2" fill="none"/>190 <rect x="4" y="7" width="16" height="10" fill="#ffffff"/>191 <rect x="22" y="9" width="3" height="6" rx="1" fill="#ffffff"/>192 </svg>193 </div>194 </div>195 </div>196 197 <!-- Date & Weather -->198 <div id="header">199 <div id="date">Tue, Jul 25</div>200 <div id="weather">201 <!-- Fog/waves icon -->202 <svg viewBox="0 0 120 40">203 <path d="M5 12c15 10 35-10 50 0s35 10 50 0" stroke="#e2e4e3" stroke-width="4" fill="none" stroke-linecap="round"/>204 <path d="M5 25c15 10 35-10 50 0s35 10 50 0" stroke="#e2e4e3" stroke-width="4" fill="none" stroke-linecap="round"/>205 </svg>206 <div>29°C · Today 32° / 27° · Fog</div>207 </div>208 </div>209 210 <!-- App rows -->211 <div id="row1" class="app-row">212 <div class="app">213 <div class="icon" style="background: radial-gradient(circle at 30% 30%, #62c0ff, #267cf7);">214 <!-- Play Store icon: simple triangle -->215 <svg viewBox="0 0 64 64">216 <polygon points="16,12 52,32 16,52" fill="#ffffff"/>217 </svg>218 </div>219 <div class="label">Play Store</div>220 </div>221 <div class="app">222 <div class="icon" style="background: radial-gradient(circle at 30% 30%, #ff7c7c, #e5383b);">223 <!-- Gmail envelope -->224 <svg viewBox="0 0 64 64">225 <rect x="10" y="18" width="44" height="28" rx="5" fill="none" stroke="#ffffff" stroke-width="4"/>226 <path d="M12 20l20 16 20-16" stroke="#ffffff" stroke-width="4" fill="none"/>227 </svg>228 </div>229 <div class="label">Gmail</div>230 </div>231 <div class="app">232 <div class="icon" style="background: radial-gradient(circle at 30% 30%, #ffcf6b, #f7a600);">233 <!-- Photos flower -->234 <svg viewBox="0 0 64 64">235 <circle cx="32" cy="32" r="6" fill="#ffffff"/>236 <path d="M32 12a12 12 0 0 1 0 24 12 12 0 0 1 0-24z" fill="none" stroke="#ffffff" stroke-width="4"/>237 <path d="M20 20a12 12 0 0 1 24 0 12 12 0 0 1-24 0z" fill="none" stroke="#ffffff" stroke-width="4"/>238 </svg>239 </div>240 <div class="label">Photos</div>241 </div>242 <div class="app">243 <div class="icon" style="background: radial-gradient(circle at 30% 30%, #ff6b6b, #de2b2b);">244 <!-- YouTube play -->245 <svg viewBox="0 0 64 64">246 <rect x="14" y="18" width="36" height="28" rx="8" fill="none" stroke="#ffffff" stroke-width="4"/>247 <polygon points="28,24 28,40 44,32" fill="#ffffff"/>248 </svg>249 </div>250 <div class="label">YouTube</div>251 </div>252 </div>253 254 <div id="row2" class="app-row">255 <div class="app">256 <div class="icon" style="background: radial-gradient(circle at 30% 30%, #8fe8a0, #2aa74a);">257 <!-- Phone handset -->258 <svg viewBox="0 0 64 64">259 <path d="M18 18c10 10 18 10 28 28l-6 6c-16-8-24-16-32-32l6-6z" fill="none" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>260 </svg>261 </div>262 <div class="label">Phone</div>263 </div>264 <div class="app">265 <div class="icon" style="background: radial-gradient(circle at 30% 30%, #96b6ff, #3f6bff);">266 <!-- Messages bubble -->267 <svg viewBox="0 0 64 64">268 <rect x="10" y="14" width="44" height="30" rx="8" fill="none" stroke="#ffffff" stroke-width="4"/>269 <path d="M24 44l6 8 6-8" stroke="#ffffff" stroke-width="4" fill="none" stroke-linecap="round"/>270 </svg>271 </div>272 <div class="label">Messages</div>273 </div>274 <div class="app">275 <div class="icon" style="background: radial-gradient(circle at 30% 30%, #ffd86b, #ff6b6b);">276 <!-- Chrome simple ring -->277 <svg viewBox="0 0 64 64">278 <circle cx="32" cy="32" r="20" fill="none" stroke="#ffffff" stroke-width="4"/>279 <circle cx="32" cy="32" r="8" fill="#ffffff"/>280 </svg>281 </div>282 <div class="label">Chrome</div>283 </div>284 <div class="app">285 <div class="icon" style="background: radial-gradient(circle at 30% 30%, #9fd1ff, #3868a5);">286 <!-- Camera icon -->287 <svg viewBox="0 0 64 64">288 <rect x="12" y="18" width="40" height="26" rx="6" fill="none" stroke="#ffffff" stroke-width="4"/>289 <circle cx="32" cy="31" r="9" fill="none" stroke="#ffffff" stroke-width="4"/>290 <rect x="20" y="12" width="12" height="8" rx="2" fill="#ffffff"/>291 </svg>292 </div>293 <div class="label">Camera</div>294 </div>295 </div>296 297 <!-- Search bar -->298 <div id="search">299 <div id="search-left">300 <div class="g-badge"></div>301 <div id="search-text">Search</div>302 </div>303 <div id="search-right">304 <div class="pill-icon">305 <!-- Mic -->306 <svg viewBox="0 0 24 24">307 <rect x="8" y="4" width="8" height="10" rx="4" fill="#5a5a5a"/>308 <path d="M6 11c0 4 12 4 12 0" stroke="#5a5a5a" stroke-width="2" fill="none"/>309 <path d="M12 14v4" stroke="#5a5a5a" stroke-width="2" />310 <rect x="9" y="18" width="6" height="2" fill="#5a5a5a"/>311 </svg>312 </div>313 <div class="pill-icon">314 <!-- Lens/Camera -->315 <svg viewBox="0 0 24 24">316 <rect x="4" y="6" width="16" height="12" rx="3" fill="#5a5a5a"/>317 <circle cx="12" cy="12" r="4" fill="#ffffff"/>318 </svg>319 </div>320 </div>321 </div>322 323 <!-- Home indicator -->324 <div id="home-indicator"></div>325</div>326</body>327</html>