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</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, 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: 88px;26    padding: 0 36px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #111;31    font-size: 30px;32  }33  .status-right {34    display: flex;35    align-items: center;36    gap: 18px;37  }38  .dot {39    width: 14px;40    height: 14px;41    background: #111;42    border-radius: 50%;43    opacity: 0.7;44  }45  .icon-signal, .icon-wifi, .icon-battery {46    display: inline-block;47  }48 49  /* Header */50  .top-bar {51    height: 120px;52    position: relative;53    display: flex;54    align-items: center;55    justify-content: center;56  }57  .back-btn {58    position: absolute;59    left: 24px;60    top: 50%;61    transform: translateY(-50%);62    width: 72px;63    height: 72px;64    display: flex;65    align-items: center;66    justify-content: center;67    cursor: default;68  }69  .title {70    font-size: 56px;71    font-weight: 700;72    letter-spacing: -0.5px;73  }74 75  /* Grid */76  .products {77    padding: 12px 36px 160px 36px;78    display: grid;79    grid-template-columns: repeat(2, 1fr);80    column-gap: 36px;81    row-gap: 46px;82  }83  .product-card {84    min-width: 0;85  }86  .img {87    width: 100%;88    height: 720px;89    background: #E0E0E0;90    border: 1px solid #BDBDBD;91    color: #757575;92    display: flex;93    align-items: center;94    justify-content: center;95    font-size: 32px;96    text-align: center;97  }98  .name {99    font-size: 44px;100    font-weight: 500;101    margin: 22px 0 6px 0;102    line-height: 1.2;103    letter-spacing: -0.2px;104  }105  .price {106    font-size: 40px;107    margin: 6px 0 14px 0;108  }109  .swatches {110    display: flex;111    gap: 16px;112  }113  .swatch {114    width: 34px;115    height: 34px;116    border-radius: 50%;117    border: 2px solid #D9D9D9;118  }119 120  /* Bottom home indicator */121  .home-indicator {122    position: absolute;123    left: 50%;124    transform: translateX(-50%);125    bottom: 24px;126    width: 320px;127    height: 12px;128    background: #111;129    border-radius: 8px;130    opacity: 0.9;131  }132</style>133</head>134<body>135<div id="render-target">136  <!-- Status bar mimic -->137  <div class="status-bar">138    <div style="display:flex; align-items:center; gap:18px;">139      <span>8:25</span>140      <span class="dot"></span>141      <span class="dot" style="opacity:0.35;"></span>142      <span class="dot" style="opacity:0.15;"></span>143    </div>144    <div class="status-right">145      <!-- Simple globe dot -->146      <span class="dot" title="locale" style="width:18px;height:18px;"></span>147      <!-- Wi-Fi icon -->148      <svg class="icon-wifi" width="36" height="24" viewBox="0 0 24 14" fill="none">149        <path d="M2 5c5-5 15-5 20 0" stroke="#111" stroke-width="2" stroke-linecap="round"/>150        <path d="M5 8c3-3 11-3 14 0" stroke="#111" stroke-width="2" stroke-linecap="round"/>151        <path d="M9 11c2-2 4-2 6 0" stroke="#111" stroke-width="2" stroke-linecap="round"/>152        <circle cx="12" cy="13" r="1.5" fill="#111"/>153      </svg>154      <!-- Battery icon -->155      <svg class="icon-battery" width="46" height="24" viewBox="0 0 46 24" fill="none">156        <rect x="1" y="4" width="36" height="16" rx="3" stroke="#111" stroke-width="2"/>157        <rect x="39" y="8" width="6" height="8" rx="1.5" fill="#111"/>158        <rect x="4" y="7" width="30" height="10" rx="2" fill="#111"/>159      </svg>160    </div>161  </div>162 163  <!-- Navigation/title bar -->164  <div class="top-bar">165    <div class="back-btn">166      <svg width="36" height="36" viewBox="0 0 24 24" fill="none">167        <path d="M15 5l-7 7 7 7" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>168      </svg>169    </div>170    <div class="title">The Trend Edit</div>171  </div>172 173  <!-- Products grid -->174  <div class="products">175    <!-- Card 1 -->176    <div class="product-card">177      <div class="img">[IMG: Red Hearts Knit Pullover]</div>178      <div class="name">Color Block Knit Pullover</div>179      <div class="price">&#8377;1,390</div>180      <div class="swatches">181        <span class="swatch" style="background:#C62828;"></span>182        <span class="swatch" style="background:#111111;"></span>183      </div>184    </div>185 186    <!-- Card 2 -->187    <div class="product-card">188      <div class="img">[IMG: Maroon & Pink Stripe Knit Pullover]</div>189      <div class="name">Color Block Knit Pullover</div>190      <div class="price">&#8377;1,390</div>191      <div class="swatches">192        <span class="swatch" style="background:#8BAA7A;"></span>193        <span class="swatch" style="background:#6B7B49;"></span>194        <span class="swatch" style="background:#8AA6D6;"></span>195      </div>196    </div>197 198    <!-- Card 3 -->199    <div class="product-card">200      <div class="img">[IMG: Cream Cable Knit Pullover]</div>201      <div class="name">Cable Knit Pullover</div>202      <div class="price">&#8377;1,990</div>203      <!-- no swatches shown -->204    </div>205 206    <!-- Card 4 -->207    <div class="product-card">208      <div class="img">[IMG: Fuzzy Knit Cardigan]</div>209      <div class="name">Knit Cardigan</div>210      <div class="price">&#8377;1,390</div>211      <div class="swatches">212        <span class="swatch" style="background:#E9DFC9;"></span>213        <span class="swatch" style="background:#C2185B;"></span>214        <span class="swatch" style="background:#111111;"></span>215      </div>216    </div>217 218    <!-- Card 5 -->219    <div class="product-card">220      <div class="img">[IMG: Light Blue Embroidered Shirt]</div>221      <div class="name">Embroidered Shirt</div>222      <div class="price">&#8377;1,690</div>223      <div class="swatches">224        <span class="swatch" style="background:#90CAF9;"></span>225        <span class="swatch" style="background:#F48FB1;"></span>226      </div>227    </div>228 229    <!-- Card 6 -->230    <div class="product-card">231      <div class="img">[IMG: Lilac Check Knit Sweater]</div>232      <div class="name">Check Knit Sweater</div>233      <div class="price">&#8377;1,590</div>234      <div class="swatches">235        <span class="swatch" style="background:#B39DDB;"></span>236        <span class="swatch" style="background:#EFE2D1;"></span>237      </div>238    </div>239  </div>240 241  <div class="home-indicator"></div>242</div>243</body>244</html>