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>Women - Black Friday</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #111; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar (mock) */18  .status-bar {19    height: 90px;20    display: flex;21    align-items: center;22    padding: 0 40px;23    font-size: 30px;24    color: #333;25  }26  .status-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }27  .dot {28    width: 18px; height: 18px; border-radius: 50%; background: #333; opacity: 0.5;29  }30  .wifi {31    width: 28px; height: 22px;32  }33 34  /* Header */35  .app-header {36    height: 120px;37    display: flex;38    align-items: center;39    padding: 0 36px;40    border-bottom: 1px solid #eee;41  }42  .header-left, .header-right {43    display: flex; align-items: center; gap: 28px;44  }45  .header-center {46    margin-left: 20px;47    font-weight: 800;48    font-size: 44px;49    letter-spacing: 0.5px;50  }51  .caret {52    width: 18px; height: 18px; margin-left: 10px; vertical-align: middle;53  }54  .icon-btn { width: 44px; height: 44px; cursor: default; }55  .menu { width: 48px; height: 34px; }56 57  /* Tabs */58  .tabs {59    height: 110px;60    display: flex;61    align-items: flex-end;62    gap: 60px;63    padding: 0 36px;64    border-bottom: 1px solid #eee;65    box-shadow: 0 10px 12px rgba(0,0,0,0.04);66  }67  .tab {68    padding: 0 6px 24px;69    font-weight: 700;70    color: #333;71    letter-spacing: 1px;72  }73  .tab.active {74    color: #111;75    border-bottom: 8px solid #1e6cf4;76  }77  .tab .blue-dot {78    display: inline-block;79    width: 14px; height: 14px;80    background: #2f80ff;81    border-radius: 50%;82    margin-left: 14px;83  }84 85  /* Hero section */86  .hero {87    position: relative;88    height: 1040px;89    background: #fcfcfc;90    overflow: hidden;91  }92  .hero-inner {93    position: relative;94    height: 100%;95    padding: 40px;96    display: flex;97  }98  .hero-left {99    width: 58%;100    padding-top: 10px;101  }102  .coming-pill {103    display: inline-block;104    padding: 18px 30px;105    border: 4px solid #111;106    border-radius: 16px;107    background: #fff;108    font-weight: 800;109    font-size: 36px;110    letter-spacing: 1px;111  }112  .big {113    font-size: 230px;114    line-height: 0.9;115    font-weight: 900;116    margin: 32px 0 0 0;117    letter-spacing: -6px;118  }119  .big.small {120    font-size: 210px;121    margin-top: -16px;122  }123  .subhead {124    margin-top: 24px;125    font-size: 64px;126    font-weight: 800;127    line-height: 1.1;128  }129  .code-pill {130    display: inline-block;131    margin-top: 26px;132    padding: 22px 30px;133    border: 5px solid #111;134    border-radius: 22px;135    font-size: 46px;136    font-weight: 800;137    background: #fff;138  }139  .footnote {140    position: absolute;141    left: 40px;142    bottom: 22px;143    font-size: 24px;144    color: #666;145  }146 147  .hero-right {148    position: absolute;149    right: 30px;150    bottom: 0;151    width: 420px;152    height: 940px;153    display: flex;154    align-items: flex-end;155    justify-content: center;156    z-index: 2;157  }158  .img-placeholder {159    width: 420px;160    height: 900px;161    background: #E0E0E0;162    border: 1px solid #BDBDBD;163    display: flex; align-items: center; justify-content: center;164    color: #757575; font-weight: 600; text-align: center; padding: 10px;165  }166 167  /* Decorative rings */168  .ring {169    position: absolute;170    width: 320px; height: 320px;171    border-radius: 50%;172    background: radial-gradient(circle at 35% 35%, #cfe7d8 0%, #a8d5b8 35%, #9fceb0 55%, #e6f3ea 100%);173    opacity: 0.9;174    z-index: 0;175  }176  .ring.large { width: 420px; height: 420px; right: -120px; top: 120px; }177  .ring.left { left: -140px; bottom: -60px; }178 179  /* Secondary banner */180  .bf-banner {181    background: #f5f5f5;182    margin-top: 18px;183    padding: 40px 46px 56px;184    position: relative;185  }186  .bf-title {187    font-size: 58px;188    font-weight: 800;189    text-align: center;190    margin: 20px 0 26px;191  }192  .bf-cta {193    margin: 0 auto;194    display: block;195    width: max-content;196    padding: 20px 36px;197    border: 5px solid #111;198    border-radius: 18px;199    font-size: 42px;200    font-weight: 800;201    background: #fff;202  }203 204  /* Image grid */205  .grid {206    display: grid;207    grid-template-columns: 1fr 1fr;208    gap: 34px;209    padding: 36px;210  }211  .tile {212    height: 250px;213    background: #E0E0E0;214    border: 1px solid #BDBDBD;215    display: flex; align-items: center; justify-content: center;216    color: #6a6a6a; font-weight: 600;217  }218 219  /* Bottom gesture bar */220  .gesture {221    position: absolute;222    bottom: 28px;223    left: 50%;224    transform: translateX(-50%);225    width: 320px;226    height: 12px;227    background: #cfcfcf;228    border-radius: 8px;229  }230</style>231</head>232<body>233<div id="render-target">234  <!-- Status bar -->235  <div class="status-bar">236    8:55237    <div class="status-right">238      <div class="dot"></div>239      <div class="dot" style="opacity:0.7;"></div>240      <div class="dot" style="opacity:0.9;"></div>241      <svg class="wifi" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">242        <path d="M5 12a9 9 0 0 1 14 0"></path>243        <path d="M8.5 15.5a5 5 0 0 1 7 0"></path>244        <path d="M12 19h0"></path>245      </svg>246      <svg width="20" height="24" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">247        <path d="M6 2h12l-1 7H7L6 2z"></path>248        <path d="M7 9v9a5 5 0 0 0 10 0V9"></path>249      </svg>250    </div>251  </div>252 253  <!-- App header -->254  <div class="app-header">255    <div class="header-left">256      <svg class="menu" viewBox="0 0 24 18" stroke="#111" stroke-width="2.6">257        <path d="M1 1h22M1 9h22M1 17h22"></path>258      </svg>259    </div>260    <div class="header-center">261      WOMEN262      <svg class="caret" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">263        <path d="M6 9l6 6 6-6"></path>264      </svg>265    </div>266    <div class="header-right">267      <svg class="icon-btn" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">268        <path d="M20.8 8.6a5.5 5.5 0 0 0-9.8-3.8A5.5 5.5 0 1 0 4 17l8 6 8-6a5.5 5.5 0 0 0 .8-8.4z"></path>269      </svg>270      <svg class="icon-btn" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2">271        <circle cx="11" cy="11" r="7"></circle>272        <path d="M21 21l-4.3-4.3"></path>273      </svg>274    </div>275  </div>276 277  <!-- Tabs -->278  <div class="tabs">279    <div class="tab active">HOME</div>280    <div class="tab">CATEGORIES</div>281    <div class="tab">NEW IN</div>282    <div class="tab">FOR YOU <span class="blue-dot"></span></div>283  </div>284 285  <!-- Hero section -->286  <div class="hero">287    <div class="ring large"></div>288    <div class="ring left"></div>289 290    <div class="hero-inner">291      <div class="hero-left">292        <div class="coming-pill">BLACK FRIDAY IS COMING...</div>293        <div class="big">25%</div>294        <div class="big small">off</div>295        <div class="subhead">cold-weather<br/>wins*</div>296        <div class="code-pill">With code: COLD25</div>297      </div>298 299      <div class="hero-right">300        <div class="img-placeholder">[IMG: Model in green coat outfit]</div>301      </div>302 303      <div class="footnote">304        *Minimum spend of £20 applies. Valid on selected products only. See website banner for full Ts&amp;Cs.305      </div>306    </div>307  </div>308 309  <!-- Secondary banner -->310  <div class="bf-banner">311    <div class="bf-title">The up-to-70%-off edit</div>312    <div class="bf-cta">Black Friday starts here</div>313  </div>314 315  <!-- Image grid -->316  <div class="grid">317    <div class="tile">[IMG: Editorial night portrait]</div>318    <div class="tile">[IMG: Winter accessory close-up]</div>319  </div>320 321  <!-- Bottom gesture bar -->322  <div class="gesture"></div>323</div>324</body>325</html>