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>Mobile UI Render</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #FFFFFF;13 }14 /* Status bar */15 .status-bar {16 height: 80px;17 background: #0E678E;18 color: #fff;19 display: flex;20 align-items: center;21 padding: 0 40px;22 font-weight: 600;23 font-size: 40px;24 letter-spacing: 0.5px;25 }26 .status-bar .right {27 margin-left: auto; display: flex; align-items: center; gap: 28px; opacity: 0.9;28 }29 /* Header with search */30 .header {31 background: #0E678E;32 color: #fff;33 padding: 24px 36px 0 36px;34 }35 .search-bar {36 background: #F2F5F7;37 border-radius: 12px;38 height: 120px;39 display: flex; align-items: center;40 padding: 0 30px;41 box-shadow: 0 2px 0 rgba(0,0,0,0.08) inset;42 }43 .search-bar .search-text {44 color: #7A8A95; font-size: 38px; margin-left: 22px; flex: 1;45 }46 .search-bar .actions { display: flex; align-items: center; gap: 28px; }47 .badge {48 position: absolute; top: -12px; right: -12px;49 background: #21B26C; color: #fff; font-size: 30px;50 padding: 6px 14px; border-radius: 20px; font-weight: 700;51 }52 .tabs {53 display: flex;54 align-items: center;55 padding: 26px 36px 0 36px;56 height: 120px;57 }58 .tab {59 font-size: 40px; font-weight: 700; color: #CDE8F3; margin-right: 48px;60 }61 .tab.active { color: #ffffff; position: relative; }62 .tab.active::after {63 content: ""; position: absolute; left: 0; bottom: -24px;64 width: 180px; height: 6px; background: #ffffff; border-radius: 3px;65 }66 .location { margin-left: auto; text-align: right; color: #CDE8F3; font-size: 32px; }67 .location .city { font-size: 40px; color: #ffffff; font-weight: 700; }68 /* Horizontal categories */69 .shortcuts-wrap { background: #ffffff; border-top: 2px solid #E7ECEF; border-bottom: 2px solid #E7ECEF; }70 .shortcuts {71 display: flex; overflow-x: auto; gap: 80px; padding: 34px 36px;72 }73 .shortcut {74 min-width: 180px; text-align: center; color: #607D8B;75 }76 .shortcut svg { width: 72px; height: 72px; display: block; margin: 0 auto 16px; }77 .shortcut .label { font-size: 34px; line-height: 40px; }78 /* Category grid */79 .grid {80 display: grid;81 grid-template-columns: repeat(4, 1fr);82 border-top: 2px solid #E0E0E0;83 }84 .grid-item {85 height: 300px;86 border-right: 2px solid #E0E0E0;87 border-bottom: 2px solid #E0E0E0;88 display: flex; flex-direction: column; align-items: center; justify-content: center;89 }90 .grid-item:last-child { border-right: none; }91 .grid-item svg { width: 120px; height: 120px; margin-bottom: 16px; }92 .grid-item .title { font-size: 36px; color: #37474F; }93 /* Section headers */94 .section-header {95 background: #EFEFEF; color: #37474F; font-size: 42px; font-weight: 700;96 padding: 28px 36px; margin-top: 16px;97 }98 .content-block {99 padding: 30px 36px;100 }101 .content-block h2 {102 font-size: 46px; margin: 0 0 24px 0; color: #263238;103 }104 .content-block p {105 font-size: 34px; color: #607D8B; line-height: 1.4; margin: 0 0 32px 0;106 }107 .primary-btn {108 background: #0E73A6; color: #fff; font-size: 40px; font-weight: 700;109 padding: 26px 42px; border-radius: 8px; display: inline-block;110 }111 /* Banner cards */112 .banner-row { padding: 24px 36px; display: flex; gap: 24px; }113 .banner {114 width: 740px; height: 280px; background: #E0E0E0; border: 1px solid #BDBDBD;115 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 40px; border-radius: 12px;116 }117 /* Floating post ad button */118 .fab {119 position: absolute; right: 40px; bottom: 220px;120 width: 180px; height: 180px; background: #FFD84A; border-radius: 50%;121 display: flex; align-items: center; justify-content: center;122 color: #1A1A1A; font-weight: 800; font-size: 38px; box-shadow: 0 8px 16px rgba(0,0,0,0.25);123 }124 /* Home indicator */125 .home-indicator {126 position: absolute; left: 50%; transform: translateX(-50%);127 bottom: 32px; width: 360px; height: 12px; background: #000; opacity: 0.8; border-radius: 12px;128 }129 /* Icon styles (stroke) */130 .icon { stroke: #5B7E92; fill: none; stroke-width: 6; }131 .accent { stroke: #65B66A; }132</style>133</head>134<body>135<div id="render-target">136 137 <!-- Status Bar -->138 <div class="status-bar">139 8:02140 <div class="right">141 <!-- simple wifi icon -->142 <svg width="42" height="42" viewBox="0 0 24 24"><path class="icon" d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M9 16c2-2 6-2 8 0M12 19l2 2-2-2z"/></svg>143 <!-- battery icon -->144 <svg width="42" height="42" viewBox="0 0 24 24"><rect class="icon" x="2" y="6" width="18" height="12" rx="2"/><rect class="icon" x="21" y="10" width="2" height="4"/><rect x="4" y="8" width="12" height="8" fill="#ffffff"/></svg>145 </div>146 </div>147 148 <!-- Header -->149 <div class="header">150 <div class="search-bar">151 <!-- hamburger -->152 <svg width="52" height="52" viewBox="0 0 24 24"><path class="icon" d="M3 6h18M3 12h18M3 18h18"/></svg>153 <!-- Q logo as text style -->154 <div style="color:#21B26C;font-weight:900;font-size:44px;margin-left:10px;">Q</div>155 <div class="search-text">Search in Gurgaon</div>156 <div class="actions">157 <!-- wallet -->158 <div style="position: relative;">159 <svg width="58" height="58" viewBox="0 0 24 24">160 <rect class="icon" x="3" y="6" width="18" height="12" rx="2"></rect>161 <path class="icon" d="M17 10h4v4h-4"></path>162 </svg>163 <div class="badge">₹50</div>164 </div>165 <!-- bell -->166 <svg width="58" height="58" viewBox="0 0 24 24"><path class="icon" d="M12 3c-3 0-5 2-5 5v4l-2 2h14l-2-2V8c0-3-2-5-5-5z"/><circle class="icon" cx="12" cy="19" r="2"/></svg>167 </div>168 </div>169 170 <div class="tabs">171 <div class="tab active">EXPLORE</div>172 <div class="tab">FOR YOU</div>173 <div class="location">174 YOU ARE IN<br><span class="city">Gurgaon</span>175 </div>176 <svg width="42" height="42" viewBox="0 0 24 24" style="margin-left:16px;"><path class="icon" d="M6 9l6 6 6-6"/></svg>177 </div>178 </div>179 180 <!-- Shortcut row -->181 <div class="shortcuts-wrap">182 <div class="shortcuts">183 <div class="shortcut">184 <svg viewBox="0 0 24 24"><path class="icon" d="M3 11l9-7 9 7v8H3z"/><path class="accent" d="M9 19h6"/></svg>185 <div class="label">Houses - Apartment...</div>186 </div>187 <div class="shortcut">188 <svg viewBox="0 0 24 24"><circle class="icon" cx="12" cy="12" r="8"/><path class="icon" d="M12 8v4h4"/></svg>189 <div class="label">Part Time Jobs</div>190 </div>191 <div class="shortcut">192 <svg viewBox="0 0 24 24"><rect class="icon" x="4" y="10" width="16" height="8"/><rect class="icon" x="7" y="6" width="5" height="4"/><rect class="accent" x="14" y="6" width="3" height="4"/></svg>193 <div class="label">Home - Office Fur...</div>194 </div>195 <div class="shortcut">196 <svg viewBox="0 0 24 24"><path class="icon" d="M6 15l5-6 5 6M4 16h16"/></svg>197 <div class="label">Bikes</div>198 </div>199 <div class="shortcut">200 <svg viewBox="0 0 24 24"><path class="icon" d="M4 12l6-6 10 10"/></svg>201 <div class="label">Pest Con...</div>202 </div>203 </div>204 </div>205 206 <!-- Grid categories -->207 <div class="grid">208 <div class="grid-item">209 <svg viewBox="0 0 24 24">210 <rect class="icon" x="5" y="5" width="14" height="14" rx="2"></rect>211 <circle class="accent" cx="12" cy="12" r="4"></circle>212 </svg>213 <div class="title">Electronics</div>214 </div>215 <div class="grid-item">216 <svg viewBox="0 0 24 24">217 <rect class="icon" x="6" y="10" width="12" height="8" rx="2"></rect>218 <rect class="accent" x="8" y="8" width="8" height="3"></rect>219 </svg>220 <div class="title">Furniture</div>221 </div>222 <div class="grid-item">223 <svg viewBox="0 0 24 24">224 <rect class="icon" x="6" y="10" width="12" height="6"></rect>225 <path class="accent" d="M6 10l3-3M18 10l-3-3"/>226 </svg>227 <div class="title">Lifestyle</div>228 </div>229 <div class="grid-item">230 <svg viewBox="0 0 24 24">231 <rect class="icon" x="9" y="4" width="6" height="16" rx="2"></rect>232 <rect class="accent" x="10" y="6" width="4" height="10"></rect>233 </svg>234 <div class="title">Mobiles</div>235 </div>236 237 <div class="grid-item">238 <svg viewBox="0 0 24 24">239 <rect class="icon" x="3" y="12" width="18" height="5" rx="2"></rect>240 <circle class="icon" cx="7" cy="18" r="2"></circle>241 <circle class="icon" cx="17" cy="18" r="2"></circle>242 </svg>243 <div class="title">Cars</div>244 </div>245 <div class="grid-item">246 <svg viewBox="0 0 24 24">247 <circle class="icon" cx="7" cy="17" r="2"></circle>248 <circle class="icon" cx="17" cy="17" r="2"></circle>249 <path class="icon" d="M4 15h16l-3-5H7z"></path>250 </svg>251 <div class="title">Bikes</div>252 </div>253 <div class="grid-item">254 <svg viewBox="0 0 24 24">255 <rect class="icon" x="6" y="6" width="12" height="12" rx="2"></rect>256 <path class="accent" d="M9 10h6M9 13h6M9 16h6"></path>257 </svg>258 <div class="title">Jobs</div>259 </div>260 <div class="grid-item">261 <svg viewBox="0 0 24 24">262 <path class="icon" d="M4 16h16M7 10l3-3M17 10l-3-3"></path>263 <path class="accent" d="M10 14l4-4"></path>264 </svg>265 <div class="title">Services</div>266 </div>267 268 <div class="grid-item">269 <svg viewBox="0 0 24 24">270 <path class="icon" d="M4 11l8-6 8 6v7H4z"></path>271 <rect class="accent" x="10" y="14" width="4" height="4"></rect>272 </svg>273 <div class="title">Homes</div>274 </div>275 <div class="grid-item">276 <svg viewBox="0 0 24 24">277 <circle class="icon" cx="9" cy="12" r="3"></circle>278 <circle class="accent" cx="14" cy="12" r="2"></circle>279 <path class="icon" d="M6 16c4 2 8 2 12 0"></path>280 </svg>281 <div class="title">Pets</div>282 </div>283 <div class="grid-item">284 <svg viewBox="0 0 24 24">285 <path class="icon" d="M4 10h16l-8-4-8 4zM6 10v8h12v-8"></path>286 <path class="accent" d="M10 14h4"></path>287 </svg>288 <div class="title">Education</div>289 </div>290 <div class="grid-item">291 <svg viewBox="0 0 24 24">292 <circle class="icon" cx="6" cy="12" r="2"></circle>293 <circle class="icon" cx="12" cy="12" r="2"></circle>294 <circle class="icon" cx="18" cy="12" r="2"></circle>295 </svg>296 <div class="title">More</div>297 </div>298 </div>299 300 <!-- Sections -->301 <div class="section-header">Pending Activities</div>302 303 <div class="content-block">304 <h2>Get More responses</h2>305 <p>Get prime visibility and more responses for your Ad. Want to buy a Nikon Digital Point & Sho by upgrading now</p>306 <div class="primary-btn">Upgrade your Ad</div>307 </div>308 309 <!-- Banner cards row -->310 <div class="banner-row">311 <div class="banner">[IMG: QuikrHomes banner]</div>312 <div class="banner">[IMG: Featured listings carousel]</div>313 </div>314 315 <!-- Floating action button -->316 <div class="fab">POST AD</div>317 318 <!-- Home indicator -->319 <div class="home-indicator"></div>320</div>321</body>322</html>