GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Android Home UI - Mock</title>5<meta name="viewport" content="width=1440, initial-scale=1">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1440px;10 height: 3120px;11 position: relative;12 overflow: hidden;13 background: linear-gradient(180deg, #1e2a2b 0%, #0e1416 100%);14 color: #fff;15 }16 17 /* Wallpaper placeholder (photo) */18 .wallpaper {19 position: absolute;20 left: 0; top: 0; width: 100%; height: 100%;21 background: #E0E0E0;22 border: 1px solid #BDBDBD;23 display: flex; align-items: center; justify-content: center;24 color: #757575; font-size: 44px; letter-spacing: 0.5px;25 z-index: 1;26 }27 /* Dark overlay to match screenshot mood */28 .overlay {29 position: absolute; inset: 0;30 background: linear-gradient(180deg, rgba(13,20,22,0.70) 0%, rgba(13,20,22,0.85) 70%, rgba(13,20,22,0.95) 100%);31 z-index: 2;32 }33 34 /* Status bar */35 .status-bar {36 position: absolute; left: 0; top: 0; width: 100%; height: 140px;37 padding: 0 48px;38 display: flex; align-items: center; justify-content: space-between;39 z-index: 3; font-size: 58px; font-weight: 600;40 }41 .status-icons { display: flex; align-items: center; gap: 36px; }42 .status-icons svg { width: 70px; height: 70px; fill: #fff; opacity: 0.95; }43 44 /* App grid */45 .apps {46 position: absolute; left: 40px; right: 40px; top: 260px;47 z-index: 3;48 display: grid;49 grid-template-columns: repeat(4, 1fr);50 grid-row-gap: 140px;51 grid-column-gap: 40px;52 }53 .app {54 display: flex; align-items: center; justify-content: center; flex-direction: column;55 }56 .icon {57 width: 230px; height: 230px; border-radius: 50%;58 display: flex; align-items: center; justify-content: center;59 color: #fff; font-weight: 700; font-size: 64px;60 box-shadow: 0 8px 18px rgba(0,0,0,0.25);61 border: 6px solid rgba(255,255,255,0.06);62 }63 .label {64 margin-top: 28px; text-align: center; font-size: 46px; font-weight: 600;65 text-shadow: 0 2px 4px rgba(0,0,0,0.3);66 }67 68 /* Individual icon colors approximating the screenshot */69 .c-orange { background: #f06c29; }70 .c-green { background: #59c36a; }71 .c-mint { background: #b7eac7; color: #1e5a3e; }72 .c-navy { background: #263e60; }73 .c-amber { background: #f5a623; }74 .c-lime { background: #8bd341; color:#11360f; }75 .c-charcoal { background: #4a4a4a; }76 .c-purple { background: #8d2f99; }77 .c-blue { background: #4285f4; }78 .c-red { background: #c33b2f; }79 .c-steel { background: #5b6f82; }80 .c-yellow { background: #fce45c; color:#2b2b2b;}81 .c-deepblue { background: #1c4e9a; }82 .c-teal { background: #3bb0a9; }83 .c-marine { background: #2f6c77; }84 .c-cyan { background: #57c2ff; }85 .c-burgundy { background: #7c2438; }86 .c-royal { background: #2a52be; }87 .c-indigo { background: #3a4aa6; }88 89 /* Dock */90 .dock {91 position: absolute; left: 80px; right: 80px; bottom: 420px;92 z-index: 3;93 display: grid; grid-template-columns: repeat(4, 1fr);94 justify-items: center; align-items: center; gap: 80px;95 }96 .dock .icon {97 width: 210px; height: 210px; border-width: 5px; font-size: 58px;98 background: rgba(255,255,255,0.15);99 border-color: rgba(255,255,255,0.08);100 }101 102 /* Google Search bar */103 .search-bar {104 position: absolute; left: 72px; right: 72px; bottom: 140px;105 height: 190px; border-radius: 120px;106 background: rgba(255,255,255,0.06);107 border: 2px solid rgba(255,255,255,0.18);108 backdrop-filter: blur(6px);109 z-index: 3; display: flex; align-items: center; justify-content: space-between;110 padding: 0 56px;111 }112 .search-left {113 display: flex; align-items: center; gap: 32px; font-size: 60px;114 }115 .google-g {116 width: 120px; height: 120px; border-radius: 50%;117 background: #fff; color: #4285f4; display: flex; align-items: center; justify-content: center;118 font-weight: 900; font-size: 70px;119 box-shadow: inset 0 0 0 4px #eaeaea;120 }121 .search-right { display: flex; align-items: center; gap: 26px; }122 .search-right .btn {123 width: 120px; height: 120px; border-radius: 50%;124 background: rgba(255,255,255,0.14);125 border: 2px solid rgba(255,255,255,0.18);126 display: flex; align-items: center; justify-content: center;127 }128 .search-right svg { width: 64px; height: 64px; fill: #fff; }129 130 /* Utility tiny labels for truncated app names */131 .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }132</style>133</head>134<body>135<div id="render-target">136 <div class="wallpaper">[IMG: Dark building background]</div>137 <div class="overlay"></div>138 139 <!-- Status Bar -->140 <div class="status-bar">141 <div>8:40</div>142 <div class="status-icons">143 <!-- Wi-Fi -->144 <svg viewBox="0 0 24 24">145 <path d="M12 18c.9 0 1.6.7 1.6 1.6S12.9 21.2 12 21.2s-1.6-.7-1.6-1.6S11.1 18 12 18zm-4.5-3.6l1.3 1.3c1.8-1.8 4.7-1.8 6.5 0l1.3-1.3c-2.5-2.6-6.5-2.6-9.1 0zm-3.6-3.6l1.3 1.3c3.4-3.4 8.9-3.4 12.3 0l1.3-1.3c-4.1-4.1-10.7-4.1-14.9 0z"/>146 </svg>147 <!-- Battery -->148 <svg viewBox="0 0 24 24">149 <path d="M18 7h1v10h-1zM3 8.5C3 7.7 3.7 7 4.5 7h11c.8 0 1.5.7 1.5 1.5v7c0 .8-.7 1.5-1.5 1.5h-11C3.7 18 3 17.3 3 16.5v-8z"/>150 </svg>151 </div>152 </div>153 154 <!-- Apps Grid -->155 <div class="apps">156 <!-- Row 1 -->157 <div class="app">158 <div class="icon c-orange">M</div>159 <div class="label">Migros</div>160 </div>161 <div class="app">162 <div class="icon c-green">ES</div>163 <div class="label">EatSure</div>164 </div>165 <div class="app">166 <div class="icon c-mint">FH</div>167 <div class="label truncate">Freshtohome</div>168 </div>169 <div class="app">170 <div class="icon c-navy">📘</div>171 <div class="label">Kindle</div>172 </div>173 174 <!-- Row 2 -->175 <div class="app">176 <div class="icon c-amber">ib</div>177 <div class="label truncate">Industrybu...</div>178 </div>179 <div class="app">180 <div class="icon c-lime">DM</div>181 <div class="label truncate">DMart Ready</div>182 </div>183 <div class="app">184 <div class="icon c-charcoal">185 <svg viewBox="0 0 24 24" style="width:110px;height:110px;fill:#fff;">186 <path d="M12 4c.6 0 1 .4 1 1v5.6l2.7 1.6c.5.3.6 1 .3 1.4-.3.5-1 .6-1.4.3l-3.3-2c-.2-.1-.3-.4-.3-.6V5c0-.6.4-1 1-1z"/>187 </svg>188 </div>189 <div class="label truncate">Smart Reco...</div>190 </div>191 <div class="app">192 <div class="icon c-purple">L</div>193 <div class="label">LoveLocal</div>194 </div>195 196 <!-- Row 3 -->197 <div class="app">198 <div class="icon c-blue">199 <svg viewBox="0 0 24 24" style="width:110px;height:110px;fill:#fff;">200 <path d="M12 3c2.5 0 4.5 2 4.5 4.5S14.5 12 12 12 7.5 10 7.5 7.5 9.5 3 12 3zm-7.5 17v-1c0-3.3 2.7-6 6-6h3c3.3 0 6 2.7 6 6v1H4.5z"/>201 </svg>202 </div>203 <div class="label truncate">Easy Voice ...</div>204 </div>205 <div class="app">206 <div class="icon c-red">ASR</div>207 <div class="label">ASR</div>208 </div>209 <div class="app">210 <div class="icon c-steel">PB</div>211 <div class="label">Play Books</div>212 </div>213 <div class="app">214 <div class="icon c-red">215 <svg viewBox="0 0 24 24" style="width:110px;height:110px;fill:#fff;">216 <path d="M7 10V8c0-2.8 2.2-5 5-5s5 2.2 5 5v2h2v9H5v-9h2zm2 0h6V8c0-1.7-1.3-3-3-3s-3 1.3-3 3v2z"/>217 </svg>218 </div>219 <div class="label truncate">Voice Reco...</div>220 </div>221 222 <!-- Row 4 -->223 <div class="app">224 <div class="icon c-teal">REC</div>225 <div class="label truncate">Sound Rec...</div>226 </div>227 <div class="app">228 <div class="icon c-yellow">&</div>229 <div class="label">Everand</div>230 </div>231 <div class="app">232 <div class="icon c-deepblue">233 <svg viewBox="0 0 24 24" style="width:110px;height:110px;fill:#ffcc66;">234 <path d="M5 4h9l5 4v12H5V4zm9 0v4h5"/>235 </svg>236 </div>237 <div class="label">ReadEra</div>238 </div>239 <div class="app">240 <div class="icon c-marine">📚</div>241 <div class="label">PocketBook</div>242 </div>243 244 <!-- Row 5 -->245 <div class="app">246 <div class="icon c-cyan">OS</div>247 <div class="label">OfficeSuite</div>248 </div>249 <div class="app">250 <div class="icon c-burgundy">P</div>251 <div class="label">PowerPoint</div>252 </div>253 <div class="app">254 <div class="icon c-royal">W</div>255 <div class="label truncate">Docx - All i...</div>256 </div>257 <div class="app">258 <div class="icon c-indigo">W</div>259 <div class="label">Word Office</div>260 </div>261 </div>262 263 <!-- Dock -->264 <div class="dock">265 <div class="icon">📞</div>266 <div class="icon">💬</div>267 <div class="icon">🌐</div>268 <div class="icon">📷</div>269 </div>270 271 <!-- Google Search Bar -->272 <div class="search-bar">273 <div class="search-left">274 <div class="google-g">G</div>275 </div>276 <div class="search-right">277 <!-- Microphone -->278 <div class="btn">279 <svg viewBox="0 0 24 24">280 <path d="M12 14c1.7 0 3-1.3 3-3V6c0-1.7-1.3-3-3-3s-3 1.3-3 3v5c0 1.7 1.3 3 3 3zm5-3c0 2.6-2.1 4.8-4.7 5v2h3v2H8v-2h3v-2c-2.6-.2-4.7-2.4-4.7-5h2c0 2 1.7 3.7 3.7 3.7S17 13 17 11h2z"/>281 </svg>282 </div>283 <!-- Camera/Lens -->284 <div class="btn">285 <svg viewBox="0 0 24 24">286 <path d="M9 4h6l1.5 2H20c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2h3L9 4zm3 5a5 5 0 100 10 5 5 0 000-10zm0 2.5a2.5 2.5 0 110 5 2.5 2.5 0 010-5z"/>287 </svg>288 </div>289 </div>290 </div>291</div>292</body>293</html>