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=device-width, initial-scale=1.0">6<title>Shoe Grid UI</title>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;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Top status-like bar */18 .status-bar {19 height: 120px;20 background: #000;21 color: #fff;22 display: flex;23 align-items: center;24 padding: 0 36px;25 font-size: 46px;26 letter-spacing: 1px;27 }28 .status-right {29 margin-left: auto;30 display: flex;31 gap: 26px;32 align-items: center;33 }34 .dot, .pill {35 background: #fff;36 border-radius: 50%;37 width: 22px; height: 22px;38 opacity: 0.9;39 }40 .pill { width: 34px; height: 24px; border-radius: 6px; }41 42 /* Grid */43 .content {44 padding: 32px;45 }46 .grid {47 display: grid;48 grid-template-columns: repeat(2, 1fr);49 gap: 40px;50 }51 .card {52 width: 488px;53 }54 .img-box {55 position: relative;56 width: 100%;57 height: 420px;58 background: #E0E0E0;59 border: 1px solid #BDBDBD;60 display: flex;61 align-items: center;62 justify-content: center;63 color: #757575;64 font-size: 34px;65 letter-spacing: .2px;66 }67 .arrow {68 position: absolute;69 top: 50%;70 transform: translateY(-50%);71 width: 56px; height: 56px;72 fill: none;73 stroke: #333;74 stroke-width: 6;75 opacity: 0.9;76 }77 .arrow.left { left: 18px; }78 .arrow.right { right: 18px; transform: translateY(-50%) scaleX(-1); }79 80 .badge {81 position: absolute;82 top: 18px; left: 18px;83 background: #c61b1b;84 color: #fff;85 padding: 10px 16px;86 font-size: 32px;87 border-radius: 6px;88 letter-spacing: 1px;89 }90 91 .thumbs {92 display: flex;93 align-items: center;94 gap: 22px;95 margin-top: 22px;96 margin-bottom: 16px;97 }98 .thumb {99 width: 96px; height: 80px;100 background: #E0E0E0;101 border: 1px solid #BDBDBD;102 display: flex; align-items: center; justify-content: center;103 color: #757575;104 font-size: 22px;105 }106 .thumb.selected { outline: 4px solid #222; }107 108 .title {109 font-size: 44px;110 font-weight: 700;111 line-height: 1.15;112 color: #111;113 margin: 6px 0 12px;114 }115 .price {116 font-size: 44px;117 font-weight: 800;118 color: #111;119 margin-bottom: 8px;120 }121</style>122</head>123<body>124<div id="render-target">125 <div class="status-bar">126 6:38127 <div class="status-right">128 <span class="dot"></span>129 <span class="dot"></span>130 <span class="dot"></span>131 <span class="pill"></span>132 </div>133 </div>134 135 <div class="content">136 <div class="grid">137 <!-- Card 1 -->138 <div class="card">139 <div class="img-box">140 <span>[IMG: Bright Grey Boot]</span>141 <svg class="arrow left" viewBox="0 0 24 24"><path d="M15 4L7 12l8 8"/></svg>142 <svg class="arrow right" viewBox="0 0 24 24"><path d="M15 4L7 12l8 8"/></svg>143 </div>144 <div class="thumbs">145 <div class="thumb selected">Var</div>146 <div class="thumb">Var</div>147 <div class="thumb">Var</div>148 <div class="thumb">›</div>149 </div>150 <div class="title">Bright Grey Boots for Women</div>151 <div class="price">₹5995</div>152 </div>153 154 <!-- Card 2 -->155 <div class="card">156 <div class="img-box">157 <span>[IMG: Brown Boot]</span>158 <svg class="arrow left" viewBox="0 0 24 24"><path d="M15 4L7 12l8 8"/></svg>159 <svg class="arrow right" viewBox="0 0 24 24"><path d="M15 4L7 12l8 8"/></svg>160 </div>161 <div class="thumbs">162 <div class="thumb selected">Var</div>163 <div class="thumb">Var</div>164 <div class="thumb">Var</div>165 <div class="thumb">›</div>166 </div>167 <div class="title">Brown Boot for Women</div>168 <div class="price">₹5495</div>169 </div>170 171 <!-- Card 3 -->172 <div class="card">173 <div class="img-box">174 <span>[IMG: Navy Boot]</span>175 <svg class="arrow left" viewBox="0 0 24 24"><path d="M15 4L7 12l8 8"/></svg>176 <svg class="arrow right" viewBox="0 0 24 24"><path d="M15 4L7 12l8 8"/></svg>177 </div>178 <div class="thumbs">179 <div class="thumb selected">Var</div>180 <div class="thumb">Var</div>181 <div class="thumb">Var</div>182 <div class="thumb">›</div>183 </div>184 <div class="title">DROYAL BLUE boots for women</div>185 <div class="price">₹5495</div>186 </div>187 188 <!-- Card 4 -->189 <div class="card">190 <div class="img-box">191 <span>[IMG: Red Boot]</span>192 <svg class="arrow left" viewBox="0 0 24 24"><path d="M15 4L7 12l8 8"/></svg>193 <svg class="arrow right" viewBox="0 0 24 24"><path d="M15 4L7 12l8 8"/></svg>194 </div>195 <div class="thumbs">196 <div class="thumb selected">Var</div>197 <div class="thumb">Var</div>198 <div class="thumb">Var</div>199 <div class="thumb">›</div>200 </div>201 <div class="title">Woodland Rusty red boots for women</div>202 <div class="price">₹5495</div>203 </div>204 205 <!-- Card 5 -->206 <div class="card">207 <div class="img-box">208 <span>[IMG: Tan Boot]</span>209 <svg class="arrow left" viewBox="0 0 24 24"><path d="M15 4L7 12l8 8"/></svg>210 <svg class="arrow right" viewBox="0 0 24 24"><path d="M15 4L7 12l8 8"/></svg>211 </div>212 <div class="thumbs">213 <div class="thumb selected">Var</div>214 <div class="thumb">Var</div>215 <div class="thumb">Var</div>216 <div class="thumb">›</div>217 </div>218 <div class="title">Tan Outdoor Boots</div>219 <div class="price">₹5495</div>220 </div>221 222 <!-- Card 6 with discount badge -->223 <div class="card">224 <div class="img-box">225 <div class="badge">40 %</div>226 <span>[IMG: Beige High-Top Boot]</span>227 <svg class="arrow left" viewBox="0 0 24 24"><path d="M15 4L7 12l8 8"/></svg>228 <svg class="arrow right" viewBox="0 0 24 24"><path d="M15 4L7 12l8 8"/></svg>229 </div>230 <div class="thumbs">231 <div class="thumb selected">Var</div>232 <div class="thumb">Var</div>233 <div class="thumb">Var</div>234 <div class="thumb">›</div>235 </div>236 <div class="title">Beige Trail Boots</div>237 <div class="price">₹5495</div>238 </div>239 240 </div>241 </div>242</div>243</body>244</html>