GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>RapidBox 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: #ffffff;14 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif;15 color: #1a1a1a;16 }17 18 /* Status bar */19 .status-bar {20 height: 120px;21 background: #1f1f1f;22 color: #fff;23 display: flex;24 align-items: center;25 padding: 0 40px;26 font-weight: 600;27 letter-spacing: 0.5px;28 box-sizing: border-box;29 }30 .status-left {31 display: flex;32 align-items: center;33 gap: 24px;34 }35 .sb-dot { width: 22px; height: 22px; background: #d9d9d9; border-radius: 50%; opacity: 0.9; }36 .status-right {37 margin-left: auto;38 display: flex;39 align-items: center;40 gap: 18px;41 }42 .wifi, .battery, .signal {43 width: 34px; height: 24px;44 display: inline-block;45 }46 .wifi svg, .battery svg, .signal svg { width: 100%; height: 100%; }47 48 /* App header */49 .app-header {50 height: 150px;51 background: linear-gradient(90deg, #fff6de 0%, #ffffff 60%);52 display: flex;53 align-items: center;54 padding: 0 40px;55 box-sizing: border-box;56 }57 .brand {58 display: flex;59 align-items: center;60 gap: 18px;61 font-size: 56px;62 font-weight: 700;63 }64 .brand-logo {65 width: 60px; height: 60px; background: #ffd45f; border-radius: 10px;66 }67 .action-pill {68 margin-left: auto;69 background: #ffffff;70 border: 2px solid #e7e7e7;71 border-radius: 60px;72 height: 100px;73 width: 300px;74 display: flex;75 align-items: center;76 justify-content: space-evenly;77 box-shadow: 0 6px 20px rgba(0,0,0,0.06);78 }79 .icon-wrap { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }80 .icon-wrap svg { width: 44px; height: 44px; }81 82 /* Categories */83 .categories {84 padding: 30px 32px 10px 32px;85 }86 .cat-row {87 display: flex;88 justify-content: space-between;89 gap: 20px;90 }91 .cat-item {92 width: 188px;93 text-align: center;94 }95 .cat-image {96 width: 188px; height: 188px; border-radius: 50%;97 background: #E0E0E0;98 border: 1px solid #BDBDBD;99 display: flex; align-items: center; justify-content: center;100 color: #757575; font-size: 26px; padding: 10px; box-sizing: border-box;101 }102 .cat-label {103 margin-top: 18px;104 font-size: 36px;105 font-weight: 700;106 color: #2a2a2a;107 }108 109 /* Banner */110 .banner {111 margin: 16px 32px 0 32px;112 height: 520px;113 border-radius: 30px;114 background: linear-gradient(90deg, #8fd3f4 0%, #70a1ff 40%, #2f6af8 100%);115 position: relative;116 overflow: hidden;117 box-shadow: 0 10px 24px rgba(0,0,0,0.08);118 }119 .banner-content {120 position: absolute; inset: 0; padding: 30px; box-sizing: border-box; color: #ffffff;121 display: flex; flex-direction: column; justify-content: space-between;122 }123 .banner-title {124 font-size: 46px; font-weight: 800; letter-spacing: 0.5px;125 }126 .banner-img {127 width: 100%;128 height: 300px;129 background: #E0E0E0;130 border: 1px solid #BDBDBD;131 color: #173b72;132 display: flex; align-items: center; justify-content: center;133 border-radius: 16px;134 font-size: 28px;135 }136 .banner-badge {137 position: absolute; left: 30px; top: 20px;138 background: #1f1f1f; color: #fff; padding: 10px 18px; border-radius: 14px;139 font-weight: 700; letter-spacing: 1px;140 }141 142 /* Section titles */143 .section-title {144 font-size: 54px; font-weight: 800; margin: 26px 32px;145 }146 147 /* Wardrobe blocks */148 .wardrobe-block {149 margin: 0 0 26px 0;150 padding: 28px 32px 40px 32px;151 background: #dfe9ff;152 }153 .card-row {154 display: flex;155 justify-content: space-between;156 gap: 24px;157 }158 .product-card {159 width: calc((100% - 48px) / 3);160 background: #ffffff;161 border-radius: 26px;162 box-shadow: 0 6px 18px rgba(0,0,0,0.06);163 padding: 26px;164 box-sizing: border-box;165 }166 .prod-img {167 width: 100%; height: 300px;168 background: #E0E0E0; border: 1px solid #BDBDBD;169 display: flex; align-items: center; justify-content: center;170 border-radius: 20px; color: #757575; font-size: 30px; text-align: center; padding: 10px;171 }172 .prod-label {173 margin-top: 36px;174 font-size: 44px; font-weight: 800;175 }176 177 /* Bottom sheet navigation */178 .bottom-nav {179 position: absolute;180 left: 0; right: 0; bottom: 100px;181 margin: 0 0;182 height: 180px;183 background: #ffffff;184 border-top-left-radius: 40px;185 border-top-right-radius: 40px;186 box-shadow: 0 -8px 20px rgba(0,0,0,0.08);187 display: flex; align-items: center; justify-content: space-around;188 padding: 0 40px;189 }190 .nav-item {191 display: flex; flex-direction: column; align-items: center; justify-content: center;192 gap: 12px; color: #3d3d3d; font-size: 32px; font-weight: 600;193 }194 .nav-item svg { width: 58px; height: 58px; }195 .nav-item.active { color: #fecc3d; }196 .nav-item.active svg path { fill: #fecc3d; }197 198 .home-indicator {199 position: absolute; left: 50%; transform: translateX(-50%);200 bottom: 28px; width: 480px; height: 14px; border-radius: 8px; background: #1a1a1a;201 opacity: 0.12;202 }203</style>204</head>205<body>206<div id="render-target">207 208 <!-- Status Bar -->209 <div class="status-bar">210 <div class="status-left">211 <div style="font-size:48px;">11:54</div>212 <div class="sb-dot"></div>213 <div class="sb-dot"></div>214 <div class="sb-dot"></div>215 <div class="sb-dot"></div>216 </div>217 <div class="status-right">218 <div class="signal">219 <svg viewBox="0 0 24 24" fill="#fff"><path d="M2 20h2v2H2v-2zm4-4h2v6H6v-6zm4-4h2v10h-2V12zm4-4h2v14h-2V8zm4-6h2v20h-2V2z"/></svg>220 </div>221 <div class="wifi">222 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M2 8c5-4 15-4 20 0"/><path d="M5 12c3-3 11-3 14 0"/><path d="M8 16c2-2 6-2 8 0"/><circle cx="12" cy="19" r="1.5" fill="#fff"/></svg>223 </div>224 <div class="battery">225 <svg viewBox="0 0 28 16" fill="none" stroke="#fff" stroke-width="2">226 <rect x="1" y="3" width="22" height="10" rx="2"></rect>227 <rect x="24" y="6" width="3" height="4"></rect>228 <rect x="3" y="5" width="14" height="6" fill="#fff" stroke="none"></rect>229 </svg>230 </div>231 </div>232 </div>233 234 <!-- App Header -->235 <div class="app-header">236 <div class="brand">237 <div class="brand-logo"></div>238 <div>RapidBox</div>239 </div>240 <div class="action-pill">241 <div class="icon-wrap">242 <svg viewBox="0 0 24 24" fill="none" stroke="#2d2d2d" stroke-width="2">243 <circle cx="11" cy="11" r="7"></circle>244 <line x1="16.5" y1="16.5" x2="22" y2="22"></line>245 </svg>246 </div>247 <div class="icon-wrap">248 <svg viewBox="0 0 24 24" fill="none" stroke="#2d2d2d" stroke-width="2">249 <path d="M12 21s-7-4.7-9.5-8.2C1 10 2 6.5 5.5 5.7c2-.5 3.6.5 4.5 2 1-1.5 2.6-2.5 4.5-2 3.5.8 4.5 4.3 3 7.1C19 16.3 12 21 12 21z"></path>250 </svg>251 </div>252 </div>253 </div>254 255 <!-- Categories -->256 <div class="categories">257 <div class="cat-row">258 <div class="cat-item">259 <div class="cat-image">[IMG: Just Dropped Shoe]</div>260 <div class="cat-label">Just Dropped</div>261 </div>262 <div class="cat-item">263 <div class="cat-image">[IMG: Men Fashion]</div>264 <div class="cat-label">Men</div>265 </div>266 <div class="cat-item">267 <div class="cat-image">[IMG: Women Fashion]</div>268 <div class="cat-label">Women</div>269 </div>270 <div class="cat-item">271 <div class="cat-image">[IMG: Combos Outfit]</div>272 <div class="cat-label">Combos</div>273 </div>274 <div class="cat-item">275 <div class="cat-image">[IMG: Trending Shoe]</div>276 <div class="cat-label">Trending</div>277 </div>278 </div>279 </div>280 281 <!-- Banner -->282 <div class="banner">283 <div class="banner-badge">ATOM</div>284 <div class="banner-content">285 <div class="banner-title">Engineered for Unmatched Comfort</div>286 <div class="banner-img">[IMG: Black Sneaker on Robotic Hand]</div>287 </div>288 </div>289 290 <!-- His Wardrobe -->291 <div class="section-title">His Wardrobe</div>292 <div class="wardrobe-block">293 <div class="card-row">294 <div class="product-card">295 <div class="prod-img">[IMG: Sneaker Shoe]</div>296 <div class="prod-label">Sneakers</div>297 </div>298 <div class="product-card">299 <div class="prod-img">[IMG: Men T‑Shirt]</div>300 <div class="prod-label">Clothing</div>301 </div>302 <div class="product-card">303 <div class="prod-img">[IMG: Blue Clogs & Slides]</div>304 <div class="prod-label">Clogs & Slides</div>305 </div>306 </div>307 </div>308 309 <!-- Her Wardrobe -->310 <div class="section-title">Her Wardrobe</div>311 <div class="wardrobe-block">312 <div class="card-row">313 <div class="product-card">314 <div class="prod-img">[IMG: Women Sneaker]</div>315 <div class="prod-label">Sneakers</div>316 </div>317 <div class="product-card">318 <div class="prod-img">[IMG: Women T‑Shirt]</div>319 <div class="prod-label">Clothing</div>320 </div>321 <div class="product-card">322 <div class="prod-img">[IMG: Kids Mickey Tee]</div>323 <div class="prod-label">Tops</div>324 </div>325 </div>326 </div>327 328 <!-- Bottom Navigation -->329 <div class="bottom-nav">330 <div class="nav-item active">331 <svg viewBox="0 0 24 24"><path d="M12 3l9 8v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-9l9-8z" fill="#bfbfbf"/></svg>332 <div>Home</div>333 </div>334 <div class="nav-item">335 <svg viewBox="0 0 24 24" fill="#8a8a8a"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/></svg>336 <div>Category</div>337 </div>338 <div class="nav-item">339 <svg viewBox="0 0 24 24" fill="#8a8a8a"><path d="M12 2l2.9 6 6.6.5-5 4.3 1.5 6.4L12 16.9 6 19.2l1.5-6.4-5-4.3 6.6-.5L12 2z"/></svg>340 <div>Rewards</div>341 </div>342 <div class="nav-item">343 <svg viewBox="0 0 24 24" fill="#8a8a8a"><path d="M7 6h14l-2 12H7L5 6h2zm3 14a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>344 <div>Cart</div>345 </div>346 <div class="nav-item">347 <svg viewBox="0 0 24 24" fill="#8a8a8a"><path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-5.3 0-9 3.1-9 6v2h18v-2c0-2.9-3.7-6-9-6z"/></svg>348 <div>Account</div>349 </div>350 </div>351 352 <div class="home-indicator"></div>353 354</div>355</body>356</html>