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>Mobile UI - Party Wear Formal Shoes</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width:1080px; height:2400px;10 position:relative; overflow:hidden;11 background:#f7f7f7;12 border-radius:24px;13 box-shadow:0 10px 30px rgba(0,0,0,0.15);14 }15 16 /* Header / status */17 .status-bar {18 height:120px;19 background:linear-gradient(180deg,#a7e6e3,#b8ece8);20 color:#212121;21 position:relative;22 padding:18px 26px 0 26px;23 box-sizing:border-box;24 }25 .status-row {26 display:flex; align-items:center; justify-content:flex-start;27 font-size:26px; color:#1b1b1b; opacity:0.8;28 }29 .status-row span { margin-right:22px; }30 .search-area {31 margin-top:18px;32 display:flex; align-items:center;33 }34 .back-btn {35 width:72px; height:72px; display:flex; align-items:center; justify-content:center;36 margin-right:12px;37 }38 .pill-search {39 flex:1;40 height:96px;41 background:#fff; border-radius:22px;42 box-shadow:0 2px 0 rgba(0,0,0,0.06) inset;43 display:flex; align-items:center;44 padding:0 24px; box-sizing:border-box;45 }46 .pill-search .icon { width:40px; height:40px; margin-right:18px; }47 .pill-search .text { flex:1; font-size:34px; color:#1c1c1c; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }48 .pill-search .camera {49 width:70px; height:70px; border-radius:16px; background:#e9f6f5;50 display:flex; align-items:center; justify-content:center;51 margin-left:18px;52 }53 54 /* Content grid */55 .content {56 position:absolute; left:0; right:0; top:120px; bottom:140px;57 padding:26px;58 overflow-y:auto;59 box-sizing:border-box;60 }61 .product-grid {62 display:flex; flex-wrap:wrap; gap:26px;63 }64 .card {65 width:calc(50% - 13px);66 background:#fff; border-radius:16px;67 box-shadow:0 1px 0 rgba(0,0,0,0.06) inset;68 padding-bottom:20px;69 box-sizing:border-box;70 }71 .card .img {72 width:100%; height:470px;73 background:#E0E0E0; border:1px solid #BDBDBD;74 border-top-left-radius:16px; border-top-right-radius:16px;75 display:flex; align-items:center; justify-content:center;76 color:#757575; font-size:28px;77 }78 .card .sub-links {79 padding:16px 20px 8px 20px; font-size:26px; color:#1a73e8;80 }81 .card .sponsored { padding:0 20px; font-size:24px; color:#6b6b6b; display:flex; align-items:center; gap:10px; }82 .dot { width:18px; height:18px; border-radius:50%; background:#bdbdbd; display:inline-block; }83 .card .title { padding:10px 20px 0 20px; font-size:32px; font-weight:700; color:#202020; line-height:1.2; }84 .card .subtitle { padding:6px 20px 0 20px; font-size:28px; color:#333; line-height:1.35; }85 .rating-row { padding:12px 20px 0 20px; display:flex; align-items:center; gap:14px; font-size:28px; color:#2b7; }86 .rating-row .score { font-weight:700; color:#1e88e5; }87 .rating-row .star { color:#ff9800; font-size:28px; }88 .deal-pill {89 margin:14px 20px;90 background:#a1381f; color:#fff; font-weight:700;91 padding:16px 22px; border-radius:10px; display:inline-block; font-size:28px;92 }93 .price-row { padding:8px 20px; font-size:36px; font-weight:800; color:#111; }94 .mrp { padding:4px 20px; font-size:26px; color:#666; }95 .save-pill {96 margin:14px 20px; display:inline-block;97 background:#58b24a; color:#fff; font-weight:800; font-size:26px;98 padding:10px 16px; border-radius:10px;99 }100 .coupon-note { padding:8px 20px; font-size:26px; color:#333; }101 .prime-tag {102 margin:6px 20px; font-size:30px; color:#1e88e5; font-weight:800;103 display:inline-flex; align-items:center; gap:10px;104 }105 .prime-tag .check {106 width:26px; height:26px; border-radius:50%; background:#4caf50;107 }108 .delivery { padding:10px 20px; font-size:26px; color:#6b6b6b; }109 .stock { padding:8px 20px; font-size:26px; color:#d93025; font-weight:700; }110 111 /* second card right specifics */112 .right-price { padding:18px 20px; font-size:44px; font-weight:800; color:#111; }113 .right-note { padding:8px 20px; font-size:28px; color:#666; }114 115 /* Bottom images only */116 .img-only { height:520px; }117 118 /* Bottom navigation */119 .bottom-nav {120 position:absolute; left:0; right:0; bottom:0;121 height:140px; background:#ffffff; border-top:1px solid #ddd;122 display:flex; align-items:center; justify-content:space-around;123 }124 .nav-item { display:flex; flex-direction:column; align-items:center; gap:8px; color:#222; }125 .nav-label { font-size:26px; }126 .cart-badge {127 position:absolute; top:-8px; right:-14px; background:#1e88e5; color:#fff;128 font-size:22px; padding:4px 10px; border-radius:16px;129 }130 131 /* SVG helpers */132 svg { display:block; }133</style>134</head>135<body>136<div id="render-target">137 138 <!-- Header with status and search -->139 <div class="status-bar">140 <div class="status-row">141 <span>11:07</span>142 <span style="font-size:26px;">📶</span>143 <span style="font-size:26px;">🔋</span>144 <span style="font-size:26px;">📳</span>145 </div>146 <div class="search-area">147 <div class="back-btn">148 <svg width="44" height="44" viewBox="0 0 24 24">149 <path d="M15 18l-6-6 6-6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>150 </svg>151 </div>152 <div class="pill-search">153 <svg class="icon" viewBox="0 0 24 24">154 <circle cx="10" cy="10" r="7" fill="none" stroke="#555" stroke-width="2"/>155 <path d="M21 21l-5.5-5.5" stroke="#555" stroke-width="2" stroke-linecap="round"/>156 </svg>157 <div class="text">party wear formal shoes for men</div>158 <div class="camera">159 <svg width="36" height="36" viewBox="0 0 24 24">160 <rect x="4" y="7" width="16" height="12" rx="2" fill="none" stroke="#2b5" stroke-width="2"/>161 <path d="M9 7l2-3h2l2 3" stroke="#2b5" stroke-width="2" fill="none"/>162 <circle cx="12" cy="13" r="3" fill="none" stroke="#2b5" stroke-width="2"/>163 </svg>164 </div>165 </div>166 </div>167 </div>168 169 <!-- Main content -->170 <div class="content">171 <div class="product-grid">172 <!-- Card 1 -->173 <div class="card">174 <div class="img">[IMG: Brown Brogue Formal Shoe]</div>175 <div class="sub-links">+2 colours/patterns</div>176 <div class="sponsored"><span>Sponsored</span><span class="dot"></span></div>177 <div class="title">ALBERTO TORRESI</div>178 <div class="subtitle">Men's Brogues Formal Shoes: Synthetic with TP...</div>179 <div class="rating-row">180 <span class="score">3.3</span>181 <span class="star">★</span>182 <span style="color:#333;">36</span>183 </div>184 <div class="deal-pill">Deal of the Day</div>185 <div class="price-row">₹1,799</div>186 <div class="mrp">M.R.P: ₹7,999 (78% off)</div>187 <div class="save-pill">Save 5%</div>188 <div class="coupon-note">with coupon (limited sizes/colours)</div>189 <div class="prime-tag"><span class="check"></span>prime</div>190 <div class="delivery">FREE Delivery by Amazon</div>191 <div class="stock">Only 3 left in stock.</div>192 </div>193 194 <!-- Card 2 -->195 <div class="card">196 <div class="img">[IMG: Tan Oxford Formal Shoe]</div>197 <div class="sub-links">+2 colours/patterns</div>198 <div class="sponsored"><span>Sponsored</span><span class="dot"></span></div>199 <div class="title">Hangston</div>200 <div class="subtitle">Men's Professional & Office Wear Synthetic Leather...</div>201 <div class="right-price">₹699</div>202 <div class="right-note">M.R.P: ₹2,499 (72% off)</div>203 </div>204 205 <!-- Image-only row -->206 <div class="card">207 <div class="img img-only">[IMG: Plain Dark Brown Derby Shoe]</div>208 </div>209 <div class="card">210 <div class="img img-only">[IMG: Brown Loafer with Textured Vamp]</div>211 </div>212 </div>213 </div>214 215 <!-- Bottom Navigation -->216 <div class="bottom-nav">217 <div class="nav-item">218 <svg width="48" height="48" viewBox="0 0 24 24">219 <path d="M4 11l8-7 8 7v9a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1z" fill="#2b2b2b"/>220 </svg>221 <div class="nav-label">Home</div>222 </div>223 <div class="nav-item">224 <svg width="48" height="48" viewBox="0 0 24 24">225 <circle cx="12" cy="7" r="4" fill="#2b2b2b"/>226 <path d="M4 21c0-4 4-7 8-7s8 3 8 7" fill="none" stroke="#2b2b2b" stroke-width="2"/>227 </svg>228 <div class="nav-label">Account</div>229 </div>230 <div class="nav-item">231 <svg width="48" height="48" viewBox="0 0 24 24">232 <path d="M12 6v-3l-5 5 5 5v-3c4 0 7 3 7 7" fill="none" stroke="#2b2b2b" stroke-width="2" stroke-linecap="round"/>233 </svg>234 <div class="nav-label">Refresh</div>235 </div>236 <div class="nav-item" style="position:relative;">237 <svg width="48" height="48" viewBox="0 0 24 24">238 <path d="M6 6h15l-2 9H8L7 4H3" fill="none" stroke="#2b2b2b" stroke-width="2" stroke-linecap="round"/>239 <circle cx="10" cy="20" r="2" fill="#2b2b2b"/>240 <circle cx="18" cy="20" r="2" fill="#2b2b2b"/>241 </svg>242 <span class="cart-badge">0</span>243 <div class="nav-label">Cart</div>244 </div>245 <div class="nav-item">246 <svg width="48" height="48" viewBox="0 0 24 24">247 <path d="M4 6h16M4 12h16M4 18h16" stroke="#2b2b2b" stroke-width="2" stroke-linecap="round"/>248 </svg>249 <div class="nav-label">Menu</div>250 </div>251 </div>252 253</div>254</body>255</html>