GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>RapidBox - Mock UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Inter", Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #FFFFFF;14 color: #111;15 }16 17 /* Status bar */18 .status-bar {19 height: 110px;20 background: #1f1f1f;21 color: #fff;22 display: flex;23 align-items: center;24 padding: 0 32px;25 font-weight: 600;26 letter-spacing: 1px;27 font-size: 36px;28 }29 .status-bar .right {30 margin-left: auto;31 display: flex;32 gap: 22px;33 align-items: center;34 }35 .status-dot {36 width: 16px; height: 16px; background:#fff; border-radius:50%;37 }38 39 /* Header */40 .header {41 height: 140px;42 background: #fff;43 display: flex;44 align-items: center;45 padding: 0 40px;46 border-bottom: 1px solid #eee;47 }48 .logo {49 display: flex; align-items: center; gap: 18px;50 font-size: 44px; font-weight: 800; color: #1b1b1b;51 }52 .logo-mark {53 width: 54px; height: 54px; background: #ffd54f; border-radius: 12px;54 }55 .header-actions { margin-left: auto; display: flex; gap: 32px; }56 .icon-btn { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; }57 .icon { width: 44px; height: 44px; }58 59 /* Category big chips */60 .categories {61 padding: 22px 34px 20px;62 display: grid;63 grid-template-columns: repeat(3, 1fr);64 gap: 24px;65 }66 .cat-card {67 background: #f7f7f7;68 border: 2px solid #ececec;69 border-radius: 24px;70 height: 180px;71 display: flex; align-items: flex-end; justify-content: center;72 position: relative;73 overflow: hidden;74 }75 .cat-card::before {76 content: "";77 position: absolute;78 top: -30px; right: -30px;79 width: 180px; height: 180px;80 background: rgba(230,230,230,0.9);81 border-radius: 50%;82 }83 .cat-title {84 font-size: 40px;85 font-weight: 800;86 margin-bottom: 24px;87 }88 89 /* Section heading */90 .section-title {91 font-size: 48px;92 font-weight: 800;93 padding: 20px 40px 10px;94 }95 96 /* Product mini grid */97 .mini-grid {98 padding: 10px 34px 0;99 display: grid;100 grid-template-columns: repeat(3, 1fr);101 gap: 26px;102 }103 .mini-card {104 background: #edf3ff;105 border-radius: 26px;106 border: 1px solid #d7e0ff;107 padding: 26px;108 display: flex;109 flex-direction: column;110 align-items: center;111 height: 340px;112 box-shadow: inset 0 0 0 6px #e4ebff;113 }114 .img-placeholder {115 width: 240px; height: 220px;116 background: #E0E0E0;117 border: 1px solid #BDBDBD;118 display: flex; align-items: center; justify-content: center;119 color: #757575;120 border-radius: 18px;121 text-align: center;122 font-size: 28px;123 padding: 8px;124 }125 .mini-title {126 margin-top: 20px;127 font-size: 38px;128 font-weight: 800;129 text-align: center;130 }131 132 /* Banner */133 .banner {134 margin: 34px;135 border-radius: 26px;136 height: 560px;137 background: linear-gradient(90deg, #4c3cff, #8a3ef5, #7a20d9);138 position: relative;139 padding: 36px;140 overflow: hidden;141 }142 .banner .models {143 position: absolute;144 left: 26px; top: 80px;145 display: flex; gap: 22px;146 }147 .banner .models .ph {148 width: 240px; height: 360px;149 background: #E0E0E0; border: 1px solid #BDBDBD;150 color: #757575; display: flex; align-items: center; justify-content: center;151 border-radius: 12px;152 }153 .banner .text {154 position: absolute;155 right: 36px; top: 120px;156 color: #fff;157 text-align: right;158 }159 .banner .text .big {160 font-size: 88px;161 font-weight: 900;162 letter-spacing: 2px;163 line-height: 1.05;164 }165 .banner .text .small {166 margin-top: 12px;167 font-size: 56px;168 opacity: 0.9;169 font-weight: 600;170 }171 .banner .cta {172 position: absolute; right: 46px; bottom: 46px;173 width: 112px; height: 112px; border-radius: 56px;174 background: #1b1133; display: grid; place-items: center;175 }176 .banner .cta svg { width: 48px; height: 48px; stroke: #fff; }177 178 /* Our Brands strip */179 .brands-strip {180 margin-top: 10px;181 height: 120px;182 background: #0f1327;183 color: #fff;184 display: flex; align-items: center; justify-content: center;185 font-size: 48px; font-weight: 800;186 letter-spacing: 1px;187 }188 .brands-strip .highlight { color: #75ff57; margin-left: 14px; }189 190 .brand-logos {191 padding: 26px 40px;192 display: flex; gap: 60px; align-items: center; justify-content: flex-start;193 }194 .brand-logo {195 height: 140px; width: 460px;196 background: #ffffff;197 border: 2px solid #ececec;198 border-radius: 18px;199 display: flex; align-items: center; justify-content: center;200 font-size: 48px; font-weight: 800;201 }202 203 /* Bottom navigation */204 .bottom-nav {205 position: absolute;206 left: 0; right: 0; bottom: 0;207 height: 170px;208 background: #fafafa;209 border-top: 1px solid #e5e5e5;210 display: flex; align-items: center; justify-content: space-around;211 }212 .nav-item {213 display: flex; flex-direction: column; align-items: center; gap: 12px;214 color: #6b6b6b; font-size: 32px; font-weight: 600;215 }216 .nav-item.active { color: #f3b300; }217 .nav-icon { width: 58px; height: 58px; }218 219 /* Misc helpers */220 .srch-heart { color: #1a2a44; }221</style>222</head>223<body>224<div id="render-target">225 226 <!-- Status Bar -->227 <div class="status-bar">228 11:54229 <div class="right">230 <div class="status-dot"></div>231 <div class="status-dot" style="opacity:.8"></div>232 <div class="status-dot" style="opacity:.6"></div>233 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">234 <rect x="1" y="6" width="18" height="12" rx="3"></rect>235 <path d="M21 10v4"></path>236 </svg>237 </div>238 </div>239 240 <!-- Header -->241 <div class="header">242 <div class="logo">243 <div class="logo-mark"></div>244 RapidBox245 </div>246 <div class="header-actions">247 <div class="icon-btn srch-heart" title="Search">248 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">249 <circle cx="11" cy="11" r="7"></circle>250 <path d="M20 20l-3.5-3.5"></path>251 </svg>252 </div>253 <div class="icon-btn srch-heart" title="Wishlist">254 <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">255 <path d="M12 21s-7-4.3-9.5-8A5.5 5.5 0 0 1 12 5a5.5 5.5 0 0 1 9.5 8C19 16.7 12 21 12 21z"></path>256 </svg>257 </div>258 </div>259 </div>260 261 <!-- Categories -->262 <div class="categories">263 <div class="cat-card">264 <div class="cat-title">Sneakers</div>265 </div>266 <div class="cat-card">267 <div class="cat-title">Clothing</div>268 </div>269 <div class="cat-card">270 <div class="cat-title">Clogs & Slides</div>271 </div>272 </div>273 274 <!-- Section: Her Wardrobe -->275 <div class="section-title">Her Wardrobe</div>276 <div class="mini-grid">277 <div class="mini-card">278 <div class="img-placeholder">[IMG: Colorful Sneaker]</div>279 <div class="mini-title">Sneakers</div>280 </div>281 <div class="mini-card">282 <div class="img-placeholder">[IMG: Sports Tee]</div>283 <div class="mini-title">Sport’s Tee</div>284 </div>285 <div class="mini-card">286 <div class="img-placeholder">[IMG: Casual Tee Graphic]</div>287 <div class="mini-title">Casual Tee</div>288 </div>289 </div>290 291 <!-- Banner -->292 <div class="banner">293 <div class="models">294 <div class="ph">[IMG: Back View Tee]</div>295 <div class="ph">[IMG: Front View Tee]</div>296 </div>297 <div class="text">298 <div class="big">CHALLENGE</div>299 <div class="small">Your Limit</div>300 </div>301 <div class="cta" aria-label="Go">302 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">303 <path d="M5 12h14"></path>304 <path d="M13 6l6 6-6 6"></path>305 </svg>306 </div>307 </div>308 309 <!-- Our Brands -->310 <div class="brands-strip">311 OUR <span class="highlight">BRANDS</span>312 </div>313 314 <div class="brand-logos">315 <div class="brand-logo">RapidBox</div>316 <div class="brand-logo">ATOM</div>317 </div>318 319 <!-- Bottom Navigation -->320 <div class="bottom-nav">321 <div class="nav-item active">322 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">323 <path d="M3 12l9-8 9 8"></path>324 <path d="M5 10v10h14V10"></path>325 </svg>326 <div>Home</div>327 </div>328 <div class="nav-item">329 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">330 <rect x="3" y="3" width="7" height="7"></rect>331 <rect x="14" y="3" width="7" height="7"></rect>332 <rect x="3" y="14" width="7" height="7"></rect>333 <rect x="14" y="14" width="7" height="7"></rect>334 </svg>335 <div>Category</div>336 </div>337 <div class="nav-item">338 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">339 <circle cx="12" cy="12" r="8"></circle>340 <path d="M12 7v5l3 3"></path>341 </svg>342 <div>Rewards</div>343 </div>344 <div class="nav-item">345 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">346 <path d="M6 6h15l-2 10H7L6 6z"></path>347 <circle cx="9" cy="20" r="1.5"></circle>348 <circle cx="18" cy="20" r="1.5"></circle>349 </svg>350 <div>Cart</div>351 </div>352 <div class="nav-item">353 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">354 <circle cx="12" cy="8" r="4"></circle>355 <path d="M4 22c1.5-4 6-6 8-6s6.5 2 8 6"></path>356 </svg>357 <div>Account</div>358 </div>359 </div>360 361</div>362</body>363</html>