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>Navy Slip On Sport Shoe</title>7<style>8  body { margin:0; padding:0; background:transparent; }9  #render-target {10    width:1080px; height:2400px;11    position:relative; overflow:hidden;12    background:#212121; color:#fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13  }14 15  .status-bar {16    height:96px; padding:0 32px;17    display:flex; align-items:center; justify-content:space-between;18    color:#e0e0e0; font-size:34px; background:#2a2a2a;19    border-bottom:1px solid rgba(255,255,255,0.08);20  }21  .status-icons { display:flex; align-items:center; gap:22px; }22  .dot { width:12px; height:12px; border-radius:50%; background:#bdbdbd; display:inline-block; }23  .icon-svg { width:40px; height:40px; fill:#e0e0e0; }24 25  .app-bar {26    height:140px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;27    border-bottom:1px solid rgba(255,255,255,0.08); background:#272727;28  }29  .app-left { display:flex; align-items:center; gap:28px; }30  .title { font-size:44px; letter-spacing:2px; font-weight:600; color:#eaeaea; }31  .app-right { display:flex; align-items:center; gap:34px; }32  .action-btn { width:60px; height:60px; display:flex; align-items:center; justify-content:center; border-radius:6px; }33  .hint-link { text-align:center; color:#ff4f8b; font-size:34px; padding:22px 0; }34  .hint-link svg { transform:translateY(6px); }35 36  .section { padding:24px 32px; }37  .section h3 {38    margin:16px 0 18px 0; color:#f5f5f5; font-size:34px; letter-spacing:4px;39  }40 41  .input-field {42    height:110px; border:2px solid #616161; border-radius:16px;43    display:flex; align-items:center; padding:0 28px; color:#bdbdbd; font-size:32px; letter-spacing:2px;44    background:#252525;45  }46 47  .benefit-row { display:flex; align-items:center; gap:26px; margin-top:34px; }48  .benefit-row .label { font-size:34px; color:#e0e0e0; }49 50  .btn-row { display:flex; gap:28px; margin:40px 0; }51  .outline-btn {52    flex:1; height:120px; border:2px solid #757575; border-radius:16px;53    display:flex; align-items:center; justify-content:center; color:#e0e0e0; font-size:34px;54    background:#272727;55  }56 57  .divider { height:1px; background:rgba(255,255,255,0.08); margin:16px 0 10px; }58 59  .similar-label {60    font-size:36px; letter-spacing:6px; font-weight:700; color:#f0f0f0; margin:10px 32px 18px;61  }62  .cards { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:0 32px; }63  .card {64    background:#2a2a2a; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,0.06);65  }66  .card .img {67    height:420px; background:#E0E0E0; border-bottom:1px solid #BDBDBD;68    display:flex; align-items:center; justify-content:center; color:#757575; font-size:32px;69  }70  .card .meta { padding:20px; color:#dcdcdc; font-size:32px; }71  .price { color:#ffffff; font-size:36px; }72  .strike { color:#9e9e9e; text-decoration:line-through; margin-left:10px; font-size:30px; }73  .discount { color:#8bc34a; margin-left:12px; font-size:30px; }74  .byline { color:#a0a0a0; font-size:28px; margin-top:6px; }75 76  .options { margin:26px 32px; }77  .options-title { font-size:36px; letter-spacing:6px; color:#f5f5f5; margin-bottom:18px; }78  .chips { display:flex; gap:18px; flex-wrap:wrap; }79  .chip {80    padding:18px 28px; border-radius:28px; border:1px solid #555; color:#e0e0e0; font-size:30px; background:#2b2b2b;81  }82  .chip.active { background:#70a64b; color:#0f1d0f; border-color:#70a64b; font-weight:600; }83 84  .bottom-bar {85    position:absolute; left:0; right:0; bottom:40px;86    height:180px; background:#2b2b2b; border-top:1px solid rgba(255,255,255,0.08);87    display:flex; align-items:center; gap:24px; padding:0 32px;88  }89  .price-box { width:230px; }90  .price-box .now { font-size:44px; font-weight:700; }91  .price-box .was { color:#9e9e9e; text-decoration:line-through; font-size:28px; }92 93  .cta { flex:1; height:120px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:36px; font-weight:700; }94  .buy { background:#d63a69; color:#fff; }95  .cart { background:#8caf3a; color:#0f1d0f; }96 97  .home-indicator {98    position:absolute; width:300px; height:10px; border-radius:8px; background:#e0e0e0;99    bottom:12px; left:50%; transform:translateX(-50%);100    opacity:0.7;101  }102 103  /* Simple inline SVG icon wrappers for benefit rows */104  .benefit-icon { width:56px; height:56px; display:inline-flex; align-items:center; justify-content:center; }105  .truck { fill:#ffc107; }106  .cash { fill:#c5e1a5; }107  .timer { stroke:#ff9800; fill:none; }108  .check-accent { fill:#8bc34a; }109 110  /* Back, cart, user icons style */111  .icon-header { width:48px; height:48px; fill:#e0e0e0; }112</style>113</head>114<body>115<div id="render-target">116 117  <!-- Status bar -->118  <div class="status-bar">119    <div>10:47</div>120    <div class="status-icons">121      <span class="dot"></span>122      <span class="dot"></span>123      <span class="dot"></span>124      <svg class="icon-svg" viewBox="0 0 24 24"><path d="M18 7a6 6 0 0 0-12 0v7H4l2 3 2-3H8V7a4 4 0 0 1 8 0v7h2V7z"></path></svg>125      <svg class="icon-svg" viewBox="0 0 24 24"><path d="M3 11h18v2H3z"></path></svg>126      <div style="display:flex; align-items:center; gap:10px;">127        <svg class="icon-svg" viewBox="0 0 24 24"><path d="M17 18H7a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2zm0-2V8H7v8h10z"></path></svg>128        <span style="font-size:32px;">94%</span>129      </div>130    </div>131  </div>132 133  <!-- App bar -->134  <div class="app-bar">135    <div class="app-left">136      <svg class="icon-header" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#e0e0e0" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>137      <div class="title">NAVY SLIP ON SPORT SHOE</div>138    </div>139    <div class="app-right">140      <div class="action-btn">141        <svg class="icon-header" viewBox="0 0 24 24"><path d="M6 6h15l-2 9H7L6 6zm1 13a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#e0e0e0"/></svg>142      </div>143      <div class="action-btn">144        <svg class="icon-header" viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4 0-7 2-7 5v1h14v-1c0-3-3-5-7-5z" fill="#e0e0e0"/></svg>145      </div>146    </div>147  </div>148 149  <div class="hint-link">150    View full Details151    <svg width="28" height="28" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5" fill="#ff4f8b"/></svg>152  </div>153 154  <!-- Delivery check section -->155  <div class="section">156    <h3>CHECK DELIVERY DATE</h3>157    <div class="input-field">ENTER YOUR PINCODE</div>158 159    <div class="benefit-row">160      <div class="benefit-icon">161        <svg viewBox="0 0 24 24" class="truck">162          <path d="M3 6h11v8H3z"/><path d="M14 9h4l3 3v2h-7z"/><circle cx="6.5" cy="16.5" r="2.5" fill="#9e9e9e"/><circle cx="17.5" cy="16.5" r="2.5" fill="#9e9e9e"/>163        </svg>164      </div>165      <div class="label">Free Delivery available</div>166    </div>167 168    <div class="benefit-row">169      <div class="benefit-icon">170        <svg viewBox="0 0 24 24" class="cash">171          <rect x="3" y="6" width="18" height="12" rx="2" ry="2"/>172          <circle cx="12" cy="12" r="3" fill="#81c784"/>173        </svg>174      </div>175      <div class="label">Cash on Delivery available</div>176    </div>177 178    <div class="benefit-row">179      <div class="benefit-icon">180        <svg viewBox="0 0 24 24">181          <circle cx="12" cy="12" r="8" stroke="#ffb74d" stroke-width="2" fill="none"/>182          <path d="M12 7v5l3 2" stroke="#ffb74d" stroke-width="2" fill="none" stroke-linecap="round"/>183          <path d="M9 12l2 2 4-4" fill="#8bc34a"/>184        </svg>185      </div>186      <div class="label">Easy Exchange/Return within 7 Days</div>187    </div>188 189    <div class="divider"></div>190 191    <div class="btn-row">192      <div class="outline-btn">Save to Wishlist</div>193      <div class="outline-btn">Add to Story</div>194    </div>195  </div>196 197  <div class="similar-label">SIMILAR ITEMS</div>198 199  <div class="cards">200    <div class="card">201      <div class="img">[IMG: Navy sport shoe with red accent]</div>202      <div class="meta">203        <span class="price">₹699</span><span class="strike">₹999</span><span class="discount">30% off</span>204        <div class="byline">By Look & Hook</div>205      </div>206    </div>207    <div class="card">208      <div class="img">[IMG: Black knit running shoes]</div>209      <div class="meta">210        <span class="price">₹659</span><span class="strike">₹999</span><span class="discount">34% off</span>211        <div class="byline">By Asian</div>212      </div>213    </div>214  </div>215 216  <div class="options">217    <div class="options-title">MORE OPTIONS IN NAVY BLUE</div>218    <div class="chips">219      <div class="chip active">Navy Blue</div>220      <div class="chip">Black</div>221      <div class="chip">Grey</div>222      <div class="chip">Blue</div>223      <div class="chip">White</div>224      <div class="chip">Multi</div>225    </div>226  </div>227 228  <!-- Bottom action bar -->229  <div class="bottom-bar">230    <div class="price-box">231      <div class="now">₹ 639</div>232      <div class="was">999</div>233    </div>234    <div class="cta buy">BUY NOW</div>235    <div class="cta cart">ADD TO CART</div>236  </div>237 238  <div class="home-indicator"></div>239 240</div>241</body>242</html>