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>Shopsy - Mock UI</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: Arial, Helvetica, sans-serif;13 color: #222;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #ffffff;21 }22 23 /* Common */24 .row {25 display: flex;26 align-items: center;27 }28 .space-between {29 justify-content: space-between;30 }31 .section {32 padding: 0 40px;33 }34 .title {35 font-weight: 700;36 }37 .placeholder {38 background: #E0E0E0;39 border: 1px solid #BDBDBD;40 color: #555;41 display: flex;42 justify-content: center;43 align-items: center;44 text-align: center;45 }46 47 /* Status bar */48 .status-bar {49 height: 120px;50 background: #EFEFEF;51 padding: 0 36px;52 font-size: 40px;53 color: #333;54 }55 .status-icons {56 display: flex;57 gap: 24px;58 align-items: center;59 }60 .icon-wifi, .icon-battery, .icon-signal {61 width: 44px; height: 44px;62 }63 64 /* Header */65 .app-header {66 height: 140px;67 padding: 0 40px;68 display: flex;69 align-items: center;70 justify-content: space-between;71 background: #fff;72 }73 .brand {74 font-size: 56px;75 color: #5C5CFF;76 font-weight: 800;77 letter-spacing: 1px;78 }79 .login {80 font-size: 44px;81 color: #2F51FF;82 font-weight: 700;83 }84 85 /* Banners as image placeholders */86 .coupon-banner {87 margin: 16px 32px 20px;88 height: 210px;89 border-radius: 22px;90 }91 .hero-banner {92 margin: 0 0 8px;93 height: 520px;94 border-radius: 10px;95 }96 .carousel-dots {97 height: 26px;98 display: flex;99 justify-content: center;100 align-items: center;101 gap: 14px;102 margin-bottom: 10px;103 }104 .dot {105 width: 22px; height: 22px; border-radius: 50%;106 background: #CFCFCF;107 }108 .dot.active { background: #7B7B7B; }109 110 /* Categories */111 .categories {112 padding: 16px 20px 18px;113 background: #fff;114 }115 .cat-row {116 display: flex;117 justify-content: space-between;118 gap: 10px;119 }120 .cat-item {121 width: 200px;122 display: flex;123 flex-direction: column;124 align-items: center;125 }126 .cat-ring {127 width: 160px; height: 160px;128 border-radius: 50%;129 border: 10px solid #E6CE7A;130 display: flex;131 align-items: center;132 justify-content: center;133 background: #FFF8E1;134 margin-bottom: 16px;135 }136 .cat-img {137 width: 130px; height: 130px; border-radius: 50%;138 font-size: 22px;139 padding: 10px;140 }141 .cat-label {142 text-align: center;143 color: #2E2EFC;144 font-size: 32px;145 font-weight: 700;146 line-height: 1.1;147 }148 149 /* Feature ribbon */150 .features {151 margin: 10px 0 18px;152 padding: 22px 24px;153 background: #3A42D0;154 color: #fff;155 border-top: 6px solid #FFD460;156 border-bottom: 6px solid #FFD460;157 }158 .features .feat {159 flex: 1;160 display: flex;161 align-items: center;162 gap: 14px;163 justify-content: center;164 font-size: 36px;165 font-weight: 700;166 }167 .feat svg { width: 44px; height: 44px; fill: #FFD460; }168 169 /* Loot store banner */170 .loot-banner {171 margin: 8px 0 18px;172 height: 460px;173 border-radius: 12px;174 }175 176 /* Cozy space banner */177 .cozy-banner {178 margin: 0 0 12px;179 height: 380px;180 border-radius: 12px;181 }182 183 /* Bottom nav */184 .bottom-nav {185 position: absolute;186 left: 0; right: 0; bottom: 40px;187 height: 160px;188 border-top: 1px solid #E5E5E5;189 background: #ffffff;190 display: flex;191 justify-content: space-around;192 align-items: center;193 }194 .tab {195 display: flex;196 flex-direction: column;197 align-items: center;198 gap: 10px;199 color: #444;200 font-size: 28px;201 font-weight: 600;202 }203 .tab.active { color: #4A47FF; }204 .tab svg { width: 52px; height: 52px; }205 206 /* Gesture pill */207 .gesture-pill {208 position: absolute;209 left: 50%;210 transform: translateX(-50%);211 bottom: 4px;212 width: 360px; height: 12px;213 background: #101010;214 border-radius: 8px;215 opacity: 0.9;216 }217</style>218</head>219<body>220<div id="render-target">221 222 <!-- Status Bar -->223 <div class="status-bar row space-between">224 <div class="row" style="gap:18px;">225 <div>12:09</div>226 <svg class="icon-signal" viewBox="0 0 24 24">227 <path d="M2 20h2v-4H2v4zm4 0h2v-7H6v7zm4 0h2v-10h-2v10zm4 0h2V6h-2v14zm4 0h2V3h-2v17z" fill="#444"/>228 </svg>229 </div>230 <div class="status-icons">231 <svg class="icon-wifi" viewBox="0 0 24 24">232 <path d="M12 18a2 2 0 110 4 2 2 0 010-4zm-7-6l1.4 1.4a9 9 0 0111.2 0L19 12a11 11 0 00-14 0zm3.5-3.5L10 9a6 6 0 014 0l1.5-1.5a8 8 0 00-7 0z" fill="#444"/>233 </svg>234 <svg class="icon-battery" viewBox="0 0 24 24">235 <rect x="1" y="7" width="18" height="10" rx="2" fill="none" stroke="#444" stroke-width="2"/>236 <rect x="3" y="9" width="12" height="6" fill="#444"/>237 <rect x="20" y="10" width="3" height="4" rx="1" fill="#444"/>238 </svg>239 </div>240 </div>241 242 <!-- Header -->243 <div class="app-header">244 <div class="brand">shopsy</div>245 <div class="login">Log in</div>246 </div>247 248 <!-- Coupon Banner -->249 <div class="section">250 <div class="placeholder coupon-banner" style="font-size:44px; border-radius:24px;">251 [IMG: Coupon Banner - Extra 25% Off, Limited Time Offer]252 </div>253 </div>254 255 <!-- Hero Banner -->256 <div class="section" style="padding-left:32px; padding-right:32px;">257 <div class="placeholder hero-banner" style="font-size:44px; border-radius:16px;">258 [IMG: Smartphone Launch Hero Banner]259 </div>260 <div class="carousel-dots">261 <div class="dot"></div>262 <div class="dot"></div>263 <div class="dot active"></div>264 <div class="dot"></div>265 <div class="dot"></div>266 <div class="dot"></div>267 </div>268 </div>269 270 <!-- Categories Row -->271 <div class="categories">272 <div class="cat-row">273 <div class="cat-item">274 <div class="cat-ring">275 <div class="placeholder cat-img">Mobiles</div>276 </div>277 <div class="cat-label">Mobiles</div>278 </div>279 <div class="cat-item">280 <div class="cat-ring">281 <div class="placeholder cat-img">Live Now</div>282 </div>283 <div class="cat-label">Live Now</div>284 </div>285 <div class="cat-item">286 <div class="cat-ring">287 <div class="placeholder cat-img">Women’s Fashion</div>288 </div>289 <div class="cat-label">Women's Fashion</div>290 </div>291 <div class="cat-item">292 <div class="cat-ring">293 <div class="placeholder cat-img">Men’s Fashion</div>294 </div>295 <div class="cat-label">Men's Fashion</div>296 </div>297 <div class="cat-item">298 <div class="cat-ring">299 <div class="placeholder cat-img">Beauty & More</div>300 </div>301 <div class="cat-label">Beauty & more</div>302 </div>303 </div>304 </div>305 306 <!-- Feature Ribbon -->307 <div class="features row">308 <div class="feat">309 <svg viewBox="0 0 24 24"><path d="M12 2l4 4-6 6H6V8l6-6zM2 20h20v2H2z"/></svg>310 <span>Affordable Prices</span>311 </div>312 <div class="feat">313 <svg viewBox="0 0 24 24"><path d="M12 2l7 4v6c0 5-3 8-7 10-4-2-7-5-7-10V6l7-4z"/></svg>314 <span>Good Quality</span>315 </div>316 <div class="feat">317 <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm2 4h14l-1 8H6l-1-8zm5 10a2 2 0 104 0H10z"/></svg>318 <span>Free Delivery</span>319 </div>320 </div>321 322 <!-- Loot Stores Banner -->323 <div class="section" style="padding-left:32px; padding-right:32px;">324 <div class="placeholder loot-banner" style="font-size:44px;">325 [IMG: The Loot Stores - Under 45/95, Shop Now]326 </div>327 </div>328 329 <!-- Cozy Space Banner -->330 <div class="section" style="padding-left:32px; padding-right:32px;">331 <div class="placeholder cozy-banner" style="font-size:44px;">332 [IMG: Create Your Cozy Space - Home Sale]333 </div>334 </div>335 336 <!-- Bottom Navigation -->337 <div class="bottom-nav">338 <div class="tab active">339 <svg viewBox="0 0 24 24"><path d="M12 3l9 8h-3v9H6v-9H3l9-8z" fill="currentColor"/></svg>340 <div>Home</div>341 </div>342 <div class="tab">343 <svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3A6.5 6.5 0 1015.5 14l4.5 4.5-1 1L15.5 14zM6.5 11a4.5 4.5 0 110-9 4.5 4.5 0 010 9z" fill="currentColor"/></svg>344 <div>Search</div>345 </div>346 <div class="tab">347 <svg viewBox="0 0 24 24"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 8v-8h8v8h-8z" fill="currentColor"/></svg>348 <div>Categories</div>349 </div>350 <div class="tab">351 <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm-9 9c0-4 4-7 9-7s9 3 9 7v1H3v-1z" fill="currentColor"/></svg>352 <div>Account</div>353 </div>354 <div class="tab">355 <svg viewBox="0 0 24 24"><path d="M7 6h14l-2 10H7L5 4H2V2h3l2 12h11l1-6H8zM7 20a2 2 0 104 0 2 2 0 00-4 0zm8 0a2 2 0 104 0 2 2 0 00-4 0z" fill="currentColor"/></svg>356 <div>Cart</div>357 </div>358 </div>359 360 <!-- Gesture Pill -->361 <div class="gesture-pill"></div>362</div>363</body>364</html>