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>USA Online Shopping UI</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;13 color: #222;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: linear-gradient(180deg, #3F51B5 0%, #3F51B5 22%, #243E92 32%, #1F5E95 55%, #1CB2B2 100%);21 border-radius: 0;22 box-shadow: none;23 }24 25 /* Status bar */26 .status-bar {27 height: 78px;28 padding: 0 40px;29 display: flex;30 align-items: center;31 justify-content: space-between;32 color: #fff;33 opacity: 0.95;34 font-size: 34px;35 }36 .status-icons {37 display: flex;38 align-items: center;39 gap: 26px;40 }41 .dot { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.9); }42 .tri { width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 28px solid rgba(255,255,255,0.9); }43 .signal {44 width: 40px; height: 30px; position: relative;45 }46 .signal::before, .signal::after {47 content: ""; position: absolute; right: 0; bottom: 0; width: 10px; height: 100%; background: rgba(255,255,255,0.9);48 }49 .signal::after { right: 14px; height: 60%; }50 .battery {51 width: 60px; height: 30px; border: 3px solid #fff; border-radius: 6px; position: relative;52 }53 .battery::after {54 content: ""; position: absolute; right: -10px; top: 7px; width: 8px; height: 16px; background: #fff; border-radius: 2px;55 }56 .battery-fill {57 position: absolute; left: 3px; top: 3px; bottom: 3px; width: 34px; background: #fff;58 }59 60 /* Header */61 .header {62 padding: 8px 40px 24px 40px;63 color: #fff;64 }65 .title-row {66 display: flex;67 align-items: center;68 justify-content: space-between;69 margin-top: 10px;70 }71 .title-left {72 display: flex;73 align-items: center;74 gap: 26px;75 }76 .app-title {77 font-weight: 700;78 font-size: 56px;79 letter-spacing: 0.5px;80 }81 .flag {82 width: 120px;83 height: 76px;84 background: #E0E0E0;85 border: 1px solid #BDBDBD;86 color: #757575;87 display: flex;88 align-items: center;89 justify-content: center;90 border-radius: 6px;91 }92 93 /* Simple icons */94 .icon {95 width: 66px;96 height: 66px;97 }98 .icon svg { width: 100%; height: 100%; }99 .icon path, .icon rect, .icon line, .icon circle {100 stroke: #fff;101 stroke-width: 8;102 fill: none;103 stroke-linecap: round;104 stroke-linejoin: round;105 }106 107 /* Tabs with icons */108 .tab-icons {109 display: flex;110 align-items: center;111 gap: 80px;112 margin-top: 28px;113 padding-left: 10px;114 }115 .tabs {116 display: flex;117 align-items: center;118 gap: 98px;119 margin-top: 22px;120 padding-left: 10px;121 font-size: 34px;122 font-weight: 700;123 color: #E6E6FA;124 }125 .tab {126 position: relative;127 padding-bottom: 18px;128 }129 .tab.active {130 color: #FF3D00;131 }132 .tab.active::after {133 content: "";134 position: absolute;135 left: -6px;136 right: -6px;137 bottom: 0;138 height: 6px;139 background: #FF3D00;140 border-radius: 4px;141 }142 143 /* Search bar */144 .search-wrap {145 margin: 40px 34px 18px 34px;146 position: relative;147 }148 .search-bar {149 height: 140px;150 border-radius: 26px;151 background: #fff;152 box-shadow: 0 8px 20px rgba(0,0,0,0.25);153 display: flex;154 align-items: center;155 padding: 0 30px;156 }157 .search-placeholder {158 font-size: 46px;159 color: #999;160 flex: 1;161 }162 .search-icon {163 width: 56px; height: 56px;164 }165 .search-underline {166 position: absolute;167 left: 70px; right: 140px; bottom: 18px;168 height: 6px; background: #D84315; border-radius: 3px;169 }170 171 /* Sections */172 .section {173 margin: 22px 26px;174 background: #fff;175 border-radius: 26px;176 box-shadow: 0 10px 26px rgba(0,0,0,0.25);177 padding: 34px 26px 40px 26px;178 position: relative;179 }180 .section-title {181 font-size: 46px;182 font-weight: 800;183 margin-bottom: 26px;184 color: #111;185 }186 .more-btn {187 position: absolute;188 right: 26px;189 top: 24px;190 background: linear-gradient(180deg, #6E79E2, #4C5CD5);191 color: #fff;192 font-weight: 700;193 font-size: 36px;194 border-radius: 26px;195 padding: 10px 26px;196 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25);197 }198 199 /* Cards grid */200 .card-row {201 display: flex;202 gap: 28px;203 flex-wrap: nowrap;204 }205 .grid {206 display: grid;207 grid-template-columns: repeat(4, 1fr);208 gap: 28px;209 }210 .logo-card {211 background: #fff;212 border-radius: 20px;213 box-shadow: 0 4px 10px rgba(0,0,0,0.15);214 border: 1px solid #CFCFCF;215 height: 260px;216 padding: 18px;217 display: flex;218 flex-direction: column;219 justify-content: space-between;220 }221 .img-ph {222 width: 100%;223 height: 150px;224 background: #E0E0E0;225 border: 1px solid #BDBDBD;226 border-radius: 14px;227 display: flex;228 align-items: center;229 justify-content: center;230 color: #757575;231 font-size: 36px;232 }233 .card-label {234 text-align: center;235 font-size: 36px;236 color: #333;237 margin-top: 6px;238 }239 240 /* Floating action button */241 .fab {242 position: absolute;243 right: 36px;244 bottom: 36px;245 width: 120px;246 height: 120px;247 background: #3F51B5;248 border-radius: 50%;249 box-shadow: 0 10px 20px rgba(0,0,0,0.35);250 display: flex;251 align-items: center;252 justify-content: center;253 color: #fff;254 font-size: 70px;255 font-weight: 800;256 }257 258 /* Bottom section header peeking */259 .peek-header {260 margin: 24px 26px 0 26px;261 background: #fff;262 border-radius: 26px 26px 0 0;263 box-shadow: 0 -6px 14px rgba(0,0,0,0.15);264 padding: 24px 26px;265 font-size: 46px;266 font-weight: 800;267 }268 .peek-more {269 position: absolute;270 right: 36px;271 bottom: 114px;272 background: linear-gradient(180deg, #6E79E2, #4C5CD5);273 color: #fff;274 font-weight: 700;275 font-size: 36px;276 border-radius: 26px;277 padding: 10px 26px;278 box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25);279 }280</style>281</head>282<body>283<div id="render-target">284 285 <!-- Status bar -->286 <div class="status-bar">287 <div>7:18</div>288 <div class="status-icons">289 <div class="dot"></div>290 <div class="dot"></div>291 <div class="tri"></div>292 <div class="signal"></div>293 <div class="battery"><div class="battery-fill"></div></div>294 </div>295 </div>296 297 <!-- Header -->298 <div class="header">299 <div class="title-row">300 <div class="title-left">301 <div class="icon">302 <svg viewBox="0 0 64 64">303 <line x1="8" y1="14" x2="56" y2="14"></line>304 <line x1="8" y1="32" x2="40" y2="32"></line>305 <line x1="8" y1="50" x2="56" y2="50"></line>306 </svg>307 </div>308 <div class="app-title">USA Online Shopping</div>309 </div>310 <div class="flag">[IMG: USA Flag]</div>311 </div>312 313 <!-- Icon row -->314 <div class="tab-icons">315 <div class="icon">316 <svg viewBox="0 0 64 64">317 <path d="M8 30 L32 10 L56 30"></path>318 <rect x="16" y="30" width="32" height="24" rx="4" ry="4"></rect>319 </svg>320 </div>321 <div class="icon">322 <svg viewBox="0 0 64 64">323 <path d="M10 18 H20 L26 38 H50 L54 26 H28"></path>324 <circle cx="26" cy="52" r="6"></circle>325 <circle cx="44" cy="52" r="6"></circle>326 </svg>327 </div>328 <div class="icon">329 <svg viewBox="0 0 64 64">330 <path d="M8 22 H56"></path>331 <path d="M18 22 L32 40 L46 22"></path>332 </svg>333 </div>334 <div class="icon">335 <svg viewBox="0 0 64 64">336 <path d="M6 42 L30 34 L58 42"></path>337 <path d="M22 26 L42 26"></path>338 <path d="M30 34 L34 20"></path>339 </svg>340 </div>341 <div class="icon">342 <svg viewBox="0 0 64 64">343 <rect x="14" y="18" width="36" height="28" rx="6"></rect>344 <path d="M14 26 H50"></path>345 <rect x="24" y="46" width="16" height="8" rx="2"></rect>346 </svg>347 </div>348 </div>349 350 <!-- Tabs text -->351 <div class="tabs">352 <div class="tab active">HOME</div>353 <div class="tab">SHOPPING</div>354 <div class="tab">FASHION</div>355 <div class="tab">TRAVEL</div>356 <div class="tab">FOOD & GROCERY</div>357 </div>358 </div>359 360 <!-- Search bar -->361 <div class="search-wrap">362 <div class="search-bar">363 <div class="search-placeholder">Compare Price</div>364 <div class="search-icon">365 <svg viewBox="0 0 64 64">366 <circle cx="28" cy="28" r="18" stroke="#777"></circle>367 <line x1="44" y1="44" x2="58" y2="58" stroke="#777"></line>368 </svg>369 </div>370 </div>371 <div class="search-underline"></div>372 </div>373 374 <!-- New Section -->375 <div class="section" style="margin-top: 16px;">376 <div class="section-title">New</div>377 <div class="more-btn">More</div>378 <div class="card-row">379 <div class="logo-card">380 <div class="img-ph">[IMG: Letgo Logo]</div>381 <div class="card-label">Letgo</div>382 </div>383 <div class="logo-card">384 <div class="img-ph">[IMG: Poshmark Logo]</div>385 <div class="card-label">Poshmark</div>386 </div>387 <div class="logo-card">388 <div class="img-ph">[IMG: Nike Logo]</div>389 <div class="card-label">Nike</div>390 </div>391 <div class="logo-card">392 <div class="img-ph">[IMG: ShopRite Logo]</div>393 <div class="card-label">Shop Rite</div>394 </div>395 </div>396 </div>397 398 <!-- Popular Section -->399 <div class="section" style="margin-top: 24px;">400 <div class="section-title">Popular</div>401 <div class="more-btn">More</div>402 403 <div class="grid">404 <div class="logo-card">405 <div class="img-ph">[IMG: Kadaza]</div>406 <div class="card-label">Kadaza</div>407 </div>408 <div class="logo-card">409 <div class="img-ph">[IMG: Google]</div>410 <div class="card-label">Google</div>411 </div>412 <div class="logo-card">413 <div class="img-ph">[IMG: Bing]</div>414 <div class="card-label">Bing</div>415 </div>416 <div class="logo-card">417 <div class="img-ph">[IMG: Yahoo]</div>418 <div class="card-label">Yahoo</div>419 </div>420 421 <div class="logo-card">422 <div class="img-ph">[IMG: MSN]</div>423 <div class="card-label">Msn</div>424 </div>425 <div class="logo-card">426 <div class="img-ph">[IMG: Poshmark]</div>427 <div class="card-label">Poshmark</div>428 </div>429 <div class="logo-card">430 <div class="img-ph">[IMG: Zulily]</div>431 <div class="card-label">Zulily</div>432 </div>433 <div class="logo-card">434 <div class="img-ph">[IMG: OfferUp]</div>435 <div class="card-label">Offerup</div>436 </div>437 438 <div class="logo-card">439 <div class="img-ph">[IMG: Locanto]</div>440 <div class="card-label">Locanto</div>441 </div>442 <div class="logo-card">443 <div class="img-ph">[IMG: Zillow]</div>444 <div class="card-label">Zillow</div>445 </div>446 <div class="logo-card">447 <div class="img-ph">[IMG: Realtor]</div>448 <div class="card-label">Realtor</div>449 </div>450 <div class="logo-card">451 <div class="img-ph">[IMG: Trulia]</div>452 <div class="card-label">Trulla</div>453 </div>454 </div>455 456 <div class="fab">+</div>457 </div>458 459 <!-- Bottom peeking section header -->460 <div class="peek-header">Shopping</div>461 <div class="peek-more">More</div>462 463</div>464</body>465</html>