GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Puma Walking Shoes - List</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff; border-radius: 28px;13    box-shadow: 0 12px 40px rgba(0,0,0,0.15);14    color: #222;15  }16  .status-bar {17    height: 84px; padding: 20px 28px;18    display: flex; align-items: center; justify-content: space-between;19    font-size: 32px; color: #444;20  }21  .status-icons { display: flex; align-items: center; gap: 20px; }22  .svg-ic { width: 36px; height: 36px; }23  .header {24    padding: 12px 24px 20px 24px;25  }26  .search-row {27    display: flex; align-items: center; gap: 18px;28  }29  .back-btn {30    width: 64px; height: 64px; border-radius: 32px;31    display: flex; align-items: center; justify-content: center;32  }33  .search-bar {34    flex: 1;35    height: 88px; border-radius: 20px;36    background: #F1F3F4; border: 1px solid #E0E0E0;37    display: flex; align-items: center; gap: 18px;38    padding: 0 20px;39    color: #616161; font-size: 32px;40  }41  .search-input-placeholder { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }42  .cart-btn { width: 64px; height: 64px; border-radius: 20px; display: flex; align-items: center; justify-content: center; }43 44  .chip-row { display: flex; gap: 16px; padding: 18px 24px 8px 24px; flex-wrap: wrap; }45  .chip {46    padding: 18px 26px; border-radius: 28px; border: 1px solid #DADCE0; background: #fff;47    font-size: 30px; color: #424242; display: flex; align-items: center; gap: 12px;48  }49  .chip .down { font-size: 28px; color: #727272; }50  .chip.filter {51    border-color: #3D5AFE; color: #1A237E;52    box-shadow: inset 0 0 0 2px #3D5AFE;53  }54  .chip .badge {55    margin-left: 8px; background: #3D5AFE; color: #fff; font-size: 24px;56    padding: 2px 10px; border-radius: 14px;57  }58  .chip.small { padding: 14px 20px; font-size: 28px; }59  .chip.small .ic { width: 32px; height: 32px; }60 61  .divider { height: 1px; background: #EEEEEE; margin: 8px 0; }62 63  .product-grid {64    padding: 16px 16px 120px 16px;65    display: grid; grid-template-columns: 1fr 1fr;66    gap: 16px;67  }68  .card {69    border: 1px solid #E0E0E0; border-radius: 18px; overflow: hidden; background: #fff;70  }71  .card-img {72    position: relative; height: 360px;73    background: #E0E0E0; border-bottom: 1px solid #BDBDBD;74    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px;75  }76  .heart {77    position: absolute; top: 16px; right: 16px;78    width: 56px; height: 56px; border-radius: 28px; background: #fff;79    border: 1px solid #E0E0E0; display: flex; align-items: center; justify-content: center;80  }81  .compare-badge {82    position: absolute; left: 16px; bottom: -28px;83    width: 64px; height: 64px; border-radius: 32px;84    background: #fff; border: 2px solid #3D5AFE;85    display: flex; align-items: center; justify-content: center;86    box-shadow: 0 4px 10px rgba(0,0,0,0.08);87  }88  .card-body { padding: 24px; }89  .brand { font-size: 32px; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 8px; }90  .title { font-size: 28px; color: #616161; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 12px; }91  .price-row { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }92  .discount { color: #1B5E20; font-weight: 700; font-size: 30px; }93  .strike { color: #9E9E9E; text-decoration: line-through; font-size: 28px; }94  .final { color: #212121; font-weight: 700; font-size: 30px; }95 96  .rating-row { display: flex; align-items: center; gap: 10px; margin: 12px 0; }97  .stars { display: flex; gap: 6px; }98  .star-ic { width: 26px; height: 26px; }99  .assured { font-size: 24px; color: #3F51B5; }100  .delivery { font-size: 26px; color: #424242; margin-top: 8px; }101 102  /* Utility SVG colors */103  .ic-gray path, .ic-gray circle, .ic-gray rect { stroke: #616161; fill: none; }104  .ic-fill-gray path { fill: #616161; }105  .ic-green path { fill: #2E7D32; stroke: none; }106  .ic-outline-gray path { stroke: #9E9E9E; fill: none; }107</style>108</head>109<body>110<div id="render-target">111 112  <!-- Status bar -->113  <div class="status-bar">114    <div>7:02</div>115    <div class="status-icons">116      <!-- small generic status icons -->117      <svg class="svg-ic ic-fill-gray" viewBox="0 0 24 24"><path d="M7 3h10v18H7z"/></svg>118      <svg class="svg-ic ic-fill-gray" viewBox="0 0 24 24"><path d="M12 3a9 9 0 1 0 0 18a9 9 0 0 0 0-18z"/></svg>119      <svg class="svg-ic ic-fill-gray" viewBox="0 0 24 24"><path d="M4 4l16 16"/></svg>120      <svg class="svg-ic ic-fill-gray" viewBox="0 0 24 24"><path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0"/></svg>121      <span style="font-size: 40px; line-height: 1; color:#9E9E9E;">•</span>122      <svg class="svg-ic ic-fill-gray" viewBox="0 0 24 24"><path d="M3 6h18v12H3z"/></svg>123      <svg class="svg-ic ic-fill-gray" viewBox="0 0 24 24"><path d="M12 4v16"/></svg>124      <svg class="svg-ic ic-fill-gray" viewBox="0 0 24 24"><path d="M6 5h12l-2 14H8z"/></svg>125    </div>126  </div>127 128  <!-- Header with search -->129  <div class="header">130    <div class="search-row">131      <div class="back-btn">132        <svg class="svg-ic" viewBox="0 0 24 24">133          <path d="M15 4 L7 12 L15 20" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>134        </svg>135      </div>136      <div class="search-bar">137        <svg class="svg-ic" viewBox="0 0 24 24">138          <circle cx="10" cy="10" r="6" stroke="#616161" stroke-width="2" fill="none"/>139          <path d="M14 14 L20 20" stroke="#616161" stroke-width="2" />140        </svg>141        <div class="search-input-placeholder">puma walking shoes for wo...</div>142        <svg class="svg-ic" viewBox="0 0 24 24">143          <path d="M12 4 L12 14" stroke="#616161" stroke-width="2"/>144          <rect x="9" y="14" width="6" height="6" rx="3" fill="#616161"/>145        </svg>146        <svg class="svg-ic" viewBox="0 0 24 24">147          <rect x="4" y="7" width="16" height="10" rx="2" stroke="#616161" stroke-width="2" fill="none"/>148          <circle cx="12" cy="12" r="3" stroke="#616161" stroke-width="2" fill="none"/>149        </svg>150      </div>151      <div class="cart-btn">152        <svg class="svg-ic" viewBox="0 0 24 24">153          <path d="M4 6h2l2 10h10l2-8H8" stroke="#424242" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>154          <circle cx="10" cy="20" r="2" fill="#424242"/>155          <circle cx="18" cy="20" r="2" fill="#424242"/>156        </svg>157      </div>158    </div>159 160    <!-- Chips -->161    <div class="chip-row">162      <div class="chip">Sort By <span class="down">▾</span></div>163      <div class="chip filter">Filter <span class="badge">+1</span></div>164      <div class="chip">Brand <span class="down">▾</span></div>165      <div class="chip">Discount <span class="down">▾</span></div>166      <div class="chip">Size <span class="down">▾</span></div>167    </div>168    <div class="chip-row" style="padding-top: 8px;">169      <div class="chip small">170        <svg class="ic small ic-fill-gray" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#FFCC80"/></svg>171        Premium Brands172      </div>173      <div class="chip small">174        <svg class="ic small ic-fill-gray" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#FFD54F"/></svg>175        Top Rated176      </div>177      <div class="chip small">178        <svg class="ic small" viewBox="0 0 24 24">179          <circle cx="7" cy="12" r="5" fill="#90CAF9" />180          <circle cx="17" cy="12" r="5" fill="#E0E0E0" stroke="#BDBDBD"/>181        </svg>182        White183      </div>184    </div>185  </div>186 187  <div class="divider"></div>188 189  <!-- Product grid -->190  <div class="product-grid">191    <!-- Card 1 -->192    <div class="card">193      <div class="card-img">194        [IMG: White Puma Walking Shoes (pair)]195        <div class="heart">196          <svg class="svg-ic" viewBox="0 0 24 24">197            <path d="M12 20s-8-5.5-8-10a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 4.5-8 10-8 10z" stroke="#9E9E9E" stroke-width="2" fill="none"/>198          </svg>199        </div>200        <div class="compare-badge">201          <svg class="svg-ic" viewBox="0 0 24 24">202            <rect x="5" y="5" width="14" height="14" rx="2" stroke="#3D5AFE" stroke-width="2" fill="none"/>203            <path d="M8 9h8M8 13h6" stroke="#3D5AFE" stroke-width="2"/>204          </svg>205        </div>206      </div>207      <div class="card-body">208        <div class="brand">PUMA</div>209        <div class="title">Softride Ruby Wn's Walking ...</div>210        <div class="price-row">211          <div class="discount">49% off</div>212          <div class="strike">₹6,999</div>213          <div class="final">₹3,500</div>214        </div>215        <div class="rating-row">216          <div class="stars">217            <svg class="star-ic ic-green" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z"/></svg>218            <svg class="star-ic ic-green" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z"/></svg>219            <svg class="star-ic ic-green" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z"/></svg>220            <svg class="star-ic ic-green" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z"/></svg>221            <svg class="star-ic" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#C8E6C9"/></svg>222          </div>223          <div class="assured">Plus F-Assured</div>224        </div>225        <div class="delivery">Free delivery</div>226      </div>227    </div>228 229    <!-- Card 2 -->230    <div class="card">231      <div class="card-img">232        [IMG: White Puma Slip-On Shoes with gold accents]233        <div class="heart">234          <svg class="svg-ic" viewBox="0 0 24 24">235            <path d="M12 20s-8-5.5-8-10a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 4.5-8 10-8 10z" stroke="#9E9E9E" stroke-width="2" fill="none"/>236          </svg>237        </div>238        <div class="compare-badge">239          <svg class="svg-ic" viewBox="0 0 24 24">240            <rect x="5" y="5" width="14" height="14" rx="2" stroke="#3D5AFE" stroke-width="2" fill="none"/>241            <path d="M8 9h8M8 13h6" stroke="#3D5AFE" stroke-width="2"/>242          </svg>243        </div>244      </div>245      <div class="card-body">246        <div class="brand">PUMA</div>247        <div class="title">Softride Sophia Slip Shine W...</div>248        <div class="price-row">249          <div class="discount">64% off</div>250          <div class="strike">₹5,499</div>251          <div class="final">₹1,925</div>252        </div>253        <div class="rating-row">254          <div class="stars">255            <svg class="star-ic ic-green" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z"/></svg>256            <svg class="star-ic ic-green" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z"/></svg>257            <svg class="star-ic ic-green" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z"/></svg>258            <svg class="star-ic ic-green" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z"/></svg>259            <svg class="star-ic" viewBox="0 0 24 24"><path d="M12 2l3