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>Shop Home</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, Arial, sans-serif;16    color: #111;17  }18 19  /* general helpers */20  .container { padding: 0 48px; }21  .row { display: flex; align-items: center; }22  .spacer-16 { height: 16px; }23  .spacer-24 { height: 24px; }24  .spacer-32 { height: 32px; }25  .spacer-40 { height: 40px; }26  .spacer-48 { height: 48px; }27  .spacer-56 { height: 56px; }28  .spacer-64 { height: 64px; }29 30  /* header with icons */31  .appbar {32    height: 128px;33    display: flex;34    align-items: center;35    justify-content: space-between;36  }37  .icon-btn { width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; }38  .icon { width: 44px; height: 44px; stroke: #111; fill: none; stroke-width: 2.5; }39 40  .hamburger { position: relative; }41  .hamburger .dot {42    position: absolute; left: 6px; top: 6px;43    width: 16px; height: 16px; background: #E53935; border-radius: 50%;44  }45 46  /* promo strip */47  .promo {48    margin: 16px 48px 0 48px;49    height: 120px;50    background: #FAFAFA;51    border-radius: 10px;52    display: flex; align-items: center; justify-content: center;53    color: #111;54    font-size: 34px; font-weight: 500;55  }56 57  /* banner placeholder */58  .img-card {59    margin: 40px 48px 0 48px;60    height: 360px;61    background: #E0E0E0;62    border: 1px solid #BDBDBD;63    border-radius: 8px;64    position: relative;65    overflow: hidden;66  }67  .img-label {68    position: absolute; inset: 0;69    display: flex; align-items: center; justify-content: center;70    color: #757575; font-size: 32px;71  }72 73  .banner-text {74    position: absolute; left: 40px; bottom: 40px; right: 120px;75    color: #FFFFFF;76  }77  .banner-title { font-size: 72px; font-weight: 800; letter-spacing: -0.5px; margin: 0 0 12px 0; }78  .banner-sub { font-size: 32px; opacity: 0.9; margin: 0; }79  .plus {80    position: absolute; right: 32px; top: 50%; transform: translateY(-50%);81    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;82    color: #FFFFFF; font-size: 56px; font-weight: 300;83  }84 85  /* hero large image */86  .hero {87    margin: 40px 48px 0 48px;88    height: 840px;89    background: #E0E0E0;90    border: 1px solid #BDBDBD;91    border-radius: 8px;92    position: relative;93    overflow: hidden;94  }95  .price-pill {96    position: absolute; left: 40px; top: 40px;97    background: rgba(0,0,0,0.7);98    color: #fff;99    padding: 18px 28px;100    border-radius: 18px;101    font-size: 40px; font-weight: 600;102  }103  .hero-caption {104    position: absolute; left: 40px; bottom: 36px;105    color: #FFFFFF; font-size: 56px; font-weight: 800; letter-spacing: 0.2px;106  }107 108  /* section title */109  .section-title {110    margin: 48px 48px 0 48px;111    font-size: 60px; font-weight: 800; letter-spacing: -0.3px;112  }113 114  /* categories */115  .categories {116    margin: 28px 0 0 0;117    padding: 0 32px;118    display: flex; gap: 24px;119    overflow: hidden;120  }121  .chip {122    width: 220px; height: 220px; border-radius: 110px;123    background: #FFFFFF; border: 1px solid #E5E5E5;124    box-shadow: 0 2px 6px rgba(0,0,0,0.04);125    display: flex; align-items: center; justify-content: center;126    flex-direction: column;127  }128  .chip span {129    text-align: center; color: #111; font-weight: 700; font-size: 36px; line-height: 1.2;130  }131 132  /* small product thumbnails row */133  .thumbs {134    margin: 28px 0 0 0;135    padding: 0 24px;136    display: flex; gap: 24px;137  }138  .thumb {139    width: 200px; height: 300px;140    background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 12px;141    display: flex; align-items: center; justify-content: center;142    color: #757575; font-size: 26px; text-align: center; padding: 8px;143  }144 145  /* bottom home indicator */146  .home-indicator {147    position: absolute; left: 50%; transform: translateX(-50%);148    bottom: 22px;149    width: 360px; height: 12px; background: #D1D1D1; border-radius: 6px;150  }151</style>152</head>153<body>154<div id="render-target">155  <div class="container">156    <!-- App Bar -->157    <div class="appbar">158      <div class="row">159        <div class="icon-btn hamburger">160          <div class="dot"></div>161          <svg class="icon" viewBox="0 0 24 24">162            <path d="M3 6h18M3 12h18M3 18h18" />163          </svg>164        </div>165      </div>166      <div class="row" style="gap: 28px;">167        <!-- Search -->168        <div class="icon-btn">169          <svg class="icon" viewBox="0 0 24 24">170            <circle cx="11" cy="11" r="7"></circle>171            <path d="M20 20l-4-4"></path>172          </svg>173        </div>174        <!-- User -->175        <div class="icon-btn">176          <svg class="icon" viewBox="0 0 24 24">177            <circle cx="12" cy="8" r="4"></circle>178            <path d="M4 20c1.8-4 13.2-4 16 0"></path>179          </svg>180        </div>181        <!-- Heart -->182        <div class="icon-btn">183          <svg class="icon" viewBox="0 0 24 24">184            <path d="M12 21s-7-4.7-9-8.5C1 8.5 3.5 6 6 6c2 0 3.2 1 4 2 0.8-1 2-2 4-2 2.5 0 5 2.5 3 6.5S12 21 12 21z"></path>185          </svg>186        </div>187        <!-- Bag -->188        <div class="icon-btn">189          <svg class="icon" viewBox="0 0 24 24">190            <path d="M6 8h12l-1 12H7L6 8z"></path>191            <path d="M9 8V6a3 3 0 0 1 6 0v2"></path>192          </svg>193        </div>194      </div>195    </div>196  </div>197 198  <!-- Promo strip -->199  <div class="promo">Free Shipping over $40</div>200 201  <!-- Holiday banner -->202  <div class="img-card">203    <div class="img-label">[IMG: Holiday greenery banner]</div>204    <div class="banner-text">205      <h1 class="banner-title">The Holiday Preview</h1>206      <p class="banner-sub">Check off your list early with stylish gifts for all!</p>207    </div>208    <div class="plus">+</div>209  </div>210 211  <!-- Hero product/card -->212  <div class="hero">213    <div class="img-label">[IMG: Fashion model in beige outfit]</div>214    <div class="price-pill">$29.99</div>215    <div class="hero-caption">Not so basic beige</div>216  </div>217 218  <!-- Popular categories -->219  <div class="section-title">Popular categories</div>220  <div class="categories">221    <div class="chip"><span>New</span><span>arrivals</span></div>222    <div class="chip"><span>New</span><span>arrivals</span></div>223    <div class="chip"><span>On</span><span>sale</span></div>224    <div class="chip"><span>Best</span><span>sellers</span></div>225    <div class="chip"><span>Gifts</span><span>under $50</span></div>226  </div>227 228  <!-- Thumbnails row hinting at carousel -->229  <div class="thumbs">230    <div class="thumb">[IMG: Lounge pants]</div>231    <div class="thumb">[IMG: Hoodie]</div>232    <div class="thumb">[IMG: Knit tank]</div>233    <div class="thumb">[IMG: Long sleeve tee]</div>234  </div>235 236  <!-- Bottom home indicator -->237  <div class="home-indicator"></div>238</div>239</body>240</html>