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 - 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: Arial, Helvetica, sans-serif;16    color: #111;17  }18 19  /* Status bar */20  .statusbar {21    height: 110px;22    padding: 24px 36px 0 36px;23    box-sizing: border-box;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #333;28    font-size: 34px;29  }30  .status-left { display: flex; align-items: center; gap: 18px; }31  .status-dots { display: flex; gap: 12px; align-items: center; }32  .dot { width: 18px; height: 18px; background: #1a1a1a; border-radius: 50%; display: inline-block; }33  .status-right { display: flex; align-items: center; gap: 20px; }34  .icon-sm svg { width: 36px; height: 36px; fill: #333; }35 36  /* Top nav */37  .topbar {38    height: 120px;39    padding: 0 36px;40    display: flex;41    align-items: center;42    justify-content: space-between;43  }44  .topbar-left, .topbar-right { display: flex; align-items: center; gap: 28px; }45  .menu-icon svg, .heart-icon svg, .search-icon svg, .chev-icon svg { width: 44px; height: 44px; }46  .title {47    font-weight: 700;48    font-size: 44px;49    letter-spacing: 0.5px;50  }51 52  /* Tabs */53  .tabs {54    height: 110px;55    display: flex;56    align-items: flex-end;57    padding: 0 36px;58    border-bottom: 1px solid #eee;59    gap: 48px;60  }61  .tab {62    font-size: 34px;63    color: #444;64    padding: 0 4px 24px 4px;65    position: relative;66  }67  .tab.active { color: #111; font-weight: 700; }68  .tab.active::after {69    content: "";70    position: absolute;71    left: 0; right: 0; bottom: 0;72    height: 6px; background: #2D63FF; border-radius: 3px;73  }74  .tab .blue-dot {75    width: 14px; height: 14px; background: #2D63FF; border-radius: 50%;76    position: absolute; right: -18px; top: 14px;77  }78 79  /* Promo banner */80  .promo {81    margin: 18px 0 10px 0;82    padding: 0 36px;83  }84  .promo-box {85    width: 100%;86    height: 240px;87    background: #F4F3EF;88    border: 1px solid #E0E0E0;89    display: flex; align-items: center; justify-content: center;90    color: #333;91    font-size: 36px;92    text-align: center;93    border-radius: 10px;94  }95 96  /* Grid of cards */97  .grid {98    padding: 20px 36px 0 36px;99    display: grid;100    grid-template-columns: 1fr 1fr;101    gap: 36px;102  }103  .card-image {104    width: 100%;105    height: 560px;106    background: #E0E0E0;107    border: 1px solid #BDBDBD;108    border-radius: 4px;109    display: flex; align-items: center; justify-content: center;110    color: #666;111    font-size: 30px;112    text-align: center;113    padding: 12px;114    box-sizing: border-box;115  }116  .card-title {117    text-align: center;118    margin-top: 22px;119    font-weight: 800;120    font-size: 44px;121    letter-spacing: 1px;122  }123  .card-sub {124    text-align: center;125    margin-top: 10px;126    color: #7A7A7A;127    font-size: 32px;128  }129 130  /* Bottom home indicator */131  .home-indicator {132    position: absolute;133    left: 50%;134    transform: translateX(-50%);135    bottom: 26px;136    width: 420px;137    height: 14px;138    background: #C7C7C7;139    border-radius: 8px;140  }141</style>142</head>143<body>144<div id="render-target">145 146  <!-- Status bar -->147  <div class="statusbar">148    <div class="status-left">149      <div>8:55</div>150      <div class="status-dots">151        <span class="dot" style="background:#BDBDBD;"></span>152        <span class="dot" style="background:#1a1a1a;"></span>153        <span class="dot" style="background:#1a1a1a;"></span>154        <span class="dot" style="background:#1a1a1a;"></span>155        <span style="width:10px;height:10px;background:#999;border-radius:50%;display:inline-block;"></span>156      </div>157    </div>158    <div class="status-right">159      <span class="icon-sm" title="Wi-Fi">160        <svg viewBox="0 0 24 24"><path d="M2 8c5.5-4.7 14.5-4.7 20 0l-2 2c-4.1-3.5-11.9-3.5-16 0L2 8zm4 4c3.2-2.7 8.8-2.7 12 0l-2 2c-2.3-1.9-5.7-1.9-8 0l-2-2zm4 4c1.1-.9 2.9-.9 4 0l-2 2-2-2z"/></svg>161      </span>162      <span class="icon-sm" title="Battery">163        <svg viewBox="0 0 24 24"><path d="M17 6h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2v2H3V4h14v2zM5 6v12h10V6H5z"/></svg>164      </span>165    </div>166  </div>167 168  <!-- Top navigation -->169  <div class="topbar">170    <div class="topbar-left">171      <span class="menu-icon" aria-label="menu">172        <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>173      </span>174      <div class="title">WOMEN</div>175      <span class="chev-icon">176        <svg viewBox="0 0 24 24"><path d="M7 9l5 5 5-5H7z"/></svg>177      </span>178    </div>179    <div class="topbar-right">180      <span class="heart-icon" aria-label="favorites">181        <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.9-9.5-8C-0.7 9.1 1.2 4 6 4c2.2 0 3.6 1.2 4 2 0.4-0.8 1.8-2 4-2 4.8 0 6.7 5.1 3.5 9-2.5 3.1-9.5 8-9.5 8z" fill="none" stroke="#111" stroke-width="2"/></svg>182      </span>183      <span class="search-icon" aria-label="search">184        <svg viewBox="0 0 24 24"><path d="M10 2a8 8 0 105.3 14l5 5 1.4-1.4-5-5A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z"/></svg>185      </span>186    </div>187  </div>188 189  <!-- Tabs -->190  <div class="tabs">191    <div class="tab active">HOME</div>192    <div class="tab">CATEGORIES</div>193    <div class="tab">NEW IN</div>194    <div class="tab">FOR YOU <span class="blue-dot"></span></div>195  </div>196 197  <!-- Promo banner -->198  <div class="promo">199    <div class="promo-box">[IMG: Promo banner - The up-to-70%-off edit • Black Friday starts here]</div>200  </div>201 202  <!-- Cards grid -->203  <div class="grid">204 205    <!-- Row 1 -->206    <div class="card">207      <div class="card-image">[IMG: Nighttime outfit – blazer and bralette on a promenade]</div>208      <div class="card-title">THE PARTYWEAR DROP</div>209      <div class="card-sub">Ft. 'who is THAT' energy</div>210    </div>211 212    <div class="card">213      <div class="card-image">[IMG: Cozy pink faux-fur coat and knit beanie in snowy scene]</div>214      <div class="card-title">FROSTY 'FITS</div>215      <div class="card-sub">Stay snug</div>216    </div>217 218    <!-- Row 2 -->219    <div class="card">220      <div class="card-image">[IMG: Two friends in lounge – sequined dress and relaxed denim]</div>221      <div class="card-title">TOPSHOP</div>222      <div class="card-sub">Peep the next phase</div>223    </div>224 225    <div class="card">226      <div class="card-image">[IMG: Gift shop shelves with hats, skincare, and colorful boxes]</div>227      <div class="card-title">THE GIFT SHOP</div>228      <div class="card-sub">Secure the goods early</div>229    </div>230 231  </div>232 233  <!-- Home indicator -->234  <div class="home-indicator"></div>235</div>236</body>237</html>