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 - Furniture</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: linear-gradient(180deg, #3f51b5 0%, #3f57bb 20%, #3c6bb2 40%, #2e86a9 65%, #28a7ad 80%, #2fc3bd 100%);15 font-family: Arial, Helvetica, sans-serif;16 color: #fff;17 }18 19 /* Status bar (mock) */20 .status-bar {21 height: 90px;22 padding: 0 40px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 font-weight: 600;27 font-size: 36px;28 opacity: 0.9;29 }30 .status-icons { display: flex; gap: 26px; align-items: center; }31 .status-dot { width: 26px; height: 26px; border-radius: 50%; background: #fff; opacity: 0.85; }32 .status-triangle {33 width: 0; height: 0;34 border-left: 14px solid transparent;35 border-right: 14px solid transparent;36 border-bottom: 26px solid #fff;37 opacity: 0.9;38 }39 .status-connection { width: 34px; height: 24px; border: 4px solid #fff; border-radius: 4px; position: relative; }40 .status-connection::after { content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 8px; border-radius: 2px; background: #fff; }41 .status-battery { width: 48px; height: 24px; border: 4px solid #fff; border-radius: 4px; position: relative; }42 .status-battery::after { content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 12px; background: #fff; border-radius: 2px; }43 44 /* Header */45 .header {46 padding: 10px 40px 24px 40px;47 }48 .header-row {49 display: flex;50 align-items: center;51 justify-content: space-between;52 }53 .left-group {54 display: flex; align-items: center; gap: 28px;55 }56 .hamburger {57 width: 70px; height: 70px;58 }59 .hamburger svg { width: 100%; height: 100%; }60 .title {61 font-size: 58px;62 font-weight: 700;63 letter-spacing: 0.5px;64 }65 .flag-placeholder {66 width: 120px; height: 80px;67 background: #E0E0E0; border: 1px solid #BDBDBD;68 display: flex; align-items: center; justify-content: center;69 color: #757575; font-size: 28px; border-radius: 8px;70 }71 72 /* Categories */73 .tabs {74 margin-top: 26px;75 display: flex;76 align-items: flex-end;77 justify-content: space-around;78 padding: 0 20px 10px 20px;79 border-bottom: 2px solid rgba(255,255,255,0.15);80 }81 .tab {82 text-align: center;83 color: rgba(255,255,255,0.85);84 width: 200px;85 }86 .tab svg { width: 64px; height: 64px; fill: rgba(255,255,255,0.9); }87 .tab-label {88 margin-top: 8px;89 font-size: 34px;90 font-weight: 700;91 }92 .tab.active .tab-label {93 color: #ff6d00;94 }95 .tab.active .underline {96 width: 160px; height: 6px; background: #ff6d00; margin: 12px auto 0 auto; border-radius: 3px;97 }98 .tab .underline { width: 0; height: 6px; }99 100 /* Content area */101 .content {102 padding: 30px 24px 180px 24px;103 }104 .cards {105 display: flex;106 flex-wrap: wrap;107 gap: 24px;108 }109 .card {110 background: #ffffff;111 color: #222;112 border-radius: 18px;113 box-shadow: 0 6px 10px rgba(0,0,0,0.25);114 flex: 1 0 calc((100% - 72px) / 4);115 min-width: 230px;116 max-width: calc((100% - 72px) / 4);117 height: 310px;118 display: flex; flex-direction: column;119 }120 .card .img {121 margin: 22px;122 height: 170px;123 background: #E0E0E0;124 border: 1px solid #BDBDBD;125 border-radius: 10px;126 display: flex; align-items: center; justify-content: center;127 color: #757575; font-size: 28px; text-align: center; padding: 10px;128 }129 .card .label {130 margin: 0 26px 26px 26px;131 font-size: 34px;132 color: #333;133 }134 135 /* Floating action button */136 .fab {137 position: absolute;138 right: 44px;139 bottom: 210px;140 width: 120px; height: 120px;141 background: #4a58d8;142 border-radius: 50%;143 box-shadow: 0 12px 18px rgba(0,0,0,0.35);144 display: flex; align-items: center; justify-content: center;145 }146 .fab svg { width: 70px; height: 70px; fill: #fff; }147 148 /* Bottom gesture/indicator */149 .bottom-bar {150 position: absolute; bottom: 0; left: 0; width: 100%; height: 130px; background: #000;151 display: flex; align-items: flex-start; justify-content: center;152 }153 .home-indicator {154 margin-top: 20px; width: 340px; height: 14px; background: #d9d9d9; border-radius: 8px;155 }156</style>157</head>158<body>159<div id="render-target">160 161 <!-- Mock status bar -->162 <div class="status-bar">163 <div class="time">7:20</div>164 <div class="status-icons">165 <div class="status-dot"></div>166 <div class="status-dot" style="background:#ffd54f;"></div>167 <div class="status-triangle"></div>168 <div class="status-connection"></div>169 <div class="status-battery"></div>170 </div>171 </div>172 173 <!-- Header -->174 <div class="header">175 <div class="header-row">176 <div class="left-group">177 <div class="hamburger" aria-label="menu">178 <svg viewBox="0 0 100 100">179 <rect x="10" y="20" width="80" height="10" fill="#fff"></rect>180 <rect x="10" y="45" width="70" height="10" fill="#fff"></rect>181 <rect x="10" y="70" width="60" height="10" fill="#fff"></rect>182 </svg>183 </div>184 <div class="title">USA Online Shopping</div>185 </div>186 <div class="flag-placeholder">[IMG: USA Flag]</div>187 </div>188 189 <!-- Tabs -->190 <div class="tabs">191 <div class="tab">192 <svg viewBox="0 0 100 100">193 <rect x="28" y="20" width="44" height="60" rx="8"></rect>194 <rect x="38" y="30" width="24" height="40" rx="4" fill="rgba(255,255,255,0.7)"></rect>195 </svg>196 <div class="tab-label">ELECTRONICS</div>197 <div class="underline"></div>198 </div>199 <div class="tab">200 <svg viewBox="0 0 100 100">201 <circle cx="50" cy="40" r="18"></circle>202 <rect x="30" y="58" width="40" height="24" rx="6"></rect>203 </svg>204 <div class="tab-label">BABY & TOYS</div>205 <div class="underline"></div>206 </div>207 <div class="tab active">208 <svg viewBox="0 0 100 100">209 <rect x="12" y="50" width="76" height="24" rx="8"></rect>210 <rect x="20" y="36" width="60" height="18" rx="6"></rect>211 <circle cx="26" cy="78" r="8"></circle>212 <circle cx="74" cy="78" r="8"></circle>213 </svg>214 <div class="tab-label">FURNITURE</div>215 <div class="underline"></div>216 </div>217 <div class="tab">218 <svg viewBox="0 0 100 100">219 <path d="M20 70 Q30 40 40 60 Q50 40 60 60 Q70 40 80 70" stroke="rgba(255,255,255,0.9)" stroke-width="8" fill="none"></path>220 <circle cx="30" cy="34" r="6"></circle>221 </svg>222 <div class="tab-label">PET SUPPLIES</div>223 <div class="underline"></div>224 </div>225 <div class="tab">226 <svg viewBox="0 0 100 100">227 <rect x="18" y="44" width="64" height="30" rx="6"></rect>228 <rect x="36" y="30" width="28" height="18" rx="4"></rect>229 </svg>230 <div class="tab-label">MOVING</div>231 <div class="underline"></div>232 </div>233 </div>234 </div>235 236 <!-- Content grid -->237 <div class="content">238 <div class="cards">239 <div class="card">240 <div class="img">[IMG: Pottery Barn Logo]</div>241 <div class="label">Pottery Barn</div>242 </div>243 <div class="card">244 <div class="img">[IMG: Walmart Logo]</div>245 <div class="label">Walmart</div>246 </div>247 <div class="card">248 <div class="img">[IMG: Wayfair Logo]</div>249 <div class="label">Wayfair</div>250 </div>251 <div class="card">252 <div class="img">[IMG: Home Depot Logo]</div>253 <div class="label">Homedepot</div>254 </div>255 256 <div class="card">257 <div class="img">[IMG: Joss & Main Logo]</div>258 <div class="label">Joss & Main</div>259 </div>260 <div class="card">261 <div class="img">[IMG: Bed Bath & Beyond Logo]</div>262 <div class="label">Bedbath B</div>263 </div>264 <div class="card">265 <div class="img">[IMG: AllModern Logo]</div>266 <div class="label">AllModern</div>267 </div>268 <div class="card">269 <div class="img">[IMG: IKEA Logo]</div>270 <div class="label">Ikea</div>271 </div>272 273 <div class="card">274 <div class="img">[IMG: Target Logo]</div>275 <div class="label">Target</div>276 </div>277 <div class="card">278 <div class="img">[IMG: Overstock Logo]</div>279 <div class="label">Overstock</div>280 </div>281 <div class="card">282 <div class="img">[IMG: Williams Sonoma Logo]</div>283 <div class="label">Williams & S.</div>284 </div>285 <div class="card">286 <div class="img">[IMG: Restoration Hardware Logo]</div>287 <div class="label">R. & Hardware</div>288 </div>289 290 <div class="card">291 <div class="img">[IMG: West Elm Logo]</div>292 <div class="label">Westelm</div>293 </div>294 <div class="card">295 <div class="img">[IMG: Hayneedle Logo]</div>296 <div class="label">Hayneedle</div>297 </div>298 <div class="card">299 <div class="img">[IMG: World Market Logo]</div>300 <div class="label">World Market</div>301 </div>302 </div>303 </div>304 305 <!-- Floating action button -->306 <div class="fab" aria-label="Add">307 <svg viewBox="0 0 100 100">308 <rect x="45" y="20" width="10" height="60" rx="5"></rect>309 <rect x="20" y="45" width="60" height="10" rx="5"></rect>310 </svg>311 </div>312 313 <!-- Bottom gesture area -->314 <div class="bottom-bar">315 <div class="home-indicator"></div>316 </div>317 318</div>319</body>320</html>