GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>USA Online Shopping UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: linear-gradient(180deg, #3d4fb4 0%, #2f3c96 40%, #1f5f8a 70%, #2bc1c3 100%);14 font-family: Arial, Helvetica, sans-serif;15 color: #fff;16 }17 18 /* Status bar */19 .status-bar {20 height: 64px;21 padding: 0 24px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 font-weight: 600;26 font-size: 32px;27 opacity: 0.95;28 }29 .status-left { display: flex; align-items: center; gap: 20px; }30 .status-right { display: flex; align-items: center; gap: 24px; }31 32 /* Simple status icons */33 .icon {34 width: 36px; height: 36px;35 display: inline-flex; align-items: center; justify-content: center;36 }37 .icon svg { width: 100%; height: 100%; fill: #ffffff; }38 39 /* App header */40 .app-header {41 padding: 24px 40px 10px;42 }43 .title-row {44 display: flex; align-items: center; justify-content: space-between;45 margin-top: 8px;46 }47 .title-left {48 display: flex; align-items: center; gap: 24px;49 }50 .hamburger { width: 56px; height: 56px; }51 .hamburger svg { width: 100%; height: 100%; fill: none; stroke: #ffffff; stroke-width: 8; }52 .app-title {53 font-size: 58px;54 font-weight: 700;55 letter-spacing: 0.5px;56 }57 .flag {58 width: 130px; height: 80px;59 background: #E0E0E0; border: 1px solid #BDBDBD;60 color: #757575; display: flex; align-items: center; justify-content: center;61 border-radius: 6px;62 }63 64 /* Category row */65 .categories {66 margin-top: 40px;67 display: flex; justify-content: space-around; align-items: center;68 text-align: center;69 padding: 0 20px;70 }71 .cat {72 width: 220px;73 color: #ffffff;74 }75 .cat .cat-icon {76 width: 72px; height: 72px; margin: 0 auto 12px;77 }78 .cat .cat-icon svg { width: 100%; height: 100%; fill: none; stroke: #ffffff; stroke-width: 6; }79 .cat-label {80 font-size: 30px; font-weight: 700; letter-spacing: 1px;81 text-transform: uppercase;82 }83 84 /* Search bar */85 .search-wrap {86 margin: 36px 32px 18px;87 background: rgba(255,255,255,0.15);88 border-radius: 24px;89 padding: 18px;90 }91 .search-bar {92 background: #ffffff;93 border-radius: 24px;94 height: 120px;95 display: flex; align-items: center; padding: 0 30px;96 box-shadow: 0 8px 16px rgba(0,0,0,0.2);97 }98 .search-input {99 flex: 1;100 font-size: 40px; color: #777;101 }102 .search-underline {103 position: absolute; left: 70px; right: 130px; height: 6px;104 background: #d64d4d; border-radius: 6px;105 transform: translateY(44px);106 }107 .search-icon { width: 56px; height: 56px; }108 .search-icon svg { width: 100%; height: 100%; fill: none; stroke: #777; stroke-width: 8; }109 110 /* Section card container */111 .section {112 margin: 22px 28px;113 background: #ffffff;114 color: #000;115 border-radius: 28px;116 box-shadow: 0 10px 18px rgba(0,0,0,0.25);117 padding: 26px;118 }119 .section-header {120 display: flex; align-items: center; justify-content: space-between;121 margin-bottom: 18px;122 }123 .section-title {124 font-size: 44px; font-weight: 800;125 }126 .more-btn {127 background: #4b5cd8; color: #fff; border: none; border-radius: 26px;128 padding: 12px 28px; font-size: 32px; font-weight: 700;129 box-shadow: 0 6px 10px rgba(0,0,0,0.2);130 }131 132 /* Item grid */133 .grid { display: flex; flex-wrap: wrap; gap: 24px; }134 .card {135 width: 240px; height: 240px;136 background: #fff; border-radius: 18px; border: 1px solid #ccc;137 box-shadow: 0 6px 10px rgba(0,0,0,0.15);138 display: flex; flex-direction: column; align-items: center; justify-content: center;139 overflow: hidden;140 }141 .card .img {142 width: 180px; height: 140px;143 background: #E0E0E0; border: 1px solid #BDBDBD;144 color: #757575; display: flex; align-items: center; justify-content: center;145 border-radius: 10px;146 margin-bottom: 16px;147 font-size: 28px; text-align: center; padding: 6px;148 }149 .card .label { font-size: 32px; color: #000; }150 151 /* Floating action button */152 .fab {153 position: absolute;154 right: 70px; bottom: 460px;155 width: 120px; height: 120px; border-radius: 60px;156 background: #4356d6; color: #fff;157 display: flex; align-items: center; justify-content: center;158 box-shadow: 0 12px 20px rgba(0,0,0,0.35);159 font-size: 76px; font-weight: 700;160 }161 162 /* Bottom "Shopping" header preview */163 .bottom-section {164 position: absolute; left: 0; right: 0; bottom: 160px;165 margin: 0 28px;166 background: #ffffff;167 color: #000;168 border-radius: 28px 28px 0 0;169 box-shadow: 0 -6px 18px rgba(0,0,0,0.18);170 padding: 26px;171 }172 .bottom-header { display: flex; align-items: center; justify-content: space-between; }173 .bottom-title { font-size: 44px; font-weight: 800; }174 .home-indicator {175 position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%);176 width: 360px; height: 16px; background: rgba(255,255,255,0.8); border-radius: 10px;177 }178</style>179</head>180<body>181<div id="render-target">182 183 <!-- Status bar -->184 <div class="status-bar">185 <div class="status-left">186 <div>7:20</div>187 <div class="icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/></svg></div>188 <div class="icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#fff" fill="none"/><path d="M12 12 L12 6" stroke="#fff" stroke-width="2"/></svg></div>189 <div class="icon"><svg viewBox="0 0 24 24"><path d="M12 4 L20 20 L4 20 Z"/></svg></div>190 </div>191 <div class="status-right">192 <div class="icon"><svg viewBox="0 0 24 24"><path d="M4 12h16" stroke="#fff" stroke-width="3"/></svg></div>193 <div class="icon"><svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3" stroke="#fff" fill="none" stroke-width="3"/><rect x="17" y="5" width="3" height="6" fill="#fff"/></svg></div>194 </div>195 </div>196 197 <!-- App header -->198 <div class="app-header">199 <div class="title-row">200 <div class="title-left">201 <div class="hamburger">202 <svg viewBox="0 0 100 100">203 <path d="M15 30 H85"/>204 <path d="M15 50 H85"/>205 <path d="M15 70 H85"/>206 </svg>207 </div>208 <div class="app-title">USA Online Shopping</div>209 </div>210 <div class="flag">[IMG: USA Flag]</div>211 </div>212 213 <div class="categories">214 <div class="cat">215 <div class="cat-icon">216 <svg viewBox="0 0 100 100">217 <rect x="18" y="20" width="64" height="40" rx="6" stroke="#fff" fill="none"/>218 <rect x="40" y="64" width="20" height="10" fill="#fff"/>219 </svg>220 </div>221 <div class="cat-label">Electronics</div>222 </div>223 <div class="cat">224 <div class="cat-icon">225 <svg viewBox="0 0 100 100">226 <circle cx="50" cy="40" r="18" stroke="#fff" fill="none"/>227 <path d="M20 80 Q50 60 80 80" stroke="#fff" fill="none"/>228 </svg>229 </div>230 <div class="cat-label">Baby & Toys</div>231 </div>232 <div class="cat">233 <div class="cat-icon">234 <svg viewBox="0 0 100 100">235 <rect x="22" y="40" width="56" height="24" rx="6" stroke="#fff" fill="none"/>236 <rect x="28" y="64" width="12" height="12" fill="#fff"/>237 <rect x="60" y="64" width="12" height="12" fill="#fff"/>238 </svg>239 </div>240 <div class="cat-label">Furniture</div>241 </div>242 <div class="cat">243 <div class="cat-icon">244 <svg viewBox="0 0 100 100">245 <path d="M20 70 L40 70 L50 55 L70 55 L80 70" stroke="#fff" fill="none"/>246 <circle cx="35" cy="78" r="6" fill="#fff"/>247 <circle cx="70" cy="78" r="6" fill="#fff"/>248 </svg>249 </div>250 <div class="cat-label">Pet Supplies</div>251 </div>252 </div>253 </div>254 255 <!-- Search bar -->256 <div class="search-wrap">257 <div class="search-bar" style="position: relative;">258 <div class="search-input">Compare Price</div>259 <div class="search-icon">260 <svg viewBox="0 0 100 100">261 <circle cx="42" cy="42" r="26" stroke="#777" fill="none"/>262 <line x1="62" y1="62" x2="90" y2="90" stroke="#777" stroke-width="8"/>263 </svg>264 </div>265 <div class="search-underline"></div>266 </div>267 </div>268 269 <!-- New section -->270 <div class="section" style="margin-top: 24px;">271 <div class="section-header">272 <div class="section-title">New</div>273 <button class="more-btn">More</button>274 </div>275 <div class="grid">276 <div class="card">277 <div class="img">[IMG: Letgo Logo]</div>278 <div class="label">Letgo</div>279 </div>280 <div class="card">281 <div class="img">[IMG: Poshmark Logo]</div>282 <div class="label">Poshmark</div>283 </div>284 <div class="card">285 <div class="img">[IMG: Nike Logo]</div>286 <div class="label">Nike</div>287 </div>288 <div class="card">289 <div class="img">[IMG: Shop Rite Logo]</div>290 <div class="label">Shop Rite</div>291 </div>292 </div>293 </div>294 295 <!-- Popular section -->296 <div class="section">297 <div class="section-header">298 <div class="section-title">Popular</div>299 <button class="more-btn">More</button>300 </div>301 <div class="grid">302 <div class="card">303 <div class="img">[IMG Placeholder]</div>304 <div class="label">Kadaza</div>305 </div>306 <div class="card">307 <div class="img">[IMG Placeholder]</div>308 <div class="label">Google</div>309 </div>310 <div class="card">311 <div class="img">[IMG Placeholder]</div>312 <div class="label">Bing</div>313 </div>314 <div class="card">315 <div class="img">[IMG Placeholder]</div>316 <div class="label">Yahoo</div>317 </div>318 319 <div class="card">320 <div class="img">[IMG Placeholder]</div>321 <div class="label">Msn</div>322 </div>323 <div class="card">324 <div class="img">[IMG Placeholder]</div>325 <div class="label">Poshmark</div>326 </div>327 <div class="card">328 <div class="img">[IMG Placeholder]</div>329 <div class="label">Zulily</div>330 </div>331 <div class="card">332 <div class="img">[IMG Placeholder]</div>333 <div class="label">Offerup</div>334 </div>335 336 <div class="card">337 <div class="img">[IMG Placeholder]</div>338 <div class="label">Locanto</div>339 </div>340 <div class="card">341 <div class="img">[IMG Placeholder]</div>342 <div class="label">Zillow</div>343 </div>344 <div class="card">345 <div class="img">[IMG Placeholder]</div>346 <div class="label">Realtor</div>347 </div>348 <div class="card">349 <div class="img">[IMG Placeholder]</div>350 <div class="label">Trulia</div>351 </div>352 </div>353 </div>354 355 <div class="fab">+</div>356 357 <!-- Bottom upcoming section header -->358 <div class="bottom-section">359 <div class="bottom-header">360 <div class="bottom-title">Shopping</div>361 <button class="more-btn">More</button>362 </div>363 </div>364 365 <div class="home-indicator"></div>366</div>367</body>368</html>