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>Fashion Shop - Winter Wardrobe</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #FFFFFF;19    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;20    color: #111;21  }22 23  .page {24    position: absolute;25    inset: 0;26    padding: 0 24px 200px 24px; /* bottom space for tab bar */27    overflow-y: auto;28    box-sizing: border-box;29  }30 31  /* Status bar (mock) */32  .status-bar {33    position: absolute;34    top: 0;35    left: 0;36    right: 0;37    height: 84px;38    display: flex;39    align-items: center;40    justify-content: space-between;41    padding: 0 24px;42    pointer-events: none;43    color: #000;44  }45  .status-time {46    font-weight: 600;47    font-size: 36px;48    letter-spacing: 0.5px;49  }50  .status-icons {51    display: flex;52    align-items: center;53    gap: 18px;54  }55  .dot {56    width: 20px;57    height: 20px;58    background: #111;59    border-radius: 50%;60    opacity: 0.75;61  }62 63  /* Hero banner */64  .hero {65    margin-top: 84px;66    border-radius: 4px;67    position: relative;68    height: 760px;69    overflow: hidden;70  }71  .img-ph {72    width: 100%;73    height: 100%;74    background: #E0E0E0;75    border: 1px solid #BDBDBD;76    display: flex;77    align-items: center;78    justify-content: center;79    color: #757575;80    font-size: 36px;81    text-align: center;82  }83  .hero-overlay {84    position: absolute;85    left: 0;86    right: 0;87    bottom: 40px;88    padding: 0 36px;89    color: #fff;90    text-shadow: 0 2px 8px rgba(0,0,0,0.45);91  }92  .hero-title {93    font-family: Georgia, "Times New Roman", serif;94    font-size: 96px;95    font-weight: 600;96    letter-spacing: 2px;97  }98  .hero-sub {99    margin-top: 18px;100    font-size: 34px;101    letter-spacing: 2px;102    text-transform: uppercase;103  }104 105  /* Product grid */106  .grid {107    margin-top: 24px;108    display: grid;109    grid-template-columns: 1fr 1fr;110    gap: 24px;111  }112  .card {113    display: flex;114    flex-direction: column;115  }116  .card .img-wrap {117    width: 100%;118    height: 780px;119    background: #E0E0E0;120    border: 1px solid #BDBDBD;121    display: flex;122    align-items: center;123    justify-content: center;124    color: #757575;125    font-size: 32px;126    text-align: center;127  }128  .title {129    margin-top: 22px;130    font-size: 44px;131    font-weight: 600;132    line-height: 1.2;133  }134  .price {135    margin-top: 8px;136    font-size: 40px;137  }138 139  /* Bottom tab bar */140  .tabbar {141    position: absolute;142    left: 0;143    right: 0;144    bottom: 0;145    height: 180px;146    background: #fff;147    border-top: 1px solid #E6E6E6;148    display: flex;149    align-items: center;150    justify-content: space-around;151  }152  .tab {153    width: 25%;154    display: flex;155    align-items: center;156    justify-content: center;157    gap: 14px;158    flex-direction: column;159    color: #8B8B8B;160    font-size: 34px;161  }162  .tab.active {163    color: #111;164    font-weight: 600;165  }166  .tab svg {167    width: 56px;168    height: 56px;169  }170  .bag-badge {171    position: absolute;172    top: -6px;173    right: 18px;174    background: #111;175    color: #fff;176    font-size: 26px;177    line-height: 28px;178    padding: 4px 12px;179    border-radius: 20px;180  }181 182  /* Home indicator */183  .home-indicator {184    position: absolute;185    left: 50%;186    transform: translateX(-50%);187    bottom: 20px;188    width: 300px;189    height: 10px;190    background: #000;191    border-radius: 10px;192    opacity: 0.8;193  }194</style>195</head>196<body>197<div id="render-target">198  <!-- Status bar -->199  <div class="status-bar">200    <div class="status-time">8:23</div>201    <div class="status-icons">202      <div class="dot"></div>203      <div class="dot" style="opacity:0.55"></div>204      <div class="dot" style="opacity:0.35"></div>205    </div>206  </div>207 208  <div class="page">209    <!-- Hero Banner -->210    <div class="hero">211      <div class="img-ph">[IMG: Fashion banner - Winter wardrobe models outdoors]</div>212      <div class="hero-overlay">213        <div class="hero-title">Winter Wardrobe</div>214        <div class="hero-sub">Warm essentials for the season ></div>215      </div>216    </div>217 218    <!-- Product Grid -->219    <div class="grid">220      <div class="card">221        <div class="img-wrap">[IMG: Beige puffer coat on model]</div>222        <div class="title">Puffer Coat</div>223        <div class="price">₹2,990</div>224      </div>225      <div class="card">226        <div class="img-wrap">[IMG: Brown plaid jacket on model]</div>227        <div class="title">Plaid Jacket With</div>228        <div class="price">₹1,890</div>229      </div>230      <div class="card">231        <div class="img-wrap">[IMG: Black shearling leather jacket]</div>232        <div class="title">Shearling Leather Jacket</div>233        <div class="price">₹3,490</div>234      </div>235      <div class="card">236        <div class="img-wrap">[IMG: Pink cropped puffer jacket]</div>237        <div class="title">Short Puffer Jacket</div>238        <div class="price">₹1,990</div>239      </div>240    </div>241  </div>242 243  <!-- Bottom Tab Bar -->244  <div class="tabbar">245    <div class="tab active">246      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">247        <path d="M3 10.5l9-7 9 7V21a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1V10.5z"/>248      </svg>249      <div>Home</div>250    </div>251    <div class="tab">252      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">253        <circle cx="11" cy="11" r="7"></circle>254        <path d="M21 21l-4.3-4.3"></path>255      </svg>256      <div>Menu</div>257    </div>258    <div class="tab" style="position:relative;">259      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">260        <path d="M6 8h12v11a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V8z"></path>261        <path d="M8 8V6a4 4 0 0 1 8 0v2"></path>262      </svg>263      <div class="bag-badge">1</div>264      <div>Bag</div>265    </div>266    <div class="tab">267      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">268        <circle cx="12" cy="7.5" r="4"></circle>269        <path d="M4 21a8 8 0 0 1 16 0"></path>270      </svg>271      <div>Me</div>272    </div>273  </div>274 275  <div class="home-indicator"></div>276</div>277</body>278</html>