GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Women's sneakers size 9 - Mock UI</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: #ffffff;13 color: #111;14 }15 /* Status bar */16 .status-bar {17 height: 120px;18 background: #000;19 color: #fff;20 display: flex;21 align-items: center;22 padding: 0 32px;23 box-sizing: border-box;24 font-weight: 600;25 letter-spacing: 0.5px;26 }27 .status-left { display: flex; align-items: center; gap: 18px; }28 .status-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }29 .status-dot {30 width: 18px; height: 18px; border-radius: 50%; background: #9E9E9E;31 }32 .status-signal {33 width: 26px; height: 18px; background: #9E9E9E; border-radius: 3px;34 }35 36 /* Header */37 .header {38 height: 120px;39 display: flex;40 align-items: center;41 padding: 0 28px;42 box-sizing: border-box;43 border-bottom: 1px solid #eee;44 background: #fff;45 }46 .header-title {47 font-size: 44px;48 font-weight: 700;49 margin-left: 20px;50 }51 .header-actions {52 margin-left: auto;53 display: flex;54 align-items: center;55 gap: 28px;56 }57 58 .icon-btn {59 width: 56px; height: 56px;60 display: inline-flex; align-items: center; justify-content: center;61 border-radius: 12px;62 }63 .icon { width: 40px; height: 40px; }64 65 /* Content grid */66 .content {67 position: absolute;68 top: 240px; /* status 120 + header 120 */69 left: 0;70 right: 0;71 bottom: 0;72 overflow: auto;73 padding: 24px;74 box-sizing: border-box;75 background: #fff;76 }77 .grid {78 display: grid;79 grid-template-columns: 1fr 1fr;80 gap: 24px;81 }82 83 .card {84 background: #fff;85 border-radius: 12px;86 overflow: hidden;87 }88 .img-holder {89 position: relative;90 height: 360px;91 background: #E0E0E0;92 border: 1px solid #BDBDBD;93 display: flex;94 align-items: center;95 justify-content: center;96 color: #757575;97 font-size: 28px;98 }99 .heart-wrap {100 position: absolute;101 top: 18px; right: 18px;102 width: 72px; height: 72px;103 border-radius: 36px;104 background: #fff;105 border: 1px solid #ddd;106 display: flex; align-items: center; justify-content: center;107 box-shadow: 0 1px 2px rgba(0,0,0,0.08);108 }109 .card-body {110 padding: 24px;111 box-sizing: border-box;112 }113 .name { font-size: 36px; font-weight: 700; margin-bottom: 10px; }114 .category { font-size: 30px; color: #6b6b6b; margin-bottom: 24px; }115 .price { font-size: 34px; font-weight: 700; margin-top: 8px; }116 .colors { display: flex; gap: 18px; margin-top: 18px; }117 .dot {118 width: 24px; height: 24px; border-radius: 50%;119 border: 2px solid #d0d0d0;120 }121 .dot.white { background: #fff; }122 .dot.black { background: #000; }123 .dot.green { background: #2d7b3b; }124 .dot.navy { background: #3a3b68; }125 126 .badge {127 color: #d45d34;128 font-weight: 800;129 margin-bottom: 8px;130 font-size: 32px;131 }132 133 /* Floating filter button */134 .fab {135 position: absolute;136 right: 40px;137 bottom: 160px;138 width: 156px; height: 156px;139 border-radius: 78px;140 background: #fff;141 box-shadow: 0 6px 22px rgba(0,0,0,0.15);142 display: flex; align-items: center; justify-content: center;143 border: 1px solid #eee;144 }145</style>146</head>147<body>148<div id="render-target">149 <!-- Status bar -->150 <div class="status-bar">151 <div class="status-left">152 <div style="font-size:42px;">11:33</div>153 <div class="status-dot"></div>154 <div class="status-dot"></div>155 </div>156 <div class="status-right">157 <div class="status-signal"></div>158 <div class="status-dot" style="background:#cfcfcf;"></div>159 </div>160 </div>161 162 <!-- Header -->163 <div class="header">164 <div class="icon-btn" title="Back">165 <svg class="icon" viewBox="0 0 24 24">166 <path d="M15.5 4.5L7 12l8.5 7.5" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>167 </svg>168 </div>169 <div class="header-title">Women's sneakers size 9</div>170 <div class="header-actions">171 <div class="icon-btn" title="Search">172 <svg class="icon" viewBox="0 0 24 24">173 <circle cx="11" cy="11" r="7" fill="none" stroke="#111" stroke-width="2"/>174 <path d="M20 20l-4.5-4.5" stroke="#111" stroke-width="2" stroke-linecap="round"/>175 </svg>176 </div>177 <div class="icon-btn" title="Bag">178 <svg class="icon" viewBox="0 0 24 24">179 <path d="M6 9h12l-1.2 11H7.2L6 9z" fill="none" stroke="#111" stroke-width="2"/>180 <path d="M9 9V7a3 3 0 0 1 6 0v2" fill="none" stroke="#111" stroke-width="2"/>181 </svg>182 </div>183 </div>184 </div>185 186 <!-- Content -->187 <div class="content">188 <div class="grid">189 <!-- Card 1 -->190 <div class="card">191 <div class="img-holder">[IMG: Black Nike SB Force 58 Shoe]192 <div class="heart-wrap">193 <svg class="icon" viewBox="0 0 24 24">194 <path d="M12 21s-7-4.6-9.2-7.8A5.3 5.3 0 0 1 12 6a5.3 5.3 0 0 1 9.2 7.2C19 16.4 12 21 12 21z" fill="none" stroke="#111" stroke-width="2"/>195 </svg>196 </div>197 </div>198 <div class="card-body">199 <div class="name">Nike SB Force 58</div>200 <div class="category">Skate Shoe</div>201 <div class="price">MRP : ₹ 5 995.00</div>202 </div>203 </div>204 205 <!-- Card 2 -->206 <div class="card">207 <div class="img-holder">[IMG: White Nike SB Force 58 Premium Shoe]208 <div class="heart-wrap">209 <svg class="icon" viewBox="0 0 24 24">210 <path d="M12 21s-7-4.6-9.2-7.8A5.3 5.3 0 0 1 12 6a5.3 5.3 0 0 1 9.2 7.2C19 16.4 12 21 12 21z" fill="none" stroke="#111" stroke-width="2"/>211 </svg>212 </div>213 </div>214 <div class="card-body">215 <div class="name">Nike SB Force 58 Premium</div>216 <div class="category">Skate Shoe</div>217 <div class="price">MRP : ₹ 7 095.00</div>218 <div class="colors">219 <div class="dot white"></div>220 <div class="dot black"></div>221 </div>222 </div>223 </div>224 225 <!-- Card 3 -->226 <div class="card">227 <div class="img-holder">[IMG: Green Nike SB Force 58 Shoe]228 <div class="heart-wrap">229 <svg class="icon" viewBox="0 0 24 24">230 <path d="M12 21s-7-4.6-9.2-7.8A5.3 5.3 0 0 1 12 6a5.3 5.3 0 0 1 9.2 7.2C19 16.4 12 21 12 21z" fill="none" stroke="#111" stroke-width="2"/>231 </svg>232 </div>233 </div>234 <div class="card-body">235 <div class="name">Nike SB Force 58</div>236 <div class="category">Skate Shoes</div>237 <div class="price">MRP : ₹ 6 295.00</div>238 <div class="colors">239 <div class="dot green"></div>240 <div class="dot navy"></div>241 </div>242 </div>243 </div>244 245 <!-- Card 4 -->246 <div class="card">247 <div class="img-holder">[IMG: White Nike Air Force 1 '07 EasyOn]248 <div class="heart-wrap">249 <svg class="icon" viewBox="0 0 24 24">250 <path d="M12 21s-7-4.6-9.2-7.8A5.3 5.3 0 0 1 12 6a5.3 5.3 0 0 1 9.2 7.2C19 16.4 12 21 12 21z" fill="none" stroke="#111" stroke-width="2"/>251 </svg>252 </div>253 </div>254 <div class="card-body">255 <div class="badge">Best Seller</div>256 <div class="name">Nike Air Force 1 '07 EasyOn</div>257 <div class="category">Shoes</div>258 <div class="price">MRP : ₹ 9 695.00</div>259 </div>260 </div>261 </div>262 </div>263 264 <!-- Floating filter button -->265 <div class="fab" title="Filter">266 <svg class="icon" viewBox="0 0 24 24">267 <path d="M4 6h16M6 12h12M9 18h6" stroke="#111" stroke-width="2" stroke-linecap="round"/>268 </svg>269 </div>270</div>271</body>272</html>