GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - Generated HTML</title>5<style>6 body {7 margin: 0;8 padding: 0;9 background: transparent;10 font-family: Arial, Helvetica, sans-serif;11 color: #222;12 }13 #render-target {14 width: 1080px;15 height: 2400px;16 position: relative;17 overflow: hidden;18 background: #ffffff;19 }20 21 /* Status bar */22 .status-bar {23 height: 90px;24 padding: 0 32px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #111;29 font-weight: 600;30 font-size: 36px;31 }32 .status-icons {33 display: flex;34 gap: 22px;35 align-items: center;36 }37 .dot-icon {38 width: 26px;39 height: 26px;40 border-radius: 50%;41 background: #7e7e7e;42 }43 .signal {44 width: 34px;45 height: 24px;46 border: 2px solid #7e7e7e;47 border-top: none;48 border-right: none;49 transform: rotate(-45deg);50 }51 52 /* Header / search */53 .header {54 padding: 12px 24px 0 24px;55 }56 .search-row {57 display: flex;58 align-items: center;59 gap: 18px;60 }61 .icon-btn {62 width: 72px;63 height: 72px;64 border-radius: 20px;65 border: 1px solid #D0D0D0;66 display: flex;67 align-items: center;68 justify-content: center;69 background: #fff;70 }71 .search-box {72 flex: 1;73 height: 92px;74 border: 1px solid #D7D7D7;75 border-radius: 24px;76 display: flex;77 align-items: center;78 padding: 0 24px;79 font-size: 32px;80 color: #666;81 justify-content: space-between;82 }83 .search-placeholder {84 color: #6e6e6e;85 }86 .circle-avatars {87 display: flex;88 gap: 12px;89 margin-left: 8px;90 }91 .mini-avatar {92 width: 60px;93 height: 60px;94 border-radius: 50%;95 border: 1px solid #dcdcdc;96 background: linear-gradient(135deg, #f6e0f1, #e6f4ff);97 }98 99 /* Photo Search section */100 .section-title {101 font-size: 36px;102 font-weight: 700;103 margin: 30px 8px 18px 8px;104 }105 .photo-actions {106 display: flex;107 gap: 24px;108 padding: 0 8px 10px 8px;109 }110 .action-card {111 flex: 1;112 height: 120px;113 border: 1px solid #d7d7d7;114 border-radius: 22px;115 display: flex;116 align-items: center;117 gap: 24px;118 padding: 0 28px;119 font-size: 34px;120 font-weight: 600;121 color: #333;122 }123 124 /* Recent searches */125 .recent-row {126 display: flex;127 align-items: center;128 justify-content: space-between;129 padding: 18px 8px 8px 8px;130 }131 .recent-row .section-title {132 margin: 0;133 font-size: 34px;134 }135 .edit-btn {136 color: #ff4f72;137 font-weight: 700;138 font-size: 32px;139 }140 .chips {141 display: flex;142 gap: 34px;143 padding: 22px 8px;144 overflow: hidden;145 }146 .chip {147 width: 150px;148 text-align: center;149 }150 .chip .avatar {151 width: 150px;152 height: 150px;153 border-radius: 50%;154 border: 1px solid #cfcfcf;155 background: #E0E0E0;156 display: flex;157 align-items: center;158 justify-content: center;159 color: #757575;160 font-size: 26px;161 }162 .chip .label {163 margin-top: 14px;164 font-size: 30px;165 line-height: 1.2;166 color: #333;167 }168 169 /* Banner */170 .banner {171 margin: 18px 8px 12px 8px;172 height: 260px;173 border: 1px solid #bdbdbd;174 background: #E0E0E0;175 display: flex;176 align-items: center;177 justify-content: center;178 color: #5e5e5e;179 font-size: 36px;180 font-weight: 700;181 text-align: center;182 }183 184 /* Most searched */185 .title-row {186 display: flex;187 align-items: center;188 justify-content: space-between;189 padding: 8px 8px 18px 8px;190 }191 .title-row .section-title {192 margin: 0;193 }194 .view-all {195 background: #ff5f7c;196 color: #fff;197 border: none;198 border-radius: 16px;199 height: 88px;200 width: 210px;201 font-size: 34px;202 font-weight: 700;203 }204 205 .grid {206 display: grid;207 grid-template-columns: 1fr 1fr;208 gap: 26px;209 padding: 0 8px 18px 8px;210 }211 .article-card {212 border: 1px solid #d7d7d7;213 border-radius: 16px;214 overflow: hidden;215 background: #fff;216 }217 .article-image {218 height: 320px;219 background: #E0E0E0;220 border-bottom: 1px solid #BDBDBD;221 display: flex;222 align-items: center;223 justify-content: center;224 color: #757575;225 font-size: 30px;226 text-align: center;227 padding: 12px;228 }229 .article-label {230 background: #0d0d0d;231 color: #fff;232 font-size: 34px;233 font-weight: 700;234 padding: 24px;235 text-align: center;236 }237 238 /* Bottom home bar */239 .home-bar {240 position: absolute;241 bottom: 28px;242 left: 50%;243 transform: translateX(-50%);244 width: 320px;245 height: 16px;246 background: #cfcfcf;247 border-radius: 10px;248 }249 250 /* SVG icons */251 .svg {252 width: 40px;253 height: 40px;254 fill: none;255 stroke: #333;256 stroke-width: 4px;257 }258 .svg-bold {259 width: 46px;260 height: 46px;261 fill: none;262 stroke: #333;263 stroke-width: 5px;264 }265</style>266</head>267<body>268<div id="render-target">269 <!-- Status bar -->270 <div class="status-bar">271 <div>10:44</div>272 <div class="status-icons">273 <div class="dot-icon"></div>274 <div class="dot-icon" style="background:#9c9c9c;"></div>275 <div class="dot-icon" style="background:#b0b0b0;"></div>276 <div class="dot-icon" style="background:#c0c0c0;"></div>277 <div class="signal"></div>278 </div>279 </div>280 281 <!-- Header with search -->282 <div class="header">283 <div class="search-row">284 <div class="icon-btn" aria-label="Back">285 <svg class="svg" viewBox="0 0 24 24">286 <path d="M15 19l-7-7 7-7"></path>287 </svg>288 </div>289 290 <div class="search-box">291 <div class="search-placeholder">Search for brands & products</div>292 <div style="display:flex;align-items:center;gap:16px;">293 <svg class="svg" viewBox="0 0 24 24">294 <circle cx="10" cy="10" r="6"></circle>295 <path d="M15 15l5 5"></path>296 </svg>297 <div class="icon-btn" style="width:70px;height:70px;border:none;">298 <svg class="svg-bold" viewBox="0 0 24 24">299 <rect x="4" y="6" width="16" height="12" rx="2"></rect>300 <path d="M4 14l4-4 3 3 3-3 6 6"></path>301 </svg>302 </div>303 </div>304 </div>305 306 <div class="circle-avatars">307 <div class="mini-avatar"></div>308 <div class="mini-avatar"></div>309 </div>310 </div>311 312 <div class="section-title">PHOTO SEARCH</div>313 <div class="photo-actions">314 <div class="action-card">315 <div class="icon-btn" style="width:80px;height:80px;">316 <svg class="svg-bold" viewBox="0 0 24 24">317 <rect x="3" y="7" width="18" height="12" rx="2"></rect>318 <path d="M8 7l2-3h4l2 3"></path>319 <circle cx="12" cy="13" r="3.5"></circle>320 </svg>321 </div>322 <div>Click a photo</div>323 </div>324 <div class="action-card">325 <div class="icon-btn" style="width:80px;height:80px;">326 <svg class="svg-bold" viewBox="0 0 24 24">327 <rect x="3" y="5" width="18" height="14" rx="2"></rect>328 <path d="M6 15l3-3 2 2 4-4 4 5"></path>329 </svg>330 </div>331 <div>Select a photo</div>332 </div>333 </div>334 </div>335 336 <!-- Recent searches -->337 <div class="recent-row">338 <div class="section-title">RECENT SEARCHES</div>339 <div class="edit-btn">EDIT</div>340 </div>341 <div class="chips">342 <div class="chip">343 <div class="avatar">[IMG: White Polo T-Shirt]</div>344 <div class="label">mens tshirt</div>345 </div>346 <div class="chip">347 <div class="avatar">[IMG: Black Track Pants]</div>348 <div class="label">Track pants</div>349 </div>350 <div class="chip">351 <div class="avatar">[IMG: White Sports T-Shirt]</div>352 <div class="label">Sports Tshirts Men</div>353 </div>354 <div class="chip">355 <div class="avatar">[IMG: Black Nike Sports Tee]</div>356 <div class="label">Nike Sports Tshirts Men</div>357 </div>358 <div class="chip">359 <div class="avatar">[IMG: Black Nike T-Shirt]</div>360 <div class="label">Nike sports tshirt</div>361 </div>362 </div>363 364 <!-- Promo banner -->365 <div class="banner">[IMG: Promo Banner - FLAT ₹400 OFF on First Order + Free Shipping - CODE: MYNTRA400]</div>366 367 <!-- Most searched articles -->368 <div class="title-row">369 <div class="section-title">MOST SEARCHED ARTICLES</div>370 <button class="view-all">View All</button>371 </div>372 373 <div class="grid">374 <div class="article-card">375 <div class="article-image">[IMG: Lace Briefs Set]</div>376 <div class="article-label">Briefs</div>377 </div>378 <div class="article-card">379 <div class="article-image">[IMG: Green Slide Flip-Flops]</div>380 <div class="article-label">Flip-Flops</div>381 </div>382 <div class="article-card">383 <div class="article-image">[IMG: Two People Wearing T-Shirts]</div>384 <div class="article-label">T-Shirts</div>385 </div>386 <div class="article-card">387 <div class="article-image">[IMG: People Wearing Jeans]</div>388 <div class="article-label">Jeans</div>389 </div>390 <div class="article-card">391 <div class="article-image">[IMG: Red Sports Shoes]</div>392 <div class="article-label">Sports Shoes</div>393 </div>394 <div class="article-card">395 <div class="article-image">[IMG: Black Rugged Watch]</div>396 <div class="article-label">Watches</div>397 </div>398 <div class="article-card">399 <div class="article-image">[IMG: Woman Wearing Pink Bra]</div>400 <div class="article-label">Bras</div>401 </div>402 <div class="article-card">403 <div class="article-image">[IMG: Smartwatch Closeup]</div>404 <div class="article-label">Smartwatches</div>405 </div>406 </div>407 408 <div class="home-bar"></div>409</div>410</body>411</html>