GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Party Wear Formal Shoes - UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: linear-gradient(180deg, #b7e5df 0%, #a6e0d1 40%, #9fd9cc 100%);13 border-radius: 32px;14 box-shadow: 0 10px 30px rgba(0,0,0,0.15);15 }16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0; left: 0; right: 0;20 height: 90px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 padding: 0 32px;25 color: #303030;26 font-weight: 600;27 font-size: 34px;28 }29 .status-icons {30 display: flex; gap: 18px; align-items: center;31 }32 .icon-dot, .icon-pill {33 width: 28px; height: 28px; border-radius: 6px; background: #2f2f2f;34 }35 /* Search section */36 .search-row {37 position: absolute;38 top: 90px;39 left: 0; right: 0;40 padding: 18px 24px;41 display: flex; align-items: center; gap: 22px;42 }43 .back-btn {44 width: 72px; height: 72px; border-radius: 18px;45 display: flex; align-items: center; justify-content: center;46 background: rgba(255,255,255,0.6);47 }48 .search-box {49 flex: 1;50 height: 92px;51 background: #ffffff;52 border-radius: 22px;53 display: flex; align-items: center;54 padding: 0 24px;55 box-shadow: inset 0 0 0 2px rgba(0,0,0,0.06);56 }57 .search-box svg { width: 38px; height: 38px; fill: #3b3b3b; }58 .search-input {59 flex: 1;60 border: none;61 outline: none;62 font-size: 34px;63 color: #222;64 background: transparent;65 margin: 0 16px;66 }67 .scan-btn {68 width: 68px; height: 68px; border-radius: 16px;69 display: flex; align-items: center; justify-content: center;70 background: #edf6f4; border: 1px solid #cfd9d6;71 }72 /* Location row */73 .location-row {74 position: absolute; top: 200px; left: 0; right: 0;75 padding: 10px 32px 6px 32px;76 display: flex; align-items: center; gap: 16px;77 color: #2d2d2d; font-size: 32px;78 }79 .location-row .caret { margin-left: 8px; font-weight: 700; }80 /* Filter chips row */81 .chips-row {82 position: absolute; top: 270px; left: 0; right: 0;83 padding: 10px 24px;84 display: flex; align-items: center; gap: 18px;85 }86 .chip {87 background: #ffffff;88 color: #2d2d2d;89 padding: 20px 26px;90 border-radius: 20px;91 font-size: 30px;92 box-shadow: 0 1px 0 rgba(0,0,0,0.08);93 display: flex; align-items: center; gap: 12px;94 }95 .prime-toggle {96 width: 72px; height: 38px; border-radius: 20px;97 background: #ebf3ff; border: 1px solid #cfd6e6; position: relative;98 }99 .prime-toggle::after {100 content: ""; position: absolute; top: 4px; left: 4px;101 width: 30px; height: 30px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.2);102 }103 .right-label { margin-left: auto; }104 /* Card area */105 .card {106 position: absolute; left: 24px; right: 24px;107 top: 350px;108 background: #ffffff;109 border-radius: 22px;110 box-shadow: 0 4px 12px rgba(0,0,0,0.06);111 overflow: hidden;112 }113 .card-header {114 padding: 24px 24px 6px 24px;115 color: #222;116 }117 .brand-title { font-weight: 800; font-size: 42px; letter-spacing: 1px; }118 .card-sub { font-size: 36px; margin-top: 6px; }119 .image {120 width: 100%; height: 620px;121 background: #E0E0E0;122 border-top: 1px solid #BDBDBD;123 border-bottom: 1px solid #BDBDBD;124 color: #757575;125 display: flex; align-items: center; justify-content: center;126 font-size: 32px;127 }128 .thumbs {129 display: flex; gap: 18px; padding: 18px 18px 24px 18px;130 }131 .thumb {132 flex: 1; background: #fafafa; border-radius: 16px; display: flex; align-items: center; gap: 16px;133 padding: 16px; border: 1px solid #e4e4e4;134 }135 .thumb .img {136 width: 120px; height: 100px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 12px;137 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px;138 }139 .thumb .meta { font-size: 28px; color: #333; }140 .link-row {141 position: absolute; top: 1160px; left: 24px; right: 24px;142 display: flex; align-items: center; justify-content: space-between;143 color: #1a73e8; font-size: 34px;144 }145 .sponsored {146 position: absolute; top: 1215px; right: 28px;147 display: flex; align-items: center; gap: 12px; color: #606060; font-size: 28px;148 }149 .info-dot { width: 28px; height: 28px; border-radius: 50%; background: #b0b0b0; display: inline-block; }150 /* Section title */151 .section-title {152 position: absolute; top: 1268px; left: 24px; right: 24px;153 font-size: 34px; color: #333; padding: 24px 0;154 }155 /* Product grid */156 .grid {157 position: absolute; top: 1350px; left: 24px; right: 24px;158 display: grid; grid-template-columns: 1fr 1fr; gap: 24px;159 }160 .product {161 background: #ffffff; border-radius: 20px; padding: 24px; box-shadow: 0 3px 10px rgba(0,0,0,0.06);162 }163 .product .product-img {164 width: 100%; height: 380px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 14px;165 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;166 }167 .product .name { margin-top: 18px; font-size: 30px; color: #222; }168 /* Bottom navigation */169 .bottom-nav {170 position: absolute; left: 0; right: 0; bottom: 0;171 height: 150px; background: #ffffff; border-top-left-radius: 24px; border-top-right-radius: 24px;172 box-shadow: 0 -6px 18px rgba(0,0,0,0.08);173 display: flex; align-items: center; justify-content: space-around;174 }175 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #222; font-size: 28px; }176 .nav-item svg { width: 54px; height: 54px; fill: none; stroke: #222; stroke-width: 3; }177 .cart-count {178 position: absolute; top: -8px; right: -16px; background: #0a7; color: #fff; font-size: 24px;179 border-radius: 14px; padding: 2px 8px;180 }181</style>182</head>183<body>184<div id="render-target">185 186 <!-- Status Bar -->187 <div class="status-bar">188 <div>11:04</div>189 <div class="status-icons">190 <div class="icon-dot"></div>191 <div class="icon-dot"></div>192 <div class="icon-pill" style="width:36px;"></div>193 </div>194 </div>195 196 <!-- Search Row -->197 <div class="search-row">198 <div class="back-btn" aria-label="Back">199 <svg viewBox="0 0 24 24">200 <path d="M15 5 L7 12 L15 19" stroke="#1f1f1f" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>201 </svg>202 </div>203 <div class="search-box">204 <svg viewBox="0 0 24 24">205 <circle cx="10" cy="10" r="6"></circle>206 <line x1="14" y1="14" x2="21" y2="21" stroke="#3b3b3b" stroke-width="2"></line>207 </svg>208 <input class="search-input" value="party wear formal shoes for men" />209 <div class="scan-btn" aria-label="Scan">210 <svg viewBox="0 0 24 24" stroke="#2f6b5e" stroke-width="2">211 <rect x="4" y="4" width="16" height="16" rx="3" fill="none"></rect>212 <path d="M4 9 h3 M17 9 h3 M4 15 h3 M17 15 h3" />213 </svg>214 </div>215 </div>216 </div>217 218 <!-- Location -->219 <div class="location-row">220 <svg width="34" height="34" viewBox="0 0 24 24" fill="#333">221 <path d="M12 2 C8 2 5 5 5 9 c0 6 7 13 7 13 s7-7 7-13 c0-4-3-7-7-7z"></path>222 </svg>223 <span>Choose location for most accurate options</span>224 <span class="caret">⌄</span>225 </div>226 227 <!-- Chips -->228 <div class="chips-row">229 <div class="prime-toggle"></div>230 <div class="chip">Liberty</div>231 <div class="chip">★★★★☆ & Up</div>232 <div class="chip right-label">Filters ▼</div>233 </div>234 235 <!-- Sponsored Card -->236 <div class="card">237 <div class="card-header">238 <div class="brand-title">FAUSTO • LUCKY★STAR</div>239 <div class="card-sub">Men's Classic Office Dress Shoes</div>240 </div>241 <div class="image">[IMG: Man lounging in suit wearing brown formal shoes]</div>242 <div class="thumbs">243 <div class="thumb">244 <div class="img">[IMG: Brown Derby]</div>245 <div class="meta">★★★★☆ 85 • Prime</div>246 </div>247 <div class="thumb">248 <div class="img">[IMG: Brown Casual Dress]</div>249 <div class="meta">★★★★☆ 21 • Prime</div>250 </div>251 </div>252 </div>253 254 <!-- Link & Sponsored -->255 <div class="link-row">256 <div>Shop FAUSTO ›</div>257 </div>258 <div class="sponsored">259 <span>Sponsored</span>260 <span class="info-dot"></span>261 </div>262 263 <!-- Section Title -->264 <div class="section-title">265 Price and other details may vary based on product size and colour.266 </div>267 268 <!-- Products Grid -->269 <div class="grid">270 <div class="product">271 <div class="product-img">[IMG: Black Slip-on Formal Shoe]</div>272 <div class="name">Black Slip-on Classic</div>273 </div>274 <div class="product">275 <div class="product-img">[IMG: Brown Lace-up Formal Shoe]</div>276 <div class="name">Brown Lace-up Comfort</div>277 </div>278 </div>279 280 <!-- Bottom Navigation -->281 <div class="bottom-nav">282 <div class="nav-item">283 <svg viewBox="0 0 24 24">284 <path d="M3 11 L12 3 L21 11"></path>285 <rect x="6" y="11" width="12" height="9"></rect>286 </svg>287 <div>Home</div>288 </div>289 <div class="nav-item">290 <svg viewBox="0 0 24 24">291 <circle cx="12" cy="8" r="4"></circle>292 <path d="M4 21 c0-5 16-5 16 0"></path>293 </svg>294 <div>Account</div>295 </div>296 <div class="nav-item">297 <svg viewBox="0 0 24 24">298 <path d="M4 12 a8 8 0 1 1 3 6"></path>299 <path d="M4 12 h4"></path>300 </svg>301 <div>Refresh</div>302 </div>303 <div class="nav-item" style="position: relative;">304 <svg viewBox="0 0 24 24">305 <path d="M4 6 h16 l-2 12 H6 L4 6z"></path>306 <circle cx="9" cy="20" r="2"></circle>307 <circle cx="17" cy="20" r="2"></circle>308 </svg>309 <div class="cart-count">0</div>310 <div>Cart</div>311 </div>312 <div class="nav-item">313 <svg viewBox="0 0 24 24">314 <path d="M3 5 h18 M3 12 h18 M3 19 h18"></path>315 </svg>316 <div>Menu</div>317 </div>318 </div>319 320</div>321</body>322</html>