GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Shopsy Mock UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff; border-radius: 24px;13 }14 15 /* Status bar */16 .status-bar {17 height: 100px; background: #EDEDED; color: #333; display: flex; align-items: center; justify-content: space-between;18 padding: 0 40px; font-size: 36px;19 }20 .status-right { display: flex; align-items: center; gap: 24px; }21 .dot { width: 10px; height: 10px; border-radius: 50%; background: #666; display: inline-block; margin: 0 6px; }22 23 /* Header */24 .header {25 height: 140px; background: #fff; display: flex; align-items: center; justify-content: space-between;26 padding: 0 40px;27 }28 .brand { font-weight: 800; font-size: 54px; color: #5e37ff; letter-spacing: 0.5px; }29 .login { font-size: 38px; color: #1a73e8; }30 31 /* Offer banner (image placeholder) */32 .offer-banner {33 margin: 16px 40px 24px; height: 180px;34 display: flex; align-items: center; justify-content: center;35 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575; border-radius: 18px;36 font-size: 36px;37 }38 39 /* Hero */40 .hero {41 margin: 0 0 12px 0;42 height: 520px;43 background: linear-gradient(90deg, #6d3bff 0%, #8a52ff 50%, #5f2bd9 100%);44 position: relative;45 padding: 40px;46 color: #fff;47 }48 .hero-content { display: flex; height: 100%; }49 .hero-left { width: 560px; display: flex; flex-direction: column; justify-content: center; }50 .hero-title { font-size: 60px; font-weight: 800; line-height: 1.1; margin-bottom: 16px; }51 .hero-sub { font-size: 32px; opacity: 0.95; margin-bottom: 24px; }52 .hero-price { font-size: 46px; font-weight: 800; margin-bottom: 24px; }53 .btn {54 display: inline-flex; align-items: center; gap: 14px;55 background: #ffeb72; color: #3a2a00; font-weight: 700; border-radius: 12px;56 padding: 18px 26px; font-size: 32px;57 }58 .hero-right {59 flex: 1; display: flex; align-items: center; justify-content: center;60 }61 .img-placeholder {62 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;63 display: flex; align-items: center; justify-content: center;64 }65 .hero-right .img-placeholder { width: 430px; height: 430px; border-radius: 18px; }66 67 .carousel-dots { height: 40px; display: flex; align-items: center; justify-content: center; gap: 14px; }68 .dot-round { width: 18px; height: 18px; border-radius: 50%; background: #cfc6f9; }69 .dot-round.active { width: 36px; border-radius: 9px; background: #7c5cff; }70 71 /* Categories grid */72 .categories {73 background: #fff; padding: 20px 20px 0;74 }75 .cat-row {76 display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px;77 }78 .cat-item {79 width: 20%;80 display: flex; flex-direction: column; align-items: center; text-align: center;81 padding: 18px 8px;82 }83 .icon-wrap {84 width: 170px; height: 170px; border-radius: 50%;85 border: 6px solid #e8c66b; display: flex; align-items: center; justify-content: center;86 background: #fff; position: relative;87 box-shadow: 0 2px 6px rgba(0,0,0,0.04);88 }89 .icon-wrap .img-placeholder { width: 150px; height: 150px; border-radius: 50%; font-size: 24px; }90 .badge-new {91 position: absolute; top: -8px; left: -8px;92 background: #5e37ff; color: #fff; font-size: 24px; padding: 6px 12px; border-radius: 20px;93 box-shadow: 0 2px 4px rgba(0,0,0,0.12);94 }95 .cat-label {96 margin-top: 12px; font-size: 30px; color: #222; line-height: 1.2;97 }98 99 /* Feature ribbon */100 .features {101 margin: 12px 20px 20px; border-radius: 18px; padding: 26px 20px;102 background: linear-gradient(90deg, #4f38f7, #6a4ff8);103 color: #fff; display: flex; justify-content: space-around; align-items: center;104 }105 .feat { display: flex; align-items: center; gap: 16px; font-size: 32px; }106 .feat svg { width: 48px; height: 48px; fill: #fff; }107 108 /* Loot banner */109 .loot-banner {110 margin: 0 20px; height: 320px; border-radius: 18px; position: relative;111 background: linear-gradient(90deg, #6d3bff 0%, #8a52ff 50%, #5f2bd9 100%);112 color: #fff; padding: 24px;113 }114 .loot-title { text-align: center; font-size: 54px; font-weight: 900; letter-spacing: 2px; }115 .loot-sub { text-align: center; font-size: 28px; margin-top: 8px; opacity: 0.9; }116 .loot-badges { position: absolute; top: 70px; left: 24px; right: 24px; display: flex; justify-content: space-between; align-items: center; }117 .loot-badge {118 width: 240px; height: 180px; border-radius: 14px;119 display: flex; align-items: center; justify-content: center;120 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575; font-size: 28px;121 }122 .loot-cta {123 position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);124 background: #ffeb72; color: #3a2a00; padding: 16px 28px; border-radius: 12px; font-weight: 800; font-size: 30px;125 }126 127 /* Bottom nav */128 .bottom-nav {129 position: absolute; left: 0; right: 0; bottom: 0; height: 180px;130 background: #fff; border-top: 1px solid #e5e5e5;131 display: flex; align-items: center; justify-content: space-around;132 }133 .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #777; font-size: 28px; position: relative; }134 .nav-item.active { color: #2a57ff; }135 .nav-item svg { width: 56px; height: 56px; margin-bottom: 8px; }136 .nav-item.active svg { fill: #2a57ff; }137 .nav-item svg { fill: #777; }138 .red-dot {139 position: absolute; top: 12px; right: 48px; width: 16px; height: 16px; border-radius: 50%; background: #ff3b30;140 }141 .cart-badge {142 position: absolute; top: 8px; right: 38px; min-width: 34px; height: 34px; padding: 0 8px;143 background: #ff3b30; color: #fff; font-size: 24px; border-radius: 16px; display: flex; align-items: center; justify-content: center;144 box-shadow: 0 1px 4px rgba(0,0,0,0.2);145 }146 147 /* Safe area indicator */148 .home-indicator {149 position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);150 width: 320px; height: 12px; background: rgba(0,0,0,0.2); border-radius: 8px;151 }152 153 /* Simple arrow icon for button */154 .arrow {155 width: 22px; height: 22px; border: 2px solid #3a2a00; border-left: none; border-bottom: none; transform: rotate(-45deg);156 }157</style>158</head>159<body>160<div id="render-target">161 162 <!-- Status bar -->163 <div class="status-bar">164 <div>11:25</div>165 <div class="status-right">166 <span>B</span>167 <span>TEMU</span><span class="dot"></span><span>TEMU</span>168 <span class="dot"></span>169 <span>▵</span>170 <span>Wi-Fi</span>171 <span>🔋</span>172 </div>173 </div>174 175 <!-- Header -->176 <div class="header">177 <div class="brand">shopsy</div>178 <div class="login">Log in</div>179 </div>180 181 <!-- Offer banner placeholder -->182 <div class="offer-banner">[IMG: Limited Time Offer - Extra 20% Off Banner]</div>183 184 <!-- Hero section -->185 <div class="hero">186 <div class="hero-content">187 <div class="hero-left">188 <div class="hero-title">Cozy Elegance for Women</div>189 <div class="hero-sub">Trendy Color Block Tees & more</div>190 <div class="hero-price">From ₹125</div>191 <div class="btn">192 Shop Now193 <span class="arrow"></span>194 </div>195 </div>196 <div class="hero-right">197 <div class="img-placeholder">[IMG: Fashion Models in Hoodies]</div>198 </div>199 </div>200 </div>201 <div class="carousel-dots">202 <div class="dot-round"></div>203 <div class="dot-round"></div>204 <div class="dot-round active"></div>205 <div class="dot-round"></div>206 <div class="dot-round"></div>207 <div class="dot-round"></div>208 <div class="dot-round"></div>209 </div>210 211 <!-- Categories -->212 <div class="categories">213 <div class="cat-row">214 <div class="cat-item">215 <div class="icon-wrap">216 <div class="badge-new">New</div>217 <div class="img-placeholder">[IMG: Winter Fashion]</div>218 </div>219 <div class="cat-label">Winter<br>Fashion</div>220 </div>221 <div class="cat-item">222 <div class="icon-wrap">223 <div class="img-placeholder">[IMG: Women's Fashion]</div>224 </div>225 <div class="cat-label">Women's<br>Fashion</div>226 </div>227 <div class="cat-item">228 <div class="icon-wrap">229 <div class="img-placeholder">[IMG: Men's Fashion]</div>230 </div>231 <div class="cat-label">Men's<br>Fashion</div>232 </div>233 <div class="cat-item">234 <div class="icon-wrap">235 <div class="img-placeholder">[IMG: Electronics Accessories]</div>236 </div>237 <div class="cat-label">Electronics</div>238 </div>239 <div class="cat-item">240 <div class="icon-wrap">241 <div class="badge-new">New</div>242 <div class="img-placeholder">[IMG: Auto Accessories]</div>243 </div>244 <div class="cat-label">Auto<br>Accessories</div>245 </div>246 </div>247 248 <div class="cat-row">249 <div class="cat-item">250 <div class="icon-wrap">251 <div class="badge-new">New</div>252 <div class="img-placeholder">[IMG: Wedding Store]</div>253 </div>254 <div class="cat-label">Wedding<br>Store</div>255 </div>256 <div class="cat-item">257 <div class="icon-wrap">258 <div class="img-placeholder">[IMG: Home Products]</div>259 </div>260 <div class="cat-label">Home</div>261 </div>262 <div class="cat-item">263 <div class="icon-wrap">264 <div class="img-placeholder">[IMG: Beauty & Cosmetics]</div>265 </div>266 <div class="cat-label">Beauty &<br>more</div>267 </div>268 <div class="cat-item">269 <div class="icon-wrap">270 <div class="img-placeholder">[IMG: Kids & Toys]</div>271 </div>272 <div class="cat-label">Kids & Toys</div>273 </div>274 <div class="cat-item">275 <div class="icon-wrap">276 <div class="img-placeholder">[IMG: Fitness Equipment]</div>277 </div>278 <div class="cat-label">Fitness</div>279 </div>280 </div>281 </div>282 283 <!-- Feature ribbon -->284 <div class="features">285 <div class="feat">286 <svg viewBox="0 0 24 24"><path d="M3 12c0-3 2.5-5 5.5-5H12v3H8.5C7 10 6 11 6 12s1 2 2.5 2H12v3H8.5C5.5 17 3 15 3 12zm12-7h6v4h-6V5zm0 9h6v4h-6v-4z"></path></svg>287 <span>Affordable Prices</span>288 </div>289 <div class="feat">290 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .5-4.5 4 1.5 6.5L12 16l-6 3 1.5-6.5L3 8.5 9 8l3-6z"></path></svg>291 <span>Good Quality</span>292 </div>293 <div class="feat">294 <svg viewBox="0 0 24 24"><path d="M3 6h13l3 5v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6zm2 2v10h12V12H9l-4-4z"></path></svg>295 <span>Free Delivery</span>296 </div>297 </div>298 299 <!-- Loot Stores banner -->300 <div class="loot-banner">301 <div class="loot-title">THE LOOT STORES</div>302 <div class="loot-sub">Sale Valid For 1 Unit Per Customer</div>303 <div class="loot-badges">304 <div class="loot-badge">[IMG: UNDER 45 STORE Badge]</div>305 <div class="loot-badge">[IMG: UNDER 95 STORE Badge]</div>306 </div>307 <div class="loot-cta">SHOP NOW</div>308 </div>309 310 <!-- Spacer to allow scroll feel -->311 <div style="height: 320px;"></div>312 313 <!-- Bottom Navigation -->314 <div class="bottom-nav">315 <div class="nav-item active">316 <svg viewBox="0 0 24 24"><path d="M12 3l9 8h-2v9h-5v-6H10v6H5v-9H3l9-8z"></path></svg>317 <div>Home</div>318 </div>319 <div class="nav-item">320 <svg viewBox="0 0 24 24"><path d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16zm11 19-5.5-5.5"></path></svg>321 <div>Search</div>322 </div>323 <div class="nav-item">324 <span class="red-dot"></span>325 <svg viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"></path></svg>326 <div>Categories</div>327 </div>328 <div class="nav-item">329 <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0-0.001-10.001A5 5 0 0 0 12 12zm-8 9c0-4.418 3.582-8 8-8s8 3.582 8 8H4z"></path></svg>330 <div>Account</div>331 </div>332 <div class="nav-item">333 <div class="cart-badge">1</div>334 <svg viewBox="0 0 24 24"><path d="M3 4h2l3 12h10l2-8H7"></path><circle cx="9" cy="20" r="2"></circle><circle cx="18" cy="20" r="2"></circle></svg>335 <div>Cart</div>336 </div>337 </div>338 339 <div class="home-indicator"></div>340</div>341</body>342</html>