GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Shoes Grid UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target{9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#ffffff;11  }12  /* Status bar */13  .statusbar{14    height:90px; padding:0 28px; display:flex; align-items:center; justify-content:space-between;15    color:#212121; font-size:36px; letter-spacing:0.5px;16  }17  .status-right{ display:flex; align-items:center; gap:22px; color:#616161; }18  .icon{ width:44px; height:44px; display:inline-flex; justify-content:center; align-items:center; }19  .toolbar{20    height:110px; display:flex; align-items:center; justify-content:space-between;21    padding:0 28px; border-bottom:1px solid #eeeeee;22  }23  .search-actions{ display:flex; align-items:center; gap:34px; }24  .grid{25    padding:24px 28px 0;26    display:grid; grid-template-columns: 1fr 1fr; gap:28px;27  }28  .card{29    background:#ffffff;30    border-radius:18px;31    box-shadow: 0 0 0 1px #f2f2f2 inset;32    overflow:hidden;33  }34  .img-wrap{35    position:relative; background:#ffffff; padding:12px;36  }37  .product-image{38    width:100%; height:420px;39    background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;40    display:flex; align-items:center; justify-content:center; font-size:28px; text-align:center;41    border-radius:12px;42  }43  .wish{44    position:absolute; right:22px; bottom:18px; width:60px; height:60px; border-radius:50%;45    background:#ffffff; border:1px solid #e0e0e0; display:flex; align-items:center; justify-content:center;46  }47  .content{ padding:10px 18px 18px; }48  .brand{ color:#616161; font-weight:700; text-transform:uppercase; font-size:30px; margin-top:6px; }49  .title{ color:#212121; font-size:32px; line-height:40px; margin-top:6px; }50  .rating-row{ margin-top:14px; display:flex; align-items:center; gap:12px; }51  .rating-badge{52    background:#1ea44f; color:#ffffff; padding:8px 14px; border-radius:20px; font-size:26px; display:flex; align-items:center; gap:8px;53  }54  .rating-count{ color:#616161; font-size:26px; }55  .price-row{ margin-top:16px; display:flex; align-items:baseline; gap:16px; }56  .price{ font-size:36px; font-weight:700; color:#212121; }57  .old{ font-size:30px; color:#9e9e9e; text-decoration:line-through; }58  .off{ font-size:30px; color:#1ea44f; font-weight:700; margin-left:auto; }59  .offer{ margin-top:16px; display:flex; align-items:center; gap:12px; color:#1ea44f; font-size:28px; font-weight:700; }60  .offer .bubble{ width:34px; height:34px; border-radius:50%; background:#e7f6ec; border:1px solid #cdebd7; color:#1ea44f; display:flex; align-items:center; justify-content:center; font-size:22px; }61  /* Bottom gesture bar */62  .home-indicator{63    position:absolute; bottom:18px; left:50%; transform:translateX(-50%);64    width:360px; height:10px; border-radius:8px; background:#000000; opacity:.2;65  }66 67  /* Simple helpers */68  .muted{ color:#9e9e9e; }69  svg{ display:block; }70</style>71</head>72<body>73<div id="render-target">74 75  <!-- Status bar -->76  <div class="statusbar">77    <div>12:38</div>78    <div class="status-right">79      <div class="icon">80        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#616161" stroke-width="2"><path d="M2 8h20M4 12h16M6 16h12"/></svg>81      </div>82      <div class="icon">83        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#616161" stroke-width="2"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a8 8 0 10-14.8 0"/></svg>84      </div>85      <div class="icon">86        <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#616161" stroke-width="2"><path d="M3 6h18M3 12h12M3 18h6"/></svg>87      </div>88      <div style="font-size:28px; color:#616161;">97%</div>89    </div>90  </div>91 92  <!-- Toolbar -->93  <div class="toolbar">94    <div class="icon">95      <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#212121" stroke-width="2">96        <path d="M15 18l-6-6 6-6"/>97      </svg>98    </div>99    <div class="search-actions">100      <div class="icon">101        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#212121" stroke-width="2">102          <circle cx="11" cy="11" r="7"></circle><path d="M21 21l-4.3-4.3"></path>103        </svg>104      </div>105      <div class="icon">106        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#212121" stroke-width="2">107          <path d="M12 21s-7-4.4-7-10a4 4 0 118 0 4 4 0 118 0c0 5.6-7 10-7 10z"/>108        </svg>109      </div>110      <div class="icon">111        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#212121" stroke-width="2">112          <path d="M6 7h12l-1 12H7L6 7z"></path><path d="M9 7V5a3 3 0 016 0v2"></path>113        </svg>114      </div>115    </div>116  </div>117 118  <!-- Product grid -->119  <div class="grid">120    <!-- Card 1 -->121    <div class="card">122      <div class="img-wrap">123        <div class="product-image">[IMG: Black Nike Shoe - Flex Experience RN 11]</div>124        <div class="wish">125          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#616161" stroke-width="2">126            <path d="M12 21s-7-4.4-7-10a4 4 0 018 0 4 4 0 018 0c0 5.6-7 10-7 10z"/>127          </svg>128        </div>129      </div>130      <div class="content">131        <div class="brand">NIKE</div>132        <div class="title">Flex Experience RN 11 NN Lace-Up Running Shoes</div>133        <div class="rating-row">134          <div class="rating-badge">135            <svg width="20" height="20" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 17.3l-6.2 3.7 1.6-7-5.4-4.7 7.1-.6L12 2l2.9 6.7 7.1.6-5.4 4.7 1.6 7z"/></svg>136            <span>4.0</span>137          </div>138          <div class="rating-count">| 51</div>139        </div>140        <div class="price-row">141          <div class="price">₹3097</div>142          <div class="old">₹4995</div>143          <div class="off">38% off</div>144        </div>145        <div class="offer"><div class="bubble">%</div>Offer Price ₹2,897</div>146      </div>147    </div>148 149    <!-- Card 2 -->150    <div class="card">151      <div class="img-wrap">152        <div class="product-image">[IMG: Black Nike Shoe - Revolution 6 NN]</div>153        <div class="wish">154          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#616161" stroke-width="2">155            <path d="M12 21s-7-4.4-7-10a4 4 0 018 0 4 4 0 018 0c0 5.6-7 10-7 10z"/>156          </svg>157        </div>158      </div>159      <div class="content">160        <div class="brand">NIKE</div>161        <div class="title">Revolution 6 NN Running Shoes</div>162        <div class="rating-row">163          <div class="rating-badge">164            <svg width="20" height="20" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 17.3l-6.2 3.7 1.6-7-5.4-4.7 7.1-.6L12 2l2.9 6.7 7.1.6-5.4 4.7 1.6 7z"/></svg>165            <span>3.6</span>166          </div>167          <div class="rating-count">| 2.1K</div>168        </div>169        <div class="price-row">170          <div class="price">₹3030</div>171          <div class="old">₹3695</div>172          <div class="off">18% off</div>173        </div>174        <div class="offer"><div class="bubble">%</div>Offer Price ₹2,993</div>175      </div>176    </div>177 178    <!-- Card 3 -->179    <div class="card">180      <div class="img-wrap">181        <div class="product-image">[IMG: Grey Nike Shoe - Men Revolution 7]</div>182        <div class="wish">183          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#616161" stroke-width="2">184            <path d="M12 21s-7-4.4-7-10a4 4 0 018 0 4 4 0 018 0c0 5.6-7 10-7 10z"/>185          </svg>186        </div>187      </div>188      <div class="content">189        <div class="brand">NIKE</div>190        <div class="title">Men Revolution 7 Lace-Up Running Shoes</div>191        <div class="rating-row">192          <div class="rating-badge">193            <svg width="20" height="20" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 17.3l-6.2 3.7 1.6-7-5.4-4.7 7.1-.6L12 2l2.9 6.7 7.1.6-5.4 4.7 1.6 7z"/></svg>194            <span>4.1</span>195          </div>196          <div class="rating-count">| 38</div>197        </div>198        <div class="price-row">199          <div class="price">₹3067</div>200          <div class="old">₹3695</div>201          <div class="off">17% off</div>202        </div>203        <div class="offer"><div class="bubble">%</div>Offer Price ₹2,993</div>204      </div>205    </div>206 207    <!-- Card 4 -->208    <div class="card">209      <div class="img-wrap">210        <div class="product-image">[IMG: Black Puma Shoe - Twitch]</div>211        <div class="wish">212          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#616161" stroke-width="2">213            <path d="M12 21s-7-4.4-7-10a4 4 0 018 0 4 4 0 018 0c0 5.6-7 10-7 10z"/>214          </svg>215        </div>216      </div>217      <div class="content">218        <div class="brand">Puma</div>219        <div class="title">Twitch Lace-Up Running Shoes</div>220        <div class="rating-row">221          <div class="rating-badge">222            <svg width="20" height="20" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 17.3l-6.2 3.7 1.6-7-5.4-4.7 7.1-.6L12 2l2.9 6.7 7.1.6-5.4 4.7 1.6 7z"/></svg>223            <span>3.4</span>224          </div>225          <div class="rating-count">| 57</div>226        </div>227        <div class="price-row">228          <div class="price">₹1860</div>229          <div class="old">₹5999</div>230          <div class="off">69% off</div>231        </div>232      </div>233    </div>234  </div>235 236  <!-- bottom gesture bar -->237  <div class="home-indicator"></div>238</div>239</body>240</html>