GD-ML/AndroidCode
13.4k
1<html>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 border-radius: 0;13 background: #c7c3d1;14 }15 /* Wallpaper placeholder */16 .wallpaper {17 position: absolute;18 inset: 0;19 background: #E0E0E0;20 border: 1px solid #BDBDBD;21 display: flex;22 align-items: center;23 justify-content: center;24 color: #757575;25 font-size: 28px;26 letter-spacing: 0.5px;27 }28 /* Status bar */29 .status-bar {30 position: absolute;31 top: 24px;32 left: 0;33 width: 100%;34 height: 80px;35 color: #ffffff;36 padding: 0 36px;37 display: flex;38 align-items: center;39 justify-content: space-between;40 pointer-events: none;41 text-shadow: 0 1px 2px rgba(0,0,0,0.4);42 }43 .status-left {44 display: flex;45 align-items: center;46 gap: 18px;47 font-size: 46px;48 font-weight: 600;49 }50 .status-right {51 display: flex;52 align-items: center;53 gap: 28px;54 }55 /* Weather widget */56 .weather {57 position: absolute;58 top: 180px;59 left: 72px;60 width: 936px;61 color: #ffffff;62 text-shadow: 0 1px 2px rgba(0,0,0,0.35);63 }64 .weather .date {65 font-size: 56px;66 font-weight: 600;67 margin-bottom: 16px;68 }69 .weather .row {70 display: flex;71 align-items: center;72 gap: 16px;73 font-size: 34px;74 opacity: 0.95;75 }76 /* App rows */77 .app-row {78 position: absolute;79 left: 0;80 width: 100%;81 display: flex;82 justify-content: space-around;83 padding: 0 40px;84 }85 .row-top { top: 1420px; }86 .row-bottom { top: 1780px; }87 .app {88 width: 190px;89 text-align: center;90 color: #ffffff;91 text-shadow: 0 1px 2px rgba(0,0,0,0.45);92 }93 .icon-circle {94 width: 170px;95 height: 170px;96 border-radius: 50%;97 background: #ffffff;98 box-shadow: 0 10px 28px rgba(0,0,0,0.25);99 margin: 0 auto 22px;100 display: flex;101 align-items: center;102 justify-content: center;103 }104 .app label {105 font-size: 36px;106 }107 108 /* Search pill */109 .search-pill {110 position: absolute;111 left: 60px;112 bottom: 180px;113 width: 960px;114 height: 120px;115 background: #2f2f2f;116 border-radius: 60px;117 box-shadow: 0 10px 28px rgba(0,0,0,0.35);118 display: flex;119 align-items: center;120 justify-content: space-between;121 padding: 0 40px;122 color: #ffffff;123 }124 .pill-left {125 display: flex;126 align-items: center;127 gap: 22px;128 font-size: 44px;129 font-weight: 600;130 }131 .pill-right {132 display: flex;133 align-items: center;134 gap: 30px;135 }136 137 /* Gesture bar */138 .gesture {139 position: absolute;140 bottom: 74px;141 left: 390px;142 width: 300px;143 height: 12px;144 background: #4c4c4c;145 border-radius: 6px;146 opacity: 0.75;147 }148 149 /* Helper */150 svg { display: block; }151</style>152</head>153<body>154<div id="render-target">155 <div class="wallpaper">[IMG: City Bridge Wallpaper]</div>156 157 <!-- Status Bar -->158 <div class="status-bar">159 <div class="status-left">160 <div>10:02</div>161 <!-- simple small icon -->162 <svg width="34" height="34" viewBox="0 0 24 24">163 <path d="M12 3l9 7-9 7-9-7 9-7z" fill="#ffffff" opacity="0.75"></path>164 </svg>165 </div>166 <div class="status-right">167 <!-- Wi-Fi -->168 <svg width="44" height="44" viewBox="0 0 24 24">169 <path d="M12 18.5l1.6-1.6a2.3 2.3 0 00-3.2 0L12 18.5z" fill="#fff"></path>170 <path d="M5 12.5c3.9-3.9 10.2-3.9 14.1 0" stroke="#fff" stroke-width="2" fill="none" opacity="0.9"></path>171 <path d="M7.8 15.1c2.8-2.8 5.6-2.8 8.4 0" stroke="#fff" stroke-width="2" fill="none" opacity="0.9"></path>172 </svg>173 <!-- Battery -->174 <svg width="50" height="44" viewBox="0 0 26 24">175 <rect x="1" y="5" width="18" height="14" rx="2" ry="2" stroke="#fff" stroke-width="2" fill="none"></rect>176 <rect x="3" y="7" width="14" height="10" fill="#fff"></rect>177 <rect x="20" y="9" width="4" height="6" rx="1" fill="#fff"></rect>178 </svg>179 </div>180 </div>181 182 <!-- Weather Widget -->183 <div class="weather">184 <div class="date">Thu, Jun 22</div>185 <div class="row">186 <!-- Weather icon: sun + cloud -->187 <svg width="52" height="52" viewBox="0 0 64 64">188 <circle cx="22" cy="22" r="12" fill="#FFD54F"></circle>189 <ellipse cx="38" cy="36" rx="16" ry="10" fill="#ECEFF1"></ellipse>190 <ellipse cx="24" cy="38" rx="10" ry="8" fill="#ECEFF1"></ellipse>191 </svg>192 <div>32°C · Today 37° / 29° · Partly cloudy</div>193 </div>194 </div>195 196 <!-- Top App Row -->197 <div class="app-row row-top">198 <div class="app">199 <div class="icon-circle">200 <!-- Play Store -->201 <svg width="120" height="120" viewBox="0 0 100 100">202 <defs>203 <linearGradient id="pg" x1="0" y1="0" x2="1" y2="1">204 <stop offset="0" stop-color="#00E5FF"/>205 <stop offset="1" stop-color="#7C4DFF"/>206 </linearGradient>207 </defs>208 <polygon points="20,15 80,50 20,85" fill="url(#pg)"></polygon>209 <rect x="20" y="15" width="12" height="70" fill="#00C853" opacity="0.85"></rect>210 <polygon points="32,28 72,50 32,72" fill="#FFC107" opacity="0.95"></polygon>211 </svg>212 </div>213 <label>Play Store</label>214 </div>215 216 <div class="app">217 <div class="icon-circle">218 <!-- Gmail -->219 <svg width="120" height="120" viewBox="0 0 100 100">220 <rect x="18" y="28" width="64" height="44" rx="10" fill="#ffffff" stroke="#B0BEC5" stroke-width="6"></rect>221 <path d="M22 32 L50 52 L78 32" stroke="#E53935" stroke-width="10" fill="none"></path>222 <path d="M22 32 V72" stroke="#1E88E5" stroke-width="10"></path>223 <path d="M78 32 V72" stroke="#43A047" stroke-width="10"></path>224 </svg>225 </div>226 <label>Gmail</label>227 </div>228 229 <div class="app">230 <div class="icon-circle">231 <!-- Photos -->232 <svg width="120" height="120" viewBox="0 0 100 100">233 <circle cx="50" cy="36" r="18" fill="#FBC02D"></circle>234 <circle cx="64" cy="50" r="18" fill="#1E88E5"></circle>235 <circle cx="50" cy="64" r="18" fill="#43A047"></circle>236 <circle cx="36" cy="50" r="18" fill="#E53935"></circle>237 <circle cx="50" cy="50" r="12" fill="#ffffff"></circle>238 </svg>239 </div>240 <label>Photos</label>241 </div>242 243 <div class="app">244 <div class="icon-circle">245 <!-- YouTube -->246 <svg width="120" height="120" viewBox="0 0 100 100">247 <rect x="20" y="30" width="60" height="40" rx="10" fill="#FF3D00"></rect>248 <polygon points="44,40 44,60 64,50" fill="#ffffff"></polygon>249 </svg>250 </div>251 <label>YouTube</label>252 </div>253 </div>254 255 <!-- Bottom App Row -->256 <div class="app-row row-bottom">257 <div class="app">258 <div class="icon-circle">259 <!-- Phone -->260 <svg width="120" height="120" viewBox="0 0 100 100">261 <path d="M32 24c5-5 12-5 17 0l5 5c3 3 3 8 0 11l-6 6c7 11 15 18 26 26l6-6c3-3 8-3 11 0l5 5c5 5 5 12 0 17-6 6-16 8-24 3-26-16-44-33-60-60-5-8-3-18 3-24z" fill="#1E88E5"></path>262 </svg>263 </div>264 <label>Phone</label>265 </div>266 267 <div class="app">268 <div class="icon-circle">269 <!-- Messages -->270 <svg width="120" height="120" viewBox="0 0 100 100">271 <rect x="18" y="26" width="64" height="44" rx="12" fill="#4285F4"></rect>272 <rect x="26" y="36" width="48" height="10" rx="5" fill="#ffffff" opacity="0.9"></rect>273 <rect x="26" y="52" width="36" height="10" rx="5" fill="#ffffff" opacity="0.9"></rect>274 </svg>275 </div>276 <label>Messages</label>277 </div>278 279 <div class="app">280 <div class="icon-circle">281 <!-- Chrome -->282 <svg width="120" height="120" viewBox="0 0 100 100">283 <circle cx="50" cy="50" r="38" fill="#F44336"></circle>284 <path d="M50 12 A38 38 0 0 1 88 50 H50 Z" fill="#FFC107"></path>285 <path d="M12 50 A38 38 0 0 1 50 12 L67 42 Z" fill="#4CAF50"></path>286 <circle cx="50" cy="50" r="18" fill="#1E88E5" stroke="#fff" stroke-width="6"></circle>287 </svg>288 </div>289 <label>Chrome</label>290 </div>291 292 <div class="app">293 <div class="icon-circle">294 <!-- Camera -->295 <svg width="120" height="120" viewBox="0 0 100 100">296 <rect x="20" y="30" width="60" height="40" rx="8" fill="#607D8B"></rect>297 <rect x="30" y="22" width="20" height="12" rx="4" fill="#90A4AE"></rect>298 <circle cx="50" cy="50" r="14" fill="#90CAF9"></circle>299 <circle cx="50" cy="50" r="8" fill="#2962FF"></circle>300 </svg>301 </div>302 <label>Camera</label>303 </div>304 </div>305 306 <!-- Search Pill -->307 <div class="search-pill">308 <div class="pill-left">309 <!-- Google G -->310 <svg width="64" height="64" viewBox="0 0 24 24">311 <path d="M12 4a8 8 0 108 8h-8v3h11a11 11 0 10-3.2-7.8L17 8A8 8 0 0012 4z" fill="#fff" opacity="0.9"></path>312 </svg>313 <span></span>314 </div>315 <div class="pill-right">316 <!-- Mic -->317 <svg width="46" height="46" viewBox="0 0 24 24">318 <rect x="9" y="4" width="6" height="10" rx="3" fill="#4285F4"></rect>319 <path d="M6 11a6 6 0 0012 0" stroke="#fff" stroke-width="2" fill="none"></path>320 <rect x="11" y="16" width="2" height="4" fill="#fff"></rect>321 </svg>322 <!-- Small camera (Lens style) -->323 <svg width="54" height="54" viewBox="0 0 24 24">324 <rect x="4" y="6" width="16" height="12" rx="3" fill="#FFC107"></rect>325 <circle cx="12" cy="12" r="4" fill="#1E88E5"></circle>326 <rect x="8" y="3" width="8" height="4" rx="2" fill="#43A047"></rect>327 </svg>328 </div>329 </div>330 331 <!-- Gesture Bar -->332 <div class="gesture"></div>333</div>334</body>335</html>