GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Red Tape Sneakers - UI Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#ffffff; box-shadow:0 2px 12px rgba(0,0,0,0.08); border-radius:24px;12 }13 14 /* Status bar */15 .status-bar { height:84px; padding:0 36px; display:flex; align-items:center; justify-content:space-between; color:#8e8e8e; font-weight:600; font-size:38px; }16 .status-icons { display:flex; align-items:center; gap:24px; }17 .icon { width:48px; height:48px; display:inline-block; }18 .icon svg { width:100%; height:100%; }19 20 /* App bar */21 .app-bar { height:132px; padding:0 36px; display:flex; align-items:center; border-bottom:1px solid #e6e6e6; }22 .back { width:88px; display:flex; align-items:center; justify-content:center; }23 .title-wrap { flex:1; }24 .title { font-size:46px; font-weight:800; color:#333; letter-spacing:0.5px; }25 .subtitle { font-size:30px; color:#8c8c8c; margin-top:6px; }26 .actions { width:300px; display:flex; align-items:center; justify-content:flex-end; gap:36px; }27 28 /* Promo banner */29 .banner { margin:24px 24px 12px; padding:24px; background:linear-gradient(90deg, #f9e7eb 0%, #ffe9cf 100%); border:1px solid #e4d2d6; border-radius:18px; display:flex; align-items:center; gap:24px; }30 .banner-left { flex:1; display:flex; align-items:center; gap:24px; }31 .truck { width:88px; height:88px; border-radius:12px; display:flex; align-items:center; justify-content:center; border:2px solid #24354a; }32 .banner-text-1 { font-size:36px; font-weight:800; color:#24354a; }33 .banner-mid { width:2px; background:#f0d5d9; align-self:stretch; }34 .coupon-tile { background:#ff4769; color:#fff; font-size:28px; font-weight:800; padding:12px 18px; border-radius:10px; }35 .banner-right { flex:1; text-align:right; }36 .banner-text-2 { font-size:36px; font-weight:700; color:#444; }37 .code { margin-top:8px; display:inline-block; background:#fff; border:2px dashed #ff4769; color:#333; font-weight:800; padding:10px 14px; border-radius:10px; }38 .dots { display:flex; justify-content:center; gap:10px; margin:8px 0 10px; }39 .dot { width:18px; height:18px; border-radius:9px; background:#717171; opacity:0.5; }40 .dot.active { opacity:1; background:#444; }41 42 /* Grid */43 .grid { display:grid; grid-template-columns:1fr 1fr; column-gap:0; row-gap:0; }44 .card { border-top:1px solid #e9e9e9; }45 .img-wrap { position:relative; height:520px; margin:0 0 0; }46 .img { position:absolute; inset:0; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:30px; text-align:center; padding:20px; }47 .badge { position:absolute; top:18px; left:18px; background:#ff6f88; color:#fff; font-weight:800; font-size:26px; padding:8px 16px; border-radius:8px; }48 .badge.fwd { background:#f64f6b; }49 .rating { position:absolute; bottom:18px; left:18px; background:#f1f1f1; border-radius:28px; padding:10px 16px; display:flex; align-items:center; gap:14px; font-size:28px; color:#333; border:1px solid #e0e0e0; }50 .rating .star { width:24px; height:24px; }51 .details { padding:18px 24px 24px; }52 .row-title { display:flex; justify-content:space-between; align-items:center; }53 .brand { font-size:38px; font-weight:800; color:#333; }54 .heart { width:44px; height:44px; }55 .sub { margin-top:8px; font-size:30px; color:#7b7b7b; }56 .price { margin-top:12px; font-size:30px; color:#333; }57 .price .old { color:#8c8c8c; text-decoration:line-through; margin-right:10px; }58 .price .new { font-weight:900; margin-right:10px; }59 .price .off { color:#ff6f00; font-weight:800; }60 .best { margin-top:8px; color:#0a9c57; font-size:30px; font-weight:800; }61 .best span { font-weight:700; }62 63 /* Bottom controls */64 .toolbar { position:absolute; bottom:92px; left:0; right:0; height:144px; border-top:1px solid #e6e6e6; background:#ffffff; display:flex; align-items:center; justify-content:space-around; }65 .tool { display:flex; align-items:center; gap:24px; color:#4b4b4b; font-size:34px; font-weight:800; }66 .home-indicator { position:absolute; bottom:36px; left:50%; transform:translateX(-50%); width:360px; height:12px; background:#cfcfcf; border-radius:6px; }67 68 /* Small helpers */69 .spacer { height:12px; }70</style>71</head>72<body>73<div id="render-target">74 75 <!-- Status bar -->76 <div class="status-bar">77 <div>12:44</div>78 <div class="status-icons">79 <!-- WiFi -->80 <span class="icon">81 <svg viewBox="0 0 64 64">82 <path d="M6 22c13-11 39-11 52 0" fill="none" stroke="#737373" stroke-width="4" stroke-linecap="round"/>83 <path d="M14 30c9-7 27-7 36 0" fill="none" stroke="#737373" stroke-width="4" stroke-linecap="round"/>84 <path d="M22 38c5-4 15-4 20 0" fill="none" stroke="#737373" stroke-width="4" stroke-linecap="round"/>85 <circle cx="32" cy="46" r="3" fill="#737373"/>86 </svg>87 </span>88 <!-- Battery -->89 <span class="icon">90 <svg viewBox="0 0 64 64">91 <rect x="6" y="16" width="46" height="32" rx="6" ry="6" fill="none" stroke="#737373" stroke-width="4"/>92 <rect x="10" y="20" width="34" height="24" rx="4" fill="#737373"/>93 <rect x="54" y="24" width="6" height="16" rx="2" fill="#737373"/>94 </svg>95 </span>96 </div>97 </div>98 99 <!-- App bar -->100 <div class="app-bar">101 <div class="back">102 <svg class="icon" viewBox="0 0 64 64">103 <path d="M38 12L18 32l20 20" fill="none" stroke="#333" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>104 </svg>105 </div>106 <div class="title-wrap">107 <div class="title">RED TAPE SNEAKERS</div>108 <div class="subtitle">55 Items</div>109 </div>110 <div class="actions">111 <!-- Search -->112 <svg class="icon" viewBox="0 0 64 64">113 <circle cx="28" cy="28" r="16" fill="none" stroke="#333" stroke-width="5"/>114 <path d="M42 42l16 16" stroke="#333" stroke-width="5" stroke-linecap="round"/>115 </svg>116 <!-- Heart -->117 <svg class="icon" viewBox="0 0 64 64">118 <path d="M32 54C20 44 10 36 10 24c0-7 5-12 12-12 6 0 10 4 10 6 0-2 4-6 10-6 7 0 12 5 12 12 0 12-10 20-22 30z" fill="none" stroke="#333" stroke-width="5" stroke-linejoin="round"/>119 </svg>120 <!-- Bag -->121 <svg class="icon" viewBox="0 0 64 64">122 <rect x="12" y="20" width="40" height="36" rx="6" fill="none" stroke="#333" stroke-width="5"/>123 <path d="M22 20c0-6 4-10 10-10s10 4 10 10" fill="none" stroke="#333" stroke-width="5"/>124 </svg>125 </div>126 </div>127 128 <!-- Promo banner -->129 <div class="banner">130 <div class="banner-left">131 <div class="truck">132 <svg viewBox="0 0 64 64">133 <rect x="6" y="18" width="36" height="20" rx="3" fill="none" stroke="#24354a" stroke-width="4"/>134 <rect x="42" y="24" width="14" height="14" rx="2" fill="none" stroke="#24354a" stroke-width="4"/>135 <circle cx="18" cy="44" r="5" fill="#24354a"/>136 <circle cx="48" cy="44" r="5" fill="#24354a"/>137 </svg>138 </div>139 <div class="banner-text-1">Free Shipping on your first order</div>140 <div class="coupon-tile">₹200 OFF</div>141 </div>142 <div class="banner-mid"></div>143 <div class="banner-right">144 <div class="banner-text-2">₹200 off for you</div>145 <div class="code">MYNTRA200</div>146 </div>147 </div>148 <div class="dots">149 <div class="dot active"></div>150 <div class="dot"></div>151 </div>152 153 <!-- Product grid -->154 <div class="grid">155 156 <!-- Card 1 -->157 <div class="card">158 <div class="img-wrap">159 <div class="img">[IMG: White mid-top sneakers on wooden table]</div>160 <div class="badge">NEW</div>161 <div class="rating">162 <svg class="star" viewBox="0 0 24 24">163 <path d="M12 2l3.1 6.7 7 1-5.1 4.8 1.4 7.5L12 18l-6.4 4 1.4-7.5L2 9.7l7-1z" fill="#3aa655"/>164 </svg>165 <span>4.5</span>166 <span>•</span>167 <span>460</span>168 </div>169 </div>170 <div class="details">171 <div class="row-title">172 <div class="brand">Red Tape</div>173 <svg class="heart" viewBox="0 0 64 64">174 <path d="M32 54C20 44 10 36 10 24c0-7 5-12 12-12 6 0 10 4 10 6 0-2 4-6 10-6 7 0 12 5 12 12 0 12-10 20-22 30z" fill="none" stroke="#999" stroke-width="4"/>175 </svg>176 </div>177 <div class="sub">Men Mid-Top Sneakers</div>178 <div class="price">179 <span class="old">₹5,599</span>180 <span class="new">₹1,119</span>181 <span class="off">80% OFF</span>182 </div>183 <div class="best">Best Price <span>₹959</span> with coupon</div>184 </div>185 </div>186 187 <!-- Card 2 -->188 <div class="card">189 <div class="img-wrap">190 <div class="img">[IMG: White sneakers floating against red background]</div>191 <div class="badge fwd">FWD</div>192 <div class="rating">193 <svg class="star" viewBox="0 0 24 24">194 <path d="M12 2l3.1 6.7 7 1-5.1 4.8 1.4 7.5L12 18l-6.4 4 1.4-7.5L2 9.7l7-1z" fill="#3aa655"/>195 </svg>196 <span>4.2</span>197 <span>•</span>198 <span>785</span>199 </div>200 </div>201 <div class="details">202 <div class="row-title">203 <div class="brand">Red Tape</div>204 <svg class="heart" viewBox="0 0 64 64">205 <path d="M32 54C20 44 10 36 10 24c0-7 5-12 12-12 6 0 10 4 10 6 0-2 4-6 10-6 7 0 12 5 12 12 0 12-10 20-22 30z" fill="none" stroke="#999" stroke-width="4"/>206 </svg>207 </div>208 <div class="sub">Men Colourblocked Sneakers</div>209 <div class="price">210 <span class="old">₹6,899</span>211 <span class="new">₹1,379</span>212 <span class="off">80% OFF</span>213 </div>214 <div class="best">Best Price <span>₹1,182</span> with coupon</div>215 </div>216 </div>217 218 <!-- Card 3 -->219 <div class="card">220 <div class="img-wrap">221 <div class="img">[IMG: Black & red sneakers pair indoors]</div>222 <div class="badge fwd">FWD</div>223 <div class="rating">224 <svg class="star" viewBox="0 0 24 24">225 <path d="M12 2l3.1 6.7 7 1-5.1 4.8 1.4 7.5L12 18l-6.4 4 1.4-7.5L2 9.7l7-1z" fill="#3aa655"/>226 </svg>227 <span>4.6</span>228 <span>•</span>229 <span>18</span>230 </div>231 </div>232 <div class="details">233 <div class="row-title">234 <div class="brand">Red Tape</div>235 <svg class="heart" viewBox="0 0 64 64">236 <path d="M32 54C20 44 10 36 10 24c0-7 5-12 12-12 6 0 10 4 10 6 0-2 4-6 10-6 7 0 12 5 12 12 0 12-10 20-22 30z" fill="none" stroke="#999" stroke-width="4"/>237 </svg>238 </div>239 <div class="sub">Men Sneakers</div>240 <div class="price">241 <span class="old">₹5,999</span>242 <span class="new">₹1,199</span>243 <span class="off">80% OFF</span>244 </div>245 <div class="best">Best Price <span>₹959</span> with coupon</div>246 </div>247 </div>248 249 <!-- Card 4 -->250 <div class="card">251 <div class="img-wrap">252 <div class="img">[IMG: White sneakers on rock outdoors]</div>253 <div class="badge">NEW</div>254 <div class="rating">255 <svg class="star" viewBox="0 0 24 24">256 <path d="M12 2l3.1 6.7 7 1-5.1 4.8 1.4 7.5L12 18l-6.4 4 1.4-7.5L2 9.7l7-1z" fill="#3aa655"/>257 </svg>258 <span>4.4</span>259 <span>•</span>260 <span>26</span>261 </div>262 </div>263 <div class="details">264 <div class="row-title">265 <div class="brand">Red Tape</div>266 <svg class="heart" viewBox="0 0 64 64">267 <path d="M32 54C20 44 10 36 10 24c0-7 5-12 12-12 6 0 10 4 10 6 0-2 4-6 10-6 7 0 12 5 12 12 0 12-10 20-22 30z" fill="none" stroke="#999" stroke-width="4"/>268 </svg>269 </div>270 <div class="sub">Men Sneakers</div>271 <div class="price">272 <span class="old">₹6,499</span>273 <span class="new">₹1,299</span>274 <span class="off">80% OFF</span>275 </div>276 <div class="best">Best Price <span>₹1,182</span> with coupon</div>277 </div>278 </div>279 280 </div>281 282 <!-- Bottom toolbar -->283 <div class="toolbar">284 <div class="tool">285 <svg class="icon" viewBox="0 0 64 64">286 <path d="M10 42h44M10 22h44" stroke="#555" stroke-width="5" stroke-linecap="round"/>287 <circle cx="18" cy="22" r="6" fill="#555"/>288 <circle cx="46" cy="42" r="6" fill="#555"/>289 </svg>290 <span>GENDER</span>291 </div>292 <div class="tool">293 <svg class="icon" viewBox="0 0 64 64">294 <path d="M32 14v36M22 24l10-10 10 10M22 40l10 10 10-10" stroke="#555" stroke-width="5" stroke-linecap="round" fill="none"/>295 </svg>296 <span>SORT</span>297 </div>298 <div class="tool">299 <svg class="icon" viewBox="0 0 64 64">300 <path d="M10 16h44M18 30h28M26 44h12" stroke="#555" stroke-width="5" stroke-linecap="round"/>301 </svg>302 <span>FILTER</span>303 </div>304 </div>305 306 <div class="home-indicator"></div>307 308</div>309</body>310</html>