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>The Trend Edit - Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;13    color: #111;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #ffffff;21  }22 23  /* Status bar */24  .status-bar {25    height: 90px;26    padding: 0 36px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #111;31    font-weight: 600;32    font-size: 34px;33    letter-spacing: 0.5px;34  }35  .status-left {36    display: flex;37    align-items: center;38    gap: 18px;39  }40  .status-center {41    display: flex;42    align-items: center;43    gap: 10px;44    color: #666;45    font-size: 26px;46  }47  .status-dot {48    width: 16px;49    height: 16px;50    background: #222;51    border-radius: 50%;52    opacity: 0.85;53  }54  .status-right {55    display: flex;56    align-items: center;57    gap: 18px;58  }59  .icon {60    display: inline-block;61  }62 63  /* Header */64  .header {65    height: 120px;66    border-bottom: 1px solid #eee;67    display: flex;68    align-items: center;69    padding: 0 24px;70  }71  .header-inner {72    width: 100%;73    display: grid;74    grid-template-columns: 120px 1fr 120px;75    align-items: center;76  }77  .back-btn {78    width: 96px;79    height: 96px;80    display: flex;81    align-items: center;82    justify-content: center;83  }84  .header-title {85    text-align: center;86    font-weight: 700;87    font-size: 46px;88  }89 90  /* Banner */91  .banner {92    width: 100%;93    height: 700px;94    background: #E0E0E0;95    border: 1px solid #BDBDBD;96    display: flex;97    justify-content: center;98    align-items: center;99    color: #757575;100    font-size: 34px;101    text-align: center;102  }103 104  /* Coupon section */105  .coupon-section {106    padding: 48px 60px 24px;107    text-align: center;108  }109  .coupon-title {110    font-size: 44px;111    letter-spacing: 1.5px;112    font-weight: 800;113    margin-bottom: 36px;114  }115  .coupon-grid {116    display: grid;117    grid-template-columns: 1fr 1fr;118    gap: 28px 36px;119    padding: 0 40px;120  }121  .coupon-card {122    background: #A94734;123    color: #fff;124    border-radius: 8px;125    height: 210px;126    display: flex;127    align-items: center;128    justify-content: center;129    text-align: center;130    box-shadow: 0 2px 0 rgba(0,0,0,0.06) inset;131  }132  .coupon-amount {133    font-size: 76px;134    font-weight: 800;135    line-height: 1;136    letter-spacing: 1px;137  }138  .coupon-off {139    font-size: 30px;140    margin-left: 10px;141    font-weight: 700;142  }143  .coupon-sub {144    font-size: 28px;145    opacity: 0.95;146    margin-top: 8px;147  }148  .coupon-code {149    margin-top: 34px;150    color: #777;151    font-size: 28px;152    letter-spacing: 2px;153  }154  .coupon-code strong {155    display: block;156    margin-top: 6px;157    color: #111;158    font-size: 40px;159  }160 161  /* Category chips */162  .chip-row {163    margin-top: 28px;164    padding: 0 24px;165    overflow-x: auto;166    white-space: nowrap;167    -webkit-overflow-scrolling: touch;168  }169  .chip {170    display: inline-block;171    padding: 20px 32px;172    border: 1px solid #ddd;173    border-radius: 38px;174    margin-right: 28px;175    font-size: 36px;176    color: #111;177    background: #fff;178  }179  .chip.active {180    background: #F2E64B;181    border-color: #F2E64B;182    font-weight: 700;183  }184 185  /* Product grid */186  .product-grid {187    margin: 36px 24px 120px;188    display: grid;189    grid-template-columns: 1fr 1fr;190    gap: 28px;191  }192  .product-card {193    border: 1px solid #e6e6e6;194    border-radius: 12px;195    overflow: hidden;196    background: #fff;197    box-shadow: 0 2px 10px rgba(0,0,0,0.04);198  }199  .product-img {200    height: 640px;201    background: #E0E0E0;202    border-bottom: 1px solid #BDBDBD;203    display: flex;204    align-items: center;205    justify-content: center;206    color: #757575;207    font-size: 30px;208    text-align: center;209    padding: 12px;210  }211  .product-info {212    padding: 16px 18px 22px;213  }214  .product-title {215    font-size: 30px;216    font-weight: 600;217    color: #222;218    margin: 0 0 6px;219  }220  .product-price {221    font-size: 28px;222    color: #666;223  }224 225  /* Home indicator */226  .home-indicator {227    position: absolute;228    bottom: 20px;229    left: 50%;230    transform: translateX(-50%);231    width: 360px;232    height: 12px;233    background: #D0D0D0;234    border-radius: 8px;235  }236</style>237</head>238<body>239<div id="render-target">240 241  <!-- Status Bar -->242  <div class="status-bar">243    <div class="status-left">244      <span>8:24</span>245      <span style="font-size:26px;color:#666;">ib</span>246      <div class="status-dot"></div>247      <div class="status-dot" style="opacity:.55;"></div>248      <div class="status-dot" style="opacity:.35;"></div>249      <span style="font-size:28px;">🌐</span>250      <span style="font-size:46px; line-height:1;">•</span>251    </div>252    <div class="status-right">253      <!-- WiFi -->254      <svg class="icon" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">255        <path d="M5 9a12 12 0 0 1 14 0"></path>256        <path d="M7.5 12a8.5 8.5 0 0 1 9 0"></path>257        <path d="M10.5 15a4 4 0 0 1 3 0"></path>258        <circle cx="12" cy="18" r="1.6" fill="#111" stroke="none"></circle>259      </svg>260      <!-- Battery -->261      <svg class="icon" width="54" height="48" viewBox="0 0 28 18">262        <rect x="1" y="3" width="22" height="12" rx="2" ry="2" fill="none" stroke="#111" stroke-width="2"></rect>263        <rect x="3" y="5" width="18" height="8" fill="#111"></rect>264        <rect x="24" y="6" width="3" height="6" rx="1" fill="#111"></rect>265      </svg>266    </div>267  </div>268 269  <!-- Header -->270  <div class="header">271    <div class="header-inner">272      <div class="back-btn">273        <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">274          <path d="M15 18l-6-6 6-6"></path>275        </svg>276      </div>277      <div class="header-title">The Trend Edit</div>278      <div></div>279    </div>280  </div>281 282  <!-- Banner Image Placeholder -->283  <div class="banner">[IMG: Fashion banner with two women in trendy outfits]</div>284 285  <!-- Coupon Section -->286  <div class="coupon-section">287    <div class="coupon-title">BLACK FRIDAY EXCLUSIVE COUPON</div>288    <div class="coupon-grid">289      <div class="coupon-card">290        <div>291          <div>292            <span style="font-size:40px; vertical-align:top;">₹</span>293            <span class="coupon-amount">150</span>294            <span class="coupon-off">OFF</span>295          </div>296          <div class="coupon-sub">For order over ₹1500</div>297        </div>298      </div>299      <div class="coupon-card">300        <div>301          <div>302            <span style="font-size:40px; vertical-align:top;">₹</span>303            <span class="coupon-amount">350</span>304            <span class="coupon-off">OFF</span>305          </div>306          <div class="coupon-sub">For order over ₹2500</div>307        </div>308      </div>309      <div class="coupon-card">310        <div>311          <div>312            <span style="font-size:40px; vertical-align:top;">₹</span>313            <span class="coupon-amount">700</span>314            <span class="coupon-off">OFF</span>315          </div>316          <div class="coupon-sub">For order over ₹3500</div>317        </div>318      </div>319      <div class="coupon-card">320        <div>321          <div>322            <span style="font-size:40px; vertical-align:top;">₹</span>323            <span class="coupon-amount">1000</span>324            <span class="coupon-off">OFF</span>325          </div>326          <div class="coupon-sub">For order over ₹5000</div>327        </div>328      </div>329    </div>330    <div class="coupon-code">331      COUPON CODE332      <strong>BFS20</strong>333    </div>334  </div>335 336  <!-- Category Chips -->337  <div class="chip-row">338    <span class="chip active">Knit</span>339    <span class="chip">Sequin</span>340    <span class="chip">Metal</span>341    <span class="chip">Cropped</span>342    <span class="chip">Cargo</span>343    <span class="chip">Stripe</span>344  </div>345 346  <!-- Product Grid -->347  <div class="product-grid">348    <div class="product-card">349      <div class="product-img">[IMG: Red heart sweater on model]</div>350      <div class="product-info">351        <div class="product-title">Heart Knit Sweater</div>352        <div class="product-price">₹1,999</div>353      </div>354    </div>355    <div class="product-card" style="opacity:0.65;">356      <div class="product-img">[IMG: Striped knit sweater]</div>357      <div class="product-info">358        <div class="product-title">Striped Knit Sweater</div>359        <div class="product-price">₹1,799</div>360      </div>361    </div>362  </div>363 364  <!-- Home Indicator -->365  <div class="home-indicator"></div>366</div>367</body>368</html>