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>Jackets Listing</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;16    color: #111;17  }18 19  /* Scrollable app surface */20  .content {21    position: absolute;22    inset: 0 0 0 0;23    overflow-y: auto;24    -webkit-overflow-scrolling: touch;25  }26 27  /* Status bar */28  .status-bar {29    height: 88px;30    padding: 0 32px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    color: #1A1A1A;35    font-size: 30px;36  }37  .status-right {38    display: flex;39    align-items: center;40    gap: 18px;41  }42  .dot {43    width: 12px; height: 12px; background: #1A1A1A; border-radius: 50%;44    opacity: 0.7;45  }46 47  /* Top navigation */48  .top-bar {49    height: 120px;50    display: flex;51    align-items: center;52    position: relative;53    padding: 0 24px;54  }55  .top-title {56    position: absolute;57    left: 0; right: 0;58    text-align: center;59    color: #1E5BB8;60    font-weight: 700;61    font-size: 48px;62    letter-spacing: 0.2px;63  }64  .nav-left, .nav-right {65    display: flex;66    align-items: center;67    gap: 26px;68  }69  .nav-left { z-index: 2; }70  .nav-right { margin-left: auto; z-index: 2; }71  .icon-btn {72    width: 64px; height: 64px;73    display: inline-flex; align-items: center; justify-content: center;74  }75  .badge {76    position: absolute;77    top: -4px; right: -2px;78    background: #111; color: #fff;79    font-size: 26px; line-height: 28px;80    min-width: 36px; height: 36px;81    border-radius: 18px;82    display: flex; align-items: center; justify-content: center;83  }84  .icon-wrap {85    position: relative;86    width: 64px; height: 64px;87    display: inline-flex; align-items: center; justify-content: center;88  }89 90  /* Hero banner */91  .hero {92    width: 100%;93    height: 200px;94    background: #E0E0E0;95    border-top: 1px solid #BDBDBD;96    border-bottom: 1px solid #BDBDBD;97    display: flex; align-items: center; justify-content: center;98    color: #757575;99  }100 101  /* Lead product text */102  .lead {103    padding: 24px 40px 12px 40px;104  }105  .lead .name {106    font-size: 46px;107    font-weight: 600;108    margin-bottom: 10px;109  }110  .lead .price {111    font-size: 42px;112    color: #222;113  }114 115  /* Grid of products */116  .grid {117    display: grid;118    grid-template-columns: 1fr 1fr;119    gap: 36px;120    padding: 24px 40px 0 40px;121  }122  .card {123    display: flex;124    flex-direction: column;125  }126  .ph-img {127    background: #E0E0E0;128    border: 1px solid #BDBDBD;129    height: 720px;130    display: flex; align-items: center; justify-content: center;131    color: #757575;132    text-align: center;133    padding: 16px;134  }135  .card .title {136    font-size: 42px;137    line-height: 1.2;138    margin-top: 20px;139  }140  .card .price {141    font-size: 40px;142    margin-top: 10px;143  }144 145  /* Full-width feature card */146  .feature {147    margin: 40px;148  }149  .feature .ph-img {150    height: 980px;151  }152 153  /* Bottom safe-area bar */154  .bottom-bar {155    position: absolute;156    left: 0; right: 0; bottom: 0;157    height: 130px;158    background: #000;159    display: flex; align-items: center; justify-content: center;160  }161  .home-indicator {162    width: 210px; height: 10px; border-radius: 8px; background: #fff; opacity: 0.9;163  }164  /* Helper: SVG stroke */165  svg { display: block; }166</style>167</head>168<body>169<div id="render-target">170  <div class="content">171    <!-- Status bar -->172    <div class="status-bar">173      <div style="font-weight: 600;">8:20</div>174      <div class="status-right">175        <div class="dot" style="opacity:0.35;"></div>176        <div class="dot" style="opacity:0.55;"></div>177        <div class="dot" style="opacity:0.8;"></div>178        <div class="dot" style="opacity:0.5;"></div>179        <svg width="36" height="26" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2"><path d="M6 18h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2z"/><path d="M22 8v8"/></svg>180      </div>181    </div>182 183    <!-- Top navigation -->184    <div class="top-bar">185      <div class="nav-left">186        <div class="icon-btn">187          <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">188            <path d="M15 18l-6-6 6-6"/>189          </svg>190        </div>191      </div>192      <div class="top-title">Jackets</div>193      <div class="nav-right">194        <div class="icon-wrap">195          <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">196            <circle cx="11" cy="11" r="7"></circle>197            <path d="M21 21l-4.3-4.3"></path>198          </svg>199        </div>200        <div class="icon-wrap">201          <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">202            <path d="M4 6h10"></path>203            <circle cx="18" cy="6" r="2"></circle>204            <path d="M4 12h6"></path>205            <circle cx="12" cy="12" r="2"></circle>206            <path d="M4 18h14"></path>207            <circle cx="6" cy="18" r="2"></circle>208          </svg>209          <div class="badge">1</div>210        </div>211      </div>212    </div>213 214    <!-- Hero banner -->215    <div class="hero">[IMG: Category hero - cropped model wearing jacket]</div>216 217    <!-- Lead product (text) -->218    <div class="lead">219      <div class="name">Oversized Jacket</div>220      <div class="price">₹2,290</div>221    </div>222 223    <!-- Two-column grid -->224    <div class="grid">225      <div class="card">226        <div class="ph-img">[IMG: Model in light denim jacket with raw hem]</div>227        <div class="title">Denim Jacket With Raw Hem</div>228        <div class="price">₹1,690</div>229      </div>230      <div class="card">231        <div class="ph-img">[IMG: Model in dark denim raw hem trucker jacket]</div>232        <div class="title">Raw Hem Trucker Jacket</div>233        <div class="price">₹2,290</div>234      </div>235    </div>236 237    <!-- Full-width feature image -->238    <div class="feature">239      <div class="ph-img">[IMG: Model in pink cropped denim jacket]</div>240    </div>241 242    <!-- Spacer to avoid content under bottom bar -->243    <div style="height: 160px;"></div>244  </div>245 246  <!-- Bottom safe area / home indicator -->247  <div class="bottom-bar">248    <div class="home-indicator"></div>249  </div>250</div>251</body>252</html>