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 Home UI</title>7<style>8  html, body { margin: 0; padding: 0; background: transparent; }9  * { box-sizing: border-box; }10  #render-target {11    position: relative;12    overflow: hidden;13    width: 1080px;14    height: 2400px;15    background: #ffffff;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17    color: #111;18  }19 20  /* Status bar */21  .status-bar {22    height: 120px;23    background: #8E8E8E;24    color: #fff;25    display: flex;26    align-items: center;27    padding: 0 36px;28    font-size: 40px;29    letter-spacing: .5px;30  }31  .status-right {32    margin-left: auto;33    display: flex;34    align-items: center;35    gap: 24px;36  }37  .status-icon svg { display: block; }38 39  /* Top action bar */40  .topbar {41    background: #fff;42    height: 160px;43    display: flex;44    align-items: center;45    padding: 0 34px;46    border-bottom: 1px solid #eee;47    gap: 48px;48  }49  .topbar .spacer { flex: 1; }50  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }51  .icon-btn svg { width: 56px; height: 56px; }52 53  .avatar-dot {54    position: relative;55    width: 72px; height: 72px;56    display: flex; align-items: center; justify-content: center;57  }58  .avatar-dot .dot {59    position: absolute;60    right: 4px; top: 6px;61    width: 20px; height: 20px; border-radius: 50%; background: #FF7A27;62  }63 64  /* Welcome row with search */65  .welcome-row {66    display: flex;67    align-items: center;68    padding: 24px 34px;69    border-bottom: 1px solid #eee;70  }71  .welcome-text {72    font-size: 60px;73    line-height: 1.1;74  }75  .welcome-text a { color: #5B3CF2; text-decoration: none; }76  .welcome-search {77    margin-left: auto;78    width: 92px; height: 92px;79    border: 2px solid #222; border-radius: 50%;80    display: flex; align-items: center; justify-content: center;81  }82  .welcome-search svg { width: 48px; height: 48px; }83 84  /* Category tabs */85  .tabs {86    display: flex;87    gap: 44px;88    padding: 18px 34px 22px;89    border-bottom: 1px solid #eee;90    overflow: hidden;91  }92  .tab {93    font-size: 42px;94    color: #333;95    padding-bottom: 16px;96  }97  .tab.active {98    font-weight: 700;99    border-bottom: 6px solid #111;100  }101 102  /* Sale banner */103  .sale {104    background: #C64C2D;105    color: #fff;106    padding: 64px 40px 56px;107  }108  .sale h1 {109    margin: 0 0 16px 0;110    font-size: 86px;111    font-weight: 800;112    letter-spacing: -1px;113  }114  .sale p {115    margin: 0;116    font-size: 56px;117    opacity: 0.95;118  }119  .sale-bottom {120    background: #6A2E25;121    color: #fff;122    padding: 44px 40px 46px;123  }124  .sale-bottom .label {125    font-size: 40px;126    opacity: 0.85;127    margin-bottom: 26px;128  }129  .sale-links {130    display: flex;131    gap: 48px;132    flex-wrap: wrap;133  }134  .sale-link {135    font-size: 48px;136    font-weight: 800;137    color: #fff;138  }139 140  /* Stories section - black card */141  .stories {142    margin: 40px 30px;143    background: #000;144    color: #fff;145    border-radius: 44px;146    padding: 48px 40px 36px;147  }148  .stories h2 {149    margin: 8px 0 10px;150    font-size: 64px;151    letter-spacing: 1px;152  }153  .stories .sub {154    margin: 0 0 24px;155    font-family: Georgia, "Times New Roman", serif;156    font-size: 60px;157  }158 159  .story-scroller {160    display: flex;161    gap: 24px;162    overflow: hidden;163    padding: 24px 0 8px;164  }165 166  /* Placeholder image blocks per instruction */167  .img-ph {168    background: #E0E0E0;169    border: 1px solid #BDBDBD;170    color: #757575;171    display: flex;172    align-items: center;173    justify-content: center;174    text-align: center;175  }176  .story-card {177    width: 950px;178    height: 1050px;179    border-radius: 28px;180    overflow: hidden;181    background: transparent;182  }183  .story-card .img-ph { width: 100%; height: 100%; border-radius: 28px; font-size: 44px; padding: 24px; }184 185  /* Bottom home indicator (visual) */186  .home-indicator {187    position: absolute;188    bottom: 18px;189    left: 50%;190    transform: translateX(-50%);191    width: 280px; height: 10px;192    background: #e7e7e7;193    border-radius: 10px;194  }195</style>196</head>197<body>198<div id="render-target">199 200  <!-- Status bar -->201  <div class="status-bar">202    <div>11:35</div>203    <div class="status-right">204      <div class="status-icon">205        <!-- Signal bars -->206        <svg width="48" height="36" viewBox="0 0 24 18" fill="#fff">207          <rect x="1" y="10" width="3" height="8"></rect>208          <rect x="6" y="6" width="3" height="12"></rect>209          <rect x="11" y="3" width="3" height="15"></rect>210          <rect x="16" y="1" width="3" height="17"></rect>211        </svg>212      </div>213      <div class="status-icon">214        <!-- WiFi -->215        <svg width="48" height="36" viewBox="0 0 24 18" fill="none" stroke="#fff" stroke-width="2">216          <path d="M2 6c5-5 15-5 20 0"></path>217          <path d="M5 9c3-3 11-3 14 0"></path>218          <path d="M8 12c2-2 6-2 8 0"></path>219          <circle cx="12" cy="15" r="1.5" fill="#fff" stroke="none"></circle>220        </svg>221      </div>222      <div class="status-icon">223        <!-- Battery -->224        <svg width="64" height="36" viewBox="0 0 36 18" fill="none" stroke="#fff" stroke-width="2">225          <rect x="1" y="3" width="30" height="12" rx="2"></rect>226          <rect x="32" y="6" width="3" height="6" fill="#fff" stroke="none"></rect>227          <rect x="3" y="5" width="22" height="8" fill="#fff" stroke="none"></rect>228        </svg>229      </div>230    </div>231  </div>232 233  <!-- Top action bar with icons -->234  <div class="topbar">235    <!-- Play/triangle icon (brand) -->236    <div class="icon-btn">237      <svg viewBox="0 0 24 24">238        <circle cx="12" cy="12" r="11" fill="#FF7A27"></circle>239        <path d="M10 7l7 5-7 5z" fill="#fff"></path>240      </svg>241    </div>242 243    <!-- Search -->244    <div class="icon-btn">245      <svg viewBox="0 0 24 24" stroke="#222" stroke-width="1.8" fill="none">246        <circle cx="11" cy="11" r="7"></circle>247        <path d="M17 17l4 4" stroke-linecap="round"></path>248      </svg>249    </div>250 251    <!-- Heart -->252    <div class="icon-btn">253      <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="1.8">254        <path d="M12 20s-7-4.5-7-10a4.5 4.5 0 0 1 8-2.7A4.5 4.5 0 0 1 19 10c0 5.5-7 10-7 10z"></path>255      </svg>256    </div>257 258    <!-- Bag -->259    <div class="icon-btn">260      <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="1.8">261        <rect x="4" y="7" width="16" height="13" rx="2"></rect>262        <path d="M8 7a4 4 0 0 1 8 0"></path>263      </svg>264    </div>265 266    <div class="spacer"></div>267 268    <!-- User avatar with dot -->269    <div class="avatar-dot">270      <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="1.8">271        <circle cx="12" cy="8" r="3.2"></circle>272        <path d="M4 20c1.8-4 14.2-4 16 0" stroke-linecap="round"></path>273      </svg>274      <span class="dot"></span>275    </div>276  </div>277 278  <!-- Welcome row -->279  <div class="welcome-row">280    <div class="welcome-text">Welcome, <a href="#">Sign in?</a></div>281    <div class="welcome-search">282      <svg viewBox="0 0 24 24" stroke="#111" stroke-width="2" fill="none">283        <circle cx="11" cy="11" r="7"></circle>284        <path d="M17 17l4 4" stroke-linecap="round"></path>285      </svg>286    </div>287  </div>288 289  <!-- Tabs -->290  <div class="tabs">291    <div class="tab active">Fashion</div>292    <div class="tab">Stories</div>293    <div class="tab">Beauty</div>294    <div class="tab">Sports</div>295    <div class="tab">Designer</div>296    <div class="tab">Street</div>297  </div>298 299  <!-- Sale banner -->300  <div class="sale">301    <h1>Autumn sale</h1>302    <p>Up to 50% off even more styles</p>303  </div>304  <div class="sale-bottom">305    <div class="label">Explore more:</div>306    <div class="sale-links">307      <div class="sale-link">Clothing</div>308      <div class="sale-link">Shoes</div>309      <div class="sale-link">Accessories</div>310      <div class="sale-link">Sports</div>311      <div class="sale-link">Designer</div>312    </div>313  </div>314 315  <!-- Stories section -->316  <section class="stories">317    <h2>STORIES THAT INSPIRE</h2>318    <div class="sub">Curated weekly</div>319 320    <div class="story-scroller">321      <div class="story-card">322        <div class="img-ph">[IMG: Editorial collage - UNPACKED theme]</div>323      </div>324      <div class="story-card">325        <div class="img-ph">[IMG: Brand feature with logo]</div>326      </div>327      <div class="story-card">328        <div class="img-ph">[IMG: Seasonal picks slideshow]</div>329      </div>330    </div>331  </section>332 333  <div class="home-indicator"></div>334</div>335</body>336</html>